2.7　案例實(shí)戰(zhàn)

HTML5定義了一組新的結(jié)構(gòu)化語義標(biāo)記，使用它們來描述網(wǎng)頁內(nèi)容，確保HTML5文檔結(jié)構(gòu)的簡潔、友好。雖然也可以使用HTML4的div和span進(jìn)行代替設(shè)計(jì)，但是HTML5新元素簡化了頁面設(shè)計(jì)，明確的語義結(jié)構(gòu)更適合搜索引擎檢索和抓取。本節(jié)將借助HTML5新元素設(shè)計(jì)一個(gè)博客首頁。

【操作步驟】

第1步，新建HTML5文檔，保存為test1.html。

第2步，根據(jù)上面各節(jié)介紹的知識，開始構(gòu)建個(gè)人博客首頁的框架結(jié)構(gòu)。在設(shè)計(jì)結(jié)構(gòu)時(shí)，最大限度地選用HTML5新結(jié)構(gòu)元素，所設(shè)計(jì)的模板頁面基本結(jié)構(gòu)如下所示。

整個(gè)頁面包括兩部分：標(biāo)題部分和主要內(nèi)容部分。標(biāo)題部分又包括：網(wǎng)站標(biāo)題、副標(biāo)題和提示性標(biāo)題信息；主要內(nèi)容部分包括：導(dǎo)航、文章塊、側(cè)邊欄、腳注。文章塊包括3部分：標(biāo)題部分、正文部分和腳注部分。

第3步，使用HTML5大綱工具來檢查模板頁面的結(jié)構(gòu)設(shè)計(jì)是否合理。訪問http://gsnedders.html5.org/outliner/頁面，在該頁面提交本地的模板文檔test1.html，則可以看到如圖2.26所示的大綱信息。

檢查結(jié)果說明本示例模板頁面設(shè)計(jì)：結(jié)構(gòu)合理。

第4步，在模板頁面基礎(chǔ)上，開始細(xì)化本示例博客首頁。下面僅給出本例首頁的靜態(tài)頁面結(jié)構(gòu)，如果用戶需要后臺動(dòng)態(tài)生成內(nèi)容，則可以考慮在模板結(jié)構(gòu)基礎(chǔ)上另外設(shè)計(jì)。把test1.html另存為test2.html，細(xì)化后的靜態(tài)首頁效果如圖2.27所示。

第5步，設(shè)計(jì)頁面樣式部分代碼。這里主要使用了CSS3的一些新特性，如圓角（border-radius）和旋轉(zhuǎn)變換等，通過CSS設(shè)計(jì)的頁面顯示效果如圖2.28所示。相關(guān)CSS3技術(shù)介紹請參閱下面章節(jié)內(nèi)容。

考慮到本章重點(diǎn)學(xué)習(xí)HTML5新元素的應(yīng)用，所以本節(jié)示例不再深入講解CSS樣式代碼的設(shè)計(jì)過程，感興趣的讀者可以參考本節(jié)示例源代碼中的test3.html文檔。

第6步，對于早期版本瀏覽器，或者不支持HTML5的瀏覽器，需要添加一個(gè)CSS樣式，因?yàn)槲粗啬J(rèn)為行內(nèi)顯示（display:inline），對于HTML5結(jié)構(gòu)元素來說，我們需要讓它們默認(rèn)為塊狀顯示。

第7步，一些瀏覽器不允許樣式化不支持的元素。這種情形出現(xiàn)在IE8及以前的瀏覽器中，因此還需要使用下面JavaScript腳本進(jìn)行兼容。

第8步，如果瀏覽器禁用了腳本，則不會(huì)顯示，可能會(huì)出問題。因?yàn)檫@些元素定義整個(gè)頁面的結(jié)構(gòu)。為了預(yù)防這種情況，可以加上<noscript>標(biāo)簽進(jìn)行提示。