IT学习者 | 文章大全 | 技术文档 | 桌面壁纸 | 实用查询 | 网络电台 | 成语 | 歇后语 | 网址 | 下载 | 周公解梦 | 生日密码 | 电视剧365 | Flash
 您现在的位置: IT学习者 >> 文章大全 >> 网页制作 >> HTML&CSS

快速精通FRAME(上)

【 作者:听风编译    来源:Yesky  更新时间:2005-12-27 | 字体:
  FRAME(框架)是Web上经常会看到的页面结构。使用可视Web开发工具(比如Dreamweaver或者Frontpage),虽然可以在WYSIWYG环境中通过简单的鼠标托拽完成FRAME的构建,但是要实现真正细致甚至强大的功能,仔细理解FRAME的代码结构至关重要!你将发现,FRAME原来是这样的亲切易用。

  创建基本的FRAMESET

  FRAMESET页面与普遍的Web页面有些不同。虽然仍旧以<HTML>和包含标题的<HEAD>标记以及其他脚本开始,但是其内容仅仅是表示的各个页面的版式设计。因此,不再需要有<BODY>元素,只需要<FRAMESET>标记。

  通过<FRAMESET>标记的<rows>和<cols>属性,浏览器窗口被分割为一个个格子。<rows>和<cols>的设置值可以是固定的像素值,可以是总空间的百分比值,还可以是用*以及一个数字相乘表示的分割剩余空间的比例值。比如说:

cols="80,20%,*" 分为3列,宽度分别为80像素,窗口宽度的20%,以及剩余宽度
rows="25%,75%" 分为2列,宽度分别为窗口宽度的25%和75%
rows="*,3*" 与上述第2个表示的一样,分为2列,但表示方法不同:第一列宽度为第二列的1/3

  在<FRAMESET>和</FRAMESET>之间,用多个<FRAME>标记表示每个分割区。col表示从左到右的列,row表示从上到下的行。每个<FRAME>有一个src属性,给出了这个FRAME的内容。它可以是浏览器能显示的任何一个合法URL,或者是另外一个FRAMESET。为预防递归现象,一个FRAME不能包含它本身所在的FRAMESET页面。要用name属性定义FRAME的名字,这样就可以在代码或者脚本程序中引用它。 请看一段基本的FRAMESET代码:

<HTML>
<HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
<FRAME name="TopRight" src="green.htm">
<FRAME name="BotLeft" src="blue.htm">
<FRAME name="BotRight" src="white.htm">
</FRAMESET>
</HTML>

<FRAMESET rows="105,*">
<FRAME name="adbanner" src="ad.html">
<FRAMESET cols="40%,60%">
<FRAME name="left" src="red.htm">
<FRAMESET rows="*,*">
<FRAME name="top" src="blue.htm">
<FRAME name="bottom" src="white.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET>

  FRAME间的链接

  一个FRAMESET结构的页面,新文档只转载进窗口的一部分中,而其他页面则保持静态不变。当用户点击FRAME中的链接时,新内容就在同一FRAME内打开。要让新内容在其他FRAME中打开,可以设置<A>标记的target属性值为那个FRAME的name值。

  而且,我们还可以设置打开目标为当前可见的任意一个FRAME,而不局限于本身的FRAMESET。目标可能是一个嵌套的FRAMESET中的FRAME,也可能是其他窗口中的FRAME。但是如果目标FRAME不存在,就会产生一个带有目标FRAME名字的新窗口。

  下面举个例子说明一下,假设有一个简单含2-FRAME的FRAMESET,文件名叫做home.html,代码如下:

<HTML>
<HEAD><TITLE>FrommCo home page</TITLE></HEAD>
<FRAMESET cols="115,*">
 <FRAME src="menu.htm">
 <FRAME name="content" src="main.htm">
</FRAMESET>
</HTML>

  文件menu.htm在左边的FRAME中,其中有一系列链接,点击它们后新内容将在右边的叫做content的FRAME中打开。下面是menu.html的代码:

