本项目我们首先进行”企业文化”页面的设计，通过本页面的设计，我们熟悉CSS3动画效果的添加与规划，熟练使用CSS3选择器与CSS3动画效果进行页面规划布局，制作出美观的页面交互效果。

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”金彩瞬间”页面实现。

1.“精彩瞬间”页面内容实现。

2. 教学难点：CSS3动画效果实现。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握常见CSS选择器的使用；

2.掌握CSS3中新添加的选择器；

3.熟悉CSS3中动画效果添加；

4.了解“精彩瞬间”动画效果的实现。

1.能够熟练应用CSS3中选择器；

2.能够利用CSS3中的动画效果实现页面动画。

1.具有计划、组织和协调能力；

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——文化自信

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务1 “精彩瞬间”页面实现

1、页面布局实现

2、鼠标移入效果

3、文字动画效果

【 课后自测区 】

自评自测

     扫描二维码回答问题                                     扫描二维码自测

    1、 材料阅读                                           【简介】火神山雷神山彰显的中国速度案例。

   文化传承案例展示1

【 资料下载 】

单元设计

   教学设计8-“精彩瞬间”页面实现 .pdf

课程教案

   教案8-“精彩瞬间”页面实现 .pdf

演示文稿

   项目3 公司网站“企业文化“页面设计.pptx

任务工单

公司网站“企业文化”的页面设计

素材下载

     1、区块划分前基本的css文件.rar

    项目3 图片素材下载.rar

    项目3 移动端图片素材下载.rar

课内同步项目

   child系列.rar

课外扩展项目

   of-type系列.rar

练习题

    1、练习1

疑难问题解答

     1、CSS的基本应用技巧。