教案
序号:11
授课日期
课时数
4
章节名称
任务12元素的定位
教学内容
重点
静态定位、相对定位、绝对定位、固定定位。
难点
绝对定位的使用。
教学目的与要求
掌握元素的定位方式:静态定位(static)、相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。
了解不同定位模式的应用场合。
教学方法
与手段
教师采用任务驱动法,使用教学PPT辅助授课。
教师操作演示,学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题,通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
(任务12元素的定位
12.1元素的定位模式与边偏移、12.2静态定位、12.3相对定位)
实操任务目标发布
实战演练——制作旅游景点推荐网banner
图11-SEQ图\*ARABIC\r11“旅游景点推荐网”banner
强化训练——制作个人博客首页
图11-SEQ图\*ARABIC2“个人博客首页”网页
知识准备
元素的定位
可以精确定义一个元素的准确位置
(1)定位模式:position属性
static:静态定位
relative:相对定位
absolute:绝对定位
fixed:固定定位
(2)边偏移:
left:左侧偏移量
right:右侧偏移量
top:顶端偏移量
bottom:底部偏移量
静态定位(static)
静态定位(static):网页元素默认的定位方式,元素按照标准流进行布局。
不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。
相对定位(relative)
相对定位(relative):网页元素相对于其在原文档流的位置进行定位,当元素设置为相对定位“position:relative;”,该元素就会相对于其自身的默认位置进行偏移,但是它在文档流中的位置仍然保留。
子任务:
图11-SEQ图\*ARABIC3元素相对定位后的效果
第二学时
(任务12元素的定位
12.4绝对定位、12.5固定定位、12.6z-index层叠等级属性)
知识准备
绝对定位
绝对定位(absolute):将元素相对于距离其最近的、已经定位(相对、绝对或固定定位)的父元素进行定位,若所有父元素都没有定位,则依据body根元素(浏览器窗口)进行定位。
当元素设置为绝对定位“position:absolute;”,该元素就会相对于其父元素或body根元素进行偏移,脱离文档流,它在文档流中的位置将被其他元素占据。
子任务:
图11-SEQ图\*ARABIC4元素绝对定位后的效果
图11-SEQ图\*ARABIC5按照“子绝父相”原则对元素进行绝对定位
固定定位
固定定位(fixed):相对于浏览器窗口进行定位。
元素设置为固定定位之后,就会脱离原来的文档流进行定位,原有的位置将被其他元素占据。
无论浏览器窗口大小如何改变,浏览器滚动条如何拖动,固定定位的元素都将显示在浏览器的固定位置。
z-index层叠等级属性
z-index层叠等级属性:定义叠加元素的堆叠顺序,其值可以取正整数、0、负整数,默认值为0,取值越大,定位元素的位置就越靠上。
图11-SEQ图\*ARABIC6元素叠加现象
第三学时
实战演练——制作旅游景点推荐网banner
案例描述:设计并制作旅游景点推荐网banner,网页效果如下图11-7所示。当鼠标移动到每个导航选项上时,超链接的样式将会发生变化,效果如图11-8所示。
图11-SEQ图\*ARABIC7“旅游景点推荐网”banner
图11-SEQ图\*ARABIC8鼠标指针移至没个导航选项时超链接的样式
图11-SEQ图\*ARABIC9“旅游景点推荐网”banner网页布局
第四学时
强化训练——制作个人博客首页
案例描述:设计并制作个人博客首页,网页效果如下。
图11-SEQ图\*ARABIC10“个人博客首页”网页
图11-SEQ图\*ARABIC11“个人博客首页”网页布局
课后实训
案例描述:设计新闻列表页面,效果如图所示。
图11-SEQ图\*ARABIC12“新闻列表”网页
发布任务,学生能够有目标地进行学习
教师讲解
学生操作巩固
此部分为教学难点,教师详细讲解,配合任务操作,帮助学生理解掌握。
理论讲解
教师操作演示
学生练习
学生练习