任务9运用特殊效果

1、知啊歌网页设计与制作课程教学单元设计淮安信息职业技术学院网页设计与制作课程教学单元设计单元9运用特殊效果授课教师：网页设计与制作授课班级：学时：8教学条件实训室、HBulider或Dreamweaver、投影设备、广播软件、互联网络教学素材教材、课件、实训项目单、授课录像、案例库、教学网站等教学目标设计知识目标：(1)掌握CSS3多列布局的方法；(2)掌握CSS3常用的transform转换方法；(3)掌握CSS3中transitions过渡的使用方法；(4)掌握animation动画的使用方法。能力目标：(1)能结合根据页面的需要选择恰当的CSS特效；(2)能根据表单贝囿效果，设itCSS3

2、贝囿与动回效果，编写CSS表单的样式。任务描述本任务就是使用HTML冰制作新生报至ij时从火车站到信息学院的交通示意动画效果。教学内容(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动画的使用方

3、法。任务分析与实现(1)任务分析；(2)任务实现代码。第1页共5页教学过程设计9.1多列布局与transform转换方法(学时数：2)主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是使用HTML冰制作新生报到时从火车站到信息学院的交通示意动画效果。讲授法多媒体教师：分析任务学生：信息交流知识讲授讲解：CSS3多列J布局语法：columns:column-width|column-count;讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面'实践进行CSS3多列布局实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解transform简介语法：tran

4、sform:none|transform-function;常用的transform变形方法：移动方法translate。缩放方法scale()讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行实践变换的移动方法translate。、缩放方法scale()。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解旋转方法rotate()、斜切方法skew()、更改变换的中心点transform-origin讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进体验旋转方法rotate。、斜切方法skew()、更改变换的中心点transform-orig

5、in。实验教学法多媒体教师：辅导交流学生：实践练习课堂总结多列布局基本的变化方法教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览清华大学网站页面，人认识HMTL5中的结构标签。教师指导学生自学多媒体布置作业提出要求角网页设计与制作课程教学单元设计淮安信息职业技术学院第2页共5页教学过程设计9.23D变换与过渡(学时数：2)主要步骤教学内容教学方法教学手段师生活动知识讲授讲解变换中的3D变换：认识三维空间rotateX()、rotateY()、rotateZ()函数3D变形及transform的转换属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行transform

6、变形3D变换。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解transitions过渡：transitions功能介绍、transitions功能介绍：transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition复合属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行transitions过渡的设置方法实验教学法多媒体教师：辅导交流学生：实践练习课堂总结(1)变换中的3D变换(2)transitions过渡教师讲解多媒体

7、课件演示整理笔记引导创新任务拓展浏览北京大学网站页面，人认识HMTL5中的结构标签教师指导学生自学多媒体布置作业提出要求淮安信息职业技术学院网页设计与制作课程教学单元设计第3页共5页教学过程设计9.3animation动画（学时数：2）主要步骤教学内容教学方法教学手段师生活动知识讲授讲解：动画的基本定义与调用讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行体验动回的基本定义与调用。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解：animation的其他属性animation-timing-function属性animation-delay属性animat

8、ion-iteration-count属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行体验animation的其他属性实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解：animation的其他属性animation-direction属性animation-play-state属性animation-fill-mode属性animation复合属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面分别进行体验animation的其他属性实验教学法多媒体教师：辅导交流学生：实践练习项目案例综合实例：艺术照片墙项目教学法多媒体教师：辅导交流

9、学生：实践练习课堂总结动画的基本定义与调用animation的其他属性教师讲解多媒体课件演示整理笔记引导创新任务拓展综合实例：艺术照片墙。教师指导学生自学多媒体布置作业提出要求淮安信息职业技术学院角Fs5网页设计与制作课程教学单元设计第4页共5页教学过程设计9.4任务头施：交通不意图动回效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务应用过渡、动画等效果设计完成新生报到时从火车站到信息学院的交通示意图，整个动画持续时间10秒钟。任务驱动教学法多媒体教师：分析任务学生：信息交流任务分析根据预期的动回效果，本例的HTML结构小意图，使用body设置整体贝囿的背景颜色，使用div作外层容器，使用图片作为动画的背景，使用内层div元素，通过border-raduis实现圆形，动画的运动轨迹按照“预定”轨迹的方向行进。任务驱动教学法多媒体教师：辅助分析学生：交流讨论任务计划小组讨论，将任务分解任务驱动教学法多媒体课件演示教师：辅助分析学生：交流讨论任务实施第一步：设计HTML结构代码。第二步：设置CSS样式实现动画效果。任务驱动教学法多媒体教师：辅导交流学生：实践练习任务汇报完成任务后，简短的交流任务驱动教学法多媒体课件演示教师：点评优化学生：汇报交流课堂总结综合使用HTML5动画的基本定义与调用，运