使用层和时间轴.pptVIP

　本章简介： 　　 如果用户想在网页上实现多个元素重叠的效果，可以使用层。层是网页中的一个区域，并且游离在文档之上。利用层可精确定位和重叠网页元素。通过设置不同层的显示或隐藏，实现特殊的效果。 Dreamweaver CS3提供了在网页上制作动态效果的功能，利用时间轴组织、控制层和图像等对象，在一定时间内播放，从而产生动态效果。 7.3　时间轴动画 课堂案例——卡通动画网 “时间轴”面板 使用时间轴移动层 录制层路径 控制动画播放 修改关键帧 添加、删除帧 课堂案例——精品家居网 用时间轴改变图像与层的属性 7.3　时间轴动画 课堂案例——卡通动画网 “时间轴”面板 使用时间轴移动层 录制层路径 控制动画播放 修改关键帧 添加、删除帧 课堂案例——精品家居网 用时间轴改变图像与层的属性 7.3.1　课堂案例——卡通动画网 使用“时间轴”面板制作层动画效果。使用“记录AP元素的路径”命令制作层沿着绘制的路径移动效果。 效果图 7.3.2　“时间轴”面板 “时间轴”面板用于显示层与图像随时间变化的属性。 选择“窗口 时间轴”命令，可以启用“时间轴”面板。 “时间轴”面板 7.3.2　“时间轴”面板 时间轴 下拉列表 回首帧 后退 播放一帧，按住不放，可播放动画 当前播放帧 时间轴 动画通道 每秒播放帧数 动画栏 关键帧 行为通道 7.3.3　使用时间轴移动层 最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴只能移动层，若要使图像或文本移动，必须先创建一个层，然后在该层中插入图像、文本或其他任何类型的内容。 7.3.3　使用时间轴移动层 使用时间轴制作层动画的具体操作步骤如下： （1）创建一个层，并在层中插入一张图片； （2）启动“时间轴”面板； （3）选中当前创建的层，将层拖曳到“时间轴”面板中适当的帧号处；（添加对象到“时间轴”面板） （4）在“时间轴”面板中拖曳结束关键帧到适当的帧序号处，以确定动画的播放时间； （5）选定结束关键帧，在页面中拖曳层到动画的结束位置，文档窗口中显示动画运动的直线路径； （6）若要制作曲线轨迹的动画，需要在时间轴上添加关键帧； （7）按住“时间轴”面板中的“播放”按钮不放，在页面中预览动画效果。 7.3.3　使用时间轴移动层 添加对象到“时间轴”面板的几种方法： 将层直接拖曳到“时间轴”面板中，然后释放鼠标； 选中要添加的层，单击“时间轴”面板右上角的按钮，在弹出的菜单中选择“添加对象”命令； 选中要添加的层，选择“修改时间轴增加对象到时间轴”命令； 选中要添加的层，在“时间轴”面板中单击鼠标右键，在弹出的菜单栏中选择“添加对象”命令。 返回 7.3.3　使用时间轴移动层 关键帧：在动画中可以影响到整个动画效果的帧。 如何添加关键帧以制作曲线轨迹的动画： 按住Ctrl的同时在时间轴适当帧序号处单击鼠标左键； 在网页中拖曳层到适当的位置，可以看到文档区中的直线轨迹变成曲线状。 返回 7.3.4　录制层路径 如果想制作沿任意轨迹运动的动画，可以使用“录制层路径”命令。 （1）在文档中插入一个层，并在层中插入一张图片。在文档窗口中将层移至动画开始时应处于的位置，并将播放头放置在“时间轴”面板中适当的帧序号处。 （2）选择“修改 时间轴 录制AP元素路径”命令。在文档中拖曳该层，拖曳的轨迹为层运动的路径。 （3）在动画停止的地方释放鼠标，“时间轴”面板中将自动添加对象，并且较为合理地创建了一定数目的关键帧。 （4）按住“时间轴”面板中的“播放”按钮 不放，在页面中预览动画。 * 第7章　使用层和时间轴 层的引入 在网页设计当中，层的概念的引入主要表现出两大优势： 在层出现之前，所有页面的布局具有很大的空间局限性，早期的网页设计人员一般用表格来控制图形等网页元素的位置。但是如果要精确定位一个图形，则必须在表格内进行表格嵌套，使设计变得十分复杂。当层出现以后，定位技术及其相关的设计就变的非常容易实现了。 在层出现之前，所有的网页设计和制作都是在同一个平面内进行的，可以利用的空间和设计的技术手段都十分有限，人们不得不在有限的空间对页面进行细致的略显繁琐布局规划，而在层出现之后，网页设计的空间由二维拓展成了三维，从而大大增加了设计人员的自由空间。 层的理解 网页中的层，就好像一张张透明的画布，每张画布都画着一些独立的色彩，而一幅完整的画就是由许多张这样的画布叠加在一起组成的，每一个层的色彩都能够和其它层进行叠加，而修改其中的某一层却不会影响其他层的效果，这就是层的概念核心，也体现了层的作用。 课堂学习目标 层的基本操作 应用层设计表格 时间轴动画 制作时间轴动画的技巧 7.1　层的基本操作 课堂案例——圣诞礼品屋 创建层 选择层 设置层的默认属性 AP元素面板 更改层的