网页重构是什么？网页重构工程师需要掌握什么技能？

对于网页设计师来说，相信你一定清楚前端和后端，而与我们设计师息息相关的无疑是前端设计，而从事这个岗位的设计师就是前端设计师/工程师，那么你知道网页重构是什么？如果想从事网页重构这方面的工作需要掌握什么样的技能呢？下面品索教育从网页重构的定义及从事网页重构的设计师必备的技能以及工作流程为大家全面讲解网页设计中的网页重构。

网页重构是把设计图转变成网页，如果不重构，看到的只是像图纸一样的东西，无法实现网页中的点击，跳转等，要重构需要掌握Web前端的各种知识JS,CSS,HTML,JQ等，熟悉各种软件的使用（DW，PS，FW）等。在工作中可能还需要配合后台工作者拉取动态数据。跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。

好的页面的三要素：

1. 结构完整，可通过标准验证；

2. 标签语义化，结构合理；

3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化。

前端开发工程师的工作内容是使用 JavaScript、ActionScript 等语言编写客户端脚本，实现动态效果。比如：AJAX 提交文章评论、通过本地存储保存用户历史浏览记录等等。偏开发。

网页重构工程师的工作内容是通过编写 CSS、合理化页面结构来实现页面效果和提升性能。比如：对页面进行微数据处理和SEO、页面样式统一等等。 偏设计。

前者的重点在 JavaScript、ActionScript，甚至 iOS、Android客户端程序；而后者的重点在 HTML、CSS、SEO 等。

网页重构工程师具备的技能：

1、页面重构需要具备足够的耐心，反反复复；js工程师要不重复自己。

2、页面重构需要了解设计师的想法；js工程师需要了解后端工程师的想法。

3、页面重构偏艺术，需要想象力；js工程师偏程序，需要逻辑思维。

4、页面重构要关注css3，用代码实现各种效果；js工程师要关注html5，了解新的js api。

网页重构工程师的工作流程：

一、设计稿的分析——对设计稿的分析能力

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

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

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

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

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

上面这些都是在还没开始动手制作之前所要做的。

二、切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。

切图也可以划分成几个阶段：

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

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

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

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

三、HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

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

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

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

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

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

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

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

还有一点是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

网站重构不是一种技术，不是css+div，更不是标准，网站重构是一种思想，是一种理念。重构网站先重构人，重构你的理念，不要光光追求技术，追求还原设计稿，追求浏览器的兼容性，重要的是基础和理念。当你真正了解什么是网站重构的时候网站重构也就真正开始了。