展示以CSS為基礎的設計方式能夠達到的視覺效果。只要選擇列表上的任一樣式表,就可以將它載入到這個頁面。

下載htmlcss的範例檔案。

開悟之路

各家瀏覽器的專屬標籤、低相容度的DOM,或者是缺乏完整支援的CSS等遺跡,如今都散落在闇黑而荒涼的道路上。

今日,我們必須掃除腦海裡的過時技巧。感謝W3CWaSP,以及瀏覽器作者們的努力不懈,我們終於能達到網站設計技術的開悟境界。

css Zen Garden「樣式表禪意花園」邀請您放鬆身心,冥想專家們的重要課題。讓我們以清晰的心靈之眼凝視,並且用嶄新、充滿活力的方式學習這項受人尊敬的古老技術,達到天人合一的境界。

這是關於什麼?

顯然平面設計師有必要認真看待CSS。Zen Garden致力於推廣使用、啟發靈感和鼓勵參與。你可以從瀏覽列表裡的設計著手。只要選擇列表上的任一樣式表,就可以將它載入到這個頁面。HTML程式碼都維持原狀,唯一改變的是使用的CSS檔案。沒錯,的確如此。

CSS具備完整控制超文字文件的能力。不過唯有當你把韁繩交給能從結構中創造美感的人們,用實例展示它的功能時,才能夠鼓舞人心。截至目前為止,網站結構設計師和程式員已經介紹過許多關於良好技巧與駭客手法的範例。平面設計師則還沒有在這個領域建立名聲。是需要改變的時候了。

參與

我們只邀請平面設計師參與這項計畫。你必須修改這個頁面,所以得要有良好的CSS技巧。不過這份範例檔案已經詳盡地加上註解,即使是CSS初學者也能夠以此為出發點。請參考CSS資源手冊,裡面有相關的進階教學與技巧說明。

你可以用你希望的任何方式修改樣式表,但是別更動HTML檔案。如果你從來都沒有這樣做過,也許會有點心生膽怯。不過你可以參考列表來深入地學習,並且拿範例檔案作為教學指南。

請下載htmlcss的範例檔案,並且在自己的電腦上修改。在你完成你的傑作後(請別拿半成品投稿),先將CSS檔案上傳到你的網頁伺服器,再把檔案的網址寄給我們。如果我們採用你的作品,就會自行下載相關圖片。最後成品會放在我們的伺服器上。

最新消息:我正在尋找翻譯工作者。如果你擅長英語以及其他語言,這也是一種參與這項專案的方式。欲知詳情請與我連絡。現有的翻譯文件都可以自由取得
中文翻譯:薛良斌李士傑
Traditional Chinese Translation by Liang-Bin Hsueh & Ilya Eric Lee.

益處

你為什麼要參與這項計畫呢?因為可以展現你的實力、激發創作靈感,並且在設計以CSS為基礎的案例時,這項計畫可以當作參考用的資源。即使在今日這也是極為需要的。越來越多主流站台開始擁抱這項技術,但還是不夠。雖然現在還不成氣候,但總有一天這個展覽場地會成為歷史的寶藏。

必要條件

我們希望你盡可能地使用CSS1CSS2則只可以使用已被廣泛支援的部分。css Zen Garden採用的是可行、實用的CSS語法,而不是些只能被 2% 觀眾瀏覽的超尖端技術。實際上,我們唯一的需求就只是你的CSS要合乎標準。

不幸的是,這樣的設計方式會強調各種CSS實作平台上的缺陷。即使是完全合乎標準的CSS語法,不同瀏覽器也會有不同的表現方式。而當你修好一邊,卻又讓另一邊出狀況的時候,那可真是讓人抓狂。請參考資源手冊裡關於一些錯誤修正的資訊。完整的瀏覽器支援仍然是不切實際的夢想,我們也不想要你用精準地指定像素的程式碼來跨所有平台。不過還是請你盡可能地作測試。如果你的設計沒辦法在IE5+/Win與Mozilla上正常顯示(超過 90% 以上的人們使用),我們不可能接受它。

我們要求你提出原創作品。請遵守著作權法規。請盡可能不要使用有爭議的素材;我們可以接受高雅的裸體素材,但是拒絕不當的色情圖樣。

這是個示範,也是學習用的練習題。你可以保留圖片的完整著作權,但我們要求你用與本網站相同的Creative Commons license釋出你的CSS作品,讓其他人可以從中學習。

頻寬由mediatemple提供。