3.1 图像效果实例——添加图像
在Dreamweaver CS6中，用户可以在网页中便捷地插入图像，并对插入的图像进行修改或其他编辑操作。通过在网页中添加图像，不但可以使网页的界面更加丰富，而且能够清晰、生动地表达主题信息，因此，掌握在网页中应用图像的方法很有必要。
3.1.1 插入图像
在网页中插入图像，不但能美化整个页而，还能比文本更加生动直观地展示效果，使网站设计者的意图能够一目了然。
本实例中插入图像和设置图像属性的操作，主要由“属性”面板来完成。通过本实例可以学习和掌握在Dreamweaver中应用图像的基本方法。本实例的编辑过程，主要包括以下操作环节。
（1）执行“插入”→“图像”命令，在文档中插入一个图像。
（2）选中插入的图像，然后打开“属性”面板，在面板中设置图像的尺寸和对齐方式等基本属性。
（3）执行“文件”→“保存”命令文件，然后按“F12”键，可以在浏览器中预览效果。
3.1.2 导入图像
（1）打开DW 3/images/3.1.3目录下的“start.html”文件，如图3-1所示。
图 3-1
（2）将光标插入文档中间的空白单元格中，执行“插入记录”→“图像”命令，打开“选择图像源文件”对话框（图3-2）。
图 3-2
（3）在“选择图像源文件”对话框中选择要添加的图像文件（图3-3），单击“确定”按钮。
图 3-3
（4）在文档中插入光标的位置，可以看到刚插入的图像（图3-4）。
图 3-4
（5）选中刚插入的图像，执行“窗口”→“属性”命令打开“属性”面板（图3-5）。
图 3-5
图像的“属性”面板中的各项参数功能介绍如下。
宽、高：设置图像的宽度与高度，以像素为单位。
源文件：显示图像的目录路径，可以在其中修改图像的路径来更换图像。
链接：设置图像的超链接。
替换：设置当鼠标移放到图像上时显示的提示文字。
编辑：单击该按钮，可以启动Adobe ImageReady软件，并对图像进行编辑（要先安装Adobe ImageReady软件）
使用Adobe imageReady最优化
：单击该按钮，可以开启Adobe imageReady的优化输出程序，对选取的图像进行优化处理并保存。
裁剪过：单击该按钮，所选图形边缘将出现裁切框。拖动裁切框的边缘，可以直接对图像进行显示范围的裁剪，调整确认后，按下“Enter”键即可应用裁剪结果，如图3-6所示。
图 3-6
亮度和对比度：单击该按钮，在打开的“亮度／对比度”窗口中，可以对图像的亮度和对比度进行调整（图3-7）。
图 3-7
锐化：单击该按钮，在打开的“锐化”窗口中，对图像的锐化度进行调整（图3-8）。
图 3-8
类：在该下拉列表中，可以为所选图形选择CSS样式表进行应用。
垂直边距：沿着图像上下边缘添加边距，单位为像素。
水平边距：沿着图像左右边缘添加边距，单位为像素。
低分辨率源：指定在加载目的图像前加载的图像，使网页中先加载显示出原本图像的大致内容，让观众先对图像内容有个大致了解。这种图像大多使用黑白版本，通常在带宽不足或网速较慢的情况下使用这个功能。
边框：输入数值，给图像加上一个边框，单位为像素。在默认情况下没有边框。
对齐：对齐图像和文字。
重设图像大小：单击该按钮，将图像大小还原为原始大小。只有在对图像进行了大小调整后，这个按钮才会出现在“宽”和“高”的文本框右侧。
（6）在“属性”面板的“宽”文本框中输入“283”，“高”文本框中输入“203”，调整图像的尺寸，如图3-9所示。
图 3-9
（7）在“替换”文本框中输入替换文本内容“点击查看更多内容”，在“链接”文本框中输入图像的链接地址，在“目标”下拉列表中选择“_blank”选项，如图3-10所示。
图 3-10