第5章处理多媒体素材
本章学习内容

(1) 	文本的插入与属性设置； 
(2) 	图像的插入与编辑； 
(3) 	在网页中应用音频； 
(4) 	在网页中插入视频； 
(5) 	鼠标经过图像的效果； 
(6) 	插入日期和时间、特殊符号和水平线。
完成本章的学习需要大约2小时，相关资源获取方式见前言。
知识点
插入文本使用列表项插入并编辑图像
添加音频插入视频插入和更新日期
向字体列表添加Edge和Web字体插入水平线和特殊字符制作鼠标经过图像效果
插入其他元素
本章案例介绍
范例
本章范例是一个关于钢琴演奏的案例，该案例主要运用Div+CSS布局，并在其中插入了相关音频和视频素材。通过范例的学习，掌握在网页中处理多媒体素材的方法，如图5.1所示。
模拟案例
本章模拟案例是一个关于茶道的网站，通过模拟练习进一步熟悉对多媒体素材的应用，如图5.2所示。



图5.1




图5.2



5.1预览完成的范例
(1) 右击“lesson05/范例/05complete”文件夹中的index.html文件，在打开方式中选择已安装的浏览器对index.html文件进行浏览，如图5.1所示。






(2) 关闭预览窗口。
(3) 可以用Dreamweaver CC 2018打开源文件进行预览，在菜单栏中选择“文件”→“打开”按钮。选择“lesson05/范例/05complete”文件夹中的“index.html”文件，并单击“打开”按钮，切换到“实时视图”查看页面。
5.2在网页中插入文本
文本是网页中最基本的元素，是传递网页信息的重要媒介，也是网页中必不可缺少的内容。在制作网页时，文本的设计是否合理将直接影响整个网页的美观程度。


视频讲解


5.2.1插入文本
在Dreamweaver CC 2018中插入文本有以下几种方法： 
（1） 将光标定位到文档窗口中需要插入文本的位置，然后直接输入文字内容即可。
（2） 在其他的应用程序中复制所需要的文本内容，然后在Dreamweaver文档窗口中将光标放置到要插入文本的位置，执行“编辑”→“粘贴”或“选择性粘贴”命令，或者在要插入文本的位置右击，在弹出的快捷菜单中选择“粘贴”或“选择性粘贴”命令。当使用“粘贴”命令从其他应用程序粘贴文本时，可在“首选项”面板中设置粘贴首选参数作为默认选项。使用“选择性粘贴”命令时，可以指定所粘贴文本的格式，如图5.3所示。例如，如果要将Microsoft Word文档中的文本复制粘贴到Dreamweaver文档中，但是想要去掉所有格式设置，以便能够向所粘贴的文本应用自己的CSS样式表，可以在Word文档中选择文本，将其复制到剪贴板，然后在Dreamweaver中使用“选择性粘贴”命令实现只粘贴文本的功能。



图5.3


注意： 
在代码视图中，Ctrl+V(Windows)和Command+V(Macintosh)始终仅粘贴文本(无格式)。



（3） 执行“文件”→“导入”命令导入文本文件，如XML或表格式数据。
（4） 从支持文本拖放功能的应用程序中，直接将需要的文本内容拖放到Dreamweaver的文档窗口。


视频讲解


5.2.2设置文本属性
为了使文本与网页中的其他元素相协调，使整个网页看起来更加的精美，就要设置文本属性。打开“属性”面板，Dreamweaver CC 2018的“属性”面板包含HTML和CSS两个界面，系统默认打开的是HTML“属性”面板，如图5.4所示。


图5.4


1. HTML“属性”面板
HTML“属性”面板中各个选项的功能介绍如下。
 格式： 设置所选文本的段落样式，该选项包含段落格式、标题格式和预先格式化的格式。
 ID： 标识字段，为所选内容分配一个ID。如果已经声明过ID，则该下拉列表中将列出文档中所有未使用的已声明ID。
 类： 显示当前应用于所选文本的类样式。如果对所选内容没有应用过任何样式或应用了多个样式，则该菜单将显示“无”。
 链接： 为所选文本创建超文本链接。选中需要添加超链接的对象，单击浏览文件按钮浏览站点中的文件，或直接键入URL，或者将指向文件图标拖动到文件面板中要链接的文件。
 标题： 为超级链接指定文本工具提示，即在浏览器中浏览网页时，当鼠标指针移到链接上时显示的提示文本。
 目标： 用于指定将链接文档加载到哪个框架或窗口。_blank是将链接文件加载到一个新的、未命名的浏览器窗口； _parent是将链接文件加载到该链接所在框架的父框架集或父窗口中，如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中； _self是将链接文件加载到该链接所在的同一框架或窗口中。此目标是默认的，因此通常不需要指定它； _top是将链接文件加载到整个浏览器窗口，从而删除所有框架。

注意： 
将光标放置在链接对象上时，“标题”和“目标”按钮才变为可用。





图5.5

 页面属性： 单击此按钮将弹出页面属性对话框，对页面属性进行设置。

 列表项目： 将光标放置在任意列表位置，该按钮才可用，单击该按钮将弹出“列表属性”设置窗口，如图5.5所示。
 ： 将所选文本的字体设置为粗体。
 ： 将所选文本的字体设置为斜体。
  ： 项目列表，为所选文本创建无序列表。
  ： 编号列表，为所选文本创建有序列表。
  ： 删除内缩区块，删除文本右缩进。
  ： 内缩区块，使文本右缩进。
2. CSS“属性”面板
在“属性”面板上单击CSS按钮切换到CSS“属性”面板，如图5.6所示。


图5.6


CSS“属性”面板中各个选项的功能介绍如下： 
 目标规则： 显示当前选中文本已应用的规则，或在CSS面板中正在编辑的规则。使用目标规则下拉列表可以创建新的CSS规则、新的内联样式或将现有类应用于所选文本。

