作者前言

今天下午，我的一個(gè)朋友問(wèn)我：對(duì)于一個(gè)想了解web標(biāo)準(zhǔn)的老網(wǎng)頁(yè)設(shè)計(jì)師有什么建議。

我想將我的email回復(fù)貼在這里讓更多人看見(jiàn)將是一個(gè)很好的范例。我的回復(fù)是：這有一個(gè)全面的，非正式的，有些羅嗦的指南，送給所有聽(tīng)說(shuō)過(guò)web標(biāo)準(zhǔn)，希望使用web標(biāo)準(zhǔn)卻又不知道從哪里開(kāi)始設(shè)計(jì)師。

正文

首先不要急著開(kāi)始！在做任何事情之前做好2個(gè)心理準(zhǔn)備，這對(duì)你的學(xué)習(xí)過(guò)程是最重要的事情：

• 學(xué)習(xí)需要時(shí)間，要循序漸進(jìn)；
• 前進(jìn)的過(guò)程中會(huì)遇到挫折。

但是你并不孤獨(dú)，我們中許多人正在投入到學(xué)習(xí)和使用web標(biāo)準(zhǔn)的行列中來(lái)。有一個(gè)不斷擴(kuò)大的團(tuán)體來(lái)幫助你更容易地學(xué)習(xí)，老手在學(xué)習(xí)技術(shù)和技巧的過(guò)程中遇到許多困難，幸運(yùn)的后來(lái)者(包括我自己)將從他們的汗水與淚水中獲益。

當(dāng)最后，你能熟練使用基于web標(biāo)準(zhǔn)的設(shè)計(jì)方法(使那些傳統(tǒng)的基于表格的方法顯得黯然無(wú)光)時(shí)，回頭再看，你將驚奇用CSS布局頁(yè)面并不是那么難。哦，當(dāng)然，如果主流瀏覽器能對(duì)CSS2規(guī)范中的一些操作支持更好，實(shí)際上使用時(shí)可能會(huì)更加容易。

恩，我好象有點(diǎn)跑題了。

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

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

下一個(gè)目標(biāo)：嚴(yán)謹(jǐn)格式的標(biāo)識(shí)。這非常容易掌握。把所有的屬性加上引號(hào)(例如:<a href=”link”>)；正確的嵌套標(biāo)識(shí)；關(guān)閉所有打開(kāi)的標(biāo)識(shí)(例如：<input type=”text” />)。每一個(gè)標(biāo)識(shí)或者元素都需要關(guān)閉。

快速注釋：不知道什么時(shí)候，標(biāo)識(shí)(tags)變成了元素(elements),它們是相同的含意，不同的說(shuō)法。不管你怎么稱呼它們，現(xiàn)在正確的稱呼似乎應(yīng)該是”元素”，也許一開(kāi)始就是這樣的，我不知道也沒(méi)有人告訴過(guò)我。

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

接下來(lái),是一個(gè)有點(diǎn)令人糊涂的、關(guān)于XHTML屬性的規(guī)則：所有的屬性都必須有一個(gè)值，如果沒(méi)有值，就用它本身。例如<input type=”radio” checked=”checked” />。在HTML4.01中checked是不需要值的，而XHTML中它是必須的。

最后，XHTML需要你用小寫(xiě)寫(xiě)所有的代碼，HTML不區(qū)分大小寫(xiě)，但XHTML區(qū)分，它遵循的是XML語(yǔ)法規(guī)則。

上面就是所有關(guān)于標(biāo)識(shí)的變化！你已經(jīng)都知道了！深呼吸、喝口啤酒，放松一下。因?yàn)槟侵皇堑谝徊健?/P>

第二節(jié)

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

為什么校驗(yàn)?zāi)敲粗匾?？有什么關(guān)系嗎？因?yàn)閜oorly-written(隨意的、不嚴(yán)謹(jǐn)?shù)?標(biāo)識(shí)將帶來(lái)完全的不可預(yù)知性。頁(yè)面的”生死”完全依賴于瀏覽器的錯(cuò)誤處理方式，盡管大多數(shù)瀏覽器還能很好的支持poorly-written標(biāo)識(shí)，但這是不正確的習(xí)慣。嗨，是什么使得我們習(xí)慣非標(biāo)準(zhǔn)？首要原因是瀏覽器大戰(zhàn)，1995年微軟能夠從Netscape地盤里競(jìng)爭(zhēng)獲得市場(chǎng)就是因?yàn)镮E對(duì)網(wǎng)頁(yè)錯(cuò)誤的處理方式和 Netscape 一模一樣。

另一個(gè)觀點(diǎn)是：校驗(yàn)幫助你發(fā)現(xiàn)錯(cuò)誤的代碼，確保你的頁(yè)面有更一致的表現(xiàn)。校驗(yàn)代碼是我調(diào)試布局的第一件事，相信你也是。

ok,當(dāng)你第一次校驗(yàn)?zāi)愕牡谝粋€(gè)站點(diǎn)，你很可能需要忍受一下反饋回來(lái)的七八十條不可思議的錯(cuò)誤信息。不幸的，雖然校驗(yàn)有幫助信息，但并不完美，它只是由一些志愿者維護(hù)的。好消息是那些錯(cuò)誤是關(guān)聯(lián)的，如果你發(fā)現(xiàn)少了一個(gè)</p>標(biāo)簽并修正了它，很可能接下來(lái)的24個(gè)錯(cuò)誤都沒(méi)有了。簡(jiǎn)言之，看起來(lái)校驗(yàn)結(jié)果很糟糕，但往往并不是。

