5.4 编辑网页图像
Dreamweaver CC虽然不是专业的图像编辑工具，但也提供了常用操作，如图像大小调整、图像裁切、图像色彩调整以及图像对齐等，利用现有的图像编辑功能，用户可以轻松完成图像基本编辑工作。
5.4.1 实战演练：调整图像大小
在Dreamweaver CC编辑窗口中，可拖动调整图像大小，也可以在图像【属性】面板的【宽】和【高】文本框中精确调整图像大小。如果在调整后不甚满意，单击【属性】面板中的【重设图像大小】按钮，或者单击【宽】和【高】文字标签，可以分别恢复图像的宽度值和高度值。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html。
第2步，在编辑窗口中选择要调整的图像。在图像的底边、右边以及右下角出现调整手柄。
第3步，执行如下任一操作，练习手动拖放图像大小，如图5.15所示。
图5.15 使用鼠标快速调整图像大小
（1）拖动右边的手柄，调整元素的宽度。
（2）拖动底边的手柄，调整元素的高度。
（3）拖动右下角的手柄，可同时调整元素的宽度和高度。如果按住Shift键拖动右下角的手柄，可保持元素的宽高比不变。
5.4.2 实战演练：裁剪图像
单击图像【属性】面板中的【裁剪】按钮
可以减小图像区域。通过裁剪图像以强调图像的主题，并删除图像中的多余部分。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中插入图像images/2.jpg，如图5.16所示。下面设计仅显示图像中左侧第一个人像。
图5.16 插入原始图像
第3步，选中要裁切的图像，单击图像【属性】面板中的【裁剪】按钮，弹出一个对话框。
第4步，单击【确定】按钮，在所选图像周围出现裁切控制点，如图5.17所示。
图5.17 裁切图像区域
第5步，拖曳控制点可以调整裁切大小，直到满意为止，如图5.18所示。
图5.18 选择要保留的区域
第6步，在边界框内部双击或者直接按Enter键就可以裁切所选区域。所选区域以外的所有像素都被删除，但将保留图像中其他对象，如图5.19所示。
图5.19 裁切效果图
5.4.3 实战演练：调整图像亮度和对比度
单击图像【属性】面板中的【亮度和对比度】按钮
，可修改图像中像素的亮度或对比度。利用该按钮可调整图像的高亮显示、阴影和中间色调，修正过暗或过亮的图像。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中插入图像images/3.jpg。
第3步，选中要调整亮度和对比度的图像，单击【亮度和对比度】按钮，会弹出提示对话框。
第4步，单击【确定】按钮，打开【亮度／对比度】对话框，如图5.20所示。
图5.20 【亮度／对比度】对话框
第5步，拖动亮度和对比度的滑动块进行调整设置。取值范围是-100~100。
第6步，单击【确定】按钮即可，如图5.21所示。
图5.21 亮度和对比度调整前后对比效果
5.4.4 实战演练：锐化图像
锐化的原理就是通过增加图像边缘的对比度来调整图像的焦点。一般扫描的图像或数码照片边缘都比较柔化模糊，为了防止特别精细的细节丢失，必须要进行适当的锐化，从而提高边缘的对比度，使图像更清晰。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中插入图像images/4.jpg。
第3步，选中要锐化的图像，单击图像【属性】面板中的【锐化】按钮
可锐化图像，会弹出提示对话框。
第4步，单击【确定】按钮，打开【锐化】对话框，如图5.22所示。
图5.22 【锐化】对话框
第5步，拖动锐化滑动块进行调整设置。取值范围是1~10。选中【预览】复选框，在调整图像时，可以预览对图像所做的更改。
第6步，单击【确定】按钮即可，如图5.23所示。
图5.23 锐化前后对比效果
5.4.5 实战演练：优化图像
网页图像的要求就是在尽可能短的传输时间里，发布尽可能高质量的图像。因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。而图像优化就是去掉图像不必要的颜色、像素等，让图像由大变小，这个大小不仅仅指图像尺寸，而且还包括图像分辨率和图像颜色数等。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，将光标设在Logo位置，选择【插入】｜【图像】｜【图像】命令，打开【选择图像源文件】对话框，选择并插入图像images/logo.png，如图5.24所示。
图5.24 插入图像
在【属性】面板中，用户会看到插入Logo图像的信息：大小为8KB，格式为PNG。显然，对于这样一个颜色简单的Logo标志来说，可以对其进行优化，在确保视觉质量不打折扣的基础上压缩图像大小。
第3步，选中Logo图像，单击【属性】面板中的【图像编辑设置】按钮
，打开【图像优化】对话框，如图5.25所示，在这里可以快速编辑图像、优化图像、转换图像格式等基本操作。该功能适合没有安装外部图像编辑的用户使用。
第4步，考虑该Logo颜色简单，仅包含白色和粉红色两种，如果加上粉红色渐变，则颜色数不会超过10个。因此，设置优化后图像的格式为GIF，同时设置【颜色】为8，设置如图5.25所示。
图5.25 图像快速编辑
第5步，单击【确定】按钮，按提示保存优化后图像的位置和名称。此时，在【属性】面板中查看图像大小，压缩到2KB，而图像的视觉质量并没有发生变化，如图5.26所示。
图5.26 优化后的图像大小和效果