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

15第15第课网页布局（一）（一）网页（一）网页布局第课15PAGE8PAGE8PAGE7PAGE715第15第课网页布局（一） 课题网页布局(一）课时2课时（90min）教学目标知识技能目标：（1）熟悉盒子模型的基本结构（2）了解盒子模型的属性（3）认识元素的浮动与定位思政育人目标：（1）学习网页布局，提升网页设计与制作的能力。（2）了解开源精神，懂得互利共赢。教学重难点教学重点：盒子模型的基本结构和属性教学难点：元素的浮动与定位教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（23min）课堂抢答（10min）第2节课：任务实施（25min）

实践探索（15min）

课堂小结（3min）

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

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

（10min）【教师】提出以下问题：网页布局的基础是什么？【学生】思考、举手发言盒子模型和元素浮动与定位是构建网页布局的基础。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（23min）【教师】通过学生的发言，引入新的知识点，介绍盒子模型的基本结构，元素的浮动与定位一、盒子模型的基本结构【教师】展示盒子模型基本结构的图片，帮助学习理解HTML文档中的大部分元素（特别是块级元素）都可以看作是一个盒子，网页元素的定位就是这些大大小小的盒子在页面中的定位。一个标准的W3C盒子模型有4个组成部分，分别为内容（content）、内边距（padding）、边框（border）与外边距（margin）。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【课堂互动】教师提出以下问题：更改width、height属性的作用范围，应该怎么做呢【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【教师】演示如何利用浏览器查看盒子模型使用火狐浏览器打开本书配套素材“项目七”→“ex1.html”文件，然后按“F12”键，进入开发者模式，在“查看器”窗格中选择页面中的元素代码，即可在下方“布局”窗格的“盒模型”区域看到该元素的盒子模型。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结二、盒子模型的属性盒子模型的属性包括盒子模型的边框、背景、边距、溢出处理等。1．盒子模型的边距【教师】展示CSS3中的padding与margin属性设置面板，帮助学习理解在CSS3中，使用padding与margin属性设置盒子模型的内外边距。使用DreamweaverCC进行设置时，在“CSS设计器”面板“属性”窗格中单击“布局”按钮，即可在下方看到这两个属性。这两个属性的设置方法基本相同，属性值为数值与单位（常用单位为像素）。单击“设置速记”区域，在编辑框中可以输入1～4个值。(详见教材)2．溢出处理【教师】展示CSS3中的overflow属性设置面板，帮助学习理解当块级元素中的内容超出了盒子模型的边框范围，浏览器会默认将这些内容显示在边框外侧，此时可以使用overflow属性对这些溢出内容进行处理。使用DreamweaverCC进行设置时，在“CSS设计器”面板“属性”窗格中单击“布局”按钮，可在下方看到它的子属性overflow-x与overflow-y。（详见教材）三、元素的浮动与定位网页中的元素默认按照从左到右、从上到下的标准文档流顺序排列，若想要调整元素的位置，就需要用到元素的浮动和定位属性。1．浮动属性【教师】展示CSS3中的float属性设置面板，帮助学习理解浮动属性在网页布局中非常重要，设置了浮动属性的元素会脱离标准文档流的排列顺序，移动到父元素中的指定位置。在CSS3中，使用float属性设置元素浮动。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。单击按钮属性值可设置为left，表示元素向左浮动；单击按钮属性值可设置为right，表示元素向右浮动；单击按钮属性值可设置为none，表示元素不浮动，同时也是该属性的默认值。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结2．清除浮动【教师】展示CSS3中的clear属性设置面板，帮助学习理解设置了浮动属性的元素在脱离标准文档流后，会影响到附近的兄弟元素。如果不想使某元素因受到浮动兄弟元素的影响而改变位置，可以设置clear属性清除该元素前浮动元素带来的影响。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。单击按钮属性值可设置为left，表示清除元素前左浮动元素的影响；单击按钮属性值可设置为right，表示清除元素前右浮动元素的影响；单击按钮属性值可设置为both，表示清除元素前所有浮动元素的影响，无论它是左浮动还是右浮动；单击按钮属性值可设置为none，表示受到元素前浮动元素的影响，同时也是该属性的默认值。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【教师】提出以下问题：（1）什么是高度塌陷？（2）高度塌陷的原因是什么？（3）如何解决高度塌陷问题？【学生】阅读教材，思考，理解，举手回答【教师】总结学生的回答，讲解知识点页面中父元素的高度未能根据浮动图像元素自动扩展，父元素的边框没有正确显示，这种情况称为高度塌陷。高度塌陷的主要原因是父元素无法识别浮动子元素的宽度与高度，但是父元素能够识别浮动子元素的兄弟元素。解决高度塌陷的方法有：（1）通过在父元素末尾添加一个设置了clear属性的非浮动子元素来解决高度塌陷问题。最简单的方法是在父元素末尾添加一个空的<div>标签，设置其clear属性值为both。（2）使用after伪对象。（3）使用overflow属性。(详见教材)3．定位属性【教师】展示CSS3中的position属性设置面板，帮助学习理解使用浮动属性能够实现一定的布局效果，但不能对元素的位置进行精确控制。在CSS3中，可以通过定位属性对元素进行精确定位。（1）定位模式。在CSS3中，使用position属性设置元素的定位模式。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。（2）偏移量。定位模式可以设置元素以哪种方式定位，进一步确定元素的位置还需要设置偏移量属性，即position属性下方矩形设置区域的四个子属性。（详见教材）4．相对定位【教师】展示相对定位的页面效果，帮助学习理解定位模式为相对定位的元素将以其在标准文档流中的原位置为基准，根据所设置的偏移量向对应方向移动一定距离，并且保留它在标准文档流中的位置。在设置偏移量时，上下或左右方向都只需设置一个属性值。例如，设置某元素相对定位模式下的左侧偏移量为10px，则其右侧偏移量自动变为−10px。使用相对定位可以设置一些局部的特殊布局。（详见教材）5．绝对定位【教师】展示绝对定位的页面效果，帮助学习理解定位模式为绝对定位的元素将以最近的已定位（相对、绝对或固定定位）父元素的位置为基准，根据所设置的偏移量向对应方向移动一定距离。如果所有父元素都未定位，则以浏览器窗口为基准。绝对定位与相对定位不同，元素偏移后，网页中将不会保留其在标准文档流中的位置。（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结6．固定定位【教师】展示绝对定位的页面效果，帮助学习理解固定定位是绝对定位的特殊情况，即全部以浏览器窗口为基准进行定位。为元素设置固定定位后，该元素脱离标准文档流，始终显示在浏览器窗口的固定位置，不随浏览器窗口大小变化或滚动条移动而改变。固定定位常用于制作“返回顶部”按钮等固定在页面中的元素。（详见教材）7．层叠等级属性【教师】展示CSS3中z-index属性的设置界面，帮助学习理解对元素进行定位时，可能会出现元素重叠的状况。默认情况下，标准文档流中越靠后的元素显示在越靠上的层级。在CSS3中，可以使用z-index属性设置元素的层叠等级，调整定位元素的显示层级。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。（详见教材）【课堂互动】教师提出以下问题：如何设置父元素和子元素的z-index属性【学生】聆听、思考、举手回答【教师】对学生的回答进行总结聆听、思考、记忆、实际操作通过讲解，让学生了解盒子模型，盒子模型的属性及元素的浮动与定位课堂抢答（10min）【教师】提出网页布局中元素浮动和定位属性，让学生抢答各属性的作用【学生】聆听、抢答、说出元素浮动和定位各属性的作用通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛第二节课任务实施

（25min）【教师】演示使用DreamweaverCC进行网页布局，并对其进行分析（1）打开本书配套素材“项目七”→“任务一”文件夹，将其中的“Sculture.ste”站点附加到DreamweaverCC中。如已创建站点，可用本书配套素材“项目七”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页文档，按“F12”键进行预览，可见页面中的各模块是自上至下依次排列的。（2）设置公共类center的样式，制作模块的居中对齐效果。在index.css文档中添加.center选择器，双击“属性”窗格中“布局”设置区下width属性的右侧，在文本框中输入“1200px”，然后单击margin属性右侧，在文本框中输入“0pxauto”。（3）对页眉进行布局。在#index_header{…}选择器中设置页眉部分宽度为100%，顶部的内外边距均为0px；在.head_left{…}选择器中设置元素向左浮动；在.head_right{…}选择器中设置元素向右浮动。（4）对导航栏进行布局。在#index_nav{…}选择器中设置宽度为100%，高度为100像素，下外边距为10像素。（5）对主体内容区域进行布局。（6）对主体内容区域各模块进行布局。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用

DreamweaverCC进行网页布局的操作实践探索

（15min）【教师】组织学生使用DreamweaverCC制作“图书交易网”反馈意见页【学生】参照任务实施的步骤上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，进一步掌握使用

DreamweaverCC进行网页布局的操作课堂小结

（3min）【教师】简要总结本节课的要点本节课了解了盒子布局的基本知识，认识了元素的浮动与定位，通过实践练习掌握了利用DreamweaverCC进行网页布局的基本步骤。希望大家在课下多加练习，熟练掌握利用DreamweaverC