5用APDiv作页面布局.pptx

网页制作Chapter 5：用CSS作页面布局计算机1目标理解CSS的箱框模型创建Div及AP Div堆叠及重叠页面元素设定箱框内容的样式使用可视化助理调整页面元素位置2效果31.CSS箱框模型CSS把页面上每个元素看作一个虚拟方框。每个虚拟矩形框充当一个容器，用于容纳文本、图像、媒体及表格，并在页面上占据一定区域。每个虚拟矩形框可设定自己的留白、边距及边框。箱框模型是嵌套的。浏览器窗口是最大的箱框，而body标签对应的箱框是页面中所有其他元素的根容器。4浏览器窗口body的边距body的留白一级标题文本div的边距div的留白h1的边距h1的留白body的边框div的边框h1的边框5每个HTML标签具有的样式属性边距指围绕箱框的透明区域，包括上、下、左、右边距。四个边距可以设置不同值。边距的默认值不等于0。body的边距就决定了页面本身的边界。留白指箱框的边框与其内容之间的透明区域，包括上、下、左、右留白。亦可设置四个不同值。留白的默认值等于0。箱框的边框（或边界）位于箱框的边距区与留白区之间，包括上、下、左、右边框，定义了箱框的界线。边框默认是透明的，你可以分别设定每个边框的宽度、颜色以及样式。6Div标签与页面布局一个Div标签自身是不会产生任何显示效果的，除非你用CSS规则专门为其作了设定。Div标签的边距、留白、边框默认值为0。页面内的Div标签将在页面内设定区域，之后你把页面内容如文本、图像等直接放在这个区域内。“绘制AP Div”功能可创建精确定位的箱框。通常页面内不同的位置有不同的样式，因此非常适合使用Div及对应的ID CSS规则，当然也不排除对Div使用类CSS规则。72.Div 与 AP DivAP Div在设计视图内可以被随意拖动以及手工调整大小Div在设计视图内不能拖动，也不能手工调整大小。通过修改Div的CSS属性position的值(absolute或relative)，使得AP Div与Div可以相互转化。8AP Div与Div的主要区别(1)绝对定位的元素脱离了HTML内容的正常秩序，它不考虑周围的元素（如周围的文本、相邻的Div），它总是准确地出现在为它指定的坐标上。AP Div的“Z轴”属性用于解决堆叠问题。一个被设为“相对定位”的元素会考虑相邻HTML内容的正常秩序。9AP Div与Div的主要区别(2)当使用“绘制AP Div”作版面设计时，Dreamweaver自动地创建ID CSS规则，它设定了应用于特定箱框的样式信息，包括位置、宽度、高度等。当使用“插入Div标签”作版面设计时，Dreamweaver要求你为每个箱框创建或指派一个ID CSS规则。1011AP DivDivmymenu.html示例面板 插入布局绘制AP Div，添加一个AP Div在这个AP Div内插入多个Div121314Div默认是相对定位153.为页面创建一个居中的总容器面板 插入布局插入Div标签1617id值为container的Div，用作总容器。为总容器添加背景图片在面板“CSS样式”内双击“#container”规则184.改变AP Div默认把页面作为容器的情况一个AP Div被精确地放在你所绘制的位置，默认情况下页面将作为其参考点，即无论在何处绘制AP Div，AP Div将嵌套于body标签内。改变AP Div默认把body作为容器的情况：菜单 编辑首选参数19设置“首选参数”使得新建的AP Div自动地嵌套于绘制AP Div时起点所在的容器。5.绘制标题区20自动创建#header CSS规则，并自动删除原先的ID CSS规则为标题区添加背景图片在面板“CSS样式”内双击“#header”规则21往标题区插入图片光标定位于标题区内，菜单 插入图像22设置标题区图片的样式面板 CSS样式新建CSS规则23通过调整图像的边距改变商标图像的位置6.添加介绍区插入一个AP Div，将其命名为“intro”(这将自动增加一个名为“#intro”的ID CSS规则)。之后粘贴文本。24网页已有的标签CSS规则(body)设置字体为仿宋。修改intro Div的样式在“CSS样式”面板内双击“#intro”规则。25intro Div效果26条纹区就是“留白”，位于边框内侧。7.添加主栏区AP Div的ID 设为“main”。从main_content.html页面复制文本。27网页已有的标签CSS规则(body)设置字体为仿宋。28新建类CSS样式.content对主栏区使用.content样式选中main AP Div，在“属性”面板的“类”下拉列表选择“content”项29条纹区就是“留白”，位于边框内侧。只设置了左、右留白。设置主栏区的标题样式在“CSS样式”面板内新建规则30“留白(Padding)”默认值为0，“边距(Margin)”默认值不为0。效果31设置主栏区的段落样式在“CSS样式”面板内新建规则32效果33标题的下边距在“#container#main h2”规则中设为0段落的上边距在“#container#main p”规则中设为0；又因为“留白”的默认值为0；所以标题与段落之间没有空隙。8.添加侧栏区AP Div的ID 设为“sidebar”。从features.html页面复制文本。34网页已有的标签CSS规则(body)设置字体为仿宋。35对侧栏区使用.content样式选中sidebar AP Div，在“属性”面板的“类”下拉列表选择“content”项条纹区就是“留白”，位于边框内侧。样式只设置了左、右留白。设置侧栏区的标题样式在“CSS样式”面板内新建规则36设置侧栏区的列表样式在“CSS样式”面板内新建规则37效果389.修改页面元素的边距值39body的上边距设为0。实时查看页面元素的边距、留白单击工具栏上的“检查”按钮，之后在设计视图内移动鼠标。40标题的上下边距默认非0；段落的上下边距默认非0；列表的上下边距默认非0；列表的左留白默认非0；body的四个边距默认非0；超链接的四边距默认为0。10.为页面元素添加边框在“CSS样式”面板内双击“#main”规则4111.当内容超出AP Div大小时的处理方法一：手工调整Div的高度。方法二：把“溢出”属性设置为“auto”以增加Div的滚动条。42AP Div的“Z轴”属性值同一范围内AP Div的前后位置由其“Z轴”属性值决定。具有较大“Z轴”值的Div将位于较小“Z轴”值的Div前面。4312.用AP Div作页面布局的优缺点优点方便、快捷缺点不能快速地适应变化44小结CSS箱框(或方框)模型AP Div与Div的区别添加AP Div设置AP Div样式(通常使用ID CSS规则)往AP Div里添加内容设置内容的样式(通常使用复合内容CSS规则)45