布局对象的使用课件

布局对象的使用

一、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名称前面有一个眼睛图标，睁开的眼睛图标表示该APDiv处于显示状态；闭合的眼睛图标表示该APDiv处于隐藏状态；单击眼睛图标可切换APDiv的显示或隐藏。如果未显示眼睛图标，表示没有指定可见性。选中“防止重叠”复选框可以防止APDiv重叠，且不能创建嵌套APDiv。4、APDiv面板分为3栏，最左侧是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的层；中间显示的是层的名称；最右侧是层在Z轴的排列情况。二、插入APDiv并设置其属性1．创建APDiv

方法1：将插入栏切换到“布局”插入栏，单击“绘制APDiv”按钮，鼠标光标将变为“＋”形状，在编辑窗口中的任意位置按下鼠标左键不放进行托动即可创建APDiv。 方法2：在菜单栏中选择“插入记录/布局对象/APDiv”命令，插入APDiv。2.创建嵌套APDiv APDiv可以进行嵌套。在某个APDiv内部创建的APDiv称为嵌套APDiv或子APDiv，嵌套APDiv外部的APDiv称为父APDiv。子APDiv可以浮动于父APDiv之外的任何位置，其大小不受父APDiv限制。 创建嵌套APDiv方法：将鼠标光标定位到所需的APDiv内，选择“插入记录/布局对象/APDiv”命令即可。如果要逐级添加子APDiv，只需将鼠标光标定位到所需的子APDiv中，按创建嵌套APDiv的方法即可。3.APDiv属性设置 可以在“属性”面板中对其APDiv的属性进行设置，下面分别介绍单个APDiv和多个APDiv的属性设置。a、单个APDiv的属性设置 选择要设置属性的单个APDiv，其对应的属性面板如图所示。“左”文本框：设置APDiv左边相对于页面左边或父APDiv左边的距离。“上”文本框：设置APDiv顶端相对于页面顶端或父APDiv顶端的距离。“宽”文本框：设置APDiv的宽度值。“高”文本框：设置APDiv的高度值。“Z轴”文本框：设置APDiv的Z轴顺序，也就是设置嵌套APDiv在网页中的重叠顺序，较高值的APDiv位于较低值的APDiv上方。“可见性”下拉列表框：设置APDiv的可见性，其中default表示默认值，其可见性由浏览器决定。inherit表示继承该层父级的可见性；visible表示显示APDiv及其内容，与父APDiv的可见性无关；hidden表示隐藏APDiv及内容，与父APDiv的可见性无关。“背景图像”文本框：用于设置背景图像。“背景颜色”文本框：设置APDiv的背景颜色。“类”下拉列表框：选择APDiv的样式。“溢出”下拉列表框：选择当APDiv中的内容超出APDiv的范围后显示内容的方式。“剪辑”栏：在该栏中可设置APDiv的可见区域。其中“左”、“右”、“上”、“下”4个文本框分别用于设置APDiv在各个方向上的可见区域与APDiv边界的距离，其单位为“像素”。b、多个APDiv的属性设置 如果多个APDiv具有相同的属性需要设置，则可以同时选中这些APDiv,然后再在“属性”面板中进行设置。选择多个APDiv后的“属性”面板如图所示。

多个APDiv的“属性”面板中，上部可以设置APDiv中文本的样式，其设置方法与文本“属性”面板相同。下部的大部分属性与单个APDiv的“属性”面板相同，不同的是多个APDiv的“属性”面板中多了一个“标签”下拉列表框，其中包括DIV和SPAN两个选项。

Div标签在功能上与span标签相似，最主要的差别在于Div标签是一个块级元素，在默认情况下Div标签会独占一行（可以通过设置CSS样式使多个Div标签处在同一行中），而span标签则不同，可以与其他网页元素同行。

三、选择APDiv

1.单个APDiv的选择方法1：在编辑窗口中单击要选择的APDiv边框。方法2：在“AP元素”面板中单击要选择的APDiv名称。方法3：按住Shift＋Ctrl键在要选择的APDiv中单击。方法4：选择APDiv后，在“AP元素”面板中会高亮度显示该APDiv名称。2.多个APDiv的选择方法1：可按住Shift键后依次在需要选中的APDiv中或APDiv边框上单击。方法2：可按住Shift键后依次在“AP元素”面板中单击需要选中APDiv的名称。四、调整Div的大小1.单个APDiv的调整方法1：选择要调整大小的APDiv，在“属性”面板“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键确认。方法2：将光标移至要调整大小的APDiv边缘，当鼠标光标变为箭头调整形状时，按住鼠标左键不放，边观察“属性”面板中动态显示的“宽”和“高”数值边进行拖动，至需要大小后释放鼠标即可。方法3：按住Ctrl再按键盘的方向键，可以移动APDiv的右边框和下边框，每次调整1个像素的大小；按住Shift＋Ctrl键的同时再按键盘上的方向键可每次调整10个像素的大小。2.多个APDiv的调整方法1：选择需调整大小的多个APDiv，然后选择“修改/排列顺序”菜单中的“设成宽度相同”或“设成高度相同”命令，则所有选择的APDiv将设置为最后选择APDiv的宽度或高度。方法2：在“属性”面板的“宽”、“高”文本框中输入所需的宽度和高度值，再按Enter键，选择的所有APDiv将调整为设定的大小。五、使用Spry菜单栏

Spry菜单栏是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。

Dreamweaver允许插入两种菜单栏：垂直菜单栏和水平菜单栏。具体步骤：将光标置于页面中，执行“插入记录/布局对象/Spry菜单栏”命令。插入后，保存网页，按F12键在浏览器中预览。

六、使用Spry选项卡式面板

选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。具体步骤：将光标置于页面中，执行“插入记录/布局对象/Spry选项卡式面板”命令，插入后，保存网页，按F12键在浏览器中预览。七、使用Spry折叠式

折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。具体步骤：将光标置于页面中，执行“插入记录/布局对