《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第18课 适配移动端的设置_第1页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第18课 适配移动端的设置_第2页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第18课 适配移动端的设置_第3页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第18课 适配移动端的设置_第4页
《HTML5 CSS3项目开发案例教程》（袁明兰）770-5教案 第18课 适配移动端的设置_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第课适配移动端的设置第课适配移动端的设置的基基本本18821PAGE818211821适配移动端的设置第课PAGE918212适配移动端的设置第18212适配移动端的设置第课PAGE1

课题适配移动端的设置课时2课时（90min）教学目标知识技能目标：（1）了解视口的概念和类型（2）掌握使用网页适配移动端的方法（3）学习网页适配移动端的操作流程思政育人目标：通过本节课的学习，培养学生发散式的思维方式，并使学生在模仿中不断的提高自己的创新意识教学重难点教学重点：视口的概念和类型、使用网页适配移动端的方法教学难点：网页适配移动端的操作流程教学方法讲授法、启发法、问答法、演示法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材、手机、平板教学设计第1节课：考勤（2min）→导入新知（4min）→知识讲解（24min）→课堂练习（15min）第2节课：案例分析（4min）→知识讲解（23min）→课堂练习（12min）→课堂小结（2min）→作业布置（4min）教学过程主要教学内容及步骤设计意图第一节课考勤

（2min）【教师】清点上课人数，记录好考勤【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况导入新知

（4min）【教师】概述适配移动端设置的原因，引出新知识点随着智能手机的普及，移动互联网的发展，使用移动端访问互联网服务的人数已远超PC端，所以在制作网页时不可避免地要考虑移动端的适配情况。本节课将首先介绍适配移动端设置的相关知识，然后通过设置“反馈意见”页面，练习使网页适配移动端的方法【学生】聆听、思考通过对知识点的概述，让学生主动思考如何设配移动端，激发学生的求知欲知识讲解

（24min）【教师】讲解视口的概念、类型和设置方法视口在PC端，视口是指浏览器的可视区域，视口宽度与浏览器窗口宽度一致。在CSS标准文档中，视口也称为初始包含块，它的宽度是所有CSS百分比宽度推算的根源，也为网页布局限制了最大宽度。移动端浏览器的宽度受到屏幕设备的影响，一般为300px左右，而大多数PC端网页的宽度都在800px以上，如果仍然以浏览器窗口作为视口，将无法正常显示页面内容。为使移动端视口与浏览器窗口不再关联，引入了布局视口（layoutviewport）、视觉视口（visualviewport）与理想视口（idealviewport）的概念，下面分别介绍。1．布局视口在早期PC端与移动端网页共用一套代码时，为了能够在移动端正常浏览PC端网页，移动设备的浏览器都默认设置了一个虚拟的布局视口，IOS和Android基本都将这个视口的宽度设置为980px。这样PC端的网页基本都能在手机上呈现，只是元素看上去小很多，可以手动缩放网页查看局部效果（本节中各示意图皆以文旌财经网校官网的页面为例）。2．视觉视口视觉视口是用户在屏幕上所能够看到的网页区域，当用户放大网页时，屏幕上能看到的网页区域变小，也就相当于视觉视口变小，如图9-14所示。同理，当用户缩小网页时，屏幕上能看到的网页区域变大，也就相当于视觉视口变大。【学生】聆听、思考、理解【教师】多媒体演示参考代码一般设置移动端网页视口的代码为：<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/>上述代码的含义为设置视口宽度为屏幕宽度、无法缩放（页面为原大小）且适配IOS系统的刘海屏手机。【学生】观看参考代码。思考内容【教师】讲解参考代码在网页文档的头部标签中添加<meta>标签，可以重新设置移动端的布局视口，具体格式为：<metaname="viewport"content="属性=值,……"/>其中，name属性值为viewport，表示该标签用于设置布局视口；content属性用于设置布局视口的相关属性，如宽度与缩放比例等，常用属性及说明如下。（1）width用于设置布局视口的宽度，默认值为980px，值为device-width表示布局视口宽度等于当前移动端屏幕宽度（即理想视口）。（2）user-scalable用于设置页面能否手动缩放，属性值yes是默认值，表示可以缩放；no表示不可缩放。（3）initial-scale用于设置屏幕宽度与视口宽度之间的缩放比例，属性值通常设置为1，表示原大小。（4）maximum-scale用于设置缩放的最大比例，属性值通常设置为1，表示原大小。（5）minimum-scale用于设置缩放的最小比例，属性值通常设置为1，表示原大小。（6）viewport-fit。viewport-fit用于适配iPhoneX及其他型号的刘海屏iPhone手机（IOS系统），属性值cover表示将页面内容填充至顶部。【学生】聆听、思考、理解【教师】讲述理想视口理想视口当布局视口的宽度等于移动设备的屏幕宽度时，称其为理想视口。在理想视口下，用户不用缩放就能看到网页的最佳显示效果。【教师】演示【例9-5】操作流程，实现图9-16效果设置用户注册表单的视口，使其在移动设备中正常浏览，页面效果如图9-16所示。图9-16设置视口后的移动端页面效果【学生】聆听、思考、理解通过讲解知识点，让学生了解视口的概念、类型和设置方法课堂练习

