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

课题 网页布局( 二 ） 课时 2课时（90 min） 教学目标 知识技能目标： （1）认识网页的单列布局和双列布局 （2）了解什么是网页的三列布局 （3）能够使用Dreamweaver CC为网页设置三列布局 思政育人目标： （1）学习网页布局，提升网页设计与制作的能力。 （2）了解开源精神，懂得互利共赢。 教学重难点 教学重点：网页的三列布局 教学难点：使用Dreamweaver CC为网页设置三列布局 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（28 min）→课堂互动（10 min） 第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页的经典布局 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 什么是单列布局？ · 【学生】思考、举手发言 构建这种布局形式只需按照标准文档流的顺序添加容器标签即可，必要时可将个别容器标签左右外边距属性值设置为auto，使其居中显示。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （28 min） · 【教师】通过学生的发言，引入新的知识点，介绍单列与双列布局，三列布局 一、单列与双列布局 【教师】展示单列布局的网页图片，帮助学习理解 小型企业宣传网站一般使用简单的单列布局，构建这种布局形式只需按照标准文档流的顺序添加容器标签即可，必要时可将个别容器标签左右外边距属性值设置为auto，使其居中显示。 双列布局一般是指带有左侧或右侧侧边栏的布局形式。构建这种布局形式可以通过设置浮动属性，使主体部分与侧边栏一个向左浮动一个向右浮动来实现。此外，也可以通过设置定位属性实现。 （详见教材） 【教师】演示使用定位属性构建双列布局 （1）在Dreamweaver CC中打开本书配套素材“项目七”→“ex9.html”网页文档，按“F12”键进行预览。 （2）在<style>标签中继续设置样式。对main{…}选择器继续设置，单击“属性”窗格“布局”设置区中position属性右侧的下拉列表，在展开的列表中选择“relative”选项，将主体区域的定位模式设置为相对定位。 （3）对aside{…}选择器继续设置，单击“属性”窗格“布局”设置区中position属性右侧的下拉列表，在展开的列表中选择“absolute”选项，然后单击下方矩形设置区域的上边，在文本框中输入“0 px”，再单击矩形设置区域的左边，在文本框中输入“0 px”，设置定位模式为绝对定位，顶部、左侧偏移量均为0像素。 （4）对div{…}选择器继续设置，设置定位模式为绝对定位，顶部、右侧偏移量均为0像素。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 如果想让页面结构更加稳定，我们应该怎么做？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 使用定位属性构建的页面结构更加稳定，但是在使用定位属性构建页面布局时，页眉页脚之间的中心区域必须设置高度，否则它的背景属性及其下方的页面元素都将无法显示。 二、三列布局 【教师】展示三列布局的网页图片，帮助学习理解 三列布局是指同时有两列侧边栏的布局形式。要使用定位属性实现三列布局，可在例7-2的基础上分别设置左、中、右3个模块绝对定位的左侧（或右侧）偏移量为0%、15%和85%（以两侧侧边栏宽度各占父元素的15%为例）。 使用浮动属性实现三列布局时，可直接设置各模块一同向左或向右浮动。但使用这种方法构建的布局不够稳定，在实际应用中，可通过设置外边距属性或将两个侧边栏模块分别向左和向右浮动来固定侧边栏的位置。 (详见教材) 【教师】演示使用浮动属性构建较为稳定的三列布局 （1） 在Dreamweaver CC中打开本书配套素材“项目七”→“ex10.html”网页文档，按“F12”键进行预览。 （2） 在div{…}选择器中设置顶部、底部外边距为0像素，左侧、右侧外边距为200像素；在.left{…}选择器中设置元素向左浮动；在.right{…}选择器中设置元素向右浮动。 （详见教材）