第7章 插入多媒体元素

1、网页制作基础教程网页制作基础教程（Dreamweaver CS3Dreamweaver CS3）电子教案电子教案ISBN7121028824本章重点：如何使用本章重点：如何使用FlashFlash动画、动画、FlashFlash按钮、按钮、FlashFlash元素和元素和AppletApplet小小程序丰富网页。程序丰富网页。 7.1 7.1 网页的动感效果设计网页的动感效果设计7.2 7.2 插入插入FlashFlash对象对象7.3 7.3 插入其它多媒体元素插入其它多媒体元素7.4 7.4 插入第三方插件插入第三方插件网页制作基础教程网页制作基础教程7.1 7.1 网页的动感效果设计网页

2、的动感效果设计 7.1.1 7.1.1 案例综述案例综述本章案例主本章案例主要是通过在要是通过在网页中插入网页中插入FlashFlash动画和动画和AppletApplet插件插件等多媒体元等多媒体元素来美化网素来美化网页，使网页页，使网页看上去更加看上去更加生动。生动。 网页制作基础教程网页制作基础教程7.1 7.1 网页的动感效果设计网页的动感效果设计 7.1.2 7.1.2 案例分析案例分析本页面的制作分五个步骤进行：本页面的制作分五个步骤进行：n页面基本制作页面基本制作n BannerBanner条的制作条的制作n导航条的制作导航条的制作n正文区的制作；正文区的制作；n扩展功能。扩展功

3、能。网页制作基础教程网页制作基础教程7.1 7.1 网页的动感效果设计网页的动感效果设计 7.1.3 7.1.3 实现步骤实现步骤n页面基本制作页面基本制作n创建站点创建站点创建主页文件创建主页文件设置设置标题标题n BannerBanner条的制作条的制作（透明背景的（透明背景的Flash)Flash)设置图片背景设置图片背景插入插入FlashFlash设置背设置背景透明参数景透明参数n导航条的制作导航条的制作插入插入FlashFlash按钮按钮网页制作基础教程网页制作基础教程7.1 7.1 网页的动感效果设计网页的动感效果设计 7.1.3 7.1.3 实现步骤实现步骤n正文区的制作正文区的

4、制作用用CSSCSS样式格式化页面样式格式化页面插入插入FlashFlash文本文本插入图像查看器插入图像查看器插入插入Java Java AppletApplet小程序小程序插入背景音乐插入背景音乐n扩展功能扩展功能n扩展命令扩展命令 n扩展对象扩展对象 n扩展行为扩展行为 网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象FlashFlash动画的优点：文件小，网上传输快。动画的优点：文件小，网上传输快。FlashFlash对象包括：对象包括：nFlashFlash动画动画nFlashFlash按钮按钮nFlashFlash文本文本nFlashFlash视

5、频视频nFlashFlash元素（图像查看器）元素（图像查看器）nFlashFlash文档等。文档等。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.1 7.2.1 插入插入FlashFlash动画动画 插入插入FlashFlash动画的操作步骤：动画的操作步骤：n将插入点置于要插入将插入点置于要插入FlashFlash影片的位置。影片的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【FlashFlash】命令，或【常用命令，或【常用/ /媒体】插入栏中媒体】插入栏中FlashFlash按钮。按钮。n在弹出的对话框中选择一个在弹出的对话

6、框中选择一个swfswf文件。文件。n插入的插入的FlashFlash动画显示为一个灰色的方框，里面有动画显示为一个灰色的方框，里面有FlashFlash标志。标志。1.1.单击【属性】面板上的【播放】按钮，可预览动画。单击【属性】面板上的【播放】按钮，可预览动画。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.1 7.2.1 插入插入FlashFlash动画动画设置设置FlashFlash影片属性：影片属性：n【Flash】:影片的名称。影片的名称。n【宽】【宽】和和【高】【高】：以像素为单位指定影片的宽度和：以像素为单位指定影片的宽度和高度。高度

7、。n【文件】【文件】：指定指向：指定指向Flash或或Shockwave文件的路径。文件的路径。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.1 7.2.1 插入插入FlashFlash动画动画设置设置FlashFlash影片属性：影片属性：n【源文件】【源文件】指定指向指定指向FlashFlash源文档源文档( (fla)fla)的路径。的路径。n【编辑】【编辑】可以启动可以启动Flash Flash 以更新以更新flafla文件。文件。n【重设大小】【重设大小】将选定影片返回到其初始大小。将选定影片返回到其初始大小。n【循环】【循环】选中则连续

