网页制作08-html,css,javascript初认识のhtml使用框架结构，请先建立站点！
框架一般由框架集和框架组成。
框架集就像一个大的容器，包括所有的框架，是框架的集合。
框架是框架集中一个独立的区域用于显示一个独立的网页文档。
框架集是文件html，它定义一组框架的布局和属性，包括框架的数目，框架的大小和位置，以及在每个框架中初始显示的页面的URL。
框架结构是将两个或两个以上的网页组合起来。
框架最常用的用途就是导航，一组框架，通常包括一个含有导航条的框架和另一个显示主要内容的框架。
由于一个框在里面，一般有几个网页，所以在这里我们建立一个站点来管理这些网站资源。
一、建立站点
二、建立框架网页如下：
三、效果预览
1、打开index.html未点击时：
2、在index的left框架中点击链接后：
四、实操代码：
1、index.html：建立框架
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<frameset rows="15%,70%,15%" noresize border="3" bordercolor="#F3AF13">
<frame src="top.html"></frame>
<frameset cols="20%,80%" noresize border="3" bordercolor="#F3AF13">
<frame src="left.html"></frame>
<frame src="main.html" name="main"></frame></frameset><frame src="bottom.html"></frame>
</frameset>
<noframes>此内容在浏览器不支持框架效果下所显示！</noframes>
</html>2、top.html：顶部框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>top</title>
</head>
<body>
<p>top...</p>
<h3 align="center">hello this is a headline</h3>
</body>
</html>3、bottom.html：底部框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p>bottom^</p>
<p align="right">以上内容部分摘自网络,本文章以演示为主。</p>
</body>
</html>4、left.html：左侧框架内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p>left</p>
<p><a href="01布偶.html" target="main">1.布偶猫</a></p>
<p><a href="02英短蓝猫.html" target="main">2.英短蓝猫</a></p>
<p>3.英短银渐层</p>
<p>4.美国短毛猫</p>
<p>5.暹罗猫</p>
<p>6.加菲猫</p>
<p>7.斯芬克斯猫</p>
<p>8.缅因猫</p>
</body>
</html>5、main.html（框架主要内容初始显示，后期点击left.html中的链接会被覆盖）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<p>main</p>
<img src="猫咪封面.jpg" width="90%" align="center">
</body>
</html>五、部分框架标记属性
1、设置框架集的属性frameset
框架页面的结构是在框架集中设置的。
可以根据框架的分割方式，分为水平分割窗口，垂直分割窗口和嵌套分割窗口。
1)、水平分割窗口。
水平分割窗口是将页面沿水平方向切割，也就是将页面分成上下排列的多个窗口。
<frameset rows="15%,70%,15%" >
<frame src="top.html"></frame>
frameset rows这里是将页面分为三部分，其中的百分数是可以改变的，也可以用像素值设定
frame是引用网页内容
2)、垂直分割窗口。
<frameset cols="20%,80%" >
<frame src="left.html"></frame>
<frame src="main.html" name="main"></frame></frameset><frame src="bottom.html"></frame></frameset>
frameset cols是把页面分成左右两个部分，其中的百分号可以换成像素值
这里的name命名要记一下，是用来方便后面超链接设定打开方式target引用的
3)、嵌套分割窗口。
嵌套分割：一个页面中既有水平分割的框架，又有垂直分割的框架。
如果是用百分号的话。按照本文的例子代码书写即可。
如果是用到像素值的话,未知的数值用*代替
<frameset rows="80，*" cols="*"
2、框架的边框frameborder
<framese frameborder="是否显示"
显示：yes或者1
隐藏：NO或者0
在frameset设置将会对整个框架集有效，在frame中设置，则只对当前框架有效。
3、框架的边框宽度framespacing
<framese framespacing="10"
默认情况下框架的边框宽度是1，边框宽度只能对框架及使用对单个框架无效。以像素为单位。
4、框架的边框颜色
<framese bordercolor="#F3AF13"
5、设置窗口属性frame
Frame用来定义每一个单独的框架，页面，框架页面的属性设置都在frame标记进行。
1）页面源文件：src
<frame src="left.html"></frame>
2）页面名称name
页面名称是为了便于页面的查找和链接，所提供的一个属性。例如一个左右框架结构，左侧为链接，右侧为正文，当单击左侧链接以后要在右侧框架中打开正文，此时就需要用到 Free的name属性。
<frame name="页面名称"
3）禁止调整窗口的尺寸，noresize
没有属性值，添加属性后就不能拖动边框，反之无需指定此属性。
4)边框与页面内容的水平边距marginwidth
5)边框与页面内容的垂直边距marginheight
水平边距用于设置页面的左右边缘与框架、边框的距离。
垂直边距，用来设置页面的上下边缘与框架边缘的距离。
<frame marginheight="10" marginwidth="20">
6)控制框架滚动条显示scrolling
yes:一直显示滚动条。
no:无论什么情况都不显示滚动条。
auto:系统默认值。ta会根据具体内容来调整。
<frame scrolling="no">
7)不支持框架标记noframes
如果遇到不支持框架结构的浏览器，或者用户关闭了浏览器的框架显示功能，此时就需要用noframes来设置替换的内容告知浏览者，其浏览器无法打开框架页面。
<noframes>此内容在浏览器不支持框架效果下所显示！</noframes>
6、浮动框架。Iframe
浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的此窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。 Iframe框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置。
1）页面源文件：src
<iframe src="left.html"></iframe>
此处在02英短蓝猫.html上浅加示例：
2）浮动框架的宽，高，对齐方式width,hight,align
<iframe src="01布偶.html" width="400" align="right"></iframe>
3）浮动框架滚动条显示属性scrolling
同一般框架，这里不展开
4）创建框架链接(详见上文）
index.html中：
<frame src="main.html" name="main" marginheight="10" marginwidth="20"></frame>
left.html中：
<a href="02英短蓝猫.html" target="main">2.英短蓝猫</a>
5）浮动框架的链接
方法同普通框架链接，把浮动框架当成main.html就行。
<p><a href="缅因猫.jpeg" target="if">浮动链接按钮</a></p>
<iframe src="01布偶.html" width="400" align="right" scrolling="yes" name="if"></iframe>
