Web前端设计与开发技术-课件-第5章-精美内容网页的制作

Web前端设计与开发技术（HTML+CSS+JavaScript）江西农业大学计算机与信息工程学院主讲人：第5章精美内容网页的制作5.1网页复用5.2自制导航条5.3插入FLASH动画5.4插入HTML5Video和HTML5Audio5.5插入插件背景音乐5.65.7滚动条5.8上机练习

主页制作完之后，快速的制作内容网页，学会网页复用，提高制作内容网页的效率。除此之外，网页内容还可以加入Flash动画、音乐、JavaApplet等动态元素和网页特效，可以使网页更具动感效果、让网页更加精美。

本章主要介绍DreamweaverCC2018如何插入多媒体元素来设计精美内容网页；另外还要求读者掌握重复使用网页部分内容，从而提高内容网页的制作效率。学习目标

网页复用

在网页插入Flash动画

插入声音文件自制导航条插入其他媒体文件应用网页特效5.1网页复用一般来说网站的主页和内容网页，或者内容网页和目录的主网页之间总有一些地方是几乎不会变化的。那么那些几乎不会变化的部分就可以重复使用，提高制作内容网页的效率。

【例5.1】在已有主页的基础上，利用复用思维，创建内容网页。

进入站点，打开已有主页index.html文件。通过观察发现，网页最上方和最下方的内容在其他内容网页需要保留。

将不需要的内容删除，选择“文件”\“另存为”命令。为其取名“RGB01”，然后单击“保存”按钮。

此时，布局表格的最外层还在。适当调整表格各行的高度，进行内容网页布局。第二行用于放置整个网站的目录结构，也就是后续小节的自制导航条；第三行用于放置明确本页面所在网站的位置；第四行为页面的主体内容区域。

分别在网页位置和主体内容区域插入相应表格、文本、图像后，就可以快速得到一个内容网页的初稿。5.2自制导航条

DreamweaverCC2018取消了导航条功能，但是在网站设计的工作中，发现网站中的所有网页中都应该有一个像图书目录一样部分，用于全面了解网站目录结构，也方便快速跳转到所需的页面。因此，本书单列此小节，以保证网站使用的方便快捷。

文本导航条

导航条可以使用文本制作的一个目录，再加上后续超链接章节的内容就可以方便的实现跳转功能。

【例5.2】为例5.1制作的RGB01.html文件制作文本导航条。

打开RGB01.html网页文件，在预留做导航条的空白单元格插入表格。表格的行列根据网站目录结构设置，此处插入2行6列的表格。

选择“插入”\“Table”命令，弹出“Talbe”对话框，设置设置“行数”为“2”，“列”为“6”，“表格宽度”为“100%”，“边框粗细”为“0”，“单元格边距”为“0”，“单元格间距”为“0”。

调整外层单元格的高度，与所插入表格匹配。

分别在各个单元格输入网站规划时设定的目录名称，并设置为“粗体”。在学习后续章节超链接知识之后，就可以真正实现导航功能。

图像导航条

可以利用文本创建导航条，在事先准备好图像文件的前提下也可以用图像文件或鼠标经过图像创建导航条。

【例5.3】为某栏目创建该栏目的图像导航条。

参照上一小节的方法，删除主体内容，将网页位置修改为“第七章红色系”，上方表格中的文本导航暂时不变。

将空白区域的一个大单元格拆分成两列，左侧1列用于竖排若干导航图像，右侧1列则为主体内容区域。

此目录下，预计有8个页面，因此，左侧单元格内，嵌套一个9行1列的表格，第1行用于留白，其他8行用于安排竖向导航条。

展开右侧的“文件”面板，在“本地文件”栏目下找到“red”文件夹，双击展开，再进入“images”文件夹，可以看到事先准备好的导航图像正在其中。可以将“本地文件”中的图像文件图标直接拖放到对应的单元格中，完成插入图像文件的操作。

选中图像文件所在的整列表格，修改“水平”属性为“居中对齐”。到此为止，本栏目的图像导航条的制作完毕5.2插入Flash动画

Flash动画是网页上最流行的动画格式。Flash动画也是最常用的多媒体插件之一，它将声音、图像和动画等内容加入到一个文件中，并能制作较好的动画效果，同时使用了优化的算法将多媒体数据进行压缩，是文件变得很小，因此非常适合在网上传播。

认识Flash文件

FLA文件(.fla)是Flash的源文件，使用Flash创作工具创建。只能在Flash中打开。需要时，可以在Flash中打开FLA文件，然后将它发布为SWF或SWT文件以在浏览器中使用。

SWF文件(.swf)SWF文件是FLA(.fla)文件的编译版本，已进行优化，可以在Web上查看。SWF文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。

FLV文件(.flv)FLV文件是一种视频文件，它包含经过编码的音频和视频数据，用于通过Flash®Player进行传送。例如，如果具有QuickTime或WindowsMedia视频文件，可以使用编码器将该视频文件转换为FLV文件。

插入SWF文件

