一.建立框架
1.框架结构
框架的基本结构主要包括两部分：一部分是框架集，另一部分是框架，它主要是利用<frameset>标签和</frameset>标签来定义的。框架集是在一个文档内定义一组框架结构的HTML网页，它定义了网页显示的框架数、框架的大小，载入框架的网页源和其他可以定义的属性等，用<frameset>标签来定义一个窗口框架；而框架则是指在网页上定义的一个显示区域，用<frame>标签来定义窗口框架中的子窗口的内容。
窗口框架文档HTML的结构如下：
<html>
<head><title>···</title></head>
<frameset>
<frame src="url"><frame src="url" >.....
</frameset>
</html>2.框架分割方式
框架分割方式主要的有以下三种：左右分割窗口、上下分割窗口和嵌套分割窗口。
1),左右分割窗口
左右分割窗口采用cols属性，即在垂直方向上将浏览器分割成多个窗口。左右分割窗口的结构如下：
<framest cols="value,value,······">
<frame src="url">
<frame src="url">
······
</frameset>之间应该用英文的逗号进行分割，并且值有几个，就说明窗口被分割成几部分，<frame>标签应该就有几个。
2),上下分割窗口
上下分割窗口采用rows属性，即在水平方向上将浏览器分割成多个窗口。上下分割窗口的结构如下:
<frameset rows="value,value,······">
<frame src="url">
<frame src="url>
······
</frameset>3),嵌套分割窗口
一个浏览器窗口可以既分割，又上下分割，这种窗口就会死嵌套分割窗口。嵌套分割窗口的结构如下:
<frameset rows="value,value,···">
<frame src="url">
<frameset cols="value,value,···">
<frame src="url">
<frame src="url">
</frameset>
···
</frameset><frameset cols="value,value,···">
<frame src="url">
<frameset rows="value,value,···">
<frame src="url">
<frame src="url">
</frameset>
···
</frameset>示例：
<html>
<head>
<title>嵌套分割窗口</title>
</head>
<frameset cols="*,*">
<frameset rows="*,*">
<frame><frame>
</frameset>
<frameset rows="*,*">
<frame><frame>
</frameset>
</frameset>
</html>运行结果：
先上下分割成两份，再依次将上下部分左右分割成两份。
二.窗口框架设置
1.框架集属性
1),水平/垂直分割窗口属性rows/cols
rows和cols的值分别说明窗口横向和纵向的分隔情况。其语法格式如下：
<frameset rows="value1,value2,value3···" cows="value1,value2,value3···">
2),设置窗口框架宽度属性border
通过border属性，可以设定分割窗口的框架宽度。其语法格式如下：
<frameset border="value">
通过framespacing这个属性，也可以设定框架边框的宽度，效果同border属性。其语法格式如下:
<frameset framespacing="value">
3),设置框架颜色属性bordercolor
通过bordercolor属性，可以设定框架边框的颜色，其语法格式如下：
<frameset bordercolor="color_value">
4).设置框架隐藏属性frameborder
通过frameborder属性，可以设置是否显示框架，使用在<frameset>标签中时，可控制窗口框架的所有子窗口；而使用在<frame>标签中时，则只是控制该标签所代表的子窗口。其语法格式如下：
<frameset frameborder="value">
value取值0或者1，0表示不显示边框，1表示显示边框，默认为1；
示例：
<html>
<head>
<title>框架集边框宽度、边框颜色和边框显示属性</title>
</head>
<frameset cols="*,*,*" border="40" bordercolor="#ff0000" frameborder="1">
<frame><frame><frame>
</frameset>
</html>
2.框架窗口属性
1).src属性
通过src属性可设置框架显示的文件路径，其语法格式如下：
<frame src="url">
如果<frame>标签中没有src属性，则该窗口显示空白
2),name属性
通过name属性可以设置框架窗口的名称，其语法格式如下：
<frame src="name">
框架的命名有一定的规则：框架名必须以字母开头，必须是单个单词；框架名区分大小写；框架名中允许使用下划线，不允许使用空格、句点和连字符。
3),frameborder属性
通过frameborder属性可以设定是否显示框架。其语法格式如下：
<frame frameborder = "value">
4),srcolling属性
通过srcolling属性可以设定该窗口是否显示滚动条。其语法格式如下：
<frame srcolling="value">
value值有三个:yes、no和auto；分别表示：显示滚动条、不显示滚动条和根据页面的长度自动判断是否显示滚动条；一般默认情况下，value值为auto。
5),noresize属性
通过noresize属性可以设定用户能否自动调整框架窗口的大小，如果设定noresize，则表示不允许改变框架窗口的大小。noresize属性只是一个标志，没有取值。其语法格式如下：
<frame noresize>
6),marginwidth属性
通过marginwidth属性可以设定框架中的内容与框架边缘的左右距离，相当于设定页面的页边距。其语法格式如下：
<frame marginwidth="value">
7),marginheight属性
通过marginheight属性，设定框架中的内容与框架顶部和底部的空白边距，其语法格式如下：
<frame marginheight="value">
示例：
<html>
<head>
<title>框架窗口属性</title>
</head>
<frameset cols="20%,80%">
<frame scrolling="yes" name=left src="http://www.baidu.com" marginwidth="40">
<frameset rows="50%,50%">
<frame src="http://www.sogou.com" scrolling="no">
<frame>
</frameset>
</frameset>
</html>运行结果：
三.浮动窗口
浮动框架是一种特殊的框架页面，浮动窗口就是在浏览器窗口中可以嵌套子窗口，在其中显示页面的内容，在HTML中通过<iframe>标签实现。<iframe>标签的属性和<frame>标签的属性基本相同，其语法格式如下：
<iframe>···</iframe>
浮动框架中不能用<iframe>标签取代<body>标签，<iframe>标签处于<body>标签之内。
示例：
<html>
<head>
<title>浮动窗口</title>
</head>
<body>
<iframe name=iframe src="http://www.baidu.com" width="600" height="500" align="center" scrolling="yes">
</iframe>
</body>
</html>
四.框架与超链接
使用框架的一个重要目的就是在不同的框架中显示不同的页面。在<frame>标签中使用name属性定义了窗口的名称，而在<a>标签直接中采用target属性，可以指定所链接的文件出现在哪一窗口。其语法格式如下：
<a href=url target="frame_name">
1.普通框架与超链接
示例：
Constellation.html
<html>
<head>
<title>普通框架与超链接</title>
</head>
<frameset cols="40%,60%">
<frame src="left.html" >
<frame name="right">
</frameset>
</html><html>
<head>
<title>普通框架与超链接</title>
</head>
<body background="12.jpg">
你想要了解你的星座怎么速配么？<br>
<a href="right1.html" target="right">白羊座</a><br>
<a href="right2.html" target="right">金牛座</a><br>
<a href="right3.html" target="right">双子座</a><br>
<a href="right4.html" target="right">巨蟹座</a><br>
<a href="right5.html" target="right">狮子座</a><br>
<a href="right6.html" target="right">处女座</a><br>
<a href="right7.html" target="right">天平座</a><br>
<a href="right8.html" target="right">天蝎座</a><br>
<a href="right9.html" target="right">射手座</a><br>
<a href="right10.html" target="right">魔蝎座</a><br>
<a href="right11.html" target="right">水平座</a><br>
<a href="right12.html" target="right">双鱼座</a><br>
</body>
</html><html>
<head>
<title>普通框架与超链接</title>
</head>
<body background="1.jpg" text="red">
<b>白羊座</b>(03.21-04.19)<br>
<pre>白羊座有刚强、倔强、固执而不服输的天性，所以合适找一个能肯定他(她)的人。
会巧妙的安排生活的狮子座是最合适的对象；
个性明朗乐观的射手座会以最宽厚的态度谦让你，采取同一步调；
和你个性相投，有共同目的又能互相勉励的白羊座也是相称的对象。
<b>相反的</b>：性情易变的巨蟹座，优柔寡断的天平座；古板的白羊座；都不宜相配。
<b>优点</b>：做事积极，热情有活力、讲义气、乐观进取有自信、勇于接受新观念、
有明快的决断力、坦白率真、爆发力强、勇于接受挑战、不畏权势。
<b>缺点</b>：自我中心太强、急躁缺乏耐性、粗心大意、有一点臭屁、说话欠考虑、
做事瞻前不顾后、只有三分钟热度、容易恼羞成怒、缺乏时间观念、不懂得照顾身体。
</pre>
</body>
</html>
运行结果：
2.浮动框架与超链接
示例：
Iframe.html
<html>
<head>
<title>浮动框架与超链接</title>
</head>
<body bgcolor="#ffccff">
<center>
<iframe src="Iframe1.html" name="abc" width="400" height="400">浮动窗口
</iframe>
<br>
<br>
<a href="Iframe2.html" target="abc">欢迎进入我的天地</a>
<a href="Iframe3.html" target="abc">感谢您的光临</a>
</center>
</body>
</html><html>
<head>
<title>浮动框架与超链接</title>
</head>
<body bgcolor=blue>
<br><br><br><br><br><br>
<center>
<font color=yellow size=6>欢迎进入我的网站！</font>
</center>
</body>
</html>Iframe2.html
<html>
<head>
<title>浮动框架与超链接</title>
</head>
<body bgcolor=lightyellow>
<h4 align="center"><a href="http://keyof.net" target="abc">欢迎进入</h4>
<font color=yellow size=6>欢迎进入我的网站！</font>
</center>
</body>
</html><html>
<head>
<title>浮动框架与超链接</title>
</head>
<body bgcolor="lightgreen">
<h4 align="center">感谢光临</h4>
</body>
</html>
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
