第2章 用Dreamweaver制作多媒体网页

在网页中，除了可以添加文本与图像外，还可以添加声音、Flash动画和视频等多媒体元素。本章通过介绍Flash动画、声音及多媒体元素的添加，让读者学会制作多媒体网页的方法，从而制作出精美的多媒体网页。

实例18 制作网站首页动画

包含知识

■插入Flash动画

■设置Flash动画属性

重点难点

■插入Flash动画

■设置Flash动画属性

制作思路

1打开素材网页文档“index.html”。

2将鼠标光标定位在如上图所示的位置。

1选择“插入记录-媒体-Flash”命令。

2在打开的“选择文件”对话框的“查找范围”下拉列表框中选择文件所在位置，在文件列表框中双击需要的Flash动画文件“index.swf”。

1在打开的对话框的“标题”文本框中输入“和谐包容”。

2单击“确定”按钮，完成Flash动画的插入。

1单击插入的Flash动画，选择它。

1在属性检查器的“对齐”下拉列表框中选择“居中”选项，使插入的Flash动画居中显示。

2选中“循环”复选框，使Flash动画能够循环播放；选中“自动播放”复选框，使其加载完网页后自动播放动画。

3在“垂直边距”及“水平边距”文本框中输入“0”，设置Flash与周围元素的间距，如上图所示。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

知识延伸

Flash动画一般是使用Flash软件进行制作的，它具有较强的视觉效果。

实例19 制作烟花绽放网页

包含知识

■插入Flash动画

■设置Flash动画背景透明

■复制与粘贴Flash动画

重点难点

■设置Flash动画背景透明

制作思路

1打开素材网页文档“lihua.html”，将鼠标光标定位在页面中。

2选择“插入记录-媒体-Flash”命令或单击“常用”选项卡中的“Flash”按钮，如上图所示。

1在打开的对话框中选择文件所在位置并双击需要的Flash动画“lihua.swf”，如上图所示。

1在打开的对话框中不进行任何操作，单击“确定”按钮，关闭对话框，完成Flash动画的插入操作。

1保持插入的Flash动画的选择状态。

2在属性检查器的“宽”和“高”文本框中分别输入“483”和“329”，单击“参数”按钮。

1在打开的“参数”对话框的“参数”列中输入“wmode”（即窗口模式）。

2在“值”列中输入“transparent”（即透明）。

3单击“确定”按钮，关闭对话框，完成Flash动画背景透明的设置。

1保持Flash动画的选择状态，按Ctrl+C组合键进行复制。

2将鼠标光标定位在Flash动画之后，按Ctrl+Ⅴ组合键进行粘贴。

3按Ctrl+S组合键保存网页文档。

4按F12键预览网页文档，其效果如上图所示。

知识延伸

单击“对象标签辅助功能属性”对话框下方的“请更改‘辅助功能’首选参数”超链接，在打开的对话框中可取消该对话框的显示。

注意提示

默认情况下，Flash动画是有背景颜色的，为了让浏览者看到动画下面的背景图像，需要设置Flash动画背景透明。

实例20 制作Flash按钮网页

包含知识

■插入Flash按钮

■设置Flash按钮属性

■修改Flash按钮属性

重点难点

■插入Flash按钮

■修改Flash按钮属性

制作思路

1将素材文件夹中的所有文件复制到“D:\”下，打开素材网页文档“index.html”。

2将鼠标光标移动到如上图所示的位置处并单击鼠标左键，定位鼠标光标。

1选择“插入记录-媒体-Flash按钮”命令，打开“插入Flash按钮”对话框。

2在“样式”列表框中选择需要的Flash按钮样式，在其上方的预览窗口中可看到其效果，如上图所示。

3在“按钮文本”文本框中输入“湖光山色”。

1在“字体”下拉列表框中选择“黑体”选项，在“链接”文本框中输入“sub1.html”，在“目标”下拉列表框中选择“blank”选项。

2单击“确定”按钮，关闭“插入Flash按钮”对话框。

1在打开的“Flash辅助功能属性”对话框中单击“确定”按钮，关闭该对话框。

