一、什么是框架?
1、它可以用来向浏览器窗口中加载多个HTML文件;
2、每个HTML文件占据一个框架,多个框架同时显示在同一个浏览器窗口中,组成了一个最大的框架,就是一个包含多个HTML文档的HTML文件(称为主文档);
3、框架通常的使用方法是在一个框架中放置目录(即加入一系列链接),当点击链接以后在另一个框架中显示被链接的HTML文件。
二、<frameset>标签
1、作用:定义主文档中有几个框架并且各个框架是如何排列的,可以嵌套使用;
2、它具有rows和cols属性,使用<frameset>标签时这两个属性至少必须选择一个,否则浏览器只显示第一个定义的框架,剩下的一概不管,<frameset>标签对也就没任何作用了。
3、使用标签时必须放置于<body>标签以外,通常置于<head></head>标签对后。
三、rows和cols
1、分别用来确定各个子窗口的高度和宽度;
2、格式:
<frameset rows="值1, 值2, ......值n">;
<frameset cols="值1, 值2, ......值n">
3、说明:
1)各个参数之间以逗号分隔,依次表示各个子窗口的高度(宽度);
2)属性取值可以用:
数字:子窗口;
百分数:子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比;
符号“*”:当符号*只出现一次。即其他子窗口的大小都有明确定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间。例如:
<frameset cols="30%, *, *"> 表示将浏览器窗口分割为3列,第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的30%,剩下的空间平均分配给另外两个子窗口。
四、<frame>标签
1、放在<frameset></frameset>之间,用力啊标识子窗口;
2、在<frameset>中定义了多少个子窗口就要有多少个<frame>标签与之匹配,依次定义各个窗口的性质,也可以在本该使用该标签的地方使用<frameset></frameset>标签对,来嵌套使用框架;
3、<frame>标签的src和name属性是必须赋值的。
1)src:子窗口的源HTML文件名,浏览器在初始打开时将会在此窗口显示src指定的HTML文件,而后可以改变显示的HTML文件;
2)name:定义子窗口的名字,这个名字是用来供超文本链接标签<a href="" target="">中的target属性用来指定链接的HTML文件将显示在哪一个子窗口中。
3)frameborder:设置子窗口边框。取值为1(默认)或0。
4)scrolling:设置子窗口滚动条。取值为yes、no、auto(默认)。
5)noresize:禁止用户调整子窗口的大小。如<frame noresize>。
五、跳出主文档
通过<a href="" target="_parent">方式可以跳出框架到href指定页面。
六、举例
1、代码:
frameset.html
外层框架有一行,两列,就是说有两个子窗口,高度都占100%,第一个子窗口宽度占15%,第二个子窗口占剩余部分,然后又在第二个子窗口加入了一个框架,这个框架里有两个子窗口,宽度都占100%,第一个子窗口高度占10%,第二个子窗口占剩余部分,也就是说此时浏览器共可以显示三个HTML文档。三个子窗口都指定了初始HTML文档。
<head>
<title> frameset.html </title>
</head>
<frameset cols="15%, *" rows="100%">
<frame frameborder="1" src="content.html" name="content">
<frameset cols="100" rows="10%, *">
<frame frameborder="1" scrolling="no" src="info.html" name="info">
<frame frameborder="1" src="welcome.html" name="show">
</frameset>
</frameset>
<body>
</body>
content.html
显示目录的HTML文档,共有三个网页,通过超链接的方式均显示在名称为show的子窗口。
<head>
<title> content.html </title>
</head>
<body>
<center> <h2> 目录 <br>
<a href="1.html" target="show"> 第一个网页 </a> <br>
<a href="2.html" target="show"> 第二个网页 </a> <br>
<a href="3.html" target="show"> 第三个网页 </a> <br>
</h2> </center>
</body>
info.html
显示网站信息的网页,还可以跳出该主文档。
<head>
<title> info.html </title>
</head>
<body>
<h3> 制作人:寒leng的锋 <br> <br>
点击<a href="main.html" target="_parent">这里</a>跳出主文档
</h3>
</body>
welcome.html
<head>
<title> welcomt.html </title>
</head>
<body>
<h2> 欢迎进入 寒leng的锋 制作网站 </h2>
</body>
main.html
<head>
<title> main.html </title>
</head>
<body>
<h2> <center> 首页 </center> </h2>
</body>
1.html
<head>
<title> 1.html </title>
</head>
<body>
<h2> 第一个网页 </h2>
</body>
2.html
<head>
<title> 2.html </title>
</head>
<body>
<h2> 第二个网页 </h2>
</body>
3.html
<head>
<title> 3.html </title>
</head>
<body>
<h2> 第三个网页 </h2>
</body>
2、运行结果:
图一 首次进入frameset.html网页内容
图二 点击第二个网页的超链接后显示结果
图三 跳出框架进入main.html页面