网页中灵活运用多媒体元素

在之前的章节中，老师已经通过标签的基础讲解给大家讲述了如何在网页中插入文本，图片，音频，视频。这些形形色色的不同类型的文件，共同构成了丰富多彩的多媒体世界以及多媒体网页。

根据我们的认知，网页元素都是多元化的，绝对不可能仅仅由文字和图片，或者图片和视频构成。现代网页设计多数都是融合了多媒体，超媒体，流媒体等综合的媒体形式。

那么本节我们将继续讲解网页中的音频和视频。力图在一个新的深度和高度上为带领大家学习网页中的多媒体元素。那么本节老师规划了四个小知识点，首先是在网页中插入视频，其次是在网页中插入音频，再有是在网页中添加背景音乐，最后是添加插件。

同学们可能会问，这个插入视频和音频和我们之前学习的为网页插入视频和音频有什么区别？区别当然有！上次我们主要是通过 HTML 标签的形式让大家了解插入音频和视频的代码设计层面的原理。今天我们将完全通过 Dreamweaver CC 2018 来为网页中添加音频和视频！下面就请跟随老师的操作步骤和讲解一起来开始今天的学习吧！

1. 在网页中插入视频

为网页中添加视频，之前去在代码中写入一对 video 标签太累有木有？没关系，Dreamweaver CC 2018 的易用性设计早就考虑到了这一点。下面就跟随老师的操作步骤一步一步来操作在网页中插入视频。

第一步：我们还是先创建空白的 HTML 页面。这一步依旧不再赘述，有兴趣的同学们可以翻阅本 WIKI 教程的前几节，那里面都有介绍。

第二步：我们选择菜单栏中的插入按钮，进而选择 HTML ,再而选择 HTML5 Video,如下面第一张图所示：

在这里要和大家说明,菜单栏的使用和右侧功能面板是相互补充的,它们既能相互补充,又存在一些重复的功能,往往右侧功能面板都是一些菜单栏功能的快捷入口。就比如这个插入 HTML5 Video 操作，在右侧插入面板完全就可以点击插入后再点击 HTML5 Video。

这样操作的话，点击操作由三次减少为2次，可不要小看这小小的一个点击操作，对于当代网页设计数量巨大的操作步骤，这个操作表面上节省的1步，实则为一大步！下图是使用右侧功能面板实现视频插入功能的截图。

插入视频操作完成后，我们可以看到在网页中就出现了一个视频播放器的轮廓。那么接下来我们就可以通过属性面板设置它的长宽等属性。

第三步：我们按照之前章节讲过的设置 CSS 属性，在右侧的属性面版编辑插入视频长宽等属性，更多的属性设置就需要大家课下在 Dreamweaver CC 2018 中多多练习。

下图展示了为一个刚创建好的视频元素指定长宽属性前后的变化：

以上便是我们完完全全通过 Dreamweaver CC 2018 来为网页插入并设置视频！

2.在网页中添加音频

为网页中添加音频，之前也是在代码中展示过 Audio 标签的奇妙之处，那么今天我们重点讲解的是通过 Dreamweaver CC 2018 来为网页中插入音频。说到这里，就不得不提起上一个知识点，上一个知识点中的在网页中插入视频的操作完全可以复制到这一个知识点中来。操作步骤完完全全的一样，只不过菜单栏中的 HTML5 Video，换成 HTML5 Audio。操作方式也是和上面一样，通过菜单栏或者通过右侧功能面板都可以。如下图所示：

3.为网页添加背景音乐

这里我们要给大家讲解一个好用的神奇的标签，就是 bgsound ，我们可以写一个这样的标签到网页的 body 标签里。 <bgsound src=""> 其中双引号中的部分，需要用你的本地音频文件目录位置进行替换。把这个标签粘贴到网页的 body 中，就可以为网页设置背景音乐了。

由于是音频，所以老师就无法截图给大家说明了，大家只要按找老师说的方式去操作，就会很容易的给网页添加了背景音乐。

4.添加插件

插件是什么，英文上我们叫 plugin ，可能没有太多计算机接触经历的同学们很难理解这个插件会理解吃力。不要担心，老师给大家解释一下。简单说，就是现有的软件无法做到的功能，插件提供了扩展的本领。由于它是随需求的使用挥之即来，呼之即去的。所以很像是积木，喜欢就插上，不喜欢就拔下来，因此我们有了插件这个形象的名字。

那么在 Dreamweaver CC 2018 中怎么使用插件呢，下面跟随老师的脚步来看一看：
首先创建空白文档。这一步依然不赘述。

第二步，我们要点击菜单栏中的插入按钮，然后选择 HTML ,进而选择插件，然后就会弹出选择文件路径的对话框，这个时候我们只需要选择一个你需要扩展到网页中的插件类型，可以是一个视频，也可以是图片，都可以。插入后的效果如下图所示。我们可以看到网页的代码里插入了一个 embed 标签，这个其实就是插件额专用标签。

5. 小结

在本小节的知识点中，给大家通过 Dreamweaver CC 2018 直接操作的方式介绍了在网页中插入视频，音频的方法。整个知识点的操作性比较强，操作的步骤比较多，且互通的知识点比较多。所以同学们要课下多多练习才能触类旁通。

本节知识点的重点是利用 Dreamweaver CC 2018 在网页中插入视频，音频。
本节知识点的难点是理解插件在网页中的作用。