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

W3C致力于推動互聯(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)心的問題。他們的目標(biāo)就是提供一系列經(jīng)過深思熟慮的建議，這些建議為軟件開發(fā)者和瀏覽器指明了發(fā)展的方向。若網(wǎng)站編寫者和設(shè)計(jì)師遵從了這些建議，就可以保證其站點(diǎn)能夠在最多數(shù)的用戶代理（user agent）中正常顯示并正常使用。

這里的“用戶代理”就是瀏覽器。但普通的桌面瀏覽器僅僅是眾多“用戶代理”中的冰山一角而已。隨著移動設(shè)備（例如移動電話）的迅速發(fā)展，越來越多的用戶不再被束縛在PC機(jī)前。而且，也不是所有的用戶都有能力用瀏覽器訪問網(wǎng)站——因?yàn)橛行┯脩舨荒苁褂脼g覽器。例如，一些有特殊可訪問性需求的視力不便的用戶可能需要借助屏幕閱讀器軟件、盲文設(shè)備或屏幕放大軟件等來幫助訪問網(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é)會CSS是他們最好的出路并不是件容易的事。新千年的頭幾年一直都在闡釋如何使用CSS。

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

播下種子

在2002年的晚些時(shí)候，Dave Shea開始考慮這個(gè)問題。對于那些有能力學(xué)會并用CSS做出漂亮效果的設(shè)計(jì)師來說，這類由程序員創(chuàng)建的平常之作又怎能引起他們的興趣呢？Shea同時(shí)具有程序設(shè)計(jì)和視覺藝術(shù)兩方面的背景，這也讓他堅(jiān)信CSS有成為一門設(shè)計(jì)語言的潛質(zhì)。Shea同樣意識到，那些真正應(yīng)該使用CSS的人們反而沒有在使用。于是他產(chǎn)生了這樣的想法：如果有一個(gè)網(wǎng)站，集合了大量的的優(yōu)秀CSS設(shè)計(jì)該多好啊。簡單地搜集現(xiàn)有的資源用處不大——因?yàn)檫€沒有什么現(xiàn)成的，唯一的辦法就是鼓勵優(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í)放棄“說教”他人，而是去“使用”Web標(biāo)準(zhǔn)?！笆褂谩笔切麚P(yáng)網(wǎng)站標(biāo)準(zhǔn)最有說服力的武器，“展示而不是說教”也成為這批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頁面呈現(xiàn)出完全不同的樣子。Casciano從未聲稱過他是圖形設(shè)計(jì)師，但這個(gè)項(xiàng)目的結(jié)果卻異常引人注目——人們都紛紛嘆服于CSS也能實(shí)現(xiàn)如此特別的布局效果。

由于Netscape Navigator 4在當(dāng)時(shí)還非常流行，且它對CSS的支持并不好，所以Casciano的這個(gè)項(xiàng)目也僅僅在理論上讓人贊嘆而已，離實(shí)際應(yīng)用還有相當(dāng)?shù)木嚯x。隨著Netscape Navigator 4市場占有率的不斷下降，直到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)”來遵守。

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

Douglas Bowman在其文章“使用背景圖片來替換文本”中給出了一種權(quán)宜之計(jì)（這種解決方案目前已經(jīng)是聲名狼藉）：首先在頁面中將前景圖片和某些文本元素關(guān)聯(lián)起來，然后用圖片來代替原來的文本。使用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ā)布的第一周里，每天就有成千上萬個(gè)訪問者到來。人們還志愿將禪意花園翻譯成數(shù)十種語言。很明顯，禪意花園的出現(xiàn)滿足了人們壓抑已久的對CSS設(shè)計(jì)方面的需求，這在當(dāng)時(shí)沒有任何其他網(wǎng)站能夠做到。

自發(fā)布以來，禪意花園已經(jīng)出現(xiàn)在全球范圍內(nèi)的數(shù)十種雜志、圖書中，鞏固了它在網(wǎng)站設(shè)計(jì)歷史上獨(dú)一無二的地位。感謝信更是從世界的各個(gè)角落紛至沓來，設(shè)計(jì)師和開發(fā)者用禪意花園向他們的雇主、客戶以及同事證明了使用CSS進(jìn)行設(shè)計(jì)的優(yōu)勢。提交作品的設(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)初沒有預(yù)料到的領(lǐng)域中給人們帶來了幫助。

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

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

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

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

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

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

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