使用框架布局页面

单元4——使用框架布局页面

学习目标：

➢理解框架布局的原理

➢掌握使用框架进行页面布局的方法

➢学习利用浮动框架嵌入插件

Dreamweaver CS3提供了一种很方便的可以进行网页布局的工具——框架。框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的Web页面上。

任务4.1 框架基本操作

在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。

4.1.1创建一个新的框架集网页

(1)运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”→“框架集”→“上方固定，左侧嵌套”选项，如下图所示。

（2）单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示，在此可为每一个框架指定一个标题。

（3）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。

4.1.2保存框架

每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。操作步骤如下：

（1）选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html”，表示整个框架集的名称。

（2）单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。

（3）单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html”

和“top.html”，表示左边框架和上方框架的文件名。如下图所示：

4.1.3选择框架和框架集

在Dreamweaver中，打开“窗口”菜单，选择“框架”命令，可以打开“框架”面板，如下图所示

在面板中单击要选择的框架，被选中的框架边框内侧会出现，如下图所示。或者按键，在要选择的框架内单击鼠标左键也可选中。

如果要选中框架集，可以在框架面板中单击框架集的边框，此时框架集的边框变成虚线，如下图所示。

在文档窗口中，单击文档窗口中要选择的框架，即可选中该框架，如下图所示。

在文档窗口中，当鼠标指针靠近框架集的边框并且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集，如下图所示。

4.1.4编辑框架

（1）拆分框架

制作框架网页可以根据Dreamweaver自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符合设计要求。自行设计框架集结构，其实就是拆分框架，也可以使用鼠标拖动框架集的外边框直接进行拆分。操作步骤如下：

将光标放置在如下图所示的右侧框架中，选择插入栏的“布局”，在“框架”下拉菜单中单击“底部框架”按钮，如下图所示。

拆分后将变成如下图所示的框架。

按键选择左侧框架，用鼠标向右拖动框架的右边框，将其拆分成如下图所示的框架。

将光标放置在上方框架中，选择“修改”→“框架集”→“拆分上框架”命令进行拆分，如下图所示。还可以选择“拆分左框架”、“拆分右框架”、“拆分下框架”命令进行拆分。

将光标方在框架的4个角，当光标变成时，拖动到框架的中间，可以将框架拆分成4个，如下图所示。

提示：如果要创建3个框架，首先创建2个框架，然后拆分其中一个框架，不要将4个框架转换成3个框架，因为合并两个相邻框架必须编辑框架集代码。

（2）删除框架

用鼠标将框架边框脱离编辑窗口即可删除框架，然后框架中有未保存的内容，Dreamweaver会提示保存该文档。

通过关闭显示框架集的文档窗口，可以删除框架集，如果该文件已经保存，可以删除该文件。

如果边框拖曳错了，只要用鼠标把需要删除的边框拖到父框架的边框上或脱离页面即可删除。

（3）链接框架

要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标，链接的目标属性指定在其中打开链接的内容框架或窗口。如果导航条位于左框架，而希望链接的材料显示在右侧的主要内容框架中，则必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时，将在主框架中打开指定的内容。

在“属性”面板中的“目标”下拉列表中选择mainFrame选项，用来作为指向链接的目标。

在“属性”面板中的“链接”下列列表中选择链接文档应在其中显示的框架或窗口。

●_blank：打开一个新窗口显示目标网页。

●_parent：目标网页的内容在父框架窗口中显示。

●_self：目标网页的内容在当前所在框架窗口中显示。

●_top：目标网页的内容在最顶层框架窗口中显示。

任务4.2 利用框架制作后台管理系统界面

在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。下面我们将通过制作如下图这样一个利用框架制作后台管理系统界面的实例来说明个中的方法与技巧。

首先我们要分析一下整个页面布局情况，这个页面可分为顶部框架、左侧框架和右侧框架三个框架，其中顶部框架为固定区，左侧框架为导航区，而右侧框架则为内容区。页面的结构如下图所示。

下面让我们来一步步地利用框架制作出这个页面：

（1）当然我们要先在Dreamweaver中新建一张HTML网页，运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”→“框架集”→“上方固定，左侧嵌套”选项，如下图所示。