网页设计制作

第八章多媒体网页本章要点内容:•多媒体网页的概念和特点。•插入Flash、音乐、视频的方法。•插入Applet和ActiveX的方法。•多媒体网页的综合实训。本章学习目标•了解多媒体在网页中的重要作用。•能够进行Flash动画与Flash文本对象的插入。•利用多种方法在网页中插入视频与音频文件，从而在网页中达到不同的效果。本章学前要求•已经学会了创建网页，并能熟练利用表格进行页面布局。•对框架页面有一个基本的了解。•能熟练地把图像文件插入到网页。8.1多媒体网页概述8.1.1多媒体的定义“多媒体”一词译自英文“multimedia”，而该词又是由mutiple和media复合而成的。媒体（medium）原有两重含义，一是指存储信息的实体，如磁盘、光盘、磁带、半导体存储器等，中文常译作媒质；二是指传递信息的载体，如数字、文字、声音、图形等，中文译作媒介。所以与多媒体对应的一词是单媒体（monomedia），从字面上看，多媒体就是由单媒体复合而成的啦。多媒体技术从不同的角度有着不同的定义。比如有人定义“多媒体计算机是一组硬件和软件设备；结合了各种视觉和听觉媒体，能够产生令人印象深刻的视听效果。在视觉媒体上，包括图形、动画、图像和文字等媒体，在听觉媒体上,则包括语言、立体声响和音乐等媒体。用户可以从多媒体计算机同时接触到各种各样的媒体来源”。还有人定义多媒体是“传统的计算媒体——文字、图形、图像以及逻辑分析方法等与视频、音频以及为了知识创建和表达的交互式应用的结合体”。概括起来就是：多媒体技术即是计算机交互式综合处理多媒体信息——文本、图形、图像和声音，使多种信息建立逻辑连接，集成为一个系统并具有交互性。简言之，多媒体技术就是具有集成性、实时性和交互性的计算机综合处理声文图信息的技术，本书所引用的主要偏重于此种定义。8.1.2多媒体的特点根据本书对多媒体技术的侧重点，可以将现代多媒体技术理解为是一种集声音、视频、图像、动画等各种信息媒体于一体的信息处理技术。它可以把外部的媒体信息，通过计算机加工处理后，以图片、文字、声音、动画、影像等多种方式输出，以达到丰富的动态表现。这种多媒体技术的有两个鲜明的特征：综合性和交互性。（1）综合性多媒体是计算机、声像、通信技术的综合体，换句话说就是指信息载体的多样性。（2）人机交互性交互性在于，使用者对信息处理的全过程能进行完全有效的控制，并把结果综合地表现出来，而不只是时单一数据、文字、图形、图像或声音的处理。8.1.3多媒体网页的定义文字和图像是基本的媒体，它们都属于视觉的范畴，但视觉又不仅限于此，还包括视频和动画。而作为多媒体重要成份的声音属于听觉范畴，足以能够将音乐、人声和自然声响展现给用户。视觉和听觉是人的最基本的两个处理信息的手段，而多媒体网页指的就是在基本的网页中加入多媒体技术的网页，这里的多媒体技术主要是指在视觉和听觉的范畴内进行的扩展，如视频、动画以及声音。8.1.4多媒体网页设计的特性无论是哪一种设计，最初都可能是来自一个很简单的想法。好比设计一个城市的旅游指南，可以是地图、文字解说、影片、手册以及综合的方式来呈现内容。因此，好的设计应包含以下特性。（1）力求单纯化由于多媒体产品的内容和接口共同创造互动的关系，因此接口和互动的形式除了力求清楚，更要求简单。若提供太多的界面选择和太复杂的使用方法会让使用者困惑，然后渐渐不想使用了。（2）设计一致性多媒体产品中接口设计要有一致性，让使用者很容易学习并建立对作品的信任感。（3）要有参与性多媒体产品应该邀请使用者加入，创造互动的关系，也就是让他们与产品内容对话。（4）内容有深度要确定我们的多媒体产品能让使用者比以往的传统媒体，探索到更多的东西。（5）娱乐性适当多媒体产品应该提供适当的娱乐性，并依内容的性质，观众的性质来决定娱乐的方式。8.2插入Flash8.2.1Flash概述1.Flash概念Flash是美国的Macromedia公司于1999年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。2.Flash特点1）使用矢量图形和流式播放技术。2）通过使用关键帧和图符使得所生成的动画（.swf）文件非常小。3）把音乐、动画、声效、交互方式融合在一起。4）强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画。3.Flash文件类型1）、Flash源文件（.fla）：Flash文件是指使用Flash应用程序创建的项目的源文件。变种类型的文件只能在Flash软件中打开，而且具有再次编辑的功能。2）、Flash电影文件（.swf）：Flash电影文件是一种导出的Flash文件，这种文件能够在浏览器和Dreamweaver中直接播放，但不具有再次编辑的功能。3）、Flash库文件（.swt）：Flash库文件用于修改和替换Flash电影文件中的信息。4.Flash的播放一般在网页中播放的Flash文件都是.swf文件，要在浏览器中播放Flash动画，必须在浏览器中集成“Flash播放器（Flashplayer）”。其中，InternetExplorer通过ActiveX控件来实现，NetscapeNavigator则是通过相应的插件来实现的。在最新的NetscapeNavigator和InternetExplorer浏览器中，均已集成了Flash动画播放功能。8.2.2插入Flash动画可以说Flash动画技术为今天的网页增添了几分光彩，那么本书就通过图8.5所示的实例来介绍插入Flash的具体操作步骤。该网页是一个典型的Flash动画欣赏网页，网页中的“评论”与“下载”两个按钮为Flash按钮，Flash动画下面的蓝色文字为Flash文本。图8.5插入Flash实例样本插入Flash的具体操作步骤如下。步骤1：将光标定位在要插入Flash的位置（即动画标题下的空白处），执行“插入”菜单的“媒体/Flash”命令或单击插入栏“常用”分类中的按钮的下拉箭头，单击弹出菜单中的第一项“Flash”命令。步骤2：在弹出的对话框中选择要插入的扩展名为.swf的Flash文件，即可将其插入到Dreamweaver的“网页编辑窗口”中，如图8.8所示。可以看到，在这个窗口中Flash文件是不会显示它的图像，取而代之的是一个灰色的Flash占位符，它的大小则是源文件的大小。不过不用担心，它在浏览器中的实际显示是完全没有问题的。图8.8“网页编辑窗口”中的Flash占位符8.2.3插入Flash按钮导航栏或者其它按钮，如果要实现鼠标经过的时候改变效果，一般可以通过“鼠标经过图像”的动作设置来制作，而本小节介绍给读者另外一种方法，那就是通过制作后缀名为.swf的Flash文件，也可以实现鼠标滚到按钮上时产生变化的效果。这里，读者只要直接使用Dreamweaver内置的一些Flash按钮样式即可。插入Flash按钮的具体制作方法如下。步骤1：打开如图8.8所示网页，接着在插入栏“常用”分类中的“媒体”按钮的下拉箭头，单击弹出菜单中的第2项“Flash按钮”命令。步骤2：随后会弹出“插入Flash按钮”对话框，在对话框中按图8.9所示进行制作“评论”与“下载”两个Flash按钮。插入Flash按钮后，鼠标靠近“评论”按钮的色彩变换效果如图8.10所示。图8.9“插入Flash按钮”对话框图8.10插入Flash按钮的效果8.2.4插入“Flash文本”在该网页中除了插入“Flash动画”和“Flash按钮”外，Flash还以文本的表现形式出现，那就是“Flash文本”，如图8.5中Flash动画下面的蓝色文字为Flash文本，它也可以实现鼠标经过时的效果。插入Flash文本的具体制作方法如下。步骤1：打开如图8.6所示网页，把光标定位在Flash动画的下面，接着在插入栏“常用”分类中点击“媒体”按钮的下拉箭头，选择弹出菜单中的第3项“Flash文本”，插入只包含文本的Flash文件。步骤2：随后弹出“插入Flash文本”对话框，如图8.11所示，按图中所示进行设置即可。图8.11“插入Flash文本”对话框8.3插入音频文件8.3.1常用音频文件的格式MIDI或MID是musicalinstrumentdigitalinterface的简写，中文译为“乐器数字接口”。这是一种乐器声音的格式，它能够被大多数浏览器支持，并且不需要插件。WAV即WaveformExtension，译为“WAV扩展名”。这种格式的文件具有较高的声音质量，能够被大多数浏览器支持，并且不需要插件。AIF或AIFF是audiointerchangefileformt的简写，中文译为“音频交换文件格式”。这种格式也具有较高的质量，和WAV声音很相似。MP3即motionpictureexpertsgroupaudio或MPEG-AudioLayer-3的简写，中文译为“运动图像专家组音频”。这是一种压缩格式的声音，其文件相对于WAV格式明显减小。RA或RAM、RPM和RealAudio。这种格式具有非常高的压缩程度，文件大小要小于MP3。8.3.2插入音频文件声音文件的插入有三种，分别为：插入链接到音频文件、嵌入音频文件和设置背景音乐。1.链接到音频文件链接到音频文件是一种简单而且有效的方法。这种集成声音文件的方法可以使浏览者能够选择是否要收听该文件，并且使文件应用于最广泛的观众中。创建指向某一音频文件链接的方法是：选择“音乐下载”按钮，在“属性”面板的“链接”文本框中输入音频文件的路径和名称，或者通过右侧的浏览按钮选择音乐文件，本书选择“本章实例”目录下“media”文件夹下名为“music”的MP3文件。2.嵌入音频文件嵌入音频可以将声音直接插入页面中，但只有浏览器含有适当的播放插件才能在浏览网页时正确播放所插入的声音文件。如果希望将声音用作背景音乐，或希望在页面上显示播放器的外观，包括播放、暂停、停止、音量等按钮及声音文件的播放进度条，请选择“嵌入声音文件”的方法。在书上的图8.12所示的实例中，网页给浏览者提供了试听音乐的功能，当页面装载的时候就会自动播放，如图8.14所示。图8.14嵌入音频文件网页3.插入背景音乐在一些很有个性的网站，用户一打开网页就会播放音乐。除了尽量提高页面的视觉效果、互动功能以外，如果能在打开网页的同时，听到一曲优美动人的音乐，相信这会使你的网站增色不少。本书就介绍两种常用的添加背景音乐的办法。（1）使用bgsound标签用Dreamweaver打开需要添加背景音乐的页面，单击“代码”打开代码编辑视图，在body/body之间输入“”，在弹出的代码提示框中选择bgsound，如图8.20所示。图8.20添加“bgsound”标签（2）利用行为编辑器本方法利用Dreamweaver的“Behaviors（行为编辑器）”添加背景音乐，方法是单击“行为”面板上的“+”按钮，如图8.21所示，选择其中的“播放声音”命令，弹出“播放声音”对话框中，如图8.22所示，选择一个音乐文件，单击“确定”按钮即可。实际上该办法是创建了一个播放音乐的函数，在装载网页的时候装载这个播放音乐的函数就可以了。图8.21“行为”面板图8.22“播放声音”对话框8.4插入视频的文件8.4.1常用的视频格式现在常用的网络视频文件格式主要如下：MPEG或MPG，中文译为“运动图像专家组”，是一种压缩比率较大的活动图像和声音的视频压缩标准，它也是VCD光盘所使用的标准。AVI是一种MicrosoftWindows操作系统所使用的多媒体文件格式。WMV是一种Windows操作系统自带的媒体播放器WindowsMediaPlayer所使用的多媒体文件格式。RM和RMVB是Real公司推广的多媒体文件格式，具有非常好的压缩比，是网络传播中应用最广泛的格式之一。MOV是Apple公司推广的一种多媒体文件格式。8.4.2插入视频文件插入视频文件的网页中一般用于一些提供电影下载、