《网页设计与制作案例教程（第2版） 》教案 第17课 网页布局（三）_第1页
《网页设计与制作案例教程（第2版） 》教案 第17课 网页布局（三）_第2页
《网页设计与制作案例教程（第2版） 》教案 第17课 网页布局（三）_第3页
《网页设计与制作案例教程（第2版） 》教案 第17课 网页布局（三）_第4页
《网页设计与制作案例教程（第2版） 》教案 第17课 网页布局（三）_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

17第17第课网页布局（三）（三）网页（三）网页布局第课17PAGE6PAGE6PAGE5PAGE517第17第课网页布局（三） 课题网页布局(三）课时2课时（90min）教学目标知识技能目标：（1）了解什么是视口（2）能够使用DreamweaverCC进行媒体查询（3）能够使用DreamweaverCC为网页构建响应式布局思政育人目标：（1）学习网页布局，提升网页设计与制作的能力。（2）了解开源精神，懂得互利共赢。教学重难点教学重点：视口教学难点：使用DreamweaverCC为网页构建响应式布局教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（min）第2节课：任务实施（min）

实践探索（min）

课堂小结（min）

作业布置（min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页的响应式布局【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（10min）【教师】提出以下问题：根据教材提示，说一说响应式布局有哪些作用？【学生】思考、举手发言随着智能手机的普及，移动互联网的发展，使用移动端访问互联网服务的人数已远超使用PC端的人数，所以在制作网页时不可避免地要考虑移动端的适配情况，这时就需要制作响应式布局。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（33min）【教师】通过学生的发言，引入新的知识点，介绍视口和媒体查询一、视口【教师】展示浏览器的首页，帮助学习理解在PC端，视口是指浏览器的可视区域，视口宽度与浏览器窗口宽度一致。在CSS标准文档中，视口也称为初始包含块，它的宽度是所有CSS百分比宽度推算的根源，也为网页布局限制了最大宽度。移动端浏览器窗口的宽度受到设备屏幕的影响，一般为300px左右，而大多数PC端网页的宽度都在800px以上，如果仍然以浏览器窗口宽度作为视口宽度，移动端将无法正常显示页面内容。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结1．布局视口【教师】提出以下问题：什么是布局视口？【学生】聆听、思考、举手发言在早期PC端与移动端网页共用一套代码时，为了能够在移动端正常浏览PC端网页，移动设备的浏览器都默认设置了一个虚拟的布局视口，IOS和Android基本都将这个视口的宽度设置为980像素。这样PC端的网页基本都能在移动端上呈现，只是元素看上去小很多，可以手动缩放网页查看局部效果。2．视觉视口【教师】提出以下问题：什么是视觉视口？【学生】聆听、思考、理解视觉视口是用户在屏幕上所能看到的网页区域，当用户放大网页时，屏幕上能看到的网页区域变小，也就相当于视觉视口变小。同理，当用户缩小网页时，屏幕上能看到的网页区域变大，也就相当于视觉视口变大。3．理想视口【教师】展示设置理想视口后的移动端页面效果，帮助学习理解当布局视口的宽度等于移动设备的屏幕宽度时，称其为理想视口。在理想视口下，用户不用缩放就能看到网页的最佳显示效果。【教师】提出以下问题：根据教材“青春风采”部分，查阅资料，说一说你有什么感想？【学生】阅读、思考、举手发言4．设置布局视口【教师】根据教材步骤演示如何设置布局视口在网页文档的头部标签中添加<meta>标签，可以重新设置移动端的布局视口。使用DreamweaverCC可以直接添加该标签，将鼠标指针置于<head>标签中，在“插入”面板中单击“META”按钮，打开“META”对话框；然后在“属性”下拉列表中选择“名称”选项，在“值”文本框中输入内容“viewport”，在“内容”文本框中输入“width=device-width,initial-scale-1.0”；最后单击“确定”按钮。添加<meta>标签后，文档窗口自动生成该标签的代码。（详见教材）【学生】观察、记录、理解【教师】展示网页界面，帮助学习理解name属性在“值”文本框中设置，其值viewport表示该标签用于设置布局视口；content属性在“内容”文本框中设置，用于设置布局视口的相关属性，常用的属性及说明如下。（1）width用于设置布局视口的宽度，属性值device-width表示布局视口宽度等于当前移动端屏幕宽度（即理想视口）。（2）user-scalable用于设置页面能否手动缩放，属性值yes是默认值，表示可以缩放；no表示不可缩放。（3）表示原大小。【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、媒体查询【教师】展示媒体查询设置对话框，帮助学习理解媒体查询可以根据设备的特性，如屏幕宽度、高度、方向（横屏或竖屏）等，为不同的媒体类型或设备设置不同的样式，从而实现响应式布局。(详见教材)【教师】演示使用DreamweaverCC定义媒体查询使用DreamweaverCC可以直接在样式表中定义媒体查询，打开“CSS设计器”面板，单击“媒体查询”名称前的加号按钮，打开“定义媒体查询”对话框；然后单击“条件”设置区中左侧的下拉列表，选择“max-width”选项，并在其后出现的文本框中输入数值“768”，在单位下拉列表中选择“px”选项；接着“代码”区域中显示媒体查询的代码；最后单击“确定”按钮其中，“条件”设置区中左侧的下拉列表中常用的选项有max-width，表示显示区域（如浏览器窗口）最大宽度；min-width表示显示区域（如浏览器窗口）的最小宽度。如果想要查询多个条件，可以单击右侧的加号按钮添加第二条查询条件。（详见教材）【学生】观察、记录、理解【教师】演示使用使用媒体查询为“调查问卷”页面构建响应式布局（1）在DreamweaverCC中打开本书配套素材“项目七”→“ex11.html”网页文档，按“F12”键进行预览。（2）设置布局视口。将鼠标指针置于<head>标签中，打开“插入”面板，单击“META”按钮，打开“META”对话框；然后在“属性”下拉列表中选择“名称”选项，在“值”文本框中输入内容“viewport”，在“内容”文本框中输入“width=device-width,initial-scale-1.0”；最后单击“确定”按钮。（3）定义媒体查询。（4）在“@媒体”窗格中选择媒体特性“(max-width:375px)”，然后在下方添加选择器并设置属性。（5）添加label[for="ge_name"]选择器。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：如何查看页面移动端显示效果【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【学生】聆听、思考、记忆、实际操作通过讲解，让学生了解视口和媒体查询第二节课任务实施

（25min）【教师】演示使用DreamweaverCC为“爱看视频网”主页构建响应式布局的操作（1）打开本书配套素材“项目七”→“任务三”文件夹，将其中的“ilook.ste”站点附加到DreamweaverCC中。如已创建站点，可用本书配套素材“项目七”→“任务三”→“ilook”文件夹中的文件替换本地磁盘中站点文件夹中的文件。打开“index.html”网页文档，按“F12”键在浏览器中预览。再次按“F12”键，打开浏览器的开发者工具窗格，单击窗格左上角的移动端显示按钮；在页面显示区上方最左侧的下拉列表中选择“iPhoneX”选项，查看页面在移动端的显示效果。（2）定义两个媒体查询，媒体特性分别是最大显示区域宽度为768像素与最小显（3）定义媒体查询。（4）在“@媒体”窗格中选择媒体特性“(max-width:375px)”，然后在下方添加选择器并设置属性。（5）添加label[for="ge_name"]选择器，并进行设计（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用DreamweaverCC进行网页响应式布局的步骤实践探索

（15min）【教师】组织学生对”图书交易网“的主页进行布局【学生】参照任务实施的步骤上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页布局的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了视口和媒体查询的相关知识，并通过实践练习掌握了如何对网页设置响应式布局。希望大家在课下多加练习，熟练掌握利用DreamweaverCC进行网页响应式布

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

温馨提示

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

最新文档

评论

0/150

提交评论