zoukankan      html  css  js  c++  java
  • HTML(10)框架

    一、框架

      一个浏览器文档窗口只能显示一个网页文件,但是可以通过使用框架,在同一个浏览器窗口中显示不止一个页面。使用框架的页面主要包含两个部分,一个是框架集,另一个就是具体的框架文件。

      框架多用于网站后台或者内网系统的布局。

      1.框架集(<frameset></frameset>):就是用来定义这一HTML文件为框架模式,并设定视窗如何分割的文件。通俗一点地说,框架集就是存放框架结构的文件,也是访问框架文件的入口文件。如果网页由左右二个框架组成,那么除了左右二个网页文件之外,还有一个总的框架集文件。在使用框架的页面中,<body>主体标记被框架标记<frameset>所代替。而对于框架页面中包含的每一个框架,都是通过<frame>标记来定义的。

      rows属性:水平分割窗口。水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。rows中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。但是要注意的是,一般设定了几个rows的值,就需要有几个框架,也就是需要有相应数量的<frame>参数。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>水平分割窗口的效果</title>
     6 
     7 </head>
     8 
     9 <frameset rows="30%,70%">
    10 
    11     <frame>
    12 
    13     <frame>
    14 
    15 </frameset>
    16 
    17 </html>

      cols属性:垂直分割窗口。垂直分割窗口就是将页面沿垂直方向分割成多个窗口,也就是将页面分成左右排列的多个窗口。cols中可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。与水平分割窗口向同,一般设定了几个cols的值,就需要有几个框架,也就是有几个<frame>参数。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>垂直分割窗口的效果</title>
     6 
     7 </head>
     8 
     9 <frameset cols="20%,55%,25%">
    10 
    11     <frame>
    12 
    13     <frame>
    14 
    15     <frame>
    16 
    17 </frameset>
    18 
    19 </html>

      frameborder属性:设置边框。在默认情况下,框架窗口的四周有一条边框线,通过frameborder参数可以调整边框线的显示情况。语法为:

    <frameset frameborder="是否显示">或者<frame frameborder="是否显示">。 frameborder的取值只能为0或1。如果取值为0,那么边框线将会被隐藏;如果取值为1,边框线将会显示。在frameset中设置将会对整个框架有效,在frame中设置则只对当前这个框架有效。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>设置框架窗口的边框显示效果</title>
     6 
     7 </head>
     8 
     9 <frameset rows="20%,55%,25%">
    10 
    11 <frame frameborder="1">
    12 
    13 <frameset cols="35%,65%" frameborder="0">
    14 
    15 <frame >
    16 
    17 <frame>
    18 
    19 </frameset>
    20 
    21 <frame frameborder="0">
    22 
    23 </frameset>
    24 
    25 </html>

      framespacing属性:框架的边框宽度。框架的边框宽度在默认情况下是1像素,通过参数framespacing可以调整其大小。

      语法:<frameset framespacing="边框宽度">

      说明:边框宽度就是在页面中各个边框之间的线条宽度,以像素为单位。而这一参数只能对框架集使用,对单个框架无效。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>设置框架的边框宽度</title>
     6 
     7 </head>
     8 
     9 <frameset rows="30%,70%" framespacing="10">
    10 
    11     <frame>
    12 
    13       <frameset cols="20%,55%,25%" framespacing="30">
    14 
    15         <frame>
    16 
    17         <frame>
    18 
    19         <frame>
    20 
    21       </frameset>
    22 
    23 </frameset>
    24 
    25 </html>

      bordercolor属性:框架的边框颜色。使用参数bordercolor可以设置框架集的边框颜色。

      语法:<frameset bordercolor="颜色代码">

      说明:该参数同样只对整个框架集有效,对于单个框架无效。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>设置框架的边框颜色</title>
     6 
     7 </head>
     8 
     9 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
    10 
    11     <frame>
    12 
    13       <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
    14 
    15         <frame>
    16 
    17         <frame>
    18 
    19         <frame>
    20 
    21       </frameset>
    22 
    23 </frameset>
    24 
    25 </html>

      2.框架(<frame>)和src属性。

      框架结构中的各个页面都是一个单独的文字,而这些文件是通过src参数进行设置的。

      语法:<frame src="页面源文件地址">

      说明:页面文件是框架页面的具体内容的所在,对于没有设置源文件的框架,只是空白页面,是没有任何作用的。页面的源文件可以是正常的HTML文件,也可以是一个图片或者其他的文件。

     1 <html>
     2 
     3 <head>
     4 
     5 <title>设置页面源文件</title>
     6 
     7 </head>
     8 
     9 <frameset rows="30%,70%">
    10 
    11     <frame src="pic01.gif">
    12 
    13     <frame src="src01.html">
    14 
    15 </frameset>
    16 
    17 </html>

      3.<noframes></noframes>标签

      <noframes></noframes>标签用于浏览器不支持框架时显示页面内容。

     1 <html>
     2 <frameset cols="25%,50%,25%">
     3   <frame src="/example/html/frame_a.html">
     4   <frame src="/example/html/frame_b.html">
     5   <frame src="/example/html/frame_c.html">
     6 <noframes>
     7 <body>您的浏览器无法处理框架!</body>
     8 </noframes>
     9 </frameset>
    10 </html>

    二、浮动框架(<iframe>)

      浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套子窗口,也就是整个页面并不是框架页面,但是却包含一个框架窗口。在框架窗口内显示相应的页面内容。浮动框架又叫内联框架(inline frame),并且因此而得名。

      语法:<iframe src="页面源文件"></iframe>  

      说明:与普通框架结构类似,浮动框架也可以设置很多参数,如 name、scrolling、frameborder等。 但是与普通框架相比,浮动框架中不包含framespacing和bordercolor参数。

      src属性:浮动框架中最基本的参数就是src,它用来设置浮动框架页面的源文件地址,也是浮动框架页面必需的参数。因为只有设置了源文件的内容,浮动框架才有意义。语法:<iframe src="页面源文件">

      width和height属性:在普通框架结构中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是在浮动框架中,是插入到普通HTML页面中的,可以调整整个框架的大小。语法:<iframe src= src="浮动框架页面源文件" width="页面宽度" height="页面高度">,页面的宽度和高度值都以像素为单位。 

    1 <html>
    2 <body>
    3 <iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
    4 <p>一些老的浏览器不支持 iframe。</p>
    5 <p>如果得不到支持,iframe 是不可见的。</p>
    6 </body>
    7 </html>

    三、一个框架布局的示例

     1 <html>
     2 <head>
     3     <title>框架主页面 </title>
     4 </head>
     5 <frameset rows="20%,*"><!--框架集,控件文件的容器-->
     6     <frame name="topFame" src="3.html" noresize/>
     7         <frameset cols="240px,*">
     8             <frame name="leftFrame" src="1.html"/>
     9             
    10             <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
    11             
    12         </frameset>
    13        <noframes>
    14        <!--noframes标记当中可以包含body标记-->
    15         <body> 
    16             该页面不支持frameset标签!
    17         </body>
    18     </noframes>
    19  </frameset>
    20 </html>

     四、链接如何跳出框架

      在网站后台布局中,框架用得比较多。在很多时候,我们需要跳出框架,重新加载页面。那么链接如何才能跳出框架呢?其实,只需要指定<a></a>标签的target属性为"_top"即可实现。下面是一个简单的例子。

     1 <html>
     2 
     3 <body>
     4 
     5 <p>被锁在框架中了吗?</p> 
     6 
     7 <a href="/index.html"
     8 target="_top">请点击这里!</a> 
     9 
    10 </body>
    11 </html>

    摘自:http://www.w3school.com.cn/tiy/t.asp?f=html_frame_getfree

  • 相关阅读:
    改变Edit的光标(使用CreateCaret,ShowCaret和LoadBitmap三个API函数)
    浅析Delphi Container库(有开源的DCLX)
    Delphi接口的底层实现(接口在内存中仍然有其布局,它依附在对象的内存空间中,有汇编解释)——接口的内存结构图,简单清楚,深刻 good
    Asp.Net在多线程环境下的状态存储问题
    C#程序中注释过多的8条理由
    CentOS 6.4 编译安装LLVM3.3,Clang和Libc++
    Microsoft 2013校园招聘笔试题及解答
    代码契约CodeContract(八)
    T-SQL 临时表、表变量、UNION
    BST&AVL&红黑树简单介绍
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2645989.html
Copyright © 2011-2022 走看看