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

图3-3插入媒体菜单栏
图3-4 “选择文件”对话框
6）单击【确定】按钮，打开“对象标签辅助功能属性” 对话框，如图3-5所示。在“对象标签辅助功能属性”对 话框中设置所插入媒体的标题、访问快捷键和Tab键顺序。 插入的SWF文件在网页中显示为Flash占位符，如图3-6所 示。
图3-5 “对象标签辅助功能属性”对话框
3）选中第一行的4个单元格，单击鼠标右键，在打开的快捷式 菜单中选择“表格→合并单元格”命名，将选中的单元格合并 为一个单元格。
4）将光标置于合并的单元格中，选择“插入→图像”命 令，在第一行中插入已经准备好的图像，如图3-2所示。
图3-2
插入的图像
5）将光标置于第2行第一列的单元格中，单击“插入”面 板“常用”标签中的媒体按钮 ，打开如图3-3所示 菜单。选择SWF后，打开如图3-4所示的“选择文件”对 话框，从中选择已经准备好的SWF文件。
11）按下〈F12〉进行预览。效果如图3-9所示。
图3-8
“复制相关文件”对话框
图3-9
预览Flash动画效果
提示：在Dreamweaver CS4中可以插入FlashPaper。FlashPaper是 原Macromedia公司出的一款文件转换软件，允许用户把任何可打印文 档直接转换成Flash文档或PDF文档，并且保持原来文件的排版格式。 具体方法：单击“插入”面板“媒体”标签中的FlashPaper按钮，即 可插入FlashPaper文件。请用户自行练习。
Baidu Nhomakorabea 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] 例如：http://www.baidu.com/view/1496.htm
图3-7 Flash对象“属性”面板
Flash对象“属性”面板中各项含义如下： ID：为SWF 文件指定唯一ID标识号。在属性检查器最左侧的 未标记文本框中输入ID。从 Dreamweaver CS4 起，需要唯一 ID。 宽、高：插入的文件会以默认宽高显示，可以用鼠标或手工精 确输入宽高值。 文件：指定SWF文件或Shockwave文件的源路径。单击文件 夹图标可浏览到某一文件，或者直接键入路径。 源文件和编辑：如果计算机上同时安装了Flash， Dreamweaver可直接调用Flash对指定的源文件（FLA 文件） 进行编辑。如果计算机上没有安装Flash，“编辑”按钮为灰 色，不可用。
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-6 插入的Flash占位符
提示：在Dreamweaver中只支持.swf格式的Flash动画，该格式的 Dreamweaver .swf Flash Flash动画是Flash源文件（.fla格式）的压缩版本，已经进行了优化，便 于在Web上查看。
7）选中插入的Flash动画对象，选择“窗口→属性”菜单命 令打开“属性”面板，如图3-7所示。
图3-10
插入的图片
2）插入FLV视频。将光标置于表格的第4行第1列，选择 “插入→媒体→FLV”命令，或者单击“插入”面板“常用” 标签中的“FLV”按钮，打开如图3-11所示的“插入FLV”对 话框。 “插入FLV”对话框中的各选项含义如下：
视频类型：累进式下载方式是将FLV文件下载到站点访问者 的硬盘上，然后进行播放。与传统的“下载并播放”视频传 送方法不同的是，累进式下载允许在下载完成之前就开始播 放视频文件。流视频方式是对视频内容进行流式处理，并在 一段可确保流畅播放的很短的缓冲时间后在网页上播放该内 容。若要在网页上启用流视频，必须具有访问Adobe Flash Media Server的权限。 URL：指定FLV文件的路径或服务器地址。 外观：指定视频组件的外观，即视频播放时将要显示的外观 及播放控件类型。 宽度和高度：以像素为单位指定 FLV 文件的宽、高值。若 要让Dreamweaver确定 FLV文件的准确宽度，可单击“检 测大小”按钮。如果 Dreamweaver 无法确定宽度，必须键 入宽、高值，此时要注意宽度不能小于“外观”中设置的最 小宽度。
3.1.2 插入视频和音频
使用插件可以在网页中添加视频文件和音频文件。将鼠标放 置在要插入内容的位置，单击“插入”面板“媒体”标签中 的“插件”按钮，其他操作与插入Flash元素类似。进入 “代码”视图可以发现，使用“插件”方式添加的多媒体元 素，Dreamweaver为其添加了<embed>标签，因此直接修 改代码或使用“标签编辑器”可对用“插件”方式添加的多 媒体元素进行更精确控制。 下面介绍在网页中插入视频和音频的具体方法，操作步骤如 下： 1）打开上面保存过的“3-1.html”文件，将表格第3行各单元 格合并为一个单元格，然后插入已经准备好的图片，如图310所示。
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章进行详细介绍。
图3-14
插入Applet
3）保存网页文件。按下〈F12〉键预览网页效果，如图315所示。
图3-15
插入的各种多媒体元素效果图
分别合并第5行、第6行各单元格，在第5行插入已经准备 好的图片，在第6行输入版权信息。至此，多媒体网页制 作完成。 保存网页文件。按下〈F12〉键预览网页效果，网页最终 效果如图3-1所示。
第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元素
2．插入Shockwave影片 Shockwave是用于在网页中播放的由Adobe公司的Director 软件创建的多媒体电影。Shockwave是一种网上媒体交互压 缩格式的标准，用该标准生成的压缩文件可在Internet上快 速下载。Shockwave是一种流式播放技术而不是一种文件格 式，使用这种技术在不同的软件上可以制作出符合 Shockwave标准的文件，如swf和dcr文件。目前主流浏览器 都支持Shockwave影片。插入Shockwave影片的方式与插入 FLV文件类似。 3．插入ActiveX 控件 ActiveX 控件（以前称作 OLE 控件）的功能类似于浏览器插 件的可复用组件，是宽松定义的、基于COM的技术组合。 ActiveX 控件在 Windows 系统上的 Internet Explorer 中运行， 但不能在 Macintosh 系统上或 Netscape Navigator 中运行。
图3-12
插入的视频文件
5）插入音频文件。将光标置于表格第4行第3列中，单击 “插入→媒体→插件”命令，或者单击“插入”面板“常 用”标签中的“插件”按钮，将弹出“选择文件”对话框， 从中选择要插入的音频文件，单击【确定】按钮，将音频 文件添加到页面中。
提示：网页支持常见的MIDI、MP3、RM、WMA格式音频文件，对 MIDI、MP3、WMA格式的音频文件，浏览器会调用Windows Media Play播放器来播放音频文件，对RM格式的音频文件，浏览器会调用 Real Play播放器，如果未安装Real Play播放器，该音频将不能播放。
限制高宽比：保持 视频组件的宽度和 高度之间的比例不 变。为默认设置。 自动播放：指定在 Web页面打开时是 否播放视频。 自动重新播放：指 定播放控件在视频 播放完之后是否返 回起始位置。
图3-11
“插入FLV”对话框
3）在“插FLV”对话框中，单击“URL”后面的【浏览】按 钮，选择以FLV为扩展名的Flash视频文件。分别设置“宽 度”和“高度”值，来确定Flash视频文件播放时显示的 大小，勾选“自动播放”，根据需要还可以设置其他的参 数，设置完毕单击【确定】按钮。 4）插入其他视频文件。将光标置于表格第4行第2列中， 单击“插入→媒体→插件”命令，或者单击“插入”面板 “常用”标签中的“插件”按钮，在打开的“选择文件” 对话框中选择准备好的视频文件，然后单击【确定】按钮。 插入的视频占位符如图3-12所示。选中插入的视频占位符， 根据需要在其“属性”面板中设置其大小等属性。
背景颜色：指定影片区域的背景颜色。在不播放影片时（在 加载时和在播放后）也显示此颜色。 类：用于对影片应用CSS 类。 循环：使影片连续播放。如果没有选择循环，则影片将播放 一次后停止。 自动播放：在加载页面时自动播放影片。 垂直边距和水平边距：指定影片上、下、左、右空白的像素 数。 品质：在影片播放期间控制抗失真。默认为高品质，该设置 可改善影片的外观。但高品质设置的影片需要较快的处理器 才能在屏幕上正确呈现。 比例：确定影片如何适合在宽、高度文本框中设置的尺寸。 默认为显示整个影片。 对齐：确定影片在页面上的对齐方式。