中文版dreamweaver mx 2004 网页制作培训教程11：为网页加入动态元素

第十一课 为网页加入动态元素,课前导读 课堂讲解 上机实战 课后练习,课前导读,基础知识 重点知识,基础知识,各种媒体的插入方法、音乐的加入、媒体的播放方法。,重点知识,不同媒体相关参数的具体设置，系统集成Flash按钮和文本的插入，加入音乐的技巧。,课堂讲解,各种媒体的来源 插入Flash媒体元素 插入其他动态元素 为网页加入音乐,离开丰富多彩的媒体，网页的内容将会显得十分单调。利用Dreamweaver MX 2004可以方便地插入各种媒体，例如Flash动画、Shockwave动画、ActiveX控件以及Applet等。在Dreamweaver MX 2004的文档窗口中可以启动相应媒体的外部编辑器来编辑这些媒体，还可以为这些媒体附加设计笔记，便于查看和共享。,各种媒体的来源,系统集成 网络下载 从素材库导入 自己制作,丰富多彩的媒体给网页带来了非凡的效果，这些媒体的来源主要有系统集成、网络下载、从素材库导入以及自己制作等。,系统集成,在Dreamweaver MX 2004中集成了许多Flash按钮，可以在Dreamweaver MX 2004页面中方便地插入Flash按钮和Flash文本。,网络下载,大多数的媒体在Dreamweaver MX 2004中并没有集成，这时可以通过网络来下载。提供各种媒体下载的网站非常多，如果不知道具体的网址，可通过google、百度等搜索引擎搜索，在此提供几个网址以供参考。虽然网络上的媒体异彩纷呈，下载后便可使用，非常方便，但如需作商业用途，则请参照相关的版权信息，以免引发版权纠纷。,http:/www.sucaiw.com/ 素材精品屋 http:/www.knowsky.com 动态网站制作指南 http:/www.helpor.net 网页特效集锦 http:/www.3lian.com 3lian素材 http:/www.Java.com Java网站 http:/www.shockwave.com Macromedia公司的 一个交互性娱乐服 务网站,从素材库导入,对于受限于网络速度的用户，只好放弃下载这个方便的途径了。现在市面上有许多网页制作的素材库，通过购买即可获得。,自己制作,当网上下载和购买的一些媒体，如Flash动画等无法满足需求时，自己制作则不失为一个好办法，但这就要求用户要有一定的美术、编程基础。各种媒体的制作软件都不同，Flash动画当然是使用Macromedia Flash软件来制作的。Shockwave影片可以通过Macromedia Director来创建。,插入Flash媒体元素,插入Flash影片 插入Flash按钮 插入Flash文本,Flash动画是一种高品质的矢量动画，它由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都已经内置了用于播放Flash动画的播放器。,Flash文件主要有以下3种类型。 *.fla：Flash文件，只能在Flash中打开，不能在Dreamweaver MX 2004或浏览器中打开。必须在Flash中将其导出为SWF或SWT格式的文件，才可以在浏览器中播放。 *.swf：压缩格式的Flash文件，是用于网络中的最优格式文件，可以在浏览器和Dreamweaver MX 2004中播放，但是不能在Flash中打开并编辑。使用Dreamweaver MX 2004集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。,*.swt：这种类型的文件允许编辑Flash动画文件中的信息。这些文件用在Flash按钮对象中，可以利用自己的文本或链接来修改模板，创建自己的SWF来插入到设计视图中。可以在Dreamweaver MX 2004/Configuration/ Flash Objects/Flash Buttons and Flash Text文件夹中查看这些文件。,插入Flash影片,插入Flash影片的具体操作如下。 （1）将光标定位到页面中要插入Flash影片的位置。 （2）在插入栏的“常用”选项卡中单击媒体右侧的按钮 ，在弹出的列表框中选择“Flash”选项，如图11-1所示，或选择插入媒体Flash菜单命令打开如图11-2所示的“选择文件”对话框。,图11-1,图11-2,（3）在“查找范围”下拉列表框中查找要插入的Flash播放文件（格式为：*.swf）所在的位置。 （4）从文件列表框中选择需要的Flash文件，如选择banner文件。 （5）单击 按钮，如果所选文件不在当前文档的站点中，系统会打开如图11-3所示的“询问”对话框。 （6）单击 按钮，在打开的“复制文件为”对话框中保存选择的Flash文件，如图11-4所示。,图11-3,图11-4,（7）单击按钮后即可将Flash影片插入到页面中，如图11-5所示。 （8）单击插入的Flash影片，“Flash影片”属性面板如图11-6所示。,图11-5,图11-6,可以在Flash影片的属性面板中设置其相关的属性。其中各参数含义如下。 Flash：用于设置Flash影片的名称，以便在脚本中引用。 宽和高：用于设置Flash影片的宽度和高度。可在数值框中直接输入数值改变其大小，也可以通过在页面中拖动缩放手柄来改变其大小。宽度的默认单位是Pix（像素），也可以采用pc（l2点活字）、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或者这些单位的组合（如3in+1cm）。 文件：用于设置Flash影片文件的路径。可直接在文本框中输入文件路径，也可以单击 图标，打开“选择Flash文件”对话框来选择需要的源文件，还可以直接拖动 按钮到需选择的Flash文件图标处。,源文件：用于指定Flash影片源文件。若要编辑Flash影片，则需指定其源文件。 对齐：用于设置影片的对齐方式。可以从下拉列表中选择。有默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐10个选项。 背景颜色：用于设置影片区域的背景颜色。 垂直边距和水平边距：用于设置影片上下和左右空白区域的像素值，可以在数值框中输入单位是像素的间距值。它实际上设置的是标记的hspace属性。,品质：用于设置Flash影片的显示质量。在其下拉列表框中有“高品质”、“低品质”、自动高品质和自动低品质4个选项。“高品质”将有最好的影片质量，但是需要高速处理器；“低品质”表示着重显示的速度，而不是显示的质量；“自动低品质”表示显示的开始更着重显示速度，但是随后会尽可能地提高显示质量；“自动高品质”表示开始显示时速度和质量并重，但是随后会尽可能地提高显示速度，而降低显示质量。 比例：用于设置Flash影片的显示比例。有“全部显示”、“无边框”和“严格匹配”3个选项。全部显示与无边框显示只是一部分动画可能会被剪掉；严格匹配则会显示全部对象，但是可能会失真。,：选中该复选框，则影片会循环播放。 ：选中该复选框，则当装载网页时即自动播放动画。 ：单击该按钮将自动打开Flash软件对源文件进行处理，但要确定有源文件，并已经在源文件属性中指定了其路径。 ：用于恢复Flash影片的原始尺寸。 ：用于在设计视图中播放Flash影片。 ：用于打开“参数”对话框，在该对话框中可以输入一些附加参数。 类：用于为Flash影片提供一种样式。,（9）在属性面板中单击 按钮，插入的Flash影片即可在设计视图中进行播放，如图11-7所示。这时按钮变为 ，单击它则停止播放。,图11-7,在这里讲解的Flash按钮是指Dreamweaver MX 2004集成的动态按钮。在Dreamweaver MX 2004中也可以插入自已制作的Flash按钮，方法与插入Flash影片类似，这里不再赘述。 插入Flash按钮的具体操作如下。 （1）将光标定位到页面中要插入Flash按钮的位置上。 （2）在如图11-1所示的列表中选择“Flash按钮”选项，打开“插入Flash按钮”对话框，如图11-8所示。,插入Flash按钮,（3）在“样式”下拉列表框中选择需要的按钮样式后在“范例”栏中将显示出所选样式的效果。如在列表中选择Blip Arrow选项，则范例效果如图11-9所示。,图11-8,图11-9,（4）在“按钮文本”文本框中输入要在按钮上显示的文本，如“进入”。 （5）在“字体”下拉列表框中选择按钮文本的字体，在“大小”数值框中输入字号。 （6）在“链接”文本框中指定按钮所要链接文档的URL地址。 （7）在“目标”下拉列表框中选择所链接文件的打开方式。 （8）在“背景色”下拉列表中设置Flash按钮的背景色。 （9）在“另存为”文本框中输入保存的路径，最好保存到当前页面站点的图像文件夹中，到此设置就完成了。,（10）单击 按钮将设置的Flash按钮插入到当前位置，如图11-10所示。 （11）单击插入的Flash按钮，在其属性面板中编辑相关的属性，如图11-11所示。如果要修改Flash按钮的名称、外观等参数时，可双击插入的Flash按钮或单击其属性面板中的 按钮打开“插入Flash按钮”对话框，更改其设置即可。,图11-10,图11-11,（12）如果在页面中调整了Flash按钮的大小，又想恢复原大小时，可单击属性面板中的按钮 。 （13）单击 按钮播放，当鼠标移到按钮上时就会看按钮的动态效果。,插入Flash文本,插入Flash文本与插入Flash按钮一样，是指Dreamweaver MX 2004中集成的文本动画。插入Flash文本的具体操作如下。 （1）将光标定位到页面中要插入Flash文本的位置上。 （2）选择“Flash文本”选项，打开如图11-12所示的“插入Flash文本”对话框。 （3）在“文本”文本框中输入要显示的文本，如输入“CSkin美容空间引领时尚潮流”。 （4）选中 复选框，在文本框中将显示所设置文本字体的效果。,（5）在“字体”下拉列表框中选择文本的字体，在“大小”文本框中输入文本的大小，如设置字体为“隶书”，字号为“30”。 （6）单击 按钮设置字体为粗体或斜体样式。 （7）单击 按钮设置文本段落的对齐方式。 （8）在“颜色”文本框中选择文本的正常显示颜色，如设置颜色代码为“#330099”。在“转滚颜色”文本框中设置文本的效果颜色，如设置颜色代码为“#990000”。 （9）在“链接”文本框中设置与Flash文本相链接的文件，也可不设置。 （10）在“目标”下拉列表框中指定所链接文件的打开方式。,（11）在“背景色”中设置Flash文本的背景颜色。 （12）在“另存为”文本框中指定Flash文本的保存路径，如输入“text1.swf”，设置完成后的对话框如图11-13所示。,图11-12,图11-13,（13）单击 按钮将设置的Flash文本插入到页面中，如图11-14所示。 （14）在页面中单击插入的Flash文本，在其属性面板中可进行相应的设置。 （15）单击 按钮播放，当鼠标移到文本上时就会看到文本的动画效果。,图11-14,插入其他动态元素,插入