1、单元 4使用框架布局页面学习目标： 理解框架布局的原理 掌握使用框架进行页面布局的方法 学习利用浮动框架嵌入插件Dreamweaver CS3 提供了一种很方便的可以进行网页布局的工具框架。框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的 Web 页面上。任务 4.1 框架基本操作在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置 Banner（也就是标
2、题） ；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。 4.1.1 创建一个新的框架集网页(1)运行 Dreamweaver CS3，选择“文件”“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页” “框架集” “上方固定，左侧嵌套”选项，如下图所示。（2 ）单击“创建”按钮，弹出 “框架标签辅助功能属性 ”对话框，如下图所示，在此可为每一个框架指定一个标题。（3 ）单击“确定”按钮，即
3、可创建一个上方固定，左侧嵌套的框架集，如下图所示。4.1.2 保存框架每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。操作步骤如下：（1 ） 选择“文件” “保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html” ，表示整个框架集的名称。（2 ） 单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm” ，表示右边框架即主框架的文件名。（3 ） 单击“保存”按钮，依次弹出第 3 个和第 4 个“另存为”对话框，分别命名为“left.html”和“top.htm
4、l” ，表示左边框架和上方框架的文件名。如下图所示：4.1.3 选择框架和框架集在 Dreamweaver 中，打开“窗口”菜单，选择“框架”命令，可以打开“框架”面板，如下图所示在面板中单击要选择的框架，被选中的框架边框内侧会出现，如下图所示。或者按键，在要选择的框架内单击鼠标左键也可选中。如果要选中框架集，可以在框架面板中单击框架集的边框，此时框架集的边框变成虚线，如下图所示。在文档窗口中，单击文档窗口中要选择的框架，即可选中该框架，如下图所示。在文档窗口中，当鼠标指针靠近框架集的边框并且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集，如下图所示。4.1.4 编辑框架（1 ）拆分
5、框架制作框架网页可以根据 Dreamweaver 自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符合设计要求。自行设计框架集结构，其实就是拆分框架，也可以使用鼠标拖动框架集的外边框直接进行拆分。操作步骤如下：将光标放置在如下图所示的右侧框架中，选择插入栏的“布局” ，在“框架”下拉菜单中单击“底部框架”按钮，如下图所示。拆分后将变成如下图所示的框架。按键选择左侧框架，用鼠标向右拖动框架的右边框，将其拆分成如下图所示的框架。将光标放置在上方框架中，选择“修改” “框架集” “拆分上框架”命令进行拆分，如下图所示。还可以选择“拆分左框架” 、 “拆分右框架” 、 “拆分下框架”命令进
6、行拆分。将光标方在框架的 4 个角，当光标变 成时，拖动到框架的中间，可以将框架拆分成 4 个，如下图所示。提示：如果要创建 3 个框架，首先创建 2 个框架，然后拆分其中一个框架，不要将 4个框架转换成 3 个框架，因为合并两个相邻框架必须编辑框架集代码。（2 ）删除框架用鼠标将框架边框脱离编辑窗口即可删除框架，然后框架中有未保存的内容，Dreamweaver 会提示保存该文档。通过关闭显示框架集的文档窗口，可以删除框架集，如果该文件已经保存，可以删除该文件。如果边框拖曳错了，只要用鼠标把需要删除的边框拖到父框架的边框上或脱离页面即可删除。（3 ）链接框架要在一个框架中使用链接打开另一个框架
7、中的文档，必须设置链接目标，链接的目标属性指定在其中打开链接的内容框架或窗口。如果导航条位于左框架，而希望链接的材料显示在右侧的主要内容框架中，则必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时，将在主框架中打开指定的内容。在“属性”面板中的“目标”下拉列表中选择 mainFrame 选项，用来作为指向链接的目标。在“属性”面板中的“链接”下列列表中选择链接文档应在其中显示的框架或窗口。_blank：打开一个新窗口显示目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。 _top：目标网页的内容在最顶层框
8、架窗口中显示。任务 4.2 利用框架制作后台管理系统界面在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。下面我们将通过制作如下图这样一个利用框架制作后台管理系统界面的实例来说明个中的方法与技巧。首先我们要分析一下整个页面布局情况，这个页面可分为顶部框架、左侧框架和右侧框架三个框架，其中顶部框架为固定区，左侧框架为导航区，而右侧框架则为内容区。页面的结构如下图所示。下面让我们来一步步地利用框架制作出这个页面：（1 ）当然我们要先在 Dreamweaver 中新建一张 HTML 网页，运行 Dreamweaver CS3，选择“文件”“新建”命
9、令，弹出“新建文档”对话框，在对话框中选择“示例中的页” “框架集” “上方固定，左侧嵌套”选项，如下图所示。（2 ）单击“创建”按钮，弹出 “框架标签辅助功能属性 ”对话框，如下图所示，在此可为每一个框架指定一个标题。（3 ）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。（4 ）接下来，我们要分别设置三个框架的页面属性，全都设置为如下图所示的页面属性。（5 ）设置完成后，我们便要保持框架集，具体步骤为：a) 选择“文件” “保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html” ，表示整个框架集的名称。b) 单击“保存
10、”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。c) 单击“保存”按钮，依次弹出第 3 个和第 4 个“另存为”对话框，分别命名为“left.html”和“top.html” ，表示左边框架和上方框架的文件名。如下图所示：提示：使用框架布局网页是一种高效的网页设计方法，但是只有那些具有特殊页面结构、使用框架的网页才能进行框架布局。（6 ）保存好之后，我们将要给各框架插入表格，同时设置表格的背景图像。首先我们将光标定位在 top 框架上， “文档”工具栏上文件名变为“top.html” ， “框架”面板中的 topFrame
11、框架高亮显示，表面此时处于 top.html 文件的编辑状态。单击页面快捷菜单上的按钮，在框架中插入一个 1 行 1 列的表格，设置宽度为 1002 像素，如下图所示：表格成功插入后，选择 images 文件中图像名为 jm_01.jpg 的图作为该表格的背景图像，设置表格高度为 90，如下图所示：接下来我们将光标移到 left 框架上，同样的选择快捷菜单上的 按钮，插入 1 行 1 列，宽度为 125 像素的表格，插入后选择 images 文件中图像名为 jm_02.jpg 的图作为该表格的背景图像，设置表格高度为 490，如下图所示：接着将光标移到 left 框架与 main 框架的分界线
12、，当光标变成 时，设置 left 框架的列值为 125 像素，如下图所示。接下来将光标移到 main 框架上，同样的插入 1 行 3 列，宽度为 100%的表格，如下图所示。 （提示：设置表格宽度为 100%，可以使表格内容随框架边框的移动而移动。 ）表格成功插入后，将光标移到表格的第一列，将该列属性设置为宽 34，高 490，背景为 images 文件中图像名为 jm_03_01.jpg 的图像，如下图所示。设置完成后将光标移到到表格的第二列，无需改变宽度和高度，直接选择 images 文件中图像名为 jm_03_02.jpg 的图像作为该列的背景。接着将光标移到第三列，将该列属性设置为宽
13、34，背景为 images 文件中图像名为jm_03_03.jpg 的图像。（注意：排版布局用的表格，它的边框、间距、填充这三个参数都应设为 0.因为排版布局用的表格应为不可见的表格，其作用只是用作内容定位和页面布局，不用显示出来。如果需要整个网页居中显示的话，可以分别选中这三个表格在属情面板中设为居中对齐就可以了。另外大家会发现表格很小没有设定高度，但是我们不用急于设定高度，我们可以住里面放内容，让内容把表格蹭大。 ）上面的步骤完成之后，后台管理系统界面的基本结构就出来了，如下图所示：（7 ）接下来我们来设置导航区部分，我们依然利用表格来进行排版，将光标定位在 leftFrame 框架中，编
14、辑 left.html 文件，插入一个 4 行 1 列的表格，设置宽度为 100%，将第一行拖曳至与背景图中的横线重叠，另外三行设置高度为 30 像素，输入如右图所示的链接文字。 （8 ）接下来我们打开 first 文件中文件名为 main.html 的网页，接着选择“文件”“另存为”命令，弹出“另存为”对话框，在文件名中输入“main1.html” ，单击保存按钮，按此操作增加多 3 张main.html 网页。如下图所示。打开 main.html 网页，在表格的第二列中输入“欢迎光临！” ，设置水平居中对齐，大小 36，粗体字。接着打开 main1.html 网页，在其中插入如下图所示的个
15、人信息表格。接下来打开 main2.html 网页，将 image 文件中名为 bg.jpg 的图片插入进去，然后打开 main3.html 网页，输入如下所示的文字：（9 ）主框架网页文件设置好后，我们回到 index.html 文件中设置导航区的文字链接，选中“主菜单”文字，设置链接为 main.html，目标为 mainFrame，如下图所示：选中“个人信息表”文字，设置链接为 main1.html，目标为 mainFrame。.同样的，设置“图片”的链接为 main2.html，目标为 mainFrame， “DW 简介”的链接为 main3.html，目标为 mainFrame。.（
16、10 ）选择 “文件” “保存全部”命令，保存所有网页文件，按键预览，得到如下图所示效果。分别点击各链接文字，top 框架和 left 框架都保存不变，而 main 框架中的内容将会进行改变，如下图所示。希望通过这一个简单例子的制作能让大家了解网页框架的排版布局，并能掌握其中的方法与技巧，尤其是框架与表格的结合布局技巧。任务 4.3 利用浮动框架嵌入天气预报在另一个框架集内的框架集成为嵌套的框架集。一个框架集文件可以包含多个嵌套的框架集。大多数 Web 网页实际上都使用嵌套的框架，在 Dreamweaver CS3 中大多数预定义的框架集也使用嵌套。如果在一组框架集里，不同行或不同列中有不同数
17、目的框架，一般要求使用嵌套的框架集。下面将为大家讲解如何利用浮动框架嵌入天气预报。3.1.1 什么是浮动框架？浮动框架（iframe）是指在网页文档中，以框架形式显示嵌套网页文档、主页、公告板和记事本的功能，利用这一功能，可以在指定的位置以指定的大小显示其他网页文档或站点，例如滚动新闻等。3.1.2 如何利用浮动框架嵌入天气预报呢？其实呢，利用浮动框架嵌入天气预报很简单，首先呢我们可以从网上找到一些天气预报的插件，找到该插件的代码后复制，如下图所示。找到我们需要的天气预报插件代码之后，我们便将该代码粘贴到 Dreamweaver CS3 中网页的代码中的到之间的位置。如下图所示。按 按钮预览，得到如下图所示的效果界面：
