网页设计与制作 第12章 插入网络组件和多媒体.ppt

1、第12章,插入网络组件和多媒体,本章导读,本章介绍如何使用网络组件和多媒体：主要内容包括Flash对象、Java Applet程序、Flash视频、背景音乐、ActiveX 控件、Shockwave对象等插件在网页中应用。,本章要点,Flash对象的使用 Flash视频的使用 Java Applet程序的使用 背景音乐的使用 ActiveX 控件的使用 Shockwave对象的应用,在网页制作中，除了使用文本和图像这两个重要的元素以外，动画和声音的适当运用也可使网页更加丰富多彩。应用Dreamweaver 8，可以在网页中插入Flash动画、Flash按钮、Flash文本、Applet程序、A

2、ctiveX控件和背景音乐，以及利用插件在网页中插入音频等。,12.1 插入Flash对象,网页中的动画一般有两种形式：一种是GIF动画，由若干个JPEG或GIF图片轮换而成；而另一种则是由Flash软件制作的SWF动画文件。Flash动画以其文件小、效果绚丽，并生成矢量动画而成为网页制作中不可或缺的元素，被越来越多地应用于网页制作中。同时，Flash动画的制作质量更成为衡量一个网站制作水平高低的标准。因此，将网页的动画制作成为Flash成为广大设计师的首选。,12.1.1 插入Flash动画,下面以实例说明如何把Flash动画插入到网页中，具体步骤如下： （1）将光标定位于文档中表格的单元格

3、中，如图1所示。,图1：,（2）选择菜单命令【插入】媒体】Flash】，弹出【选择文件】对话框，如图2所示。,图2：,（3）在对话框中选择要插入的Flash动画文件。 （4）单击【确定】按钮，在接下来的【对象标签辅助功能属性】对话框中设置标题，如图3所示。,图3：,（5）单击【确定】按钮，在文档中插入动画，Flash动画在文档中显示为一个灰色框，如图4所示。,图4：,（6）单击插入的Flash动画，在【属性】面板中设置相关属性，此时【属性】面板如图5所示。,图5:,（7）在【属性】面板左上角直接显示了Falsh的文件大小，在下部的文本框中可以设置插入Falsh的名称，在此设置为“在线动画”。

4、（8）选中“循环”复选框，则该动画将在页面浏览时连续播放，如不选中则该动画只播放一次，默认为选中状态。 （9）选择“自动播放”复选框，可以设置在浏览网页时动画是否同时播放，默认为选中状态。 （10）在【属性】面板中可以设置Flash文件的宽、高以及垂直边距、水平边距。 （11）单击【编辑】按钮可以使用Flash编辑器对该Flash动画进行编辑，单击“重设大小”按钮，可以设置Flash动画的宽度和高度为实际大小。,（12）通过设置【品质】下拉列表框中的选项，可以设置Flash动画画面的品质，此处有低品质、自动低品质、自动高品质、高品质4个选项，默认是高品质。 （13）在【比例】下拉列表框中有3种

5、比例可选，即默认（全部显示）、无边框和严格匹配，默认是全部显示，可以根据实际需要进行设置。 （14）设置Flash动画的对齐方式，在此提供了默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部8种对齐方式。 （15）设置动画的背景颜色，当动画没有显示出来时在动画的位置显示背景颜色。 （16）单击【播放】按钮，可以在Dreamweaver 8的文档视图中直接测试播放当前动画，此时按钮变为【停止】，单击此按钮则停止播放动画。,12.1.2 插入Flash按钮,为了使不会使用Flash的用户同样可以制作出具有专业效果的Flash按钮或者文本，Dreamweaver 8中内置了制作Flash按

6、钮和文本的功能，应用其内置的样式可以制作精美的Flash按钮，具体步骤如下： （1）定位于要插入Flash按钮的位置，如图6所示。,图6:,（2）选择菜单命令【插入媒体Falsh按钮】，打开【插入Flash按钮】对话框，如图7所示。,图7:,（3）对话框种各参数的设置如下： 范例：可以通过【范例】右侧的窗口直接预览Flash按钮的动画效果； 样式：通过选择样式的名称，可以在范例右侧窗口中显示Flash按钮的样式； 按钮文本：可以设置按钮上的文本内容，此处输入“Enter MySite”； 字体：选择所写文本内容的字体； 大小：设置文本内容的大小； 链接：设置Flash按钮的链接路径，也可以单击

