這是關於什麼?

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

CSS具備完整控制超文字文件的能力。不過唯有當你把韁繩交給能從結構中創造美感的人們,用實例展示它的功能時,才能夠鼓舞人心。設計師與工程師已經共同為網頁之美做出了貢獻,但我們仍可以更進一步。

參與

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

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

請下載HTMLCSS的範例檔案,並且在自己的電腦上修改。在你完成你的傑作後(請別拿半成品投稿),將CSS檔案上傳到你的網頁伺服器。把該檔案以及全部使用到的素材包成壓縮檔,並寄給我們連結,如果我們採用你的作品,我們會將其下載並放在我們的伺服器上。

益處

你為什麼要參與這項計畫呢?因為可以展現你的實力、激發創作靈感,並作為展示CSS驚人效果的參考資源。本網站供給現在的網頁工作者一些靈感,給予入門者學習的工具,並提供我們所期待的未來技術的展示。

必要條件

我們希望你盡可能地使用CSS 1 & 2CSS 3 & 4應使用已被廣泛支援的部分,或是提供瀏覽器不支援時的備援樣式。CSS Zen Garden採用的是可行、實用的CSS語法,而不是些只能被 2% 觀眾瀏覽的超尖端技術。實際上,我們唯一的需求就只是你的CSS要合乎標準。

幸好,這樣的設計可以展示現今不同的瀏覽器實作CSS有多完整。若你遵照方針來設計網頁,你應該可以在大多數現代瀏覽器上面看到接近一致的效果。由於現在瀏覽器種類繁多,尤其將行動裝置納入考慮時更是如此,因此不太可能在各平台上做出精準的樣式。這點沒關係,但是盡可能的測試不同瀏覽器。你的設計應該至少要在IE9+,以及最新版本的Chrome、Firefox、iOS、Android瀏覽器上運作正常(超過 90% 以上的人們使用)。

我們要求你提出原創作品;請遵守著作權法規,盡可能不要使用有爭議的素材,並納入獨特且有趣的視覺題材到你的作品中;我們不太需要另一個跟花園有關的設計。

這是個示範,也是學習用的練習題。你可以保留圖片的完整著作權(具有有限度的例外,請參考投稿方針),但我們要求你用與本網站相同的創用CC授權釋出你的CSS作品,讓其他人可以從中學習。

Dave Shea提供。頻寬由mediatemple慷慨贊助。Zen Garden之書,現正販售中。