3.6.10-html中text-align（水平对齐方式）（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 html中text-align（水平对齐方式） 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 知识与技能：使学生掌握HTML中text-align属性的使用方法，了解不同水平对齐方式的特点。 · 过程与方法：通过实例演示和习题练习，培养学生的实践操作能力和分析问题的能力。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. text-align属性的概念及作用。 2. text-align属性的取值及其效果。 教学难点 1. 如何根据实际需求选择合适的水平对齐方式。 2. text-align属性与其他布局属性的综合运用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 讲授法：通过讲解text-align属性的相关知识，使学生掌握其用法。 · 案例分析法：通过分析实例，让学生了解不同水平对齐方式的特点和应用场景。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课学习的HTML基本标签和CSS样式表的基本概念。 2. 展示一个简单的HTML页面，引导学生观察页面的水平对齐方式，引出本节课的主题。 2分钟 讲授新课 练习指导 text-align属性的概念及作用： text-align属性是CSS样式表中的一个属性，用于设置文本的水平对齐方式。它可以应用于块级元素（如段落、列表、标题等）和行内元素（如文本、图片等）。通过设置text-align属性，可以实现文本在其所在容器中的左对齐、右对齐、居中对齐和两端对齐等效果。 text-align属性的取值及其效果： 1. left（默认值）：文本左对齐。 2. right：文本右对齐。 3. center：文本居中对齐。 4. justify：文本两端对齐。 以下是一个使用text-align属性的HTML和CSS示例： ```html <!DOCTYPE html> <html> <head><style> p.left { text-align: left; } p.right { text-align: right; } p.center { text-align: center; } p.justify { text-align: justify; } </style> </head> <body> <p class="left">这是一个左对齐的段落。</p> <p class="right">这是一个右对齐的段落。</p> <p class="center">这是一个居中对齐的段落。</p> <p class="justify">这是一个两端对齐的段落。两端对齐是指文本的左右两侧都与容器的边缘对齐，而文本行之间的间距会自动调整以填充整个容器宽度。这种对齐方式常用于排版文章、报纸等需要呈现规整对齐效果的场景。</p> </body> </html> ``` 在这个示例中，我们为不同的段落设置了不同的text-align属性值，实现了文本的左对齐、右对齐、居中对齐和两端对齐效果。通过观察这些效果，我们可以了解text-align属性在实际应用中的用途和作用。 10分钟 7分钟 自主学习 8分钟 练习训练 在HTML页面中设置不同的text-align属性值，观察并记录效果。 12分钟 布置作业 1. 完成课后习题练习。 2. 设计一个个人简介页面，要求使用合适的水平对齐方式展示个人信息。 1分钟 总结回顾 1. text-align属性的概念及作用。 2. text-align属性的取值及其效果。 3. 如何根据实际需求选择合适的水平对齐方式。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$