标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分到不同的区块,然后用CSS来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说,DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化)。该标准简化了HTML页面代码,获得了一个较优秀的网站结构,有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用DIV布局,例如数据页面、报表之类的页面,还是使用HTML的表格会比较方便,Web标准里并没有说要抛弃Table。
DIV+CSS对页面布局的优势
DIV+CSS是一种网页的布局方法,在HTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。DIV+CSS是网站标准(也称“Web标准”)中的常用术语之一,可实现网页页面内容与表现相分离。采用DIV+CSS对网站进行构建越来越被网页设计者重视,因为在DIV+CSS结构的网页中,几乎每个元素的属性都是使用CSS定义的,所以对于网页区域和元素的调整起到了很大的作用。这种DIV+CSS模式的网站设计具有以下优势。
1.表现和内容相分离
在HTML文件中只存放文本信息,而将设计部分放在一个独立样式文件中,使我们能够对页面的布局施加更多的控制,HTML代码仍然可以保持简单明了的初衷。
2.代码简洁,提高页面浏览速度
CSS的极大优势表现在简洁的代码。对于一个大型网站来说,不仅可以节省大量的带宽、提高页面的浏览速度,而且增加了有效关键词占网页总代码的比重。因此使用DIV+CSS的Web标准制作的网站,对搜索引擎抓取页面具有一定的优势。
3.易于维护和改版
网页内容和设计样式的分离,减少了一些重复构建的方法,使页面和样式的调整变得更加方便,只要简单地修改几个CSS文件,就可以重新设计整个网站的页面。很多问题只需要改变CSS而不需要改动程序,从而降低了网站改版的成本。
4.提高搜索引擎对网页的索引效率
使用DIV+CSS方式构建的网站容易向W3C标准靠拢,因为网站是否符合W3C标准是搜索引擎对网页排名的一个影响因素。另外,网站源代码简洁,除了几个div、span、ul、li之类的标签,几乎不用其他标签,而且使用DIV+CSS可以把网页中的主要内容放在前面。这样网站的内容完全裸露在搜索引擎面前,便于搜索引擎抓取关键内容。