中文版DreamweaverMX2004网页制作培训教程11为网页加入动态元素课件

《中文版DreamweaverMX2004网页制作培训教程11为网页加入动态元素课件》由会员分享，可在线阅读，更多相关《中文版DreamweaverMX2004网页制作培训教程11为网页加入动态元素课件（76页珍藏版）》请在金锄头文库上搜索。

1、向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束第十一课 为网页加入动态元素 课前导读课堂讲解课后练习向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束课前导读基础知识重点知识向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束基础知识 各种媒体的插入方法、音乐的加入、媒体的播放方法。 向下向下向上向上末页末页

2、首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束重点知识 不同媒体相关参数的具体设置，系统集成Flash按钮和文本的插入，加入音乐的技巧。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束课堂讲解各种媒体的来源 插入Flash媒体元素 插入其他动态元素 为网页加入音乐 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 离开丰富多

3、彩的媒体，网页的内容将会显得十分单调。利用Dreamweaver MX 2004可以方便地插入各种媒体，例如Flash动画、Shockwave动画、ActiveX控件以及Applet等。在Dreamweaver MX 2004的文档窗口中可以启动相应媒体的外部编辑器来编辑这些媒体，还可以为这些媒体附加设计笔记，便于查看和共享。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束各种媒体的来源 系统集成 网络下载从素材库导入 自己制作 向下向下向上向上末页末页首页首页中文版Dreamweaver MX

4、 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 丰富多彩的媒体给网页带来了非凡的效果，这些媒体的来源主要有系统集成、网络下载、从素材库导入以及自己制作等。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束系统集成 在Dreamweaver MX 2004中集成了许多Flash按钮，可以在Dreamweaver MX 2004页面中方便地插入Flash按钮和Flash文本。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调

5、音调音返回返回南通大学计算机 学院 王则林结束结束网络下载 大多数的媒体在Dreamweaver MX 2004中并没有集成，这时可以通过网络来下载。提供各种媒体下载的网站非常多，如果不知道具体的网址，可通过google、百度等搜索引擎搜索，在此提供几个网址以供参考。虽然网络上的媒体异彩纷呈，下载后便可使用，非常方便，但如需作商业用途，则请参照相关的版权信息，以免引发版权纠纷。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 素材精品屋 动态网站制作指南 网页特效集锦 3lian素材 Jav

6、a网站 Macromedia公司的 一个交互性娱乐服 务网站向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束从素材库导入 对于受限于网络速度的用户，只好放弃下载这个方便的途径了。现在市面上有许多网页制作的素材库，通过购买即可获得。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束自己制作 当网上下载和购买的一些媒体，如Flash动画等无法满足需求时，自己制作则不失为一个好办法，但这就要求用户要有一定的美

7、术、编程基础。各种媒体的制作软件都不同，Flash动画当然是使用Macromedia Flash软件来制作的。Shockwave影片可以通过Macromedia Director来创建。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入Flash媒体元素 插入Flash影片插入Flash按钮 插入Flash文本 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 Flash动画是一种高品质的矢量动画，

8、它由Macromedia公司的Flash动画制作软件创建，目前已经成为Internet上矢量动画的标准，是制作网上矢量图形和动画的首选软件。Flash、Dreamweaver和Fireworks并称为Macromedia公司的网络三剑客。两款主流浏览器Internet Explorer和Netscape Navigator对Flash动画都提供了较好的支持。在Internet Explorer中可以通过ActiveX来实现，而在Netscape Navigator中可以通过插件来实现。另外，目前最新版本的Internet Explorer 6.0和Netscape Navigator 6.0都

9、已经内置了用于播放Flash动画的播放器。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 Flash文件主要有以下3种类型。*.fla：Flash文件，只能在Flash中打开，不能在Dreamweaver MX 2004或浏览器中打开。必须在Flash中将其导出为SWF或SWT格式的文件，才可以在浏览器中播放。*.swf：压缩格式的Flash文件，是用于网络中的最优格式文件，可以在浏览器和Dreamweaver MX 2004中播放，但是不能在Flash中打开并编辑。使用Dreamweaver

