第19讲  动感页面-多媒体
1.1教学目标：
◆ 知识目标
1. 掌握多媒体内容的插入。
2. 掌握多媒体内容的编辑。
3. 掌握富具动感的spry组件的用法。
◆ 技能目标
1. 能够在设计中运用声音、动画等多媒体效果为网页制作动感效果。
2. 能够灵活运用Dreamweaver CS6新增加的功能增加网页的炫感。
◆ 品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1. 掌握多媒体内容的插入。
2. 掌握多媒体内容的编辑。
3. 掌握富具动感的spry组件的用法。
1.3 教学难点
理解多媒体内容的作用和spry组件的用法
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学
生较好的专业基础与创新创作意识。
1.7教学过程：
一、激趣导入，揭示课题
行为的设置可以使网页动起来，动的画面可以引发同学们极高的兴趣，抓住同学们感光趣的东西让他们失误，在设置动作过程中想想为什么会有千差万别的变化，不同的对象为什么设置的效果不同，设置悬念，让同学们掌握应该掌握的内容。
二、流动的媒体
⒈多媒体页面制作
多媒体页面是指在页面中添加声音、视频和Flash Movie等多媒体内容。多媒体页面为浏览者提供在网上听音乐和观看视频的功能，比只含有文字和图片的页面具有更丰富的效果。
Dreamweaver允许添加任何类型的多媒体扩展、插件程序、applet或控件，你只需在对象选项板上单击相应的按钮然后利用属性检查器进行修改即可。Dreamweaver对Macromedia公
司的两个多媒体元素Shockwave影片和Flash文件进行了专门的优化。在插入这两类对象时，Dreamweaver会自动写入必要的HTML代码以确保尽可能多的浏览器能够接受它们，并且你也可以编辑它们的属性。
Macromedia公司已经同许多前沿的多媒体公司建立了合作关系，如RealNetworks、IBM和Beatnik等。Dreamweaver全面支持这些合作伙伴的成果，通过自定义对象技术，你可以将复杂的图像、音频、演示文稿简单地插入并显示在Web页中。
本节主要介绍如何在页面中嵌入视频音频文件或Flash动画，以及如何对页面播放视频音频文件进行控制。用户可以通过下面的学习来掌握怎样制作多媒体页面。
⒉在页面中添加音频
1．链接到音频文件
链接到音频文件是将声音添加到 Web 页面的一种简单而有效的方法。这种集成声音文件的方法可以使访问者能够选择他们是否要收听该文件，并且使文件可用于最广范围的观众。若要创建指向某一音频文件的链接，请执行以下操作：
● 选择要用作指向音频文件的链接的文本或图像。
● 在属性检查器中，单击文件夹图标以浏览到音频文件，或者在“链接”文本框中键入文件的路径和名称。如图4-66所示。
2．嵌入音频
嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，可以嵌入文件。
                                        图4-66 链接音频文件
提示：将声音文件并入 Web 页面时，请仔细考虑它们在 Web 站点内的适当使用方式，以及站点访问者如何使用这些媒体资源。因为访问者有时可能不希望听到音频内容，所以总要提供关闭或减弱声音播放的控制。
若要嵌入音频文件，请执行以下操作：
在“设计”视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一。
● 在“插入”栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标。
● 如何制作网页最简单的方法视频选择“插入/媒体/插件”。如图4-67所示。
 
图4-67 嵌入音频文件
⒊添加背景音乐
在网络上，音频文件出现的比视频要早，但是同样因为文件太大无法在网络上方便的传输，但是随着宽带网技术和网络设备的高速发展，这种限制已经不再是主要问题了。在网络上可以插入的音频文件主要有：.midi、.mp3、.rm、.mid等格式的音频文件。
在页面中插入音频文件可以增强页面的动感，给人好的心情。一般主要是做页面的背景音乐。下面我们来学习如何在页面中插入背景音乐。
学习过HTML语言的都知道只要在页面中使用<bgsound>和<embed>标签可以直接在页面中加入背景音乐。我们利用MX 2004可以更加方便的实现这一功能。
1． 在Internet Explorer中加入音乐
● 打开要插入背景音乐的页面文件。
● 在“文档”工具栏上单击“显示代码视图”按钮，进入代码视图。
● 在代码视图窗口中到<body>标签，在后面加一个空格，然后输入如下代码：bgsound src="五月的雪.mp3" loop=infinite，如图4-68所示。
                                      图4-68 加入背景音乐代码
