第05章使用图像.ppt
第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 插入图像占位符,图像占位符是在准备好将最终图像添加到网页文档之前而使用的图像，使用“图像占位符”可以避免由于没有图像而导致无法继续设计网页的尴尬。,5.5 使用Fireworks文件,Dreamweaver 8作为可视化网页编辑工具，与Fireworks一起使用，可以使网页设计更加方便、快捷。用户使用Fireworks可以创建各种适用于Dreamweaver 8的图像和HTML文件。并且可以通过放置于文档中的Fireworks 图像来启动Fireworks应用程序，并进行优化和编辑。在网页文档中，可以直接插入Fireworks创建的GIF、JEPG或PNG图像，与插入其他GIF、JEPG图像一样。在Fireworks中更新Dreamweaver图像占位符 使用Fireworks来优化或编辑图像,在Fireworks中更新Dreamweaver图像占位符,如果系统中装有Fireworks应用程序，则可以根据Dreamweaver 图像占位符创建新的图形。新图像的大小设置与占位符图像的大小相同。用户可以在Fireworks中编辑该图像，然后在 Dreamweaver中替换它。,使用Fireworks来优化或编辑图像,在Dreamweaver内部图像编辑器不能满足编辑图像的要求时，可以使用Fireworks优化或编辑图像。这时可先选取要编辑的图像，单击“图像”属性检查器中的“编辑”按钮，启动Fireworks并进行编辑。在使用Fireworks来编辑图像前，要先将该图像类型的外部图像编辑器设置为Fireworks。,5.6 思考与练习,填空题 1.在网页中插入图像通常是用于、或。2.图像的文件格式有很多种，在Web页中通常使用的只有、和 3种，这3种格式的一个共同特点是。3.插入图像时，在“选择图像源文件”对话框中，选中 单选按钮可以选择一个图形文件；选中 单选按钮可以选择一个动态图像源文件。4.用户在 对话框中，可以对现有的文件类型设置外部图像编辑器。5.当在外部图像编辑器中编辑完图像后，保存并返回Dreamweaver 8时，网页文档窗口中的图像会。6.鼠标经过图像中的这两个图像应大小相等，当两个图像大小不同，Dreamweaver 8 将自动调整第 个图像的大小以匹配第 个图像的属性。,5.6 思考与练习,选择题 7.在Dreamweaver 8中图像的默认对齐方式是()。A.左对齐 B.基线 C.顶端D.底部8.在Dreamweaver 8中要按比例调整图像的大小，应在按住()键的同时，调整图像的控制点。A.CtrlB.Alt C.ShiftD.Tab,5.6 思考与练习,选择题 9.在网页中设置文本在图像的右侧自动换行，应选择的对齐方式是()。A.左对齐 B.底部 C.绝对中间 D.右对齐10.在网页图像上创建热点，将链接后的网页载入的父窗口中，在“目标”下拉列表框应设置的选项是()。A._blankB._parent C._self D._top,5.6 思考与练习,简答题11.简述使用外部图像编辑器编辑图像的方法。12.简述图像占位符的使用方法及将其替换过程。,5.6 思考与练习,操作题13.创建如图所示的鼠标经过图像。14.在Dreamweaver 8的文档中插入宽为200像素，高为100像素的图像占位符，然后启动 Fireworks 来设计图像并替换该图像占位符。,
