《Dreamweaver 网页设计》第7章 应用多媒体元素

Dreamweaver网页设计 第7章应用多媒体元素

【学习概述】 在网页中应用多媒体效果当前十分普遍, 例如大量使用 Flash动画、视频、声音 Java Applet等使网页动感十足,变化多端。 本章内容包括插入Fash元素、插入背景音 乐、插入视频、插入图像查看器等内容 本章的重点是插入Fash元素,难点是插入 图像查看器

在网页中应用多媒体效果当前十分普遍， 例如大量使用Flash动画、视频、声音、 Java Applet等使网页动感十足，变化多端。 本章内容包括插入Flash元素、插入背景音 乐、插入视频、插入图像查看器等内容。 本章的重点是插入Flash元素，难点是插入 图像查看器

7.1【课堂讲解】多媒体基础 7.1.1什么是Fash F|ash是由 macromedia公司推出的交互式矢量图和Web动画的标准 网页设计者使用Fash创作出既漂亮又可改变尺寸的导航界面以及其 他奇特的效果。并且它是矢量的,所以即使放大也不会出现变形和模 糊。这种动画文件体积小,效果华丽,还具有极强地的互动效果,甚 至有人利用这种技术制作功能非常强大的游戏。 Flash的源文件扩展 名为“fa”,生成的用于网络上传输的 Flash格式为“SW"。 7.1.2视频格式 视频格式有很多种,但是在网络上应用的视频格式多为:av、Wmv asf、mpeg、m、rmb、mov、F等。 7.1.3音频格式 在网络上应用的音频格式多为:wav、mp3、ai、midi、ra、ram、rpm

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 等

71.4插入多媒体 要在网页中添加以上多媒体文件,可以执行【插入】->【媒体】 下的子菜单命令如图7-1所示或在“插入”工具栏的“常用”类 别中,选择“媒体”,然后单击所需的媒体图标按钮如图7-2所 小 F1ash①E CtrltAlttF Onash 图像查看器〔) ash按钮 nash文本①) Fah文本 钮①B) F Fl FlashPaper al Flash Video F1ash视频 Shockwave (s) CtrltAlt+D 明参数 Activex X) ActiveX 插件Q) 非插件 图7-1【媒体】子菜单 图7-2插入媒体

7.1.4 插入多媒体 要在网页中添加以上多媒体文件，可以执行【插入】->【媒体】 下的子菜单命令如图7-1所示或在“插入”工具栏的“常用”类 别中，选择“媒体” ，然后单击所需的媒体图标按钮如图7-2所 示。 图 7-1【媒体】子菜单 图7-2 插入媒体

7.2【典例剖析】一多媒体网页效果 72.1插入FaSh动画 目前fash动画备受世人瞩目,fash动画被大量地用于网页。这种动画文 件体积小,效果华丽,还具有极强地的互动效果,甚至有人制作功能 非常强大的游戏。 新建站点“dmt”(站点名称为“多媒体”),创建网页文档“ dmt. htm” 然后创建一个1行2列的表格,如图7-4所示。 图74一个1行2列的表格

7.2.1 插入Flash动画 目前flash动画备受世人瞩目，flash动画被大量地用于网页。这种动画文 件体积小，效果华丽，还具有极强地的互动效果，甚至有人制作功能 非常强大的游戏。 新建站点“dmt”（站点名称为“多媒体”），创建网页文档“dmt.htm”。 然后创建一个1行2列的表格，如图7-4所示。 图7-4 一个1行2列的表格

