3.2　图像效果实例——插入图像占位符

在进行网页设计时，通常会遇到需要插入图像，但并不需要立即将图像插入到文档中的情况。这个时候可以先在需要插入图像的位置插入一个图像占位符，等完成布局后再将图像占位符用图像进行替换。

在本实例中添加图像占位符，主要通过设置“添加图像占位符”对话框来完成。通过本实例，可以学习和掌握在Dreamweaver中设置图像占位符和替换图像占位符的基本方法。本实例的编辑过程，主要包括以下操作环节。

（1）执行“插入”→“图像对象”→“图像占位符”命令，在文档中插入图像占位符。

（2）双击文档中的图像占位符，在打开的对话框中选择图像文件替换占位符。

（3）执行“文件”→“保存”命令保存文件，按下“F12”键在浏览器中预览效果。

插入图像占位符的操作步骤如下。

（1）在Dreamweaver CS6中，打开DW 3/3.2.1中Dw 3\images\Lesson 7小节目录下的“start.html”文件（图3-11）。

（2）将光标插入到文档中要插入图像的位置，执行“插入记录”→“图像对象”→“图像占位符”命令，打开“图像占位符”对话框（图3-12）。

“图像占位符”对话框中各项参数的功能介绍如下。

名称：设置图像占位符的名称，并在占位符中显示出来。

宽度：设置图像占位符的宽度，单位为像素。

高度：设置图像占位符的高度，单位为像素。

颜色：为图像占位符设置颜色。

替换文本：设置图像占位符的替换文本。

（3）在弹出的“图像占位符”对话框中，在“名称”文本框中输入“PIC”，在“宽度”文本框中输入“283”，“高度”文本框中输入“203”（图3-13）。

　　

图　3-13

（4）在“颜色”文本框中输入图像占位符的颜色值“＃EFEFF3”，在“替换”文本框中输入替换文本“图像内容”，然后单击“确定”按钮（图3-14）。

（5）在开始插入光标的位置，可以看到已经创建了一个图像占位符（图3-15）。