再谈DIV+CSS

王志勇 发表于 2008年02月15日 09:49

这几天仔细研究了一下DIV+CSS,它的应用确实很不错,入门也较快。了解和学习DIV+CSS的最好方法就是,找一个最简单的教程,然后多练习几次,熟悉了这个原理,就能举一反三。DIV+CSS是近一两年开始在国际上流行起来的,很多共享的Blog程序,都是使用DIV+CSS的代码布局。

从本质上来说,DIV+CSS是网页技术人员的一个创意,把过去的table布局,使用DIV元素代替,然后这个创意,被广泛应用。我们具体谈谈DIV+CSS如何在重构网页上有优势。如果是单个网页进行重构,DIV+CSS代码布局比table布局不会有任何优势。当有很多个网页,如果重构后的DIV元素数量保持不变的话,只要更改公共的CSS部分即可,所有的网页都会一次发生变化。而使用table布局的网站,如果网站使用编程的话,公共程序无论是使用DIV+CSS还是table布局,也是更改程序就会一次发生变化。但是当有很多个公共程序的时候,或者有单个程序的页面,就需要一个一个网页地改。

在设计DIV+CSS布局时,需要非常注意DIV的区域名称的统一,以便于重构的简便。但是,网站并不需要频繁地重构,所以DIV+CSS在重构方面的优势就无法发挥。table布局的优势在于,它的历史比DIV+CSS悠久,table的使用简便。

DIV+CSS是否比table的结构更为清晰呢?我觉得不会,都一样,甚至非常之类似,几乎没有大变化。如果感觉不一样,可能是阅读代码的习惯不一样。DIV+CSS这一两年的应用,也在很大程度上推动了CSS的进展,使w3c标准得到了推广和日益普及。在DIV+CSS结构的网页中,几乎每一个元素的属性都是使用CSS定义,所以对于网页区域、元素的调整,真的起到了很大的便捷作用。而table布局中,如果table元素、td元素都是使用HTML参数,修改时可能需要进行批量修改。

顺便说说程序的调整和重构,它与DIV+CSS重构稍有类似。有时候,有好几个程序文件,需要同时更改多个变量名,或者同时删掉某部分,或者同时增加某段程序,需要一个一个程序地改,经常觉得很费时费力。减少这些重复重构的方法就是使用include文件,当然include的设计还是要花很多的心思,有时候已经把很多程序都做完了,还不及设计include文件。之所以这样,是因为include文件可能应尽量减少,不轻易使用,避免无法加载include文件而使网页报错。

总之,使用DIV+CSS还table布局,都没有关系,喜欢用哪一种就用哪一种,各有各的好处。如果你的网页在100K以内,完全可以使用table布局。DIV+CSS在页面下载方面,确实有table布局无法比拟的优势。DIV+CSS是一边下载,一边显示网页;大的table则是下载完毕之后,才显示这个table。table的解决办法就是,上下切割为多个table,就可以更好地一边下载一边显示网页。

6条评论:
1   愆伏 2008-02-15 10:17
其实吧,我们一般都管这玩意儿叫"web standard"。更强调语义化了,而不是简单的用div代替table。不过个人认为xhtml始终是过渡的,最终应用还是要转到xml上
2   xiaoxiao 2008-02-15 21:24
流量上不了量级,用T+C还是D+C,从某个角度讲,都是不要紧的。
3   稻草 2008-02-22 02:01
xiaoxiao说的是一点
其实还有很多,

比如对搜索引挚的友好啥的

人们都相信xhtml是个过渡, 嘿嘿.
xhtml 2也是正在改进

4   even 2008-02-22 12:07
从大学到工作有好几年,关于网页设计编程也学了些,大概不是专业做编程的,没啥压力,学了,忘了--忘了,再学。真到用时才感觉力不从心,有个好的想法却没法立刻实现,那时最郁闷!
“找一个最简单的教程,然后多练习几次”,关键是坚持,以后还要向阿勇多多学习!
5   我是无知的学生 2009-02-28 20:32
1、为什么要求使用WEB标准?
2、CSS+Div在W3C标准中充当着什么样的角色?
3、W3C有建议说不使用表格吗?
4、纯数据的话,用表格;布局用DIV。
5、无论是Div还是表格都是在UI层,还include啊?用class吧
6   自由勇 2009-02-28 23:48
我的个人愚见:
2、使用DIV+CSS是为了使网页的加载速度更理想,因为table是需要元素下载完毕后,这部分才可以显示。DIV+CSS可以一边下载一边显示。
3、可能没有吧。
4、均可。

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (44周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2022年07月
2022年06月(15)
2022年05月(20)
2022年04月(16)
2022年03月(9)
2022年02月(9)
2022年01月(10)
2021年 +

2020年 +
2019年 +
2018年 +
2016年-2017年(9)
2014年06月-09月(10)
2013年 +
2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2024 auiou.com All rights reserved.
此Blog程序由王志勇编写