网页制作08-html,css,javascript初认识のhtml使用框架结构，请先建立站点！

框架一般由框架集 和框架组成。

框架集就像一个大的容器，包括所有的框架，是框架的集合。

框架是框架集中一个独立的区域用于显示一个独立的网页文档。

框架集是文件html，它定义一组框架的布局和属性，包括框架的数目，框架的大小和位置，以及在每个框架中初始显示的页面的URL。

框架结构是将两个或两个以上的网页组合起来。

框架最常用的用途就是导航，一组框架，通常包括一个含有导航条的框架和另一个显示主要内容的框架。

由于一个框在里面，一般有几个网页，所以在这里我们建立一个站点来管理这些网站资源。

一、建立站点

二、建立框架网页如下：

三、效果预览

1、打开index.html未点击时：

2、在index的left框架中点击链接后：

四、实操代码：

1、index.html：建立框架

html 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
	
<frameset rows="15%,70%,15%" frameborder="yes" framespacing="10"  bordercolor="#F3AF13">
	<frame src="top.html" scrolling="no"></frame>
	
	<frameset cols="20%,80%" border="3" bordercolor="#F3AF13">
		<frame src="left.html" noresize></frame>
	    <frame src="main.html" name="main" marginheight="10" marginwidth="20"></frame></frameset>

    <frame src="bottom.html"></frame>

<frame src="UntitledFrame-2"></frameset>
<noframes>此内容在浏览器不支持框架效果下所显示！</noframes>
</html>

2、top.html：顶部框架内容

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：底部框架内容

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：左侧框架内容

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中的链接会被覆盖）

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>

6、02英短蓝猫

html 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<h1><strong>2、英短蓝猫，其实就是英国短毛猫的彩色变种。</strong></h1><hr>
	
<img src="英短蓝猫.jpg" height="300" align="right">
<p><strong>品相特征：</strong>脑袋圆，发腮明显，毛发短，尾巴短，四肢短且粗壮，被毛颜色呈蓝灰色。</p>
<p><strong>体重范围：</strong>成年英短正常体重普遍在10斤上下。</p>
<p><strong>性格特点：</strong>性格温润，十分黏人，极爱撒娇。</p>
<p><strong>喂养建议:</strong>英短蓝猫属于本身极易发胖的猫，稍不注意就会被养成"蓝猪"，体重过胖后对蓝猫健康威胁非常大，因此，主人日常一定要控制好他的体重，不要被他的撒娇本事迷惑，动不动就给好吃的。</p>
<p><strong>参考价格：</strong>参考价格：1500~8000元。</p><hr><!--后面的内容是最后一章的内容浮动框架的演示-->
<p><a href="缅因猫.jpeg" target="if">浮动链接按钮</a></p>
<iframe src="01布偶.html" width="400" align="right" scrolling="yes" name="if"></iframe>
</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>