第4章 AP Div、框架与网页布局

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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