搜索
第13章插入媒体对象课前导读课堂讲解上机实战课后练习课前导读基础知识重点知识基础知识各种媒体的插入方法、音乐的加入、媒体的播放方法。重点知识不同媒体相关参数的具体设置，系统集成Flash按钮和文本的插入，加入音乐的技巧。课堂讲解各种媒体的来源插入Flash媒体元素插入其他动态元素为网页加入音乐离开丰富多彩的媒体，网页的内容将会显得十分单调。利用DreamweaverMX2004可以方便地插入各种媒体，例如Flash动画、Shockwave动画、ActiveX控件以及Applet等。在DreamweaverMX2004的文档窗口中可以启动相应媒体的外部编辑器来编辑这些媒体，还可以为这些媒体附加设计笔记，便于查看和共享。各种媒体的来源系统集成网络下载从素材库导入自己制作丰富多彩的媒体给网页带来了非凡的效果，这些媒体的来源主要有系统集成、网络下载、从素材库导入以及自己制作等。系统集成在DreamweaverMX2004中集成了许多Flash按钮，可以在DreamweaverMX2004页面中方便地插入Flash按钮和Flash文本。网络下载大多数的媒体在DreamweaverMX2004中并没有集成，这时可以通过网络来下载。提供各种媒体下载的网站非常多，如果不知道具体的网址，可通过google、百度等搜索引擎搜索，在此提供几个网址以供参考。虽然网络上的媒体异彩纷呈，下载后便可使用，非常方便，但如需作商业用途，则请参照相关的版权信息，以免引发版权纠纷。素材精品屋网页特效集锦网站公司的一个交互性娱乐服务网站从素材库导入对于受限于网络速度的用户，只好放弃下载这个方便的途径了。现在市面上有许多网页制作的素材库，通过购买即可获得。自己制作当网上下载和购买的一些媒体，如Flash动画等无法满足需求时，自己制作则不失为一个好办法，但这就要求用户要有一定的美术、编程基础。各种媒体的制作软件都不同，Flash动画当然是使用MacromediaFlash软件来制作的。Shockwave影片可以通过MacromediaDirector来创建。插入Flash媒体元素插入Flash影片插入Flash按钮插入Flash文本Flash动画是一种高品质的矢量动画，它由Macromedia公司的Flash动画制作软件创建，目前已经成为Internet上矢量动画的标准，是制作网上矢量图形和动画的首选软件。Flash、Dreamweaver和Fireworks并称为Macromedia公司的网络三剑客。两款主流浏览器InternetExplorer和NetscapeNavigator对Flash动画都提供了较好的支持。在InternetExplorer中可以通过ActiveX来实现，而在NetscapeNavigator中可以通过插件来实现。另外，目前最新版本的InternetExplorer6.0和NetscapeNavigator6.0都已经内置了用于播放Flash动画的播放器。Flash文件主要有以下3种类型。»*.fla：Flash文件，只能在Flash中打开，不能在DreamweaverMX2004或浏览器中打开。必须在Flash中将其导出为SWF或SWT格式的文件，才可以在浏览器中播放。»*.swf：压缩格式的Flash文件，是用于网络中的最优格式文件，可以在浏览器和DreamweaverMX2004中播放，但是不能在Flash中打开并编辑。使用DreamweaverMX2004集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。»*.swt：这种类型的文件允许编辑Flash动画文件中的信息。这些文件用在Flash按钮对象中，可以利用自己的文本或链接来修改模板，创建自己的SWF来插入到设计视图中。可以在DreamweaverMX2004/Configuration/FlashObjects/FlashButtonsandFlashText文件夹中查看这些文件。插入Flash影片插入Flash影片的具体操作如下。（1）将光标定位到页面中要插入Flash影片的位置。（2）在插入栏的“常用”选项卡中单击媒体右侧的按钮，在弹出的列表框中选择“Flash”选项，如图11-1所示，或选择[插入][媒体][Flash]菜单命令打开如图11-2所示的“选择文件”对话框。43图11-1图11-2（3）在“查找范围”下拉列表框中查找要插入的Flash播放文件（格式为：*.swf）所在的位置。（4）从文件列表框中选择需要的Flash文件，如选择banner文件。（5）单击按钮，如果所选文件不在当前文档的站点中，系统会打开如图11-3所示的“询问”对话框。（6）单击按钮，在打开的“复制文件为”对话框中保存选择的Flash文件，如图11-4所示。图11-38图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个选项。»背景颜色：用于设置影片区域的背景颜色。»垂直边距和水平边距：用于设置影片上下和左右空白区域的像素值，可以在数值框中输入单位是像素的间距值。它实际上设置的是object标记的hspace属性。»品质：用于设置Flash影片的显示质量。在其下拉列表框中有“高品质”、“低品质”、自动高品质和自动低品质4个选项。“高品质”将有最好的影片质量，但是需要高速处理器；“低品质”表示着重显示的速度，而不是显示的质量；“自动低品质”表示显示的开始更着重显示速度，但是随后会尽可能地提高显示质量；“自动高品质”表示开始显示时速度和质量并重，但是随后会尽可能地提高显示速度，而降低显示质量。»比例：用于设置Flash影片的显示比例。有“全部显示”、“无边框”和“严格匹配”3个选项。全部显示与无边框显示只是一部分动画可能会被剪掉；严格匹配则会显示全部对象，但是可能会失真。»：选中该复选框，则影片会循环播放。»：选中该复选框，则当装载网页时即自动播放动画。»：单击该按钮将自动打开Flash软件对源文件进行处理，但要确定有源文件，并已经在源文件属性中指定了其路径。»：用于恢复Flash影片的原始尺寸。»：用于在设计视图中播放Flash影片。»：用于打开“参数”对话框，在该对话框中可以输入一些附加参数。»类：用于为Flash影片提供一种样式。（9）在属性面板中单击按钮，插入的Flash影片即可在设计视图中进行播放，如图11-7所示。这时按钮变为，单击它则停止播放。图11-7在这里讲解的Flash按钮是指DreamweaverMX2004集成的动态按钮。在DreamweaverMX2004中也可以插入自已制作的Flash按钮，方法与插入Flash影片类似，这里不再赘述。插入Flash按钮的具体操作如下。（1）将光标定位到页面中要插入Flash按钮的位置上。（2）在如图11-1所示的列表中选择“Flash按钮”选项，打开“插入Flash按钮”对话框，如图11-8所示。插入Flash按钮（3）在“样式”下拉列表框中选择需要的按钮样式后在“范例”栏中将显示出所选样式的效果。如在列表中选择BlipArrow选项，则范例效果如图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按钮一样，是指DreamweaverMX2004中集成的文本动画。插入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插入其他动态元素插入Shockwave影片插入Applet插入ActiveX控件插入插件Dreamweaver不仅支持Flash动画，还支持如Shockwave影片、Applet等媒体。插入Shockwave影片Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。在DreamweaverMX2004中插入Shockwave影片的具体操作如下。（1）将光标置于页面中要插入Shockwave影片的位置上。（2）选择[插入][媒体][Shockwave]菜单命令，也可以在插