用apdiv作页面布局.pptxVIP

目标理解CSS的箱框模型创建Div及AP Div堆叠及重叠页面元素设定箱框内容的样式使用可视化助理调整页面元素位置效果1. CSS箱框模型CSS把页面上每个元素看作一个虚拟方框。每个虚拟矩形框充当一个容器，用于容纳文本、图像、媒体及表格，并在页面上占据一定区域。每个虚拟矩形框可设定自己的留白、边距及边框。箱框模型是嵌套的。浏览器窗口是最大的箱框，而body标签对应的箱框是页面中所有其他元素的根容器。浏览器窗口body的边距body的边框bodybody的留白div的边距div的边框divdiv的留白h1的边距h1的边框h1h1的留白一级标题文本每个HTML标签具有的样式属性边距指围绕箱框的透明区域，包括上、下、左、右边距。四个边距可以设置不同值。边距的默认值不等于0。body的边距就决定了页面本身的边界。留白指箱框的边框与其内容之间的透明区域，包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于0。箱框的边框（或边界）位于箱框的边距区与留白区之间，包括上、下、左、右边框，定义了箱框的界线。边框默认是透明的，你可以分别设定每个边框的宽度、颜色以及样式。Div标签与页面布局一个Div标签自身是不会产生任何显示效果的，除非你用CSS规则专门为其作了设定。Div标签的边距、留白、边框默认值为0。页面内的Div标签将在页面内设定区域，之后你把页面内容如文本、图像等直接放在这个区域内。“绘制AP Div”功能可创建精确定位的箱框。通常页面内不同的位置有不同的样式，因此非常适合使用Div及对应的ID CSS规则，当然也不排除对Div使用类CSS规则。2. Div 与 AP DivAP 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 DivDivmymenu.html示例面板 插入布局绘制AP Div，添加一个AP Div在这个AP Div内插入多个DivDiv默认是相对定位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样式”面板内新