《网页设计与制作案例教程（第2版） 》教案 第16课 网页布局（二）

16第16第课网页布局（二）（二）网页（二）网页布局第课16PAGE4PAGE4PAGE3PAGE316第16第课网页布局（二） 课题网页布局(二）课时2课时（90min）教学目标知识技能目标：（1）认识网页的单列布局和双列布局（2）了解什么是网页的三列布局（3）能够使用DreamweaverCC为网页设置三列布局思政育人目标：（1）学习网页布局，提升网页设计与制作的能力。（2）了解开源精神，懂得互利共赢。教学重难点教学重点：网页的三列布局教学难点：使用DreamweaverCC为网页设置三列布局教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（28min）课堂互动（10min）第2节课：任务实施（25min）

实践探索（15min）

课堂小结（3min）

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

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

（5min）【教师】提出以下问题：什么是单列布局？【学生】思考、举手发言构建这种布局形式只需按照标准文档流的顺序添加容器标签即可，必要时可将个别容器标签左右外边距属性值设置为auto，使其居中显示。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（28min）【教师】通过学生的发言，引入新的知识点，介绍单列与双列布局，三列布局一、单列与双列布局【教师】展示单列布局的网页图片，帮助学习理解小型企业宣传网站一般使用简单的单列布局，构建这种布局形式只需按照标准文档流的顺序添加容器标签即可，必要时可将个别容器标签左右外边距属性值设置为auto，使其居中显示。双列布局一般是指带有左侧或右侧侧边栏的布局形式。构建这种布局形式可以通过设置浮动属性，使主体部分与侧边栏一个向左浮动一个向右浮动来实现。此外，也可以通过设置定位属性实现。（详见教材）【教师】演示使用定位属性构建双列布局（1）在DreamweaverCC中打开本书配套素材“项目七”→“ex9.html”网页文档，按“F12”键进行预览。（2）在<style>标签中继续设置样式。对main{…}选择器继续设置，单击“属性”窗格“布局”设置区中position属性右侧的下拉列表，在展开的列表中选择“relative”选项，将主体区域的定位模式设置为相对定位。（3）对aside{…}选择器继续设置，单击“属性”窗格“布局”设置区中position属性右侧的下拉列表，在展开的列表中选择“absolute”选项，然后单击下方矩形设置区域的上边，在文本框中输入“0px”，再单击矩形设置区域的左边，在文本框中输入“0px”，设置定位模式为绝对定位，顶部、左侧偏移量均为0像素。（4）对div{…}选择器继续设置，设置定位模式为绝对定位，顶部、右侧偏移量均为0像素。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：页面结构更加稳定，我们应该怎么做【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、三列布局【教师】展示三列布局的网页图片，帮助学习理解三列布局是指同时有两列侧边栏的布局形式。要使用定位属性实现三列布局，可在例7-2的基础上分别设置左、中、右3个模块绝对定位的左侧（或右侧）偏移量为0%、15%和85%（以两侧侧边栏宽度各占父元素的15%为例）。使用浮动属性实现三列布局时，可直接设置各模块一同向左或向右浮动。但使用这种方法构建的布局不够稳定，在实际应用中，可通过设置外边距属性或将两个侧边栏模块分别向左和向右浮动来固定侧边栏的位置。(详见教材)【教师】演示使用浮动属性构建较为稳定的三列布局（1）在DreamweaverCC中打开本书配套素材“项目七”→“ex10.html”网页文档，按“F12”键进行预览。（2）在div{…}选择器中设置顶部、底部外边距为0像素，左侧、右侧外边距为200像素；在.left{…}选择器中设置元素向左浮动；在.right{…}选择器中设置元素向右浮动。（详见教材）【学生】观察、记录、理解【学生】聆听、思考、记忆通过讲解，让学生了解单列与双列布局，三列布局课堂互动（10min）【教师】提出以下问题：网页如何制作局部布局的盒子模型？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结CSS3中还有一种常用于局部布局的盒子模型，称为弹性伸缩盒。使用弹性伸缩盒构建布局的方式叫作弹性伸缩盒布局（flex布局），它把父元素转换为具有弹性的伸缩盒，将未知大小的子元素以各种形式分布在父元素中，是一种比较简便、灵活的布局方式。在CSS3中，设置元素的display属性为flex即可将其设置为伸缩盒，其中的块级元素将默认自左向右排列。通过课堂互动调动课堂气氛，增加学生的学习兴趣第二节课任务实施

（25min）【教师】演示使用DreamweaverCC对“爱看视频网”的主页进行布局（1）打开本书配套素材“项目七”→“任务二”文件夹，将其中的“ilook.ste”站点附加到DreamweaverCC中。如已创建站点，可用本书配套素材“项目七”→“任务二”→“ilook”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页文档，按“F12”键进行预览，可见页面中的各模块基本处于未布局的状态。（2）设置公共类inner的样式。在inner{…}选择器中继续设置宽度为1413像素。（3）对页眉进行布局。在.head_left{…}选择器中设置元素向左浮动；在.header-right{…}选择器中设置元素向右浮动；在.nav-listli{…}选择器中设置元素向左浮动；在.search{…}选择器中设置定位模式为相对定位；在.search-btn{…}选择器中设置顶部、右侧偏移量均为0像素。（4）对主体内容区域进行布局。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用DreamweaverCC进行网页布局的步骤实践探索

（15min）【教师】组织学生搜集资料，保存网页，通过练习熟悉使用DreamweaverCC进行网页经典布局【学生】自主学习、理解、上机操作【教师】巡堂指导，及时解决学生的问题学生通过实践探索进一步巩固所学知识，了解更多关于网页单列、双列和三列布局的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了网页的单列、双列和三列布局的基本知识，并通过实践学习了如何设置网页的三列布局等知识。希望大家在课下多加练习，熟练掌握利用DreamweaverCC进行网页经典布局的操作。【学生】总结回顾知识点总结知识点，巩固印象作业布置

（2min）【教师】布置课后作业（1）完成相关课后习题。（2）查阅资料，了解网页的单列、双列