在网页中加入多媒体.docx

1、在网页中加入多媒体在网页中加入多媒体第十一章 在网页中加入多媒体Dreamweaver MX可以很方便、快捷地在网页中加入声音、动画等文件，可以合成、编辑这些多媒体文件和对象，例如Java小程序、QuickTime、Flash动画、ShockWave动画和MP3文件等，还可以在这些对象里附加一些设计记录，也可以插入Flash按钮和文本对象等。本章介绍利用Dreamweaver MX在网页中插入多媒体元素的方法。通过本章的学习，读者应该掌握以下内容：制作交互对象在网页中插入媒体对象在网页中插入声音11.1 网页多媒体应用实例在网页中加入多媒体可以使网页既美观又生动，令网页增色不少，图11-1所示

2、为在网页中插入了一个flash动画。11.2 制作交互对象Macromedia Flash技术是矢量图形和动画的传递的先进解决方式。在Dreamweaver中可以使用的Flash文件格式通常有以下3种。(1)The Flash file(.fla)：是在Flash程序中创建的各种项目的原文件。这种文件格式只能在Flash中打开，而不能在Dmamweaver或浏览器中打开。可以在Flash中打开fla文件，并输出成SWF或SWT文件，从而在浏览器中使用。(2)The Flash movie file (.swf)：是Flash (.fla)文件的压缩版本，为在网络中浏览做了优化。该文件可以在浏览

3、器和Dreamweaver中播放预览，但不能在Flash中编辑。这是使用Flash按钮和文字对象所创建的文件格式。(3)The Flash Generator template(.swt)：可以用来修改和替换swf文件中的信息。这些文件被使用在Flash按钮对象中，用户可以用文字或连接修改模板，来创建自定义的SWF并插入到文件中。在Dreamweaver MX中，这些模板文件可以在Dreamweaver/Configuration/Flash Objects/Flash Buttons和Flash Text文件夹中找到。如果用户使用Flash来设计自己的Generator模板文件，可以将这些模

4、板在网络设计小组成员间共享。可以将这些文件存放到Configuration/Flash Objects/Flash Buttons文件夹，然后通过使用Flash按钮对象来进入这些文件。11.2.1 插入Flash按钮对象1.使用Flash按钮对象使用Flash按钮对象可以自定义和插入一组预设的Flash按钮，但必须在插入一个Flash按钮或文字对象前保存文档。2.插入一个Flash按钮对象Flash按钮对象是基于Flash模板的可更新按钮。用户可以自定义Flash按钮对象，并添加文本、背景颜色以及指向其他文件的链接。在使用设计视图或代码视图时可以插入Flash按钮。若要插入Flash按钮对象，

5、可执行以下操作。(1)在文档窗口中，将插入点放置在要插入Flash按钮的地方。(2)执行以下操作之一，可打开“插入Flash对象”对话框，如图11-2所示。图11-2 “插入Flash按钮”对话框在插入栏中，选择“媒体”，然后单击“Flash按钮”图标。在插入栏中，选择“媒体”，然后将“Flash按钮”图标拖入文档窗口中，如果正在处理代码，也可以将图标拖入代码视图窗口中。单击“插入”“交互式图像”“Flash按钮”菜单命令。(3)从“样式”列表中选择所需的按钮样式。(4)在“按钮文本”域中键入需要显示的文本。(5)在“字体”弹出式菜单中，选择需要使用的字体。(6)在“大小”域中输入字体大小的数

