导读：在做项目的过程中，发现网页的一些地方是不变的，比如说顶部、底部。而变幻的内容就只是一部分。这个时候在想，这是每次都刷新一个界面呢，还是有别的快捷方法呢。然后就找到了frameset 这个东西。本篇博客是结合一个小实例对frameset的简单介绍。

一、是什么

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。

优点：

1，在frameset里使用iframe来实现常规的一些分栏布局，可以借助一个页面承载多个页面的方式来重用页面代码。 

2，一个页面中的iframe之间可以互相实现关联，而且不需要依靠过多的js就可以实现类似“局部”刷新的机制。

缺点：

1，如果要实现不同iframe之间的dom元素产生互动和关联，需要的js复杂程度较高，而且有些根本实现不了（比如拖拽，比如用户自定制页面布局）。

2，一个页面承载多个页面的http请求，而且实现那种类似局部刷新的效果，不是后台运行请求的机制，而也是使用了前台的浏览器刷新机制，会有延迟的响应而且无法对响应进行控制（比如loading或者一些响应状态的监听）。

使用场景：

适用于有固定布局的系统

二、实例简介

2.1，上、下、左的布局

top：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——top</title>

  </head>  

  <body>

    <div style="text-align:center;color:blue;font-size:50px">（这里是头部）牡丹亭</div>

  </body>

</html>  </span>

bottom：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——bottom</title>

  </head>  

  <body>

    <div style="text-align:center;color:blue;font-size:30px">（底部）

		《皂罗袍》

	</div>

  </body>

</html>  </span>

left：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——left</title>

  </head>  

  <body>

    <div style="color:blue;font-size:30px">（左边）

	</br>

	《牡丹亭》

	</br>

	作者：汤显祖

	</br>

	<a target="right" href="right.html">前两句</a> </br>

	<a target="right" href="myright.html">后两句</a>

	</div>

  </body>

</html>  </span>

2.2，center中的右面布局

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——right</title>

  </head>

  <body>

    <div style="color:blue;font-size:30px">（右边前两句）

		</br>

		原来姹紫嫣红开遍

		</br>

		似这般都付与断井颓垣

	</div>

  </body>

</html>  </span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——myright</title>

  </head>

  <body>

	<div style="color:blue;font-size:30px">（右边后两句）

		</br>

		良辰美景奈何天

		</br>

		赏心乐事谁家院

	</div>

  </body>

</html> </span>

2.3，混合的frameset布局

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>freamset——index</title>  

<frameset rows="15%,80%,5%">

  <frame name="top" src="top.html" /><--拥有15%的高度-->

	<frameset cols="25%,75%"><--拥有80%的高度-->

		<frame name="left" src="left.html"><--拥有25%的宽度-->

		<frame name="right" src=""><--拥有75%的宽度-->

	</frameset>

  <frame name="bottom" src="bottom.html" /><--拥有5%的高度-->

</frameset>

</html>  </span>

2.4，效果

三、总结

利用frameset标签可以设置一个固定的网站布局，但是在HTML5中，已经不支持这个属性了。那么我想肯定有一种可以替代的东西。接下来，还需要了解一些别的相关的东西，比如IFrame等。

[前端 1] 使用frameset框架构建网页基本布局的更多相关文章

  1. 2、网页制作Dreamweaver（图片热点、frameset框架）

    图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="r ...

  2. 基于laravel框架构建最小内容管理系统

    校园失物招领平台开发 --基于laravel框架构建最小内容管理系统 摘要 ​ 针对目前大学校园人口密度大.人群活动频繁.师生学习生活等物品容易遗失的基本现状,在分析传统失物招领过程中的工作效率低下. ...

  3. Frameset框架

    总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: <frameset rows="> <frame src="to ...

  4. 使用 SailingEase WinForm 框架构建复合式应用程序（插件式应用程序）

    对于一些较小的项目,具备一定经验的开发人员应该能够设计和构建出便于进行维护和扩展的应用程序.但是,随着功能模块数量(以及开发维护这些部件的人员)的不断增加,对项目实施控制的难度开始呈指数级增长. Sa ...

  5. 基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台

    开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中 ...

  6. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. Frameset 框架

      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.c ...

随机推荐

  1. 黄聪：C#如何操作JSON数据（读取、分析）

    使用开源的类库Newtonsoft.Json(下载地址http://json.codeplex.com/).下载后加入工程就能用.通常可以使用JObject, JsonReader, JsonWrit ...

  2. UDP程序设计

        UDP是不可靠的连接,广泛应用于各种聊天工具     使用UDP发送的信息,对方不一定会接收到.所有的信息使用数据报的形式发送出去,这就要求客户端要始终等待服务器发送的信息才能进行接收.在Ja ...

  3. linux命令（3）：复制，剪切（文件和文件夹）

    一:文件命令:cp,mv linux 怎么样复制文件夹内所有文件到另一个文件夹?   cp -Rf /home/user1/* /root/temp/ 将 /home/user1目录下的所有东西拷到/ ...

  4. UCOS-2 消息邮箱与队列

    一个有趣的网络解释: 信号量就是中央政府发给官人做一方大员的官印,有很多种官印但是不能一印多发,得到官印者才能掌权鱼肉一方百姓(任务得到信号量才能运行),否则你就只要等官跑官.(当然官印也可随时被政府 ...

  5. requesting java ast from selection

    遇到這個錯誤是因為在eclipse中選擇了maven->update project.接著就不斷的出現題目上的錯誤,然後就提示是否退出workbench. 查看了一下項目的compile jre ...

  6. JAVA 界面 - 记事本

    代码: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Jiemian10 extends ...

  7. Maven详解之仓库------本地仓库、远程仓库

    在Maven中,任何一个依赖.插件或者项目构建的输出,都可以称之为构件. Maven在某个统一的位置存储所有项目的共享的构件,这个统一的位置,我们就称之为仓库.(仓库就是存放依赖和插件的地方) 任何的 ...

  8. cookie和会话状态的工作原理

    一:存在两种类型的cookie: 1>会话cookie (session cookie)        不设置过期时间,则表示这个cookie生命周期为浏览器会话期间,只要关闭浏览器窗口,   ...

  9. Timer与ScheduledThreadPoolExecutor的比较

    推荐还是用第二种方法,即用ScheduledThreadPoolExecutor,因为它不需要像timer那样需要在里面再用一个线程池来保证计时的准确.(前提是线程池必须要大于1个线程) 1.time ...

  10. JDBC中的PreparedStatement-防止SQL注入攻击

    在JDBC对数据库进行操作的时候,SQL注入是一种常见的针对数据库的注入攻击方式.如下面的代码所演示,在我们的提交字段中掺入了SQL语句,会使得程序的登录校验失效: package org.lyk.m ...