资源简介 课题 网页布局( 一 ）课时 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设计器”面板“属性”窗格中单击“布局”按钮，即可在下方看到这两个属性。 这两个属性的设置方法基本相同，属性值为数值与单位（常用单位为像素）。单击“设置速记”区域，在编辑框中可以输入1～4个值。 (详见教材) 2．溢出处理 【教师】展示CSS3中的overflow属性设置面板，帮助学习理解 当块级元素中的内容超出了盒子模型的边框范围，浏览器会默认将这些内容显示在边框外侧，此时可以使用overflow属性对这些溢出内容进行处理。使用Dreamweaver CC进行设置时，在“CSS设计器”面板“属性”窗格中单击“布局”按钮，可在下方看到它的子属性overflow-x与overflow-y。 （详见教材） 三、元素的浮动与定位 网页中的元素默认按照从左到右、从上到下的标准文档流顺序排列，若想要调整元素的位置，就需要用到元素的浮动和定位属性。 1．浮动属性 【教师】展示CSS3中的float属性设置面板，帮助学习理解 浮动属性在网页布局中非常重要，设置了浮动属性的元素会脱离标准文档流的排列顺序，移动到父元素中的指定位置。在CSS3中，使用float属性设置元素浮动。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。 单击按钮 属性值可设置为left，表示元素向左浮动；单击按钮 属性值可设置为right，表示元素向右浮动；单击按钮 属性值可设置为none，表示元素不浮动，同时也是该属性的默认值。 （详见教材） 【课堂互动】教师提出以下问题： 父子元素如何设置？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 父子元素存在于同一个标准文档流时，父元素的宽度与高度能根据子元素自动扩展。设置浮动属性后，需要注意设置父元素的宽度与高度。因为当浮动的子元素脱离标准文档流之后，父元素的宽度与高度不能再根据子元素自动扩展，有时子元素会显示在父元素外。 2．清除浮动 【教师】展示CSS3中的clear属性设置面板，帮助学习理解 设置了浮动属性的元素在脱离标准文档流后，会影响到附近的兄弟元素。如果不想使某元素因受到浮动兄弟元素的影响而改变位置，可以设置clear属性清除该元素前浮动元素带来的影响。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。 单击按钮属性值可设置为left，表示清除元素前左浮动元素的影响；单击按钮 属性值可设置为right，表示清除元素前右浮动元素的影响；单击按钮 属性值可设置为both，表示清除元素前所有浮动元素的影响，无论它是左浮动还是右浮动；单击按钮 属性值可设置为none，表示受到元素前浮动元素的影响，同时也是该属性的默认值。 （详见教材） 【课堂互动】教师提出以下问题： 父元素如何扩展自身高度？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 div是块级元素，给它设置clear属性之后，它会自动排到所有元素的下一行，父元素识别之后会根据该元素的位置自动扩展自身高度。 【教师】提出以下问题： （1）什么是高度塌陷？ （2）高度塌陷的原因是什么？ （3）如何解决高度塌陷问题？ 【学生】阅读教材，思考，理解，举手回答 【教师】总结学生的回答，讲解知识点 页面中父元素的高度未能根据浮动图像元素自动扩展，父元素的边框没有正确显示，这种情况称为高度塌陷。 高度塌陷的主要原因是父元素无法识别浮动子元素的宽度与高度，但是父元素能够识别浮动子元素的兄弟元素。 解决高度塌陷的方法有： （1）通过在父元素末尾添加一个设置了clear属性的非浮动子元素来解决高度塌陷问题。最简单的方法是在父元素末尾添加一个空的标签，设置其clear属性值为both。 （2）使用after伪对象。 （3）使用overflow属性。 (详见教材) 3．定位属性 【教师】展示CSS3中的position属性设置面板，帮助学习理解 使用浮动属性能够实现一定的布局效果，但不能对元素的位置进行精确控制。在CSS3中，可以通过定位属性对元素进行精确定位。 （1）定位模式。在CSS3中，使用position属性设置元素的定位模式。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。 （2）偏移量。定位模式可以设置元素以哪种方式定位，进一步确定元素的位置还需要设置偏移量属性，即position属性下方矩形设置区域的四个子属性。 （详见教材） 4．相对定位 【教师】展示相对定位的页面效果，帮助学习理解 定位模式为相对定位的元素将以其在标准文档流中的原位置为基准，根据所设置的偏移量向对应方向移动一定距离，并且保留它在标准文档流中的位置。在设置偏移量时，上下或左右方向都只需设置一个属性值。例如，设置某元素相对定位模式下的左侧偏移量为10 px，则其右侧偏移量自动变为 10 px。 使用相对定位可以设置一些局部的特殊布局。 （详见教材） 5．绝对定位 【教师】展示绝对定位的页面效果，帮助学习理解 定位模式为绝对定位的元素将以最近的已定位（相对、绝对或固定定位）父元素的位置为基准，根据所设置的偏移量向对应方向移动一定距离。如果所有父元素都未定位，则以浏览器窗口为基准。 绝对定位与相对定位不同，元素偏移后，网页中将不会保留其在标准文档流中的位置。 （详见教材） 【课堂互动】教师提出以下问题： 设置元素的绝对定位有什么后果？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 如果只设置定位模式为绝对定位，但不设置偏移量，则元素的位置不变，但因其脱离标准文档流，将与后续上移的元素重叠。 6．固定定位 【教师】展示绝对定位的页面效果，帮助学习理解 固定定位是绝对定位的特殊情况，即全部以浏览器窗口为基准进行定位。为元素设置固定定位后，该元素脱离标准文档流，始终显示在浏览器窗口的固定位置，不随浏览器窗口大小变化或滚动条移动而改变。 固定定位常用于制作“返回顶部”按钮等固定在页面中的元素。 （详见教材） 7．层叠等级属性 【教师】展示CSS3中z-index属性的设置界面，帮助学习理解 对元素进行定位时，可能会出现元素重叠的状况。默认情况下，标准文档流中越靠后的元素显示在越靠上的层级。在CSS3中，可以使用z-index属性设置元素的层叠等级，调整定位元素的显示层级。该属性可在“CSS设计器”面板“属性”窗格中的“布局”设置区进行设置。 （详见教材） 【课堂互动】教师提出以下问题： 如何设置父元素和子元素的z-index属性？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 z-index属性只能用于设置定位元素（相对、绝对或固定定位）的层叠等级。 父元素的z-index属性值无法与子元素进行比较，想要将子元素显示在父元素的下层，可在父元素保持默认设置的情况下将子元素的z-index属性值设置为负数。 聆听、思考、记忆、实际操作 通过讲解，让学生了解盒子模型，盒子模型的属性及元素的浮动与定位课堂抢答 （10 min） 【教师】提出网页布局中元素浮动和定位属性，让学生抢答各属性的作用 【学生】聆听、抢答、说出元素浮动和定位各属性的作用 通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛第二节课任务实施 （25 min） 【教师】演示使用Dreamweaver CC进行网页布局，并对其进行分析 （1）打开本书配套素材“项目七”→“任务一”文件夹，将其中的“Sculture.ste”站点附加到Dreamweaver CC中。如已创建站点，可用本书配套素材“项目七”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页文档，按“F12”键进行预览，可见页面中的各模块是自上至下依次排列的。 （2）设置公共类center的样式，制作模块的居中对齐效果。在index.css文档中添加.center选择器，双击“属性”窗格中“布局”设置区下width属性的右侧，在文本框中输入“1200 px”，然后单击margin属性右侧，在文本框中输入“0 px auto”。 （3）对页眉进行布局。在#index_header{…}选择器中设置页眉部分宽度为100%，顶部的内外边距均为0 px；在.head_left{…}选择器中设置元素向左浮动；在.head_right{…}选择器中设置元素向右浮动。 （4）对导航栏进行布局。在#index_nav{…}选择器中设置宽度为100%，高度为100像素，下外边距为10像素。 （5）对主体内容区域进行布局。 （6）对主体内容区域各模块进行布局。 （详见教材） 【学生】观察、记录、理解，上机操作 【教师】巡堂指导，及时解决学生的问题 通过任务实施，让学生们主动参与学习，熟悉使用 Dreamweaver CC进行网页布局的操作实践探索 （15 min） 【教师】组织学生使用Dreamweaver CC制作“图书交易网”反馈意见页 【学生】参照任务实施的步骤上机操作 【教师】巡堂指导，及时解决学生的问题 通过实践探索，使学生进一步巩固所学知识，进一步掌握使用 Dreamweaver CC进行网页布局的操作课堂小结 （3 min） 【教师】简要总结本节课的要点 本节课了解了盒子布局的基本知识，认识了元素的浮动与定位，通过实践练习掌握了利用Dreamweaver CC进行网页布局的基本步骤。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC进行网页布局的操作。 【学生】总结回顾知识点 总结知识点，巩固印象作业布置 （2 min） 【教师】布置课后作业 （1）完成相关课后习题。 （2）查阅资料，了解更多关于网页盒子布局的知识。 【学生】完成课后任务 延展知识面，巩固所学知识教学反思 本节课教学整体效果不错，部分环节让学生觉得较为枯燥。在以后的课程中教师要反思如何才能让学生感受到学习的乐趣、如何才能提高学生学习的积极性和主动性、如何才能激发出他们的学习潜能等。教师要秉承公平、公正，不能只注视学习成绩好的学生，对于学习成绩差的学生更是要多加鼓励和指导。 展开更多...... 收起↑ 资源预览