问题,如果你经常在 Internet上浏览冲
浪，相信对下面的网页形式并不会感
到陌生：当我们浏览一个网页时，发
现网页的某部分区域（如网页的标题
或者导航栏）的内容不变化，而其它
区域不断地更新内容。
例如下图所示为易网的体坛纵横的一
个网页，该网页的左边是网站的名称
及导航控制（不变部分），右边是对
应左边的导航控制（变化部分）。
第七讲 框架的应用
这种特殊的功能是怎样实现的呢？
回答,是使用网页中的 框架 技术！
下面开始进入新的内容 ----框架的学习。
主要内容：
一、框架的基本概念
二、建立框架
三、举例说明
四、本节小结
五、作业
框架的基本概念
什么是框架？ ----框架就是浏览器窗口中规定
的某一特定区域，它能够显示指定的 HTML
文档（独立的网页文档）。
框架的功能,将浏览器的窗口分成若干个部
分，每部分可以分别显示不同的 HTML文档
（独立的网页文档） 。
框架集,一个浏览器窗口可以包含多个框架，
这些框架组合在一起成为框架集。
注意：框架集是一个 HTML文件，用来定义一
系列框架的属性及他们的大小、位置等布局
方式。而框架不是文件，框架是框架集中定
义的区域，它可以显示文档。
使用框架的优点：
1、可以使网页的界面变得更加漂亮；
2、使网页的结构更加清晰。
使用框架的缺点：
1、不是所有的浏览器都支持框架（ IE3.0），
浏览时，不支持框架的浏览器把所有的网
页中的内容在浏览器窗口中重叠显示，使
页面变得一塌糊涂。
2、框架实际上是把几个 HTML文件在同一
个页面内显示。因此，在下载网页时，框
架结构的网页会比普通网页要多下载几个
文件，速度当然要慢很多，另外，一个网
页分成几个部分，每个部分可用的空间变
得十分小了。
在实际中,很多网站的网页设计使用框架
的方式进行页面布局，以达到清晰、明了
的方式将浏览器窗口进行合理的划分，使
浏览者随时找到并浏览自己感兴趣的内容。
尽管框架存在一定的缺点，但是框架还是
较受欢迎的一种网页结构，对于网页设计
者来说，感兴趣的是在网页中如何创建框
架。下面学习创建框架。
建立框架
Dreamweaver MX为了方便用户创建
各种各样的框架集，把各种结构的框
架的集快捷按钮都收集在插入栏中的
【 框架 】 面板中，我们可以通过使
用这些结构来建立各种各样的框架。
所以,用户在创建框架时，可以先
打开插入栏中的 【 框架 】 面板进行
操作。
一、建立框架
1,建立框架
建立框架的操作步骤：
1）、打开一个新的文档窗口。
2）、打开插入栏中的 【 框架 】 面板。
3）、单击框架面板中的 按钮，在文
档中创建了左右结构的框架集。
如下图所示：
在上图的文档窗口中显示的虚线框就
是新插入的框架，如果看不到色虚线
框，只要选择主菜单的 【 查看 】 /
【 可视化处理 】 / 【 框架边框 】 命令，
就可以看到虚线框了。
2、添加内容
框架创建好以后，就可以往里添加内
容了。每一个框架里都是一个独立的
文档，可以直接添加内容，也可以在
框架内打开已经存在的文档。
添加内容的操作方法：
1）、将光标移到左边的框架内，然后
输入内容，每个框架内的内容的添
加和设计单个网页的方法完全一样。
2）、将光标移到右边的框架内，然后
选择主菜单中的 【 文件 】 /【 在框架
中打开 】 命令，在框架中打开一个
新的文档。
3、保存框架
每一个框架都包含一个文档，因此一个
框架集会包含多个文档，在保存文档的
时候，不能只简单地保存一个文档，要
将整个网页文档都保存下来。
保存框架具体的操作步骤：
1）、选择主菜单中的 【 文件 】 /【 保存全
部 】 命令，整个框架边框的内侧出现阴
影，在弹出的对话框中输入框架集的文
件名（ 保存框架集文件 ）。一般取名为
index.htm。
2）、接着出现第二个保存对话框，此
时，右框架边框内侧出现阴影，保存
右框架内容，输入文件名（ 保存右框
架内文件 ）。
3）、接着出现第三个保存对话框，此
时，左框架边框内侧出现阴影，保存
左框架内容，输入文件名（ 保存左框
架内文件 ）。
整个框架组就保存完毕。
提示：在含有框架的网页中，保存时，
一般网页中有多少个框架（ n个 ），
要保存的文件是 (n+1)个，特别是新
建的网页，并且是在各个框架中直
接输入内容，记得有这么多个文件
需要保存，别漏了。
如果是框架中已存在的文档（比如
是在框架中打开的文档）可以不用
起名保存。
二、选取框架
我们都知道要想对文档中的元素进行编
辑和修改，必须首先选定该元素，因此
要想编辑修改框架，也要先选定框架。
1、选定一个框架
选定一个框架一般有两种方法：
（ 1）、按下 Alt键，然后在欲选定的框架内
单击鼠标，将该框架选定，此时被选定
的框架边框内侧出现虚线，属性面板中
显示出该框架的属性参数。
（ 2）、选择主菜单中的, 窗口 → 其它 → 框
架, 命令,打开 【 框架 】 面板，在面板
中单击欲选定的框架。如下图所示：
单击此处
选定右框
架。
2、选取框架组
选定框架组也有两种方法：
（ 1）、在文档窗口中，单击整个框架
的边框来选定整个框架组，此时框
架组的边框变为虚线。
（ 2）、在 【 框架 】 面板中，单击框架
组的边框，选定整个框架组，此时
框架组的边框变为虚线。
三、框架属性
1、框架属性
当选定了一个框架，打开属性面板，则打开框架的
属性面板如下图所示：
面板中的参数的设定：
? 【 框架名称 】, 给框架命名，作为链接指向的目标。
? 【 源文件 】, 该框架中页面文件来源。
? 【 边框 】, 用来设置是否有边框，分别有
三个选项：, 默认,,, 是,,, 否,,
选择, 默认, 项，将有浏览器端的设置来
决定。
? 【 滚动 】, 用来设置是否为可滚动窗口，
分别有四个选项：, 是,,, 否,,, 自
动,,, 默认, 。选择, 自动, 项，将根
据窗口的显示大小而定，如果内容在窗口
中不能全部显示出来，将自动添加滚动条。
如果内容在窗口中全部显示出来，将没有
滚动条。
? 【 不能调整大小 】, 用来设置框架的尺寸
大小是否可变。
? 【 边框颜色 】, 用来设置框架边框
的颜色。
?【 边界宽度 】, 左右边界与内容之
间的距离，以像素为单位。
?【 边界高度 】, 下边界与内容之间
的距离，以像素为单位。
2、框架组属性
选定框架组后，打开框架组的属性
面板，如下图所示：
属性面板中的参数的设定：
? 【 边框 】, 用来设置是否有边框，分别有三个选
项：, 默认,,, 是,,, 否,,选择, 默认,
项，将有浏览器端的设置来决定。
? 【 边框宽度 】, 整个框架组的边框宽度，以像素
为单位。
? 【 边框颜色 】, 用来设置框架边框的颜色。
? 【 行 】 或 【 列 】, 属性面板中显示的是行或者是
列，是由框架集的结构而定的。
? 【 单位 】, 行、列的尺寸单位，有三种选择：
像素、百分比、相对。选择像素为单位时，
框架的尺寸大小是保持不变的，无论在多大
分辨率的浏览器窗口中，显示的框架大小都
是一样的。选择百分比、相对值时，框架的
尺寸大小将随着浏览器窗口的改变而发生有
规律的变化。
设置框架大小的最常用方法是将左侧框架设
定为固定像素宽度，将右侧框架大小设置为
相对大小，这样在分配像素宽度后，右侧框
架能够伸展以占据所有剩余空间。
四、编辑框架
建立了框架以后，熟悉了框架的一些基
本属性，就可以对框架进行设置框架、
改变框架大小和拆分框架等工作了。
编辑框架包含以下几个内容：（演示说明）
1、拆分框架
2、设置框架和框架集的边框
3、改变框架的大小
五、在框架中使用链接
在没有框架的文档中，设置时链接，属性面板
中的目标（ Target）下拉列表框有四种形式：
_blank,在一个新的浏览器窗口打开链接文档，
原浏览器窗口并不关闭。
_parent,回到上一级的浏览器窗口显示链接所
指向的文档内容。
_self,在当前的浏览器窗口中显示链接所指向
的文档内容。
_top,回到最顶端的浏览器窗口显示链接所指
向的文档内容。
使用框架结构的目的是为了在一个框
架中单击某个链接，使所链接的文件
在另一个框架中打开。 （这样就实现
了其中一个框架的内容控制另一框架
的内容。）
在文档中使用了框架，并且对框架进
行了命名，这些名称会出现在 Target目
标下拉列表中，这样用户很容易地选
择目标框架，实现在框架中的链接。
下面举例说明如何在框架网页中设置
链接。
三、举例说明
例 1、制作一个上、下左右框架结构的网页，
上面的框架显示动画文件，浏览时用鼠标单
击页面左边的按钮时，可以在右边框架显示
不同的网页。
操作步骤：
（ 1）、建立上、下左右结构的框架。
（ 2）、设置左（ leftframe）框架背景颜色为
#ccffff、主框架（ mainframe）背景颜色为
#99ffcc。
（ 3）、在上方框架插入动画文件 shu.swf。
（ 4）、设计左框架的内容。
（ 5）、设计框架中的链接。
（ 6）、保存框架集网页文件（选择, 文
件, /“保存全部框架, 命令）。
（ 7）用 IE预览页面效果。
本节小结
综上所述，框架有两个主要组成部分：一部分是框
架集、另一部分是框架。框架集不在浏览器中显示，
只用来保存有关页面的框架的信息，来指导浏览器如
何显示框架中的信息，是一个使用框架定义网页文件。
框架集中保存有关页面中的框架的尺寸、位置及每个
框架中的文件名称。
页面上的每一个框架都包含一个独立的 HTML文件，
可以通过设置链接实现一个框架中的内容控制另一框
架的内容。
要求：重点熟练掌握网页中框架的创建，灵活、合
理使用不同结构的框架以满足实际网页设计的需要。
作业
1、制作一个由三个框架组成的框架网
页（ 要求,上面是网站名称和标题，
左边是导航控制，右边是显示经常更
新的内容）（自拟素材） 功能,单击
左边的导航控制，内容会在同一窗口
的右边显示出来。
浪，相信对下面的网页形式并不会感
到陌生：当我们浏览一个网页时，发
现网页的某部分区域（如网页的标题
或者导航栏）的内容不变化，而其它
区域不断地更新内容。
例如下图所示为易网的体坛纵横的一
个网页，该网页的左边是网站的名称
及导航控制（不变部分），右边是对
应左边的导航控制（变化部分）。
第七讲 框架的应用
这种特殊的功能是怎样实现的呢？
回答,是使用网页中的 框架 技术！
下面开始进入新的内容 ----框架的学习。
主要内容：
一、框架的基本概念
二、建立框架
三、举例说明
四、本节小结
五、作业
框架的基本概念
什么是框架？ ----框架就是浏览器窗口中规定
的某一特定区域，它能够显示指定的 HTML
文档（独立的网页文档）。
框架的功能,将浏览器的窗口分成若干个部
分，每部分可以分别显示不同的 HTML文档
（独立的网页文档） 。
框架集,一个浏览器窗口可以包含多个框架，
这些框架组合在一起成为框架集。
注意：框架集是一个 HTML文件，用来定义一
系列框架的属性及他们的大小、位置等布局
方式。而框架不是文件，框架是框架集中定
义的区域，它可以显示文档。
使用框架的优点：
1、可以使网页的界面变得更加漂亮；
2、使网页的结构更加清晰。
使用框架的缺点：
1、不是所有的浏览器都支持框架（ IE3.0），
浏览时，不支持框架的浏览器把所有的网
页中的内容在浏览器窗口中重叠显示，使
页面变得一塌糊涂。
2、框架实际上是把几个 HTML文件在同一
个页面内显示。因此，在下载网页时，框
架结构的网页会比普通网页要多下载几个
文件，速度当然要慢很多，另外，一个网
页分成几个部分，每个部分可用的空间变
得十分小了。
在实际中,很多网站的网页设计使用框架
的方式进行页面布局，以达到清晰、明了
的方式将浏览器窗口进行合理的划分，使
浏览者随时找到并浏览自己感兴趣的内容。
尽管框架存在一定的缺点，但是框架还是
较受欢迎的一种网页结构，对于网页设计
者来说，感兴趣的是在网页中如何创建框
架。下面学习创建框架。
建立框架
Dreamweaver MX为了方便用户创建
各种各样的框架集，把各种结构的框
架的集快捷按钮都收集在插入栏中的
【 框架 】 面板中，我们可以通过使
用这些结构来建立各种各样的框架。
所以,用户在创建框架时，可以先
打开插入栏中的 【 框架 】 面板进行
操作。
一、建立框架
1,建立框架
建立框架的操作步骤：
1）、打开一个新的文档窗口。
2）、打开插入栏中的 【 框架 】 面板。
3）、单击框架面板中的 按钮，在文
档中创建了左右结构的框架集。
如下图所示：
在上图的文档窗口中显示的虚线框就
是新插入的框架，如果看不到色虚线
框，只要选择主菜单的 【 查看 】 /
【 可视化处理 】 / 【 框架边框 】 命令，
就可以看到虚线框了。
2、添加内容
框架创建好以后，就可以往里添加内
容了。每一个框架里都是一个独立的
文档，可以直接添加内容，也可以在
框架内打开已经存在的文档。
添加内容的操作方法：
1）、将光标移到左边的框架内，然后
输入内容，每个框架内的内容的添
加和设计单个网页的方法完全一样。
2）、将光标移到右边的框架内，然后
选择主菜单中的 【 文件 】 /【 在框架
中打开 】 命令，在框架中打开一个
新的文档。
3、保存框架
每一个框架都包含一个文档，因此一个
框架集会包含多个文档，在保存文档的
时候，不能只简单地保存一个文档，要
将整个网页文档都保存下来。
保存框架具体的操作步骤：
1）、选择主菜单中的 【 文件 】 /【 保存全
部 】 命令，整个框架边框的内侧出现阴
影，在弹出的对话框中输入框架集的文
件名（ 保存框架集文件 ）。一般取名为
index.htm。
2）、接着出现第二个保存对话框，此
时，右框架边框内侧出现阴影，保存
右框架内容，输入文件名（ 保存右框
架内文件 ）。
3）、接着出现第三个保存对话框，此
时，左框架边框内侧出现阴影，保存
左框架内容，输入文件名（ 保存左框
架内文件 ）。
整个框架组就保存完毕。
提示：在含有框架的网页中，保存时，
一般网页中有多少个框架（ n个 ），
要保存的文件是 (n+1)个，特别是新
建的网页，并且是在各个框架中直
接输入内容，记得有这么多个文件
需要保存，别漏了。
如果是框架中已存在的文档（比如
是在框架中打开的文档）可以不用
起名保存。
二、选取框架
我们都知道要想对文档中的元素进行编
辑和修改，必须首先选定该元素，因此
要想编辑修改框架，也要先选定框架。
1、选定一个框架
选定一个框架一般有两种方法：
（ 1）、按下 Alt键，然后在欲选定的框架内
单击鼠标，将该框架选定，此时被选定
的框架边框内侧出现虚线，属性面板中
显示出该框架的属性参数。
（ 2）、选择主菜单中的, 窗口 → 其它 → 框
架, 命令,打开 【 框架 】 面板，在面板
中单击欲选定的框架。如下图所示：
单击此处
选定右框
架。
2、选取框架组
选定框架组也有两种方法：
（ 1）、在文档窗口中，单击整个框架
的边框来选定整个框架组，此时框
架组的边框变为虚线。
（ 2）、在 【 框架 】 面板中，单击框架
组的边框，选定整个框架组，此时
框架组的边框变为虚线。
三、框架属性
1、框架属性
当选定了一个框架，打开属性面板，则打开框架的
属性面板如下图所示：
面板中的参数的设定：
? 【 框架名称 】, 给框架命名，作为链接指向的目标。
? 【 源文件 】, 该框架中页面文件来源。
? 【 边框 】, 用来设置是否有边框，分别有
三个选项：, 默认,,, 是,,, 否,,
选择, 默认, 项，将有浏览器端的设置来
决定。
? 【 滚动 】, 用来设置是否为可滚动窗口，
分别有四个选项：, 是,,, 否,,, 自
动,,, 默认, 。选择, 自动, 项，将根
据窗口的显示大小而定，如果内容在窗口
中不能全部显示出来，将自动添加滚动条。
如果内容在窗口中全部显示出来，将没有
滚动条。
? 【 不能调整大小 】, 用来设置框架的尺寸
大小是否可变。
? 【 边框颜色 】, 用来设置框架边框
的颜色。
?【 边界宽度 】, 左右边界与内容之
间的距离，以像素为单位。
?【 边界高度 】, 下边界与内容之间
的距离，以像素为单位。
2、框架组属性
选定框架组后，打开框架组的属性
面板，如下图所示：
属性面板中的参数的设定：
? 【 边框 】, 用来设置是否有边框，分别有三个选
项：, 默认,,, 是,,, 否,,选择, 默认,
项，将有浏览器端的设置来决定。
? 【 边框宽度 】, 整个框架组的边框宽度，以像素
为单位。
? 【 边框颜色 】, 用来设置框架边框的颜色。
? 【 行 】 或 【 列 】, 属性面板中显示的是行或者是
列，是由框架集的结构而定的。
? 【 单位 】, 行、列的尺寸单位，有三种选择：
像素、百分比、相对。选择像素为单位时，
框架的尺寸大小是保持不变的，无论在多大
分辨率的浏览器窗口中，显示的框架大小都
是一样的。选择百分比、相对值时，框架的
尺寸大小将随着浏览器窗口的改变而发生有
规律的变化。
设置框架大小的最常用方法是将左侧框架设
定为固定像素宽度，将右侧框架大小设置为
相对大小，这样在分配像素宽度后，右侧框
架能够伸展以占据所有剩余空间。
四、编辑框架
建立了框架以后，熟悉了框架的一些基
本属性，就可以对框架进行设置框架、
改变框架大小和拆分框架等工作了。
编辑框架包含以下几个内容：（演示说明）
1、拆分框架
2、设置框架和框架集的边框
3、改变框架的大小
五、在框架中使用链接
在没有框架的文档中，设置时链接，属性面板
中的目标（ Target）下拉列表框有四种形式：
_blank,在一个新的浏览器窗口打开链接文档，
原浏览器窗口并不关闭。
_parent,回到上一级的浏览器窗口显示链接所
指向的文档内容。
_self,在当前的浏览器窗口中显示链接所指向
的文档内容。
_top,回到最顶端的浏览器窗口显示链接所指
向的文档内容。
使用框架结构的目的是为了在一个框
架中单击某个链接，使所链接的文件
在另一个框架中打开。 （这样就实现
了其中一个框架的内容控制另一框架
的内容。）
在文档中使用了框架，并且对框架进
行了命名，这些名称会出现在 Target目
标下拉列表中，这样用户很容易地选
择目标框架，实现在框架中的链接。
下面举例说明如何在框架网页中设置
链接。
三、举例说明
例 1、制作一个上、下左右框架结构的网页，
上面的框架显示动画文件，浏览时用鼠标单
击页面左边的按钮时，可以在右边框架显示
不同的网页。
操作步骤：
（ 1）、建立上、下左右结构的框架。
（ 2）、设置左（ leftframe）框架背景颜色为
#ccffff、主框架（ mainframe）背景颜色为
#99ffcc。
（ 3）、在上方框架插入动画文件 shu.swf。
（ 4）、设计左框架的内容。
（ 5）、设计框架中的链接。
（ 6）、保存框架集网页文件（选择, 文
件, /“保存全部框架, 命令）。
（ 7）用 IE预览页面效果。
本节小结
综上所述，框架有两个主要组成部分：一部分是框
架集、另一部分是框架。框架集不在浏览器中显示，
只用来保存有关页面的框架的信息，来指导浏览器如
何显示框架中的信息，是一个使用框架定义网页文件。
框架集中保存有关页面中的框架的尺寸、位置及每个
框架中的文件名称。
页面上的每一个框架都包含一个独立的 HTML文件，
可以通过设置链接实现一个框架中的内容控制另一框
架的内容。
要求：重点熟练掌握网页中框架的创建，灵活、合
理使用不同结构的框架以满足实际网页设计的需要。
作业
1、制作一个由三个框架组成的框架网
页（ 要求,上面是网站名称和标题，
左边是导航控制，右边是显示经常更
新的内容）（自拟素材） 功能,单击
左边的导航控制，内容会在同一窗口
的右边显示出来。
