在网页中插入多媒体对象课件.ppt

1、网页色彩搭配网页色彩搭配第八章第八章 在网页中插入多媒体对象在网页中插入多媒体对象实例导入：多媒体站点实例导入：多媒体站点8.1使用多媒体对象使用多媒体对象8.2多媒体网站实例的制作过程多媒体网站实例的制作过程8.38.1 实例导入：多媒体站点 在网页中应用多媒体对象可以增强网页的娱乐性和感在网页中应用多媒体对象可以增强网页的娱乐性和感染力，多媒体成为最有魅力的方式，也是潮流的方向。染力，多媒体成为最有魅力的方式，也是潮流的方向。【例【例8.18.1】娱乐在线多媒体站点，如图】娱乐在线多媒体站点，如图8.18.1所示。所示。该多媒体站点主要实现的功能是在线观看该多媒体站点主要实现的功能是在线观

2、看FlashFlash动画、动画、FlashFlash视频以及其它类型的视频及音频文件。视频以及其它类型的视频及音频文件。在本网站实例中，主要涉及以下知识点：在本网站实例中，主要涉及以下知识点：背景音乐的设置；背景音乐的设置；插入插入FlashFlash对象：对象：FlashFlash动画、动画、FlashFlash视频、视频、FlashFlash按钮、按钮、FlashFlash文本等；文本等；插入其它类型视频和音频文件。插入其它类型视频和音频文件。8.2 使用多媒体对象 网页中常用的多媒体对象主要分为网页中常用的多媒体对象主要分为FlashFlash类类(包括包括FlashFlash动画动画

3、、FlashFlash按钮、按钮、FlashFlash文本、文本、FlashFlash视频等视频等)、Java Java appletsapplets、ActiveXActiveX控件类，以及各种音频、视频文件控件类，以及各种音频、视频文件(如如ShockwaveShockwave影片、影片、QuickTimeQuickTime、RMRM、WMVWMV、Mp3Mp3等等)。8.2.1设置页面背景音乐 由于背景音乐不是一种标准的网页属性，所以需要用修改由于背景音乐不是一种标准的网页属性，所以需要用修改源代码的方式为网页添加背景音乐。操作步骤如下：源代码的方式为网页添加背景音乐。操作步骤如下：步骤

4、步骤1 1打开要添加背景音乐的网页，切换到代码视图或拆分打开要添加背景音乐的网页，切换到代码视图或拆分视图。视图。步骤步骤2 2在在和和标签之间添加以下代码：标签之间添加以下代码：bgsound loop=”n”在在BgsoundBgsound标签中，标签中，srcsrc用于指定背景音乐的源文件路径。用于指定背景音乐的源文件路径。LoopLoop是指背景音乐的循环次数，如果输入为是指背景音乐的循环次数，如果输入为-1-1，则表示无，则表示无限循环。限循环。BgsoundBgsound标签中所支持的背景音乐格式为：标签中所支持的背景音乐格式为：wavwav、midmid、mp3mp3等。等。保存

5、网页，在浏览器中浏览网页中背景音乐的播放效果。保存网页，在浏览器中浏览网页中背景音乐的播放效果。8.2.2 插入Flash影片 Flash Flash是一种高质量、高压缩率的矢量动画，有超强的是一种高质量、高压缩率的矢量动画，有超强的交互能力，也正是因为这些原因，交互能力，也正是因为这些原因，FlashFlash在网络上得到了快在网络上得到了快速发展。速发展。插入在网页中的插入在网页中的FlashFlash影片格式为影片格式为swfswf，FlashFlash源文件格源文件格式为式为FlaFla，源文件不能直接插入到网页中，但可以在，源文件不能直接插入到网页中，但可以在FlashFlash软件

6、中修改源文件。插入软件中修改源文件。插入FlashFlash影片常用的方法有两种。影片常用的方法有两种。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flash”Flash”按钮，如图按钮，如图8.28.2所示。或选择所示。或选择“插入插入”菜单菜单“媒体媒体”“Flash”Flash”命令，如图命令，如图8.38.3所示。所示。插入插入FlashFlash影片后，在影片后，在“文档文档”窗口中出现窗口中出现FlashFlash占位占位符符 。8.2.3在网页中添加FLASH按钮和文本 Dreamweaver8.0 Dreamweaver8.0增添了一些增添了一些FlashFlas

