Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 教案 第11讲次 任务12 元素的定位.docx

教案

序号：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“新闻列表”网页

发布任务，学生能够有目标地进行学习

教师讲解

学生操作巩固

此部分为教学难点，教师详细讲解，配合任务操作，帮助学生理解掌握。

理论讲解

教师操作演示

学生练习

学生练习