10.8.1-视口（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 视口 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： 1. 知识与技能：理解并掌握视口（viewport）的基本概念、作用及设置方法。 2. 过程与方法：通过案例分析，让学生了解视口在网页布局中的应用，并学会解决实际问题。 3. 情感态度与价值观：培养学生的自主学习能力、创新思维和解决问题的能力，激发学生对前端开发的兴趣。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 视口的基本概念和作用。 2. 视口的设置方法及相关属性。 教学难点 如何根据实际需求设置合适的视口，以及如何处理不同设备上的视口问题。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解视口的应用场景和效果。 · 实践操作法：让学生亲自动手操作，加深对知识点的理解和掌握。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾网页布局的基本概念和方法。 2. 介绍视口的概念及其在网页布局中的作用。 2分钟 讲授新课 练习指导 视口（viewport）是指用户在浏览器中可见的页面区域，用于控制页面在不同设备上的显示效果。以下是关于视口的基本概念和作用以及设置方法及相关属性的详细介绍： 一、视口的基本概念和作用 1. 视口是用户在浏览器中可见的页面区域，用于控制页面在不同设备上的显示效果。 2. 通过设置视口，可以实现响应式网页设计，使网页在不同设备上的显示效果更加友好。 二、视口的设置方法及相关属性 1. 使用`<meta>`标签设置视口：`<meta name="viewport" content="width=device-width, initial-scale=1.0">`。 2. 相关属性： - `width=device-width`：设置视口宽度等于设备宽度，使网页宽度自适应设备宽度。 - `initial-scale=1.0`：设置初始缩放比例为1，使网页在加载时不进行缩放。 - `minimum-scale`：设置最小缩放比例，例如`minimum-scale=0.5`表示用户可以将网页缩放到原始大小的50%。 - `maximum-scale`：设置最大缩放比例，例如`maximum-scale=2.0`表示用户可以将网页放大到原始大小的200%。 - `user-scalable`：设置用户是否可以缩放，例如`user-scalable=no`表示用户不能缩放网页。 通过设置不同的视口属性值，可以实现更丰富的响应式网页设计效果。在实际应用中，可以根据需求灵活调整视口属性值，以实现更优的网页显示效果。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 为一个响应式网页设置合适的视口。 2. 分析不同设备上视口设置的效果，并进行调整。 12分钟 布置作业 1. 完成课后习题练习。 2. 在自己的项目中尝试设置合适的视口。 1分钟 总结回顾 1. 视口的基本概念和作用。 2. 视口的设置方法及相关属性。 3. 如何根据实际需求设置合适的视口，以及处理不同设备上的视口问题。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$