10、MX 2004集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 *.swt：这种类型的文件允许编辑Flash动画文件中的信息。这些文件用在Flash按钮对象中，可以利用自己的文本或链接来修改模板，创建自己的SWF来插入到设计视图中。可以在Dreamweaver MX 2004/Configuration/ Flash Objects/Flash Buttons and Flash Text文件夹中查看这些文件。向下向下向上向上末页末

11、页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入Flash影片 插入Flash影片的具体操作如下。 （1）将光标定位到页面中要插入Flash影片的位置。 （2）在插入栏的“常用”选项卡中单击媒体右侧的按钮 ，在弹出的列表框中选择“Flash”选项，如图11-1所示，或选择插入媒体Flash菜单命令打开如图11-2所示的“选择文件”对话框。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束43 图11-1图11-2向下向

12、下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）在“查找范围”下拉列表框中查找要插入的Flash播放文件（格式为：*.swf）所在的位置。 （4）从文件列表框中选择需要的Flash文件，如选择banner文件。 （5）单击 按钮，如果所选文件不在当前文档的站点中，系统会打开如图11-3所示的“询问”对话框。 （6）单击 按钮，在打开的“复制文件为”对话框中保存选择的Flash文件，如图11-4所示。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调

13、音调音返回返回南通大学计算机 学院 王则林结束结束图11-38 图11-4向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （7）单击按钮后即可将Flash影片插入到页面中，如图11-5所示。 （8）单击插入的Flash影片，“Flash影片”属性面板如图11-6所示。图11-5图11-6向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 可以在Flash影片的属性面板中设置其相关的属性。其中各参数含义

14、如下。Flash：用于设置Flash影片的名称，以便在脚本中引用。宽和高：用于设置Flash影片的宽度和高度。可在数值框中直接输入数值改变其大小，也可以通过在页面中拖动缩放手柄来改变其大小。宽度的默认单位是Pix（像素），也可以采用pc（l2点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或者这些单位的组合（如3in+1cm）。文件：用于设置Flash影片文件的路径。可直接在文本框中输入文件路径，也可以单击 图标，打开“选择Flash文件”对话框来选择需要的源文件，还可以直接拖动 按钮到需选择的Flash文件图标处。 向下向下向上向上末页末页首页首页中文版Dreamweaver

15、MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束源文件：用于指定Flash影片源文件。若要编辑Flash影片，则需指定其源文件。对齐：用于设置影片的对齐方式。可以从下拉列表中选择。有默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐10个选项。背景颜色：用于设置影片区域的背景颜色。垂直边距和水平边距：用于设置影片上下和左右空白区域的像素值，可以在数值框中输入单位是像素的间距值。它实际上设置的是标记的hspace属性。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学

16、计算机 学院 王则林结束结束品质：用于设置Flash影片的显示质量。在其下拉列表框中有“高品质”、“低品质”、自动高品质和自动低品质4个选项。“高品质”将有最好的影片质量，但是需要高速处理器；“低品质”表示着重显示的速度，而不是显示的质量；“自动低品质”表示显示的开始更着重显示速度，但是随后会尽可能地提高显示质量；“自动高品质”表示开始显示时速度和质量并重，但是随后会尽可能地提高显示速度，而降低显示质量。比例：用于设置Flash影片的显示比例。有“全部显示”、“无边框”和“严格匹配”3个选项。全部显示与无边框显示只是一部分动画可能会被剪掉；严格匹配则会显示全部对象，但是可能会失真。向下向下向上

17、向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 ：选中该复选框，则影片会循环播放。 ：选中该复选框，则当装载网页时即自动播放动画。 ：单击该按钮将自动打开Flash软件对源文件进行处理，但要确定有源文件，并已经在源文件属性中指定了其路径。 ：用于恢复Flash影片的原始尺寸。 ：用于在设计视图中播放Flash影片。 ：用于打开“参数”对话框，在该对话框中可以输入一些附加参数。类：用于为Flash影片提供一种样式。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程

