第7章 浮动与定位教学设计概要.docx

1、第7章 浮动与定位教学设计概要HTML+CSS+JavaScript网页制作案例教程教学设计课程名称： HTML+CSS+JavaScript网页制作案例教程授课年级： 2015年级 授课学期： 2015学年第二学期教师姓名： 某某老师 201 年 月 日课题名称第7章 浮动与定位计划课时6课时内容分析通过前面几章的学习，初学者不难发现，在默认情况下，网页中的元素会按照从上到下或从左到右的顺序一一罗列。如果仅仅按照这种默认的方式进行布局，网页将会显得单调、混乱。为了使网页的布局更加丰富、合理，可以在CSS中对元素设置浮动和定位属性。本章将对元素的浮动和定位进行详细讲解。教学目标 理解元素的浮动

2、，能够使用浮动对网页进行布局； 熟悉清除浮动的方法，能够清除浮动的影响； 掌握常见的几种定位模式，能够对元素进行精确定位； 重点及措施教学重点：元素的浮动属性float、运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动、overflow属性、元素的定位属性。措施：通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点：元素的浮动属性float、overflow属性、元素的定位属性。措施：通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。教学过程第一课时（制作“世界杯梦幻阵容”，讲解元素的浮动属性float

3、） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第六章“HTML表单”的相关知识。1、 下列选项中，属于和标记常用属性的有哪些项？（ ）A、sizeB、multipleC、selectedD、value答案：ABC答案解析：和标记的常用属性标记名常用属性描述size指定下拉菜单的可见选项数（取值为正整数）。multiple定义multiple=multiple时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。selected定义selected = selected 时，当前项即为默认选中项。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解

4、或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，这样的布局制作出来的页面看起来呆板、不美观。其实，通过元素“浮动”可以使页面中的元素按照左、中、右的结构进行排版。那么，什么是“元素的浮动”，以及如何设置元素的浮动呢？ 请小组代表对以上问题发表见解。教师对上述问题进行解释： 所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器float:属性值; 在上面

5、的语法中，常用的float属性值有三个：left、right、none。分别用于设置元素向左浮动、元素向右浮动和元素不浮动。 案例描述初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一一罗列，如下图所示。这种布局制作出来的页面看起来呆板、不美观。本节将运用CSS中的浮动属性对下图中的页面重新进行布局，制作一个美观、整齐的“世界杯梦幻阵容”主题页面。默认的排版方式使用浮动布局的页面 知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“元素的浮动属性float”等。 讲解“元素的浮动属性float”（1）、教师通过PPT对网页中常见的元素浮动效果进行展

6、示。（2）、教师通过PPT对“浮动”的概念及基本语法格式进行讲解，并进行代码演示。（3）、教师对“浮动”的常用属性左浮动、右浮动进行讲解，并进行代码演示。（4）、教师指出对元素应用“浮动”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析分析“世界杯梦幻阵容”页面的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间

7、可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：元素的浮动属性float。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固“世界杯梦幻阵容”的制作学完知识点后，让学生再制作一次“世界杯梦幻阵容”案例。以此使学生更熟练地掌握如何给元素设置浮动属性。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二课时（制作“商品专栏”，讲解运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动） 复习上节课内容在讲解本节内容前，抛出以下问

8、题让学生回答，以复习上节课内容。1、在CSS中，可以通过float属性为元素设置浮动，以下属于float属性值的是（ ）A、left B、center C、right D、none答案：ACD答案解析：常用的float属性值有三个，分别表示不同的含义： left：元素向左浮动 right：元素向右浮动 none：元素不浮动（默认值）说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在上节课中，我们已经学习了如何给元素设置浮动。由于浮动元素不再占用原文档流的位置，对页面中其他元素的排

9、版会产生影响，为了排除这种影响，有时候需要我们清除元素的浮动。那么，如何使用clear属性清除元素的浮动呢？请同学们讨论并举例说明。请小组代表对以上问题发表见解。教师对上述问题进行解释：由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。在CSS中，通过clear属性清除浮动的方法是：给受到浮动的元素应用clear属性。可以分别使用clear:left、clear:right、clear:both;来清除元素左、右及左右两侧浮动的影响。 案例描述由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响。如果要避免这种影响，就需要对元素清除浮动。本小节将

