3.6.8-html中color（文本颜色）（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 html中color（文本颜色） 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解HTML中color属性的基本概念。 · 学会使用color属性设置文本的颜色。 · 掌握color属性与其他样式属性的组合使用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. color属性的基本用法。 2. 使用color属性设置文本的颜色。 3. color属性与其他样式属性的组合使用。 教学难点 1. 如何根据设计需求选择合适的文本颜色。 2. 文本颜色对网页整体设计的影响。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 实例演示法：通过演示具体的HTML代码实例，让学生了解color属性的用法。 · 实践操作法：让学生在实际操作中掌握color属性的设置和应用。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 展示一个简单的HTML页面，引导学生观察其中的文本颜色。 2. 简要介绍HTML中color属性的概念及其在网页设计中的重要性。 2分钟 讲授新课 练习指导 **HTML中color属性的基本概念** `color`属性用于设置文本的颜色。它可以改变文本的外观，从而使网页更具个性化和视觉吸引力。 **使用color属性设置文本的颜色** 要使用`color`属性设置文本的颜色，你需要在CSS样式中指定该属性的值。以下是一些常见的`color`属性值： - 颜色名称：如"red"（红色）、"green"（绿色）、"blue"（蓝色）等。 - 十六进制颜色代码：如"#FF0000"（红色）、"#00FF00"（绿色）、"#0000FF"（蓝色）等。 - RGB颜色值：如"rgb(255, 0, 0)"（红色）、"rgb(0, 255, 0)"（绿色）、"rgb(0, 0, 255)"（蓝色）等。 - RGBA颜色值：如"rgba(255, 0, 0, 1)"（红色，不透明）、"rgba(0, 255, 0, 0.5)"（绿色，半透明）等。 示例： ```html <!DOCTYPE html> <html> <head><style> p.red-text { color: red; } p.green-text { color: #00FF00; } p.blue-text { color: rgb(0, 0, 255); } p.transparent-text { color: rgba(255, 0, 0, 0.5); } </style> </head> <body> <p class="red-text">这是红色文本。</p> <p class="green-text">这是绿色文本。</p> <p class="blue-text">这是蓝色文本。</p> <p class="transparent-text">这是半透明红色文本。</p> </body> </html> ``` 在这个示例中，我们设置了不同颜色的文本。这种综合设置可以帮助你创建具有个性化设计的网页文本。 **color属性与其他样式属性的组合使用** `color`属性可以与其他样式属性一起使用，以实现更丰富的文本样式。例如，你可以结合`font-family`、`font-size`、`font-weight`、`font-style`和`line-height`等属性来设置文本的字体、字号大小、粗细、风格和行高，并使用`color`属性设置文本颜色。 示例： ```html <!DOCTYPE html> <html> <head><style> p.custom-text { font-family: "Arial", sans-serif; font-size: 24px; font-weight: bold; font-style: italic; line-height: 1.5; color: red; } </style> </head> <body> <p class="custom-text">这是一个自定义样式的红色文本，包括字体、字号大小、粗细、风格和行高。</p> </body> </html> ``` 在这个示例中，我们使用了`font-family`、`font-size`、`font-weight`、`font-style`、`line-height`和`color`等属性来设置文本的字体、字号大小、粗细、风格、行高和颜色。这种组合使用可以帮助你创建具有个性化设计的网页文本。 10分钟 7分钟 自主学习 8分钟 练习训练 · 在HTML文件中设置一段文本的颜色为红色，要求使用color属性。 · 为一个网页的标题设置特殊的文本颜色，要求结合color属性和其他样式属性。 12分钟 布置作业 1. 完成一个简单的个人博客网站的设计，要求运用所学的color属性进行排版。 2. 收集5个具有代表性的网页文本颜色设计案例，分析其文本颜色的特点和应用场景。 1分钟 总结回顾 · color属性的基本用法。 · 使用color属性设置文本的颜色。 · color属性与其他样式属性的组合使用。 · 根据设计需求选择合适的文本颜色。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$