注意： 
在创建CSS内联样式时，Dreamweaver会将样式属性代码直接添加到页面的body部分。



 编辑规则： 单击该按钮可以打开目标规则的CSS规则定义对话框。
 CSS和设计器： 单击该按钮可以打开CSS设计器面板，并在面板中显示目标规则的属性。
 字体： 设置目标规则的字体。
 大小： 设置目标规则的字体大小。
  ： 设置目标规则中的字体颜色。单击该按钮打开Web调色板选取颜色即可，或直接在相邻的文本框中输入十六进制值(例如,#FFFFFF表示白色)。

注意： 
“字体”“大小”“文本颜色”“粗体”“斜体”和“对齐”属性始终显示应用于文档窗口中当前所选内容的规则的属性。在更改其中的任何属性时，都将会影响目标规则。



下面通过一个实例来介绍如何设置文本属性，步骤如下。
(1) 在Dreamweaver中新建一个文档，切换到“设计”视图，然后在文档窗口中竖排输入文本内容“中国地理区划 东北 黑龙江省 吉林省 辽宁省 华东 上海市 江苏省 浙江省 安徽省……”，如图5.7所示。
(2) 调整字体样式、大小以及字体颜色，在“CSS属性”面板中，单击“字体”下拉按钮，选择“管理字体”，打开如图5.8所示的对话框，切换到“自定义字体堆栈”选项卡，然后在“可用字体”列表中选择“华文行楷”，然后单击按钮，即可将字体添加到字体列表中，如图5.9所示，单击“完成”按钮关闭对话框，添加字体完毕。选中所有文本内容，在“字体”下拉列表框中选择“华文行楷”； 在“大小”下拉列表框中选择14px； 单击“颜色”按钮，设置字体颜色为#081F68。此时文本效果如图5.10所示。



图5.7




图5.8






图5.9




图5.10





图5.11

(3) 选中文字“中国地理区划”，在“HTML属性”面板中，单击“格式”下拉按钮，在下拉列表框中选择“标题1”。

(4) 下面为页面添加背景图片，在“CSS属性”面板单击“编辑规则”，打开CSS设计器面板，单击“添加CSS源”按钮，在弹出的下拉列表中选择“在页面中定义”，然后单击“添加选择器”按钮，添加选择器body。切换到“属性”面板的“背景”类别，设置背景图像为“5.2.2设置文本属性”文件夹中的China.jpg，图像的水平位置为居中，垂直位置为居中。最终效果如图5.11所示。


视频讲解


5.2.3创建列表项
在设计网页时，通常需要对同级或不同级的多个项目进行排列，以显示多个项目之间的层次关系，这样可以使网页的文本内容显得更有条理，更加工整直观。在Dreamweaver中，可以创建两种类型的列表： 项目列表和编号列表。列表还可以嵌套，嵌套列表是包含其他列表的列表。
1. 插入项目列表
项目列表也被称作无序列表，即项目之间没有顺序规定。项目列表的项目默认使用项目符号，也就是黑色圆点来进行标记。
下面利用上一个案例“5.2.2设置文本属性.html”来展示在文档中插入项目列表的步骤。
(1) 在Dreamweaver中打开案例“5.2.2设置文本属性.html”。
(2) 选中除“中国地理区划”以外的其他文本内容，单击“属性”面板中的“项目列表”按钮，则所有项目左边都会出现黑色圆点符号●，如图5.12所示。
(3) 选中“黑龙江省”至“辽宁省”3项，单击“属性”面板中的“缩进”按钮，使它们向右缩进，则这3项的左边的●符号变成了○符号，表示它们是列表的第二层，同理设置其他项，最终效果如图5.13所示。



图5.12




图5.13



(4) 将文档另存为“5.2.3插入项目列表.html”。
2. 插入编号列表
编号列表也被称作有序列表，列表项目按照数字或字母等顺序进行排列。
设置编号列表的方法同设置项目列表的方法一致，继续使用上例，步骤如下。
(1) 在Dreamweaver中打开案例“5.2.2设置文本属性.html”。


图5.14

(2) 选中除“中国地理区划”以外的其他文本内容，单击“属性”面板中的“编号列表”按钮，则所有项目左边都会出现数字序号，如图5.14所示。
(3) 选中“黑龙江省”至“辽宁省”3项，单击“属性”面板中的“缩进”按钮，使它们向右缩进，则这3项的左边会按顺序加入数字，表示它们是列表的第二层，同理设置其他项，最终效果如图5.15所示。
(4) 将文档另存为“5.2.3插入编号列表.html”。
3. 项目列表和编号列表混排
(1) 打开之前保存的“5.2.3插入编号列表.html”文档。
(2) 选中“黑龙江省”至“辽宁省”3项，单击“属性”面板中的“项目列表”按钮，则这3项左边的数字将变成项目符号，同理设置其他项，最终效果如图5.16所示。



图5.15




图5.16



(3) 将文档另存为“5.2.3项目列表和编号列表混排.html”。

注意： 
编号列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。



5.3在网页中插入图像
一个好的网页除了文本之外，还应该用合适的图像来进行点缀和渲染，图像是网页中最重要的元素之一，在网页中插入适当的制作精良的图像可以大大增强网页的美观性，使网页更加生动，从而吸引浏览者的眼球，并且可以反映出网站的主题。
5.3.1网页中常用的图像格式
图像有很多种格式，如GIF、JPEG、PNG、BMP、TIF等，但网页中通常使用GIF、JPEG和PNG 3种格式。其中使用最多的是GIF和JPEG格式，因为这两种文件格式的支持情况最好，在大多数浏览器中均可查看。
1. GIF格式
GIF(Graphics Interchange Format，图像交换格式)采用无损压缩(在压缩过程中不丢失图像的质量)的算法进行图像压缩处理，使图形文件所占的存储空间大大减少，并基本保持了图片的原貌。该格式支持的颜色最多只能达到256色，在网页制作中适用于显示一些色调不连续或大面积单色区域的图像。另外，GIF格式图像还可以做成透明形式和动画形式。
2. JPEG格式
JPEG是由Joint PhotoGraphic Experts Group(联合图像专家组)制定的图像压缩格式，它采用有损压缩来减小图片文件的大小，压缩比越高，图像质量损失越大。该格式支持24位真彩色，但不支持透明背景色，这种格式的图像文件能够保存数百万种颜色，适用于摄影或一些具有连续色调的图像。
3. PNG格式
PNG是Portable Network Graphic(可移植网络图形)的缩写，它是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。目前最保真的图像格式就是PNG，由于PNG文件较小，并且具有较大的灵活性，所以它非常适合用作网页图像，但某些浏览器版本只能部分支持PNG图像，因此，它在网页中的使用受到一定程度的限制。


视频讲解


5.3.2插入图像
在Dreamweaver CC 2018中，可以直接插入图像，也可以将图像作为页面的背景。另外，还可以通过使用Dreamweaver的行为创建出图像的交互效果。
将图像插入Dreamweaver文档时，HTML源代码中会生成对该图像文件的引用。需要注意的是，在Dreamweaver文档中插入的图像文件必须保存在当前站点文件夹中，否则在浏览网页时，可能会出现图片丢失的情况。如果所插入的图片不在当前站点文件夹内，在插入图片时，Dreamweaver将提示用户复制该图像文件到当前站点文件夹内。
在网页中插入图像的操作步骤如下。
(1) 在Dreamweaver中新建一个文档，切换到“设计”视图。
(2) 执行“插入”→Table命令，插入一个1行2列，宽为1000像素，边框、边距、间距均为0的表格，并使其居中，并设置表格的高为400像素，两列单元格的宽均为500像素，单元格内容为垂直居中。
(3) 将光标置于第一列单元格中，执行“插入”→Image命令，插入“5.3.2插入图像”文件中的图片Britain.jpg，在第二列的单元格中输入文本内容，如图5.17所示。


图5.17

(4) 打开“CSS设计器”面板，单击“添加CSS源”按钮，在弹出的下拉列表中选择“在页面中定义”，然后单击“添加选择器”按钮，添加选择器.text，设置字体颜色为#0F2B56，对齐方式为居中，左填充为50像素。设置完成后应用该样式，选中所有文本，在“属性”面板中单击“格式”下拉按钮，在下拉列表框中选择“标题3”。
(5) 保存文档为“5.3.2插入图像.html”，在浏览器中的效果如图5.18所示。


图5.18


5.3.3编辑图像
在网页中添加图像后，Dreamweaver会自动按照图像的原始大小显示，但为了使图像与文本等其他页面元素相协调，常常需要对图像的大小、位置和边框等属性进行设置。这些操作主要通过“属性”面板来完成。

选定要编辑的图像(以5.3.2节中的图片为例)，窗口下方将会出现图像“属性”面板，如图5.19所示，该属性界面中的主要功能如下。


图5.19


 ID： 在文本框中输入图像的名称。以便在使用Dreamweaver行为或脚本撰写语言(如JavasScript或VBScript)时可以利用该名称引用该图像。
 Src： 用于设置插入图像的路径及名称。单击右侧的文件夹图标以浏览到源文件，或者直接在文本框中键入图像的路径。
 链接： 用来给图像或图像热区添加超链接，实现页面跳转。将“指向文件”图标拖动到文件面板中的某个文件，或者单击文件夹图标浏览到站点上的某个文档，或手动键入URL。
  ： 热点工具，用来将图像分割为若干区域，并为这些区域添加链接，实现页面跳转。
 原始： 文本框中可以设置当前图像原始的PNG或PSD格式的图像文件。
 替换： 用于设置图像的说明性内容。通常在图像不能正常显示时，显示指定的提示文本。
 编辑： 单击“编辑”按钮，启动默认的外部图像编辑器，可以在图像编辑器中编辑并保存图像，在页面中的图像将会自动更新，外部图像编辑器可以在首选项中进行设置； 单击“编辑图像设置”按钮可以打开“图像优化”对话框，优化图像； “从原始更新”按钮，如果当前页面上的Web图像与原始图像不同步，单击该按钮，图像将自动更新，以反映对原始图像文件所做的任何更改； “裁剪”按钮用于裁剪图片； “重新取样”按钮，调整图片大小后此按钮可用，对已调整大小的图片进行重新取样，可提高图片质量； “亮度和对比度”按钮用于调整图片的亮度和对比度； “锐化”按钮用于锐化图像，改变图片内部边缘对比度。
 宽和高： 分别用于设置图像的宽度和高度。

此外，还可以以可视方式调整图像大小，方法如下。


图5.20

(1) 在文档窗口中选择需要调整大小的图像，在图像的底部、右侧及右下角将会出现调整手柄，如图5.20所示。如果未出现调整手柄，则单击要调整大小的图片以外的部分然后再重新选择它，或在标签选择器中单击相应的标签以选择该图片。
(2) 执行下列操作之一，调整图像的大小： 
 拖动底部的控制点调整图像的高度。
 拖动右侧的控制点调整图像的宽度。
 拖动右下角的控制点同时调整图片的宽度和高度。
 按住Shift键的同时拖动右下角的控制点，可以按比例缩放图像。
(3) 调整图像的“宽”和“高”以后，文本框右侧将显示“重置为原始大小”按钮和“提交图像大小”按钮。若要将已调整大小的图像还原到原始尺寸，可以单击“重设大小”按钮，或者删除“宽”和“高”域中的值； 若要保留修改大小后的图像，单击“提交图像大小”按钮即可。


视频讲解


5.3.4制作鼠标经过图像的效果
鼠标经过图像是指当鼠标经过某一幅图像时，该图像会变成另外一幅图像，并且带有链接功能。鼠标经过图像实际上是由两幅图像组成的： 初始图像(页面首次加载时显示的图像)和替换图像(当鼠标指针经过时显示的图像)，用于鼠标经过图像的两幅图像大小必须相同，如果不同，Dreamweaver会自动调整第二幅图像的大小，使之与第一幅图相匹配。
制作鼠标经过图像的步骤如下。
(1) 新建一个空白的html文档，插入一个1行1列，宽为370像素，边框、边距和间距均为0的表格，并使其居中。
(2) 将光标置于表格中，执行“插入”→HTML→“鼠标经过图像”，弹出“插入鼠标经过图像”对话框，如图5.21所示。


图5.21



(3) 分别单击“原始图像”和“鼠标经过图像”右侧的“浏览”按钮，在“5.3.4制作鼠标经过图像的效果/images”文件夹中选择相应的图像medusa1.jpg和medusa2.jpg，如图5.22所示，单击“确定”按钮，关闭对话框。


图5.22



(4) 保存文件，按下F12键在浏览器中查看效果，鼠标没有移到图像上时显示的图片(左)和鼠标移至图片上时显示图片(右)，如图5.23所示。


图5.23




视频讲解



5.4在网页中应用音频
随着多媒体技术的发展，如今的网页已不再是单一的图像加文字组成的页面了，在网页中越来越多地使用到了一些多媒体元素。声音就是多媒体元素中的一种，在网页中适当的加入一些音乐，会给浏览者带来不一样的感受。
5.4.1网页中常见的音频文件格式
音频文件格式有很多种类型，如WAV、MIDI、MP3、AIFF、Real Audio等，在为网页添加音频文件前，需要考虑不同浏览器对音频格式的兼容性，以免用户在浏览网页时，不能正常播放声音文件。下面介绍几种常见的音频文件格式。
1. MP3格式
MP3格式是一种音频压缩格式，它能够在音质损失很小的情况下把文件压缩到更小的程度，而且还非常好地保持了原来的音质。这种格式也支持流式处理，即边下载边播放，访问者不必等待整个文件下载完成即可收听该文件。若要播放MP3文件，访问者必须下载并安装辅助应用程序或插件，如QuickTime、Windows Media Player或Realplayer。
2. MIDI格式
MIDI格式主要用于电子乐器音乐。许多浏览器都支持MIDI文件，并且不需要插件。一个很小的MIDI文件也可以提供相当长的声音剪辑，但MIDI文件不能进行录制，并且必须使用特殊的硬件和软件在计算机上合成。
3. WAV格式
WAV格式是最接近无损的音频格式，具有良好的声音品质，许多浏览器都支持此类格式文件并且不需要插件。
4. AIFF格式
AIFF是音频交换文件格式(Audio Interchange File Format)的英文缩写，它是一种文件格式存储的数字音频(波形)的数据。AIFF格式与WAV格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不需要插件。
5. RAM格式
RAM格式具有非常高的压缩度，文件大小要小于MP3，且支持流式处理，但访问者必须下载并安装RealPlayer辅助应用程序或插件才可以播放这种类型的文件。
5.4.2添加声音
在网页中添加声音的方法大致可分为3种： 一是链接到音频文件； 二是以嵌入声音文件的形式，访问者可以通过播放器控制音频； 三是以添加背景音乐的形式，在加载网页时自动播放音频。
1. 链接到音频文件
链接到音频文件是将声音添加到网页的一种简单而有效的方法。这种方法可以在单击超链接时自动调用外部播放器来播放音乐文件。创建音频文件链接和创建网页链接一样，具体方法如下。
(1) 在Dreamweaver中新建一个html文档，切换到“设计”视图，在文档中输入文本内容，并为其添加“编号列表”，如图5.24所示。
(2) 选中文本Kiss The Rain，单击“属性”面板的“链接”文本框右边的浏览文件按钮，在“5.4添加声音/music”文件夹中找到对应的音频文件。
(3) 按照同样的方法，为其余的2行文本添加对应的音频文件链接。
(4) 保存文件为“5.4.2链接到音频文件.html”，按下F12键在浏览器中浏览页面效果。
在网页中单击链接文本将会播放指定的音乐文件，如图5.25所示。



图5.24




图5.25



2. 嵌入声音文件
嵌入声音文件就是将声音播放器直接插入到页面中，只有当访问者的计算机上安装有合适的插件时，才可以在网页中播放声音文件。
在网页中嵌入声音文件的步骤如下。
(1) 打开需要嵌入声音的文档，切换到“设计”视图，将光标放置在要嵌入声音文件的位置。
(2) 执行“插入”→HTML→“插件”命令，弹出“选择文件”对话框，如图5.26所示。


图5.26


(3) 在弹出的对话框中选择要播放的声音文件，然后单击“确定”按钮关闭对话框，此时可在页面上看到插件的占位符。选中插件占位符，打开对应的“属性”面板，如图5.27所示。


图5.27


(4) 单击“参数”按钮，弹出“参数”对话框。单击对话框中的添加参数按钮，在“参数”列表框中输入参数名称loop，在“值”列表框中输入true，如图5.28所示，使音频文件循环播放。


图5.28


若想要将该音频文件设置为网页的背景音乐，在“属性”面板中将插件占位符的“宽”和“高”均设为0即可。
3. 添加背景音乐
顾名思义，背景音乐就是在加载页面时自动播放预先设置的音频文件。为网页添加背景音乐的方法一般有两种： 一种是通过<bgsound>标签来添加，另一种是通过<embed>标签来添加。<embed>标签定义嵌入的内容，比如插件，使用插件添加背景音乐的方法已在嵌入声音文件中有所讲解，这里主要介绍用<bgsound>标签添加背景音乐的方法，具体步骤如下。
(1) 在Dreamweaver中打开需要添加背景音乐的页面，切换到“代码”视图或“拆分”视图。
(2) 在<body>和</body>标签之间添加以下代码： 

<bgsound src="背景音乐的URL地址"loop="-1">



图5.29

其中，src是指定声音文件的路径； loop是控制音乐循环播放的次数，-1表示音乐无限循环播放，如果想要设置播放次数，则改为相应的数字即可。bgsound标签共有5个属性，在“<bgsound”代码后按空格键，代码提示框将会自动将bgsound标签的属性列出来供用户选择，如图5.29所示。其中balance是设置音乐的左右平衡； delay是进行播放延时的设置； volume是设置音量。一般在为网页添加背景音乐时，只需设置src和loop参数即可。
5.4.3使用HTML5音频标签
互联网有很多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器所支持的格式也不相同，在线的音频和视频都是通过插件(比如Flash)或者第三方工具来实现的，但并非所有浏览器都拥有同样的插件。HTML5针对这种情况新增了<audio>标签来统一网页上的音频格式，用户可以直接使用该标签在网页中添加相应格式的音频文件。在一个支持HTML5的浏览器中浏览网页时，不需要安装任何插件就能播放网页中音频或视频。
目前，audio元素所支持的音频格式有3种： MP3、Wav和Ogg，主流浏览器对这3种音频格式的支持情况如表5.1所示。


表5.1浏览器的音频格式的支持情况



浏览器MP3WavOgg

IE 9+√××
Chrome 6+√√√
Firefox 3.6+√√√
Safari 5+√√×
Opera 10+√√√

在网页中插入HTML5音频的步骤如下。
(1) 在Dreamweaver中打开需要插入音频的页面，切换到“代码”视图或“拆分”视图。
(2) 将光标放置在要插入音频的位置，执行“插入”→HTML→HTML5 Audio命令，即可插入音频到指定位置，所插入的HTML5音频以图标的形式显示。
(3) 选中该图标，打开对应的“属性”面板如图5.30所示。


图5.30


下面简要介绍该“属性”面板中各选项的功能。
 源： 指定源音频文件的位置。
 Title： 该选项用于设置HTML5 Audio在浏览器中当鼠标移至该对象上时所显示的文字。
 回退文本： 当浏览器不支持HTML5 Audio时所显示的文字。
 Controls(控件)： 用于设置是否在网页中显示音频播放控件。
 Autoplay(自动播放)： 用于设置是否在打开网页的同时自动播放音频文件。
 Loop(循环)： 用于设置音频是否重复播放。
 Muted(静音)： 用于设置是否将音频静音。
 Preload(预加载)： 该选项用于设置是否在页面加载后是否载入音频。在该下拉列表框中包含共有3个选项： none、auto和metadata(元数据)，选择none会在页面加载后不载入音频； 选择auto会在页面加载后自动载入整个音频； 选择metadata会在页面加载完成之后仅载入元数据。如果选中了Autoplay复选框，则忽略该选项的设置。
 Alt源1/Alt源2： 也叫替换源，用于指定第二个、第三个音频文件的位置。如果浏览器不支持“源”中指定的音频文件格式，则会使用“Alt源1”或“Alt源2”中所指定的音频文件格式。


图5.31

(4) 在“属性”面板中单击“源”选项框右边的“浏览文件”按钮，弹出“选择文件”对话框，选择“5.4添加声音”文件夹下的music文件夹中的“Kiss The Rain  The Best Of Piano.mp3”，此时，Ogg格式和Wav格式的音频文件将会自动填写“Alt源1”和“Alt源2”，如图5.31所示。


视频讲解


5.5在网页中插入Flash动画和视频
在Dreamweaver CC 2018中，不仅能在网页中插入声音文件，还可以插入Flash动画、Flash Video和HTML5等多媒体对象，下面分别进行简单介绍。
5.5.1插入Flash动画
Flash动画基于矢量图形制作，随意放大也不会降低画面质量，其扩展名为.swf。在网页中插入Flash动画既能够


图5.32

使页面充满动感，又能够实现交互功能，另外，Flash动画文件较小，适合在网络上使用，所以Flash动画被广泛应用于网页设计中。
下面通过一个简单的案例来展示在网页中插入Flash动画的方法，操作步骤如下。
(1) 新建一个html文档，切换到“设计”视图。
(2) 执行“插入”→HTML→Flash SWF命令，弹出“选择SWF”对话框，选择“5.5在网页中插入Flash动画和视频”文件夹中的“球.swf”，此时页面上会出现一个占位符，如图5.32所示。
(3) 选中占位符，在“属性”面板中设置“宽”为800像素，“高”为500像素，“对齐”为“居中”，如图5.33所示。
(4) 保存文档为“5.5.1插入Flash动画.html”，按下F12键在浏览器中进行浏览，效果如图5.34所示。



图5.33




图5.34



5.5.2插入Flash Video
Flash Video即Flash视频，它是一种流媒体视频格式，其文件扩展名为.flv。Flash视频文件极小、加载速度极快，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好地使用等缺点。访问者只要能看Flash动画，就能看FLV格式的视频，而不需要额外安装其他视频插件。
在网页中插入Flash Video的步骤如下。
(1) 在Dreamweaver中新建一个空白的html文档，切换到“设计”视图，执行“插入”→HTML→Flash Video命令，弹出“插入FLV”的对话框，如图5.35所示。


图5.35


该对话框用来设置所插入的FLV格式文件的视频类型，以及不同视频类型下的相关属性。在Dreamweaver CC 2018中，FLV格式文件有两种视频类型： 一种是累进式下载视频； 另一种是流视频。
“累进式下载视频”是将FLV视频文件下载到站点访问者的硬盘上，然后进行播放。与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。该类型的选项说明如下。
 URL： 指定FLV文件的相对路径或绝对路径。若要指定相对路径，则单击“浏览”按钮，找到需要的FLV文件； 若要指定绝对路径，则输入FLV文件的URL地址。
 外观： 在下拉列表框中指定Flash视频组件的外观。
 宽度/高度： 以像素为单位指定FLV文件的宽度和高度。
 限制高宽比： 用于设置是否保持Flash视频组件的宽度和高度之间的比例不变。默认情况下选中此复选框。
 自动播放： 设置在打开网页时是否自动播放视频。
 自动重新播放： 设置播放控件在视频播放完之后是否返回到起始位置。
“流视频”是对视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在网页上播放该内容。在“视频类型”下拉列表框中选择“流视频”类型，如图5.36所示。


图5.36


该对话框中的选项说明如下(与“累进式下载视频”类型相同的选项不再重复介绍)。
 服务器URLI： 指定服务器名称、应用程序名称和实例名称。

 流名称： 想要播放的FLV文件名称。
 实时视频输入： 用于设置视频内容是否是实时的。
 缓冲时间： 设置在视频开始播放前，进行缓冲处理所需的时间。默认的缓冲时间为0，这样在单击了“播放”按钮后视频会立即开始播放。
该案例中的“视频类型”选择“累进式下载视频”。
(2) 在“视频类型”的下拉列表框中选择“累进式下载视频”； 单击URL输入框右侧的“浏览”图标按钮，在弹出的对话框中选择“5.5在网页中插入Flash动画和视频”文件夹中的“骆驼.flv”； 在“外观”下拉列表框中选择“Clear Skin 2(最小宽度： 160)”，选中“自动播放”复选框，如图5.37所示。


图5.37

(3) 保存文档为“5.5.2插入Flash Video.html”，按下F12键进行浏览，效果如图5.38所示。


图5.38


5.5.3使用HTML5视频标签
以前在网页中插入的视频一般是通过插件(比如Flash)来显示的，然而，并非所有浏览器都拥有同样的插件。HTML5提供了一种播放视频的标准元素video，通过使用<video>标签，可以直接在网页中播放视频文件，免除了浏览器安装插件这一部分，只需一个支持HTML5的浏览器。
目前，video元素所支持的视频格式有3种： MPEG4、WebM和Ogg，主流浏览器对这3种视频格式的支持情况如表5.2所示。


表5.2浏览器的音频格式的支持情况



格式IEChromeFirefoxSafariOpera

MPEG49.0+5.0+×3.0+×
WebM×6.0+4.0+×10.6+
Ogg×5.0+3.5+×10.5+

MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件； 
WebM=带有VP8视频编码和Vorbis音频编码的WebM文件； 
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件。

注意： 
不同视频文件的编码方式是不同的，如MPEG4格式的视频文件的编码方式有4种： MPEG4(DivX)、MPEG4(Xvid)、AVC(H264)、HEVC(H265)。如果MPEG4中的视频解码器与下载的视频的编码器不一致，则视频就无法正常播放。可在视频格式转换器中分别选用MPEG4(DivX)、MPEG4(Xvid)、AVC(H264)、HEVC(H265)进行尝试，通常对DivX编码的支持比较多。



在网页中插入HTML5视频的步骤如下。
(1) 打开需要插入视频的文档，切换到“设计”视图，将光标放置在要插入视频的位置。
(2) 执行“插入”→HTML→HTML5 Video命令，此时页面上会出现一个占位符，选中该占位符，对应的“属性”面板如图5.39所示。


图5.39


HTML5视频的“属性”面板中选项功能与HTML5音频的“属性”面板中的选项功能类似，此处不再赘述。


视频讲解


5.6其他元素的插入
在网页中，除了可以插入文本、图像、音视频外，还可以根据需求插入一些其他的元素，如水平线、特殊符号以及日期和时间等，下面一一介绍。
5.6.1插入水平线和特殊符号
1. 插入水平线

水平线也可看作是分界线，在页面中适当的插入水平线可分隔页面内容，使信息看起来更清晰。


图5.40

下面利用前面的案例来展示在页面中插入水平线的步骤。
(1) 在Dreamweaver中打开“5.2.3插入编号列表.html”，切换到“设计”视图。
(2) 将光标放置在“辽宁省”的后面，执行“插入”→HTML→“水平线”命令，即可在光标所处的位置插入一条水平线，如图5.40所示。
(3) 选中水平线，在“属性”面板中设置“宽”为100%，“高”为3像素； “对齐”为“居中对齐”，取消选中“阴影”复选框； 水平线ID为line，如图5.41所示。定义CSS样式#line，设置背景颜色为#F4091F，边框粗细为0像素。


图5.41


(4) 将文档另存为“5.6.1插入水平线.html”，并在浏览器中进行浏览，如图5.42所示。
2. 插入特殊符号
在制作网页时通常会用到一些特殊符号，这里所说的特殊符号是指在键盘上不能直接输入的字符，如版权符、注册符等,具体步骤如下。
(1) 切换到“设计”视图，将光标放置在所要插入的位置，在“插入”面板中执行HTML→“字符”命令，在弹出的快捷菜单中选择要插入的特殊字符即可，如图5.43所示。



图5.42




图5.43



(2) 若在菜单中不能找到需要的特殊符号，可以选择“其他字符”，打开插入其他字符对话框，如图5.44所示。在其中选择要插入的“字符”后单击“确定”按钮即可。


图5.44


5.6.2插入日期和时间
Dreamweaver提供了一种非常方便的插入日期的方法，它可以以任何格式在文档中插入当前时间。同时它还提供了日期更新选项，每次保存文件时，日期都自动更新。具体步骤如下。


图5.45

(1) 切换到“设计”视图，将光标放置在所要插入日期和时间的位置，在“插入”面板中执行HTML→“日期”命令，打开“插入日期”对话框，如图5.45所示。
(2) 在打开的“插入日期”对话框中，对日期和时间的格式进行设置，然后单击“确定”按钮即可。若希望插入的日期在每次保存文档时都自动进行更新，则可以选中“储存时自动更新”复选框。
5.7本章范例
5.7.1头部区域的制作



视频讲解


(1) 新建一个文件夹，将其命名为05start。将“lesson05/范例/05complete”文件夹中的images、music、video文件夹复制到该文件夹内。
(2) 打开Dreamweaver CC 2018，新建一个站点名称为05start的站点，站点文件夹为刚才新建的05start文件夹，如图5.46所示，单击“保存”按钮关闭对话框。


图5.46


(3) 在页面中，选择“文件”→“新建”命令，新建一个空白的HTML文档，在标题栏中输入网站的标题“钢琴”。
(4) 执行“文件”→“保存”命令，将文件重命名为index.html，并将其保存在05start文件夹下。
(5) 切换到“拆分”视图，打开“CSS设计器”面板，单击“添加CSS源”按钮，在弹出的下拉列表框中选择“在页面中定义”，然后单击“添加选择器”按钮，添加选择器body，用于设置整个页面的外观。
(6) 将CSS设计器中的“属性”面板切换到布局类别，设置左右边距为0px； 切换到“文本”类别，设置字体颜色为#FFFFFF； 切换到背景类别，设置背景图像为“lesson05/范例/05start/images”文件夹下的bg.jpg，图像的水平位置为居中，垂直位置为居中，图像的宽度为100%，高度为100%，图像重复为不平铺，图像滚动模式为fixed。对应的代码如下： 



body {

background-image: url(images/bg.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: 100% 100%;

margin-top: 0px;

margin-left: 0px;

margin-right: 0px;

color: #FFFFFF;

}





(7) 将光标置于页面中，执行“插入”→Div命令，打开插入Div对话框，在ID文本框中输入head，如图5.47所示。单击“确定”按钮关闭对话框，即可在页面中插入名为head的Div，页面效果如图5.48所示。


图5.47




图5.48


(8) 下面来制作网站的logo和导航条，将光标置于ID为head的Div框中，删除Div标签中的占位文本，


图5.49

插入ID为head_nav的Div标签。按照同样的方法，在ID为head_nav的Div框中插入ID分别为logo和nav的Div，代码如图5.49所示。
(9) 将光标置于ID为logo的Div中，删除占位文本，输入英文The Piano。
(10) 将光标置于ID为nav的Div中，删除占位文本，执行“插入”→“列表项”命令，内容为Home。按照同样的方法，继续在后面插入3个列表项，内容分别为About、PlayList和Think，代码如图5.50所示，页面效果如图5.51所示。



图5.50




图5.51



(11) 下面来设置整个头部内容的外观。打开“CSS设计器”面板，单击“添加选择器”按钮，输入选择器名称#head，用于设置Div标签head的外观。代码如下： 



#head {

background-image: url(images/1.jpg);

background-position: center center;

background-repeat: no-repeat;

width: 100%;

height: 800px;

background-size: 100% 100%;

}





(12) 按照以上方法，定义CSS规则#head_nav、logo和nav，分别用于设置Div标签head_nav、logo和nav的外观,代码如下： 



#head_nav {

height: 80px;

width: 100%;

position: fixed;

z-index: 999;

}

