教案
序号：9
授课日期
课时数
4
章节名称
任务10盒子模型及应用
教学内容
重点
盒子模型的属性。
难点
盒子模型的定义。
教学目的与要求
掌握盒子模型的概念及其属性；
掌握边框、内边距、外边距的设置；
了解利用盒子模型布局网页的优势。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
（任务10盒子模型及应用
10.1盒子模型的概念、10.2边框的设置）
实操任务目标发布
实战演练——制作古诗文欣赏网页
图9-SEQ图\*ARABIC\r11“古诗文欣赏”网页
强化训练——制作散文赏析网页
图9-SEQ图\*ARABIC2“散文赏析”网页
知识准备——盒子模型的概念、边框的设置
盒子模型的概念
CSS将HTML页面中的每一个元素看成是一个矩形盒子，占据一定的页面空间。
一个HTML页面由很多这样的盒子组成，这些盒子之间会相互影响，因此网页布局主要是掌握：一个独立的盒子的内部结构；多个盒子之间的相互关系。
盒子模型使用div/div标记来表示。
图9-SEQ图\*ARABIC
图9-SEQ图\*ARABIC3盒子模型展示
一个独立的盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）这4部分组成。
图9-SEQ图\*ARABIC4盒子模型
盒子的实际宽度=width+padding（左右）+border（左右）+margin（左右）
盒子的实际高度=height+padding（上下）+border（上下）+margin（上下）
图9-SEQ图\*ARABIC5盒子属性的设置
盒子模型各元素的关系
图9-SEQ图\*ARABIC6盒子模型中各元素的关系
边框的设置
边框样式
边框样式（border-style）：solid（单实线），dashed（虚线），dotted（点线），double（双实线）。
基本格式：border-style：上边框[右边框下边框左边框]；
值复制原则：
1个值：四边
2个值：上下/左右
3个值：上/左右/下
4个值：上/右/下/左
子任务：
图9-SEQ图\*ARABIC7边框样式的设置
小技巧：分别设置边框样式
上边框样式：border-top-style
右边框样式：border-right-style
下边框样式：border-bottom-style
左边框样式：border-left-style
边框宽度
边框宽度（border-width）：单位为像素px
基本格式：border-width：上边框[右边框下边框左边框]；
值复制原则：
1个值：四边
2个值：上下/左右
3个值：上/左右/下
4个值：上/右/下/左
子任务：
图9-SEQ图\*ARABIC8边框宽度的设置
小技巧：分别设置边框宽度
上边框宽度：border-top-width
右边框宽度：border-right-width
下边框宽度：border-bottom-width
左边框宽度：border-left-width
边框颜色
边框颜色（border-color）：预定义的颜色值、#RRGGBB或rgb（r,b,g）。
基本格式：border-color：上边框[右边框下边框左边框]；
值复制原则：
1个值：四边
2个值：上下/左右
3个值：上/左右/下
4个值：上/右/下/左
子任务：
图9-SEQ图\*ARABIC9边框颜色的设置
小技巧：分别设置边框颜色
上边框颜色：border-top-color
右边框颜色：border-right-color
下边框颜色：border-bottom-color
左边框颜色：border-left-color
边框的综合设置
边框的综合设置：设置四侧边框的属性。
基本格式：border：宽度样式颜色；
单侧边框的综合属性：
border-top
border-right
border-bottom
border-left
子任务：
图9-SEQ图\*ARABIC10边框属性的综合设置
第二学时
（任务10盒子模型及应用
10.2边框的设置、10.3内边距的设置、10.4外边距的