《网页设计与制作》教案-第19讲 动感页面-多媒体

第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页中。

1

本节主要介绍如何在页面中嵌入视频音频文件或Flash动画，以及如何对页面播放视频音频文件进行控制。用户可以通过下面的学习来掌握怎样制作多媒体页面。

⒉在页面中添加音频

1．链接到音频文件

链接到音频文件是将声音添加到 Web 页面的一种简单而有效的方法。这种集成声音文件的方法可以使访问者能够选择他们是否要收听该文件，并且使文件可用于最广范围的观众。若要创建指向某一音频文件的链接，请执行以下操作：

 选择要用作指向音频文件的链接的文本或图像。

 在属性检查器中，单击文件夹图标以浏览到音频文件，或者在“链接”文本框中键入文件的路径和名称。如图4-66所示。

2．嵌入音频

嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。如果希望将声音用作背景音乐，或如果希望控制音量、播放器在页面上的外观或者声音文件的开始点和结束点，可以嵌入文件。

图4-66 链接音频文件

提示：将声音文件并入 Web 页面时，请仔细考虑它们在 Web 站点内的适当使用方式，以及站点访问者如何使用这些媒体资源。因为访问者有时可能不希望听到音频内容，所以总要提供关闭或减弱声音播放的控制。

若要嵌入音频文件，请执行以下操作：

在“设计”视图中，将插入点放置在要嵌入文件的地方，然后执行以下操作之一。

 在“插入”栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标。

 选择“插入/媒体/插件”。如图4-67所示。

图4-67 嵌入音频文件

⒊添加背景音乐

在网络上，音频文件出现的比视频要早，但是同样因为文件太大无法在网络上方便的传输，但是随着宽带网技术和网络设备的高速发展，这种限制已经不再是主要问题了。在网络上可以插入的音频文件主要有：.midi、.mp3、.rm、.mid等格式的音频文件。

在页面中插入音频文件可以增强页面的动感，给人好的心情。一般主要是做页面的背景音乐。下面我们来学习如何在页面中插入背景音乐。

学习过HTML语言的都知道只要在页面中使用和标签可以直接在页面

2

中加入背景音乐。我们利用MX 2004可以更加方便的实现这一功能。

1． 在Internet Explorer中加入音乐

 打开要插入背景音乐的页面文件。

 在“文档”工具栏上单击“显示代码视图”按钮，进入代码视图。

 在代码视图窗口中找到标签，在后面加一个空格，然后输入如下代码：bgsound src="五月的雪.mp3" loop=infinite，如图4-68所示。

图4-68 加入背景音乐代码

2 在其他浏览器中加入背景音乐

 在页面编辑窗口中将鼠标定位在靠近顶部的位置。

 在“插入”菜单中选择“媒体/插件”命令。

 在弹出的“选择文件”对话框中选择要插入的背景音乐。

 单击“参数”按钮。

 在弹出的“参数”对话框中，单击加号按钮，在“参数”栏中填入hidden，在“值”中输入true。添加autostart参数，“值”设置为true；添加loop参数，“值”为infinite，如图4-69所示。

图4-69 设置参数

注意：标签有两个属性src和loop两个属性，分别表示播放音乐文件的地址和音乐文件播放的次数。

⒋在页面中添加视频

用户可以通过不同方式和使用不同格式将视频添加到 Web 页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时播放它。

若要在页面中包含一个可供用户下载的简短的视频剪辑，请执行以下操作：

 将剪辑放入站点文件夹。这些剪辑通常采用 AVI 或 MPEG 文件格式。

 链接到剪辑，或将其嵌入到页面中。

若要链接到剪辑，请输入链接文本，如“下载剪辑” ，选择文本，然后在属性检查器中单击文件夹图标。浏览到视频文件然后选择它，如图4-61、4-62所示。

3

图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 文件。

4

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 按钮”图标。

 选择“插入/媒体/Flash 按钮”。

即会出现“插入 Flash 按钮”对话框，如图4-70所示。

5

图4-70 插入flash按钮

3. 完成“插入 Flash 按钮”对话框，然后单击“应用”或“确定”，将 Flash 按钮插入“文档”窗口中。

提示：若要在“设计”视图中预览该按钮，请单击“应用” 。该对话框保持打开状态，并且可以在文档中预览该按钮。

修改 Flash 按钮对象

用户可以修改 Flash 按钮对象的属性和内容。若要修改 Flash 按钮对象，请执行以下操作：

1. 在“文档”窗口中，单击 Flash 按钮对象以选择它。

2. 如果属性检查器尚未打开，则打开属性检查器。

属性检查器显示 Flash 按钮属性。可以使用属性检查器修改按钮的 HTML 属性，例如宽度、高度和背景颜色。

在文档中播放 Flash 按钮对象

