江家龍

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

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

江家龍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（5）特殊符號(hào)編碼表示。

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

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

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

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

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

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

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

＜div id="wrapper"＞ ＜!--整個(gè)頁(yè)面容器--＞

＜div id="header"＞頁(yè)面頂部＜/div＞

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

＜div id="banner"＞頁(yè)面 banner＜/div＞

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

＜div id="sideleft"＞頁(yè)面左邊盒子＜/div＞

＜div id="mainbox"＞頁(yè)面主盒子＜/div＞

＜div id="sideright"＞頁(yè)面右盒子＜/div＞

＜/div＞

＜div id="footer"＞頁(yè)面底部＜/div＞

＜/div＞

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

CSS(Cascading Style Sheet，層疊樣式表)是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過CSS我們可以對(duì)各個(gè) DIV標(biāo)簽的表現(xiàn)樣式進(jìn)行設(shè)置，包括顯示區(qū)域、位置、背景、文字格式等。通常將這些 CSS代碼保存在一個(gè)獨(dú)立的 CSS文件中，以外部鏈接的方式鏈接到頁(yè)面當(dāng)中，實(shí)現(xiàn)真正的內(nèi)容與表現(xiàn)形式分離。當(dāng)需要對(duì)網(wǎng)頁(yè)的外觀進(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è)計(jì)

JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言，常用于HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。JavaScript客戶端應(yīng)用程序一般是通過JavaScript語(yǔ)言來(lái)操作DOM（文檔對(duì)象模型）對(duì)象，改變網(wǎng)頁(yè)元素的屬性和行為。常見的有下拉菜單的實(shí)現(xiàn)和樣式切換，如本頁(yè)面使用的一種下拉菜單的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)頁(yè)設(shè)計(jì)的探析

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

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

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

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

2.W3C校驗(yàn)的必要性

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

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

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

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

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

（四）結(jié)束語(yǔ)

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

[1] 徐勤勤.我國(guó)政府信息門戶網(wǎng)站建設(shè)現(xiàn)狀及重構(gòu)[J].農(nóng)業(yè)圖書情報(bào)學(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].中國(guó)科技信息,2009(20):88.

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

TP391

A

1008-1151(2011)06-0048-02

2011-03-25

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