- Dreamweaver+jQuery移动网页设计从新手到高手
- 张雪玲 刘琳
- 890字
- 2025-02-21 04:40:34
3.4 在网页中编辑图像
裁剪、调整亮度/对比度和锐化等一些辅助性的图像编辑功能不用离开Dreamweaver就能够完成。有了这些简单的图像处理工具,在编辑网页图像时就轻松多了,不需要打开其他图像编辑软件进行处理,从而大幅提高工作效率。
3.4.1 裁剪图像
裁剪图像的具体操作步骤如下。
01选中图像,打开“属性”面板,在该面板中单击“编辑”右侧的“裁剪”按钮,如图3-16所示。

图3-16
02弹出Dreamweaver提示对话框,如图3-17所示。

图3-17
03单击“确定”按钮,在图像上出现裁剪的控制点,如图3-18所示,调整大小后,双击图像,即可裁剪图像。
★提示★
使用Dreamweaver裁剪图像时,会直接更改磁盘上的源图像文件,因此,可能需要备份图像文件,以在需要恢复图像时使用。
在退出Dreamweaver或在外部图像编辑软件中编辑该文件之前,可以撤销“裁剪”命令的效果。

图3-18
3.4.2 重新取样图像
重新取样可以添加或减少已调整大小的JPEG和GIF图像文件中的像素,并与原始图像的外观尽可能匹配,对图像重新取样会减小图像文件的大小,并提高图像的下载性能。在“属性”面板中单击“重新取样”按钮,如图3-19所示。
3.4.3 调整图像的亮度和对比度
图像“属性”面板中的“亮度和对比度”按钮用于调整图像的亮度和对比度,具体操作步骤如下。
01选中图像,在图像“属性”面板中单击“编辑”右侧的“亮度和对比度”按钮,如图3-20所示。
02弹出“亮度/对比度”对话框,在该对话框中拖动“亮度”和“对比度”滑块到合适的位置,如图3-21所示。

图3-19

图3-20

图3-21
03调整“亮度”和“对比度”后,单击“确定”按钮,效果如图3-22所示。

图3-22
★提示★
在“亮度/对比度”对话框中向左拖动滑块可以降低亮度和对比度;向右拖动滑块可以增加亮度和对比度,其取值范围在-100~+100,常用的取值0为最佳。
3.4.4 锐化图像
锐化将增加图像边缘像素的对比度,从而增加图像的清晰度和锐度,在Dreamweaver中锐化图像的具体操作步骤如下。
01选中要锐化的图像,单击“属性”面板中的“锐化”按钮,如图3-23所示。

图3-23
02弹出“锐化”对话框,在该对话框中将“锐化”设置为6,如图3-24所示。

图3-24
03单击“确定”按钮,即可锐化图像,如图3-25所示。

图3-25
★提示★
只能在保存页面之前撤销“锐化”命令的效果,并恢复到原始图像状态。页面一旦保存,对图像所做的更改将无法恢复。