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 -- 定义框架页的说明
  框架常用在需要导航的网页结构中，比如一个窗口分为两个框架页(导航框架页与内容框架页)，通过点击导航框架页的链接，可以显示不同的内容框架页。在框架页中可以实现相互的链接。此功能需要使用链接a的target属性,与链接的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) 编辑收藏举报

刷新页面返回顶部

慧明法师

Html框架使用详解

frameset中rows与cols取值方法

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

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

使用星号(剩余的窗体)

使用相对百分比定义

更加复杂的示例

示例

示例

公告