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

《网页设计与制作(HTML+CSS+JavaScript)教学全套课件（第2版）刘万辉教学资源任务9 运用特殊效果.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、特效；（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中tran

3、sitions过渡的使用方法；（2）animation动画的使用方法。任务分析与实现（1）任务分析；（2）任务实现代码。第5页共5页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计9.1多列布局与transform转换方法（学时数：2）主要步骤教学内容教学方法教学手段师生活动任务描述本任务就是使用HTML5来制作新生报到时从火车站到信息学院的交通示意动画效果。讲授法多媒体教师：分析任务学生：信息交流知识讲授讲解：CSS3多列布局语法：columns：column-width

4、column-count;讲授法多媒体课件演示教师：讲授知

5、识学生：边听边练学生实践创建一个新页面实践进行CSS3多列布局实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解transform简介语法：transform：none

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

7、心点transform-origin讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进体验旋转方法rotate()、斜切方法skew()、更改变换的中心点transform-origin。实验教学法多媒体教师：辅导交流学生：实践练习课堂总结多列布局基本的变化方法教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览清华大学网站页面，人认识HMTL5中的结构标签。教师指导学生自学多媒体布置作业提出要求第5页共5页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计9.23D变换与过渡（学时数：2）主要步骤教学内容教学方法

8、教学手段师生活动知识讲授讲解变换中的3D变换：认识三维空间rotateX()、rotateY()、rotateZ()函数3D变形及transform的转换属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践创建一个新页面进行transform变形3D变换。实验教学法多媒体教师：辅导交流学生：实践练习知识讲授讲解transitions过渡：transitions功能介绍、transitions功能介绍：transition-property属性transition-duration属性transition-timing-function属性tr

9、ansition-delay属性transition复合属性讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践学生创建一个新页面进行transitions过渡的设置方法实验教学法多媒体教师：辅导交流学生：实践练习课堂总结（1）变换中的3D变换（2）transitions过渡教师讲解多媒体课件演示整理笔记引导创新任务拓展浏览北京大学网站页面，人认识HMTL5中的结构标签教师指导学生自学多媒体布置作业提出要求第5页共5页《网页设计与制作》课程教学单元设计淮安信息职业技术学院教学过程设计9.3animation动画（学时数：2）主要步骤教学内容教学方

10、法教学手段师生活动知识讲授讲解：动画的基本定义与调用讲授法多媒体课件演示教师：讲授知识学生：边听边练学生实践