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

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”新闻中心”页面的设计。

1. 列表与超链接的使用。

2. 教学难点：鼠标的交互效果。

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

知识目标

能力目标

素质目标

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

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

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

4.掌握JavaScript简单使用

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

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

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

1.培养计划、组织和协调能力；

2.提升职业自豪感；

3.培养实践动手能力；

4.具备团队协作精神。

课程思政——工匠精神

【 课程设计】

思维导图

【 资料下载 】

单元设计

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

教学设计6-“新闻中心”页面实现.pdf

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

课程教案

教案5-导航栏与侧边栏的优化 .pdf

教案6-“新闻中心”页面实现.pdf

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

演示文稿

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

任务工单

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

素材下载

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

课内同步项目

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

课外扩展项目

    Sublime Text文本编辑器使用

练习题

 1、练习1

疑难问题解答

  1、JavaScript名字的由来。