第3章 插入多媒体元素和超链——(网页设计与制作共11章)

3.1.2 插入视频和音频
使用插件可以在网页中添加视频文件和音频文件。将鼠标放 置在要插入内容的位置，单击“插入”面板“媒体”标签中 的“插件”按钮，其他操作与插入Flash元素类似。进入 “代码”视图可以发现，使用“插件”方式添加的多媒体元 素，Dreamweaver为其添加了<embed>标签，因此直接修 改代码或使用“标签编辑器”可对用“插件”方式添加的多 媒体元素进行更精确控制。 下面介绍在网页中插入视频和音频的具体方法，操作步骤如 下： 1）打开上面保存过的“3-1.html”文件，将表格第3行各单元 格合并为一个单元格，然后插入已经准备好的图片，如图310所示。
3）选中第一行的4个单元格，单击鼠标右键，在打开的快捷式 菜单中选择“表格→合并单元格”命名，将选中的单元格合并 为一个单元格。
4）将光标置于合并的单元格中，选择“插入→图像”命 令，在第一行中插入已经准备好的图像，如图3-2所示。
图3-2
插入的图像
5）将光标置于第2行第一列的单元格中，单击“插入”面 板“常用”标签中的媒体按钮 ，打开如图3-3所示 菜单。选择SWF后，打开如图3-4所示的“选择文件”对 话框，从中选择已经准备好的SWF文件。
背景颜色：指定影片区域的背景颜色。在不播放影片时（在 加载时和在播放后）也显示此颜色。 类：用于对影片应用CSS 类。 循环：使影片连续播放。如果没有选择循环，则影片将播放 一次后停止。 自动播放：在加载页面时自动播放影片。 垂直边距和水平边距：指定影片上、下、左、右空白的像素 数。 品质：在影片播放期间控制抗失真。默认为高品质，该设置 可改善影片的外观。但高品质设置的影片需要较快的处理器 才能在屏幕上正确呈现。 比例：确定影片如何适合在宽、高度文本框中设置的尺寸。 默认为显示整个影片。 对齐：确定影片在页面上的对齐方式。
图3-12
插入的视频文件
5）插入音频文件。将光标置于表格第4行第3列中，单击 “插入→媒体→插件”命令，或者单击“插入”面板“常 用”标签中的“插件”按钮，将弹出“选择文件”对话框， 从中选择要插入的音频文件，单击【确定】按钮，将音频 文件添加到页面中。
提示：网页支持常见的MIDI、MP3、RM、WMA格式音频文件，对 MIDI、MP3、WMA格式的音频文件，浏览器会调用Windows Media Play播放器来播放音频文件，对RM格式的音频文件，浏览器会调用 Real Play播放器，如果未安装Real Play播放器，该音频将不能播放。
图3-7 Flash对象“属性”面板
Flash对象“属性”面板中各项含义如下： ID：为SWF 文件指定唯一ID标识号。在属性检查器最左侧的 未标记文本框中输入ID。从 Dreamweaver CS4 起，需要唯一 ID。 宽、高：插入的文件会以默认宽高显示，可以用鼠标或手工精 确输入宽高值。 文件：指定SWF文件或Shockwave文件的源路径。单击文件 夹图标可浏览到某一文件，或者直接键入路径。 源文件和编辑：如果计算机上同时安装了Flash， Dreamweaver可直接调用Flash对指定的源文件（FLA 文件） 进行编辑。如果计算机上没有安装Flash，“编辑”按钮为灰 色，不可用。
限制高宽比：保持 视频组件的宽度和 高度之间的比例不 变。为默认设置。 自动播放：指定在 Web页面打开时是 否播放视频。 自动重新播放：指 定播放控件在视频 播放完之后是否返 回起始位置。
图3-11
“插入FLV”对话框
3）在“插FLV”对话框中，单击“URL”后面的【浏览】按 钮，选择以FLV为扩展名的Flash视频文件。分别设置“宽 度”和“高度”值，来确定Flash视频文件播放时显示的 大小，勾选“自动播放”，根据需要还可以设置其他的参 数，设置完毕单击【确定】按钮。 4）插入其他视频文件。将光标置于表格第4行第2列中， 单击“插入→媒体→插件”命令，或者单击“插入”面板 “常用”标签中的“插件”按钮，在打开的“选择文件” 对话框中选择准备好的视频文件，然后单击【确定】按钮。 插入的视频占位符如图3-12所示。选中插入的视频占位符， 根据需要在其“属性”面板中设置其大小等属性。
图3-10
插入的图片
2）插入FLV视频。将光标置于表格的第4行第1列，选择 “插入→媒体→FLV”命令，或者单击“插入”面板“常用” 标签中的“FLV”按钮，打开如图3-11所示的“插入FLV”对 话框。 “插入FLV”对话框中的各选项含义如下：
视频类型：累进式下载方式是将FLV文件下载到站点访问者 的硬盘上，然后进行播放。与传统的“下载并播放”视频传 送方法不同的是，累进式下载允许在下载完成之前就开始播 放视频文件。流视频方式是对视频内容进行流式处理，并在 一段可确保流畅播放的很短的缓冲时间后在网页上播放该内 容。若要在网页上启用流视频，必须具有访问Adobe Flash Media Server的权限。 URL：指定FLV文件的路径或服务器地址。 外观：指定视频组件的外观，即视频播放时将要显示的外观 及播放控件类型。 宽度和高度：以像素为单位指定 FLV 文件的宽、高值。若 要让Dreamweaver确定 FLV文件的准确宽度，可单击“检 测大小”按钮。如果 Dreamweaver 无法确定宽度，必须键 入宽、高值，此时要注意宽度不能小于“外观”中设置的最 小宽度。
图3-14
插入Applet
3）保存网页文件。按下〈F12〉键预览网页效果，如图315所示。
图3-15
插入的各种多媒体元素效果图
分别合并第5行、第6行各单元格，在第5行插入已经准备 好的图片，在第6行输入版权信息。至此，多媒体网页制 作完成。 保存网页文件。按下〈F12〉键预览网页效果，网页最终 效果如图3-1所示。
图3-3插入媒体菜单栏
图3-4 “选择文件”对话框
6）单击【确定】按钮，打开“对象标签辅助功能属性” 对话框，如图3-5所示。在“对象标签辅助功能属性”对 话框中设置所插入媒体的标题、访问快捷键和Tab键顺序。 插入的SWF文件在网页中显示为Flash占位符，如图3-6所 示。
图3-5 “对象标签辅助功能属性”对话框
3.2 案例2 为网页添加超链接
3.2.1超链接概述 3.2.2创建超链接 3.2.3创建E-mail链接 3.2.4创建锚记链接 3.2.5 创建图像链接 3.2.6创建图像热点链接
3.2.1
超链接概述
使用浏览器浏览网页时，当移动鼠标到页面的某些位置，鼠 标指针会变成一只“手形”，表明该位置是一个超链接。在 超链接处单击鼠标左键，可以直接跳转到与这个超链接相连 的网页或Internet网站上去，从而在不输入URL地址的情况 下访问相关网页。通过超链接，使网站内的网页串联形成一 个有机整体；也是通过超链接，在网站之间架起沟通的桥梁， 使整个互联网形成一个有机整体。 1．URL概述 每个网页都有独一无二的地址，通常被称为URL（Uniform Resource Locator，统一资源定位符）。其一般格式如下： protocol :// hostname[:port] / path / [;parameters][?query] 例如：/view/1496.htm
6）选中插入的音频文件占位符，切换到“代码”视图， 在对应的<embed>标签上单击右键，选中“编辑标签”选 项，打开“标签编辑器”对话框，如图3-13所示。可以对 <embed>标签进行再次设置。
图3-13
<embed>标签编辑器
3.1.3 插入其他多媒体元素
1．插入JavaApplet Java Applet是在Java基础上演变而成的小应用程序，它可 以嵌入到网页中来执行一定的任务，具有跨平台特性，运行 Java Applet的前提是浏览器中安装了JVM虚拟机。 具体操作步骤： 1）将光标放置在表格的第4行第4列中，单击“插入”面板 “媒体”标签中的“APPLET”按钮，弹出“选择文件”对话 框，从中选择已经准备好的Applet文件，单击【确定】按钮， 将Applet文件插入到页面中。 2）选中插入的Applet文件占位符，在其“属性”面板中进 行适当的属性设置，效果如图3-14所示。
第3章 插入多媒体元素和超链接
3.1 3.2 3.3 3.4 案例1 制作多媒体网页——我的乐园 案例2 为网页添加超链接 学习任务：管理链接 实训
3.1
案例1 制作多媒体网页——我的 乐园
3.1.1插入Flash元素 3.1.2插入视频和音频 3.1.3插入其他多媒体元素
3.1.1
插入Flash元素
Wmode：设置Flash背景是否透明。使用透明Flash与背景 图片配合，会达到意想不到的动画效果。 播放：在“文档”窗口中播放影片。 参数：打开一个对话框，可在其中输入传递给影片的附加 参数。 8）根据需要适当设置Flash动画属性，设置完毕，单击面 板中的按钮预览动画效果。 9）选中表格第二行后面的三个单元格，单击鼠标右键，在 打开的快捷式菜单中选择“表格→合并单元格”命令，将 选中的单元格合并为一个单元格。然后，在合并后的单元 格中输入一些文本，根据需要对其进行属性设置。 10）保存含有Flash元素的网页时，Dreamweaver会弹出 “复制相关文件”对话框，如图3-8所示。若想在网页中正 常显示Flash，需要把列表中的JavaScript文件复制到本地 站点，当把站点上传时，这些文件也必须同时上传到服务 器上。单击【确定】按钮，Dreamweaver会在站点根目录 下自动创建“Scripts”文件夹，并创建相应的JavaScript文 件。
Flash动画采用的是矢量技术，它以文件小巧、速度快、特效 精美、支持流媒体和交互功能强大的特点成为网页中最流行的 动画格式，广泛地应用于网页中。 1）新建一个网页文件，并以“3-1.html”为文件名进行保存。 2）单击“插入→表格”菜单命令，打开“表格”对话框，创 建一个6行4列的表格。
提示：表格是Dreamweaver中最常用的页面布局工具，它不但可以精确 定位网页在浏览器中的显示位置，而且还可以控制网页元素在页面中的精 确布局。本案例只要求用户根据操作步骤创建并操作表格，有关表格的应 用方法将在第5章进行详细介绍。