插入Fash动画步骤如下: (1)在第二个单元格内定位光标。执行【插入】->【媒体】->【 Flash】 命令或在“插入”工具栏的“常用”类别中,选择“媒体”,然后单 击“插入 Flash”图标按扭。显示“选择文件”对话框,如图7-5所示。 (2)选择Fash文件(本例为本章目录下的“ banner,sw"文件) 选取文件名自 站卓和服务器 查找范围): chapter0 文件名0: banner,sf 文件类型():所有文件( UE:1//otst8:参数 相对于:文档tl 在站点定义中更改歌认的链接相对于 选择的文件不在站点根目录下 图7-5“选择文件”对话框

插入Flash动画步骤如下： （1）在第二个单元格内定位光标。执行【插入】->【媒体】->【Flash】 命令或在“插入”工具栏的“常用”类别中，选择“媒体” ，然后单 击“插入 Flash”图标按扭。显示“选择文件”对话框，如图7-5所示。 （2）选择Flash文件（本例为本章目录下的“banner.swf”文件）。 图7-5 “选择文件”对话框

(3)单击“确定”按钮,显示“对象标签辅助功能属性”对话框,如图 76所示。各个属性如下: 标题:媒体对象的标题 快捷键:输入等效的键盘键(一个字母)。例如,您输入A作为快捷 键,则使用“Ct+A'键在浏览器中选择该对象。 Tab键索引:输入一个数字以指定该对象的Tab键顺序。 设置各个选项如图 对象标签辅助功能属性 标题: banner 确定 访问键 Tab键索引 取消 帮助 在插入对象时不想输入此信息,请更改 助功能”首选参数。 图7-6“对象标签辅助功能属性”对话框

（3）单击“确定”按钮，显示“对象标签辅助功能属性”对话框，如图 7-6所示。各个属性如下： 标题：媒体对象的标题。 快捷键：输入等效的键盘键（一个字母）。例如，您输入A作为快捷 键，则使用“Ctrl+A”键在浏览器中选择该对象。 Tab键索引：输入一个数字以指定该对象的Tab键顺序。 设置各个选项如图。 图7-6 “对象标签辅助功能属性”对话框

(4)单击“确定”按钮,文档中效果如图7-7所示 809(600) 图7-7文档中Fash效果 (5)选择该动画,单击 Flash属性面板中的播放按钮。 Flash 动画就可以在文档中直接播放了,如图7-8所示。 把于教做 图7-8在文档中播放Fash

（4）单击“确定”按钮，文档中效果如图7-7所示。 图7-7 文档中Flash效果 （5）选择该动画，单击Flash属性面板中的播放按钮。Flash 动画就可以在文档中直接播放了，如图7-8所示。 图7-8 在文档中播放Flash

72.2设置Fash动画的属性 选择Fash动画后,显示 Flash属性面板,如图7-9所示。在这里读者可以 设置 Flash动画的属性 w屈性 Flssh TK 宽48文件mswf ④类)无 高60源文件□ @重改大们 回环 垂直边距品质高品员 对齐默认值M播放 回自动播放水平边距比例默认(全部显背景跳色厂 图7-9设置Fash动画属性 名称:标识影片的名称,比如命名为“ banner"。 宽:以像素为单位指定影片的宽度。 高:以像素为单位指定影片的高度 文件:Fash文件的路径。单击文件夹图标可以选择一个文件, 或者直接键入文件路径。 源文件:指定Fash源文档(后缀名为FLA)的路径。 编辑:启动 Flash软件以编辑FLA文件 重设大小:重新设置选定影片的大小

7.2.2 设置Flash动画的属性 选择Flash动画后，显示Flash属性面板，如图7-9所示。在这里读者可以 设置Flash动画的属性。 图7-9设置Flash动画属性 名称：标识影片的名称，比如命名为“banner”。 宽：以像素为单位指定影片的宽度。 高：以像素为单位指定影片的高度。 文件： Flash文件的路径。单击文件夹图标可以选择一个文件， 或者直接键入文件路径。 源文件：指定 Flash 源文档（后缀名为.FLA）的路径。 编辑：启动 Flash软件以编辑FLA文件。 重设大小：重新设置选定影片的大小

循环:若选中该选项时影片将连续播放;若没有选中该选项,则影片 在播放一次后即停止播放。 自动播放:若选中该选项,则在加载页面时自动播放影片,一般要选 中此项。 垂直边距:指定影片上、下空白的像素数。 水平边距:指定影片左、右空白的像素数。 徂速度慢。设置越低,速度快影片的观看效巢就越差,“喬品” 选项是注重外观而非速度。“自动低品质”选项是首先注重速度,然 后才是外观。“自动高品质”选项是首先注重品质,然后才是速度 比例:影片如何适合在宽度和高度文本框中设置的尺寸。默认值设置 显示整个影片。有“无边框”和“严格匹配”两选项 对齐:设置影片在页面上的对齐方式 背景颜色:设置影片的背景颜色。 参数:影片的附加参数。单击“参数”按钮,显示“参数”对话框, 如图7-10所示。在对话框中可以设置多种“参数一值” 取消 图7-10“参数”对话框

• 循环：若选中该选项时影片将连续播放；若没有选中该选项，则影片 在播放一次后即停止播放。 • 自动播放：若选中该选项，则在加载页面时自动播放影片，一般要选 中此项。 • 垂直边距：指定影片上、下空白的像素数。 • 水平边距：指定影片左、右空白的像素数。 • 品质：设置影片播放期间的质量。设置越高，影片的观看效果就越好， 但速度慢。设置越低，速度快但影片的观看效果就越差， “高品质” 选项是注重外观而非速度。“自动低品质”选项是首先注重速度，然 后才是外观。“自动高品质”选项是首先注重品质，然后才是速度。 • 比例：影片如何适合在宽度和高度文本框中设置的尺寸。默认值设置 显示整个影片。有“无边框”和“严格匹配”两选项。 • 对齐：设置影片在页面上的对齐方式。 • 背景颜色：设置影片的背景颜色。 • 参数：影片的附加参数。单击“参数”按钮，显示“参数”对话框， 如图7-10所示。在对话框中可以设置多种“参数—值”。 图7-10 “参数”对话框