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