在“文档”窗口的“设计”视图中，将插入点放置在要插入内容的位置，选择“插入”\“HTML”\“FlashSWF”命令。在弹出的“选择SWF”对话框中，选择一个SWF文件(.swf)，并单击“确定”按钮。将在“文档”窗口中显示一个SWF文件占位符。

按F12预览该网页，在弹出确认保存网页文件的警告框之后，还会弹出“复制相关文件”对话框，DreamweaverCC2018提示正在将两个相关文件（expressInstall.swf和swfobject_modified.js）保存到站点中的Scripts文件夹。在将SWF文件上传到Web服务器时，不要忘记上传这些文件，否则浏览器无法正确显示SWF文件。

设置SWF文件属性

在DreamweaverCC2018中可以使用“属性”面板设置SWF文件的属性。这些属性也适用于Shockwave影片。选择一个SWF文件或Shockwave影片，然后在“属性”面板中设置选项。

FlashVideo视频

FlashVIdeo视频并不是Flash动画，它的出现是为了解决Flash以前对连续视频只能使用JPEG图像进行帧内压缩，并且压缩效率低，文件很大，不适合视频存储的弊端。FlashVIdeo视频采用帧间压缩的方法，可以有效地缩小文件大小，并保证视频的质量。在Dreamweaver中选择“插入”\“HTML”\“FlashVideo”命令，弹出“插入FLV”对话框。

【例5.4】新建一个网页文件，在合适的位置插入FLV视频文件。

新建一个空白网页文件。

选择“插入”\“HTML”\“FlashVideo”命令，在弹出的“插入FLV”对话框中选择文件。

在“文档”窗口可以看到FLV文件标记。5.3插入HTML5Video和HTML5Audio

允许在网页中插入HTML5视频Video和HTML5Audio，以使用户能够在浏览器中播放视频和音频文件，而无需使用外部增效工具或播放器。

插入HTML5Video

HTML5视频元素提供一种将电影或视频嵌入网页中的标准方式。

选择“插入”\“HTML”\“HTML5Video”。HTML5视频元素将会插入指定位置。

虽然可以在网页中嵌入任何视频，但“实时”视图并非始终呈现所有视频，往往只显示一个HTML5Video图标。DreamweaverCC2018使用AppleQuickTime增效工具来支持音频和视频标签。在Windows中，如果已安装AppleQuickTime插件，网页会呈现媒体播放器和媒体内容；否则不会呈现媒体内容。

插入HTML5Audio

HTML5音频元素提供一种将音频内容嵌入网页中的标准方式。选择“插入”\“HTML”\“HTML5Audio”。音频文件将会插入到指定位置，此时，“文档”窗口出现音频文件图标。5.4插入插件

现在浏览器支持的多媒体文件越来越多，文件也越来越小，但是表现的效果却一点也不逊色以前。允许在网页中通过插入插件的方式嵌入音频和视频。

网页中的音频格式

MP3格式最大的特点就是能以较小的比特率，较大的压缩比达到近科完美的CD音质。

WAV格式具有较好的声音品质，许多浏览器都支持此格式，并且不要求安装插件。

AIF格式AIF格式的音频文件也具有较好的声音品质，容量通常较大。

MIDI格式

.ra、.ram、.rpm或RealAudio

具有非常高的压缩比，文件大小比MP3小。歌曲文件可以在合理的时间这种格式一般用于器乐类的音频文件。范围内下载。必须下载并安装RealPlayer软件才能播放。插入音频

要在网页中加入声音，选择“插入”\“HTML”\“插件”命令，弹出“选择文件”对话框，选中要插入的音频文件，单击“确定”按钮即可。在“文档”窗口的“设计”视图，只能看到插件图标，并不会显示播放声音的状态。只有在实时预览时才能看到播放器。

插件的默认“宽”和“高”的值均为“32”。因此，在实时预览只能看到播放器的部分，那么需要对插件修改大小，以便网页中能完整显示播放器。修改插件大小可以直接用鼠标拖放插件的定位标尺，也可以在“属性”面板设置“宽”和“高”属性的值为合适大小。网页中的视频格式

1．

2．

3．

4．

5．AVI格式MOV格式（QuickTime）MPEG/MPG/DAT格式RM(RealMedia)格式ASF(AdvancedStreamingFormat)格式插入视频

选择“插入”\“HTML”\“插件”命令，弹出“选择文件”对话框，选中要插入的视频文件，单击“确定”按钮即可。在“文档”窗口的“设计”视图，只能看到默认32*32像素大小的插件图标，因此必须拖放插件大小，以便完整播放视频的需要。5.5背景音乐

插件隐身

设置背景音乐

在<body>标签后输入“<”,在下拉列表中选择“bgsound”标签5.6滚动条

插入滚动条

<marquee>这里是滚动条</marquee>

【例5.5】新建一个网页文件，在文档中插入一张图片，并使图片滚动起来。

新建一个网页文件，在文档中插入一张图片。

选择“查看”\“代码