基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計應(yīng)用探析

江家龍

（廣西工商職業(yè)技術(shù)學(xué)院，廣西 南寧 530003）

基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計應(yīng)用探析

江家龍

（廣西工商職業(yè)技術(shù)學(xué)院，廣西 南寧 530003）

隨著應(yīng)用的不斷深入，Web標(biāo)準(zhǔn)已經(jīng)成為網(wǎng)頁設(shè)計的主流模式。文章通過介紹 Web標(biāo)準(zhǔn)的基本內(nèi)容，結(jié)合具體的網(wǎng)頁設(shè)計，對網(wǎng)頁規(guī)劃、設(shè)計、開發(fā)和維護(hù)進(jìn)行探討，以期為構(gòu)建高適用性、代碼簡潔、用戶友好的網(wǎng)頁設(shè)計提供參考。

Web標(biāo)準(zhǔn)；XHTML；DIV；CSS

隨著計算機及網(wǎng)絡(luò)技術(shù)的發(fā)展，Web技術(shù)應(yīng)用幾乎滲透到了各個領(lǐng)域，如門戶網(wǎng)站、電子商務(wù)、博客等。網(wǎng)頁的規(guī)劃、設(shè)計、開發(fā)和維護(hù)也不斷規(guī)范化、標(biāo)準(zhǔn)化，其中 Web標(biāo)準(zhǔn)是目前所關(guān)注的焦點。近年來，隨著越來越多的瀏覽器和設(shè)備對該標(biāo)準(zhǔn)提供支持，Web標(biāo)準(zhǔn)已經(jīng)成為當(dāng)前設(shè)計的主流模式。

（一）Web標(biāo)準(zhǔn)

1.Web標(biāo)準(zhǔn)的組成

Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分為三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括 XHTML和XML；表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS；行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。結(jié)構(gòu)決定了網(wǎng)頁“是什么”，表現(xiàn)決定了網(wǎng)頁看起來是“什么樣子”，而行為決定了網(wǎng)頁“做什么”。圖1為結(jié)構(gòu)、表現(xiàn)、行為的關(guān)系圖。

圖1 結(jié)構(gòu)、表現(xiàn)、行為的關(guān)系

2.Web標(biāo)準(zhǔn)的優(yōu)點

從瀏覽客戶端的角度來看，基于 Web標(biāo)準(zhǔn)構(gòu)架可以提高文件下載與頁面顯示速度，為瀏覽者節(jié)約帶寬；內(nèi)容能被更廣泛的設(shè)備所訪問，包括屏幕閱讀機、手持設(shè)備、搜索機器人等；內(nèi)容能被更多的用戶所訪問，包括失明、視弱、色盲等殘障人士；由于結(jié)構(gòu)和表現(xiàn)分離，用戶能夠通過樣式選擇定制自己的表現(xiàn)界面；所有頁面都能提供適于打印的版本。

對于網(wǎng)站服務(wù)器端而言，由于結(jié)構(gòu)和表現(xiàn)分離且更少的代碼和組件，網(wǎng)站維護(hù)更容易，也更容易被搜尋引擎搜索到；代碼更簡潔，從而有效降低帶寬占用，提高網(wǎng)站訪問速度；清晰合理的結(jié)構(gòu)，提高了網(wǎng)站的易用性；兼容性強，當(dāng)瀏覽器版本更新或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時所有應(yīng)用能夠被繼續(xù)正確執(zhí)行。

（二）基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計

1.合理運用結(jié)構(gòu)化標(biāo)記XHTML

XHTML( The Extensible HyperText Markup Language，可擴展超文本標(biāo)識語言)，目前遵循的是W3C、2000年 1月26日推薦的XML1.0。XHTML是一種為適應(yīng)XML而重新改造的HTML，建立 XHTML的目的就是實現(xiàn) HTML向XML的過渡。盡管目前瀏覽器都兼容HTML，但是為了使網(wǎng)頁能夠符合標(biāo)準(zhǔn)，設(shè)計者應(yīng)該盡量使用XHTML規(guī)范來編寫代碼。使用XHTML規(guī)范需要注意以下事項：

（1）標(biāo)簽必須閉合。

（2）所有標(biāo)簽名稱必須小寫。

（3）所有標(biāo)簽屬性必須使用引號。

（4）標(biāo)簽必須合理嵌套。

（5）特殊符號編碼表示。

（6）所有屬性必須賦值，沒有值的就重復(fù)本身。

2.具體頁面設(shè)計

（1）效果圖設(shè)計

