用Div+CSS重构网页

从接触WEB标准以来，一直在努力实践，近日官方网站的全面改造终于正式展开，由于网站管理系统的WYSWYG编辑器本身不支持WEB规范，也是没办法的事情，但是我还是决定在这次改版的过程要充分利用CSS，在可能的程度上尽量利用Div+CSS的优点，减少维护量和网页大小。

　　第一批改造的是新闻中心和招生网，在重新制作的几个模版页面中，我们只用了少量的表格和内联代码，之所以没有完全采用Div+CSS，是因为经过WYSWYG编辑器的自动更改，多层嵌套的DIV代码会变得非常不易读，即使我们在制作时把代码写得非常的清晰，缩进和换行用得很好，也最终会得到一个结构混乱的HTML源代码。因此只能适当采用一定数量的表格，但是对表格也尽量采用CSS来控制了。而网页中的任何<b>、<font>、<hr>这类的代码，则完全去掉了。

　　改完以后，代码总量减少到原来的一半左右，而且网页中的表格都只在很小的范围内使用，尽量避免嵌套，使网页的速度得到了很大的提高，虽然没有实现对WEB规范的支持，但是采用DIV+CSS的效果还是非常明显的。

　　今天我又重做网站首页，对网站首页，我就完全采用了DIV+CSS来进行网页布局，首页以前的表格更为混乱，嵌套很深，由于原来的代码量就不是很多，所以改完以后，代码减少也还不算太多，只为原来的一半左右。但是访问速度提升很多，而在规划好CSS以后，网页的布局部分真是轻松极了。

　　我取了其中一部分代码来比较：

重构前的代码（全页大小共计38K）：

程序代码

1
<table><tr><td>
2
               <table><tr><td>
3
                   <table><tr><td>
4
                        <table><tr><td>
5
                              <table><tr><td>
6
                                       <table><tr> 
                                            <td><a><font><strong>二外新闻</strong></font></a></td>
                                            <td> 
                                              <img></td>
                                            <td><a>新闻中心</a> | <a>院 报</a> | <a>广 播 台</a> | <a>电 视 台</a> | <a>媒体二外</a></td>
                                          </tr></table>
6
                                  </td></tr></table>
5
                            </td></tr></table>
4
                           </td></tr></table>
3
                       </td></tr></table>
2
               </td></tr></table>
1
</td></tr></table>

　　说明：为了实现在760像素表格（1像素边框）左中右三栏划分(布局)，然后对中栏进行上中下划分（布局），再对中栏进行左中右划分（边距），再对中栏进行左中右划分（内容），加上部分一像素边框和代码不够优化，一共出现了6层嵌套，而且多次编辑以后，还出现了嵌套错误（多出一层结束标记）

重构后的代码（全页大小共计17.8k）：

程序代码

1
<div>
2
     <div>
3
          <div>
4
               <div>
        <div></div>
        <div>快速链接</div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div><a>二外新闻</a></div>
        <div</div>
        <div><a>新闻中心</a> | <a>院 报</a> | <a>广 播 台</a> | <a>电 视 台</a> | <a>媒体二外</a></div>
    </div>
4
           </div>
3
       </div>
2
</div>
1

说明：
1首先用一个<div>作为容器，把左中右三栏都装在760像素居中的区域；
2利用浮动实现两个同级div左右分栏同时实现边框；
3利用浮动把右边的div再分成左右两栏同时实现边框；
4在中央的div中从上到下每行用一个div容器包括，在容器中利用浮动实现左右划分；


　　在这个比较中，为了便于对比，去除了所有定义外观的属性代码，以及内联样式，包括div的id和class，仅仅从结构上可以看出，div比table在左右分栏和上下分栏上就节省了很多代码，而且最为关键的是，同样是嵌套，div的显示也会比table快。而如果加上定义外观的代码，那么table还要增加很多属性代码，而Div需要增加的就基本上只是id和class了。

具体的页面地址：http://www.bisu.edu.cn
（由于编辑器的原因，代码不符合XHTML标准，而且CMS系统输出的代码还含有单一表格，这是很无奈的事情）