资源简介

课题 网页布局( 三 ）
课时 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．设置布局视口 【教师】根据教材步骤演示如何设置布局视口 在网页文档的头部标签中添加标签，可以重新设置移动端的布局视口。使用Dreamweaver CC可以直接添加该标签，将鼠标指针置于标签中，在“插入”面板中单击“META”按钮，打开“META”对话框；然后在“属性”下拉列表中选择“名称”选项，在“值”文本框中输入内容“viewport”，在“内容”文本框中输入“width=device-width, initial-scale-1.0”；最后单击“确定”按钮。 添加标签后，文档窗口自动生成该标签的代码。 （详见教材） 【学生】观察、记录、理解 【教师】展示网页界面，帮助学习理解 name属性在“值”文本框中设置，其值viewport表示该标签用于设置布局视口；content属性在“内容”文本框中设置，用于设置布局视口的相关属性，常用的属性及说明如下。 （1）width用于设置布局视口的宽度，属性值device-width表示布局视口宽度等于当前移动端屏幕宽度（即理想视口）。 （2）user-scalable用于设置页面能否手动缩放，属性值yes是默认值，表示可以缩放；no表示不可缩放。 （3）initial-scale用于设置屏幕宽度与视口宽度之间的缩放比例，属性值通常设置为1，表示原大小。 【课堂互动】教师提出以下问题： 什么是刘海屏？刘海屏是如何发展起来的？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 刘海屏一词最早来源于2017年9月苹果公司发布的iPhone X手机，iPhone X为实现全面屏将前置摄像头、听筒等元件放置在了屏幕上方的中心位置，因其形似刘海儿而得名。其后发布的安卓手机也纷纷效仿，刘海屏逐渐流行起来。 二、媒体查询 【教师】展示媒体查询设置对话框，帮助学习理解 媒体查询可以根据设备的特性，如屏幕宽度、高度、方向（横屏或竖屏）等，为不同的媒体类型或设备设置不同的样式，从而实现响应式布局。 (详见教材) 【教师】演示使用Dreamweaver CC定义媒体查询 使用Dreamweaver CC可以直接在样式表中定义媒体查询，打开“CSS设计器”面板，单击“媒体查询”名称前的加号按钮，打开“定义媒体查询”对话框；然后单击“条件”设置区中左侧的下拉列表，选择“max-width”选项，并在其后出现的文本框中输入数值“768”，在单位下拉列表中选择“px”选项；接着“代码”区域中显示媒体查询的代码；最后单击“确定”按钮 其中，“条件”设置区中左侧的下拉列表中常用的选项有max-width，表示显示区域（如浏览器窗口）最大宽度；min-width表示显示区域（如浏览器窗口）的最小宽度。如果想要查询多个条件，可以单击右侧的加号按钮添加第二条查询条件。 （详见教材） 【学生】观察、记录、理解 【教师】演示使用使用媒体查询为“调查问卷”页面构建响应式布局 （1）在Dreamweaver CC中打开本书配套素材“项目七”→“ex11.html”网页文档，按“F12”键进行预览。 （2）设置布局视口。将鼠标指针置于标签中，打开“插入”面板，单击“META”按钮，打开“META”对话框；然后在“属性”下拉列表中选择“名称”选项，在“值”文本框中输入内容“viewport”，在“内容”文本框中输入“width=device-width,initial-scale-1.0”；最后单击“确定”按钮。 （3）定义媒体查询。 （4）在“@媒体”窗格中选择媒体特性“(max-width:375 px)”，然后在下方添加选择器并设置属性。 （5）添加label[for="ge_name"]选择器。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 如何查看页面移动端显示效果？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 查看页面移动端显示效果的方法为，在浏览器中按“F12”键，打开开发者工具窗格，然后单击窗格左上角的移动端显示按钮 ，进入移动端显示状态，在页面显示区的上方单击最左侧的下拉列表，可以选择移动端的尺寸，一般选择“iPhone X”选项。 【学生】聆听、思考、记忆、实际操作 通过讲解，让学生了解视口和媒体查询
第二节课
任务实施
（25 min） 【教师】演示使用Dreamweaver CC为“爱看视频网”主页构建响应式布局的操作 （1）打开本书配套素材“项目七”→“任务三”文件夹，将其中的“ilook.ste”站点附加到Dreamweaver CC中。如已创建站点，可用本书配套素材“项目七”→“任务三”→“ilook”文件夹中的文件替换本地磁盘中站点文件夹中的文件。 打开“index.html”网页文档，按“F12”键在浏览器中预览。再次按“F12”键，打开浏览器的开发者工具窗格，单击窗格左上角的移动端显示按钮；在页面显示区上方最左侧的下拉列表中选择“iPhone X”选项，查看页面在移动端的显示效果。 （2）定义两个媒体查询，媒体特性分别是最大显示区域宽度为768像素与最小显示区域宽度为2000像素。然后分别为满足这两种媒体特性的设备设置样式。 （3）定义媒体查询。 （4）在“@媒体”窗格中选择媒体特性“(max-width:375 px)”，然后在下方添加选择器并设置属性。 （5）添加label[for="ge_name"]选择器，并进行设计 （详见教材） 【学生】观察、记录、理解，上机操作 【教师】巡堂指导，及时解决学生的问题 通过任务实施，让学生们主动参与学习，熟悉使用Dreamweaver CC进行网页响应式布局的步骤
实践探索
（15 min） 【教师】组织学生对”图书交易网“的主页进行布局 【学生】参照任务实施的步骤上机操作 【教师】巡堂指导，及时解决学生的问题 通过实践探索，使学生进一步巩固所学知识，了解更多关于网页布局的知识
课堂小结
（3 min） 【教师】简要总结本节课的要点 本节课学习了视口和媒体查询的相关知识，并通过实践练习掌握了如何对网页设置响应式布局。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC进行网页响应式布局的操作。 【学生】总结回顾知识点 总结知识点，巩固印象
作业布置
（2 min） 【教师】布置课后作业 （1）完成相关课后习题。 （2）查阅资料，举例分析几种网页布局的适用范围。 【学生】完成课后任务 延展知识面，巩固所学知识
教学反思 在这节课中学生能在互动环节深入沟通，效果不错。教师多与学生进行深入的沟通和交流，可以发现学生学习中存在的问题并及时纠正，使其掌握科学有效的学习方法，提高学习的质量和效率。

展开更多......

收起↑