第17课网页布局( 三 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页布局( 三 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）了解什么是视口 （2）能够使用Dreamweaver CC进行媒体查询 （3）能够使用Dreamweaver CC为网页构建响应式布局 思政育人目标： （1）学习网页布局，提升网页设计与制作的能力。 （2）了解开源精神，懂得互利共赢。 教学重难点 教学重点：视口 教学难点：使用Dreamweaver CC为网页构建响应式布局 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（33 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页的响应式布局 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （10 min） · 【教师】提出以下问题： 根据教材提示，说一说响应式布局有哪些作用？ · 【学生】思考、举手发言 随着智能手机的普及，移动互联网的发展，使用移动端访问互联网服务的人数已远超使用PC端的人数，所以在制作网页时不可避免地要考虑移动端的适配情况，这时就需要制作响应式布局。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （33 min） · 【教师】通过学生的发言，引入新的知识点，介绍视口和媒体查询 一、视口 【教师】展示浏览器的首页，帮助学习理解 在PC端，视口是指浏览器的可视区域，视口宽度与浏览器窗口宽度一致。在CSS标准文档中，视口也称为初始包含块，它的宽度是所有CSS百分比宽度推算的根源，也为网页布局限制了最大宽度。 移动端浏览器窗口的宽度受到设备屏幕的影响，一般为300 px左右，而大多数PC端网页的宽度都在800 px以上，如果仍然以浏览器窗口宽度作为视口宽度，移动端将无法正常显示页面内容。 （详见教材） 【课堂互动】教师提出以下问题： 我们在制作网页中所用的屏幕像素和日常生活中的像素有哪些区别？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 移动端屏幕宽度一般为300 px左右，指的是逻辑像素，也就是设置样式时常用的单位。生活中常说的手机屏幕像素是指物理像素，物理像素是手机屏幕上的最小显示单位，像素大小是固定不变的。例如，iPhone X手机的物理像素为1125×2436，而因为其应用了视网膜三倍屏幕，以3×3个物理像素显示一个逻辑像素的图像，所以它的逻辑像素为375×812。 1．布局视口 【教师】提出以下问题： 什么是布局视口？ 【学生】聆听、思考、举手发言 在早期PC端与移动端网页共用一套代码时，为了能够在移动端正常浏览PC端网页，移动设备的浏览器都默认设置了一个虚拟的布局视口，IOS和Android基本都将这个视口的宽度设置为980像素。这样PC端的网页基本都能在移动端上呈现，只是元素看上去小很多，可以手动缩放网页查看局部效果。 2．视觉视口 【教师】提出以下问题： 什么是视觉视口？ 【学生】聆听、思考、理解 视觉视口是用户在屏幕上所能看到的网页区域，当用户放大网页时，屏幕上能看到的网页区域变小，也就相当于视觉视口变小。同理，当用户缩小网页时，屏幕上能看到的网页区域变大，也就相当于视觉视口变大。 3．理想视口 【教师】展示设置理想视口后的移动端页面效果，帮助学习理解 当布局视口的宽度等于移动设备的屏幕宽度时，称其为理想视口。在理想视口下，用户不用缩放就能看到网页的最佳显示效果。 【教师】提出以下问题： 根据教材“青春风采”部分，查阅资料，说一说你有什么感想？ 【学生】阅读、思考、举手发言 4．设置布局视口 【教师】根据教材步骤演示如何设置布局视口 在网页文档的头部标签中添加<meta>标签，可以重新设置移动端的布局视口。使用Dreamweaver CC可以直接添加该标签，将鼠标指针置于<head>标签中，在“插入”面板中单击“META”按钮，打开“META”对话框；然后在“属性”下拉列表中选择“名称”选项，在“值”文本框中输入内容“viewport”，在“内容”文本框中输入“width=device-width, initial-scale-1.0”；最后单击“确定”