本节课将要学习如何使用Dreamweaver的表格布局来设计网页。当前网页设计，都是使用DIV标签进行标记，再使用CSS样式对网页进行布局，也就是俗称的“DIV+CSS网页设计”。而学习DIV和CSS来设计网页，需要掌握HTML和CSS知识，为此，这里使用对初学者来说更容易操作和掌握的表格布局，也就是"table"标签进行网页结构设计。

首先，仍然要了解我们的网页结构（如下图），这个结构理解成表格，就是4行1列，并且宽度是960像素，整体高度自动。下面，我们就按照这个结构来使用表格对网页进行布局设计：

一、打开Dreamweaver软件，选择新建“HTML”文档。也可以在菜单栏的文件管理中，新建一个空白HTML文档。

二、新建完成后，修改页面标题为“畅游诗歌乐园”，并按Ctrl+S保存（或者在文件菜单中选择保存功能），保存文件名称为“index.html”。保存完成后，在软件右下角的站点目录里可以看到“index.html”文件存在。

注：通常，一个站点的首页，即访问站点后自动展示出来的页面文件名称，都是“index”，所以这里，我们将课件首页文件名称为“index.html”。

注：要养成在修改文档之后经常做保存的好习惯。保存快捷键Ctrl+S（绝大部分应用软件都是如此，如PPT、WORD、Photoshop等）。

三、选择快捷菜单中的插入中的常用栏，使用其中的“表格”功能，再插入表格属性面板中设置：行数4，列数1，表格宽度960像素，间距、边距、边框都设置为0。最后点击确定。

四、选中插入在页面中的表格，在下面的属性设置中，设置对齐方式为“居中对齐”。

注：选中表格时，可以将鼠标移至表格下方直至表格出现红色边框时，点击鼠标，可选中整个表格。

五、使用鼠标左键单击表格中的第一个单元格，然后在下方的属性设置中，设置高为：246（此处的246像素高度为切片时第一个图片的高度，可在查看图片时确定此高度的值），背景图片为images/header_bg.jpg（点击背景设置后面的小文件夹图标，可以在站点目录中选中需要设置的目标图片：header_bg.jpg，无需手动输入）。

六、同样的方法：单击第二个单元格，在属性中设置单元格高度为：32（应当与nav_bg.jpg图片的高度一致），背景为"images/nav_bg.jpg"。

七、同样的方法：单击第三个单元格，设置背景图片为“images/main_bg.jpg”。

注间：此处高度不用设置，因为内容部分的高度是由具体内容的多少而确定的，所以不设置高度，让其高度根据后期所添加的内容自动填充。

八、同样的方法：单击第四个单元格，设置单元格高度为286像素（应当与footer_bg.jpg高度一致），并设置背景为"images/footer_bg.jpg"。

至此，整体页面的布局和背景设置完成。（操作完成之后，一定不要忘记保存哦。）