用APDiv作页面布局.pptVIP

效果 31 设置主栏区的段落样式 ? 在“ CSS 样式”面板内新建规则 32 效果 33 标题的下边距在“ #container #main h2 ”规则中设为 0 ； 段落的上边距在“ #container #main p ”规则中设为 0 ； 又因为“留白”的默认值为 0 ； 所以标题与段落之间没有空隙。 网页制作 Chapter 5 ：用 CSS 作页面布局 计算机 edu.cn 1 目标 ? 理解 CSS 的箱框模型 ? 创建 Div 及 AP Div ? 堆叠及重叠页面元素 ? 设定箱框内容的样式 ? 使用可视化助理调整页面元素位置 2 效果 3 1. CSS 箱框模型 ? CSS 把页面上每个元素看作一个虚拟方框。 ? 每个虚拟矩形框充当一个容器，用于容纳 文本、图像、媒体及表格，并在页面上占 据一定区域。 ? 每个虚拟矩形框可设定自己的留白、边距 及边框。 ? 箱框模型是嵌套的。浏览器窗口是最大的 箱框，而 body 标签对应的箱框是页面中所 有其他元素的根容器。 4 body div h1 浏览器窗口 body 的边距 body 的留白 一级标题文本 div 的边距 div 的留白 h1 的边距 h1 的留白 body 的边框 div 的边框 h1 的边框 5 每个 HTML 标签具有的样式属性 ? 边距 指围绕箱框的透明区域，包括上、下、左、 右边距。四个边距可以设置不同值。边距的默认 值不等于 0 。 ? body 的边距就决定了页面本身的边界。 ? 留白 指箱框的边框与其内容之间的透明区域，包 括上、下、左、右留白。亦可设置四个不同值。 留白的默认值等于 0 。 ? 箱框的 边框 （或边界）位于箱框的边距区与留白 区之间，包括上、下、左、右边框，定义了箱框 的界线。边框 默认是透明的 ，你可以分别设定每 个边框的宽度、颜色以及样式。 6 Div 标签与页面布局 ? 一个 Div 标签自身是不会产生任何显示效果的，除 非你用 CSS 规则专门为其作了设定。 Div 标签的边 距、留白、边框默认值为 0 。 ? 页面内的 Div 标签将在页面内设定区域，之后你把 页面内容如文本、图像等直接放在这个区域内。 ? “绘制 AP Div ”功能可创建 精确定位 的箱框。 ? 通常页面内不同的位置有不同的样式，因此非常 适合使用 Div 及对应的 ID CSS 规则，当然也不排除 对 Div 使用类 CSS 规则。 7 2. Div 与 AP Div ? AP Div 在设计视图内可以被随意拖动以及手工调整大小 ? Div 在设计视图内不能拖动，也不能手工调整大小。 ? 通过修改 Div 的 CSS 属性 position 的值 (absolute 或 relative) ，使 得 AP Div 与 Div 可以相互转化。 8 AP Div 与 Div 的主要区别 (1) ? 绝对定位的元素脱离了 HTML 内容的正常秩 序，它不考虑周围的元素（如周围的文本、 相邻的 Div ），它总是准确地出现在为它指 定的坐标上。 AP Div 的“ Z 轴”属性用于解 决堆叠问题。 ? 一个被设为“相对定位”的元素会考虑相 邻 HTML 内容的正常秩序。 9 AP Div 与 Div 的主要区别 (2) ? 当 使 用 “ 绘 制 AP Div ” 作 版 面 设 计 时 ， Dreamweaver 自动地创建 ID CSS 规则，它设 定了应用于特定箱框的样式信息，包括位 置、宽度、高度等。 ? 当使用“插入 Div 标签”作版面设计时， Dreamweaver 要求你为每个箱框创建或指派 一个 ID CSS 规则。 10 11 AP Div Div mymenu.html 示例 ? 面板 插入 布局 绘制 AP Div ，添加一个 AP Div ? 在这个 AP Div 内插入多个 Div 12 13 14 Div 默认是相对定位 15 3. 为页面创建一个居中的总容器 ? 面板 插入 布局 插入 Div 标签 16 17 id 值为 container 的 Div ， 用作总容器。 为总容器添加背景图片 ? 在面板“ CSS 样式”内双击“ #container ”规则 18 4. 改变 AP Div 默认把页面作为容器的情况 ? 一个 AP Div 被精确地放在你所绘制的位置，默认情况下页 面将作为其参考点，即无论在何处绘制 AP Div ， AP Div 将嵌 套于 body 标签内。 ? 改变 AP Div 默认把 body 作为容器的情况：菜单 编辑 首选 参数 19 设置“首选参数”使 得新建的 AP Div 自动 地嵌套于绘制 AP Div 时起点所在的容器。 5. 绘制标题区 20 自动创