网页制作(第5章).doc

网页制作技术案例教程第5章 多媒体【学习目标】（1）了解使用网页中主要的多媒体的种类及概念（2）掌握各种网页多媒体元素的添加插入方法（3）熟悉多媒体元素各自的属性设置方法（4）掌握用代码方式添加多媒体元素的方法 在Internet上“遨游”时，常碰见由音频和视频文件构成的精美的主页。多媒体是由音频、文字、图像、动影像等多样化的媒体组合而成的。在当今的网页中，一直都持续地流行着一股多媒体潮流。以前的主页大多是由图像或文字构成的，而现代由于多媒体技术的发展，音乐、动影像等媒体的应用已变得越来越广泛。之所以多媒体服务在主页中的应用领域越来越广泛，是因为所有人都可以利用操作系统内置的播放程序轻松地欣赏音乐和动影像。目前网上有很多站点都在主页中采用了多媒体和音频文件，网页中可以插入的多媒体包括声音、音频文件、视频文件、Flash对象、Java Aplet对象和ActiveX控件等。下面介绍的是多媒体文件在主页中的具体应用。5.1插入动态元素5.1.1插入Flash对象Flash是网上流行的矢量动画技术，近几年很多站点都采用了Flash技术，把传统网页无法做到的效果准确表现出来，增强了网页的吸引力，如使用Flash制作的导航条、按钮动感十足。Dreamweaver中提供的Flash元素主要包括Flash动画、FlashPaper、Flash视频，以及内建的Flash按钮和Flash文本。本小节将分别学习各个Flash元素的插入与设置。1.插入Flash动画Flash动画中的元素都是矢量的，可以随意放大，都不会降低画面质量。此外，Flash动画文件较小，适合在网络上使用。Flash动画的扩展名为“.swf”。下面就来学习在Dreamweaver中如何插入Flash动画。具体操作步骤如下：（1）在“编辑区”中单击选中要插入Flash动画的区域。（2）选择菜单栏“插入”项“媒体”“SWF”。（3）在弹出的“选择文件”对话框中，查找并选择你需要插入的Flash动画SWF文件， 再单击“确定”按钮，如图5-1所示。图5-1“选择文件”对话框（4）插入Flash动画效果后，效果如图5-2所示。2.插入FlashPaperFlashPaper是Macromedia公司的一款文件转换软件，允许把任何的可打印的文档直接转换成Flash文档或pdf文档，并且保持原来的文件的排版格式，如图5-3所示。 图5-2 插入Flash动画效果 图5-3 FlashPaper软件例如，用FlashPaper可以方便地将Powpoint文档转换为Flash格式动画，FlashPaper会自动生成控制条，可以实现缩小放大画面、翻页、移动等操作。具体操作步骤如下：（1）在“编辑区”中单击选中要插入FlashPaper的区域。（2）选择菜单栏“插入”项“媒体”“FlashPaper”。（3）在弹出的“插入FlashPaper”对话框中，查找并选择你需要插入的FlashPaper文件，设置高度和宽度，再单击“确定”按钮，如图5-4所示。（4）插入FlashPaper文件后，效果如图5-5所示。 图5-4“选择文件”对话框 图5-5 插入FlashPaper文件后预览后果3.插入Flash视频Flash 视频是一种新的流媒体视频格式，其文件扩展名为“.flv”。Flash视频文件极小、加载速度极快，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。网站的访问者只要能看Flash动画，就能看flv格式视频，而无需再额外安装其它视频插件，使得网络观看视频文件成为可能。目前国内外网站提供的视频内容可谓各有千秋，但它们无一例外的都使用了flv格式作为视频播放载体，下面来学习如何在Dreamweaver CS4中插入Flash视频。具体操作步骤如下：（1）在“编辑区”中单击选中要插入Flash视频的区域。（2）选择菜单栏“插入”项“媒体”“FLV”。（3）在弹出的“插入FLV”对话框中，在“视频类型”中选择你要插入FLV的类型，分别是“累进式下载视频”和“流视频”，再浏览并选择你需要插入的FLV文件，在“外观”处选择“最小宽度”，再分别设置高度和宽度(若不想自己设置，可点击“检测大小”来获取该FLV视频的宽度与高度)，最后单击“确定”按钮，如图5-6所示。（4）插入FLV动画后，效果如图5-7所示。 图5-6 “选择文件”对话框 图5-7 插入FLV视频的效果5.1.2插入Shockwave动画Shockwave是Adobe公司开发的标准网络交互多媒体的压缩文件格式。Shockwave提供了强大的、可扩展的脚本引擎，使得它可以制作聊天室、操作html、解析xml文档、控制矢量图形。Shockwave动画是用Director制作，文件扩展名是“.dcr”。同Flash一样，播放Shockwave动画，需要安装播放器插件。从Adobe网站上即可下载Adobe Shockwave player。下面具体介绍如何在Dreamweaver CS4中插入Shockwave动画。具体步骤如下：（1）在“编辑区”中单击选中要插入Shockwave动画的区域。（2）选择菜单栏“插入”项“媒体”“Shockwave”。（3）在弹出的“选择文件”对话框中，浏览并选择你需要插入的Shockwave动画文件，然后单击“确定”按钮即可，如图5-8所示。图5-8 “选择文件”对话框（4）插入Shockwave动画后，效果如图5-9所示。（5）预览网页时，如果未曾安装Shockwave动画播放器，则浏览器会自动检测并安装，如图5-10所示。 图5-9 插入Shockwave动画 图5-10 安装Shockwave播放器5.1.3添加音频文件在浏览音乐网站时经常看到一些网站上提供音频播放器，可以在线欣赏音乐。在Dreamweaver CS4中提供了专门的插件可以实现此功能。本小节就来学习如何在网页中添加声音。在网页中添加声音有两种方式：一是以插入音频的形式，读者可以通过播放器控制音频；二是以添加背景音乐的形式，在加载页面时自动播放音频。1.插入带播放器的音频文件在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式的音频，完成插入后系统会自动生成默认的播放器。具体操作步骤如下：（1）在“编辑区”中单击选中要插入音乐的区域。（2）选择菜单栏“插入”项“媒体”“插件”。（3）在弹出的“选择文件”对话框中，浏览并选择你需要插入的音频文件，然后单击“确定”按钮即可。（4）插入音乐文件后，可以调整音乐插件的大小，如图5-11所示，网页预览的效果如图5-12所示。图5-11 调整插件大小 图5-12 插入音频后的效果2.添加背景音乐背景音乐，顾名思义，就是在加载页面时，自动播放预先设置的音频，可以预先设定播放一次或重复播放等属性。这次我们通过代码来添加。具体操作步骤如下：在代码模式下，在页面代码中的任意位置（和之间除外）输入如下代码：代码：其中，“src=” ”之间的是你所要添加的音乐文件的地址，而“loop”中的数值是音乐循环的次数，可以设置为任意的正整数，若设为“-1”的话，音乐将会永远循环。“volume”表示音乐声音的大小。“autostart=”true”表示音乐将自动播放。这种添加方式是打开页面后直接播放背景音乐的，在网页上不会显示任何播放该背景音乐的插件。5.1.4插入视频文件在网页中，动影像同时以音频和视频的形式存在，所以常用于制作在线讲座、音乐电视电影等。现在越来越多的人将动影像文件上传到网页中，在网上提供相关的服务，使网页成为类似于在线影院的站点，并逐渐成为潮流的趋势。现在，让我们来学习如何在Dreamweaver CS4中插入视频。常见的视频格式有“wmv”、“avi”、“mpg”、“rmvb”等等，Dreamweaver会根据视频格式不同，选用不同的播放器，默认的播放器是Windows Media Player。其中，插入视频文件，在网页中的操作方法大致分为两种：第一种是直接作为网页文档中的一个构成部分来显示，另一种是单击网页上的某个按钮时，自动执行本地电脑中的媒体播放程序来播放视频。采用第一种方法时，将在网页文档中直接插入视频，因此可以直接进行删除控制杆、设置重复次数等相关操作。采用第二种方法时，虽然难以设置详细属性，但是只要在文本或图像上设置链接，就可以轻松地达到播放视频的效果。本小节只具体介绍上述方法中的第一种方法，即把视频直接作为网页中的一个构成部分来插入，并直接在网页中播放视频。而第二种方法只需通过链接的设置就可达到效果，因此在这里不作具体的介绍。把视频直接作为网页中的一个构成部分来插入，具体操作步骤如下：（1）在“编辑区”中单击选中要插入视频的区域。（2）选择菜单栏“插入”项 “媒体”“ActiveX”。（3）选择后，在编辑区会出现如图5-13所示的效果，可以根据个人需要调整插入的视频区域的大小。（4）此时，鼠标双击视频区域任意位置，会弹出“选择Netscape插件文件”的对话框，在此对话框中，浏览并选择你需要插入的视频文件，然后单击“确定”按钮即可，如图5-14所示。图5-13 在编辑区插入视频的效果 图5-14 “选择Netscape插件文件”对话框（5）插入视频文件后，仍可以调整视频插件的大小。最后，网页预览的效果如图5-15所示。图5-15 插入视频文件预览效果5.2使用Java Applet特效在网上“冲浪”时，常常碰见页面上大雪纷飞、花瓣散落、烟花绽放等的特殊效果。这些效果几乎都是利用Java Applet制作出来的。在Dreamweaver中，可以非常方便地使用Java Applet，也可以通过修改Java Applet的基本属性，从而制作出需要的效果。5.2.1 Java Applet的概念及基本结构1. Java Applet的概念要想理解Java Applet的概念，应首先理解Java和Javascript的概念，下面将简单地介绍这一内容。Java是用于制作基于因特网的可执行应用程序的语言，常常用于制作动画、聊天室、网络游戏等领域。Javascript是为制作HTML文档的用户专门开发出来的语言，所有源代码都是在HTML文档中定义的。而Java Applet是将Java的源代码文件（*.class）保存到服务器之后，通过链接HTML文档和Java源代码文件运行的。2. Java Applet的基本结构下面我们介绍Java Applet的基本结构。在Dreamweaver中，利用菜单栏“插入”项 “媒体”“Applet”，再选择Java Applet的类（Class）文件，就可以在网页文档中轻松地使用Java Applet。此时，如果查看源代码，就可以确认代码视图中添加了Applet插入标记（）。在设置Java Applet的属性时，可以如下图5-16所示，在和之间输入属性值，也可以通过单击属性面板中的“参数”按钮来设置属性。其中，code表示构成Java Applet的类文件的名称；param表示设置在code标记中输入的类文件属性；name表示所要设置的属性种类（名称）；value表示指定相应属性的设置值。图5-16 属性设置的代码3.在操作系统中安装Java相关插件当使用Windows XP操作系统时，常常会遇到利用Java Applet或Java制作的游戏无法显示的情形或提示JavaScript错误的警告信息。这是因为，从Windows XP版本开始，不再内置显示Java的插件。因此，安装Windows XP的用户必须自行下载并安装一款称做Java虚拟机（Java Virtual Machine）的插件，将其安装到自己的电脑上。5.2.2 制作倒影在上一小节，介绍了Java Applet的一些基本知识，而从本小节开始，我们介绍三个利用Java Applet来实现的动态效果。首先，本小节介绍的是利用Java Applet表现出图像倒影效果的方法，使图像物体展现出仿佛在湖中随波荡漾的美丽效果。利用Java Applet的属性，操作者可以根据自己的需要，更加自由地设置样式，使其呈现出更多样式并且自然的倒影效果。具体操作步骤如下：（1）在“编辑区”中单击选中要插入表现图像倒影效果的Java Applet的区域。（2）选择菜单栏“插入”项“媒体”“Applet”。（3）在弹出的“选择文件”对话框中，浏览并选择你需要插入的Java Applet的类（Class）文件，在这里，我们选择“Lake.class”文件，然后单击“确定”按钮即可，如图5-17所示。图5-17 “选择文件”对话框（4）插入“Lake.class”文件后，可以调整插件的大小，如图5-18所示。图5-18 可以调整插件的大小（5）此时，开始设置该插件的属性。点击属性面板右下方的“参数”按钮，显示如图5-19所示的参数设置面板，在里面输入图中的参数值。其中，在“参数”一栏中，image表示插入用户需要制作成倒影效果的图片，而在“值”一栏中，表示的是你所要插入的图片的地址，以此例子为例，“image/倒影.jpg”表示的是在站点根目录下的“image”目录下名为“倒影”的图片。必须注意的是，“image/倒影.jpg”在这里表示的是站点根目录下的地址，若用户在实验时所插入的图像不在站点根目录下，则需要考虑图像文件地址的书写方式，因此，为了防止地址有误，最好还是先把图像文件放在站点根目录下，再做插入操作。图5-19 参数设置面板设置完成后，点击确定按钮。此时在代码模式下，在和标签之间会生成并显示如图5-20所示的代码。此外，用户还可以通过属性面板左下方的两个按钮分别设置插件的垂直边距及水平边距。图5-20 代码模式下生成的代码（6）完成上述设置后，点击F12预览网页效果，可见效果如图5-21所示。图5-21 图片倒影预览效果图像上半部分是我们插入的原图片，而下半部分有波浪倒影效果的就是使用Java Applet的“Lake.class”文件后所展现的效果。5.2.3 制作图像轮显在本小节，我们将介绍利用Java Applet表现出图像轮换显示的效果的方法，使图像文件按照预设的方式相互轮换展示的有趣效果。利用Java Applet的属性，操作者可以根据自己的需要，更加自由地设置轮换样式，使其呈现出更多样式并且自然的轮换效果。具体操作步骤如下：（1）在“编辑区”中单击选中要插入表现图像轮换显示效果的Java Applet的区域。（2）选择菜单栏“插入”项“媒体”“Applet”。（3）在弹出的“选择文件”对话框中，浏览并选择你需要插入的Java Applet的类（Class）文件，在此，我们选择“CueCards.class”文件，然后单击“确定”按钮即可，如图5-22所示。图5-22 “选择文件”对话框（4）插入“CueCards.class”文件后，可以调整插件的大小，如图5-23所示。图5-23 可以调整插件的大小（5）此时，开始设置该插件的属性。点击属性面板右下方的“参数”按钮，显示如图5-24所示的参数设置面板，在里面输入图中的参数值。图5-24 参数设置面板其中，在“参数”一栏中，bgcolor表示该插件的背景颜色，以此例子为例，“ffffff”颜色值代表浅蓝色；image1image3表示插入用户需要轮换显示的图像文件，image后面的数值代表图片出现的顺序；在“值”一栏中，表示的是你所要插入的图片的地址，以此例子为例，“image/轮显1.jpg”表示的是在站点根目录下的“image”目录下名为“轮显1”的图片。必须注意的是：（1）“image/轮显1.jpg”在这里表示的是站点根目录下的地址，若用户在实验时所插入的图像不在站点根目录下，则需要考虑图像文件地址的书写方式，因此，为了防止地址有误，最好还是先把图像文件放在站点根目录下，再做插入操作。（2）image的图片显示的顺序可以打乱输入，只要显示的图片顺序跟你设想的顺序一致即可。但是，顺序必须是连续的自然数，中间不能有间隔，并且必须要有image1，否则将不会显示任何内容及效果。（3）bgcolor背景颜色参数必须进行设置，否则将无法显示任何图片及效果。设置完成后，点击确定按钮。此时在代码模式下，在和标签之间会生成并显示如图5-25所示的代码。此外，用户还可以通过属性面板左下方的两个按钮分别设置插件的垂直边距及水平边距。图5-25 代码模式下生成的代码（4）完成上述设置后，点击F12预览网页效果，可见效果如图5-26所示，三幅图片便是轮换显示出来的图片。图5-26 图片轮换显示的预览效果5.2.4 制作滚动字幕在本小节介绍的是利用Java Applet表现字幕的滚动效果的方法，并表现出文本逐渐消失的效果。利用Java Applet的属性，操作者可以根据自己的需要，更加自由地设置滚动样式，使其呈现更加温和、自然的滚动效果。具体操作步骤如下：（1）在“编辑区”中单击选中要插入表现字幕滚动效果的Java Applet的区域。（2）选择菜单栏“插入”项“媒体”“Applet”。如图5-27所示。图5-27 “选择文件”对话框（3）在弹出的“选择文件”对话框中，浏览并选择你需要插入的Java Applet的类（Class）文件，在这里，我们选择“CreditRoll.class”文件，然后单击“确定”按钮即可。 （4）插入“CreditRoll.class”文件后，可以调整插件的大小，如图5-28所示。图5-28 可以调整插件的大小（5）此时，开始设置该插件的属性。点击属性面板右下方的“参数”按钮，显示如图5-29所示的参数设置面板，在里面输入图中的参数值。图5-29 参数设置面板其中，bgcolor表示该插件的背景颜色，以此例子为例，“f25f02”颜色值代表橙色；fadezone表示模糊区域的范围，其数值越大，模糊范围就越广；fontsize表示滚动文字的字号大小；repeat表示滚动是否重复，如果不希望重复滚动，就输入“no”，如果希望重复滚动过程，就输入“yes”；speed表示字体滚动的速度，其数值越大，滚动的速度越慢；textcolor表示滚动文本的文字颜色，以此例子为例，“ffffff”颜色值代表白色。而“text1text10”表示的是每行显示的内容，即滚动出现的文字，text后面的数值代表行数。必须注意的是，text的行数的顺序可以打乱输入，只要输入的文字跟你设想的行数一致即可。但是，行数必须是连续的自然数，中间不能有间隔，并且必须要有text1，否则将不会显示任何内容及效果。设置完成后，点击确定按钮。此时在代码模式下，在和标签之间会生成并显示