3.3-DIV+CSS3布局教学设计.docx

《3.3-DIV+CSS3布局教学设计.docx》由会员分享，可在线阅读，更多相关《3.3-DIV+CSS3布局教学设计.docx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.3 Div+CSS3布局教学设计课题名称Div+CSS3布局教学设计课 时4课时教学目标知识目标掌握DIV的使用、盒子模型的概念及使用、布局的常用属性能力目标通过学习DIV+CSS3来布局网页，让学生学习正确、合理运用技术，了解技术服务于内容的原则。情感目标培养学生独立思考、动手实践的能力；培养学生自主探究性、协作性学习能力；激发学生学习网页制作的兴趣。教学重难点重点DIV盒子模型的概念及布局方式难点布局浮动、定位的使用教学方法教法任务驱动法学法自主学习、小组合作学习环节教师活动学生活动课前准备自主学习课前下发阅读材料学生利用课余时间自主学习DIV+CSS3布局设计意图通过自主学习为课堂教

2、学打下基础，培养学生自主学习能力。课堂实施课堂引入展示一张未使用DIV+CSS3的网页和一张使用DIV+CSS3的网页进行对比。展示页面作品，通过对比来展示DIV+CSS3布局的重要性。设计意图讲述DIV+CSS3布局的优点，以激发学生学习兴趣。DIV布局1、 DIV概念Div元素是用来为HTML文档内大块的内容提供结构和背景的元素。Div 的起始标签与结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由标签的属性来控制，或者是通过使用CSS样式格式化这个块进行控制。Div是一一个容器，在HTML页面的每个标签对象几乎都可以称得上是一个容器，如使用段落标签对象。2、 Div的格式

3、内容内容3、 块元素与行内元素（1）块元素每个块级元素默认占一行高度，行内添加 一个块级元素后般无法添加其他元素(使用CSS样式进行定位和浮动设置除外)。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素。在HTML代码中，常见的块元素包括、等。在CSS样式中，可以通过display属性控制元素显示，即元素的显示方式。display属性的默认值为block,即元素的默认方式是以块元素方式显示。（2）行内元素行内元素也叫内联元素、内嵌元素等，行内元素般都是基于语义级的基本元素，只能容纳文本或其他内联元素:常见内联元素有标签。当display属性值被设置为inlin

4、e 时，可以把元素设置为行内元素。在常用的一些、和元素中等都是默认行内元素。学生学习，通过案例巩固DIV标签的应用，掌握块元素和行内元素的概念。设计意图了解并掌握DIV标签的应用、块元素和行内元素的概念。CSS盒子模型1、 CSS盒子模型概念盒子模型是由margin (边界)、 border (边框)、 padding (填充)和content (内容)几个部分组成的，此外，在盒模型中，还具有高度和宽度两个辅助属性。margin 属性margin属性称为边界或称为外边距，用来设置内容与内容之间的距离。border属性border属性称为边框，内容边框线，可以设置边框的粗细、颜色和样式等。pad

5、ding 属性padding 属性称为填充或称为内边距，内容与边框之间的距离。content属性称为内容，是盒子模具中必需的一部分，可以放置文字、图像等内容。2、 CSS3盒子模型的特性(1)边框默认的样式(border-style)可设置为不显示(none)。(2)填充值(padding)可以为负。(3)边果值(margin)可以为负，其显示效果在各浏览器中可能不同。(4)内联元素，例如，,定义上下边界不会影响到行高。(5)对于块级元素，未浮动的垂直相邻元素的上边界和下边界会被压缩。例如有上下两个元素，上面元素的下边界为10x，下面元素的上边界为5px，则实际两个元素的间距为10px(两个边

6、界值中较大的值),这就是盒模型的垂直空白边叠加的问题。(6)浮动元素(无论是左浮动还是右浮动)边界不压缩。如果浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容所能承受的最小宽度。(7)如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，这一点在使用Div+CSS布局的时候需要特别注意。3、 margin属性margin属性用于设置页面中元素和元素之间的距离，即定元素周围的空间范围，是页面排版中一个比较重要的概念。4、 border属性border属性是内边距和外边距的分界线，可以分离不同的HTML元素，border的外边是元素的最外围。在网页设计中，如果计

7、算元素的宽和高，则需要把border属性值计算在内。5、 Padding属性Padding包括4个子属性，分别用于控制元素4周的填充，分別是padding-top（上填充）、Padding-right (右填充)、padding-bottom(下填充)和padding-left(左填充)。学生学习，通过案例掌握盒子模型的概念与特性、以及盒子模型中margin、padding和border的用法。设计意图了解并掌握盒子模型的概念与特性、以及盒子模型中margin、padding和border的用法。CSS布局常用属性CSS布局完全不同于传统表格布局，它将页面首先在整体上进行标签的分块，将页面分为

8、若干个盒子，然后对各个盒子进行CSS定位，最后再在各个块中添加相应的内容。CSS布局页面最重要的手段就是利用浮动属性和定位属性设置元素位置。1、 浮动属性float属性可以控制盒子左右浮动，直到边界碰到父元素或另一个元素。2、 定位属性（1） position属性（2） 边偏移属性学生学习，通过案例掌握浮动和定位在布局中的使用。设计意图了解并掌握浮动和定位在布局中的使用综合实训美化旅游新闻页面根据所学DIV+CSS3知识，完成对旅游新闻网页的CSS美化。 学生在老师引导下，逐步完成旅游新闻页面的美化设计意图学生在页面美化过程中，进一步巩固前期所学的DIV+CSS布局评价小结汇总展示学生完成的旅游新闻作品并进行点评。学生对作品制作中遇到的问题进行相互探讨帮助。设计意图通过自评、互评作品，进一步巩固相关知识。