1保持插入的Flash按钮的选择状态。

2在属性检查器中单击“参数”按钮，在打开的对话框中进行透明属性的设置，然后单击“确定”按钮。

1选择插入的Flash按钮并将其复制、粘贴到原按钮的下方。

2双击粘贴的Flash按钮，在打开的对话框的“按钮文本”文本框中输入“蓝天白云”，在“链接”文本框中输入“sub2.html”，在“另存为”文本框中输入“button2. swf”，单击“确定”按钮。然后，保存并预览网页文档。

实例21 制作Flash文本网页

包含知识

■插入Flash文本

■修改Flash文本

重点难点

■插入Flash文本

制作思路

1新建空白网页文档并将其保存在“D:\”下，在属性检查器中单击“居中对齐”按钮，Dreamweaver将自动创建一个Div标签。

2将鼠标光标定位在新创建的Div标签中，如上图所示。

1选择“插入记录-媒体-Flash文本”命令。

2在打开的对话框中对其字体、字号和转滚颜色进行如上图所示的设置，并在“文本”列表框中输入文本，然后单击“确定”按钮，插入Flash文本。

1选择插入的Flash文本。

2在属性检查器中单击“编辑”按钮。

1在打开的对话框的“链接”文本框中输入“kangzhen .html”。

2在“目标”下拉列表框中选择“self”选项，然后单击“确定”按钮，关闭对话框。

1按Ctrl+S组合键保存网页。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

知识延伸

双击插入的Flash文本，也可打开“插入Flash文本”对话框。但关闭该网页后，就不能对其进行修改了。

注意提示

插入Flash按钮和Flash文本的网页的名称及其所在的整个路径的各个文件夹的名称中都不允许有中文，否则将无法正常插入Flash按钮及文本。

实例22 制作Flash幻灯片页面

包含知识

■插入图像查看器

■设置图像查看器属性

■设置Flash元素属性

重点难点

■设置图像查看器属性

■设置Flash元素属性

制作思路

1将素材文件夹中的所有内容复制、粘贴到“D:\”下。

2打开素材网页文档“flashtu.html”，将鼠标光标定位到如上图所示的位置。

1选择“插入记录-媒体-图像查看器”命令。

2在打开的对话框中选择保存位置，并输入文件名称“flashtu”，然后单击“保存”按钮。

1在属性检查器中设置宽度及高度分别为“722”和“412”。

2单击“参数”按钮，在打开的对话框中单击按钮，在“参数”和“值”列中分别输入“wmode”和“transparent”，然后单击“确定”按钮，进行背景透明的设置。

1选择“窗口-行为”命令，打开“Flash元素”面板。

2单击“imageLinks”属性后面的文本框，删除其中的所有内容。

3单击“slideAutoPlay”属性后面的文本框，在出现的下拉列表框中选择“是”选项。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

1单击按钮，查看下一张图像，效果如上图所示。

实例23 制作大地震网页

包含知识

■插入Flash视频

■设置Flash视频属性

重点难点

■插入Flash视频

■设置Flash视频属性

制作思路

1打开素材网页文档“flv.html”。

2将鼠标光标定位到如上图所示的位置。

1选择“插入记录-媒体-Flash视频”命令，在打开的“插入Flash视频”对话框中单击“URL”文本框后面的“浏览”按钮。

1在打开的对话框的“查找范围”下拉列表框中选择文件所在位置，并双击文件列表框中的“10.5.flv”文件。

1返回“插入Flash视频”对话框，单击“检测大小”按钮，选中“自动播放”及“自动重新播放”复选框，单击“确定”按钮。

1保持插入的Flash视频的选择状态。

2在属性检查器的“外观”下拉列表框中选择“Clear Skin 3（最小宽度：260）”选项。

1按Ctrl+S组合键保存网页文档并按F12键进行预览，其效果如上图所示。

实例24 制作51电台网页

包含知识

■插入Shockwave影片

■设置Shockwave影片属性

重点难点

■插入Shockwave影片

■设置Shockwave影片属性

制作思路

1安装Shockwave插件后将素材文件夹中的所有文件复制到“D:\”下。

2打开素材网页文档“51.html”并将鼠标光标定位在如上图所示的位置。

1选择“插入记录-媒体-Shockwave”命令。

2在打开的对话框中选择文件所在位置并双击“1.dcr”文件。

1在打开的对话框中单击“请更改‘辅助功能’首选参数”超链接。

1在打开的对话框中取消选中“表单对象”、“框架”、“媒体”及“图像”复选框。

2单击“确定”按钮，关闭对话框。

1返回到“对象标签辅助功能属性”对话框中，单击“确定”按钮，插入Shockwave影片。

1在属性检查器的“宽”和“高”文本框中分别输入“324”和“276”，设置Shockwave影片的大小。

2保存网页文档并进行预览，其效果如上图所示。

实例25 制作跳跳小球网页

包含知识

■插入JavaApplet

■设置参数

重点难点

■设置参数

制作思路

◆定位鼠标光标

1安装Java虚拟机后，将素材文件夹中的所有内容复制到“D:\”下。

2打开素材网页文档“tiao.html”并将鼠标光标定位在如上图所示的位置。

1选择“插入记录-媒体-Applet”命令，在打开的对话框中选择JavaApplet小程序所在的位置。

2在文件列表框中双击需要的文件。

1保持插入的JavaApplet的选择状态，在属性检查器的“宽”和“高”文本框中分别输入“420”和“120”。

2在“替换”文本框中输入“跳跳小球真可爱”，单击“参数”按钮。

1在打开的“参数”对话框的“参数”列中输入“words”。

2在“值”列中输入“跳跳小球真可爱”。

3单击“确定”按钮，关闭对话框，完成JavaApplet的参数设置。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

注意提示

不同的JavaApplet的设置方法不同，包括参数的设置及参数值的设置等，要看其说明并根据说明进行修改。

举一反三

根据本实例介绍的方法，自行制作一个如下图所示的网页（源文件：\实例25\fire\fire.html）。

注意提示

要正常查看JavaApplet的效果，需要先在电脑中安装Java虚拟机；如果网页中有JavaApplet，但电脑中没有Java虚拟机，在浏览效果时则会提示从网络上下载安装Java虚拟机。

实例26 制作视频展播网页

包含知识

■插入AVI视频

■设置AVI视频属性

重点难点

■插入AVI视频

■设置AVI视频属性

制作思路

1打开素材网页文档“show.html”。

2将鼠标光标定位在如上图所示的位置。

1选择“插入记录-媒体-插件”命令，在打开的对话框中选择AⅤI视频所在的文件夹，在文件列表框中选择“9.avi”文件。

2单击“确定”按钮，插入AⅤI视频。

1保持插入的AⅤI视频的选择状态。

2在属性检查器的“宽”和“高”文本框中分别输入“700”和“200”，单击“参数”按钮。

1在打开的“参数”对话框的“参数”和“值”列中分别输入“autostart”和“true”。

2单击按钮，添加参数项，在“参数”和“值”列中分别输入“LOOP”和“true”。

3单击“确定”按钮，完成AⅤI视频参数的设置。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

知识延伸

参数“autostart”的作用是设置AVI视频是否自动播放，值“true”表示自动播放；若值为“false”，则表示不自动播放，浏览者需要单击播放器上的按钮才能开始播放。

参数“LOOP”表示是否循环播放，当值为“true”时，表示循环播放；当值为“false”时，表示不循环播放。

AVI视频还有许多参数，如“dir（”其值为“ltr”或“rtl”）、“hspace”（垂直边距，值为像素值，如0px）、“vspace”（水平边距，值为像素值，如0px）和“border”（边框，值为像素值，如0px）等。

实例27 制作手机音乐网页

包含知识

■添加背景音乐

重点难点

■添加标签

■设置bgsound标签属性

制作思路

1打开素材网页文档“music.html”。

2选择“插入记录-标签”命令。

1在打开的“标签选择器”对话框中展开“标记语言标签-HTML标签-页元素”选项。

