【网页制作课件】图层的应用二.pptVIP

一、图层层叠效果制作 （实例操作演示） 二、鼠标移到图片时显示隐含图层。 （实例操作演示） 三、拖动层的应用。 （实例操作演示） 时间轴（线） 同学们上网的时候，经常会在网上看见小图标在以一定的轨迹移动飞行，效果动感十足，非常引人入胜，在页面上魅力四射。对于很多的设计者来说，如何能用最简单、快速的方法来实现它，可以说是个梦寐以求的事情。 一般在网页上实现动画的效果要使用程序JavaScript编程，或者使用专业的动画制作软件来实现，这对很多设计者来说比较头痛。------是DreamweaverMX带来的福音，利用它的时间轴技术就可以轻松、 简单、快速制作网页上满天飞的动画效果，而且不需要编写复杂的程序。 这也是DreamweaverMX强于其它网页编辑工具的地方。 一、时间轴基础 1、动画的原理 动画的原理：动画是由一系列连续（静止）的图片组成的。动画的实现就是将画面连起来播放，由于人的视觉的滞后，产生运动的和错觉，从而形成了运动的效果。 2、什么是帧？ 动画的基本单位就是一个画面，也叫做帧。 3、什么是关键帧？ 有些画面是关键的，会影响整个动画，这个画面称为关键帧。 而很多的画面按照时间先后顺序连起来就是动画。 4、什么是时间轴？ DreamweaverMX中的时间轴就是来安排画面的顺序的，是一种用来控制网页中的层在每一秒的位置的工具。 时间轴（线）面板 时间线面板中各部分的功能： 【时间线下拉列表框】 ：指定显示文档中的哪一个时间线。（一个文档中可以包含多个时间线） 【播放栏】 ：在时间线中当前指定显示哪一帧。 【帧编号(帧数)】 ：以连续编号的形式表示动画中的帧。 【行为通道】 ：用于存放控制时间线的指定帧的行为。 【帧】 ：时间轴上每一个小格。 【Fps】 ：动画的播放速度，用每秒播放多少帧来表示。系统默认设置是15帧/秒Fps值越大，相同帧数的动画显示就越快。 【动画条】 ：显示每个对象的动画长度。 【关键帧】 ：在动画条中特殊的帧。 【动画通道】 ：用于显示层对应的动画条。（即是把要设置成动画的层添加到此通道中） 使用时间轴面板注意的问题： 时间轴面板是用来创建页面上动画效果，而时间轴只对层起作用，如果要希望移动文本、图像之类的对象，可将它们先放置在层中，然后再设置为时间动画。 在时间轴面板上单击鼠标右键，可以打开有关时间轴所有命令的快捷菜单。 三、使用时间线来制作动画效果 例1、滚动字幕(或者滚动的图片) 重点介绍不同的轨迹的设置方法。 例2、滚动广告牌（嵌套图层的应用） 例3、幻灯片效果 实现网页上的幻灯片效果的常用方法有： 方法一、用时间轴控制图片替换。 方法二、用时间轴改变层的叠放顺序。 方法三、用时间轴添加行为 例4、用时间轴改变层的大小。 例5、行为和时间轴的综合应用实例。 本节小结 本节主要介绍了图层的创建方法、图层的属性、图层的应用，最后又通过制作一些图层应用的实例讲解，使大家对图层的功能加深了理解。 重点熟练掌握网页中图层的创建，灵活、合理使用图层以满足网页设计实际中的需要。 上机操作作业 每个同学独立上机操作完成老师讲过的例子。要求熟练掌握。 * * * * * * 5、什么时候使用时间轴？ 想要网页中的层移动的时候使用时间轴。（时间线一定是和层一起使用的！------牢记!） 6、如何打开时间轴？ 操作方法：选择主菜单中的【窗口】/ 【其它】/【时间线（轴）】命令，或者直接按Alt+F9打开时间轴。 二、使用时间轴面板 选择打开时间轴（线）命令，则弹出一个系统的时间轴面板如下图所示： 时间线下拉列表框 播放栏 动画条 关键帧：在动画中的画面是关键的，会影响整个动画。 行为通道 帧编号(帧数) B 循环 动画的播放速度 显示每个对象的动画长度