计算机网络与网页制作 Chapter 11 ：用 CSS 作页面布局

计算机网络与网页制作Chapter 11：用CSS作页面布局复旦大学计算机学院肖川 cxiao@fudan.edu.cn

目标 • 理解CSS的箱框模型 • 创建Div及AP Div • 堆叠及重叠页面元素 • 设定箱框内容的样式 • 使用可视化助理调整页面元素位置

效果

1. CSS箱框模型 CSS把页面上每个元素看作一个虚拟方框。每个虚拟矩形框充当一个容器，用于容纳文本、图像、媒体及表格，并在页面上占据一定区域。每个虚拟矩形框可设定自己的留白、边距及边框。箱框模型是嵌套的。浏览器窗口是最大的箱框，而body标签对应的箱框是页面中所有其他元素的根容器。

浏览器窗口 body的边距 body的边框 <body> body的留白 div的边距 div的边框 <div> div的留白 h1的边距 h1的边框 <h1> h1的留白一级标题文本

每个HTML标签具有的样式属性 • 边距指围绕箱框的透明区域，包括上、下、左、右边距。四个边距可以设置不同值。边距的默认值不等于0。 • body的边距就决定了页面本身的边界。 • 留白指箱框的边框与其内容之间的透明区域，包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于0。 • 箱框的边框（或边界）位于箱框的边距区与留白区之间，包括上、下、左、右边框，定义了箱框的界线。边框默认是透明的，你可以分别设定每个边框的宽度、颜色以及样式。

Div标签与页面布局 一个Div标签自身是不会产生任何显示效果的，除非你用CSS规则专门为其作了设定。Div标签的边距、留白、边框默认值为0。页面内的Div标签将在页面内设定区域，之后你把页面内容如文本、图像等直接放在这个区域内。 “绘制AP Div”功能可创建精确定位的箱框。通常页面内不同的位置有不同的样式，因此非常适合使用Div及对应的ID CSS规则，当然也不排除对Div使用类CSS规则。

2. Div与 AP Div AP Div在设计视图内可以被随意拖动以及手工调整大小 Div在设计视图内不能拖动，也不能手工调整大小。通过修改Div的CSS属性position的值(absolute或relative)，使得AP Div与Div可以相互转化。

AP Div与Div的主要区别(1) 绝对定位的元素脱离了HTML内容的正常秩序，它不考虑周围的元素（如周围的文本、相邻的Div），它总是准确地出现在为它指定的坐标上。AP Div的“Z轴”属性用于解决堆叠问题。一个被设为“相对定位”的元素会考虑相邻HTML内容的正常秩序。

AP Div与Div的主要区别(2) 当使用“绘制AP Div”作版面设计时，Dreamweaver自动地创建ID CSS规则，它设定了应用于特定箱框的样式信息，包括位置、宽度、高度等。当使用“插入Div标签”作版面设计时，Dreamweaver要求你为每个箱框创建或指派一个ID CSS规则。

AP Div Div

mymenu.html示例 面板插入>>布局>>绘制AP Div，添加一个AP Div 在这个AP Div内插入多个Div

Div默认是相对定位

3. 为页面创建一个居中的总容器 面板插入>>布局>>插入Div标签

id值为 container的Div，用作总容器。

为总容器添加背景图片 在面板“CSS样式”内双击“#container”规则

4. 改变AP Div默认把页面作为容器的情况 设置“首选参数”使得新建的AP Div自动地嵌套于绘制AP Div时起点所在的容器。一个AP Div被精确地放在你所绘制的位置，默认情况下页面将作为其参考点，即无论在何处绘制AP Div，AP Div将嵌套于body标签内。改变AP Div默认把body作为容器的情况：菜单编辑>>首选参数

5. 绘制标题区 自动创建#header CSS规则，并自动删除原先的ID CSS规则

为标题区添加背景图片 在面板“CSS样式”内双击“#header”规则

往标题区插入图片 光标定位于标题区内，菜单插入>>图像

设置标题区图片的样式 通过调整图像的边距改变商标图像的位置面板 CSS样式>>新建CSS规则

6. 添加介绍区 网页已有的标签CSS规则(body)设置字体为仿宋。插入一个AP Div，将其命名为“intro”(这将自动增加一个名为“#intro”的ID CSS规则)。之后粘贴文本。

修改intro Div的样式 在“CSS样式”面板内双击“#intro”规则。

intro Div效果 条纹区就是“留白”，位于边框内侧。

7. 添加主栏区 网页已有的标签CSS规则(body)设置字体为仿宋。 AP Div的ID 设为“ main”。从main_content.html页面复制文本。

新建类CSS样式—— .content

对主栏区使用.content样式 条纹区就是“留白”，位于边框内侧。只设置了左、右留白。选中main AP Div，在“属性”面板的“类”下拉列表选择“content”项

设置主栏区的标题样式 “留白(Padding)”默认值为0，“边距(Margin)”默认值不为0。在“CSS样式”面板内新建规则

效果

设置主栏区的段落样式 在“CSS样式”面板内新建规则

效果标题的下边距在“#container #main h2”规则中设为0；段落的上边距在“#container #main p”规则中设为0；又因为“留白”的默认值为0；所以标题与段落之间没有空隙。

8. 添加侧栏区 网页已有的标签CSS规则(body)设置字体为仿宋。 AP Div的ID 设为“ sidebar”。从features.html页面复制文本。

对侧栏区使用.content样式 条纹区就是“留白”，位于边框内侧。样式只设置了左、右留白。选中sidebar AP Div，在“属性”面板的“类”下拉列表选择“content”项

设置侧栏区的标题样式 在“CSS样式”面板内新建规则

设置侧栏区的列表样式 在“CSS样式”面板内新建规则

效果

9. 修改页面元素的边距值 body的上边距设为0。

实时查看页面元素的边距、留白 标题的上下边距默认非0；段落的上下边距默认非0；列表的上下边距默认非0；列表的左留白默认非0； body的四个边距默认非0；超链接的四边距默认为0。单击工具栏上的“检查”按钮，之后在设计视图内移动鼠标。

10.为页面元素添加边框 在“CSS样式”面板内双击“#main”规则

11. 当内容超出AP Div大小时的处理 方法一：手工调整Div的高度。方法二：把“溢出”属性设置为“auto”以增加Div的滚动条。

AP Div的“Z轴”属性值 同一范围内AP Div的前后位置由其“Z轴”属性值决定。具有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。

12. 用AP Div作页面布局的优缺点 • 优点 • 方便、快捷 • 缺点 • 不能快速地适应变化

小结 CSS箱框(或方框)模型 AP Div与Div的区别添加AP Div 设置AP Div样式 (通常使用ID CSS规则) 往AP Div里添加内容设置内容的样式 (通常使用复合内容CSS规则)

计算机网络与网页制作 Chapter 11 ：用 CSS 作页面布局