2009年12月26日，终于迎来了web标准化第三期交流会，本期的议题是页面重构合理化讨论。当时看到主议题所包括的内容就非常兴奋，因为这些内容都太实用了，基本都是工作中天天会遇的、却总有些会让人抓狂的问题，相信通过本期的讨论，一定可以得到很好的简答。

因为本期交流会采用的是分组讨论的形式，所以更多的时候是讨论和听大家的经验分享，现在就讲下自己的一些想法，算作分享与总结，有错误或疏漏的地方请指正。

一、 结构合理化

1、DTD声明。应该说在最早的table横行的时代，页面是没有DTD声明的，当时人们所关注的大多是浏览器显示出的内容，而不是源代码本身，页面制作者也包括在内，因为当时还不知道这个是干什么用的。随着w3c标准的被越来越多的人关注和重视，网页重构在国内的兴起，这时候，一些不被重视的东西才标准起来。DTD声明应该是最基础的标准，从它在页面中的位置就可以看出。而且文档中规定文档类型是很重要的，这样浏览器才能了解所解析的页面执行的是哪种标准。

现在可以接触到的DTD大多是HTML4.01和XHTML1.0，这两种分别又包括strict(严格的)和Transitional(过渡性的)两种类型，当然还有Frameset（框架的），应用范围很小。会上讨论，绝大多数人都赞成的就是XHTML1.0 Transitional这种形式，当然这也是目前应用范围最广的。现在流行的HTML5也有新的DTD，不过它的声明很简单了，只是<!DOCTYPE HTML>，至于为什么，感兴趣的朋友可以研究下。其实不光是web页面需要DTD，随着手机上网的普及，更多的页面需要手机浏览器支持，所以也有针对WAP页面相对应的DTD声明，详细内容可以参见我之前写过的一篇内容《关于WML的了解与学习》。

这里想提下关于对DTD的态度。很多时候，经过程序员处理后的页面，DTD无故失踪了，造成的后果就是页面错乱，盒子失效，到头来他又把烂摊子甩给你来处理。所以从现在起，我们必须对DTD有足够的重视，而且态度要强硬，这个必须得加，没的说！

2、W3C验证。通过验证的好处，我不再一一说明，但我一直遵循的原则是：不要为了通过验证而去验证。或许我比较幸运，到目前为止，还没有任何一个领导或客户说做的页面必须得通过w3c验证，但就我个人来讲，做完的页面还是应该做一些验证的。一般我的做法是：html页面直接在DW下验证，因为他执行的标准是XHTML1.0 Transitional的，主要目的是为了检测标签的嵌套是否合理，而且有时候项目不是一个人完成的，整合的时候得对页面负责；CSS文件直接在W3C官网进行验证，主要目的有二，一是为了检测拼写错误，因为样式部分是手写的；再就是尽量让自己减少css hack的使用，通不过验证的这个占很大部分，所以尽量让自己通过想别的方法，开阔思路。当然有时候我是会对ZOOM开绿灯的，还有就是那些警告，像背景颜色和文字颜色相同的警告，如果是继承的则无视。

3、标签语义化。我觉得就这部分可拿出来作为一个主题来讨论，因为这也是最具争议的部分，很多结构是没有明确限定使用什么标签的，不同的理解都能说的通，就看个人对不同标签掌握的熟练程度了。总的原则就是尽量语义化，因为我们是专业的，义不容辞！这里讲个个人的小技巧，如果有些时候是在无法确定使用什么标签，可以在css裸奔状态下查看不同的效果。

4、语义化扩展 microformats或RDFa。微格式是近几年的新东西，在国内应用的范围还是比较小的，但相信随着网络的推广和普及，他的应用范围会越来越广的。微软的IE8有一个新功能叫Web Slice，能让你订阅页面上的某一部分，订阅后，你可以直接在 IE 8 的收藏栏获得你关心部分的更新，而不用打开网页去查看。在国内网站应用的有土豆网，例如这个地址http://so.tudou.com/tudouie8/，如果浏览器支持的话，是可以订阅页面中的内容的。对RDFa了解很少，没有什么概念。