（15min）【教师】布置知识抢答的内容布置用户登录的视口练习，用户登录界面包括账号、密码、确认密码、验证码、忘记密码，对其进行正确的部署，使其整洁美观【学生】完成课堂练习【教师】统计小组得分，公布分数【学生】思考、反思回答错误的题目【教师】公布参考答案【学生】修改内容，纠正错误通过课堂练习，巩固所学知识，并将所学知识与实际相结合第二节课问题导入

（4min）【教师】提出问题，引出新知识点在实际的网页制作中，仅设置视口并不能使网页适配移动设备，还需要进行其他设置或采用其他方式，使网页能够在移动端正常显示，那么如何对其进行操作呢【学生】聆听、思考、发言【教师】总结知识点这就要求在视口的基础上，能让设备对网页的需求进行响应，不仅方便程序员调试代码，更给用户友好提示，给用户良好的使用体验通过问答的方式，激发学生对响应式适配移动设备的探索欲知识讲解

（23min）【教师】讲述响应式适配移动设备响应式适配移动设备在实际的网页制作中，仅设置视口并不能使网页适配移动设备，还需要进行其他设置或采用其他方式，使网页能够在移动端正常显示。下面简单介绍最常用的两种方法。1．使用百分比设置元素宽度对于一些简单的网页来说，可以通过将其中元素的宽度设置为百分比来适应用移动设备。因为这样一来，当屏幕尺寸发生变化时，各元素的大小也能够同步等比变化。2．设置多个样式表文件在项目6中提到过媒体查询的概念，使用媒体查询可以让不同宽度的浏览器窗口应用不同的页面样式，同样地，也可以让不同宽度的移动设备应用不同的样式。在实际的网页制作中，通常会根据不同的屏幕宽度创建不同的样式表文件，然后在网页文档的头部标签中添加以下代码，使网页通过媒体查询功能根据屏幕宽度响应式地加载不同的样式表文件。<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:300px)"href="css300.css"/>其中，media用于设置媒体查询的条件。这段代码的含义是当最大屏幕宽度为300px时，加载名为“CSS300.css”的样式表文件。【学生】聆听、思考、理解【教师】演示【例9-6】操作流程，实现图9-18效果制作可响应式适配移动端的大学生职业规划调查问卷页面。图9-18“survey.html”适配后的页面效果（1）打开本书配套素材“项目9”→“survey.html”文档，在<head>标签中添加以下代码，设置页面的视口<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/>（2）继续在<head>标签中添加以下代码，设置最大屏幕宽度为375px时加载“msurvey.css”文档。<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:375px)"href="msurvey.css"/>（3）“survey.html”文档的存储目录下创建“msurvey.css”文档，在其中输入以下代码，设置移动端页面的样式。body{width:98%;padding:0;margin:01%;}/*设置页面的宽度与内外边距，属性值使用百分比以适配移动端*/form.suv{width:98%;}/*设置移动端表单的宽度*/input[type="radio"]+label,input[type="checkbox"]+label{display:block;width:80%;}/*将移动端单选钮与复选框对应的提示信息转换为块级元素，并设置其宽度*/label[for="ge_name"]{text-indent:0;}/*去除移动端“姓名”提示信息的缩进*/input[type="text"]{height:20px;margin-bottom:10px;}/*设置移动端个人信息区域文本框的高度与下外边距*/.selfinput+span::after{content:"";display:block;height:0;}/*在移动端个人信息区域的“*”文本后添加一个没有内容的块级元素，并设置它的高度，使两个文本框分行显示*/【学生】观看参考代码【教师】讲述代码运行流程【学生】聆听、思考、记录通过讲解知识点，让学生进一步了解响应式适配移动设备的操作经验课堂练习

（12min）【教师】布置课堂练习内容使“反馈意见”页面适配移动端本课堂练习将通过设置“反馈意见”页面的视口和移动端样式等，练习使网页适配移动端的方法【教师】给予学生提示和帮助（1）在<head>标签中添加以下代码，设置页面的视口与可选择加载的样式表文件<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/><linkrel="stylesheet"type="text/css"media="screenand(max-device-width:375px)"href="feedback375.css"/><!--当屏幕最大宽度为375px时应用“feedback375.css”样式表文件-->（2）在“feedback.html”文档的存储目录下创建“feedback375.css”文档，在其中输入以下代码，设置移动端页面的样式#fb_m{width:100%;}/*设置移动端页面的宽度*/.userim,.fbim{line-height:40px;}/*设置移动端表单的行距*/#fb_mfieldset{text-indent:0;}.fbim>label{text-indent:0;}/*去除移动端表单对象分组与“具体内容”提示信息的缩进*/textarea{display:block;width:90%;margin:5pxauto;}/*将移动端的文本区域转换为块级元素，设置其宽度与外边距*/.inline_us,.inline_fb{display:block;height:1px;}/*将移动端中的span元素转换为块级元素，设置其高度，使表单控件分行显示*/input[type="file"]{width:60%;}/*设置移动端文件域的宽度*/【学生】完成课堂练习【教师】公布参考答案【学生】对比参考答案，修改内容利用练习法，让学生掌握响应式适配移动设备的使用方法课堂小结

（2min）【教师】简要总结本章的知识要点本节课学习了视口的概念和类型、使用网页适配移动端的方法，以及网页适配移动端的操作流程。希望同学们在课下多加练习，熟练掌握所学知识。【学生】总结回顾知识点总结知识点，巩

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论