使用 div+css 重构网站

由于甲方在功能与外观上的需要，我们实验室项目中的网站需要重新制作。这次我们决定放弃原来的表格布局的页面表现设计，而使用更加符合 Web 标准的 div+css 来进行设计。现在网站已经基本制作完成，下面是我第一次使用 div+css 的一些感想。

使用 div+css 设计网站最大好处就是实现了页面代码内容与表现的分离。像国内大部分网站一样，我们项目中以前的网站也是基于表格的布局设计。这种方式下的页面代码中充斥着大量的 <tr>、<tb> 标记，一层又一层的表格嵌套使页面显得非常臃肿，页面的内容和表现强耦合在一起，很影响可读性。这里所说的可读性包括两个方面，一个是指开发人员阅读代码，混乱的代码如果没有可视化编辑器的帮助将让人完全摸不着头脑，而使用 div+css 的页面则更容易理解，加强了代码的可重用性，日后的维护也简单多了；另一个是指搜索引擎对页面的读取，由于搜索引擎只读取 html 而不读 css，所以简洁的、层次结构分明的 html 能更好的帮助搜索引擎理解并抓取页面内容，反之，含有大量表格元素的 html 使得搜索引擎难以理解。

另一个好处就是减少冗余代码，提高效率，降低流量成本。使用div+css 布局的页面的代码量将会比使用表格布局的少很多，假设一个页面节省的空间是 100kb，千万不要小看这 100kb，对于一个日 pv 1000万的大型网站来说，节省的流量是非常可观的，同时可以加快页面的加载速度，改善用户体验。在网络带宽资源日益紧张的今天，虽然节省这么一点带宽和 BT、在线视频等相比微不足道，但是节省一点是一点，何乐而不为：）

当然，我们不能说 div+css 就是 Web 标准，但至少它更好地实现了 Web 标准。我们也不能认为表格的使用就不符合 Web 标准，表格在页面中的使用还是很多的，但是表格的本意并不是用来进行布局设计的，而是用来制作文档中的报表、数据统计表等。

初次使用 div+css ，我也犯下了不少新手经常出现的错误，由于在事先没有规划好需求分析，有很多页面都是想到一个做一个，导致出现了 css 中的“多类症”，以后会在这个方面做很多修改，合并相似或相同的 id 和类。