框架实例

    xiaoxiao2021-04-12  44

    一、框架的使用  注意:在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>  <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>框架四   链接区</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>

     

    转载请注明原文地址: https://ju.6miu.com/read-667584.html

    最新回复(0)