最新5-用AP-Div作页面布局PPT课件.ppt

《最新5-用AP-Div作页面布局PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、5-用AP-Div作页面布局目标理解CSS的箱框模型创建Div及APDiv堆叠及重叠页面元素设定箱框内容的样式使用可视化助理调整页面元素位置2效果3Div标签与页面布局一个Div标签自身是不会产生任何显示效果的，除非你用CSS规则专门为其作了设定。Div标签的边距、留白、边框默认值为0。页面内的Div标签将在页面内设定区域，之后你把页面内容如文本、图像等直接放在这个区域内。“绘制APDiv”功能可创建精确定位的箱框。通常页面内不同的位置有不同的样式，因此非常适合使用Div及对应的IDCSS规则，当然也不排除对Div使用类CSS规

2、则。72.Div与APDivAPDiv在设计视图内可以被随意拖动以及手工调整大小Div在设计视图内不能拖动，也不能手工调整大小。通过修改Div的CSS属性position的值(absolute或relative)，使得APDiv与Div可以相互转化。8APDiv与Div的主要区别(1)绝对定位的元素脱离了HTML内容的正常秩序，它不考虑周围的元素（如周围的文本、相邻的Div），它总是准确地出现在为它指定的坐标上。APDiv的“Z轴”属性用于解决堆叠问题。一个被设为“相对定位”的元素会考虑相邻HTML内容的正常秩序。9APDiv与

3、Div的主要区别(2)当使用“绘制APDiv”作版面设计时，Dreamweaver自动地创建IDCSS规则，它设定了应用于特定箱框的样式信息，包括位置、宽度、高度等。当使用“插入Div标签”作版面设计时，Dreamweaver要求你为每个箱框创建或指派一个IDCSS规则。10APDivDiv11mymenu.html示例面板插入>>布局>>绘制APDiv，添加一个APDiv在这个APDiv内插入多个Div1213Div默认是相对定位14153.为页面创建一个居中的总容器面板插入>>布局>>插入Div标签16id值为contain

4、er的Div，用作总容器。17为总容器添加背景图片在面板“CSS样式”内双击“#container”规则184.改变APDiv默认把页面作为容器的情况一个APDiv被精确地放在你所绘制的位置，默认情况下页面将作为其参考点，即无论在何处绘制APDiv，APDiv将嵌套于body标签内。改变APDiv默认把body作为容器的情况：菜单编辑>>首选参数设置“首选参数”使得新建的APDiv自动地嵌套于绘制APDiv时起点所在的容器。195.绘制标题区自动创建#headerCSS规则，并自动删除原先的IDCSS规则20为标题区添加背景图片

5、在面板“CSS样式”内双击“#header”规则21往标题区插入图片光标定位于标题区内，菜单插入>>图像22设置标题区图片的样式面板CSS样式>>新建CSS规则通过调整图像的边距改变商标图像的位置236.添加介绍区插入一个APDiv，将其命名为“intro”(这将自动增加一个名为“#intro”的IDCSS规则)。之后粘贴文本。网页已有的标签CSS规则(body)设置字体为仿宋。24修改introDiv的样式在“CSS样式”面板内双击“#intro”规则。25introDiv效果条纹区就是“留白”，位于边框内侧。267.添加主栏

6、区APDiv的ID设为“main”。从main_content.html页面复制文本。网页已有的标签CSS规则(body)设置字体为仿宋。27新建类CSS样式——.content28对主栏区使用.content样式选中mainAPDiv，在“属性”面板的“类”下拉列表选择“content”项条纹区就是“留白”，位于边框内侧。只设置了左、右留白。29设置主栏区的标题样式在“CSS样式”面板内新建规则“留白(Padding)”默认值为0，“边距(Margin)”默认值不为0。30效果31设置主栏区的段落样式在“CSS样式”面板内新建

7、规则32效果标题的下边距在“#container#mainh2”规则中设为0；段落的上边距在“#container#mainp”规则中设为0；又因为“留白”的默认值为0；所以标题与段落之间没有空隙。338.添加侧栏区APDiv的ID设为“sidebar”。从features.html页面复制文本。网页已有的标签CSS规则(body)设置字体为仿宋。34对侧栏区使用.content样式选中sidebarAPDiv，在“属性”面板的“类”下拉列表选择“content”项条纹区就是“留白”，位于边框内侧。样式只设置了左、右留白。35设

8、置侧栏区的标题样式在“CSS样式”面板内新建规则36设置侧栏区的列表样式在“CSS样式”面板内新建规则37效果389.修改页面元素的边距值body的上边距设为0。39实时查看页面元素的边距、留白单击工具栏上的“检查”按钮，之后在设计视图内移动鼠标。标题的上下边距