8、播放。选中则连续播放。n【自动播放】【自动播放】选中则在加载页面时自动播放。选中则在加载页面时自动播放。n【垂直边距【垂直边距】和【水平边距】指定空白的像素值。】和【水平边距】指定空白的像素值。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.1 7.2.1 插入插入FlashFlash动画动画设置设置FlashFlash影片属性：影片属性：n【品质】【品质】控制抗失真度。控制抗失真度。n【比例】【比例】确定影片如何适合在【宽】和【高】文本框确定影片如何适合在【宽】和【高】文本框中设置的尺寸。中设置的尺寸。n【对齐】【对齐】确定影片在页面上的对齐方式。

9、确定影片在页面上的对齐方式。n【背景颜色】【背景颜色】指定影片区域的背景颜色。指定影片区域的背景颜色。10.10.【参数】【参数】打开一个对话框，可在其中输入传递给影片打开一个对话框，可在其中输入传递给影片的附加参数的附加参数网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.2 7.2.2 插入插入FlashFlash按钮按钮 n将光标放到要插入将光标放到要插入FlashFlash按钮对象的按钮对象的位置。位置。n 选择【插入】选择【插入】| |【媒体】【媒体】| |【FlashFlash按钮】命令，或单按钮】命令，或单击【插入】面板上击【插入】面板上

10、【常用】【常用】| |【媒体】【媒体】| |【FlashFlash按钮】，按钮】，打开【插入打开【插入FlashFlash按钮】对话框按钮】对话框. .网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.3 7.2.3 插入插入FlashFlash文本文本 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入Flash文本对象的位文本对象的位置置 。n选择【插入】选择【插入】| |【媒【媒体】体】| |【FlashFlash文本】文本】命令，或单击【插命令，或单击【插入】栏上【常用】入】栏上【常用】| |【媒体】【媒体】| |【FlashFla

11、sh文本】，打开【插文本】，打开【插入入FlashFlash文本】对话文本】对话框框 . .1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.4 7.2.4 插入图像查看器插入图像查看器 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入Flash元素的位置元素的位置 。n选择【插入】选择【插入】| |【媒体】【媒体】| |【图像查看器】命令，打开【图像查看器】命令，打开【保存【保存FlashFlash元素】对话框。元素】对话框。1.1.设置完成后单击设置完成后单击“确定确定”按钮

12、。按钮。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.57.2.5插入插入FlashFlash视频视频 操作步骤如下操作步骤如下 ：n选择【插入】【媒体】【选择【插入】【媒体】【Flash 视频】命令，或单视频】命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选击【插入】栏的【常用】类别中的【媒体】下拉框，选择【择【Flash Video】。】。 1.1.设置完成后单击设置完成后单击“确定确定”按钮。按钮。网页制作基础教程网页制作基础教程7.2 7.2 插入插入FlashFlash对象对象7.2.67.2.6插入插入 FlashPaper

13、FlashPaper 文档文档 操作步骤如下操作步骤如下 ：n将插入点放在页面上想要显示将插入点放在页面上想要显示 FlashPaper FlashPaper 文档的位置，文档的位置，然后选择【插入】【媒体】【然后选择【插入】【媒体】【FlashPaperFlashPaper】命令，命令，或单击【插入】栏的【常用】类别中的【媒体】下拉框，或单击【插入】栏的【常用】类别中的【媒体】下拉框，选择【选择【FlashPagerFlashPager】。】。 n在【插入在【插入 FlashPaperFlashPaper】对话框中，浏览到一个对话框中，浏览到一个 FlashPaper FlashPaper

14、文档并将其选定。设置完成后单击文档并将其选定。设置完成后单击“确定确定”按钮。按钮。网页制作基础教程网页制作基础教程7.37.3插入其它多媒体元素插入其它多媒体元素 7.3.17.3.1插入插入Java AppletJava Applet小程序小程序 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入AppletApplet小程序的位置。小程序的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【AppletApplet】命令，或者单击命令，或者单击【插入】面板上【常规】【插入】面板上【常规】| |【媒体】【媒体】| |【AppletsApplets】按钮，按钮，打开【选

15、择文件】对话框，从对话框中选择扩展名打开【选择文件】对话框，从对话框中选择扩展名为为. .classclass的文件。的文件。n选中插入到页面中的选中插入到页面中的AppletApplet图标，打开属性面板，设置图标，打开属性面板，设置其属性。其属性。 网页制作基础教程网页制作基础教程7.37.3插入其它多媒体元素插入其它多媒体元素 7.3.27.3.2插入插入ActiveXActiveX控件控件 操作步骤如下操作步骤如下 ：n将光标放到要插入将光标放到要插入ActiveXActiveX对象的位置。对象的位置。n选择【插入】选择【插入】| |【媒体】【媒体】| |【ActiveXActiveX

