页面重构的职业定位
1. 结构完整，可通过标准验证
2. 标签语义化，结构合理，比如role这个属性，就是为了使标签语义更明确的一个属性
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化
一、设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
1. 能分清设计稿中的公共与私有的部分。比如有的网站页面有一块公共的区域，要弄清楚这块区域的位置吗，大小和实现方式，从SEO的角度来讲，不推荐用frame标签。
补充一下框架的知识：
框架结构 框架结构，即帧结构（Frame）网页表现为一个页面内的某一块保持固定，其它部分信息可以通过滚动条上下或左右移动显示，如左边菜单固定，正文信息可移动，或者顶部导航和LOGO部分保持固定，其它部分上下或左右移动。我们的邮箱通常都采用框架建构。
框架型网页的另一个表现是，深层页面的域名通常不会在URL中体现出来，即使进入深层子页面，浏览器显示出来的URL仍然是主页的URL。 框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言，框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说 是一个很大的问题，这是由于大多数搜索引擎都无法识别框架，也没有什么兴趣去抓取框架中的内容。
此外，某些浏览器也不支持框架页面。如果网页已经使用了框架，或出于某种原因一定要使用框架结构，则必须在代码中使用"Noframes"标签进行优化，把Noframe标签看做是一个普通文本内容的主页。
在<Noframe></Noframe>区域中包含指向frame页的链接以及带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。这样，搜索引擎才能够正确索引到框架内的信息。
还有一个办法是采用iframe即内联框架(Inner Frame)技术来避免Frame带来的不便。
所谓iframe也是框架的一种形式，它是相当于在主浏览器窗口中内嵌一个子窗口，内容自动打开。
iframe可以嵌在网页中的任意部分，也可以随意定义其大小，
其代码显示为： <iframe src=xx width=x height=x scrolling=xx frameborder=x></iframe>" 对搜索引擎来说，iframe中的文字是可见的，也可以跟踪到其中链接指向的页面，不过与用户所见不同的是，搜索引擎将iframe内容看成单独的一个页面内容，与被内嵌的页面无关。
框架型网页的另一个表现是，深层页面的域名通常不会在URL中体现出来，即使进入深层子页面，浏览器显示出来的URL仍然是主页的URL。 框架型网站的优越性体现在页面的整体一致性和更新方便上。尤其对于那些大型网站而言，框架结构的使用可以使网站的维护变得相对容易。但框架对搜索引擎来说 是一个很大的问题，这是由于大多数搜索引擎都无法识别框架，也没有什么兴趣去抓取框架中的内容。
此外，某些浏览器也不支持框架页面。如果网页已经使用了框架，或出于某种原因一定要使用框架结构，则必须在代码中使用"Noframes"标签进行优化，把Noframe标签看做是一个普通文本内容的主页。
在<Noframe></Noframe>区域中包含指向frame页的链接以及带有关键词的描述文本，同时在框架以外的区域也出现关键词文本。这样，搜索引擎才能够正确索引到框架内的信息。
还有一个办法是采用iframe即内联框架(Inner Frame)技术来避免Frame带来的不便。
所谓iframe也是框架的一种形式，它是相当于在主浏览器窗口中内嵌一个子窗口，内容自动打开。
iframe可以嵌在网页中的任意部分，也可以随意定义其大小，
其代码显示为： <iframe src=xx width=x height=x scrolling=xx frameborder=x></iframe>" 对搜索引擎来说，iframe中的文字是可见的，也可以跟踪到其中链接指向的页面，不过与用户所见不同的是，搜索引擎将iframe内容看成单独的一个页面内容，与被内嵌的页面无关。
2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）
这些考虑必须在写页面之前。
二、切图
切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：
1. 切成所需要的图片（如何将需要的部分切出来）
2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
3. 在2的基础上，规划切出来的图片（包括文件分布）
4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小），比如图标整合到一个png里面。
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的基础上，样式写法的优化（包括技巧的应用）
