Dreamweaver网页设计与应用 作者 张丽英 07.pptVIP

* 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 第7章 层和时间轴的使用 本章简介： 本章主要讲解了网页中层的基本操作方法和时间轴动画的应用技巧。通过这些内容的学习，能够在一个网页中创建多个层，也能够自定义各层之间的层关系，可以给网页制作提供强大的页面控制能力。应用时间轴的功能，能够在Dreamweaver中实现动画的效果。 课堂学习目标 掌握创建和选择层的方法 掌握设置层属性的方法 熟练运用时间轴功能 7.1 层的基本操作 创建层 选择层 设置层的默认属性 “AP元素”控制面板 课堂案例——卡通动画 7.1.1 创建层 创建“层”的方法有4种。 1．插入层：把鼠标光标放置于文档窗口中要插入层的位置，选择“插入记录 布局对象 AP Div”命令。 2．拖放层：将“插入”面板“布局”选项卡中的“绘制AP Div”按钮　拖曳到文档窗口中，释放鼠标，此时，在文档窗口中，出现一个矩形层。 3．绘画层：单击“插入”面板“布局”选项卡中的“绘制 AP Div”按钮　。此时，在文档窗口中，鼠标指针呈“+”形。按住鼠标左键拖曳，画出一个矩形层。 4．画多层：单击“绘制 AP Div”按钮　，按住Ctrl键的同时按住鼠标左键拖曳鼠标，画出一个矩形层。只要不释放Ctrl键，就可以继续绘制新的层。 7.1.2 选择层 1．选择一个层 　 （1）利用层面板选择一个层 　 （2）在文档窗口中选择一个层，有以下几种方法。 2．选定多个层 　　选择“窗口 AP元素”命令，弹出“AP元素”控制面板。在“AP元素”控制面板中，按住Shift键并单击两个或更多的层名称。 7.1.3 设置层的默认属性 当层插入后，其属性为默认值，如果想查看或修改层的属性，选择“编辑 首选参数”命令，弹出“首选参数”对话框，在“分类”选项列表中选择“AP元素”选项，此时，可查看或修改层的默认属性。 7.1.4 “AP元素”控制面板 通过“AP元素”控制面板可以管理网页文 档中的层。选择“窗口 AP元素”命令，启用“AP元素”控制面板。 使用“AP元素”控制面板可以防止层重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。 7.1.5 课堂案例——卡通动画 使用绘制 AP Div按钮绘制层。 效果图 7.2 时间轴动画 “时间轴”面板 使用时间轴移动层 课堂案例——茶空间 7.2.1 “时间轴”面板 “时间轴”面板用于显示层与图像随时间变化的属性。选择“窗口 时间轴”命令，可以启用“时间轴”面板。 “时间轴”面板 7.2.2 使用时间轴移动层 使用时间轴制作层动画的具体操作步骤如下。 （1）创建一个层，并在层中插入一张图片。 （2）选择“窗口 时间轴”命令，启用“时间轴”面板。 （3）选中当前创建的层，将层拖曳到“时间轴”面板中适当的帧序号处。 （4）在“时间轴”面板中拖曳结束关键帧到适当的帧序号处，以确定动画的播放时间。 （5）选定结束关键帧，在页面中拖曳层到动画的结束位置，这时，一条直线出现在文档窗口中，显示动画运动的路径。 （6）若要制作曲线轨迹的动画，需要在时间轴上添加关键帧。按 住Ctrl键的同时在时间轴适当帧序号处单击鼠标左键，然后在网页中 拖曳层到适当的位置即可。 （7）按住“时间轴”面板中的“播放”按钮　不放，在页面中预览动画效果，可以看到层以曲线方式运动。 7.2.3 课堂案例——茶空间 使用时间轴面板，以及添加关键帧命令制作叶子下落效果。 效果图 课堂练习——礼品包装盒网页 使用AP Div按钮绘制层，使用时间轴和关键帧命令制作自动更换图像效果。 效果图 *