Dreamweaver CS6提供了多种对Web页面进行布局的方法，利用表格设计网页布局是其中常用的一种。

本节将通过一个简单的例子介绍使用表格进行页面布局的方法。

新建一个HTML页面。

打开“插入”浮动面板中的“常用”面板，单击表格图标，在弹出的对话框中设置表格的行为1，列为2，宽为850像素，然后单击“确定”插入表格。

选中表格，在属性面板上的“对齐”下拉列表中选择“居中对齐”，使表格在页面中居中。

选中第一行第二列的单元格，在属性面板上设置其宽度为300像素，然后执行“插入”/“图像”命令，在此插入一张图片。效果如图6-44所示。

图6-44 在单元格中插入图片

将光标定位在第一行第一列的单元格中，单击属性面板上的拆分单元格按钮，在弹出的对话框中将单元格拆分为五行一列。

将光标定位在拆分后的第一行单元格中，输入文本“welcome”。切换到属性面板，新建一个CSS规则，选择器类型为“标签”，选择器名称为h1，在弹出的规则定义对话框中设置大小为24、加粗。然后在属性面板上设置其格式为“标题1”，单元格水平对齐方式为“居中对齐”。

将光标定位在拆分后的第二行单元格中，输入文本“财经”。然后在属性面板上设置其单元格水平对齐方式为“左对齐”。

将光标定位在拆分后的第三行单元格中，单击属性面板上的拆分单元格按钮，在弹出的对话框中将单元格拆分为两列。在拆分后的第一列的单元格中插入一幅图片。此时的效果如图6-45所示。(www.daowen.com)

图6-45 在单元格中插入图片

将光标定位在拆分后的第三行第二列的单元格中，执行“插入”/“表格”命令，插入一个七行四列的表格，并在属性面板上设置其宽度为100%，边框粗细为0。

将嵌套表格的第三行单元格合并为一行，然后在其中输入文本，并添加链接，此时的效果如图6-46所示。

图6-46 页面效果

同理，在其他两行单元格中插入相应的内容。最终的页面效果如图6-47所示。

图6-47 页面效果

保存页面。按F12键即可在浏览器中预览页面效果。