Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

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


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

留下你的脚步