《网页设计与制作（活页式）》 教案 项目4 盒子模型.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目四盒子模型

计划课时

课时

内容分析

盒子模型是CSS网页布局的关键技术。掌握盒子模型的相关属性，更好地控制网页中各个元素所呈现的效果。本项目将对盒子模型的概念、盒子相关属性及标签的类型与转换进行讲解。

教学目标

理解盒子模型的概念。

掌握盒子模型的相关属性。

熟悉标签的类型与转换。

重点及措施

教学重点：使用CSS设置背景；使用块元素和行内标签

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：使用CSS样式制作页面结构

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务4.1认识盒子模型

4.1.1盒子模型的概念

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

什么是盒子模型？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

盒子模型是指把HTML5页面中的元素看作矩形的盒子，每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的。

知识点讲解

讲解盒子模型的概念

（1）教师展示PPT，对盒子模型的概念进行具体讲解。

盒子模型是指把HTML5页面中的元素看作矩形的盒子，每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的。

实例1认识盒子模型

在body标签中使用div标签定义了一个盒子“box”，并对“box”设置了若干属性。

div是英文division的缩写，意为分割、分开。div标签就是一个区块容器标签，简称块标签，块通常称为盒子。块标签可以容纳段落、标题、表格、图像等各种网页元素。div标签可以嵌套div标签。实际上DIV+CSS布局就是将网页内容放入若干div标签中，并使用CSS设置这些div标签的属性。

（2）学生自主提问，教师对疑难问题进行解答。

讲解盒子模型结构

（1）教师展示PPT，对盒子模型结构进行具体讲解。

一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。因此，实例1中定义的盒子box的实际宽度和高度均是310px。

（2）学生自主提问，教师对疑难问题进行解答。

讲解div标签的属性和含义

（1）教师展示PPT，对div标签的属性和含义进行具体讲解。

注意：

1）事实上所有的网页元素本质上都是以盒子的形式存在的。例如，bodyPh1~h6ulli等元素都是盒子，这些元素都有默认的盒子属性值。

2）给盒子添加背景色或背景图像时，该元素的背景色或背景图像将出现在内边距中。

3）虽然每个盒子模型都拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

（2）学生自主提问，教师对疑难问题进行解答。

4.1.2盒子模型的相关属性

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

盒子模型主要有哪些属性？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

边框属性、内边距属性、外边距属性。

知识点讲解

讲解边框属性

（1）教师展示PPT，对边框属性进行具体讲解。

边框属性设置格式如下：

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

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

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

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

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

border：边框宽度样式颜色

（2）学生自主提问，教师对疑难问题进行解答。

讲解内边距属性

（1）教师展示PPT，对内边距属性进行具体讲解。

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

padding-top：上内边距大小

padding-right：右内边距大小

padding-bottom：下内边距大小

padding-left：左内边距大小

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

padding：内边距大小

（2）学生自主提问，教师对疑难问题进行解答。

讲解外边距属性

（1）教师展示PPT，对外边距属性进行具体讲解。

外边距用于设置盒子与其他盒子之间的距离。其设置格式如下：

margin-top：上外边距大小

margin-right：右外边距大小

margin-bottom：下