多媒体对象的使用

第5章多媒体对象的使用本章要点：声音与视频的使用Flash动画使用Shockwave电影的使用Java特效的使用本章难点：如何在网页中使用各种多媒体对象多媒体网页制作主要是在网页中使用各种多媒体对象，包括：使用声音和视频、使用Flash动画、使用Java特效和使用Shockwave电影等。通过这些对象为浏览者提供在网上听音乐和观看视频的功能，使网页具有更丰富的感官和视觉效果。声音与视频的使用5.1.1添加背景音乐背景音乐通常是给浏览者以美妙视听感觉，以此提高吸引力，并为网页增色添彩，从而体现个性的一种手段。在网页中插入背景音乐的格式可以是.wav、.mid和.mp3等,这些格式的文件一般浏览器都支持。但由于受到网络带宽的限制，绝大多数情况下背景音乐一般采用.mid格式。同时由于背景音乐并不是一种标准的网页属性，它需要通过修改源代码的方式进行添加。其操作步骤如下：打开要添加背景音乐的网页，切换到代码视图。在头文件〈head〉和〈/head〉之间添加以下代码：〈bgsoundsrc二“背景音乐的URL”loop二“循环次数”〉，如图5.1所示。网页设计与制作网页设计与制作第5第5章多媒体对象的使用网页设计与制作网页设计与制作.添加此段代码图5.1修改源代码添加背景音乐标记符Bgsound的基本属性是src，用于指定背景音乐的源文件。而常用属性loop则用于指定背景音乐重复的次数，若不指定该属性，则背景音乐将无限循环。（3）按【F12】键，在浏览器窗口中浏览背景音乐的效果。5.1.2链接声音与视频1、声音概述声音是最常见的一种多媒体信息。它可以是一段动听的音乐，也可以是为一个按钮或文字链接设置的音效。用户可以指定点击播放按钮时播放的音乐，或者当鼠标移入一个文字链接上方时播放的音效。但声音文件播放是受浏览器限制的。常用IE浏览器支持Wav、Mid音乐的播放。其他格式的声音文件需要安装相应插件才能播放。例如QuickTime、WindowsMediaPlayer或RealPlayer。声音文件格式有多种，常用的主要有Mid、Wav、Mp3格式等。.mid或.midi（乐器数字接口）格式用于器乐。许多浏览器都支持MIDI文件，且不要求插件。MID格式的文件量较小，品质却很高，但不能录制，只能有专业声音编辑软件制作。.wav（Waveform扩展名）格式文件具有较好的声音品质，许多浏览器都支持此类格式文件，且不要求插件。它可以从CD、磁盘或麦克风等录制WAV文件。但是，WAV文件通常很大，在网上播放时受到一定的限制。.mp3（MPEG-音频层-3）格式是一种压缩格式，它可令声音文件明显缩小。其声音品质非常好，如果正确录制和压缩MP3文件，其质量甚至可以和CD质量相媲美。这一新技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于RealAudio文件，因此通过普通电话线连接下载整首歌曲可能要花较长的时间。若要播放MP3文件，访问者必须下载安装相应插件或播放器。

2、视频概述视频是信息含量最丰富的一种媒体。可以通过不同方式和使用不同格式将视频添加到Web页面。视频可直接下载给用户，或者对视频进行流式处理以便在下载的同时播放它。如果想要包括可被下载而不是被流式处理的简短剪辑，则可以链接到该剪辑或将该剪辑嵌入到页面中。视频文件的主要格式有AVI格式、MPEG格式和MOV格式等。AVI格式的视频可以具有非常高的品质，但文件量较大。MPEG格式是VCD所采用的格式，文件量较小，效果不如AVI格式。MOV格式是QuickTime专用格式，品质和文件大小都比较理想，但需要专门的QuickTime播放器。3、链接声音与视频链接声音与视频是指将声音与视频添加到Web页面的一种方式。这种集成声音与视频文件的方法可以使访问者能够选择他们是否要收听或收看该文件，并且使文件用于最大区域范围的观众。若系统中没有安装能够播放相应格式文件的播放器，那么则进行文件下载。建立指向某一声音或视频文件的链接，其操作步骤为：选择要用作超链接的文本或图像。在“属性检查器”中，单击“链接”文本框后的“浏览文件”按钮，选择站点中的音频文件或视频文件(文件名称必须是英文，不能插入汉字名称的文件)。例5-1对某一图像文件链接声音文件：HighwayBlues。操作方法：启动Dreamweaver软件，选择“插入”菜单中的“图像”命令，打开“选择图像源”对话框，选取某一图像文件。然后选定该图像，在“属性检查器”中，单击“链接”文本框后的“浏览文件”按钮，选择声音文件：HighwayBlues。图5.2左边所示为链接了声音文件的图像文档，右边所示为按【F12】键后，在浏览器窗口中单击链接声音文件的图像后，播放链接声音文件的窗口。图5.2链接声音文件5.1.3嵌入声音与视频

