网页设计与制作.pptx

《网页设计与制作.pptx》由会员分享，可在线阅读，更多相关《网页设计与制作.pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

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

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

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

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

9、插入插入”栏栏“常用常用”选项选项“媒体媒体”“FlashFlash按钮按钮”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“FlashFlash按钮按钮”命令，弹出命令，弹出“插入插入FlashFlash按钮按钮”对话框，对话框，如图如图8.58.5所示。设置所示。设置FlashFlash按钮的相关参数。按钮的相关参数。第10页/共25页第11页/共25页8.2.5 插入Flash Video Flash Video Flash Video即即FlashFlash视频，它的后缀名为：视频，它的后缀名为：.flv.flv，是目前广泛流行的一种视频文件格式。一般的视频文，是目前广泛流行

10、的一种视频文件格式。一般的视频文件：件：asfasf、wmvwmv、rmrm等都需要专门的播放器来支持视频文等都需要专门的播放器来支持视频文件的播放，否则根本无法收看，并且这类文件容量过大，件的播放，否则根本无法收看，并且这类文件容量过大，下载慢，查看也不很流畅。为了解决播放器和容量的问下载慢，查看也不很流畅。为了解决播放器和容量的问题，可以将各类视频文件转换成题，可以将各类视频文件转换成FlashFlash视频文件，即视频文件，即FlvFlv格式。格式。经过编码后的音频和视频数据，通过经过编码后的音频和视频数据，通过Flash Flash PlayerPlayer传送。传送。单击单击“插入插

11、入”栏栏“常用常用”选项选项“媒体媒体”“Flash VideoFlash Video”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“Flash VideoFlash Video”命令，弹出命令，弹出“插入插入FlashFlash视频视频”的对的对话框，如图话框，如图8.68.6所示。设置所示。设置Flash VideoFlash Video的相关参数。的相关参数。第12页/共25页第13页/共25页8.2.6 插入Flash Paper FlashPaper FlashPaper是一款转换软件，可以将任何可打是一款转换软件，可以将任何可打印的文档转换为印的文档转换为SWFSWF或

12、或PDFPDF文档，原文档的排版样式和文档，原文档的排版样式和字体显示不受影响，不论浏览者的平台和语言版本是字体显示不受影响，不论浏览者的平台和语言版本是什么，都可以自由的观看你所制作的电子文档动画，什么，都可以自由的观看你所制作的电子文档动画，并可以进行自由的缩放、翻页、搜索和打印等操作，并可以进行自由的缩放、翻页、搜索和打印等操作，对文档的传播非常有好处。对文档的传播非常有好处。用户安装用户安装FlashPaperFlashPaper软件后，打开软件后，打开wordword软件时，软件时，就会多出就会多出FlashPaperFlashPaper菜单栏，还多出一个菜单栏，还多出一个Flash

13、PaperFlashPaper工具栏，如图工具栏，如图8.78.7所示。所示。第14页/共25页 在在wordword中，单击中，单击FlashPaperFlashPaper工具栏中的工具栏中的“转换为转换为FlashFlash”按钮时，即可将当前按钮时，即可将当前wordword文档转换文档转换swfswf格式的文件。格式的文件。将它可以作为将它可以作为FlashFlash文件插入到网页中。文件插入到网页中。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“FlashpaperFlashpaper”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“FlashPaperFlas

14、hPaper”命令，弹出命令，弹出“插入插入FlashPaperFlashPaper”的对话框，的对话框，如图所示。输入如图所示。输入FlashPaperFlashPaper文档名，或单击文档名，或单击“浏览浏览”按钮查按钮查找找FlashPaperFlashPaper路径，输入宽度和高度（以像素为单位）指定路径，输入宽度和高度（以像素为单位）指定 FlashPaper FlashPaper 对象在网页上的尺寸，单击对象在网页上的尺寸，单击“确定确定”按钮，如按钮，如图图8.88.8所示。所示。“文档文档”窗口出现一个窗口出现一个FlashFlash占位符。占位符。第15页/共25页8.2.7

