5.5.6-网页布局中zindex层叠等级属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 网页布局中zindex层叠等级属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解z-index属性的概念和作用。 · 掌握z-index属性在网页布局中的应用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. z-index属性的概念及作用。 2. z-index属性在网页布局中的应用。 教学难点 1. z-index属性的概念及作用。 2. z-index属性在网页布局中的应用。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际网页案例，让学生理解z-index属性的应用。 · 实践操作法：让学生动手实践，通过编写代码来掌握z-index属性的使用方法。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上一节课学习的CSS定位属性（position、top、right、bottom、left）。 · 展示几个网页布局实例，引导学生思考布局的实现方式。 2分钟 讲授新课 练习指导 ### z-index属性 z-index属性是CSS中的一个重要属性，用于控制元素在页面上的堆叠顺序。当多个元素重叠时，z-index属性值较高的元素会覆盖在z-index属性值较低的元素之上。 #### 概念和作用 1. **概念**：z-index属性用于设置元素在页面上的堆叠顺序。 2. **作用**：通过设置z-index属性值，可以控制元素在页面上的层次关系，使得某些元素始终位于其他元素之上。 #### z-index属性在网页布局中的应用 z-index属性在网页布局中的应用主要体现在以下几个方面： 1. **控制元素堆叠顺序**：在页面布局中，我们可以通过设置元素的z-index属性值来控制它们的堆叠顺序。z-index值越高的元素会覆盖在z-index值越低的元素之上。 2. **实现弹出窗口、浮动元素等效果**：通过设置z-index属性值，可以实现弹出窗口、浮动元素等效果，使得某些元素始终保持在页面的可见范围内。 3. **优化用户体验**：在某些情况下，我们希望某些元素（如导航栏、按钮等）始终保持在页面的可见范围内，这时可以使用z-index属性来实现。 #### 示例 下面是一个简单的z-index属性示例，展示了如何使用z-index属性控制元素的堆叠顺序： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box1, .box2 { position: absolute; width: 100px; height: 100px; } .box1 { background-color: red; z-index: 1; } .box2 { background-color: blue; left: 50px; top: 50px; z-index: 2; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> ``` 在这个示例中，我们创建了两个重叠的矩形元素。通过设置它们的z-index属性值，我们可以控制它们的堆叠顺序。在这个例子中，蓝色矩形的z-index值为2，红色矩形的z-index值为1，因此蓝色矩形会覆盖在红色矩形之上。 需要注意的是，z-index属性只对定位元素（position属性值为relative、absolute、fixed的元素）有效。在实际应用中，要根据需求合理设置z-index属性值，以实现所需的布局效果。同时，要注意z-index值不要设置得过大或过小，以免影响页面的可读性。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 完成课本上的习题，巩固所学知识。 2. 在网上找一些网页布局实例，尝试使用z-index属性进行复现。 12分钟 布置作业 1. 设计一个简单的网页布局，要求使用z-index属性实现元素的层次分明效果。 2. 编写HTML和CSS代码，实现所设计的布局。 1分钟 总结回顾 1. z-index属性的概念及作用。 2. z-index属性在网页布局中的应用。 通过本节课的学习，希望同学们能够掌握z-index属性的使用方法，并能在实际网页设计中灵活运用。 补充说明： 第 1 页，共 2 页 学科网（北京）股份有限公司 $$