若确定安装有能播放相应格式文件的插件(例如RealMedia或QuickTime插件)，则可通过嵌入方式将声音与视频文件直接插入页面中。建立嵌入声音或视频文件，其操作步骤为：在文档窗口中，将插入点定位到要嵌入文件的地方，然后在“插入”栏的“媒体”选项卡中单击“插件”图标。在“选择文件”对话框中选择嵌入的音频文件或视频文件(文件名称必须是英文，不能插入汉字名称的文件)。通过在“高”和“宽”文本框中输入数值或者通过在“文档”窗口中拖动调整插件占位符的大小，可以确定播放器控件在浏览器中的显示大小。例5-2在网页中嵌入某一声音文件。操作方法：启动Dreamweaver软件，单击“插入”一“媒体”—“插件”命令，打开“选择文件”对话框，选择要嵌入的音频文件write。在“属性检查器”中调整插件占位符的高度和宽度，以确定播放器控件在浏览器中的显示大小。图5.2左边所示为嵌入声音文件的文档窗口，右边所示为按【F12】键后，在浏览器窗口中预览的效果。⑥FileEditVi在网页中嵌入音频Write文件□器窗口中预览的效果。⑥FileEditVi在网页中嵌入音频Write文件□③▼InsertUntitled-1*使用flash动画flash动画是目前最流行的web多媒体技术，已越来越广泛应用于网络环境中，成为传递图片和声音的主要手段之一。一般浏览器都支持flash动画播放。本节主要介绍如何在网页中插入Dreamweaver提供的flash动画和插入已有的flash动画。5.2.1插入Dreamweaver提供的Flash动画1、插入Flash按钮Dreamweaver提供的Flash按钮是根据鼠标指针位置、状态的不同，显示不同的图像；且在鼠标单击时实现超链接的动作。其插入Flash按钮的步骤为：(1)在“插入”栏的“媒体”面板中单击“Flash按钮”按钮，打开“插入Flash按钮”对话框。如图5.4所示。

