本文详细介绍了HTML中的框架技术，包括框架的作用、框架集、左右和上下分割窗口、嵌套分割窗口以及相关属性的使用，如cols、rows、framespacing、bordercolor等。此外，还讲解了浮动框架<IFRAME>的使用和链接在框架中的应用。
网页框架标记
什么是框架
如果网页的各部分为相互独立的网页，又由一个网页将这些分开的网页组成一个完整的网页，显示于浏览者的浏览器中，重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的框架的页面，其它子页面保持不变，必然会给浏览者带来方便，节约时间。
框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便地完成导航工作，而且各个框架之间决不存在干扰问题，所以框架技术一直普遍应用于页面导航。
使用框架网页最主要的目的是创建链接的结构。导航条被放置于一个框架之中，可以单击导航条向服务器请求网页，链接的网页出现在另外的框架中，而导航栏所在的网页不发生变化。这就好比是看电视时使用遥控器，电视画面出现在电视机中。不管显示在电视中的频道发生怎样的变化，手中的遥控器不会变化。
同时框架网页还可以免除浏览器来回滚动窗口。如果网页中的内容部分很长，浏览者拖动滚动条到了页面底部后要切换到别的页面，可以不必再拖动滚动条返回页面顶部，因为导航条在另外的框架中，并不受内容框架的影响。
框架集标记<frameset>
框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义的一组框架结构的html网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。
如下代码是基本的页面代码:
<html>
<head>
<title>基本框架代码<title>
</head>
<frameset>
<frame>
<frame>
……
</frameset>
</html>
在使用了框架集的页面中，页面的<body>标记被<frameset>标记所取代，然后通过<frame>标记定义每一个框架。下面按照框架的分割方式来介绍框架集标记。主要的分割方式有以下三种：
◦左右分割窗口
◦上下分割窗口
◦嵌套分割窗口
左右分割窗口属性cols
在水平的方向，浏览器可以被分割成多个窗口，这需要使用到框架的左右分割窗口属性cols。
基本语法
<frameset cols="value，vaue，……">
<frame>
<frame>
……
</frameset>
语法解释
value为定义各个框架的宽度值，单位可以是像素，也可以是百分比。
<html>
<head>
<title>左右分割窗口</title>
</head>
<frameset cols="30%,70%">
<frame>
<frame>
</frameset><noframes></noframes>
</html>
上下分割窗口属性rows
在垂直的方向，浏览器可以被分割成多个窗口，这需要使用到框架的上下分割窗口属性rows。
基本语法
<frameset rows="value，value，……">
<frame>
<frame>
……
</frameset>
语法解释
value为定义各个框架的宽度值，单位可以是像素，也可以是百分比。
<html>
<head>
<title>上下分割窗口</title>
</head>
<frameset rows="20%,60%,∗">
<frame>
<frame>
<frame>
</frameset><noframes></noframes>
</html>
嵌套分割窗口
如果希望在同一个浏览器窗口中，将其既按照行来分割，又按照列来分割，这种框架称为嵌套框架。
基本语法
<frameset rows="value,value,……">
<frame>
<frameset cols="value,value,……">
<frame>
<frame>
……
</frameset>
<frame>
……
</frameset>
语法解释
上述代码先将框架按照行进行上下分割，然后在第二个框架中进行按照列的左右分割。
<frameset cols="20%,*">
<frame>
<frameset rows="20%,*">
<frame>
<frame>
</frameset>
</frameset><noframes></noframes>
框架集边框宽度属性framespacing
通过这个属性，能够设定框架集的边框宽度。
基本语法
<frameset framespacing="value">
<frameset cols="20%,∗" framespacing=15>
<frame>
<frameset rows="20%,∗">
<frame>
<frame>
</frameset>
</frameset><noframes></noframes>
框架集边框颜色属性bordercolor
通过这个属性，能够设定框架集边框颜色。
基本语法
<frameset bordercolor="color＿value">
框架页面源文件属性src
每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过<frame>标记可以定义框架页面的内容。通过src属性设置框架显示的文件路径。
基本语法
<frame src="file_name">
<frameset cols="50%,50%">
<frame src=default.html>
<frame src=index.html>
</frameset><noframes></noframes>
框架名称属性name
我们可以为每一个链接命名，所起的名称将被用于页面的链接和脚本描述，所以框架的命名有一定的规则，框架名称必须是单个单词，可以使用下划线(＿)，但不允许使用连字符(–)、句号(。)和空格。框架名称必须以字母开始。框架名称区分大小写。不要使用JavaScript中的保留字(例如top或navigator)作为框架名称。
基本语法
<frame src="File_name" name="frame_name">
框架边框显示属性frameborder
框架的显示情况根据其所属框架集的设定而决定，也就是说该框架继承其框架集的边框属性。
基本语法
<frame src="File_name" frameborder="value">
语法解释
value取值为0或1，0为不显示边框，1为显示边框。
框架滚动条显示属性scrolling
当框架内的空间不够显示页面的内容时，可以通过滚动条来实现页面的滚动，使用户看到隐藏的内容。这个属性可以设定滚动条是否显示。
基本语法
<frame src="File_name" scrlling="value">
框架滚动条显示属性值
scrolling属性值 描述
yes 显示滚动条
no 不显示滚动条
auto 根据页面的长度自动判断是否显示滚动条
框架尺寸调整属性NORESIZE
浏览带有框架的页面时，有时框架的尺寸是可以改变的，而有些则不可以。这主要是由noresize属性来控制。
基本语法
<frame src="File_name" noresize>
语法解释
noresize代表禁止改变框架的尺寸大小
框架边缘宽度属性MARGINWIDTH
html页面有其页边距设定，框架与页面一样，也存在者框架边距。通过marginwidth能够设定框架的左右边缘宽度。
基本语法
<frame src="File_name" marginwidth="value">
框架边缘高度属性MARGINHEIGHT
和框架的边缘宽度相似，通过marginheight属性能够设定框架的上下边缘高度。
基本语法
<frame src="File_name" marginheight="value">
不支持框架标记<NOFRAMES>
虽然框架技术是较早使用的一种导航技术，但是仍然有一些早期版本的浏览器不支持框架。对于制作人员这一现象无法改变，我们所能做的只能是显示该浏览器不支持框架技术，有些内容无法看到。使用<noframes>标记可以完成这一任务，当浏览器不能加载框架集文件时，会检索到<noframes>标记，并显示标记中的内容。
基本语法<frameset>
<frame>
<frame>
……
<noframes>
……
<noframes>
</frameset>
语法解释
放在<noframes>标记之间的部分就是在不支持框架的浏览器中显示的内容，也就是<body>标记中的内容。
浮动框架<IFRAME>
浮动框架是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容。
基本语法
<iframe src="File_url" height=value width=value name="iframe_name" align="value">
......
</iframe>
标记属性 描述
src 浮动框架中显示页面源文件的路径
width 浮动框架的宽度
height 浮动框架的高度
name 浮动框架的名称
align 浮动框架的排列方式，left居左，center居中，right居右
frameborder 框架边框显示属性
scrolling 框架滚动条显示属性
marginwidth 框架边缘宽度显示属性
marginheight 框架边缘高度显示属性
浮动框架的src属性
通过src属性设定浮动框架显示的文件路径。
基本语法
<iframe src="File_name">
<iframe src=default.jsp>
</iframe>
浮动框架的width、height属性
通过width、height属性可以设置浮动框架显示的宽度和高度。
基本语法
<iframe src="File_name" width=value height=value>
浮动框架名称属性
我们可以为每一个链接命名，所起的名称将被用于页面的链接和脚本描述，所以浮动框架的命名有一定的规则，名称必须是单个单词，允许使用下划线(＿)，但不允许使用连字符(–)、句号(。)和空格。浮动框架名称必须以字母开始，而不能以数字起始。浮动框架名称区分大小写。不要使用JavaScript中的保留字(例如top或navigator)作为浮动框架名称。
基本语法
<iframe src="File_name" name="frame_name">
浮动框架边框显示属性frameborder
通过frameborder属性，可以控制浮动框架边框是否显示。
基本语法
<iframe src="File_name" frameborder="value">
语法解释
value取值为0或1，0为不显示边框，1为显示边框。
浮动框架滚动条显示属性SCROLLING
当浮动框架内的空间不够显示页面的内容时，可以通过滚动条来实现页面的滚动，使用户看到隐藏的内容。这个属性可以设定滚动条是否显示。
基本语法
<iframe src="File_name" scrolling="value">
scrolling 描述
yes 显示滚动条
no 不显示滚动条
auto 根据页面的长度自动判断是否显示滚动条
浮动框架边缘宽度属性MARGINWIDTH
html页面有其页边距设定，框架与页面一样，也存在着框架边距。通过marginwidth能够设定框架的左右边缘宽度。
基本语法
<iframe src="File_name" marginwidth="value">
浮动框架边缘高度属性MARGINHEIGHT
和浮动框架的边缘宽度相似，通过marginheight属性能够设定浮动框架的上下边缘高度。
基本语法
<iframe src="File_name" marginheight="value">
浮动框架对齐属性ALIGN
使用align属性可以设置浮动框架的对齐，Left表示居左，Center表示居中，Right表示居右。
普通框架与链接
使用框架的一个重要目的就是不同的框架中显示不同的页面，下面介绍通过链接为框架指定显示的页面。每个链接都有一个target属性，设置不同的target属性可以使链接的页面在不同的框架或者窗口中显示。
我们来制作一个小型的框架网站，网站是左右的框架结构，左侧有三个栏目，单击三个栏目后，能够在右侧框架显示不同栏目的内容。这个网站包含以下几个页面：首页是由左右两个框架组成，称为12-22.htm页面。左侧框架的页面称为12-22-left.htm，放置页面的主导航，包含三个到栏目页面的超级链接。右侧框架放置3个栏目，分别是12-22-right-1.htm，12-22-right-2.htm，12-22-right-3.htm。在默认的情况下，首页显示右侧的第一个页面，即12-22-right-1.htm。
浮动框架与链接
在浮动框架中，也可以制作页面之间的链接。
<html>
<head>
<title>浮动框架与链接</title>
</head>
<body>
<iframe src=a.htm width=400 height=250 name="iframe" align="Center">
</iframe><p>
<center>
<a href="b.htm" target="iframe">Dreamweaver mx 2004</a><br>
<a href="c.htm" target="iframe">Fireworks mx 2004</a><br>
<a href="d.htm" target="iframe">Flash mx 2004</a>
</center>
</body>
</html>
说明：第6行嵌入的框架是a.htm，宽度为400像素，高度为250像素，名称为iframe，居中排列。第9行到第11行设定了3个链接，分别链接到b.htm、c.htm和d.htm，且链接的目标窗口都是浮动框架的名称iframe。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
