第05章 使用图像.pptVIP

第5章 使 用 图 像 在精美的网页中可以没有文本，但不能没有图像等多媒体元素，这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色不少，更重要的是可以借此直观地向浏览者表达信息，但是，图像的大小和数量会影响网页的下载时间。因此，图像要用得少而精，必要时应使用图像处理软件，在不失真的情况下尽量压缩图像尺寸。本章主要介绍了插入与编辑图像的基本方法，以及设置插入图像的属性。 通过本章的理论学习和上机实训，读者应了解和掌握以下内容: 插入图像 编辑图像 设置图像属性 创建鼠标经过图像 使用Fireworks文件 本章章节内容安排如下: 5.1 插入图像 5.2 编辑图像 5.3 创建鼠标经过图像 5.4 插入图像占位符 5.5 使用Fireworks文件 5.6 思考与练习 5.1 插 入 图 像 在网页中插入图像通常是用于添加图形界面(如导航按钮)、创建具有视觉感染力的内容(如照片)或交互式设计元素(如鼠标经过图像或图像地图)。 Web页中常用图像格式 插入图像到文档 Web页中常用图像格式 图像的文件格式有很多种，但Web页中通常使用的有GIF、JPEG 和 PNG 3种，它们的一个共同特点是压缩率较高。目前，GIF 和 JPEG 文件格式的支持情况最好，大多数浏览器都可以查看它们。PNG 文件具有较大的灵活性并且文件尺寸较小，所以它几乎对于任何类型的 Web 图形都是最适合的。但是，Microsoft Internet Explorer(4.0和更高版本)和 Netscape Navigator(4.04 和更高版本)只能部分支持 PNG 图像的显示。因此，为保证所有浏览者都能查看到图像，通常向网页中插入图像都是使用 GIF 或 JPEG 文件格式。 插入图像到文档 选择“插入”工具栏中的“常用”选项卡，然后单击第6个按钮旁边的下拉箭头，选择“图像”命令(如图所示)，或选择“插入”|“图像”命令，都可打开“选择图像源文件”对话框，在“选择图像源文件”对话框中选中合适的图像文件，单击“确定”按钮即可将图像插入到网页中。 5.2 编 辑 图 像 在网页中插入图像后，选定某个图像可在图像检查器中对其进行设置。同时在Dreamweaver 8中可以将其他外部图像编辑应用程序设置为外部图像编辑器，并从Dreamweaver 8中启动该编辑器修改图像，当保存了所做的修改后，在Dreamweaver 8中可以查看更新后的图像。 图像的属性检查器 对齐图像 调整图像大小 使用外部图像编辑器编辑图像 图像的属性检查器 在网页文档中选择一个图像，然后选择“窗口”|“属性”命令，打开“图像”属性检查器，可在该属性检查器中设置图像的所有参数，如图所示。 对齐图像 使用“图像”属性检查器可以设置图像相对于同一段落或行中其他元素的对齐方式。例如，可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐，同时还可以使用对齐按钮(左对齐、右对齐、居中对齐)设置图像的水平对齐方式，如图所示。 调整图像大小 在Dreamweaver 8文档窗口中，用户可以调整元素的尺寸，如图像、插件、Shockwave和Flash电影、ActiveX控件等。使用属性检查器中的“宽”和“高”文本框可以完成这一操作，但文件大小并不会改变。 当选择文档中的图像时，在图像的周围将出现3个控制点，将光标移到控制点，然后根据箭头方向拖动这些控制点，可以改变图像的大小，如图所示。 使用外部图像编辑器编辑图像 在Dreamweaver 8文档窗口中的图像可以使用外部的图像编辑器来编辑，然后保存并返回Dreamweaver 8时，网页文档窗口中的图像也随着被更新。 选择“编辑”|“首选参数”命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，打开“文件类型/编辑器”选项卡，可以为指定的图像文件类型设置外部图像编辑器，如图所示。 5.3 创建鼠标经过图像 鼠标经过图像是一种在浏览器中查看，并使用鼠标指针移过它时发生变化的图像。它实际上由主图像(当首次载入页面时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)两部分组成，并且这两个图像应大小相等，如果大小不同，Dreamweaver 8 将自动调整第二个图像的大小以匹配第一个图像的大小。 5.4 插入图像占位符 图像占位符是在准备好将最终