网页设计与网站建设完全实战手册
上QQ阅读APP看书,第一时间看更新

6.3 在网页中简单地编辑图像

Dreamweaver CC提供了基本的图像编辑功能,无须使用外部图像编辑应用程序,即可修改图像。插入图像后,如果图像的大小和位置并不合适,还需要对图像的属性进行具体的调整,如大小、位置和对齐方式等。

6.3.1 裁剪图像

使用Dreamweaver CC内置的基本图像编辑功能可以裁剪图像,删除图像中不需要的部分。

01 打开网页文档,选中要裁剪的图像,打开“属性”面板,在“属性”面板中单击“裁剪”按钮,如图6-10所示。

图6-10 单击“裁剪”按钮

02 弹出Dreamweaver提示对话框,如图6-11所示。

图6-11 提示框

★高手支招★

使用Dreamweaver CC裁剪图像时,会更改磁盘上的源图像文件,因此,需要事先备份图像文件,以备在需要恢复到原始图像时使用。

03 单击“确定”按钮,此时,图像的周围会出现裁剪控制点,如图6-12所示。

图6-12 出现裁剪控制点

04 调整裁剪控制点至合适位置,在边界框内部双击或按Enter键裁剪所选区域。如图6-13所示。

图6-13 裁剪图像

★提示★

执行“修改”|“图像”|“裁剪”命令,也可裁剪图像。

6.3.2 调整图像亮度和对比度

用户可以直接在Dreamweaver CC中调整图像的亮度和对比度,对图像的高亮显示、阴影和中间色调进行简单的调整。

01 打开网页文档,选中要调整亮度/对比度的图像。在“属性”面板中单击“亮度/对比度”按钮,如图6-14所示。

图6-14 单击“亮度/对比度”按钮

02 弹出“亮度/对比度”对话框,如图6-15所示。

图6-15 “亮度/对比度”对话框

03 在对话框中拖动亮度和对比度滑块(向左为降低,向右为增加,取值范围为-100~100),选中“预览”复选框,可以在调整图像的同时,预览到对该图像所做的修改。

★提示★

执行“修改”|“图像”|“亮度/对比度”命令,也可用弹出“亮度/对比度”对话框。

04 单击“确定”按钮,即完成了调整图像亮度和对比度的操作。如图6-16所示。

图6-16 调整亮度和对比度的效果

6.3.3 锐化图像

锐化图像可以通过增加图像中边缘的对比度来调整图像的焦点。扫描图像或拍摄数码照片时,大多数图像捕获软件的默认操作是柔化图像中各对象的边缘,这可以防止特别精致的细节从组成数码图像的像素中丢失。不过,要显示数码图像文件中的细节,经常需要锐化图像,从而提高边缘的对比度,使图像更清晰。

01 打开网页文档,选中要锐化的图像。在“属性”面板中单击“锐化”按钮,如图6-17所示。

图6-17 单击“锐化”按钮

02 弹出“锐化”对话框,在对话框中进行相应的设置,在对话框中拖动“锐化”滑块,调至合适的位置,如图6-18所示。

图6-18 “锐化”对话框

★提示★

执行“修改”|“图像”|“锐化”命令,也可用弹出“锐化”对话框。

03 单击“确定”按钮,即完成锐化图像的操作,如图6-19所示。

图6-19 锐化图像