学习教学教案第05章使用图像.ppt

《学习教学教案第05章使用图像.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章使用图像在精美的网页中可以没有文本，但不能没有图像等多媒体元素，这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色不少，更重要的是可以借此直观地向浏览者表达信息，但是，图像的大小和数量会影响网页的下载时间。因此，图像要用得少而精，必要时应使用图像处理软件，在不失真的情况下尽量压缩图像尺寸。本章主要介绍了插入与编辑图像的基本方法，以及设置插入图像的属性。通过本章的理论学习和上机实训，读者应了解和掌握以下内容:插入图像编辑图像设置图像属性创建鼠标经过图像使用Fireworks文件本章章节内容安排

2、如下:5.1插入图像5.2编辑图像5.3创建鼠标经过图像5.4插入图像占位符5.5使用Fireworks文件5.6思考与练习5.1插入图像在网页中插入图像通常是用于添加图形界面(如导航按钮)、创建具有视觉感染力的内容(如照片)或交互式设计元素(如鼠标经过图像或图像地图)。Web页中常用图像格式插入图像到文档Web页中常用图像格式图像的文件格式有很多种，但Web页中通常使用的有GIF、JPEG和PNG3种，它们的一个共同特点是压缩率较高。目前，GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。

3、PNG文件具有较大的灵活性并且文件尺寸较小，所以它几乎对于任何类型的Web图形都是最适合的。但是，MicrosoftInternetExplorer(4.0和更高版本)和NetscapeNavigator(4.04和更高版本)只能部分支持PNG图像的显示。因此，为保证所有浏览者都能查看到图像，通常向网页中插入图像都是使用GIF或JPEG文件格式。插入图像到文档选择“插入”工具栏中的“常用”选项卡，然后单击第6个按钮旁边的下拉箭头，选择“图像”命令(如图所示)，或选择“插入”

4、“图像”命令，都可打开“选择图像源

5、文件”对话框，在“选择图像源文件”对话框中选中合适的图像文件，单击“确定”按钮即可将图像插入到网页中。5.2编辑图像在网页中插入图像后，选定某个图像可在图像检查器中对其进行设置。同时在Dreamweaver8中可以将其他外部图像编辑应用程序设置为外部图像编辑器，并从Dreamweaver8中启动该编辑器修改图像，当保存了所做的修改后，在Dreamweaver8中可以查看更新后的图像。图像的属性检查器对齐图像调整图像大小使用外部图像编辑器编辑图像图像的属性检查器在网页文档中选择一个图像，然后选择“窗口”

6、“属性

7、”命令，打开“图像”属性检查器，可在该属性检查器中设置图像的所有参数，如图所示。对齐图像使用“图像”属性检查器可以设置图像相对于同一段落或行中其他元素的对齐方式。例如，可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐，同时还可以使用对齐按钮(左对齐、右对齐、居中对齐)设置图像的水平对齐方式，如图所示。调整图像大小在Dreamweaver8文档窗口中，用户可以调整元素的尺寸，如图像、插件、Shockwave和Flash电影、ActiveX控件等。使用属性检查器中的“宽”和“高”文本框可以完成这一操作，

8、但文件大小并不会改变。当选择文档中的图像时，在图像的周围将出现3个控制点，将光标移到控制点，然后根据箭头方向拖动这些控制点，可以改变图像的大小，如图所示。使用外部图像编辑器编辑图像在Dreamweaver8文档窗口中的图像可以使用外部的图像编辑器来编辑，然后保存并返回Dreamweaver8时，网页文档窗口中的图像也随着被更新。选择“编辑”

9、“首选参数”命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，打开“文件类型/编辑器”选项卡，可以为指定的图像文件类型设置外部图像编辑器，如图

10、所示。5.3创建鼠标经过图像鼠标经过图像是一种在浏览器中查看，并使用鼠标指针移过它时发生变化的图像。它实际上由主图像(当首次载入页面时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)两部分组成，并且这两个图像应大小相等，如果大小不同，Dreamweaver8将自动调整第二个图像的大小以匹配第一个图像的大小。5.4插入图像占位符图像占位符是在准备好将最终图像添加到网页文档之前而使用的图像，使用“图像占位符”可以避免由于没有图像而导致无法继续设计网页的尴尬。5.5使用Fireworks文件Dreamwea

11、ver8作为可视化网页编辑工具，与Fireworks一起使用，可以使网页设计更加方便、快捷。用户使用Fireworks可以创建各种适用于Dreamweaver8的图像和HTML文件。并且可以通过放置于文档中的Fireworks图像来启动Fireworks应用程序，并进行优化和编辑。在网页文档中，可以直接插入Fireworks创建的GIF、JEPG或PNG图像，与插入其他GIF、JEPG图像一样。在F