6、字值。(7)在“链接”域中输入该按钮的文档相对或绝对链接。(8)在“目标”域中指定链接的文档将在其中打开的位置。可以在弹出式菜单中选择框架或窗口选项。只有在框架页中编辑Flash对象时，才列出框架名称。(9)在“背景颜色”域中设置Flash影片的背景颜色。使用颜色选择器或键入Web十六进制值(例如#FFFFFF)。(10)在“另存为”域中输入用来保存此新SWF文件的文件名。可使用默认文件名(例如button1.swf)或键入新文件名。如果该文件包含文档相对链接，则必须将该文件保存到与当前HTML文档相同的目录中，以保持文档相对链接的有效性。(11)单击“获取更多样式.”以转到Macromedi

7、a Exchange站点并下载更多按钮样式。(12)单击“应用”或“确定”以将Flash按钮插入到文档窗口中。注意：选择“应用”可以在设计视图中看到更改，同时令对话框仍处于打开状态，这样就可以继续对按钮进行更改。3.修改Flash按钮对象用户可以修改Flash按钮对象的属性和内容。若要修改Flash按钮对象，可执行以下操作。(1)在文档窗口中，单击Flash按钮对象。(2)如果属性面板尚未打开，则打开属性面板。属性面板显示Flash按钮属性。可以通过属性面板来修改按钮的HTML属性，例如宽度、高度和背景颜色，如图11-3所示。图11-3 Flash按钮属性面板(3)执行如下方法之一，打开“插入

8、Flash按钮”对话框。双击Flash按钮对象。在属性面板中单击“编辑”。右击Flash按钮对象，然后从快捷菜单中选择“编辑”。(4)在“插入Flash按钮”对话框中对各选项进行重新设置。在设计视图中，通过使用调整大小手柄可以很容易地调整对象的大小。还可以通过在属性面板中选择“重设大小”，将该对象返回到其初始大小。11.2.2 插入Flash文本对象利用Flash文本对象可以创建和插入只包含文本的Flash影片。用户可以使用自己选择的设计器字体和文本创建较小的矢量图形影片。若要插入Flash文本对象，可执行以下操作。(1)在文档窗口中，将插入点放置在要插入Flash文本的地方。(2)执行以下操

9、作之一，打开“插入Flash文本”对话框，如图11-4所示。图11-4 “插入Flash文本”对话框在插入栏中，选择“媒体”，然后单击“Flash文本”图标。在插入栏中，选择“媒体”，然后将“Flash文本”图标拖到文档窗口(或者如果您正处理代码，则拖到代码视图窗口)。在菜单栏中单击“插入”“交互式图像”“Flash文本”命令。(3)从“字体”弹出式菜单中选择一种字体。(4)在“大小”域中输入字体大小，这些字体大小是以点为单位的。(5)通过单击适当的样式按钮，指定样式属性(例如粗体或斜体)和文本对齐方式。(6)在“颜色”域中，通过使用颜色选择器或输入Web十六进制值(例如#FFFFFF)设置文

10、本的颜色。(7)在“转滚颜色”域中设置当鼠标指针经过Flash文本对象时显示的颜色。使用颜色选择器或输入Web十六进制值(例如何FFFFF)。(8)在“文本”域中输入所需的文本。若要查看在“文本”域中显示的字体样式，需选择“显示字体”。(9)如果想要将一个链接与Flash文本对象关联，可在“链接”域中输入文档相对或绝对链接。因为浏览器不能识别Flash影片中的站点相对链接，所以不接受站点相对链接。如果使用文档相对链接，要确保将SWF文件保存到与HTML文件相同的目录上。浏览器不同，对文档相对链接的解释也不同，因此保存到相同目录中可确保链接正确工作。(10)如果已输入链接，则可以在“目标”域中为

11、该链接指定要转到的目标框架或目标窗口。(11)在“背景颜色”域中选择文本的背景颜色。使用颜色选择器或输入Web十六进制值(例如#FFFFFF)。(12)在“另存为”域中输入文件的名称。用户可以使用默认文件名(例如tex1.swf)或键入新名称。如果文件包含文档相对链接，则必须将该文件保存到与当前HTML文档相同的目录中，以保持文档相对链接的有效性。(13)单击“应用”或“确定”按钮，可以将Flash文本插入文档窗口中。若要修改或播放Flash文本对象，所采用的步骤与对Flash按钮进行修改或播放所采用的步骤相同。11.2.3 鼠标经过图像将插入点放在文档中要插入对象的位置上，在菜单栏单击“插入

12、”“交互式图像”“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框，如图11-5所示。图11-5 “插入鼠标经过图像”对话框插入鼠标经过图像的操作步骤如下。(1)在“图像名称”文本框中输入图像的名称。(2)在“原始图像”文本框中输入原始图像的URL。单击“浏览”按钮，可以从磁盘上选择相应的文件。(3)在“鼠标经过图像”文本框中输入鼠标经过的图像的URL。单击“浏览”按钮，可以从磁盘上选择相应的文件。(4)选中“预载鼠标经过图像”复选框，则无论这些图像是否被显示过，浏览器都会将所有的图像都下载到本地的缓存中，以加快浏览速度。如果清除该复选框，则只在相应类型的图像被显示后，才会被浏览器下载到本地

13、的缓存中。(5)在“替换文本”文本框中输入项目描述性名称。替换文本在纯文本浏览器或设为手动下载的浏览器中，替代图像出现在应显示图像的位置。屏幕阅读器读取替换文本，而且有些浏览器在用户鼠标划过图像时显示替换文本。(6)在“按下时，前往的URL”文本框中输入该按钮图像要链接的U阻地址。单击“浏览”按钮，可以从磁盘上选择目标端点的文件。(7)单击“确定”按钮。11.3 在网页中插入媒体对象11.3.1 插入Flash电影当将Flash影片插入文档时，Dreamweaver MX同时使用object标记(该标记是Microsoft Internet Explorer为ActiveX控件定义的)和emb

14、ed标记(由Netscape Navigator定义)以在所有浏览器中都获得最佳效果。当用户在属性面板中对影片进行更改时，Dreamweaver MX会将采用的各项映射为object和embed标记的适当参数。1.插入Flash电影(1)在文档窗口的设计视图中，将插入点放置在要插入影片的地方，然后执行以下操作之一。在插入栏中，选择“媒体”，然后单击“插入Flash”图标。在插入栏中，选择“媒体”，然后将“插入Flash”图标拖到文档窗口中。在菜单栏中单击“插入”“媒体”“Flash”命令。(2)在打开的“选择文件”对话框中，选择Flash影片文件(.swf)。Flash占位符随即出现在文档窗口

15、中(与Flash按钮和文本对象不同)2.在文档窗口中预览Flash影片在“文档”窗口中，单击Flash占位符以选择要预览的Flash影片。在属性面板中，单击“播放”按钮预览的Flash影片。单击“停止”可以结束预览。还可以通过按F12键在浏览器中预览Flash影片。若要预览某一页面中的所有Flash内容，可按下Ctrl+Alt+Shift+P组合键。所有Flash对象和影片都将被设置为“播放”。3.设置Flash影片属性若要设置Flash影片属性，首先选择一个Flash影片，打开其属性面板，如图11-6所示。图11-6 Flash影片属性面板Flash影片属性面板中各项的含义如下。名称：指定用

16、来标识影片以进行脚本撰写的名称。在属性面板最左侧的未标记域中输入名称。“宽”和“高”：以像素为单位指定影片的宽度和高度。还可以指定以下单位：pc(十二点活字)、pt(点)、in(英寸)、mm(毫米)、cm (厘米)或%(相对于父对象值的百分比)。缩写必须紧跟在值之后，中间不留空格(例如3mm)。文件：指定指向Flash或Shockwave影片文件的路径。单击文件夹图标以浏览到某一文件，或者键入路径。编辑：启动Macromedia Flash MX以更新Flash文件。如果用户计算机上没有加载Macromedia Flash MX，此按钮将被禁用。重设大小：将选定影片返回到其初始大小。循环：在选

17、中该选项时影片将连续播放；如果没有选中该选项，则影片在播放一次后即停止播放。自动播放：如果选中该选项，则在加载页面时自动播放影片。“垂直边距”和“水平边距”：指定影片上、下、左、右空白的像素数。品质：在影片播放期间控制抗失真。设置越高，影片的观看效果就越好，但这要求更快的处理器以使影片在屏幕上正确显示。“低品质”设置意味着更看重速度而非外观，而“高品质”设置意味着更看重外观而非速度。“自动低品质”意味着首先看重速度，但如有可能则改善外观。“自动高品质”意味着首先看重品质，但根据需要可能会因为速度而影响外观。比例：确定影片如何适合在宽度和高度域中设置的尺寸。有3个选项：“默认值”设置显示整个影片

18、；“无边框”使影片适合设定的尺寸，因此无边框显示并维持原始的纵横比；“严格匹配”对影片进行缩放以适合设定的尺寸，而不管纵横比如何。对齐：确定影片在页面上的对齐方式。背景颜色：指定影片区域的背景颜色。在不播放影片时也显示此颜色。参数：打开一个对话框(如图11-7所示)，可在其中输入传递给影片的附加参数。影片必须己设计好，可以接收这些附加参数。图11-7 “参数”对话框11.3.2 插入Shockwave电影1.关于Shockwave电影Shockwave是Macromedia用于网页浏览者互动的多媒体标准，它是一种压缩格式，可以让媒体文件在Macromedia Director中得以创建，并能被

19、迅速下载，被大多数常用的浏览器播放。2.插入Shockwave电影若要在网页中插入Shockwave影片，可执行以下操作。(1)在文档窗口中，将插入点放置在要插入Shockwave影片的地方，然后执行以下操作之一。在插入栏中，选择“媒体”，然后单击“Shockwave”图标输。在插入栏中，选择“媒体”，然后将“Shockwave”图标拖到文档窗口中(如果正处理代码，则拖到代码视图窗口中)。在菜单栏中选择“插入”“媒体”“Shockwave”命令。(2)在打开的“选择文件”对话框中，选择一个影片文件。(3)在属性面板的“宽”和“高”文本框中分别输入影片的宽度和高度。(4)单击“确认”按钮，在插入

20、点出现一个图标。3.设置Shockwave属性与前一节中设置Flash属性的方法相同。11.3.3 插入ActiveX控件ActiveX控件(即OLE控件)是可以重复调用的组件，类似于微机的应用软件，可以作为浏览器插件使用。这种插件可以在Windows系统的Internet Explorer浏览器中运行，但是无法在Macintosh或者Natscape Navigator中运行。在Dreamweaver MX中，可以为访问者的浏览器提供对于ActiveX控件的属性和参数设置。Dreamweaver使用object标签来标记页面中出现ActiveX控件的位置，以及提供ActiveX空间的参数设置

21、。1.插入ActiveX控件在文件窗口中，将光标置于要插入控件的地方，然后用以下方法之一插入控件。在插入栏中，选择“媒体”，然后单击“ActiveX”图标艘。在插入栏中，选择“媒体”，然后拖动ActiveX图标到插入点(或者如果正在处理代码，则拖到代码视图窗口)。在菜单栏中选择“插入”“媒体”“AcdveX”命令。执行上述操作后，一个表示ActiveX控件的标记显示在页面上。2.设置ActiveX属性在插入ActiveX对象后，使用属性面板设置object标记的属性以及ActiveX控件的参数。选中ActiveX控件，打开其属性面板，如图11-8所示。图11-8 设置ActiveX属性面板中各

22、项的含义如下。名称：指定用来标识ActiveX控件以进行脚本撰写的名称。在属性面板最左侧的未标记域中输入名称。“宽”和“高”：指定对象的宽度和高度。classID：为浏览器标识ActiveX控件。输入一个值或从弹出式菜单中选择一个值。在加载页面时，浏览器使用该类ID来确定与该页面关联的ActiveX控件的位置。如果浏览器未找到指定的ActiveX控件，则尝试从“基址”指定的位置中下载它。嵌入：为该ActiveX控件在object标记内添加embed标记。如果ActiveX控件具有等效的Netscape Navigator插件，则embed标记激活该插件。Dreamweaver将作为Active

23、X属性输入的值指派给等效的Netscape Navigator插件。对齐：确定对象在页面上的对齐方式。参数：打开一个对话框(参见图11-7，在其中可输入传递给ActiveX对象的附加参数。源文件：如果启用了“嵌入”选项，定义将要用于Netscape Navigator插件的数据文件。如果没有输入值，则Dreamweaver将尝试根据己输入的ActiveX属性确定该值。“垂直边距”和“水平边距”：以像素为单位指定对象上、下、左、右的空白量。基址：指定包含该ActiveX控件的URL。如果在访问者的系统中尚未安装ActiveX控件，则Internet Explorer从该位置下载它。如果没有指定“

24、基址”参数，并且访问者尚未安装相应的ActiveX控件，则浏览器不能显示ActiveX对象。替代图像：指定在浏览器不支持object标记的情况下要显示的图像。只有在取消对“嵌入”选项的选择后此选项才可用。数据：为要加载的ActiveX控件指定数据文件。许多ActiveX控件(例如Shockwave和RealPlayer)不使用此参数。11.3.4 插入Java程序(Java Applet)Java是一种编程语言，它可以在网页中嵌入一种小型应用程序(Applet)。在创建Java小程序后，也可以使用Dreamweaver将小程序插入HTML文件中，Dreamweaver使用applet标签来标记

25、Java小程序文件。1.插入Java小程序在网页中插入Java小程序的步骤如下。(1)在文件窗口中，将插入点放在要插入Java小程序的地方。(2)执行下列操作之一，打开“选择文件”对话框。在插入“媒体”面板上点击Applet图标。将“Applet”图标也拖到文档窗口(如果正在处理代码，则拖到代码视图窗口)。在菜单栏中选择“插入”“媒体”“Applet”命令。(3)在“选择文件”对话框中，选择一个包含Java小程序的文件。(4)单击“确认”按钮，在插入点出现一个图标。2.设置Java小程序属性在插入Java Applet后，选择图标打开其属性面板，如图11-9所示。在属性面板上可以设置Java小

26、程序的相关参数。图11-9 Java小程序属性面板其中各参数的含义如下。名称：指定用来标识Applet以进行脚本撰写的名称。在属性面板最左侧的未标记域中输入名称。“宽”和“高”：指定Applet的宽度和高度。代码：指定包含该Applet的Java代码的文件。单击文件夹图标以浏览到某一文件，或者输入文件名。基址：标识包含选定Applet的文件夹。在选择了一个Applet后，此域被自动填充。对齐：确定对象在页面上的对齐方式。替代：指定如果用户的浏览器不支持Java Applet或者己禁用Java，将要显示的替代内容。如果输入文本，Dreamweaver将用Applet标记的alt属性显示该文本。如

27、果选择一个图像，Dreamweaver将在开始和结束Applet标记之间插入img标记。若要指定在Netscape Navigator (已禁用Java)和Lynx(基于文本的浏览器)中均可查看的替代内容，请选择一个图像，然后在代码检查器中手动将alt属性添加到img标记中。“垂直边距”和“水平边距”：以像素为单位指定Applet上、下、左、右的空白量。参数：打开一个对话框，可在其中输入传递给Applet的附加参数。许多Applet都受到特殊参数的控制。11.4 在网页中插入声音11.4.1 声音文件声音文件有很多种格式，添加到页面的方式也有很多，在决定使用的格式和添加方法前要考虑一些因素，如

28、目的、听众群、文件大小、声音质量、不同浏览器等。不同浏览器处理声音的方式差别很大。可以将声音文件做成SWF文件来提高兼容性。下面介绍几种常见的音频文件格式。(1).midi或.mid(Musical Instrument Digital Interface，乐器数字化接口)该格式用于器乐。MIDI文件被大多数浏览器所支持且不需插件。虽然其音质非常好，但却依赖于访问者的声卡。一个小的MIDI文件能够提供长时间的声音剪辑。MIDI文件不能被录制，必须用具有特殊软硬件的计算机来合成。(2).wav (Waveform Extension，波形扩展)该格式文件具有好的音质，被大多数浏览器支持且不需插件

29、。可以从CD、磁带、麦克风中录制需要的WAV文件。不过，该文件较大，不宜在网页中过多的使用。(3).aif(Audio Interchange File Format，音频交换文件格式，或AIFF)同WAV格式一样，AIFF格式拥有好的音质，可由大多数浏览器播放且不需插件。可从CD、磁带、麦克风中录制AIFF文件。该文件也较大，不宜过多的使用。(4).mp3(Motion Picture Experts Group Audio，运动图像专家组音频，或MPEG-Audio Layer-3)该格式是一种压缩格式，能相当大地缩小声音文件，音质是非常好的。如果一个MP3文件是正确录制与压缩的话，其音质

30、可与CD媲美。MP3文件的尺寸还是大于Real Audio文件，因此通过标准电话线连接下载整首歌将占用较长一段时间。要播放MP3文件，访问者必须下载和安装一个播放器或插件，比如QuickTime，Windows Media Player或RealPlayer。(5).ra，.ram，.rpm，或Real Audio这些格式的文件具有非常高的压缩率。具有比MP3更小的文件尺寸。因为文件可从标准的Web服务器中“流式化”，访问者可以在文件完全下载之前就听到声音。音质要弱于MP3文件，但新的播放器与编码器使音质有了相当的改进。访问者必须下载和安装RealPlayer播放器或插件才能播放该格式的文件。

31、11.4.2 链接声音文件1.链接到音频文件链接到音频文件是加入声音到网页中的一种简单且有效的方法。这种加入声音文件的方法可让访问者选择需要的声音文件。创建对音频文件的链接的步骤如下。(1)选中需要用来链接音频文件的文本或图像。(2)在其属性面板中点击文件夹图标浏览音频文件，或直接在Link(链接)域中输入文件路径和文件名。2.嵌入声音文件嵌入音频将直接插入声音播放器于页面中，但声音仅在站点访问者安装有与所选声音文件对应的插件时才能播放。如果要使用声音作为背景音乐，或者想更多地控制声音自身的表现，则选择嵌入声音文件。例如，可以设置音量，设置播放器在页面上的显示方式F以及声音文件的起点与终点。若要嵌入音频文件，可执行以下操作。(1)在设计视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一。在插入栏中，选择“媒体”，然后单击“插件”图标。在插入栏中，选择“媒体”，然后将“插件”图标拖到文档窗口中(如果正在处理代码，则拖到代码视图窗口中)。在菜单栏中选择“插入”“媒体”“插件”命令。(2)在打开的“选择文件”对话框中选择需要的声音文件，单击“确认”按钮，在插入点出现一个接图标。(3)选中磁图标，在其属性面板中输入宽度和高度数值