7、h对象，包括对象，包括FlashFlash文本、文本、FlashFlash按钮和按钮和FlashFlash元素等，不使用元素等，不使用FlashFlash软件也可以制作出软件也可以制作出漂亮的漂亮的FlashFlash动画了。动画了。使用使用FlashFlash文本对象可以轻松地制作出只包含文本的文本对象可以轻松地制作出只包含文本的FlashFlash动画，这样设计者就不用担心网页浏览者没有安装特动画，这样设计者就不用担心网页浏览者没有安装特殊字体而无法看到网页的最佳效果了。殊字体而无法看到网页的最佳效果了。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“FlashFlash文文本本

8、”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“FlashFlash文本文本”命令，弹出命令，弹出“插入插入FlashFlash文本文本”对话框，如图对话框，如图8.48.4所示。所示。8.2.4 插入Flash按钮 使用使用Dreamweaver 8.0Dreamweaver 8.0就可以快捷地制作出动感就可以快捷地制作出动感FlashFlash按钮。制作多个按钮。制作多个FlashFlash按钮可以组成一个动态的导航栏。操按钮可以组成一个动态的导航栏。操作步骤如下：作步骤如下：单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“FlashFlash按钮按钮”按钮，或选择按

9、钮，或选择“插入插入”菜单菜单“媒体媒体”“FlashFlash按按钮钮”命令，弹出命令，弹出“插入插入FlashFlash按钮按钮”对话框，如图对话框，如图8.58.5所示。所示。设置设置FlashFlash按钮的相关参数。按钮的相关参数。8.2.5 插入Flash Video Flash Video Flash Video即即FlashFlash视频，它的后缀名为：视频，它的后缀名为：.flv.flv，是，是目前广泛流行的一种视频文件格式。一般的视频文件：目前广泛流行的一种视频文件格式。一般的视频文件：asfasf、wmvwmv、rmrm等都需要专门的播放器来支持视频文件的播放，否等都需要

10、专门的播放器来支持视频文件的播放，否则根本无法收看，并且这类文件容量过大，下载慢，查看则根本无法收看，并且这类文件容量过大，下载慢，查看也不很流畅。为了解决播放器和容量的问题，可以将各类也不很流畅。为了解决播放器和容量的问题，可以将各类视频文件转换成视频文件转换成FlashFlash视频文件，即视频文件，即FlvFlv格式。格式。经过编码后经过编码后的音频和视频数据，通过的音频和视频数据，通过Flash PlayerFlash Player传送。传送。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flash Flash Video”Video”按钮，或选择按钮，或选择“插入插入”菜

11、单菜单“媒体媒体”“Flash Flash Video”Video”命令，弹出命令，弹出“插入插入FlashFlash视频视频”的对话框，如图的对话框，如图8.68.6所示。设置所示。设置Flash VideoFlash Video的相关参数。的相关参数。8.2.6 插入Flash Paper FlashPaperFlashPaper是一款转换软件，可以将任何可打印的是一款转换软件，可以将任何可打印的文档转换为文档转换为SWFSWF或或PDFPDF文档，原文档的排版样式和字体显文档，原文档的排版样式和字体显示不受影响，不论浏览者的平台和语言版本是什么，都示不受影响，不论浏览者的平台和语言版本是

12、什么，都可以自由的观看你所制作的电子文档动画，并可以进行可以自由的观看你所制作的电子文档动画，并可以进行自由的缩放、翻页、搜索和打印等操作，对文档的传播自由的缩放、翻页、搜索和打印等操作，对文档的传播非常有好处。非常有好处。用户安装用户安装FlashPaperFlashPaper软件后，打开软件后，打开wordword软件时，就软件时，就会多出会多出FlashPaperFlashPaper菜单栏，还多出一个菜单栏，还多出一个FlashPaperFlashPaper工具工具栏，如图栏，如图8.78.7所示。所示。在在wordword中，单击中，单击FlashPaperFlashPaper工具栏中

13、的工具栏中的“转换为转换为Flash”Flash”按钮时，即可将当前按钮时，即可将当前wordword文档转换文档转换swfswf格式的文件。将它可以作格式的文件。将它可以作为为FlashFlash文件插入到网页中。文件插入到网页中。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flashpaper”Flashpaper”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“FlashPaper”FlashPaper”命令，弹出命令，弹出“插入插入FlashPaper”FlashPaper”的对话框，如的对话框，如图所示。输入图所示。输入FlashPaperFlashPaper

