HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案09 《使用CSS3定位布局页面》.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案09 《使用CSS3定位布局页面》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案09 《使用CSS3定位布局页面》.docx（6页珍藏版）》请在第壹文秘上搜索。

1、教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课公共必修课口公共选修课专业必修课口素版拓展必修课专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业

2、知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时6授课日期教学任务f(mcSS3定位布用页面3授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图铁学目标索质目标：1,培养学生团队合作精神;2.培弊学生分析问题、解决问甥的能力.知识目标：1.了解使用posi

3、tion四种定位方式的特点：2.理解z-index属性调整定位元素堆鞋方式。能力11标：1.常握常见元素款心翅盅效果的实现：2.挈提页面固定定位实现功能按钮.教学内容1 .四种定位方式2 .四种定位方式的对比3 .Z-index点难点教学或点:1 .四种定位方式2 .四种定位方式的对比3 .Z-index教学选点：1.四种定位方式教学方法谈论法、讲授法、演示法、练习法X材资*文本素材回实物展示必PpT幻灯片口音物素材0视频素材0动画素材0图形/图像素材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶假学反思注：教案按授课次数填用，每次授课均应埴写份本衣。求处班校课可不另填写教案,教学过

4、程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；网页内容显说的方式是平面的,但网页中要表达的内容并不一定也是平面的,大多情况下.我们需要通过一定的元素层登覆英.绐浏览齐营造出立体空间速或者层次次.我们将在项目首页的课程列表部分通过定位样式实现课程用标效果、实现页面头帏粘性定位、实现固定位置的置顶按钮,通过讲斜相对定位和绝对定位的应用.同学们要提离多角度分析问遨,全方面看待问题的能力.二、新知识点、技能点讲解【的X分立】新课讲解I：【约IO分钟】教师，在CSS中有三种基本的布局机制.分别是标准温浮动和定位.positionW性与f1.oat屈性样都是CSS排版中非常

5、我要的概念.position0性从字面义即是位置的设？1.进行子元素在父元素内部的位巴确定，.依说明static默认tf1.,没有定位作用.re1.ative相对定位.主要表示根州力身原位咫进行位置偏移.abso1.ute绝对定位.主要用来在具有定位研性的父元素中，根据父元索的边界距肉来确定元泰位置.fixed固定定位,类似于绝对定位，固定定位的定位参考依据为浏览器的可视区域.op距离Ift,配合re1.ativewabso1.utexfixed进行定位.right同top履性Q1.eft同Iop属性。bottom1.111.top制性.（案例演示）新课讲解2；【约15分钟】教师:使用re1.

6、ative属性值设置元素的相对定位，除了符position属性设置为re1.ative之外，还衢要指定一定的偏移位,水平方向使用ICft或rightM性来指定，垂直方向使用top或bouon料性来指定。（案例演示）学生：（讨论分析）教师:教师：Micky是CSS3新增的属性：可以说是默认static定位和固定定位fixed的结合：当元素可以正常完整的显示在页面可视区域中的，和标准文档流中的普通元素相同：但是一旦由于页面潦动或其他原因导致不能在页而可视区域内显示时.便会显示H；同固定定位一样的特性.固定于页面固定位置.不的滚动而改变位置.拈性定位的出现是为了好决，之前如果想实现负面内容不在可视区

7、域时，可以动态进行定位方式的变更，必沏要借助j$进行更杂繁殖的页面滚动状态的判断弊端，作为CSS3的新特性,当前主流浏览潺版本均能正常的支持该样式蟠性.新课讲解6：【约20分钟】教师：在上面的例子中我W发现定位的元素.岐终的显示都是悬浮于标准文档流之上，那么如果两个定位元素的定位出现了重叠.那么其堆登后的效果应该是如何?学生：（思考讨论）.后面的在上。我师：（案例演示）根据以上结果可以推出，如果定位元素出现了堆段现象时，后出现在htm1.代码的定位元南的权重更高,会很盅在之前的定位元素之上显示。般么我们是否可以自定义这个权重.从而灵活掖制定位元素的堆登结果？答案是肯定的，这里我门是通过zind

8、ex属性来定义材个定位元素的堆我权正，Z-index瞩性在立体空间中表示直于负面方向的Z轴.z-ixkxM性的Ift为整数,可以是正数也可以是负数.Z-indexM件默认他为0.z-index限性值大的层位于其值小的层上方.如果出现权重相同的情况,则根据元素出现破序.后出现的权由较大会在显示在上层.新课讲解7：【约20分钟】教师：演示操作上机任务制作课程层叠角标学生:跟做新课讲解8：【约20分钟】教师；演示操作上机任务-绝对定位实现登录页面居中学生：跟做新课讲解9：【约20分钟】教师：演示操作上机仔务-固定定位置顶按钮学生：跟做新课讲解10：【约20分钟】教师；演示操作上机任务拈性定位页面通用头部学生：跟做三、敦学总结【妁6分骨】本单元主要讲述定位概念，元素的定位秘性及网页常见的几种定位模式，并且完成了新公课堂夜日首页课程列表、转录页面和通用头部的页面制作.通过本单元的学习，读并应该熟练运用定位进行页面布局，掌握4种行用的定位的特点和设议方法。定位是CSS中的祺点内容，读者应该多加练习,加深理解。四、课后作业【的5分立】1 .整理课程知识笔记2 .尝试完成扩展实践.参考效果图制作用户头像呢称右上角向标消息提醒.