DW教程--八、层与时间轴的应用

DW教程--八、层与时间轴的应用

第八节层与时间轴的应用

层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。

一、创建层

1、创建普通层

（1）插入层

选择菜单栏>插入>布局对象>层命令，即可将层插入到页面中去。

使用这种方法插入层，层的位置由光标所在的位置决定，光标放置在什么位置，层就在什么位置出现。选中层会出现六个小手柄，拖动小手柄可以改变层的大小。

（2）拖放层

打开快捷栏的“布局”选项，单击“绘制层”按钮，单击鼠标左键，并且按住不放，拖动图标到文档窗口中，然后释放鼠标，这是层就会出现在页面中了。

（3）绘制层

打开快捷栏的“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是层的大小，释放鼠标猴层就会出现在页面中。

2、创建嵌套层

创建嵌套层就是在一个层内插入另外的层。

方法一：将光标放才某层内，选择菜单栏>插入>布局对象>层命令，即可在改层内插入一个层。

方法二：打开层面板，从中选择需要嵌套的层，此时按住Ctrl键同时拖动改层到另外一个层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。

二、设置层的属性

选中要设置的层，就可以在属性面板中设置层的属性了。

层编号：给层命名，以便在“层”面板和 JavaScript 代码中标识该层。

左、上：指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。

宽、高：指定层的宽度和高度。如果层的内容超过指定大小，层的底边缘（按照在 Dreamweaver设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当层在浏览器中出现时，底边缘将不会延伸。

Z轴：设置层的层次属性。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“层”面板要比输入特定的 z 轴值更为简便

可见性：在“可见性”下拉列表中，设置层的可见性。使用教本语言

如JavaScrip可以控制层的动态显示和隐藏。有四个选项：

Default——选择该选项，则不指明层的可见性。

Inherit——选择该选项，可以继承父层的可见性。

Visible——选择该选项，可以显示层及其包含的内容，无论其父级层是否可见。

Hidden——选择该选项，可以隐藏层及其包含的内容，无论其父级层是否可见。

背景颜色：用来设置层的背景颜色。

背景图像——用来设置层的背景图像。

溢出——选择当层内容超过层的大小时的处理方式。有四个选项：

Visible（显示）：选择该选项，当层内容超出层的范围时，可自动增加层尺寸。

hidden（隐藏）: 选择该选项，，当层内容超出层的范围时，保持层尺寸不变，隐藏超出部分的内容。

scroll（滚动条）: 选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。

auto（自动）: 选择该选项，，当层内容超出层的范围时，自动增加滚动条（默认）

剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后，只有指定的矩形区域才是可见的。

类：在类的下拉列表中，可以选择已经设置好的CSS样式或新建CSS 样式。

注意：位置和大小的默认单位为像素 (px)。也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或 %（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格：

使用层制作特效我们在创建网页的时候，可以发现层可以在网页上随意改变位置，在设定层的属性的时，可以知道层有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。

三、时间轴

时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面，在时间轴中包含了制作动画时所必须的各种功能。

1、时间轴的各项功能

（1）时间轴弹出菜单：表示当前的时间轴名称。

（2）时间轴指针：在界面上显示当前位置的帧。

（3）不管时间轴在哪个位置，一直移动到第一帧。

（4）表示时间指针的当前位置。

（5）表示每秒显示的帧数。默认值时15帧。增加帧数值，则动画播放的速度将加快。

（6）自动不放：选中该项，则网页文档中应用动画后自动运行。

（7）LOOP（循环）：选中该项，则继续反复时间轴上的动画。

（8）行为通道：在指定帧中选选择要运行的行为。

（9）关键帧：可以变化的帧。

（10）图层条：意味着插入了“层”等对象。

（11）图层通道：它是用于编辑图层的空间。

2、在DW8中显示时间轴

选择菜单栏的窗口/时间轴或按快捷键Alt＋F9，则显示时间轴。

四、创建时间轴动画

时间线只能移动分层对象，如果想移动文本或图像之类的对象，可以将其放在层中。

1、打开09.html文件，

把光标放到页面左上方的位置，在插入面板选择布局>绘制层，创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”，将图层排列在适当的位置。

2、打开时间轴。选择层1后，拖动到时间轴的第一行上。

3、用同样的方法，把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2－6行上。

4、为了减慢文字移动的速度，把时间轴中的15帧全部扩展为25帧。

5、在时间轴中选择Layer1的第一帧，在属性面板的顶端坐标值（T）中输入（－50），这样，可以把文字放置到上侧。

6、用同样的方法选择其余层的第一帧后，把顶端坐标值（T）统一设定为（－50）。

7、为了每个一段时间下落一个文字，从第二个动画条开始向后移动5帧。勾选“自动播放选项”。

8、按F12浏览效果。