WEB前台架构教程（原创）第二章（第一节PS切图规划）

转自：http://hi.baidu.com/phpidea/blog/item/9666a754d8d05259574e0013.html

我在第一章介绍了页面设计要关注的几个点，重点位置突出、分栏明确、文字要求、图片要求和区块间距这五个点，希望大家能够回顾一下，因为这一章会用到很多 上一章的内容。这一章节我将会重点讲解PS 切图规划、图 片命名和CSS命名规则、CSS 基础介绍、几 个关键的CSS属性、疑 难问题解决方案、兼 容性处理方 案、SEO 注意的事项和归 纳我们的CSS框架共八个小节。

第一节、PS切图规划


讲到PS切图对许多美工来说可能是最简单的事情了，用切片工具三下五除二就解决了，其实不然。在做切图之前，一定要好好把握整个页面的布局，请思考五分钟再动手，你会事半功倍。

我拿三个列子来说明这个问题和要注意的点。

首先讲一下法制在线的切图，大家看下图：

http://fz.voc.com.cn/
法制在线整体设计上很干净利索，第一章讲的那五大要素基本都符合，唯一不足就是字体的运用上太过繁琐，也可能是客户的要求。
对于这种层次感比较规范的页面，引出第一个要点：
先把非共性的部分拿出来，然后寻找共性和相同点来切割区块，分解问题把问题简单化处理。

网址：http://fuke.voc.com.cn/

湖南妇科网整体设计大方，有视觉冲击力，结构安排合理，属上层之作。但是里面运用了大量的大图片背景图，稍微处理不好就会影响加载速度。我们该如何处理呢？引出了第二个要点：

切图要精工细作，务必要把图片大小榨到最小化。相同有重复的背景图片能用一像素务必要用一像素处理。能用文字的尽量不要用图片。

湖南妇科网最大的图片处理不超过20k。有几个窍门可以告诉大家：大背景图片可以保存成WEB形式的PNG格式，小图片尽量使用GIF。

网址：http://hunjia.voc.com.cn/

上图为华声在线婚嫁频道，设计上太过花俏，很难找到共同点。类似这样复杂的界面，我们该如何去应对？进而我要讲一下第三个点：
首先要有耐心！从上到下，从左到右，步步为营，抽丝剥皮。千万不要急躁。
我碰到过很多类似的页面，很多切割人员在上面部位切的很到位下面就开始糊弄起来，一些大型门户的频道页面也存在类似的问题，上面是DIV下面就是table，类似这样的太多太多，大家可以找一些门户的频道页面看一下。这是做为切割人员必须要杜绝的事情。时间可以长一点，但是一定要做到位