HTML（Hypertext Markup Language），是描述网页文档的一种标记语言，这次上海网站建设着重讲解一下HTML基础教程之多视窗口框架的相关知识。
框架的含义和基本构成
  框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。
  而所有的框架标记　要放在一个 html 文档中。html页面的文档体标签<body>被框架集标签<frameset>所取代，然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。
  语法格式：
<html>
<head>
</head>
<frameset>
<frame src="url地址1">
<frame src="url地址2">
......
<frameset>
</html>
  Frame子框架的src属性的每个URL值指定了一个html文件（这个文件必须事先做好）地址，地址路径可使用绝对路径或相对路径，这个文件将载入相应的窗口中。
  框架结构可以根据框架集标签<frameset>的分割属性分为3种：
  左右分割窗口
  上下分割窗口
  嵌套分割窗口
  框架集<frameset>控制
  <frameset>的属性
属 性  描 述
border  设置边框粗细，默认是5象素.
bordercolor  设置边框颜
frameborder  指定是否显示边框 ："0"代表不显示边框，"1"代表显示边框
cols  用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows  用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
framespacing="5"  表示框架与框架间的保留空白的距离
noresize 
  设定框架不能够调节，只要设定了前面的，后面的将继承
  左右分割窗口属性：cols
  如果想要在水平方向将浏览器分割多个窗口，这需要使用到框架集的左右分割窗口属性cols.分割几个窗口其cols的值就有几个，值的定义为宽度，可以是数字(单位为像素)，也可以是百分比和剩余值。各值之间用逗号分开。其中剩余值用"*"号表示，剩余值表示所有窗口设定之后的剩余部分，当"*"只出现一次时，表示该子窗口的大小将根据浏览器窗口的大小自动调整，当"*"出现一次以上时，表示按比例分割剩余的窗口空间。cols的默认值为一个窗口
  如：
<frameset cols="40%,2*,*"> 将窗口分为40%，40%，20%
<frameset cols="100,200,*">
<frameset cols="100,*,*">  　将100像素以外的窗口平均分配
<frameset cols="*,*,*">    将窗口分为三等份
  2. 上下分割窗口属性：rows
  上下分割窗口的属性设置和左右窗口的属性设定是一样的，参照上面所述就可以了。
  子窗口<frame>标签的设定
  <frame>是个单标签,<frame>标签要放在框架集frameset中,<frameset>设置了几个子窗
口就必须对应几个<frame>标签，而且每一个<frame>标签内还必须设定一个网页文件（src="*.html"，其常用属性有:
  <frame>常用属性
属 性  描 述
src  指示加载的url文件的地址
bordercolor  设置边框颜
frameborder  指示是否要边框,1显示边框，0不显示（不提倡用 yes 或 no）
border  设置边框粗细
name  指示框架名称，是连结标记的 target所要的参数
noresize  指示不能调整窗口的大小，省略此项时就可调整,
scorlling  指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth  设置内容与窗口左右边缘的距离，默认为1
marginheight  设置内容与窗口上下边缘的边距，默认为1
width  框窗的宽及高 默认为width="100" height="100"
align  可选值为 left, right, top, middle, bottom
  子窗口的排列遵循从左到右，从上到下的次序规则。
  一、窗口的左右设定：
  实例一 sl9-1.html
  首先我们新建一个文件夹，然后做四个要放到子窗口中的页面，sl1.html、sl2.html、sl3.html、sl4.html。
<html>
<head>
</head>
<frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset><noframes></noframes>
</html>
  二、窗口的上下设定
  实例二 sl9-2.html
<html>
<head>
</head>
<frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frame src="sl2.html">
<frame src="sl3.html" noresize="noresize">
</frameset><noframes></noframes>
</html>
  三、窗口的嵌套设定
  实例三 sl9-3.html
<html>
<head>
</head>
<frameset cols="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset rows="300,500"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
  实例四 sl9-4.html
<html>
<head>
</head>html frame
<frameset rows="20%,*" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
</frameset><noframes></noframes>
</html>
  实例五 sl9-5.html
