frame作为html语言中的一部分，在网页制作中占据着重要的地位。大家看到很多网页上都好像windows下的资源管理器一样，在左边点击相应的链接，右边就会有相应的网页显示。就如我们进入邮箱的时候一样。这些都是使用frame的结果。

下面我来给大家介绍frame的具体使用方法。

使用frame必须首先用frameset来定义，可以说frameset就是frame的一个“统治者”。在html文档中，可以有frameset元素或者body元素，但是绝对不能同时使用这两种元素。

frameset元素的使用：

当然了，这个html文档在浏览器上什么也显示不出来。只是告诉大家最基本的frameset及frame的使用方法。

frameset是确定网页分框的定义，其属性rols及rows、border将在下面给大家介绍。

frame是frameset定义的每个“网页分框”的定义，其属性name、scrolling及noresize、marginHeight及marginWidth、frameborder也将在下面给大家介绍。

在本篇文章中，我还要给大家介绍浮动框架、超链接与框架的制作方法。

frameset元素的cols及rows属性

属性说明：cols及rows的作用是设置frame的宽度及高度

这段文档的显示效果如下图所示

示例说明：

第三行中的语句cols="20%,400,*" 定义了浏览器中frame的“列数”。20%说明最左边的frame占据整个浏览器宽度的百分比，400说明中间的frame占据整个浏览器的宽度是400个像素，*则说明除去左边和中间的frame以外的地方，其余全部留给最右边的frame。

第4、9、10行的frame是<frameset cols="20%,400,*">语句定义后的每个“框架”的各自定义。同样，第6、7行的frame是<frameset rows="30%,*">语句所定义的“框架”的各自定义。
 第二个frameset定义在一个frame之内，大家也从浏览器的结果看来了，横向的“框架”只出现在最中间的列向“框架”之中。

可以试图改变浏览器窗口的大小，就可以看出中间的frame的宽度是始终不变的，大小总是400像素。最左边的frame所占的比例总是总宽度的20%，剩下的宽度就留给了最右边的frame。横向frame同理。

frameset元素的border属性

属性说明：设置frame之间的距离，包括3-D边框

这段文档的显示效果如下图所示

示例说明：

• 如图，frame之间的宽度现在为10个像素。
• 如果定义border属性的值为0，则在浏览器中将不会看到边界。
• 同样，framespacing也可以设定frame之间的宽度，只不过framespacing设定的是附加的空间。
• 另外：bordercolor属性作用是设定边框的颜色，颜色值为标准RGB颜色值。

frame元素的name属性

属性说明：设置frame的名字

说明：框架的名称并不会影响到框架内显示的内容，名称的作用是指定相应框架链接的显示内容。

frameset元素的scrolling属性及noresize属性

属性说明：

scrolling:决定frame是否可以使用滚动条
noresize:决定frame是否可以改变大小

这段文档的显示效果如下图所示

示例说明：

如图，左边的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中的文字之前文字距离左右两边的空白距离

这段文档的显示效果如下图所示

示例说明：

如图，左边的框架中文字与上下底边都有60像素的空间空白，与左右两边都有30像素的空间空白。右边的框架没有使用这一属性，所以就没有空间空白。

frameset元素的frameborder属性

属性说明：决定是否在frame中显示边界

可以使用的值有四个，分别是1、0、no、yes。frameborder值为1或者yes，则会显示框线；frameborder值为0或者no，则不会显示框线。frameborder的默认值为1。

浮动框架的制作

浮动框架，就好像一个文档之中又嵌入了一个文档，或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe基本的语法格式如下

需要注意的是iframe与frameset不同，其可以与body元素共同出现在同一篇文档之中。

这段文档的显示效果如下图所示

示例说明：

iframe的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。

超链接与框架的制作

经过前面艰苦的学习，下面开始让我们一步一步地制作类似于访问邮箱的网页。

首先：我需要说明个部分的html文件，详见下表：

我在这个例子中，在左边的框架中设定了三个超链接。在右边框架中需要显示的就有三个网页。就是说左边框架中的内容是不会变的，右边框架是真正的“显示区域”，其内容根据左边框架中点击超链接的不同而不同。这样，左边的框架就好像一个目录一样，点击不同的链接，右边框架会显示不同的内容。

下面我来告诉大家各个网页的制作方法。

显示出来后的效果如下图所示。

在左边框架中点击不同的链接，可以看到右边框架会显示不同的内容。

同时，可以在“html语言教程1.htm”的最后加入下面的语句：

这样在右边框架中显示的《HTML语言教程1》这篇文档中会出现“全屏显示”字样的文字，点击后即会全屏显示此篇文档。大家不妨自己试一试。

同理，在网页中也可以设定一个浮动框架，点击不同的链接，会在浮动框架中显示不同的内容。原理与这个差不多，请读者自己完成。

关于frame的使用，还有很多我没有介绍到的。请读者自己参考相关资料，完善这方面的知识。

利用frame元素，可以制作出相当漂亮的网页，而且功能齐全。这全部依赖于大家的基础知识以及创作灵感！