第9章-使用AP-Div元素

掌握APDiv的基本知识,1、APDiv概述2、创建APDiv元素3、设置APDiv元素的属性4、AP元素面板5、APDiv元素的基本操作,1APDiv概述,APDiv是DIV标签中的一种定位技术，在Dreamweaver中也被叫做图层，用来控制浏览器窗口中元素的位置、层次。APDiv最主要的特性就是它是浮动在网页内容之上的，也就是说，可以在网页上任意改变其位置，实现对APDiv的准确定位。把页面元素放在APDiv中，可以控制APDiv堆叠次序、显示或隐藏等性质。,2创建APDiv元素,创建APDiv元素有以下几种方法：使用主菜单插入APDiv元素。将光标置于文档窗口中要插入APDiv的位置，选择“插入布局对象APDiv”命令，在插入点的位置插入一个APDiv元素。绘制APDiv元素。在“插入”面板中选择“布局”标签，点击后，在文档窗口要插入APDiv的位置按下鼠标左按钮拖曳出一个APDiv元素。直接拖曳“绘制APDiv”按钮到文档窗口中插入APDiv元素。在“插入”面板的“布局”标签中，按下“绘制APDiv”按钮不放，将其拖曳到文档窗口中即可创建一个APDiv元素。,提示：在“插入”面板中选择“布局”标签，点击后，在文档窗口中，按住Ctrl键的同时按住鼠标左键拖曳鼠标，可以绘制多个APDiv元素。在默认情况下，每当用户创建一个新的APDiv，都会使用DIV标志它，并将标记显示到网页左上角的位置。创建的APDiv元素如图7-1所示。若要在网页左上角显示出APDiv标记，首先选择“查看可视化助理不可见元素”命令，使“不可见元素”命令呈被选择状态，然后再选择“编辑首选参数”命令，弹出“首选参数”对话框，选择“分类”选项框中的“不可见元素”选项，选择右侧的“AP元素的锚点”复选框，如图7-2所示，单击【确定】按钮完成设置。,图7-1创建的APDiv元素,图7-2“首选参数”对话框,设置APDiv元素的属性,要正确地运用APDiv元素来设计网页，必须了解APDiv元素的属性和设置方法。设置APDiv元素的属性之前，必须选中APDiv元素。选中APDiv元素的方法一般有以下几种：在文档窗口中，单击要选择的APDiv元素左上角的APDiv元素标记。在APDiv元素的任意位置单击，激活APDiv元素，再单击APDiv左上角的矩形框标记。单击APDiv元素的边框。在APDiv元素未被选中或激活情况下，按住Shift键的同时再单击APDiv元素中的任意位置。,在“APDiv元素”面板中，直接单击APDiv元素的名称。选中APDiv元素后，其对应的“属性”面板如图7-3所示。APDiv“属性”面板中各项含义：CSS-P元素：为选中的APDiv元素设置名称。名称由数字或字母组成，不能用特殊字符。每个APDiv元素的名称是唯一的。左、上：分别设置APDiv元素左边界和上边界相对于页面左边界和上边界的距离，默认单位为像素（px）。也可以指定为pc（pica）、pt（点）、in（英寸）、mm（毫米）、厘米（cm）或%（百分比）。,图7-3“APDiv”的属性面板,宽、高：分别设置APDiv元素高度和宽度，单位设置同“左”、“上”属性。Z轴：设置APDiv元素的堆叠次序，该值越大，则表示其在越前端显示。可见性：设置APDiv元素的显示状态。“可见性”右侧下拉列表框包括四个可选项：“default（缺省）”，选中该项，则不明确指定其可见性属性，在大多数浏览器中，该APDiv会继承其父级APDiv的可见性。“inherit（继承）”，选择该项，则继承其父级APDiv的可见性。“visible（可见）”，选择该项，则显示APDiv及其中内容，而不管其父级APDiv是否可见。“hidden（隐藏）”，选择该项，则隐藏APDiv及其中内容，而不管其父级APDiv是否可见。背景图像：设置APDiv元素的背景图像。可以通过单击“文件夹”按钮选择本地文件，也可以在文本框中直接输入背景图像文件的路径确定其位置。背景颜色：设置APDiv的背景颜色，值为空表示背景为透明。,类：可以将CSS样式表应用于APDiv。溢出：设置APDiv中的内容超过其大小时的处理方法。“溢出”右侧下拉列表框中包括四个可选项：“visible（可见）”，选择该项，当APDiv中内容超过其大小时，APDiv会自动向右或者向下扩展。“hidden（隐藏）”，选择该项，当APDiv中内容超过其大小时，APDiv的大小不变，也不会出现滚动条，超出APDiv内容不被显示。“scroll（滚动）”，选择该项，无论APDiv中的内容是否超出APDiv的大小，APDiv右端和下端都会显示滚动条。“auto（自动）”，选择该项，当APDiv内容超过其大小时，APDiv保持不变，在APDiv右端和下端都出现滚动条，以使其中的内容能通过拖动滚动条显示。剪辑：设置APDiv可见区域大小。在“上”、“下”、“左”、“右”文本框中，可以指定APDiv可见区域上、下、左、右端相对于APDiv边界距离。APDiv经过剪辑后，只有指定的矩形区域才是可见的。,AP元素面板,通过“AP元素”面板可以方便地管理网页文档中APDiv元素。在Dreamweaver中，选择“窗口AP元素”菜单命令或按F2键，均可打开“AP元素”面板，如图7-4所示。“AP元素”面板各选项含义如下：防止重叠：选中此选项，可以防止APDiv元素之间发生重叠。不选中此复选框，AP元素则可以相互重叠。该选项主要用在APDiv和表格相互转换时，当将APDiv转换为表格，为防止浏览器不兼容，选中该选项，以防止AP元素相互重叠。,图7-4“AP元素”面板,图标：如果某一个AP元素左侧有该图标，表示该AP元素可见，如果图标变成，则不可见。如果没有该图标，表示该层继承其父级APDiv元素的可见性。如果没有父级APDiv元素，则父级APDiv元素可以看成其本身，通常情况下，这意味着是可见的。可以通过单击图标控制该APDiv的可见属性。ID：该属性用来显示和更改APDiv元素的名称。通过双击ID下面对应的AP元素默认名称来更改AP元素的名称。Z：该属性见“属性”面板相关设置。可以通过双击APDiv元素的Z值属性来更改其值。,APDiv元素的基本操作,1调整APDiv的大小调整APDiv时，既可以单独调整一个APDiv，也可以同时调整多个APDiv。（1）调整一个APDiv的大小选中一个APDiv后，执行下列操作之一，可调整一个APDiv的大小：应用鼠标拖曳方式。选中APDiv，拖动四周的任何调整手柄。应用键盘方式。选中APDiv，按住Ctrl+方向键，每次调整一个像素大小。应用网络靠齐方式。选中APDiv，同时按住Ctrl+Shift+方向键，可按网格靠齐增量来调整大小。,应用修改属性值方式。在“属性”面板中，修改“宽”和“高”选项值来调整APDiv的大小（2）同时调整多个APDiv的大小在“文档”窗口中按住Shift键，依次选中两个或多个APDiv，执行以下操作之一，可同时调整多个APDiv的大小：应用菜单命令。选择“修改排列顺序设成宽度（或高度）相同”命令。应用快捷键。按下组合键Ctrl+Shift+7或者Ctrl+Shift+9，则以当前APDiv为标准同时调整多个层的宽度或高度。,2更改APDiv的堆叠顺序对网页进行排版时，常需要控制叠放在一起的不同网页元素的显示顺序，以实现特殊的效果。使用AP元素“属性”面板或“AP”面板可以改变AP元素的堆叠顺序。AP元素的显示顺序与Z轴值的顺序一致。Z值越大，AP元素的位置越靠上。在“AP元素”控制面板中按照堆叠顺序排列AP元素的名称，如图7-5所示。,图7-5APAP元素的显示顺序与Z轴值的顺序一致,（1）使用“AP”面板改变层的堆叠顺序打开“AP”面板，在“AP”面板中执行下列操作之一，改变AP元素的堆叠顺序。选中指定的AP元素名，将其拖动到所需的堆叠顺序处，然后释放鼠标。在“Z”列中单击需要修改的AP元素编号，如果要上移则输入一个比当前值更大的数值，如果要下移则输入一个比当前值更小的数值。（2）使用AP元素“属性”面板改变层的堆叠顺序。在“AP元素”面板或文档窗口中选择一个AP元素，在其“属性”面板的“Z轴”文本框中输入一个更高或更低的编号，使当前AP元素沿着堆叠顺序向上或向下移动。,3嵌套AP元素所谓嵌套APDiv，是指在一个APDiv元素中创建子APDiv元素。使用嵌套APDiv的好处是能确保子APDiv永远定位于父级APDiv上方。嵌套通常用于将AP元素组织在一起。（1）创建嵌套AP元素使用下列方法之一，创建嵌套AP元素：应用菜单命令。将插入点放在现有AP元素中，选择“插入布局对象APDiv”命令。应用按钮拖曳。拖曳“插入”面板“布局”选项卡中的“绘制APDiv”按钮，然后将其放在现有AP元素中。应用按钮绘制。选择“编辑首选参数”命令，启用“首选参数”对话框，在“分类”选项列表中选择“AP元素”选项，在右侧选择“在APDiv中创建以后嵌套”复选框，单击【确定】按钮。单击“插入”面板“布局”标签中的“绘制APDiv”按钮，在现有AP元素中，按住Ctrl键的同时拖曳鼠标绘制一个嵌套AP元素。创建的嵌套AP元素如图7-6所示。,（2）将现有AP元素嵌套在另一个AP元素中使用“AP元素”控制面板，将现有AP元素嵌套在另一个AP元素中的具体操作步骤如下：1）选择“窗口AP元素”命令，启用“AP元素”控制面板。2）在“AP元素”控制面板中选择一个AP元素，然后按住Ctrl键的同时拖曳鼠标，将其移动到“AP元素”控制面板的目标AP元素上，当目标AP元素的名称突出显示时，松开鼠标左健，即可完成操作。本例将apDiv1拖曳到目标apDiv2中，效果如图7-7所示。,提示：如果已启用“AP元素”控制面板中的“防止重叠”选项，那么在移动AP元素时将无法使AP元素相互重叠。,图7-6创建嵌套的AP元素图7-7将apDiv1嵌套在apDiv2中,4对齐AP元素使用AP元素对齐操作可将一个或多个AP元素与最后一个被选中AP元素的边界对齐。当对选定AP元素进行对齐时，未选定的子层可能会因为其父层被选定并移动而随之移动。为了避免出现这种情况，不要用嵌套层。对齐两个或更多个AP元素有以下几种方法。（1）应用菜单命令对齐AP元素在文档窗口中，按住Shift键，依次选中需要对齐的多个AP元素，然后选择“修改排列顺序”命令，在其子菜单中选择一种对齐方式：左对齐：以最后一个被选中AP元素的左侧为基准对齐。右对齐：以最后一个被选中AP元素的右侧为基准对齐。上对齐：以最后一个被选中AP元素的顶部为基准对齐。对齐下缘：以最后一个被选中AP元素的底部为基准对齐。,（2）应用“属性”面板对齐层选中需要对齐的多个AP元素，在“属性”面板的“上”或“左”选项中输入具体数据，则以多个层的上边线或左边线相对于页面顶部或左侧的位置来对齐。提示：在移动网页元素时，可以让其自动靠齐到网格，还可以通过指定网格设置来更改网格或控制靠齐行为。将AP元素靠齐到网格的具体方法：选择“查看网格设置显示网格”命令，启用网格显示。选择“查看网格设置靠齐到网格”命令，选中AP元素并拖动，当AP元素靠近网格线一定距离时，该AP元素将自动靠齐到最近的网格。,7.2案例1使用APDiv元素布局网页,利用APDiv制作的图文混排网页效果如图7-8所示。,图7-8用APDiv元素布局网页效果图,本实例在文档中创建四个APDiv元素，为其中的一个元素添加图像，为其他三个元素添加文字。通过对两个嵌套的APDiv元素属性设置，实现文字的阴影特效。具体步骤如下：1）在DreamweaverCS4中新建一个空白HTML文档，并将其以“7-1.html”为文件名保存。2）创建APDiv元素。在“布局”选项卡下单击“绘制APDiv”按钮，在文档中绘制一个APDiv，选中绘制的APDiv，在其“属性”面板将其命名为image,设置其“左”、“上”、“宽”、“高”各为50px、10px、800px、600px，“背景颜色”为#CCFFCC。3）根据步骤2）插入新的APDiv元素，并将其命名为bottom。设置其“上”、“宽”、“高”各为610px、800px、50px，“背景颜色”为#FF9966。4）对齐AP元素。选中插入的两个AP元素，选择“修改排列顺序”命令，在其子菜单中选择“左对齐”，将两个AP元素左边缘对齐。,5）创建嵌套AP元素。打开“AP元素”面板，在“防止重叠”复选框未被选中状态下，选中image元素，确保光标处于激活状态，选择“插入布局对象APDiv”命令，在image元素左上角插入一个嵌套APDiv，并将其命名为smallbox，其“宽”、“高”分别设置为200px和60px。6）用同样的方法，在image元素中创建嵌套的APDiv元素bgsmallbox，设置和smallbox元素相同的“宽”、“高”属性，并将其调整到合适位置。在“AP属性”面板中，将smallbox元素和bgsmallbox的“Z”轴属性分别设置为3和2。此时“AP元素”面板如图7-9所示。7）按住Shift键，同时选中被嵌套的两个元素，选择“修改排列顺序右对齐”命令，将这两个APDiv元素按照后选择的元素进行右对齐。设置后的4个APDiv元素布局如图7-10所示。,8）激活image元素，将光标置于该元素的左上角，在该元素内部插入一幅图片。9）激活bottom元素，在bottom元素中输入文本，并设置文字的“字体”属性为宋体，“大小”为18px。,图7-9“AP元素”面板图7-10四个APDiv元素的布局,10）依次在smallbox、bgsmallbox中输入“我爱我家”文字，并分别设置文字的“字体”属性为华文新魏，“大小”为36px，“颜色”分别为#FFBB00和#000000。效果如图7-11所示。11）调整smallbox和bgsmallbox元素到适当位置，使其产生阴影效果。12）保存网页文档。按下F12键打开浏览器预览效果。提示：在文档中有多个APDiv元素，在操作时，为避免其相互影响，可在“AP面板”中将目前没有激活的元素设置为隐藏。,图7-11在APDiv元素中添加文字和图片,学习任务：APDiv与表格相互转换,将APDiv元素转换为表格将表格转换为APDiv元素,将APDiv元素转换为表格,使用APDiv可以方便的定位网页中的元素，从而实现网页的布局。与前面学过的表格相比，APDiv元素操作更加方便、实现更为灵活、功能更加强大。考虑到浏览器兼容性问题，有时候需要将APDiv转换为表格，以防止版本过低的浏览器（IE3.0及其以下版本浏览器）不支持APDiv。另外，可以通过APDiv和表格相互转换来充分发挥两种不同布局方式的优点，方便地布局页面。在Dreamweaver中打开已有的网页文件，如图7-12所示。该页面由两个APDiv元素构成。将页面中的APDiv元素转化为表格的具体操作如下：,1）选择“修改转换将APDiv转换为表格”菜单命令，弹出“将APDiv转换为表格”对话框中，如图7-13所示。“将APDiv转换为表格”对话框各选项含义如下：“最精确”单选按钮：将所有APDiv转换为表格。若APDiv元素之间存在间隙，则通过插入单元格来填充这些间隙。,图7-12用APDiv元素布局的网页,图7-13“将APDiv元素转换为表格”对话框,“最小：合并空白单元”单选按钮：将一定距离以内的APDiv元素创建为相邻的单元格，即融合其间的间隙。选中该单选按钮，可在其下方的文本框中输入最小距离值。“使用透明GIFs”复选框：将转换后表格的最后一行中填充为透明的GIF图像，这样可以确保在所有的浏览器中表格显示结果一致。如果取消此选项，则表格中不再放置透明GIF图像，这样的表格可能在不同浏览器中显示稍有差异。“置于页面中央”复选框：选中此复选框，则生成的表格在页面居中位置；若取消此复选框，则生成的表格在页面中左对齐。“防止重叠”复选框：选中此复选框，可以防止APDiv重叠。“显示AP元素面板”复选框：选中此复选框，在转换完成后会显示“AP元素”面板。,“显示网格”复选框：选中此复选框，可以在转换后的文档中显示网格线。“靠齐到网格”复选框：选中此复选框，可以将转换后的文档靠齐到网格。保持默认设置。单击【确定】按钮，将文档中的APDiv元素转换为表格。提示：如果文档有嵌套的APDiv元素，或者A