« 上一篇下一篇 »

Table 和 CSS+DIV网页布局方式的比较

 

Table现在都不适用于网页布局了,现在都很流行 CSS+DIV进行网页的布局。

那么,Table 将近处于淘汰的趋势了,为什么我们不建议使用Table 进行网页布局呢?

  1. Table要比其它html标记占更多的字节。(延迟下载时间,占用服务器更多的流量资源。)

  2. Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。)

  3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)

  4. 在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)

  5. Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%(这会限制你页面设计的自由性。)

  6. 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。(先花时间学一些CSS知识,会省去你以后大量的时间。)

  7. table对对于页面布局来说,从语义上看是不正确的。(它描述的是表现,而不是内容。)

  8. table代码会让阅读者抓狂。(不但无法利用CSS,而且会你不知所云)

  9. table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

  10. 但是,在某些用途方面Table还是适用的,比如,用table做表格是完全正确的。

那么现在来说下使用 CSS+DIV的好处:

1、网站设计采用DIV+CSS布局让页面更具亲和力

        企业网站建设与企业网站设计的直接目的就是为了能给客户带来更好的体验与服务,在最大程度上让客户更详细的了解企业的产品与服务信息,富含丰富样式,且使页面更加灵活的DIV+CSS网站设计方法不仅可以根据不同的浏览器达到显示效果的统一和不变形,更支持浏览器的向后兼容,在用户体验亲和力和吸引力方面,DIV+CSS的网站设计布局方式更具优势。

2、网站设计采用DIV+CSS布局可以让我们的网站运行得更快

        DIV+CSS最大的优势表现为在网站设计中将大部分页面代码写进CSS文件,做到代码简洁,使得页面体积容量变小,对于任何一个大型网站来说简洁的代码可以节省大量带宽,使页面载入得更快。

3、 网站设计采用DIV+CSS布局可以保持视觉的一致性

         采用DIV+CSS的网站设计方法可以将所有页面,所有区域统一用CSS文件控制,避免了不同区域,不同页面的效果偏差。

4、网站设计采用DIV+CSS,表现和结构分离,减少关联性,提高工作效率

        DIV+CSS表现和结构分离的网站设计原理,减少了团队成员工作之间的相互关联性,使得团队开发更容易分工与合作,而且在修改页面时只需要根据区域内容标记,到CSS里找到相应的ID修改即可,即省时好记又不会破坏页面其他部分的布局样式,大大的提高了团队网站设计工作效率。

5、网站设计采用DIV+CSS可以拥有更好的搜索引擎体验

        相对于传统的table网站设计方法, DIV+CSS技术的网站设计方法可以将大部分的HTML代码和内容样式写入CSS文件,使得网页正文部分内容更为突出明显,对于搜索引擎的表现更为友好。

6、Table表格布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。

7、表现和内容相分离,干净利落,将设计部分剥离出来放在一个独立样式文件中,而网页主要来放置您的内容,你可以减少未来网页无效的可能。

8、更灵活控制页面布局,通常页面的下载是按照代码的排列顺序,而表格布局代码的排列代表从上向下,从左到右,无法改变。而通过CSS控制,您可以任意改变代码的排列顺序,比如将重要的右边内容先加载出来。

9、强大的字体控制和排版能力,CSS控制字体的能力比糟糕的FONT标签好多了,CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。

10、缩短改版时间,因为网站的布局都是通过外部的css文件来控制,只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的样式行,那么整个站点的所有页面都会随之发生变动。

说了CSS+DIV布局的这么多好处,但是,它也有一些不好之处:

1、CSS网站制作的设计元素通常放在1个外部文件中,或几个文件,有可能相当复杂,甚至比较庞大,如果CSS文件调用出现异常,那么整个网站将变得惨不忍睹。

2、DIV+CSS尽管不是高不可及,但至少要比表格定位复杂的多,即使对于网站设计高手也很容易出现问题,更不要说初学者了。

3、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化,甚至不能保证一定比HTML网站有更简洁的代码设计,何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量,这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前,而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言,网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

 

温馨提示:文章内容仅代表作者个人观点,不代表初橙博客赞同其观点和对其真实性负责!
版权声明:本站部分为转载文章,来源于网络 ,版权归原作者所有,欢迎分享本文,如原作者不同意转载请邮箱联系站长处理!
转载申明:本站文章,欢迎转载。但转载时请保留原文地址。
原文地址:http://www.gxuan.cc/post/44.html
分享到: