DreamWeaver完整教案第十章.pptVIP

* * 第十章 制作行为、层、时间轴特效 主要内容： 用层定位内容 行为的应用 时间轴、层与行为搭配使用 学习目的： 理解层的概念及其作用 学习插入层和使用层的方法 理解行为的概念以及作用 学习添加、修改行为的方法 掌握将时间轴、层与行为的搭配使用技巧 掌握利用行为控制时间轴的技巧 课堂演示讲授时间：3小时 1、用层定位内容 层是一种能够绝对定位的页面元素，简单的说就是层可以浮动在页面，用户可以将层放置在页面的任何位置。另外，层亦是一个容器，它可以包含文本、图像或其他任何可在HTML文档正文中放入的内容，所以很多网页设计师都会使用层定位页面内容。 关于层 在Dreamweaver中，用户可以将层前后叠放，或隐藏和显示某些层，以及在屏幕上移动层。利用层的特性，还可以制作不同的效果，例如先在一个层中输入灰色在文本，然后在该层的前面放置第二个层，并在该层输入红色的文本，如此即可制作成有阴影效果的文本，如图所示。 插入层 在Dreamweaver中，用户可以很方便在页面上插入层并精确地将层定位。 另外，只需将插入点定位在层内，即可如同在页面中添加内容一样，将各种不 同的页面内容插入至层内。 当插入层后，可以打开【属性】面板查看其属性，亦可通过面板设置层的 属性，包括层编号、大小、位置、背景图像和颜色、剪辑等等。 设置层属性 显示与隐藏层 在Dreamweaver中，用户可以任意设置层的显示与隐藏状态，以适合某些 特殊的涉及需求，例如先隐藏层，然后通过行为来控制层的显示。 设置层重叠 由于层可以让指在页面任何位置，然后当两个层相遇时，亦可以重叠的方 式放置。当层重叠后，就产生了在竖直空间中的排列顺序，即Z轴顺序，亦称为 堆叠顺序。利用层的重叠，可以制作不同的效果 2、行为的应用 关于行为 行为是事件和由该事件触发的动作的组合，简单来说：一个事件的发生， 会对应地产生一个动作，例如为网页加入“弹出讯息”行为，并设置事件为 “onLoad”，那么当网页打开时，就会弹出设置的讯息（“onLoad”事件触发的动作）， 这整个过程就是一个行为所产生的作用。 对于一般用户而言，如果通过编写JavaScript代码 的方法制作页面效果，需要具有较高的程序编写能力， 所以会给网页设计带来障碍。为此，Dreamweaver将一 些常用的JavaScript代码，以菜单命令的方式安排在 【行为】面板上，如此用户只需经过选择、设置命令的 简单操作，即可完成很多原来需要编写代码的页面效果。 事件并非Dreamweaver应用程序本身提供，而是浏览器提供。每个浏 览器都提供一组事件，这些事件与行为的动作紧紧关联在一起，所以访问者 在页面上执行某些操作时，浏览器即可生成事件，并通过事件调用引起动作 发生的JavaScript代码。 关于事件 通过【行为】面板，可以将行为添加到页面或页面 元素中（例如图像、层、文本），并对行为设置相关的 参数。 添加与设置行为 由于事件是浏览器提供，所以不同类型或不同版本 的浏览器所提供的事件都不尽相同。通常版本比较低的 浏览器，提供的事件相对比较少。 3、时间轴、层与行为搭配使用 认识【时间轴】面板 要利用时间轴制作层的移动，就 离不开【时间轴】面板，它显示了层 和图像的属性在一段时间内的更改情 况。 最简单的时间轴动画就是层的直线运动，即让层在起点沿同一方向到达终点。 我们只需将图像插入层内，通过层的直线运动，即可让图像在页面中产生相应的 直线运动效果。 制作层的直线运动 层的直线运动是由层在两个关键帧之间的运动，即只能进行两点成一线的 运动。但若为时间轴的动画条增加多个关键帧，那么多点连在一起，就可以进 行曲线运动了。 制作层的曲线运动 制作时间轴特效后，可以通过【时间轴】面板设置自动播放。但如果不设 置自动播放，时间轴就无法播放吗？并非如此，利用行为亦同样可以控制时间 轴的播放。下例将取消时间轴自动播放功能，然后通过行为设置时间轴在浏览 者单击后即播放，再次单击后即可停止。 利用行为控制时间轴播放 除了可以通过【行为】面板设置层的显示或隐藏外，还可以利用行为来控制 层的显示与隐藏。同时，利用层的显示与隐藏，可以制作出层中内容的变换效果。 利用行为控制层显示/隐藏 4、本章小结 　 本章介绍了层和行为的概念，还