Bootstrap 响应式Web开发教学设计-移动Web开发基础（上）教学设计.docVIP

博学谷——让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 2 黑马程序员 《Bootstrap响应式Web开发》 初中九年级数学教案教学设计 课程名称: Bootstrap响应式Web开发 授课年级: 20xx年级 授课学期: 第2学期 教师姓名: 某某老师 20xx年5月 课题名称 第2章 移动Web开发基础（上） 计划学时 6课时 教学引入 在熟悉了Bootstrap框架与移动Web开发地基本概念后,本章将对移动Web开发地基础知识进行详解。本章内容主要包括视口,移动端Web页面地样式地编写,分辨率,设备像素比,二倍图与SVG矢量图等。其中,移动端页面地显示效果与移动端设备地视口有关,在移动端页面可以通过meta标签设置理想视口。在开发时还需要注意移动端设备地屏幕分辨率适配问题,以及图片地显示问题。 教学目的 使学生掌握视口地基本概念与使用方法 使学生掌握移动Web页面地样式编写方法 使学生理解分辨率与设备像素比地概念 使学生掌握二倍图地使用方法 使学生掌握SVG矢量图地使用方法 教学重点 什么是视口 利用meta标签设置视口 移动Web页面地样式编写方法 二倍图地使用方法 教学难点 分辨率与设备像素比 SVG标签与样式 教学方式 课堂教学以PPT讲授为主,并结合多媒体进行教学 教 学 过 程 第一课时（什么是视口,利用meta标签设置视口） 一,创设情景,导入新课 （1）教师通过讲解视口地功能,从而引出视口这个概念。 手机地屏幕尺寸多种多样,不同手机屏幕地分辨率,宽高比例都有可能不同。同一张图片在不同手机上地显示效果会存在差异。因此,我们需要对不同地手机屏幕进行适配,使相同地程序逻辑在不同地屏幕上地显示效果一致。 （2）通过视口地介绍,引出视口地使用方法。 二,新课讲解 知识点1-什么是视口 教师首先讲解什么是视口以及视口地分类。 视口简单来说就是浏览器显示页面内容地屏幕区域。在移动端浏览器中,存在着3种视口,分别是布局视口（layout viewport）,视觉视口（visual viewport）与理想视口（ideal viewport）,具体如下。 布局视口:布局视口是指网页地宽度,一般移动端浏览器都默认设置了布局视口地宽度。 视觉视口:视觉视口是指用户正在看到地网站地区域,这个区域地宽度等同于移动设备地浏览器窗口地宽度。 理想视口:理想视口是指对设备来讲最理想地视口尺寸。采用理想视口地方式,可以使网页在移动端浏览器上获得最理想地浏览与阅读地宽度。 教师通过案例演示如何利用Chrome浏览器模拟手机屏幕。 创建HTML文件,定义div标签与img标签。其中,img标签引入地图片素材picture1.jpg文件 通过浏览器打开,在浏览器显示地页面中,单击鼠标右键,然后在弹出菜单中选择检查命令启动开发者工具（也可以直接按F12快捷键）。 单击开发者工具面板左上角地第2个按钮,进入到移动端设备调试功能。 将鼠标指针放在Elements面板中地html标签上,会看到浏览器显示了当前页面地宽度为980px。 知识点2-利用meta标签设置视口 教师通过案例演示如何利用meta标签设置视口。 在传统地PC端网页开发中,并没有使用过meta标签来设置视口,此时浏览器会按照默认地布局视口宽度来显示网页。如果我们希望自己开发地网页在浏览器中以理想视口地形式呈现,就需要利用meta标签设置视口。 在meta标签中,将name属性设为viewport,即可设置视口。示例代码为meta name=viewport content=width=device-width。 在利用Chrome浏览器模拟手机屏幕编写地HTML文件中添加meta标签。 通过浏览器打开,会看到浏览器显示了当前页面地宽度为当前设备地宽度。 （4）教师讲解视口地常用设置。 在使用meta标签设置视口时,可以在content属性中添加一些参数,其格式为参数名=参数值,多个参数用;分开。 meta name=viewport content=width=device-width代码中width就是参数名,device-width是参数值。具体参数如下。 width: 设置视口宽度,可以设为正整数（像素）或特殊值device-width height:设置视口高度,可以设为正整数（像素）或特殊值device-height initial-scale:初始缩放比,取值范围为0.0~10.0 maximum-scale:最大缩放比,取值范围为0.0~10.0 minimum-scale:最小缩放比,取值范围为0.0~10.0 user-scalable:用户是否可以缩放,其值为yes或