3.6.1-font style字体风格（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 fontstyle（字体风格 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解HTML中font-style属性的基本用法。 · 学会使用font-style属性设置文本的字体风格。 · 掌握font-style属性与其他字体相关属性的组合使用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. font-style属性的基本用法。 2. 使用font-style属性设置文本的字体风格。 3. font-style属性与其他字体相关属性的组合使用。 教学难点 1. font-style属性的基本用法。 2. 使用font-style属性设置文本的字体风格。 3. font-style属性与其他字体相关属性的组合使用。 教学方法 · 实例演示法：通过演示具体的HTML代码实例，让学生了解font-style属性的用法。 · 实践操作法：让学生在实际操作中掌握font-style属性的设置和应用。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 展示一个简单的HTML页面，引导学生观察其中的字体风格。 2. 简要介绍HTML中font-style属性的概念及其在网页设计中的重要性。 2分钟 讲授新课 练习指导 `font-style` 属性用于设置文本的字体风格。它主要有三个值：`normal`、`italic` 和 `oblique`。 ### 基本用法 1. **normal**：默认值，表示文本使用正常的字体风格。 ```html <!DOCTYPE html> <html> <head><style> p { font-style: normal; } </style> </head> <body> <p>这段文本使用正常的字体风格。</p> </body> </html> ``` 2. **italic**：表示文本使用斜体字体风格。 ```html <!DOCTYPE html> <html> <head><style> p { font-style: italic; } </style> </head> <body> <p>这段文本使用斜体字体风格。</p> </body> </html> ``` 3. **oblique**：表示文本使用倾斜体字体风格。这种风格介于正常和斜体之间，但不如斜体那么强烈。 ```html <!DOCTYPE html> <html> <head><style> p { font-style: oblique; } </style> </head> <body> <p>这段文本使用倾斜体字体风格。</p> </body> </html> ``` ### 与其他字体相关属性的组合使用 `font-style` 属性通常与其他字体相关的属性一起使用，如 `font-family`、`font-size` 和 `font-weight`，以实现更丰富的文本样式。 ```html <!DOCTYPE html> <html> <head><style> p { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; } </style> </head> <body> <p>这段文本使用了 Arial 字体，18 像素大小，粗体，斜体风格。</p> </body> </html> ``` 在这个例子中，我们设置了 `font-family` 为 Arial 和备选字体为 sans-serif，`font-size` 为 18 像素，`font-weight` 为粗体，以及 `font-style` 为斜体。这样，文本将以指定的字体、大小、粗细和风格显示。 10分钟 7分钟 自主学习 8分钟 练习训练 · 在HTML文件中设置一段文本的字体风格为斜体，要求使用font-style属性。 · 为一个网页的标题设置特殊的字体风格，要求结合font-style属性和其他字体相关属性。 · 分析一个网站的字体设计风格，探讨其对用户体验的影响 12分钟 布置作业 1. 完成一个简单的个人博客网站的设计，要求运用所学的font-style属性进行排版。 2. 收集5个具有代表性的网页字体设计案例，分析其字体风格的特点和应用场景。 1分钟 总结回顾 · ont-style属性的基本用法。 · 使用font-style属性设置文本的字体风格。 · font-style属性与其他字体相关属性的组合使用。 · 根据设计需求选择合适的字体风格。 · 字体风格对网页整体设计的影响。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$