创建丰富多彩的多媒体页面.ppt

《创建丰富多彩的多媒体页面.ppt》由会员分享，可在线阅读，更多相关《创建丰富多彩的多媒体页面.ppt（18页珍藏版）》请在三一办公上搜索。

1、第 7 章 创建丰富多彩的多媒体页面,一、插入Flash动画,1.flash文件的类型（1）Flash 文件(.fla)这类文件所有项目的源文件，是在 Macromedia Flash 程序中创建。此类型的文件只能在Macromedia Flash中打开，而不是在 Dreamweaver 或浏览器中打开的。这种文件必须在Macromedia Flash中打开后，再将它导出为 SWF 或 SWT 文件才可以在Dreamweaver 或浏览器中使用。（2）Flash SWF 文件(.swf)这类文件是 Flash(.fla)文件的压缩版本，是可以在web中查看的flash文件。这类文件可以在浏览器

2、中播放并且可以在 Dreamweaver 中进行预览，但不能在Macromedia Flash中编辑。这是我们在Dreamweaver CS5中所使用的 Flash 按钮和 Flash 文本对象都是.swf类型的文件。,（3）Flash 视频文件格式(.flv)这是一种视频文件，它包含经过编码的音频和视频数据，是通过 Flash Player 进行播放的视频文件。例如，如果有 QuickTime 或 Windows Media 格式的视频文件，我们可以使用编码器（如 Flash 8 Video Encoder）将视频文件转换为 FLV 文件。（4）Flash 模板文件(.swt)和Flash

3、元素文件(.swc)Flash 模板文件(.swt)该类文件是Flash库文件，这种类型的文件允许修改Flash动画文件中的信息，这类文件常用于Flash按钮对象中。而Flash 元素文件(.swc)也是一种 Flash SWF 文件，通过将此类文件合并到 Web 页，可以创建丰富的 Internet 应用程序。Flash 元素有可自定义的参数，通过修改这些参数可以执行不同的应用程序功能。综上所述，在Dreamweaver CS5中使用的flash格式通常是可以直接在web中播放的swf格式，而我们后面学习制作的flash文本和flash按钮也都是这种格式的。此外，在Dreamweaver C

4、S5中使用的flash视频的格式就是flv格式的。,2.插入flash内容（1）插入及预览flash在网页中插入flsah（.swf）内容的方法非常简单。在【文档】窗口的【设计】视图中，将插入点放置在要插入内容的位置，然后执行以下操作之一：在【插入】面板的【常用】类别中，选择【媒体】，然后单击“Flash”图标。选择菜单栏【插入记录】【媒体】【Flash】。在弹出的对话框中，选择一个 Flash 文件(.swf)。Flash 占位符就会出现在“文档”窗口中（与 Flash 按钮和文本对象不同）。点击在文档中出现的flash占位符，在属性面板中，单击【播放】按钮即可预览该flash。单击“停止”

5、可以结束预览。当然可以通过按 F12 在浏览器中预览 Flash 内容。,（2）设置flash属性选择一个 Flash SWF 文件后，可以在属性面板中设置它的属性。下面介绍一下主要属性项的功能。名称：属性面板最左侧的未标记的文本框是输入flash名称的位置。在脚本撰写时，我们需要指定一个名称来标识该文件。这个名称和该flash的文件名不同。宽和高：以像素为单位指定影片的宽度和高度。文件：指定 Flash文件的路径。单击文件夹图标以浏览到某一文件，或者键入路径。编辑：启动Macromedia Flash 以更新 FLA 文件（使用 Flash 创作工具创建的文件）。如果电脑上没有安装Macro

6、media Flash，此选项将被禁用。重设大小：将选定影片返回到其初始大小。循环:使影片连续播放；如果没有选中该选项，flash在播放一次后即停止。自动播放:在加载页面时自动播放。垂直边距和水平边距:指定影片上、下、左、右空白的距离。,品质：在flash影片播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求处理器速度更快。它有四个选项：“低品质”设置意味着更看重显示速度而非外观.“高品质”设置意味着更看重外观而非显示速度。“自动低品质”意味着首先看重显示速度，如有可能则改善外观。“自动高品质”意味着首先看重这两种品质，但根据需要可能会因为显示速度而影响外观。比例:确定影片如何适合在

