CSS模板是怎麼煉成的

作者:李麗媛

郵箱：lly219@gmail.com

日期：2009-1-12

 

 

前言（自說自話）


從初識CSS到現在已經5個年頭了。大多是斷斷續續的，可是近一年來接觸頗多，甚有一些些體會。
第一次接觸只知道font，color，background，margin，padding等基本知識，乃至連margin、padding都分不清個所以然。
在第一次Web大作業中知道了有“div+css template”,為了交差，從哪個時候就開始收集模板，看到各種各樣的模板，不由驚歎他人的配色能力，創作技巧以及豐富的想象力。
於是從圖書館借了一堆PS，配色，廣告之類的書，當時沒看出個所以然，只是覺得紙質和印刷都很好，要是弄丟了賠的錢可不少。
轉眼4年過去了，還是只會下載別人的模板，誇誇幾下改成自己實用的，基本的css還是不甚瞭解。

第五個年頭來了，工作了，自己的想法也比較多了，對web方面有了自己的見解。CSS不能說精通，但是瀏覽器差異，基本原理能說的比較清楚了。

本文


FOR：模仿者的鍊金術

一個模板的煉成可以靠很多辦法，對於沒有創作，沒有經驗的人來說，最為適當的方法就是找模板來修改。

以下是平時積累的一些模板，大多是國外的：簡潔的白色網站設計欣賞 | ShowCase | 前端觀察www.qianduan.net/showcase-of-clean-white-web-de...淡藍，淺綠demo.templateworld.com/zero/in_action/temper模板執行個體two24studios.com
頁面模板sudasuta.com/?p=1342
 Web Designer Wall - Design Trends and Tutorialswww.webdesignerwall.comWe Are not Freelancerswww.wearenotfreelancers.co.za99 High-Quality Free (X)HTML/CSS Templates | Showcases | instantShiftwww.instantshift.com/2009/09/29/99-high-quality...Open Web Design - Download Free Web Design Templateswww.openwebdesign.orgCSS Templates (Page 1 of 25 ) - Free CSS Templateswww.freecsstemplates.org/css-templates
 紋理www.qianduan.net/showcase-of-beautiful-textured... 

• 對於很沒經驗的人來說，最好是把模板備份，然後直接在模板上修改，修改完畢記得在多個瀏覽器中查看。

題外話
：話說沒學會走，怎麼能開始學跑呢？在此，不見得就一定，雖然你不是很精通，但它是個所見即所得 (WYSIWYG)的東西，再加上Firefox上的firebug，只要稍加理解，不要只圖著修改的快樂，很大程度上不會走也能跑了。
但基本功是必須的，等再次回過頭來看css，就會覺得很簡單，看到有些未曾見過的使用，也會牢記於心。

• 對
  於稍有一點經驗的人，我覺得即便是一張圖，也可以把它做成HTML。也許就是PS中所謂的切片，只是不用工具，用肉眼和經驗。但是，我相信再有經驗的人，
  他也不能準確給出顏色的RGB值。對於中國人來說，最方便的莫過於使用QQ。

如果你閑不夠專業，Photoshop也可以，把一個像素放大到有你的小拇指大，更容易精確定位和擷取。

• 有一小點想象力的呢，可以把背景，icon統統換掉，要是自己沒辦法做可以再網上淘，總有適合你自己的。

給幾個連結
http://webdesignledger.com/freebies/200-big-and-beautiful-highly-detailed-icons

http://www.noupe.com/design/the-ultimate-christmas-round-up-patterns-brushes-vectors-and-icons.html

http://webdesignledger.com/freebies/the-best-free-icon-sets-of-2009

FOR：創造者的起步

    Web出身怎麼能沒有自己一個親手原創的網頁模板呢？我承認自己沒有完完全全的設計出一個頁面模板，或多或少都參看了別人的，覺得別人做的太棒了，自己每每準備動手做時，半成品一出來就覺得顏色配的“莫名其妙”。於是又去“參看”。
這樣永遠邁不出自己的第一步。想要親手做一個屬於自己的網頁模板，需要很多的積累，需要靈感。    在我想來，創作一個模板需要這幾個步驟吧（狂想ing）：針對網頁的內容衍生出靈感，勾畫出輪廓，確定主副色調，做出背景圖、logo、icon，用css細微雕琢，瀏覽器安全色測試，壓縮。

    說起來是相當的容易，但每一個步驟都很困難，很費時間。需要掌握、學習的東西太多，從配色
、靈感捕捉
、PS
到CSS
、HTML
、JS
再到使用者體驗
，你一樣都不能少。另外要相信自己，you are special! 還別忘記跟上時代的步伐：

做網頁模板就好像服裝界一樣，也有流行的顏色和式樣，今年也有自己的流行趨勢：
http://blog.csdn.net/Vanessa219/archive/2009/12/31/5110978.aspx

推薦幾個小工具：

配色工具：http://www.21andy.com/blog/20090526/1303.html

Web設計工具：http://blog.csdn.net/Vanessa219/archive/2009/11/12/4802405.aspx

CSS工具：http://blog.csdn.net/Vanessa219/archive/2009/11/12/4802405.aspx

- -! 等我真的做出來，再和大家分享我的經驗吧 ^^（不要罵我。。。）
Tip：在使用或借鑒他人的作品時，要注意著作權問題。