根據(jù)網(wǎng)站需求并通過圖形圖像軟件實現(xiàn)最終設(shè)計效果。將效果圖切片導(dǎo)出，并整理為網(wǎng)站素材待用。DIV+CSS 排版技術(shù)能較好地實現(xiàn)WEB標(biāo)準(zhǔn)中信息內(nèi)容與表現(xiàn)相分離的思想,是當(dāng)前頁面布局的主流技術(shù)。根據(jù)DIV+CSS布局思想對效果圖進(jìn)行DIV塊劃分，如下圖2所示：

圖2 頁面設(shè)計及各DIV塊劃分

（2）結(jié)構(gòu)設(shè)計

DIV標(biāo)簽是XHTML中指定的、專門用于布局設(shè)計的容器對象。使用 DIV可以合理地標(biāo)識出我們的內(nèi)容區(qū)域，使得整個網(wǎng)頁的內(nèi)容結(jié)構(gòu)清晰地呈現(xiàn)出來。為了給后續(xù)步驟中的 CSS留下接口，可適當(dāng)?shù)亟oDIV標(biāo)簽指定一個id或class。根據(jù)圖2，我們可以為頁面結(jié)構(gòu)設(shè)計如下代碼：

＜div id="wrapper"＞ ＜!--整個頁面容器--＞

＜div id="header"＞頁面頂部＜/div＞

＜div id="menu"＞菜單＜/div＞

＜div id="banner"＞頁面 banner＜/div＞

＜div id="center"＞ ＜!--頁面主要內(nèi)容--＞

＜div id="sideleft"＞頁面左邊盒子＜/div＞

＜div id="mainbox"＞頁面主盒子＜/div＞

＜div id="sideright"＞頁面右盒子＜/div＞

＜/div＞

＜div id="footer"＞頁面底部＜/div＞

＜/div＞

（3）表現(xiàn)設(shè)計

CSS(Cascading Style Sheet，層疊樣式表)是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過CSS我們可以對各個 DIV標(biāo)簽的表現(xiàn)樣式進(jìn)行設(shè)置，包括顯示區(qū)域、位置、背景、文字格式等。通常將這些 CSS代碼保存在一個獨立的 CSS文件中，以外部鏈接的方式鏈接到頁面當(dāng)中，實現(xiàn)真正的內(nèi)容與表現(xiàn)形式分離。當(dāng)需要對網(wǎng)頁的外觀進(jìn)行修改，則只需要修改 CSS文件，從而提高網(wǎng)站的開發(fā)和維護(hù)效率。具體CSS代碼如下：

* {margin:0px; padding:0px; }

body {font-size:12px; color:#666;

background:#84929D;}

#wrapper { width:850px;margin:0px

auto;background:#FFF;}

#header { width:850px; height:60px;

position:relative;}

#menu { width:850px; height:32px;

text-align:center;background-color:#014D7E;}

#banner {width:850px; height:200px; margin:4px auto

10px auto; background:#3B91C0;}

#center { width:850px;}

#sideleft {width:200px; float:left;}

#mainbox {width:440px; margin:0px 10px;

float:left;}

#sideright { width:180px; padding-top:9px;

padding-left:8px; height:385px; float:left;

border: #B2C8D5 solid 1px;}

#bottom {width:850px; height:80px;}

.clear {clear:both; width:0px; height:0px;

overflow:hidden; }

（4）行為設(shè)計

JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，常用于HTML網(wǎng)頁添加動態(tài)功能，比如響應(yīng)用戶的各種操作。JavaScript客戶端應(yīng)用程序一般是通過JavaScript語言來操作DOM（文檔對象模型）對象，改變網(wǎng)頁元素的屬性和行為。常見的有下拉菜單的實現(xiàn)和樣式切換，如本頁面使用的一種下拉菜單的JavaScript代碼：

＜script type="text/javascript"＞

function displaySubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];subMenu.style.display = "block";

}

function hideSubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

}

＜/script＞

（三）應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁設(shè)計的探析

1.使用正確語義的結(jié)構(gòu)化標(biāo)記

當(dāng)我們討論 Web標(biāo)準(zhǔn)時，一些事情總是被提及，那就是結(jié)構(gòu)和表現(xiàn)分離。結(jié)構(gòu)與表現(xiàn)分離的一個重要方面就是使用語義化的標(biāo)記來構(gòu)造文檔內(nèi)容。

首先，在 XHTML中每個標(biāo)簽都有它特定的含義。比如h1-h6 表示1-6號標(biāo)題，p表示文本段落，div表示區(qū)塊等。使用正確語義的結(jié)構(gòu)化標(biāo)記是為了讓瀏覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器更好地解析執(zhí)行，并呈現(xiàn)有意義的頁面。

