Web标准？你需要吗？

这篇文章纯粹是由CSDN的这个讨论而发起的：

http://community.csdn.net/Expert/TopicView.asp?id=3265752

在此帖中，我竭力游说大家放弃表格布局，而采用XHTML+CSS的方法。可是有很多人不理解，因为表格布局相当简单，前期开发相当快捷，大家乐此不疲。

为了让大家更加体会到Web标准开发的好处，我特意将我的一个私活用XHTML+CSS来布局，而与此比较的是我在本科期间开发过的另一个站点。

各位在观看实例时候请一定注意仔细观察每一个细节，并且实际的打开源码看看，到底是哪个更复杂？

利用表格排版的站点页面（这都该马上被淘汰，不包庇自己）：

http://www.swjtu.net/index.htm

http://www.swjtu.net/tw/index.asp

利用XHTML+CSS排版的页面：

http://www.ceocio.net/test/index.html

http://www.ceocio.net/test/main.html

这两个实例都包含一个欢迎页和一个内页。

如果你的网速比较慢，你可以发现两个内页下载时候明显的差别，利用表格排版的页面需要等待表格中所有内容加载完成后才显示，而利用XHTML+CSS排版的页面则一边下载一边显示出来。
而从代码的复杂度，由于利用XHTML+CSS，将所有的页面布局全部集中到CSS文件中，所以html页面的代码非常简洁。
在CSDN的讨论中，很多人都说：“利用XHTML+CSS只能做简单的页面，稍微复杂美观的页面还是得靠表格布局”，实际不然，可以参看我的第二个内页，用表格能实现的几乎都实现了。

总结：

使用XHTML、CSS的好处：

• 后期维护方便，几乎只需要更改站点的CSS文件就可以对站点进行改版。
• 如果你要创建一个打印页面，只需要不连接到CSS或者使用其他CSS文件。同样，这样的文档可以被各种需求的人所阅读到。
• 节约站点所占空间和站点流量。
• 在ASP.Net基于模板的开发中。最好的例子就是.TEXT系统。
• ....

实际上XHTML、CSS布局是相当简单的，但是也有一些需要改变的地方：

• 使用div而不使用表格布局，当然如果你有一个数据列表之类的东东，必须得画个表格框起来，那是例外，除此之外千万不要使用table标签。
• 使用li标签格式化数据，可以参看：http://www.ceocio.net/test/main.html中的新闻列表，就是用li实现，其中的图片和下面的线条都通过CSS内置属性植入了li中。 
• 把所有的公共图片都利用CSS中标签的背景属性写入CSS文件，而不在html页面中出现，这样的话，可以大大方便日后改版。比如：http://www.ceocio.net/test/main.html的html页面中除了第一条新闻后面根的一个new图标，其他所有图片都定义在CSS中，并没有在html中出现。
• ....

可能有人会觉得这样做是不是很麻烦？开发周期很长？

答案是否，我仅仅用了两个多小时就完成了从切图(当然，图片是预先设计好的啦)到html页面设计，css设计的全部工作。而且这仅仅是两个页面，如果是一个实际的项目，当我的主体css文件写好后，我后面的工作简直就是....爽！相比之下，如果还是用传统的表格布局，那么重复工作简直太多，累！

关于这个页面的标准性可以点击：http://validator.w3.org/check?uri=http://www.ceocio.net/test/main.html  (XHTML)和http://jigsaw.w3.org/css-validator/validator?uri=http://www.ceocio.net/test/main.html  (CSS2.0)查看，你也可对自己站点进行测试，看看是否符合标准。

为了体验XHTML、CSS，你可下载这两个文件进行参考：

http://www.ceocio.net/test/main.html

http://www.ceocio.net/test/main.css