div和css网站重构有没有必要
div和css网站重构有没有必要?
今天考虑新建一个网站,还是原来的程序,即选择整站程序,做风格,添加文章。做风格这块是最头痛的,你可以直接用别人的,可以仿别人的,或者自己动手自己写一个。
div和css的网站架构,现在很受追捧,对传统的table布局不屑一顾。现在轮到自己亲自写了,体会了一下,div的代码量不一定比table少多少,基本一个内容页大概十几k,两个都一样,可能就是表格嵌套层次太多的话,浏览器加载速度有了区别。
同样是div和css,好的网页设计师使用最少的div来表达一个布局,不好的话就是仅仅一个网页的次要元素直接就用一个div,这样一个页面有二三十个div,网页看起来跟table的没什么区别,还有可能代码量比table的多,至少在页面大小这一块如此。table有一个好处就是浏览器的兼容性是最好的,设计师喜欢用它的原因;div和css这东西就比较头痛,要用各种的hack。
最近看了一本叫做《无懈可击的web设计》的书,使用div和css的原本是:简化代码,分清网页的主次层次(主要是seo的考虑),还table于数据表现的原本功能,便与残障人士使用屏幕阅读软件等等。现在的网站风格div和css是比较盛行,但真正了解其中个中原有的很少,实际是完全没有必要,看看qq,google,baidu等等的页面真正通过css认证的有多少。
补充几个聊天记录xbodhi的,见解精到。
推行标准的起因不仅是还原table的原始功用,也要还原html各种标签的功用,例如 strong h1 等等,所有的标签不仅仅是为了显示某种数据样式,他们本身是有语义的,搜索引擎对这个也很敏感。
按道理,网站重构称为热门话题 是因为blog的流行,人们都开始三天两头换模板 ,真正明白现行的结构样式行为分离的人少得很 都在那里扯淡。
模板这东西,使劲做好一个适合用户和seo的,就不再变了,没必要。
鼓吹div+css一味排斥传统的table布局
其实从本身来讲,这两种布局没有差异,原因很简单,DIV是一种元素容器,table也是一种元素容器,两者能有什么差别呢,真有差别的话也只是table多了个<tr>和<td>。
但DIV可以加CSS,table一样可以加CSS。
那么,为什么现在人们如此鼓吹div+css,一味排斥传统的table布局呢,我觉得,无非是两种种情况。
1: 设计师用table布局就过于依赖table,而不用css,但这只能说作为设计人员的问题,不能说是table布局的错!
2: 人们追逐潮流,一味虚荣、比较的心态!
下面我就针对第2个问题,来探讨下div+css和table布局的优劣。
首先,说速度。
这是一味鼓吹div+css的人最善于比较的。难道table布局速度真的就慢?
当然不是,我们知道,我们打开一个网址,实际上是去一个远程服务器上取得一个文件,那么在带宽有限的情况,决定速度的唯一问题就是获取文件的大小,文件越大,传输时间越长!
一旦文件下载完成到本地,浏览器打开网页都是一瞬间的,以现在电脑CPU的处理速度,可以说再复杂的表格嵌套,那么有10层,也是在一瞬间打开。再者而且难道div就没有嵌套了吗?可以毫不怀疑的说,用table有多少嵌套,div也要有多少嵌套。只不过还是上面所说的table多了一个<tr>和<td>,
看似页面文件字节是大了些。但是不要忘了纯粹的div要大量的css去修饰,css也是要占用字节的。
就拿一个简单的例子说,目前的垂直居中对于所有的浏览器来说,table的td的垂直居中都是通用的。显示上不会有任何差别。但是如果用DIV就累的要死,ie6+ie7+ff都不相同。想法设法弄好几个DIV才能去实现通用。
那么,在此我不禁想table如此简单的居中,为什么非要用div去呢,这有人又会说了,为了数据和显示分离呗!
OK,下面,说这个数据和显示分离!
首先,我说明我的观点,简单的网页,数据和显示可以分离,但复杂的网页,像门户类的,那么琐碎,那么精细!根本无法分离!
但需要更换美工页面,可以肯定的说,需要花费的力气不会比table+css少,绝不会像传说种那样随便动动css就可以了。
下面我举一个例子来说明。
就像通常用的圆角矩形,有人说div+css我就可以首先,好,你是怎么实现的,无非也就是弄4个块状布局元素放在4角,然后用css去修饰嘛,你只不过是用文本去作了一个圆角,但,你的数据和显示还是相互黏贴在一起,这实现了数据和显示的分离了吗?这和表格用4个角作背景图片有什么差别呢?
完全跟table是一个思路!!!只是实现方式的差别!
而且这种方式并不万能的,稍微复杂一点的圆角怎么弄,我想要带阴影,而且要外带发光的圆角,有办法吗?没有,还是要用table的方式去实现。
而如果你要想真正的实现 数据和显示 完全的分离,你大可以把这 一整个圆角矩形,用做一个css类的背景图片(这样做的代码又违背了节省带宽的初衷)。然后把这个类应用到div上,这才叫真正的分离,但这和用到table,也或者是段落P标记上有什么差别呢,还是说,只不过是table多了一个tr,td,但是还是说,那么垂直居中的问题就能累死你!
所以,真正的数据和显示分离。是要把一切的显示效果都做成背静图片,才能完全分类。但对于门户网站这样琐碎的、页面和显示耦合性如此紧密的页面,估计很难!
真正优化的方式应该div+table+css,而不是一个table都不用!
div比table相对灵活一些,但并不是说div就一定比table好。
DIV布局的效率实在是低的很。