摘要:目的:研究如何應用WEB標準構建具有較高可用性的網站。方法:分析現有網站可用性差的原因，引出WEB標準，給出如何應用WEB標準構建網站的方法。結果:基于WEB標準將網站的結構、表現、行為進行分離構建網站。結論:提出了具體運用WEB標準構建適應主流瀏覽器、高訪問速度、高可用性網站的方法。

關鍵詞:WEB標準;可用性;DIV+CSS

中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2009)33-9396-02

Research on Constructing the Website Based on the Web Standards

LI Xiao-jun，WANG Jia-hua

(School of Computer， Xi'an Shiyou University， Xi'an 710065， China)

Abstract: Aim: Research ahout how construct the high usability website using the WEB standards. Method:Analyze the reasons of existing website’s bad usability ， draw out the Web standard， gives out the method of how construct the website using the Web standards.Results:Separate the structure， performance and behavior of the website based on the WEB standards to construct the website. Conclusion Propose the concrete method of constructing the adaptive mainstream browser， the high access speed and the high usability website using the Web standards.

Key words: Web standards; usability; DIV+CSS

“事實上99.9%的網站都是過時的”，世界知名的網站設計師Jeffrey Zeldman在他的著作《網站重構——應用Web標準進行設計》[1]中說過這樣一句讓業內人士震驚的話。這句話用來說目前國內網站的建設情況也不算夸張，縱觀國內大部分網站依舊采用復雜的代碼、層層嵌套的表格、標簽來布局，這些冗余代碼使簡單網站需要兩至三倍的帶寬。這些網站的訪問者需要花費長時間等待頁面的打開，而且打開的頁面通常在不同的瀏覽器中差異非常之大甚至無法使用。

網站建設人員都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的\"瀏覽器大戰\"，為了兼容Netscape和IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，例如支持手機上網的WAP技術。類似的問題舉不勝舉:網站代碼臃腫、繁雜浪費了我們大量的帶寬;針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶;不易用的代碼，殘障人士無法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。

1 WEB標準

1.1 WEB標準的提出

為了解決網站設計中的這些問題，提高網站的可用性，為網站訪問者提供更好的用戶體驗，WEB標準組織(Web Standards Project)于1998年創立并提出了構建網站的WEB標準。

WEB標準不是某一個標準，而是一系列標準的集合[1]。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。對應的標準也分三方面:結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型(如W3C DOM)、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA(European Computer Manufacturers Association)的ECMAScript標準。

1.2 WEB標準的內涵

WEB標準的內涵就是將網頁的結構、表現和行為分離，如圖1所示。

當一個文檔被人為是符合了Web標準，指的就是除了符合上一節中所提到的技術，還應當符合:1) 由符合標準的XHTML組成;2) 用DIV+CSS來布局;3) 使用結構化、語義化的標記;4) 能夠在任何瀏覽器中顯示。

1.3 使用WEB標準的好處[2]

對網站瀏覽者的好處:

1) 文件下載與頁面顯示速度更快;

2) 內容能被更多的用戶所訪問(包括失明、視弱、色盲等殘障人士);

3) 內容能被更廣泛的設備所訪問(包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等等);

4) 用戶能夠通過樣式選擇定制自己的表現界面;

5) 所有頁面都能提供適于打印的版本。

對網站所有者的好處:

1) 更少的代碼和組件，容易維護;

2) 帶寬要求降低(代碼更簡潔)，成本降低。舉個例子:當 ESPN.com 使用CSS改版后，每天節約超過兩兆字節(terabytes)的帶寬;

3) 更容易被搜尋引擎搜索到;

4) 改版方便，不需要變動頁面內容;

5) 提供打印版本而不需要復制內容;

6) 提高網站易用性。在美國，有嚴格的法律條款(Section 508[1])來約束政府網站必須達到一定的易用性，其他國家也有類似的要求。

