3.6.9-html中text-decoration（文本装饰）（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 html中text-decoration（文本装饰） 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握text-decoration属性及其取值。 · 学会使用text-decoration属性设置文本的装饰效果，如下划线、删除线等。 · 能够通过实际案例应用text-decoration属性进行文本装饰。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. text-decoration属性的基本用法。 2. 设置不同文本装饰效果的实例操作。 教学难点 1. text-decoration属性与其他文本样式属性的综合运用。 2. 如何根据实际需求选择合适的文本装饰效果。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际案例，引导学生理解text-decoration属性的应用。 · 实践操作法：让学生亲自动手操作，巩固所学知识。 · 小组讨论法：鼓励学生分组讨论，共同解决问题 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课学习的HTML基本标签和CSS样式基础知识。 2. 展示几个具有文本装饰效果的网页实例，激发学生的学习兴趣。 2分钟 讲授新课 练习指导 `text-decoration` 属性用于设置文本的装饰效果，如下划线、删除线等。它可以应用于块级元素和行内元素。以下是一些常见的取值： 1. `none`：默认值，表示没有文本装饰。 2. `underline`：给文本添加下划线。 3. `overline`：给文本添加上划线。 4. `line-through`：给文本添加删除线。 要使用 `text-decoration` 属性，你需要在 CSS 规则中设置该属性的值。以下是一些实际案例： **案例1：为段落添加下划线** HTML 代码： ```html <!DOCTYPE html> <html> <head><style> p { text-decoration: underline; } </style> </head> <body> <p>这是一个带有下划线的段落。</p> </body> </html> ``` **案例2：为链接添加删除线** HTML 代码： ```html <!DOCTYPE html> <html> <head><style> a { text-decoration: line-through; } </style> </head> <body> <a href="https://www.example.com">这是一个带有删除线的链接。</a> </body> </html> ``` **案例3：为标题添加上划线** HTML 代码： ```html <!DOCTYPE html> <html> <head><style> h1 { text-decoration: overline; } </style> </head> <body> <h1>这是一个带有上划线的标题。</h1> </body> </html> ``` 通过这些案例，你可以学会如何使用 `text-decoration` 属性设置文本的装饰效果。当然，你还可以根据需要组合使用这些取值，为文本创建更复杂的装饰效果。例如，你可以同时为文本添加下划线和删除线： ```css p { text-decoration: underline line-through; } ``` 10分钟 7分钟 自主学习 8分钟 练习训练 1. 完成课本上的习题，巩固所学知识。 2. 在自己的网页项目中尝试运用text-decoration属性进行文本装饰。 12分钟 布置作业 1. 完成一个包含至少三种文本装饰效果的网页作品。 2. 思考如何根据网页内容和设计风格选择合适的文本装饰效果。 1分钟 总结回顾 1. text-decoration属性的基本用法和取值。 2. 文本装饰效果的实际应用案例。 3. text-decoration属性与其他文本样式属性的综合运用技巧。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$