课题
网页布局( 二 ）
课时
2课时（90 min）
教学目标
知识技能目标：
（1）认识网页的单列布局和双列布局
（2）了解什么是网页的三列布局
（3）能够使用Dreamweaver CC为网页设置三列布局
思政育人目标：
（1）学习网页布局，提升网页设计与制作的能力。
（2）了解开源精神，懂得互利共赢。
教学重难点
教学重点：网页的三列布局
教学难点：使用Dreamweaver CC为网页设置三列布局
教学方法
情景模拟法、问答法、讨论法、练习法
教学用具
电脑、投影仪、多媒体课件、教材
教学设计
第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 minguildoll）→传授新知（28 min）→课堂互动（10 min）
第2节课：任务实施（25 min）→ 二十不惑2梁爽官配实践探索（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{…}选择器中设置元素向右浮动。
（详见教材）
【学生】观察、记录、理解
⏹【学生】聆听、思考、记忆
通过讲解，让学生了解单列与双列布局，三列布局
课堂互动
（10 min）
⏹【教师】提出以下问题：
网页如何制作局部布局的盒子模型？
⏹【学生】聆听、思考、举手回答
⏹【教师】对学生的回答进行总结
CSS3中还有一种常用于局部布局的盒子模型，称为弹性伸缩盒。使用弹性伸缩盒构建布局的方式叫作弹性伸缩盒布局（flex布局），它把父元素转换为具有弹性的伸缩盒，将未知大小的子元素以各种形式分布在父元素中，是一种比较简便、灵活的布局方式。
在CSS3中，设置元素的display属性为flex即可将其设置为伸缩盒，其中的块级元素将默认自左向右排列。
通过课堂互动调动课堂气氛，增加学生的学习兴趣
第二节课
任务实施
（25 min）
⏹【教师】演示使用Dreamweaver CC对“爱看视频网”的主页进行布局
（1）打开本书配套素材“项目七”→“任务二”文件夹，将其中的“ilook.ste”站点附加到Dreamweaver CC中。如已创建站点，可用本书配套素材“项目七”→“任务二”→“ilook”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页文档，按“F12”键进行预览，可见页面中的各模块基本处于未布局的状态。
（2）设置公共类inner的样式。在inner{…}选择器中继续设置宽度为1413像素。
（3）对页眉进行布局。在.head_left{…}选择器中设置元素向左浮动；在.header- right{…}选择器中设置元素向右浮动；在.nav-list li{…}选择器中设置元素向左浮动；在.search{…}选择器中设置定位模式为相对定位；在.search-btn{…}选择器中设置顶部、右侧偏移量均为0像素。
龙井茶的冲泡方法（4）对主体内容区域进行布局。
（详见教材）
⏹【学生】观察、记录、理解，上机操作
科尼赛克agera⏹【教师】巡堂指导，及时解决学生的问题
通过任务实施，让学生们主动参与学习，熟悉使用Dreamweaver CC进行网页布局的步骤
实践探索
（15min）
⏹【教师】组织学生搜集资料，保存网页，通过练习熟悉使用Dreamweaver CC进行网页经典布局
⏹【学生】自主学习、理解、上机操作
⏹【教师】巡堂指导，及时解决学生的问题
学生通过实践探索进一步巩固所学知识，了解更多关于网页单列、双列和三列布局的知识
课堂小结
（3 min）
⏹【教师】简要总结本节课的要点
本节课了解了网页的单列、双列和三列布局的基本知识，并通过实践学习了如何设置网页的三列布局等知识。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC进行网页经典布局的操作。
⏹【学生】总结回顾知识点
总结知识点，巩固印象
作业布置
（2 min）
⏹【教师】布置课后作业
（1）完成相关课后习题。
（2）查阅资料，了解网页的单列、双列和三列布局的应用。
⏹【学生】完成课后任务
延展知识面，巩固所学知识
教学反思
本节课教学整体效果不错，知识较为简单，通过实践练习，学生能够掌握相关知识及基本操作，但是本节课教学活动单一，仅为简单的演示-操作，在今后的教学活动中，应该增加更多的互动环节，包括生生互动，师生互动等，丰富学生的感官和课堂体验，以便获得更好的教学效果。
食品质量与安全专业就业前景