任务4制作学院介绍页面.docVIP

教案名称

任务4制作学院介绍页面

计划学时

6学时

知识目标

理解盒子模型概念

掌握盒子大小计算方式

掌握盒子模型的相关属性

掌握背景颜色设置方法

掌握背景图像设置方法

能力目标

理解盒子模型

能够制作常见的盒子模型效果

能够设置背景颜色和图像

素质目标

培养学生作风严谨、精益求精的工匠精神

引导学生认识美、发现美、创造美

教学重点

盒子模型的相关属性

设置背景颜色

设置背景图像

综合设置背景

教学难点

盒子大小计算方式

教学模式

教学做一体化

线上+线下混合教学

教学活动及主要环节

思政元素

切入点

第1、2学时

（盒子模型）

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。

=1\*ROMANI.学生讨论：（10分钟）

盒子模型中的盒子有哪些属性？网页中哪些元素是盒子？

=2\*ROMANII.重难点内容讲授：

一、盒子模型（20分钟）

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框(border)和外边距(margin)组成。

二、盒子大小计算方式（15分钟）

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。

练习：定义一个盒子，设置相关属性。（5分钟）

三、盒子模型的相关属性（40分钟）

1．边框属性border

边框（border）属性设置方式如下：

border-top：上边框宽度样式颜色

border-right：右边框宽度样式颜色

border-bottom：下边框宽度样式颜色

border-left：左边框宽度样式颜色

若四个边框具有相同的宽度、样式和颜色，则可以一个次设置如下：

border：边框宽度样式颜色

注意：边框宽度、样式和颜色属性的顺序可以随意。

边框样式的常用属性值有以下5个。

solid：边框样式为单实线。

dashed：边框样式为虚线。

dotted：边框样式为点线。

double：边框样式为双实线。

none：没有边框。

2．圆角边框属性border-radius

格式:border-radius:圆角半径;

例：设置圆角半径值为15px

border-radius:15px;

注意：

（1）设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值。

四个参数分别表示左上角、右上角、右下角、左下角的圆角半径。

（2）若盒子设置了背景颜色或背景图像，那么在不设置边框时，也可以使用border-radius属性显示出圆角的效果。

例：设置圆角半径为15px

3．内边距属性padding

内边距用于设置盒子中内容与边框之间的距离，也常常称为内填充。其设置方法类似于

padding属性的设置，其设置方式如下：

padding-top：上内边距大小

padding-right：右内边距大小

padding-bottom：下内边距大小

padding-left：左内边距大小

若四个内边距具有相同的大小，则可以一个次设置如下：

padding：内边距大小

例如，将盒子box的上、右、下、左4个内边距分别设置为10px、20px、30px、40px，则可以使用如下代码。

也可以简写成：

若只有3个参数：

表示上内边距为10px，左、右内边距均为20px，下内边距为30px

若只有2个参数：

表示上、下内边距均为10px，左、右内边距均为20px

若只有一个参数：

表示上、右、下、左4个内边距均为10px

4．外边距（margin）属性

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距。外边距用于设置盒子与其它盒子之间的距离。其设置方法类似于内边距（paddding）属性的设置，其设置方式如下：

margin-top：上外边距大小

margin-right：右外边距大小

margin-bottom：下外边距大小

margin-left：左外边距大小

若四个外边距具有相同的大小，则可以一次设置如下：

margin：外边距大小

如果要让盒子在其所在容器中水平居中，则可以用如下代码：

5.盒子阴影（box-shadow）属性

格式：box-shadow:阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜色阴影类型；

例4-2定义一个盒子，设置它们的相关属性，为盒子和图像设置阴影。

=3\*ROMANIII.课堂小结：（5分钟）

盒子模型的相关属性

盒子大小计算方式

盒子的阴影属性

作业：

超星学习通平台作业

第3、4学时

（CSS背景属性）

课前发布任务：

观看学习通平台相关学习视频。

做课前测试题。