网页设计与开发（HTML5+CSS3） -教案 项目8 利用CSS3制作网页特效.doc

工学一体化课程教学课页NO8

课程

学习任务

项目八：利用CSS3制作网页特效

使用学材

任课教师

班级

所属专业

实施地点

实施日期

总课时

周课时

学材处理

采用一体化教学模式，以学生为主体，围绕课程标准、以典型工作任务展开，知识点够用、适用为原则，并配合相关教辅学习资料，同时根据学生特点自行设计的课后补充任务进行强化实践用。在辅助知识和技能点学习时加入一些思政元素（安全、心理健康教育等内容在网页内容中）。

任务分析

本项目利用CSS3的变形、过渡、动画等功能，结合盒子模型相关知识制作一个“旋转的3D相册”页面。

根据本项目效果可以看出，网页由一个大盒子构成，其中包含了一个承载相册图片的容器，结构很简单。通过本项目的动态效果（读者可自行运行代码进行查看）可以看出，该3D旋转相册在旋转过程中可以看到前、后、左、右、上的图片，所以在定义样式时，首先要定义盒子（box）本身以及承载相册的容器（container）的样式，然后定义容器（container）及鼠标悬停时的旋转动画效果，③接着对各个可看到图片的方向面定义公共样式（.side），并采用绝对定位，④最后分别对各个可看到图片的方向面定义变形及旋转效果。值得注意的是，所有关于动画的样式定义必须考虑浏览器的兼容情况。

教学目标

（包含知识与技能、过程与方法、情感态度与价值观等三个目标）

知识与技能：

理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。

掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。

掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。

过程与方法：

1.通过自主探究、小组讨论、与老师沟通等制作网页相关模块，培养学生协作解决问题的能力和主动性以及与人交流合作的能力；

2.通过教师对作品的点评与反馈，理解CSS定义要点，培养学生总结归纳能力。

情感态度与价值观：

1.学习资料中融入思政内容，注重加强对学生的世界观、人生观和价值观的教育。

2.在制作网页的过程中，培养学生探索、创新、实践、协作的职业素养。

3.通过学习编写代码，培养学生的信息素养和逻辑思维能力。

4.通过整个项目的完成，让学生感受HTML5与CSS3的神奇魅力，培养学生积极的学习态度。

教学重点

教学难点

重点及突出策略：

教学重点：过渡、2D转换、3D转换、动画。

措施：通过上机操作加强学习和补充案例进行巩固。

难点及解决方法：

教学难点：过渡、3D转换、动画。

措施：通过上机操作加强学习和补充案例进行巩固。

教学方法

项目教学，小组讨论，一体化教学

教学条件

准备

计算机、Dreamweavercs6网页制作软件、教学PPT

教学组织

（简述并备注每一流程所需课时）

一、明确任务

教师给定任务，引导学生思考，明确任务要求（0.5课时）

二、制定工作计划（4课时）

分析任务后确定以下工作计划

教师引导学习，学生所需知识点学习；

按任务要求，制定工作计划

三、计划实施（6课时）

能正确使用所需的知识：CSS3中的变形属性、CSS动画等，并按各模块效果图进行代码编写，并实现效果。

四、检查验收（0.5课时）

检查任务完成情况，正确填写检查报告

五、总结反思与评价（1课时）

以小组为单位，用演示文稿向全班展示、汇报制作成果；教师针对各组任务工作过程及汇报情况分别作评价；工作过程回顾及总结。

教学反思

教学实施（次页）

教学环节

教学内容

学生活动

教师活动

评价点

资源

用时

一明确工作任务

工作任务的阅读与分析；

明确工时、工作内容和人员分组；

1、接收任务并进行阅读分析；

2、根据任务要求进行人员分工；

3、与小组成员讨论网页中所需效果等要求；

1、发放任务并说明要求；

2、指导各小组进行任务分工；

3、察看、记录学生小组讨论情况及所存问题；

4、引导学生讨论所存实际问题（分工明确性）

5.检查学生填写工作页的正确性

1、是否明确任务、工时；

2、小组任务分工是否合理；

3、对任务理解、表达是否到位；

4、工作页完成是否到位；

5、小组积极性。

工作任务

0.5课时

二制定工作计划

CSS3中的变形和移动属性、CSS动画的应用方法学习

设置各表单元素CSS样式的方法、步骤及注意事项学习

选择合适的CSS选择器及CSS样式属性

工作计划的制定

查阅教辅学习CSS3中的变形和移动属性、CSS动画的应用案例

分析效果图，划分模块