项目4 盒子模型（教案）《网页设计》（劳动保障出版社）

《网页设计与制作》 教学设计 课程名称： 网页设计与制作 授课年级： 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的实际宽度和高度均是310 px。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解<div>标签的属性和含义 （1）教师展示PPT，对<div>标签的属性和含义进行具体讲解。 注意： 1）事实上所有的网页元素本质上都是以盒子的形式存在的。例如，<body><P><h1~h6><ul><li>等元素都是盒子，这些元素都有默认的盒子属性值。 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： 下外边距大小 margin-left： 左外边距大小 若四个外边距具有相同的大小，则可以设置如下： margin： 外边距大小 （2）学生自主提问，教师对疑难问题进行解答。 4.1.3CSS设置背景 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： CSS中背景颜色的格式是什么？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： background-color：#RRGGBB|#rgb(r，g，b)|预定义的颜色值。 · 知识点讲解 · 讲解设置背景颜色 （1）教师展示PPT，对设置背景颜色进行具体讲解。 设置背景颜色的格式如下： background-color：#RRGGBB|#rgb(r，g，b)|预定义的颜色值 实例2 设置背景颜色 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解设置背景图像 （1）教师展示PPT，对设置背景图像进行具体讲解。 设置背景颜色的格式如下： background-image：url（图像） 实例3 设置背景图像 （2）学生自主提问，教师对疑难问题进行解答。 任务4.2标签的类型与转换 4.2.1标签的类型 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 标签有哪些类型？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 块标签和行内标签。 · 知识点讲解 · 讲解块标签 （1）教师展示PPT，对块标签进行具体讲解。 块标签在页面中以区域块的形式出现，其特点是每个块标签通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 　　常见的块标签有<p><div><ul><ol><li>等，其中<div>标签是典型的块标签。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解行内标签 （1）教师展示PPT，对行内标签进行具体讲解。 行内标签也称为内联标签或内嵌标签，其特点是不必在新的一行开始，同时，也不要求其他标签必须在新的一行开始。行内标签一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。 　　常见的行内标签有<strong><b><em><i><a><span>等，其中<span>标签是典型的行内标签。 　　<span>标签与<div>标签一样，它作为容器标签而被广泛应用在HTML5中。在<span>与</span>中间同样可以容纳各种HTML标签，从而形成独立的对象。 　　<div>与<span>的区别在于<div>是一个块标签，它包围的标签会自动换行，而<span>仅仅是一个行内标签，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内标签都不合适时，就可以使用<span>标签。下面举例说明<span>标签的使用。 实例4 使用<span>标签 （2）学生自主提问，教师对疑难问题进行解答。 4.2.2标签的转换 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 如何让行内标签拥有块标签的某些属性？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 使用display属性对标签的类型进行转换。 · 知识点讲解 · 讲解标签的转换 （1）教师展示PPT，对标签的转换进行具体讲解。 网页是由多个块标签和行内标签构成的盒子排列而成的。如果希望行内标签具有块标签的某些特性或者需要块标签具有行内标签的某些特性，同时希望不独占一行排列，则可以使用display属性对标签的类型进行转换。 display属性常用的属性值及含义 （2）学生自主提问，教师对疑难问题进行解答。 4.2.3块标签间的外边距 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 如何计算块标签间的垂直外边距？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 当上下相邻的两个块标签相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。 · 知识点讲解 · 讲解块标签间的垂直外边距 （1）教师展示PPT，对块标签间的垂直外边距进行具体讲解。 当上下相邻的两个块标签相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。 实例5 块标签间的垂直外边距 实例5定义了第一个块的下外边距为10 px，定义了第二个块的上外边距为30 px，此时两个块之间的垂直间距为30 px，即为margin-bottom和marign-top中的较大者。 （2）学生自主提问，教师对疑难问题进行解答。 · 讲解块标签间的水平外边距 （1）教师展示PPT，对块标签间的水平外边距进行具体讲解。 当两个相邻的块标签水平排列时，如果左面的标签有右外边距margin-right，右面的标签有左外边距margin-left，则它们之间的水平间距是两者的和。 实例6 块标签间的水平外边距 本例定义了第一个块的右外边距为10 px，定义了第二个块的左外边距为30 px，此时两个块之间的水平间距是40 px，即为marign-right和marign-left的和。 （2）学生自主提问，教师对疑难问题进行解答。 任务4.3综合案例——制作苏轼简介页面 · 内容学习 · 分组讨论 对新课进行讲解前，先让学生分组讨论以下问题： 如何制作人物简介页面？ 请小组代表对以上问题发表见解。 教师对上述问题进行解释： 答案： 创建HTML5文档→添加文本→添加CSS样式→保存并浏览。 · 知识点讲解 · 讲解苏轼简介页面的制作 （1）教师展示PPT，对制作苏轼简介页面进行具体讲解。 （2）学生自主提问，教师对疑难问题进行解答。 实训11 · 实训名称 制作春节简介页面 · 实训目标 使用CSS样式设置页面 · 实训实施 使用CSS样式设置页面，页面设置要求如下。 页面结构要求： 1. 设置元素的外边距为0。 2. 设置背景图像，图像平铺。 3. 设置盒子的宽度为1000 px，高度为自动值，边距为1 px，实线，蓝色。 4. 设置元素的页面上水平居中，内边距为10 px。 5. 设置标题水平居中，高度为30 px。 6. 设置标题的行高，使文字垂直居中。 正文要求： 1. 设置字体为宋体。 2. 设置段落文字大小为15 px。 3. 设置首行缩进2个字符。 4. 设置行高为20 px。 5. 设置段落间距为13 px。 （作品点评） 教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 · 布置作业 · 完成教师布置的作业。 · 预习下章内容。 项目测评 1.盒子模型的概念能够定义盒子 2.盒子模型的相关属性能够设置边框、内边距和外边距 3.CSS设置背景能够设置背景颜色及图像背景 4.标签的类型能够区分块标签和行内标签 5.标签的使用能够熟练使用行内标签 6.标签的转换能够使用display属性 7.块标签间的外边距能够设置垂直外边距和水平外边距 8.CSS样式的使用能够使用CSS内部样式表设置页面各元素样式 9.课后习题能够完成课后习题 10.课堂表现能够遵守纪律，完成学习任务 教 学 后 记 学科网（北京）股份有限公司 $$