小李刀刀博客

　　从接触WEB标准以来，一直在努力实践，近日官方网站的全面改造终于正式展开，由于网站管理系统的WYSWYG编辑器本身不支持WEB规范，也是没办法的事情，但是我还是决定在这次改版的过程要充分利用CSS，在可能的程度上尽量利用Div+CSS的优点，减少维护量和网页大小。 　　第一批改造的是新闻中心和招生网，在重新制作的几个模版页面中，我们只用了少量的表格和内联代码，之所以没有完全采用Div+CSS，是因为经过WYSWYG编辑器的自动更改，多层嵌套的DIV代码会变得非常不易读，即使我们在制作时把代码写得非常的清晰，缩进和换行用得很好，也最终会得到一个结构混乱的HTML源代码。因此只能适当采用一定数量的表格，但是对表格也尽量采用CSS来控制了。而网页中的任何、、 这类的代码，则完全去掉了。 　　改完以后，代码总量减少到原来的一半左右，而且网页中的表格都只在很小的范围内使用，尽量避免嵌套，使网页的速度得到了很大的提高，虽然没有实现对WEB规范的支持，但是采用DIV+CSS的效果还是非常明显的。 　　今天我又重做网站首页，对网站首页，我就完全采用了DIV+CSS来进行网页布局，首页以前的表格更为混乱，嵌套很深，由于原来的代码量就不是很多，所以改完以后，代码减少也还不算太多，只为原来的一半左右。但是访问速度提升很多，而在规划好CSS以后，网页的布局部分真是轻松极了。 　　我取了其中一部分代码来比较： 重构前的代码（全页大小共计38K）： [code] 1 2 3 4 5 6 二外新闻 新闻中心 | 院 报 | 广 播 台 | 电 视 台 | 媒体二外 6 5 4 3 2 1 [/code] 　　说明：为了实现在760像素表格（1像素边框）左中右三栏划分(布局)，然后对中栏进行上中下划分（布局），再对中栏进行左中右划分（边距），再对中栏进行左中右划分（内容），加上部分一像素边框和代码不够优化，一共出现了6层嵌套，而且多次编辑以后，还出现了嵌套错误（多出一层结束标记） 重构后的代码（全页大小共计17.8k）： [code] 1 2 3 4 快速链接 二外新闻