Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第9讲次 任务10 盒子模型及应用.docx

教案

序号：9

授课日期

课时数

4

章节名称

任务10盒子模型及应用

教学内容

重点

盒子模型的属性。

难点

盒子模型的定义。

教学目的与要求

掌握盒子模型的概念及其属性；

掌握边框、内边距、外边距的设置；

了解利用盒子模型布局网页的优势。

教学方法

与手段

教师采用任务驱动法，使用教学PPT辅助授课。

教师操作演示，学生实训练习。

学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。

作业及

思考题

完成课堂上未完成的习题，通过网络平台上交作业。

通过回帖的方式回答课上留下的思考题。

预习下一节内容。

讲授内容

课堂组织

第一学时

（任务10盒子模型及应用

10.1盒子模型的概念、10.2边框的设置）

实操任务目标发布

实战演练——制作古诗文欣赏网页

图9-SEQ图\*ARABIC\r11“古诗文欣赏”网页

强化训练——制作散文赏析网页

图9-SEQ图\*ARABIC2“散文赏析”网页

知识准备——盒子模型的概念、边框的设置

盒子模型的概念

CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。

一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此网页布局主要是掌握：一个独立的盒子的内部结构；多个盒子之间的相互关系。

盒子模型使用div/div标记来表示。