通向web標準之路

作者前言

今天下午，我的一個朋友問我：對于一個想了解web標準的老網頁設計師有什么建議。

我想將我的email回復貼在這里讓更多人看見將是一個很好的范例。我的回復是：這有一個全面的，非正式的，有些羅嗦的指南，送給所有聽說過web標準，希望使用web標準卻又不知道從哪里開始設計師。

正文

首先不要急著開始！在做任何事情之前做好2個心理準備，這對你的學習過程是最重要的事情：

• 學習需要時間，要循序漸進；
• 前進的過程中會遇到挫折。

但是你并不孤獨，我們中許多人正在投入到學習和使用web標準的行列中來。有一個不斷擴大的團體來幫助你更容易地學習，老手在學習技術和技巧的過程中遇到許多困難，幸運的后來者(包括我自己)將從他們的汗水與淚水中獲益。

當最后，你能熟練使用基于web標準的設計方法(使那些傳統的基于表格的方法顯得黯然無光)時，回頭再看，你將驚奇用CSS布局頁面并不是那么難。哦，當然，如果主流瀏覽器能對CSS2規范中的一些操作支持更好，實際上使用時可能會更加容易。

恩，我好象有點跑題了。

那么，讓我們立刻開始了解實際有用的信息。首先，去買一本《Designing With Web Standards》(注1)，不用多想，立刻去做。已經有了？好，現在就閱讀它，不要讓它積滿灰塵。我想說的每一點在書里都有詳細的解釋。書分為平均的兩部分，宣言(為什么你應該怎么做)和教程(你怎樣去做)。這對你是有用的。

現在，第一件事情就是樹立一個XHTML的思想體系概念，不管你選擇HTML4.01或者XHTML 1.0 Strict(有很多理由選擇其中的任一種，現在你可以先忽略這些,以后不能忽略，除非你準備做讓人麻木的苦差事。)，所有的文檔以選擇一個DOCTYPE開始。告訴瀏覽器你的文檔用什么標記語言,這樣做可以防止出現不必要的表現錯誤，否則糟糕的頁面顯示結果會使你瘋狂。打個比方：我想飛往芝加哥，就必須告訴旅行社我要去哪里，否則可能無目的的亂飛到維也納。要顯示的是HTML或者XHTML，你必須先告訴瀏覽器,設置DOCTYPE可以確保我到達"目的地"。

下一個目標：嚴謹格式的標識。這非常容易掌握。把所有的屬性加上引號(例如:<a href="link">)；正確的嵌套標識；關閉所有打開的標識(例如：<input type="text" />)。每一個標識或者元素都需要關閉。

快速注釋：不知道什么時候，標識(tags)變成了元素(elements),它們是相同的含意，不同的說法。不管你怎么稱呼它們，現在正確的稱呼似乎應該是"元素"，也許一開始就是這樣的，我不知道也沒有人告訴過我。

無論如何，每一個元素都必須被正確的關閉。如果你使用HTML4.01，可以不考慮單獨元素象<br>,<hr>和<input>，如果你使用XHTML，單獨元素也必須關閉，就是在最后加一個斜杠，例如：<br>變成<br />。

接下來,是一個有點令人糊涂的、關于XHTML屬性的規則：所有的屬性都必須有一個值，如果沒有值，就用它本身。例如<input type="radio" checked="checked" />。在HTML4.01中checked是不需要值的，而XHTML中它是必須的。

最后，XHTML需要你用小寫寫所有的代碼，HTML不區分大小寫，但XHTML區分，它遵循的是XML語法規則。

上面就是所有關于標識的變化！你已經都知道了！深呼吸、喝口啤酒，放松一下。因為那只是第一步。

第二節

現在,我們開始學習撰寫正確的HTML/XHTMLL，并在W3組織的校驗器(validator)里校驗它們。如果你寫得正確，你將看到一個藍底黃字的成功信息。嘗試喜歡這種顏色/字體組合吧，它將是你最好的朋友。

為什么校驗那么重要？有什么關系嗎？因為poorly-written(隨意的、不嚴謹的)標識將帶來完全的不可預知性。頁面的"生死"完全依賴于瀏覽器的錯誤處理方式，盡管大多數瀏覽器還能很好的支持poorly-written標識，但這是不正確的習慣。嗨，是什么使得我們習慣非標準？首要原因是瀏覽器大戰，1995年微軟能夠從Netscape地盤里競爭獲得市場就是因為IE對網頁錯誤的處理方式和 Netscape 一模一樣。

另一個觀點是：校驗幫助你發現錯誤的代碼，確保你的頁面有更一致的表現。校驗代碼是我調試布局的第一件事，相信你也是。

