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

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。23.1~2盒子模型特点和标准盒模型该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1） 容器溢出属性的设置。（2） 容器设置背景图。（3） 列表中的文本超过li元素宽度的处理。能力目标：（1） 具备将大图合理展示到较小容器的能力。（2） 具备根据图片特点选择合理的处理方式。素养目标：（1） 通过关于消防英雄的布局练习，让学生意识到校园防火的重要性，火情发生时有许多逆行者保护着人民安全。盒子模型相关案例练习Overflow溢出属性，背景图设置及X/Y值偏移。通过相关案例的属性设置前后对比，让学生加强理解与认识。文本溢出显示为省略号。通过教学主控软件控制半屏，与学生同步敲打代码完成案例。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习标准盒子模型的相关属性。一个容器想要在水平位置居中，应该设置什么属性？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入我们在网页中下载图片时，经常发现下载的图片尺寸远大于页面显示的尺寸，这跟我们所说的页面图片应当与容器尺寸保持一致，以免图片失真。那究竟为何？考虑到新闻类图片尽可能保留大点的尺寸以备不时之需，比如自适应网页中容器的宽度有可能扩大。如何设置大尺寸的图片塞到较小的容器？听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授1. 子元素宽度与父容器宽度的处理。【案例2】子元素宽度大于父容器宽度时的处理手法。【提问】在校园安全中，如何提高防火意识？☆思政讲解：在火灾突发的险情时刻，有一群负重前行的人，他们身着厚重的防护服，日夜奋战在灭火最前线，与时间赛跑，与死神较量。他们的眼中充满坚定与勇气，即便身心疲惫，也从未放弃。消防官兵，用汗水和生命筑起了一道坚固的防线，守护着人民的安全。他们是时代的英雄，值得我们永远铭记与感激。思路一：结合overflow设置超过区域隐藏思路二：强行修改宽高思路三：将图片设置为背景图，背景图片X、Y偏移一定比例2. 关于文字段落宽度超过容器宽度时的处理。把过长文字用省略号替代，既起到提示有后续文字的作用，也不会让文字被切割的支离破碎。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例2】子元素宽度大于父容器宽度时的处理手法。（1）编写消防英雄们的相关页面html结构（2）在浏览器预览后，发现图片过大（3）采用以下方法逐一尝试页面效果。思路一：结合overflow设置超过区域隐藏思路二：强行修改宽高思路三：将图片设置为背景图，背景图片X、Y偏移一定比例【案例3】文字超过容器宽度时，后续文字改成省略号。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分站点结构目录结构正确，文件命名规范。10溢出属性设置图片显示尺寸容器关系正确，样式正确20强制修改图片尺寸宽高属性值定义准确。20设置背景图显示图片尺寸属性正确，X/Y值偏移合理、科学。20文本段显示省略号相关属性设置正确。30总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求大家掌握：（