2在右侧的列表框中双击“bgsound”选项。

1在打开的“标签编辑器”对话框中单击“源”文本框后面的“浏览”按钮。

1在打开的对话框中选择背景音乐所在的文件夹并在文件列表框中双击背景音乐文件“shibing.wav”。

1返回“标签编辑器”对话框，在“循环”下拉列表框中选择“无限”选项。

2在“音量”文本框中输入“250”，单击“确定”按钮。

3返回“标签选择器”对话框，单击“关闭”按钮。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中即可听到悦耳的背景音乐。

实例28 制作在线音乐网页

包含知识

■插入ActiveX

■设置ActiveX属性

重点难点

■设置ActiveX属性

制作思路

1打开素材网页文档“online.html”。

2将鼠标光标定位在如上图所示的位置。

1选择“插入记录-媒体-ActiveX”命令。

2在属性检查器中设置宽度和高度分别为“165”和“120”，在“基址”文本框中输入“download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0”，单击“参数”按钮。

1在打开的“参数”对话框中进行参数及值的设置，其参数分别为“movie”、“quality”、“wmode”及“menu”，对应的值分别为“mp3player.swf”、“low”、“transparent”及“false”。

2单击“确定”按钮。

1在属性检查器的“ClassID”下拉列表框中输入“clsid:D27CDB6E-AE6D-11cf-96B8-44455354 0000”。

2按Enter键，此时，属性检查器变为如上图下方所示的Flash属性检查器，同时，编辑窗口中的ActiveX图标也变为Flash图标。

1按Ctrl+S组合键保存网页文档。

2按F12键进行预览，效果如上图所示。

注意提示

要播放其他歌曲，应先将歌曲放置在“mp3”文件夹中，然后打开“mp3list.xml”文件进行编辑（如下图所示）。其中，I标签表示要指定一首mp3歌曲；n属性用于指定歌名；f属性用于指定对应的mp3文件地址；a属性为可选项，用于指定专辑名。

实例29 编辑音乐链接网页

包含知识

■创建音乐链接

重点难点

■创建音乐链接

制作思路

1打开素材网页文档“mdown.html”。

2选择“爱转角”行中的“下载”文本。

1单击属性检查器中的“链接”下拉列表框后面的按钮。

2在打开的对话框中选择音乐文件所在的位置并双击需要的音乐文件“love.mp3”，如上图所示。

1在属性检查器的“目标”下拉列表框中选择“blank”选项，完成音乐文件“下载”链接的创建，效果如上图所示。

1使用相同的方法完成其他“下载”链接的创建。

1按Ctrl+S组合键保存网页文档。

2按F12键预览网页文档，在“下载”链接上单击鼠标，如上图所示。

1在打开的页面中将使用默认的播放器播放音乐。

注意提示

由于各用户的电脑安装的软件及插件不同，因此单击“下载”链接时会有不同的表现。

实例30 制作猫鱼对白网页

包含知识

■打开“时间轴”面板

■添加关键帧

■调整动画

重点难点

■添加关键帧

■调整动画

制作思路

1打开素材网页文档“yu.html”。

2选择如上图所示的AP元素。

1选择“窗口-时间轴”命令，打开“时间轴”面板。

2将编辑窗口中选择的AP元素拖动到“时间轴”面板中，如上图所示，在打开的对话框中单击“确定”按钮。

3将鼠标光标移动到第15帧，按住鼠标左键不放并拖动鼠标到第80帧。

1将鼠标光标移动到第40帧，单击鼠标左键，选择该帧。

2在选择的帧上单击鼠标右键，在弹出的快捷菜单中选择“增加关键帧”命令，插入关键帧。

1将鼠标光标移动到AP元素上，当鼠标光标变为形状时按住鼠标左键不放向右水平拖动一小段距离，然后释放鼠标，移动AP元素。

1按Ctrl+S组合键保存网页文档。

2按F12键，在打开的IE浏览器中查看网页效果，如上图所示。

1稍等一会儿，笑脸图像移动到右侧，然后再移动到左侧，周而复始，不停地移动。