实现效果：层与时间轴应用网站制作基础

（1）了解层和时间轴的基本知识；

（2）掌握层的创建和使用方法；

（3）掌握时间轴的使用方法；

（4）掌握层和时间轴结合使用的技巧。

层在网页中主要用于网页布局，利用dreamweaver工具能很方便地创建多个层，并且每个层都可以自由移动，层与层之间有一种层次效果。时间轴为网页简单动画效果提供了技术支持，层与时间轴相结合，可以实现简单的动画效果，如果将不同的网页元素放入层中，然后设置时间轴，则可以达到层随时间的变化而发生位置的相应改变，从而实现一种动画效果。

1.层

层在网页中的标记名称为DIV，主要是为网页精确布局而提供的一种元素，可以通过设置层位置属性调整网页布局效果，多个层之间还有层次位置关系。层的具体属性如图 4-1-1所示。

图4-1-1　层的【属性】面板

层编号：设置层的名称，不同层的名称不能相同。

左属性：设置层相当于网页或父层左边的位置。

上属性：设置层相当于网页或父层顶部的位置。

宽属性：设置层的宽度。

高属性：设置层的高度。

Z 轴属性：设置层与层之间的上下层叠关系，值越大表示该层越靠近浏览者，值越小该层的位置越靠后。

可见性：设置层在初始状态时是显示还是隐藏状态。

背景图像：设置以图像作为层的背景。

背景颜色：设置以色彩作为层的背景。

溢出属性：设置当层中的内容超出了层的显示区域时处理的方式，有visible、hidden、scroll和auto四种方式。(www.xing528.com)

剪辑属性：设置层四周精确尺寸的可见区域。

2.时间轴

时间轴是 Dreamweaver 工具中提供的一种元素，它用于在不同时间段，设置不同网页元素的位置，从而实现网页中某些特定的动画效果。时间轴的控制面板如图4-1-2所示。

图4-1-2　时间轴的【属性】面板

帧频率：表示每一秒播放的帧数，可以调整值的大小来设置播放的速度。

自动播放：该项被选中时，表示浏览者打开文档时自动播放动画。

循环：该项被选中时，表示当动画播放完毕后，继续从头开始循环播放。

【B】：表示行为通道，该通道上主要显示时间轴上添加了行为的位置，当动画播放到添加了行为的帧时，将运行所设定的行为。

图层通道：在该通道上放置和编辑图层的内容。

计算机操作系统Windows 7/8/10、Dreamweaver CS6软件，Chrome/360/IE浏览器。