7、“浏览”按钮，选择链接文件的路径和名称；,目标：设置链接的打开方式，有_blank，_parent，_self，_top4种，此处选择_parent； 背景色：设置Falsh按钮的背景颜色，此处设为#999999； 另存为：设置生成的Flash按钮的文件名称，此处设为enter.swf。 （4）设置完成的对话框如图8所示。,图8:,（5）单击【确定】按钮，关闭当前对话框，在弹出的【Flash辅助功能属性设置】对话框中设置标题为【进入站点】，如图9所示。,图9:,（6）保存文档，在浏览器中预览网页，效果如图10所示。,图10:,12.1.3 插入Flash文本,在Dreamweaver 8中，不

8、但可以在文档中插入Flash按钮，还可以用Dreamweaver 8内置的样式直接插入Flash文本，具体的操作步骤如下： （1）定位于要插入Flash按钮的位置，选择菜单命令【插入媒体Flash文本】，打开【插入Flash文本】对话框，如图11所示。 （2）对话框中各参数设置如下： 文本：在文本框中输入要插入的Falsh文本内容，此处设置为Skip； 字体：在下拉列表中选择Flash文本的字体，此处设为宋体； 大小：在文本框中设置Flash文本的大小，值为像素，此处设为20； 颜色：设置Flash文本的颜色，可以在文本框中直接输入颜色值，也可以通过单击【颜色选择器】按钮选择文本的颜色，此处设

9、为#CCCCCC； 转换颜色：设置Flash文本的鼠标经过时的颜色，设置方法同上，此处设置为#FF6633；,文本：在多行文本框中设置Flash文本内容，最好为英文； 链接：设置在单击时的链接路径，此处设置为index.htm； 目标： 设置链接的方式，有4种链接的方式可选择，即_blank、_parent、_self、_top； 背景色：设置Flash文本的背景颜色，此处设置成同网页背景同色； 另存为：设置Flash文本生成后的文件名，此处设置为test.swf。,图11:,（3）各参数设置完毕的对话框如图12所示。,图12:,（4）单击【应用】按钮，在文档中可以看到Flash文本插入后的效

10、果，确认效果后，单击【确定】按钮，弹出【Flash辅助功能属性】对话框，设置标题为“跳过动画直接进入主页”，如图13所示。,图13:,（5）单击【确定】按钮，在文档种插入Flash文本，此时预览效果如图14所示。,图14:,（6）如果想修改当前插入的Flash文本，只需在文档窗口中选中Flash文本对象，然后双击或者在属性面板中单击【编辑】按钮，即可在弹出【插入Flash文本】对话框中设置。 （7）选中Flash文本，单击【属性】面板中的播放按钮，可在文档中测试Flash文本的预览效果，单击【停止】按钮停止播放。,12.2 插入Java Applet程序,现在互联网上已经有很多编写好的Java

11、程序，它可以很方便的实现一些HTML语言无法实现的功能，如果把它们插入到网页中，就可以制作出更加丰富多彩的网页，以吸引读者的浏览，具体的操作步骤如下： （1）定位于要插入Java Applet的位置，选择菜单命令【插入媒体Applet】，在弹出的【选择文件】对话框中选择class文件，如图15所示。,图15:,（2）单击【确定】按钮，弹出【Applet辅助功能属性】对话框，设置【替换文本】和【标题】文本框中的内容，如图16所示。,图16:,（3）单击【确定】按钮，在文档中插入Java Applet的小程序，该程序以图表形式显示，如图17所示。,图17:,（4）选中Applet图标，可以在其【属

12、性】面板中进行设置，如图18所示，各项参数设置如下：,图18:,Applet名称：在【属性】面板左上角的文本框内设置Applet的名称； 宽和高：设置Applet程序的宽度和高度； 代码：设置Applet程序的所在路径； 基址：设置Applet程序所在的文件；。 对齐：设置Applet的对齐方式，有默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐和右对齐等； 替换：设置Applet在无法显示时替换的文本； 垂直边框：设置Applet程序距离上下元素的距离； 水平边框：设置Applet程序距离左右元素的距离； 参数：单击该按钮，可以对插入的Applet程序进行进一步详细的设置

13、，单击后弹出的【参数】对话框，如图19所示。,图19:,（5）保存文件，按F12预览该网页，如图20所示。,图20:,12.3 插入Flash视频,Flash视频是一种流媒体格式文件，它是Macromedia公司随Flash系列产品推出的一种产品，运用Flash软件可以将各类视频文件转换成Flash视频文件，然后再用Flashplayer进行播放，现在很多网站都有可以让浏览者直接观看的视频，如视频直播、播放影像文件等。视频文件可以直接插入到网页中，但只有在浏览器安装了相应的插件后才可以播放。因此一般在网页中插入视频时，大多采用多数浏览器支持的Windows Media Player播放器，可以