5、Class id命名。关于是否使用id的问题，大家的意见有些不统一，这也可能跟实际的工作情况有关。个人的看法是，页面中独一无二的框架结构布局可以id，这样也利用搜索引擎很快的发现他们，前提是不会和程序员控制的部分由冲突。关于css命名书写部分，我之前写过一篇《最新整理的CSS命名与书写》，有详细描述。

6、SEO。前段时间，在公司请的SEO专业人员为我们做分享的时候，我曾问过他一个问题，“你认为标签语义化和SEO这两之间的关系是什么？”。他回答：“标签语义化是最基础也是最好的SEO”。但不久之后，在他为我们网站做的优化方案中，某个看似不是很重要的内容快标题却使用了H1，我问我们的负责人，经反馈得到的回答是，“用H1是为了重点推广这块内容…”，我无语。。。

二、 样式合理化

1、样式的分层管理。一个项目比较大时，样式文件也不可能单单的只有1、2个，如何进行划分和整合呢？根据个人的工作经验，一般会将样式分为三类，reset（重置部分）、common（header、footer、字体、链接、浮动等）、layout（单个页面的布局样式）。更多时候为了减少http请求数，会将reset和common部分合并。样式文件管理目录尽量和页面分类一致，便于维护。

2、样式的书写。首先讲到的是编码问题，因为这是万源之本。在写页面之前，一定要了解改项目是在什么环境下开发，用的是什么编码，这个一般问程序员就会知道。编码一定统一，而且要尽量和之前的或有衔接的项目一致，否则后期如果要改编码会很费劲。再就是合理的注释。注释可以让自己或其他合作者更清楚该文件时是哪个项目的，具体到某一段样式又是什么内容的，这样后期维护起来也很方便；还有后期有修改的样式，最好做好修改日期和大致修改内容的注释。

3、样式的压缩。不管平时如何书写，在项目上线是对样式文件进行合理的合并和压缩可以对页面优化有很好的提升，也节约了成本。如果不具备这些条件，那平时在书写时，就应该注意这个问题。如果不是用DW自动生成css，最好是将同一样式的不同属性写在一行，每个属性之间有空格，方便查看。

三、 素材合理化

1、图片类型。对于大多数背景图片，使用PNG-8和GIF是大家比较认可的，至于色彩丰富的图片，该用JPG还是得用，不过可以选择不同级别的质量。再就是图片优化的问题，很有意思的一个讨论，就是fireworks是否比Photoshop存的图片要小，因为我基本从来不用前者，这个期待勤奋的同学能够得出结论。

2、图片字节。就图片大小的限制来说各个公司应该是不同的，我们的要求是30K。

3、图片管理。其实我们公司的图片和样式管理是一样的，分别有内网测试和外网两个环境，测试环境下，自己有权限进行添加和修改，确认后再将更新的最新文件通过邮件形式通知专门负责文件维护的管理员进行发布更新。当然会上有朋友提议用类似于js文件的版本更新模式，这个得根据公司的情况来决定。

4、css sprites。这个是第二期交流会讨论的议题。自己有幸参加了上次交流会，也些了自己的总结，感兴趣的朋友可以查看《Web标准化交流会–Css Sprites应用之我见》。

5、图片缓存。做图片缓存的目的就是让图片尽量快的呈现在浏览者的面前、加快页面的访问时间并减轻服务器的压力。现在通用的做法是做图片服务器，通过几个不同的域名来访问这些图片，增加并发的个数；还有就是在服务器端进行gzip压缩。当然这些操作应该是属于服务器端的操作了，只做了解。

以上就是本期交流会的讨论的主要内容，很遗憾还有很多的内容没有来得及，不过这也让我们有更多的时间来思考总结，期待精彩的下期。

很感谢与我们合办的UXday的支持和百度赞助盒子咖啡提供的场地。虽然没有喝到美味的咖啡，但这舒适的环境和热情的服务让我期待下一次的到来。当然最最感谢的是建斌、裕波、崔凯和其他朋友为交流会组织、筹备所付出的辛苦。交流会是属于我们每个人的，所以每个人都应该为这个尽自己的一份力！