第7章 图像 图像通常用来添加图形界面（例如导航按钮）、具有 视觉感染力的内容（例如Logo）或交互式设计元素 （例如鼠标经过图像或图像地图），是网页中必不可 少的元素之一。本章节将和大家一起探讨常用的Web 图像的种类、基本概念及在Dreamweaver中的具体操 作方法。

Presentation on theme: "第7章 图像 图像通常用来添加图形界面（例如导航按钮）、具有 视觉感染力的内容（例如Logo）或交互式设计元素 （例如鼠标经过图像或图像地图），是网页中必不可 少的元素之一。本章节将和大家一起探讨常用的Web 图像的种类、基本概念及在Dreamweaver中的具体操 作方法。"— Presentation transcript:

1 第7章 图像 图像通常用来添加图形界面（例如导航按钮）、具有 视觉感染力的内容（例如Logo）或交互式设计元素 （例如鼠标经过图像或图像地图），是网页中必不可 少的元素之一。本章节将和大家一起探讨常用的Web 图像的种类、基本概念及在Dreamweaver中的具体操 作方法。

2 7.1 常用的Web图像格式 计算机对图像的处理也是以文件的形式进行的，由 于图像编码的方法很多，因而形成了许多图像文件 格式。
Web页中通常使用的只有三种格式，即GIF、JPEG和 PNG。 本节将重点介绍三种图像格式的特点及其适用的范 围。

3 7.1.1 GIF格式 扩展名为“.gif”。GIF文件是经过压缩的，最多 只支持256种色彩的图像，容量较小，解码与下载 速度快。
可以创建简单的动画，并支持透明背景。 最适合显示色调不连续或具有大面积单一颜色的图 像，例如网页中的导航条、按钮、图标、徽标或其 他具有统一色彩和色调的图像。

4 7.1.2 JPEG格式 扩展名为“.jpg”或“.jpeg”。JPEG是一种有损 压缩，可支持1670万种颜色。

5 PNG格式 扩展名是“.PNG”。PNG是Fireworks的默认格式， 可保留所有原始层、矢量、颜色和效果信息（例如 阴影），并且在任何时候所有元素都是完全可编辑 的。目前，不同浏览器对PNG的支持是不一致的， 因而不建议在网页中使用PNG文件，还应该将它们 导出为GIF或JPEG格式。

6 7.2 插入图像与图像占位符 下面来学习如何在网页中插入图像，使网页更加美 观，效果如图7.1所示。

7 插入图像 （1）将光标放在“编辑区”中要插入图像的位置，如图7.2所示。然后在“插 入”工具栏的“常用”类别中，单击“图像”按钮。 （2）在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像 “banner.gif”，单击“确定”按钮，如图7.3所示。文档中即会出现插 入的图像。 注意：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口，生成一个 对图像文件的file://引用，如图7.4所示。将文档保存到站点中的任何位 置后，Dreamweaver将该引用转换为文档相对路径。 （3）在将图像插入Dreamweaver文档后，Dreamweaver会自动在HTML源代码中生 成对该图像文件的引用。生成代码如下： <img src="images/banner.gif" width="760" height="112" />

8 插入图像占位符 本小节来学习在网页中插入图像占位符。图像占位符 是Dreamweaver对图像功能的补充，指在将最终图像 添加到Web页之前使用的替代图形。在对网页进行布 局时经常用到这一功能，可以设置不同的颜色和文字 来替代图像。如图7.6所示。

9 7.3 图像属性设置 在网页中插入的图像大小、位置通常需要调整才能与 网页相配，可以通过Dreamweaver的“属性检查器” 来设置图像的基本属性，包括调整图像的大小，对齐 图像等。

10 调整图像大小 本小节将介绍两种调整图像大小的方法：以可视化的 形式调整及在属性检查器中调整。

11 对齐图像 插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位 置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作 步骤如下： （1）在“编辑区”中单击选中要调整的图像，可以看出图像当前默认的对齐方 式为“左对齐”，如图7.12所示。 （2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可 以使用“对齐”按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方 式，如图7.13所示。调整后的Logo位于表格的右侧，如图7.14所示。

12 7.4 在Dreamweaver中编辑图像 Dreamweaver具有强大的图像编辑功能，读者无需借 助外部图像编辑软件，就可以轻松实现对图像的重新 取样、裁剪、调整亮度和对比度、锐化等操作，获得 网页图像显示的最佳效果。

13 重新取样 当对网页中图像大小进行调整后，图像显示效果会发 生改变，如图7.15所示。左边为原始图像，右边为缩 小后图像，很明显调整后图像的效果不如原图。此时， 可以通过“重新取样”增加或减少图像的像素数量， 使其与原始图像的外观尽可能匹配。对图像进行重新 取样可以减少图像文件大小，提高下载速度，同时会 降低图像品质。

14 裁剪 在Dreamweaver CS4中，读者不再需要借助外部图像编辑软件，利用 Dreamweaver的“裁剪”功能，就可以轻松地将图像中多余的部分删除，突出图 像的主题。比如，在制作网页的“友情链接”栏目时，发现插入的Logo大小不 一，很不美观，需要将Logo中多余部分删除。具体操作步骤如下： （1）在“编辑区”中单击选中要裁剪的原图像，如图7.17所示。 （2）在“属性检查器”中单击“裁剪”按钮，此时图像上会出现8个调整大小 手柄，阴影区域为要删除的部分。拖动调整大小手柄，将图像的保留区域调整 到合适大小，如图7.18所示。 （3）单击“裁剪”按钮或双击图像保留区域，效果如图7.19所示。友情链接中 Logo的多余部分就被删除了。

15 亮度和对比度 在Dreamweaver中，可以通过“亮度和对比度”按钮 调整网页中过亮或过暗的图像，使图像整体色调一 致。例如，网页中的“新品上架”标题图像亮度过 暗，与网页整体风格不符，需要调整图像的亮度和对 比度，如图7.20所示。

16 锐化 Dreamweaver的“锐化”功能与Photoshop相似，是通过提高 图像边缘部分的对比度，从而使图像边界更清晰。下面来学 习如何将图像中边缘模糊的字体清晰化。 （1）在“编辑区”中单击选中要编辑的图像，如图7.24所 示。 （2）在“属性检查器”中单击“锐化”按钮。 （3）在弹出的“锐化”对话框中，分别拖动滑块左右调节 或在相应文本框中输入0~10之间的数值，直到达到满意效果， 单击“确定”按钮，如图7.25所示。 （4）锐化后的图片边缘部分更加清晰，效果如图7.26所示。

17 7.5 创建图像的特殊效果 利用Dreamweaver还可以实现网页图像的特殊效果。 本小节将学习如何设置图像替换文本以及创建鼠标经 过图像效果。

18 Alt属性的使用 网页中的某些图像代表特定的意义，有时需要为网页 中的图像添加说明性文字，就会用到图像的Alt属 性，设置图像的替换文本。当鼠标放置在图像上时， 就会显示指定的说明性文字，效果如图7.27所示。

19 创建鼠标经过图像 鼠标经过图像是指当鼠标指针移动到图像上时会显示预先设 置好的另一副图像，当鼠标指针移开时，又会恢复为第一幅 图像。在制作网页中的按钮、广告时，经常会用到这种效 果，如图7.30所示。上图为页面载入时显示的图像，下图为 鼠标经过时显示的图像。它实际上是由两幅图像组成，即原 始图像和替换图像，在制作鼠标经过图像时，应保证两幅图 像大小一致。