可以在 Dreamweaver “文档”窗口中预览 Flash 按钮。若要在“文档”窗口中查看 Flash 按钮对象播放，请执行以下操作：

1. 在处于“设计”视图中时，在文档中选择 Flash 按钮对象。

2. 在属性检查器中单击“播放”。

3. 单击“停止”可以结束预览。

注意：在 Flash 按钮对象正在播放时不能编辑它。在浏览器中预览的文档以查看 Flash 按钮的准确外观也是个不错的主意。

6．插入 Flash 文本对象

Flash 文本对象允许创建和插入只包含文本的 Flash 影片。这可以使用自己选择的设计器字体和文本创建较小的矢量图形影片。要插入 Flash 文本对象，请执行以下操作：

1.在“文档”窗口中，将插入点放置在要插入 Flash 文本的地方。

2.要打开“插入 Flash 文本”对话框，请执行以下操作之一：

 在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash 文本”图标。

 选择“插入/媒体/Flash 文本”。

即会出现“插入 Flash 文本”对话框，如图4-71所示。

图4-71 插入flash文本

6

插入 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 对象和影片都将被设置为“播放”。

7．下载和安装 Flash 元素

要在 Web 页中使用 Flash 元素，必须先使用功能扩展管理器将这些元素添加到

Dreamweaver中。功能扩展管理器是一个独立的应用程序，可用于安装和管理 Macromedia 应用程序中的功能扩展。通过从 Dreamweaver 中选择“命令/管理扩展功能”启动功能扩展管理器。

要为 Dreamweaver 查找最新的 Flash 元素，请使用 Macromedia Exchange Web 站点，位于 /go/dreamweaver_exchange_cn/。可以在此处登录并下载 Flash元素和其它 Dreamweaver 功能扩展（其中的许多功能扩展是免费的），还可以加入讨论组、查看

7

用户的评论以及安装和使用功能扩展管理器。必须先安装功能扩展管理器，然后再安装新的Flash 元素或其它 Dreamweaver 功能扩展。

插入 Flash 元素

使用 Dreamweaver，可以在文档中插入 Flash 元素。Flash 元素使可以快速、方便地使用预置元素构建丰富的 Internet 应用程序。要插入 Flash 元素，请执行以下操作：

1. 在“文档”窗口中，将插入点放置在要插入 Flash 元素的地方，然后执行以下操作之一：

 在“插入”栏的“Flash 元素”类别中，单击要插入的 Flash 元素的图标。

 选择“插入/Flash 元素/Flash 元素名称”。出现“保存 Flash 元素”对话框。

2. 为 Flash 元素输入一个文件名，然后将它保存到站点中的适当位置。

3. 单击“确定”。Flash 元素占位符即出现在文档中。可以使用标签和属性检查器来修改

Flash 元素的属性。

14. 选择“文件/在浏览器中预览”预览 Flash 元素。

编辑 Flash 元素属性

用户可以使用属性和标签检查器来编辑 Flash 元素属性。要编辑 Flash 元素的属性，请执行以下操作：

1. 在“文档”窗口中，执行以下操作之一：

 在“设计”视图中，选择该 Flash 元素。

 在“代码”视图中，单击 Flash 组件名称或其内容中的任意位置。

2. 如果标签检查器尚未显示，请打开标签检查器（“窗口/标签检查器”）。

3. 使用标签检查器和属性检查器编辑 Flash 元素属性。

15. 按 “Enter 键 ”(Windows) 或 “Return 键” (Macintosh)，或者单击标签检查器中的其它位置，以更新文档中的标签。

8.插入ockwave影片

Shockwave是Web上用于交互式多媒体的一种标准，并且是一种压缩格式，使得在Director中创建的媒体文件能够被大多数常用浏览器快速下载和播放。 Shockwave影片文件的扩展名是“.dcr”、“.dir”、“.dxr”。它提供了强大的、可扩展的脚本引擎，能通过浏览器观看交互性的网页，例如，游戏，商业展示，娱乐及广告等。它提供了强大的、可扩展的脚本引擎，能通过浏览器观看交互性的网页，例如，游戏，商业展示，娱乐及广告等。

插入Shockwave影片

单击菜单栏中的“插入记录/媒体/Shockwave”命令或单击“插入”面板中的“常用”选项卡中的媒体按钮下的按钮，弹出“选择文件”对话框。选择站点D:MywebsiteN5flash目录下的文件后，单击“确定”按钮，就把Shockwave影片插入到文档中。

三、spry构件

Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。有了Spry，就可以使用标准HTML、CSS和极少量的JavaScrip将XML数据合并到HTML文档中，可视化创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。

