Web前端技术项目式教程电子教案 第8章 使用Flex实现网页响应式布局 任务八教案.docxVIP

PAGE2

PAGE

第8章使用Flex实现网页响应式布局

课程名称

网页设计

项目名称

使用Flex布局实现

网页响应式布局

任务名称

使用Flex布局实现网页响应式布局

课时

6

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备应用Flex实现响应式布局的能力

2.具备灵活运用Flex的能力

知识目标：

1.掌握响应式布局的基础知识

2.掌握Flex布局的基本语法

3.掌握运用Flex布局实现各种响应式布局的方法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）创建响应式布局的基本结构

（2）实现云景旅游公司首页Flex布局

（2）学生动手操作

3.教师讲解本任务涉及的知识点

4.任务小结

教学重点

1.响应式布局基础知识

2.Flex实现响应式网页

教学难点

1.Flex基本语法

2.Flex实现响应式网页

教学准备

1.装有vscode的电脑

2.教学课件PPT

3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》

作业设计

使用Flex布局重构二级页面“传统建筑”

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、