写给热爱网页设计的新人（2）——设计与技术

写之前，我想到一个笑话：某个大公司的平面设计总监，自己在外面接外包的网页设计的活计。结果他习惯性的用了300DPI的分辨率，至于字体…别说用的是 几号字体，一整个页面就没有见用一个宋体字，据说连新闻列表都用的不是标准字体……为什么一个平面设计总监做网页会闹出这样的笑话？因为他只在他的领域是 专业的，而网页设计，他不专业。

那网页设计师的专业体现在什么地方？对排版的了解自然不能少，对用户体验（UE）的理解也是必须要的，但是最关键和最基础的，还是对于网页技术的了解。

朋友向我提到了不少设计不懂得技术所带来的问题。这个在当今中国的确是不能回避的事实。由于计算机是老外发明的（这个理由比较……），而编程之类的 都是洋码子阿拉伯数字和各种函数，造成了广大英文基础和数学基础不是特别好的中国设计师对于技术存有“敬畏之心”。这种“敬畏之心”造成了网页设计师的几 种不同的反映。有的设计师因为“敬畏之心”设计的时候缩手缩脚，失去了作为设计师的灵性；有的设计师由于“敬畏之心”努力“钻研”技术，终于成功的从一个 优秀的设计师转型为二流的程序开发；更有不少设计师为了掩饰自己的“敬畏之心”干脆抛开技术不谈，只说设计……

这种现象正常么？不正常，非常的不正常。国外很多高端的设计师，基本上对于代码都非常的熟悉，这为他们做页面设计的自由度带来了极大的提升。国内设 计师由于语言障碍加之国内应试教育的问题，对于代码方面学习天生就有一些劣势。这个是没有办法立即改变的现状。但是这也不是设计师不去学习代码的借口。我 对于技术的态度：是否精通，看个人能力和经历，但是至少要做到了解原理。

先从最基础的说起：作为一个设计师，最基本的任务是完成页面的美术效果，当你的美术效果完成后，如果自己没有能力完成后面的步骤，就需要交给后面的 程序或者前端工程师去完成。你可以完全不负责的把自己的设计丢给他们让他们去折腾，但是这么做对自己不负责。也是对客户不负责。网页设计由于技术的限制是 有技术规范在那里的。如果不了解这些技术规范，那就和之前提到的那个设计总监一样了。对于那样的设计，程序或者前端工程师会怎么处理？很简单，2种方法： 要么根据技术需要把你的页面改的面目全非；要么踢回来让你重新修改好给他，无论是哪种方法，结果都一样：1、项目进度因为你的原因拖延了，2、你和程序他 们的关系紧张了（所以才会有“设计和程序天生是冤家一说”）。所以我觉得，作为一个合格的页面设计师，在做设计的时候需要为程序留下空间。如果你没有能力 完成后面的步骤，至少需要和接手的人去沟通用什么样的方法或者技术实现什么样的效果。而这些东西，都需要你对于技术的了解。

对技术的了解是必须的，但是过分沉迷于技术就完全没有必要了。作为网页设计师，最本职的工作是做设计，技术方面学多学少，关键是看自己的精力如何分 配以及自己发展方向的取舍。技术给设计插上了自由的翅膀，同时也给设计戴上了一些镣铐，我见过不少好设计沉迷技术最后成了二流的程序员，每每想到，都觉得 可惜；所以说，如果你精力不够用，那还是把设计师最基本的东西先掌握好。先学会走，才能跑，会跑了，再想着飞，如果你飞不来，跑不了，那至少要把走路练练 好。

那么，作为一个网页设计师，最基础需要掌握一些什么东西呢？老实说，只要注意过招聘网页设计师要求的同学都会看到这么一条：“懂DIV+CSS 、JavaScript以及AS2/AS3者优先。”对了，就是这个！

说到JavaScript和AS，我觉得因人而异，有精力去学自然好，如果你能写，自然是最好了（不过这类设计设计师，就我遇到的人当中属于凤毛麟 角，而且设计能力大都不是特别强，介于设计和前端之间）；如果你写不来，但是懂原理，会改，恩，那也不错（这类设计师比重不小，如果要算的话，我也属于这 个范畴当中的）；如果你不会写也不会改，那也不是大问题，只要你懂原理，能和程序说清楚，那也问题不大（99.9%的程序都懂JS，而AS的话，正常情况 下，会有专门写AS的人去写，你需要做的是在源文件里留好接口）。如果你连原理都不懂，那建议你从现在开始，看看一些基础的教程，否则绝对影响到将来的发 展。在这方面，网上的资料非常多，我觉得没有必要特别展开，下面我们重点来说说DIV+CSS。

说到DIV+CSS，很多设计师都很怵，觉得很复杂。甚至有人找出N多理由说TAB比DIV+CSS好，可事实是如此的么？

