用好HTML的帧窗口标记

2016-02-19 21:36 27 1 收藏

今天图老师小编要跟大家分享用好HTML的帧窗口标记,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - Web开发 】

  帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果。实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口。每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果。

  在HTML中用frameset(分割窗口标记)来分割窗口,frameset在多窗口页面中的地位就相当于body在普通单窗口页面中的地位,在页面中用frameset……/frameset标志页面主体部分的起止位置。而且,frameset标记决定了怎样划分窗口,以及每个窗口的位置和大小。其基本语法结构如下:

frameset
cols=n
rows=n
frameborder=yes|no
border=n
bordercolor=#n
framespacing=n
cols和rows:是决定页面如何分割的两个参数。分割左右窗口用cols,各帧的左右宽度用占窗口宽度的百分比来表示。比如:cols="30%,40%,*"就表示水平方向分割成三个窗口,各自所占总宽度的百分比依次是30%,40%和30%。其中"*"表示剩余部分,也就是说"*"对应的小窗口宽度为剩余的宽度。分割上下窗口用rows,同样采用百分比的设定方法。

frameborder:是指定各分窗口是(ye)否(no)要加边框;如果加过框的话,则用 border参数指定边框的宽度,bordercolor指定边框的颜色。

framespacing:用于设定各分窗口之间的间隔大小,默认值是0。

  用frameset标记把窗口分割好后,各窗口的属性是用HTML的frame标记来定义的,所以frameset标记中必须包含frame标记,用以定义各分窗口的属性。其语法如下:

frame
align=left|center|right|top|bottomv name=framename
src=url
noresize
scrolling=yes|on|auto
frameborder=yes|no
bordercolor=#n
marginheight=n
marginwidth=n
align:设定分窗口的位置是靠左(left)、靠右(right)、居中(center)、靠上(top)还是靠底(bottom)。
name:用于指定分窗口的名称,src则用于指定分窗口所对应的HTML页面地址。
noresize:是对用户来说的,当frame标记中包含此参数的时候,用户就不能用鼠标调整修改各分窗口的大小。
scrolling:设定分窗口是否要滚动条。scrolling=no时不要滚动条,scrolling=yes时表示要滚动条,scrolling=auoto时表示根据实际情况自动设置滚动条。
frameborder和bordercolor:是设定分窗口有无边框和边框颜色的。但对象只限于用frame标记的分窗口。
marginheight和marginwidth:分别用于设定分窗口的上下边缘和左右边缘的宽度。

  用上面的两个标记,就能够实现多窗口页面,下面将举例说明。

  1、左小右大两窗口

  这种页面一般在左边的窗口放一个网站导航页,右面放网站页面内容。制作方法:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  先用frameset标记并通过设置其cols参数,沿水平方向分割成两个窗口,左边的窗口占20%,右边的窗口取剩余部分,再用frame标记分别定义两个窗口的属性。完成后的分帧页面源代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

html
head
title分帧窗口示例/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/head
frameset cols="20%,*"
frame name="leftFrame" noresize src="ahtml.htm"
frame name="mainFrame" noresize src="bhtml.htm"
/frameset
noframes
body
p很抱歉!这是一个分帧页面,但由于你的浏览器不支持,所以不能浏览! /p
pSorry!This page uses frames,but your browser doesn't support them .
/body/noframes
/html

  从上面的代码看,设计帧窗口页面并没有想象得那么复杂,但以下几点在具体操作时要注意:

  1)用frame标记定义分窗口属性时,要注意其在frameset标记中的顺序,切不要搞乱了;
  2)分窗口的名称虽可随意定,但最好是以其所在位置命名比较好;
  3)分窗口的scrolling(滚动条)一般取其默认值"auto"比较好;
  4)虽然在最终往往不要分窗口的边框,但在设计阶段,还是设置为有边框比较好,这样在编辑时一目了然;
  5)上面页面代码中后面那句话一般加上为好,因为有的浏览器版本不支持分帧页面,若没加那名话,用户的浏览器若不支持分帧时,看到的是一片空白,不知是怎么一回事了,有那句话提示一下就明白了。

  2、一顶一左一右页面

  先看这种分帧页面的源代码:

frameset rows="20%,*"
frame name="topFrame" scrolling="NO" noresize src="toppage.htm"
frameset cols="18%,*"
frame name="leftFrame" noresize src="leftpage.htm"
frame name="mainFrame" src="mainpage.htm"
/frameset
/frameset

  从上面的代码中可看出,建立复杂分帧页面的方法是由简到繁,如本例中,先用frameset定义其“rows”参数,把窗口分成上下两个窗口,再用frame标记定义上部窗口,因下部窗口还需再分,所以不用frame定义其属性,而是用frameset标记设置其cols参数,把它再分成左右两个窗口,因已达目的,所以开始用frame标记定义左右两个窗口的属性。

  只要记住:先粗分,后细分,cols横向分, rows纵向分,无需再分的窗口用frame定义属性,这些基本原则,制作分帧窗口页面就会轻松自如。

来源:https://www.tulaoshi.com/n/20160219/1626647.html

延伸阅读
标签: Web开发
点击这里返回脚本之家 HTML教程 栏目. 上文: 标记语言邪恶表格 原文出处Chapter 4 引用 Misquotations are the only quotations tha are never misquoted (只有错误的引用永远不会被误用) - Hesketh Pearson 所有类型的网站都经常会使用引用,不管是引用其他网页、作者或出版物的内容,以标准方法标记引用内容是非常有好处的。因为一旦完...
  ■ 框架标记 <FRAMESET <FRAME <NOFRAMES <IFRAME 欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。 也请先明白围堵标记与空标记的分别,请看 【HTML概念】。 ■ 框架概念 : 谓框架便是网页画面分成几个框窗,同时取得多个 URL。只需要 <FRAMESET <FRAME 即可,面所有框架...
  ■ 字体标记 <STRONG <B <I <EM <VAR <CITE <DFN <ADDRESS <TT <SAMP <CODE <KBD <U <STRIKE <BIG <SMALL <SUP <SUB <H1 <H2 <H3 <H4 <H5 <H6 <FONT <BASEFONT 欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。 也请...
  ■ 图形标记 <IMG 欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。 也请先明白围堵标记与空标记的分别,请看 【HTML概念】。 ■ <IMG : <IMG 称图形标记,主要用来插入图形标记,主要用来插入图片于网页中,至于其它用处如配合影片档案等的播放 及影像地图(Image Map 或称一图多链接)...
  ■ 清单标记 <OL <LI <UL <MENU <DIR <DL <DT <DD 欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。 也请先明白围堵标记与空标记的分别,请看 【HTML概念】。 ■ <OL <LI : ▲Top <OL称为标记。<LI则用以标示清单项目。 所谓顺序清单就是在每一项前加...

经验教程

950

收藏

41
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部