本项目我们首先进行”企业文化”页面的设计，通过本页面的设计，我们熟悉列表式内容的规划，熟练使用列表与超链接元素进行页面规划布局，并能进行模板的应用及添加鼠标交互效果。

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”文化展示”页面的设计。

1. CSS3选择器与CSS3动画的使用。

2. 教学难点：CSS3页面交互效果。

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

知识目标

能力目标

素质目标

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

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

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

4.了解HTML5中拖放效果的实现。

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

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

3.能够实现“文化展示”页面效果。

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

2.具有企业文化传承的责任感；

3.具有一定实践动手能力；

4.具备团队协作精神。

课程思政——文化传承

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务2 “企业文化”页面实现

1、页面内容实现

2、图片样式

3、图标引入

4、段落效果

【 课后自测区 】

自评自测

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

   1、 材料阅读                                           【简介】文化传承与文化自信案例展示。

   文化传承案例展示2

【 资料下载 】

单元设计

    教学设计9-“文化展示”页面实现.pdf

课程教案

    教案9-“文化展示”页面实现.pdf

演示文稿

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

任务工单

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

素材下载

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

    项目3 图片素材下载.rar

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

课内同步项目

   “新闻中心”移动端页面设计

课外扩展项目

    多背景

练习题

    盒子阴影

疑难问题解答

     1、CSS的高级应用。