关于页面重构的一些心得

关于页面重构的一些心得 作者：陈超铭    厚朴教育来源：本站原创    点击数：803    更新时间：2010-11-25

　　本教程主要还是引用原有教程的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来完成网页布局风格源文档》

　　常用命名：

ModuleNameModuleNameModuleName头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

计算机不懂我们的想法，当我们写出这样一堆代码时

<divid="banner">banner</div>

<divid="mainBox">main</div>

<divid="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/.85Tahoma,"宋体",Arial,sans-serif;

　　这样一来，我们的CSS又有不少可以精简的地方了。

　　8.代码编写工具
　　我们很习惯使用Dreamweaver去编写网页代码，但对于制作一些比较简单的网页，我们并不需要使用如此庞大的工具。下面列出几个常用的代码编写工具：
　　1.Editplus（Demo师兄推荐的工具，很不错的）
　　2.Notepad++（这是我最近比较喜欢的工具，界面不错，插件也很强大）
　　3.Microsoft Expression Web 4（界面比较漂亮，跟Dw一样是比较庞大的，但有CSS跟踪功能，这点我比较喜欢，大家可以试一下）
　　同时，如果想提高代码的编写效率，大家可以学习一下使用Zen Coding（什么是Zen Coding？），这是一个很不错的插件，可以大大提高我们写代码的效率。

　　心得写得比较仓促，而且抄的东西比较多，如有不当之处，欢迎指出。

　　参考内容下载：页面重构