在设计网页时，有了丰富的图像素材，就可以利用Dreamweaver把这些图像组织在一起，设计出具有一定审美效果的网页页面。

如何把所拥有的素材有机地组织在一起，在具体设计网页之前用户应心中有数，最好在纸上随意打个草稿，避免盲目操作。本页布局简明，结构也不是太复杂，但对于初学者来说仍然会存在不小的困难，下面就逐步介绍。

【操作步骤】

第1步，启动Dreamweaver，新建一个网页文件，保存为main.html。

提示：把上面制作的所有图像素材都汇集到im-ages文件夹中，并保证该文件夹和main.html文件同处在一个目录下。

第2步，在Dreamweaver文档编辑窗口中，单击窗口底部的【属性】面板中的【页面属性】按钮，如图5.13所示。如果没有显示【属性】面板，可以选择【窗口】|【属性】命令。

第3步，打开【页面属性】对话框，在【分类】列表框中选择【常规】选项，然后在右侧设置区域设置网页的背景图像，如图5.14所示。第4步，设置完毕，单击【确定】按钮关闭【页面属性】对话框。

第5步，在编辑窗口中插入一个表格。选择【插入】|【表格】命令，打开【表格】对话框，设置：1行2列，宽度800像素，边框、单元格边距和单元格间距都为0。

第6步，插入表格之后，在【属性】面板中设置表格居中显示。

第7步，把光标置于插入表格的第1个单元格中，在【属性】面板中设置第1个单元格宽为200像素。

第8步，选择【插入】|【图像】|【图像】命令，在打开的【选择图像源文件】对话框中选择要插入的LOGO图标。然后，把光标置于第2个单元格中，以同样的方法插入Banner广告条，并设置该图像在单元格中居中显示。

插入按钮和修饰图案

前面完成了网站建设时网页页面的标题设计，本节利用表格插入导航按钮和制作圆角的修饰图案。

【操作步骤】

第1步，把光标置于第1个表格的后面，选择【插入】|【表格】命令，插入一个表格，设置：1行2列，宽度800像素，边框粗细、单元格间距和单元格边距都为0。

第2步，插入表格之后，在【属性】面板中设置表格居中显示，同时设置第1个表格也居中显示，并设置第2个表格的第1个单元格宽度为100。

第3步，在第1个单元格中插入一个8行1列的表格，设置宽度为100%，同时设置边框粗细、单元格间距和单元格边距都为0的表格。

第4步，在表格中按顺序从上到下分别插入圆角图案（border1.gif）、6个按钮（about.jpg、ser-vices.jpg、gallery.jpg、freebies.jpg;、portfolio.jpg、contact.jpg）和圆角图案（border2.gif）。

第5步，以同样的方式在右边单元格中插入一个3行3列的表格，设置表格宽度为98%，并在【属性】面板中设置居中显示。

第6步，在4个顶角的单元格中插入圆角修饰图案，并设置单元格宽、高为图案大小。

第7步，设置没有插入圆角图案的单元格背景颜色为图案的颜色，即保持表格背景颜色的一致性。