《网页设计与制作（活页式）》 教案 项目7 布局网页.docx

《网页设计与制作》

教学设计

课程名称：网页设计与制作

授课年级：20年级

授课学期：20学年第一学期

教师姓名：老师

20年月日

课题名称

项目七布局网页

计划课时

课时

内容分析

将多个块合理地安排到网页上是网页布局的关键，这也是网页制作中核心的问题。传统网页是采用表格进行布局的，但这种方式已经退出设计舞台，取而代之的是符合Web标准的DIV+CSS布局方式。

教学目标

理解元素的浮动属性

掌握元素的各种定位方法

掌握常用的DIV+CSS布局方式

重点及措施

教学重点：合理设置元素浮动；使用DIV+CSS布局页面；制作学院网站首页

措施：通过上机操作加强学习和补充案例进行巩固。

难点及措施

教学难点：制作学院网站首页

措施：通过上机操作加强学习和补充案例进行巩固。

教学方式

教学采用教师课堂讲授为主，使用教学PPT讲解。

教

学

过

程

任务7.1布局常用属性

7.1.1元素的浮动

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

为什么要设置元素的浮动属性？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。

知识点讲解

讲解元素的浮动

（1）教师展示PPT，对元素的浮动进行具体讲解。

默认情况下，网页中的块元素会以标准流的方式进行排列，即将块元素从上到下一一罗列，但在网页实际排版时，有时需要将块元素进行水平排列，这就需要为元素设置浮动属性。

所谓元素的浮动是指设置了浮动属性的元素会脱离标准流的控制，移动到指定位置。在CSS中，通过float属性来设置左浮动或右浮动，其语法格式如下：

选择器{float：left|right|none；}

设为left或right，使浮动的元素可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止。若不设置float属性，则float属性值默认为none，即不浮动。

（2）学生自主提问，教师对疑难问题进行解答。

讲解实例1未添加float属性

（1）教师展示PPT，对实例1未添加float属性进行具体讲解。

实例1-1未添加float属性

实例1-2未添加float属性

（2）学生自主提问，教师对疑难问题进行解答。

讲解实例2-1未添加float属性

（1）教师展示PPT，对实例2-1未添加float属性进行具体讲解。

实例2-1未添加float属性

实例2-2添加float属性的页面

若要段落的文字按原文档流的方式显示，即不受前面浮动元素的影响，则需要清除浮动。在CSS中，使用clear属性清除浮动，其语法格式如下：

选择器{clear:left|right|both;}

其中，值为left时，清除左侧浮动的影响；值为right时，清除右侧浮动的影响；值为both时，同时清除左右两侧浮动的影响。常用的属性值是both。

实例2-3清除浮动影响

需要注意的是，clear属性只能清除元素左右两侧浮动的影响，而在制作网页时，经常会遇到一些特殊的浮动影响。例如，对子元素设置浮动时，如果不对其父元素定义高度，那么子元素的浮动会对父元素产生影响

实例3子元素浮动对父元素的影响

实例3-1子元素浮动对父元素的影响

子元素和父元素为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子元素浮动对父元素的影响。需要使用overflow属性清除浮动，从而使父元素适应子元素的高，进而显示所设置的颜色，

（2）学生自主提问，教师对疑难问题进行解答。

7.1.2元素的定位

内容学习

分组讨论

对新课进行讲解前，先让学生分组讨论以下问题：

元素的定位有哪些方式？

请小组代表对以上问题发表见解。

教师对上述问题进行解释：

答案：

静态定位、相对定位和绝对定位。

知识点讲解

讲解元素的定位属性

（1）教师展示PPT，对元素的定位属性进行具体讲解。

1）定位方式

在CSS中，position属性用于定义元素的定位方式，其常用语法格式如下：

选择器{position:static|relative|absolute;}

position属性值的含义及解释

2）确定元素位置

position属性仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过left、right、top、bottom四个属性来精确定位元素的位置。

元素精确定位的属性值及含义

（2）学生自主提问，教师对疑难问题进行解答。

讲解静态定位

（1）教师展示PPT，对静态定位进行具体讲解。

静态定位（static