3.4多媒体在网页中的应用在网页中除了可以使用文本和图像元素表达信息外,还可以在网页中插入多媒体元素,例如美妙的音乐、精彩的影片剪辑、生动的Flash动画、以及各种插件等,以丰富网页的效果,使网页更加生动。课程引导知识技能目标(1)了解flash文件的类型。(2)掌握在网页中插入flash动画和设置其属性的操作方法。(3)掌握在网页中插入声音和视频的方法。(4)掌握其他多媒体元素的使用方法。3.4.1课堂案例——营养美食网页使用“Flash”按钮制作网页导航条效果。使用“属性”面板改变按钮的大小。使用“Flash文本”按钮为网页文档插入Flash文本效果。使用“居中对齐”按钮设置Flash文本居中对齐效果。使用“Flash”按钮为网页文档插入Flash动画效果。使用“播放”按钮在文档窗口中预览效果。效果图Flash软件由Macromedia公司推出,利用它可以制作文件体积小、效果华丽的矢量动画。目前Flash动画是网上最流行的动画格式,被大量用于网页。Flash动画的优点:文件小,网上传输快。插入到网页中的Flash文件有多种:Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素、FlashPaper等。3.4.2插入Flash动画•Flash的文件类型主要有3种:•1、Flash源文件(.fla):是所有Flash的源文件,在Flash软件中创建并只能在Flash软件中打开,不能在浏览器中显示。可以将Flash源文件从Flash软件导出为SWF或SWT文件以在浏览器中使用。•2、Flash影片文件(.swf):是Flash(.fla)文件的压缩优化版本,可以在浏览器中播放并且可以在Dreamweaver中进行预览,但不能在Flash中编辑。当使用Flash按钮和Flash文本对象时可创建这种文件类型。•3、Flash模板文件(.swt):使用它可以修改和替换Flash影片文件中的信息。这些文件用于Flash按钮和Flash文本对象中,使您能够用自己的文本或链接修改模板,以便创建要插入在您的文档中的自定义SWF。在Dreamweaver中,可以在文件夹Macromedia/DreamweaverMX/Configuration/FlashObjects/FlashButtons或FlashText中找到这些模板文件。•要浏览Flash动画需要安装Flash插件,IE5.0以上版本整合了Flash功能,使用低版本的浏览器用户需要安装Flash插件才能浏览Flash动画。操作:单击菜单【插入记录】→【媒体】→【Flash】,打开“选择文件”对话框。•设置Flash动画属性:1.【Flash】:影片的名称。2.【宽】和【高】:以像素为单位指定影片的宽度和高度。3.【文件】:指定指向Flash文件的路径。4.【源文件】指定指向Flash源文档(fla)的路径。5.【编辑】可以启动MacromediaFlash以更新fla文件。6.【重设大小】将选定影片返回到其初始大小。7.【循环】选中则连续播放。8.【自动播放】选中则在加载页面时自动播放。9.【垂直边距】和【水平边距】指定空白的像素值。10.【品质】控制抗失真度。11.【比例】确定影片如何适合在【宽】和【高】文本框中设置的尺寸。12.【对齐】确定影片在页面上的对齐方式。13.【背景颜色】指定影片区域的背景颜色。14.【参数】打开一个对话框,可在其中输入传递给影片的附加参数•如:设置Flash动画为透明3.4.3插入Flash文本Flash文本是指只包含文本的Flash影片。Flash文本使用户利用自己选择的设计字体创建较小的矢量图形影片。操作:单击菜单【插入记录】→【媒体】→【Flash文本】,打开“插入Flash文本”对话框。3.4.4插入Flash按钮如果用户想在网页中插入一个具有交互效果的按钮,可通过“插入Flash按钮”功能轻松实现。用户可以在文档中插入Flash按钮,但在插入Flash按钮前,必须先保存文档。3.6课堂练习——旅游资讯网使用“Flash”按钮制作网页导航条效果。使用“Flash”按钮为网页文档插入Flash动画效果。效果图3.4.5插入Shockwave影片Shockwave是Web上用于交互式多媒体的Macromedia标准,是一种经压缩的格式,使得在MacromediaDirector中创建的多媒体文件能够被快速下载,而且可以在大多数常用浏览器中进行播放。•Shockwave和Flash都是Macromedia提供的两种网上流媒体播放技术。Flash是一种网上矢量动画技术并带有一定的交互编程功能。•Shockwave是一种更加复杂的播放技术,它提供了强大的、可扩展的脚本引擎。但是Flash启动非常快,而Shockwave启动没有Flash快。Flash是用Flash软件制作,文件后缀名是.swf,Shockwave是用Director制作,文件后缀名是.dcr。操作步骤如下:将插入点置于要插入Shockwave影片的位置。选择【插入】|【媒体】|【Shockwave】命令,或【常用/媒体】插入栏中Shockwave图标。在属性面板中设置其相关属性。Applet是用Java编程语言开发的、可嵌入Web页中的小型应用程序。DreamweaverCS3提供了将JavaApplet插入HTML文档中的功能。•Javaapplet是用Java编程语言开发的可嵌入Web页中的小型应用程序,可以表现华丽而精美的效果。不会Java编程语言不要紧,在网上可以找你需要的源代码(如=3162),把它插入HTML文档。3.4.6插入Applet程序•通常Java小程序包含2部分:一是Java类模块,即以.class为后缀的文件,二是控制该模块的特定程序参数,即一段HTML代码。操作步骤如下:将光标放到要插入Applet小程序的位置。选择【插入】|【媒体】|【Applet】命令,或者单击【插入】面板上【常规】|【媒体】|【Applets】按钮,打开【选择文件】对话框,从对话框中选择扩展名为.class的文件。选中插入到页面中的Applet图标,打开属性面板,设置其属性。在HTML中插入程序参数。•以下是用JavaApplet实现的动态效果(雪花在飘)。•你所要做的是将以下这些代码加入到你的HTML文件中。•appletcode=alcsnow.classalign=baselinewidth=457height=328•paramname=grphvalue=tree.gif!如果有基址,value地址应指明路径•paramname=snowsvalue=900!雪花数量•paramname=threadsleepvalue=50!线程休眠时间•/applet•Applet网页特效展示网站:•••提示:如果浏览器不能显示Applet特效,请安装JAVA虚拟机。•插入声音•操作步骤如下:•1)将光标放置在您要嵌入音频文件的地方。•2)在“插入”栏的“常用”类别中,单击“媒体/插件”按钮,然后选择声音文件。•3)在属性面板设置“参数”属性。SRC=FILENAME设定音乐文件的路径AUTOSTART=TRUE/FALSE设置打开页面时音乐是否自动播放LOOP=TRUE/FALSE设定播放重复次数,LOOP=6表示重复6次,TRUE表示无限次播放,FALSE播放一次即停止。STARTIME=分:秒设定乐曲的开始播放时间,如20秒后播放写为STARTIME=00:20VOLUME=0-100设定音量的大小。如果没设定的话,就用系统的音量。HIDDEN=TRUE隐藏媒体播放器•插入视频•操作步骤如下:•1)将光标放置在您要嵌入视频文件的地方。•2)在“插入”栏的“常用”类别中,单击“媒体/插件”按钮,然后选择视频文件。•3)在属性面板设置“参数”属性。完成“想牵一次你的手”网页。网页效果见下图。★课外拓展实践★•要求:打开文件“03.html”•1、在顶部图像上插入Flash动画文件hengline1.swf,并将动画设置为透明•2、有倒影的图形为Applet小程序:菜单“插入|媒体|Applet”,选择文件lake.class,设置参数paramname=imagevalue=111.jpg/•3、插入背景音乐:背景音乐文件xzm.mid,循环自动播放•4、右上角的风景幻灯片制作步骤见下一张幻灯片。•完成后交到“第3次”作业文件夹。•操作提示:•1、制作Banner:插入1x1的表格,宽770px,高123px,背景图为banner.jpg。在表格中插入Flash影片hengline1.swf,将影片背景设置为透明。•2、插入图像查看器:–菜单“插入|媒体|图像查看器”,在对话框中指定生成的Flash动画的文件名和存放地址;–选中Flash动画,右侧面板变为“Flash元素”面板,在面板中设置参数imageURLs(图片的地址);–其它参数:ShowControls(是否显示控制条)、SlideAutoPlay(是否自动播放)、SlideLoop(是否循环播放)、SlideDelay(切换间隔时间)。★本节小结★网页中可以插入多种形式的多媒体对象,包括flash动画、flash按钮、flash文本、flash视频和Shockwave影片等,这些对象都为网页增加动感效果,吸引浏览者眼球。Dreamweaver甚至可以抛开flash软件,独立地创建flash文字和按钮。