Html框架使用详解

frameset 标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列
  • frameset标签是成对出现的,以<frameset>开始,</frameset>结束
  • 在框架页中frameset代替了body标签,因此框架页中不能包含body
  • 使用框架时应该声明支持框架的文档类型<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • 引用网址:http://www.dreamdu.com/xhtml/tag_frameset/
  • 属性:
    • Common-- 一般属性
    • cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%
    • rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%
    • border -- 定义frame定义的框架页的边框(单位像素),使用css实现
    • frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)
    • framespacing -- 定义框架页之间间隔的距离,使用css实现
    • frameset中rows与cols取值方法

      当一个框架只有一行或一列时,那么它们对应的数值都是100%.

      一个确定的值(单位像素)

      例如:50

      定义了上行,中行与下行,并且它们各占50px?

      <frameset rows="50, 50, 50">
      

      上面的解释是错误的,通过下面的示例我们会发现浏览器被三(平均)分了,所以要定义三行各占50像素应<frameset rows="50, 50, 50, *">这样定义。

      一个相对于浏览器窗口的百分比的值

      例如:50%

      定义了上行与下行,并且它们各占页面的50%

      <frameset rows="50%, 50%">
      

      使用星号(剩余的窗体)

      例如:*

      定义了上行为50像素,下行占除了50像素的剩余窗体

      <frameset rows="50, *">
      

      使用相对百分比定义

      例如:1*

      定义了上行为窗体高度的25%,下行为窗体高度的75%

      <frameset rows="1*, 3*">
      

      更加复杂的示例

      定义了水平的前,中,后列,中列为250px象素,前列与后列分别占剩余的25%与75%

      <frameset cols="1*,250,3*">
      

      定义了一个2行*3列的框架

      <frameset rows="30%,70%" cols="33%,34%,33%">
      

      下面这个例子我们假设页面高1000px,第一行的30%为300px,中上行为400px,剩下的300px被下面两个分配,"2*"是两倍的意思,"*"等价与"1*",所以中下行为100px,下行为200px

      <frameset rows="30%,400,*,2*">
      
      noframes 标签 -- 对不支持框架的设备进行提示,或相关操作
      • noframes标签是成对出现的,以<noframes>开始,</noframes>结束
      • 引用网址:http://www.dreamdu.com/xhtml/tag_noframes/
      • 由于frameset内不能包含body标签,因此noframes内部必须包含body标签

      示例

      <frameset cols="50%,25%,25%">
               <frame src="http://www.dreamdu.com/xhtml/">
               <frame src="http://www.dreamdu.com/css/">
               <frame src="http://www.dreamdu.com/javascript/">
               <noframes>
                              <body>
                                      <p>梦之都使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问梦之都。</p>
                              </body>
               </noframes>
      </frameset>
      
      iframe 标签 -- HTML内联框架
      • iframe标签是成对出现的,以<iframe>开始,</iframe>结束
      • iframe标签内的内容可以做为浏览器不支持iframe标签时显示
      • 引用网址:http://www.dreamdu.com/xhtml/tag_iframe/
      • 属性
        • Common -- 一般属性
        • name -- 定义了内容页名称,此名称在框架页内链接时使用到
        • src -- 定义了内容页URL(同frame标签)
        • frameborder -- 定义了内容页的边框,取值为(1|0),缺省值为1
          • 1 -- 在每个页面之间都显示边框
          • 0 -- 不显示边框
        • height -- 框架的高度,取值像素或百分比
        • width -- 框架的宽度,取值像素或百分比
        • marginwidth -- 定义了框架中HTML文件显示的左右边界的宽度,取值为px,缺省值由浏览器决定
        • marginheight -- 定义了框架中HTML文件显示的上下边界的宽度,取值为px,缺省值由浏览器决定
        • scrolling -- 定义是否有滚动条,取值为(yes|no|auto),缺省值为auto
          • yes -- 显示滚动条
          • no -- 不显示滚动条
          • auto -- 当需要时再显示滚动条
        • align -- 垂直或水平对齐方式
        • longdesc -- 定义框架页的说明
      框架常用在需要导航的网页结构中,比如一个窗口分为两个框架页(导航框架页与内容框架页),通过点击导航框架页的链接,可以显示不同的内容框架页。在框架页中可以实现相互的链接。此功能需要使用链接atarget属性,与链接的name属性。

      引用网址:http://www.dreamdu.com/xhtml/frames_a/

      示例

      <frame src="http://www.dreamdu.com/xhtml/" name="show" />
      
      <p>
              <a href="http://www.dreamdu.com/xhtml/" target="show">
                      tag a
              </a>
      </p>
      

      框架可以嵌套,可以实现网页的分层。

      <frameset rows="20%, *, 15%">
              <frame src="http://www.dreamdu.com/xhtml/exe_framesetnest/top/" />
              <frameset cols="20%, *">
                      <frame src="http://www.dreamdu.com/xhtml/exe_framesetnest/siderbar/" />
                      <frame src="http://www.dreamdu.com/xhtml/" name="show" />
              </frameset>
              <frame src="http://www.dreamdu.com/xhtml/exe_framesetnest/bottom/" />
              <noframes>
                      <body>
                              <p>梦之都使用了框架技术,但是您的浏览器不支持框架,请升级您的浏览器以便正常访问梦之都。</p>
                      </body>
              </noframes>
      </frameset>
      

      上面是一个经典的示例,定义了三行两列的框架。一个页面通常分为上部,中部与下部,而中部又分为左侧导航与右侧内容。


posted @ 2013-12-13 21:19  慧明法师  阅读(410)  评论(0编辑  收藏  举报