《网页设计技术教程》第12章 层、时间轴和

第12章层、时间轴和行为 本章要点: 区创建层、使用层 区创建时间轴动画 区层的一些应用 区创建行为 区基本行为操作

第12章 层、时间轴和行为 本章要点：  创建层、使用层  创建时间轴动画  层的一些应用  创建行为  基本行为操作

12.1创建和使用层 121.1层的概念 12.1.2在网页中创建层 1.插入层 2.创建嵌套层 在一个已有的层中,可以插入另一个层,这就是 嵌套层。如图12-1所示就是嵌套层的情况。一般我们 称外部的被嵌套层为父层,将层内部的层称作嵌套层, 又叫子层。子层对应的层标记会出现在其父层中

12.1 创建和使用层 ❖ 12.1.1 层的概念 12.1.2 在网页中创建层 1．插入层 2．创建嵌套层 在一个已有的层中，可以插入另一个层，这就是 嵌套层。如图12-1所示就是嵌套层的情况。一般我们 称外部的被嵌套层为父层，将层内部的层称作嵌套层， 又叫子层。子层对应的层标记会出现在其父层中

121.3设置层的属性 创建层后,选取该层就在属性面板中打开了层的属 性,此时可在属性面板对该层的属性进行设置。如图: v屈性 层编号左)65Px宽)138X2轴)1背景图像 Layer上)28x高0)144x显示)lant-背最顏色c) 标签)Dw 谥出 剪辑:左 右 上

❖ 12.1.3 设置层的属性 创建层后，选取该层就在属性面板中打开了层的属 性，此时可在属性面板对该层的属性进行设置。如图:

12.1.4对层的基本操作 1.激活层 选取层 3.调整层的大小 4.移动层 5.对齐层 6.改变层的堆叠顺序 7.改变层的可见性

❖12.1.4 对层的基本操作 1．激活层 2．选取层 3．调整层的大小 4．移动层 5．对齐层 6．改变层的堆叠顺序 7．改变层的可见性

12.15转换表格和层 在 Dreamwerver mX中表格和层可以互相转换。可以 用层对网页进行布局,然后将层转换为表格,以便在 较早的浏览器中进行查看。 1.将层转换为表格 2.将表格转换为层 提示:空白单元格将不会转换为层,除非 其中设置了背景颜色。表格外的元素也会放置 到层中

❖ 12.1.5 转换表格和层 在Dreamwerver MX中表格和层可以互相转换。可以 用层对网页进行布局，然后将层转换为表格，以便在 较早的浏览器中进行查看。 1．将层转换为表格 2．将表格转换为层  提示：空白单元格将不会转换为层，除非 其中设置了背景颜色。表格外的元素也会放置 到层中

122创建时间轴动画 12.21认识时间轴面板 每秒帧数 时间轴 下拉菜 首后放 播头单 赖放 自动播放蔼环 行为通道 时间轴 nmh1自动播放干潘环 345056 1名ayur1 动面条 关进帧 1号 动面通道

12.2 创建时间轴动画 ❖ 12.2.1 认识时间轴面板

12.22创建时间轴动画 时间轴动画是建立在层基础上,通过改变层的位置、大小等 属性来创建的。因此如果要创建图像或文本等对象的动画,则 首先必须将这些对象放置在层中,然后通过移动层来移动这些 对象,从而达到图像或文本等对象的动画效果 v时间轴 Timeline 1+F15「自动播放「循环 B 15202530354045505 2 添加对象后的时间轴

❖ 12.2.2 创建时间轴动画 时间轴动画是建立在层基础上，通过改变层的位置、大小等 属性来创建的。因此如果要创建图像或文本等对象的动画，则 首先必须将这些对象放置在层中，然后通过移动层来移动这些 对象，从而达到图像或文本等对象的动画效果。 添加对象后的时间轴

冷1223修改时间轴 (1)添加关键帧 (2)删除关键帧 (3)改变动画的播放时间 (4)改变动画起始时间 (5)改变整个动画的位置 (6)使用多个时间轴: (7)新建时间轴 (8)删除时间轴

（1）添加关键帧 （2）删除关键帧 （3）改变动画的播放时间 （4）改变动画起始时间 （5）改变整个动画的位置 （6）使用多个时间轴： （7）新建时间轴 （8）删除时间轴 ❖12.2.3 修改时间轴

122.4创建沿路径运动的动画 Dreamweaver mX为用户通供了一个录制路径的方 法,用于创建复杂路径的动画。具体方法如下: 1)在文档中选中要创建动画的层,将该层拖到动 画的起始位置。 (2)选择【修改】→【时间轴】→【录制层路径】菜 单命令 (3)在页面中按照需要的路径拖动层

❖ Dreamweaver MX为用户通供了一个录制路径的方 法，用于创建复杂路径的动画。具体方法如下： （1）在文档中选中要创建动画的层，将该层拖到动 画的起始位置。 （2）选择【修改】→【时间轴】→【录制层路径】菜 单命令 。 （3）在页面中按照需要的路径拖动层。 12.2.4 创建沿路径运动的动画

1225在时间轴中使用行为 可以在时间轴上绑定行为,当动画执行到某个帧位置 时,自动运行该行为对应的动作。有关行为的概念请 参考下节中的详细介绍。 将行为绑定到时间轴上的操作步骤如下: (1)打开时间轴面板,添加时间轴动画 2)单击时间轴面板的行为通道上要绑定行为的帧位置 (3)打开时间轴面板菜单,选择“添加行为”命令,这时会显示 行为面板。 (4)单击行为面板上的加按钮,打开动作菜单,选定某个动作。 (5)绑定行为后,会在行为通道的相应位置出现一个 带横杠的浅蓝色方块,它是行为标记

12.2.5 在时间轴中使用行为 ❖ 可以在时间轴上绑定行为，当动画执行到某个帧位置 时，自动运行该行为对应的动作。有关行为的概念请 参考下节中的详细介绍。 ❖ 将行为绑定到时间轴上的操作步骤如下： （1）打开时间轴面板，添加时间轴动画。 （2）单击时间轴面板的行为通道上要绑定行为的帧位置。 （3）打开时间轴面板菜单，选择“添加行为”命令，这时会显示 行为面板。 （4）单击行为面板上的加按钮，打开动作菜单，选定某个动作。 （5）绑定行为后，会在行为通道的相应位置出现一个 带横杠的浅蓝色方块，它是行为标记