HTML5+CSS3网页设计实战 教案 5.2 浮动流布局-3

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。25.2浮动流布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 了解容器坍塌现象的起因。（2） 掌握如何解决容器坍塌问题。（3） 强化浮动布局能力。（4） 完成“让中国挺起脊梁的科学家”布局案例。能力目标：具备解决容器坍塌现象的能力。素养目标：案例“让中国挺起脊梁的科学家”，缅怀老一辈科学家为中国的富强所贡献的光辉事迹。浮动流布局的应用练习容器坍塌现象的起因、解决步骤。引导学生研究坍塌出现的原因，深刻了解解决的思路。完成图文混排布局效果。以两种思路进行布局，让学生扩展思维。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习标准流与浮动流布局的区别。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入今天的练习将继续强化对浮动流布局的认识。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1.高度塌陷的解决方案（1）在塌陷的父元素的最后添加一个空白的div，使用<divstyle="clear:both"></div>来清除浮动。但这种方式会在页面中添加多余的结构，导致代码冗余。（2）使用after伪类向父元素后添加一个块元素，并对其清除浮动。这种方式不会向页面中添加多余的结构，且能很好地解决高度塌陷问题。（3）给父级元素添加高度，这种方法虽然简单，但不能实现宽高自适应。【案例8】使用ul标签完成如图5-36所示的图文混排效果。☆思政讲解：效果图中的各科学家所取得的成就、荣誉。思路（一）：使用2个ul标签，分别对图、文字进行组织，如图5-37所示。从图文配对关系、js脚本节点控制、样式维护的角度来看，都不合理。图图1配图的文字1图2配图的文字2图3配图的文字3图4配图的文字4图5-37容器结构图思路（二）：使用一个ul标签，每张图片和对应文字放入在li标签内，如图5-38所示。lilililili图1配图的文字1图2配图的文字2图3配图的文字3图4配图的文字4听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例7】解决容器坍塌现象。（1）敲入下面HTML和CSS代码，如图5-33所示。（2）保存文件后，预览的效果。提问：预览出现布局异常，导航条窜到上方，而且导航文字呈上下漂浮，原因在哪里？应该如何调整？（3）设置logo-box这个容器的高度，问题得以解决。【案例8】使用ul标签完成如图5-36所示的图文混排效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展在【案例7】练习中，如果我们采用新增一个空白容器消除浮动影响的话，可以这么写代码，如图5-35所示。任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10练习1的容器坍塌现象能解决坍塌问题。30练习2的html结构结构正确，缩进正确。20练习2的css样式选择器合理，属性值合理。30练习2的整体页面效果运行效果与原图一致。10总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解容器坍塌现象的起因。（2）掌握如何解决容器坍塌问题。（3）完