ok,當你第一次校驗你的第一個站點，你很可能需要忍受一下反饋回來的七八十條不可思議的錯誤信息。不幸的，雖然校驗有幫助信息，但并不完美，它只是由一些志愿者維護的。好消息是那些錯誤是關聯的，如果你發現少了一個</p>標簽并修正了它，很可能接下來的24個錯誤都沒有了。簡言之，看起來校驗結果很糟糕，但往往并不是。

現在，你已經通過了校驗，你的代碼也都符合規范。此時，你堅持了一個嚴格的指導方針，但是對為什么首先要這樣做還缺乏全面的了解。

第三節

下一步是采用良好格式(well-formed)的標識重構你已經建立的文檔，剝離那些被越來越多新近的DOCTYPE列為“不贊成”使用的表現層的屬性，將它們放在一個單獨的文件中。這就是倍受爭議的"表現與結構相分離"，這也是為什么CSS受到人們重視的原因。

這樣比方：你的文本是內容。內容是完整的，但是沒有任何內容結構的提示(比如：空格、節、標題、列表等)，你得到的只是一個雜亂的文本，完全不好用。結構層是額外的，在文檔中加個別的元素以傳達額外的結構信息，來打破雜亂的文本，使之更有邏輯性、組織性。但是那些元素并不能控制文本的默認外表。例如，你常常發現第一頁的標題比正文字體大，這并不是結構的作用。

是"表現層"出現的時候了。表現是格式化的提示，它告訴第一頁的標題是紅色的，斜體的，字體尺寸是正文字體的150%。表現層是文檔結構層以上額外的層。CSS就屬于表現層,它可以通過文檔上簡單的標記，將文檔轉換成令人驚異的形式--可以訪問CSS Zen Garden 看實例。

那么，什么是從結構中分離表現最好的方法？我們拿一段傳統代碼來說明，其中包含用于提供表現的 HTML元素或屬性。是砍掉那些bgcolors和<center>標簽的時候了，我們來一個隨堂測試：

在下面這段演示代碼中，哪些用于表現的屬性和標簽應該被消除？

準備好你的答案了嗎？好，正確的結果列在下面，這是干凈的沒有表現痕跡的結構化的代碼：

就這樣？就是這樣。

雖然這段代碼不明確符合任何一種規范，這樣的分離，更大的意義在于使用了正確的元素。使用表格布局則是次要問題，在上面的例子中，使用表格方法不正確，從長遠、謹慎的角度考慮應該移去<table>和<td>元素。雖然表格不被贊成使用，但表格依然非常有用，它們可以用在適當的地方--表格排列的數據上。

好，我們已經將格式從我們的頁面剝離，萬歲！現在還做什么呢？那只剩下一些丑陋的元素，Times-New-Roman字體的文本和線條。一點都不有趣，哪里是我們許諾的生動漂亮的頁面？

回頭看Zen Garden的例子，看見可愛的設計了嗎？看起來它們是多么不同？關鍵是：在那些漂亮的設計下面是相同的XHTML，就和你剛才未格式化的文檔一樣乏味。不對嗎？

事實上，乏味和丑陋卻有一個好的基礎，你可能已經注意到這個沒有格式化的HTML看起來就象1994年的web一樣糟糕。除了少數例外，這些元素和web本身一樣老，<h2>自從Mosaic瀏覽器出現那天就有了。

好處當然不僅限于此，幾乎不用考慮易用性(滿足那些特殊需求)，內建搜索引擎優化，帶寬的成本下降，等等等等。Jeffrey Veen已經在去年寫了"web標準的商業價值"，Roger Johansson在他最近的"使用web標準開發"中也解釋了基于標準的設計的技術和好處。

CSS已經被今天所有主流瀏覽器很好的支持，有數不盡的資源幫助學習CSS的語法、基于CSS的布局以及高級技巧。我推薦幾個比較好的：westCiv提供一個正在進行的免費的CSS課程，將幫助你入門和快速掌握。Andrew Fernandez已經建立了一個巨大的CSS資源列表，不論你是否新手都將對你有幫助。Eric Meyer已經寫了一捆書，你可以放在案頭隨時查閱。這些書包括以案例為基礎的《Eric Meyer on CSS》《More Eric Meyer on CSS》。O’Reilly出版社出版的CSS參考書：《CSS權威指南》已經發行第2版，你最好也放在桌上。同樣還有Molly Holzschlag的《The Designer’s Edge》以及Chris Schmitt的《Designing CSS Web Pages》。

深入應用CSS的細節和構建布局將花費太多時間。我就不多說了。以上就是我能給那些開始注意web標準的設計師的建議。通讀并分享您的心得，讓我們作為一個團體一起成長，我們中有許多人在積極推動web標準發展，我們有一個全球的網絡，充分利用它吧。

注釋

1.《Designing With Web Standards》一書是Zeldman寫得web標準推廣書籍，中文版已經引入，2004年5月發行，書名為《網站重構--用web標準進行設計》