| 本教程主要还是引用原有教程的PPT内容进行相应知识扩充，结合少量自己重构的经验编写的。教程比较拙劣，不足之处，敬请原谅。 面对一份设计原稿，我们更多的想法是怎么去最大限度去重现原稿、如何动态化相应模块及代码的语义化。下面将从观察原稿开始说起。 一、观察设计原稿
我们首先需要观察设计稿的布局，确定出栏目结构、各模块相同点和不同点、背景图片及文字链接等等。从而确定主体布局，使用哪种布局等。 
图1 Dreamweaver中的三栏自适应模板
我们常见的网站一般为三栏结构，因此重构时候应该优先考虑三栏结构编写。学习如何可以写出优先加载主体内容的三栏结构是必须的，详细教程可以参考《网页布局中三栏式布局的实现》。 PS:大家也可以分析一下Dw中自带的各种结构模板，对重构也是有帮助的。 注意：网页设计稿中通常会有很多特殊的小细节，例如按钮上的1px高光，有些细节如果直接切成图片的话效果其实不大好，可以考虑一下使用代码解决。 例：Google首页按钮 建议：分析Google首页按钮的细节，学习如何使用代码制作漂亮的按钮。 二、切片
跟传统的切片不一样的是，我们在做页面重构时并不需要在原稿中把稿子全部切好，我们只需要将自己需要的部分切出就可以了。切片时，目的有三：
1.保证视觉效果
2.提高加载速度
3. 节省流量
同时，我们需要注意的是切片的格式和质量，合理命名之。下面简单说一下常用切片格式：
1.真彩色：图片容量最大，图片格式为JPG
2.调色板色：图片容量次之，图片格式为JPG，PNG-24
3.小图片：对于未超过256种色彩的图片，使用PNG-8或者gif格式
4.透明：PNG，Gif. （IE6支持二进透明，不支持Alpha透明）
5.半透明：PNG-8（像素级），PNG-24，PNG-32 参考：第四届webrebulid重构年会广州分站-网络图像优化 优化选项：
1.Gif动画的压缩：调整失真度
2.隔行扫描：Gif，PNG-24
3.勾选图片“交错”：图片增大VS加载用户体验
4.优先选择PNG（有动画除外）
5.Jpg质量80%-95%：体积更小，品质还好
6.不勾选“锐色”：减小体积
7.PS渐进导出jpg：体积更小
8.Jpg去除“噪点”：单色图体积差异大
9.Jpg-2000：体积更小，质量更好，多数浏览器不支持 三、代码结构
良好的代码结构有助于我们去理解整个页面，以及为后期维护提供方便。这方面有四点：
1.DTD声明——浏览器以什么模式解析网页
2.XHTML规则——前后兼容
3.语义化、结构化——为表达语义而标记文档
4.模块化——可移植、代码重用性高、独立 1.DTD声明
严格型：XHTML 1.0 Strict
过渡型：XHTML 1.0 Transitional（我们常用的）
框架型：XHTML 1.0 Frameset
链接： http://www.w3school.com.cn/xhtml/xhtml_dtd.asp
IE的文档模式：
IE8标准模式（采用标准DTD声明）
IE8准标准模式（即我们说的过渡型）
IE7标准模式（IE=EmulateIE7）
IE5模式（怪异模式，影响盒子模型）
扩展阅读：IE8 如何确定文档模式 2.XHTML重构
基本规则：
◆ 恰当的文档声明和命名空间
◆ 所有标签以及属性都用小写
◆ 所有属性添加引号并且不为空
◆ 正确嵌套、关闭标签（包括单标签）
◆ 符号使用转义字符替代（如 ）
……
Tips:
1、HTML注释里面横杠使用英文，否则FF下内容会被隐藏
2、注释开始和结束前后，添加多一个空格，否则FF会显示出注释内容 3.语义化
1、在HTML文档中，每一个内容都有含义
2、利用有相应含义的标签去格式化页面中的内容
3、网页中，HTML才是重点，CSS只是修饰页面的
4、网页通过对样式的定义，可以以任何外观展现出来，前提是拥有良好的结构
5、HTML添加了许多语义化的标签（header、footer、article…），强调语义化的重要性 语义化的好处：
◆ 失去CSS时，页面仍然能够显示清晰的结构
◆ 一些对CSS支持较弱的设备能以一种有意义的方式渲染页面
◆ 搜索引擎的爬虫也依赖于标记来确定上下文和各个关 键字的权重
◆ 搜索引擎的爬虫注重语义标记，忽略表现标记
◆ 增强页面的可读性、易于团队开发
参考：语义化的HTML结构到底有什么好处？ 4.模块化
◆ 分析设计稿，划分功能模块（Logo，导航，新闻、广告，文章，图片，留言…）
◆ 列出所有模块公共的部分（比如圆角，标题背景，列表项图标，甚至模块等）
◆ 根据各模块相同和不同的属性，给各模块和子模块添加id或（和）class
◆ id和class的合理命名（命名体现模块的功能） 在编写代码时，我们应优先考虑哪些代码可以重复利用，在编写CSS的时候就可以把公共利用的部分提出，编写好后在相应内容中直接调用，这样可以减低CSS的冗余。
同时，组合Class也可以帮助我们提高代码的利用率。
参考：《CSS组合CLASS来完成网页布局风格源文档》 常用命名：
| Module | Name | Module | Name | Module | Name |
|---|
| 头 | header | 尾 | footer | 导航 | nav | | 侧栏 | sideBar | 栏目 | column | 内容 | content | | 登录 | loginBar | 菜单 | menu | 注册 | regsiter | | 新闻 | news | 文章列表 | list | 服务 | service | | 搜索 | search | 标题 | title | 指南 | guide |
5.网页重构 != div+CSS
Div和Span不过是HTML语言中一个很普通、无语义的标签，所谓的Div+CSS不过是中国化误导大家的产物，应理性对待，善用各种标签。举例说明：
|
1
2
3
4
|
计算机不懂我们的想法，当我们写出这样一堆代码时
<
div
id
=
"banner"
>banner</
div
>
<
div
id
=
"mainBox"
>main</
div
>
<
div
id
=
"copyright"
>copyright</
div
>
|
计算机不会理解我们定义的id里面的内容是什么，因为id的定义太随意了，当我们认为它有语义的时候，计算机并不是这样认为的。但是HTML语言本身具有各种含有语义的标签，计算机能认出HTML语言，因此让代码中各部分使用适合的标签才是正确的做法。
参考：《DIV+CSS 请不要再忽悠人了》 6.CSS Sprite
图片拼合（CSS雪碧 /精灵）：
即把多张图片拼合为一张图，这张图片作为多个元素的背景，利用背景的position-position属性精确定位。
好处：减少HTTP请求，服务器减压，精确定位
不利：图片体积增大，修改不够灵活 当我们的电脑向服务器发出Http请求时，实际上影响图片传输速度的是请求速度，图片的Http请求速度比较慢，因此图片量的增多会导致网页的加载缓慢。使用CSS Sprite可以减少网页中图片的使用量，减少Http请求，给服务器减轻压力，而且有时候图片的体积随拼合而出现1+1<2的效果。建议：当使用CSS Sprite时，务必保存拼合后的源图，方便日后修改。 7.CSS属性的简写
当我们在编写CSS时，经常会直接使用例如background-image、margin-top、font-size等直观而又冗长的名字。实际上CSS的编写标准给我们提供了简写的规则。
例如：
|
1
2
3
4
5
6
|
font-size
:
14px
;
line-height
:
0.85
;
font-weight
:
normal
;
font-family
:
Tahoma
,
"宋体"
,
Arial
,
sans-serif
;
可以简写成：
font
:
14px
/.
85
Tahoma
,
"宋体"
,
Arial
,
sans-serif
;
|
这样一来，我们的CSS又有不少可以精简的地方了。 8.代码编写工具
我们很习惯使用Dreamweaver去编写网页代码，但对于制作一些比较简单的网页，我们并不需要使用如此庞大的工具。下面列出几个常用的代码编写工具：
1.Editplus（Demo师兄推荐的工具，很不错的）
2.Notepad++（这是我最近比较喜欢的工具，界面不错，插件也很强大）
3.Microsoft Expression Web 4（界面比较漂亮，跟Dw一样是比较庞大的，但有CSS跟踪功能，这点我比较喜欢，大家可以试一下）
同时，如果想提高代码的编写效率，大家可以学习一下使用Zen Coding（什么是Zen Coding？），这是一个很不错的插件，可以大大提高我们写代码的效率。 心得写得比较仓促，而且抄的东西比较多，如有不当之处，欢迎指出。 参考内容下载： 页面重构 | 
6957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
