搜索
理论课授课教案课程名称组装与维护第3章：行为与时间轴（7）第7节：时间轴的应用：倒计时牌审批签字授课时间月日授课班级2010计算机班计划课时2课时实用课时35--36教学目的与要求1.掌握基本概念2.熟练上机操作教学重点与难点时间轴的应用：倒计时牌授课类型上机课教学方法个别指导、集中辅导教具装有Dreamweaver软件的计算机机房参考资料《Dreamweaver全程自学手册》复习提问请问如何在网页中利用时间轴制作蝴蝶飞翔的效果？教学过程和内容时间分配3.7时间轴的应用：倒计时牌一、基本概念与尝试使用一个时间轴控制页面上的所有操作相比，使用单独的时间轴分别用来控制页面中不同的离散的部分会更容易一些。比如一个页面中的很多的活动元素，每个元素的触发条件都是不同的。1.使用多时间轴2.应用动画序列二、上机操作制作一个火箭发射倒计时网页，浏览者在网页中用鼠标单击“点火”按钮后，在网页中依次出现“3”“2”“1”“发射！”，模拟火箭升空前的倒计时牌效果。点名，课程介绍5分钟。讲授新课80分钟教学过程和内容时间分配具体步骤如下：1.新建网页文档，并保存。2.创建四个层，分别在层Layer1中填入1，Layer2中填入2，以下类同。在“属性”面板中调整层的大小和位置，让所有的层大小相等，位置重叠，并且设置文字属性。3.添加“显示—隐藏层”行为。单击body标签，选择菜单“窗口”/“行为”命令，添加“显示—隐藏层”动作，并且设置事件为onLoad。4.层Layer3添加动画。打开“时间轴”面板，拖动Layer3到时间轴面板中，时间线从第1帧开始，到第15帧结束。5.添加表单按钮，并设置动作。在网页的顶端位置添加一个表单按钮，可以不用添加标签。为按钮添加“播放时间轴”，播放时间轴1。6.隐藏层。打开时间轴1，单击时间轴1中的时间线的最后帧，之后移动光标到“行为”面板中，添加“显示—隐藏层”行为，将层Layer2设置为显示，将其余各层设置为隐藏。7.新建时间轴。将光标置于“时间轴”面板内单击鼠标右键，在右键菜单中选择“添加时间轴”选项。8.添加“播放时间轴”行为。9.继续添加时间轴Timeline3，并且将层Layer1拖动到时间轴面板内。在最后一帧处添加行为“显示—隐藏层”。10.返回时间轴Timeline2，并且在最后一帧处再次添加动作，添加“播放时间轴”以播放Timeline3。11.保存网页文件，并且按下F12键对网页进行预览。小结、作业及课后回顾5分钟小结本节主要讲述了在网页中利用时间轴制作倒计时牌的过程。作业巩固本次课所学知识课后教学回顾