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

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 网页布局中定位属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握CSS中的定位属性（position、top、right、bottom、left）。 · 了解静态定位、相对定位、绝对定位和固定定位的概念及特点。 · 学会使用定位属性进行网页布局。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. 定位属性的概念及作用。 2. 各种定位方式的特点和使用场景。 3. 使用定位属性进行网页布局的方法。 教学难点 1. 相对定位与绝对定位的区别和联系。 2. 如何灵活运用定位属性进行复杂的网页布局。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际网页案例，让学生理解定位属性的应用。 · 实践操作法：让学生动手实践，通过编写代码来掌握定位属性的使用方法。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上一节课学习的CSS基本样式属性。 2. 展示几个网页布局实例，引导学生思考布局的实现方式。 3. 提出问题：你们知道这些布局是如何实现的吗？今天我们将学习使用定位属性来实现这些布局。 2分钟 讲授新课 练习指导 ### CSS 中的定位属性 在 CSS 中，定位属性是用于控制元素在页面上的位置的一组属性。它们包括： - `position`：设置元素的定位类型。 - `top`：设置元素距离其定位容器的顶部距离。 - `right`：设置元素距离其定位容器的右侧距离。 - `bottom`：设置元素距离其定位容器的底部距离。 - `left`：设置元素距离其定位容器的左侧距离。 ### 定位类型 `position` 属性有四个可选值，分别对应四种定位类型： 1. **静态定位（static）**：默认值。元素按照正常的文档流进行排列，不会受到 `top`、`right`、`bottom` 和 `left` 属性的影响。 ```css .element { position: static; } ``` 2. **相对定位（relative）**：元素相对于其正常位置进行定位。元素仍然保留其原有的位置，但可以通过 `top`、`right`、`bottom` 和 `left` 属性进行微调。 ```css .element { position: relative; top: 10px; left: 20px; } ``` 3. **绝对定位（absolute）**：元素相对于其最近的非静态定位的祖先元素进行定位。元素会脱离正常的文档流，不影响其他元素的位置。 ```css .parent { position: relative; } .element { position: absolute; top: 10px; left: 20px; } ``` 4. **固定定位（fixed）**：元素相对于浏览器窗口进行定位。元素会脱离正常的文档流，不影响其他元素的位置。即使页面滚动，元素也会保持在固定位置。 ```css .element { position: fixed; top: 10px; left: 20px; } ``` ### 定位属性的特点 - **相对定位**：元素相对于其原有位置进行微调，不影响其他元素的位置。 - **绝对定位**：元素相对于其最近的非静态定位的祖先元素进行定位，脱离正常的文档流。 - **固定定位**：元素相对于浏览器窗口进行定位，即使页面滚动也会保持在固定位置。 通过掌握这些定位属性和定位类型，我们可以在网页布局中灵活地控制元素的位置。这对于实现复杂的网页设计和交互效果非常有用。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 完成课本上的习题，巩固所学知识。 2. 在网上找一些网页布局实例，尝试使用定位属性进行复现。 12分钟 布置作业 1. 设计一个简单的网页布局，要求使用定位属性实现。 2. 编写HTML和CSS代码，实现所设计的布局。 1分钟 总结回顾 1. 定位属性的概念及作用。 2. 各种定位方式的特点和使用场景。 3. 使用定位属性进行网页布局的方法。 通过本节课的学习，希望同学们能够掌握定位属性的使用方法，并能在实际网页设计中灵活运用。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$