Dreamweaver CS3网页制作之布局实例

下面我将详细讲解“Dreamweaver CS3网页制作之布局实例”的完整攻略。

一、前言

在Dreamweaver CS3中，常用的布局方式有表格布局、浮动布局和定位布局。本文通过示例介绍如何使用这三种方式进行网页布局。

二、表格布局

1. 实现方式

表格布局就是使用HTML中的表格标签table、tr和td来布局。具体步骤如下：

1. 使用table标签创建表格；
2. 使用tr标签创建表格行；
3. 使用td标签创建表格单元格，并填写内容。

2. 示例说明

下面以一个三列布局为例进行说明。

<table>
  <tr>
    <td>左侧栏</td>
    <td>中间内容</td>
    <td>右侧栏</td>
  </tr>
</table>

此时左侧栏、中间内容和右侧栏均会横向排列，且每一列的宽度相同。

三、浮动布局

1. 实现方式

浮动布局就是使用CSS中的float属性来实现元素的浮动。具体步骤如下：

1. 使用CSS设置元素的浮动方向；
2. 如果需要实现多列布局，需要设置元素的宽度，并使用margin属性设置元素之间的间隙。

2. 示例说明

下面以同样的三列布局为例进行说明。

<div style="float: left; width: 20%;">左侧栏</div>
<div style="float: left; width: 60%;">中间内容</div>
<div style="float: left; width: 20%;">右侧栏</div>

此时左侧栏、中间内容和右侧栏均会横向排列，但是中间内容会自适应宽度，并且左右两侧的栏目会挨着中间内容。

四、定位布局

1. 实现方式

定位布局就是使用CSS中的position属性来实现元素的定位。具体步骤如下：

1. 使用CSS设置元素的position属性为absolute；
2. 使用CSS设置元素的left和top属性为相对于父元素的距离。

2. 示例说明

下面以同样的三列布局为例进行说明。

<div style="position: absolute; left: 0; top: 0; width: 20%;">左侧栏</div>
<div style="position: absolute; left: 20%; top: 0; right: 20%;">中间内容</div>
<div style="position: absolute; right: 0; top: 0; width: 20%;">右侧栏</div>

此时左侧栏、中间内容和右侧栏均会横向排列，并且中间内容会自适应宽度，左右两侧的栏目会紧贴在中间内容两侧。

五、总结

本文介绍了在Dreamweaver CS3中使用表格布局、浮动布局和定位布局三种方式进行网页布局的方法和操作。通过以上的实例说明，读者可以清晰地掌握三种布局方式的实现过程和注意事项。