《Dreamweaver 8中文版网页制作 教学课件 ppt 作者 王君学 于波 第10章 使用层和时间轴》由会员分享，可在线阅读，更多相关《Dreamweaver 8中文版网页制作 教学课件 ppt 作者 王君学 于波 第10章 使用层和时间轴（26页珍藏版）》请在金锄头文库上搜索。
1、本章将介绍层和时间轴的基本知识以及使用它们创建动画的基本方法。,第10章 使用层和时间轴,教学目标,了解层的概念和【层】面板的使用方法。 掌握创建和编辑层的基本方法。 掌握【时间轴】面板的使用方法。 掌握使用层和时间轴创建动画的方法。,10.1 创建层,本节主要内容：,认识层 创建层 设置层属性,10.1.1 认识层,层是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将层放置在页面的任何位置。在网页制作中，可以使用层将许多对象进行重叠，从而使其产生层次感。 层与Div标签还有一定的联系，它们的共同点是在源代码中都都使用HTML标签进行标识，不同的是Div标签是相对定位的，不能重叠，
2、而层是绝对定位的，可以重叠。层和Div标签两者可以相互转换，转换的方法是，在【CSS规则定义】对话框的【定位】分类中，将【类型】选项设置为“绝对”，即表示层，否则即为Div标签，这是层与Div标签转换的关键因素。 在插入层时，层同时被赋予了CSS样式，通过【属性】面板还可以修改这些CSS样式，而插入Div标签时，需要再单独创建CSS样式对它进行控制，而且也不能通过【属性】面板设置其CSS样式。,10.1.1 认识层,Div标签和层的外观和源代码。,10.1.2 创建层,一、创建层 选择【插入】/【布局对象】/【层】命令，插入一个默认大小的层。 将【插入】/【布局】面板上的 （绘制层）按钮拖动到
3、文档窗口中，插入一个默认大小的层。 单击【插入】/【布局】面板上的 （绘制层）按钮，并将光标移至文档窗口中，当光标变为 形状时拖曳光标，绘制一个自定义大小的层。 如果想一次绘制多个层，在单击 （绘制层）按钮后，按住Ctrl键不放，连续进行绘制即可。,10.1.2 创建层,二、选择层 1、在【层】面板中单击层的名称选中层。,10.1.2 创建层,2、单击文档中的 图标来选定层，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【层锚记】复选框。,10.1.2 创建层,3、将光标置于层内，然后在文档窗口底边的标签条中选择相应的HTML标签。,10.1.2 创建层,4、单击层的边框线选中
4、层。,10.1.2 创建层,三、缩放层 1、选定层，然后拖动缩放手柄（层周围出现的小方块）来改变层的尺寸。拖动上或下手柄改变层的高度，拖动左或右手柄改变层的宽度，拖动4个角的任意一个缩放点同时改变层的宽度和高度。,10.1.2 创建层,2、选定层，然后按住Ctrl键，每按一次方向键，层就被改变一个像素值。 3、选定层，然后同时按住ShiftCtrl键，每按一次方向键，层就被改变10个像素值。 如果同时对多个层的大小进行统一调整，方法是，按住Shift键，将所有的层逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有层的宽度全部变成了指定的宽度。 还可以使
5、用【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的层的宽度为标准。,10.1.2 创建层,四、移动层 选定层后，当光标靠近缩放手柄出现 时，按住鼠标左键不放并进行拖动，层将跟着鼠标的移动而发生位移。 选定层，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动1个像素值的距离。 选定层，按住Shift键，然后按4个方向键，向4个方向移动层。每按一次方向键，将使层移动10个像素值的距离。,10.1.2 创建层,五、对齐层 对齐层的方法是，首先将所有层选定，然后选择【修改】/【排列顺序】中的相应命令即可。 【左对齐】：以最后选定的层的左边线为标准，对齐排列
6、层。 【右对齐】：以最后选定的层的右边线为标准，对齐排列层。 【对齐上缘】：以最后选定的层的顶边为标准，对齐排列层。 【对齐下缘】：以最后选定的层的底边为标准，对齐排列层。,10.1.3 设置层属性,插入层后，还需要设置层的属性，这样它才会更符合要求。,10.2 使用时间轴,认识时间轴 创建时间轴动画 录制层路径,本节主要内容：,10.2.1 认识时间轴,时间轴是通过计算机技术，依据时间顺序，把一方面或多方面的事件串联起来，形成相对完整的记录体系，运用图文的形式呈现给用户。 在Dreamweaver中，【时间轴】面板是创建时间轴动画的关键。选择【窗口】/【时间轴】命令即可打开【时间轴】面板。,
7、10.2.1 认识时间轴,动画的基本单位叫做帧，将很多帧按照时间先后顺序连接起来就形成了动画，而时间轴用来排列帧。在动画中有些帧非常关键，可以影响整个动画，这样的帧叫做关键帧。关键帧的概念来源于传统的卡通片制作。在早期，熟练的动画师设计卡通片中的关键画面，也即所谓的关键帧，然后由一般的动画师设计中间帧。在三维计算机动画中，中间帧的生成由计算机来完成。所有影响画面图像的参数都可成为关键帧的参数，如位置、旋转角、纹理的参数等。关键帧技术是计算机动画中最基本并且运用最广泛的方法。,10.2.2 创建时间轴动画,一、使用层创建时间轴动画 （1）选中层，然后选择【修改】/【时间轴】/【增加对象到时间轴】
8、命令，将对象添加到时间轴。 （2）调整动画条的长度，然后设置最后一帧层的【左】和【上】属性。 （3）根据需要在动画条的中间增加关键帧并设置层的【左】和【上】属性。,10.2.2 创建时间轴动画,（4）如果需要在动画运动过程中变换图像，可单击时间轴的第1帧，然后选中层中的图像，接着选择【修改】/【时间轴】/【增加对象到时间轴】命令将其添加到时间轴中，调整播放长度，然后在适当位置增加一个关键帧，最后在图像【属性】面板中将图像修改为其他图像。 （5）在【时间轴】面板中设置动画为自动循环播放，即勾选【自动播放】和【循环】复选框。,10.2.2 创建时间轴动画,二、将对象添加到【时间轴】面板的方法 选择
9、【修改】/【时间轴】/【增加对象到时间轴】命令。 将层直接拖曳到【时间轴】面板中。 单击【时间轴】面板右上角的 按钮，在快捷菜单中选择【添加对象】命令。 三、在时间轴中添加或移除帧的方法 选择【修改】/【时间轴】/【添加帧】或【删除帧】命令，在播放头右边加入或删除1帧。也可以使用右键菜单命令进行操作。 选择【修改】/【时间轴】/【增加关键帧】命令，在当前播放头位置增加关键帧；选定关键帧，选择【修改】/【时间轴】/【删除关键帧】命令，将当前关键帧删除。也可以使用右键菜单命令进行操作。,10.2.2 创建时间轴动画,四、修改时间轴 若要使动画的播放时间更长，可将结束帧标记向右拖动。动画中的所有关键
10、帧都会相应移动，若要阻止其他关键帧移动，可按住Ctrl 键不放再拖动结束帧标记。 播放时间轴动画时，若要使层更早或更晚地到达某一关键帧位置，可在动画条中将关键帧向左或向右移动。 若要更改动画的开始时间，请选择一个或多个与该动画关联的动画条（按Shift 可一次选择多个动画条），然后向左或向右移动。 若要在页面中移动整个动画运行轨迹的位置，可在【时间轴】面板中选择整个动画条，然后在页面上拖动该对象。Dreamweaver会调整所有关键帧的位置。在整个动画条上所做出的任何更改将更改所有关键帧。,10.2.3 录制层路径,如果需要创建具有复杂运动路径的动画，逐个创建关键帧会花费许多时间。使用记录AP
11、元素的路径功能来创建复杂运动轨迹的动画。 在文档中选中层，然后选择【修改】/【时间轴】/【录制层路径】命令，并在页面上拖动层来录制层移动的轨迹，在动画停止的地方释放鼠标左键，Dreamweaver将自动在【时间轴】面板中添加对象，并且较为合理地创建一定数目的关键帧。,10.2.3 录制层路径,在创建时间轴动画时需要讲究一些小技巧的应用，以下几点可以提高动画的性能。 使用显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。 扩展动画条以创建更顺畅的动作。如
12、果动画断断续续并且图像在不同位置之间跳动，可拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。可尝试增加每秒帧数(fps)以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过15fps的动画速度。,10.2.3 录制层路径, 不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢，相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。 创建简单的动画。不要创建对当前浏览器要求过高的动画，即使在系统或Internet性能降低时，浏览器始终会播放时间轴动画中的每一帧。,
