前言

先省略产品设计师的wireframe和mockup，为什么线框图和视觉设计稿不在叙述范围内，因为这里要做的是网页重构，从接收设计师的PSD那一刻开始：

一、接到设计稿

1、接收到PSD后，不要着急立马切片，要写出符合语义、扩展性好、节点数少的XHTML，是要花上很多时间去斟酌和思考的，如果还要考虑整站样式优化和模块组件化的话，估计半天时间又过去了，等要写CSS时候，估计又快下班了…

在分析设计稿、切图和XHTML、CSS编写之前，还有一件事情极其重要！那就是站点目录结构和资源文件的分布！千万不要蒙着头脑就PS、DW里自娱自乐！一定要向相关负责人问清楚，各项目目的录结构和文件分布怎么处理，相互关系如何！

分享一下最近工作中出现过的状况，警示下自己和同行在以后工作中需要注意哪些；公司所有专题模板重构，一百多个专题模块，噼里啪啦两个星期重构完,FTP到服务器，给编辑大概写了使用文档；后来因为站点目录和文件结构没约定好，需要调整，就开始挪文件、调目录、删服务器文件重新FTP…一个无比郁闷的下午就这么过去鸟…

所以…接下来第二步…

二、分析设计稿

2、开始分析设计稿，PS里Ctrl+1，从头至尾，又从尾到头，四面八方，仔细看设计稿；要比看Graphis系列图片还要认真，并且还要想：

• 页面有哪些模块和框架？
• 页面公共部分有哪些？
• 页面重用结构和样式有哪些，有哪些需要派生和重写？
• 标题、正文、链接…等字体、大小和颜色如何处理？
• 如何统一界面元素？
• 此处用ul还是dl？
• 图片哪些是jpg格式，哪些是gif，哪些是png格式，宽高取整…
• 小图标是否需要css sprite？
• 圆的、方的、三角…的几何图形是否可以用border实现？
• 第一个列表和最后一个列表大概怎么处理？
• 单位取值是否考虑黄金分割比？(坏笑ing)
• 考虑页面扩展性、复用性及页面性能…
• …(想到的没想到的都要想)…

时间过的好快…伤不起，不想那么多了，开始切图吧…

PS：PS 编辑-首选项-性能 里调节内存大小、暂存盘和使用图形处理器，工作起来更顺手…

三、切图设计稿

3、经过“怎么切、从哪切”后，总算把图片切完了，Alt+Shift+Ctrl+S中设置不同格式总算是导出图片了，归拣到不同目录里，开始编写XHTML和CSS，

四、还原设计稿

4、经过上面那一阵狂风骤雨般胡思乱想和精细到1px的切片后，接下来的工作需要：

还原设计稿的视觉效果，兼容各家浏览器和其马甲；

标签语义化，区别一下：<div class="title">我是标题</div><h3>我是标题</h3>，尽搞div不如无div！

优雅简洁的实现，尽量避免冗杂臃肿；

多重继承时，考虑后期维护是否需要改动HTML结构？尽量避免结构修改；

差不多通过标准验证(块级元素和行内元素特殊情况下相互嵌套难以通过W3C验证可以理解)

除了类似 .last{margin-right:0!important;}之外，一个项目下来真的不需要用!important * 和 _ ；

完事之后，本着“高内聚低耦合”的精神，尽可能的去分离、整合结构和样式！

五、后话

5、上面都做完了，好了吧？还没好！问题是一个潜伏者，或许会暴露出来被发现,或许一直藏匿着！这是一场没有硝烟的战争，我们要时刻准备着。

说这么多都是在一个比较理想的环境和团队里工作，现实是残酷的；

如自身技术能力和承受工作强度的毅力；

如负责人的重视程度，如设计师不具备模块化的思想，项目需要Grid System却不了解Grid System，不严格精确的控制,比较随意多样的公用元素，1px的差错，psd文件不规范、分组不清晰，做网页重构和前端的，就可能是一边DW里敲样式，一边PS里无限放大设计稿量间距或提颜色，毕竟重构或前端的人margin、padding多1px，页面都会乱版…

我个人目前还没有遇到和程序的问题，他们事儿太多，我做的他们还没嵌套到项目里，估计会存在套错地方和最后视觉实现的问题（后：没出现多大问题和程序交接，倒是有时产品规划上有问题，好多东西是改了又改，最后有的就搁浅没用着）；当然还有其他人的不理解，不就是做个页面吗？怎么这么慢？还有页面重构的地位感和薪水都比较低…这些都会影响到你的工作激情、质量和效率，所以工作不是一蹴而就的，团队所有成员各有各的优势，多包容，多沟通，同时保持较高的工作热情和信心，相信能够解决一些问题。