通过 frameset 标签创建网页框架 -

zendj

浏览: 121952 次
性别:
来自: 深圳

最近访客更多访客>>

Fri丶独行侠

rinsing8812

xpenxpen

wellerpound

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (183)

社区版块

存档分类

通过 frameset 标签创建网页框架

框架浏览器 HTML IE

网页的框架可以生成独立变化和滚动的窗口，从而能将一张网页分割为若干个子窗口,每一个窗口可分别载入不同的 html 文件，而且每个窗口又可以相互沟通。讲到这里，大家是不是已经迫不及待的想要掌握这个技巧了？现在让我们一起从基本语法开始学起吧！
一、基本结构
html使用<Frameset>、<Frame>和<noFrames>标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。
1、 <Frameset> 标签
该标签是框架设计标签，属于双标签，首尾标签之间的内容就是使用到框架的 html 主体部分，以该标签代替的 <body> 标签，也就是说在使用了 <frameset> 标签的框架html文档中再不能出现<body>标签，否则会导致浏览器忽略所有的框架定义而只显示<body>和</body>之间的内容了。
<Frameset> 标签作用是将页面分割为若干个子窗口，子窗口的数目取决于嵌套在该标签中 <Frame> 标签的数目。 <Frameset>标签有两个属性，分别是 rows(使子窗口垂直排列并决定子窗口的高度) 和 cols（使子窗口水平排列并决定子窗口的宽度），请看下面的实例：
<Frameset rows="值1,值2,……值n">
<Frameset cols="值1,值2,……值n">
实例解析：
（1）各参数之间以逗号分割，依次表示各个子窗口的高度（宽度）。这两个属性的参数值可以是数字、百分数或符号“*”；
(2) 数字: 表示子窗口高度或宽度所占的像素点数;
(3) 百分数: 表示子窗口高度或宽度占整个浏览器窗口高度或宽度的百分比;
(4) 符号“*”(星号): 当符号*只出现一次。即其他子窗口的大小都有明确的定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。例如： <Frameset cols="40%,2*,*"> 表示将浏览器窗口分割为3列，第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%；第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%，第三个子窗口占剩余空间的1/3，宽度为整个浏览器窗口宽度的20%。
2、 <frame> 标签： html用该标签来标识子窗口，是嵌套在框架设置标签<Frameset>标签中来使用的单标签。在<Frameset>中定义了多少个子窗口就要有多少个该标签与之匹配，依次定义每个窗口的性质。该标签共有7个属性，除src属性是不可缺省的外，其他属性都是可选的，请看下面的实例：
<frameset cols="*,*">
<frame src="a.htm" name="abc" frameborder="1" bordercolor="#FFCC08" sclling="auto" maginwidth="3" marginwidth="3">
<frame src="b.htm" name="def" frameborder="1" bordercolor="#FFCC08" sclling="auto" maginwidth="3" marginwidth="3">
</frameset>
实例解析：
（1）上例是利用 cols="*,*" 这一属性把页面平均分成了左右两个子窗口；
（2） src 属性: 用以定义子窗口文件的文件名；
（3） name属性：用于定义子窗口的名称；
（4） frameborder 属性：该属性的参数值为1或0。当参数值为1时，表示该子窗口有边框，为0时没有边框，其缺省值为1;
（5） bordercolor属性：用以设置子窗口的边框颜色，如果在一个以上的<frame>标签中定义了子窗口的边框颜色，则以第一次指定的颜色为标准，在指定边框颜色时，可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词，bordercolor属性的参数值可以是16种颜色中的任意一种；
（6） sclling属性：属性的参数值为yes,no或auto之一，参数值为yes时表示该子窗口始终有滚动条，为no时是始终没有滚动条，为auto时表示当文档的内容超出窗口范围时，浏览器自动为该子窗口添加滚动条，该属性的缺省值为auto；
（7） maginwidth和maginheight属性：这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的，其中maginwidth属性用于确定显示内容与左右边界之间的距离；maginheight用来确定显示内容与上下边界之间的距离，这两个属性的参数值都是数字，分别表示左右边距所占的像素点数。

3 <noframes>标签，使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。<noframes>标签是双标签，首尾标签之间的内容就是告之浏览者的信息，虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性，我们最好还是养成使用这个标签的习惯。
4、框架页面的基本格式
我们已经很全面的了解了框架窗口中所必需的条件，那么现在可以建立一个基本的框架页面了，请看下面的例子：
<html>
<head>
<title>我建立的第一个多窗口页面</title>
</head>
<Frameset Cols="*,*,*"> 把页面平均分成三个水平排列的窗口。
<Frame src="1.htm">
<frame src="2.htm">
<frame src="3.htm">
</Frameset>
<noframes>您的浏览器是不支持框架结构的。</noframes>
</html>
其中，<frameset>标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如：
<html>
<Frameset cols="30%,90,*">
<frame src="1.htm"name=cont>
<frameset rows="*,*">
<frame src="x.gif">
<frame src="y.gif">
</frameset>
<frame src="2.html">
</frameset>
</frameset>
<noframes>您使用的浏览器不支持框架。</noframes>
</html>
二、各子窗口的交叉链接
为了方便用户进行搜索和浏览，我们经常用到一系列链接组成的索引目录显示在一个子窗口中，而将链接所指向的内容放在另一个子窗口中。显示链接的子窗口通常被称为“源窗口”，显示目标文档的窗口则称之为“目标窗口”。在进行交叉连接时，我们必须先用<frame>标签的name属性定义目标窗口的名称，然后再修改显示在源窗口中的文档。在所有的<a>标签中添加语句target="目标窗口名称"来指定目标文档的显示位置,具体实现方法请看下面的例子：
<html>
<head>
<title>目标窗口测试页</title>
</head>
<frameset cols="*,*">
<frame src="1.htm" marginheight="60">
<frame src="aa.jpg" name="abcd" marginheight="60">
</frameset>
<noframes>您的浏览器不支持框架结构</noframes>
</html>
实例解析:
（1）上例中我们把页面平均分成了左右两个子窗口,其中左边的子窗口内显示出 1.htm 中的内容，同时我们把 1.htm做为主窗口；
（2）右边的窗口是目标窗口，在调用其他页面在这里显示之前首先使之显示一幅名为 aa.jpg 的图片，注意我们把这个窗口名设置为 “abcd”，这个窗口名非常重要，此后我们将在 1.htm 中的各链接中均要用到。
下面我们再来看一下 1.htm 这个主窗口中的链接是如何处理的：
<html>
<body>
<center>
<a href="田园风光.jpg" target="abcd">田园风光</a>
<a href="qiu.jpg" target="abcd">金色秋天</a>
<a href="good.htm" target="abcd">开心一刻</a>
<a href="pig.gif" target="abcd">夕阳无限</a>
</body>
</html>
实例解析：
上例中设置了四个链接，其中有一个网页和三张图片都将在点击相应的链接后显示在目标窗口中，在这里最需要注意的就是 target="abcd" 这个属性，它决定了文件将在窗口名为 "abcd"的窗口中显示。那么如果让这四个链接分别在四个窗口中显示出来的话是不是也很容易了呢?