应用框架设计页面结构

12.5.6　应用框架设计页面结构

应用框架技术能够将同一个页面划分为若干区域，使用链接可以将独立的框架联系起来，这样网页内不同框架之间就可以相互调用和配合，形成一个严密的整体。前面介绍过超级链接的内容，每当单击网页内的超级链接文本或超级链接图像时，链接目标就会出现在目标位置。由于网页内未应用框架技术，因此打开的链接目标都将把超级链接文本或超级链接图像所在的网页覆盖。

如何使链接源与链接目标同时出现在浏览器窗口中呢？一种情况是链接目标打开新的浏览器窗口，另一种情况是链接目标出现在链接源所在的窗口中。第一种情况的解决方法是将链接目标确定为 blank，第二种情况的解决方法是应用框架技术。

其实框架的作用对我们并不陌生，在操作系统的资源管理器窗口中，一条垂直的分隔线将窗口划分为左、右两个窗格，在左侧窗格中选择文件夹时，右侧窗格将显示文件夹的内容，而左侧窗格的内容并不会从屏幕上消失，如图12-83所示。网页是由两个框架组成的，网页左框架显示内容分类，右框架是分类的内容。例如，在窗口中单击“信息系简介”链接，显示的内容将出现在右端的框架内。

图12-83　两个框架页面

1.生成框架

在 Dreamweaver 8中提供了专用的创建框架网页的菜单命令，重复执行这些菜单命令，或者通过“Alt”键与鼠标的配合，将在网页内形成多框架的网页，构成一个完整的框架集。

（1）创建框架

要为当前页面创建框架结构，最常用的方法是使用“插入”面板中的“布局”选项卡上的“框架”按钮。单击右侧的三角按钮，在弹出的下拉列表中选择预定义的框架类型按钮，就可以在当前的页面或者插入点所在的框架中应用按钮所对应的框架结构，完成页面分隔任务，如图12-84所示。

同时，执行菜单命令同样可以快速地生成框架。选择菜单【插入】→【HTML】→【框架】，打开其子菜单，如图 12-85　所示，执行其中相应的命令，可以在文档窗口中快速地生成框架。

（2）分割框架

Dreamweaver 8提供的 12　种基本框架结构，并不能满足框架网页的创建需要，开发人员需要综合使用它们才能创建各种各样的框架。在文档窗口中，打开【修改】→【框架页】子菜单之后，其中的命令按照不同的方向对框架进行分隔，插入点将位于新分隔的框架内。一旦形成框架的主体轮廓之后，配合菜单命令与“Alt”功能键的使用，可以对框架做进一步的分隔或删除。

图12-84　通过插入面板创建框架

图12-85　框架子菜单

使用菜单命令分隔框架的操作方法：

① 在文档窗口中，创建一个框架集；

② 将鼠标指针定位于要分隔的框架中，选择菜单【修改】→【框架页】，打开“框架页”子菜单，如图 12-86　所示；

③ 根据需要选择分隔框架的子菜单中相应的命令。

在“框架页”子菜单中包括 5　个命令，选择“编辑无框架内容”命令，将打开编辑非框架集的文档窗口，“拆分左框架”和“拆分右框架”命令都将插入点所在的框架水平一分为二，两者的区别在于分隔网页或框架后，插入框架的位置不同，前者插入点位于左侧框架内，后者插入点位于右侧框架内。

图12-86　框架页子菜单

“框架页”子菜单的“拆分上框架”和“拆分下框架”命令都将插入点所在的网页或框架垂直地一分为二。执行第一个命令时，插入点位于顶端框架内，执行第二个命令时，插入点位于底端框架内。

例如，对如图 12-83所示的框架执行“拆分右框架”命令，将得到一个三框架结构，如图 12-87　所示。

图12-87　拆分框架后

使用“Alt”功能键分隔框架的操作步骤：

① 按住“Alt”功能键，将插入点移动到框架边框位置；

② 当鼠标指针转换成垂直形状时，沿箭头指示的方向拖动鼠标，可将框架分隔成上、下两个部分；

③ 当鼠标指针转换成水平形状时，沿箭头指示的方向拖动鼠标，可将框架分隔成左、右两个部分。

※提示：

选择菜单【查看】→【可视化助理】→【框架边框】命令时，将使框架边框处于显示状态。如果要删除已经存在的框架时，可以把这个框架的边框拖动到和另一个框架相交的边框上。

（3）选择框架

通过框架的创建、分隔，将在网页内形成一个完整的框架集，如果需要对框架集或框架的大小、边框、滚动条等属性进行调整时，必须进行框架的选择操作。

Dreamweaver 8提供了两种选择框架的方法，可以选择下列方法之一进行操作：

●按住“Alt”功能键，单击网页内的框架。

●在打开的框架面板中单击框架。

框架面板是 Dreamweaver 8用于管理框架的工具，选择【窗口】→【框架】命令，或者使用“Shift+F2”组合键，都将打开“框架”面板，如图 12-88　所示。当前网页的框架集及其框架的布局将显示在框架面板内。

