网页制作入门必备 大师珍藏版 哈工大 10.pptVIP

1-* 第16章 使用Div元素 Div元素，用来在页面中定义一个区域，使用CSS样式控制Div元素的表现效果（关于CSS样式的内容，将在后面的章节中详细讲解）。在div元素中，可以包含文本、图像、表格以及其他各种页面内容。在Dreamweaver CS3中，可以插入两种div元素，一种为“Div标签”，另一种为“AP Div”。下面进行详细讲解。 16.1 插入Div标签 Div标签，本身没有任何表现属性。如果要使Div标签显示某种效果，或者显示在某个位置，就要为Div标签定义CSS样式。插入Div标签的方法如下所示。 （1）在“设计”视图中，选择要添加Div标签的位置。 （2）选择“插入记录”|“布局对象”|“Div标签”命令。打开“插入 Div标签”对话框。 （3）在“插入 Div标签”对话框中，未定义类和ID，直接单击“确定”按钮，插入Div标签。起在设计视图的显示效果，其中Div标签的文本内容是自动添加的。 16.2.2 剪切和复制Div标签 剪切和复制Div标签的步骤，如下所示。 （1）在“设计”视图中，选择Div标签。 （2）执行以下操作之一，剪切或复制Div标签。 选择“编辑”|“剪切”命令，或者“编辑”|“拷贝”命令，剪切或者复制选择的Div标签。 使用快捷键“Ctrl+X”或者快捷键“Ctrl+C”，剪切或者复制选择的Div标签。 右击，在打开的下拉菜单中，选择“剪切”或“拷贝”命令。 16.2.3 粘贴Div标签 粘贴Div标签的步骤，如下所示。 （1）在“设计”视图中，选择粘贴Div标签的位置。 （2）执行以下操作之一，粘贴Div标签。 选择“编辑”|“粘贴”命令，粘贴Div标签。 使用快捷键“Ctrl+V”，粘贴Div标签。 右击，在打开的下拉菜单中，选择“粘贴”命令。 16.2.4 删除Div标签 删除Div标签的步骤，如下所示。 （1）在“设计”视图中，选择要删除的Div标签。 （2）执行以下操作之一，删除Div标签。 选择“编辑”|“清除”命令，删除Div标签。 按下“Delete”键，删除Div标签。 右击，在打开的下拉菜单中，选择“删除标签”命令，删除Div标签。 16.3 相邻和嵌套的Div标签 Div标签，和表格类似，在没有定义任何样式和行为时，默认换行显示。其中嵌套的Div标签的显示，和插入的位置有关。下面分别进行讲解。 16.3.1 相邻的Div标签 在默认的情况下，两个Div并列的标签无法同行显示。新插入的Div标签，根据插入时定义的参数不同，将显示在原有Div标签的顶部或底部。两个Div标签之间的距离为0。其显示效果，如图所示。 16.3.2 嵌套的Div标签 执行以下操作之一，可以制作嵌套的Div标签。 复制Div标签，并粘贴到相应的Div标签之中。 在Div标签中插入新的Div标签。 嵌套的Div标签在设计视图的显示效果，如图所示。 16.4 AP Div简介 AP Div是使用了CSS样式中的绝对定位属性的Div标签。在Dreamweaver CS3中，可以通过拖拽鼠标的方式，在文档的任意位置制作AP Div。制作的AP Div之间可以互相重叠。但是默认情况下，所有的AP Div之间并没有嵌套关系。如果要使AP Div之间可以互相嵌套，就要在首选参数中更改相应的设置。在AP Div中，可以定义标签宽度高度，以及位置等属性。在Dreamweaver中可以使用AP Div进行布局。在布局的时候，还可以使用图层面板来定义图层是否可以重叠等。在Dreamweaver中，可以在AP Div和表格之间进行互换。 16.5 定义AP Div的首选参数 在讲解使用AP Div之前，首先要定义AP Div显示的首选参数。其中包括AP Div的显示属性、大小、背景等。当使用相关命令插入AP Div时，新建的AP Div，将以首选参数中定义的属性显示。 16.6 插入AP Div AP Div，可以使用菜单中的命令插入，也可以选择插入栏中相应的按钮，通过拖拽鼠标添加AP Div。具体操作方法如下所示。 （1）在“设计”视图中，选 择要添加AP Div的位置（如果使用插入栏中相应的按钮制作AP Div，则可以省略这一步）。 （2）选择“插入记录”|“布局对象”|“AP Div”命令，可以插入一个AP Div。 16.7 定义AP Div的属性 在插入AP Div后，可以通过在AP Div属性面板中，定义相应的参数来定义AP Div的显示效果。当选择单个AP Div和同时选择多个AP Div时，属性面板的显示参数也