创建页面布局之后，就可以将资源添加到页面了。在Dreamweaver中，可以使用多种方法向Web页面添加图像。本节将使用不同的方法将4个不同的图像添加到页面中。

1.替换图像占位符

在表格页面中，用替换图像占位符的方法插入图像的具体操作步骤如下：

（1）在Dreamweaver中，打开已创建的instruction.html文件。

（2）双击页面顶部的图像占位符，将弹出“选择图像源文件”对话框，查找到定义为站点根文件夹的fruit_shopping文件夹中的images文件夹，如图9-20所示。

图9-20　“选择图像源文件”对话框

（3）选中top1.jpg文件，单击“确定”按钮，这时topl.jpg文件将替换图像占位符。

（4）单击表格外部取消图像的选中状态。

（5）单击“文件”菜单→“保存”命令保存网页。

2.使用“插入”菜单插入图像

现在我们需在网页中插入一个分隔条。我们已事先将分隔条做成了图像文件082.gif。使用“插入”菜单插入分隔条图像的方法为：

（1）单击第一个表格的第三个单元格内部，如图9-21所示。

图9-21　插入分隔条图形

（2）单击“插入”菜单→“图像”命令。

（3）在“选择图像源文件”对话框中，选择fruit_shopping文件夹中的images文件夹，双击选定082.gif文件。如果出现“图像标签辅助功能属性”对话框，则单击“确定”按钮。一个长条浅绿色图形（分隔条）出现在该表格行中。

3.通过拖动插入图像

使用拖动法插入图像是最简单的一种方法：(www.daowen.com)

（1）单击表格外部取消表格选中，单击第三个表格内部。

（2）打开“文件”面板，在images文件夹中找到082.gif文件，将该文件拖到最后一个表格的插入点，如图9-22所示。

图9-22　从“文件”面板中拖动图像文件到表格中

（3）在表格外单击一次，并保存该页面。

4.从“资源”面板插入图像

用直接拖动法插入图像虽然快捷，但由于仅凭文件名判断文件，用户看不到图像内容，因此不适合于不太熟悉素材库内容的用户。下面介绍的从“资源”面板插入图像的方法非常直观，是大多用户常用的方法。具体操作步骤如下：

（1）单击第二个表格的第二个单元格内容。

（2）在“属性”面板中，从“水平”下拉列表中选择“居中对齐”，如图9-23所示，从“垂直”下拉列表中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。

图9-23　设置单元格内容的对齐方式

（3）按一次Enter键，以创建更多空间，如图9-24所示。

图9-24　在单元格中按Enter键

（4）单击“文件”面板中的“资源”选项卡，或选择“窗口”菜单→“资源”命令。如果未选中“图像”视图，则单击“图像”以查看图像资源。

（5）在“资源”面板中选择fruits.jpg文件，如图9-25所示，单击“资源”面板底部的“插入”按钮，或将fruitsjpg文件直接拖到表格插入点，这时fruits.jpg图像即显示在页面上。

（6）在表格外单击，以取消图像的选中状态。

（7）保存网页内容。