18、调音调音返回返回南通大学计算机 学院 王则林结束结束 （9）在属性面板中单击 按钮，插入的Flash影片即可在设计视图中进行播放，如图11-7所示。这时按钮变为 ，单击它则停止播放。图11-7向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 在这里讲解的Flash按钮是指Dreamweaver MX 2004集成的动态按钮。在Dreamweaver MX 2004中也可以插入自已制作的Flash按钮，方法与插入Flash影片类似，这里不再赘述。 插入Flash按钮的具体操作如下。 （1）将光标定位

19、到页面中要插入Flash按钮的位置上。 （2）在如图11-1所示的列表中选择“Flash按钮”选项，打开“插入Flash按钮”对话框，如图11-8所示。插入Flash按钮 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）在“样式”下拉列表框中选择需要的按钮样式后在“范例”栏中将显示出所选样式的效果。如在列表中选择Blip Arrow选项，则范例效果如图11-9所示。 图11-8图11-9向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返

20、回返回南通大学计算机 学院 王则林结束结束 （4）在“按钮文本”文本框中输入要在按钮上显示的文本，如“进入”。 （5）在“字体”下拉列表框中选择按钮文本的字体，在“大小”数值框中输入字号。 （6）在“链接”文本框中指定按钮所要链接文档的URL地址。 （7）在“目标”下拉列表框中选择所链接文件的打开方式。 （8）在“背景色”下拉列表中设置Flash按钮的背景色。 （9）在“另存为”文本框中输入保存的路径，最好保存到当前页面站点的图像文件夹中，到此设置就完成了。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则

21、林结束结束 （10）单击 按钮将设置的Flash按钮插入到当前位置，如图11-10所示。 （11）单击插入的Flash按钮，在其属性面板中编辑相关的属性，如图11-11所示。如果要修改Flash按钮的名称、外观等参数时，可双击插入的Flash按钮或单击其属性面板中的 按钮打开“插入Flash按钮”对话框，更改其设置即可。图11-10图11-11向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （12）如果在页面中调整了Flash按钮的大小，又想恢复原大小时，可单击属性面板中的按钮 。 （13）单击

22、 按钮播放，当鼠标移到按钮上时就会看按钮的动态效果。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入Flash文本 插入Flash文本与插入Flash按钮一样，是指Dreamweaver MX 2004中集成的文本动画。插入Flash文本的具体操作如下。 （1）将光标定位到页面中要插入Flash文本的位置上。 （2）选择“Flash文本”选项，打开如图11-12所示的“插入Flash文本”对话框。 （3）在“文本”文本框中输入要显示的文本，如输入“CSkin美容空间引领时尚潮流”。 （4）选中

23、 复选框，在文本框中将显示所设置文本字体的效果。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （5）在“字体”下拉列表框中选择文本的字体，在“大小”文本框中输入文本的大小，如设置字体为“隶书”，字号为“30”。 （6）单击 按钮设置字体为粗体或斜体样式。 （7）单击 按钮设置文本段落的对齐方式。 （8）在“颜色”文本框中选择文本的正常显示颜色，如设置颜色代码为“#330099”。在“转滚颜色”文本框中设置文本的效果颜色，如设置颜色代码为“#990000”。 （9）在“链接”文本框中设置与Fla

24、sh文本相链接的文件，也可不设置。 （10）在“目标”下拉列表框中指定所链接文件的打开方式。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （11）在“背景色”中设置Flash文本的背景颜色。 （12）在“另存为”文本框中指定Flash文本的保存路径，如输入“text1.swf”，设置完成后的对话框如图11-13所示。 图11-12图11-13向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （13

25、）单击 按钮将设置的Flash文本插入到页面中，如图11-14所示。 （14）在页面中单击插入的Flash文本，在其属性面板中可进行相应的设置。 （15）单击 按钮播放，当鼠标移到文本上时就会看到文本的动画效果。图11-14向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入其他动态元素 插入Shockwave影片 插入Applet 插入ActiveX控件 插入插件 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院

26、王则林结束结束 Dreamweaver不仅支持Flash动画，还支持如Shockwave影片、Applet等媒体。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入Shockwave影片 Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。 在Dreamweaver MX 2004中插入Shockwave影片的具体操作如下。 （1）将光标置于页面中要插入Shockwave影片的位置上。 （2）选择插入媒

