第9章 使用Div+CSS灵活布局网页

1、1结构化标准语言HTML是网页的基本描述语言，设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系起来，形成有机的整体，不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。2表现标准语言CSS 称为层叠样式表，英文是Cascading Style Sheets。目前遵循的是W3C 于1998 年5 月12 日发布的CSS 2。W3C 创建CSS 目的是以CSS取代HTML 表格式布局和其他表现的语言。3行为标准DOM 称为文档对象模型，英文全称是Document Object Model，是一种W3C 颁布的标准，用于对结构化文档建立对象模型，从而

2、使得用户可以通过程序语言（包括脚本）来控制其内部结构。网站标准不是某一个标准，而是标准的集合。网页主要由3 部分组成： 结构（Structure）、表现（Presentation） 和行为（Behavior）。对应的标准也分3 个方面：结构化标准语言主要包括HTML 和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型，如W3C DOM、ECMAScript 等。 传统表格布局方式实际上是利用了HTML 中的表格元素（table）具有的无边框特性，由于表格元素可以在显示时使单元格的边框和间距设置为0，所以可以将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。

3、9.2.1表格布局的特点表格布局的特点目前仍有一部分网站在使用表格布局，表格布局使用简单，制作者只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。9.2.2冗余的嵌套表格和混乱的结冗余的嵌套表格和混乱的结构构采用表格布局的页面内，为了实现设计的布局，制作者往往在单元格标签 内设置高度、宽度和对齐等属性，有时还要加入装饰性的图片，图片和内容混杂在一起，使代码视图显得非常臃肿。复杂的表格使得设计极为困难，修改更加繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。而使用CSS 布局则可以从根本上改变这种情况。C

4、SS 布局的重点不再放在表格元素的设计中，取而代之的是HTML 中的另一个元素Div，Div 可以理解为“图层”或是一个“块”，Div 是一种比表格简单的元素，语法上只有从 开始和 结束， Div 的功能仅仅是将一段信息标记出来用于后期的样式定义。9.3.1什么是什么是Web标准标准Web 标准，即网站标准。目前通常所说的Web 标准一般指进行网站建设所采用的基于HTML 语言的网站设计语言。Web 标准中典型的应用模式是Div+CSS。实际上，Web 标准并不是某一个标准，而是一系列标准的集合。9.3.2Div+CSS的优势的优势CSS 样式表是控制页面布局样式的基础，并真正能够做到网页表现

5、与内容分离的一种样式设计语言。相对传统HTML 的简单样式控制而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计，是目前基于文本展示的最优秀的表现设计语言。HTML中的元素分为块元素和行内元素，通过CSS样式可以改变HTML元素原本具有的显示属性，也就是说，通过CSS样式的设置可以将块元素与行内元素相互转换。9.4.1块元素块元素在HTML 代码中，常见的块元素包括、 等，块元素具有以下特点。（1）总是在新行上开始显示。（2）行高以及顶和底边距都可以控制。（3）如果不设置宽度，则会默认为

6、整个容器的100%；而如果设置了其宽度值，就会应用所设置的宽度。9.4.2行内元素行内元素当display 属性的值被设置为inline 时，可以把元素设置为行内元素，块元素具有以下特点。（1）和其他元素显示在一行上。（2）行高以及顶边距和底边距不可以改变。（3）宽度就是它的文字或图片的宽度，不可以改变。在常用的一些元素中，、 等默认都是行内元素。 Div 与其他HTML 标签一样，是一个HTML 所支持的标签。例如当使用一个表格时，应用这样的结构一样，Div 在使用时也是同样以 的形式出现。使用Div 进行网页排版布局是现在网页设计制作的趋势，通过CSS 样式可以轻松控制Div 的位置，从而

7、实现许多不同的布局方式。9.5.1Div是什么是什么Div 是一个容器。在HTML 页面中的每个标签对象几乎都可以称得上是一个容器，文档内容9.5.2如何在网页中插入如何在网页中插入Div如果需要在网页中插入Div，可以像插入其他的HTML 元素一样，只需在代码中应用 这样的标签形式，将内容放置其中，便可以应用Div 标签。 9.5.3Div的嵌套的嵌套Div对象除了可以直接放入文本和其他标签，还可以多个Div标签进行嵌套使用，最终的目的是合理的标识出页面的区域。单击“插入”面板上的Div按钮，弹出“插入Div”对话框。盒模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒模型以及其中每

8、个元素的用法，才能真正的控制页面中的各个元素的位置。 9.6.1盒模型的概念盒模型的概念 盒模型是由margin（边界）、border（边框）、padding（填充）和content（内容）4 部分组成的，此外，在盒模型中，还具备高度和宽度两个辅助属性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2margin（边界）（边界）margi

9、n（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，margin 属性包含4 个子属性，分别是margin-top、margin-right、margin-bottom 和margin-left，分别用于控制元素4 周的边距。动手实践动手实践定位网页元素位置定位网页元素位置9.6.3border（边框）（边框）border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。border属性有3个子属性，分别是边框样式（border-style）、边框宽度（bor

10、der-width）和边框颜色（border-color）。动手实践动手实践为网页元素添加边框为网页元素添加边框最终文件：光盘最终文件第9章9-6-2.html 视频：光盘视频第9章9-6-2.swf最终文件：光盘最终文件第9章9-6-3.html 视频：光盘视频第9章9-6-3.swf9.6.4padding（填充）（填充）在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。padding属性可以为盒子定义上、右、下、左各边填充的值，分别是padding-top（上填充）

