3.4 编辑网页图像
视频讲解
Dreamweaver CC虽然不是专业的图像编辑工具，但也提供了常用操作，如图像大小调整、图像裁剪、图像优化等，利用现有的图像编辑功能，用户可以轻松完成图像基本编辑工作。
3.4.1 实战演练：调整图像大小
在Dreamweaver CC编辑窗口中，可拖动调整图像大小，也可以在图像属性面板的【宽】和【高】文本框中精确调整图像大小。如果在调整后不甚满意，单击属性面板中的【重设图像大小】按钮，或者单击【宽】和【高】文字标签，可以分别恢复图像的宽度值和高度值。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html。
第2步，在编辑窗口中选择要调整的图像。在图像的底边、右边以及右下角出现调整手柄。
第3步，执行如下任一操作，练习手动拖放图像大小，如图3.9所示。
图3.9 使用鼠标快速调整图像大小
（1）拖动右边的手柄，调整元素的宽度。
（2）拖动底边的手柄，调整元素的高度。
（3）拖动右下角的手柄，可同时调整元素的宽度和高度。如果按住Shift键拖动右下角的手柄，可保持元素的宽高比不变。
3.4.2 实战演练：裁剪图像
利用图像属性面板中的【裁剪】按钮
可以裁剪图像区域。通过裁剪图像以强调图像的主题，并删除图像中的多余部分。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中插入图像images/2.jpg，如图3.10所示。下面设计仅显示图像中左侧第一个人像。
图3.10 插入原始图像
第3步，选中要裁剪的图像，单击图像属性面板中的【裁剪】按钮，弹出一个对话框。
第4步，单击【确定】按钮，在所选图像周围出现裁剪控制点，如图3.11所示。
图3.11 裁剪图像区域
第5步，拖曳控制点可以调整裁剪大小，直到满意为止，如图3.12所示。
图3.12 选择要保留的区域
第6步，在边界框内部或者直接按Enter键就可以裁剪所选区域。所选区域以外的所有像素都被删除，但将保留图像中的其他对象，如图3.13所示。
图3.13 裁剪效果图
3.4.3 实战演练：优化图像
网页图像的要求就是在尽可能短的传输时间里，发布尽可能高质量的图像。因此在设计和处理网页图像时就要求图像有尽可能高的清晰度与尽可能小的尺寸，从而使图像的下载速度达到最快。而图像优化就是去掉图像不必要的颜色、像素等，让图像由大变小，这个大小不仅仅指图像尺寸，而且还包括图像分辨率和图像颜色数等。
【操作步骤】
第1步，启动Dreamweaver CC，打开本小节备用练习文档test.html，另存为test1.html。
第2步，将光标设在Logo位置，选择【插入】|【图像】|【图像】命令，打开【选择图像源文件】对话框，选择并插入图像images/logo.png，如图3.14所示。
图3.14 插入Logo图像
在属性面板中，可以看到插入Logo图像的信息：大小为8KB，格式为PNG。显然，对这样一个颜色简单的Logo图像来说，可以对其进行优化，在确保视觉质量不打折扣的基础上，压缩图像大小。
第3步，选中Logo图像，单击属性面板中的【图像编辑设置】按钮
，打开【图像优化】对话框，如图3.15所示，在这里可以进行快速编辑图像、优化图像、转换图像格式等基本操作。该功能适合没有安装外部图像编辑工具的用户使用。
图3.15 图像快速编辑
第4步，考虑该Logo图像颜色简单，仅包含白色和粉红色两种，如果加上粉红色渐变，则颜色数不会超过10个。因此，设置优化后图像的格式为GIF，同时设置【颜色】为8，设置如图3.15所示。
第5步，单击【确定】按钮，按提示保存优化后图像的位置和名称。此时，在属性面板中查看图像大小，压缩到2KB，而图像的视觉质量并没有发生变化，如图3.16所示。
图3.16 优化后的图像大小和效果