网页设计与制作案例教程 教学课件 作者 池同柱第11章 布局对象的使用.ppt

《网页设计与制作案例教程 教学课件 作者 池同柱第11章 布局对象的使用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第11章布局对象的使用一、AP元素面板“AP元素”面板显示了网页中所有的APDiv及各个APDiv之间的关系，在“AP元素”面板中可以选择APDiv，设置APDiv的显示属性、设置APDiv的堆叠顺序及重命名APDiv等。1、打开“AP元素”面板：选择“窗口/APDiv”命令或按F2键。2、当前网页中的所有APDiv都会显示在“AP元素”面板中，嵌套APDiv以树状结构显示。3、在“AP元素”面板中可对APDiv进行如下操作：双击APDiv的名称可对APDiv进行重命名。单击APDiv后面的数字可修改APDiv的重叠顺序，即Z轴顺序，数值大的将位于上APDiv。在APDiv名称前面有

2、一个眼睛图标，睁开的眼睛图标表示该APDiv处于显示状态；闭合的眼睛图标表示该APDiv处于隐藏状态；单击眼睛图标可切换APDiv的显示或隐藏。如果未显示眼睛图标，表示没有指定可见性。选中“防止重叠”复选框可以防止APDiv重叠，且不能创建嵌套APDiv。4、APDiv面板分为3栏，最左侧是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层；中间显示的是层的名称；最右侧是层在Z轴的排列情况。二、插入APDiv并设置其属性1．创建APDiv方法1：将插入栏切换到“布局”插入栏，单击“绘制APDiv”按钮，鼠标光标将变为“＋”形状，在编辑窗口中的任意位置按下鼠标左键不放进行托动即可创建

3、APDiv。方法2：在菜单栏中选择“插入记录/布局对象/APDiv”命令，插入APDiv。2.创建嵌套APDivAPDiv可以进行嵌套。在某个APDiv内部创建的APDiv称为嵌套APDiv或子APDiv，嵌套APDiv外部的APDiv称为父APDiv。子APDiv可以浮动于父APDiv之外的任何位置，其大小不受父APDiv限制。创建嵌套APDiv方法：将鼠标光标定位到所需的APDiv内，选择“插入记录/布局对象/APDiv”命令即可。如果要逐级添加子APDiv，只需将鼠标光标定位到所需的子APDiv中，按创建嵌套APDiv的方法即可。3.APDiv属性设置可以在“属性”面板中对其A

4、PDiv的属性进行设置，下面分别介绍单个APDiv和多个APDiv的属性设置。a、单个APDiv的属性设置选择要设置属性的单个APDiv，其对应的属性面板如图所示。“左”文本框：设置APDiv左边相对于页面左边或父APDiv左边的距离。“上”文本框：设置APDiv顶端相对于页面顶端或父APDiv顶端的距离。“宽”文本框：设置APDiv的宽度值。“高”文本框：设置APDiv的高度值。“Z轴”文本框：设置APDiv的Z轴顺序，也就是设置嵌套APDiv在网页中的重叠顺序，较高值的APDiv位于较低值的APDiv上方。“可见性”下拉列表框：设置APDiv的可见性，其中default表示默认值

5、，其可见性由浏览器决定。inherit表示继承该层父级的可见性；visible表示显示APDiv及其内容，与父APDiv的可见性无关；hidden表示隐藏APDiv及内容，与父APDiv的可见性无关。“背景图像”文本框：用于设置背景图像。“背景颜色”文本框：设置APDiv的背景颜色。“类”下拉列表框：选择APDiv的样式。“溢出”下拉列表框：选择当APDiv中的内容超出APDiv的范围后显示内容的方式。“剪辑”栏：在该栏中可设置APDiv的可见区域。其中“左”、“右”、“上”、“下”4个文本框分别用于设置APDiv在各个方向上的可见区域与APDiv边界的距离，其单位为“像素”。b、多

6、个APDiv的属性设置如果多个APDiv具有相同的属性需要设置，则可以同时选中这些APDiv,然后再在“属性”面板中进行设置。选择多个APDiv后的“属性”面板如图所示。多个APDiv的“属性”面板中，上部可以设置APDiv中文本的样式，其设置方法与文本“属性”面板相同。下部的大部分属性与单个APDiv的“属性”面板相同，不同的是多个APDiv的“属性”面板中多了一个“标签”下拉列表框，其中包括DIV和SPAN两个选项。Div标签在功能上与span标签相似，最主要的差别在于Div标签是一个块级元素，在默认情况下Div标签会独占一行（可以通过设置CSS样式使多个Div标签处在同一行中）

7、，而span标签则不同，可以与其他网页元素同行。三、选择APDiv1.单个APDiv的选择方法1：在编辑窗口中单击要选择的APDiv边框。方法2：在“AP元素”面板中单击要选择的APDiv名称。方法3：按住Shift＋Ctrl键在要选择的APDiv中单击。方法4：选择APDiv后，在“AP元素”面板中会高亮度显示该APDiv名称。2.多个APDiv的选择方法1：可按住Shift键后依次在需要选中的APDiv中或APDiv边框上单击。方法2：可按住Shift