15、 插入Flash元素制作像册 在在Dreamweaver 8.0Dreamweaver 8.0中，可以插入中，可以插入 Flash Flash 元素制作动元素制作动态的像册。当打开包含态的像册。当打开包含FLASHFLASH像册元素的网页后，将自动加像册元素的网页后，将自动加载制作好的像册，最前面显示当前照片数和照片总数量，后载制作好的像册，最前面显示当前照片数和照片总数量，后面是后退、播放面是后退、播放/停止、前进按钮，单击的时候有不错的停止、前进按钮，单击的时候有不错的FLASHFLASH翻页效果，也可设置为自动播放和循环播放。翻页效果，也可设置为自动播放和循环播放。操作步操作步骤如下：骤

16、如下：步骤步骤1 1首先准备好在首先准备好在FlashFlash相册中要显示的多张图像，图像相册中要显示的多张图像，图像尺寸大小一致。尺寸大小一致。步骤步骤2 2单击单击“插入插入”栏栏“FlashFlash元素元素”“图像查看器图像查看器”按钮，弹出按钮，弹出“保存保存FlashFlash元素元素”的对话框，保存的对话框，保存FlashFlash元素文元素文件，后缀名为件，后缀名为swfswf。步骤步骤3 3在在“文档文档”窗口出现窗口出现FlashFlash占位符，单击占位符，单击FlashFlash占位符，占位符，拖动拖动 FlashFlash占位符四周的控制点来调节像册尺寸大小。选中占

17、位符四周的控制点来调节像册尺寸大小。选中FlashFlash占位符，选择占位符，选择“窗口窗口”菜单菜单“标签检查器标签检查器”命令，命令，打开打开“标签标查器标签标查器”面板，如图面板，如图8.98.9所示。设置所示。设置FlashFlash元素的元素的相关参数。相关参数。第16页/共25页第17页/共25页8.2.88.2.8在网页中嵌入音频文件 在网页中加入背景音乐虽然简便，但是缺乏对音频文件的控在网页中加入背景音乐虽然简便，但是缺乏对音频文件的控制能力，比如浏览者不想听到背景音乐时，却无法使播放的声音制能力，比如浏览者不想听到背景音乐时，却无法使播放的声音停下来，并且背景音乐所支持的音

18、频文件格式有限。因此可以媒停下来，并且背景音乐所支持的音频文件格式有限。因此可以媒体插件的方式嵌入声音文件。体插件的方式嵌入声音文件。网页中的音频文件格式为：网页中的音频文件格式为：midmid、wavwav，几乎所有的浏览器都，几乎所有的浏览器都支持这两种声音格式，所以客户端无需插件即对其支持，另外还支持这两种声音格式，所以客户端无需插件即对其支持，另外还有有mp3mp3、rmrm、mwvmwv、movmov等。等。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插件插件”按钮，按钮，弹出弹出“选择文件选择文件”的对话框，选择音频文件的路径，单击的对话框，选择音频文件的路径，单击“

19、确定确定”按钮。按钮。文档窗口出现插件占位符，选中插件占位符，拖动占位符四文档窗口出现插件占位符，选中插件占位符，拖动占位符四周的控制点，可调整播放器界面的尺寸，如图所示。周的控制点，可调整播放器界面的尺寸，如图所示。选中插件占位符，单击选中插件占位符，单击“属性属性”面板中面板中“参数参数”按钮，弹出按钮，弹出参数对话框，或在参数对话框，或在“插件插件”标签检查器中，设置相关的参数，如标签检查器中，设置相关的参数，如图图8.108.10所示。所示。第18页/共25页第19页/共25页8.2.9 在网页中嵌入视频文件 随着宽带网络技术的飞速发展，网络视频点播已经随着宽带网络技术的飞速发展，网络

20、视频点播已经普及，通过网络可以在线看免费的影片，在线收看远程普及，通过网络可以在线看免费的影片，在线收看远程教学等。这些都是通过在网页中嵌入视频文件来实现的。教学等。这些都是通过在网页中嵌入视频文件来实现的。网页中视频文件的常见格式有：网页中视频文件的常见格式有：rmrm、wmvwmv、asfasf、movmov等。嵌入方式与音频文件的嵌入方法一致。等。嵌入方式与音频文件的嵌入方法一致。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插插件件”按钮，在弹出按钮，在弹出“选择文件选择文件”的对话框中查找视频文的对话框中查找视频文件路径即可。件路径即可。在在“文档文档”窗口出现插件占位符

