第8章在网页中插入多媒体对象.ppt

第八章第八章 在网页中插入多媒体对象在网页中插入多媒体对象使用多媒体对象使用多媒体对象网页中常用的多媒体对象主要分为：网页中常用的多媒体对象主要分为：Flash类类(包包括括Flash动动画画、Flash按按钮钮、Flash文本、文本、Flash视频等视频等)、Java applets、ActiveX控件类控件类各种音频：各种音频：Mp3、ra、wma、wav、mid等等视视频频文文件件(如如Shockwave影影片片、QuickTime的的mov、real公公司司的的RM、微微软软的的WMV、asf等等)。8.2.1设置页面背景音乐设置页面背景音乐由于背景音乐不是一种标准的网页属性，所以需要用修改源代码由于背景音乐不是一种标准的网页属性，所以需要用修改源代码的方式为网页添加背景音乐。操作步骤如下：的方式为网页添加背景音乐。操作步骤如下：步骤步骤1打开要添加背景音乐的网页，切换到代码视图或拆分视图。打开要添加背景音乐的网页，切换到代码视图或拆分视图。步骤步骤2在在和和标签之间添加以下代码：标签之间添加以下代码：src用于指定背景音乐的源文件路径。用于指定背景音乐的源文件路径。Loop是指背景音乐的循环次数，如果输入为是指背景音乐的循环次数，如果输入为-1，则表示无限，则表示无限循环。循环。Bgsound标签中所支持的背景音乐格式为：标签中所支持的背景音乐格式为：wav、mid、mp3等。等。保存网页，在浏览器中浏览网页中背景音乐的播放效果。保存网页，在浏览器中浏览网页中背景音乐的播放效果。8.2.2 插入插入Flash影片影片Flash是一种高质量、高压缩率的矢量动画，有超强的交互是一种高质量、高压缩率的矢量动画，有超强的交互能力，也正是因为这些原因，能力，也正是因为这些原因，Flash在网络上得到了快在网络上得到了快速发展。速发展。插入在网页中的插入在网页中的Flash影片格式为影片格式为swf，Flash源文件源文件格式为格式为Fla，源文件不能直接插入到网页中，源文件不能直接插入到网页中，但可以在但可以在Flash软件中修改源文件。插入软件中修改源文件。插入Flash影片常用的方法影片常用的方法有两种。有两种。如图如图8.3所示。所示。插入插入Flash影片后，在影片后，在“文档文档”窗口中出现窗口中出现Flash占位符占位符。8.2.3在网页中添加在网页中添加FLASH按钮和文本按钮和文本Dreamweaver8.0增添了一些增添了一些Flash对象，包括对象，包括Flash文本、文本、Flash按钮和按钮和Flash元素等，不使用元素等，不使用Flash软件也可以制作软件也可以制作出漂亮的出漂亮的Flash动画了。动画了。使用使用Flash文本对象可以轻松地制作出只包含文本的文本对象可以轻松地制作出只包含文本的Flash动动画，这样画，这样设计者就不用担心网页浏览者没有安装特殊字体设计者就不用担心网页浏览者没有安装特殊字体而无法看到网页的最佳效果了。而无法看到网页的最佳效果了。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flash文本文本”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“Flash文本文本”命令，弹出命令，弹出“插入插入Flash文本文本”对话框，如图对话框，如图8.4所示。所示。8.2.4 插入插入Flash按钮按钮使用使用Dreamweaver 8.0就可以快捷地制作出动感就可以快捷地制作出动感Flash按钮。制作多个按钮。制作多个Flash按钮可以组成一个动态按钮可以组成一个动态的导航栏。操作步骤如下：的导航栏。操作步骤如下：单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flash按钮按钮”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒体媒体”“Flash按钮按钮”命令，弹出命令，弹出“插入插入Flash按钮按钮”对话对话框，如图框，如图8.5所示。设置所示。设置Flash按钮的相关参数。按钮的相关参数。8.2.5 插入插入Flash VideoFlash Video即即Flash视频，视频，它的后缀名为：它的后缀名为：.flv，是目前广泛流行的一种视频文件格式。是目前广泛流行的一种视频文件格式。一般的视频文件一般的视频文件asf、wmv、rm等都需要专门的播等都需要专门的播放器来支持视频文件的播放，否则根本无法收看，放器来支持视频文件的播放，否则根本无法收看，并且这类文件容量过大，下载慢，查看也不很流畅。并且这类文件容量过大，下载慢，查看也不很流畅。为了解决播放器和容量的问题，可以将各类视频文为了解决播放器和容量的问题，可以将各类视频文件转换成件转换成Flash视频文件，即视频文件，即Flv格式。经过编码后格式。经过编码后的音频和视频数据，通过的音频和视频数据，通过Flash Player传送。传送。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flash Video”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒媒体体”“Flash Video”命令，弹出命令，弹出“插入插入Flash视频视频”的对话框，如图的对话框，如图8.6所示。设置所示。设置Flash Video的相的相关参数。关参数。插入flashvideo后生成了3类文件Flvplayer_progressive.swf或代码中flvplay_streaming.swf，实际通过flvplay_streaming.swf调用flv文件。外观文件如：clear_skin_1.swfMain.asc视频播放头可以移动到任何地方，交互性好视频播放头可以移动到任何地方，交互性好8.2.6 插入插入Flash PaperFlashPaper是一款转换软件，可以将任何可打印的文是一款转换软件，可以将任何可打印的文档转换为档转换为SWF或或PDF文档，原文档的排版样式和字文档，原文档的排版样式和字体显示不受影响，不论浏览者的平台和语言版本是体显示不受影响，不论浏览者的平台和语言版本是什么，都可以自由的观看你所制作的电子文档动画，什么，都可以自由的观看你所制作的电子文档动画，并可以进行自由的缩放、翻页、搜索和打印等操作，并可以进行自由的缩放、翻页、搜索和打印等操作，对文档的传播非常有好处。对文档的传播非常有好处。用户安装用户安装FlashPaper软件后，打开软件后，打开word软件时，就软件时，就会多出会多出FlashPaper菜单栏，还多出一个菜单栏，还多出一个FlashPaper工具栏，如图工具栏，如图8.7所示。所示。在在word中，单击中，单击FlashPaper工具栏中的工具栏中的“转换为转换为Flash”按钮时，即可将当前按钮时，即可将当前word文档转换文档转换swf格式格式的文件。将它可以作为的文件。将它可以作为Flash文件插入到网页中。文件插入到网页中。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“Flashpaper”按钮，或选择按钮，或选择“插入插入”菜单菜单“媒媒体体”“FlashPaper”命令，弹出命令，弹出“插入插入FlashPaper”的对话框，如图所示。输入的对话框，如图所示。输入FlashPaper文档名，或单击文档名，或单击“浏览浏览”按钮查找按钮查找FlashPaper路径，输入宽度和高度（以像素为单路径，输入宽度和高度（以像素为单位）指定位）指定 FlashPaper 对象在网页上的尺寸，单击对象在网页上的尺寸，单击“确定确定”按钮，如图按钮，如图8.8所示。所示。“文档文档”窗口出现窗口出现一个一个Flash占位符。占位符。8.2.7 插入插入Flash元素制作像册元素制作像册在在Dreamweaver 8.0中，可以插入中，可以插入 Flash 元素制作动元素制作动态的像册。当打开包含态的像册。当打开包含FLASH像册元素的网页后，像册元素的网页后，将自动加载制作好的像册，最前面显示当前照片数和将自动加载制作好的像册，最前面显示当前照片数和照片总数量，后面是后退、播放照片总数量，后面是后退、播放/停止、前进按钮，停止、前进按钮，单击的时候有不错的单击的时候有不错的FLASH翻页效果，也可设置为翻页效果，也可设置为自动播放和循环播放。操作步骤如下：自动播放和循环播放。操作步骤如下：步骤步骤1首先准备好在首先准备好在Flash相册中要显示的多张图像，相册中要显示的多张图像，图像尺寸大小一致。图像尺寸大小一致。步骤步骤2单击单击“插入插入”栏栏“Flash元素元素”“图像查看图像查看器器”按钮，弹出按钮，弹出“保存保存Flash元素元素”的对话框，保存的对话框，保存Flash元素文件，后缀名为元素文件，后缀名为swf。步骤步骤3在在“文档文档”窗口出现窗口出现Flash占位符，单击占位符，单击Flash占位符，拖动占位符，拖动Flash占位符四周的控制点来调节像册占位符四周的控制点来调节像册尺寸大小。选中尺寸大小。选中Flash占位符，选择占位符，选择“窗口窗口”菜单菜单“标签检查器标签检查器”命令，打开命令，打开“标签标查器标签标查器”面板，如面板，如图图8.9所示。设置所示。设置Flash元素的相关参数。元素的相关参数。8.2.8在网页中嵌入音频文件在网页中嵌入音频文件在网页中加入背景音乐虽然简便，但是缺乏对音频文件在网页中加入背景音乐虽然简便，但是缺乏对音频文件的控制能力，比如浏览者不想听到背景音乐时，却的控制能力，比如浏览者不想听到背景音乐时，却无法使播放的声音停下来，并且背景音乐所支持的无法使播放的声音停下来，并且背景音乐所支持的音频文件格式有限。因此可以媒体插件的方式嵌入音频文件格式有限。因此可以媒体插件的方式嵌入声音文件。声音文件。几乎所有的浏览器都支持这几乎所有的浏览器都支持这mid、wav两种声音格两种声音格式，式，所以客户端无需插件即对其支持，另外还有所以客户端无需插件即对其支持，另外还有mp3、rm、mwv、mov等。等。方法一：方法一：单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插件插件”按钮按钮，弹出，弹出“选择文件选择文件”的对话框，选择音频文件的对话框，选择音频文件的路径，单击的路径，单击“确定确定”按钮。按钮。文档窗口出现插件占位符，选中插件占位符，拖动占位文档窗口出现插件占位符，选中插件占位符，拖动占位符四周的控制点，可调整播放器界面的尺寸，如图符四周的控制点，可调整播放器界面的尺寸，如图所示。所示。选中插件占位符，单击选中插件占位符，单击“属性属性”面板中面板中“参数参数”按钮，按钮，弹出参数对话框，或在弹出参数对话框，或在“插件插件”标签检查器中，设标签检查器中，设置相关的参数，如图置相关的参数，如图8.10所示。所示。方法二：通过指定一个插件来控制。代价是指定插件会减方法二：通过指定一个插件来控制。代价是指定插件会减少未安装该插件的用户。少未安装该插件的用户。对对windows media player控件的控件的ID:设置相关播放参数。该方法对设置相关播放参数。该方法对netscape浏览器不支持浏览器不支持方法三：单击方法三：单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”ActiveX控件控件，8.2.9 在网页中嵌入视频文件在网页中嵌入视频文件随着宽带网络技术的飞速发展，网络视频点播已经普及，随着宽带网络技术的飞速发展，网络视频点播已经普及，通过网络可以在线看免费的影片，在线收看远程教通过网络可以在线看免费的影片，在线收看远程教学等。这些都是通过在网页中嵌入视频文件来实现学等。这些都是通过在网页中嵌入视频文件来实现的。的。网页中视频文件的常见格式有：网页中视频文件的常见格式有：rm、wmv、asf、mov等。等。嵌入方式与音频文件的嵌入方法一致。嵌入方式与音频文件的嵌入方法一致。单击单击“插入插入”栏栏“常用常用”选项选项“媒体媒体”“插件插件”按钮，在弹出按钮，在弹出“选择文件选择文件”的对话框中查找视频文的对话框中查找视频文件路径即可。件路径即可。在在“文档文档”窗口出现插件占位符，根据视频画面大小拖窗口出现插件占位符，根据视频画面大小拖动插件占位符四周的控制点改变插件尺寸，参数设动插件占位符四周的控制点改变插件尺寸，参数设置也与音频文件相似。置也与音频文件相似。在网页中还可以插入更多的多媒体对象如：在网页中还可以插入更多的多媒体对象如：Shockwave、Java Applet、ActiveX等，插入方等，插入方法与上面所述相似。法与上面所述相似。java、JavaScript、ajax、jquery Js(Javascript)是一种客户端脚本语言，也可以说是前端技术，由Nescape公司推出。其目的是为了扩展Netscape浏览器的功能而开发、集成在Netscape 浏览器当中的、一种可以嵌入Web页面中的、基于对象和事件驱动的解释性语言,其前身是Live Script。Ajax、jQuery是js的衍生技术。ajax是一种以JavaScript为主的混合技术。jquery是一种JavaScript设计框架，可以较方便实现ajax设计，以及html页面设计。java与Javascript是两种完全不同的语言，由SUN公司推出。是完全的面向对象语言 运行在jvm（java虚拟机）上。也可以用来编写BS（俗称：网页）。jsp是java server page 也就是包含java代码的网页。运行在服务器端程序。Java applet（Java 小程序）是在 Java 的基础上演变而成的、能够嵌入在网页中的、可以执行一定小任务的应用程序。，需要浏览器安装java虚拟机，在打开网页时编译执行，现在几乎已经没有在使用了。javascript是脚本语言，由浏览器直接执行代码，主要用来做客户端动态网页。前几年逐渐没有人用了，后来由于Ajax技术的兴起，现在又很火。插件插件是一种遵循一定规范的应用程序接口编写出来的程序。很多软件都有插件，插件有无数种。在IE中，插件是集成到 Web 浏览器中的一组软件模块之一，它可以提供一定的交互和多媒体功能。例如在IE中，安装相关的插件后，插件成为浏览器一部分，WEB浏览器能够直接调用插件程序，用于处理特定类型的文件。增强浏览器处理不同web文件能力。IE浏览器常见的插件例如：Flash插件、RealPlayer插件、MMS插件、MIDI五线谱插件、ActiveX插件等等；再比如Winamp的DFX，也是插件。还有很多插件都是程序员新开发的在因特网上，ActiveX插件软件的特点是：一般软件需要用户单独下载然后执行安装，而ActiveX插件是当用户浏览到特定的网页时，IE浏览器即可自动下载并提示用户安装。ActiveX控件在因特网上，ActiveX插件软件的特点是：一般软件需要用户单独下载然后执行安装，而ActiveX插件是当用户浏览到特定的网页时，IE浏览器即可自动下载并提示用户安装。使用标记在页面上标记。只能在windows平台的IE浏览器支持Shockwave影片它能讲Macromedia公司的软件Director、Authorware和Freehand等制作的动画效果直接输出到网上。常见声音文件格式常见声音文件格式 WAVE，扩展名为WAV：该格式记录声音的波形，故只要采样率高、采样字节长、机器速度快，利用该格式记录的声音文件能够和原声基本一致，质量非常高，但这样做的代价就是文件太大。MPEG-1 layer 3，扩展名MP3：现在最流行的声音文件格式，因其压缩率大，在网络可视电话通信方面应用广泛，但和CD唱片相比，音质不能令人非常满意。文件比较大。MIDI，扩展名MID：通过电脑软硬件合成的音乐，是目前最成熟的音乐格式，MIDI能指挥各音乐设备的运转，而且具有统一的标准格式，能够模仿原始乐器的各种演奏技巧甚至无法演奏的效果，而且文件的长度非常小。Real Audio，扩展名RA：这种格式真可谓是网络的灵魂，强大的压缩量和极小的失真使其在众多格式中脱颖而出。和MP3相同，它也是为了解决网络传输带宽资源而设计的，因此主要目标是压缩比和容错性，其次才是音质。Creative Musical Format，扩展名CMF：Creative公司的专用音乐格式，和MIDI差不多，只是音色、效果上有些特色，专用于FM声卡，但其兼容性也很差。CD Audio音乐CD，扩展名CDA：唱片采用的格式，又叫“红皮书”格式，记录的是波形流，绝对的纯正、HIFI。但缺点是无法编辑，文件长度太大。总之，如果有专业的音源设备，那么要听同一首曲子的HIFI程度依次是：原声乐器演奏 MIDI CD唱片 MOD 所谓声卡上的MIDI CMF，而MP3及RA要看它的节目源是采用MIDI、CD还是MOD了。另外，在多媒体材料中，存储声音信息的文件格式也是需要认识的，共有：WAV文件、VOC文件、MIDI文件、RMI文件、PCM文件以及AIF文件等若干种。WAV文件：Microsoft公司的音频文件格式，它来源于对声音模拟波形的采样。用不同的采样频率对声音的模拟波形进行采样可以得到一系列离散的采样点，以不同的量化位数（8位或16位）把这些采样点的值转换成二进制数，然后存入磁盘，这就产生了声音的WAV文件，即波形文件。Microsoft Sound System软件Sound Finder可以转换AIF SND和VOD文件到WAV格式。VOC文件：Creative公司波形音频文件格式，也是声霸卡（sound blaster）使用的音频文件格式。每个VOC文件由文件头块（header block）和音频数据块（data block）组成。文件头包含一个标识版本号和一个指向数据块起始的指针。数据块分成各种类型的子块。如声音数据静音标识ASCII码文件重复的结果重复以及终止标志，扩展块等。MIDI文件：Musical Instrument Digital Interface（乐器数字接口）的缩写。它是由世界上主要电子乐器制造厂商建立起来的一个通信标准，以规定计算机音乐程序 电子合成器和其它电子设备之间交换信息与控制信号的方法。MIDI文件中包含音符定时和多达16个通道的乐器定义，每个音符包括键通道号持续时间音量和力度等信息。所以MIDI文件记录的不是乐曲本身，而是一些描述乐曲演奏过程中的指令。RMI文件：Microsoft公司的MIDI文件格式，它可以包括图片标记和文本。PCM文件：模拟音频信号经模数转换（A/D变换）直接形成的二进制序列，该文件没有附加的文件头和文件结束标志。在声霸卡提供的软件中，可以利用VOC-HDR程序，为PCM格式的音频文件加上文件头，而形成VOC格式。Windows的Convert工具可以把PCM音频格式的文件转换成Microsoft的WAV格式的文件。AIF文件：Apple计算机的音频文件格式。Windows的Convert工具同样可以把AIF格式的文件换成Microsoft的WAV格式的文件。常见视频文件格式常见视频文件格式视频信息在计算机中存放的格式有很多，目前最流行的格式是：苹果公司Quicktime的mov和微软的avi，asf，wmv。Quicktime：是苹果公司采用的面向最终用户桌面系统的低成本、全运动视频的方式，现在在软件压缩和解压缩中也开始采用这种方式了。其向量量化是Quicktime软件的压缩技术之一，它在最高为30帧/秒下提供的视频分辨率是320 x240，其压缩率能从25到200。AVI：微软公司采用的音频视频交错格式，也是一种桌面系统上的低成本、低分辨率的视频格式。AVI可在160 x120的视窗中以15帧/秒回放视频，并可带有8位的声音，也可以在VGA或超级VGA监视器上回放。AVI很重要的一个特点是可伸缩性，使用AVI算法时的性能依赖于与它一起使用的基础硬件。此外，Real公司RealMedia的Realmedia文件：rm,ra,rp,rt,swf启动独立的real图元文件：ram，real使用图元文件链接到服务器上的视频文件，图元文件包含了指向服务器和视频文件的相关URL启动插件的图元文件：rpm本本 章章 小小 结结本章通过制作一个综合性多媒体站点的实例，讲解了多媒体技术在本章通过制作一个综合性多媒体站点的实例，讲解了多媒体技术在网络中的应用。网络中的应用。1Flash对象的应用：对象的应用：Flash影片、影片、Flash文本、文本、Flash按钮、按钮、Flash视频、视频、Flash元素等。元素等。2视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时视频文件的嵌入：各种视频文件的嵌入使网络在线点播成为时尚。尚。3音频文件的应用：背景音乐的设置、音频文件的嵌入。音频文件的应用：背景音乐的设置、音频文件的嵌入。本章练习题本章练习题1.选择题选择题（1）网页中背景音乐常用的音频文件格式为（）网页中背景音乐常用的音频文件格式为（）。）。Amid、wavBwav、jpeg、movCswf、wav、rmDgif、wav、rm（2）Flash影片文件格式为（影片文件格式为（）。）。Ajpg Bwmv Casf Dswf （3）Flash视频文件格式为（视频文件格式为（）。）。Aswf Bfla Cflv Davi 2.简答题简答题网页中常用的多媒体对象包括哪些？网页中常用的多媒体对象包括哪些？Flash视频与其它视频格式文件比较有什么优点？视频与其它视频格式文件比较有什么优点？如何将如何将Flash动画的背景设置为透明？动画的背景设置为透明？上上 机机 实实 训训1.背景知识背景知识根据本章所学的在网页中嵌入多媒体对象的方法，再综合前根据本章所学的在网页中嵌入多媒体对象的方法，再综合前面所学的创建站点及编辑网页的知识，制作功能完善的多媒体面所学的创建站点及编辑网页的知识，制作功能完善的多媒体站点。站点。2.实训准备工作实训准备工作将相应的网页草图和网页素材，如：音频、视频、将相应的网页草图和网页素材，如：音频、视频、flash等文等文件，以及相关的软件，如：件，以及相关的软件，如：flashpaper软件准备好，发送到学软件准备好，发送到学生主机中，以供学生参考使用。生主机中，以供学生参考使用。3.实训要求实训要求（1）制作多媒体站点首页）制作多媒体站点首页根据给定的网页草图及相关素材，布局页面，然后填充网页根据给定的网页草图及相关素材，布局页面，然后填充网页元素，首页内容包括：元素，首页内容包括：Flash影片、影片、Flash文本、文本、Flash按钮、按钮、Flash元素等及修饰的一些图像。首页效果图如图元素等及修饰的一些图像。首页效果图如图8.28所示。所示。（2）制作站点内的其它网页）制作站点内的其它网页要求包括：嵌入视频的网页、要求包括：嵌入视频的网页、Flash mtv网页、网页、Flash Video网页、网页、点播音乐的网页，最后添加页面之间的链接。点播音乐的网页，最后添加页面之间的链接。课时安排：课时安排：2课时课时