网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务9 运用特殊效果.docVIP

《网页设计与制作》课程教学单元设计 淮安信息职业技术学院 第 PAGE 5 页 共 NUMPAGES 5 页 《网页设计与制作》课程教学单元设计 单元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过渡 教师讲解 多媒体 课件演示 整理笔记 引导创新 任务拓展 浏览