2006年12月11日星期一

SEO参考:DIV+CSS三行两列经典布局

这个XHTML1标准的DIV+CSS布局是著名网页设计师阿捷2004年发布在《网页设计师》上的,一个非常经典的布局,在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在原代码的基础上作了一定规范整理):

点此下载代码 (seo_div_css_32.txt)

  页面样式图:

 DIV+CSS三行两列经典布局页面样式图

  页面实现居中等XHTML技术分析请到我编辑整理的帖子,或《网页设计师》查看,效果演示及代码:http://www.seobbs.net/xhtml32.html

  下面从SEO角度分析这个布局的优势:

  我们先按网页设计惯例来看页面中的内容分布,一般情况下,头部(A区)为站点导航,底部(D区)为辅助导航及版权信息等,左侧(B区)会放搜索、列表、排行等功能性内容,核心内容就集中在右侧(C区)。

  如上图标识所示,按传统的布局,代码编写顺序是”A->B->C->D”,也可以理解为”功能->功能->核心内容->功能”。

  都知道,搜索引擎蜘蛛爬行时,是按着页面代码顺序自上而下的,这种情况下蜘蛛很难最快的爬行到核心内容;而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回,抓取到的是与其他页面一样的功能内容时,这个页面就成为相似网页。

  为了避免这样的情况,包括新浪、搜狐、网易在内的很多网站(可能也包括你^_^),都在设计时将页面中B区和C区对调。

  再来看本布局方式,页面代码顺序是”A->C->B->D”,按内容分布可以理解为”功能->核心内容->功能->功能”,在不改变页面展示的情况下,将核心内容部分放到了前面。

  这样,蜘蛛爬行时就能在最短时间内索引到网页的核心内容。

  再加上XHTML标准设计代码精简的优势,蜘蛛爬行的效率和质量都会很高,也会更受蜘蛛欢迎的。

5 条评论:

Copter 说...

我觉得还是ACBD布局好点,我的所有网站都是这样的布局。

小小菜鸟 说...

恩,这点我认同。呵呵。不错。。 我的就是ABCD的布局。。。

哈尔滨市武警公安消防医院 说...

很直观``用户体验很好。

秦增光 说...

《网页设计师》这本书是全称书名吗?amazon等地方直接搜不出来哈,能否给个链接 :)
多谢哈

seo入门书籍 说...

我平时都是用inurl这个高级搜索命令来查询收录量的,相对比较准确吧。