現(xiàn)在，你已經(jīng)通過(guò)了校驗(yàn)，你的代碼也都符合規(guī)范。此時(shí)，你堅(jiān)持了一個(gè)嚴(yán)格的指導(dǎo)方針，但是對(duì)為什么首先要這樣做還缺乏全面的了解。

第三節(jié)

下一步是采用良好格式(well-formed)的標(biāo)識(shí)重構(gòu)你已經(jīng)建立的文檔，剝離那些被越來(lái)越多新近的DOCTYPE列為“不贊成”使用的表現(xiàn)層的屬性，將它們放在一個(gè)單獨(dú)的文件中。這就是倍受爭(zhēng)議的”表現(xiàn)與結(jié)構(gòu)相分離”，這也是為什么CSS受到人們重視的原因。

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

是”表現(xiàn)層”出現(xiàn)的時(shí)候了。表現(xiàn)是格式化的提示，它告訴第一頁(yè)的標(biāo)題是紅色的，斜體的，字體尺寸是正文字體的150%。表現(xiàn)層是文檔結(jié)構(gòu)層以上額外的層。CSS就屬于表現(xiàn)層,它可以通過(guò)文檔上簡(jiǎn)單的標(biāo)記，將文檔轉(zhuǎn)換成令人驚異的形式–可以訪問(wèn)CSS Zen Garden 看實(shí)例。

那么，什么是從結(jié)構(gòu)中分離表現(xiàn)最好的方法？我們拿一段傳統(tǒng)代碼來(lái)說(shuō)明，其中包含用于提供表現(xiàn)的 HTML元素或?qū)傩?。是砍掉那些bgcolors和<center>標(biāo)簽的時(shí)候了，我們來(lái)一個(gè)隨堂測(cè)試：

在下面這段演示代碼中，哪些用于表現(xiàn)的屬性和標(biāo)簽應(yīng)該被消除？

準(zhǔn)備好你的答案了嗎？好，正確的結(jié)果列在下面，這是干凈的沒(méi)有表現(xiàn)痕跡的結(jié)構(gòu)化的代碼：

就這樣？就是這樣。

雖然這段代碼不明確符合任何一種規(guī)范，這樣的分離，更大的意義在于使用了正確的元素。使用表格布局則是次要問(wèn)題，在上面的例子中，使用表格方法不正確，從長(zhǎng)遠(yuǎn)、謹(jǐn)慎的角度考慮應(yīng)該移去<table>和<td>元素。雖然表格不被贊成使用，但表格依然非常有用，它們可以用在適當(dāng)?shù)牡胤?#8211;表格排列的數(shù)據(jù)上。

好，我們已經(jīng)將格式從我們的頁(yè)面剝離，萬(wàn)歲！現(xiàn)在還做什么呢？那只剩下一些丑陋的元素，Times-New-Roman字體的文本和線條。一點(diǎn)都不有趣，哪里是我們?cè)S諾的生動(dòng)漂亮的頁(yè)面？

回頭看Zen Garden的例子，看見(jiàn)可愛(ài)的設(shè)計(jì)了嗎？看起來(lái)它們是多么不同？關(guān)鍵是：在那些漂亮的設(shè)計(jì)下面是相同的XHTML，就和你剛才未格式化的文檔一樣乏味。不對(duì)嗎？

事實(shí)上，乏味和丑陋卻有一個(gè)好的基礎(chǔ)，你可能已經(jīng)注意到這個(gè)沒(méi)有格式化的HTML看起來(lái)就象1994年的web一樣糟糕。除了少數(shù)例外，這些元素和web本身一樣老，<h2>自從Mosaic瀏覽器出現(xiàn)那天就有了。

好處當(dāng)然不僅限于此，幾乎不用考慮易用性(滿足那些特殊需求)，內(nèi)建搜索引擎優(yōu)化，帶寬的成本下降，等等等等。Jeffrey Veen已經(jīng)在去年寫(xiě)了”web標(biāo)準(zhǔn)的商業(yè)價(jià)值“，Roger Johansson在他最近的”使用web標(biāo)準(zhǔn)開(kāi)發(fā)“中也解釋了基于標(biāo)準(zhǔn)的設(shè)計(jì)的技術(shù)和好處。

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

深入應(yīng)用CSS的細(xì)節(jié)和構(gòu)建布局將花費(fèi)太多時(shí)間。我就不多說(shuō)了。以上就是我能給那些開(kāi)始注意web標(biāo)準(zhǔn)的設(shè)計(jì)師的建議。通讀并分享您的心得，讓我們作為一個(gè)團(tuán)體一起成長(zhǎng)，我們中有許多人在積極推動(dòng)web標(biāo)準(zhǔn)發(fā)展，我們有一個(gè)全球的網(wǎng)絡(luò)，充分利用它吧。

注釋

1.《Designing With Web Standards》一書(shū)是Zeldman寫(xiě)得web標(biāo)準(zhǔn)推廣書(shū)籍，中文版已經(jīng)引入，2004年5月發(fā)行，書(shū)名為《網(wǎng)站重構(gòu)–用web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)》