2.6 用图像美化网页

本节教学录像时间：12分钟

无论是个人网站还是企业网站，图文并茂的网页都能为网站增色不少。用图像美化网页会使网页变得更加美观、生动，从而吸引更多的浏览者。

2.6.1 选择合适的图像格式

网页中通常使用的图像格式有3种，即GIF、JPEG和PNG，下面介绍它们各自的特性。

1.GIF格式

网页中最常用的图像格式是GIF，其特点是图像文件占用磁盘空间小，支持透明背景和动画，多数用于图标、按钮、滚动条和背景等。

2.JPEG格式

JPEG格式是一种图像压缩格式，主要用于摄影图片的存储和显示，文件的扩展名为．jpg或．jpeg。

GIF格式文件和JPEG格式文件的特点对比见下表。

3.PNG格式

PNG格式汲取了GIF格式和JPEG格式的优点，存储形式丰富，兼有GIF格式和JPEG格式的色彩模式，采用无损压缩方式来减小文件的大小。

2.6.2 插入图像

在文件中插入漂亮的图像会使网页更加美观，使页面更具吸引力。

步骤01 打开随书光盘中的“素材\ch02\2.6\2.6.2\index.html”文件。

步骤02 选择【插入】【图像】【图像】菜单命令。

步骤03 弹出【选择图像源文件】对话框，从中选择要插入的图像文件，然后单击【确定】按钮，即可完成向文档中插入图像的操作。

保存文档，按【F12】键在浏览器中预览效果。

2.6.3 设置图像属性

在页面中插入图像后单击选定图像，此时图像的周围会出现边框，表示图像正处于选中状态。可以在【属性】面板中设置该图像的属性。

1．【地图】

用于创建客户端图像的热区，在右侧的文本框中可以输入地图的名称。

小提示

输入的名称中只能包含字母和数字，并且不能以数字开头。

2．【热点工具】按钮

单击这些按钮，可以创建图像的热区链接。

3．【宽】和【高】

设置在浏览器中显示图像的宽度和高度，以像素为单位。

如在【宽】文本框中输入宽度值，页面中的图片即会显示相应的宽度。

小提示

【宽】和【高】的单位除像素外，还有pc （十二点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）和2in+5mm的单位组合等。

4．【图像源文件】

用于指定图像的路径。单击【Src】文本框右侧的【浏览文件】按钮，弹出【选择图像源文件】对话框，可从中选择图像文件，或直接在文本框中输入图像路径。

5．【链接】

用于指定图像的链接文件。可拖动【指向文件】图标到【文件】面板中的某个文件上，或直接在文本框中输入URL地址。

6．【目标】

用于指定链接页面在框架或窗口中的打开方式。

小提示

【目标】下拉列表中有以下几个选项。

_blank：在弹出的新浏览器窗口中打开链接文件。

_parent：如果是嵌套的框架，会在父框架或窗口中打开链接文件；如果不是嵌套的框架，则与_top相同，在整个浏览器窗口中打开链接文件。

_self：在当前网页所在的窗口中打开链接。此目标为浏览器默认的设置。

_top：在完整的浏览器窗口中打开链接文件，会删除所有的框架。

7．【原始】

用于设置图像下载完成前显示的低质量图像，这里一般指PNG图像。单击旁边的【浏览文件】按钮，即可在弹出的对话框中选择低质量图像。

8．【替换】

图像的说明性文字，用于在浏览器不显示图像时替代图像显示的文本。

9．【编辑】

启动图像编辑器中的一组编辑工具对图像进行复杂的编辑。

【编辑】按钮：单击该按钮，可以使用Photoshop编辑该文件（同时安装有Photoshop软件时才可使用）。

【编辑图像设置】按钮：单击该按钮，弹出【图像优化】对话框，从中可设置图像的格式、品质、优化等。

【从源文件中更新】按钮：无需打开Photoshop或Fireworks图像编辑软件，即可在Dreamweaver中更改源图像和更新图像。

【裁剪】按钮：单击该按钮，可以在图像上拖选出保留的区域，然后在区域上双击鼠标，即可将不需要的区域删除。

【重新取样】按钮：单击该按钮，可重新调整图像的大小，以提高图片在新的大小和形状下的品质。

【亮度和对比度】按钮：单击该按钮，在弹出的【亮度/对比度】对话框中拖动滑块或输入相应的数值，可调整图像的亮度和对比度。

【锐化】按钮：单击该按钮，在弹出的【锐化】对话框中拖动滑块，可调整图像的清晰度。

2.6.4 插入鼠标经过图像

鼠标经过图像是指在浏览器中查看并在鼠标指针移过它时发生变化的图像。鼠标经过图像实际上是由两幅图像组成，即初始图像（页面首次加载时显示的图像）和替换图像（鼠标指针经过时显示的图像）。

小提示

用于创建鼠标经过图像的两幅图像的大小必须相同。如果图像的大小不同，Dreamweaver则会自动地调整第2幅图像的大小，使之与第1幅图像匹配。

步骤01 打开随书光盘中的“素材\ch02\2.6\2.6.4\ index.html”文件，然后将光标定位于要插入鼠标经过图像的位置，选择【插入】【图像对象】【鼠标经过图像】菜单命令。

步骤02 弹出【插入鼠标经过图像】对话框，在【图像名称】文本框中输入一个名称（这里保持默认名称不变）。

步骤03 单击【原始图像】文本框右侧的【浏览】按钮，在弹出的【原始图像：】对话框中选择鼠标经过前的图像文件，设置完成后单击【确定】按钮。

步骤04 返回【插入鼠标经过图像】对话框，在【原始图像】文本框中即可看到添加的原始图像文件路径。

步骤05 单击【鼠标经过图像】文本框右侧的【浏览】按钮，在弹出的【鼠标经过图像：】对话框中选择鼠标经过原始图像时显示的图像文件，然后单击【确定】按钮，返回【插入鼠标经过图像】对话框。

步骤06 在【替换文本】文本框中输入名称（这里不再输入），并选中【预载鼠标经过图像】复选框。如果要建立链接，可以在【按下时，前往的URL】文本框中输入URL地址，也可以单击右侧的【浏览】按钮，选择链接文件（这里不填）。单击【确定】按钮，关闭对话框，保存文档，按【F12】键在浏览器中预览效果。

鼠标指针经过前的图像如下图所示。

鼠标指针经过后的图像如下图所示。

上一章目录下一章