基于Web標準的網頁設計應用探析

江家龍

（廣西工商職業技術學院，廣西 南寧 530003）

基于Web標準的網頁設計應用探析

江家龍

（廣西工商職業技術學院，廣西 南寧 530003）

隨著應用的不斷深入，Web標準已經成為網頁設計的主流模式。文章通過介紹 Web標準的基本內容，結合具體的網頁設計，對網頁規劃、設計、開發和維護進行探討，以期為構建高適用性、代碼簡潔、用戶友好的網頁設計提供參考。

Web標準；XHTML；DIV；CSS

隨著計算機及網絡技術的發展，Web技術應用幾乎滲透到了各個領域，如門戶網站、電子商務、博客等。網頁的規劃、設計、開發和維護也不斷規范化、標準化，其中 Web標準是目前所關注的焦點。近年來，隨著越來越多的瀏覽器和設備對該標準提供支持，Web標準已經成為當前設計的主流模式。

（一）Web標準

1.Web標準的組成

Web標準是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分為三方面：結構化標準語言主要包括 XHTML和XML；表現標準語言主要包括CSS；行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。結構決定了網頁“是什么”，表現決定了網頁看起來是“什么樣子”，而行為決定了網頁“做什么”。圖1為結構、表現、行為的關系圖。

圖1 結構、表現、行為的關系

2.Web標準的優點

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

對于網站服務器端而言，由于結構和表現分離且更少的代碼和組件，網站維護更容易，也更容易被搜尋引擎搜索到；代碼更簡潔，從而有效降低帶寬占用，提高網站訪問速度；清晰合理的結構，提高了網站的易用性；兼容性強，當瀏覽器版本更新或者出現新的網絡交互設備時所有應用能夠被繼續正確執行。

（二）基于Web標準的網頁設計

1.合理運用結構化標記XHTML

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

（1）標簽必須閉合。

（2）所有標簽名稱必須小寫。

（3）所有標簽屬性必須使用引號。

（4）標簽必須合理嵌套。

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

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

2.具體頁面設計

（1）效果圖設計

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

圖2 頁面設計及各DIV塊劃分

（2）結構設計

DIV標簽是XHTML中指定的、專門用于布局設計的容器對象。使用 DIV可以合理地標識出我們的內容區域，使得整個網頁的內容結構清晰地呈現出來。為了給后續步驟中的 CSS留下接口，可適當地給DIV標簽指定一個id或class。根據圖2，我們可以為頁面結構設計如下代碼：

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

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

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

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

＜div id="center"＞ ＜!--頁面主要內容--＞

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

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

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

＜/div＞

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

＜/div＞

（3）表現設計

CSS(Cascading Style Sheet，層疊樣式表)是一組格式設置規則，用于控制Web頁面的外觀。通過CSS我們可以對各個 DIV標簽的表現樣式進行設置，包括顯示區域、位置、背景、文字格式等。通常將這些 CSS代碼保存在一個獨立的 CSS文件中，以外部鏈接的方式鏈接到頁面當中，實現真正的內容與表現形式分離。當需要對網頁的外觀進行修改，則只需要修改 CSS文件，從而提高網站的開發和維護效率。具體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）行為設計

JavaScript是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言，常用于HTML網頁添加動態功能，比如響應用戶的各種操作。JavaScript客戶端應用程序一般是通過JavaScript語言來操作DOM（文檔對象模型）對象，改變網頁元素的屬性和行為。常見的有下拉菜單的實現和樣式切換，如本頁面使用的一種下拉菜單的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＞

（三）應用Web標準進行網頁設計的探析

1.使用正確語義的結構化標記

當我們討論 Web標準時，一些事情總是被提及，那就是結構和表現分離。結構與表現分離的一個重要方面就是使用語義化的標記來構造文檔內容。

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

其次，語義化結構網頁對搜索引擎友好。有了良好的語義結構，網頁內容自然容易被搜索引擎抓取，網站的推廣便可以省下不少的功夫。

2.W3C校驗的必要性

Web標準的本意是實現結構和表現分離，這樣做的好處是可以分別處理內容和表現，也方便搜索和內容的再利用。W3C校驗僅僅是幫助檢查XHTML代碼的書寫是否規范，CSS的屬性是否都在 CCS的規范內。W3C校驗是為了精簡我們的頁面代碼，使得任何瀏覽器和網絡設備都能正常瀏覽，從而提高我們的網頁設計工作更有效率。

3.DIV+CSS和傳統的TABLE

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

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

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

（四）結束語

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

[1] 徐勤勤.我國政府信息門戶網站建設現狀及重構[J].農業圖書情報學刊,2007(1):7.

[2] 張興竹.基于 WEB標準的網站構建方法探討[J].福建電腦,2010(4):72.

[3] 林暉.基于 WEB標準網站建設模式的探討[J].中國科技信息,2009(20):88.

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

TP391

A

1008-1151(2011)06-0048-02

2011-03-25

江家龍（1981－），男，廣西賓陽人，廣西工商職業技術學院現代教育技術中心教師。