HTML实训课程笔记_04

       frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。其作用是指定一个框架集,用于组织多个框架和嵌套框架集。

 注意:
      1.frameset 元素是 frame元素的容器。HTML 文档可包含   frameset 元素或 body元素之一,而不能同时包含两者。
      2.不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果需要为不支持框架的浏览器添加一个 <noframes></noframes> 标签,把 <body></body> 放在<noframes></noframes>标签中。
案例效果:
   1.框架布局效果
   HTML实训课程笔记_04_第1张图片
2.当点击个人链接的时候的效果图如下: HTML实训课程笔记_04_第2张图片

实现的代码:
 1.index.html页面代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
</head>

<frameset rows="20%,*"><!--框架把整体页面按照垂直方向分为两块,第一个块占20%,第二块占用剩余的所有部分(*代表所有)-->
    <frame src="top.html"/><!--用frame标签设置第一部分 20%部分-->
     <frameset cols="20%,80%"><!--框架把第二块按照水平分成了两块,第一块占用20% 第二块占用80%-->
	    <frame src="left.html"/><!--用frame标签设置第二块框架的左边-->
		<frame name="mainFrame" src="main.html"/><!--用frame标签设置第二块框架的右边-->
	 </frameset>
</frameset>

<noframes><!--如果遇到不支持框架结构的浏览器 显示body部分-->
<body>
     如果遇到不支持框架结构的浏览器,此时就需要用到该标签来设置替换的内容,并告诉浏览者其浏览器无法打开框架页面。
</body>
</noframes>
</html>

2.left.html页面部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>left</title>
</head>

<body bgcolor="#FF00FF">
         <h3 align="center">我是左面</h3>
		 <h5>
		   <!--用target属性设置页面打开的位置,在框架中打开-->
		   <a href="gerenjieshao.html" target="mainFrame">个人介绍</a>
		 </h5>
</body>
</html>

3.top.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>top</title>
</head>
<body bgcolor="#FFFF00">
         <h3 align="center">我是上面</h3>
</body>
</html>

4.main.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>main</title>
</head>

<body bgcolor="#0000CC">
         <h3 align="center">我是主要部分</h3>
</body>
</html>

5.gerenjieshao.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
     <p>
	    陈红军:人称军哥。讲课幽默。人见人爱,花见花开,车见车爆胎!
	 </p>
</body>
</html>


你可能感兴趣的:(HTML实训课程笔记_04)