#logo {

text-align: right;

color: #FFFFFF;

font-size: 70px;

width: 30%;

height: 70px;

padding-top: 10px;

float: left;

}

#nav {

width: 35%;

height: 70px;

float: right;

padding-left: 0px;

text-align: center;

padding-top: 50px;

font-size: 18px;

}





(13) 继续定义CSS规则#nav li规则，用于设置导航条的外观。在CSS设计器的“属性”面板中设置导航成块状显示，左浮动，左右填充为25px，文本水平对齐方式为居中，代码如下： 



#nav li {

display: block;

float: left;

padding-left: 25px;

text-align: center;

padding-right: 25px;

}





(14) 按Ctrl+S键保存文档，按下F12键，在浏览器中浏览网页的头部部分，如图5.52所示。


图5.52


5.7.2中间区域的制作
(1) 中间区域的制作主要是由3个Div组成： content1、content2和content3，这里首先插入一个ID为content的Div标签，用于放置中间区域的所有元素。将光标置于ID为head的Div外部，执行“插入”→Div命令，打开“插入Div”对话框，在ID文本框中输入content，单击“确定”按钮关闭对话框。
(2) 将光标置于ID为content的Div中，删除该标签中的占位文本，插入3个Div标签，ID分别为content1、content2和content3，对应的代码效果如图5.53所示。


