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

news2025/2/25 12:46:24

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

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

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

框架集是文件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%" 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：顶部框架内容

<!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>

6、02英短蓝猫

<!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引用的