4.3.2-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分钟 讲授新课 练习指导 行内元素是那些只占用定义元素的标签所限定的空间的元素，而不是打破内容流。它们不会从新行开始，只占用必要的宽度，且无法设置宽高及行高。行内元素的宽度就是它包含的文字或图片的宽度，不可改变。常见的行内元素有`a`、`span`、`li`、`sub`等。 ### 行内元素的布局控制 - **宽度和高度**：行内元素的宽度由内容决定，无法直接设置宽度和高度。 - **内外边距**：行内元素的左右外边距有效，上下外边距无效。 - **边框**：行内元素的边框只在行内方向上有效，不会跨行显示。 ### 使用CSS的display属性来改变元素的显示类型 - **display属性的基本用法**： - `inline`：元素将显示为内联元素，元素前后没有换行符。 - `block`：元素将显示为块级元素，前后会带有换行符。 - `inline-block`：元素将显示为行内块元素，可以设置宽高，但不会自动换行。 - **display属性的应用场景**： - 将行内元素转换为块级元素，以便进行布局控制。 - 将块级元素转换为行内元素，以适应特定的设计需求。 - 使用 `none`隐藏元素，或 `contents`仅显示内容而不创建额外的块级结构。 通过理解行内元素的基本概念，以及学会使用CSS的display属性来改变元素的显示类型，学生可以更有效地控制网页布局和设计。 行内元素是网页布局中不可或缺的一部分，它们通常用于文本内容的装饰和强调。以下是一些行内元素常见的样式属性： - **字体样式**：如 `font-family`、`font-size`、`font-weight`、`font-style`，用于控制文本的字体、大小、粗细和斜体。 - **文本颜色**：使用 `color`属性来设置文本的颜色。 - **文本装饰**：如 `text-decoration`，可以设置文本的下划线、删除线等。 - **文本对齐**：使用 `text-align`属性来控制文本的水平对齐方式，如左对齐、右对齐或居中。 - **行高**：通过 `line-height`属性来设置文本的行间距。 - **垂直对齐**：对于行内元素，如图片和表单，可以使用 `vertical-align`属性来控制它们与文本的对齐方式。 通过这些样式属性，可以有效地控制行内元素的视觉表现，从而提升网页的整体美观性和用户体验。 10分钟 7分钟 自主学习 8分钟 练习训练 · 给定一些网页布局任务，要求学生使用CSS控制行内元素的布局。 · 提供一些选择题和填空题，以检验学生对行内元素掌握的程度。 12分钟 布置作业 · 设计一个简单的网页布局，要求使用至少三个行内元素。 · 编写相应的HTML和CSS代码，并在本地浏览器中测试效果。 1分钟 总结回顾 · 回顾行内元素的重要性和布局控制方法。 · 总结本节课学习的关键点和易错点。 · 鼓励学生在课后继续探索和学习相关的CSS布局知识。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$