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

1．结构化标准语言

HTML是网页的基本描述语言，设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系起来，形成有机的整体，不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。

2．表现标准语言

CSS称为层叠样式表，英文是CascadingStyleSheets。目前遵循的是W3C于1998年5月12日发布的CSS2。W3C创建CSS目的是以CSS取代HTML表格式布局和其他表现的语言。

3．行为标准

DOM称为文档对象模型，英文全称是DocumentObjectModel，是一种W3C颁布的标准，用于对结构化文档建立对象模型，从而使得用户可以通过程序语言（包括脚本）来控制其内部结构。

9.1什么是网站标准网站标准不是某一个标准，而是标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分3个方面：结构化标准语言主要包括HTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型，如W3CDOM、ECMAScript等。

9.2关于表格布局传统表格布局方式实际上是利用了HTML中的表格元素（table）具有的无边框特性，由于表格元素可以在显示时使单元格的边框和间距设置为0，所以可以将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。

9.2.1表格布局的特点目前仍有一部分网站在使用表格布局，表格布局使用简单，制作者只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。9.2.2冗余的嵌套表格和混乱的结构采用表格布局的页面内，为了实现设计的布局，制作者往往在单元格标签<td>内设置高度、宽度和对齐等属性，有时还要加入装饰性的图片，图片和内容混杂在一起，使代码视图显得非常臃肿。复杂的表格使得设计极为困难，修改更加繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。而使用CSS布局则可以从根本上改变这种情况。CSS布局的重点不再放在表格元素的设计中，取而代之的是HTML中的另一个元素——Div，Div可以理解为“图层”或是一个“块”，Div是一种比表格简单的元素，语法上只有从<Div>开始和</Div>结束，Div的功能仅仅是将一段信息标记出来用于后期的样式定义。

9.3关于DIV+CSS布局9.3.1什么是Web标准

Web标准，即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基于HTML语言的网站设计语言。Web标准中典型的应用模式是Div+CSS。实际上，Web标准并不是某一个标准，而是一系列标准的集合。9.3.2

Div+CSS的优势

CSS样式表是控制页面布局样式的基础，并真正能够做到网页表现与内容分离的一种样式设计语言。相对传统HTML的简单样式控制而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计，是目前基于文本展示的最优秀的表现设计语言。

9.4块元素和行内元素HTML中的元素分为块元素和行内元素，通过CSS样式可以改变HTML元素原本具有的显示属性，也就是说，通过CSS样式的设置可以将块元素与行内元素相互转换。9.4.1块元素在HTML代码中，常见的块元素包括<Div>、<p>、<table>等，块元素具有以下特点。（1）总是在新行上开始显示。（2）行高以及顶和底边距都可以控制。（3）如果不设置宽度，则会默认为整个容器的100%；而如果设置了其宽度值，就会应用所设置的宽度。9.4.2行内元素当display属性的值被设置为inline时，可以把元素设置为行内元素，块元素具有以下特点。（1）和其他元素显示在一行上。（2）行高以及顶边距和底边距不可以改变。（3）宽度就是它的文字或图片的宽度，不可以改变。在常用的一些元素中，<span>、<a>、<img>、<b>、<font>、<input>等默认都是行内元素。

9.5在网页中插入DivDiv与其他HTML标签一样，是一个HTML所支持的标签。例如当使用一个表格时，应用<table></table>这样的结构一样，Div在使用时也是同样以<div></div>的形式出现。使用Div进行网页排版布局是现在网页设计制作的趋势，通过CSS样式可以轻松控制Div的位置，从而实现许多不同的布局方式。9.5.1

Div是什么Div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上是一个容器，<div>文档内容</div>9.5.2如何在网页中插入Div如果需要在网页中插入Div，可以像插入其他的HTML元素一样，只需在代码中应用<div></div>这样的标签形式，将内容放置其中，便可以应用Div标签。

9.5.3

Div的嵌套

Div对象除了可以直接放入文本和其他标签，还可以多个Div标签进行嵌套使用，最终的目的是合理的标识出页面的区域。单击“插入”面板上的Div按钮，弹出“插入Div”对话框。

9.6关于Div+CSS盒模型盒模型是CSS控制页面时一个很重要的概念。只有很好地掌握了盒模型以及其中每个元素的用法，才能真正的控制页面中的各个元素的位置。

9.6.1盒模型的概念

盒模型是由margin（边界）、border（边框）、padding（填充）和content（内容）4部分组成的，此外，在盒模型中，还具备高度和宽度两个辅助属性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2

margin（边界）margin（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，margin属性包含4个子属性，分别是margin-top、margin-right、margin-bottom和margin-left，分别用于控制元素4周的边距。动手实践——定位网页元素位置9.6.3

border（边框）

border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。border属性有3个子属性，分别是边框样式（border-style）、边框宽度（border-width）和边框颜色（border-color）。动手实践——为网页元素添加边框最终文件：光盘\最终文件\第9章\9-6-2.html视频：光盘\视频\第9章\9-6-2.swf最终文件：光盘\最终文件\第9章\9-6-3.html视频：光盘\视频\第9章\9-6-3.swf9.6.4

padding（填充）在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。padding属性可以为盒子定义上、右、下、左各边填充的值，分别是padding-top（上填充）、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。动手实践——控制Div中内容位置9.6.5

