4.1-CSS认识盒子模型（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 CSS认识盒子模型 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 使学生了解CSS盒子模型的基本概念和构成。 · 让学生掌握如何使用CSS控制盒子模型的各个部分，包括边框、内边距、外边距和内容区域。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. CSS盒子模型的基本概念和构成。 2. 如何使用CSS控制盒子模型的各个部分。 教学难点 1. 如何理解和运用CSS盒子模型进行页面布局。 2. 如何解决盒子模型中的样式冲突问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过教师的讲解，传授CSS盒子模型的基本知识。 · 案例分析法：通过分析案例，让学生理解CSS盒子模型的应用方法和技巧。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾之前学过的HTML基本元素和CSS基本概念。 2. 展示一个简单的网页，引导学生观察并思考CSS盒子模型在网页设计中的应用。 2分钟 讲授新课 练习指导 ### CSS盒子模型的基本概念和构成 CSS盒子模型是一种用于描述网页元素布局和样式的模型。它将每个元素视为一个矩形盒子，包含以下四个部分： 1. **内容区域（Content）**：这部分是元素的实际内容，如文本、图片等。内容区域的大小由元素的宽度和高度决定。 2. **内边距（Padding）**：内边距位于内容区域与边框之间，它的作用是扩展内容区域与边框之间的空间，使内容与边框之间有一定的间距。内边距的大小可以通过`padding-top`、`padding-right`、`padding-bottom`和`padding-left`属性进行设置。 3. **边框（Border）**：边框位于内边距与外边距之间，它围绕着内容区域和内边距。边框的样式、宽度和颜色可以通过`border-style`、`border-width`和`border-color`属性进行设置。同时，可以使用`border`属性的简写形式同时设置边框的样式、宽度和颜色。 4. **外边距（Margin）**：外边距位于边框与其他元素之间，它的作用是扩展元素与其他元素之间的空间，使元素之间有一定的间距。外边距的大小可以通过`margin-top`、`margin-right`、`margin-bottom`和`margin-left`属性进行设置。 ### 如何使用CSS控制盒子模型的各个部分 1. **设置内容区域的大小**：使用`width`和`height`属性设置元素的内容区域的宽度和高度。 ```css div { width: 200px; height: 100px; } ``` 2. **设置内边距**：使用`padding`属性的简写形式或分别设置`padding-top`、`padding-right`、`padding-bottom`和`padding-left`属性来设置内边距的大小。 ```css div { padding: 10px 20px; /* 上下内边距为10px，左右内边距为20px */ } ``` 3. **设置边框**：使用`border`属性的简写形式或分别设置`border-style`、`border-width`和`border-color`属性来设置边框的样式、宽度和颜色。 ```css div { border: 2px solid #000; /* 边框宽度为2px，样式为实线，颜色为黑色 */ } ``` 4. **设置外边距**：使用`margin`属性的简写形式或分别设置`margin-top`、`margin-right`、`margin-bottom`和`margin-left`属性来设置外边距的大小。 ```css div { margin: 10px 20px; /* 上下外边距为10px，左右外边距为20px */ } ``` 通过以上方法，可以灵活地控制CSS盒子模型的各个部分，实现网页元素的布局和样式设置。在实际应用中，可以根据具体情况灵活运用这些方法，以达到最佳的效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 根据给定的HTML结构，编写相应的CSS代码，设置盒子模型的各个部分。 2. 设计一个简单的网页，要求运用CSS盒子模型进行页面布局和元素间距设置。 12分钟 布置作业 1. 完成课后习题练习，并提交代码和效果图。 2. 选择一个自己感兴趣的主题，设计一个运用CSS盒子模型的网页作品。 1分钟 总结回顾 1. CSS盒子模型的基本概念和构成。 2. 如何使用CSS控制盒子模型的各个部分。 3. CSS盒子模型的应用场景和设计原则。 通过本节课的学习，学生应该能够熟练掌握CSS盒子模型的应用，提高网页设计的效率和质量。在实际应用中，可以根据具体情况灵活运用这些方法，以达到最佳的效果。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$