你是一个职业的页面重构工作者吗？

一 设计稿的分析

1.能分清设计稿中的公共与私有的部分

从最基本的开始，分清公共部分如菜单、导航、大框架和每个独立页面所用到的部分等，至少在想法上做不同的对待。

2.在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）

在分清公共和私有部分后，分析最简单的实现方法，如哪些部分是可以平铺的，哪些是可以重复被使用的等等。

3.在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）

在分清公共和私有部分后，能准确的给出各部分的实现方案，如“滑动门技术”的实现方法有2种，选择哪种方法更合适项目？图片应该如何切？应该使用哪种HTML和CSS的写法？

4.在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）

在给出的方案中考虑是否可扩展、如何重复使用、将哪一类的图合并可以最大化页面的性能。这里还要注意有些模块的内容可能是动态的，当内容改变后如何兼容。

5.在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

考虑上面方案的综合效率，如维护所需要的成本、页面打开速度、带宽成本、服务器开销等等。

1～3点应该成为基本的技能，4～5属于更高的要求。这块的熟练度会影响到后继切图和写代码的效率、返工的机率及维护成本的高低。

二 切图

1.切成所需要的图片（如何将需要的部分切出来）

最基本的，将需要的图切出来，有时候会需要PS出自己需要的图。

2.在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）

压缩输出的图片，在不影响画面质量的前提下，尽可能的减少文件字节数。这个工作很重要，优化一张图片所带来的效果可能比优化很多的代码所带来的效果要明显得多。

3.在2的基础上，规划切出来的图片（包括文件分布）

规划切出来的图片，哪些图应该被合并，存放于哪个目录等等。

4.在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

同样是综合整体的性能、效率。

1～3点应该成为基本的技能，4属于更高的要求。这块会影响到HTML和CSS的写法，还有页面的性能（流量、链接数）。

三 XHTML和CSS的编写

1.还原设计稿视觉效果，并通过标准验证（XHTML）。

还原设计稿，是页面制作最基本的要求，不管设计稿是否符合自己的审美观，做为页面重构工作者，还原设计稿是一项职业素质。通过标准验证是检验我们输出的

质量很重要的一个方法。虽然最终的页面不一定可以通过验证，但我们所输出的静态页面大部分是可以做到通过验证的，除非有特殊的需求。当然我们不是为了过验证而做页面，是为了标准化。

2.在1的基础上，实现多浏览器的兼容（XHTML）。

兼容多浏览器，要实现多浏览器的兼容，少不了要解下各浏览器的习性。不过对于什么才是兼容，在《 中国式WEB标准 》中有讨论。

3.在2的基础上，标签语义化（XHTML）。

标签语义化，是WEB标准的核心内容，只有做好了语义化，才能说得上做到了WEB标准。虽然在国内没有统一的标准，不过一些基本的语义标签的使用还是可以定下的，如段落、列表、表格等等。

4.在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，XHTML和CSS）。

做好了上面3点，只能说单一的页面做好了，下面得考虑两个以上的页面了。模块化就是为了更好的提高复用，减少重复开发所带来的浪费。

5.在4的基础上，考虑到扩展性、复用性和可维护性（XHTML和CSS）。

做好了模块化，并不一定就是最优化的，如果考虑上扩展性、复用性和可维护方面的内容，模块化有时反而会不利于这几个方面，如何平衡这几方面，是一个更高的要求。

6.在5的基础上，考虑到整站的样式分布（包括如何实现分布）。

这个算是整站的规划了，需要多少个样式，多少个目录，这些样式文件分别存于哪个目录（当然同时也需要考虑图片的分布）

7.在6的基础上，样式写法的优化（包括技巧的应用）。

这点需要跟上面的第4、5、6点结合，需要做综合的考虑，使用更合适于项目的样式写法。

1～3点为基本的技能，4～7属于页面优化方面的内容。这块影响了一个页面甚至一个站点从无到有、从有到优。掌握好各个点的知识，会让页面在越短的时间内达到最优的状态。当然这也是个人能力的体现。

转载自[ 想了解详情请前往 ]：http://www.cssforest.org/blog/index.php?id=125