Web前端技术项目式教程电子教案 第3章 使用DIV+CSS实现中国传统文化网站首页布局 任务三教案-2.docxVIP

PAGE6

PAGE

第3章使用DIV+CSS实现中国传统文化网站首页布局

课程名称

网页设计

项目名称

CSS盒模型和定位机制

任务名称

CSS盒模型和定位机制

课时

2

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.掌握使用CSS选择器获取网页元素。

2.掌握使用CSS的盒模型、区块、浮动、定位等设计网页布局。

知识目标：

1.熟悉CSS的基本语法规则。

2.熟悉盒模型的基本原理。

3.了解CSS的层叠和继承。

素质目标：

1.培养学生对中华优秀传统文化的深刻理解和认同。

2.培养学生良好的职业道德，根据《中华人民共和国网络安全法》制作和发布网页信息。

教学内容

1.任务描述

2.任务展示与实现

（1）利用CSS盒模型和CSS样式定位网页

（2）利用CSS定位机制精确控制网页元素位置

（3）学生动手操作

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

教学重点

1.CSS盒模型

2.CSS定位机制

教学难点

1.CSS盒模型

2.CSS定位机制

教学准备

1.装有VScode的电脑

2.教学课件PPT

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

作业设计

1．综合运用CSS盒模型和CSS定位机制精确定位网页

教学过程