初识DIV+CSS和构建网站原则

许多人还是用传统的table定位和布局网站，毕竟Dreamweaver等软件能用表格所见即所得地直观编辑网页，再加上目前流行的科汛、动易、风讯等网站系统的模板在线编辑器也只能识别table布局的模板。大多数人对使用DIV+CSS方式构建网站持观望、徘徊态度，主要是目前这项技术还不是很成熟，至于符合所谓的Web2.0标准和通过W3C代码校验也只是理论性的，就是“不符合标准”、“通不过校验”又能怎样？目前为止还没有到用table布局的网站运行不了的地步呀。最关键点当然还是上面说的DIV+CSS布局的技术还不是很成熟，技术资料和指导性文档还不普及，用惯了所见即所得的视窗编辑方式，要回到代码编辑方式看着那一堆面生的代码和参数真是令人生畏呀！

我通过近一年找资料学习和研究DIV+CSS构建的成品网站，渐渐地摸索出了DIV+CSS布局网站的原理，也体会到了用这种方式构建网站的诸多优点。以下是我对DIV+CSS构建网站的感受和我个人用此方式建站的的原则。

1、用DIV+CSS布局网站，容器无论大小都有唯一的命名。正因为可以命名，就比table方式优越多了，即使在文本代码编辑方式，也是很容易识别的。我的做法是画出网站布局的图纸，把网站的各个区域划分成不同的容器，命成有规律的名称标记在图纸上面。然后按这个图纸上的容器名在模板中用“div id=容器名”来布局，例如：

<div id="toplogo">{$GetSiteLogo}</div>

根据这个容器要表现出的效果在CSS样式文件中用“#容器名{参数}”定义这个容器的样式参数，并给容器加上注释说明就更好理解了，例如：

#toplogo /* logo内框 */
{
position:absolute;
top:32px;
left:12px;
width:100px;
height:60px;
}

这张标记了容器位置和名称的图纸就象打仗指挥作战的地图一样，无论是在模板中哪个容器中插入标签还是要调整哪个容器的显示效果，都只要在模板和CSS文件中分别找到这个容器名就行，充分发挥“查找”命令能快速准确定位。总之，按网站布局情况合理划分出容器，给容器命个有意义有规律的名称，绘出一张标有容器位置和名称的图纸是用DIV+CSS布局网站的关键。

2、布局要遵循由大到小的原则。先划分出大的区域，所谓大的区域是指容器宽度为网站宽度的这类容器。我的经验是先划分出网站顶部、banner区、栏目导航区、主体区、底部工具栏区、版权信息区几个大区，然后在各个大区中再划出各自的小容器。小容器包含于各自的上级大容器。

3、网站的主体区最为复杂，但我的做法是永远只用左、右两列的方法。容器左用“z_”打头命名，右用“r_”命名。在大的列中再划分出左、右两列，这时的左容器用“z_容器名”打头带个a，右用“r_容器名”打头带个b。以此类推。图示如下：

 
此主题相关图片如下：

这种永远只分左、右两列的方法有什么好处呢？好处就是左容器的位置只要设定float:left;，而右容器的位置只要设定float:right;就可以了，再配合width、margin、padding等设计出容器表现样式。我原先是采用给每个容器指定具体的top、left值来定位的，用这种战术位置倒是精确无比，但在实际操作起来发现复杂万分。要给每个容器计算和设置精确的位置数不说，当位于上面的容器的位置要作调整时，那下面的所有容器的位置值都要调整，弊远远在于利呀。后来发现容器在崁套后便被限定在上级容器区域，如果只分两个容器，水平方向的位置只要简单地用float来居左或居右就可以了，垂直方向的位置则会被上面的容器自动向下排挤，容器的自身高度也会被自己的内容自动撑开高度。这样，左、右两容器就象顺着两边旗杆向下滑行的旗子，位置相对固定又充分自由。

先说到这里吧，大家慢慢学着用DIV+CSS布局网站吧，在使用过程中不断总结经验，当你体会其好处时，我相信大家也会逐渐喜欢上这种构建网站方式的，从此爱上她或非他不嫁哟。

后面的课程将用实例逐步来讲解用DIV+CSS构建网站的具体做法。

 (待续)

[此贴子已经被作者于2006-12-2 10:27:44编辑过]

收藏.111111111

顶你xx朝天，^_^。

x谢谢楼主了 目前正在学习DIV+css