8. 多框架页面的创建
8.1 框架概念
框架是由单个框架加上框架集构成的区域。
每个框架是指页面中一个独立额区，框架集是一个关于框架结构的页面，定义本页面的框架数、大小、布局以及框架之间的相互关系。
8.2 框架集标记
框架集文件保存了所有框架的信息，例如设定框架的布局，水平框架与垂直框架的数目、尺寸、名称等。
框架集标记<frameset>语法格式如下：
<frameset>
<frame>
......
</frameset>
<frameset>标记的rows属性用来将浏览器分割成为上下窗口。rows属性值是一个以逗号分开的长度值列表，单位是像素或百分比。
<frameset rows=”60,*”>
<frameset>标记的cols属性用来将浏览器分割成为左右窗口。cols属性是一个以逗号分开的长度值列表，单位是像素后者百分比。
例如：
<frameset cols=”20%,*”>
<frame name=”left “ src=”**” scrolling=”auto”>
<frame name=”right“ src=”**” scrolling=”auto”>
</frameset>
8.3 框架标记
框架标记<frame>的作用是定义框架网页的内容，例如框架名称、框架对应的框架页面文件、滚动条等。
每个框架对应一个网页，这个网页称为框架页面。
格式如下：
<frame name=”” src=”” scrolling=”” frameborder=””>
name属性用来命名框架名称。src属性用于指定框架页面对应的HTML页面文件。scrolling属性用来设定框架空间不够用时，是否显示滚动条，yes表示“显示滚动条”，no表示“不显示滚动条”，auto表示“根据页面的长度自动判断是否显示滚动条”。frameborder属性用来设定是否显示边框，0表示不显示边框，1表示显示边框，默认的情况是0。
由于框架中的内容有时较少，不需要滚动条就可以全部显示，因此滚动条有时会显示灰色，表示不可用的状态。
8.4 无框架标记
目前市场上浏览器的种类众多，并非每一种浏览器都支持框架结构。考虑到这类用户，HTML还提供了无框架标记<noframes>。当浏览器不能正常加载框架标记<frameset>时，浏览器就会检测到<noframes>标记。并显示其中内容。
框架结构如下：
<frameset rows=”60,*”>
<frame>
<frame>
......
<noframes>
<body>
......
</body>
</noframes>
</frameset>
8.5 框架之间的信息交互
虽然多框架页面中的各个框架页面是相互独立的HTML文档，但是编程人员可以利用为框架命名的方式使框架间产生一定的相互关系，其中最常用的就是框架间的链接关系。
要实现框架间信息的交互，首先要在编写框架集文件是命名相关框架。
<frame name=”top” src=”**” scrolling=”auto” >
......
<frame name=”left” src=”**” scrolling=”auto” >
<frame name=”right” src=”**” scrolling=”auto” >
这些源码是将上部框架命名为“top”，左下侧框架命名为“left”，右下侧框架命名为“right”。命名完成后，在先关的超链接中进行改动，将其超链接标记<a>的target属性赋值为目标框架的名称。
<h2><a href=”**” target=right>天鹅</a></h2>
实例：
本例定义一个整个页面的框架集文件，3个框架文件，2个连接文件
1.html
<html>
<head>
<title>使用框架实例</title>
</head>
<frameset rows="60,*">
<frame name="top" src="top.html" scrolling="auto">
<frameset cols="20%,*">
<frame name="left" src="left.html" scrolling="auto">
<frame name="right" src="right1.html" scrolling="auto">
</frameset>
<noframeset>
<body>
<p>此网页使用了框架，但是浏览器不支持</p>
</body>
</noframeset>
</frameset>
</html>
top.html
<html>
<head>
<title>上侧框架</title>
</head>
<body>
<h1><center>动物园简介</center></h1>
</body>
</html>
leht.html
<html>
<head>
<title>左侧框架</title>
</head>
<body>
<br>动物园里，你最喜欢哪个动物？：
<h2><a href="right1.html" target=right>狮子</a></h2>
<h2><a href="right2.html" target=right>老虎</a></h2>
<h2><a href="right3.html" target=right>大象</a></h2>
</body>
</html>
right1.html
<html>
<head>
<title>右侧框架</title>
</head>
<body>
<h2><br><br>狮子:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>
right2.html
<html>
<head>
<title>右侧框架</title>
</head>
<body>
<h2><br><br>老虎:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>
right3.html
<html>
<head>
<title>右侧框架</title>
</head>
<body>
<h2><br><br>大象:<br><br></h2>
dhuialhdulahdliashfa
lshdsdfjklfhsaldjkdflhalskjhf
</body>
</html>