图5.53



(3) 下面来制作content1的内容，删除ID为content1的Div标签中的占位文本，插入标签content1_text，删除占位文本，为其添加文本本内容，在对应的代码处添加以下代码： 



<div id="content1_text">

<h1>About<hr>

</h1>

<div id="text1">钢琴(意大利语： pianoforte)是西洋古典音乐中的一种键盘乐器，有"乐器之王"的美称。由88个琴键(52个白键，36个黑键)和金属弦音板组成。意大利人巴托罗密欧·克里斯多佛利(Bartolomeo Cristofori，1655-1731)在1709年发明了钢琴。钢琴音域范围从A0(27.5Hz)至 C8(4186Hz)，几乎囊括了乐音体系中的全部乐音，是除了管风琴以外音域最广的乐器。钢琴普遍用于独奏、重奏、伴奏等演出，作曲和排练音乐十分方便。演奏者通过按下键盘上的琴键，牵动钢琴里面包着绒毡的小木槌，继而敲击钢丝弦发出声音。钢琴需定时的护理，来保证他的音色不变。

<div id="more"><a href="#">更多</a></div>

</div>

</div>





此时的页面效果如图5.54所示。


图5.54


(4) 定义CSS规则#content、#content1、#content_text1、h1、#text1和#more，为文本内容添加样式，代码如下： 