先说说DIV+CSS是什么吧！说实话我一直觉得这个名字名不副实，比较符合逻辑的说法是基于HTML技术与CSS技术的以DIV为主体的布局方 式，DIV+CSS是一种符合W3C（万维网联盟）所推荐的标准页面布局方式。与传统TAB相比较最标志性得区别就在于用DIV（层）代替了表格元素。他 的优点如下：结构与效果分离，HTML代码更加简洁明了，同时各种标签以及HTML内元素的各具分工使得页面逻辑更清晰，更利于编程； 结构与效果分离，便于整站改版；简单的结构使得搜索引擎更加容易抓取。

当然，DIV+CSS对于切图之类的要求会相对高一些，由于需要手动去写HTML与CSS，并且要求层嵌套的逻辑结构比较严格。相对而言，切图到完 成HTML页面的时间会相对延长（我做过统计，差不多是TAB的3倍）。但是相对而言，程序开发的速度也会有很大提升，更值得注意的是，从长远来说，改版 的效率也会相应提高。这个属于一劳永逸的。从整个项目来看，最终是节约时间的。

对于DIV+CSS，我经常用IKEA的收纳盒来说事：一个页面就是一个大收纳盒，在这个收纳盒里有若干的小盒子，小盒子里可能还有若干小盒子，盒 子是什么？DIV！然后有些DIV里面为了东西收纳整齐，还会放一些CD架之类的东西，这些CD架之类的东西是什么？ul、ol、li!然后盒子放多了， 你就会觉得盒子多，不容易记，那这个时候，就需要在盒子上按照各自功能不同写标签（id命名）；然后列一张表记录一下，比如，“#放袜子的盒子 {在最顶上从左到右第三个； 长20厘米； 宽40厘米； 红色外壳； 红色底；袜子的颜色是蓝色的；}……，这个表是什么？呵呵，当然是CSS列表咯！

说到这里，很多人一定要说了：理论听起来很简单，但是我不懂CSS啊！这个其实并不是关键问题。网上有很多CSS语法手册，比如Beibeitv提到的http://www.csscompressor.com/，当然，还有很多比较好的CSS语法手册，这些东西在百度大神那里有不少。

如果你觉得学习还是有难度，恩，也不是没有办法，很多人学习DIV+CSS就是从看TAOBAO、YAHOO这样的网站的代码开始的。下面我们就来说下看代码学习的方法，就拿TAOBAO来说吧，毕竟不少人认为，他们家的DIV+CSS是中国最地道的（支持国货！）。

首先要做的事情是去下一个GOOGLE浏览器，这个是个好东西啊，用的人不多，但是打开页面速度快，而且是学习DIV+CSS的利器。

打开GOOGLE浏览器输入TAOBAO的网址（别和我说不知道哈！这个有点扯），然后点右上角的小扳手图标，在“工具”一栏选择“开发人员工具”，你就会看到页面窗口被分成上下两个窗口，上面的窗口是页面的效果，而下面一个窗口是源代码（如下图）。

在源代码左侧的窗口里将鼠标移动到相应的DIV标签上（也可以是ul、ol、li、dd、dt这类的标签。当然，DIV肯定是在页面中最常见的标 签），就会看到上方的效果窗口用半透明蓝色层显示相应的DIV位置（如下图），点下去之后，源代码右边的小窗口，就会把相应的这个DIV的CSS参数显示 出来，然后对照着CSS语法手册和实际页面上相应DIV的效果，这样就比较容易理解DIV与CSS之间的关系了。

当然，也有人会觉得这样依然无法学会如何写CSS表，这个也不是没有办法，在源代码编辑窗口里，把标签全部展看，你会看到如下的代码：

是不是被这一大堆的代码难住了？其实仔细分析就明白了，注意看红色的部分，从红色部分来看，TAOBAO首页附加CSS列表的目录是在http://a.tbcdn.cn/p/fp/2010c/，而具体哪些文件呢？仔细看看你就会发现，恩，没错，就是这些：
fp-header-min.css,fp-base-min.css,fp-channel-min.css,fp-product- min.css,fp-mall-min.css,fp-category-min.css,fp-sub-min.css,fp-gdp4p- min.css,fp-css3-min.css,fp-misc-min.css，把这些文件从服务器上下载下来，在Dreamweaver里面打开， 恩，这下可以看到CSS列表的全貌了吧？

当然，也有很多网站调用CSS的方法不一样，但是大致位置和大致语法是差不多的，只要稍微动一下脑子，这个不是问题。

说到这里，我想推荐一篇我当时学DIV+CSS时候的入门教程：http://www.blueidea.com/tech/site/2006/3574.asp，这个教程也是不少DIV+CSS高手的启蒙教程。另外，接触了DIV+CSS之后，自然会接触到W3C标准。对于这个标准，大家了解就可以，不用太在意，毕竟，标准和实践是有差距的，按照标准做，很多时候是不现实的。

关于设计与技术就说这些，最后有一句送给大家：对技术的了解不是一蹴而就的，不了解是不行的，但是急功近利往往适得其反。技术这个东西，有精力学一下，没有精力的话，还是把设计自己的老本行做好！

（未完待续）