第16章在Dreamweaver中编辑HTML网页 - 16.3.1　在网页中插入图像 - 《HTML-CSS-JavaScript网页制作从入门到精通》

16.3　插入图像
3．锐化图像
16.3.4　插入鼠标经过图像

16.3　插入图像

图像和文字是网页中最重要的两个元素。一个高质量的网页是离不开图像的，制作精良的图像可以大大增强网页的美观性，使网页更加生动多彩。在页面中如何用漂亮的图像来吸引浏览者的视线是每个网站制作者都需要面对的问题。

16.3.1　在网页中插入图像

在网页中插入图像的具体操作步骤如下：

1　将光标放置在插入图像的位置，选择菜单中的【插入】|【图像】命令，弹出【选择图像源文件】对话框，如图16.17所示。

图16.17　【选择图像源文件】对话框

2　在对话框中选择相应的图像，单击【确定】按钮，插入图像，如图16.18所示。

图16.18　插入图像

3　保存文档，按F12键在浏览器中预览效果，如图16.19所示。

图16.19　插入图像效果

16.3.2　设置图像属性

仅仅将图像直接插入到网页中，并不能达到正确使用图像的目的。只有了解了图像的属性以及如何设置、修改这些属性，才能创建出图文并茂的网页。设置图像属性的具体操作步骤如下。

1　选中设置属性的图像，打开【属性】面板，在面板中显示图像的相关属性，如图16.20所示。

图16.20　打开【属性】面板

2　选中图像，在【属性】面板中的【对齐】下拉列表框中选择【右对齐】选项，如图16.21所示。

图16.21　设置对齐方式

在图像【属性】面板中的具体参数如下。

　【图像】：图像的缩略图及图像的大小。

　【宽】和【高】：图像的宽和高，默认的是图像的原始尺寸，默认单位是像素。

　【源文件】：用来指定图像文件的位置，单击【浏览文件】按钮浏览并选择图像文件，或直接在文本框中输入图像文件的路径。

　【链接】：为图像设置超链接。可以单击【浏览文件】按钮浏览并选择要链接的文件，或者直接输入URL路径。

　【替换】：当浏览器为纯文本浏览器或者已经设置为人工下载图像时的替代文本。

　【地图】：用于创建客户端图像地图。

　【垂直边距】和【水平边距】：垂直边距设置图像上下的空白。水平边距设置图像左右两边的空白。

　【目标】：指定链接所指向的网页加载到哪个帧或窗口。

　【低解析度源】：指定在图像下载完成之前显示的低质量图像。

　【边框】：设置图像周围边框的宽度。宽度为0，则没有边框。无论图像有没有链接，都可以加上边框。

　【编辑】：打开设定的图像编辑器来编辑所选图像。

　【对齐】：设置图像和文字的对齐方式。

3　保存文档，按F12键在浏览器中预览效果，如图16.22所示。

图16.22　设置图像属性效果

16.3.3　使用图像编辑器

可以在【属性】面板中编辑图像，这里集合了一些常用的图像编辑工具，其中从左往右依次如下。

　编辑：启动【外部编辑器】即首选参数中指定的图像编辑器，并使用该图像编辑器打开选定的图像。

　裁剪：修剪图像的大小，从所选图像中删除不需要的区域。

　亮度和对比度：调整图像的亮度和对比度。

　锐化：调整图像的清晰度。

1．裁剪图像

裁剪图像的具体操作步骤如下：

1　选中要裁剪的图像，单击【属性】面板中的【裁剪】按钮，此时在图像的周围会出现调整图像大小的控制手柄，如图16.23所示。

图16.23　裁剪图像

2　调整裁剪图像的大小，按Enter键确认，即可裁剪图像，裁剪后的图像如图16.24所示。

图16.24　裁剪后的图像

2．亮度和对比度

【亮度/对比度】对话框用于修改图像中像素的亮度和对比度，这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用【亮度/对比度】对话框。调整图像的亮度和对比度的具体操作步骤如下：

1　选中要调整亮度和对比度的图像，单击【属性】面板中的【亮度和对比度】按钮，如图16.25所示，弹出【亮度/对比度】对话框，如图16.26所示。

图16.25　单击【亮度/对比度】按钮

图16.26　【亮度/对比度】对话框

2　在对话框中分别拖动【亮度】和【对比度】下的滑块，或直接在文本框中输入数值，即能迅速改变图像的亮度和对比度。选中【预览】前面的复选框，则可看到图像在文档窗口中被调整的效果。单击【确定】按钮，即可调整图像的亮度和对比度。

3．锐化图像

锐化将增加对象边缘的像素的对比度，从而增加图像的清晰度或锐度。锐化图像的具体操作步骤如下：

1　选中要锐化的图像，单击【属性】面板中的【锐化】按钮，弹出【锐化】对话框，如图16.27所示。

图16.27　【锐化】对话框

2　在对话框中拖动【锐化】下的滑块，或直接在文本框中输入数值。单击【确定】按钮，即可锐化图像。

16.3.4　插入鼠标经过图像

鼠标经过图像是一种在浏览器中查看并使鼠标指针移过它时发生变化的图像。插入鼠标经过图像，必须准备两幅图像：主图像（当首次载入页面时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两幅图像应大小相等，如果这两幅图像大小不同，Dreamweaver将自动调整第二幅图像的大小以匹配第一幅图像的属性。插入鼠标经过图像的具体操作步骤如下：

1　将光标放置在插入鼠标经过图像的位置，选择菜单中的【插入】|【图像对象】|【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，如图16.28所示，在对话框中单击【原始图像】文本框右边的【浏览】按钮，弹出【原始图像】对话框，如图16.29所示。