3.6.11-html中text-indent（首行缩进）（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 html中text-indent（首行缩进） 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 知识与技能：使学生掌握HTML中text-indent属性的使用方法，了解首行缩进的作用及效果。 · 过程与方法：通过实例演示和习题练习，培养学生的实践操作能力和分析问题的能力。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. text-indent属性的概念及作用。 2. text-indent属性的取值及其效果。 教学难点 1. 如何根据实际需求设置合适的首行缩进值。 2. text-indent属性与其他布局属性的综合运用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过讲解text-indent属性的相关知识，使学生掌握其用法。 · 案例分析法：通过分析实例，让学生了解首行缩进的效果和应用场景。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课学习的HTML基本标签和CSS样式表的基本概念。 2. 展示一个简单的HTML页面，引导学生观察页面的首行缩进情况，引出本节课的主题。 2分钟 讲授新课 练习指导 text-indent属性的概念及作用： text-indent属性是CSS样式表中的一个属性，用于设置元素内首行文本的缩进量。它可以应用于块级元素（如段落、列表、标题等）和行内元素（如文本、图片等）。通过设置text-indent属性，可以实现文本在其所在容器中的首行缩进效果，使页面内容更加美观易读。 text-indent属性的取值及其效果： 1. 像素值（如“20px”）：设置首行缩进的具体像素值，正值表示向右缩进，负值表示向左缩进。 2. 百分比（如“2em”）：设置首行缩进的相对值，通常以元素的字体大小（em）为单位。正值表示向右缩进，负值表示向左缩进。 以下是一个使用text-indent属性的HTML和CSS示例： ```html <!DOCTYPE html> <html> <head><style> p.positive { text-indent: 20px; } p.negative { text-indent: -20px; } p.percentage { text-indent: 2em; } </style> </head> <body> <p class="positive">这是一个向右缩进20像素的段落。</p> <p class="negative">这是一个向左缩进20像素的段落。</p> <p class="percentage">这是一个相对于字体大小向右缩进2em的段落。</p> </body> </html> ``` 在这个示例中，我们为不同的段落设置了不同的text-indent属性值，实现了首行文本的向右缩进、向左缩进和相对缩进效果。通过观察这些效果，我们可以了解text-indent属性在实际应用中的用途和作用。 10分钟 7分钟 自主学习 8分钟 练习训练 在HTML页面中设置不同的text-indent属性值，观察并记录效果。 12分钟 布置作业 1. 完成课后习题练习。 2. 设计一个个人简介页面，要求使用合适的首行缩进量展示个人信息。 1分钟 总结回顾 1. text-indent属性的概念及作用。 2. text-indent属性的取值及其效果。 3. 如何根据实际需求设置合适的首行缩进 第 1 页，共 2 页 学科网（北京）股份有限公司 $$