Dreamweaver 8提供了两种选择框架集的方法，可选择下列方法之一进行操作：

●在文档窗口单击框架边框。

●在框架面板中单击包围框架的白色边框。

2.改变框架集属性

选择框架集之后，属性面板将显示与框架集属性有关的参数。它包括“边框”、“边框宽度”、“边框颜色”、“所选行或列的宽度”、“行或列宽度的度量单位”等内容，本节将介绍设置框架集属性的方法。

图12-88　框架面板

（1）调整边框

边框是位于不同框架之间的分隔线，与边框有关的属性包括是否显示边框、边框的宽度与边框的颜色等。选择网页内的框架集之后，它的“属性”面板，如图 12-89　所示。“边框”用于设置是否显示边框，打开下拉列表框，选择“是”选项，表示以三维和灰度显示边框。选择“否”选项时，表示显示扁平和灰度边框。选择“默认”选项，将由访问者使用浏览器决定是否显示边框的内容。

“边框颜色”用于设置框架集边框的颜色。可打开颜色框，通过鼠标选择所需的颜色。只有在“边框”下拉列表框中定义框架集的边框为“显示”状态时，在此设置的颜色才能生效。

“边框宽度”用于设置边框的宽度，可直接在文本框中输入边框的数值，它的度量单位是像素。

图12-89　框架集属性面板

（2）调整框架大小

框架集是由多个矩形框架组成的，它们都是从简单的水平或垂直框架演变而来的，对于规则的框架，同列的框架都具有相同的行高，同行的框架都具有相同的列宽；对于不规则的框架来说，较小的框架仍然是由初始框架分隔而成的，较大的框架则是由初始框架合并而成的，本质上仍然可将它们看成是由行、列内的框架组成的。

选择框架集之后，框架面板将显示框架结构的示意图。将鼠标指针移动到示意图的顶端边框位置单击，便可选择同列的所有框架。将鼠标指针移动到示意图左侧边框位置单击，便可选择同行的所有框架。

水平（垂直）地拖动框架的边框可对同列（行）内框架的宽度（高度）进行快速的调整，通过“属性”面板“列”的“值”和“单位”的调整，可对行或列内框架的大小进行定量地设置。

调整框架宽度的操作方法：

① 选择网页内的框架集。

② 打开框架面板。

③ 将鼠标指针移动至框架面板的左侧边框，单击选择同列内的框架。

④ 在“属性”面板中打开“列”选项组的“单位”下拉列表框，选择框架宽度的单位。

⑤ 在“列”选项组的“值”文本框中输入数值，确定同列框架宽度数值。

同样可以通过选择行，改变框架高度的值。

打开框架集“属性”面板的“单位”下拉列表框之后，可以看到 3　个选项。选择“像素”，表示以像素为单位定义所选行或列的高度或宽度，其他两个选项都用于定义框架的相对高度或宽度。选择“百分比”将以框架集的百分比定义所选行或列的高度或宽度。选择“相对”，指定所选的行或列的框架相对于其他框架分配空间。

3.在框架中添加元素

在创建完框架并对其属性进行调整后，就可以向其中添加网页元素了，可以把框架看作一个完整的页面来操作。例如，将光标定位于某一个框架内后通过选择【修改】→【页面属性】来设置框架背景颜色。

（1）使用链接控制框架内容

在框架中使用链接，可以在一个新的窗口中打开文件。另外，也可以通过链接在同一个框架中把原来的内容加以替换，而这个新的内容将在该框架中显示。

使用普通链接的操作方法：

① 在框架中选定一个用来建立链接的文字或图像等元素。

② 打开“属性”面板。

③ 在“链接”文本框中直接输入链接文本的名称及路径。也可以单击“链接”右边的文件夹按钮，在打开的对话框中选择要链接的文件。

④ 打开“属性”面板的“目标”下拉列表框，从中选择一个链接文件显示的目标框架名称或窗口类型，如图 12-90　所示。

⑤ 单击“Enter”键确认。

※ 提示：

图12-90　目标框架

只有在框架集内编辑文档时才显示框架名称。框架名称可以通过框架属性面板设置，如图 12-91　所示。

图12-91　框架属性面板

（2）保存框架网页

在浏览网页之前，首先要把框架网页保存下来。保存框架网页比保存普通网页要复杂一些，这是由于框架网页是由框架集及框架内容组成的，在保存框架网页时，不仅要保存框架的内容，还要对框架集本身进行保存。

保存框架文件：将光标定位到要保存的框架中，选择菜单【文件】→【保存框架页】，在打开的“另存为”对话框中指定保存路径、文件名。若要将框架进行另存为处理时，可选择菜单【文件】→【框架集另存为】进行保存。

① 保存框架集：选择框架集，选择菜单【文件】→【保存框架页】，打开“另存为”对话框，指定框架集的保存路径和框架集名。需要将当前框架集进行另存为处理时，可选择菜单【文件】→【框架集另存为】。

② 一次性地对框架文件和框架集文件进行保存时，可选择【文件】→【保存全部】，Dreamweaver 8将依次对框架集和框架文件进行保存。