14、文档名，或单击文档名，或单击“浏览浏览”按钮查找按钮查找FlashPaperFlashPaper路径，输入宽度和高度（以像素为单位）指定路径，输入宽度和高度（以像素为单位）指定 FlashPaper FlashPaper 对象在网页上的尺寸，单击对象在网页上的尺寸，单击“确定确定”按钮，如图按钮，如图8.88.8所示。所示。“文档文档”窗口出现一个窗口出现一个FlashFlash占位符。占位符。8.2.7 插入Flash元素制作像册 在在Dreamweaver 8.0Dreamweaver 8.0中，可以插入中，可以插入 Flash Flash 元素制作动态的元素制作动态的像册。当打开包含像册

15、。当打开包含FLASHFLASH像册元素的网页后，将自动加载制作好像册元素的网页后，将自动加载制作好的像册，最前面显示当前照片数和照片总数量，后面是后退、的像册，最前面显示当前照片数和照片总数量，后面是后退、播放播放/停止、前进按钮，单击的时候有不错的停止、前进按钮，单击的时候有不错的FLASHFLASH翻页效果，翻页效果，也可设置为自动播放和循环播放。也可设置为自动播放和循环播放。操作步骤如下：操作步骤如下：步骤步骤1 1首先准备好在首先准备好在FlashFlash相册中要显示的多张图像，图像尺寸相册中要显示的多张图像，图像尺寸大小一致。大小一致。步骤步骤2 2单击单击“插入插入”栏栏“Fl

16、ashFlash元素元素”“图像查看器图像查看器”按钮，按钮，弹出弹出“保存保存FlashFlash元素元素”的对话框，保存的对话框，保存FlashFlash元素文件，后缀元素文件，后缀名为名为swfswf。步骤步骤3 3在在“文档文档”窗口出现窗口出现FlashFlash占位符，单击占位符，单击FlashFlash占位符，拖占位符，拖动动 FlashFlash占位符四周的控制点来调节像册尺寸大小。选中占位符四周的控制点来调节像册尺寸大小。选中FlashFlash占位符，选择占位符，选择“窗口窗口”菜单菜单“标签检查器标签检查器”命令，打开命令，打开“标标签标查器签标查器”面板，如图面板，如图

17、8.98.9所示。设置所示。设置FlashFlash元素的相关参数。元素的相关参数。8.2.88.2.8在网页中嵌入音频文件 在网页中加入背景音乐虽然简便，但是缺乏对音频文件的控制能在网页中加入背景音乐虽然简便，但是缺乏对音频文件的控制能力，比如浏览者不想听到背景音乐时，却无法使播放的声音停下来，力，比如浏览者不想听到背景音乐时，却无法使播放的声音停下来，并且背景音乐所支持的音频文件格式有限。因此可以媒体插件的方式并且背景音乐所支持的音频文件格式有限。因此可以媒体插件的方式嵌入声音文件。嵌入声音文件。网页中的音频文件格式为：网页中的音频文件格式为：midmid、wavwav，几乎所有的浏览器都

18、支持，几乎所有的浏览器都支持这两种声音格式，所以客户端无需插件即对其支持，另外还有这两种声音格式，所以客户端无需插件即对其支持，另外还有mp3mp3、rmrm、mwvmwv、movmov等。等。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插件插件”按钮，弹按钮，弹出出“选择文件选择文件”的对话框，选择音频文件的路径，单击的对话框，选择音频文件的路径，单击“确定确定”按钮。按钮。文档窗口出现插件占位符，选中插件占位符，拖动占位符四周的文档窗口出现插件占位符，选中插件占位符，拖动占位符四周的控制点，可调整播放器界面的尺寸，如图所示。控制点，可调整播放器界面的尺寸，如图所示。选中插件占

19、位符，单击选中插件占位符，单击“属性属性”面板中面板中“参数参数”按钮，弹出参数按钮，弹出参数对话框，或在对话框，或在“插件插件”标签检查器中，设置相关的参数，如图标签检查器中，设置相关的参数，如图8.108.10所所示。示。8.2.9 在网页中嵌入视频文件 随着宽带网络技术的飞速发展，网络视频点播已经普及，随着宽带网络技术的飞速发展，网络视频点播已经普及，通过网络可以在线看免费的影片，在线收看远程教学等。这通过网络可以在线看免费的影片，在线收看远程教学等。这些都是通过在网页中嵌入视频文件来实现的。些都是通过在网页中嵌入视频文件来实现的。网页中视频文件的常见格式有：网页中视频文件的常见格式有：

