网页制作项目10使用时间轴制作动画
中等职业学校《网页制作》的课程标准
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如，文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTM1,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
（三）本课程的特点1.课程注重实际应用，即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。
3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。
（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"F1ash动画制作”等。
二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
使用时间轴制作动画
flash与 DW8的时间轴的时间轴
一、创建动画操作步骤:
1、第一步：直线运动效果(基础操作)
① 在页面中添加层，在层中插入要移动的元素(如图像 或文字)，然后把层添加到时间轴（右击）。
② 一个带有两个关键帧的动画栏出现在时间轴的第一个 通道内，相应的层 名(Layer1)显示在该动画栏中.
③ 单击动画轨道最后关键帧标记( 注意播放头也跟着移 动到该处)，按鼠标左键不放拖动延长动画轨道.(如 延长至第50帧处)
④ 移动层，层的运动轨线显示出一条直线. ⑤ 将时间轴面板中的“自动播放”和“循环”勾选上。
⑥ 保存并预览(按F12键)，就会看到层沿直线运动.
第二步：添加曲线运动效果(重点和难点)
比如，将这些动画效果作为网页特效吸引浏 览者对该网站兴趣；或是将动画应用于商业网站， 作为浮动广告更能吸引浏览人群的关注。
在学校网站上设计本届校运会动态 广告效果
用Dreamweaver 8在素材文件夹里打开 “四职校网站”，设计制作一幅运动会的 图、文广告。
思考题
1.如要在页面载入完毕之后，打开一个广 告窗口，需使用什么动作，并且附加给 什么对象？
2.如何创建一个复杂路径的时间轴动画？ 3.如何改变动画的播放时间？
“时间轴”面版与动画制作
本节学习内容: 1、认识时间轴面板； 2、利用时间轴面板制作动画的操作方法；(教学重点) 3、复杂动画效果制作方法；(教学提升) 4、动画的实际应用(教学拓展) 。
一、认识时间轴面板 我们先来熟悉时间轴面板 在dreamweaver8中按Alt+F9或选择主菜单
中的“窗口/时间轴”打开时间轴面板
二、实现多张图像的动画效果(内容提升部分) 要想在网页中同ቤተ መጻሕፍቲ ባይዱ有几张图像浮动的效果，
网站网页设计实验指导实验九时间轴
实验九时间轴一、认识时间轴面板打开时间轴面板，认识行为通道、帧标尺、动画通道，认识当前帧指针、播放进程控制按钮（前进、后退、退到开始），播放参数设置选项。
二、时间轴动画的创建和基本控制∙在页面绘制一个层，里面插入图片，调整层的长度、高度尺寸，使之恰好放入图片。
∙分别利用右键菜单、鼠标拖动、“修改”主菜单操作将该层添加到时间轴。
∙此时在时间轴timeline1的动画通道上，增加了15帧？哪些帧是关键帧（空心圆圈）？哪些帧是普通帧（直线）？∙选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？为什么？（有，因为帧已经规定好了位置）∙选第15帧，按住左键向右拖动到第30帧松开，而后选中层，将其移动较大距离到一个新位置。
而后再选第一帧为当前帧，按下播放进程控制按钮“前进”，观察当前帧的变化，此时图片有移动吗？（有）判断一下，这一段动画可播放几秒钟？（6（5/30））∙按下F12，在浏览器中预览，可以看到动画效果吗？为什么？（不能，没有设置自动播放）∙要想在浏览器中看到刚才的动画效果，应该设置哪一个播放参数（自动播放）？设置后再次预览。
测试一下自己当初预计的播放时间是否正确。
（正确）∙对刚才这一段动画，要加快/ 减慢动画播放速度（在时间轴中改变FPS的参数），或减少/ 延长播放时间（用鼠标拖动或右击增加或减少帧），怎么办？有几种做法？三、帧、通道的编辑∙删除普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“移除帧”，观察该动画总帧数的变化。
（减少了一个普通帧）∙添加普通帧：右键单击动画通道中某普通帧（选中），在菜单中选择“添加帧”，观察该动画总帧数的变化。
（增加了一个普通帧）∙将普通帧转化为关键帧：将播放指针移到中间某普通帧，先左键选中再右键单击，在菜单中选择“增加关键帧”，观察该动画通道上的标志有何变化。
总帧数增加了吗？（没有增加，它只是把普通帧转化为了关键帧）∙将关键帧转化为普通帧：先用左键选中再右键单击上面的关键帧，在菜单中选择“移除关键帧”，观察该动画通道上的标志有何变化。
北京交通大学《网页设计与制作》20秋在线作业2-003答案
1.要一次选择整个列，在标签检查器中选择标签()。
A.tableB.trC.tdD.tp答案：C2.如果要给图像添加文字说明，需要填写图像属性面板的()选项。
A.边框B.目标C.替代D.地图答案：C3.关于超级链接的说法正确的一项是()。
A.一个超级链接是由被指向的目标和指向目标的链接指针组成B.超链只能是文本内容C.超链的目标可以是不同网址、同一文件的不同部分、多媒体信息，但不能是应用程序D.当单击超链时，浏览器将下载Web地址答案：A4.下列关于CSS的说法错误的是()。
A.CSS的全称是CascadingStyleSheets，中文的意思是“层叠样式表”B.CSS的作用是精确定义页面中各元素以及页面的整体样式C.CSS样式不仅可以控制大多数传统的文本格式属性，还可以定义一些特殊的HTML 属性D.使用DW只能可视化创建CSS样式，无法以源代码方式对其进行编辑答案：D5.在水平线属性面板中，不能设置水平线的()。
A.宽度B.高度C.阴影D.颜色答案：D6.域名服务器上存放着Internet主机的()。
A.域名B.电子邮箱地址C.域名与IP地址的对应表D.IP地址答案：C7.定义表格中行的标签是()。
A.tableB.trC.tdD.th答案：B8.在表单中需要把用户的数据以密码的形式接受，应该定义的表单元素是()。
A.<input type=text>B.<input type=password>C.<input type=checkbox>D.<input type=radio>答案：B9.用于同一个网页内容之间相互跳转的超链接是()。
A.图像链接B.空链接C.电子邮件链接D.锚点链接答案：D10.标记br的作用是()。
A.画一条水平线B.显示粗体文字C.预排版D.文字转行答案：D11.下列文件属于静态网页的是()。
A.Index.aspB.index.jspC.index.htmlD.index.php答案：C12.Dreamweaver用时间轴制作动画，关于时间轴，下列说法错误的是()。
利用时间轴制作动画
实训七利用时间轴制作动画设计目标：创建时间轴动画，使飞行器图像在页面上自由飞行，效果如下图所示。
相关知识点：创建时间轴动画在时间轴面板中添加关键帧控制动画速度改变图像和图层属性实训内容：一、准备工作（一）复制文件把“实训七利用时间轴制作动画\实训”中的“materials”文件夹复制到D：盘根目录。
（二）新建站点站点名称：利用时间轴制作动画站点根文件夹：D:\ materials二、创建时间轴动画（一）一个简单的直线运动的时间轴动画实例1．建立一个做直线运动的时间轴动画操作步骤如下：（1）打开ex9_1.html文档。
（2）在页面中添加一个新图层，在层中插入图像img9_1.gif，然后将图层移动到文档的右上方（动画的起始位置）。
（3）在菜单栏中选择“窗口”→“时间轴”命令打开时间轴面板。
（4）选择要创建动画的图层，用鼠标拖动图层到时间轴的第一帧处。
（5）当第一次在时间轴中添加对象时，会弹出提示框，告诉你可以改变该层的大小，位置，层顺序，以及可见性。
单击“确定”按钮，这时在时间轴通道中将出现一个紫色动画条，动画条中显示了图层的名称，如下图所示。
动画条（6）拖动动画条尾部的关键帧位置到100帧处（注意播放头也跟着移动到该处），将动画图层移动到文档的左上方（动画结束的位置），这时从动画起始位置到结束位置有一条线显示，这就是图层的的运动轨迹，如下图所示。
（7）单击播放按钮，可直接在网页中预览时间轴动画。
（8）选中“自动播放”复选框。
保证浏览器中的动画能自动播放。
（9）选中“循环”复选框。
保证动画在浏览器中能循环播放。
（10）预览网页。
2．将做直线运动的时间轴动画，改为做曲线运动操作步骤如下：（1）打开ex9_1.html，将文件另存为ex9_2.html。
（2）在时间轴面板中，选中动画条的第35帧，单击鼠标右键从弹出的快捷菜单中选择“增加关键帧”。
（3）在第35帧处，向下移动图层使运动轨迹呈现曲线状。
使用时间轴来制作网页动画
在学生的回答中教师演示操作
学生上机操作
8.删除时间轴的方法
方法一：单击右键——删除
方法二：单击右键——移除时间轴
9.复杂层运动的方法——复制记录层路径
方法：添加一个动画对象——播放指针定位于需要对象开始运动的帧位置，选中新建层对象——修改——时间轴——复制路径——鼠标托拽目标层对象——松开鼠标按键。
课题
使用时间轴来制作网页动画
课时
1
课型
新授
目
的
要
求
知识目标：掌握网页制作中使用时间轴来制作网页动画的方法，可以自己创建一个简单的时间轴动画。
能力目标：在Dreamweaver中可以熟练的使用时间轴在自己的网页中创建一个美观的小动画。增强对Dreamweaver的了解和使用。
德育目标：培养学生与他人交流协作的意识和能力，培养学生观察能力和动手操作的能力，增强学生竞争的意识。
方法二：选中目标层对象——修改——时间轴——添加对象到时间轴。
在学生的回答中教师演示操作
在展示的实例中，以学生喜欢的素材出现，可以吸引学生的注意力。
播放第一段视频，根据视频内容提出问题。培养学生善于观察的能力。
加深学生对知识的记忆
开始播放第二段视频。
1’
1’
1’
1’
2’
教学内容
教法与学法
时间
4.延长动画时间的方法
重点
在网页中创建一个简单的位置移动时间轴动画
难点
改变位置移动动画的运动轨迹、插入关键帧的方法、（复制记录层路径）
关键
明确时间轴的含义和工具的使用
教具
计算机、教学光盘
教学内容
教法与学法
网页设计与制作课程课程大纲
xxx学校课程大纲科目名称：《网页设计与制作》专业：计算机说明随着互联网的高速发展和广泛传播，对从事网页设计与制作的人员需求量也愈来愈多。
教材在教学过程中起着至关重要的作用，而缺乏优秀实用的网页设计与制作方面的教材是目前中职学校普遍存在的问题。
本书编者旨在为中职学校相关专业，以及对网页设计与制作有兴趣的人员提供一本实用教程。
本书是依据网页设计行业的业内制作标准和相关案例执行为范围编写的。
在编写过程中针对读者的特点，项目选择合理、针对性强、理论和实践有机融合；以实践为主，特别注重实用性，并注重融入先进的教学理念与方法，注重提高读者的学习能力。
全书从实用的网页设计制作项目入手，以任务驱动的方式系统地介绍了以下内容：网站的制作流程、使用HTML制作简单网页、认识Dreamweaver CS3、搭建与管理本地站点、网页元素的编辑、使用CSS控制页面元素、使用表格布局制作页面、使用框架布局制作网页、使用CSS+DIV布局页面、使用模板和库提高制作效率、使用JAVAScript制作网页特效、策划与制作个人艺术网站。
同时结合作者多年来积累的教学工作经验，以实践为主，理论融合其中，是帮助教师联想三大软件、提高学生实践力的有力助手。
通过课程学习，学生将具备网页设计与制作的基本技能，并帮助学生在从业道路上积累经验。
本教材还具备一下特点：1.任务明确；2.结构新颖；3.图文并茂，简洁易懂；4.与国家职业资格证接轨。
《网页设计与制作》课程教学大纲课程名称：《网页设计与制作》课程总学时：72一、教学目的和任务（一）目的《网页设计与制作》是计算机相关专业的一门应用性较强的选修课程。
通过对网页设计与制作的初步学习，使学生对网页设计与制作的各个环节有感性的认识并理性理解各个网页中各布局的功能和特点，学习网页设计与制作制作方法，为今后在网页设计与制作行业工作提供必要的基础知识，以便能够得心应手地使用好Dreamweaver软件，更好地使设计网页发挥作用。
微课比赛(网页设计与制作-教学设计)
《网页设计与制作》课程单元教学设计---《项目: 缥缈世界和小魔术》一、教案首页本次课标题任务10 利用图层、时间轴和行为三结合综合实现动态效果网页设计与制作所属学科理科专业计算机应用课程网页设计与制作授课班级11计算机应用适用对象计算机专业高职生上课时间15-20分钟上课地点理实一体化教室教学目的要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
教学目标能力目标知识目标素质目标1．能使用“图层”加载动态效果网中的对象2．能通过使用“时间轴”实现动态效果3．能灵活应用“行为”实现动态效果的控制1．动态效果网页制作“三元素”2．图层、时间轴和行为三者在实现动态效果网页的具体常规作用3．动态效果网页设计与制作三元素的使用规律或步骤1．培养学生理论联系实际的品质2．培养学生敏锐的洞察力和分析力4．培养学生举一反三设计与动手并重的素质任务与案例任务1：飘渺世界（任意飘动的对象能停能动；背景和文字颜色单击改变），此为目标任务任务2：小魔术，此为补充实例（分析+演示+总结）重点难点及解决方法重点：图层和时间轴用来实现动态效果难点：灵活应用行为实现控制动态效果解决方法：引导学生根据任务要求，在温故知新的前提下，让学生有意识挖掘理论知识点，通过补充案例的分析和现场演示，并整理要点规律，再而回到引导任务加以分析实现，完成目标任务的同时夯实了理论知识点的掌握，为将来的举一反三奠定了坚实的理论和操作基础。
学习环境选择与学习资源设计1. 学习环境选择（1）多媒体教室（2）普通教师（3）计算机实验机房（4）专业实训室2. 学习资源设计（1）多媒体课件（2）网页素材及补充实例资源库形式方法手段目标导入+实例展示、讲解+教师提问+案例分析与实现+学生代表分析、教师点评、讲解并总结参考资料1、《dreamwear mx网页设计与制作》2、《dreamwear 8网页设计与实训教程》3、网上资料二、教学设计序号步骤名称教学内容教师活动学生活动时间分配(分)工具与材料课内/课外1告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
任务一 任务二 实训 小结
3、快速创建一个复杂路径的时间轴动画的方法
如果需要创建具有复杂运动路径的动画，可以使用录制层路 径功能。首先在主菜单中选择【修改】／【时间轴】／【录制层路 径】命令，然后在文档中拖动层来录制路径，最后在动画要停止的 地方释放鼠标左键， 这时将自动在【时间轴】面板中添加对象， 并且较为合理地创建了一定数目的关键帧。也可以根据实际情况对 各关键帧的位置适当进行调整使其更为合理。
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务二 使用时间轴设置运动效果
使用时间轴设置运动效果操作动画
时间轴是与层密切相关的一项功能，它可以在 Dreamweaver中实现动画的效果。通过时间轴，可以让层的位 置、尺寸、可视性和重叠次序随着时间的变化而改变，从而创建 出具有Flash效果的动画。本任务主要是利用时间轴制作人沿着 公园道路前进的效果。
通过本任务的学习，需要掌握的内容有： 1、了解【时间轴】面板并掌握其使用方法
网页设计与制作
Dreamweaver 8
任务二 使用时间轴设置运动效果
2、添加对象到时间轴
项目十：
使用时间轴制作动画
在主菜单中选择【窗口】／【时间轴】命令打开【时间轴】
面板，然后选定对象，并在主菜单中选择【修改】／【时间轴】／ 【添加对象到时间轴】命令将对象添加到【时间轴】面板或者将对 象直接拖曳到【时间轴】面板。
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 使用层设置公园背景和标题
（2）在层“MapLayer”中插入一个嵌套层“TitleLayer”并进 行属性设置。
任务一 任务二 实训 小结
Байду номын сангаас
（3）设置CSS样式并输入文本“公园导游图”。
网页设计与制作
Dreamweaver 8
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题
使用层设置公园背景和标题操作动画
本任务将首先使用层布局页面中的公园地图及标题 等内容。关于层的基本知识在项目九已作详细介绍，经 过本任务的学习,读者可以进一步巩固其具体应用。
关于本任务的基本操作过程是： （1）创建一个层“MapLayer”，宽度设置为“800px”，高度设 置为“480px”，背景图像设置为“images/map.gif”。
【实训目的】 进一步认识时间轴的作用。 进一步巩固手动创建时间轴动画的基本方法。 进一步巩固利用时间轴改变图像与层属性的方法。
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
实训 制作飞机飞行动画
任务一 任务二 实训 小结
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
实训 制作飞机飞行动画
本项目着重介绍了利用层和时间轴制作动画的基本方法。 实训将使用层和时间轴制作如图所示的飞机飞行动画，以进一 步巩固时间轴的应用。
任务一 任务二 实训 小结
实训结果文件见“项目结果”文件夹中的“shixun.htm”。
网页设计与制作—— Dreamweaver 8
主讲：
网页设计与制作
Dreamweaver 8
项目十 使用时间轴制作动画
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务一 使用层设置公园背景和标题 任务二 使用时间轴设置运动效果
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
网页设计与制作
Dreamweaver 8
项目十：
使用时间轴制作动画
任务一 任务二 实训 小结
任务二 使用时间轴设置运动效果
4、改变时间轴动画播放时间的方法 在【时间轴】面板中拖动最后一个关键帧可以改变整 个动画的播放时间，往右拖动是延长播放时间，往左拖动 是缩短播放时间。
5、设置时间轴动画为自动循环播放的方法 在【时间轴】面板中勾选【自动播放】和【循环】两 个复选框，可使时间轴动画在页面打开时能够自动循环播 放。
任务一 任务二 实训 小结
小结
本项目通过公园导游图动画介绍了时间轴的一些基 本功能和方法，同时也让读者对层这个概念有了更进一 步的了解。时间轴和层就像一对钥匙和锁，只有将它们 配成对，才能打开网页动画的大门。