*,*,单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Dreamweaver 网页设计,第7章应用多媒体元素,1,【学习概述】,在网页中应用多媒体效果当前十分普遍,例如大量使用Flash动画、视频、声音、Java Applet等使网页动感十足,变化多端。本章内容包括插入Flash元素、插入背景音乐、插入视频、插入图像查看器等内容。本章的重点是插入Flash元素,难点是插入图像查看器。,2,7.1【课堂讲解】多媒体根底,7.1.1什么是Flash,Flash 是由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。并且它是矢量的,所以即使放大也不会出现变形和模糊。这种动画文件体积小,效果华美,还具有极强地的互动效果,甚至有人利用这种技术制作功能非常强大的游戏。Flash的源文件扩展名为“.fla,生成的用于网络上传输的Flash格式为“.swf。,7.1.2视频格式,视频格式有很多种,但是在网络上应用的视频格式多为：avi、wmv、asf、mpeg、rm、rmvb、mov、Flv等。,7.1.3音频格式,在网络上应用的音频格式多为：wav、mp3、aif、midi、ra、ram、rpm等。,3,7.1.4插入多媒体,要在网页中添加以上多媒体文件,可以执行【插入】-【媒体】下的子菜单命令如图7-1所示或在“插入工具栏的“常用类别中,选择“媒体,然后单击所需的媒体图标按钮如图7-2所示。,图 7-1【媒体】子菜单,图7-2 插入媒体,4,7.2【典例剖析】一多媒体网页效果,7.2.1插入Flash动画,目前flash动画备受世人瞩目,flash动画被大量地用于网页。这种动画文件体积小,效果华美,还具有极强地的互动效果,甚至有人制作功能非常强大的游戏。,新建站点“dmt（站点名称为“多媒体）,创立网页文档“dmt.htm。然后创立一个1行2列的表格,如图7-4所示。,图7-4 一个1行2列的表格,5,插入Flash动画步骤如下：,（1）在第二个单元格内定位光标。执行【插入】-【媒体】-【Flash】命令或在“插入工具栏的“常用类别中,选择“媒体,然后单击“插入 Flash图标按扭。显示“选择文件对话框,如图7-5所示。,（2）选择Flash文件（本例为本章目录下的“banner.swf文件）。,图7-5“选择文件对话框,6,（3）单击“确定按钮,显示“对象标签辅助功能属性对话框,如图7-6所示。各个属性如下：,标题：媒体对象的标题。,快捷键：输入等效的键盘键（一个字母）。例如,您输入A作为快捷键,则使用“Ctrl+A键在浏览器中选择该对象。,Tab键索引：输入一个数字以指定该对象的Tab键顺序。,设置各个选项如图。,图7-6“对象标签辅助功能属性对话框,7,（4）单击“确定按钮,文档中效果如图7-7所示。,图7-7 文档中Flash效果,（5）选择该动画,单击Flash属性面板中的播放按钮。Flash动画就可以在文档中直接播放了,如图7-8所示。,图7-8 在文档中播放Flash,8,7.2.2设置Flash动画的属性,选择Flash动画后,显示Flash属性面板,如图7-9所示。在这里读者可以设置Flash动画的属性。,图7-9设置Flash动画属性,名称：标识影片的名称,比方命名为“banner。,宽：以像素为单位指定影片的宽度。,高：以像素为单位指定影片的高度。,文件：Flash文件的路径。单击文件夹图标可以选择一个文件,或者直接键入文件路径。,源文件：指定 Flash 源文档（后缀名为.FLA）的路径。,编辑：启动 Flash软件以编辑FLA文件。,重设大小：重新设置选定影片的大小。,9,循环：假设选中该选项时影片将连续播放；假设没有选中该选项,则影片在播放一次后即停止播放。,自动播放：假设选中该选项,则在加载页面时自动播放影片,一般要选中此项。,垂直边距：指定影片上、下空白的像素数。,水平边距：指定影片左、右空白的像素数。,品质：设置影片播放期间的质量。设置越高,影片的观看效果就越好,但速度慢。设置越低,速度快但影片的观看效果就越差,“高品质选项是注重外观而非速度。“自动低品质选项是首先注重速度,然后才是外观。“自动高品质选项是首先注重品质,然后才是速度。,比例：影片如何适合在宽度和高度文本框中设置的尺寸。默认值设置显示整个影片。有“无边框和“严格匹配两选项。,对齐：设置影片在页面上的对齐方式。,背景颜色：设置影片的背景颜色。,参数：影片的附加参数。单击“参数按钮,显示“参数对话框,如图7-10所示。在对话框中可以设置多种“参数值。,图7-10“参数对话框,10,7.2.3插入Flash文本,在Dreamweaver中可以直接制作并插入Flash文本。Flash文本是动态效果的文本。插入Flash文本的步骤如下：,（1）在上面制作的表格中第一个单元格内定位鼠标光标。,（2）在“插入栏的“常用类别中,选择“媒体,然后单击“Flash文本图标 按扭,或执行【插入】-【媒体】-【Flash文本】命令。,（3）显示“插入 Flash 文本对话框,对话框中各项属性设置如图7-11所示。,图7-11“插入 Flash 文本对话框,11,（4）单击“确定按钮,显示“对象标签辅助功能属性对话框,对话框中各项属性设置如图7-12所示。,图7-12“对象标签辅助功能属性对话框,（5）单击“确定按钮。单击属性面板中的“播放按钮,播放效果如图7-13所示,当鼠标移动到该Flash文本上时,效果如图7-14所示。,图7-13 文档中播放效果,图7-14 鼠标移动到文本效果,12,7.2.4插入Flash按钮,Dreamweaver可以快速创立动态Flash按钮,步骤如下：,（1）在文档中创立表格并定位光标,如图7-15所示。,图7-15创立表格并定位光标,（2）在“插入栏的“常用类别中,选择“媒体,然后单击“Flash 按钮图标或执行【插入】-【媒体】-【Flash 按钮】命令。显示“插入 Flash 按钮对话框,如图7-16所示。,图7-16“插入 Flash 按钮对话框,13,（3）设置完成后,单击确定按钮。文档中效果如图7-17所示。,（4）然后再连续插入几个按钮,按快捷键【F12】预览如图7-18所示。,图7-17 文档中Flash,图7-18预览Flash 按钮,14,7.2.5插入Flash Video,Flash Video现在在网站上非常流行。Flash 视频文件后缀名为“.FLV。插入Flash视频是Dreamweaver 8版本新增加的功能。插入Flash 视频步骤如下。,（1）在文档“dmt.htm右边的空白单元格内定位鼠标。,（2）在“插入栏的“常用类别中,选择“媒体,然后单击“Flash video图标或执行【插入】-【媒体】-【Flash视频】命令,显示“插入Flash视频对话框。,（3）在“插入Flash视频对话框中,从“视频类型弹出式菜单中选择“累进式下载视频或“流视频。假设选择“累进式下载视频；将 Flash 视频文件下载到站点访问者的硬盘上,然后播放。假设选择“流视频；对Flash视频内容进行流式处理,边缓冲边播放该内容。,（4）比方“视频类型选择“累进式下载视频选项：,URL：指定FLV文件的路径。,外观：指定Flash视频组件的外观。,宽度：以像素为单位指定FLV文件的宽度。,高度：以像素为单位指定FLV文件的高度。,自动播放：当网页翻开时是否播放视频。,自动重新播放：指定播放控件在视频播放完之后是否返回起始位置。,15,（5）如果必要,提示用户下载 Flash Player：在页面中插入代码,该代码将检测查看Flash视频所需的Flash Player版本,并在用户没有所需的版本时提示它们下载Flash Player的最新版本,设置各个选项如图7-19所示。,图7-19“插入Flash 视频对话框,16,（6）单击“确定按钮,插入Flash 视频操作完成,如图7-20所示。,图7-20 文档中Flash Video效果,17,