2.1 “CSS禪意花園”簡介

標籤：des   style   class   blog   http   ext   

在網站設計，特別是在css設計領域，有一個世界範圍都非常著名的網站——CSS Zen Garden，中文名稱為“CSS禪意花園”。這個網站以最有效、最優美的方式展示了CSS的最高境界。 任何一個學習CSS的人都不應該錯過對CSS禪意花園的研究。本章將從禪意花園網站上的近千個作品中精選16個作品進行介紹，它們的HTML結構和內容是完全相同的，通過不同的CSS設定，就做出了完全不同的效果。 CSS禪意花園是一位加拿大沒計師Dave Shea建立的，他在網站設計的實際工作中逐漸認識到CSS的巨大潛力遠遠沒有被發掘出來。為了推動CSS設計的發展，他在2003年建立了“CSS禪意花園”這個網站（網址是http://www.csszengarden.com）。他知道僅僅依靠自己的力量是無法發掘出CSS的全部潛力的，因此採用了徵集作品的方式，通過大家的努力來展現CSS的魅力。 首先Dave Shea精心設計了一個網頁，把這個網頁的HTML結構和內容固定下來，為這個網頁設計了5個完全不同主題風格的CSS樣式，然後通過網站的發布，邀請全世界的廣大設計師參與CSS禪意花園的作品設計，徵集作品。 對徵集的作品要求是必須完全使用他提供的這個HTML結構和內容，不能做改動，要保證通過調用設計師提供的CSS檔案來展現作品。 讀者在網址http://www.csszengarden.com的後面加上編號，就可以查看相應的作品，例如要查看看005號作品，輸入網址http://www.csszengarden.com/?cssfile=005/005.css即可。 一、網站作品簡介 Dave Shea自己制怍的是001-005號作品。其中OOI號作品名為“Tranquille”（安靜）．這個作品幾年來一直被作為CSS Zen Garden網站的首頁，點擊以下網址查看。lodidance.com http://www.csszengarden.com/?cssfile=001/001.css 002號作品名為“Salmon Cream Cheese“（鮭魚奶油乳酪），點擊以下網址查看。 http://www.csszengarden.com/?cssfile=002/002.css 003號作品名為“Stormweather”（暴風雪），點擊以下網址查看。 http://www.csszengarden.com/?cssfile=003/003.css 004號作品名為“arch 4.20”（拱門），點擊以下網址查看。 http://www.csszengarden.com/?cssfile=004/004.css 005號作品名為“Blood Lust”（血色慾望），點擊以下網址查看。 http://www.csszengarden.com/?cssfile=005/005.css 從006號開始，都是世界各地的設計師的作品。目前在csszengarden.com上收錄了1000多個作品．它們都充分體現了設計師的豐富的創意，給無數學習CSS的人帶來了啟發。 注意：在禪意花園目前收錄的1000多個作品中，有202個被作為“官方作品”儲存在禪意花園的網站上。其餘的作品以連結的方式連結到禪意花園的網頁目錄上。每個“官方作品”都有編號，其他的作品沒有編號。 注意：2005年，Dave和一位美國的設計師Molly合作，對CSS禪意花園網站中的若干作品進行介紹、分析和評論，出版了一本書(the Zen of CSS design)，介紹了CSS設計的理念和指導思想。這本書已經被翻譯戚了十多個國家的文字出版，2007年這本書的中文版也出版了，有必趣的讀者可以參考，中文版書名為《css禪意花園》。 二、為何選擇CSS禪意花園 在網頁學習網製作CSS教程時，我們想到如果能夠從CSS禪意花園的作品中挑選出典型作品案例，分析並介紹它們的設計思路和製作方法給廣大讀者，對讀者的協助將會是很大的，這樣讀者可以學習這些特定案例的設計方法。更重要的是能夠熟悉並掌握設計思路，可以從其他數百個作品中尋找並獲得靈感。 在本教程中，共安排了4章內容與禪意花園相關，分別是本章和全教程的最後3章。 本章中將介紹一些各具特色的作品，為大家解讀CSS禪意花園的作品設計方法，使大家通過這些作品更好地瞭解CSS的巨大潛力。這些作品的設計師來自歐美近10個國家，在每個作品中都附有創作者的個人網站資訊，讀者如果有興趣，可以進一步瞭解他們的工作和生活。 本教程的最後一章將挑選其中的典型作品，進行深入的分析，在學習完本書之後，禪意花園中的絕大部分作品讀者都應該可以自己製作出來。希望讀者在學習完本書之後，能夠設計出自己的“禪意花園”作品，甚至被收錄為禪意花園的“官方作品”（目前亞洲還只有新加坡和日本等國家的設汁師的很少的幾個作品被收錄）。 點擊下載第1~7章CSS教程資源 返回《CSS教程布局之道》教程列表

編輯：網頁學習網

本文地址:http://www.lodidance.com/css/jc/661.html