计算机网络 与网页制作 chapter 11 ： 用 css 作页面布局
DESCRIPTION
计算机网络 与网页制作 Chapter 11 ： 用 CSS 作页面布局. 复旦大学计算机学院. 肖川 [email protected]. 目标. 理解 CSS 的箱框模型 创建 Div 及 AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素 位置. 效果. 1. CSS 箱框模型. CSS 把 页面上每个元素看作一 个 虚拟 方框。 每个虚拟矩形框充当一个容器，用于容纳文本、图像、媒体及表格，并在页面上占据一定区域 。 每个虚拟矩形框可设定自己的留白、边距及边框 。 - PowerPoint PPT PresentationTRANSCRIPT
目标 理解 CSS 的箱框模型 创建 Div 及 AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素位置
2
3
效果
4
1. CSS 箱框模型 CSS 把页面上每个元素看作一个虚拟方框。 每个虚拟矩形框充当一个容器，用于容纳
文本、图像、媒体及表格，并在页面上占据一定区域。
每个虚拟矩形框可设定自己的留白、边距及边框。
箱框模型是嵌套的。浏览器窗口是最大的箱框，而 body 标签对应的箱框是页面中所有其他元素的根容器。
5
<body>
<div>
<h1>
浏览器窗口 body 的边距
body 的留白
一级标题文本
div 的边距
div 的留白
h1 的边距
h1 的留白
body 的边框
div 的边框
h1 的边框
6
每个 HTML 标签具有的样式属性 边距指围绕箱框的透明区域，包括上、下、左、
右边距。四个边距可以设置不同值。边距的默认值不等于 0 。 body 的边距就决定了页面本身的边界。
留白指箱框的边框与其内容之间的透明区域，包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于 0 。
箱框的边框（或边界）位于箱框的边距区与留白区之间，包括上、下、左、右边框，定义了箱框的界线。边框默认是透明的，你可以分别设定每个边框的宽度、颜色以及样式。
7
Div 标签与页面布局 一个 Div 标签自身是不会产生任何显示效果的，
除非你用 CSS 规则专门为其作了设定。 Div 标签的边距、留白、边框默认值为 0 。
页面内的 Div 标签将在页面内设定区域，之后你把页面内容如文本、图像等直接放在这个区域内。
“ 绘制 AP Div” 功能可创建精确定位的箱框。 通常页面内不同的位置有不同的样式，因此非常
适合使用 Div 及对应的 ID CSS 规则，当然也不排除对 Div 使用类 CSS 规则。
8
2. Div 与 AP Div AP Div 在设计视图内可以被随意拖动以及手工调整大小 Div 在设计视图内不能拖动，也不能手工调整大小。 通过修改 Div 的 CSS 属性 position 的值 (absolute 或
relative) ，使得 AP Div 与 Div 可以相互转化。
9
AP Div 与 Div 的主要区别 (1)
绝对定位的元素脱离了 HTML 内容的正常秩序，它不考虑周围的元素（如周围的文本、相邻的 Div ），它总是准确地出现在为它指定的坐标上。 AP Div 的“ Z 轴”属性用于解决堆叠问题。
一个被设为“相对定位”的元素会考虑相邻 HTML 内容的正常秩序。
10
AP Div 与 Div 的主要区别 (2)
当 使 用 “ 绘 制 AP Div” 作 版 面 设 计时， Dreamweaver 自动地创建 ID CSS规则，它设定了应用于特定箱框的样式信息，包括位置、宽度、高度等。
当使用“插入 Div 标签”作版面设计时，Dreamweaver 要求你为每个箱框创建或指派一个 ID CSS 规则。
11
AP Div
Div
12
mymenu.html 示例 面板 插入 >> 布局 >> 绘制 AP Div ，添加一个
AP Div 在这个 AP Div 内插入多个 Div
13
14
Div 默认是相对定位
15
16
3. 为页面创建一个居中的总容器
面板 插入 >> 布局 >> 插入 Div 标签
17
id 值为 container 的Div ，用作总容器。
18
为总容器添加背景图片 在面板“ CSS 样式”内双击“ #container” 规则
19
4. 改变 AP Div 默认把页面作为容器的情况
一个 AP Div 被精确地放在你所绘制的位置，默认情况下页面将作为其参考点，即无论在何处绘制 AP Div ， AP Div 将嵌套于 body 标签内。
改变 AP Div 默认把 body 作为容器的情况：菜单 编辑>>首选参数
设置“首选参数”使得新建的 AP Div 自动地嵌套于绘制 AP Div 时起点所在的容器。
20
5. 绘制标题区
自动创建 #header CSS 规则，并自动删除原先的 ID CSS 规则
21
为标题区添加背景图片 在面板“ CSS 样式”内双击“ #header” 规则
22
往标题区插入图片 光标定位于标题区内，菜单 插入 >> 图像
23
设置标题区图片的样式 面板 CSS 样式 >>新建 CSS 规则
通过调整图像的边距改变商标图像的位置
24
6. 添加介绍区 插入一个 AP Div ，将其命名为“ intro”( 这将自动增加
一个名为“ #intro” 的 ID CSS 规则 ) 。之后粘贴文本。
网页已有的标签 CSS规则 (body) 设置字体为仿宋。
25
修改 intro Div 的样式 在“ CSS 样式”面板内双击“ #intro” 规
则。
26
intro Div 效果
条纹区就是“留白”，位于边框内侧。
27
7. 添加主栏区 AP Div 的 ID 设为“ main” 。从main_content.html
页面复制文本。
网页已有的标签 CSS规则 (body) 设置字体为仿宋。
28
新建类 CSS 样式—— .content
29
对主栏区使用 .content 样式 选中 main AP Div ，在“属性”面板的“类”下拉列表选择“ content”项
条纹区就是“留白”，位于边框内侧。只设置了左、右留白。
30
设置主栏区的标题样式 在“ CSS 样式”面板内新建规则
“ 留白 (Padding)” 默认值为0 ，“边距 (Margin)” 默认值不为 0 。
31
效果
32
设置主栏区的段落样式 在“ CSS 样式”面板内新建规则
33
效果标题的下边距在“ #container #main h2” 规则中设为 0；段落的上边距在“ #container #main p” 规则中设为 0；又因为“留白”的默认值为 0；所以标题与段落之间没有空隙。
34
8. 添加侧栏区 AP Div 的 ID 设为“ sidebar” 。从 features.html 页
面复制文本。
网页已有的标签 CSS规则 (body) 设置字体为仿宋。
35
对侧栏区使用 .content 样式 选中 sidebar AP Div ，在“属性”面板的
“类”下拉列表选择“ content”项
条纹区就是“留白”，位于边框内侧。样式只设置了左、右留白。
36
设置侧栏区的标题样式 在“ CSS 样式”面板内新建规则
37
设置侧栏区的列表样式 在“ CSS 样式”面板内新建规则
38
效果
39
9. 修改页面元素的边距值
body 的上边距设为0 。
40
实时查看页面元素的边距、留白 单击工具栏上的“检查”按钮，之后在设计视图内移动鼠
标。
标题的上下边距默认非0；段落的上下边距默认非0；列表的上下边距默认非0；列表的左留白默认非 0；body 的四个边距默认非0；超链接的四边距默认为0 。
41
10. 为页面元素添加边框 在“ CSS 样式”面板内双击“ #main” 规则
42
11. 当内容超出 AP Div 大小时的处理
方法一：手工调整 Div 的高度。 方法二：把“溢出”属性设置
为“ auto” 以增加 Div 的滚动条。
43
AP Div 的“ Z 轴”属性值 同一范围内 AP Div 的前后位置由其“ Z 轴”属性值决定。
具有较大“ Z 轴”值的 Div 将位于较小“ Z 轴”值的Div前面。
44
12. 用 AP Div 作页面布局的优缺点 优点
方便、快捷 缺点
不能快速地适应变化
45
小结 CSS 箱框 ( 或方框 ) 模型 AP Div 与 Div 的区别 添加 AP Div 设置 AP Div 样式 ( 通常使用 ID CSS 规则 ) 往 AP Div里添加内容 设置内容的样式 ( 通常使用复合内容 CSS 规
则 )