第 8 章使用 CSS 布局

第8章使用CSS布局 1

本章要点 8.1 CSS 布局基础 8.2 使用预设计的 CSS 布局 8.3 使用 AP Div 元素布局 8.4 使用 Div 标签布局 2/25

8.1 CSS 布局基础 • CSS 页面布局使用CSS技术，而非传统的 HTML 表格或框架对页面内容进行组织。CSS 布局的基本构造块是 div 标签，它在大多数情况下用作文本、图像或其他页面元素的容器。当设计者创建 CSS 布局时，可以将 div 标签放在页面的不同位置，然后向这些标签中添加内容，最后为这些 div 布局块应用 CSS 样式从而将网页显示在屏幕上。 • CSS模型盒 • CSS布局属性 • 使用CSS布局的三种方式。 3/25

8.1.1 CSS 模型盒 通过前面几章学习，我们知道网页中的段落、列表、图像、表格等网页元素都被放置在一个盒中，设计者可以通过创建规则来控制这个盒的属性从而达到表现网页数据的最终目的，这就是 CSS 模型盒理论。 4/25

8.1.2 CSS 布局属性 3-1 CSS 布局是利用 CSS 模型盒中的填充（padding）、边框（border）和边距（margin）以及定位属性和浮动属性，创建出形式多样的网页布局。有关 CSS 块中的内容、填充、边框、边距方面的内容我们在之前章节中做过讨论，本节着重介绍 CSS 布局中常用的定位属性和浮动属性。 5/25

8.1.2 CSS 布局属性 3-2 • CSS 属性 position（定位属性）用于控制网页元素（主要是 Div 元素）在网页中如何定位，取值可以是： • absolute（绝对） • relative（相对） • fixed（固定） • static（静态） 6/25

8.1.2 CSS 布局属性3-3 CSS 属性float（浮动属性）用于控制对象的浮动方式，取值是：none（无）、left（左浮动）、right（右浮动）。浮动属性是 CSS 布局中一个非常重要的属性，在网页中的 Div 标签应用浮动属性可以创建出各种形式的分栏式网页布局。与 float 属性对应的是 clear 属性，在使用 CSS 布局时需要将网页元素关闭，因此需要使用 clear 属性来结束元素的浮动。clear 清除属性的取值是：left（左边）、right（右边）、both（二者）。 7/25

8.1.3 创建 CSS 布局的方法 • 在 Dreamweaver 中，创建 CSS 样式布局有多种方法，最常见的包括三种： • 使用Dreamweaver 提供的预设计 CSS 布局是创建 CSS 布局最简便方法。 • 使用 Dreamweaver 绝对定位元素（AP 元素）创建 CSS 布局。 • 手动插入 div 标签，创建页面布局。 8/25

8.2 使用预设计的 CSS 布局 Dreamweaver提供 30 多个兼容多种浏览器的预设计布局，设计者可以轻松地使用 CSS 布局创建网页。 9/25

8.3 使用 AP Div 元素布局 AP Div 元素是指使用了绝对定位属性的 div 标签。这种绝对定位的 CSS 布局块可以向贴纸一样“贴在”网页上的任何位置，影响这个位置的 DIV 属性是：左、上、宽、高属性值。由于这种绝对定位不能根据浏览器窗口大小变化而随时调整文档布局，因此仅适用于一些特殊效果的网页布局。 10/25

8.3.1 AP 元素基础 10-1 • 在Dreamweaver 中可以使用 AP Div 元素来设计网页的布局。所有 AP Div 元素都显示在“AP 元素”面板中，可以使用属性面板来设置 AP Div 元素的属性，以便在文档中精确控制 AP Div 元素。 • 本节介绍 AP Div 元素的基础知识，内容包括： • 插入 AP Div 元素 • AP Div 元素基本操作 • AP Div 元素面板 • AP Div 元素的属性。 11/25

8.3.1 AP 元素基础 10-2 • 插入AP Div 元素 • 在 Dreamweaver 文档中插入 AP Div 元素的方法：（1）定位插入点。（2）单击插入栏“布局”>“绘制 AP Div”按钮。（3）在文档窗口拖动鼠标，绘制一个 AP Div 元素。 12/25

