10.8.2-媒体查询（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 媒体查询 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： 1. 知识与技能：理解并掌握媒体查询（Media Queries）的基本概念、作用及使用方法。 2. 过程与方法：通过案例分析，让学生了解媒体查询在响应式设计中的应用，并学会解决实际问题。 3. 情感态度与价值观：培养学生的自主学习能力、创新思维和解决问题的能力，激发学生对前端开发的兴趣。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 媒体查询的基本概念和作用。 2. 媒体查询的使用方法及常见媒体类型。 教学难点 如何根据实际需求编写合适的媒体查询，以及如何处理不同设备上的媒体查询问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解媒体查询的应用场景和效果。 · 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾响应式设计的概念和方法。 2. 介绍媒体查询的概念及其在响应式设计中的作用。 2分钟 讲授新课 练习指导 媒体查询（Media Queries）是一种CSS技术，用于根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式规则。以下是关于媒体查询的基本概念和作用以及使用方法及常见媒体类型的详细介绍： 一、媒体查询的基本概念和作用 1. 媒体查询是一种CSS技术，用于根据不同的设备特性（如屏幕宽度、分辨率等）应用不同的样式规则。 2. 通过使用媒体查询，可以实现响应式设计，使网页在不同设备上的显示效果更加友好。 二、媒体查询的使用方法及常见媒体类型 1. 使用`@media`规则编写媒体查询：`@media screen and (max-width: 768px) {...}`。 2. 常见媒体类型： - `all`：适用于所有设备。 - `print`：适用于打印机。 - `screen`：适用于屏幕显示器。 - `speech`：适用于语音合成器。 - `tv`：适用于电视设备。 - `projection`：适用于投影设备。 - `handheld`：适用于手持设备。 - `braille`：适用于盲文设备。 - `embossed`：适用于凸字设备。 - `tty`：适用于固定宽度的字符网格设备。 3. 媒体查询条件： - `min-width`：设置最小宽度，例如`(min-width: 768px)`表示屏幕宽度大于等于768px时应用样式规则。 - `max-width`：设置最大宽度，例如`(max-width: 768px)`表示屏幕宽度小于等于768px时应用样式规则。 - `min-height`：设置最小高度，例如`(min-height: 600px)`表示屏幕高度大于等于600px时应用样式规则。 - `max-height`：设置最大高度，例如`(max-height: 600px)`表示屏幕高度小于等于600px时应用样式规则。 - `resolution`：设置设备分辨率，例如`(resolution: 300dpi)`表示设备分辨率为300dpi时应用样式规则。 通过使用媒体查询，可以实现更丰富的响应式设计效果。在实际应用中，可以根据需求灵活调整媒体查询条件，以实现更优的网页显示效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 编写一个媒体查询，使网页在屏幕宽度小于768px时显示不同的样式。 2. 分析不同设备上媒体查询的效果，并进行调整。 12分钟 布置作业 1. 完成课后习题练习。 2. 在自己的项目中尝试使用媒体查询实现响应式设计。 1分钟 总结回顾 1. 媒体查询的基本概念和作用。 2. 媒体查询的使用方法及常见媒体类型。 3. 如何根据实际需求编写合适的媒体查询，以及处理不同设备上的媒体查询问题。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$