<HTML><HEAD></HEAD>
<BODY><P><BR>
<IMG src="Images/tmp_logo.gif" alt="FrommCo"><P>
<A href="main.htm"  target="content">Main page</A><P>
<A href="mission.htm"  target="content">Our mission</A><P>
<A href="staff.htm"  target="content">Our staff</A><P>
<A href="splash.htm"  target="_parent">FrommCo splash page</A>
</BODY></HTML>

  请注意最后一个链接中target的定义为_parent,这属于4个特殊的保留值。它们是:
  • _parent:在当前FRAMESET位置显示新href。
  • _top:在当前整个窗口位置显示新href,比如本身FRAMESET位于另一个FRAMESET中。
  • _self:强制在当前FRAME中显示新href。
  • _blank:在新窗口中显示href。

  表示客户端图形地图的<AREA>标记同样可以应用target属性,比如:

  <AREA shape=circle coords="75,75,50" href="main.htm" target="content" alt="Main page">

  还有一种经常的情况是:Web页面中的大部分或者全部链接都要求在一个特别的FRAME中打开。这时,可以在页面的<HEAD>代码区使用<BASE>标记设置默认的target,然后再分别定义特殊链接的target值。

  修饰FRAME

  FRAMESET不仅在宽度、高度等方面具有可控制的数值,在美观方面也同样可以精确设置。

  默认情况下,FRAMESET的FRAME间有一个凸起的边沿,表示分割效果。如果不喜欢这个,想营造“无缝连接”的效果,可以在<FRAME>标记中设置FRAMEborder=0来消除它。在3.0及高版本的Navigator和Internet Explorer中,如果在<FRAMESET>标记中设置FRAMEborder=0,那么除了设置为FRAMEborder=1的FRAME外,所有其他FRAME的边沿都将消失。

  虽然设置了FRAMEborder=0,有些浏览器仍旧会在FRAME间保留一些边沿的颜色痕迹。这时,可以在<FRAMESET>标记中添加FRAMEspacing=0(对Internet Explorer)或者border=0(对Navigator和Opera)实现真正的无缝连接。

  请看下面的代码是如何使用这些属性的:


<HTML>
<HEAD><TITLE>FrommCo home page</TITLE></HEAD>
<FRAMESET cols="115,*" FRAMEspacing=0 border=0>
 <FRAME src="menu.htm" FRAMEborder=0 noresize scrolling=no>
 <FRAME name="content" src="main.htm" FRAMEborder=0>
</FRAMESET>
</HTML> 


  上面的代码中有2个新的属性:noresize表示锁住FRAME而不允许使用鼠标改变大小,scrolling=no表示屏蔽FRAME的滚动条,scrolling=yes表示允许,scrolling=auto表示根据显示内容需要自动显示滚动条。

  浮动FRAME

  浮动FRAME是HTML4.0规范中的一个定义,目前的浏览器都支持它。

  不象FRAMESET表示的分割区样子,一个浮动FRAME作为一个内置对象存在于Web页面上,其样式就象一个页面上的一个图形或者一个applet。浮动FRAME使用<IFRAME>标记,它具有与<FRAME>相同的大多数属性设置,包括:name、src、marginwidth、marginheight、FRAMEborder以及scrolling。同时,它还具有与图形或者applet一样的height、width和align属性。

  而且,浮动FRAME遵循与普通FRAME一样的target原则:我们可以通过它的name来指向它。本原则适用于在任一类型FRAME中的浮动FRAME,反之易然。浮动FRAME中的没有traget的链接指向它本身,而_parent链接则指向包含<IFRAME>的文档所在的FRAME或者窗口。比如:


<IFRAME name="floater" src="start.htm" width=150 height=200 hspace=10 align=left>
 <IMG src="Images/noFRAME.gif" alt="You can't see the floating FRAME"
  width=150 height=200 hspace=10 align=right>
</IFRAME><BR>
<A href="one.htm"  target="floater">Show one.htm</A><P>
<A href="two.htm"  target="floater">Show two.htm</A><P>
<A href="start.htm"  target="floater">Bring back start.htm</A>

  注意,对应支持<IFRAME>标记的浏览器,任何位于<IFRAME>和</IFRAME>间的内容都将忽略。反之,其中的内容将显示出来,这可以用作解释当前浏览器不支持<IFRAME>。


相 关 文 章
相 关 软 件
没有相关下载

音乐
嫁衣 画心 放生 天亮了 牡丹江 那滋味 擦肩而过 怀念过去 北京欢迎你 突然好想你 吻的太逼真 说好的幸福呢 坐上火车去拉萨 没有人比我更爱你
愚爱 心碎 稻香 带我走 醉赤壁 魔杰座 我还想她 明天过后 一定要爱你 等爱的玫瑰 原谅我一次 越单纯越幸福 最后一次的温柔 给我一首歌的时间
白狐 光荣 降临 下雨天 小酒窝 樱花草 恋爱新手 说唱脸谱 红色高跟鞋 寂寞才说爱 深深爱过你 爱上你是个错 即使知道要见面 不是因为寂寞才想你
城府 假如 花海 兰亭序 棉花糖 舍不得 最后一次 女人如烟 外滩十八号 我们的纪念 我们的无奈 心在跳情在烧 爱上你是我的错 爱情里没有谁对谁错
加入收藏留言建议自助友情链接普通友情链接站长的Blog
版权所有   COPYRIGHT 2002-2008 ★IT学习者★ ALL RIGHTS RESERVED.