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

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

【 一分钟导学视频 】

【 课程思政视频——工匠劳动精神 】

能力目标

知识目标

素质目标

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

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

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

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

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

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

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

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

3. 课程思政：  

   代码调试，培养学生精益求精的工匠精神。

学习任务

重点、难点

突破方法

1. 项目的创建。

2. 项目的整体样式。

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

1. 项目创建过程。

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

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

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

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

【 视频讲解】

课前知识储备视频

案例讲解视频

1、补充：流式布局1

2、补充：流式布局2

3、项目的创建

1、通用样式的书写

2、页面布局的实现

【 资料下载 】

单元设计

页面整体布局

课程教案

页面整体布局

演示文稿

页面整体布局

任务工单

页面整体布局

素材下载

1、通用样式

base.zip

2、图片素材

images.zip

课外拓展项目

京东移动站分类页

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

试题解答

练习