第4章 AP Div、框架及网页布局.ppt

、 第 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 时实现嵌套。 （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 所示。这时鼠标指针变为十字状态。 ② 将“绘制 AP Div”按钮 拖动到网页页面中，也可在页面光标处插入一个默认属性的 AP Div。 ③ 将光标移到要插入 AP Div 的位置。单击“插入记录”→“布局对象”→“AP Div”命令，也可以在网页 内光标处创建一个 AP Div。 图 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-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“属性”栏。 在“宽”和“高”文本框内分