网页设计与制作案例实战教程课件 第9章 Div+CSS网页布局技术

第9章Div+CSS网页布局技术网页设计与制作案例实战教程9.1.1

什么是Web标准Web标准即网页标准，是指有关于全球资讯网各个方面的定义和说明的正式标准以及技术规范。网页主要由结构、表现和行为三部分组成，对应的标准也分三方面：1.结构结构用于对网页中用到的信息进行分类与整理。结构标准语言主要包括XHTML和XML。2.表现表现用于对信息进行版式、颜色和大小等形式进行控制。表现标准语言主要包括CSS。3.行为行为是指文档内部的模型定义及交互行为的编写，用于编写交互式的文档。行为标准主要包括DOM和ECMAScript。9.1.2

Div概述Div全称为DIVision，即划分，用于在页面中定义一个区域，使用CSS样式控制Div元素的表现效果。Div可以将复杂的网页内容分割成独立的区块，一个Div可以放置一个图片，也可以显示一行文本。简单来讲，Div就是容器，可以存放任何网页显示元素。Div具有以下3个优点：(1)节省页面代码(2)加快网页浏览速度(3)便于网站推广9.1.3创建Div在使用Div布局网页前需要现在网页中创建Div区块，在Dreamweaver中，用户可以在“代码”视图中添加<div></div>标签创建Div，也可以通过执行“插入”命令或通过“插入”面板插入Div。9.1.4实操案例：琳琅首饰本案例将以琳琅首饰网页的制作为例，介绍Div和CSS的应用。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.2.1盒子模型盒子模型时CSS样式布局的重要概念，掌握盒子模型及其使用方法，才可以真正地控制页面中的各种元素。盒子模型是指将页面中的各个元素及其周围的空间看成一个盒子，该盒子占据着一定的页面空间。用户可以通过调整盒子的边框和距离等参数，来调节盒子的位置。一个盒子模型由内容（content）、边框（border）、填充（padding）和空白边（margin）这4个部分组成。9.2.2外边距设置margin属性可以设置外边距，margin边界环绕在该元素的content区域四周。若margin的值为0，则margin边界与border边界重合。margin属性接受任何长度单位，可以使用像素、毫米、厘米和em等，也可以设置为auto（自动）。常见做法是为外边距设置长度值，允许使用负值。9.2.3外边距合并外边距合并是指当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。在实践中对网页进行布局时，它会造成许多混淆。以下3种情况都有可能出现外边距合并的现象：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上/或下外边距也会发生合并。外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们也会发生合并。9.2.4内边距设置CSS中的padding属性控制元素的内边距。padding属性定义元素边框与元素内容之间的空白区域，接受长度值或百分比值，但不允许使用负值。若希望所有h1元素的各边都有5像素的内边距，代码描述如下：h1{padding:5px;}9.2.5实操案例：时刻餐厅本案例将练习制作时刻餐厅网页，对Div和CSS的应用进行介绍。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.3课堂实战飞扬咖啡本案例将练习制作飞扬咖啡网页，对Div和CSS的创建与应用进行介绍。目录Contents9.1

CSS与Div布局基础9.2

CSS布局方法9.3

课堂实战9.4

课后练习9.4课后练习1.湖江船业根据所学内容制作湖江船业网页。2.安居养老根据所学内容