第 7章 窗口框架
7.1 窗口框架简介
7.2 窗口框架控制
7.3 FRAME间的链接
7.4 浮动窗口
7.1 窗口框架简介
7.1.1 什么是窗口框架
?窗口框架可用于 将窗口画面分割成多个
小窗口,且每个小窗口中，可以显示不同
的网页,达到在浏览器中同时浏览多个不
同网页的效果 。
7.1.2 窗口框架的基本结构
Frameset结构的基本格式
<frameset>
<frame src="url,name=“w1”>
<frame src="url,name=“w2”>
,.,
<NOFRAMES>,.,</NOFRAMES>
</frameset>
在介绍窗口框架文档之前，先来看看其应用实例，
有一个感性认识，见下图。
包含 Frameset结构的 HTML文件
文件 ex7-01.html的源代码
<html>
<head>
<title>窗口框架文档 </title>
</head>
<frameset cols="179,*">
<frame name="windows1" src="ex7-01-1.html" scrolling=auto>
<frame name="windows2" src="ex7-01-2.html">
<NOFRAMES> 你的浏览器不支持带框架的网页 </NOFRAMES>
</frameset>
</html>
说 明
?<frameset>标签用于定义一个窗口框架
?<frame>标签则用于定义窗口框架中的子窗口
?窗口框架文档的书写格式与一般的 HTML文档的书
写格式相同，只是 用 <frameset>代替 <body>标签,
<frameset>是一个成对标签，有开始和结束标签，
在 <frameset>标签内使用了另一个标签 <frame>，用
它来指定每一个窗口的内容。
7.1.3 窗口框架的分割方式
窗口框架的分割方式可分为两种，
一种是水平分割 (rows属性 )，另一种是
垂直分割 (cols属性 )。
7.2 窗口框架控制
?<frameset>是成对标签,首标签 <frameset>和尾
标签 </frameset>之间的内容是 HTML文档主体部分。
?使用框架的 HTML文档中不能出现 <body>标签,否
则会导致 web浏览器忽略所有的框架定义而只显示
<body>和 </body>之间的内容。
?<frameset>标签主要有 rows,cols,border、
bordercolor和 frameborder五个属性 。
7.2.1 框架设置标签 frameset
一、水平 /垂直分割窗口属性 rows/cols
1．格式,
<frameset rows="值 1,值 2,...值 n">
<frameset cols="值 1,值 2,...值 n">
2．说明,
⑴ rows说明窗口横向分隔情况,cols说明纵
向分隔。
⑵ 各参数值之间用逗号分隔，依次表示各个
子窗口的高度（宽度）。
⑶ rows和 cols可以用 数字、百分比或剩余值以及这
三种方式的混合 来表示,
① 数字,表示子窗口高度（宽度）所占的像素点数。
② 百分比, %”：表示子窗口高度（宽度）占整个浏
览器窗口高度（宽度）的百分比。
③ 剩余值, *” 。表示当前所有窗口设定之后的剩余
部分。当符号 *只出现一次，即其他子窗口的大小都
有明确定义时，表示该子窗口的大小将根据浏览器窗
口的大小而自动调整。当符号 *出现一次以上时，表
示按比例分割浏览器窗口的剩余空间。
例如 1,<frameset cols="40%,2*,*">
表示将浏览器窗口分割为 3列,
第一个子窗口在第一列，窗口宽度为整
个浏览器窗口宽度的 40%；
第二个子窗口在第二列，占浏览器窗口
剩余空间的 2/3，即其宽度为整个浏览器
窗口宽度的 40%；
第三个子窗口占剩余空间的 1/3，宽度为
整个浏览器窗口宽度的 20%。
例如 2：横向与纵向同时分割
<HTML>
<HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
<FRAME name="TopRight" src="green.htm">
<FRAME name="BotLeft" src="blue.htm">
<FRAME name="BotRight" src="white.htm">
</FRAMESET>
</HTML>
例如 3：嵌套分割
＜ FRAMESET rows="105,*“＞
＜ FRAME name="adbanner" src="ad.html"＞
＜ FRAMESET cols="40%,60%"＞
＜ FRAME name="left" src="red.htm"＞
＜ FRAMESET rows="*,*"＞
＜ FRAME name="top" src="blue.htm"＞
＜ FRAME name="bottom" src="white.htm"＞
＜ /FRAMESET＞
＜ /FRAMESET＞
＜ /FRAMESET＞
二、设置窗口架框宽度属性 border
在 <frameset>标签中，可运用 border属性 控制分
割窗口的框架的宽度,其语法如下所示,
<frameset border="数值 ">
其中的数值代表此窗口框架的宽度，单位为像素。
三、设置边框颜色属性 bordercolor
在 <frameset>标签中，可运用 bordercolor属性
设置边框的颜色,其语法如下所示,
<frameset bordercolor="#">
其中的 #代表此边框的颜色，取值可为 RGB代码。
四、设置框架隐藏属性 frameborder
frameborder属性用于 控制窗口框架四周，
是否显示框架 。此属性可使用在 <frameset>标签与
<frame>标签中，使用在 <frameset>标签内时，可控
制窗口框架的所有子窗口。使用在 <frame>标签时，
则仅能控制该标签所代表的子窗口，其语法为,
<frmaeset frameborder=0或 1>
0代表不显示框线,1代表显示框线，其默认
值为 1。
7.2.2 子窗口设置标签 frame
?每个子窗口均由 <frame>标签定义
?<frame>是单个的标签，使用时，将它写在
<frameset>的开始和结束标签之间，它 主要有六
个属性,src,name,marginwidth、
marginheight,scrolling和 noresize。
1,src属性
src属性是用于 指定要导入到该子窗口的 HTML文件,
其语法如下所示,
<frame src="url">
如果一个 <frame>标签中没有 src属性，则该窗口
显示为空。
2,name属性
name属性是用来 指定窗口的名称,此属性是可选
的。当完成定义子窗口的名称后，我们便可在超
链接中，指定显示网页的子窗口。其语法如下所
示,
<frame name="子窗口名称 ">
3,scrolling属性
scrolling属性用于描述该窗口 是否有滚动条 。
该属性是可选的。其设置语法如下,
<frame scrolling=yes 或 no 或 auto>
各设置值所代表的意义依序为显示、不显示、
自动设置，默认值是 auto。
4,noresize属性
noresize 属性是一个标志，没有取值。它说
明浏览者 是否可以自行用鼠标调整窗口的大小 。如
果设定了 noresize属性，则窗口不能调整。如果默
认，则可以自行调整窗口的大小。
5．设置边距属性 marginwidth /marginheight
marginwidth属性,用来控制窗口内显示的内
容与窗口左右边缘的距离,该属性是取一个像
素值，默认为 1，该属性是可选的。
marginaheight属性,用来控制窗口内显示的
内容与上下边缘的距离,该属性是取一个像素
值，默认为 1，该属性是可选的。
综合示例
对于框架网页中的超链接，可用 target属性指
定该链接的内容在哪个窗口显示。
7.3 FRAME间的链接
分析第一个例子
?如在文件 ex7-01.html中，放置文件的功能是由下面的
代码片段实现的,
<frame name="windows1" src="ex7-01-1.html" scrolling=auto>
<frame name="windows2" src="ex7-01-2.html">
?在文件 ex7-1-01.html中，放置文件的功能是由下面的
代码片段实现的,
<p>1.<a href="ex7-01-3.html" target="windows2">春望 </a> </p>
<p>2.<a href="ex7-01-4.html" target="windows2">春晓 </a> </p>
target属性
?用 target属性指定的目标 窗口名称，必须使用字母 /
数字字符，否则窗口名将被忽略 。
?有几个 特定的窗口 名例外，这几个窗口名有特殊含义，
它们是 _blank,_self,_parent和 _top。
⑴ target="_blank"
当将 target属性设置为 _blank时，若单击超链接后，
将打开一个新窗口来显示网页。
⑵ target="_self"
当将 target属性设置为 _self时，则将在同一窗口中显
示链接的网页。
target属性
⑶ target="_parent"
当将 target属性设置为 _parent时，若单击超链接后，
该链接网页将导入目前子窗口的上一层框架。若没有
上层，则导入在同一窗口中。
⑷ target="_top"
当将 target属性设置为 _top时，则将脱离目前的窗口
框架，在最上层的窗口框架中，显示链接的网页。
示例,
Home.html文件
<HTML><HEAD></HEAD>
<FRAMESET cols="180,*">
<FRAME src="menu.html">
<FRAME name="content" src="main.htm">
</FRAMESET>
</HTML>
Menu.html文件
<HTML>
<BODY>
<A href="mission.htm" target="content">Our mission</A><P>
<A href="staff.htm" target="content">Our staff</A><P>
<A href="splash.htm" target="_parent">FrommCo splash page</A>
</BODY>
</HTML>
?在一个页面中直接引入另一个页面，这种技术称为
浮动的窗口（ Floating frame）。在 HTML中通过
iframe标签实现。
?其语法如下所示,
<Iframe src="URL,name="子窗口名称 " width="x"
height="x" scrolling="[OPTION]"
frameborder="x,marginheight=0 marginwidth=0 >
</iframe>
其中 #=初始页面的 URL。
7.4 浮动窗口
属性说明,
src,文件的路径，既可是 HTML文件，也可以是文本、
ASP、以及 GIF,JPEG,JPG,PNG等图片文件；
width,height,"画中画 "区域的宽与高；
scrolling:当 SRC的指定的 HTML文件在指定的区域显
示不完时，滚动选项，如果设置为 NO，则不出现滚动
条；如为 Auto：则自动出现滚动条；如为 Yes，则显
示 ;
FrameBorder,区域边框的宽度，为了让, 画中画
,与邻近的内容相融合，常设置为 0。
Name,子窗口名称
Marginheight,marginwidth, 指定文字与边界的
距离
父窗体与浮动帧之间的相互控制
? Iframe的窗口我们称之为父窗体，而浮
动帧则称为子窗体
? 通过窗口名来互相控制
7.1 窗口框架简介
7.2 窗口框架控制
7.3 FRAME间的链接
7.4 浮动窗口
7.1 窗口框架简介
7.1.1 什么是窗口框架
?窗口框架可用于 将窗口画面分割成多个
小窗口,且每个小窗口中，可以显示不同
的网页,达到在浏览器中同时浏览多个不
同网页的效果 。
7.1.2 窗口框架的基本结构
Frameset结构的基本格式
<frameset>
<frame src="url,name=“w1”>
<frame src="url,name=“w2”>
,.,
<NOFRAMES>,.,</NOFRAMES>
</frameset>
在介绍窗口框架文档之前，先来看看其应用实例，
有一个感性认识，见下图。
包含 Frameset结构的 HTML文件
文件 ex7-01.html的源代码
<html>
<head>
<title>窗口框架文档 </title>
</head>
<frameset cols="179,*">
<frame name="windows1" src="ex7-01-1.html" scrolling=auto>
<frame name="windows2" src="ex7-01-2.html">
<NOFRAMES> 你的浏览器不支持带框架的网页 </NOFRAMES>
</frameset>
</html>
说 明
?<frameset>标签用于定义一个窗口框架
?<frame>标签则用于定义窗口框架中的子窗口
?窗口框架文档的书写格式与一般的 HTML文档的书
写格式相同，只是 用 <frameset>代替 <body>标签,
<frameset>是一个成对标签，有开始和结束标签，
在 <frameset>标签内使用了另一个标签 <frame>，用
它来指定每一个窗口的内容。
7.1.3 窗口框架的分割方式
窗口框架的分割方式可分为两种，
一种是水平分割 (rows属性 )，另一种是
垂直分割 (cols属性 )。
7.2 窗口框架控制
?<frameset>是成对标签,首标签 <frameset>和尾
标签 </frameset>之间的内容是 HTML文档主体部分。
?使用框架的 HTML文档中不能出现 <body>标签,否
则会导致 web浏览器忽略所有的框架定义而只显示
<body>和 </body>之间的内容。
?<frameset>标签主要有 rows,cols,border、
bordercolor和 frameborder五个属性 。
7.2.1 框架设置标签 frameset
一、水平 /垂直分割窗口属性 rows/cols
1．格式,
<frameset rows="值 1,值 2,...值 n">
<frameset cols="值 1,值 2,...值 n">
2．说明,
⑴ rows说明窗口横向分隔情况,cols说明纵
向分隔。
⑵ 各参数值之间用逗号分隔，依次表示各个
子窗口的高度（宽度）。
⑶ rows和 cols可以用 数字、百分比或剩余值以及这
三种方式的混合 来表示,
① 数字,表示子窗口高度（宽度）所占的像素点数。
② 百分比, %”：表示子窗口高度（宽度）占整个浏
览器窗口高度（宽度）的百分比。
③ 剩余值, *” 。表示当前所有窗口设定之后的剩余
部分。当符号 *只出现一次，即其他子窗口的大小都
有明确定义时，表示该子窗口的大小将根据浏览器窗
口的大小而自动调整。当符号 *出现一次以上时，表
示按比例分割浏览器窗口的剩余空间。
例如 1,<frameset cols="40%,2*,*">
表示将浏览器窗口分割为 3列,
第一个子窗口在第一列，窗口宽度为整
个浏览器窗口宽度的 40%；
第二个子窗口在第二列，占浏览器窗口
剩余空间的 2/3，即其宽度为整个浏览器
窗口宽度的 40%；
第三个子窗口占剩余空间的 1/3，宽度为
整个浏览器窗口宽度的 20%。
例如 2：横向与纵向同时分割
<HTML>
<HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
<FRAME name="TopRight" src="green.htm">
<FRAME name="BotLeft" src="blue.htm">
<FRAME name="BotRight" src="white.htm">
</FRAMESET>
</HTML>
例如 3：嵌套分割
＜ FRAMESET rows="105,*“＞
＜ FRAME name="adbanner" src="ad.html"＞
＜ FRAMESET cols="40%,60%"＞
＜ FRAME name="left" src="red.htm"＞
＜ FRAMESET rows="*,*"＞
＜ FRAME name="top" src="blue.htm"＞
＜ FRAME name="bottom" src="white.htm"＞
＜ /FRAMESET＞
＜ /FRAMESET＞
＜ /FRAMESET＞
二、设置窗口架框宽度属性 border
在 <frameset>标签中，可运用 border属性 控制分
割窗口的框架的宽度,其语法如下所示,
<frameset border="数值 ">
其中的数值代表此窗口框架的宽度，单位为像素。
三、设置边框颜色属性 bordercolor
在 <frameset>标签中，可运用 bordercolor属性
设置边框的颜色,其语法如下所示,
<frameset bordercolor="#">
其中的 #代表此边框的颜色，取值可为 RGB代码。
四、设置框架隐藏属性 frameborder
frameborder属性用于 控制窗口框架四周，
是否显示框架 。此属性可使用在 <frameset>标签与
<frame>标签中，使用在 <frameset>标签内时，可控
制窗口框架的所有子窗口。使用在 <frame>标签时，
则仅能控制该标签所代表的子窗口，其语法为,
<frmaeset frameborder=0或 1>
0代表不显示框线,1代表显示框线，其默认
值为 1。
7.2.2 子窗口设置标签 frame
?每个子窗口均由 <frame>标签定义
?<frame>是单个的标签，使用时，将它写在
<frameset>的开始和结束标签之间，它 主要有六
个属性,src,name,marginwidth、
marginheight,scrolling和 noresize。
1,src属性
src属性是用于 指定要导入到该子窗口的 HTML文件,
其语法如下所示,
<frame src="url">
如果一个 <frame>标签中没有 src属性，则该窗口
显示为空。
2,name属性
name属性是用来 指定窗口的名称,此属性是可选
的。当完成定义子窗口的名称后，我们便可在超
链接中，指定显示网页的子窗口。其语法如下所
示,
<frame name="子窗口名称 ">
3,scrolling属性
scrolling属性用于描述该窗口 是否有滚动条 。
该属性是可选的。其设置语法如下,
<frame scrolling=yes 或 no 或 auto>
各设置值所代表的意义依序为显示、不显示、
自动设置，默认值是 auto。
4,noresize属性
noresize 属性是一个标志，没有取值。它说
明浏览者 是否可以自行用鼠标调整窗口的大小 。如
果设定了 noresize属性，则窗口不能调整。如果默
认，则可以自行调整窗口的大小。
5．设置边距属性 marginwidth /marginheight
marginwidth属性,用来控制窗口内显示的内
容与窗口左右边缘的距离,该属性是取一个像
素值，默认为 1，该属性是可选的。
marginaheight属性,用来控制窗口内显示的
内容与上下边缘的距离,该属性是取一个像素
值，默认为 1，该属性是可选的。
综合示例
对于框架网页中的超链接，可用 target属性指
定该链接的内容在哪个窗口显示。
7.3 FRAME间的链接
分析第一个例子
?如在文件 ex7-01.html中，放置文件的功能是由下面的
代码片段实现的,
<frame name="windows1" src="ex7-01-1.html" scrolling=auto>
<frame name="windows2" src="ex7-01-2.html">
?在文件 ex7-1-01.html中，放置文件的功能是由下面的
代码片段实现的,
<p>1.<a href="ex7-01-3.html" target="windows2">春望 </a> </p>
<p>2.<a href="ex7-01-4.html" target="windows2">春晓 </a> </p>
target属性
?用 target属性指定的目标 窗口名称，必须使用字母 /
数字字符，否则窗口名将被忽略 。
?有几个 特定的窗口 名例外，这几个窗口名有特殊含义，
它们是 _blank,_self,_parent和 _top。
⑴ target="_blank"
当将 target属性设置为 _blank时，若单击超链接后，
将打开一个新窗口来显示网页。
⑵ target="_self"
当将 target属性设置为 _self时，则将在同一窗口中显
示链接的网页。
target属性
⑶ target="_parent"
当将 target属性设置为 _parent时，若单击超链接后，
该链接网页将导入目前子窗口的上一层框架。若没有
上层，则导入在同一窗口中。
⑷ target="_top"
当将 target属性设置为 _top时，则将脱离目前的窗口
框架，在最上层的窗口框架中，显示链接的网页。
示例,
Home.html文件
<HTML><HEAD></HEAD>
<FRAMESET cols="180,*">
<FRAME src="menu.html">
<FRAME name="content" src="main.htm">
</FRAMESET>
</HTML>
Menu.html文件
<HTML>
<BODY>
<A href="mission.htm" target="content">Our mission</A><P>
<A href="staff.htm" target="content">Our staff</A><P>
<A href="splash.htm" target="_parent">FrommCo splash page</A>
</BODY>
</HTML>
?在一个页面中直接引入另一个页面，这种技术称为
浮动的窗口（ Floating frame）。在 HTML中通过
iframe标签实现。
?其语法如下所示,
<Iframe src="URL,name="子窗口名称 " width="x"
height="x" scrolling="[OPTION]"
frameborder="x,marginheight=0 marginwidth=0 >
</iframe>
其中 #=初始页面的 URL。
7.4 浮动窗口
属性说明,
src,文件的路径，既可是 HTML文件，也可以是文本、
ASP、以及 GIF,JPEG,JPG,PNG等图片文件；
width,height,"画中画 "区域的宽与高；
scrolling:当 SRC的指定的 HTML文件在指定的区域显
示不完时，滚动选项，如果设置为 NO，则不出现滚动
条；如为 Auto：则自动出现滚动条；如为 Yes，则显
示 ;
FrameBorder,区域边框的宽度，为了让, 画中画
,与邻近的内容相融合，常设置为 0。
Name,子窗口名称
Marginheight,marginwidth, 指定文字与边界的
距离
父窗体与浮动帧之间的相互控制
? Iframe的窗口我们称之为父窗体，而浮
动帧则称为子窗体
? 通过窗口名来互相控制
