基於Web標準的網頁設計

1 引言

Web標準是W3C組織推薦的網頁設計與開發的一系列標準的集合。 W3C是“World wide Web Consortium”的縮寫，即萬維組織，它是一個專注於“領導和發展Web技術”的國際工業行業協會，由萬維網發明者Time Berners-Lee領導，成立於1994年，先後發布了HTML4.0、XML1.0、CSS1.0、CSS2.0、XHTML1.0、DOM1.0等一系列標準。 W3C創建標準的初衷是改變二十世紀90年代Web領域中的瀏覽器生產廠商間存在的混亂的不兼容現象，因為在當時的兩大瀏覽器霸主——微軟和網景都在不停地開發各自的私有擴展，為某種瀏覽器編寫的HTML代碼極少能夠在另一種瀏覽器中正常顯示，因此Web開發者就不得不為同一站點開發多個版本的HTML代碼，這就使得網站開發和維護的費用大大增加，也為Web開發人員增加了許多額外的工作量。為此W3C從二十世紀90年代中期發布標準化HTML開始，陸續發布了一系列規範，這一系列規範約束了發送給瀏覽器的HTML代碼，旨在以一種智能、易用並便於實現的方式解決瀏覽器之間的兼容問題。
 

2 Web標準

Web標準不是一個標準，而是一系列標準。在Web標準裡，網頁主要由結構、表現和行為三部分組成，對應的標準也分為三部分，即結構化標準語言主要包括HTML、XHTML和XML，表現標準語言主要包括CSS，行為標準語言主要包括對像模型如W3C、DOM和ECMAScript等，其中ECMAScript是由ECMA（European Computer Manufactures Association，歐洲計算機製造聯合會）制定的標準。
 

2.1 HTML4.0

HyperText Markup Language（HTML，超文本標識語言）廣泛用於現在的網頁，使用HTML目的是為文檔增加結構信息，例如<title>表示標題，<p>表示段落，瀏覽器可以解析這些文檔的結構，並用相應的表現形式表現出來。 HTML最初只是用來交流文本信息的，顯示出來就是簡單的文本，沒有多少表示顯示格式的標記。但在HTML標準經歷了2.0、3.2、4.0等重要版本後它已經變得非常龐大，完全背離了HTML最初設計時主要用來表義的初衷，其中含有大量顯示格式的標記和屬性。
 

2.2 XML1.0

XML是Extensible Markup Language（可擴展標識語言）的簡寫，其設計思想來自古老的SGML（其實HTML的設計思想也是來自於SGML）。 SGML是IBM創造的一個用於出版業的文檔格式標準，後來被ISO採納作為國際標準（ISO8879）。 SGML把文檔內容與文檔格式完全分離開，使得內容提供者的內容與排版人員的工作可以相互獨立。 W3C參考SGML設計了新一代的標記語言XML，它可以建造其它任意種類的標記語言。 XML類似HTML也是標識語言，不同之處是HTML有固定的標籤，而XML允許你自己定義自己的標籤。 XML文檔目前還不能直接用瀏覽器顯示，頁面展現依然採用HTML或者XHTML，XML現在大多用於服務器與服務器（系統與系統）之間的數據交換。
 

2.3 XHML1.0

XHML實際上就量將HTML根據XML規範重新定義一遍。它的標籤與HTML4.0一致，而格式嚴格遵循XML規範。因此，雖然XHTML與HTML在瀏覽器中一欄顯示，但如果你要其轉換成PDF文件，那麼XHTML會容易的多。 XHTML有三種DTD定義：嚴格的（strict）、過渡的（Transitional）、框架的（Frameset）。 DTD是Document Type Definition 文檔類型定義的縮寫，它寫在XHTML文件的最開始，告訴瀏覽器這個文檔符合什麼規範，用什麼規範來解析。
 

2.4 CSS2.0

CSS是Cascading Style Sheets層疊樣式表的縮寫。通過CSS可以控制HTML或者XML標籤的表現形式。 1997年W3C頒布HTML4.0標準的同時也發布了有關CSS的第一個標準CSS1.0，這是對HTML3.2以前版本語法中的一次重大革新，使用CSS可以簡化HTML中各種繁瑣的標記，使得各個標記的屬性更具有一般性和能用性，使得HTML文檔具有良好的結構，實現內容和表現相分離。目前CSS的最新版本是CSS3.0，但推薦使用的標準是CSS2.0.
 

2.5 DOM1.0

