采用XHTML+CSS设计页面

      设计::文摘 2004-9-13 10:1
原作者:http://blog.joycode.com/ceocio/

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

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

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

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

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

利用表格排版的站点页面(这都该马上被淘汰,不包庇自己):

www.swjtu.net/index.htm

www.swjtu.net/tw/index.asp

利用XHTML+CSS排版的页面:

www.ceocio.net/test/index.html

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,你可下载这两个文件进行参考:

www.ceocio.net/test/main.html

www.ceocio.net/test/main.css


标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}