第2章使用图像和多媒体创建丰富多彩的网页.pptVIP

第2章使用图像和多媒体创建丰富多彩的网页 教学内容：美化网页最简单、最直接的方法就是在网页上添加图像，图像不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。除此之外还有各种各样的其他元素，如动画、声音等。图像或多媒体是文本的解释和说明，在文档的适当位置上放置一些图像或多媒体，不仅可以使文本更加容易阅读，而且使得文档更加具有吸引力。本章主要讲述图像的基本使用、如何添加Flash影片和插入其他媒体对象等。 学习目标 掌握在网页文档中插入图像 掌握在网页中插入Flash影片 掌握给网页添加背景音乐 掌握网页中其他媒体的插入 教学目标和基本要求 ___________________________________ ___________________________________ ___________________________________ 教学时间：本章共分_______课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample\第2章\ 练习文件：exercise\第2章\ 2.1 网页中图像常用的常识 网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前对GIF和JPEG 文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图形都是最适合的。但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示。建议使用GIF或JPEG格式以满足更多人的需求 。 2.2 在网页中使用图像 前面介绍了网页中常见的3种图像格式，下面就来学习如何在网页中使用图像。在使用图像前，一定要有目的地选择图像，最好运用图像处理软件美化一下图像，否则插入的图像可能会不美观，非常死板。 2.2.1小案例——插入图像 图像是网页中最主要的元素之一，一幅幅图像和一个个漂亮的按钮不但使网页更加美观、形象和生动，而且与文本相比能够更直观地说明问题，使表达的意思一目了然，这样图像就会为网站增添生命力，同时也加深用户对网站良好的印象 。 2.2.2 设置图像属性 在文档中插入图像后，Dreamweaver CS6会自动按照图像的大小显示，所以还需要对图像的属性进行具体的调整，如大小、位置和对齐等。选中图像，在图像的【属性】面板中可以自定义图像的属性 。 2.2.3小案例— 裁剪图像 Dreamweaver CS6提供了直接在文档中裁剪图像的功能，不需要在其他图像编辑软件中进行操作 。 2.2.4 调整图像亮度和对比度 图像编辑功能可以不用离开Dreamweaver就能够完成，编辑工具是内嵌的Fireworks技术。这样在编辑网页图像时就轻松多了，不需要一定打开其他的图像处理工具进行处理，从而大大提高了工作效率。在Dreamweaver CS6中还可以直接调整图像的亮度/对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用亮度/对比度。 2.2.5 锐化图像 锐化将增加对象边缘像素的对比度，从而增加图像的清晰度或锐度。 2.3 插入其他网页图像 Dreamweaver CS6提供了多种精彩的网页图像设计，如插入图像占位符、插入鼠标经过图像等，下面分别进行讲述 。 2.3.1小案例——插入图像占位符 有时候根据页面布局的需要，要在网页中插入一幅图片。这个时候可以不制作图片，而是使用占位符来代替图片位置。 2.3.2小案例——插入鼠标经过图像 鼠标经过图像就是当鼠标经过图像时，原图像会变成另外一张图像。鼠标经过图像其实是由两张图像组成的：原始图像和鼠标经过图像。组成鼠标经过图像的两张图像必须有相同的大小；如果两张图像的大小不同，Dreamweaver会自动将第二张图像大小调整成第一张同样大小。鼠标经过图像前的效果如左图所示，鼠标经过图像时的效果如图右所示。 2.4小案例—添加Flash影片 SWF动画是在专门的Flash软件中完成的，在Dreamweaver中能将现有的SWF动画插入到文档中。 ??2.5 小案例—添加背景音乐 通过代码提示，可以在代码视图中插入代码。在输入某些字符时，将显示一个列表，列出完成条目所需要的选项。下面通过代码提示讲述如何添加背景音乐。 ??2.6 插入其他媒体对象 使用Dreamweaver可以在一个网页中插入多种媒体对象，Dreamweaver可以有效地将多媒体元素与网页中的其他元素有机地整合在一起，丰富网页的内容，为网页增添魅力 。 2.6.1小案例——插入Applet Java是一种允许开发并可以嵌入Web页面的编程语言。Java Applet是在Java的基础上演变而成的应用程序，它可以嵌