Download presentation
Presentation is loading. Please wait.
1
计算机网络与网页制作 Chapter 11：用CSS作页面布局
复旦大学计算机学院 肖川
2
目标 理解CSS的箱框模型 创建Div及AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素位置
3
效果
4
1. CSS箱框模型 CSS把页面上每个元素看作一个虚拟方框。
每个虚拟矩形框充当一个容器，用于容纳文本、图像、媒体及表格，并在页面上占据一定区域。 每个虚拟矩形框可设定自己的留白、边距及边框。 箱框模型是嵌套的。浏览器窗口是最大的箱框，而body标签对应的箱框是页面中所有其他元素的根容器。
5
一级标题文本 浏览器窗口 body的边距 body的边框 <body> body的留白 div的边距 div的边框
h1的边距 h1的边框 <h1> 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
14
Div默认是相对定位
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规则)
Similar presentations
