9.1 框架概述
框架的作用,就是把浏览器窗口划分成若干个小窗口,每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容,不同窗口的内容相互独立。框架的主要用途是导航,通常会在一个窗口中显示导航条,另外一个窗口则作为内容窗口,用于显示导航栏目的目标页面内容,窗口的内容会根据导航栏目的不同而动态变化。
html框架集与body同级,因此不能同时出现。框架的基本结构主要分为框架集<frameset>和框架<frame>两个部分,基本语法如下:
<frameset>
<frame/> <!-- 一个框架集中可以包括多个框架,每个框架窗口显示的页面由框架的 src 属性指定。 -->
<frame/>
...
</frameset>
9.2 框架集标记<frameset>
定义浏览器窗口的分割方式、各分割窗口(框架)的大小以及设置框架边框的颜色和粗细等属性。主要属性有:
属性 说明
border 边框宽度,框架粗细
bordercolor 边框颜色
frameborder 是否显示边框(取值1, 0或yes,no)
framespacing 边框间距
rows 上下分割窗口 cols 左右分割窗口
<frameset>标记对浏览器窗口的分割存在不同的方式,主要分为以下几种类型:
● cols左右(水平)分割 <frameset cols="80,*">
● rows上下(垂直)分割 <frameset rows="80,*">
cols把框架分成左右两半,上下分割使用rows(分成上下两半)。每个框架的大小使用逗号隔开,最后一个使用*会把剩下的都分配给它
● 嵌套分割:左右上下分割都有。<frameset>里面再嵌套一个<frameset>标记
1 <frameset rows="100,*">
2 <frame/>
3 <frameset cols="20%,*">
4 <frame/>
5 </frameset>
6 </frameset>
效果图如下:
9.3 框架标记<frame>
<frameset>分割得到的每个子窗口都需要显示不同的页面内容,这些页面内容由<frame>标记来设置。<frame>是个单标记,它必须放在框架集frameset中,<frameset>分割了几个子窗口就必须对应几个<frame>标记。<frame>标记的常用属性有:
属性 属性值 说明
src 显示页面的URL地址
scrolling yes、no、auto 是否显示滚动条
noresize 禁止改变框架的尺寸大小
border 边框宽度,框架粗细
bordercolor 边框颜色
marginwidth 设置内容与框架窗口左右边框的距离
marginheight 设置内容与框架窗口上下边框的距离
基本语法:<frame src="01.html" name="test" />
<!-- src 框架的源文件地址,name 框架名(命名框架,以便超链接使用它作为目标窗口) -->
9.4 不支持框架标记<noframes>
当用户浏览器版本太低不支持框架时,浏览器制作人员无法改变这一现象,所能做的只是告诉用户事实,把显示给用户看的文本信息放在<body></body>标记对之间;而<noframes>放在</frameset>标记后面。
demo:
<frameset cols="130,*"><frame src="menu.html"/><frame src="introduce.html"/></frameset>
<noframes>
<body>抱歉,您的浏览器版本太低,不支持框架,无法看到页面内容,请使用较新的浏览器来浏览。</body>
</noframes>
当用户浏览器版本太低不支持框架时,浏览器窗口将显示<body></body>标记对之间的文本内容,否则将显示<frameset></frameset>中各个框架的页面内容。
9.5 浮动框架标记<iframe>(也有叫“内嵌框架”的)
浮动框架时一种特殊的框架页面,主要体现在这个框架时嵌套在一个HTML页面中,作为页面的一个组成部分。具有和<frame>一样的属性,也有自己的属性:
<iframe src="源文件地址" name="名" width="宽" height="高" align="对齐方式">
9.6 框架与超链接
一般情况下在框架中的a链接使用target属性实现框架内文件跳转时:
href(一直不变,即指向打开的文件路径不需要变)
_self -> 自己框架页面打开
_blank -> 新页面打开
_top -> 顶级框架页面打开
_parent -> 到其父级框架页面打开
_framename -> 将我们想要打开的页面在指定的框架中打开
demo:
首先,新建一个网页“框架集和框架.html”,为右侧框架窗口添加"name"标识,输入下面的内容:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>框架集frameset和框架frame</title>
6 </head>
7 <frameset cols="10%,*">
8 <frame src="menu.html" />
9 <frame src="http://qq.com" name="RightFrame" />
10 </frameset>
11 </html>
然后,新建一个网页“menu.html”,在左侧窗口中,设置"target"属性显示的窗口名,输入下面的内容:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <a href="http://qq.com/" target="RightFrame">qq</a>
9 <a href="http://baidu.com" target="RightFrame">百度</a>
10 <a href="http://taobao.com" target="RightFrame">淘宝</a>
11 </body>
12 </html>
如下图,刚开始打开这个“框架集和框架.html”这个网页时,显示的效果如下:
左边相当于是一个菜单,右边是显示效果,当你单击“百度”或者“淘宝”时都可以链接到相应网站。
这就是我使用frameset和frame来实现的菜单功能。
下面,讲一下框架与超链接。在"menu.html"中插入下面的代码:
<span><a href="http://qq.com" target="_parent">在父框架中打开qq</a></span>
这个时候,在浏览器中打开”框架集和框架.html“,单击”在父框架中打开qq“,这个时候,你会发现,整个网页直接转向了qq首页。”框架集和框架.html“就相当于”menu.html“的父框架,当”menu.html“中的a指定了target="_parent"时,就会直接在”框架集和框架.html“中打开这个网页。对于target="_self"或者其它效果就交给你们自己去修改玩玩。