4.4-css元素类型的转换（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 css元素类型的转换 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 让学生了解CSS中如何进行元素类型的转换。 · 使学生掌握如何使用CSS的display属性来改变元素的显示类型。 · 学会在不同布局场景中选择合适的元素类型。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 元素类型转换的概念和必要性。 · display属性的用法，特别是block、inline和inline-block值。 · 如何根据设计需求选择合适的元素类型。 教学难点 · 理解不同元素类型之间的区别和联系。 · 在实际布局中灵活运用元素类型转换。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：介绍元素类型转换的基本概念。 · 案例分析法：通过分析实际案例，加深学生对元素类型转换的理解。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上节课学习的HTML基本标签和CSS基础样式。 · 展示几个结合了不同元素类型的网页布局案例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 在CSS中，可以通过设置元素的`display`属性来进行元素类型的转换。`display`属性决定了元素如何在页面上显示，它可以接受多种值来改变元素的显示类型。以下是一些常见的`display`属性值及其对应的元素类型转换： 1. **block**：将元素转换为块级元素。块级元素在文档流中独占一行，宽度默认为父元素的宽度，可以设置宽度和高度。常见的块级元素有`<div>`、`<p>`、`<h1>`到`<h6>`等。 ```css .block-element { display: block; } ``` 2. **inline**：将元素转换为行内元素。行内元素在文档流中与其他行内元素（如文本、图片等）保持在同一行，宽度由内容决定，不能设置宽度和高度。常见的行内元素有`<span>`、`<a>`、`<img>`等。 ```css .inline-element { display: inline; } ``` 3. **inline-block**：将元素转换为行内块元素。行内块元素在文档流中与其他行内元素保持在同一行，同时具备块级元素的特性（如可以设置宽度和高度）。常见的行内块元素有`<input>`、`<button>`等。 ```css .inline-block-element { display: inline-block; } ``` 4. **none**：将元素完全移除，不占据任何空间。这在隐藏元素或创建伪元素时非常有用。 ```css .hidden-element { display: none; } ``` 要进行元素类型的转换，只需要在CSS中为目标元素设置相应的`display`属性值即可。例如，如果你想将一个块级元素（如`<div>`）转换为行内元素，可以这样设置： ```css .div-as-inline { display: inline; } ``` 在HTML中，可以将需要转换类型的元素应用这个类： ```html <div class="div-as-inline">这个div现在是行内元素。</div> ``` 通过理解和应用这些`display`属性值，可以实现元素类型的转换，从而实现更灵活的页面布局和设计。在实际应用中，根据设计需求选择合适的元素类型转换方法，以达到最佳的布局效果。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页布局任务，要求学生使用CSS进行元素类型转换。 · 提供一些选择题和填空题，以检验学生对元素类型转换掌握的程度。 12分钟 布置作业 · 设计一个简单的网页布局，要求使用至少两种不同的元素类型。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾元素类型转换的重要性和方法。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS布局知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$