7、宽度和高度文本框中设置的尺寸。它有三个选项。默认（全部显示）设置为显示整个影片。无边框：使影片适合设定的尺寸，以便不显示任何边框并保持原始的长宽比。严格匹配 对影片进行缩放以适合设定的尺寸，不管纵横比如何。对齐:确定影片在页面上的对齐方式。背景:指定影片区域的背景颜色。参数:将打开一个对话框，可以在其中输入传递给影片的附加参数。要求影片必须已设计好可以接收这些附加参数。,二、插入Shockwave动画,在Dreamweaver CS5中，可以将 Shockwave 影片插入到文档中。Adobe Shockwave 是 在Web上用于交互式多媒体的一种压缩格式标准，使得在 Adobe Direc

8、tor中创建的媒体文件能够被大多数常用浏览器快速下载和播放。插入chockwave影片的方法和前面也同样非常类似。在【文档】窗口中，将插入点放置在要插入 Shockwave 影片的位置，然后执行以下操作之一：在【插入】栏的【常用】选项卡中，单击【媒体】按钮，然后从弹出菜单中选择“Shockwave”图标。选择【插入记录】【媒体】【Shockwave】。在弹出【选择文件】对话框中，选择一个dcr格式的影片文件，即插入到网页。在网页中看到shockwave影片的占位符，是一个宽和高都是32像素的小图标。在【属性】面板中，分别输入影片的宽度和高度。否则，这个影片就只能在小占位符的位置上播放。注意：播

9、放shockwave动画需要shockwave插件的支持，必须下载shockwave插件才能观看,安装过程浏览器会自动提示。,三、插入声音,在Dreamweaver CS5中，可以支持两种插入声音的方法。链接到音频文件和嵌入声音文件。1.链接到音频文件链接到音频文件是将声音添加到网页的一种简单而有效的方法。这种集成声音文件的方法可以使访问者选择是否要收听该文件，并且使文件可用于最广范围的听众。链接到音频文件的本质就是创建一个页面链接，这个链接所指向的文件是一个音频文件。具体的方法在第5章已经介绍过。只需要选择要用作指向音频文件的链接的文本或图像，并在属性面板中，单击【链接】文本框旁的文件夹图标

10、以浏览音频文件，或者在【链接】文本框中键入文件的路径和名称即可。,2.嵌入声音文件嵌入音频可将声音直接集成到页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，就可以嵌入文件。将声音文件集成到网页中时，需要仔细考虑这些声音文件在 Web 站点内的播放方式。因为访问者有时可能不希望听到音频内容，所以应该总是提供启用或禁用声音播放的控件。嵌入声音文件的本质是插入一个声音的插件。其操作方法是：在【设计】视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一：在【插入】栏的

11、【常用】选项卡中，单击【媒体】按钮，然后从弹出菜单中选择【插件】图标。选择【插入记录】【媒体】【插件】。在弹出的【选择文件】对话框中，选择需要插入的声音文件即可。插入声音插件之后，需要在属性面板中，输入值宽和高的值，或者通过在【文档】窗口直接调整插件占位符的大小。这些值确定音频控件在浏览器显示大小。点击播放按钮即可播放该音频。点击停止按钮即可停止播放。,四、插入视频,在Dw CS5中，可以支持多种格式的视频文件。例如flash视频（.flv）、windows视频格式（.wmv）等等。1.插入flash视频在Dreamweaver中插入flash视频时，实际上是插入了一个 Flash 视频组件；

12、在浏览器中查看该组件时，它将显示所选择的 Flash 视频内容以及一组播放控件。Dreamweaver CS5提供了两种播放flash视频的选项。累进式下载视频：将 Flash 视频(FLV)文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。流视频：对 Flash 视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在 Web 页面上播放该内容。若要在网页上启用流视频，必须具有访问 Adobe Flash Media Server 的权限。,以插入累进式下载视频为例，介绍插入flash视频的主要步骤：

13、（1）在【设计】视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一：在【插入】栏的【常用】选项卡中，单击【媒体】按钮，然后从弹出菜单中选择【flash视频】图标。选择【插入记录】【媒体】【flash视频】。（2）在弹出的【插入 Flash 视频】对话框中，从“视频类型”弹出菜单中选择“累进式下载视频”或“流视频”。（3）在“URL”中指定 FLV 文件的相对路径或绝对路径。（4）在“外观”中 指定 Flash 视频组件的外观。Dreamweaver中提供了多种可选的视频播放外观，所选外观的预览会出现在“外观”弹出菜单下方。（5）指定视频文件的宽度和高度。若要让 Dreamweaver

14、 确定 FLV 文件的准确宽度和高度，请单击“检测大小”按钮。如果 Dreamweaver 无法确定宽度，则必须键入宽度值和高度值。（6）设置视频是否需要“限制高宽比”、“自动播放”以及“自动重新播放”。,（7）选项“如果必要，提示用户下载 Flash Player”是指在页面中插入代码，该代码将检测查看 Flash 视频所需的 Flash Player 版本，并在用户没有所需的版本时提示其下载 Flash Player 的最新版本。我们还可以在“消息”框自定义一个提示消息。（8）单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页面。插入 Flash 视频命令插入的是一个FLV