11、、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。动手实践动手实践控制控制Div中内容位置中内容位置9.6.5content（内容）（内容）从盒模型中可以看出中间部分是content（内容），它主要用来显示内容，这部分也是整个盒模型的主要部分，其他如margin、border、padding所做的操作都是对content部分所做的修饰。对于内容部分的操作，也就是对文、图像等页面元素的操作。最终文件：光盘最终文件第9章9-6-4.html 视频：光盘视频第9章9-6-4.swfDiv+CSS布局是一种比较新的网页布局理念，完全有别

12、于传统的布局方式。它将页面首先在整体上进行标签的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。9.7.1元素定位的元素定位的CSS属性属性在网页设计制作中，定位就是精确的定义HTML元素在页面中的位置，可以是页面中的绝对位置，也可以是相对于父级元素或另一个元素的相对位置。在使用Div+CSS布局制作页面的过程中，都是通过CSS的定位属性对元素完成位置和大小的控制的。9.7.2relative（相对定位）（相对定位）如果对一个元素进行相对定位，首先将出现在它所在的位置上，然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。另外，相对定位时，无论是否进行移动，元素

13、仍然占据原来的空间。因此，移动元素会导致它覆盖其他元素 。动手实践动手实践实现网页元实现网页元素相对定位素相对定位最终文件：光盘最终文件第9章9-7-2.html 视频：光盘视频第9章9-7-2.swf9.7.3absolute（绝对定位）（绝对定位）绝对定位是参照浏览器的左上角，配合top、right、bottom和left进行定位的，如果没有设置上述的4个值，则默认的依据父级元素的坐标原点为原始点。绝对定位可以通过top、right、bottom和left来设置元素，使其处在任何一个位置。动手实践动手实践实现网页元素绝对定位实现网页元素绝对定位9.7.4fixed（固定定位）（固定定位）固

14、定定位和绝对定位比较相似，它是绝对定位的一种特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。在视线中，固定定位的容器位置是不会改变的。固定定位可以把一些特殊效果固定在浏览器的视线位置。动手实践动手实践实现网页元素固定定位实现网页元素固定定位最终文件：光盘最终文件第9章9-7-3.html 视频：光盘视频第9章9-7-3.swf最终文件：光盘最终文件第9章9-7-4.html 视频：光盘视频第9章9-7-4.swf9.7.5float（浮动定位）（浮动定位）除了使用position进行定位外，还可以使用float定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。float

15、属性表示浮动属性，它用来改变元素块的显示方式。浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。动手实践动手实践实现网页元素浮动定位实现网页元素浮动定位9.7.6空白边叠加空白边叠加空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边中的高度的较大者。动手实践动手实践空白边叠加在网页中的应用空白边叠加在网页中的应用最终文件：光盘最终文件第9章9-7-5.html 视频：光盘视频第9章9-7-5.swf最终文件：光盘最终文件第9章9-7-6.html 视频：光盘视频第9章9-7-

16、6.swf在网页制作的过程中，首先需要对网页进行布局，网页布局的形式多种多样，例如居中的网页布局，居右的网页布局，两列的网页布局，3列的网页布局等，通过CSS样式的设置能够轻松的实现各种不同效果的网页布局。9.8.1Div高度自适应高度自适应高度值可以使用百分比进行设置，但是直接使用height:100%;不会显示效果的，这与浏览器的解析方式有一定关系，如图为实现高度自适应的CSS代码，在浏览器中预览该页面，可以看到Div高度自适应的效果。9.8.2网页内容居中布局网页内容居中布局居中的网页设计目前在网页布局的应用中非常广泛，所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一

17、。9.8.3网页元素浮动布局网页元素浮动布局在Div+CSS布局中，浮动布局是使用最多，也是常见的布局方式，浮动的布局又可以分为多种形式。1两列固定宽度布局2两列百分比宽度布局3两列右列宽度自适应布局4两列固定宽度居中布局5三列浮动中间列宽度自适应布局9.8.4流体网格布局流体网格布局随着网络及移动设备的迅速发展，现在越来越多的人可以随时随地的使用各种移动设备浏览网页，为了满足各种不同设备对网页的浏览，在Dreamweaver CC中新增了流体网格布局的功能，该功能主要是针对目前流行的智能手机、平板电脑和桌面电脑三种设备。通过创建流体网格布局页面，可以使页面能够适应3种不同的设备，并且可以随时

18、在3种不同的设备中查看页面的效果。动手实践动手实践制作商场网站制作商场网站IPAD页面布局页面布局最终文件：光盘最终文件第9章9-8-4.html 视频：光盘视频第9章9-8-4.swf一个典型的网页中通常都会包含头部、页脚、导航、主体内容和侧边内容等区域。针对这情况，HTML5中引入了与文档结构相关联的网页结构元素。在Dreamweaver CC是为了能够使设计者能够轻松的在网页中插入HTML5结构元素，在“插入”面板中新增了“结构”选项卡，通过单击“结构”选项卡中的按钮，即可快速在网页中插入相应的HTML5结构元素。9.9.1页眉页眉页眉通常用于定义网页的介绍信息内容，在HTML5中新增了标签，使用该标签可以在网页中定义网页的页眉部分。9.9.2页脚页脚页脚通常用于定义网页文档的版底信息，包括设计者信息、文档的创建日期以及联系方式等。在HTML5中新增了标签，使用该标签可以在网页中定义网页的页脚部分。9.9.3Navigation导航是每个网页中都包含的重要元素之一，通过网站导航可以在网站中各页面之间进行跳转。在在HTML5中新增了标签，使用该标签可以在网页中定义网页的导航部分。9.9.4章节章节在网页文档中常常需要定义章节等特定的区域。在HTML5中新增了标签，使用该标签可以在网页中定义章节、页眉、页脚或文档中的其他部分。9.9.5文章文章网