当前位置:
文档之家› 第3章 插入多媒体元素和超链——(网页设计与制作共11章)
第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章进行详细介绍。