本项目我们首先进行“首页”页面的设计，通过本页面的设计，我们熟悉JavaScript、JQuery、音频视频内容的规划，熟练使用相应内容进行页面规划布局，并能进行页面交互效果的添加。

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”首页”页面优化。

1. 页面整合优化。

2. 教学难点：页面整合优化。

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

知识目标

能力目标

素质目标

1.掌握内联框架iframe的使用；

2.掌握超链接实现网页间的转换；

3.熟悉音频视频在页面中的灵活应用；

4.熟悉C3动画与JS动画的灵活应用；

5.掌握JS与JQuery实现页面交互效果；

6.了解“首页”整合的过程。

1.能够熟练应用iframe内联框架；

2.能够利用C3动画与JS动画实现页面动画效果；

3.能够熟练应用音视频文件；

4.能够利用JS与JQuery实现页面交互效果；

5.能够进行页面整合。

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

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——团队协作

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务2 “首页”优化

1、搜索栏样式1

1、搜索栏样式2

2、轮播图布局1

2、轮播图布局2

3、导航栏样式1

4、产品盒子布局样式

5、产品盒子头部秒杀样式

6、产品盒子内容样式

7、产品盒子组合样式实现

【 课后自测区 】

自评自测

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

    1、 材料阅读                                     【简介】团队合作案例展示。

   团队合作案例展示2

【 资料下载 】

单元设计

教学设计21-“首页”优化.pdf

课程教案

教案21-“首页”优化.pdf

演示文稿

项目7 公司网站“首页“页面设计.pptx

任务工单

公司网站“首页”页面设计

素材下载

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

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

    项目7 图片素材下载.rar

课内同步项目

   “首页”移动端页面设计

课外扩展项目

      京东移动站分类页1

     6-1移动京东站分类页.zip

练习题

     练习

疑难问题解答

     1、浏览器对网页的兼容情况。