新客网
首页 | 新闻 | 系统·网络·服务器·安全 | 工具·办公 | 编程·数据库 | 图象·网页·运营 | 硬件·存储 | 专题教程 | 论坛·old
 → 当前位置:首页 > 教程 > 网页设计 > Html/Css > 正文

DIV与Table布局在大型网站的可用性比较

XKER.COM   2006-11-9 10:46:33  来源:天极  收藏本文

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的。让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛。

  用DIV进行排版的优势就是我不说,大家应该都比较清楚。DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做。

  中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改了回来。正式由于中国的国情造就了搜狐、新浪这样门户。

  为什么DIV不适合他们?下面我从几个方面来逐一说明:

  精简代码:

  大家都说DIV的布局精简代码,但是用DIV替代TABLE所节约的代码又被CSS(样式)所占用,而这些样式大多用于控制DIV的排版布局。那你会说了,CSS可以放在外部重用啊,要想得到这个问题的答案请往下看。

  重用性与下载量:

  统一使用一个.css的样式表文件,可以实现修改一次,全站修改的效果,这样使得维护的成本更低。但是请大家换一个角度想,如果所有页面在加载时都要访问一个文件,那这个文件每天的下载量,特别时在搜狐、新浪的网站平台上将达到几亿次,这就需要后面有很多台前端web服务器在做支撑,那后台的成本无形中也提高了很多。如果后台支撑没有做好,那么页面就会出现花屏,之前所作的工作也是白费。很多人会问,这样的几率太小了。我们所作的工作就是为了避免这一两次意外的发生,如果意外发生了,对于门户后果将是不堪设想的。

  HTTP通讯:

  统一的样式表文件采用外部调用的形式,这样每次加载单个页面都会多一次对服务器的http请求服务器都会增加一次响应,这样对前端web服务器会是很大的消耗。而原来很长时间都是将css和js写在页面前端(大家可以看看sohu和sina的页面,大多都是采用这样的形式),而不是作为外部调用的形式,也是为了尽量避免给服务器增加消耗。

  页面缓存:

  每次用户访问的页面,都会在浏览器缓存中保存一定时间,以保证用户下次再访问该页面时能够大大提高页面显示速度。而每次修改都会使页面重新下载,对于每个外部导入的样式文件也是如此,如果CSS文件修改,那么访问网站的每一个页面都会重新下载,而以往的将样式写在页面中的方式,只是修改的页面需要重新下载。

  兼容性:

  对于CSS(样式表)并不是所有浏览器的所有版本都支持的很好,比如IE5以前的浏览器对于CSS的支持就不是很好。而现在使用IE5以前版本浏览器的用户不在少数,这样就使得在页面制作的过程中需要针对不同浏览器版本进行测试,以保证兼容性,无形中也增加很多工作量(至少我接触的开发人员制作div页面比table页面的标准时间要长一些)。www.xker.com()

  横切与延展性:

  横切——传统的布局方式为了使页面下载的更快,把页面自上而下分成若干个块,但是往往采用DIV进行布局的页面都会出现这样的情况,由于每块中间栏或者其他栏内容条数不固定导致两边栏目没有同时自适应,而出现留白。

  原来的页面:

  点击查看原始尺寸

  而在出现内容不固定的情况,页面就会变成下面的样子:

  点击查看原始尺寸

  相比之下传统的table方式更容易规避这样情况的发生。

  以上我们只是讨论某一技术在某一领域的可用性,而非技术本身。

  说了这么多并不是说DIV这种布局方式不好,而是说我们应该正确的看待Table在以内容为基础的大型门户中的作用,而不是人云亦云。之所以DIV的布局方式没有在大型网站应用,不是说门户没有用DIV是技术落后,是里面的人没有前瞻性,而是多种原因决定的。网易之所以全部采用DIV的方式是因为内容并不是他们主攻方向。而对于其他门户来说,这样的决策是要靠时间来验证的。只是现在这个时机还不成熟而已。

上一篇教程:网页制作 谈谈CSS样式表的命名规范
下一篇教程:没有了
收藏本文】 【我要投稿】 【打印本文】 【论坛讨论】 【关闭窗口

相关文章
·如何像表格table一样对层div进行轻松布局·如何隐藏网页中的层DIV
·CSS+DIV设计实例:Hover over下的边框变化·CSS+DIV设计实例:看看IE中有关1px的Bug
·CSS+DIV设计实例:如何实现让多个DIV排列时居·SPAN和DIV的区别

学院文章搜索
  
推荐文章
·限制网上行为 从WorkWin限
·无线技术在Linux操作系统中
·其实很简单——防火墙设置
·端口·木马·安全·扫描应
·Windows远程控制完全指南
·十条经典的网站设计与优化
·asp全站防止注入的代码
·整理干净的系统 清理软件使
·嵌入式Linux操作系统启动信
·网页设计配色应用实例剖析
阅读排行
·免费代理IP(每日更新)
·轻松恢复硬盘数据 EasyRec
·windows下如何修改右键菜单
·DOS下对系统重新进行分区
·清除猖狂的Sxs.exe病毒
·DOS常用命令
·编程过把瘾:自己动手写操
·Fdisk分区详解
·DOS下常用的相关网络命令
·超详细:用Macfee打造自己的
专题教程
·PHP教程专题
·MySQL 专题
·数据恢复指南 专题
·Web服务器专题
·DB2 9数据库专题
·ghost教程 专题
·局域网技术专题
·虚拟机专题
·CDN加速技术专题
·注册表教程专题
最新文章
·DIV与Table布局在大型网站
·网页制作 谈谈CSS样式表的
·实现办公自动化!按键精灵
·Div + CSS 高度自适应解决
·控制前进倒退
·FLASH动画 命令大集合
·学习Flash心得
·倒播或正播控制
·让SWF文件全屏的效果
·flash实例教程—春雷闪电效
·制作超炫彩色线条图案动画
·Flash中声音的压缩与效果处
·Flash动态色彩偏转控制技巧
·Word文档轻松变成Flash
·Flash制作函数曲线课件
设为首页 - 加入收藏 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接
Copyright © 2003 - 2006 XKER Inc. All Rights Reserved
新客网 版权所有