第八章使用adiv值布局网页.ppt 17页VIP

第八章　使用AP Div布局网页 第八章　使用AP Div布局网页 本章学习要点： AP Div的基本概念 AP Div的创建和基本操作 AP Div与表格的相互转换 AP Div综合应用 8.1 学习任务：AP Div基础知识 所谓AP Div，是指存放用DIV标记描述的HTML内容的容器，用来控制浏览器窗口中元素的位置、层次。在Dreamweaver CS3环境下，可以利用AP Div灵活方便的进行页面布局。 AP Div最主要的特性就是它是浮动在网页内容之上的。也就是说，可以在网页上任意改变其位置，实现对AP Div的准确定位。 AP Div可以相互堆叠，通过定义AP Div的层次关系，可以方便实现文字阴影等效果； 8.1.2 创建AP Div元素工具栏 在Dreamweaver中可以通过“布局”工具栏方便的创建AP Div元素 在菜单栏中，选择“插入→布局”命令，可以展开“布局”工具栏。在“标准”模式下，和AP Div创建有关的是“插入Div标签”按钮和“绘制AP Div”按钮。 “插入Div标签”按钮：单击此按钮，在文档中自动插入一个AP Div元素。 “绘制AP Div”按钮：单击此按钮，将鼠标指针移到文档窗口中，鼠标指针变为十字状，按下鼠标并拖动，可以绘制一个AP Div元素。 8.1.3 AP Div元素的“属性”面板 AP Div“属性”面板中各项含义如下： CSS-P元素：为选中的AP Div元素设置名称。名称由数字或字母组成，不能用特殊字符。每个AP Div元素的名称是唯一的。 左、上：分别设置AP Div元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（px）。也可以指定为pc（pica）、pt（点）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。 宽、高：分别设置AP Div元素高度和宽度，单位设置同“左”、“上”属性。 Z轴：设置AP Div元素的堆叠次序，该值越大，则表示其在越前端显示。 可见性：设置AP Div元素的显示状态。“可见性”右侧下拉列表框包括四个可选项： default（缺省）：选中该项，则不明确指定其可见性属性，在大多数浏览器中，该AP Div会继承其父级AP Div的可见性。 inherit（继承）：选择该项，则继承其父级AP Div的可见性。 visible（可见）：选择该项，则显示AP Div及其中内容，而不管其父级AP Div是否可见。 hidden（隐藏）：选择该项，则隐藏AP Div及其中内容，而不管其父级AP Div是否可见。 背景图像：设置AP Div元素的背景图像。可以通过单击“文件夹”按钮选择本地文件，也可以在文本框中直接输入背景图像文件的路径确定其位置。 背景颜色：设置AP Div的背景颜色，值为空表示背景为透明。 类：可以将CSS样式表应用于AP Div。 溢出：设置AP Div中的内容超过其大小时的处理方法。“溢出”右侧下拉列表框中包括四个可选项： visible（可见）：选择该项，当AP Div中内容超过其大小时，AP Div会自动向右或者向下扩展。 hidden（隐藏）：选择该项，当AP Div中内容超过其大小时，AP Div的大小不变，也不会出现滚动条，超出AP Div内容不被显示。 scroll（滚动）：选择该项，无论AP Div中的内容是否超出AP Div的大小，AP Div右端和下端都会显示滚动条。 auto（自动）：选择该项，当AP Div内容超过其大小时，AP Div保持不变，在AP Div右端和下端都出现滚动条，以使其中的内容能通过拖动滚动条显示。 剪辑：设置AP Div可见区域大小。在“上”、“下”、“左”、“右”文本框中，可以指定AP Div可见区域上、下、左、右端相对于AP Div边界距离。AP Div经过剪辑后，只有指定的矩形区域才是可见的。 8.1.4 AP元素面板 “AP元素”面板各选项含义如下： 防止重叠：选中此选项，可以防止AP Div元素之间发生重叠。不选中此复选框，AP元素则可以相互重叠。该选项主要用在AP Div和表格相互转换时，当将AP Div转换为表格，为防止浏览器不兼容，选中该选项，以防止AP元素相互重叠。 图标：如果某一个AP 元素左侧有该图标，表示该AP 元素可见，如果图标变成，则不可见。如果没有该图标，表示该层继承其父级AP Div元素的可见性。如果没有父级AP Div元素，则父级AP Div元素可以看成其本身，通常情况下，这意味着是可见的。可以通过单击图标控制该AP Div的可见属性。 名称：该属性用来显示和更改AP Div元素的名称。如果想更改该AP Div元素的名称，可以通过双击名字进行更改。 Z：该属性见“属性”面板相关设置。可以通过双击AP Div元素的Z值属性来更改其值。 8.2 案例1 创建AP Div元素并在其中添加文字和图像 〖学习目标〗在Dreamweaver CS3中，创建若干AP Div元素，在其内部添加文字和图像，并设置其属性。 〖知识要点〗AP Div元素的添加；AP Div属性设置；在AP Div中插入文字；在AP Div中插入图像；创建嵌套AP Div；AP Div的基本操作；设置AP Div元素的排列次序等。利用AP Div制作的图文混排网页效果如图所示。 8.3 学习任务：AP Div与表格相互转换 8.3.1 将AP Div元素转换为表格 转换步骤： 1）选择“修改→转换→将AP Div转换为表格”菜单命令，弹出“将AP Div元素转换为表格”对话框中，从中进行相应设置，如图8-11所示。 “将AP Div元素转换为表格”对话框各选项含义如下： “最精确”单选按钮：将所有AP Div转换为表格。 “最小：合并空白单元”单选按钮：将一定距离以内的AP Div元素创建为相邻的单元格，即融合其间的间隙。 “使用透明GIFs”复选框：将转换后表格的最后一行中填充为透明的GIF图像，这样可以确保在所有的浏览器中表格显示结果一致。 “置于页面中央”复选框：选中此复选框，则生成的表格在页面居中位置；若取消此复选框，则生成的表格在页面中左对齐。 “防止重叠”复选框：选中此复选框，可以防止AP Div重叠。 “显示AP元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。 “显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。 “靠齐到网格”复选框：选中此复选框，可以将转换后的文档靠齐到网格。 2）保持默认设置。单击【确定】按钮，将文档中的AP Div元素转换为表格。 8.3.2 将表格转换为AP Div元素 8.3.2 将表格转换为AP Div元素 操作步骤： 1）打开一个用表格布局的网页文件，选择“修改→转换→将表格转换为AP Div”菜单命令，弹出“将表格转换为AP Div”对话框， “将表格转换为AP Div”对话框各选项含义如下： “防止重叠”复选框：选中此复选框，可以在操作AP Div元素时，防止AP Div元素之间相互重叠。 “显示AP Div元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。 “显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。 “靠齐到网格”复选框：选中此复选框，可以将转换后的文档同网格靠齐。 2）选中“防止重叠”复选框和“显示AP Div元素面板”复选框，单击【确定】按钮，将文档中的表格转换为AP Div元素。 8.4 案例2 使用Div制作网页下拉菜单 〖学习目标〗 使用AP Div元素的“显示”和“隐藏”属性制作下拉菜单，并熟悉AP Div标签。 〖知识要点〗AP Div元素的基本操作；AP Div标签的HTML代码规范；网页中的行为；使用“行为”面板设置行为的方法；AP Div元素“可见性”属性使用的技巧。案例效果：当鼠标移动到导航条的相关位置时，弹出下拉菜单，当鼠标移开时，下拉菜单隐藏。鼠标经过前和鼠标经过时的页面效果分别如图所示。 鼠标经过前的页面 鼠标经过文字时显示的下拉菜单 8.4.1 Div标签 Div标签的基本格式为： div----------- property:value property:value…content/div 其中，property是Div标签的属性，value是该属性的值。Div标签的属性及含义如表8-1所示。 Div标签属性及其含义 谢 谢！ 网页设计与制作 网页设计与制作 设置AP元素的背景图像 background-image 设置AP元素的背景颜色 background-color 设置AP元素的层级位置 z-index 设置AP元素的宽度属性 border 设置AP元素的填充距离属性 padding 设置AP元素的页边距属性 margin inherit：设置AP元素为继承父级AP元素可见性 hidden：设置AP元素为不可见 visible：设置AP元素为可见 visibility inherit：设置AP元素内方块位置为继承父级AP元素属性 auto：设置AP元素内方块位置为默认属性 clip 设置AP元素的高度 height 设置AP元素的宽度 width 设置AP元素与窗口上边距 top 设置AP元素与窗口左边距 left absolute：该AP元素相对于其所在的窗口放置 relative：该AP元素相对于其他AP元素放置 position 含义 属性