8.3.1 AP 元素基础 10-3 • AP Div 元素操作 • 单击 AP Div 元素，可以选择 AP Div 元素，按住【shift】键不放，分别单击可以同时选择多个AP Div元素。 • 选择 AP Div 元素，拖动上方的控制手柄或者按键盘上的方向键，可以在文档窗口中随意移动AP Div 元素的位置。 • 选择AP Div 元素后拖动元素周围的边框，可以修改AP Div 元素的大小。 • AP Div 元素可以像使用段落和表格单元格一样，在其中添加文本、图像、表格等网页内容。 13/25

8.3.1 AP 元素基础 10-4 AP Div 元素面板，如图所示。 14/25

8.3.1 AP 元素基础 10-5 如果勾选上方的“防止重叠”选项，在文档窗口中不能绘制嵌套的 AP元素。单击“眼睛”按钮所在列，可以设置 AP 元素的可见性。默认时没有图标，表示可见；如果有“睁眼”图标，也表示可见；如果有“闭眼”图标，则表示隐藏。 Z 值框显示了 AP 元素在文档中的 Z 值，该属性决定AP元素的显示顺序，Z值的取值范围是一个整数，AP 元素Z 值大的显示在Z 值小的之上。 15/25

8.3.1 AP 元素基础 10-6 AP Div 元素属性要精确控制 AP Div 元素，需要使用属性检查器设置属性。AP Div元素属性检查器如图所示。 16/25

8.3.1 AP 元素基础 10-7 • AP Div 元素属性含义： • CSS-P 元素名称绘制 AP Div 元素时系统自动指定名称，也可以在该框中指定 AP Div 元素的名称。 • 左 AP Div 元素的距离浏览器窗口左侧的位置坐标。 • 上 AP Div 元素的距离浏览器窗口顶端的位置坐标。 • 宽 AP Div 元素的宽度值。 • 高 AP Div 元素的高度值。 • z轴 AP Div 元素的 z 值（AP Div的 z 值是该元素在文档中层叠顺序的值，每个添加到文档中的 AP Div 元素都有表示显示顺序的 z 值，z 值大的 AP 元素覆盖 z 值小的 AP 元素）。 17/25

8.3.1 AP 元素基础 10-8 • 可见性 Ap Div 元素可见性有四个取值：默认（default）、继承（inherit）、显示（visible）、隐藏（hidden）。 • 背景图像指定Ap Div 元素的背景图像。 • 背景颜色指定Ap Div 元素的背景颜色。 • 类指定Ap Div 元素应用的样式名称。 • 溢出当 Ap Div 元素超出范围时的处理方式，可选的取值有：显示（visible）、隐藏（hidden）、滚动（srcoll）、自动（auto）。 • 剪辑指定 Ap Div 元素剪辑的位置坐标（上、右、下、左）。

8.4 使用 Div 标签布局 不论是使用Dreamweaver内置的布局，还是使用AP Div元素进行布局，本质上都是使用 Div 标签（通过查看源代码即可知）。本节介绍如何通过直接插入Div标签，然后定义CSS样式属性的方式来设计网页布局。 19/25

8.4.1 使用 Div 标签 Div 标签在网页中就象一个盒子，可以将网页对象（例如、文本、超链接、图像等）放置在盒中，然后定义 CSS 样式在屏幕上表现这些网页对象。在文档中插人 Div 标签之后，用户可以象使用段落、表格单元格一样在 Div 标签中添加网页内容，例如，文本、列表、超链接、图像、表格等。 20/25

8.4.2 单列液态布局 本实例布局将所有网页内容放置在 Div container 中，网页的整体只有一列，由于定义了#container的宽度为“80%”，那么网页在任何浏览器窗口中都将显示为浏览窗口宽度的80%。使用百分比作为宽度单位的布局称为“液态”布局。 21/25

8.4.3 二列弹性布局 网页中的列分栏是最常用的布局方式，使用CSS样式中的 float 属性可以创建出这种分栏效果。弹性布局是指在网页中使用以“字体宽度（em）”为单位进行的网页布局。 22/25

8.4.4 三列混合布局 所谓混合布局就是综合使用固定、弹性和液体布局的方式指定列类型的布局方式，例如本节实例结合使用了弹性和液体两种方式。 23/25

第 8 章 使用 CSS 布局