使用框架布局页面

单元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个，如下图所示。

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

（2）删除框架

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

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

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

（3）链接框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（4）接下来，我们要分别设置三个框架的页面属性，全都设置为如下图所示的页面属性。

（5）设置完成后，我们便要保持框架集，具体步骤为：

a)选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另

存为”对话框，命名为“index.html”，表示整个框架集的名称。

b)单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为

“main.htlm”，表示右边框架即主框架的文件名。

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

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

提示：使用框架布局网页是一种高效的网页设计方法，但是只有那些具有特殊页面结构、使用框架的网页才能进行框架布局。

（6）保存好之后，我们将要给各框架插入表格，同时设置表格的背景图像。首先我们将光标定位在top框架上，“文档”工具栏上文件名变为“top.html”，“框架”面板中的top—Frame

框架高亮显示，表面此时处于top.html文件的编辑状态。单击页面快捷菜单上的按钮，在框架中插入一个1行1列的表格，设置宽度为1002像素，如下图所示：

表格成功插入后，选择images文件中图像名为jm_01.jpg的图作为该表格的背景图像，设置表格高度为90，如下图所示：

接下来我们将光标移到left框架上，同样的选择快捷菜单上的按钮，插入1行1列，

宽度为125像素的表格，插入后选择images文件中图像名为jm_02.jpg的图作为该表格的背景图像，设置表格高度为490，如下图所示：

接着将光标移到left框架与main框架的分界线，当光标变成时，设置left框架的列值为125像素，如下图所示。

接下来将光标移到main框架上，同样的插入1行3列，宽度为100%的表格，如下图所示。（提示：设置表格宽度为100%，可以使表格内容随框架边框的移动而移动。）

表格成功插入后，将光标移到表格的第一列，将该列属性设置为宽34，高490，背景为images文件中图像名为jm_03_01.jpg的图像，如下图所示。

设置完成后将光标移到到表格的第二列，无需改变宽度和高度，直接选择images文件中图像名为jm_03_02.jpg的图像作为该列的背景。

接着将光标移到第三列，将该列属性设置为宽34，背景为images文件中图像名为jm_03_03.jpg的图像。

（注意：

排版布局用的表格，它的边框、间距、填充这三个参数都应设为0.因为排版布局用的表格应为不可见的表格，其作用只是用作内容定位和页面布局，不用显示出来。

如果需要整个网页居中显示的话，可以分别选中这三个表格在属情面板中设为居中对齐就可以了。

另外大家会发现表格很小没有设定高度，但是我们不用急于设定高度，我们可以住里面放内容，让内容把表格蹭大。）

上面的步骤完成之后，后台管理系统界面的基本结构就出来了，如下图所示：

（7）接下来我们来设置导航区部分，我们依然利用表格来进行排版，

将光标定位在leftFrame框架中，编辑left.html文件，插入一个4行

1列的表格，设置宽度为100%，将第一行拖曳至与背景图中的横线

重叠，另外三行设置高度为30像素，输入如右图所示的链接文字。

（8）接下来我们打开first文件中文件名为main.html的网页，接着

选择“文件”→“另存为”命令，弹出“另存为”对话框，在文件

名中输入“main1.html”，单击保存按钮，按此操作增加多3张

main.html网页。如下图所示。

打开main.html网页，在表格的第二列中输入“欢迎光临！”，设置水平居中对齐，大小36，粗体字。接着打开main1.html网页，在其中插入如下图所示的个人信息表格。

接下来打开main2.html网页，将image文件中名为bg.jpg的图片插入进去，然后打开main3.html网页，输入如下所示的文字：

（9）主框架网页文件设置好后，我们回到index.html文件中设置导航区的文字链接，选中“主菜单”文字，设置链接为main.html，目标为mainFrame，如下图所示：

选中“个人信息表”文字，设置链接为main1.html，目标为mainFrame。.同样的，设置“图片”的链接为main2.html，目标为mainFrame，“DW简介”的链接为main3.html，目标为mainFrame。.

（10）选择“文件”→“保存全部”命令，保存所有网页文件，按键预览，得到如下

图所示效果。

如下图所示。

希望通过这一个简单例子的制作能让大家了解网页框架的排版布局，并能掌握其中的方法与技巧，尤其是框架与表格的结合布局技巧。

任务4.3 利用浮动框架嵌入天气预报

在另一个框架集内的框架集成为嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数Web网页实际上都使用嵌套的框架，在Dreamweaver CS3中大多数预定义的框架集也使用嵌套。如果在一组框架集里，不同行或不同列中有不同数目的框架，一般要求使用嵌套的框架集。下面将为大家讲解如何利用浮动框架嵌入天气预报。

3.1.1什么是浮动框架？

浮动框架（iframe）是指在网页文档中，以框架形式显示嵌套网页文档、主页、公告板和记事本的功能，利用这一功能，可以在指定的位置以指定的大小显示其他网页文档或站点，例如滚动新闻等。

3.1.2如何利用浮动框架嵌入天气预报呢？

其实呢，利用浮动框架嵌入天气预报很简单，首先呢我们可以从网上找到一些天气预报的插件，找到该插件的代码后复制，如下图所示。

找到我们需要的天气预报插件代码之后，我们便将该代码粘贴到Dreamweaver CS3中网页的代码中的到之间的位置。如下图所示。

按按钮预览，得到如下图所示的效果界面：