每个Spry构件都与唯一的CSS和JavaScript文件相关联。CSS文件中包含设置构件样式所需的全部信息，而JavaScript文件则赋予构件功能。当插入构件时，Dreamweaver会自动将这些文件链接到当前页面，并以该构件命名，以便构件中包含该页面的功能和样式（例如，与折叠构件关联的文件称为和）。当您在已保存的页面中插入构件时，Dreamweaver会在您的站点根目录中创建一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。

8

Spry构件是一个页面元素，通过启用用户交互来提供更丰富的用户体验。有了Spry，就可以使用标准HTML、CSS和极少量的JavaScrip将XML数据合并到HTML文档中，可视化创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。

每个Spry构件都与唯一的CSS和JavaScript文件相关联。CSS文件中包含设置构件样式所需的全部信息，而JavaScript文件则赋予构件功能。当插入构件时，Dreamweaver会自动将这些文件链接到当前页面，并以该构件命名，以便构件中包含该页面的功能和样式（例如，与折叠构件关联的文件称为和）。当您在已保存的页面中插入构件时，Dreamweaver会在您的站点根目录中创建一个SpryAssets目录，并将相应的JavaScript和CSS文件保存到其中。

Spry菜单是一组可导航的菜单按钮，当你将鼠标指针其中的某个按钮时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使你无须深入浏览站点即可了解站点上提供的内容。Spry菜单的HTML中包含一个外部ul标签，该标签中对于每个顶级菜单项都包含一个li标签，而每个li项又包含用来为每个菜单项定义子菜单的ul和li标签，子菜单中同样可以包含子菜单。顶级菜单和子菜单包含任意多个子菜单项。

单击菜单栏中的“插入记录/Spry/Spry菜单栏”命令，或单击插入栏的Spry菜单栏构件按钮。在如图所示的对话框，根据页面布局的需要来决定是使用水平Spry菜单栏还是垂直Spry菜单栏。

Spry选项卡面板是一组用来将内容存储到紧凑空间的面板。访问者可以通过单击要访问的面板上的选项卡，隐藏或显示存储在对应选项卡式面板中的内容。

Spry选项卡面板的HTML代码中包含一个含有所有面板的外部Div标签、一个标签列表、一个用来包含内容面板的Div和各面板对应的Div，在文档头中和选项卡式面板构件的HTML标签之后还包括脚本标签 。

1. Spry选项卡面板

单击菜单栏中的“插入记录/Spry/Spry选项卡面板”命令，或单击插入栏的Spry选项卡面板构件按钮，就把Spry选项卡面板插入到文档中。把鼠标移动刚插入的面板上，单击上方弹出的蓝底字“Spry选项卡面板”，选中该面板并可以在属性面板修改其状态值，如图所示。

2. Spry折叠式构件

Spry折叠式是一组将大量内容存储在一个紧凑空间的可折叠式面板。访问者可以通过单击网页上的选项卡来隐藏或显示存储在折叠构件中的内容。折叠构件由任意数量的面板组成，当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩，每次只能有一个内容面板处于打开且可见状态。各面板标签由一个标题Div和内容Div组成，并约束于折叠构件这个外部Div标签之中。

3. Spry折叠式构件

单击菜单栏中的“插入记录/Spry/Spry折叠式”命令，或单击插入栏的Spry折叠式按钮，就把Spry折叠式插入到文档中。把鼠标移动刚插入的面板上，单击上方弹出的蓝底字“Spry折叠式”，选中该面板并可以在属性面板修改其状态值，如图所示。

Spry可折叠面板是一个可将内容存储到紧凑空间的面板。用户单击构件的选项卡隐藏或显示存储在可折叠面板中的内容。可折叠面板构件的 HTML 中包含一个外部 div 标签，其中包含内容 div 标签和选项卡容器 div 标签，在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。为了区分Spry折叠式和Spry可折叠面板的不同效果，在此例中采用相同面板内容 。

单击菜单栏中的“插入记录/Spry/Spry可折叠面板”命令，或单击插入栏的Spry可折叠

9

面板按钮，就把Spry可折叠面板插入到文档中。把鼠标移动刚插入的面板上，单击上方弹出的蓝底字“Spry可折叠面板”，选中该面板并可以在属性面板修改其状态值， 如图所示。

1.8归纳总结：

本讲介绍了多媒体内容的插入，包括：视频、音频、flash按钮、flash文本等，希望今后能用多媒体内容使页面具有动感。

1.9课后作业题：

1. 在页面能插入的视频文件有哪些?请说4种以上格式的视频文件。

2. 请制作一个包含有文字、图像、flash动画、音频等内容的多媒体页面。

3. 先处理多幅图片，然后利用行为将他们转化成页面上的导航条图像。要求导航条清晰明朗，有一定的行为动作，比如鼠标移到图像上面或者鼠标单击时候导航条图像的变化。

10