#content {

margin-left: auto;






margin-right: auto;

text-align: center;

width: 90%;

}

#content1 {

margin-top: 100px;

}

#content1_text {

width: 900px;

height: 600px;

background-color: #1B1B1B;

float: right;

margin-top: 120px;

text-align: left;

}

h1 {

color: #CF5D8A;

font-size: 60px;

font-weight: lighter;

padding-left: 100px;

}

#text1 {

width: 450px;

color: #959595;

line-height: 30px;

padding-top: 20px;

text-align: justify;

margin-left: 400px;

}

#more {

border: thin solid #6C6C6C;

width: 150px;

text-align: center;

margin-top: 20px;

}





此时的页面效果如图5.55所示。
(5) 在content1_text标签的后面插入ID为 content1_img的Div标签，用来放置图片，删除标签content1_img中的占位文本，执行“插入”→Image命令，插入图片2.jpg，并在CSS设计器中定义CSS规则#content1_img，设置图像的属性，代码如下： 



#content1_img {

width: 600px;

height: 350px;

float: left;

top: 1350px;

position: absolute;

right: 700px;

}




页面效果如图5.56所示。



图5.55




图5.56



(6) 下面来制作content2的内容，删除ID为content2的Div标签中的占位文本，输入第二部分的标题PlayList，并为其运用h1样式。在将光标放置</h1>后面，执行“插入”→HTML→“水平线”命令，插入水平线。定义CSS规则#content2，设置content2的外观，代码如下： 



