82添加网页特效之“播放音乐”网页案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本案例将把音乐插入到网页中，以增强页面的感染力，使浏览者在浏览文字内容的同时可以听到优美舒缓的音乐。如图所示，在页面上显示一个媒体播放器，用户可以控制音乐的播放过程。
图视听在线效果图
【案例目的】
掌握向网页中插入音乐的方法，理解常用的音频格式。
【实现思路】
打开现有网页，在合适位置插入音频元素并设置播放属性。
【主要知识】
音频文件的格式、插入音频文件的方法。
【相关知识介绍】
音频元素也是网页中不可或缺的内容，在 Dreamweaver 中插入音频元素的方法有多种，灵活选用不同方法，以适应页面需要，同时照顾浏览者的感受。
8.2.1 常用的音频格式
声音能极好地烘托网页页面的氛围，网页中常见的声音格式有WAV、MP3、MIDI、WMA、RM 等。表8-1 列出了几种常见声音文件的特点。
8.2.2 插入音频
1．使用
在网页中添加背景音乐可以使用
(1) 打开需要添加背景音乐的页面，切换到代码视图。
(2) 在
和之间输入“<”，在弹出的代码提示框中选择“bgsound”，插入背景音乐代码，如图所示。图插入背景音乐代码
(3) 用鼠标右键单击bgsound，在弹出的快捷菜单中选择“编辑标签”，弹出“标签编辑器-bgsound”对话框，如图所示。其中各参数的含义如下。
图“标签编辑器-bgsound”对话框
•①“源”：设置音乐文件的路径，单击“浏览”按钮选择背景音乐文件。
•②“循环”：设置音乐循环的次数，“-1”为无限次循环。
•③“平衡”：音乐的左右平衡。
•④“音量”：音乐的音量设置，取值范围 0～100。
•⑤“延迟”：音乐播放时的延迟。
(4) 设置完毕后单击“确定”按钮，
2．使用
embed 标签可以用来插入各种多媒体文件，可以是音频、视频或.swf 格式等，其中的参数因不同的文件格式而异。使用
(1) 打开需要插入声音文件的页面，切换到代码视图。
(2) 输入“<”，在弹出的代码提示框中选择embed。
(3) 用鼠标右键单击embed，在弹出的快捷菜单中选择“编辑标签”，弹出“标签编辑器-embed”对话框，如图所示。其中“常规”选项下各参数的含义如下。
图“标签编辑器-embed”对话框
•①“源”：设置音乐文件的路径，单击“浏览”按钮选择背景音乐文件。
•②“宽度”：设置音乐播放器的宽度，单位像素。
•③“高度”：设置音乐播放器的高度，单位像素。
•④“水平间距”：设置音乐播放器与鼠标插入点的水平距离，单位像素。
•⑤“垂直间距”：设置音乐播放器与鼠标插入点的垂直距离，单位像素。
•⑥“自动开始”：设置音乐是否在页面加载时自动开始播放。
•⑦“循环”：设置音乐是否循环播放。
•⑧“隐藏”：设置音乐播放器在页面中显示或隐藏。
(4) 设置完毕后单击“确定”按钮。此外，
图 embed 标签的参数列表
3．使用添加插件插入声音文件
若对 html 语言中的标签不是很熟悉的用户，也可以使用添加插件的方法插入多媒体文件。使用添加插件插入声音文件的步骤如下。
(1) 打开需要插入声音文件的页面，将鼠标置于插入点处。
(2) 选择“插入记录”→“媒体”→“插件”或者单击“插入”面板“常用”类别中“媒体”按钮旁的小箭头，从弹出的菜单中选择“插件”。
(3) 在弹出的“选择文件”对话框中选择要插入的声音文件，单击“确定”按钮。
(4) 选中插入的插件图标，在“属性”面板中进一步设置相关参数，如图所示。
图插件的“属性”面板
使用
图插件图标
图预览声音文件的播放器图标
注意：在网页中插入视频文件也可以使用该方法，但由于网络上流行的视频文件格式多种多样，需要浏览者的计算机上安装有相应的播放软件才可以正常播放。如wmv 格式视频需要用户计算机上安装有Windows Media Player 播放器，RM 格式视频需要安装有RealPlayer 播放器，MOV 视频需要安装有QickTime 播放器。否则，视频文件将无法正常显示。
8.2.3 案例实现
以下为案例实现步骤。
(1) 打开，将光标定位到章节内容下方的单元格，如图所示。
图定位光标
(2) 单击“插入”面板“常用”类别中“媒体”按钮旁的小箭头，从弹出的菜单中选择“插件”，如图所示。
图“插件”按钮
(3) 在“选择文件”对话框中选择要使用的音乐文件“3”，单击“确定”按钮，如图所示。
图选择文件
(4) 选中插入的插件图标，在属性中把宽度和高度删除(为了使播放器显示完整)，如图所示。
图删除宽度和高度
(5) 从代码视图中找到