27、体Shockwave菜单命令，也可以在插入栏的“常用”选项卡中单击媒体右侧的 按钮，在弹出的列表框中选择“Shockwave”选项，打开“选择文件”对话框。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）选择要插入的Shockwave影片文件，同时在对话框中可以设置URL的类型。 （4）单击 按钮，即可将影片插入到页面中，Shockwave影片插入到页面中将以一个图标的形式显示，如图11-15所示。图11-15向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网

28、页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （5）单击Shockwave影片的图标，在如图11-16所示的属性面板中设置其属性。其属性参数与Flash的属性参数基本相同，只是少了源文件、品质、比例和自动播放等内容，也无法启动编辑器对其进行编辑。图11-16向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入Applet 为了使网页更加引入注目，经常需要制作一些特殊效果，用由美国SUN公司开发的Java语言可以实现这些特殊效果。Applet是Java的小应用程序，它是动态、

29、安全、跨平台的网络应用程序。Java Applet被嵌入到HTML语言中，编写一些Applet放在网页中，可以实现较为复杂的控制，也可以实现各种各样的效果。 插入Applet的具体操作如下。 （1）将光标定位到页面中要插入Applet的位置。 （2）选择插入媒体Applet菜单命令，也可以在插入栏的“常用”选项卡中单击媒体右侧的 按钮，在弹出的列表框中选择“Applet”选项，打开“选择文件”对话框。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）设置完毕后，单击 按钮即可将Applet插

30、入到页面中。插入页面中的Applet以一个图标的形式显示在页面中，如图11-17所示。 （4）单击页面中的Applet图标，可以在如图11-18所示的属性面板中设置其相应的属性。其大多数属性参数与Flash影片的属性参数类似，这里不再重复，其中代码、基址、替代等属性参数是Applet独有的，其具体含义如下。 图11-17图11-18向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束代码：在该文本框中可以指定Applet的文件名称。可以通过单击 图标，打开“选择文件”对话框来选择想要的源文件，还可以拖

31、动 按钮到需选择的Applet文件图标即可。基址：该文本框被自动填充Applet文件所在的文件夹路径。此文本框的内容同代码文本框的内容一起构成Applet文件的URL地址。替代：在该文本框中可以指定Applet的替换内容。当浏览器不能运行Applet时，则会显示这里设置的内容。可以是一段普通的文本，也可以是一幅图像，文本可直接在文本框中输入，若是图像则需指定其路径。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入ActiveX控件 ActiveX控件是Microsoft对浏览器的能力扩展，A

32、ctiveX控件的作用和插件是相同的，但两者也存在着差异，载入网页时，如果浏览器不支持ActiveX控件，浏览器会自动安装所需软件，如果是插件，则需用户找到相关的软件进行安装。 插入Applet的具体操作如下。 （1）将光标定位到页面中要插入ActiveX的位置。 （2）选择插入媒体ActiveX菜单命令，也可以在插入栏的“常用”选项卡中单击媒体右侧的按钮，在弹出的列表框中选择ActiveX选项，即可将ActiveX插入到页面中。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）插入页面中的

33、ActiveX以一个图标的形式显示在页面中，如图11-19所示。 （4）单击页面中的ActiveX图标，可以在如图11-20所示的属性面板中设置其相应的属性。其中Class ID、嵌入、替代图像等属性参数是独有的，其具体含义如下。图11-19图11-20向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束Class ID：用于设置ActiveX控件在浏览器中的标识。当网页被载入时，浏览器会根据标识值为页面上关联的ActiveX对象定位所需的ActiveX控件，如果该控件尚未被安装，则浏览器会尝试从基址

34、所指定的位置上下载。嵌入：选中 复选框，则使Dreamweaver MX 2004会在ActiveX控件的标记中添加标记。如果在ActiveX控件中出现了对应Netscape Navigator插件对象，则可以由这里的标记激活插件，实现ActiveX控件的功能。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束源文件：如果选中 复选框，则可以在该区域定义被Netscape Navigator浏览器插件所使用的数据文件地址。如果不输入数据，则Dreamweaver MX 2004会尝试从现有的Act

