frame作为html语言中的一部分,在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样,在左边点击相应的链接,右边就会有相应的网页显示。就如我们进入邮箱的时候一样。这些都是使用frame的结果。
下面我来给大家介绍frame的具体使用方法。
使用frame必须首先用frameset来定义,可以说frameset就是frame的一个“统治者”。在html文档中,可以有frameset元素或者body元素,但是绝对不能同时使用这两种元素。
frameset元素的使用:
(1)<html>
(2)<head><title>frameset元素的使用</title></head>
(3)<frameset>
(4)<frame>
(5)<frame>
(6)</frameset>
(7)</html>
当然了,这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。
frameset是确定网页分框的定义,其属性rols及rows、border将在下面给大家介绍。
frame是frameset定义的每个“网页分框”的定义,其属性name、scrolling及noresize、marginHeight及marginWidth、frameborder也将在下面给大家介绍。
frameset元素的cols及rows属性
属性说明:cols及rows的作用是设置frame的宽度及高度
(1)<html>
(2)<head><title>frameset元素中cols及rows属性的使用</title></head>
(3)<framesetcols="20%,200,*">
(4)<frame>
(5)<framesetrows="30%,*">
(6)<frame>
(7)<frame>
(8)</frameset>
(9)<frame>
(10)<frame>
(11)</frameset>
(12)</html>
示例说明:第三行中的语句cols="20%,400,*"定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比,400说明中间的frame占据整个浏览器的宽度是400个像素,*则说明除去左边和中间的frame以外的地方,其余全部留给最右边的frame。第4、9、10行的frame是<framesetcols="20%,400,*">语句定义后的每个“框架”的各自定义。同样,第6、7行的frame是<framesetrows="30%,*">语句所定义的“框架”的各自定义。
第二个frameset定义在一个frame之内,大家也从浏览器的结果看来了,横向的“框架”只出现在最中间的列向“框架”之中。可以试图改变浏览器窗口的大小,就可以看出中间的frame的宽度是始终不变的,大小总是400像素。最左边的frame所占的比例总是总宽度的20%,剩下的宽度就留给了最右边的frame。横向frame同理。
frameset元素的border属性
属性说明:设置frame之间的距离,包括3-D边框
(1)<html>
(2)<head><title>frameset元素中border属性的使用</title></head>
(3)<framesetcols="20%,60%,*"border=10>
(4)<frame>
(5)<frame>
(6)<frame>
(7)</frameset>
(8)</html>
示例说明:frame之间的宽度现在为10个像素。如果定义border属性的值为0,则在浏览器中将不会看到边界。同样,framespacing也可以设定frame之间的宽度,只不过framespacing设定的是附加的空间。
另外:bordercolor属性作用是设定边框的颜色,颜色值为标准RGB颜色值。
frame元素的name属性
属性说明:设置frame的名字
(1)<html>
(2)<head><title>frame元素中name属性的使用</title></head>
(3)<framesetcols="50%,*">
(4)<framename="left"src="html语言教程1.htm">
(5)<framename="right"src="html语言教程2.htm">
(6)</frameset>
(7)</html>
说明:框架的名称并不会影响到框架内显示的内容,名称的作用是指定相应框架链接的显示内容。
frameset元素的scrolling属性及noresize属性
属性说明:
scrolling:决定frame是否可以使用滚动条
noresize:决定frame是否可以改变大小
(1)<html>
(2)<head><title>frame元素中scrolling属性及noresize属性的使用</title></head>
(3)<framesetcols="30%,40%,*">
(4)<framename="left"src="html语言教程1.htm"scrolling=no>
(5)<framename="center"src="html语言教程2.htm"noresize=true>
(6)<framename="right"src="html语言教程3.htm"scrolling=yes>
(7)</frameset>
(8)</html>
示例说明:左边的frame使用了scrolling=no的属性,则无论需要显示的页面有多大,都不会有滚动条出现。中间的frame使用了noresize=true属性,这用户不能调整frame的大小(大家可以看到以前例子中的frame是可以调整大小的)。最右边的frame使用了scrolling=yes的属性,在这里大家看得不是很清楚,如果需要显示的页面过小,就是说不需要滚动条也能够显示出全部,则此时最右边的frame也是拥有滚动条的。默认情况下,scrolling的值是auto。而noresize是一个布尔型的变量,当为true时,不能改变frame的大小;为false时(默认情况),可以改变frame的大小。
frameset元素的marginHeight属性及marginWidth属性
属性说明:
marginHeight:设定在显示frame中的文字之前文字距离顶部及底部的空白距离
marginWidth:设定在显示frame中的文字之前文字距离左右两边的空白距离
(1)<html>
(2)<head><title>frame元素中marginHeight属性及marginWidth属性的使用</title></head>
(3)<framesetcols="50%,*">
(4)<framename="left"src="html语言教程1.htm"marginHeight=60marginWidth=30>
(5)<framename="right"src="html语言教程2.htm">
(6)</frameset>
(7)</html>
示例说明:左边的框架中文字与上下底边都有60像素的空间空白,与左右两边都有30像素的空间空白。右边的框架没有使用这一属性,所以就没有空间空白。
frameset元素的frameborder属性
属性说明:决定是否在frame中显示边界。可以使用的值有四个,分别是1、0、no、yes。frameborder值为1或者yes,则会显示框线;frameborder值为0或者no,则不会显示框线。frameborder的默认值为1。
浮动框架的制作
浮动框架,就好像一个文档之中又嵌入了一个文档,或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe基本的语法格式如下
<IFRAMEID=IFrame1FRAMEBORDER=0SCROLLING=NOSRC="sample.htm"></IFRAME>
需要注意的是iframe与frameset不同,其可以与body元素共同出现在同一篇文档之中。
(1)<html>
(2)<head><title>浮动框架的使用</title></head>
(3)<body>
(4)<h1>浮动框架的使用</h1><hr>
(5)<iframename="inside"src="html语言教程1.htm"height=300width=200align=right>
(6)</iframe>
(7)<p>右边显示的是《html语言教程1》中的内容。现在就好像是在这个网页中又嵌入了另外的一个网页。使用的就是iframe元素。这样可以使网页的可视性加强,对于讲解、说明等特定网页十分适合。</p>
(8)</body>
(9)</html>
示例说明:iframe的作用就是在网页中标记出一块区域,使得这块区域可以显示其他内容。iframe元素中的各种常用属性,border、frameBoder、marginHeight、marginWidth、scrolling等,与frame中的用法相同,不再重复。
超链接与框架的制作
经过前面艰苦的学习,下面开始让我们一步一步地制作类似于访问邮箱的网页。
首先:我需要说明个部分的html文件,详见下表:
HTML文件
说明
main.htm主页面,分为左右两个框架
host.htm左边框架所显示的内容。用于索引文件之用,点击其中不同的链接,右边框架会显示不同的内容。
html语言教程1.htm在右边框架中准备需要显示的内容
html语言教程2.htm
html语言教程3.htm
在这个例子中,在左边的框架中设定了三个超链接。在右边框架中需要显示的就有三个网页。就是说左边框架中的内容是不会变的,右边框架是真正的“显示区域”,其内容根据左边框架中点击超链接的不同而不同。这样,左边的框架就好像一个目录一样,点击不同的链接,右边框架会显示不同的内容。
下面我来告诉大家各个网页的制作方法。
main.htm
(1)<html>
(2)<head><title>超链接与框架的制作</title></head>
(3)<framesetcols="20%,*">
(4)<framename="index"src="host.htm">
(5)<framename="content"src="html语言教程1.htm">
(6)</frameset>
(7)</html>
host.htm
(1)<html>
(2)<head><title>超链接与框架的制作</title></head>
(3)<body>
(4)<ahref="html语言教程1.htm"target="content">html语言教程1</a><br/>
(5)<ahref="html语言教程2.htm"target="content">html语言教程2</a><br/>
(6)<ahref="html语言教程3.htm"target="content">html语言教程3</a>
(7)</body>
(8)</html>
在左边框架中点击不同的链接,可以看到右边框架会显示不同的内容。同时,可以在“html语言教程1.htm”的最后加入下面的语句:
<ahref="html语言教程1.htm"target="_top">全屏显示</a>
这样在右边框架中显示的《HTML语言教程1》这篇文档中会出现“全屏显示”字样的文字,点击后即会全屏显示此篇文档。大家不妨自己试一试。同理,在网页中也可以设定一个浮动框架,点击不同的链接,会在浮动框架中显示不同的内容。原理与这个差不多,请读者自己完成。
分享到:
相关推荐
Frameset_详解;Frameset html;Frameset;Frameset_详解;Frameset html;Frameset;Frameset_详解;Frameset html;Frameset
frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。[1] 类别 ...
简单说明frame 及frameset标签中的各个属性,以及各个属性的作用。
就如我们进入邮箱的时候一样。这些都是使用frame的结果。 下面我来给大家介绍frame的具体使用方法。 使用frame必须首先用...在html文档中,可以有frameset元素或者body元素,但是绝对不能同时使用这两种元素。
frameset 框架frameset 框架frameset 框架
页面布局frameset frame
实现了div 在框架任意位置移动的,。。。。。。。。。。。。。。。。。。。
frameset遮罩
里面包含了frameset,frame以及iframe的一些技术的演练,希望对大家有帮助,如果有什么补充或疑问,可以加QQ374053115进行和我讨论交流,互相进步!里面代码均手写,大致功能都已经实现,如果错误欢迎指出!
配置了spring 3.0.5 + hibernate 3.6 + struts 2.2.3 一个简单的frameset 权限跳转静态页面
纵向排列多个窗口: <frameset cols=30%,20%,50%> <frame src="frame/A.html"> <frame src="frame/B.html"> <frame src="frame/C.html"> </frameset>
frameset的应用:编写了几个jsp页面 1.<frameset>:定义一个框架集,它被用来组织多个窗口。每个窗口都是一个独立的html界面。 2.<frameset>有两个参数,cols和rows。cols:列的数目和尺寸。rows:行的...
测试IE6/火狐/google浏览器通过 注意:一定要按顺序摆放属性。否则会出现意外情况!
js 操作 frameset frame iframe对象
初学这个,所以想大家分享一下 主要就是frameset中的一些属性啦
HTML框架演示 frameset和frame综合应用 左右、下上结构
代码可用,html的frameset和target的应用
BIRT framest servelet 汉化包 frameset工具栏及相关ajax页面汉化 已完成viewservlet.jar中messages.properties 中文版
简单、一看就懂,很简单的描述frameset框架的应用