20、rmrm、wmvwmv、asfasf、movmov等。等。嵌入方式与音频文件的嵌入方法一致。嵌入方式与音频文件的嵌入方法一致。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插件插件”按钮，在弹出按钮，在弹出“选择文件选择文件”的对话框中查找视频文件路径即的对话框中查找视频文件路径即可。可。在在“文档文档”窗口出现插件占位符，根据视频画面大小拖窗口出现插件占位符，根据视频画面大小拖动插件占位符四周的控制点改变插件尺寸，参数设置也与音动插件占位符四周的控制点改变插件尺寸，参数设置也与音频文件相似，这里就不重复了。频文件相似，这里就不重复了。在网页中还可以插入更多的多媒体对象如：在网页中

21、还可以插入更多的多媒体对象如：ShockwaveShockwave、Java AppletJava Applet、ActiveXActiveX等，插入方法与上面所述相似，这里等，插入方法与上面所述相似，这里就不详细叙述了。就不详细叙述了。8.3 8.3 多媒体网站实例的制作过程v 本节详细讲解【例本节详细讲解【例8.18.1】“娱乐在线娱乐在线”多媒体站点的制作多媒体站点的制作过程，其功能主要是实现视频点播，由多个网页构成，通过程，其功能主要是实现视频点播，由多个网页构成，通过超链接将网页关联起来。过超链接将网页关联起来。本本 章章 小小 结结本章通过制作一个综合性多媒体站点的实例，讲解了多媒

22、体技术在网络中的应用。本章通过制作一个综合性多媒体站点的实例，讲解了多媒体技术在网络中的应用。1 1FlashFlash对象的应用：对象的应用：FlashFlash影片、影片、FlashFlash文本、文本、FlashFlash按钮、按钮、FlashFlash视频、视频、FlashFlash元素等。元素等。2 2视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时尚。视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时尚。3 3音频文件的应用：背景音乐的设置、音频文件的嵌入。音频文件的应用：背景音乐的设置、音频文件的嵌入。本章练习题本章练习题1.1.选择题选择题（1 1）网页中背景音乐常用

23、的音频文件格式为（）网页中背景音乐常用的音频文件格式为（）。）。A Amidmid、wavwavB Bwavwav、jpegjpeg、movmovC Cswfswf、wavwav、rmrmD Dgifgif、wavwav、rmrm（2 2）FlashFlash影片文件格式为（影片文件格式为（）。）。A Ajpg Bjpg Bwmv Cwmv Casf Dasf Dswf swf （3 3）FlashFlash视频文件格式为（视频文件格式为（）。）。A Aswf Bswf Bfla Cfla Cflv Dflv Daviavi 2.2.简答题简答题v 网页中常用的多媒体对象包括哪些？网页中常用的

24、多媒体对象包括哪些？v FlashFlash视频与其它视频格式文件比较有什么优点？视频与其它视频格式文件比较有什么优点？v 如何将如何将FlashFlash动画的背景设置为透明？动画的背景设置为透明？上上 机机 实实 训训1.1.背景知识背景知识根据本章所学的在网页中嵌入多媒体对象的方法，再综合前面所学的根据本章所学的在网页中嵌入多媒体对象的方法，再综合前面所学的创建站点及编辑网页的知识，制作功能完善的多媒体站点。创建站点及编辑网页的知识，制作功能完善的多媒体站点。2.2.实训准备工作实训准备工作将相应的网页草图和网页素材，如：音频、视频、将相应的网页草图和网页素材，如：音频、视频、flash

25、flash等文件，以及等文件，以及相关的软件，如：相关的软件，如：flashpaperflashpaper软件准备好，发送到学生主机中，以供学软件准备好，发送到学生主机中，以供学生参考使用。生参考使用。3.3.实训要求实训要求（1 1）制作多媒体站点首页）制作多媒体站点首页根据给定的网页草图及相关素材，布局页面，然后填充网页元素，首根据给定的网页草图及相关素材，布局页面，然后填充网页元素，首页内容包括：页内容包括：FlashFlash影片、影片、FlashFlash文本、文本、FlashFlash按钮、按钮、FlashFlash元素等及修饰元素等及修饰的一些图像。首页效果图如图的一些图像。首页效果图如图8.288.28所示。所示。（2 2）制作站点内的其它网页）制作站点内的其它网页要求包括：嵌入视频的网页、要求包括：嵌入视频的网页、Flash mtvFlash mtv网页、网页、Flash VideoFlash Video网页、点播音网页、点播音乐的网页，最后添加页面之间的链接。乐的网页，最后添加页面之间的链接。4.4.课时安排：课时安排：2 2课时课时