🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

CSS 模板是怎么炼成的

作者:李丽媛

邮箱:[email protected]

日期: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细微雕琢,浏览器兼容测试,压缩。

    说起来是相当的容易,但每一个步骤都很困难,很费时间。需要掌握、学习的东西太多,从配色灵感捕捉PSCSSHTMLJS 再到用户体验 ,你一样都不能少。另外要相信自己,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:在使用或借鉴他人的作品时,要注意版权问题。


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步