DOM是Document Object Model 文檔對像模型的縮寫，它是W3C制定的標準，用於對結構化文檔建立對像模型，從而使得用戶可以通過程序語言來控制其內容結構，給腳本語言無限發揮的能力，使腳本語言很容易訪問到整個文檔的結構、內容和表現。
 

2.6 ECMAscript

ECMAscript是由ECMA發布的標準，它是基於Netscape JavaScript 的一種標準腳本語言，是一種基於對象的語言，通過DOM可以操作網頁上的任何對象，可以增加、刪除、移動或者改變對象，使得網頁的交互性大大提高。目前推薦遵循的是ECMAscript262標準。
 

3 使用Web標准設計網頁的優勢

採用Web標准設計網站，對於網站的經營者和使用者是雙贏的。對於前者，由於使用了Web標準，頁面的代碼量大大減少，網頁設計節省了帶寬，也就意味著成本的降低。此外，Web標準的應用使得網站的維護更加容易、網站改版更加方便。對於後者，使用Web標準使得網頁的下載速度與網頁的顯示速度更快，用戶還可以訂製自己喜歡的表現界面，獲得更加良好的用戶體驗。利用Web標准設計的網站能被更多的設備所訪問，如屏幕閱讀機、手機等，實現了信息跨平台的可用性，為用戶提供了多元化的訪問方式。
 

4 使用Web標准設計網頁的基本方法
4.1使用CSS實現內容與表現分離

內容是指頁面實際要傳遞的信息，包括數據、文檔、圖片或者動畫等。表現指內容呈現的樣式，例如字體、文本顏色、修飾等，所有用以改變內容外觀的部分，都稱之為“表現”。在網頁設計時，應將內容放到各種結構中去，如標題、段落等。這些結構可以是XHTML的標記如<h1>、<p>等。這些結構可以是XHTML的標記如<h1>、<p>等，也可以是XML標記。

傳統的HTML代碼中，為了實現內容的表現往往通過大量使用標籤屬性物方法來解決，如用<p><font color=”red” size=”12” face=”宋體”>Web標準</ font></p>,將段落中的文本設為紅色，12點、宋體，頁面內容和表現混雜在一起，代碼量大且不利於頁面改版，網站開發和維護效率低。為此Web標準推薦使用CSS來彌補傳統HTML功能上的不足，通過CSS控制頁面內任意對象顯示樣式。在網頁設計時可以單獨定義外部CSS文件，台中網頁設計通過連接該CSS文件獲得文件中定義的樣式，再對頁面元素應用這些樣式，實現樣式控制。

4.3 採用DIV+CSS的方法進行頁面佈局

傳統的HTML代碼中，頁面佈局是通過表格來實現的。設計時為了實現頁面佈局效果，往往會使用大量的表格或嵌套表格，由此，一個HTML文檔的內部結構將變得非常混亂，大量為了控制頁面元素位置而設置的表格充斥著文檔，頁面字節數直線攀升，同時頁面內容和表現也混雜在一起。 Web標準的出現將讓<table>標籤回歸其本身的語義而不再將其用於頁面佈局，頁面佈局使用DIV+CSS的方法來實現。
 

5 使用Web標准設計網頁的誤區
5.1 DIV+CSS就是Web標準

DIV+CSS只是一種技術手段，並不能涵蓋Web標準。 Web標準不僅僅是HTML向XHTML的轉換，更重要的是信息結構清晰、內容與表現相分離，網頁設計公司而DIV+CSS技術能較好的實現這種思想。因此我們看到的多數符合標準的頁面都是採用DIV+CSS製作。
 

5.2 Web標準就是不使用表格

Web標準並不是不允許用<table>標籤，<table>標籤也是XHTML1.0中的標準標籤，我們只是提倡用DIV+CSS佈局來替代傳統的<table>佈局。原因是用<table>佈局將表現和內容混雜在一起，結構不清晰、內容不完整，不利於內容的重用。而且從語義上講，W3C制定<table>標籤時候只是用它來做表格結構定義的，文檔中如果有表格，那麼就應該用<table>，而排版、定位這些表現的功能應該由CSS來實現。
 

5.3 通過驗證是設計網頁的最終目的

為了推廣和規範Web標準的應用，W3C在其官方網站中提供了代碼校驗，通過校驗可以判定頁面是否符合Web標準。我們必須認識到，W3C校驗僅僅是幫助網頁設計者檢查XHTML代碼的書寫是否規範，CSS的屬性是否都在CSS2的規範內。代碼的標準化僅僅是第一步，不是說通過校驗網頁就是標準化了。讓網頁具有良好的結構、更快的瀏覽速度、更友好的界面及對多種設備的支持才是網頁設計的最終目的。