HTML5+CSS3网页设计实战 教案 5.3 定位流布局-固定定位-1

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。25.3定位流布局该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）了解固定定位的特点及使用场景。（2）掌握固定定位的代码实现。（3）“返回顶部”功能和页头固定在顶部布局的制作。（4）回忆锚点链接知识点。能力目标：（1）具备使用固定定位完成“返回顶部”交互的能力。（2）具备制作页头部分固定效果的代码实现能力。素养目标：通过编程实践，锻炼学生的逻辑思维，使其能够系统地分析问题并找到解决方案，培养严谨的逻辑思维与问题解决能力。固定定位固定定位的特点及使用场景，固定定位的用法格式。通过‌引导学生回忆固定定位的场景，便于对固定定位概念有所认识。“返回顶部”交互的实现。通过相关案例的属性设置前后对比，让学生加强理解与认识。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习绝对定位与相对定位的区别，绝对定位布局常见的应用场景。回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入HTML中的固定定位（FixedPositioning）是一种CSS定位方式，它让元素相对于浏览器窗口进行定位，而不是相对于祖先元素进行定位。当元素被设置为固定定位时，它会脱离正常的文档流，并固定在浏览器窗口的某个位置，即使页面滚动，该元素也会始终停留在该位置。固定定位的应用场景：（1）导航栏：页面的导航栏通常是固定定位的，这样可以让用户始终看到导航栏，方便用户进行页面跳转，提高用户体验。（2）广告栏：固定定位可以保持广告栏始终可见，这对于提高广告的曝光率和点击率非常有帮助。（3）重要提示或按钮：在页面中，可能需要某些提示信息或按钮始终可见，以便用户随时点击或查看。例如，一个“返回顶部”的按钮或一个重要通知的提示框，都可以使用固定定位来实现。（4）悬浮侧边栏：在某些长页面中，可能希望将侧边栏固定在页面的某个位置，以便用户可以随时查看侧边栏中的内容。这同样可以通过固定定位来实现。（5）创建特殊效果：固定定位还可以用于创建一些特殊的页面效果，如固定背景图、悬浮的分享按钮等，这些效果可以增加页面的互动性和吸引力。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授5.3.3固定定位Fixed固定（fixed）定位元素会脱离标准流,不占用布局中的位置,漂浮在任何元素上方。固定定位只相对于浏览器可视窗口进行定位，不管浏览器大小或者滚屏多少,都是基于可视窗口显示，与父元素没有任何关系，可以理解为“以浏览器为参照物，和父元素没有任何关系”。固定定位的应用场景主要有固定导航、固定侧边栏、广告。用法示例：#to-top{position:fixed;right:50px;bottom:50px;}听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【案例13】完成如图5-50所示的网页页脚区域附件的“返回顶部”链接。（1）对应的HTML与CSS代码，如图5-51所示。（2）添加锚点链接，使“返回顶部”具备跳转到页面顶部功能，对应代码如图5-52所示。【案例14】完成如图5-53所示的页头固定定位在页面顶部的效果。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分网站结构站点目录正确，文件名规范。10案例1-返回顶部Html结构正确，锚链接等设置正确。30选择器合理，属性值合理。20案例2-固定页头部分Html结构正确，缩进正确20选择器合理，属性值合理。20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课的学习：（1）了解固定定位的特点及使用场景。（2）掌握固定定位的代码