DwMX第6章使用框架.ppt

第6章 使用框架 Dreamweaver MX 使用框架 q 在浏览器中一个页面对应于一个窗口， n页面的内容显示在整个浏览器窗口中。 q 利用框架可以把浏览器窗口划分为多个 窗格， n其中每个窗格可以显示一个HTML文档。 使用框架 q 框架的典型用法是， n在一个或若干个框架中显示包含导航控件 的文档， n而在另一个框架中显示含有主要内容的文 档， n通过单击导航控件的超链接，改变主要框 架的显示内容。 使用框架 q 框架集是一种HTML文件，它是用来组织 、定义每个框架的布局和属性，包括: n框架的数目、框架的大小和位置， n以及在每个框架中初始显示页面的URL。 q 而框架集文件本身不包含要在浏览器中 显示的HTML内容。 使用框架 q 框架集中所定义的每个框架，可以用来 显示各种HTML文档， n而且框架中的文档可以通过超链接随时更 换。 创建框架和框架集 6.1 创建框架和框架集 q 在Dreamweaver有两种方法创建框架集 ： n可以自己设计框架集， n也可以从预定义的不同布局的框架集中选 择一种。 q 选择预定义的框架集，能自动创建一定 格式的框架集和框架， n是迅速创建框架布局最简单的方法。 创建框架集 6.1.1 创建预定义的框架集 q 创建预定义的框架集有两种方法： n1）使用“插入面板”“布局”“框架 ” n2）或使用“新建文档”对话框。 q 使用FrontPage创建框架更为简便， n下面介绍在FrontPage创建框架 (框架与框架集的HTML标记) 使用框架 q其中： n1）通过插入面板，可以创建框架集， v并在某一框架中显示当前文档； n2）通过“新建文档”对话框是创建新的 空框架集。 q 只能在“文档”窗口的“设计视图”中 插入预定义的框架集。 创建框架集 q1创建预定义的框架集， n并在某一框架中显示现有文档， 可执行以下操作： q(1)在“文档”窗口的“设计视图”中， n将插入点放置在文档中。 创建框架集 q(2)在插入面板的“框架”选项卡中，单 击预定义框架集图标； n或从“插入”“框架”子菜单中选择预 定义的框架集。 q 预定义的框架集图标的蓝色区域表示当 前文档， n而白色区域表示将显示其他文档的框架。 创建框架集 q2要创建新的空预定义框架集， 可执行以下操作： q(1)选择菜单“文件”“新建”命令。 q(2)在“新建文档”对话框中，选择“框 架集”类别。 q(3)从“框架集”列表选择一种框架集。 q(4)单击“创建”按钮。 创建框架集 6.1.2 创建和编辑框架集 q 如果不使用预定义的框架集，自己可以 在当前文档创建特定布局的框架集。 q 在创建框架集或使用框架前， n应通过选择菜单“查看”“可视化助理 ” “框架边框”命令， n使框架边框在“文档”窗口的“设计”视 图中可见。 创建框架集 q1创建框架集的操作如下： q 先创建一个新文档或打开一个文档。 q 选择“修改”“框架页”命令，在子 菜单中选择任一拆分命令，例如 n“拆分左框架”或“拆分右框架”等。 q 窗口被拆分成几个框架， n并且开始操作的文档显示在某一框架中。 创建框架集 q2将一个框架拆分成几个更小的框架， 可执行以下几种操作： q 要拆分光标所在的框架，可从“修改 ” “框架页”子菜单选择拆分命令。 q 若要可视化的垂直或水平拆分一个框架 或一组框架， n可将框架边框从“设计视图”的边缘拖向 “设计视图”的中间。 创建框架集 q 如果框架边框不在“设计”视图的边缘 ， n可以在按住Alt键的同时拖动框架边框。 q 要将一个框架拆分成四个框架， n可将框架一角从“设计”视图一角拖入框 架的中间。 创建框架集 q3要删除一个框架， 可执行以下操作： q 将框架边框拖离页面或拖到父框架的边 框上。 q 要删除一个框架集，可关闭显示它的“ 文档”窗口。 创建嵌套的框架集 q6.2 创建嵌套的框架集 q 在一个框架集中创建另一个框架集，称 为框架集的嵌套。 n一个框架集文件可以包含多个嵌套的框架 集。 创建嵌套的框架集 q 在一个框架集中只能创建行的框架或列 的框架， n如果在一组组框架里，既有行的框架或又有 列的框架， n则则要求使用嵌套的框架集来实现实现 。 创建嵌套的框架集 q 例如，最常见的框架布局， n在顶行有一个框架显示徽标， n在底行有两个框架， v一个为导航框架， v另一个为内容框架。 q 此布局要求嵌套的框架集： n一个两行的框架集， n在第二行中嵌套了一个两列的框架集。 创建嵌套的框架集 创建嵌套框架集的方法如下： q(1)将光标置于要插入框架集的框架内。 q(2)任选以下一种操作： n在插入面板的“框架”选项卡中， v单击单击一种框架集的图标。 n从“插入”“框架”子菜单中， v选择一种框架集命令。 创建嵌套的框架集 n在“设计视图” ，先按Alt键选中一个框 架， v再拖动这个框架边框， v可以垂直或水平分割框架，并自动出产生 嵌套的框架集。 选择框架和框架集 6.3 选择框架和框架集 q 要更改框架或框架集的属性，首先要选 择框架或框架集。 n既可以在“文档”窗口中选择框架或框架 集， n也可以通过“框架”面板进行选择。 q 当选择了框架或框架集时，在“框架” 面板和“文档”窗口的“设计”视图中， n会在框架或框架集周围显示一个选择轮廓 。 选择框架和框架集 6.3.1 在“框架”面板选择框架和框架集 q “框架”面板在“高级布局”面板组中 ， q可以选择菜单“窗口”“其他”“框 架”命令， n显示“框架”面板。 q “框架”面板，可视化的显示了框架集 及内部的各框架。 选择框架和框架集 q 我们可以在“框架”面板中单击框架或 框架集，从而在文档中选定该框架或框架 集， n然后可以在属性面板中查看或编辑选定对 象的属性。 q “框架”面板能够显示框架集的层次结 构。 n框架集由立体粗边框围绕； n而每个框架是由灰色细线围绕， v并且每个框架由框架名称标识。 选择框架和框架集 q 在“框架”面板中单击框架，便可以选 择一个框架； q 单击围绕框架集的边框，便可以选择一 个框架集。 选择框架和框架集 6.3.2 在“文档”窗口中选择框架和框架 集 q 在“文档”窗口的“设计”视图中， n当选定了一个框架后，其边框被虚线围绕 ； n当选定了一个框架集后，该框架集内各框 架的所有边框都被虚线围绕。 q 注意：将插入点放置在显示在框架内的 文档中并不等同于选择了一个框架。 选择框架和框架集 q 当选择框架或框架集时，属性面板将显 示它的属性，便可以更改这些属性。 q 在“文档”窗口中选择一个框架，可执 行以下操作： n在“文档”窗口的“设计”视图中，按住 Alt键的同时单击框架内部， n便可以选择一个框架； 选择框架和框架集 q 在“文档”窗口中选择一个框架集，可 执行以下操作： n单击框架集中两个框架之间的边框， n便可以选择一个框架集。 q 要使框架边框可见， n可以选择菜单“查看”“可视化助理 ”“框架边框”命令。 在框架中打开文档 6.4 在框架中打开文档 q 创建的框架集，其内部的框架开始可能 不显示文档内容， n可以将新内容插入框架的空文档中， n也可以在框架中打开现有文档，来指定框 架的初始内容。 在框架中打开文档 q在框架中打开现有文档的操作如下： q(1)将插入点放置在框架中。 q(2)选择菜单“文件”“在框架中打开 ”命令。 q(3)选择要在框架中打开的文档并单击“ 确定”，该文档随即显示在框架中。 q(4)要让该文档成为，在浏览器中打开框 架集时在框架中显示的默认文档， n应保存该框架集。 保存框架和框架集文件 6.5 保存框架和框架集文件 q 在浏览器中预览框架集之前，必须保存 框架集文件以及在框架中显示的所有文档 。 n框架页面由多个文件组成， n包括框架集文件和框架中显示的所有文档 ， q 保存它们需要多个步骤。 保存框架和框架集文件 q 要保存框架集文件，可执行以下操作： q(1)在“框架”面板，或“文档”窗口“ 设计”视图中选择框架集(也可以选中框 架)。 q(2)要保存框架集文件，可选择菜单“文 件”“保存框架页”命令； n若将框架集文件另存为新文件，可选择菜 单“文件”“框架页另存为”命令。 保存框架和框架集文件 q 要保存框架中显示的文档，可执行以下 操作： q 单击框架，选选中框架中的文档(不是选 中框架)， n然后选择菜单“文件”“保存框架”命 令； n或选择菜单“文件”“框架另存为”命 令。 保存框架和框架集文件 q 如果要保存框架集和与框架关联的所有 文件，可执行以下操作： q 选择菜单“文件”“保存全部”命令 。 n该命令将保存在框架集中打开的所有文档 ， n包括框架集文件和所有框架中显示的文档 。 q 保存各个文件的过程如下： 保存框架和框架集文件 q 如果该框架集文件未保存过，则在“设 计”视图中框架集的周围将出现粗边框， n并且出现一个对话框， n可从中选择文件名保存框架集文件。 q 然后，依次对于尚未保存的每个框架， n在框架的周围都将显示粗边框，并且出现 一个对话框， n从中选择保存框架显示文档的文件名。 框架与框架集的属性 6.5 框架与框架集的属性 q 在“框架”面板或在“设计”视图中选 择框架或框架集后， n就可以在“属性”面板查看和设置它们的 属性。 框架与框架集的属性 6.5.1 查看和设置框架属性 q 使用“属性”面板可以查看和设置框架 大多数的属性， q 通过“页面属性”对话框可设置框架中 文档的背景颜色等。 q 查看或设置框架属性，可执行以下操作 ： 框架与框架集的属性 q(1)在“文档”窗口的“设计”视图中， 按住 Alt键的同时单击一个框架，或在“ 框架”面板中单击框架，选择一个框架。 q(2)在属性面板，指定框架以下属性选项 ： n“框架名称”：要使超链接的内容显示在 指定的目标框架，必须为框架命名名称， n框架名称是超链接的target属性， v或脚本在引用该框架时所用的名称。 框架与框架集的属性 n“源文件”：指定在框架中显示的初始默 认源文档。 v单击文件夹图标可以浏览选择一个文件。 v还可以在框架中打开一个文件， n将插入点放置在框架中， n并选择菜单“文件”“在框架中打开” 命令。 框架与框架集的属性 n“滚动”：在下拉列表中，指定在框架中 是否显示滚动条。 v当设置为“默认”属性值，大多数浏览器 默认为“自动”， v当没有足够空间显示当前框架的完整内容 时，会显示滚动条。 框架与框架集的属性 n“不能调整大小”：选择该复选框，使访 问者无法通过拖动框架边框，在浏览器中 调整框架大小。 n“边框”：通过下拉列表选择，“是”或 “否”显示框架的边框， v选择“默认值”大多数浏览器默认显示边 框。 n“边框颜色”：通过颜色框按钮，从调色 板为所有框架的边框设置边框颜色。 框架与框架集的属性 n“边距宽度”：以像素为单位设置左边距 和右边距的宽度(框架边框和内容之间的 空间)。 n“边距高度”：以像素为单位设置上边距 和下边距的高度。 框架与框架集的属性 q(3)更改框架中文档背景颜色的操作如下 ： n将插入点放置在框架中； n选择菜单“修改”“页面属性”命令； n在弹出的“页面属性”对话框， v单击“背景”颜色框，从调色板选择一种 颜色。 查看和设置框架集属性 6.5.2 查看和设置框架集属性 q 使用属性面板可以查看和设置大多数框 架集属性。 n通过“页面属性”对话框，或“文档”窗 口工具栏中的“标题”文本框， v可设置框架集的标题。 q查看或设置框架集属性，可执行以下操 作： 查看和设置框架集属性 q(1)在“文档”窗口“设计”视图中，单 击框架集中两个框架之间的边框,选择框 架集。 n或在“框架”面板中，单击围绕框架集的 边框，选择框架集。 q(2)在属性面板，指定框架以下属性选项 ： 查看和设置框架集属性 n“边框”：通过下拉列表选择，“是”或 “否”显示框架集的边框， v选择“默认值”大多数浏览器默认为不显 示框架集的边框。 n“边框宽度”：在该文本框中设置框架集 中所有边框的宽度。 n“边框颜色”：使用颜色选择器设置边框 的颜色。 查看和设置框架集属性 q(3)要设置选定框架集的各行和各列的框 架大小，可执行以下操作： q在右边“行列选择范围”区域的标签 上, n单击以选择一行或一列。 q在“值”文本框中， n输入选定行的高度或选定列的宽度。 查看和设置框架集属性 q从“单位”下拉列表中选择行或列的 尺寸单位。 n“像素”：设置为绝对值； n“百分比”：设置为相对值； n“相对”：为选定行或列分配后，其余可 用空间。 查看和设置框架集属性 q(4)设置框架集文档的标题， q 在“文档”工具栏的“标题”文本框中 ，输入文档的名称。 n当访问者在浏览器中查看框架集时， n标题显示在浏览器的标题栏中。 使用超链接改变框架显示的内容 6.6 使用超链接改变框架显示的内容 q 在一个框架中使用超链接，而在另一个 框架中打开文档，是框架的主要应用， n这时超链接必须指定目标框架。 q 超链接的target属性，用来指定打开超 链接内容的框架或窗口。 使用超链接改变框架显示的内容 q 使用超链接，改变另一个框架显示内容 的操作如下： q(1)在“设计”视图中，选择框架中的文 本或对象。 q(2)在属性面板的“链接”文本框，单击 文件夹图标并选择要链接到的文件， n或拖动“指向文件”图标来选择要链接到 的文件。 使用超链接改变框架显示的内容 q(3)在“目标”下拉列表中，选择一个目 标框架名或窗口名， n以在该框架中打开链接的文档。 q 如果在属性面板中命名了框架名， n则框架名称将出现在下拉列表中。 q 此外还可以选择以下窗口打开链链接的文 档： 使用超链接改变框架显示的内容 n_blank：在新的浏览器窗口中打开链接的 文档， v同时保持当前窗口不变。 n_parent：在显示链接的框架的父框架集 中打开链接的文档， v同时替换整个框架集。 n_self：在当前框架中打开链接， v同时替换该框架中的内容。 使用超链接改变框架显示的内容 n_top：在当前浏览器窗口中打开链接的文 档， v同时替换所有框架。 q提示：如果要链接到站点外的某一页面 ， n应该使用target=“_top“或target=“_blank“ ， v确保该页面不会显示站点的其他内容。 处理不能显示框架的浏览器 6.6 处理不能显示框架的浏览器 q早期的浏览器版本不支持框架， nDreamweaver可以在框架集文件中添加显 示不支持框架的内容。 n这些内容在框架集文件中，是用noframes 标记括起来。 处理不能显示框架的浏览器 q 要在框架集文件中，添加显示不支持框 架的内容，可执行以下操作： q(1)选择菜单“修改”“框架页”“编 辑无框架内容”命令。 nDreamweaver将清除“设计”视图中的内 容， n并且在“设计”视图顶部，显示“无框架 内容”字样。 处理不能显示框架的浏览器 q(2)要创建无框架内容，可以在“文档” 窗口中，像处理普通文档一样输入或插入 内容。 n然后再次选择“修改”“框架页”“编 辑无框架内容”命令， n可以返回到框架集文档的普通视图。 框架与框架集的HTML标记 6.7 框架与框架集的HTML标记 q 框架是利用框架集进行组织的，框架集 是一个容器，其中可以包含若干个框架。 q 框架集的HTML标记为 q 框架的HTML标记为,无匹配标记 。 q 若干个标记包含在 标记之中，基本格式为： 框架与框架集的HTML标记 注意：框架集标记 必须放在 标 记和 标记之间。 框架集HTML标记 6.7.1 框架集(FRAMESET)标记 q(1)格式 框架集HTML标记 q(2)属性 nCOLS：设置框架集的宽度。 v可以用三种方式指定宽度，即像素、百分 比(%)和相对宽度(*)(剩余部分)。 v例：COLS=”25%，300，*” nROWS：设置框架集的高度。 v可以用三种方式指定高度，即像素、百分 比(%)和相对宽度(*)(剩余部分)。 v例：ROWS=”50%，100，*” 框架集HTML标记 nFRAMEBORDER：设置框架集的边框。 v当设置为 1 时显示了立体三维边框， v设置为 0 时不显示边框，默认为 0。 nFRAMESPACING：以像素为单位设置框架之 间的间隔。 框架集HTML标记 q 注意：框架集中的框架是以行或列进行 排列的，只能选择一种排列方式， n因此COLS和ROWS属性不能同时使用。 q 要使页面既有横向以框架又有纵向框架 ， n可以使用框架集的嵌套。 框架HTML标记 6.7.2 框架(FRAME)标记 q(1)格式 框架HTML标记 q(2)属性 nFRAMEBORDER(框架边框):设置框架的边框 。 v当设置为1时显示了立体三维边框， v设置为0时不显示边框，默认为0。 nMARGINHEIGHT(边框高):以像素为单位,用 整数设置框架内容与上、下边框的空白边距 。 nMARGINWIDTH(边框宽):以像素为单位,用整 数设置框架内容与左、右边框的空白边距。 框架HTML标记 nNAME(名称)：设置框架窗口的名称。 nNORESIZE：在一般情况下，用户可以调整 框架窗口的大小， v选择该属性则不能调整框架窗口的大小。 nSCROLLING(滚动)：设置框架窗口是否可 以加滚动条来滚动显示内容， v用”AUTO”、”YES”或”NO”设置。 nSRC(源)：设置框架内默认显示文档的URL 。 不支持框架HTML标记 6.7.3 不支持框架(NOFRAME)标记 q 目前大多数浏览器都支持框架特性， n但是较低版本的浏览器不提供对框架特性 的支持。 q 在HTML中，可以使用NOFRAME标记来提 供一些信息显示出来。 q 使用格式如下； 不支持框架HTML标记 (用HTML标记定义信息的显示) 框架集嵌套的HTML标记格式 6.7.4 框架集嵌套的HTML标记格式 q 在一个框架集中框架只能选择行或列一 种排列方式， n但是一个页面中允许同时建立多个框架集 ， n而且框架集还可以嵌套， q 这样我们就可以在同一页面中创建包含 横向和纵向的框架。 框架集嵌套的HTML标记格式 q 框架集的嵌套，就是在框架集 标记中包含框架 集标记， q 而在这个嵌套的框架集标记中再包含若 干个框架标记。 框架集嵌套的HTML标记格式 q框架集嵌套的格式如下： 页内框架HTML标记 6.7.5 页内框架标记 (略) q 在页面内通过框架集标记创建的框架将 充满整个窗口， n而使用标记可以在一 个页面内的任何位置插入一个框架。 q 因为是在页面内插入框架，所以 标记应该插入到 之间。 页内框架HTML标记 标记的格式如下: q(1)格式 页内框架HTML标记 q(2)属性 nALIGN(对齐方式)：设置框架与周围文本 的对齐方式， v其取值为LEFT、RIGHT、TOP、CENTER、 MIDDLE或BOTTOM。 v其中LEFT和RIGHT用来指定框架的对齐方式 ， v其余指定框架与周围文本的对齐方式。 页内框架HTML标记 nFRAMEBORDER(框架边框):设置框架的边框 。 v当设置为 1 时显示了立体三维边框，设 置为 0 时不显示边框，默认为 0。 nHEIGHT(高度)：以像素为单位，用整数设 置框架的高度， v也可以用浏览器窗口的百分比表示。 页内框架HTML标记 nWIDTH(宽度)：以像素为单位，用整数设 置框架的宽度， v也可以用浏览器窗口的百分比表示。 v框架的高度和宽度若设置要同时一起设置 。 nMAGINHEIGHT(边框高)：以像素为单位， 用整数设置框架内容与上、下边框的空白 边距。 页内框架HT