Dreamweaver CS3网页制作之布局实例
下面我将详细讲解“Dreamweaver CS3网页制作之布局实例”的完整攻略。
一、前言
在Dreamweaver CS3中，常用的布局方式有表格布局、浮动布局和定位布局。本文通过示例介绍如何使用这三种方式进行网页布局。
二、表格布局
1. 实现方式
表格布局就是使用HTML中的表格标签table、tr和td来布局。具体步骤如下：
- 使用table标签创建表格；
- 使用tr标签创建表格行；
- 使用td标签创建表格单元格，并填写内容。
2. 示例说明
下面以一个三列布局为例进行说明。
<table> <tr> <td>左侧栏</td> <td>中间内容</td> <td>右侧栏</td> </tr></table>此时左侧栏、中间内容和右侧栏均会横向排列，且每一列的宽度相同。
三、浮动布局
1. 实现方式
浮动布局就是使用CSS中的float属性来实现元素的浮动。具体步骤如下：
- 使用CSS设置元素的浮动方向；
- 如果需要实现多列布局，需要设置元素的宽度，并使用margin属性设置元素之间的间隙。
2. 示例说明
下面以同样的三列布局为例进行说明。
<p style="float: left; width: 20%;">左侧栏</p><p style="float: left; width: 60%;">中间内容</p><p style="float: left; width: 20%;">右侧栏</p>此时左侧栏、中间内容和右侧栏均会横向排列，但是中间内容会自适应宽度，并且左右两侧的栏目会挨着中间内容。
四、定位布局
1. 实现方式
定位布局就是使用CSS中的position属性来实现元素的定位。具体步骤如下：
- 使用CSS设置元素的position属性为absolute；
- 使用CSS设置元素的left和top属性为相对于父元素的距离。
2. 示例说明
下面以同样的三列布局为例进行说明。
<p style="position: absolute; left: 0; top: 0; width: 20%;">左侧栏</p><p style="position: absolute; left: 20%; top: 0; right: 20%;">中间内容</p><p style="position: absolute; right: 0; top: 0; width: 20%;">右侧栏</p>此时左侧栏、中间内容和右侧栏均会横向排列，并且中间内容会自适应宽度，左右两侧的栏目会紧贴在中间内容两侧。
五、总结
本文介绍了在Dreamweaver CS3中使用表格布局、浮动布局和定位布局三种方式进行网页布局的方法和操作。通过以上的实例说明，读者可以清晰地掌握三种布局方式的实现过程和注意事项。