框架实例

一、框架的使用  注意:在linux系统中应将示例中的中文文件名替换为英文文件名


1 index.html

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>框架实例</title>

</head>

<frameset rows="64,*,64">

 <frame name="top" scrolling="no" noresize  src="标题区.htm"> 

 <frameset cols="*,5*">

   <frame name="menu" src="菜单区.htm">

   <frame name="main" src="具体内容.htm">

 </frameset>

 <frame name="bottom" scrolling="no" noresizetarget="contents" src="链接区.htm">

</frameset>

</html>

说明:相对长度可以用整数后加星号的方式表述,如cols=”*,5*”,

即第1列的宽度比第二列宽度为1:5,其中“*”即为1*

      

2 标题区.htm

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>标题区</title>

</head>

<body>

 <center><font face="宋体" size=3>框架一</font>&nbsp;&nbsp;<fontface="宋体" size=3>标题区</font></center>    

</body>

</html>

 

3 菜单区.htm

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>菜单区</title>

</head>

 

<body>

 <br><br><br><br>

 <p align=center><font face="宋体" size=3>框架一</font></p>

 <p align=center><font face="宋体" size=3>标题区</font></p>    

</body>

</html>

 

4 具体内容.htm

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<metahttp-equiv="content-language" content="cn">

<title>具体内容</title>

</head>

<body>

<br><br><br>

<palign="center"><font face="隶书"size=1>框架三</font></p>

<palign="center"><font face="隶书"size=5>具体内容</font></p>

</body>

</html>

 

5 链接区.htm

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312">

<title>链接区</title>

</head>

<body>

<center>框架四 &nbsp;&nbsp;链接区</center>

</body>

</html>

 

二、链接文档的显示位置---<a href=right-1.html target="rightarea"> 右侧窗口第一个页面</a><p>

 

1  Index.html

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312">

<title>框架与链接</title>

</head>

<frameset cols="30%,70%">

   <frame src=left.html  name=leftarea” scrolling="no">

   <frame src=right-1.html  name="rightarea" scrolling=”yes”>

</frameset>

</html>

 

2. left.html

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312">

<title>框架左侧页面</title>

</head>

<body>

<img src=3.jpg> <p>

<ULtype=disc>

<LI><ahref=right-1.html target="rightarea"> 右侧窗口第一个页面</a><p>

<LI><ahref=right-2.html target="rightarea"> 右侧窗口第二个页面</a><p>

</UL>

</body>

</html>

 

3. right-1.html

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312">

<title>右侧第一个连接页面</title>

</head>

<body>

<HRalign=center color="#FF0000">

<H1><center>右侧的第一个页面</H1></center>

<imgsrc=11.jpg>

</body>

</html>

 

4 right-2.html

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=gb2312">

<title>Untitled</title>

</head>

<body>

  <HR align=centercolor="#FF0000">

<H1><center>右侧的第一个页面</H1></center>

<img src=10.jpg>

</body>

</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值