掌握Frameset：HTML网页布局核心技术

需积分: 34 80 浏览量更新于2024-09-17 收藏 135KB PDF 举报

Frameset是HTML中用于创建网页布局的一种技术，它允许开发者在同一个浏览器窗口中嵌入多个独立的HTML文档或页面，从而实现多窗口浏览的效果。这种结构通常用于创建具有多个部分或区域的复杂网页布局，比如新闻站点的左侧栏、右侧内容区以及底部广告栏等。在Frameset中，关键的概念是FRAMESET元素，它替代了常规HTML中的BODY元素来组织页面结构。使用＜FRAMESET＞标签，开发者可以通过rows和cols属性来定义浏览器窗口的分割，这些属性可以接受像素值、百分比值，甚至是星号(*)配合数字，用来表示剩余空间的分配。例如，"cols="80,20%,*"定义的是3列布局，第一列占80像素，第二列占窗口宽度的20%，剩下的空间平均分配。 frames的定义通过＜FRAME＞标签完成，每个frame都有一个src属性，用于指定要加载的页面地址，可以是外部URL或另一个frameset。为了避免循环引用，一个frame不能嵌套包含自己所在的frameset。为了方便引用，可以给每个frame命名，使用name属性。一个简单的Frameset示例如下： ```html <HTML> <HEAD> <TITLE>Simple FRAMESET</TITLE> </HEAD> <FRAMESET cols="40%,60%" rows="2*,*"> <FRAME name="TopLeft" src="red.htm"> <FRAME name="TopRight">  </FRAMESET> </HTML> ``` 在这个例子中，浏览器窗口被划分为两列，顶部有两帧，TopLeft占据40%的宽度，TopRight占据60%。第一列的宽度是第二列的一半，rows="2*,*"意味着第一行的高度占窗口高度的2/3，剩余部分平均分配。掌握Frameset对于创建响应式和可定制的网页布局非常重要，但在现代Web开发中，由于其复杂性和对SEO的不利影响（搜索引擎可能无法正确抓取frames的内容），HTML5的iframe标签以及CSS Grid或Flexbox等更现代布局技术更常被推荐使用。然而，了解Frameset的基本原理仍然是理解Web开发历史和实现特定布局需求的基础。

腾翼网交流论坛

教程文章

-> [html

学习

]

快速学习精通

FRAME

（框架）

回复主题

发

表主题

ShimingQiu

2005-12-30 18:56

: 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

＞

页码，1/7[html学习]快速学习精通FRAME（框架）教程文章腾翼网交流论坛 - power...

2006-2-27http://bbs.tengyi.cn/simple/index.php?t1054.html

下载后可阅读完整内容，剩余6页未读，立即下载

ni__hao

粉丝: 3
资源: 88

掌握Frameset：HTML网页布局核心技术

HTML里面的FrameSet小例子

好看的frameset实例

Frameset框架文档

frameset元素属性详解

HTML FRAMESET标签详解与用法实例

HTML框架集<frameset>详解与应用

HTML框架frameset与frame详解

XHTML基础与框架型Frameset详解

BIRT_Viewer_2_2_参数设置详解.pdf

HTML5基础教程：<frameset>标签详解

最新资源