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

【 案例展示 】

学习任务

重点、难点

突破方法

1. 导航栏与侧边栏的优化。

1.页面内容实现。

2. 教学难点：JavaScript交互效果实现。

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

知识目标

能力目标

素质目标

1.掌握常见HTML5中列表元素的使用；

2.掌握常见HTML5中超链接的使用；

3.熟悉常见的鼠标交互效果；

4.掌握JavaScript简单使用

5.了解“新闻中心”导航栏与侧边栏交互效果的添加。

1.能够熟知HTML5中鼠标交互效果；

2.能够利用JavaScript实现“新闻中心”导航栏与侧边栏的优化。

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

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——工匠精神

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务1：导航栏与侧边栏优化

1、导航栏优化1

2、导航栏的优化2

3、侧边栏的优化

【 课后自测区 】

自评自测

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

    1、 材料阅读                                 【简介】大国工匠案例展示。

   大国工匠案例展示1

【 资料下载 】

单元设计

   教学设计5-导航栏与侧边栏优化.pdf

课程教案

   教学设计5-导航栏与侧边栏优化.pdf

演示文稿

    项目2 公司网站“新闻中心“页面设计.pdf

任务工单

公司网站“新闻中心”的页面设计

素材下载

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

    项目2 图片素材下载.rar

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

课内同步项目

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

课外扩展项目

     网页背景颜色变换

练习题

     1、练习1

疑难问题解答

       1、JavaScript的主要功能有哪些？