基於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的規範內。代碼的標準化僅僅是第一步,不是說通過校驗網頁就是標準化了。讓網頁具有良好的結構、更快的瀏覽速度、更友好的界面及對多種設備的支持才是網頁設計的最終目的。
|