10、通过清除浮动的方法制作一个“商品专栏”页面。 知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“运用clear属性清除浮动、运用overflow属性清除浮动、使用after伪对象清除浮动”等知识点。 讲解“运用clear属性清除浮动” （1）、教师通过PPT对“clear属性清除浮动的基本语法格式”进行讲解。（2）、教师对clear属性的常用属性值进行讲解，并进行代码演示。（3）、教师指出“运用clear属性清除浮动”时需要注意的问题，并给予解答。（4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“运用overflow属性清除浮动” （1）、教师通过PPT对“运用o

11、verflow属性清除浮动”的作用进行讲解。（2）、教师对“overflow:hidden;清除浮动”的方法进行讲解，并进行代码演示。（3）、教师对比“clear属性清除浮动”与“overflow属性清除浮动”的异同，并分析其优缺点。（4）、教师指出应用“overflow属性清除浮动”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“使用after伪对象清除浮动” （1）、教师通过PPT对“使用after伪对象清除浮动”，适用的浏览器版本进行说明。（2）、教师对“使用after伪对象清除浮动”的方法进行讲解，并进行代码演示。（3）教师对“使用after伪对象

12、清除浮动”后的效果进行展示，并对比其清除浮动前后的应用效果。（4）、教师指出“使用after伪对象清除浮动”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析分析“商品专栏”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：运用clear属性清除浮

13、动、运用overflow属性清除浮动。易错点：注意区分三种清除元素浮动的方法。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固“商品专栏”的制作学完知识点后，让学生再制作一次“商品专栏”案例。以此使学生更熟练地使用不同的方法为元素清除浮动。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。 预习7.3节【案例21】移动端电商界面。 预习7.4节【案例22】违停查询。第三课时（制作“移动端电商界面”，讲解ove

14、rflow属性） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。在上节课中，我们学习了三种清除浮动的方法。其中，使用after伪对象可以清除浮动，但是该方法具有一定的局限性。请大家回顾上节课的知识，分析after伪对象清除浮动的局限性及需要注意哪些事项？答案：使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点：（1）必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素会比其实际高度高出若干像素。（2）必须在伪对象中设置content属性，属性值可以为空，如

15、“content: ;”。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：当盒子内的元素超出盒子自身的大小时，内容就会溢出，这时如果想要规范溢出内容的显示方式，就需要使用CSS中的overflow属性。那么，请同学们讨论下：overflow属性的属性值有哪些？各个属性值有什么作用？ 请小组代表对以上问题发表见解。答案：overflow属性的常用值有四个，分别表示不同的含义： visible：内容不会被修剪，会呈现在元素框之外（默认值）。 hidden：溢出内容会被修剪，并且被修剪

16、的内容是不可见的。 auto：在需要时产生滚动条，即自适应所要显示的内容。 scroll：溢出内容会被修剪，且浏览器会始终显示滚动条。 案例描述随着“移动互联”时代的到来，手机上网已经慢慢融入到人们的日常生活中。通过手机不仅可以浏览新闻、网上购物，还可以通讯聊天、查询地图等，给我们的生活和工作带来了极大的方便。本节将运用CSS中的overflow属性模拟一款“移动端电商界面”。 知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“overflow属性”等知识点。 讲解“overflow属性”（1）、教师通过PPT对“overflow属性”的作用进行讲解。（2）、教师对“o

17、verflow属性”的基本语法格式进行讲解，并进行代码演示。（3）、教师对“overflow属性”的四个常用属性值进行讲解，演示其具体用法和效果，通过对比分析不同属性值的异同。（4）、教师指出应用“overflow属性”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析分析“移动端电商界面”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下

18、来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：overflow属性。易错点：注意区分overflow不同属性值的用法。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固“移动端电商界面”的制作学完知识点后，让学生再制作一次“移动端电商界面”。以此使学生更熟练地掌握overflow属性的用法。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第四课时（制作“违停查询”，讲解元素的定位属性、静态定位、相对定位、绝对定位、固定定位、z-i

19、ndex层叠等级属性） 复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、下列样式代码中，可实现元素的溢出内容被修剪，且被修剪的内容不可见的是（ ）。A、 overflow:visible;B、 overflow:hidden;C、 overflow:auto;D、 overflow:scroll;答案：B答案解析：overflow属性的常用值有四个，分别表示不同的含义： visible：内容不会被修剪，会呈现在元素框之外（默认值）。 hidden：溢出内容会被修剪，并且被修剪的内容是不可见的。 auto：在需要时产生滚动条，即自适应所要显示的内容。 scroll：

