UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

任务2 页面具体内容及布局实...

发布时间:2022-03-05 15:52   发布人:袁安翠   浏览次数:759


 任务2:页面具体内容及布局实现 】

        

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

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

 

【 一分钟导学视频 】



【 课程思政视频——团队合作 】



能力目标

知识目标

素质目标

1、了解APP页面的整体结构。

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

3、掌握HTML5 CSS3进行页面代码的实现。

1、了解APP页面的整体结构。

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

3、掌握HTML5 CSS3进行页面代码的实现。

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

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

3. 课程思政:

     不同区块代码实现,培养学生的团队合作意识。



学习任务

重点、难点

突破方法

1. 页面具体内容的实现。

2. 页面整体布局的实现





1.流式布局

2.移动端APP页面内容书写

3.移动端APP页面内容布局的实现

4. 教学难点: 

流式布局、全屏页面布局、过渡和动画结束时间。

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




【 视频讲解】

课前知识储备视频

案例讲解视频

1、京东商城搜索栏布局

2、京东商城轮播图布局

3、京东商城导航栏布局

4、京东商城产品盒子布局

5、京东商城产品盒子头部秒杀布局

6、京东商城产品盒子内容布局

7、京东商城产品盒子组合布局

1、京东商城搜索栏样式1

1、京东商城搜索栏样式2

2、京东商城轮播图布局1

2、京东商城轮播图布局2

3、京东商城导航栏样式1

4、京东商城产品盒子布局样式

5、京东商城产品盒子头部秒杀样式

6、京东商城产品盒子内容样式

7、京东商城产品盒子组合样式实现

【 资料下载 】

单元设计

word.jpg页面内容及布局实现

课程教案

word.jpg页面内容及布局实

演示文稿

ppt.jpg页面内容及布局实现

任务工单

word.jpg页面内容及布局实现

素材下载

1、通用样式

base.zip

2、图片素材

images.zip

课外拓展项目

京东移动站分类页

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

试题解答

练习