·110·
第9章  框架
网页中框架（frame）的主要作用是，将浏览器窗口分割成几个相对独立的小窗口，浏览器可以将不同网页文件同时传送到这几个小窗口，这样就可以同时浏览不同网页文件。
使用框架，可以在一个浏览器中显示出多张HTML文档，这种HTML文档被称为框架页，各张框架页都可以不同，所以各页面之间是独立的。通过本章的学习，可以了解到以下框架知识：
frameset标签用法
frame标签用法
框架分栏
框架重要属性
框架链接
框架实例
9.1  框架基本语法
框架，就是在一个浏览器中显示多个HTML页面，使用框架后，在一张网页中可以用来放置多个不同的网页。在新闻类的网站可以看到，有的广告专用一张网页来显示的，每次更新广告的时候，只需要对那张网页做修改。在本节中主要介绍框架的基本语法，如frameset、frame和框架的部分属性等。
如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。此外，一些框架型站点的模板在其页面上方放置了公司的LOGO或图片，不过这一块也是位置固定的。而页面的其他部分则可以上下左右移动。有的框架型站点模板还会在其固定区域中，放入链接或导航按钮。
框架的基本语法是由<frameset></frameset>标签对表示，标签对放在<html></html>标记对下的<head></head>后面，即与<head></head>标记对并列。如何来实现框架，全由<frameset></frameset>来设置，其内又包含<frame></frame>，用<frame></frame>标记对来表示在框架内放入什么文件，代码9.1表示框架的基本语法。
代码9.1  源代码\第9章\框架基本语法.html
<html>
<head>
<title>框架基本语法</title>
</head>
<!—设置框架-->
·111·<frameset cols="25%,50%,25%">>
<frame src ="www.hao123/">
<frame src ="www.sina/">
<frame src ="www.163/"> </frameset>
</html>
上面代码在html 中插入了框架，框架包括三个网页，分别表示了网址之家、新浪和网易的首页，在<frameset>中的cols 参数代表列，代码9.1中，表示在框架集中有三个框架且链接不同的页面，效果如图9.1所示。
图9.1  框架基本语法
这样三张网页就插入到了这个网页中的框架中，框架中的每张网页都是独立的。设置<frameset></frameset>时，必须有行和列的表示，不能空格。
注意：<frameset></frameset>在<html></html>标签内，不能与<body></body>并列，所以在网页中先去掉<body></body>，再写<frameset></frameset>标签对，以免不知道在哪出现错误。<frame>是在<frameset></frameset>标签对中的，且是单标记。
9.2  框架分栏
在网页中，有时要插入多张网页到框架中，那么对网页的分栏也很重要，如何表现使网页看起来更自然。框架分栏有垂直分栏和水平分栏。
框架分栏是网页插入多个框架的结果，多个框架放在同一个网页中，必然会出会分栏状态，如何使框架分栏在网页中达到更好的视觉效果，本小节来介绍框架分栏的两种分栏样式。
·112·9.2.1  框架垂直分栏
垂直分栏是对框架里的网页文档垂直排列，每张网页文档占用一列显示。垂直分栏是在<frameset>中
用cols 表示，后面接要表示的列宽，语法形式如下：
<frameset cols="50,50">
<frame src="www.163">
<frame src="www.sina">
</frameset>
垂直分栏在<frameset>中包含两张网页文档，每张网页占50%，第二张网页用<frame>来引进网页文档路径，代码9.2表示垂直分栏。
代码9.2  源代码\第9章\框架垂直分栏.html <html>
<head>
<title>框架垂直分栏</title>
</head>
<frameset cols="50,50">
<frame src="www.163">
<frame src="www.sina">
</frameset>
</html>
上面代码在框架中包括两个垂直的网页文档，设置了cols 参数为50和50，表示各占一半显示，效果如图9.2所示。
图9.2  框架垂直分栏
框架的垂直分栏把整个网页分成多列，如cols 中有两个数字，表示两个列，如果想用三列显示网页文档那要怎么样呢？同时可以在后面加逗号再加一个数字就可以了，注意三
·113·
个数字加起来不超过100%，请读者想想为什么。
注意：路径可以是网址，也可以是同目录下的网页文档。
9.2.2  框架水平分栏
框架可以垂直分栏，同样也可以水平分栏，水平分栏就是把网页文档分成多行显示。水平分栏的语法用rows 表示，与垂直分栏一样，也放在<frameset>上，一个框架不能同时出现水平和垂直分栏，即不能同时出现cols 和rows ，代码9.3表示框架水平分栏。
代码9.3  源代码\第9章\框架水平分栏.html <html>
<head>
<title>框架水平分栏</title> </head> <frameset rows="40,60">
<frame src =
"www.sina">  <frame src ="www.163">
</frameset>
</html>
代码9.3中，一个占用40%和另一个占用60%的网页文档，分上下两行显示，上面显示的是新浪，而下面显示的是网易，效果如图9.3所示。
图9.3  框架的水平分栏
在使用框架的时候，根据网页美观性来选择框架是水平分栏还是垂直分栏。再通过其
·114·他属性的运用，可以做出很漂亮的页面，稍后介绍框架常用的属性。
注意：当框架里网页文档超过两个时，必需出现cols 或rows ，或者cols 和rows 同时出现，如果只有一张网页文档，可以省掉。在<frameset></frameset>中也可以再嵌入<frameset></frameset>标签对。
9.3  框架的常用属性
光是用框架基本语法显示网页文档是不够的，对特殊的环境处理不当，会影响效果，而且也不好控制框架在整上网页上的样式。常用的有属性有不可调节框架大小、网页空白和不支持框架等，下面对其分别介绍。
9.3.1  设置不可调节框架大小
上面的框架都可以调节大小的，有时网页制作可能对框架设置成不能调节小大，这时在该网页文档中用noresize=”noresize”表示，在网页效果中不会让用户去调节大小的，代码
9.4表示noresize 不能调节框架大小。
代码9.4  源代码\第9章\用noresize 表示不能调节框架大小.html <html>
<head>
<title>不能调节框架大小</title>
</head>html网页设计css
<frameset cols="50,30,20">
<frame noresize="noresize" src="www.163" />
<frame src="www.sina" />
<frame src =www.hao123>
</frameset>
</html>
代码9.4中表示框架的三个网页文档中，第一个占用50%的宽度，显示网易首页内容，且不能调节框架大小，而第二个网页文档和第三个合起来占用50%的度宽，而且是默认的可以调节框架大小，效果如图9.4所示。
·115
·
图9.4  不可调节框架大小
上图中在第一个网页文档中的边框外不能调节大小的，鼠标放上去没有显示出可以拉伸的箭头，而放在新浪网首页的网页文档右边框处能显示出可以调节大小，说明noresize 对第一个即网易所在的网页文档外起作用。
9.3.2  浏览器不支持框架
在以前的旧浏览器中不支持框架，为了给这些不支持框架的浏览器用户友好提醒，可以用<noframes></noframes>标签对显示文字，说明该浏览器不支持框架，支持框架的浏览器不再显示<noframes></noframes>里的内容，代码9.5表示浏览器不支持框架。
代码9.5  源代码\第9章\浏览器不支持框架.html <html>
<head>
<title>不支持框架</title>
</head>
<frameset rows="40,60">
<frame src =
"www.sina">
<frame src ="www.163">
</frameset>
<noframes>对不起，您的浏览器不支持框架</noframes>
</html>
可以在每个网页的框架里面加上<noframes></noframes>标签对，当用以前的旧浏览器浏览网页中的框架时，会显示<noframes></noframes>的内容，而忽略<frameset></frameset>标记对，所以浏览器显示出<frameset></framset>上的内容时，表明该浏览器支持框架，如图9.5所示。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。