#content2 {

position: absolute;

top: 1900px;

width: 90%;

height: 1250px;

background-color: #1B1B1B;

}






图5.57

页面效果如图5.57所示。
(7) 在水平线的下方插入一个6行2列，宽为900像素，边距、边框为0，间距为10的表格，并使其居中对齐，用于放置音频文件的名称和播放器。将每个单元格的“高”设为60像素，在第一列单元格中输入音乐的名称，在第二列单元格中，执行“插入”→HTML→HTML5 Audio命令，插入与第一列该单元格中的名称相对应的音频文件，如果对插入步骤不熟悉，请参考5.4.2节的内容，页面效果如图5.58所示。


图5.58

(8) 定义CSS规则table，设置表格的样式，代码如下： 



table {

padding-top: 50px;

}




(9) 下面在content2内插入一个HTML5视频，继续添加以下代码： 



<div id="title"><h3>Video</h3><h4> Appreciation</h4></div>

 <div id="video">

<video width="600" height="400" controls="controls" >

<source src="久石让 --- 天空之城(钢琴).mp4" type="video/mp4">

</video>

</div>





(10) 定义CSS规则#title、h3、h4和#video，代码如下： 



#title {

width: 400px;

height: 400px;

top: 750px;

position: absolute;

text-align: left;

