使用框架和AP Div布局页面.ppt

本章将介绍框架和APDiv的基本知识以及使用它们布局页面的基本方法 第08章使用框架和APDiv布局页面 学习目标 掌握创建框架的方法 掌握设置框架的方法 掌握创建APDiv的方法 掌握设置APDiv的方法 掌握Div标签的使用方法 8 1创建框架 创建框架保存框架在框架中打开网页文档拆分框架 8 1 1创建框架 DreamweaverCS3中预先定义了很多种框架集 创建预定义框架集的方法如下 选择 文件 新建 命令 打开 新建文档 对话框 切换到 示例中的页 选项卡 在 示例文件夹 列表中选择 框架集 选项 在右侧的 示例页 列表中选择相应的选项在欢迎屏幕中 选择 从模板创建 框架集 命令在当前网页中 单击 插入 布局 工具栏中 框架 按钮的 向下箭头 在弹出的下拉按钮组中单击相应的按钮在当前网页中 选择菜单栏中的 插入记录 HTML 框架 中的相应命令 8 1 1创建框架 8 1 1创建框架 8 1 2保存框架 由于一个框架集包含多个框架 每一个框架都包含一个文档 因此一个框架集会包含多个文件 在保存框架网页的时候 不能只简单地保存一个文件 而要将所有的框架网页文档都保存下来 可以分别保存每个框架集页面或框架页面 也可以同时保存所有的框架文件和框架集页面 选择 文件 保存全部 命令 整个框架边框的内侧会出现一个阴影框 同时弹出 另存为 对话框 8 1 3在框架中打开网页文档 新创建的每一个框架都是一个空文档 也可以在该框架内直接打开已经预先制作好的文档 将鼠标光标置于框架内 选择 文件 在框架中打开 命令 打开文档即可 8 2设置框架 选择框架和框架集设置框架集属性设置框架属性设置框架中的超级链接 8 2 1选择框架和框架集 一 在 框架 面板中选择框架和框架集选择 窗口 框架 命令 打开 框架 面板 框架 面板以缩略图的形式列出了框架集及内部的框架 每个框架中间的文字就是框架的名称 在 框架 面板中 直接单击相应的框架即可选择该框架 单击框架集的边框即可选择该框架集 被选择的框架和框架集 其周围出现黑色细线框 8 2 1选择框架和框架集 二 在编辑窗口中选择框架和框架集按住Alt键不放 在相应的框架内单击鼠标左健即可选择该框架 被选择的框架边框将显示为虚线 单击相应的框架集边框即可选择该框架集 被选择的框架集边框也将显示为虚线 8 2 2设置框架集属性 在 框架 面板中单击框架集边框 将整个框架集选中 然后在 属性 面板中 设置框架集属性 8 2 3设置框架属性 在 框架 面板中单击框架将其选中 然后在 属性 面板中设置相关参数 8 2 4设置框架中的超级链接 在没有框架的文档中 按照指向的对象窗口不同 链接目标可以分为 blank parent self top 等4种形式 而在使用框架的文档中 又增加了与框架有关的目标 可以在一个框架内使用链接改变另一个框架的内容 8 3创建APDiv 创建APDiv修改APDiv的默认设置 8 3 1创建APDiv 将鼠标光标置于文档窗口中欲插入APDiv的位置 选择 插入记录 布局对象 APDiv 命令 插入一个默认的APDiv 将 插入 布局 面板上的 绘制APDiv 按钮拖曳到文档窗口中 插入一个默认的APDiv 8 3 1创建APDiv 单击 插入 布局 面板上的 绘制APDiv 按钮 将鼠标光标移至文档窗口中 当鼠标光标变为 形状时 拖曳鼠标光标 绘制一个自定义大小的APDiv 如果想一次绘制多个APDiv 在单击 绘制APDiv 按钮后 按住Ctrl键不放 连续进行绘制即可 8 3 1创建APDiv 制作嵌套的APDiv通常有两种方式 一种是在APDiv内部新建嵌套APDiv 另一种是将已经存在的APDiv添加到另外一个APDiv内 从而使其成为嵌套的APDiv 一 绘制嵌套APDiv首先选择 编辑 首选参数 命令 打开 首选参数 对话框 选择 分类 列表中的 AP元素 分类 勾选右侧面板中的 在APdiv中创建以后嵌套 复选框 然后在 插入 布局 工具栏上单击 绘制APDiv 按钮 在现有APDiv中拖曳 则绘制的APDiv就嵌套在现有APDiv中了 8 3 1创建APDiv 二 插入嵌套APDiv将鼠标光标置于所要嵌套的APDiv中 确定插入点 然后选择 插入记录 布局对象 APDiv 命令 插入一个嵌套的APDiv 三 使用 AP元素 面板制作嵌套APDiv在 AP元素 面板中选择一个APDiv 按住Ctrl键 将其拖曳到另一个APDiv上面 形成嵌套APDiv 8 3 2修改APDiv的默认设置 选择 编辑 首选参数 命令 打开 首选参数 对话框 在其中的 分类 列表框中选择 AP元素 分类 8 4设置APDiv 选择APDiv设置APDiv属性缩放APDiv移动APDiv对齐APDiv 8 4 1选择APDiv 单击文档中的图标来选定APDiv 如果该图标没有显示 请在 首选参数 不可见元素 分类中勾选 AP元素的锚点 复选框 8 4 1选择APDiv 将鼠标光标置于APDiv内 然后在文档窗口底边的标签条中选择 标签 8 4 1选择APDiv 单击APDiv的边框线 在 AP元素 面板中单击APDiv的名称 如果要选定两个以上的APDiv 只要按住Shift键 在文档窗口中逐个单击APDiv手柄 或在 AP元素 面板中逐个单击APDiv的名称 就可将APDiv同时选定 8 4 2设置APDiv属性 创建APDiv后 在 属性 面板中会显示所创建APDiv的基本属性设置 如左边界 上边界 宽度 高度 z轴顺序 可见性 背景图像 背景颜色等 此时可以进一步修改这些属性设置 使APDiv更完美 8 4 3缩放APDiv 缩放单个APDiv有以下几种方法 选定APDiv 然后拖曳缩放手柄 APDiv周围出现的小方块 来改变APDiv的尺寸 拖曳下手柄改变APDiv的高度 拖曳右手柄改变APDiv的宽度 拖曳右下角的缩放点同时改变APDiv的宽度和高度 选定APDiv 然后按住Ctrl键 每按一次方向键 APDiv就被改变一个像素值 选定APDiv 然后同时按住Shift Ctrl键 每按一次方向键 APDiv就被改变10个像素值 8 4 3缩放APDiv 同时调整多个APDiv的宽度 按住Shift键 将3个APDiv逐一选定 然后选择 窗口 属性 命令 打开它们的 属性 面板 在 属性 面板的 宽 文本框内输入数值 按Enter键确认 此时文档窗口中所有APDiv的宽度全部变成了所设置的数值 8 4 4移动APDiv 移动APDiv的方法主要有以下几种 选定APDiv后 当鼠标光标靠近缩放手柄出现时 按住鼠标左键拖动鼠标 APDiv将跟着鼠标的移动而发生位移 选定APDiv 然后按4个方向键 向4个方向移动APDiv 每按一次方向键 将使APDiv移动1个像素值的距离 选定APDiv 按住Shift键 然后按4个方向键 向4个方向移动APDiv 每按一次方向键 将使APDiv移动10个像素值的距离 8 4 5对齐APDiv 对齐功能可以使两个或两个以上的APDiv按照某一边界对齐 对齐APDiv的方法是 首先将所有APDiv选定 然后选择 修改 排列顺序 中的相应命令 如选择 对齐下缘 命令 将使所有被选中的APDiv的底边按照最后选定的APDiv的底边对齐 即所有APDiv的底边都排列在一条水平线上 在 修改 排列顺序 菜单中 共有以下4种对齐方式 左对齐 以最后选定的APDiv的左边线为标准 对齐排列APDiv 右对齐 以最后选定的APDiv的右边线为标准 对齐排列APDiv 对齐上缘 以最后选定的APDiv的顶边为标准 对齐排列APDiv 对齐下缘 以最后选定的APDiv的底边为标准 对齐排列APDiv 8 4 5APDiv的可见性 单击 AP元素 面板的图标列 可以改变可见性 8 5Div标签 APDiv与Div标签使用的是同一个标签 只是APDiv被赋予了CSS样式 而Div标签只有一个 ID 属性参数 在源代码中 它们使用的都是 标签 APDiv在绘制时 同时被赋予了CSS样式 而插入Div标签时 需要再单独创建CSS样式对它进行控制 实际上 APDiv与Div标签是同一个网页元素的不同表现形态 通过CSS样式可使两者间相互转换 例如 在CSS规则定义对话框的 定位 分类中 将 类型 选项设置为 绝对 即表示A