k8凯发一触即发|Home

作为一个职业□□□的页面重构者，我们从事的工□□□作简单的说就□□□□是“将设计稿转换❖成WEB页面”，这一过程可以□□□很简单到直接丨把PSD从PS里切成成网页；也可复杂到需□□要考虑页面中□□□□每个标签的使□□□用，考虑“页面性能”。以“前端工程师”为目标的同学□□□可能会不愿承□□□□认将页面重构◈这块分出来，但随着工种的□□细分，加上页面重构□□□本身的专业性，独立为一个职□□□□业也不是不可□□□能，如果你觉得一□□个前端工程师□□必须去画设计□□稿，可以不理会下◇面的内容。

单纯的页面重□□□□构，所涉及到的工◢作内容一般是“分析设计稿=>切图=>写DIV和CSS”，虽然看起来很◥少，但要做好这份□□□□工作，绝非所想的那□□么容易。
原因很简单：
工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成。
在这种工作强□□□度下，很多人都是靠□□□着对这份工作◇的喜爱在维持□□着，一旦时间长了，很容易就会变♦得枯燥，保持热情也成□□了重构工作者□□□□应该具备的能□□力。

跟“前端工程师”所要求的有所□□□□不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面◥重构者，要求当然也更□□□□高。不单是做出页□□□□面，而是做出好页□□□□面。那什么是好页□□□□面呢？”，启凡大连网络公司提出◣以下几点：

结构完整，可通过标准验□□□□证
标签语义化，结构合理
充分考虑到页□□□面在站点中的“作用和重要性”，并对其进行有□□□针对性的优化
很多初学者多□□□□少都遇到过方◢向不明，不知道自己应□□该提高些什么，我们可以从“分析设计稿=>切图=>写DIV和CSS”这个工作内容，针对每一点提□□□□出一些要求，以方便我们分□□析自己的能力□□水平，为继续提高确□□□定个方向：

一、设计稿的分析
设计稿的分析□□□□是指对设计稿□□如何制作成页❖面的分析，即哪一块的内□□□容可以做为公★共的部分、哪一块的内容□□□结构可以如何◆实现等。对设计稿的分◈析能力可以划□□□□分成下面的几□□个阶段：

能分清设计稿□□中的公共与私□□□有的部分
在1的基础上对各□□部分的实现方□□式有一个初步□□□的方案（包括如何切图、写结构、写样式）
在1的基础上，准确的给出各□□□部分的实现方□□□案（包括如何切图、写结构、写样式）
在3的基础上，能同时考虑方□□□案的扩展性、复用性及页面□□□性能（包括如何切图、写结构、写样式）
在4的基础上，考虑整站的结□□□构分布（包括文件分布、目录结构）
上面这些都是□□□□在还没开始动□□□手制作之前所·要做的。

二、切图
切图是指将设□□□计稿切成便于□□□□制作成页面的□□□图片。都有个误区，觉得切图就是△把图片切出来，其实并不完全▼是这样，还包括把切出□□□□来的图片合并□□到一起，怎么切、从哪切才能将□□□□性能大化，说“切图实际上就☆是一门艺术”和雕刻一样，有人能雕好，有人就不行。切图也可以划丨分成几个阶段：

切成所需要的□□图片（如何将需要的□□部分切出来）
在1的基础上，对切出来的图●片进行一些优□□□□化（包括压缩文件◎大小、选择图片类型）
在2的基础上，规划切出来的◈图片（包括文件分布）
在3的基础上，考虑整体的性◎能（包括合并图片、压缩文件大小）

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

还原设计稿视□□□□觉效果，并通过标准验□□□证（HTML）
在1的基础上，实现多浏览器□□□□的兼容（HTML）
在2的基础上，标签语义化（HTML）
在3的基础上，选择较优的实▽现方式（包括模块化结□□□构，方便程序脚本□□□使用，HTML和CSS）
在4的基础上，考虑到扩展性、复用性和可维□□护性（HTML和CSS）
在5的基础上，考虑到整站的□□□样式分布（包括如何实现□□分布）
在6的基础上，样式写法的优□□□化（包括技巧的应□□用）
是对所遇到问□□□题的解决能力，这一点在不同□□□□的阶段都可能□□□会遇到，所以没有写到丨上面。

如果你已经达✦到或超过3、4、5，恭喜你，你已经是一个□□□职业的“页面重构工作□□者”了。为了我们自身□□□的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实□□现方式等，也是十分必要□□的。

启凡网络公司□□后告诉初学朋□□友门，要想成为一个□□职业的页面重□□□构工作者，你需要的是激□□情、不要因为枯燥◢而放弃！你需要细心，努力的做好每□□□□一个细节，以保证作品性□□□能大化！有必要去学习SEO的相关知识，不要轻视站内●优化，要知道会页面□□□□重构的SEO和不会页面重□□□构的SEO，那不在一个层□□□次上，因为搜索引擎□□分析的就是代□□□码。