20、溢出内容会被修剪，且浏览器会始终显示滚动条。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。 本课时内容学习 分组讨论对新课进行讲解前，先让学生分组讨论以下问题：元素的定位方式包括多种，例如：静态定位、相对定位、绝对定位、固定定位等。那么，请同学们讨论下：什么是“相对定位”？请小组代表对以上问题发表见解。教师对上述问题进行解释：相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。 案例

21、描述随着城市化进程的推进以及人民生活水平的提高，近几年汽车产业实现了快速发展。但是，汽车在方便我们生活的同时也带来了很多问题，如交通拥堵、违章停车等。本节将运用CSS中常用的定位方式来制作一个“违停查询”界面。当鼠标经过某一个“违停坐标”时，其背景图像将会发生变化。“违停查询”界面鼠标移上“违停查询”界面时 知识点讲解 总结知识点教师和学生一起总结在案例中涉及到的知识点，主要包括“元素的定位属性、静态定位、相对定位、绝对定位、固定定位、z-index层叠等级属性”等知识点。 讲解“元素的定位属性”（1）、教师和学生互动：制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行

22、精确定位。元素的定位属性主要包括定位模式和边偏移两部分。下面，将进行具体讲解。（2）、教师分别针对“定位模式”和“边偏移”进行详细讲解。（3）、教师对“定位模式”的基本语法格式进行讲解，并进行代码演示。（4）、教师指出position属性的四个常用值，并进行分析。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“静态定位”（1）、教师展示PPT对“静态定位”的概念进行讲解。（2）、教师针对“静态定位”进行详细讲解，并进行代码演示。（3）、学生练习，教师巡视，对疑难问题进行解答。 讲解“相对定位”（1）、教师展示PPT对“相对定位”的概念进行讲解。（2）、教师针对“相对定位”进行详细讲解，

23、并进行代码演示。（3）、教师分析“相对定位”的用法及显示效果，对比其和“静态定位”的区别与联系。（4）、教师指出应用“相对定位”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“绝对定位”（1）、教师展示PPT对“绝对定位”的概念进行讲解。（2）、教师针对“绝对定位”进行详细讲解，并进行代码演示。（3）、教师分析“绝对定位”的用法及显示效果，对比其和“静态定位”以及“相对定位”的区别与联系。（4）、教师指出应用“绝对定位”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。 讲解“固定定位”（1）、教师展示PPT对“固定定位”的概念

24、进行讲解。（2）、教师针对“固定定位”进行详细讲解，并进行代码演示。（3）、教师分析“固定定位”的用法及显示效果，对比其和“静态定位”、 “相对定位”以及“绝对定位”的区别与联系。（4）、学生练习，教师巡视，对疑难问题进行解答。 讲解“z-index层叠等级属性”（1）、教师和学生互动：当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，那么，怎样解决这个问题呢？（2）教师展示PPT对“z-index层叠等级属性”的用法进行说明。（3）、教师针对“z-index层叠等级属性”进行详细讲解，并进行代码演示。（4）、教师指出“z-index层叠等级属性”需要注意的问题，并给予解答。（5）、学

25、生练习，教师巡视，对疑难问题进行解答。 案例讲解 案例分析分析“违停查询”页面的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML标记及应用了哪些CSS样式。 案例实现教师带领学生分步骤地进行网页制作，通过结构分析、样式分析、制作页面结构、定义CSS样式等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。 阶段小结 小结重点：相对定位、绝对定位。易错点：注意区分相对定位与绝对定位的用法。 答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。 巩固练习 巩固“违停查

26、询”的制作学完知识点后，让学生再制作一次“违停查询”页面，以此使学生更熟练地掌握如何使用定位属性控制元素的位置，以及z-index层叠等级属性控制元素的堆叠顺序。 通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。 布置作业 完成“补充案例”，通过平台提交给教师，教师下节课进行点评。 复习本课时的所有知识点和案例，加强巩固。第五课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对“元素的浮动属性”、“清除浮动”及“overflow属性”使用的熟练程度，以及对如何使用“元素的定位属性”等知识点的掌握程度。 第六课时（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。 布置作业 完成课后“动手实践”，并扫描二维码查看答案。 预习8.1节【案例23】动态获取用户密码。教学后记