35、iveX控件属性中提取该值。基址：用于设置包含ActiveX控件的URL地址。如果该控件尚未被安装到用户的系统中，则在浏览网页时，会自动从该地址处下载此控件。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束ID：用于设置可选的ActiveX的ID参数，该参数主要用于在ActiveX控件之间传递信息。数据：该域用于设置ActiveX控件所载入的数据文件。大多数类型的控件，例如Shockwave和RealPlayer，都不需要使用该参数。替代图像：该域用于设置ActiveX控件对象替换图像URL地址

36、，用于当浏览器不能运行该对象时，显示这里的替换图像。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插入插件 如果想在浏览器中访问更多类型的媒体对象，就必须借助于插件，前面所介绍的Shockwave就是插件中的一员。插件的类型主要有对象类、命令类、行为类、组件类4种，这里讲解的是对象类插件。为了叙述方便，在此简称为插件。 插入插件的具体操作如下。 （1）将光标定位到页面中要插入插件的位置。 （2）选择插入媒体插件菜单命令，也可以在插入栏的“常用”选项卡中单击媒体右侧的 按钮，在弹出的列表框中选择

37、“插件”选项，则打开“选择文件”对话框。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 （3）设置完毕后，单击 按钮即可将插件插入到页面中，插件以一个图标的形式显示在页面中，如图11-21所示。 （4）单击页面中的插件图标，可以在如图11-22所示的属性面板中设置其相应的属性。其中插件URL、边框、参数3项的含义如下。图11-21图11-22向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束插件URL

38、：在该文本框中可以输入下载该插件的完整URL。如果用户在浏览页面时没有该插件，则Internet Explorer将从这里提供的URL上下载。边框：用于设置围绕插件的边框的宽度。参 数 ： 用 于 设 置 其 他 参 数 以 传 递 给Netscape插件。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束为网页加入音乐 背景音乐 页面音乐的链接和嵌入 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束

39、 编不同浏览器对声音文件的处理方式也不同，大多数浏览器都支持midi格式的声音文件，可以将声音文件转化为SWF格式的文件，便于统一各种浏览器对声音的操作方式。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 利用Dreamweaver MX 2004，可以在网页中插入声音文件。声音文件有多种格式，如midi 或mid、wav、aif、mp3、ra、ram、rpm及Real Audio等。其中midi为通过计算机软硬件合成的音乐，不能被录制。wav和aif文件可以进行录制，播放wav、aif和mi

40、di文件不需要插件。mp3、ra、ram、rpm及Real Audio文件为压缩文件，ra、ram、rpm及Real Audio文件的压缩比例最大，要播放mp3文件，必须要安装插件。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束背景音乐 打开一些网站时，优雅的背景音乐伴随着我们的浏览一直萦绕在耳边。但Dreamweaver MX 2004中并没有背景音乐的具体设置，要想达到这种效果，可以采用在源代码中手动添加代码和通过插入插件来实现。向下向下向上向上末页末页首页首页中文版Dreamweaver

41、MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束添加背景音乐代码 具体操作如下。 （1）将要插入背景音乐的网页从设计视图切换至代码或拆分视图。 （2）在和之间的任何地方加入： 其中src指定音乐文件的位置，hidden=true 表示不显示播放器，loop=true表示循环播放。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束通过插入插件来添加背景音乐 具体操作如下。 （1）将光标定位到要插入背景音乐的网页的空白处。 （2）同插入其他插件的方法一样，打开“选择

42、文件”对话框。 （3）在打开的对话框中选择音乐文件，如F6.mid。 （4）设置完毕后，单击 按钮即可将音乐文件插入到页面中，音乐文件同样以一般插件的图标形式显示在页面中。 （5）单击音乐文件图标，在属性面板中，将高度和宽度都设置为0，这样就不会显示播放器。 （6）在插件URL的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则Internet Explorer将从这里提供的URL上下载。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 如果需要在网页中看到声音的播放器，可以修

43、改插件的宽和高，让播放器显示出来。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 添加背景音乐后网页文件会变大，使用背景音乐时一定要注意网页文件的大小，不能顾此失彼。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束页面音乐的链接和嵌入 前面讲解了背景音乐的设置，但有时需要对一段文本或一张图像链接声音文件，产生诸如单击文本或图像时能听到“噗”一声的效果。 链接声音的方法非常简便，具体操作如下。 （

