方便快捷的h5頁面制作方法

不論想要哪一種網站建設，首先要能夠跟上整個行業的發展，這樣才能保證網站可以適應不同的需求，就像現在很多人進行網站建設時都會選擇h5語言。如果你讓這些人說它有哪些優點，我相信有大部分人都無法回答，但市場的規則就是這樣，大家都想要得的效果，作為服務商必須要能夠做出來。而今天我們為大家介紹如何制作簡單的h5網頁。

第一步.確定h5頁面的布局

網站建設過程都是最初一個想法開始的。在這個階段設計師通常會使用像Photoshop這樣的程序來處理細節，看看這些框架如何融合在一起是否合適。然后我們就可以手工編寫HTML和CSS框架，比如網站的背景顏色和字體，到內容部分的細節工作。

第二步.h5網頁制作流程

其實至今HTML5仍然是一個正在進行更新的語言。不過大家可以放心有些標準的某些部分是完整的，我們可以立即使用。

在本教程中我們使用了HTML5中的一些標簽：

1.創建你的頁面標題;

2.創建頁面頁腳;

3.將內容分成不同的部分（如主區域，側邊欄等）;

4.將單獨的文章與頁面的其余部分分開;

5.包含您的導航菜單;

6.通常包含用作您的文章的插圖的圖像。

h5頁面頭部制作

這些標簽可以通過div進行完成。不同之處在于這些標簽在語義上組織你的頁面。換句話說您可以以各種方式展示您的內容，以便您可以更輕松地確定您網頁的主題。不過今天使用HTML5也有一些障礙。其中最值得一提的是IE瀏覽器系列，它不支持這些標簽（盡管它可以用一個簡單的JavaScript包含文件來解決）。而這也是你應該把你的決定轉移到你的網站的受眾上的HTML5。而為了這個目的

您可以在第一行注意到新的，它告訴瀏覽器該頁面是用HTML5標準創建的。它也比舊的文檔類型更容易記住。在指定文檔和標題的編碼之后，我們繼續添加一個特殊的JS文件，使得Internet Explorer都能正確呈現HTML5標簽。但如果訪問者使用的IE禁用JavaScript，那頁面將無法顯示。這就是為什么，要根據您的受眾考慮網站模板的常規XHTML版本，因為該版本可在任何瀏覽器中使用。

h5正文部分制作

在正文中我們可以使用新的部分標簽，將您的頁面分成不同的語義部分。最外層是#page部，其被設置為寬960像素在樣式表（注意與舊計算機顯示器相當標準的寬度）。在這之后是標題標記和導航標記。

注意鏈接的href屬性，在＃符號之后的部分對應于我們要滾動的文章的鏈接。

h5網頁的文章部分

 

上面的標記在所有文章之間共享。首先是分界線（最好的解決方案在語義上是一個

---

行，它在HTML5中增加了一個邏輯分隔元素的作用，但不幸的是它不可能以跨瀏覽器的方式進行樣式化，所以我們將堅持一個DIV）。在此之后我們通過文章的鏈接，在導航頁面中進行滾動。

h5頁腳部分的制作

最后我們要對頁腳標簽進行創建。頁面底部包含了其余部分的JS程序，而且我們可以添加一些常用的插件等程序，以方便在接下來的設計中使用。