15、文件，生成的是一个视频播放器 SWF 文件和一个外观 SWF 文件，它们用于在 Web 页面上显示 Flash 视频内容。这些文件与 Flash 视频内容所添加到的 HTML 文件存储在同一目录中。当上传包含 Flash 视频内容的 HTML 页面时，Dreamweaver 将以相关文件的形式上传这些文件。如果需要插入“流视频”，则需要改变视频类型选项，再根据对话框内容填写完成其他选项设置即可。,2.插入其他格式视频在Dreamweaver CS5中，可以支持插入多种格式的视频，如QuickTime格式视频和Windows格式视频等，只需计算机中提供相应视频格式的插件即可。插入其他格式视频的方

16、法是选择【插入记录】【媒体】【插件】。具体方法前面已经介绍过，在此不再赘述。同样，浏览网页的用户必须下载相应插件，才能查看常见的流式处理格式，如 Real Media、QuickTime 和 Windows Media。,五、插入其它多媒体,1.插入flash文本在Dreamweaver CS5中，可以制作简单的flash文本，插入的flash文本可以设置字体、大小、颜色、滚转颜色以及链接等内容。插入flash文本的方法：只需将“媒体”对象选择为“flash文本”即可。在弹出的【插入flash文本】对话框中，设置文本的选项。插入的flash文本被保存为swf格式的flash文件。如果点击【应用

17、】按钮，可以不关闭该对话框，直接在网页中预览文本的效果，插入的文本在网页中就会有滚转颜色不同的效果。注意：在插入flash文本之前，需要先保存网页文档。且保存该flash文本的文件路径以及文件名中都不能包含中文。,2.插入flash按钮在Dreamweaver CS5中，可以插入的flash按钮。这里使用的flash按钮不需要安装Macromedia Flash支持，Flash 按钮对象是基于 Flash 模板的可更新按钮。插入flash按钮的方法：只需将“媒体”对象选择为“flash按钮”即可。在弹出的【插入flash按钮】对话框中，设置按钮的选项。在Dreamweaver CS5中，提供了

18、多种样式的flash按钮模板，选择模板样式后，可以在范例去预览该按钮的效果。插入的flash按钮被保存为swf格式的flash文件。如果点击【应用】按钮，可以不关闭该对话框，直接在网页中预览按钮的效果。3.插入FlashPaper 文档FlashPaper是一种特殊的Flash动画文件，可以通过FlashPaper软件制作。制作网页时，可以利用插入FlashPaper功能在网页中插入Macromedia FlashPaper文档。这样在浏览器中打开包含FlashPaper文档的网页时，用户就可浏览FlashPaper文档中的所有页面，而无须加载新的网页。用户也可以搜索、打印和缩放该文档。,在网

19、页中插入FlashPaper的方法和前面类似，只需选择媒体对象为“FlashPaper”即可。在弹出的【插入 FlashPaper】对话框中，浏览到一个 FlashPaper 文档并将其选定。如果需要指定高度和宽度，就输入宽度和高度来指定 FlashPaper 对象在网页上的尺寸。FlashPaper 将缩放文档以适合宽度。单击【确定】在页面中插入文档。由于 FlashPaper 文档是 Flash 对象，因此页面上将出现一个 Flash 占位符。单击该占位符，在属性面板中的点击【播放】按钮可以预览 FlashPaper 文档，单击【停止】可以结束预览。也可以通过按 F12 键在浏览器中预览该

20、文档。FlashPaper 工具栏在浏览器中具有全部功能。,六、在HTML代码中插入多媒体,在HTML代码中多媒体标记主要有以下两种 和。其中标记用于设定背景音乐，它仅适用于Internet Explorer浏览器。标记用于加入声音，音乐或影像。1.标记：是用以插入背景音乐，但只适用于 IE，其参数设定不多。其语法格式为：举例如下：其中各个参数的含义是：src=your.mid 设定 midi 文件及路径，可以是相对或绝对。autostart=true 设定在网页打开之后是否自动播放音乐。值为true，代表自动播放，值为false，代表不自动播放，其中false为缺省值。loop=infinite 设定是否自动重复播放以及重复播放的次数。loop=2表示重复两次，infinite 表示重复多次。,2.标记：是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持这个标记。其参数设定较多。如果想要给自己的网页添加一个背景音乐有以下两种方法：即使用标记或者标记。（1）使用标记（2）使用标记,