五种基本布局定位类型:
* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。
* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。
* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。
* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。
* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。
1、首先设置要了解网页页面布局框架结构，设定宽高和边框，以及设置好class或者ID名称。
2、打开Dreamweaver CS5，点击新建HTML。
3、根据设定的网页布局，设置div网页结构。
4、添加div标签的class名称，这里也可以使用ID类名。
5、 编辑CSS控制div块的宽高和背景。
6、 这样就可以让子元素置于底部。
最一般的布局方式是头部、主体部分、尾部，类似于word文档的页眉、文档主体内容、页脚的分布。大致模型是这样：<div class="header">头部的内容一般是logo\网站导航等</div>
<div class="main">主体内容，一般有左右结构（两栏式）、左中右结构（三栏式）和通栏结构（一栏式）</div>
<div class="footer">尾部内容，一般为版权说明、网站地图、网站备案号、联系方式、网站统计之类的内容</div>