44、1）在页面中单击要链接声音文件的网页元素，例如：文本或图像等。 （2）在属性面板中的Link文本框中输入声音文件即可，这里输入ZR1942.WAV。 嵌入声音到网页也是通过插入插件的方法实现的，这里不再赘述。另外，也可以通过添加行为的方法来实现声音的链接和嵌入。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 本课上机实战将讲解如何在网页中通过插入Dreamweaver MX 2004集成的Flash按钮，从一个页面跳转到另一个页面。插入Flash按钮后的效果如图11-23所示。希望通过这个例子

45、使读者进一步了解在网页中插入多媒体元素的作用，以及如何灵活运用这些元素为网页增光添彩。上机实战向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 图11-23向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 插入Flash按钮的具体操作如下。 （1）新建一个空白页面，选择插入表格菜单命令，打开“表格”对话框。 （2）在“行数”文本框中输入2，在“列数”文本框中输入1，在“表格宽度”数值框中输入120，在

46、其后的单位下拉列表框中选择“像素”。 （3）设置完成后，单击 按钮，页面中出现一个2行1列的表格，如图11-25所示。 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束 图11-24图11-25132 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束（4）选择文件另存为菜单命令，打开“另存为”对话框，在“文件名”文本框中输入页面文件名photo1.htm，单击按钮保存页面文件。（5）重复第（4）步操作

47、，将页面文件再另存为一个名为photo2.htm的页面文件，将两个页面文件同时打开。（6）将光标定位到photo1.htm页面表格的最上方单元格中，单击“插入”栏的“常用”选项卡中的，在打开的“选择图像源文件”对话框中选择boy1.jpg图像文件，如图11-26所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束（7）单击按钮，图像插入到了页面中，如图11-27所示。图11-26图11-27向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回

48、返回南通大学计算机 学院 王则林结束结束（8）将光标定位到页面中的下方单元格中，在如图11-28所示的插入媒体下拉列表中选择“Flash按钮”，打开“插入Flash按钮”对话框。（9）在“插入Flash按钮”对话框的“样式”列表框中选择Navigation-Next(green)选项，在“按钮文本”文本框中输入“下一个”，在“链接”文本框中输入photo2.htm，如图11-29所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束图11-28图11-29 向下向下向上向上末页末页首页首页中文版D

49、reamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束（10）单击按钮，Flash按钮即插入到页面中，如图11-30所示。在“表格”属性面板中，单击按钮，使Flash按钮居右显示，如图11-31所示。 图11-30图11-31向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束（11）切换到photo2.htm页面，用同样的方法在页面的上方单元格中插入名为boy2.jpg的图像。（12）将光标定位到页面中的下方单元格中，插入Flash按钮。（13）在

50、“插入Flash按钮”对话框的“样式”列表框中选择Navigation-Previous(green)选项，在“按钮文本”文本框中输入“上一个”，在“链接”文本框中输入photo1.htm，如图11-32所示。向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束（14）单击按钮，Flash按钮即插入到页面中，如图11-33所示。（15）按【F12】键，在浏览器中预览效果，如图11-23所示。 图11-32图11-33向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设

51、计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束课后练习填空题判断题上机操作题向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束填空题（1）媒体的来源共有4种： 、 、 。和 和（2）选择插入媒体下的 菜单命令可以插 入Flash按钮。（3）在浏览器中要访问更多类型的媒体对象，就必须借助 于 。（4）要为某个对象链接声音只需要在属性面板中的 的 文本框中输入声音文件即可。 素材库导入 网络下载 Flash按钮 插件 系统集成Link 自己制作向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束判断题（1）Dreamweaver MX 2004中不能插入 ActiveX控件。 （ ）（2）Shockwave也是插件的一种。 （ ）（3）插入插件时，插入的是行为类插件 。（ ） 向下向下向上向上末页末页首页首页中文版Dreamweaver MX 2004网页制作设计教程 调音调音返回返回南通大学计算机 学院 王则林结束结束上机操作题 为自己制作的页面加上优美的背景音乐。