网页设计与制作 动画教学课件

网页设计与制作动

画animation：namedurationtiming-functiondelay信息工程学院

2022.6目录CONTENTS课标分析1教材分析2学情分析3教学策略4教学过程51课标分析课标分析地位作用教学目标课程理念Part1重要的专业核心课程；HTML和CSS是网页设计技术的核心和基础，不可或缺。animation动画应用十分广泛。课程地位Part2实现网页设计与制作的必备基础知识；CSS技术可以使网页更加美观；CSS3中的animation动画的加入会让程序员制作出更加炫酷的网页效果。课程作用课标分析作用地位课程理念教学目标Part1重要的专业核心课程；HTML和CSS是网页设计技术的核心和基础不可或缺。animation动画应用十分广泛。课程地位Part2实现网页设计与制作的必备基础知识；CSS技术可以使网页更加美观；CSS3中的animation动画的加入会让程序员制作出更加炫酷的网页效果。课程作用课标分析教学目标地位作用课程理念知识目标会写动画属性的设置方式；能够说出使用动画的两个方面；能够指出“过渡”与“动画”的区别。课标分析教学目标地位作用课程理念技能目标学会正确、合理地运用CSS3技术，为网页增添动画效果。了解让技术服务于内容的原则。

课标分析教学目标地位作用课程理念素质目标培养学生独立思考、动手实践的能力

；培养学生自主探究、协作学习的能力；培养学生的审美情趣。

课标分析课程理念

以能力培养为重点；培养学生职业能力；培养学生职业生涯发展所需能力；培养学生终身学习的能力。一站式教学地位作用教学目标2教材分析教材分析“动画”“十四五”应用技术型人才培养规划教材；CSS3新增高级属性；增加网页绚丽效果；网页应用十分广泛。3学情分析学情分析中职二年级学生学习对象好奇心强、思维活跃、富有创造力、愿意接受新知识。特点英语基础差、逻辑思维能力稍有欠缺。不足重

点难

点拓

展重难点动画属性的应用；动画参数的设置。动画参数的设置。分步动画的设置。4教学策略任务驱动法教学策略自主探究小组合作案例演示法启发式讨论法5教学过程时间内容提要方法与手段课前发布预习任务自主探究学习5min导入：什么是动画？（思政）提示与启发5min探索：浏览网页动画代码举例、提示、归纳10min新知：动画的语法及要点讲解、类比15min练习巩固与评价展示启发式教学与互动、讨论5min拓展：网页中的动画（思政）案例教学5min归纳总结与作业布置归纳时间分配课前预习“动画”预习“动画”内容参考给出的素材，完成一个网页动画。预习成果学生分享遇到的问题案例导入导入探索新知Part1Part2Part3要点讲解定义动画使用动画。动画的使用方法动画的参数设置使用动画的注意事项巩固练习练习&讨论组内分析任务；代码实现。

评价展示

组间协助；教师辅导；推优分享。评价92%单词出错，代码不实现没有调用动画拓展归纳总结&作业布置动画010203动画的概念知识点1动画的使用（重点）知识点2动画参数的设置（重难点）知识点3思维导图作业提示：加入精灵图技术存在问题和不足改进问题问题学生个体差异问题改进表达方式：生动、易懂；加强辅导。反思对课程节奏把控不精细问题教学反思板书设计CSS3animation动画1、动画的两要素

定义动画4、动画与过渡的区别与联系

使用动画5、注意事项：动画不使用不执行2、动画的复合属性：

（特殊：play-state）3、动画的必备属性：nameduration感谢聆听

敬请指正THANKYOU网页设计与制作