关于框架

Frameset

谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET> <FRAME> 即可,面所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框架如何分割 ,不会显示任何资料,所以不必放入 <BODY> 标记,浏览这框架必须读取这档案 面不是其他框窗的档案。<FRAMESET> 是用来划分框窗,每一窗框由一个 <FRAME> 记所标示,<FRAME>必须在 <FRAMESET> 范围中使用。如下例:

 

  <frameset cols="50%,*"> <frame name="hello" src="up2u.html"> <frame name="hi" src="me2.html">

  </frameset>

 

  此例中 <FRAMESET> 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序

 

<FRAME>

用法:      定义一个帧

开始/结束标识: 必须/非法

属性:      name="..."定义帧的名字

         scr="..."定义在帧中显示的内容的来源

         frameborder="..."定义帧之间的边界(01)

         margwidth="..."设置帧的边界和其中内容之间的间距

         margheight="..."设置帧的边界和其中内容之间的间距化

         noresize="..."使帧的尺寸不能变

         scrolling="..."设置滚动条的表示方式(auto, yes, no)

空:       不允许

 

<FRAMESET>...</FRAMESET>

用法:      定义在一个窗口中帧的布局

开始/结束标识: 必须/必须

属性:      rows="..."设定行的数目

         cols="..."设定列的数目

         οnlοad="..."当载入文档时的内部事件触发器

         οnunlοad="..."当卸载文档时的内部事件触发器

空:       不允许

注释:      FRAMESET可以嵌套

 

以上所述只是最简单的框架设定,若希望达到更合适的效果请加入或修改以下各参数。

  标记:<FRAMESET>

  例子:<frameset rows="90,*" frameborder="0" border=0 framespacing="2" border="2" bordercolor="#008000"></frameset>

  功用:宣告HTML文件为框架模式,并设定视窗如何分割。

 

  参数:

 

COLS="90,*"

垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个视窗画面的 50% 宽度为一相对分割。你可自己调整数字。

 

 

ROWS="120,*"

这是横向切割,将画面上下分开,数值设定同上。 COLS ROWS 两参数尽量不要放在同一个 <FRAMESET> 标记中,因 Netacape 偶然不能显示这类型的框架,尽量采用多重分割,如以上各例。

 

 

frameborder="0"

设定框架的边框,其值只有 0 1 0 表示不要边框, 1 表示要显示边框。

 

 

border="0"

设定框架的边框厚度,以 pixels 为单位。

 

 

bordercolor="#008000"

设定框架的边框颜色。颜色值请参考【调色原理】。

 

 

framespacing="5"

表示框架与框架间保留的空白的距离。

  标记:<FRAME>

  例子:<frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

  功能:设定每一个框窗内的参数属性。

  参数:

 

 

SRC="a.html"

设定此框窗中要显示的网页档案名称,每个框窗一定要对应一个网页档案。

 

 

NAME="top"

设定这个框窗的名称,这样才能指定框架来作链接,必须但任意命名。

 

 

frameborder=0

设定框架的边框,其值只有 0 1 0 表示不要边框, 1 表示要边框。

 

 

framespacing="6"

表示框架与框架间的保留的空白的距离。

 

 

bordercolor="#008000"

设定框架的边框颜色。

 

 

scrolling="Auto"

设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示卷轴,AUTO 视情况而定。

 

 

noresize

设定不让使用者可以改变这个框框的大小,如没有设定此参数,使用者可随意地拉动框架改变其大小。

 

 

marginhight=5

表示框架高度部分边缘所保留的空间。

 

 

marginwidth=5

表示框架宽度部分边缘所保留的空间

 

 

框架的显示

 ● _blank:链接的页面在新的窗口打开。

  ● _parent:链接的页面在父框架中打开。

  ● _self:链接的页面在自身窗口打开。

  ● _top:链接的页面在最外层框架中打开。

  ● main:链接的页面在所命名的框架中打开,这里main为框架的名称。

 

内嵌框架Iframe

Iframe是框架的一种标记,在页面设计中经常用到。

Iframe标记又叫浮动帧标记,使用Iframe可以将一个文档嵌入在另一个文档中显示,可以随处引用不拘泥网页的布局限制。在当今互联网网络广告横行的时代,Iframe更是无孔不入,将嵌入的文档与整个页面的内容相互融合,形成了一个整体。

与框架相比,内嵌框架Iframe更容易对网站的导航进行控制,最大的优点在于其灵活性

Iframe常用属性

   

   

Src

Iframe的文件路径

Name

Iframe框架名称,不可为中文

Longdesc

Iframe进行描述

Width

设置Iframe的宽度

Height

设置Iframe的高度

Align

设置Iframe的对齐方式:topmiddlebottomleftright

Frameborder

设置Iframe的边框

Marginwidth

设置Iframe距离所在网页元素左右的宽度

Marginheight

设置Iframe距离所在网页元素上下的高度

Scrolling

设置Iframe滚动条显示方式:yes(显示)、no(不显示)、auto(自动)

 

 

设置Iframe透明

Iframe还有一个更大的好处,就是可以设置框架透明,让框架内的背景和主页面背景一样。在上例操作中,细心的读者会发现这个问题,下面来详细说明如何设置Iframe透明。具体操作步骤如下:

1)打开配书光盘中的案例/frame/iframe/see_infomore_iframe1.htm

2)在浏览器中浏览该页文件,发现在插入Iframe的区域将原来单元格的背景覆盖了,这不是想要的效果。

3)打开page.htm页面,切换到代码视图,在<body>标记中插入代码如下:

<body style="background-color=transparent">

10.21  应用Iframe创建翻页

4)切换see_infomore_iframe1.htm到代码视图,查看页面插入Iframe的单元格的代码如下:

<td height="30" colspan="4" >

<iframe name="main"  width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm"></iframe>

</td>

5)在<Iframe>标记中,插入代码如下:

allowTransparency="true"

6)此时插入Iframe的单元格代码如下:

<td height="30" colspan="4" >

<iframe name="main"  width="100%" height="30" frameborder="0" border=0 scrolling="no" marginwidth="0" marginheight="0" src="page.htm" allowTransparency="true"></iframe></td>

7)保存page.htmsee_infomore_iframe1.htm两个页面,在浏览器中浏览效果。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值