W3C規(guī)范大都專注于解決較高層的編碼及架構(gòu)方面的問(wèn)題，但普通的網(wǎng)站設(shè)計(jì)師卻很少需要關(guān)心這些。即使這樣， W3C還是從20世紀(jì)90年中期發(fā)布標(biāo)準(zhǔn)化HTML版本開始，陸續(xù)提供了一系列的規(guī)范。這一系列規(guī)范約束了發(fā)送給瀏覽器的HTML代碼，旨在以一種智能、易用并便于實(shí)現(xiàn)的方式解決瀏覽器之間的兼容性問(wèn)題。

W3C致力于推動(dòng)互聯(lián)網(wǎng)的發(fā)展。自1996年發(fā)布第一份規(guī)范開始，W3C不停地挑戰(zhàn)著現(xiàn)有的互聯(lián)網(wǎng)規(guī)則，并為很多種技術(shù)提供了規(guī)范的解決方案。

為什么是這些標(biāo)準(zhǔn)？

W3C工作組成員由很多不同背景的專業(yè)人士組成，這些專業(yè)人士聚集在一起，討論解決一些超前的、普通網(wǎng)站設(shè)計(jì)師永遠(yuǎn)都不用關(guān)心的問(wèn)題。他們的目標(biāo)就是提供一系列經(jīng)過(guò)深思熟慮的建議，這些建議為軟件開發(fā)者和瀏覽器指明了發(fā)展的方向。若網(wǎng)站編寫者和設(shè)計(jì)師遵從了這些建議，就可以保證其站點(diǎn)能夠在最多數(shù)的用戶代理（user agent）中正常顯示并正常使用。

這里的“用戶代理”就是瀏覽器。但普通的桌面瀏覽器僅僅是眾多“用戶代理”中的冰山一角而已。隨著移動(dòng)設(shè)備（例如移動(dòng)電話）的迅速發(fā)展，越來(lái)越多的用戶不再被束縛在PC機(jī)前。而且，也不是所有的用戶都有能力用瀏覽器訪問(wèn)網(wǎng)站——因?yàn)橛行┯脩舨荒苁褂脼g覽器。例如，一些有特殊可訪問(wèn)性需求的視力不便的用戶可能需要借助屏幕閱讀器軟件、盲文設(shè)備或屏幕放大軟件等來(lái)幫助訪問(wèn)網(wǎng)站。

因?yàn)閃3C創(chuàng)建這些規(guī)范的目的是改變20世紀(jì)90年代Web領(lǐng)域中的各種混亂的不兼容現(xiàn)象，所以很難為所有用戶代理制定出統(tǒng)一的網(wǎng)站規(guī)范?？紤]到這些，W3C發(fā)布了一系列的規(guī)范，包括HTML 4.01、XHTML、層疊樣式表（Cascading Style Sheets，CSS）和DOM等。

這些規(guī)范所包含的技術(shù)都是網(wǎng)站標(biāo)準(zhǔn)項(xiàng)目組織里的設(shè)計(jì)師和開發(fā)者所希望看到的。遵從這些規(guī)范，我們就可以在保證網(wǎng)站支持大多數(shù)最廣泛的用戶代理的同時(shí)，也能夠?qū)ζ洳季诌M(jìn)行精確的控制（使用CSS），但這確實(shí)是一種與以往完全不同的網(wǎng)站創(chuàng)建方法。要讓設(shè)計(jì)師們相信學(xué)會(huì)CSS是他們最好的出路并不是件容易的事。新千年的頭幾年一直都在闡釋如何使用CSS。

當(dāng)時(shí)，研究CSS的人們主要是程序設(shè)計(jì)師，這些程序設(shè)計(jì)師在如何從技術(shù)角度使用CSS方面非常精通，但他們的作品卻都略顯簡(jiǎn)單乏味，從藝術(shù)角度看，實(shí)在不敢恭維。而圖形設(shè)計(jì)師卻無(wú)法掌握使用CSS的精髓，因?yàn)楫?dāng)時(shí)并沒(méi)有什么出色的CSS設(shè)計(jì)作品可供參考。

播下種子

在2002年的晚些時(shí)候，Dave Shea開始考慮這個(gè)問(wèn)題。對(duì)于那些有能力學(xué)會(huì)并用CSS做出漂亮效果的設(shè)計(jì)師來(lái)說(shuō)，這類由程序員創(chuàng)建的平常之作又怎能引起他們的興趣呢？Shea同時(shí)具有程序設(shè)計(jì)和視覺藝術(shù)兩方面的背景，這也讓他堅(jiān)信CSS有成為一門設(shè)計(jì)語(yǔ)言的潛質(zhì)。Shea同樣意識(shí)到，那些真正應(yīng)該使用CSS的人們反而沒(méi)有在使用。于是他產(chǎn)生了這樣的想法：如果有一個(gè)網(wǎng)站，集合了大量的的優(yōu)秀CSS設(shè)計(jì)該多好啊。簡(jiǎn)單地搜集現(xiàn)有的資源用處不大——因?yàn)檫€沒(méi)有什么現(xiàn)成的，唯一的辦法就是鼓勵(lì)優(yōu)秀的設(shè)計(jì)師去創(chuàng)造全新的作品。就這樣，Shea在內(nèi)心播下了禪意花園的種子。

