HTML5+CSS3网页设计实战 教案 3.2 相关案例练习 2

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。23.1~2盒子模型特点和标准盒模型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：理解容器坍塌的起因和解决方式。能力目标：具备将因坍塌原因导致布局混乱的网页进行修复的能力。素养目标：通过严格对容器高度进行定义，强调编程的严谨性。盒子模型相关案例练习浮动对页面元素的影响。通过相关案例的属性设置前后对比，让学生加强理解与认识。解决容器塌陷的异常布局。通过提问、引导的方式让学生掌握解决异常的思维。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习图片尺寸大于容器尺寸时，可以考虑哪些方式来处理？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入同学们在练习过程中，经常碰到这种情况：明明看上去一样的做法，html结构正确，css中主要属性也写上去了，效果却异常混乱。这大部分的原因来自于容器的高度未申明，导致有些元素浮动后，造成容器塌陷的情况。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授常见布局异常——容器塌陷问题。【增加课堂趣味】熊猫是杂食性动物还是素食性动物？我国目前大约有多少只熊猫？熊猫一出生有多重？短距离情况下，人和熊猫哪个跑得快？1.分析问题的起因。在标准流布局下容器不设置height属性，可以由子元素撑开高度，但如果子元素使用了浮动或定位方式后，就会出现该父容器高度值被认为是0px的情况，也就产生了高度塌陷问题。把容器想象成一根老款的橡皮筋。橡皮筋没绑东西前可以看出理解高度为0。2.讨论解决思路。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施1.以标准流布局，布局无异常。2.以浮动流布局，观察异常的结果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10Html结构容器关系正确30Css代码容器高度设置正确，样式最终效果一致60总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）容器坍塌的起因和解决方式。（2）具备将因坍塌原因导致布局混乱的网页进行修复的能力。