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 | 前端观察







模板实例








页面模板








Web Designer Wall - Design Trends and Tutorials








We Are not Freelancers








99 High-Quality Free (X)HTML/CSS Templates | Showcases | instantShift








Open Web Design - Download Free Web Design Templates








CSS Templates (Page 1 of 25 ) - Free CSS Templates






 


  • 对于很没经验的人来说,最好是把模板备份,然后直接在模板上修改,修改完毕记得在多个浏览器中查看。




题外话
:话说没学会走,怎么能开始学跑呢?在此,不见得就一定,虽然你不是很精通,但它是个所见即所得的东西,再加上Firefox上的firebug,只要稍加理解,不要只图着修改的快乐,很大程度上不会走也能跑了。

但基本功是必须的,等再次回过头来看css,就会觉得很简单,看到有些未曾见过的使用,也会牢记于心。




  • 于稍有一点经验的人,我觉得即便是一张图,也可以把它做成HTML。也许就是PS中所谓的切片,只是不用工具,用肉眼和经验。但是,我相信再有经验的人,
    他也不能准确给出颜色的RGB值。对于中国人来说,最方便的莫过于使用QQ。


如果你闲不够专业,Photoshop也可以,把一个像素放大到有你的小拇指大,更容易精确定位和获取。






  • 有一小点想象力的呢,可以把背景,icon统统换掉,要是自己没办法做可以再网上淘,总有适合你自己的。





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:在使用或借鉴他人的作品时,要注意版权问题。