font-size: 40px;

color: #959595;

margin-left: 20px;

}

h3 {

padding-left: 50px;

padding-top: 50px;

}

h4 {

padding-left: 150px;

}

#video {

border: thin solid #6C6C6C;

width: 650px;

height: 420px;

color: #959595;

position: absolute;

top: 800px;

text-align: center;

padding-bottom: 20px;

margin-left: 500px;

}





页面效果如图5.59所示。


图5.59


(11) 下面来制作content3的内容，删除ID为content3的Div标签中的占位文本，插入3个Div标签，ID分别为content3_text、content3_img1、content3_img2，分别用于放置content3中的文本和图片。在代码中添加以下代码： 



<div id="content3">

<div id="content3_text"><h2>Think<hr></h2>

<div id="text3">有人喜欢钢琴那恬静的声音，他使人仿佛置身云雾中； 有人喜欢钢琴那铿锵有力的声音，他使人充满力量，仿佛平静的湖面上,被指腹敲起的一个个音符,坠落,荡起的一阵涟漪,却震撼着聆听者的内心。<br><br>生活就像一架钢琴,白键是快乐，黑键是悲伤。但是，没有黑键的钢琴不能合奏出美妙的音乐。你演奏出几分精彩，他就为你流淌出几分美妙。</div>

