3.3 设置图像属性
视频讲解
在Dreamweaver CC编辑窗口中插入图像之后，选中该图像，就可以在属性面板中查看和编辑图像的显示属性。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，将光标设在要插入的位置，选择【插入】|【图像】|【图像】命令，打开【选择图像源文件】对话框，选择并插入图像images/1.jpg。
第3步，选中插入的图像，在属性面板的【ID】文本框中设置图像的ID名称，以方便用JavaScript脚本控制图像。在【ID】文本框的上方显示一些文件信息，如“图像”文件类型，图像大小为147KB。如果插入占位符，则会显示“占位符”字符信息，如图3.5所示。
图3.5 插入图像并定义图像ID
第4步，插入图像之后如果临时需要更换图像，可以在【Src】文本框中指定新图像的源文件。在文本框中直接输入文件的路径，或者单击【选择文件】按钮
，在打开的【选择图像源文件】对话框中找到想要的源文件。
第5步，定义图像显示大小。在【宽】和【高】文本框中设置选定图像的宽度和高度，默认以px（像素）为单位。
提示：当插入图像时，Dreamweaver默认按原始尺寸显示，同时在该文本框中显示原始宽和高。如果设置的宽度和高度与图像的实际宽度和高度不等比，则图像可能会变形显示。改变图像原始大小后，可以单击【重设图像大小】按钮
恢复图像原始大小。
第6步，调整图像大小之后，虽然图像显示变小，但图像实际大小并没有发生变化，下载时间保持不变。在Dreamweaver中重新调整图像的大小时，可以对图像进行重新取样，以便根据新尺寸来优化图像品质。
操作方法：单击【重新取样】按钮
，重新取样图像，并与原始图像的外观尽可能地匹配。对图像进行重新取样会减小图像文件的大小，但可以提高图像的下载性能，降低带宽，如图3.6所示。
图3.6 调整图像大小并重新取样
第7步，为图像指定超链接。在【链接】文本框中输入需要链接的地址，或者单击【选择文件】按钮，在当前站点中浏览并选择一个文档，也可以在文本框中直接输入URL，为图像创建超链接。
此时，【目标】下拉列表被激活，在这里指定链接页面应该载入的目标框架或窗口，包括_blank、_parent、_self和_top。设置效果如图3.7所示。
图3.7 定义图像链接
第8步，增强图像可用性。在【替代】文本框中指定在图像位置上显示的可选文字。当浏览器无法显示图像时显示这些文字，如“唯美的秋天景色”；在【标题】文本框中输入文本，定义当鼠标指针移动到图像上面时，会显示的提示性文字，如“高清摄影图片”，如图3.8所示。
图3.8 定义图像的标题和替换文本