21、，根据视频画面大窗口出现插件占位符，根据视频画面大小拖动插件占位符四周的控制点改变插件尺寸，参数设小拖动插件占位符四周的控制点改变插件尺寸，参数设置也与音频文件相似，这里就不重复了。置也与音频文件相似，这里就不重复了。在网页中还可以插入更多的多媒体对象如：在网页中还可以插入更多的多媒体对象如：ShockwaveShockwave、Java AppletJava Applet、ActiveXActiveX等，插入方法与上等，插入方法与上面所述相似，这里就不详细叙述了。面所述相似，这里就不详细叙述了。第20页/共25页8.3 8.3 多媒体网站实例的制作过程本节详细讲解本节详细讲解【例例8.18.

22、1】“娱乐在线娱乐在线”多媒体站点的制作过程，其功能主要多媒体站点的制作过程，其功能主要是实现视频点播，由多个网页构成，通过超链接将网页关联起来。是实现视频点播，由多个网页构成，通过超链接将网页关联起来。第21页/共25页本本 章章 小小 结结本章通过制作一个综合性多媒体站点的实例，讲解了多媒体技术在网络中本章通过制作一个综合性多媒体站点的实例，讲解了多媒体技术在网络中的应用。的应用。1 1FlashFlash对象的应用：对象的应用：FlashFlash影片、影片、FlashFlash文本、文本、FlashFlash按钮、按钮、FlashFlash视频、视频、FlashFlash元素等。元素等

23、。2 2视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时尚。视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时尚。3 3音频文件的应用：背景音乐的设置、音频文件的嵌入。音频文件的应用：背景音乐的设置、音频文件的嵌入。本章练习题本章练习题1.1.选择题选择题（1 1）网页中背景音乐常用的音频文件格式为（）网页中背景音乐常用的音频文件格式为（）。）。A Amidmid、wavwavB Bwavwav、jpegjpeg、movmovC Cswfswf、wavwav、rmrmD Dgifgif、wavwav、rmrm（2 2）FlashFlash影片文件格式为（影片文件格式为（）。）。A A

24、jpg Bjpg Bwmv Cwmv Casf Dasf Dswf swf （3 3）FlashFlash视频文件格式为（视频文件格式为（）。）。A Aswf Bswf Bfla Cfla Cflv Dflv Davi avi 2.2.简答题简答题网页中常用的多媒体对象包括哪些？网页中常用的多媒体对象包括哪些？FlashFlash视频与其它视频格式文件比较有什么优点？视频与其它视频格式文件比较有什么优点？如何将如何将FlashFlash动画的背景设置为透明？动画的背景设置为透明？第22页/共25页上上 机机 实实 训训1.1.背景知识背景知识根据本章所学的在网页中嵌入多媒体对象的方法，再综合前

25、面所根据本章所学的在网页中嵌入多媒体对象的方法，再综合前面所学的创建站点及编辑网页的知识，制作功能完善的多媒体站点。学的创建站点及编辑网页的知识，制作功能完善的多媒体站点。2.2.实训准备工作实训准备工作将相应的网页草图和网页素材，如：音频、视频、将相应的网页草图和网页素材，如：音频、视频、flashflash等文件，等文件，以及相关的软件，如：以及相关的软件，如：flashpaperflashpaper软件准备好，发送到学生主机中，软件准备好，发送到学生主机中，以供学生参考使用。以供学生参考使用。3.3.实训要求实训要求（1 1）制作多媒体站点首页）制作多媒体站点首页根据给定的网页草图及相关

26、素材，布局页面，然后填充网页元素，根据给定的网页草图及相关素材，布局页面，然后填充网页元素，首页内容包括：首页内容包括：FlashFlash影片、影片、FlashFlash文本、文本、FlashFlash按钮、按钮、FlashFlash元素等元素等及修饰的一些图像。首页效果图如图及修饰的一些图像。首页效果图如图8.288.28所示。所示。（2 2）制作站点内的其它网页）制作站点内的其它网页要求包括：嵌入视频的网页、要求包括：嵌入视频的网页、Flash mtvFlash mtv网页、网页、Flash VideoFlash Video网页、网页、点播音乐的网页，最后添加页面之间的链接。点播音乐的网页，最后添加页面之间的链接。4.4.课时安排：课时安排：2 2课时课时第23页/共25页第24页/共25页感谢您的观看！第25页/共25页