先驅(qū)者

Web標(biāo)準(zhǔn)項(xiàng)目的創(chuàng)始人之一Jeffrey Zeldman在2002年發(fā)表了一篇文章，文中懇求那些已經(jīng)了解了基于Web標(biāo)準(zhǔn)設(shè)計(jì)的好處的人們暫時(shí)放棄“說(shuō)教”他人，而是去“使用”Web標(biāo)準(zhǔn)。“使用”是宣揚(yáng)網(wǎng)站標(biāo)準(zhǔn)最有說(shuō)服力的武器，“展示而不是說(shuō)教”也成為這批Web標(biāo)準(zhǔn)擁護(hù)者的信條。

2002年，一個(gè)叫Chris Casciano的Web開發(fā)者發(fā)起了一個(gè)名為Daily CSS Fun的項(xiàng)目。Casciano計(jì)劃在為期一個(gè)月的時(shí)間內(nèi)，每天發(fā)布一個(gè)新版本的CSS文件，讓同一個(gè)HTML頁(yè)面呈現(xiàn)出完全不同的樣子。Casciano從未聲稱過(guò)他是圖形設(shè)計(jì)師，但這個(gè)項(xiàng)目的結(jié)果卻異常引人注目——人們都紛紛嘆服于CSS也能實(shí)現(xiàn)如此特別的布局效果。

由于Netscape Navigator 4在當(dāng)時(shí)還非常流行，且它對(duì)CSS的支持并不好，所以Casciano的這個(gè)項(xiàng)目也僅僅在理論上讓人贊嘆而已，離實(shí)際應(yīng)用還有相當(dāng)?shù)木嚯x。隨著Netscape Navigator 4市場(chǎng)占有率的不斷下降，直到2003年IE開始一統(tǒng)天下，CSS布局大行其道的日子似乎已經(jīng)指日可待。CSS的全面應(yīng)用重新被提上了議事日程。

早期的想法

禪意花園的構(gòu)思終于成熟，2003年5月，Shea發(fā)布了他的個(gè)人站點(diǎn)，很快又轉(zhuǎn)到了現(xiàn)在的域名之上。

備注

需要注意的是，所謂網(wǎng)站“標(biāo)準(zhǔn)”，并不是傳統(tǒng)意義上的“標(biāo)準(zhǔn)”——“網(wǎng)站標(biāo)準(zhǔn)”只是一種建議而已，并不是強(qiáng)制執(zhí)行的規(guī)定。這一點(diǎn)在W3C的文檔中也有體現(xiàn)：文檔的名稱都以“建議（Recommendation）”命名，而不是“標(biāo)準(zhǔn)（Standard）”。盡管如此，很多開發(fā)者仍舊將其作為“標(biāo)準(zhǔn)”來(lái)遵守。

這些設(shè)計(jì)似乎顯得有些令人厭倦，因?yàn)樗鼈兌既鄙倭藞D片修飾。背景圖片可以通過(guò)CSS的background-image屬性聲明，而作為內(nèi)容的前景圖片則不能。若是使用了<img>標(biāo)簽，則頁(yè)面就會(huì)喪失了靈活性：我們將不得不被限制于一些確定了的圖片中，無(wú)論CSS樣式如何變化，都不能改變這些已經(jīng)用<img>標(biāo)簽定義了的圖片。但是，很多時(shí)候只使用背景圖片是不夠的，因?yàn)樵O(shè)計(jì)時(shí)所用的圖片往往用來(lái)修飾文本，也就是說(shuō)，這些圖片需要放置于文本的兩側(cè)，而不是作為背景和文字混在一起。顯然，只使用背景圖片還不能完全滿足這樣的設(shè)計(jì)要求。

Douglas Bowman在其文章“使用背景圖片來(lái)替換文本”中給出了一種權(quán)宜之計(jì)（這種解決方案目前已經(jīng)是聲名狼藉）：首先在頁(yè)面中將前景圖片和某些文本元素關(guān)聯(lián)起來(lái)，然后用圖片來(lái)代替原來(lái)的文本。使用CSS加上一些少量的額外標(biāo)記，即可很容易地實(shí)現(xiàn)這個(gè)hack——與<img>標(biāo)簽及其alt屬性的表現(xiàn)非常類似。