InsertFlashButtonS：=uTiple:ButtonTextEgColor:口匚曲。图5.4插入“InsertFlashButtonS：=uTiple:ButtonTextEgColor:口匚曲。图5.4插入“FiaSh按钮”对话框(2)在打开的对话框中设置：在“样式”列表中选择一种按钮样式；在“按钮文本”文本框中输/J按钮文字；在“字体”和“大小”框中选择按钮文字的字体和字号设置完成单击“确定”按钮。单击属性面板上的“播放”按钮可查看Flash按钮效果，也可以按【F12】键在浏览器窗口中预览网页。小结：若设置的按钮超链接后无法正确跳转，可先将按钮删除，然后用“插入Flash”的方式重新插入Flash按钮文件(文件已保存在站点中)。2.、插入Flash文本Dreamweaver能使用户创建并插入纯文字的Flash电影，称为Flash文本。其文本文件量很小，且文字的效果很好。其插入Flash文本的步骤为：(1)在“插入”栏的“媒体”面板中单击“Flash文本”按钮，打开“插入Flash文本”对话框。如图5.5所示。网页设计与制作网页设计与制作网页设计与制作网页设计与制作击下面的文字样式与段落对齐按钮，设置文本格式；在“颜色”和“转滚颜色”框设置文字原始颜色与转滚颜色；在“文本”文本框内输入文字内容；可在“链接”文本框内设置超链接；可在“目标”下拉列表框指定超链接目标框架；在“背景色”框指定文字的背景颜色；在“另存为”文本框设置Flash文本的保存文件名。设置完成单击“确定”按钮。单击属性面板上的“播放”按钮，将鼠标移动到文字上即可查看Flash文本效果，也可以按【F12】键在浏览器窗口中预览。5.2.2插入已有的flash动画Dreamweaver中可方便快捷地插入flash动画，而在网上播放的flash动画是Swf格式的，它是经过压缩优化的一种视频格式，具有较高品质和丰富动画效果。所以在插入flash动画前必须将制作的flash动画导出为.swf后缀的文件格式。在网页中插入flash动画的步骤为：⑴在“插入”拦的“常用”选项卡中单击“flash”按钮，或者在“插入”栏的“媒体”选项卡中单击“flash”按钮，此时出现“选择文件”对话框，定位到要插入的Flash文件(必须是.swf文件)，然后单击“确认”按钮。(2)窗口中出现占位图形，此时Flash动画在文档中不可见，以占位图形表示。若要查看动画效果，可以单击占位符选中它，然后在“属性检查器”中单击“播放”按钮，也可以按【F12】键在浏览器窗口中预览。例5-3在网页中插入flash动画heyjude。操作方法：启动Dreamweaver软件，执行菜单“插入”f“媒体”f“flash”命令，打开“选择文件”的对话框，选取要插入的flash动画。例如本图的heyjude。Swf，完成后如图5.6所示。网页设计与制作网页设计与制作网页设计与制作网页设计与制作第5第5章多媒体对象的使用|£1：hbutttm:*:|■Cbodyfobjectz*545x206|£1：hbutttm:*:|■Cbodyfobjectz*545x206T677K/188sectFroperties若需要在Dreamweaverrz隅“图756m”在页面中插入fas窝动画口I*IIH184”中预览flash动画，可以点击“属性检查器”中的“播放”『ResetSime]按钮。如图5.7所示。若想要用浏览器查看最终的效果，按【F12】键即可。Flash/□蹋巧0丿IacroMediaDreaMveaverU[UntitledDocument(TIKD0・・・]|□|[X~|◎SIW)ffilTitle：llfatitledDocwneiitCommonfLayoutTextTabltjsFr：Flash/□蹋巧0丿IacroMediaDreaMveaverU[UntitledDocument(TIKD0・・・]|□|[X~|◎SIW)ffilTitle：llfatitledDocwneiitCommonfLayoutTextTabltjsFr：EJTit!EFormsTtrnpl::Ch：En-acMediaHe：ad[Script^pplic:545x160T6TTK/188secbetterFileViewInzertModifyTextCommaiLdEgiteWindowHelp◎C?⑦{}”昼]flaEhbutton:+：<Cbody<object)*蜃I囲屯I圉葡ResetSizeParameters...Default(Showall；BgIZj回丄o叩VSpace||QualityHigh0AutoplayHSpace塑372FileJDocumeritsJ-^OaridJ^OSett.irigsi1-③|己[•Edit...]H184小结：若要在文档中修改Flash动画的大小，可在“属性检查器”的“宽度”框和“高度”框内输入数值，也可以直接在文档窗口中，选取动画后拖拽控制点改变动画的尺寸。使用Shockwave电影Shockwave电影也是一种常见的多媒体对象。本节主要介绍Shockwave电影的概述以及如何使用该对象的方法。5.3.1什么是Shockwave电影Shockwave电影是Macromedia网上交互多媒体的标准，是一种允许用Macromedia的Director软件创建的媒体文件能够快速下载并能被大多数流行的浏览器播放的压缩格式。播放Shockwave电影的软件既可以作为NetscapeNavigator插件也可以作为ActiveX控件。当你插入一个Shockwave电影时，Dreamweaver将同时使用OBJECT标签（Microsoft为ActiveX控件定义的标签）和EMBED标签（Netscape为插件定义的标签），以便在所有的浏览器类型中都能获得最佳效果。当你在“属性检查器”中对电影作修改时，Dreamweaver将同时对OBJECT标签和EMBED标签中的参数作适当的修改。5.3.2插入Shockwave电影Shockwave电影必须使用Director软件来进行制作，其Director编辑的源文件为.dir格式，则制作成电影之后，应使用“发布”命令将其导出为Web能够显示的格式.decry格式，然后用Dreamweaver插入到网页中，其步骤为：1、在文档窗口中，将光标停在你想插入Shockwave电影的地方。2、单击对象浮动面板中的Shockwave按钮1。3、在出现的对话框中选择一个电影文件。4、在其属性检查器的W（宽度）和H（高度）框中输入该Shockwave电影的宽度和高度以控制它的显示区域。属性检查器刚开始打开时只显示最常使用的属性。单击属性检查器右下角的扩展箭头可以看到该对象的所有属性，如图5.8所示。图5.8Shockwave电影设置属性在Shockwave电影属性对话框中：Name（名称）：为电影指定名称以便在脚本中识别。在Shockwave电影属性对话框中左上角Shockwave下的无标识域中可以为该电影输入名称。W（宽度）和H（高度）以像素为单位指定电影的宽度和高度。你还可以指定以下几种单位：pt（磅）、in（英寸）、mm（毫米）、cm（厘米）或％（百分比）。单位和数值之间不能有空格，例如：3mm。File（文件）：指定Shockwave电影文件的路径及文件名。你可以直接键入该电影文件的路径及文件名，也可以单击文件夹图标选择。Tag（标签）：确定用来识别Shockwave电影的标签。你可以选择OBJECTandEMBED，也可以任选其一。默认值为OBJECTandEMBED0Align（对齐）：确定电影在网页中的对齐方式。BgColor（背景颜色）：确定电影区域的背景颜色。即使电影不播放（载入时或播放后）该颜色也会显示。ID（标识）：定义可选的ActiveXID参数。此参数通常用于ActiveX控件之间的信息传递。Borders（边框）：指定电影边框的宽度。VSpace（纵向空间）和HSpace（横向空间）指定电影上下左右的以像素为单位的白色空格数。AltImage（备选图像，仅适用于OBJECT）:指定当访问者的浏览器不支持ActiveX控件时用该备网页设计与制作网页设计与制作第5第5章多媒体对象的使用第5第5章多媒体对象的使用选图像替代显示。Parameters（参数）：打开一个对话框，在其中可以输入传递给Shockwave电影的其它参数。Shockwave电影必须能够自动接收这些参数。例5-4在页面中插入Shockwave电影。操作方法：启动Dreamweaver软件，单击“插入”f“媒体”f“Shockwave”命令。在打开的“选择文件”对话框中，选择要插入的Shockwave电影文件，然后按【F12】键在浏览器窗口中预览效果。使用Java特效Java特效是指用高级编程语言Java编写的一种应用程序，称为Applet（小程序）。它可以用于实现一些交互式界面效果或图像效果。什么是Java小程序Javaapplet（Java小程序）是在Java的基础上演变而成的能够嵌入在网页中的可以执行一定小任务的应用程序，它具有动态交互式的特点，由Html语言中的〈Applet〉与〈/Applet〉标记符载入网页页面。当你创建Java小程序后，你便可以用Dreamweaver将它插入到HTML文档中。Java小程序动画效果特别生动、有趣，且播放时不需要插件，只是在运行速度上稍比图像或GIF动画慢，但仍然是一种常用的网页修饰手段。Java小程序，也称为applet对象，它大致包括两个部分：一是Java类模块，即以.class为后缀的class类文件；二是文档中控制该模块的特定程序参数，即一段HTML代码。所以总的来说,Java特效的实现只须在网站中包含相应Java小程序的.class文件，然后在网页中插入引用该对象的HTML代码，就可以达到目的。使用Anfy制作Java特效Anfy是一种很著名的Java特效程序，该软件提供了40种以上的Java特效，能够以简明的方式实现并制作Java小程序特效，用户通过URL地址可方便地下载该共享软件。一般使用该软件简体中文版。待下载并安装Anfy软件后，则可启动该软件，进入其窗口界面如图5.9所示。

FileQptioileHelpfxSNOWSelectth.Ecategoryand.thiappletyouw：FileQptioileHelpfxSNOWB：=LTLTLHr/SliilnshovFractals/Alif<'VImageeffecC3DAppletsNavi驴tionmenuThieappletaddssnowfl：ikeEto：=ltlvimage^preferablyonewithsnowpresent：ilreadyonthegl-ijiJTLd.AddmagicThieappletaddssnowfl：ikeEto：=ltlvimage^preferablyonewithsnowpresent：ilreadyonthegl-ijiJTLd.Addmagictoyoursite\ppletpreview...2qwHhtheJava™applets*easytoconfigure,now!Previewall...其中：“种类”图5.9Anfy软件界面t》轴*开lL“标题/平滑显示”“分裂效果/J造生物”、Backgi'ijuiuiSizeWidthSnowovertexWindMaxspeed[1▼ITariti[efaultvalue:!Frev^图.5.|10|320DroppingHeighi|208*/ErLabletestscr《SNOW”—Sack,color...ExitBackgi'ijuiuiSizeWidthSnowovertexWindMaxspeed[1▼ITariti[efaultvalue:!Frev^图.5.|10|320DroppingHeighi|208*/ErLabletestscr《SNOW”—Sack,color...Exit“图像效果”“3D应用程序”、“导航菜单”和“其他”选取特效种类后，可以在右侧列表框中选择一种效果，此时下面的文字框内出现了对应特效的描述文字。若希望查看选择效果，可以单击“爪哇应用预览„”按钮打开浏览器预览特效。若单击“预览全部„”按钮，则