1、第6章使用框架 DreamweaverMX 使用框架 在浏览器中一个页面对应于一个窗口 页面的内容显示在整个浏览器窗口中 利用框架可以把浏览器窗口划分为多个窗格 其中每个窗格可以显示一个HTML文档 使用框架 框架的典型用法是 在一个或若干个框架中显示包含导航控件的文档 而在另一个框架中显示含有主要内容的文档 通过单击导航控件的超链接 改变主要框架的显示内容 使用框架 框架集是一种HTML文件 它是用来组织 定义每个框架的布局和属性 包括 框架的数目 框架的大小和位置 以及在每个框架中初始显示页面的URL 而框架集文件本身不包含要在浏览器中显示的HTML内容 使用框架 框架集中所定义的每个框架
2、 可以用来显示各种HTML文档 而且框架中的文档可以通过超链接随时更换 创建框架和框架集 6 1创建框架和框架集在Dreamweaver有两种方法创建框架集 可以自己设计框架集 也可以从预定义的不同布局的框架集中选择一种 选择预定义的框架集 能自动创建一定格式的框架集和框架 是迅速创建框架布局最简单的方法 创建框架集 6 1 1创建预定义的框架集创建预定义的框架集有两种方法 1 使用 插入面板 布局 框架 2 或使用 新建文档 对话框 使用FrontPage创建框架更为简便 下面介绍在FrontPage创建框架 框架与框架集的HTML标记 使用框架 其中 1 通过插入面板 可以创建框架集 并在
3、某一框架中显示当前文档 2 通过 新建文档 对话框是创建新的空框架集 只能在 文档 窗口的 设计视图 中插入预定义的框架集 创建框架集 1 创建预定义的框架集 并在某一框架中显示现有文档 可执行以下操作 1 在 文档 窗口的 设计视图 中 将插入点放置在文档中 创建框架集 2 在插入面板的 框架 选项卡中 单击预定义框架集图标 或从 插入 框架 子菜单中选择预定义的框架集 预定义的框架集图标的蓝色区域表示当前文档 而白色区域表示将显示其他文档的框架 创建框架集 2 要创建新的空预定义框架集 可执行以下操作 1 选择菜单 文件 新建 命令 2 在 新建文档 对话框中 选择 框架集 类别 3 从
4、框架集 列表选择一种框架集 4 单击 创建 按钮 创建框架集 6 1 2创建和编辑框架集如果不使用预定义的框架集 自己可以在当前文档创建特定布局的框架集 在创建框架集或使用框架前 应通过选择菜单 查看 可视化助理 框架边框 命令 使框架边框在 文档 窗口的 设计 视图中可见 创建框架集 1 创建框架集的操作如下 先创建一个新文档或打开一个文档 选择 修改 框架页 命令 在子菜单中选择任一拆分命令 例如 拆分左框架 或 拆分右框架 等 窗口被拆分成几个框架 并且开始操作的文档显示在某一框架中 创建框架集 2 将一个框架拆分成几个更小的框架 可执行以下几种操作 要拆分光标所在的框架 可从 修改 框
5、架页 子菜单选择拆分命令 若要可视化的垂直或水平拆分一个框架或一组框架 可将框架边框从 设计视图 的边缘拖向 设计视图 的中间 创建框架集 如果框架边框不在 设计 视图的边缘 可以在按住Alt键的同时拖动框架边框 要将一个框架拆分成四个框架 可将框架一角从 设计 视图一角拖入框架的中间 创建框架集 3 要删除一个框架 可执行以下操作 将框架边框拖离页面或拖到父框架的边框上 要删除一个框架集 可关闭显示它的 文档 窗口 创建嵌套的框架集 6 2创建嵌套的框架集在一个框架集中创建另一个框架集 称为框架集的嵌套 一个框架集文件可以包含多个嵌套的框架集 创建嵌套的框架集 在一个框架集中只能创建行的框架
6、或列的框架 如果在一组框架里 既有行的框架或又有列的框架 则要求使用嵌套的框架集来实现 创建嵌套的框架集 例如 最常见的框架布局 在顶行有一个框架显示徽标 在底行有两个框架 一个为导航框架 另一个为内容框架 此布局要求嵌套的框架集 一个两行的框架集 在第二行中嵌套了一个两列的框架集 创建嵌套的框架集 创建嵌套框架集的方法如下 1 将光标置于要插入框架集的框架内 2 任选以下一种操作 在插入面板的 框架 选项卡中 单击单击一种框架集的图标 从 插入 框架 子菜单中 选择一种框架集命令 创建嵌套的框架集 在 设计视图 先按Alt键选中一个框架 再拖动这个框架边框 可以垂直或水平分割框架 并自动出产
7、生嵌套的框架集 选择框架和框架集 6 3选择框架和框架集要更改框架或框架集的属性 首先要选择框架或框架集 既可以在 文档 窗口中选择框架或框架集 也可以通过 框架 面板进行选择 当选择了框架或框架集时 在 框架 面板和 文档 窗口的 设计 视图中 会在框架或框架集周围显示一个选择轮廓 选择框架和框架集 6 3 1在 框架 面板选择框架和框架集 框架 面板在 高级布局 面板组中 可以选择菜单 窗口 其他 框架 命令 显示 框架 面板 框架 面板 可视化的显示了框架集及内部的各框架 选择框架和框架集 我们可以在 框架 面板中单击框架或框架集 从而在文档中选定该框架或框架集 然后可以在属性面板中查看
8、或编辑选定对象的属性 框架 面板能够显示框架集的层次结构 框架集由立体粗边框围绕 而每个框架是由灰色细线围绕 并且每个框架由框架名称标识 选择框架和框架集 在 框架 面板中单击框架 便可以选择一个框架 单击围绕框架集的边框 便可以选择一个框架集 选择框架和框架集 6 3 2在 文档 窗口中选择框架和框架集在 文档 窗口的 设计 视图中 当选定了一个框架后 其边框被虚线围绕 当选定了一个框架集后 该框架集内各框架的所有边框都被虚线围绕 注意 将插入点放置在显示在框架内的文档中并不等同于选择了一个框架 选择框架和框架集 当选择框架或框架集时 属性面板将显示它的属性 便可以更改这些属性 在 文档 窗
9、口中选择一个框架 可执行以下操作 在 文档 窗口的 设计 视图中 按住Alt键的同时单击框架内部 便可以选择一个框架 选择框架和框架集 在 文档 窗口中选择一个框架集 可执行以下操作 单击框架集中两个框架之间的边框 便可以选择一个框架集 要使框架边框可见 可以选择菜单 查看 可视化助理 框架边框 命令 在框架中打开文档 6 4在框架中打开文档创建的框架集 其内部的框架开始可能不显示文档内容 可以将新内容插入框架的空文档中 也可以在框架中打开现有文档 来指定框架的初始内容 在框架中打开文档 在框架中打开现有文档的操作如下 1 将插入点放置在框架中 2 选择菜单 文件 在框架中打开 命令 3 选择
10、要在框架中打开的文档并单击 确定 该文档随即显示在框架中 4 要让该文档成为 在浏览器中打开框架集时在框架中显示的默认文档 应保存该框架集 保存框架和框架集文件 6 5保存框架和框架集文件在浏览器中预览框架集之前 必须保存框架集文件以及在框架中显示的所有文档 框架页面由多个文件组成 包括框架集文件和框架中显示的所有文档 保存它们需要多个步骤 保存框架和框架集文件 要保存框架集文件 可执行以下操作 1 在 框架 面板 或 文档 窗口 设计 视图中选择框架集 也可以选中框架 2 要保存框架集文件 可选择菜单 文件 保存框架页 命令 若将框架集文件另存为新文件 可选择菜单 文件 框架页另存为 命令
11、保存框架和框架集文件 要保存框架中显示的文档 可执行以下操作 单击框架 选中框架中的文档 不是选中框架 然后选择菜单 文件 保存框架 命令 或选择菜单 文件 框架另存为 命令 保存框架和框架集文件 如果要保存框架集和与框架关联的所有文件 可执行以下操作 选择菜单 文件 保存全部 命令 该命令将保存在框架集中打开的所有文档 包括框架集文件和所有框架中显示的文档 保存各个文件的过程如下 保存框架和框架集文件 如果该框架集文件未保存过 则在 设计 视图中框架集的周围将出现粗边框 并且出现一个对话框 可从中选择文件名保存框架集文件 然后 依次对于尚未保存的每个框架 在框架的周围都将显示粗边框 并且出现
12、一个对话框 从中选择保存框架显示文档的文件名 框架与框架集的属性 6 5框架与框架集的属性在 框架 面板或在 设计 视图中选择框架或框架集后 就可以在 属性 面板查看和设置它们的属性 框架与框架集的属性 6 5 1查看和设置框架属性使用 属性 面板可以查看和设置框架大多数的属性 通过 页面属性 对话框可设置框架中文档的背景颜色等 查看或设置框架属性 可执行以下操作 框架与框架集的属性 1 在 文档 窗口的 设计 视图中 按住Alt键的同时单击一个框架 或在 框架 面板中单击框架 选择一个框架 2 在属性面板 指定框架以下属性选项 框架名称 要使超链接的内容显示在指定的目标框架 必须为框架命名名
13、称 框架名称是超链接的target属性 或脚本在引用该框架时所用的名称 框架与框架集的属性 源文件 指定在框架中显示的初始默认源文档 单击文件夹图标可以浏览选择一个文件 还可以在框架中打开一个文件 将插入点放置在框架中 并选择菜单 文件 在框架中打开 命令 框架与框架集的属性 滚动 在下拉列表中 指定在框架中是否显示滚动条 当设置为 默认 属性值 大多数浏览器默认为 自动 当没有足够空间显示当前框架的完整内容时 会显示滚动条 框架与框架集的属性 不能调整大小 选择该复选框 使访问者无法通过拖动框架边框 在浏览器中调整框架大小 边框 通过下拉列表选择 是 或 否 显示框架的边框 选择 默认值 大
14、多数浏览器默认显示边框 边框颜色 通过颜色框按钮 从调色板为所有框架的边框设置边框颜色 框架与框架集的属性 边距宽度 以像素为单位设置左边距和右边距的宽度 框架边框和内容之间的空间 边距高度 以像素为单位设置上边距和下边距的高度 框架与框架集的属性 3 更改框架中文档背景颜色的操作如下 将插入点放置在框架中 选择菜单 修改 页面属性 命令 在弹出的 页面属性 对话框 单击 背景 颜色框 从调色板选择一种颜色 查看和设置框架集属性 6 5 2查看和设置框架集属性使用属性面板可以查看和设置大多数框架集属性 通过 页面属性 对话框 或 文档 窗口工具栏中的 标题 文本框 可设置框架集的标题 查看或设
15、置框架集属性 可执行以下操作 查看和设置框架集属性 1 在 文档 窗口 设计 视图中 单击框架集中两个框架之间的边框 选择框架集 或在 框架 面板中 单击围绕框架集的边框 选择框架集 2 在属性面板 指定框架以下属性选项 查看和设置框架集属性 边框 通过下拉列表选择 是 或 否 显示框架集的边框 选择 默认值 大多数浏览器默认为不显示框架集的边框 边框宽度 在该文本框中设置框架集中所有边框的宽度 边框颜色 使用颜色选择器设置边框的颜色 查看和设置框架集属性 3 要设置选定框架集的各行和各列的框架大小 可执行以下操作 在右边 行列选择范围 区域的标签上 单击以选择一行或一列 在 值 文本框中 输
16、入选定行的高度或选定列的宽度 查看和设置框架集属性 从 单位 下拉列表中选择行或列的尺寸单位 像素 设置为绝对值 百分比 设置为相对值 相对 为选定行或列分配后 其余可用空间 查看和设置框架集属性 4 设置框架集文档的标题 在 文档 工具栏的 标题 文本框中 输入文档的名称 当访问者在浏览器中查看框架集时 标题显示在浏览器的标题栏中 使用超链接改变框架显示的内容 6 6使用超链接改变框架显示的内容在一个框架中使用超链接 而在另一个框架中打开文档 是框架的主要应用 这时超链接必须指定目标框架 超链接的target属性 用来指定打开超链接内容的框架或窗口 使用超链接改变框架显示的内容 使用超链接
17、改变另一个框架显示内容的操作如下 1 在 设计 视图中 选择框架中的文本或对象 2 在属性面板的 链接 文本框 单击文件夹图标并选择要链接到的文件 或拖动 指向文件 图标来选择要链接到的文件 使用超链接改变框架显示的内容 3 在 目标 下拉列表中 选择一个目标框架名或窗口名 以在该框架中打开链接的文档 如果在属性面板中命名了框架名 则框架名称将出现在下拉列表中 此外还可以选择以下窗口打开链接的文档 使用超链接改变框架显示的内容 blank 在新的浏览器窗口中打开链接的文档 同时保持当前窗口不变 parent 在显示链接的框架的父框架集中打开链接的文档 同时替换整个框架集 self 在当前框架中
18、打开链接 同时替换该框架中的内容 使用超链接改变框架显示的内容 top 在当前浏览器窗口中打开链接的文档 同时替换所有框架 提示 如果要链接到站点外的某一页面 应该使用target top 或target blank 确保该页面不会显示站点的其他内容 处理不能显示框架的浏览器 6 6处理不能显示框架的浏览器早期的浏览器版本不支持框架 Dreamweaver可以在框架集文件中添加显示不支持框架的内容 这些内容在框架集文件中 是用noframes标记括起来 处理不能显示框架的浏览器 要在框架集文件中 添加显示不支持框架的内容 可执行以下操作 1 选择菜单 修改 框架页 编辑无框架内容 命令 Dre
19、amweaver将清除 设计 视图中的内容 并且在 设计 视图顶部 显示 无框架内容 字样 处理不能显示框架的浏览器 2 要创建无框架内容 可以在 文档 窗口中 像处理普通文档一样输入或插入内容 然后再次选择 修改 框架页 编辑无框架内容 命令 可以返回到框架集文档的普通视图 框架与框架集的HTML标记 6 7框架与框架集的HTML标记框架是利用框架集进行组织的 框架集是一个容器 其中可以包含若干个框架 框架集的HTML标记为框架的HTML标记为 无匹配标记 若干个标记包含在标记之中 基本格式为 框架与框架集的HTML标记 注意 框架集标记 必须放在 标记和 标记之间 框架集HTML标记 6
20、7 1框架集 FRAMESET 标记 1 格式 框架集HTML标记 2 属性COLS 设置框架集的宽度 可以用三种方式指定宽度 即像素 百分比 和相对宽度 剩余部分 例 COLS 25 300 ROWS 设置框架集的高度 可以用三种方式指定高度 即像素 百分比 和相对宽度 剩余部分 例 ROWS 50 100 框架集HTML标记 FRAMEBORDER 设置框架集的边框 当设置为1时显示了立体三维边框 设置为0时不显示边框 默认为0 FRAMESPACING 以像素为单位设置框架之间的间隔 框架集HTML标记 注意 框架集中的框架是以行或列进行排列的 只能选择一种排列方式 因此COLS和ROW
21、S属性不能同时使用 要使页面既有横向以框架又有纵向框架 可以使用框架集的嵌套 框架HTML标记 6 7 2框架 FRAME 标记 1 格式 框架HTML标记 2 属性FRAMEBORDER 框架边框 设置框架的边框 当设置为1时显示了立体三维边框 设置为0时不显示边框 默认为0 MARGINHEIGHT 边框高 以像素为单位 用整数设置框架内容与上 下边框的空白边距 MARGINWIDTH 边框宽 以像素为单位 用整数设置框架内容与左 右边框的空白边距 框架HTML标记 NAME 名称 设置框架窗口的名称 NORESIZE 在一般情况下 用户可以调整框架窗口的大小 选择该属性则不能调整框架窗口
22、的大小 SCROLLING 滚动 设置框架窗口是否可以加滚动条来滚动显示内容 用 AUTO YES 或 NO 设置 SRC 源 设置框架内默认显示文档的URL 不支持框架HTML标记 6 7 3不支持框架 NOFRAME 标记目前大多数浏览器都支持框架特性 但是较低版本的浏览器不提供对框架特性的支持 在HTML中 可以使用NOFRAME标记来提供一些信息显示出来 使用格式如下 不支持框架HTML标记 用HTML标记定义信息的显示 框架集嵌套的HTML标记格式 6 7 4框架集嵌套的HTML标记格式在一个框架集中框架只能选择行或列一种排列方式 但是一个页面中允许同时建立多个框架集 而且框架集还可
23、以嵌套 这样我们就可以在同一页面中创建包含横向和纵向的框架 框架集嵌套的HTML标记格式 框架集的嵌套 就是在框架集标记中包含框架集标记 而在这个嵌套的框架集标记中再包含若干个框架标记 框架集嵌套的HTML标记格式 框架集嵌套的格式如下 页内框架HTML标记 6 7 5页内框架标记 略 在页面内通过框架集标记创建的框架将充满整个窗口 而使用标记可以在一个页面内的任何位置插入一个框架 因为是在页面内插入框架 所以标记应该插入到之间 页内框架HTML标记 标记的格式如下 1 格式 页内框架HTML标记 2 属性ALIGN 对齐方式 设置框架与周围文本的对齐方式 其取值为LEFT RIGHT TOP
24、 CENTER MIDDLE或BOTTOM 其中LEFT和RIGHT用来指定框架的对齐方式 其余指定框架与周围文本的对齐方式 页内框架HTML标记 FRAMEBORDER 框架边框 设置框架的边框 当设置为1时显示了立体三维边框 设置为0时不显示边框 默认为0 HEIGHT 高度 以像素为单位 用整数设置框架的高度 也可以用浏览器窗口的百分比表示 页内框架HTML标记 WIDTH 宽度 以像素为单位 用整数设置框架的宽度 也可以用浏览器窗口的百分比表示 框架的高度和宽度若设置要同时一起设置 MAGINHEIGHT 边框高 以像素为单位 用整数设置框架内容与上 下边框的空白边距 页内框架HTML
25、标记 MAGINWIDTH 边框宽 以像素为单位 用整数设置框架内容与左 右边框的空白边距 NAME 名称 设置框架窗口的名称 SCROLLING 滚动 设置框架窗口是否可以加滚动条来滚动显示内容 用 AUTO YES 或 NO 设置 SRC 源 设置框架内显示的HTML文件的URL 用超链接更换框架内容HTML标记格式 6 7 6用超链接更换框架内容的HTML标记格式我们虽然在框架中使用滚动条可以显示更多的内容 但是在同一个框架中显示大量不相关的内容 显然是不方便和不合适的 我们可以利用超链接更换框架的内容来实现这一要求 用超链接更换框架内容HTML标记格式 可以把超链接的 源端 和 目标端
26、 分别放在两个框架中 在超链接源端框架点击超链接 超链接目标端指向目标框架对应的HTML文档 目标HTML页面就在指定的框架内显示出来 用超链接更换框架内容HTML标记格式 控制超链接的目标框架窗口的方法是 在HTML超链接标记中使用Target 目标 属性进行定义 HTML超链接的格式为 超链接文本或其它内容 用超链接更换框架内容HTML标记格式 属性 HREF 指定目标文件的URL 该文件内容在指定的框架内显示 TARGET 目标 超链接目标页面显示在TARGET属性指定的框架窗口内 TARGET属性值可以是已定义的框架名 也可以是以下特殊框架或窗口 用超链接更换框架内容HTML标记格式 blank 在新的浏览器窗口中打开链接的文档 同时保持当前窗口不变 parent 在显示链接的框架的父框架集中打开链接的文档 同时替换整个框架集 self 在当前框架中打开链接 同时替换该框架中的内容 top 在当前浏览器窗口中打开链接的文档 同时替换所有框架 第6章使用框架 使用框架创建框架和框架集框架与框架集的HTML标记不支持框架标记框架集嵌套的HTML标记格式用超链接更换框架内容的HTML标记格式