2003年4月，禪意花園的計(jì)劃正式開始了。設(shè)計(jì)者發(fā)布了一個(gè)單獨(dú)的HTML文件作為所有設(shè)計(jì)的基礎(chǔ)，隨著這個(gè)HTML文件發(fā)布的還有5個(gè)初始設(shè)計(jì)。

禪意花園的影響

幾天之內(nèi)，陸續(xù)有用戶開始提交他們的設(shè)計(jì)：在站點(diǎn)發(fā)布的第一周里，每天就有成千上萬(wàn)個(gè)訪問(wèn)者到來(lái)。人們還志愿將禪意花園翻譯成數(shù)十種語(yǔ)言。很明顯，禪意花園的出現(xiàn)滿足了人們壓抑已久的對(duì)CSS設(shè)計(jì)方面的需求，這在當(dāng)時(shí)沒(méi)有任何其他網(wǎng)站能夠做到。

自發(fā)布以來(lái)，禪意花園已經(jīng)出現(xiàn)在全球范圍內(nèi)的數(shù)十種雜志、圖書中，鞏固了它在網(wǎng)站設(shè)計(jì)歷史上獨(dú)一無(wú)二的地位。感謝信更是從世界的各個(gè)角落紛至沓來(lái)，設(shè)計(jì)師和開發(fā)者用禪意花園向他們的雇主、客戶以及同事證明了使用CSS進(jìn)行設(shè)計(jì)的優(yōu)勢(shì)。提交作品的設(shè)計(jì)師也由此聲名遠(yuǎn)揚(yáng)，禪意花園甚至推進(jìn)了他們的職業(yè)發(fā)展。

雖然創(chuàng)建和維護(hù)是由一個(gè)人完成的，但禪意花園在很大程度上是志愿者協(xié)作的結(jié)果——才華橫溢的設(shè)計(jì)師們貢獻(xiàn)給自己的作品，幫助它獲得成功。每個(gè)人都能在禪意花園中找到不同的價(jià)值。雖然創(chuàng)建禪意花園的本意是演示CSS在設(shè)計(jì)中的作用，但它同樣在很多當(dāng)初沒(méi)有預(yù)料到的領(lǐng)域中給人們帶來(lái)了幫助。

□ 若是某位設(shè)計(jì)師正在被一個(gè)布局問(wèn)題所困擾，那么現(xiàn)在他有了尋求幫助的地方——禪意花園中有數(shù)百個(gè)不同的設(shè)計(jì)，他所遇到的問(wèn)題極有可能已經(jīng)被別人解決了。禪意花園允許并鼓勵(lì)人們學(xué)習(xí)它的CSS，并將其使用在其他站點(diǎn)上。

□ 類似地，禪意花園中也不斷出現(xiàn)新的頁(yè)面布局技術(shù)及CSS效果。我們都有機(jī)會(huì)在數(shù)百個(gè)作品中找到一些新奇的東西。

□ 禪意花園還是一個(gè)絕佳的瀏覽器兼容性測(cè)試網(wǎng)站。其中所有的設(shè)計(jì)都使用有效的、基于標(biāo)準(zhǔn)的代碼編寫，所以理論上這些設(shè)計(jì)應(yīng)該能夠在所有瀏覽器中以一致的方式呈現(xiàn)出來(lái)。（當(dāng)然實(shí)際上并非如此完美。由于某些瀏覽器的缺陷或?qū)δ承┰厝狈χС?，大多?shù)設(shè)計(jì)師都不得不考慮瀏覽器之間顯而易見的呈現(xiàn)差別，并使用多種CSS過(guò)濾器和hack來(lái)解決。）

□ 當(dāng)你正嘗試說(shuō)服你的雇主或客戶使用網(wǎng)站標(biāo)準(zhǔn)設(shè)計(jì)頁(yè)面時(shí)，禪意花園就是一個(gè)極其令人信服的證明。

□ 當(dāng)你靈感枯竭的時(shí)候，禪意花園中的設(shè)計(jì)或許能夠給你一些啟發(fā)。感覺江郎才盡了？來(lái)禪意花園逛逛吧，說(shuō)不定靈感就在不經(jīng)意之間出現(xiàn)了呢！

□ 禪意花園為經(jīng)驗(yàn)豐富的專家和積極努力的設(shè)計(jì)師提供了一個(gè)良好的展示自我的平臺(tái)。雇主和潛在的客戶很愿意主動(dòng)聯(lián)系它們中意作品的設(shè)計(jì)師，提供工作或者合作機(jī)會(huì)。這些優(yōu)秀的作品也經(jīng)常出現(xiàn)在國(guó)際性的圖書和雜志中。

□ 禪意花園已成為教師和講師在教授當(dāng)代網(wǎng)站設(shè)計(jì)實(shí)踐時(shí)的一個(gè)有力工具。