16、】命令或命令或者单击【插入】面板上【常规】者单击【插入】面板上【常规】| |【媒体】【媒体】| |【ActiveXActiveX】按钮，即可在文档中插入按钮，即可在文档中插入ActiveXActiveX对象。对象。 n选中选中ActiveXActiveX对象图标，打开它的属性面板，对象图标，打开它的属性面板，设置其属性。设置其属性。 网页制作基础教程网页制作基础教程7.37.3插入其它多媒体元素插入其它多媒体元素 7.3.37.3.3插入插入 Shockwave Shockwave 影片影片操作步骤如下操作步骤如下 ：n将插入点置于要插入将插入点置于要插入Shockwave 影片的位置。影片的

17、位置。n选择【插入】选择【插入】|【媒体】【媒体】|【 Shockwave 】命令，或【常用命令，或【常用/媒体】插入栏中媒体】插入栏中Shockwave图标。图标。n插入的插入的Flash动画显示为一个灰色的方框，里动画显示为一个灰色的方框，里面有面有Shockwave标志。标志。n选中此影片标记，在属性面板中设置其相关属选中此影片标记，在属性面板中设置其相关属性。性。 网页制作基础教程网页制作基础教程7.47.4插入第三方插件插入第三方插件7.4.1 7.4.1 安装扩展插件安装扩展插件 利用插件可以增强利用插件可以增强Dreamweaver CS3Dreamweaver CS3的功能。在

18、网的功能。在网站可以下载第三方插件，大部分是免费的。站可以下载第三方插件，大部分是免费的。插入第三方插件的操作方法：插入第三方插件的操作方法：n在【文档】窗口中，将插入点置于要插入在【文档】窗口中，将插入点置于要插入ActiveXActiveX控件的地方。控件的地方。n选择【插入】栏选择【插入】栏| |【常用【常用】| |【媒体媒体】| |【 插件插件】图标，或【插入】图标，或【插入】| |【媒体】【媒体】| | 【 插件】插件】1.1.出现的出现的 图标会标记出页面中插件将在页面上出图标会标记出页面中插件将在页面上出现的位置现的位置。网页制作基础教程网页制作基础教程7.4 7.4 插入第三方

19、插件插入第三方插件( (扩展插件管理器扩展插件管理器) )要保存下载的扩展：要保存下载的扩展：n单击单击 Macromedia Exchange Web 站点上的扩展链站点上的扩展链接，开始下载。接，开始下载。 n将扩展保存到扩展管理器应用程序文件夹的将扩展保存到扩展管理器应用程序文件夹的 Downloaded Extensions 文件夹中。文件夹中。 n执行下列操作之一来安装扩展：执行下列操作之一来安装扩展：n在扩展管理器中，选择在扩展管理器中，选择“文件文件”“安装扩展安装扩展”。 1.浏览到已保存在浏览到已保存在 Downloaded Extensions 文件夹中的文件夹中的该文件，

20、然后双击文件图标。该文件，然后双击文件图标。 网页制作基础教程网页制作基础教程安装扩展：安装扩展：n用以下方法之一启动扩展管理器：用以下方法之一启动扩展管理器： n双击双击 Windows Windows 资源管理器资源管理器 ( (Windows) Windows) 或或 Finder (Macintosh) Finder (Macintosh) 中的扩展文件。中的扩展文件。 n在在 Windows Windows 中，选择中，选择“开始开始”菜单中的菜单中的“Macromedia”“Macromedia Macromedia”“Macromedia 扩展管理器扩展管理器”。 n在在 Mac

21、intosh Macintosh 中，双击中，双击 Applications/Macromedia Applications/Macromedia Extension Manager Extension Manager 文件夹中的扩展管理器图标。文件夹中的扩展管理器图标。 1.1.在在 Dreamweaver Dreamweaver 中，选择中，选择“命令命令”“”“管理扩展管理扩展”，或者，或者在在 Flash Flash 或或 Fireworks Fireworks 中选择中选择“帮助帮助”“”“管理扩展功管理扩展功能能”。 7.4 7.4 插入第三方插件插入第三方插件( (扩展插件管理器

22、扩展插件管理器) )网页制作基础教程网页制作基础教程7.4 7.4 插入第三方插件插入第三方插件( (扩展插件管理器扩展插件管理器) )n在扩展管理器工具栏的在扩展管理器工具栏的“产品产品”弹出菜单中，选择您要在其中弹出菜单中，选择您要在其中安装该扩展的安装该扩展的 Macromedia Macromedia 产品。产品。 n在扩展管理器中，选择在扩展管理器中，选择“文件文件”“”“安装扩展安装扩展”。 n在出现的文件选择对话框中，选择一个扩展名为在出现的文件选择对话框中，选择一个扩展名为 . .mxp mxp 的扩展的扩展文件，然后选择文件，然后选择“安装安装”(”(Windows) Windows) 或或“选择选择”(”(Macintosh)Macintosh)。 n仔细阅读仔细阅读 Macromedia Macromedia 扩展免责声明和所有可能附带的第三方扩