|
二、基于web標(biāo)準(zhǔn)的網(wǎng)頁(yè)基本特征
從三年前開始接觸網(wǎng)頁(yè)到現(xiàn)在，我親身經(jīng)歷了國(guó)內(nèi)大多數(shù)網(wǎng)站的web標(biāo)準(zhǔn)重構(gòu)。自己在不斷的學(xué)習(xí)過程中也總結(jié)出了一點(diǎn)符合web標(biāo)準(zhǔn)的網(wǎng)頁(yè)的一般特征，和大家一起分享一下。
1、頁(yè)面代碼容易讀懂了。
舉一個(gè)簡(jiǎn)單的例子，按以前如果要實(shí)現(xiàn)一個(gè)頁(yè)面的布局，一般是使用表格來(lái)劃分整個(gè)頁(yè)面。請(qǐng)閱讀并運(yùn)行以下代碼：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
而我們現(xiàn)在，一般會(huì)簡(jiǎn)化成這樣：
<div id="header">
<menu>
<li>首頁(yè)</li>
<li>欄目一</li>
<li>欄目二</li>
<li>欄目三</li>
<li>欄目四</li>
</menu>
</div>
<div id="left">左側(cè)內(nèi)容</div>
<div id="right">右側(cè)內(nèi)容</div>
<div id="bottom">尾部?jī)?nèi)容</div>
然后再通過外部的CSS對(duì)頁(yè)面上的元素進(jìn)行布局以及美化效果，這樣的代碼相對(duì)于前一段應(yīng)該說(shuō)更精短，更易讀懂。而且這個(gè)易讀性，你還可以理解成搜索引擎也比較容易讀懂你的內(nèi)容、聾啞等有障礙人士也能通過一些特殊設(shè)備來(lái)讀懂你的內(nèi)容、用手機(jī)wap上網(wǎng)也能比較順暢地訪問你的頁(yè)面。
2、頁(yè)面變小了
同樣的網(wǎng)頁(yè)在新的標(biāo)準(zhǔn)下制作和以前的傳統(tǒng)制作相比，代碼一般能節(jié)約40%以上，當(dāng)然這是由于以下原因造成的：
- 通常在符合標(biāo)準(zhǔn)的頁(yè)面中，已經(jīng)不再直接使用<td bgcolor="red" align="center" ....></td>這種方法直接去控制顯示樣式了，而是放在網(wǎng)頁(yè)之外的CSS文件中去表現(xiàn)。
- 拋棄了表格用來(lái)布局的做法后，N個(gè)表格重復(fù)嵌套的冗余代碼也就不再出現(xiàn)了。
- 頁(yè)面上已經(jīng)不再直接使用圖片進(jìn)行裝飾了，而是采用在CSS中使用背景圖去實(shí)現(xiàn)。當(dāng)然,具有實(shí)際意義的圖片還是應(yīng)該存在的，比如網(wǎng)站的Logo圖標(biāo)、廣告圖片、新聞圖片以及其它不是用來(lái)裝飾頁(yè)面效果的、是屬于實(shí)際內(nèi)容的一部分的那類圖片。
- 大量的javascript代碼也被移植到了網(wǎng)頁(yè)外部，在頁(yè)面中將精簡(jiǎn)成<script type="text/javascript" src="../js/**.js"></script>。
當(dāng)然以上所談的特征非常的表面化、也非常的局限，只是就頁(yè)面代碼方面描述了比較淺顯的特征，針對(duì)于頁(yè)面制作人員而言,也同時(shí)提出了更高的要求，會(huì)在后邊的文章中做詳細(xì)的講解。
有興趣的朋友可以照著下邊的這個(gè)效果圖去用傳統(tǒng)的方法試著做一下，然后再查看這個(gè)頁(yè)面的html代碼，是不是覺得的確精短了很多？
到底如何去培養(yǎng)自己去編寫精練的、有語(yǔ)義的、結(jié)構(gòu)非常清晰的html代碼呢。在下一節(jié)中我們來(lái)討論如何將一個(gè)美工畫出來(lái)的效果圖拆分成結(jié)構(gòu)層、表現(xiàn)層以及行為層，以及如何正確處理三者之間的關(guān)系。
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁(yè) 新形勢(shì)下的網(wǎng)頁(yè)制作以及職業(yè)定位 下一頁(yè) 理解表現(xiàn)與內(nèi)容相脫離
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) 基于web標(biāo)準(zhǔn)的網(wǎng)頁(yè)基本特征