content（内容）从盒模型中可以看出中间部分是content（内容），它主要用来显示内容，这部分也是整个盒模型的主要部分，其他如margin、border、padding所做的操作都是对content部分所做的修饰。对于内容部分的操作，也就是对文、图像等页面元素的操作。最终文件：光盘\最终文件\第9章\9-6-4.html视频：光盘\视频\第9章\9-6-4.swfDiv+CSS布局是一种比较新的网页布局理念，完全有别于传统的布局方式。它将页面首先在整体上进行<div>标签的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容。9.7.1元素定位的CSS属性在网页设计制作中，定位就是精确的定义HTML元素在页面中的位置，可以是页面中的绝对位置，也可以是相对于父级元素或另一个元素的相对位置。在使用Div+CSS布局制作页面的过程中，都是通过CSS的定位属性对元素完成位置和大小的控制的。

9.7

Div+CSS布局定位9.7.2

relative（相对定位）如果对一个元素进行相对定位，首先将出现在它所在的位置上，然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。另外，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他元素。动手实践——实现网页元素相对定位最终文件：光盘\最终文件\第9章\9-7-2.html视频：光盘\视频\第9章\9-7-2.swf9.7.3

absolute（绝对定位）绝对定位是参照浏览器的左上角，配合top、right、bottom和left进行定位的，如果没有设置上述的4个值，则默认的依据父级元素的坐标原点为原始点。绝对定位可以通过top、right、bottom和left来设置元素，使其处在任何一个位置。动手实践——实现网页元素绝对定位9.7.4

fixed（固定定位）固定定位和绝对定位比较相似，它是绝对定位的一种特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。在视线中，固定定位的容器位置是不会改变的。固定定位可以把一些特殊效果固定在浏览器的视线位置。动手实践——实现网页元素固定定位最终文件：光盘\最终文件\第9章\9-7-3.html视频：光盘\视频\第9章\9-7-3.swf最终文件：光盘\最终文件\第9章\9-7-4.html视频：光盘\视频\第9章\9-7-4.swf9.7.5

float（浮动定位）除了使用position进行定位外，还可以使用float定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。float属性表示浮动属性，它用来改变元素块的显示方式。浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，直到它外边缘碰到包含框或另一个浮动框的边缘。动手实践——实现网页元素浮动定位9.7.6空白边叠加空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是两个发生叠加的空白边中的高度的较大者。动手实践——空白边叠加在网页中的应用最终文件：光盘\最终文件\第9章\9-7-5.html视频：光盘\视频\第9章\9-7-5.swf最终文件：光盘\最终文件\第9章\9-7-6.html视频：光盘\视频\第9章\9-7-6.swf在网页制作的过程中，首先需要对网页进行布局，网页布局的形式多种多样，例如居中的网页布局，居右的网页布局，两列的网页布局，3列的网页布局等，通过CSS样式的设置能够轻松的实现各种不同效果的网页布局。9.8.1

Div高度自适应高度值可以使用百分比进行设置，但是直接使用height:100%;不会显示效果的，这与浏览器的解析方式有一定关系，如图为实现高度自适应的CSS代码，在浏览器中预览该页面，可以看到Div高度自适应的效果。9.8.2网页内容居中布局居中的网页设计目前在网页布局的应用中非常广泛，所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一。

9.8常用Div+CSS布局方式9.8.3网页元素浮动布局在Div+CSS布局中，浮动布局是使用最多，也是常见的布局方式，浮动的布局又可以分为多种形式。1．两列固定宽度布局2．两列百分比宽度布局3．两列右列宽度自适应布局4．两列固定宽度居中布局5．三列浮动中间列宽度自适应布局9.8.4流体网格布局

随着网络及移动设备的迅速发展，现在越来越多的人可以随时随地的使用各种移动设备浏览网页，为了满足各种不同设备对网页的浏览，在DreamweaverCC中新增了流体网格布局的功能，该功能主要是针对目前流行的智能手机、平板电脑和桌面电脑三种设备。通过创建流体网格布局页面，可以使页面能够适应3种不同的设备，并且可以随时在3种不同的设备中查看页面的效果。动手实践——制作商场网站IPAD页面布局最终文件：光盘\最终文件\第9章\9-8-4.html视频：光盘\视频\第9章\9-8-4.swf一个典型的网页中通常都会包含头部、页脚、导航、主体内容和侧边内容等区域。针对这情况，HTML5中引入了与文档结构相关联的网页结构元素。在DreamweaverCC是为了能够使设计者能够轻松的在网页中插入HTML5结构元素，在“插入”面板中新增了“结构”选项卡，通过单击“结构”选项卡中的按钮，即可快速在网页中插入相应的HTML5结构元素。

9.9插入HTML5结构元素9.9.1

页眉页眉通常用于定义网页的介绍信息内容，在HTML5中新增了<header>标签，使用该标签可以在网页中定义网页的页眉部分。9.9.2页脚页脚通常用于定义网页文档的版底信息，包括设计者信息、文档的创建日期以及联系方式等。在HTML5中新增了<footer>标签，使用该标签可以在网页中定义网页的页脚部分。9.9.3

Navigation导航是每个网页中都包含的重要元素之一，通过网站导航可以在网站中各页面之间进行跳转。在在HTML5中新增了<nav>标签，使用该标签可以在网页中定义网页的导航部分。9.9.4

章节在网页文档中常常需要定义章节等特定的区域。在HTML5中新增了<section>标签，使用该标签可以在网页中定义章节、页眉、页脚或文档中的其他部分。9.9.5文章网页中常常出现大段的文章内容，通过文章结构元素可以将网页中大段的文章内容标识出来，使网页的代码结构更加整齐。在HTML5中新增了<article>标签，使用该标签可