2 在其他浏览器中加入背景音乐
● 在页面编辑窗口中将鼠标定位在靠近顶部的位置。
● 在“插入”菜单中选择“媒体/插件”命令。
● 在弹出的“选择文件”对话框中选择要插入的背景音乐。
● 单击“参数”按钮。
● 在弹出的“参数”对话框中，单击加号按钮，在“参数”栏中填入hidden，在“值”中输入true。添加autostart参数，“值”设置为true；添加loop参数，“值”为infinite，如图4-69所示。
图4-69 设置参数
注意：<bgsound>标签有两个属性src和loop两个属性，分别表示播放音乐文件的地址和音乐文件播放的次数。
⒋在页面中添加视频
用户可以通过不同方式和使用不同格式将视频添加到 Web 页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。
若要在页面中包含一个可供用户下载的简短的视频剪辑，请执行以下操作：
● 将剪辑放入站点文件夹。这些剪辑通常采用 AVI 或 MPEG 文件格式。
● 链接到剪辑，或将其嵌入到页面中。
若要链接到剪辑，请输入链接文本，如“下载剪辑” ，选择文本，然后在属性检查器中单击文件夹图标。浏览到视频文件然后选择它，如图4-61、4-62所示。
      图4-61 建立链接文字                            图4-62  选择链接文件
⒌插入 Flash
可以使用 Dreamweaver 将 Flash 内容插入到页面中。要插入 SWF 文件（Flash 内容），请执行以下操作：
1. 在“文档”窗口的“设计”视图中，将插入点放置在要插入影片的地方，然后执行以下操作之一：
● 在“插入”栏的“常用”类别中，选择“媒体”，然后单击“插入 Flash”图标。
● 选择“插入/媒体/Flash”。如图4-72所示。
 
图4-72 插入flash
2. 在显示的对话框中，选择一个 Flash 文件 (.swf)。
Flash 占位符随即出现在“文档”窗口中（与 Flash 按钮和文本对象不同）。有关设置 Flash影片属性的信息，请选择该占位符，然后在属性检查器中单击“帮助”按钮。
若要在“文档”窗口中预览 Flash 影片，请执行以下操作：
1. 在“文档”窗口中，单击 Flash 占位符以选择要预览的 Flash 影片。
2. 在属性检查器中，单击“播放”按钮。单击“停止”可以结束预览。还可以通过按 “F12 键”在浏览器中预览 Flash 影片，如图4-73所示。
图4-73 选择要插入的flash文件
注意：若要预览某一页面中的所有 Flash 内容，请按下 Control+Alt+Shift+P 组合键 (Windows) 或Shift+Option+Command+P 组合键 (Macintosh)。所有 Flash 对象和影片都将被设置为“播放”。
⒍控制 Shockwave 或 Flash(Control Shockwave or Flash)
使用“控制 Shockwave 或 Flash”动作来播放、停止、倒带或转到 Macromedia Shockwave或 Macromedia Flash SWF 文件中的帧。 若要使用“控制 Shockwave 或 Flash”动作，请执行以下操作：
1．选择“插入/媒体/Shockwave”或“插入/媒体/Flash”分别插入 Shockwave或 Flash SWF 文件。
2．选择“窗口/属性”并在上面左边的文本框（在 Shockwave 或 Flash 图标旁边）中输入影片的名称。若要用“控制 Shockwave 或 Flash”动作对影片进行控制，必须对该影片进行命名。如图所示。
3．选择要用于控制 Shockwave 或 Flash SWF 文件的项。例如，如果具有用于播放影片的“播放”按钮的图像，则选择该图像。
4．打开“行为”面板（“窗口/行为”）。单击加号 (+) 按钮并从“动作”弹出菜单中选择“控制 Shockwave 或 Flash”。如图4-46所示。
5．出现一个参数对话框。如图4-47所示。从“影片”弹出菜单中选择一个影片。Dreamweaver 自动列出当前文档中所有 Shockwave 和 Flash SWF 文件的名称。选择是否播放、停止、倒带或转到影片中的帧。“播放”选项从动作发生的帧开始播放影片。
图4-46 选择“控制 Shockwave 或 Flash”动作
6．确定后检查默认事件是否是所需的事件。如果不是，请从弹出菜单中选择另一个事件。如果未列出所需的事件，则在“事件”弹出菜单的“显示事件”子菜单中更改目标浏览器。
图4-47 “控制 Shockwave 或 Flash” 对话框
⒌使用flash按钮
创建和插入 Flash 按钮
在“设计”视图或“代码”视图中工作时，可以在文档中创建和插入 Flash 按钮。在插入 Flash 按钮或文本对象前，必须保存的文档。
若要插入 Flash 按钮对象，请执行以下操作：
1. 在“文档”窗口中，将插入点放置在要插入 Flash 按钮的位置。
2. 若要打开“插入 Flash 对象”对话框，请执行以下操作之一：
● 在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash 按钮”图标。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。