![Dreamweaver+jQuery移动网页设计从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/368/32858368/b_32858368.jpg)
3.4 在网页中编辑图像
裁剪、调整亮度/对比度和锐化等一些辅助性的图像编辑功能不用离开Dreamweaver就能够完成。有了这些简单的图像处理工具,在编辑网页图像时就轻松多了,不需要打开其他图像编辑软件进行处理,从而大幅提高工作效率。
3.4.1 裁剪图像
裁剪图像的具体操作步骤如下。
01选中图像,打开“属性”面板,在该面板中单击“编辑”右侧的“裁剪”按钮,如图3-16所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P67_4893.jpg?sign=1739286688-YV9QKPq9kCPHzcdqRbO2QijoTfhwN364-0-6ab8288130eedc56cfb93e686edf708b)
图3-16
02弹出Dreamweaver提示对话框,如图3-17所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P68_4935.jpg?sign=1739286688-dm5SBNwwpxjMGTH9ZgxilhfGqlYXvueP-0-fd71205e972fe7466caf486d01a2327b)
图3-17
03单击“确定”按钮,在图像上出现裁剪的控制点,如图3-18所示,调整大小后,双击图像,即可裁剪图像。
★提示★
使用Dreamweaver裁剪图像时,会直接更改磁盘上的源图像文件,因此,可能需要备份图像文件,以在需要恢复图像时使用。
在退出Dreamweaver或在外部图像编辑软件中编辑该文件之前,可以撤销“裁剪”命令的效果。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P68_4966.jpg?sign=1739286688-pYx5qXbLXNDjwpHzFRPtSeVozXuGPvki-0-7610a2861b1062a599bb12193daf9ec6)
图3-18
3.4.2 重新取样图像
重新取样可以添加或减少已调整大小的JPEG和GIF图像文件中的像素,并与原始图像的外观尽可能匹配,对图像重新取样会减小图像文件的大小,并提高图像的下载性能。在“属性”面板中单击“重新取样”按钮,如图3-19所示。
3.4.3 调整图像的亮度和对比度
图像“属性”面板中的“亮度和对比度”按钮用于调整图像的亮度和对比度,具体操作步骤如下。
01选中图像,在图像“属性”面板中单击“编辑”右侧的“亮度和对比度”按钮,如图3-20所示。
02弹出“亮度/对比度”对话框,在该对话框中拖动“亮度”和“对比度”滑块到合适的位置,如图3-21所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P69_5018.jpg?sign=1739286688-75HkXKvHFHVo9M7aXxIdxBCwY3SAhlCN-0-92a3265b1910ec6ea47a01efc7b6b45d)
图3-19
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P69_5021.jpg?sign=1739286688-C52PkQNcj0qMcMUkrAaenPLK8whIIsoy-0-a1f48bfe40cf4536ec74be2cf99c65da)
图3-20
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P69_5024.jpg?sign=1739286688-Y5ZoYJUCCvFG3B0eBYjsFI4wuw2kkQkJ-0-4f5a278242ad3d04429ac183750b9585)
图3-21
03调整“亮度”和“对比度”后,单击“确定”按钮,效果如图3-22所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P70_5075.jpg?sign=1739286688-419xoDbjLk7dv3xrHGuzOrGdGSCLLd6E-0-4a73a5870570b432c83843fbf6a10dd5)
图3-22
★提示★
在“亮度/对比度”对话框中向左拖动滑块可以降低亮度和对比度;向右拖动滑块可以增加亮度和对比度,其取值范围在-100~+100,常用的取值0为最佳。
3.4.4 锐化图像
锐化将增加图像边缘像素的对比度,从而增加图像的清晰度和锐度,在Dreamweaver中锐化图像的具体操作步骤如下。
01选中要锐化的图像,单击“属性”面板中的“锐化”按钮,如图3-23所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P70_5085.jpg?sign=1739286688-K9JGtj3lvjIA6uTdbamVu2V8G3HDrPkl-0-3264ef47f3bdcf1c8c8bc97e37eefcdc)
图3-23
02弹出“锐化”对话框,在该对话框中将“锐化”设置为6,如图3-24所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P71_5142.jpg?sign=1739286688-yvjfpfR3S1Tqg0J6AWeWVS2Hq2KihlhH-0-70aee486876684b2c9331e057129e237)
图3-24
03单击“确定”按钮,即可锐化图像,如图3-25所示。
![](https://epubservercos.yuewen.com/886F6B/17640316907888406/epubprivate/OEBPS/Images/Figure-P71_5146.jpg?sign=1739286688-E5YAbzrBqYMKBKi1Nbl2Q6S368JMsVpN-0-f07eac9809ecf00dc16affe141b55003)
图3-25
★提示★
只能在保存页面之前撤销“锐化”命令的效果,并恢复到原始图像状态。页面一旦保存,对图像所做的更改将无法恢复。