《HTML5+CSS3网站设计基础
教程》
教学设计
课程名称：HTML5+CSS3网站设计基础教程
授课年级：20XX年级
授课学期：20XX学年第XX学期
教师姓名：XX老师
20XX 年XX 月XX 日
1
无热胆饮水机课时
8课时
内容分析盒子模型是CSS网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。本章将对盒子模型的概念、盒子模型相关属性及元素的类型和转换进行详细讲解。 教学目标●掌握盒子的相关属性，能够制作常见的盒子模型效果。
●掌握背景属性的设置方法，能够设置背景颜和图像。
●理解渐变属性的原理，能够设置渐变背景。
●熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。
重点及措施教学重点：认识盒子模型、<div>标记、盒子模型相关属性、背景属性、CSS3渐变属性。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：盒子模型相关属性、背景属性、CSS3渐变属性。措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程
第一课时
（讲解认识盒子模型、<div>标记、盒子的宽与高）
复习上节课内容
传送侦测怎么做在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS3选
择器”的相关知识。
1、通过上一章的学习，我们知道在CSS3中新增了很多新的选择器，例如
属性选择器、关系选择器等。本节课，我们将学习CSS3中重要的选择
器—结构化伪类选择器。那么，到底什么是结构化伪类选择器呢？常
见的结构化伪类选择器有哪些？
答案：
CSS基础选择器主要包括四种，具体如下：
结构化伪类选择器是CSS3中新增加的选择器。
常用的结构化伪类选择器有:root选择器、:not选择器、:only-child 选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择
侧安全气囊器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n) 选
择器、:empty选择器、:target选择器。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
2
随着信息化的迅速发展，手机已经成为人们日常生活中的必需品。一个完整
微型齿轮
的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中
也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，
如何理解“CSS盒子模型”呢？
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
●如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模
型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模
型的内边距，纸盒的厚度为CSS盒子模型的边框。当多个手机盒子放
在一起时，它们之间的距离就是CSS盒子模型的外边距。
●所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也
就是一个盛装内容的容器。每个矩形都由元素的内容、内边距
（padding）、边框（border）和外边距（margin）组成。
✧知识点讲解
➢讲解“认识盒子模型”
（1）、教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的手机盒子的构成进行演示。
（2）、教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。
3
（3）、教师使用CSS盒子模型控制网页中的元素，并进行代码演示。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“<div>标记”
（1）、教师展示PPT对“<div>标记”的概念及用途进行讲解，并举例说明。
（2）、教师对“<div>标记”的使用方法进行讲解，并通过代码进行演示。
（3）、教师指出使用“<div>标记”布局时需要注意的问题，并给与解答。
（4）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“盒子的宽与高”
（1）、教师展示PPT对“盒子的宽与高”的概念进行讲解。
（2）、教师分别对“盒子的宽度与高度”的常用单位数值进行讲解，并通过代码进行演示。
（3）、教师指出计算“盒子模型的总宽度和总高度”的计算原则，并能够根据实际情况进行计算。
●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边
距之和
●盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边
距之和
（4）、学生练习，教师巡视，对疑难问题进行解答。
✧阶段小结
➢小结
重点：盒子模型、<div>标记、盒子的宽与高。
易错点：盒子模型的总宽度和总高度的计算原则。
➢答疑
教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识
点给与解释。
✧巩固练习
➢巩固本课时知识点
学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生
更熟练地掌握如何认识盒子模型，并能够计算子模型的总宽度和总高度。
➢通过“补充案例”加强学习
教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补
充案例对相关知识点进行巩固。
第二课时
（讲解边框属性、边距属性、box-shadow属性、box-sizing 属性）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。
1、通过上节课的学习，我们已经认识了盒子模型，并学习了盒子模型的
构成。那么，请大家回顾下：在CSS规范的盒子模型中，如何计算盒
汽结构子模型的总宽度和总高度？
答案：
4
CSS规范的盒子模型的总宽度和总高度的计算原则是：
●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边
距之和。
●盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边
距之和。
说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解
或直接进入本课时新内容的学习。
本课时内容学习
✧分组讨论
对新课进行讲解前，先让学生分组讨论以下问题：
通过上节课的学习，我们已经学习了盒子模型及其边框属性。其实，盒子
模型中还包括其他属性，例如：边距属性。那么，请同学们讨论下：如何
理解盒子模型中的“内边距”呢？
答案：
请小组代表对以上问题发表见解。
教师对上述问题进行解释：
在网页布局时，为了调整内容在盒子中的显示位置，常常需要给元素设置
内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。
流(H)✧知识点讲解
➢讲解“边框属性”
（1）、教师展示PPT对“边框属性”的概念及用途进行讲解。
（2）、教师分别对“设置边框样式”、“设置边框宽度”、“设置边框颜”
及“综合设置边框”的属性值及应用效果进行讲解并通过代码进行
演示。
（3）、教师分别对设置“圆角边框”、“图片边框”进行讲解，并进行实时
演示。
（4）、教师指出应用“边框属性”时需要注意的问题，并给与解答。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“边距属性”
（1）、教师展示PPT将CSS边距属性分为“内边距”和“外边距”两种。
（2）、教师展示PPT对“内边距”、“外边距”的概念进行讲解。
（3）、教师分别对“内边距属性”、“外边距属性”进行讲解并通过代码进
行演示。
（4）教师分析内外边距的区别与联系，并对比其应用效果。
（5）、学生练习，教师巡视，对疑难问题进行解答。
➢讲解“box-shadow属性”
（1）、教师展示PPT对“box-shadow属性”的概念及用途进行讲解，指出
box-shadow属性用于实现阴影。
5
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议