HTML之前端框架

框架是一种划分浏览器窗口的特殊方式,通过使用框架可以将多个网页组合成一个页面显示在浏览器中。浏览器的各个页面之间相互独立,却又相互关联。用户在浏览器这种页面的时候,当对其中某一个部分进行操作,如浏览、下载的时候,其他页面保持不变,这样的页面就被称为框架结构的页面,也称为多窗口页面。

创建框架

实际上框架对象本身也一类窗口,它继承了窗口对象的所有特征,并拥有所有的属性和方法。使用框架最主要的目的就是创建链接的结构,最常见的框架结构就是网站的导航条作为一个单独的框架窗口。框架主要包含两个部分:框架集和具体的框架文件。框架集和具体的框架文件。框架集<FRAMESET>用来定义一个HTML文件为框架模式,并设定视窗如何分割。其实框架集就是存放框架结构的文件,也是访问框架文件的入口文件,其基本语法如下:

<FRAMESET>
<FRAME SRC="">
<FRAME SRC="">
......
</FRAMESET>

其中,每个<FRAME>标记中都会定义一个框架,也就是使用SRC属性定义一个真正显示内容的页面地址。在一个框架集文件内,定义了几个<FRAME>标记,就表示它将页面划分了几个窗口。例如上述语法中就表示将页面划分为两个窗口,而对于窗口的分割方式等,则需要通过属性来设置。

分割窗口

框架结构最大的特点就是将一个单独的窗口分割成多个窗口,窗口的分割方式需要在框架集页面中进行设置。框架集是框架结构的基础,只要通过框架集,各个框架窗口才能结合起来组成一个真正的网页文件。因此,对于框架集的属性设置,也是使用框架最基础的操作。而分割窗口则是基础中的基础。

上下分割
既然是框架结构的页面,就要包含多个框架窗口,设置框架窗口的排列方式是必不可少的工作。上下分割窗口就是在窗口的水平方向上划分出几条分割线,将页面分成由上到下几个窗口,需要使用ROWS属性,其语法是:

<FRAMESET ROWS="各个窗口的高度">
<FRAME SRC="">
<FRAME SRC="">
......
</FRAMESET>

其中,ROWS属性定义的是各个窗口的高度值,这些值可以是绝对的像素值,也可以是相对于整个页面的百分比。各窗口高度值之间使用逗号分隔开。

左右分隔
左右分隔窗口就是在浏览器中沿垂直方向分割为几个窗口,这些窗口左右分布,其设置属性是COLS,使用的语法是:

<FRAMESET COLS="各个窗口的宽度">
<FRAME SRC="">
<FRAME SRC="">
......
</FRAMESET>

同样,COLS也可以取多个值,每个值表示一个框架窗口的水平宽度,它的单位可以是像素,也可以是占浏览器的百分比。与水平分割窗口相同,一般设定了几个COLS的值,就需要有几个框架窗口。

窗口的嵌套
除了可以对窗口进行上下分割和左右分格外,也可以混合利用这两种模式,这就是窗口的嵌套。嵌套分割窗口就是在框架中嵌套框架集,一个浏览器页面内既有上下分割的窗口,又在左右分割的窗口。窗口嵌套的语法如下所示:

<FRAMESET>
	<FRAME SRC=""/>
	<FRAMESET>
		<FRAME SRC="">
		<FRAME SRC="">
	</FRAMESET>
</FRAMESET>

其中,框架集里起码要有一个框架页面在嵌套多个框架集,在被嵌套的框架集中最少要有两个子框架页面,否则嵌套就没有意义了。

设置框架边框

除了设置框架的分割方式外,还有一些属性需要在框架集页面中设置,包含框架的边框大小、颜色等。

设置框架边款显示或隐藏
默认情况下,框架的边框是显示出来的。有时候,用户希望隐藏框架结构中的框架分割线,这时候可以通过设置FRAMEBORDER实现。设置框架边框的语法是:

<FRAMESET FRAMEBORDER="框架显示属性值">
	<FRAME SRC="">
	<FRAME SRC="">
	......
</FRAMESET>

在这里,框架的显示属性值只能取0或1,取0的时候表示不显示边框,取1则表示显示边框。默认效果就是取值为1的效果。

设置框架边框宽度
不同浏览器中对框架边框的宽度显示都不一致,在HTML4.01中也没有规定用于设置框架边框宽度的属性,但是很多浏览器都支持在<FRAMESET>标签里使用BORDER属性来设置边框宽度。设置框架边款宽度的语法如下所示:

<FRAMESET BORDER="框架边框宽度">
	<FRAME SRC="">
	<FRAME SRC="">
</FRAMESET>

其中,边框宽度的值以像素为单位。

设置框架边框颜色
默认情况下,框架的边框是灰色的,可以使用BORDERCOLOR属性将其设置为其他颜色,但BORDERCOLOR属性要在BORDER属性存在的时候才可以产生效果。其语法如下所示:

<FRAMESET BORDERCOLOR="颜色值">
	<FRAME SRC="">
	<FRAME SRC="">
	.....
</FRAME>

其中,颜色值可以是颜色的英文单词,也可以是十六进制的颜色代码。

