第15课网页布局( 一 ）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 网页布局( 一 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉盒子模型的基本结构 （2）了解盒子模型的属性 （3）认识元素的浮动与定位 思政育人目标： （1）学习网页布局，提升网页设计与制作的能力。 （2）了解开源精神，懂得互利共赢。 教学重难点 教学重点：盒子模型的基本结构和属性 教学难点：元素的浮动与定位 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（23 min）→课堂抢答（10 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页布局的基本知识 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （10 min） · 【教师】提出以下问题： 网页布局的基础是什么？ · 【学生】思考、举手发言 盒子模型和元素浮动与定位是构建网页布局的基础。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （23 min） · 【教师】通过学生的发言，引入新的知识点，介绍盒子模型的基本结构，元素的浮动与定位 一、盒子模型的基本结构 【教师】展示盒子模型基本结构的图片，帮助学习理解 HTML文档中的大部分元素（特别是块级元素）都可以看作是一个盒子，网页元素的定位就是这些大大小小的盒子在页面中的定位。一个标准的W3C盒子模型有4个组成部分，分别为内容（content）、内边距（padding）、边框（border）与外边距（margin）。 （详见教材） 【课堂互动】教师提出以下问题： 如何计算一个盒子模型的实际所占空间？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 设置元素宽高的width、height属性，都是作用于内容区域的（背景图像可以延伸到内边距区域，背景颜色可以延伸到边框区域）。也就是说，一个盒子模型实际所占空间 的宽度与高度为： width(real)=width(content)+2×(border+padding+margin) height(real)=height(content)+2×(border+padding+margin)。 【课堂互动】教师提出以下问题： 想更改width、height属性的作用范围，应该怎么做呢？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 在CSS3中，设置box-sizing属性可以更改width、height属性的作用范围，属性值content-box是默认值，表示这两个属性作用于内容区域；属性值border-box表示这两个属性作用于边框及其内部区域。 【教师】演示如何利用浏览器查看盒子模型 使用火狐浏览器打开本书配套素材“项目七”→“ex1.html”文件，然后按“F12”键，进入开发者模式，在“查看器”窗格中选择页面中的元素代码，即可在下方“布局”窗格的“盒模型”区域看到该元素的盒子模型。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 你们平时都使用哪些浏览器？火狐浏览器有哪些优点？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 火狐浏览器是一款开源浏览器软件。开源（open source），全称开放源代码。很多人可能认为开源软件最明显的特点是免费，但实际上并不是这样的，开源软件最大的特点是开放，也就是任何人都可以得到软件的源代码，并可以在软件的版权限制范围之内学习、使用、修改，甚至重新发放。开源软件重在开放、接纳、包容和发展，求同存异，互利共赢，这才是开源的本质。 二、盒子模型的属性 盒子模型的属性包括盒子模型的边框、背景、边距、溢出处理等。 1．盒子模型的边距 【教师】展示CSS3中的padding与margin属性设置面板，帮助学习理解 在CSS3中，使用padding与margin属性设置盒子模型的内外边距。使用Dreamweaver CC进行设置时，在“CSS设计器”面板“属性”窗格中单击“布局”按钮，即可在下方看到这两个属性。 这两个属性的设置方法基本相同，属性值为数值与单位（常用单位为像素）。单击“设置速记”区域，在编辑框中可以输