教案
序号：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“新闻列表”网页
发布任务，学生能够有目标地进行学习
教师讲解
学生操作巩固
此部分为教学难点，教师详细讲解，配合任务操作，帮助学生理解掌握。
理论讲解
教师操作演示
学生练习
学生练习