Word版可编辑-KC单元设计任务运用特殊效果精心整理.doc

网页设计与制作课程教学单元设计 淮安信息职业技术学院网页设计与制作课程教学单元设计单元9 运用特殊效果授课教师：网页设计与制作授课班级:学时：8教学条件实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、实训项目单、授课录像、案例库、教学网站等教学目标设计知识目标：（1）掌握CSS3多列布局的方法；（2）掌握CSS3常用的transform转换方法；（3）掌握CSS3中transitions过渡的使用方法；（4）掌握animation动画的使用方法。能力目标：（1）能结合根据页面的需要选择恰当的CSS特效；（2）能根据表单页面效果，设计CSS3页面与动画效果，编写CSS表单的样式。任务描述本任务就是使用HTML5来制作新生报到时从火车站到信息学院的交通示意动画效果。教学内容（1）CSS3多列布局的方法；（2）CSS3常用的transform转换方法；（3）CSS3中transitions过渡的使用方法；（4）animation动画的使用方法。重点：（1）CSS3多列布局的方法；（2）CSS3常用的transform转换方法；（3）CSS3中transitions过渡的使用方法；（4）animation动画的使用方法。难点：（1）CSS3中transitions过渡的使用方法；（2）animation动画的使用方法。任务分析与实现（1）任务分析；（2）任务实现代码。教学过程设计9.1 多列布局与 transform转换方法（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是使用HTML5来制作新生报到时从火车站到信息学院的交通示意动画效果。讲授法多媒体教师：分析任务学生：信息交流知识讲授讲解：CSS3多列布局语法：columns：column-width | column-count;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面实践进行 CSS3多列布局实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 transform简介语法：transform：none | transform-function；常用的transform变形方法：移动方法translate()缩放方法scale()讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践变换的移动方法translate()、缩放方法scale()。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解旋转方法rotate()、斜切方法skew()、更改变换的中心点transform-origin讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进体验旋转方法rotate()、斜切方法skew()、更改变换的中心点transform-origin。实验教学法多媒体教师：辅导交流学生：实践练习课堂总结多列布局基本的变化方法教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览清华大学网站页面，人认识HMTL5中的结构标签。教师指导学生自学多媒体布置作业提出要求教学过程设计9.2 3D变换与过渡（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解变换中的3D变换：认识三维空间rotateX()、rotateY()、rotateZ()函数3D变形及transform的转换属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行transform变形3D变换。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解 transitions过渡：transitions功能介绍、 transitions功能介绍：transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition复合属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行 transitions过渡的设置方法实验教学法多媒体教师：辅导交流学生：实践练习课堂总结（1）变换中的3D变换（2）transitions过渡教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览北京大学网站页面，人认识HMTL5中的结构标签教师指导学生自学多媒体布置作业提出要求教学过程设计9.3 animation动画（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解：动画的基本定义与调用讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行体验动画的基本定义与调用。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解： animation的其他属性animation-timing-function属性animation-delay属性animation-iteration-count属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行体验 animation的其他属性实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解： animation的其他属性animation-direction属性animation-play-state属性animation-fill-mode属性animation复合属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面分别进行体验animation的其他属性实验教学法多媒体教师：辅导交流学生：实践练习项目案例综合实例：艺术照片墙项目教学法多媒体教师：辅导交流学生：实践练习课堂总结动画的基本定义与调用animation的其他属性教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：艺术照片墙。教师指导学生自学多媒体布置作业提出要求教学过程设计9.4 任务实施：交通示意图动画效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务应用过渡、动画等效果设计完成新生报到时从火车站到信息学院的交通示意图，整个动画持续时间10秒钟。任务驱动教学法多媒体教师：分析任务学生：信息交流任务分析根据预期的动画效果，本例的HTML结构示意图，使用body设置整体页面的背景颜色，使用div作外层容器，使用图片作为动画的背景，使用内层div元素，通过border-raduis实现圆形，动画的运动轨迹按照“预定”轨迹的方向行进。任务驱动教学法多媒体教师：辅助分析学生：交流讨论任务计划小组讨论，将任务分解任务驱动教学法多媒体课件演示教师：辅助分析学生：交流讨论任务实施第一步：设计HTML结构代码。第二步：设置CSS样式实现动画效果。任务驱动教学法多媒体教师：辅导交流学生：实践练习任务汇报完成任务后，简短的交流任务驱动教学法多媒体课件演示教师：点评优化学生：汇报交流课堂总结综合使用