3.2 在网页中插入图像
视频讲解
图像在网页中可以以多种形式存在，同时Dreamweaver CC也提供了多种插入图像的方法。
3.2.1 实战演练：插入图像
如果想要把一幅图像插入到网页中，可以使用如下方法来实现。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，将光标设在要插入图像的位置，然后选择【插入】|【图像】|【图像】命令，或单击【插入】面板中【常用】选项下的【图像】按钮，从弹出的下拉选项中选择【图像】命令，如图3.1所示。
图3.1 【插入】面板
第3步，打开【选择图像源文件】对话框，从中选择图像文件，单击【确定】按钮，图像即被插入页面中，插入效果如图3.2所示。
图3.2 插入图像效果
注意：在Dreamweaver CC编辑窗口中插入图像时，在HTML源代码中会自动产生对该图像文件的引用。为确保正确引用，必须要保存图像到当前站点内。如果不存在，Dreamweaver会询问用户是否要把该图像复制到当前站点内，单击【是】按钮即可。
提示：在HTML中使用<img src= "图像地址（可以是相对地址和绝对地址）">标记可以实现插入图像。具体代码如下：
<img src="images/1.jpg" width="600" height="365" />
<img>标记主要有7个属性，分别是width（设置图像宽）、height（设置图像高）、hspace（设置图像水平间距）、vspace（设置图像垂直间距）、border（设置图像边框）、align（设置图像对齐方式）和alt（设置图像指示文字）。
3.2.2 实战演练：插入图像占位符
视频讲解
图像占位符是指没有设置src属性的<img>标记。在编辑窗口中默认显示为灰色空白，在浏览器中浏览时显示为一个红叉，如果为其指定了src属性，则该图像占位符就会立即显示该图像，在属性面板中还可设置它的宽、高、颜色等属性。
图像占位符的作用：网页制作者可先不用关注所插入图像的内容是什么，图像内容由后台程序在后期自动完成，这样极大提高了网页制作效率。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，将光标设在要插入的位置，选择【插入】|【图像】|【图像】命令，打开【选择图像源文件】对话框，随意选择并插入一幅图像。
第3步，选中插入的任意图像，在属性面板中清除Src文本框中的值，此时插入的图像就变成一幅图像占位符，显示灰色区域和该区域的大小，如图3.3所示。
图3.3 插入图像占位符
第4步，可以根据需要，在属性面板中设置图像占位符的基本属性，具体说明可以参考3.3节。
第5步，属性面板中这些选项不是必选项，用户可根据需要酌情设置，如图3.4所示。
图3.4 插入图像占位符效果
3.2.3 实战演练：插入翻转图像
视频讲解
翻转图像就是当鼠标移动到图像上时，图像会变成另一幅图，而当鼠标移开时，又恢复成原来的图像，这种行为也称为图像轮换。详细操作请扫码阅读。
线上阅读