搜索
、第4章APDiv、框架与网页布局4.1【案例17】“秦始皇兵马俑—兵器介绍”网页相关知识1．设置APDiv的默认属性单击“编辑”→“首选参数”命令，弹出“首选参数”对话框，再选择该对话框内“分类”列表框中的“AP元素”选项，如图4-1-3所示。其中各个选项的作用如下：（1）“显示”下拉列表框：设置默认状态下APDiv的可视度。可以选择“default”（浏览器默认状态）“inherit”（继承母体可视度）、“visible”（可视）和“hidden”（隐藏）。（2）“宽”和“高”文本框：设置默认状态下插入APDiv的宽度和高度，单位为像素。（3）“背景颜色”按钮与文本框：设置默认状态下插入APDiv的背景颜色，默认值为透明。单击按钮可以调出颜色面板，利用它来选中颜色；也可以在文本框内输入颜色的代码。（4）“背景图像”文本框与“浏览”按钮：用来设置默认状态下插入APDiv的背景图像。单击“浏览”按钮，可以弹出“选择图像源”对话框，从中可以设定APDiv的背景图像。（5）“嵌套”复选框：选中它后，可以在将APDiv拖动到其他APDiv时实现嵌套。（6）“Netscape4兼容性”复选框：选中它后，Dreamweaver会向HTML文件的HEAD标记中加入JavaScript函数，用来解决在Netscape4.0浏览器中添加嵌入CSSAPDiv时可自动调整APDiv的尺寸，避免异常问题产生。2．APDiv的基本操作（1）创建APDiv可以有以下三种方法：①单击“插入”（布局）栏内的“描绘APDiv”按钮，在页面内拖动出一个矩形，即可创建一个APDiv，如图4-1-4所示。这时鼠标指针变为十字状态。②将“绘制APDiv”按钮拖动到网页页面中，也可在页面光标处插入一个默认属性的APDiv。③将光标移到要插入APDiv的位置。单击“插入记录”→“布局对象”→“APDiv”命令，也可以在网页内光标处创建一个APDiv。图4-1-4创建一个APDiv（2）选中APDiv：在改变APDiv的属性前应先选中APDiv，选中的APDiv会在APDiv矩形的左上角产生一个双矩形状控制柄图标，同时在APDiv矩形的四周产生八个黑色的方形控制柄。选中一个APDiv的效果如图4-1-5所示。选中APDiv的方法有多种，操作方法如下：①单击APDiv的边框线，即可选中该APDiv。②单击APDiv的内部，会在APDiv矩形的左上角产生一个双矩形状控制柄图标，单击该控制柄图标，即可选中与它相应的APDiv。③按住【Shift】键，分别单击要选择的各个APDiv的内部或边框线，即可选中多个APDiv。如果选中的是多个APDiv，则只有一个APDiv的方形控制柄是黑色实心的，其他选中的APDiv的方形控制柄是空心的，如图4-1-6所示。图4-1-5选中一个APDiv图4-1-6选中多个APDiv（3）调整一个APDiv大小：改变一个APDiv大小的方法有三种，首先要选中该对象。①鼠标拖动调整的方法：将鼠标移到APDiv的方形控制柄处，当鼠标指针变为双箭头状时拖动鼠标，即可调整APDiv的大小。②按键调整的方法：按住【Ctrl】键，同时按【→】或【←】键，可使APDiv水平增加或减少一个像素；每按【↓】或【↑】键一次，可使APDiv垂直增加或减少一个像素；按住【Ctrl+Shift】组合键的同时，按光标移动键，可每次增加或减少五个像素。③利用APDiv“属性”栏设置：在其“属性”栏内的“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整APDiv的宽度和高度。（4）调整多个APDiv大小的方法也有两种：①命令方法：单击“修改”→“排列顺序”→“设成宽度相同”命令（见图4-1-7），即可使选中的APDiv与最后选中的APDiv（它的方形控制柄是黑色实心的）的宽度相同。②利用APDiv“属性”栏进行设置的方法：选中多个APDiv后，其“属性”栏变为多APDiv“属性”栏。在“宽”和“高”文本框内分别输入修改的数值（单位是像素），即可调整选中的多个APDiv的宽度和高度（单位是像素）。（5）设置多个APDiv的排列顺序和对齐可采用以下方法：①命令的方法：选中多个APDiv，单击“修改”→“排列顺序”命令，可弹出它的下一级菜单，如图4-1-7所示。单击其中的一个命令，即可获得相应的对齐效果。例如，选中多个APDiv，单击“修改”→“排列顺序”→“对齐下缘”命令，即可将各APDiv以最后选中的APDiv（控制柄是实心）的下边线为基准进行对齐，如图4-1-8所示。图4-1-7“排列顺序”的下一级菜单图4-1-8对齐下缘后的多个APDiv②按键调整的方法：按住【Ctrl】键，同时按光标移动键，即可将选中的多个APDiv对齐。按【→】键可右对齐，按【←】键可左对齐，按【↓】键可下对齐，按【↑】键可上对齐。③利用APDiv“属性”栏设置：选中多个APDiv后，在多APDiv“属性”栏内的“左”或“上”文本框内输入修改的数值，即可使多个APDiv的左边线或上边线以修改的数值对齐。（6）调整APDiv的位置可以采用如下方法：①鼠标拖动调整的方法：将鼠标指针移到APDiv的边框上，当鼠标指针变为形状时拖动，即可移动APDiv。②按键调整的方法：每按一次【→】或【←】键，可使APDiv向右或向左移动一个像素；每按一次【↓】或【↑】键，可使APDiv向下或向上移动一个像素；如果按住【Shift】键的同时，按光标移动键，也可调整APDiv的位置，每次移动五个像素。③利用APDiv“属性”栏进行设置的方法：选中要调整大小的APDiv，在其单个APDiv“属性”栏内的“左”文本框中输入修改的数值（单位是像素），即可调整APDiv的水平位置；在“上”文本框内输入修改的数值（单位是像素），可调整APDiv的垂直位置。3．APDiv“属性”栏APDiv“属性”栏有两种：一种是单APDiv“属性”栏，这是在选中一个APDiv时出现的；另一个是多APDiv“属性”栏，这是在选中多个APDiv时出现的。单APDiv“属性”栏如图4-1-9所示，多APDiv“属性”栏如图4-1-10所示。从图中可以看出，多APDiv“属性”栏内除了基本的属性设置选项外，还增加了关于文本属性的设置选项。其中各选项的作用如下：图4-1-9单APDiv“属性”栏图4-1-10多APDiv“属性”栏（1）“CSS-P元素”下拉列表框：用来输入APDiv的名称，它会在“AP素材”面板中显示出来。该名称可以在脚本中使用，例如通过脚本实现APDiv的显示或隐藏等。（2）“左（L）”文本框用来确定APDiv在页面中的位置，单位为像素，其内的数据是APDiv左边线与页面左边缘的间距。对于嵌套中的子APDiv，“左（L）”文本框内的数据是相对于父APDiv的左边的位置。（3）“上（T）”文本框内的数据是APDiv顶边线与页面顶边缘的间距。对于嵌套中的子APDiv，是相对于父APDiv的左边或顶端的位置。（4）“宽”和“高”文本框：用来确定APDiv的大小，单位为像素。（5）“Z轴”文本框：用来确定APDiv的Z轴顺序，用来设置嵌套APDiv的重叠层次，值越大，越靠上方。（6）“可见性”和“显示”下拉列表框：用来确定APDiv的可视性。它有“default”（默认，由浏览器决定，大多数会继承它的父APDiv的可见性）、“inherit”（与其父APDiv的可视性相同）、“visible”（显示APDiv图4-1-11和其内对象，与其父APDiv无关）和“hidden”（隐藏APDiv和其内对象，与其父APDiv无关）四个选项。（7）“背景图像”文本框与按钮：用来确定APDiv的背景图案。（8）“背景颜色”按钮与文本框：用来确定APDiv的背景颜色。（9）“标签”下拉列表框：用来选择APDiv的样式，其内有DIV和SPAN两个选项，这是HTML的两个标签。（10）“溢出”下拉列表框：它决定了当APDiv中的内容超出APDiv的边界时的处理方法。它有“visible”（可见，即根据图像大小自动调整APDiv的大小，使内容全部显示，为系统默认）、“hidden”（当图像超出APDiv的范围后，超出的部分不显示）、“Scroll”（当图像超出APDiv的范围后，加滚动条）和“Auto”（根据APDiv中的内容能否超出APDiv的范围，决定是否加滚动条）四个选项。选择前三个不同选项后，在浏览器中的显示效果如图4-1-11所示。注意：在网页页面设计视图窗口内显示的都与图4-1-11（a）一样。（a）（b）（c）在“溢出”下拉列表框中分别选择“Visible”、“Hidden”和“Scroll”后的不同效果（11）“剪辑”选项组：用来确定APDiv的可见区域，即确定APDiv中的对象与APDiv边线的间距。“左”、“上”、“右”和“下”四个文本框分别用来输入APDiv中的对象与APDiv的左边线、顶部边线、右边线和底部边线的间距，单位为像素。4.2【案例18】“不同亮度的图像”网页相关知识1．“AP元素”面板和改变APDiv的重叠顺序在“AP元素”面板中，用户可以对APDiv的可视性、嵌套关系、显示顺序和相互覆盖性等属性进行设置。单击“窗口”→“APDiv”命令，即可调出“APDiv”面板，即APDiv监视器，如图4-2-6（b）所示。（1）显示APDiv的信息：在图4-2-4所示的“AP元素”面板中有五个APDiv，“名称”列，是各个APDiv的名称，“Z”列内的数据显示各APDiv的顺序，Z值越高，显示越靠上。Z值可以是负数，表示在网页下边，即隐藏起来，网页的“Z轴”数值为0。（2）选定APDiv：单击“AP元素”面板中APDiv的名称，即可选中网页中相应的APDiv。按住【Shift】键，同时依次单击“AP元素”面板中各个APDiv的名称，即可选中网页中相应的多个APDiv。（3）更改APDiv的名称：双击“名称”列中APDiv的名称，使此行名称处出现白色的矩形，如图4-2-8所示，即可输入APDiv的新名字。（4）设定是否允许APDiv重叠：如果不选中“AP元素”面板中的“防止重叠”复选框，则表示允许APDiv之间有重叠关系；如果选中“防止重叠”复选框，则表示不允许APDiv之间有重叠关系。（5）改变APDiv之间的嵌套关系：在APDiv中插入另一个APDiv叫做APDiv的嵌套。在APDiv的嵌套中，子APDiv的属性决定于其父APDiv的属性。在选定父APDiv后，子APDiv也会被选定；在移动或复制父APDiv时，子APDiv也会随之被移动或复制。按住【Ctrl】键，同时拖动“AP元素”面板中源APDiv的名称（“apDiv4”）到另一个APDiv名称之上（例如“apDiv5”，可称为目标APDiv），当目标APDiv名字（例如“apDiv5”）四周出现矩形框时释放鼠标左键，即可将源APDiv成为目标APDiv的子APDiv。再按住【Ctrl】键，将“apDiv3”APDiv拖动到“apDiv4”APDiv之上，然后释放鼠标左键，“apDiv3”APDiv即可成为“apDiv4”APDiv的子APDiv。“APDiv”面板如图4-2-9所示。图4-2-8更改APDiv的名称）按钮，使由图4-2-9可以看出，“apDiv3”APDiv是“apDiv4”APDiv的子APDiv，“apDiv4”APDiv是“apDiv5”APDiv的子APDiv。父APDiv名称的左边有一个图标，单击该图标，可以使父APDiv收缩，图标变为图标。再单击图标，可使父APDiv的子APDiv展开，图标变为图标。如果向左下方拖动子APDiv的名称，可以取消它与父APDiv的嵌套关系。（6）改变APDiv的显示顺序：单击要更改显示顺序的APDiv的Z值（例如“apDiv3”，使它周围出现矩形框，如图4-2-10所示，输入新的Z值。此外，在APDiv的“属性”栏内的“Z轴”文本框内也可以改变Z值。（7）设置APDiv的可视性：单击“AP元素”面