14、在页面中设置播放器的外观，包括播放器的播放、暂停、前进、后退、开始、结束等控制按钮，具体的操作步骤如下： （1）定位于要插入视频的位置，选择菜单命令【插入媒体插件】，弹出【选择文件】对话框，选择要插入的文件，如图21所示。,图21:,（2）单击【确定】按钮，将视频文件插入到文档中，并设置相应的高度和宽度，此时该视频以插件图标显示，如图22所示。,图22:,（3）保存文件，在浏览器中观看插件视频的效果，如图23所示。,图23:,（4）此时采用的都是默认的播放样式，单击【属性】面板中的【参数】按钮，在打开的【参数】对话框中可以进行更详细的参数设置，如图24所示。,图24:,12.4 插入背景音乐,

15、带背景音乐的图片能增加吸引力，可以使用行为实现这种网页，也可以使用插件实现，但是在添加音乐时要注意控制文件的大小，因为它会导致网页加载时间变长。 添加背景音乐的格式一般以WMV、MP3、MID格式为主。MID格式的音乐因其文件小、反应快、可重复播放等特点而成为网页中默认的背景音乐格式；而MP3则是压缩率最高、音质最好的文件格式。添加背景音乐的步骤如下： （1）将文档切换到代码视图，将光标定位于标记的下一行代码处，如图25所示。,图25:,（2）在光标处书写以下代码“”，如图26所示。,图26:,（3）保存文档，在浏览器中查看效果，打开音箱即可听到背景音乐。,12.5 插入ActiveX 控件,

16、ActiveX控件是一种可以再利用的控件，在网页中插入ActiveX控件，可以很快地在网址、应用程序和开发工具中加入特殊的功能。目前ActiveX控件可以在大部分的操作系统中运行，在网页中插入ActiveX控件的步骤如下： （1）定位于要插入ActiveX控件的位置，选择菜单命令【插入媒体ActiveX】，弹出【对象标签辅助功能属性】对话框，在对话框中设置标题，如图27所示。,图27:,（2）单击【确定】按钮，在当前文档中插入ActiveX控件，文档中显示出ActiveX控件的图标，如图28所示。,图28:,（3）选中ActiveX控件图标，在【属性】面板中设置控件的属性，如图29所示。,图2

17、9:,属性面板中各项参数的设置如下： 控件名称：ActiveX下面的文本框用来设置控件的名称，此处设置为Soft； 宽和高：用来设置ActiveX控件的宽度和高度，必须为数值，单位是像素； ClassID：下拉列表中有4种选择，为浏览器标识ActiveX控件，在页面加载时，浏览器用ClassID来确定它与该页面相关的ActiveX控件所需的ActiveX控件位置，如果选择了Shockwave for Director 6，则当前的ActiveX控件就变成了Shockwave属性面板，可以对Shockwave属性进行设置；如果选择了Shockwave for Flash，则当前的ActiveX控

18、件就变成了Flash面板，可以对Flash属性进行设置； 嵌入：选中【嵌入】复选框，可以在源文件的文本框中设置ActiveX控件的源数据文件，在此不选中此复选框；,对齐方式：提供了10种对齐方式，包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐，在此选中默认值； 垂直边距：设置ActiveX控件距离上下网页元素的距离； 水平距离：设置ActiveX控件距离左右网页元素的距离； 基址：设置ActiveX控件的路径，如果浏览者的浏览器没有安装设置ActiveX控件，则浏览器可以自动从该路径下载提示用户安装，在此设置为activex； 编号：设置ActiveX控件的编

19、号，在此设为0012； 数据：指定ActiveX控件的数据文件，根据需要进行设置，很多的ActiveX控件不需要设置数据文件； 替换图像：设置当ActiveX控件无法显示时，用来替代ActiveX控件的图像； 播放：单击该按钮，可以在Dreamweaver 8文档视图中预览该控件的显示效果； 参数：单击该按钮，可以设置ActiveX控件的参数，可以对其进行初始化等设置。 （4）保存文件，在浏览器中预览插入ActiveX控件后的效果。,12.6 插入Shockwave对象,Shockwave是Macromedia公司的网上交互多媒体的标准，它是一种压缩了的媒体格式，集图像、动画、声音于一体，样式多彩、易于使用，在绝大多数的浏览器中可以快速下载和播放，因此是网上非常流行的一种多媒体播放形式，而Shockwave播放器既可作为浏览器的插件，也可以作为ActiveX控件来使用，在网页中插入Shockwave的步骤如下： （1）将光标定位于要插入Shockwave动画的位置，选择菜单命令【插入媒体Shockwave】，打开【选择文件】对话框，选择.dcr文件的路径，如图30所示。,图30:,（2）单击【确定】按钮，在弹出【对象标签辅助功能属性】对话框中设置标题为“Shock