HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第12章 控制元素布局.doc

PAGE7

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

12

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第12章控制元素布局

课外学习任务：

（1）课前：

以小组为单位，讨论控制元素布局的相关知识，并以PPT的形式记录下来。

（2）课后：

=1\*GB3①通过绝对定位的方式设置元素的位置。

=2\*GB3②通过浮动属性设置元素的位置。

=3\*GB3③通过清除浮动属性，元素可恢复到默认的位置。

教学目标：

知识目标

掌握块级元素和内联元素布局。

掌握定位和浮动样式的使用。

掌握溢出与剪切方法。

掌握对象的显示与隐藏方法

能力目标

能够独立实现元素的定位和浮动；

能够独立应对元素的溢出和裁剪的处理。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握控制元素布局的能力，理解并应用专业知识。

重点难点及解决方法：

（1）重点：定位和浮动

解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解定位和浮动的相关属性，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解元素定位和浮动的方法；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：溢出和裁剪

解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中遇到元素溢出后的各种处理方式。帮助学生掌握溢出和裁剪的的实现方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.块级元素和内联元素

【块级元素和内联元素的概念】

块级元素生成的是一个矩形框，并且和相邻的块级元素依次垂直排列，不会排在同一行。例如，p、ul、h1、form等这些元素都是块级元素，它们总是以一个块的形式出现，总是单独占据一行。

内联元素通俗来说就是文本的显示方式，我们常用的a、img、input都属于内联元素。内联元素的显示特点就是像文本一样显示，各个元素之间横向排列，到最右端自动换行，不会独自占据一行。当然，块级元素也能变换成内联元素，这时就要用到下面所讲的定位和浮动了。

【div元素和span元素】

为了更好地理解块级元素和内联元素，这里重点介绍在CSS布局中经常使用的div元素和span元素。利用这两个元素，加上CSS对其样式的设计，可以很方便地实现各种效果。

1．div元素

div?元素简单而言就是一个独立的对象，它是一个标准的块级元素。用它可以容纳各种元素，从而方便排版。用CSS设置样式时，只需要对div进行相应的控制，其中包含的各个元素都会随之改变。div元素的语法格式如下。

div

各种元素或文字

/div

2．span元素

span元素与div元素一样，作为容器标签被广泛应用在HTML中。在span和/span之间同样可以容纳各种HTML元素，从而形成独立的对象。span元素与div元素的区别在于，div元素是一个块级元素，它包围的元素会自动换行，而span元素是一个内联元素，它包围的元素不会自动换行。span元素没有结构上的意义，纯粹是为了应用样式。当其他内联元素都不适合时，就可以使用span元素。span元素的语法格式如下。

span

各种元素或文字

/span

2.定位

【定位模式】

在CSS中可以使用position属性来设置定位的方式，position属性的语法格式如下。

position:static|relative|absolute|fixed|inherit;

各属性值的含义如下。

static：静态定位，即无特殊定位。元素以普通方式生成，块级元素生成的是一个矩形框，是文档流中的一部分。而内联级框是由一