第13章 多媒体与网页特效

第13章多媒体与网页特效本章的主要内容如下：•13-1在网页中插入多媒体对象•13-2行为•13-3时间轴•13-4制作弹出菜单13.1在网页中插入多媒体对象13.1.1插入flash动画13.1.2插入声音13.1.3插入视频13.1.1插入flash动画网页中除了文本与图像表述网页内容以外，还离不开网页多媒体，如：Flash动画、声音、视频等，这些多媒体元素的加入，使得网页表现更丰富多彩，在文本和图像的基础上，多媒体的加入更是锦上添花。在学习本章内容之前请先建立站点。1.插入Flash插入在网页中的Flash格式为swf，Flash源文件格式为Fla，源文件不能直接插入到网页中，但可以在Flash软件中修改源文件。【实例13.1】制作烟花效果的网页制作过程：（1）打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮（2）弹出【选择文件】对话框，选择Flash文件13-1.swf.（3）单击【确定】按钮后弹出【对象标签辅助功能属性】对话框，在输入标题后单击【确定】按钮即可将Flash文件插入到网页中，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示。（4）在文档窗口单击这个Flash文件，就可以在属性面板中设置它的属性了，如图13-1所示。（5）将Flash的背景透明，使得Flash内容与Flash下方的图像达到合二为一的效果。在【属性】面板中单击【参数】按钮，弹出【参数】对框，作如图13-2所示的设置：（6）选择“循环”复选框时影片将连续播放，否则影片在播放一次后自动停止。通过选择“自动播放”复选框后，可以设定Flash文件是否在页面加载时就播放。在“品质”下拉列表中可以选择Flash影片的画质，以最佳状态显示，就选择“高品质”。如图13-3所示即是保存了网页后按【F12】键在浏览器中预览网页的效果。2.插入Flash文本打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，弹出【插入Flash文本】对话框，如图13-4所示：字体随意，大小22px，颜色设置为#F5E458，转滚颜色为#54C994，文本为“图片素材”，背景颜色#6DCFF6，选择自己需要的路径链接。同样方法我们可以使用该功能，诸如制作“代码素材”、“Flash动漫”、“精美壁纸”和“音频视频”等Flash文本来制作一个导航栏。3、插入Flash按钮Flash按钮的存在使得网页的样式更加生动。在Dreamweaver中插入Flash按钮不需要用户设计，这些按钮是由Dreamweaver自动生成，并且有多种按钮样式可供用户选择。打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，在列表中选择Flash按钮，弹出【插入Flash按钮】对话框，如图13-5所示：【样式】用来选择按钮的外观，【按钮文本】用来输入按钮上的文字，【字体】和【大小】用于设置按钮上文字的字体和大小，字号变大，按钮并不会跟着改变。【链接】用于输入按钮的链接，可以是外部链接，也可以是内部链接。【目标】用来设置打开的链接窗口。4.插入Flash视频FlashVideo即Flash视频，它的后缀名为：.flv，是目前广泛流行的一种视频文件格式。一般的视频文件：asf、wmv、rm等都需要专门的播放器来支持视频文件的播放，否则根本无法收看，并且这类文件容量过大，下载慢，查看也不很流畅。为了解决播放器和容量的问题，可以将各类视频文件转换成Flash视频文件，即Flv格式。经过编码后的音频和视频数据，通过FlashPlayer传送。制作流程：（1）打开【插入】面板，单击【常用】选项卡中的【媒体：Flash】按钮，弹出【插入Flash视频】对话框，如图13-6所示：（2）在【URL】文本框中，指定.flv文件的相对路径，方法是单击【浏览】按钮，选择该FLV文件。（3）从【外观】弹出式菜单中选择一种外观皮肤。所选外观的预览会出现在“外观”弹出式菜单下方。【外观】选项指定将包含Flash视频内容的Flash视频组件的外观。（4）分别在【宽度】文本框与【高度】文本框中设置该视频的宽度与高度，然后单击【确定】按钮。13.1.2插入声音虽然向Web页添加的声音文件可以有多种不同类型格式，但并不是所有的声音格式都适合在网页中应用。在确定采用哪一格式和方法添加声音前，需要考虑添加声音的目的、观众、文件大小、声音品质和不同浏览器的差异等因素。在网页中常用的格式有.wav、.midi、.rm和.mp3等。另外，用户在访问插入音频的页面时，只有在他的客户端浏览器具有可播放所选声音文件的适当插件，声音才可以播放出来。网页中插入声音的常用方法有如下两种：其一为超级链接到声音文件，其二为嵌入声音文件到网页中。1.超级链接到声音文件现在Internet上大量的在线音乐就是采用超级链接链接到声音文件。下面通过一个实例来说明。（1）准备好一个音乐文件。选择作为超级链接载体的文本或图像，如图13-7所示的实例中选择的是文本“在线下载”。（2）在属性面板的【链接】文本框中键入声音文件所在的路径和名称，或者单击后面的文件夹图标直接选择声音文件。实例中选择的是“莫扎特小夜曲.mp3”，如图13-8所示。（3）保存文件，按F12键预览该网页。当鼠标移动到“在线下载”上时鼠标呈现小手的形状，单击将播放音乐，如图13-9所示。或者单击鼠标右键，在弹出菜单中选择“目标另存为”将该音乐文件下载到本地。2.将声音嵌入网页如果希望插入声音的同时，在网页上还可以显示播放器的外观，包括播放、暂停、停止、音量调整等控制面板，需要使用嵌入声音文件到网页中的方法。（1）准备好一个音乐文件，在页面添加文字“2、月满西楼”。（2）打开【插入】面板，单击【常用】选项卡中的【媒体】，在下拉菜单中单击【插件】按钮，弹出【选择文件】对话框，选择一个准备好的音乐文件，本实例为“月满西楼.wma”，如图13-10所示。调整播放插件的大小外观。（3）如果用户的计算机中没有安装相关音乐文件的播放插件，在属性面板的“插件URL”中输入该插件的地址，供用户链接并下载该插件。（4）保存文件，按F12键预览该网页，效果如图13-11所示。3.添加背景音乐在网页中可以嵌入背景音乐。这种音乐多以MP3，MIDI文件为主。添加背景音乐有两种方法，一种是通过手写代码实现，还有一种是通过添加行为来实现。在代码视图中，通过bgsound标记可以将网页设置上背景音乐，具体步骤是：（1）准备好一个音乐文件，打开需要添加背景音乐的网页（网页和声音最好使用相对路径）。（2）选择“代码视图”，将光标定位到body之后，输入下面的代码：bodybgsoundsrc=莫扎特小夜曲.mp3插入背景音乐……/body（3）如果希望循环播放音乐，将在代码中添加一个loop属性即可：bgsoundsrc＝莫扎特小夜曲.mp3loop=true（4）保存文件，按F12键预览该网页，即可听见背景音乐。插入视频和插入声音的方法类似，也有两种情况，其一为超级链接到视频文件，其二为嵌入视频文件到网页中。1.超级链接到视频文件用户浏览器端必须拥有辅助应用程序才能查看常见的视频格式，如RealOnePlayer、QuickTime和WindowsMediaPlayer等。（1）准备好一个视频文件，在网页中选择指向视频文件的链接载体（文本或图像）。（2）在属性面板的“链接”文本框中输入视频文件的路径名称，或者单击后面的文件夹图标选择文件，如图13-12所示。13.1.3插入视频（3）设置完毕，保存文件。按F12键预览该网页，如果正确安装了播放程序，那么点击链接载体，可弹出MediaPlayer等辅助程序，并播放该视频文件。2.嵌入视频文件到网页中如果希望添加视频文件并在网页上显示播放器的外观，请选择嵌入视频文件到网页中的方法。（1）准备好一个视频文件，将光标置于需要嵌入视频文件的位置。（2）打开【插入】面板，单击【常用】选项卡中的【媒体】，在下拉菜单中单击【插件】按钮，弹出【选择文件】对话框，选择其中的视频文件，将其添加到网页中，如图13-13所示。适当调节“插件”占位符的大小及位置。（3）如果用户的计算机中没有安装相关视频文件的播放插件，在属性面板的“插件URL”中输入该插件的地址，供用户链接并下载该插件。（4）设置完毕，保存文件。按F12键预览网页，网页将显示相关播放插件并播放。如图13-14所示。13.2行为13.2.1行为基础知识13.2.2显示-隐藏层13.2.3设置状态条文本13.2.4设置层文本13.2.5设置弹出信息13.2.1行为基础知识一般说来，动态网页是通过编写脚本代码来实现用户与页面的简单交互的。但是编写脚本既复杂又专业需要专门学习，而Dreamweaver提供的“行为”的机制，虽然行为也是基于JaveScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中按几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为时间，图片的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。1.了解行为“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。（1）对象(Object)对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。（2）事件(Event)事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。（3）动作(Action)行为通过动作来完成动态效果，如：图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码，在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码，就不必自己编写。（4）事件与动作将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JaveScript代码相关联，单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。2.应用行为在Dreamwaever中，对行为的添加和控制主要通过【行为】面板来实现。执行“窗口”→“行为”菜单命令，打开行为面板，如图13-15所示。在行为面板上可以进行如下操作：（1）单击【+】按钮，打开动作菜单，添加行为；单击【-】按钮，删除行为。添加行为时，从动作菜单中选择一个行为项。（2）单击事件列右方的三角，打开事件菜单，可以选择事件。（3）单击向上箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。3.创建行为一般创建行为有三个步骤：选择对象、添加动作、调整事件。我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。（1）打开13-4.html，选中图片。（2）单击行为面板上的+按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对