5.5.3-网页布局中相对定位（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 网页布局中相对定位 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解相对定位（relative）的概念和特点。 · 掌握相对定位在网页布局中的应用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 相对定位的概念及特点。 2. 相对定位在网页布局中的应用。 教学难点 1. 如何理解相对定位与其他定位方式的区别。 2. 如何在网页布局中合理运用相对定位。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际网页案例，让学生理解相对定位的应用。 · 实践操作法：让学生动手实践，通过编写代码来掌握相对定位的使用方法。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上一节课学习的CSS基本样式属性和静态定位。 · 展示几个网页布局实例，引导学生思考布局的实现方式。 2分钟 讲授新课 练习指导 ### 相对定位（relative） 相对定位是 CSS 中的一种定位类型，它允许元素相对于其正常位置进行定位。当元素的 `position` 属性设置为 `relative` 时，元素会相对于其原有位置进行定位，同时保留其原有的位置。 #### 概念和特点 1. **概念**：相对定位是元素相对于其正常位置进行定位的一种方式。 2. **特点**： - 元素相对于其原有位置进行定位，可以通过 `top`、`right`、`bottom` 和 `left` 属性进行微调。 - 元素保留其原有的位置，不会脱离正常的文档流。 - 对于其他元素来说，相对定位的元素仍然存在于正常的文档流中，不会影响其他元素的位置。 #### 相对定位在网页布局中的应用 相对定位在网页布局中的应用主要体现在以下几个方面： 1. **微调元素位置**：相对定位可以用于微调元素的位置，而不影响其他元素的布局。例如，对于一个文本框，我们可以使用相对定位来调整其与标签的距离。 2. **实现简单的动画效果**：通过改变相对定位元素的 `top`、`right`、`bottom` 和 `left` 属性值，可以实现简单的动画效果。 3. **与其他定位方式结合**：相对定位的元素可以与其他定位方式（如绝对定位和固定定位）的元素一起使用，以实现更复杂的布局效果。 #### 示例 下面是一个简单的相对定位示例，展示了如何使用相对定位进行网页布局： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .container { width: 80%; margin: 0 auto; } .header, .footer { background-color: #f1f1f1; padding: 20px; text-align: center; } .main { display: flex; justify-content: space-between; } .sidebar, .content { width: 48%; padding: 20px; background-color: #e1e1e1; } .sidebar { position: relative; top: -20px; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="main"> <div class="sidebar">Sidebar</div> <div class="content">Content</div> </div> <div class="footer">Footer</div> </div> </body> </html> ``` 在这个示例中，我们使用相对定位来实现一个简单的三栏布局，包括头部、侧边栏和内容区域。通过设置侧边栏的 `position` 属性为 `relative` 并调整 `top` 属性值，我们可以使侧边栏向上移动，与内容区域重叠。这些元素按照正常的文档流进行排列，不需要额外的定位属性设置。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 完成课本上的习题，巩固所学知识。 2. 在网上找一些网页布局实例，尝试使用相对定位进行复现。 12分钟 布置作业 1. 设计一个简单的网页布局，要求使用相对定位实现。 2. 编写HTML和CSS代码，实现所设计的布局。 1分钟 总结回顾 1. 相对定位的概念及特点。 2. 相对定位在网页布局中的应用。 通过本节课的学习，希望同学们能够掌握相对定位的使用方法，并能在实际网页设计中灵活运用。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$