框架属性

在框架结构中,除了可以设置框架的各种属性外,对于每一个框架窗口,也可以通过设置不同的属性来呈现不同的框架效果。

设置框架滚动条显示
默认情况下,当框架窗口的内容不足以在分割的区域内显示时,会出现滚动条,以方便用户查看。滚动条会自动在各个无法完全显示的框架窗口内出现,使用SCROLLING属性可以分别对各个框架窗口的滚动条进行设置,其语法是:

<FRAMESET>
	<FRAME SRC="" SCRLLING="属性值">
	......
</FRAMESET>

在这里,SCROLLING的属性值可以取值为Yes、No或者Auto,其含义如下:

属性值		具体的含义
Yes			一直显示滚动条,无论页面是否完全显示
No			从来不显示滚动条,即使内容无法完全显示出来
Auto		根据页面的长度自动调整,当页面无法完全显示的时候就显示滚动条。该属性值是HTML框架结构页面的默认效果。

固定框架
在默认情况下,框架窗口的大小是可以由用户自己来调整的,不过有些时候网页开发者会不希望用户可以自己调整框架大小而影响了网页效果。在HTML4.01里允许通过FRAME元素的NORESIZE属性来禁止浏览用户调整框架窗口大小。固定框架语法如下所示:

<FRAMESET>
	<FRAME SRC="" NORESIZE>
	......
</FRAMESET>

NORESIZE属性没有属性值,哪个框架窗口使用了NORESIZE属性,该框架窗口的大小就不能由用户调整。

不支持框架标记
框架结构虽然对于页面导航很有效,但是有些浏览器并不支持框架页面。因此对于框架结构的网页,有时候无法正常显示,这就影响了用户的阅读。使用<NOFRAMES>标记可以使这些浏览器能够读取标记内的内容,而对于支持框架结构的浏览器来说,则会自动忽略其中的内容。
<NOFRAMES>被称为不支持框架标记,其使用语法是:

<FRAMESET>
	<FRAME SRC="页面源文件地址" NORESIZE>
	......
	<NOFRAMES>
	......
	</NOFRAMES>
</FRAMESET>

在这里,放置在标记<NOFRAMES>和</NOFRAMES>之间的内容,就是在不支持框架的浏览器所显示的内容。

在框架中使用链接

框架的链接和普通链接一样,都需要使用<A>标记。需要特别指出的是,当框架结构中的一个框架作为变换页面时,需要为该框架窗口命名,然后根据名称对框架进行变换。这就需要使用NAME标记和TARGET标记,其中NAME标记用来为窗口命名,而TARGET标记则用来引导链接页面在框架内打开。

浮动框架

在框架结构中,处理固定的分割方式之外,还有一种框架窗口可以作为一个页面元素添加到普通页面中,这样框架窗口可以位于页面的各个位置,这种框架结构被称为浮动框架。浮动框架带有许多属性,通过这些属性可以调整框架页面的样式、以及它在页面中的布局,其属性如下:

属性					具体含义
SRC					浮动框架页面的源文件地址
WIDTH				浮动框架在页面中显示的宽度
HEIGHT				浮动框架在页面中显示的高度
ALIGN				浮动框架页面在浏览器中的对齐方式,可以为左对齐、右对齐或居中对齐
NAME				设定框架页面的名称
MARGINWIDTH			设置框架边缘宽度
MARGINHEIGHT		设置框架边缘高度
SCROLLING			设定浮动框架页面内是否显示滚动条
FRAMEBORDER			设定浮动框架的边框

插入浮动框架
在HTML里,可以使用<IFRAME>标签来创建浮动框架。<IFRAME>标签与<IMG>标签一样,可以放在<BODY>标签之内的任何一个位置。<IFRAME>标签里的SRC属性可以用来指定浮动框架载入的文档URL。插入浮动框架语法如下所示:

<IFRAME SRC="页面源文件地址">
</IFRAME>

浮动框架大小
在普通框架中,由于框架就是整个浏览器窗口,因此不需要设置其大小。但是浮动框架是插入到普通HTML页面中的一个元素,可以使用WIDTH和HEIGHT属性调整其大小,其语法是:

<IFRAME SRC="页面源文件地址" WIDTH="窗口宽度值" HEIGHT="窗口高度值">
</IFRAME>

浮动框架对齐方式
默认情况下浮动框架是左对齐的。如果不想让浮动框架左对齐,可以使用ALIGN属性对框架的对齐方式进行更改,其语法如下所示:

<IFRAME SRC="" ALIGN="left/center/right">
</IFRAME>

与设置其他页面元素的对齐方式类似,浮动框架的对齐方式包括:left、center和right,分别表示左对齐、居中对齐和右对齐。其中左对齐方式是浮动框架的默认对齐方式。

浮动框架页面的链接
除了普通的框架结构外,浮动框架也可以制作页面之间的而链接。在一个浮动窗口内可以链接多个页面。首先为浮动框架窗口定义名称,然后将链接文字的目标页面打开方式设置为定义的窗口名称,即将超链接的TARGET属性设置为浮动窗口的名称。这样,当运行程序的时候,就会在浮动窗口打开链接的目标页面了。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值