多媒体与网页特效(-)课件.ppt
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《多媒体与网页特效(-)课件.ppt》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 多媒体 网页 特效 课件
- 资源描述:
-
1、 本章的主要内容如下:本章的主要内容如下:13-1 在网页中插入多媒体对象 13-2 行为 13-3 时间轴 13-4 制作弹出菜单l13.1.1 插入flash动画l13.1.2 插入声音l13.1.3 插入视频l 网页中除了文本与图像表述网页内容以外,还离不开网页多媒体,如:Flash动画、声音、视频等,这些多媒体元素的加入,使得网页表现更丰富多彩,在文本和图像的基础上,多媒体的加入更是锦上添花。在学习本章内容之前请先建立站点。l1.插入插入Flashl插入在网页中的Flash格式为swf,Flash源文件格式为Fla,源文件不能直接插入到网页中,但可以在Flash软件中修改源文件。l【实
2、例13.1】制作烟花效果的网页l制作过程:l(1)打开【插入】面板,单击【常用】选项卡中的【媒体:Flash】按钮l(2)弹出【选择文件】对话框,选择Flash文件13-1.swf.l(3)单击【确定】按钮后弹出【对象标签辅助功能属性】对话框,在输入标题后单击【确定】按钮即可将Flash文件插入到网页中,插入的Flash动画并不会在文档窗口中显示内容,而是以一个带有字母F的灰色框来表示。l(4)在文档窗口单击这个Flash文件,就可以在属性面板中设置它的属性了,如图13-1所示。(5)将Flash的背景透明,使得Flash内容与Flash下方的图像达到合二为一的效果。在【属性】面板中单击【参数
3、】按钮,弹出【参数】对 框,作如图13-2所示的设置:l(6)选择“循环”复选框时影片将连续播放,否则影片在播放一次后自动停止。通过选择“自动播放”复选框后,可以设定Flash文件是否在页面加载时就播放。在“品质”下拉列表中可以选择Flash影片的画质,以最佳状态显示,就选择“高品质”。如图13-3所示即是保存了网页后按【F12】键在浏览器中预览网页的效果。l2.插入插入Flash文本文本l打开【插入】面板,单击【常用】选项卡中的【媒体:Flash】按钮,弹出【插入Flash文本】对话框,如图13-4所示:l字体随意,大小22px,颜色设置为#F5E458,转滚颜色为#54C994,文本为“图
4、片素材”,背景颜色#6DCFF6,选择自己需要的路径链接。同样方法我们可以使用该功能,诸如制作“代码素材”、“Flash动漫”、“精美壁纸”和“音频视频”等Flash文本来制作一个导航栏。l3、插入、插入Flash按钮按钮lFlash按钮的存在使得网页的样式更加生动。在Dreamweaver中插入Flash按钮不需要用户设计,这些按钮是由Dreamweaver自动生成,并且有多种按钮样式可供用户选择。l打开【插入】面板,单击【常用】选项卡中的【媒体:Flash】按钮,在列表中选择Flash按钮,弹出【插入Flash按钮】对话框,如图13-5所示:l【样式】用来选择按钮的外观,【按钮文本】用来输
5、入按钮上的文字,【字体】和【大小】用于设置按钮上文字的字体和大小,字号变大,按钮并不会跟着改变。l【链接】用于输入按钮的链接,可以是外部链接,也可以是内部链接。【目标】用来设置打开的链接窗口。l4.插入插入Flash视频视频lFlash Video即Flash视频,它的后缀名为:.flv,是目前广泛流行的一种视频文件格式。一般的视频文件:asf、wmv、rm等都需要专门的播放器来支持视频文件的播放,否则根本无法收看,并且这类文件容量过大,下载慢,查看也不很流畅。为了解决播放器和容量的问题,可以将各类视频文件转换成Flash视频文件,即Flv格式。经过编码后的音频和视频数据,通过Flash Pl
6、ayer传送。制作流程:l(1)打开【插入】面板,单击【常用】选项卡中的【媒体:Flash】按钮,弹出【插入Flash视频】对话框,如图13-6所示:l(2)在【URL】文本框中,指定.flv 文件的相对路径,方法是单击【浏览】按钮,选择该 FLV 文件。l(3)从【外观】弹出式菜单中选择 一种外观皮肤。所选外观的预览会出现在“外观”弹出式菜单下方。【外观】选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。l(4)分别在【宽度】文本框与【高度】文本框中设置该视频的宽度与高度,然后单击【确定】按钮。l虽然向Web页添加的声音文件可以有多种不同类型格式,但并不是所有的声音格式都适
7、合在网页中应用。在确定采用哪一格式和方法添加声音前,需要考虑添加声音的目的、观众、文件大小、声音品质和不同浏览器的差异等因素。在网页中常用的格式有.wav、.midi、.rm和.mp3等。另外,用户在访问插入音频的页面时,只有在他的客户端浏览器具有可播放所选声音文件的适当插件,声音才可以播放出来。l网页中插入声音的常用方法有如下两种:其一为超级链接到声音文件,其二为嵌入声音文件到网页中。l1.超级链接到声音文件超级链接到声音文件l现在Internet上大量的在线音乐就是采用超级链接链接到声音文件。下面通过一个实例来说明。l(1)准备好一个音乐文件。选择作为超级链接载体的文本或图像,如图13-7
8、所示的实例中选择的是文本“在线下载”。(2)在属性面板的【链接】文本框中键入声音文件所在的路径和名称,或者单击后面的文件夹图标直接选择声音文件。实例中选择的是“莫扎特小夜曲.mp3”,如图13-8所示。(3)保存文件,按 F12 键预览该网页。当鼠标移动到“在线下载”上时鼠标呈现小手的形状,单击将播放音乐,如图13-9所示。或者单击鼠标右键,在弹出菜单中选择“目标另存为”将该音乐文件下载到本地。l2.将声音嵌入网页将声音嵌入网页l如果希望插入声音的同时,在网页上还可以显示播放器的外观,包括播放、暂停、停止、音量调整等控制面板,需要使用嵌入声音文件到网页中的方法。l(1)准备好一个音乐文件,在页
9、面添加文字“2、月满西楼”。l(2)打开【插入】面板,单击【常用】选项卡中的【媒体】,在下拉菜单中单击【插件】按钮,弹出【选择文件】对话框,选择一个准备好的音乐文件,本实例为“月满西楼.wma”,如图13-10所示。调整播放插件的大小外观。l(3)如果用户的计算机中没有安装相关音乐文件的播放插件,在属性面板的“插件URL”中输入该插件的地址,供用户链接并下载该插件。l(4)保存文件,按F12 键预览该网页,效果如图13-11所示。l3.添加背景音乐添加背景音乐l在网页中可以嵌入背景音乐。这种音乐多以MP3,MIDI文件为主。添加背景音乐有两种方法,一种是通过手写代码实现,还有一种是通过添加行为
10、来实现。l在代码视图中,通过标记可以将网页设置上背景音乐,具体步骤是:l(1)准备好一个音乐文件,打开需要添加背景音乐的网页(网页和声音最好使用相对路径)。l(2)选择“代码视图”,将光标定位到之后,输入下面的代码:lll l插入背景音乐lll l(3)如果希望循环播放音乐,将在代码中添加一个loop属性即可:l l l(4)保存文件,按F12 键预览该网页,即可听见背景音乐。l插入视频和插入声音的方法类似,也有两种情况,其一为超级链接到视频文件,其二为嵌入视频文件到网页中。l1.超级链接到视频文件超级链接到视频文件l用户浏览器端必须拥有辅助应用程序才能查看常见的视频格式,如 Real One
11、 Player、QuickTime 和 Windows Media Player等。l(1)准备好一个视频文件,在网页中选择指向视频文件的链接载体(文本或图像)。l(2)在属性面板的“链接”文本框中输入视频文件的路径名称,或者单击后面的文件夹图标选择文件,如图13-12所示。l(3)设置完毕,保存文件。按F12 键预览该网页,如果正确安装了播放程序,那么点击链接载体,可弹出MediaPlayer等辅助程序,并播放该视频文件。l2.嵌入视频文件到网页中嵌入视频文件到网页中l如果希望添加视频文件并在网页上显示播放器的外观,请选择嵌入视频文件到网页中的方法。l(1)准备好一个视频文件,将光标置于需要
12、嵌入视频文件的位置。l(2)打开【插入】面板,单击【常用】选项卡中的【媒体】,在下拉菜单中单击【插件】按钮,弹出【选择文件】对话框,选择其中的视频文件,将其添加到网页中,如图13-13所示。适当调节“插件”占位符的大小及位置。l(3)如果用户的计算机中没有安装相关视频文件的播放插件,在属性面板的“插件URL”中输入该插件的地址,供用户链接并下载该插件。l(4)设置完毕,保存文件。按F12 键预览网页,网页将显示相关播放插件并播放。如图13-14所示。l13.2.1 行为基础知识l13.2.2 显示-隐藏层l13.2.3 设置状态条文本l13.2.4 设置层文本l13.2.5 设置弹出信息 一般
13、说来,动态网页是通过编写脚本代码来实现用户与页面的简单交互的。但是编写脚本既复杂又专业需要专门学习,而Dreamweaver提供的“行为”的机制,虽然行为也是基于JaveScript来实现动态网页和交互的,但却不需书写任何代码。在可视化环境中按几个按钮,填几个选项就可以实现丰富的动态页面效果,实现人与页面的简单交互。行为是事件与动作的彼此结合。例如,当鼠标移动到网页的图片上方时,图片高亮显示,此时的鼠标移动称为时间,图片的变化称为动作,一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成,而事件是由浏览器前用户的操作相关,如单击鼠标、鼠标上滚等。l
14、1.了解行为了解行为l“行为”可以创建网页动态效果,实现用户与页面的交互。行为是由事件和动作组成的,例如:将鼠标移到一幅图像上产生了一个事件,如果图像发生变化(前面介绍过的轮替图像),就导致发生了一个动作。与行为相关的有三个重要的部分对象、事件和动作。l(1)对象(Object)l对象是产生行为的主体,很多网页元素都可以成为对象,如图片、文字、多媒体文件等,甚至是整个页面。l(2)事件(Event)l事件是触发动态效果的原因,它可以被附加到各种页面元素上,也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的,例如:将鼠标移到图片上、把鼠标放在图片之外、单击鼠标,是与鼠标有关的三个
15、最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的,通常高版本的浏览器支持更多的事件。l(3)动作(Action)l行为通过动作来完成动态效果,如:图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码,在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码,就不必自己编写。l(4)事件与动作l将事件和动作组合起来就构成了行为,例如,将onClick行为事件与一段JaveScript代码相关联,单击鼠标时就可以执行相应的JaveScript代码(动作)。一个
16、事件可以同多个动作相关联(1:n),即发生事件时可以执行多个动作。为了实现需要的效果,我们还可以指定和修改动作发生的顺序。l2.应用行为应用行为l在Dreamwaever中,对行为的添加和控制主要通过【行为】面板来实现。执行“窗口”“行为”菜单命令,打开行为面板,如图13-15所示。l在行为面板上可以进行如下操作:l(1)单击【+】按钮,打开动作菜单,添加行为;单击【-】按钮,删除行为。添加行为时,从动作菜单中选择一个行为项。l(2)单击事件列右方的三角,打开事件菜单,可以选择事件。l(3)单击向上箭头或向下箭头,可将动作项向前移或向后移,改变动作执行的顺序。l3.创建行为创建行为l一般创建行
17、为有三个步骤:选择对象、添加动作、调整事件。l我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是,在网页上单击一幅小图像,打开一个新窗口显示放大的图像。l(1)打开13-4.html,选中图片。l(2)单击行为面板上的+按钮,打开动作菜单。从动作菜单中选择“打开浏览器”命令,在弹出的对话框中设置参数。l在“要显示的URL”文本框中,单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。窗口宽度设为900px,窗口高度设为900px。窗口名称为“放大图片”。l(3)当我们添加行为时,系统自动为我们选择了事件onClick(单击鼠标),现在,我们单击行为
18、面板上的事件菜单按钮,打开事件菜单,重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过),如图13-16所示:l行为是实现网页上交互的一种捷径,行为将 javascript 代码放置在文档中,以允许访问者与 Web 页进行交互,从而以多种方式更改页面动作或执行某些任务。行为是事件和由该事件触发的动作的组合。l【实例13.2.2】光标移到图片上面。在它的右侧即显示一段其它内容(动画)。l这是两个行为:行为一:移入+显示;行为二:移出+隐藏。l事件是:鼠标移入和移出。动作是:显示和隐藏。l具体操作如下:l1.在页面中插入一张图片,本例为兰花图片。l2
展开阅读全文