第10章 使用层和时间轴.ppt

本章将介绍层和时间轴的基本知识以及使用它们创建动画的基本方法。 * 第10章 使用层和时间轴 教学目标 了解层的概念和【层】面板的使用方法。 掌握创建和编辑层的基本方法。 掌握【时间轴】面板的使用方法。 掌握使用层和时间轴创建动画的方法。 10.1 创建层 本节主要内容： 认识层 创建层 设置层属性 10.1.1 认识层 层是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将层放置在页面的任何位置。在网页制作中，可以使用层将许多对象进行重叠，从而使其产生层次感。 层与Div标签还有一定的联系，它们的共同点是在源代码中都都使用HTML标签div…/div进行标识，不同的是Div标签是相对定位的，不能重叠，而层是绝对定位的，可以重叠。层和Div标签两者可以相互转换，转换的方法是，在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示层，否则即为Div标签，这是层与Div标签转换的关键因素。 在插入层时，层同时被赋予了CSS样式，通过【属性】面板还可以修改这些CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制，而且也不能通过【属性】面板设置其CSS样式。 10.1.1 认识层 Div标签和层的外观和源代码。 10.1.2 创建层 一、创建层 ? 选择【插入】/【布局对象】/【层】命令，插入一个默认大小的层。 ? 将【插入】/【布局】面板上的 （绘制层）按钮拖动到文档窗口中，插入一个默认大小的层。 ? 单击【插入】/【布局】面板上的 （绘制层）按钮，并将光标移至文档窗口中，当光标变为 形状时拖曳光标，绘制一个自定义大小的层。 ? 如果想一次绘制多个层，在单击 （绘制层）按钮后，按住Ctrl键不放，连续进行绘制即可。 10.1.2 创建层 二、选择层 1、在【层】面板中单击层的名称选中层。 10.1.2 创建层 2、单击文档中的 图标来选定层，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【层锚记】复选框。 10.1.2 创建层 3、将光标置于层内，然后在文档窗口底边的标签条中选择相应的HTML标签。 10.1.2 创建层 4、单击层的边框线选中层。 10.1.2 创建层 三、缩放层 1、选定层，然后拖动缩放手柄（层周围出现的小方块）来改变层的尺寸。拖动上或下手柄改变层的高度，拖动左或右手柄改变层的宽度，拖动4个角的任意一个缩放点同时改变层的宽度和高度。 10.1.2 创建层 2、选定层，然后按住Ctrl键，每按一次方向键，层就被改变一个像素值。 3、选定层，然后同时按住Shift＋Ctrl键，每按一次方向键，层就被改变10个像素值。 如果同时对多个层的大小进行统一调整，方法是，按住Shift键，将所有的层逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有层的宽度全部变成了指定的宽度。 还可以使用【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的层的宽度为标准。 10.1.2 创建层 四、移动层 ? 选定层后，当光标靠近缩放手柄出现 时，按住鼠标左键不放并进行拖动，层将跟着鼠标的移动而发生位移。 ? 选定层，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动1个像素值的距离。 ? 选定层，按住Shift键，然后按4个方向键，向4个方向移动层。每按一次方向键，将使层移动10个像素值的距离。 10.1.2 创建层 五、对齐层 对齐层的方法是，首先将所有层选定，然后选择【修改】/【排列顺序】中的相应命令即可。 ? 【左对齐】：以最后选定的层的左边线为标准，对齐排列层。 ? 【右对齐】：以最后选定的层的右边线为标准，对齐排列层。 ? 【对齐上缘】：以最后选定的层的顶边为标准，对齐排列层。 ? 【对齐下缘】：以最后选定的层的底边为标准，对齐排列层。 10.1.3 设置层属性 插入层后，还需要设置层的属性，这样它才会更符合要求。 10.2 使用时间轴 认识时间轴 创建时间轴动画 录制层路径 本节主要内容： 10.2.1 认识时间轴 时间轴是通过计算机技术，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，运用图文的形式呈现给用户。 在Dreamweaver中，【时间轴】面板是创建时间轴动画的关键。选择【窗口】/【时间轴】命令即可打开【时间轴】面板。 10.2.1 认识时间轴 动画的基本单位叫做帧，将很多帧按照时间先后顺序连接起来就形成了动画，而时间轴用来排列帧。在动画中有些帧非常关键，可以影响整个动画，这样的帧叫做关键帧。关键帧的概念来源于传统的卡通片制作。在早期，熟练的动画师设计卡通片中的关键画面，也即所谓的关键帧，然后由一般的动画师设计中间帧。在