基本信息

---

下载

文档摘要

---

第17课网页布局（三）

课题网页布局(三）

课时2课时（90min）

知识技能目标：

（1）了解什么是视口

（2）能够使用DreamweaverCC进行媒体查询

教学目标（3）能够使用DreamweaverCC为网页构建响应式布局

思政育人目标：

（1）学习网页布局，提升网页设计与制作的能力。

（2）了解开源精神，懂得互利共赢。

教学重点：视口

教学重难点

教学难点：使用DreamweaverCC为网页构建响应式布局

教学方法情景模拟法、问答法、讨论法、练习法

教学用电脑、投影仪、多媒体课件、教材

第1节课：课前任务→考勤（2min）→问题导入（10min）→传授新知（33min）

教学设计

第2节课：任务实施（25min）→实践探索（15min）→课堂小结（3min）→作业布置（2min）

教学过程主要教学内容及步骤设计意图

第一节课

通过课前的预热，

?【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP，

让学生了解所学软

课前任务查阅资料，了解网页的响应式布局

件，激发学生的学

?【学生】按照教师要求完成课前任务习欲望

?【教师】使用APP进行签到培养学生的组织

考勤

纪律性，掌握学生

（2min）

?【学生】按照老师要求签到的出勤情况

?【教师】提出以下问题：

通过问题导入，

根据教材提示，说一说响应式布局有哪些作用？

引导学生思考，调

问题导入?【学生】思考、举手发言

动学生的主观能动

（10min）

随着智能手机的普及，移动互联网的发展，使用移动端访问互联网服务的人数已性，了解本节课要

远超使用PC端的人数，所以在制作网页时不可避免地要考虑移动端的适配情况，这学习的内容

时就需要制作响应式布局。

?【教师】通过学生的发言，引入新的知识点，介绍视口和媒体查询

通过讲解，让学

传授新知

一、视口生了解视口和媒体

（33min）