<html>
<head>
</head>
<frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl1.html">
<frameset cols="20%,*"framespacing="1" frameborder="yes" border="1" bordercolor="#FF00FF">
<frame src="sl2.html">
<frame src="sl3.html">
</frameset>
<frame src="sl4.html">
</frameset><noframes></noframes>
</html>
  大家看到上面的文件中还有一对<noframes></noframes>标签，即使在做框架集网页时没
有这对标签，文件在很多浏览器解析时也会自动生成<noframes>标签，这对标签的作用是当浏览者使用的浏览器太旧，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用的浏览器看不到框架时，他就会看到 <NOFRAMES>你的浏览器不支持框架网页</NOFRAMES>之间的内容，而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本。
  窗口的名称和链接
  上海网站建设如果在窗口中要做链接，就必须对每一个子窗口命名，以便于被用于窗口间的链接，窗口命名要有一定的规则，名称必须是单个英文单词，允许使用下滑线，但不允许使用"—","句点"和空格等，名称必须以字母开头，不能使用数字，还不能使用网页脚本中保留的关键字，在窗口的链接中还要用到一个新的属性"targe"，用这个属性就可以将被链接的内容放置到想要放置的窗口内。
  下面的实例就是窗口内的命名和链接方法
  文件一中的片断代码格式为：
<a href="sl1.html" target="aa2">爱在深秋</a>
<a href="sl2.html" target="aa3">图像对文字的水平居中</a>
<a href="sl3.html" target="aa2">图像与文本之间的距离</a>
<a href="sl4.html" target="aa3">图像大小的设定</a>
<a href=book.chinaz target="aa3">站长书库</a>
  文件二的片断代码格式为：
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
  文件一：
  ml.html
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<center>
<h2>目录</h2>
<hr>
<p><a href="sl1.html" _fcksavedurl="sl1.html" target="aa2">爱在深秋</a></p>
<p><a href="sl2.html" _fcksavedurl="sl2.html" target="aa3">图像对文字的水平居中</a></p>
<p><a href="sl3.html" _fcksavedurl="sl3.html" target="aa2">图像与文本之间的距离</a></p>
<p><a href="sl4.html" _fcksavedurl="sl4.html" target="aa3">图像大小的设定</a></p>
<p><a href="www.86215" _fcksavedurl="www.86215" target="aa3">上海网站建设</a></p>
</center>
</body>
</html>
  文件二：
  sl94.html
<html>
<head>
</head>
<frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1" bordercolor="#99CCFF">
<frame src="ml.html" name="aa1">
<frame src="sl1.html" name="aa3">
<frame src="sl2.html" name="aa2" noresize="noresize">
</frameset><noframes></noframes>
</html>
  浮动窗口<iframe>
  <iframe>这标记只适用於IE浏览器。 它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件。它是 一个围堵标记，但围着的字句只有在浏览器不支援 iframe 标记时才会显示，如<no
frames> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。
<iframe> 的参数设定格式：
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" m
arginheight="1" frameborder="1" scrolling="Yes">　
  <iframe>属性的含义
属 性  含 义
src  浮动窗框中的要显示的页面文件的路径，可以是相对或绝对。
name  此框窗名称，这是连结标记的 target 参数所　要的，
align  可选值为 left, right, top, middle, bottom，作用不大
height  框窗的高，以 pixels 为单位。
width  框窗的宽，以 pixels 为单位。
marginwidth  该插入的文件与框边所保留的空间。
marginheight  该插入的文件与框边所保留的空间。
frameborder  使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no）
scrolling  使用 Yes 表示容许卷动（内定）， No 则不容许卷动。
  sl95.html
<html>
<head>
<title>浮动框架</title>
</head>
<body bgcolor="#E1FFE1">
<center>
<iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30" marginheight="20" align="middle" allowtransparency="true">
这是一个浮动窗口
</iframe>
<p><a href="sl1.html" _fcksavedurl="sl1.html" target="aa">爱在深秋</a></p>
<p><a href="sl2.html" _fcksavedurl="sl2.html" target="aa">图像对文字的水平居中</a></p>
<p><a href="sl3.html" _fcksavedurl="sl3.html" target="aa">图像与文本之间的距离</a></p>
<p><a href="sl4.html" _fcksavedurl="sl4.html" target="aa">图像大小的设定</a></p>
<p><a href=book.chinaz _fcksavedurl="book.chinaz" target="aa3">站长书库</a></p>
</center>
</body>
</html>

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