其次，語義化結(jié)構(gòu)網(wǎng)頁對搜索引擎友好。有了良好的語義結(jié)構(gòu)，網(wǎng)頁內(nèi)容自然容易被搜索引擎抓取，網(wǎng)站的推廣便可以省下不少的功夫。

2.W3C校驗的必要性

Web標(biāo)準(zhǔn)的本意是實現(xiàn)結(jié)構(gòu)和表現(xiàn)分離，這樣做的好處是可以分別處理內(nèi)容和表現(xiàn)，也方便搜索和內(nèi)容的再利用。W3C校驗僅僅是幫助檢查XHTML代碼的書寫是否規(guī)范，CSS的屬性是否都在 CCS的規(guī)范內(nèi)。W3C校驗是為了精簡我們的頁面代碼，使得任何瀏覽器和網(wǎng)絡(luò)設(shè)備都能正常瀏覽，從而提高我們的網(wǎng)頁設(shè)計工作更有效率。

3.DIV+CSS和傳統(tǒng)的TABLE

table可以容納文字、圖片、鏈接、表單以及其它元素，但是 table 不應(yīng)該用來進(jìn)行網(wǎng)頁布局。table網(wǎng)頁布局主要有以下幾個缺陷：代碼臃腫、頁面渲染性能問題、不利于搜索引擎優(yōu)化、可訪問性差、不夠語義。

DIV標(biāo)簽是用來為HTML文檔內(nèi)大塊（block-level）內(nèi)容提供結(jié)構(gòu)和背景的元素，是 XHTML中指定的、專門用于布局設(shè)計的容器對象。Web標(biāo)準(zhǔn)的本意是實現(xiàn)結(jié)構(gòu)和表現(xiàn)分離，而DIV+CSS技術(shù)能較好地實現(xiàn)這種理念。DIV+CSS布局不是簡單地將原來的table用div來替代，原來的表格嵌套換成DIV嵌套，而是可以很好地將結(jié)構(gòu)和表現(xiàn)相分離的一種頁面布局技術(shù)。

當(dāng)然我們也不能拋棄table，否則將會走入另一個極端。table語義上是一個表格，主要用于數(shù)據(jù)表示，在Web標(biāo)準(zhǔn)中僅用其展示數(shù)據(jù)列表的本意。在頁面布局上我們還是首選DIV+CSS，但不管使用什么排版技術(shù)，都應(yīng)該將內(nèi)容與表現(xiàn)分離。

（四）結(jié)束語

使用 Web標(biāo)準(zhǔn)設(shè)計與制作的網(wǎng)站，由于采用符合語義的表現(xiàn)結(jié)構(gòu)且表現(xiàn)和內(nèi)容相分離，不僅能使網(wǎng)站取得理想的視覺效果，提高程序的可讀性，且文件大小、代碼量得到了有效的精簡，網(wǎng)站維護(hù)更為方便。而DIV+CSS能較好地實現(xiàn)Web標(biāo)準(zhǔn)的理念，已經(jīng)成為當(dāng)前網(wǎng)頁設(shè)計的主流技術(shù)手段。盡管Web標(biāo)準(zhǔn)還需要完善，但基于Web標(biāo)準(zhǔn)的網(wǎng)頁的內(nèi)容信息更加容易理解、執(zhí)行、交換和共享，所以 Web標(biāo)準(zhǔn)勢必成為網(wǎng)頁設(shè)計應(yīng)用的趨勢，值得我們不斷地研究探討。

[1] 徐勤勤.我國政府信息門戶網(wǎng)站建設(shè)現(xiàn)狀及重構(gòu)[J].農(nóng)業(yè)圖書情報學(xué)刊,2007(1):7.

[2] 張興竹.基于 WEB標(biāo)準(zhǔn)的網(wǎng)站構(gòu)建方法探討[J].福建電腦,2010(4):72.

[3] 林暉.基于 WEB標(biāo)準(zhǔn)網(wǎng)站建設(shè)模式的探討[J].中國科技信息,2009(20):88.

[4] 溫謙,趙偉,胡靜,李占波.網(wǎng)頁制作綜合技術(shù)教程[M].北京:人民郵電出版社,2009,5.

TP391

A

1008-1151(2011)06-0048-02

2011-03-25

江家龍（1981－），男，廣西賓陽人，廣西工商職業(yè)技術(shù)學(xué)院現(xiàn)代教育技術(shù)中心教師。