互联网发展至今，相信很多读者对“网上购物”并不陌生，本项目将带领读者完成一个模拟网上商城的移动端项目，将其命名为“京东掌上商城”。

    经过前面几个项目的学习，小明对界面设计有了一定的了解和实际动手操作能力，本任务重点讲解APP界面中各部分的代码实现，要求学生掌握简单的JavaScript实现轮播图与倒计时。

【 案例展示 】

学习任务

重点、难点

突破方法

1. 项目的创建。

2. 项目的整体样式。

3. 页面整体布局的实现。

1. 项目创建过程。

2. 项目整体样式的书写。

3. 页面整体布局的实现。

3. 教学难点： 项目整体样式书写。

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

知识目标

能力目标

素质目标

1、了解项目的整体结构。

2、能够参考教材完成项目代码。

3、掌握项目中使用的重点知识

1、了解JavaScript简单的语法结构。

2、能够使用JavaScript实现轮播图。

3、能够使用JavaScript实现倒计时。

1. 养成积极主动学习意识；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——团队能力

【 视频讲解】

知识储备及案例实现

1、补充：流式布局1

2、补充：流式布局2

3、项目的创建

1、通用样式的书写

2、页面布局的实现

【 资料下载 】

单元设计

页面整体布局

课程教案

页面整体布局

演示文稿

页面整体布局

任务工单

页面整体布局

素材下载

1、通用样式

base.zip

2、图片素材

images.zip

课内同步项目

京东移动站分类页

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

课外扩展项目

京东移动站分类页1

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

练习题

练习