4.2.5-css盒子模型背景属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css盒子模型背景属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 让学生了解CSS盒子模型的概念。 · 使学生掌握盒子模型中的背景属性及其用法。 · 学会使用CSS控制盒子的背景颜色、图像、重复方式等 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 盒子模型的基本概念。 · 背景属性的语法和常用值。 · 背景图像的平铺和定位。 教学难点 · 背景属性的综合运用。 · 如何根据设计需求选择合适的背景属性设置。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：介绍盒子模型和背景属性的基本概念。 · 案例分析法：通过分析实际案例，加深学生对背景属性的理解。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的CSS基本选择器和样式规则。 · 展示几个具有精美背景的网站页面，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 CSS盒子模型是网页布局的核心概念，它描述了HTML元素在页面上的布局方式。理解盒子模型对于创建和调整网页布局至关重要。以下是关于CSS盒子模型背景属性的相关介绍： ### CSS盒子模型概念 - **盒子模型的组成**：包括内容(Content)、内边距(Padding)、边框(Border)和外边距(Margin)。这些部分共同决定了元素在页面上的大小和位置。 - **盒子模型的两种模式**：标准模式(content-box)和怪异模式(border-box)。在标准模式下，宽度和高度属性设置的是内容区域的宽度和高度；而在怪异模式下，它们设置的是整个盒子（包括边框和内边距）的宽度和高度。 ### 背景属性及其用法 - **background-color**：设置元素的背景颜色。 - **background-image**：为元素设置背景图像。 - **background-repeat**：控制背景图像的重复方式，如不重复、横向重复、纵向重复。 - **background-position**：设置背景图像的位置，可以是具体的坐标值或关键词（如center、top等）。 - **background-size**：设置背景图像的大小，可以是具体的尺寸值或关键词（如cover、contain等）。 - **background-attachment**：设置背景图像的滚动行为，如固定（fixed）或滚动（scroll）。 ### 实例演示 - **设置背景颜色**：使用 `background-color: #ff99ff;` 为元素设置粉色背景。 - **设置背景图像**：使用 `background-image: url('images/example.jpg');` 为元素设置背景图像。 - **控制背景图像重复**：使用 `background-repeat: no-repeat;` 使背景图像不重复。 - **设置背景图像位置**：使用 `background-position: center top;` 将背景图像定位在元素的顶部中央。 通过这些实例，学生可以更好地理解CSS盒子模型背景属性的用法，并在实际项目中应用这些知识。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页设计任务，要求学生使用CSS盒子模型的背景属性来完成。 · 提供一些选择题和填空题，以检验学生对背景属性掌握的程度。 12分钟 布置作业 · 设计一个简单的网页，要求使用至少三个不同的背景属性。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾盒子模型的重要性和背景属性的作用。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$