2 用WEB標準構建網站的方法[2-3]

在對Web標準的定義以及Web標準的內涵有了深入理解，結合筆者自身的網站建設經驗，筆者認為用Web標準構建網站的流程主要分為以下四個步驟，如圖2所示。

2.1 網站內容、表現和行為分離

把內容、表現和行為三個部分從單一的網頁中分離出來是基于Web標準構建網站的第一步，也是最為關鍵的一步。

內容是指網頁實際要傳遞的信息，包括了文本數據、文檔、圖片或者視頻等。表現指內容呈現的樣子，例如字體大小、字體顏色等，即改變內容外觀的部分都稱之為“表現”。行為是指為提高用戶體驗在網頁中增加的一些事件，例如，鼠標停留在網頁中的鏈接時，鏈接的下方出現該鏈接的詳細介紹等信息，通常行為并不是網頁所必須的，只是為了進一步提高網站的可用性而增加的。

對一個頁面來說，應用Web標準進行分離以后應該產生三個文件，一個XHTML數據文件、一個CSS表現文件和一個JS行為文件。這三個文件相互獨立但卻通過XHTML數據文件的外部引用而形成一個整體，實現了網頁內容、表現和行為的分離。這三部分相互分離使得改變其中任何一部分都不需要更改其它部分，從而使得網站的開發、維護更加方便。

2.2 采用正確語義的結構化標記

在實現內容、表現、行為的分離后，接下來就是對內容采用XHTML結構標記，應該遵循以下6條基本原則:

1) 為頁面添加正確的DOCTYPE，主要用來說明XHTML或者HTML是什么版本;

2) 聲名編碼語言;

3) 用小寫字母書寫所有的標簽;

4) 為圖片添加alt屬性;

5) 給所有屬性值添加引號;

6) 關閉所有標簽。

在遵循以上6條基本原則構建正確的結構化標記的過程中，還要時刻記住使用正確語義的標簽。例如段落使用標簽“

”，標題1使用標簽“

”，采用正確語義的標簽構建內容就能夠使得網站能夠被更多的瀏覽器所理解，也能夠被搜索引擎更好的搜錄。

2.3 采用CSS實現界面設計

在使用正確語言的XHTML標記構建好數據文件后，網站建設的核心工作就算完成了。接下來的工作就是用CSS為網站實現美工的界面設計，以便更好的展示網站的內容。

1) 在XHTML數據文件中引入外部CSS文件;

2) 用CSS定義元素的外觀;

3) 用DIV+CSS進行頁面布局;

4) 輔助圖片一律用背景處理;

5) 通過W3C的CSS校驗器對最終的CSS文件進行校驗。

2.4 采用Javascript與DOM技術增加行為

通過Javascript與Dom技術實現的網頁行為不應該作為網站必須要展示的內容，因為有很多訪問者有可能關閉了Javascript功能，也就意味著您精心設計的包含有網站重要內容的信息有可能不被訪問者所看到。因此，在基于Web標準構建網站的過程中，所有重要的必須要展示的內容都應該放在XHTML數據文件中。

利用Javascript和DOM技術為網站增加行為只是為了提高網站可用性，增加用戶體驗，這一部分具體的技術細節在本文不再描述。

3 總結

Web標準使得網站代碼量更少，更簡易的開發與維護，與未來瀏覽器的兼容，使得網站創建者節省時間與金錢，還可以提高網站的可用性。

此外，Web標準是未來的發展方向。相信不久就會出現越來越多基于Web標準的網站。

參考文獻:

[1] (美)Jeffrey Zeldman. 網站重構——應用Web標準進行設計[M].北京:電子工業出版社，2006.

[2] (英)Andy Budd，Cameron Moll，Simon Collison. 精通CSS—高級Web標準解決方案[M].北京:人民郵電出版社，2006.

[3] (美)Dan Cederholm.Web標準實戰[M].北京:人民郵電出版社，2008.