5层和时间轴.ppt

5.1 层 5.2 时间轴 本章小结 5.1 层 5.2 时间轴 《网页设计与网站建设》 $ [知识目标] 　　了解网页中的层 　　了解时间轴面板 　　掌握应用层和时间轴制作动画方法 8 [能力目标] 　　掌握在网页中创建层及编辑层的基本操作 　　熟练时间轴面板的操作 　　能够应用层和时间轴制作网页动画 第5章 层和时间轴 第5章 层和时间轴 5.1.1 创建层 5.1.2 层的基本操作 5.1.3 层与表格的转换 　　（一）创建层 　　1．新建一个文档。 　　2．在“插入栏”中的“布局”类别中，单击“描绘层”按钮。 　　3．鼠标指针变“+”，按住 左键并拖动，可以在网页中创 建一个层,如图。 　　按住Ctrl键，可以一次在 文档窗口中绘制多个层。 5.1.1 创建层 5.1 层 　　（二）创建嵌套层 　　1．新建一个文档，绘制一个层。 　　２．执行以下操作之一： 　　?将鼠标放在层中，单击菜单栏中“插入”|“布局对象”|“层”命令。 　　?将一个层的标志图标　 ，用拖拽的方式拖到另一层中。 　　3．创建了一个嵌套层。其外面的层被称为“父层”，里面的层被称为“子层”。 　　（三）向层中添加内容 　　将光标定位在层中，光标变为“|”，可以向层中插入文本或图像等网页元素。 5.1.1 创建层 5.1 层 　　1．选择层 　　使用下述方法中的任意一种方法，均可选中一个层： 　　?单击文档中层的边框线； 　　?单击层上方的 　标记； 　　?单击文档左上方的层标志　　 　　2．移动层。 　　使用下述方法中的任意一种方法，均可移动层： 　　?选中层后，拖动　 标记，可以将层移到文档的任意位置。 　　?鼠标移到层的边框上，指针变为 　，拖动鼠标可以移动层。 　　?对于多层的移动，拖动最后被选中的有实心控制点的层的 　标记，可以同时将多层移动。 5.1.2 层的基本操作 5.1 层 　　3．层的对齐。 　　选中多层，单击菜单栏中“修改”|“排列顺序”命令，选择对齐方式，如“左对齐”、“右对齐”；“对齐上边缘”或“对齐下边缘”等。 　　4．层的属性设置。 　　同其他网页元素一样，层的设置需要在“属性检查器”中进行。选中层，层属性如图所示。 5.1.2 层的基本操作 5.1 层 剪辑：设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值 　　5．层面板的使用。 　　单击菜单栏中“窗口”|“层”命令或按快捷键F2，打开层面板。 　　?“名称”：显示每个层的名称，双击可以改变层的名称。 　　?“防止重叠”：选择该选项，则不能将一个层移到另一个层的上面。 　　? 　按钮：设置层的可见性，用鼠标反复单击可以实现层的可见和隐藏。 ，可见； ，隐藏。 　　?“Z”：设置层的Z轴值。单点击层的Z轴位置可以修改Z轴值。 5.1.2 层的基本操作 5.1 层 　　（一）将层转化为表格 　　1．新建一个空白文档，在文档中绘制两个层。　 　　2．单击菜单栏中“修改”|“转换”|“层到表格”命令，打开“转换层为表格”对话框。 　　3．设置完成后，单击“确定”按钮，即将文档中的层转化为表格。 5.1.3 层与表格的转换 5.1 层 　　（二）将表格转化为层 　　1．打开上面层转换为表格的文档。 　　2．单击菜单栏中“修改”|“转换”|“表格到层”命令，打开“转换表格为层”对话框架。 5.1.3 层与表格的转换 5.1 层 1、将表格转换为图层时，空的表格单元不转换，表格之外的内容也被置于层中。 2、因为表格单元不会重叠，所以Dreamweaver不会把重叠的层转换为表格。如果计划把一个文档中的层转换为表格，就要在建立、移动层和调整层大小时防止层发生重叠。 3、要防止层重叠，可在层面板中选择“防止重叠”选项。但如果是在建立了重叠层之后才选择了此选项，不会改变以前发生的层重叠，此时只有通过移动层的方法把重叠的层分开。 4、即使选择了防止层重叠选项，有些操作也会使层发生重叠。比如使用插入菜单插入层，在属性检查器中输入层边距等。总之，如果发生了层重叠，就要在文档窗口拖动重叠的层，使它们分离开来。 5.1.4 转换时需注意的问题 5.1 层 5.2.1 认识时间轴 5.2.2 创建动画 　　单击菜单栏中“窗口”|“时间轴”命令或按组合键Alt+F9，可以打开时间轴面板。 5.2.1 认识时间轴 5.2 时间轴 时间轴列表框 当前帧编号 时间轴菜单 行为通道 帧序号 动画条 动画通道 播放头 关键帧 　　（一）图像置换动画 　　（1）新建一个文档并保存。 　　（2）在文档中插入图像，并将图像拖拽到时间轴中，在时间轴的动画通道上会出现一个动画条，如图，默认长度为15帧。 　　（3）将动画条的右侧关键帧向右拖