</div>

 <div id="content3_img1"><img src="images/3.jpg" width="500" height="250" alt=""/></div>

 <div id="content3_img2"><img src="images/4.jpg" width="500" height="250" alt=""/></div>

</div>





(12) 在CSS设计器面板中添加选择器#content3、#content3_text、h2、text3、#content3_img1、#content3_img2，并分别定义规则，代码如下： 



#content3 {

position: absolute;

top: 3700px;

}

#content3_text {

width: 900px;

height: 600px;

text-align: left;

margin-top: -400px;

}

h2 {

color: #CF5D8A;

font-size: 60px;

font-weight: lighter;

}

#text3 {

border: thin solid #6C6C6C;

width: 600px;

height: 250px;

color: #959595;

line-height: 30px;

margin-top: 100px;

}






#content3_img1 {

width: 500px;

height: 335px;

position: absolute;

bottom: 140px;

left: 650px;

}

#content3_img2 {

width: 500px;

height: 250px;

position: absolute;

top: 50px;

left: 250px;

}





页面效果如图5.60所示。


图5.60


5.7.3结尾区域和链接的制作
(1) 在content标签的后面插入ID为footer的Div标签，删除占位文本，输入版权信息“20172018 wiwi company版权所有”，然后定义CSS规则#footer，设置标签footer的外观，代码如下： 



#footer {

position: absolute;

top: 4100px;

width: 100%;

height: 30px;

text-align: center;

background-color: #000000;

padding-top: 15px;

}




(2) 下面为导航添加链接，将文本About、PlayList和Think分别链接到#content1、#content2和#content3，为文本Home添加空链接。
(3) 定义CSS规则a、a:link、a:visited和a:hover，设置链接的样式，代码如下： 



a {

color: #ffffff;

font-size: 20px;

}

a:link {

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #ffffff;

}

a:hover {

text-decoration: none;

color: #CF5D8A;

}





(4) 保存文档，在浏览器中浏览该网页，最终效果如图5.1所示。
 作业
一、 模拟练习
打开 “lesson05/模拟/05complete/index.html”文件进行预览，根据本章所述知识做一个类似的作品。作品资料已完整提供，获取方式见前言。
二、 自主创意
应用本章所学习知识，自主设计一个网站。
三、 	理论题
1. 	Dreamweaver中常用的列表类型有哪些？各有什么特点？
2. 	列举几种在网页中插入文本的方法。
3. 	在Dreamweaver文档中插入图像时需要注意什么？
4. 	在网页中通过<video>标签插入视频的优点是什么？