HTML5+CSS3网页设计实战 教案 5.5 基础练习-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。2本章基础练习该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）理解z-index概念以及属性值作用。（2）巩固本章知识点的应用。能力目标：（1）具备利用z-index属性完成容器层叠效果的能力。素养目标：案例“微光2023”，凡人善举，传递着普通人的温暖，鼓励每个人在生活中传递每一份看似微小实则有力的温暖行为。布局之基础练习z-index属性的意义。通过相关案例的属性设置前后对比，让学生加强理解与认识。利用z-index属性完成容器层叠。通过“凡人善举”案例及相关思政讲解，让难点与课堂思政结合。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习请描述粘滞定位技术在网页设计中的应用场景。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入本次课主要加强对布局能力的锻炼，在练习过程中，对z-index属性重点做一介绍。z-index是一个CSS属性，用于控制元素在页面上的层叠顺序（即堆叠顺序）。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授一、z-index的属性值auto：默认值，表示元素的堆叠顺序与父元素相同。如果父元素及各级祖先元素均未设置z-index，则元素堆叠顺序类似于z-index为0的情况。number：整数数值，用于指定元素的堆叠顺序。数值越大，层级越高；数值越小，层级越低。在兼容所有浏览器的取值范围内（-2147483648~2147483647），可以灵活设置以满足不同的布局需求。inherit：表示元素继承父元素的z-index属性值。二、z-index的作用原理z-index属性仅在设置了position属性为relative、absolute、fixed或sticky的元素中起作用。在这些情况下，z-index决定了元素在垂直于显示屏方向（Z轴）上的层叠顺序。当多个元素重叠时，具有较高z-index值的元素将覆盖具有较低z-index值的元素。【练习1】绝对定位中的z-index属性可以帮助我们决定元素的上下重叠顺序。利用z-index属性将多张图片层叠在一起，效果如图5-59所示。☆思政讲解：凡人善举，传递着普通人的温暖，鼓励每个人在生活中传递每一份看似微小实则有力的温暖行为。听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】z-index属性将多张图片层叠在一起。（1）先完成大体框架的代码，如图5-60所示。（2）保存文件后，预览的初步效果。（3）给每张图片不同的z-index值，数字越大，元素堆叠越在前面，代码如图5-62所示。（4）保存文件，预览最终效果是否正确。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10主体容器html结构代码正确，缩进正确，有必要的注释语句，容器名称合理。20z-index属性属性值正确。30Css样式选择器合理，属性值合理。20整体页面效果运行效果与原图一致。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）理解z-index概念以及属性值作用。（2）巩固本章知识点的应用，通过案例“微光20