《web前端技术》---教案-第12课-CSS3布局之盒子模型和元素排版.pdfVIP

课题第12课CSS3布局之盒子模型和元素排版

课时2课时（90min）

知识技能目标

（1）掌握盒子模型的相关知识，包括盒子模型的基本结构和属性，以及不同类型元素的盒子模型

（2）掌握元素的排版，包括标准流排版、浮动排版和定位排版

教学目标

素质目标

（1）学习盒子模型和元素的排版，增加知识储备，提升网页布局技能

（2）感受理论与实践相结合，锻炼思维能力，培养工作思维

教学重点盒子模型的基本结构和属性、不同类型元素的盒子模型

教学重难点

教学难点元素的排版，包括标准流排版、浮动排版和定位排版

教学方法问答法、讨论法、讲授法、实践练习法、演示法

教学用具电脑、投影仪、多媒体课件、教材、

第1节课课前任务→考勤（2min）→问题导入（3min）→传授新知（25min）→实战拓展（15min）

教学设计第2节课问题导入（5min）→传授新知（25min）→实战拓展（10min）→课堂小结（3min）→作业布置

（2min）

教学过程主要教学内容及步骤设计意图

第一节课

通过课前任务，

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学使学生了解盒子

习软件，完成课前任务模型和元素排版

从网上查找盒子模型和元素排版的相关知识，了解盒子模型是什么，元素排版分为的相关知识，增加

课前任务

哪些类别学生的学习兴趣，

提前对知识有了

【学生】完成课前任务了解，方便上课时

理解知识点

【教师】使用APP进行签到培养学生的组

考勤

织纪律性，掌握学

（2min）【学生】按照老师要求签到生的出勤情况

【教师】提出问题

在之前的课程中，我们学习了CSS的常用属性，对网页的文本、图像、超链接、列

表、表格等进行了美化，但我们在网页的整体排版时，该怎么布局才让网页看起来合理

呢？通过问题导入

问题导入【学生】思考、举手回答的方法，引导学生

（3min）主动思考，激发学

【教师】通过学生的回答引入要讲的知