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

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”新闻中心”移动端页面实现。

1.CSS3样式。

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

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

知识目标

能力目标

素质目标

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

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

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

4.掌握JavaScript简单使用

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

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

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

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

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——工匠精神

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

拓展任务：移动端折叠导航

1、折叠导航页面布局

2、遮罩与图标定位

3、折叠导航头部

4、一级导航菜单

5、二级菜单实现

6、点击打开下一级级联菜单

7、点击图标旋转背景改色

8、点击下一个让上一个进行隐藏

9、两次点击同一个菜单

10、折叠导航的显示隐藏

【 课后自测区 】

自评自测

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

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

   大国工匠案例展示

【 资料下载 】

单元设计

教学设计7-“新闻中心”页面项目技能点.pdf

课程教案

 教案7-“新闻中心”页面项目技能点.pdf

演示文稿

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

任务工单

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

素材下载

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

    项目2 图片素材下载.rar

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

课内同步项目

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

课外扩展项目

    1、轮播图源码

练习题

    1、练习1

疑难问题解答

    1、JavaScript能完成哪些操作？