UI前端设计
袁安翠

1
2
3
4
5
6
7
8

项目创建及整体布局

发布时间:2019-07-15 09:17   发布人:袁安翠   浏览次数:358

 任务1:项目创建及整体布局 】

        

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

     经过前面几个项目的学习,小明对界面设计有了一定的了解和实际动手操作能力,本任务重点讲解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、页面布局的实现


【 资料下载 】

单元设计

word.jpg页面整体布局

课程教案

word.jpg页面整体布局

演示文稿

ppt.jpg页面整体布局

任务工单

word.jpg页面整体布局

素材下载

1、通用样式

base.zip

2、图片素材

images.zip

课外拓展项目

京东移动站分类页

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

试题解答

练习