框架和框架集的工作方式
frame 是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见情况就是:一个框架显示包含导航控件的文档,而另一个框架显示包含内容的文档。
框架集 是 HTML 文件,它定义一组框架的布局和属性,包括框架的数目、框架的大小和位置以及最初在每个框架中显示的页面的 URL。框架集文件本身不包含要在浏览器中显示的 HTML 内容,但 noframes 部分除外;框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。
若要在浏览器中查看一组框架,请输入框架集文件的 URL;浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为 index.html,以便当访问者未指定文件名时默认显示该文件。
下面的示例显示了一个由三个框架组成的框架布局:一个较窄的框架位于侧面,其中包含导航条;一个框架横放在顶部,其中包含 Web 站点的徽标和标题;一个大框架占据了页面的其余部分,其中包含主要内容。这些框架中的每一个都显示单独的 HTML 文档。
在此示例中,当访问者浏览站点时,在顶部框架中显示的文档永远不更改。侧面框架导航条包含链接;单击其中某一链接会更改主要内容框架的内容,但侧面框架本身的内容保持静态。当访问者在左侧单击某个链接时,会在右侧的主内容框架中显示相应的文档。
框架不是文件,您很可能会以为当前显示在框架中的文档是构成框架的一部分,但该文档实际上并不是框架的一部分。框架是存放文档的容器。
注:“页面”可以表示单个 HTML 文档,也可以表示给定时刻浏览器窗口中的全部内容,即使同时显示了多个 HTML 文档。例如,短语“使用框架的页面”通常表示一组框架以及最初显示在这些框架中的文档。
如果一个站点在浏览器中显示为包含三个框架的单个页面,则它实际上至少由四个 HTML 文档组成:框架集文件以及三个文档,这三个文档包含最初在这些框架内显示的内容。在 Dreamweaver 中设计使用框架集的页面时,必须保存所有这四个文件,该页面才能在浏览器中正常显示。
决定是否使用框架
Adobe 不鼓励在网页布局中使用框架。使用框架有一些不足之处:
可能难以实现不同框架中各元素的精确图形对齐。
对导航进行测试可能很耗时间。
框架中加载的每个页面的 URL 不显示在浏览器中,因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码,使访问者可以加载特定页面的框架版本。)
如果确定要使用框架,它最常用于导航。一组框架中通常包含两个框架,一个含有导航条,另一个显示主要内容页面。按这种方式使用框架可提供以下优点:
访问者的浏览器不需要为每个页面重新加载与导航相关的图形。
每个框架都具有自己的滚动条(如果内容太大,在窗口中显示不下),因此访问者可以独立滚动这些框架。例如,当框架中的内容页面较长时,如果导航条位于不同的框架中,那么滚动到页面底部的访问者不需要再滚动回顶部就能使用导航条。
在许多情况下,可以创建没有框架的网页,它可以达到一组框架所能达到的同样效果。例如,如果您想让导航条显示在页面的左侧,则既可以用一组框架代替您的页面,也可以只是在站点中的每一页上包含该导航条。(Dreamweaver 可以帮助您创建使用相同布局的多个页面。) 下图显示了具有类似框架的布局的页面设计,但在该设计中并没有使用框架。
设计糟糕的站点会不必要地使用框架,例如使用一个每当访问者单击导航按钮时就重新加载导航框架内容的框架集。如果框架使用得法(例如,在允许其它框架的内容发生更改的同时,使一个框架中的导航控件保持静态),则这些框架对于站点可能非常有用。
并非所有浏览器都提供良好的框架支持,并且框架对于残障人士来说导航会有困难,因此如果您的确要使用框架,请始终在您的框架集中提供 noframes 部分,以方便无法查看框架的访问者。您最好还提供一个指向无框架版本的站点的明显链接。
嵌套的框架集
在另一个框架集中的框架集称为嵌套框架集。一个框架集文件可以包含多个嵌套的框架集。大多数使用框架的网页实际上都使用嵌套的框架,并且在 Dreamweaver 中大多数预定义的框架集也使用嵌套。如果在一组框架里,不同行或不同列中有不同数目的框架,则要求使用嵌套的框架集。
例如,最常见的框架布局在顶行有一个框架(框架中显示公司的徽标),并且在底行有两个框架(一个导航框架和一个内容框架)。此布局要求嵌套的框架集:一个两行的框架集,在第二行中嵌套了一个两列的框架集。
A.主框架集
B.菜单框架和内容框架都嵌套在主框架集内。
Dreamweaver 会根据需要自动嵌套框架集;如果您在 Dreamweaver 中使用框架拆分工具,则您不需要考虑哪些框架将被嵌套、哪些框架不被嵌套这样的细节。
有两种方法可在 HTML 中嵌套框架集:内部框架集可以与外部框架集在同一文件中定义,也可以在不同的文件中单独定义。Dreamweaver 中每个预定义的框架集均在同一文件中定义其所有框架集。
这两种类型的嵌套均产生相同的视觉效果;如果没有看到代码,很难判断使用的是哪种类型的嵌套。在 Dreamweaver 中使用外部框架集文件的最常见情形是:使用“在框架中打开”命令在框架内打开一个框架集文件。这可能导致设置链接目标时出现问题。通常最简单的方法是在单个文件中定义所有的框架集。
在文档窗口中使用框架集
Dreamweaver 使您可以在一个“文档”窗口中查看和编辑与一组框架关联的所有文档。此方法使您可以在编辑带有框架的页面时大致看到它们在浏览器中的显示方式。但是,在您熟练使用它们之前,此方法的某些方面可能会令人混淆。具体来说,每一框架会显示一个单独的 HTML 文档。即使文档是空的,您也必须将它们全部保存以预览它们(因为只有当框架集包含要在每个框架中显示的文档的 URL 时,才可以准确预览该框架集)。
若要确保框架集在浏览器中正确显示,请执行以下常规步骤:
创建框架集并指定要在每个框架中显示的文档。
保存将要在框架中显示的每个文件。请记住,每个框架都显示单独的 HTML 文档,必须保存每个文档以及该框架集文件。
设置每个框架和每个框架集的属性(包括对每个框架命名、设置滚动和不滚动选项)。
在属性检查器中为所有链接设置“目标”属性,以便所链接的内容显示在正确区域中。
创建框架和框架集
在 Dreamweaver 中有两种创建框架集的方法:您既可以从若干预定义的框架集中选择,也可以自己设计框架集。
选择预定义的框架集将会设置创建布局所需的所有框架集和框架,它是迅速创建基于框架的布局的最简单方法。您只能在“文档”窗口的“设计”视图中插入预定义的框架集。
您还可以通过向“文档”窗口中添加“拆分器”,在 Dreamweaver 中设计自己的框架集。
在创建框架集或使用框架前,通过选择“查看”>“可视化助理”>“框架边框”,使框架边框在“文档”窗口的“设计”视图中可见。
创建预定义的框架集并在某一框架中显示现有文档
创建空的预定义框架集
创建框架集
选择“修改”>“框架集”,然后从子菜单选择拆分项(例如“拆分左框架”或“拆分右框架”)。
Dreamweaver 将窗口拆分成几个框架。如果打开一个现有的文档,它将出现在其中一个框架中。
将一个框架拆分为几个更小的框架
要拆分插入点所在的框架,从“修改”>“框架集”子菜单选择拆分项。
若要以垂直或水平方式拆分一个框架或一组框架,请将框架边框从“设计”视图的边缘拖入到“设计”视图的中间。
若要使用不在“设计”视图边缘的框架边框拆分一个框架,请按住 Alt (Windows) 或 Option (Macintosh) 拖动框架边框。
若要将一个框架拆分成四个框架,请将框架边框从“设计”视图一角拖入框架的中间。
若要创建三个框架,请首先创建两个框架,然后拆分其中一个框架。不编辑框架集代码是很难合并两个相邻框架的,所以将四个框架转变成三个框架要比将两个框架转变成三个框架更难。
删除框架
将边框框架拖离页面或拖到父框架的边框上。
如果要删除的框架中的文档有未保存的内容,则 Dreamweaver 将提示您保存该文档。
注:您不能通过拖动边框完全删除一个框架集。要删除一个框架集,请关闭显示它的“文档”窗口。如果该框架集文件已保存,则删除该文件。
调整框架大小
若要设置框架的近似大小,请在“文档”窗口的“设计”视图中拖动框架边框。
若要指定准确大小,并指定当浏览器窗口大小不允许框架以完全大小显示时浏览器分配给框架的行或列的大小,可使用属性检查器。
选择框架和框架集
若要更改框架或框架集的属性,首先要选择您要更改的框架或框架集。您既可以在“文档”窗口中选择框架或框架集,也可以通过“框架”面板进行选择。
“框架”面板提供框架集内各框架的可视化表示形式。它能够显示框架集的层次结构,而这种层次结构在“文档”窗口中的显示可能不够直观。在“框架”面板中,环绕每个框架集的边框非常粗;而环绕每个框架的是较细的灰线,并且每个框架由框架名称标识。
在“文档”窗口的“设计”视图中,在选定了一个框架后,其边框被虚线环绕;在选定了一个框架集后,该框架集内各框架的所有边框都被淡颜色的虚线环绕。
注:将插入点放置在框架内显示的文档中并不等同于选择了一个框架。有多种不同的操作(例如设置框架属性)要求您必须选择框架。
在框架面板中选择框架或框架集
选择“窗口”>“框架”。
在“框架”面板中:
若要选择框架,请单击此框架。(在“框架”面板和“文档”窗口的“设计”视图中,框架周围都会显示一个选择轮廓。)
若要选择框架集,请单击环绕框架集的边框。
在文档窗口中选择框架或框架集
选择不同的框架或框架集
若要在当前选定内容的同一层次级别上选择下一框架(框架集)或前一框架(框架集),请在按住 Alt 的同时按下左箭头键或右箭头键 (Windows),或在按住 Command 的同时按下左箭头键或右箭头键 (Macintosh)。使用这些键,您可以按照框架和框架集在框架集文件中定义的顺序依次选择这些框架和框架集。
若要选择父框架集(包含当前选定内容的框架集),请在按住 Alt 的同时按上箭头键 (Windows) 或在按住 Command 的同时按上箭头键 (Macintosh)。
若要选择当前选定框架集的第一个子框架或框架集(即,按在框架集文件中定义顺序中的第一个),按住 Alt 的同时按下箭头键 (Windows) 或在按住 Command 的同时按下箭头键 (Macintosh)。
在框架中打开文档
您可以通过将新内容插入框架的空文档中,或通过在框架中打开现有文档,来指定框架的初始内容。
将插入点放置在框架中。
选择“文件”>“在框架中打开”。
选择要在该框架中打开的文档,然后单击“确定”(Windows) 或“选择”(Macintosh)。
(可选)若要使该文档成为在浏览器中打开框架集时在框架中显示的默认文档,请保存该框架集。
保存框架和框架集文件
在浏览器中预览框架集前,您必须保存框架集文件以及要在框架中显示的所有文档。您可以单独保存每个框架集文件和带框架的文档,您也可以同时保存框架集文件和框架中出现的所有文档。
注:在您使用 Dreamweaver 中的可视工具创建一组框架时,框架中显示的每个新文档都将获得一个默认文件名。例如,第一个框架集文件被命名为“UntitledFrameset?1”,而框架中第一个文档被命名为“UntitledFrame?1”。
保存框架集文件
在“框架”面板或“文档”窗口中选择框架集。
若要保存框架集文件,请选择“文件”>“保存框架集”。
若要将框架集文件另存为新文件,请选择“文件”>“框架集另存为”。
注:如果以前没有保存过该框架集文件,则这两个命令是等效的。
保存框架中显示的文档
单击框架,然后选择“文件”>“保存框架”或选择“文件”>“框架另存为”。
保存与一组框架关联的所有文件
选择“文件”>“保存所有框架”。
该命令将保存在框架集中打开的所有文档,包括框架集文件和所有带框架的文档。如果未保存该框架集文件,则在“设计”视图中的框架集(或未保存的框架)的周围将出现粗边框,您可以选择文件名。
注:如果您使用“文件”>“在框架中打开”在框架中打开文档,则当您保存框架集时,您在框架中打开的文档将成为在该框架中显示的默认文档。如果您不希望该文档成为默认文档,则不要保存框架集文件。
查看和设置框架属性 (Property) 和属性 (Attribute)
使用属性检查器来查看和设置大多数框架属性,包括边框、边距以及是否在框架中显示滚动条。设置框架属性将覆盖框架集中该属性的设置。
您还可以设置某些框架属性,如 title 属性(它和 name 属性不同),以改进辅助功能。在创建框架时,可以使用用于框架的辅助功能创作选项来设置属性,或者可以在插入框架后设置属性。若要编辑框架的辅助功能属性,请直接使用标签检查器编辑 HTML 代码。
查看或设置框架属性
设置框架的辅助功能值
在“框架”面板(“窗口”>“框架”)中,通过将插入点放在一个框架中来选择框架。
选择“修改”>“编辑标签 <frameset>”。
从左侧的“分类”列表中选择“样式表/辅助功能”,输入值,然后单击“确定”。
编辑框架的辅助功能值
如果您当前处于“设计”视图中,请显示文档的“代码”视图或“代码”和“设计”视图。
在“框架”面板(“窗口”>“框架”)中,通过将插入点放在一个框架中来选择框架。Dreamweaver 高亮显示代码中的框架标签。
在代码中右键单击 (Windows) 或按住 Control 单击 (Macintosh),然后选择“编辑标签”。
在标签编辑器中进行更改,然后单击“确定”。
更改框架中文档的背景颜色
将插入点放置在框架中。
选择“修改”>“页面属性”。
在“页面属性”对话框中,单击“背景颜色”菜单,然后选择一种颜色。
查看和设置框架集属性
使用属性检查器可以查看和设置大多数框架集属性(包括框架集标题、边框以及框架大小)。
设置框架集文档的标题
查看或设置框架集属性
控制具有链接的框架内容
若要在一个框架中使用链接打开另一个框架中的文档,必须设置链接目标。链接的 target 属性指定在其中打开所链接内容的框架或窗口。
例如,如果您的导航条位于左框架,并且您希望链接的材料显示在右侧的主要内容框架中,则您必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时,将在主框架中打开指定的内容。
在“设计”视图中,选择文本或对象。
在属性检查器(“窗口”>“属性”)的“链接”框中,执行下列操作之一:
单击文件夹图标并选择要链接到的文件。
将“指向文件”图标拖动到“文件”面板并选择要链接到的文件。
在属性检查器的“目标”菜单中,选择应显示链接文档的框架或窗口:
_blank 在新的浏览器窗口中打开链接的文档,同时保持当前窗口不变。
_parent 在显示链接的框架的父框架集中打开链接的文档,同时替换整个框架集。
_self 在当前框架中打开链接,同时替换该框架中的内容。
_top 在当前浏览器窗口中打开链接的文档,同时替换所有框架。
框架名称也出现在该菜单中。选择一个命名框架以打开该框架中链接的文档。
注: 仅当您在框架集内编辑文档时才显示框架名称。当您在文档自身的“文档”窗口中编辑该文档时,框架名称不显示在“目标”弹出菜单中。如果要编辑框架集外的文档,则可以在“目标”文本框中键入目标框架的名称。
如果您链接到自己站点以外的页面,请始终使用 target="_top" 或 target="_blank",以确保该页面不会看起来像自己站点的一部分。
为不支持框架的浏览器提供内容
Dreamweaver 允许您指定在基于文本的浏览器和不支持框架的旧式图形浏览器中显示的内容。此内容存储在框架集文件中,用 noframes 标签括起来。当不支持框架的浏览器加载该框架集文件时,浏览器只显示包含在 noframes 标签中的内容。
注:noframes 区域中的内容应该不只是“您应升级到可以处理框架的浏览器”这样的说明。一些站点的访问者使用的系统不允许他们查看框架。
将 JavaScript 行为用于框架
有几个特别适合用于框架的 JavaScript 行为和与导航相关的命令:
设置框架文本
用您指定的内容替换给定框架的内容和格式。内容可以包括任何有效的 HTML。使用此操作可以动态显示框架中的信息。
转到 URL
在当前窗口或指定框架中打开新页面。此操作尤其适用于通过一次单击更改两个或多个框架的内容。
插入跳转菜单
设置链接的菜单列表,当单击该链接时将在浏览器窗口中打开文件。您还可以设置打开文档的特定目标窗口或框架。