上一篇: 
下一篇: 
为何我们强调CSS优越于表格布局的原因
作者:admin 日期:2010-07-03
在上一篇介绍北大青鸟优化工作的文章中，我们强调要用CSS布局，我们建议：设计网站之前一定要问好设计师，保证他会手写XHTML+CSS代码， 并且完工之后，网站的代码都能通过W3CValidator验证，基本没有错误。 你这网站设计的钱才没白花。
上次因文章篇幅限，没有详谈，在这些文章中，智网互联将给大家详细的说明，CSS优越于表格布局的5大原因。
1. 页面加载速度更快；
举个简单例子，同样一个网页，用表格设计的源码平均有245行，而使用CSS布局只有45-50行code，将近5倍多的无用代码，导致了table设计的网页加载速度比CSS慢2-4倍。 虽然只是几秒钟的差别，可往往就能造成一些用户离开你的网站。
出于SEO的角度，CSS布局带来了代码的精简，提高搜索引擎的爬行效率，能在最短的时间内爬完页面的内容，而不是被一些繁琐的表格代码耽误，这样对你网站的收录质量有一定的好处； 另一方面，页面显示的速度也是用户体验的重要组成部分。
2. 改版和维护容易
我们的一个网站设计师曾经这样生动地描述：“如果有客户联系我重新设计他的表格布局网站，我就告诉他我参军不干了，但若是一个CSS设计的网站，我想都不想就会答应下来。”
理由很简单，基于表格的网页把内容和格式(字体、颜色等)都混在一个html,asp, 或php文件里，而CSS-based的网页则把文字内容和格式分开，也就是说，网页的文字放在一个文件里，所有和样式有关的代码都放在另一个单独的CSS文件里。
这样做有两个好处： a. 重新设计网站的时候，不用动内容，而且只要在CSS文件里改一下，整个网站的样式都改了，而表格网站就只能一页页地修改。 b. 保持视觉设计和文字内容分离，使得网站维护团队之间能够更好的协调，例如：编辑和设计师可以分开工作。
3. 节约带宽成本
如果你的服务器每个月给你1G的带宽限制，使用table布局只能支持65,536 pv(page view)左右的流量，而用CSS则可以支持131,072 pv。 因为一样的网页，你的代码”减肥”了，需要放在服务器上的文件就小多了。 举个例子：当 ESPN.com 改版成CSS布局后，每天节约超过两百万兆字节(terabytes)的带宽。
4. 利于网站排名
table布局的网页，一般都是导航放在内容前面。 举个例子：还是说说之前的北大青鸟吧 (网址：http://www.6611006.com)通过网页的源码就能看到，整站几乎都是定义表格和内部链接的代码，没有多少文字内容。 读过搜索引擎排名原理的人肯定知道，搜索引擎较重视网页开头的内容，你要是把没用的代码放在前面，网页上真正有价值的内容就容易被搜索引擎忽视，这样就会严重伤害你的排名。
5. 网页结构更SEO友好
表格布局的网站在浏览器中显示和CSS没什么区别，但搜索引擎读的是代码，也就是说，Google等看到的网页内容顺序是不一样的
CSS布局则用<h1><h2><h3>各级标题加上<p>(段落)标签来组织内容，不仅让网站建设人员脉络清晰，更主要的是，向搜索引擎清楚地展示了网页的结构和逻辑。
当然这里并不是排除表格在网页中的一切使用，而是说它不再适合布局整个网站，展现数据或者价格的时候还是用得上表格的。
如果你想把网站改成CSS为主骨的，建议不要在table的基础上更改，麻烦还容易出乱，莫不余把内容提取出来，然后重新做一个网页的模版。
智网互联编后语：网站建设的一个很重要的原则：把代码和内容的比例降到最低， 这就是使用CSS的好处，把格式阿，字体阿，颜色结构这些不含内容的东西统统隔离到一个单独的文件当中，让搜索引擎集中爬行富含关键字的内容。
文章来自: 
引用通告: 
Tags: 
相关日志:
