计算机网络与网页制作 Chapter 11:用CSS作页面布局 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn
目标 理解CSS的箱框模型 创建Div及AP Div 堆叠及重叠页面元素 设定箱框内容的样式 使用可视化助理调整页面元素位置
效果
1. CSS箱框模型 CSS把页面上每个元素看作一个虚拟方框。 每个虚拟矩形框充当一个容器,用于容纳文本、图像、媒体及表格,并在页面上占据一定区域。 每个虚拟矩形框可设定自己的留白、边距及边框。 箱框模型是嵌套的。浏览器窗口是最大的箱框,而body标签对应的箱框是页面中所有其他元素的根容器。
一级标题文本 浏览器窗口 body的边距 body的边框 <body> body的留白 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将嵌套于body标签内。 改变AP Div默认把body作为容器的情况:菜单 编辑>>首选参数 设置“首选参数”使得新建的AP Div自动地嵌套于绘制AP Div时起点所在的容器。
5. 绘制标题区 自动创建#header CSS规则,并自动删除原先的ID CSS规则
为标题区添加背景图片 在面板“CSS样式”内双击“#header”规则
往标题区插入图片 光标定位于标题区内,菜单 插入>>图像
设置标题区图片的样式 面板 CSS样式>>新建CSS规则 通过调整图像的边距改变商标图像的位置
6. 添加介绍区 插入一个AP Div,将其命名为“intro”(这将自动增加一个名为“#intro”的ID CSS规则)。之后粘贴文本。 网页已有的标签CSS规则(body)设置字体为仿宋。
修改intro Div的样式 在“CSS样式”面板内双击“#intro”规则。
intro Div效果 条纹区就是“留白”,位于边框内侧。
7. 添加主栏区 AP Div的ID 设为“ main”。从main_content.html页面复制文本。 网页已有的标签CSS规则(body)设置字体为仿宋。
新建类CSS样式—— .content
对主栏区使用.content样式 选中main AP Div,在“属性”面板的“类”下拉列表选择“content”项 条纹区就是“留白”,位于边框内侧。只设置了左、右留白。
设置主栏区的标题样式 在“CSS样式”面板内新建规则 “留白(Padding)”默认值为0,“边距(Margin)”默认值不为0。
效果
设置主栏区的段落样式 在“CSS样式”面板内新建规则
效果 标题的下边距在“#container #main h2”规则中设为0; 段落的上边距在“#container #main p”规则中设为0; 又因为“留白”的默认值为0; 所以标题与段落之间没有空隙。
8. 添加侧栏区 AP Div的ID 设为“ sidebar”。从features.html页面复制文本。 网页已有的标签CSS规则(body)设置字体为仿宋。
对侧栏区使用.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规则)