4.3.1-css块级元素（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css块级元素 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 让学生了解CSS中的块级元素和行内元素的概念。 · 使学生掌握如何使用CSS样式控制块级元素的布局和样式。 · 学会使用CSS的display属性来改变元素的显示类型。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 块级元素的定义和特点。 · 块级元素的布局和样式控制。 · display属性的用法和相关值。 教学难点 · 如何根据设计需求选择合适的布局方法。 · display属性与其他CSS布局属性的综合运用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 案例分析法：通过分析实际案例，加深学生对块级元素的理解 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本标签和结构。 · 展示几个简单的网页布局案例，激发学生的学习兴趣。 · 提出问题：你们知道网页中的块状结构是如何实现的吗？ 2分钟 讲授新课 练习指导 在CSS中，元素被分为块级元素和行内元素，这两种元素在布局和样式控制上有显著的区别。以下是关于块级元素和行内元素的相关信息： ### 块级元素和行内元素的概念 - **块级元素**：总是从新行开始，宽度默认为父容器的100%，可以设置宽高、内外边距，可以包含其他块级元素和行内元素。例如：`div`、`p`、`h1`等。 - **行内元素**：与其他元素在同一行显示，宽度随内容变化，不可设置宽高，但可以设置内外边距。例如：`span`、`a`、`img`等。 ### 使用CSS样式控制块级元素的布局和样式 - **宽度和高度**：使用 `width` 和 `height` 属性来设置块级元素的尺寸。 - **内外边距**：使用 `margin` 和 `padding` 属性来调整块级元素与其他元素之间的距离。 - **边框**：使用 `border` 属性来为块级元素添加边框。 ### 使用CSS的display属性来改变元素的显示类型 - **display属性的基本用法**： - `block`：元素将显示为块级元素，前后会带有换行符。 - `inline`：元素将显示为内联元素，元素前后没有换行符。 - `inline-block`：元素将显示为行内块元素，可以设置宽高，但不会自动换行。 - **display属性的应用场景**： - 将行内元素转换为块级元素，以便进行布局控制。 - 将块级元素转换为行内元素，以适应特定的设计需求。 - 使用 `none`隐藏元素，或 `contents`仅显示内容而不创建额外的块级结构。 通过理解块级元素和行内元素的基本概念，以及学会使用CSS的display属性来改变元素的显示类型，学生可以更有效地控制网页布局和设计。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页布局任务，要求学生使用CSS控制块级元素的布局。 · 提供一些选择题和填空题，以检验学生对块级元素掌握的程度。 12分钟 布置作业 · 设计一个简单的网页布局，要求使用至少三个块级元素。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾块级元素的重要性和布局控制方法。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS布局知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$