frameset标签设计页面

重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里。且 HTML5 已经不支持 frameset 标签的使用!!!

1、frameset 元素可定义一个框架集,它被用来组织多个窗口(框架)。每个框架存有独立的文档。配合<frame></frame>框架的使用,我们可以对页面进行分割,局部刷新。合理的使用会给用户带来非常好的体验效果。

2、frameset 的几个属性:

①、cols:定义框架集中列的数目和尺寸。垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用剩余的空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个视窗画面的 50% 宽度为一相对分割。你可自己调整数字。

②、rows:定义框架集中行的数目和尺寸。这是横向切割,将画面上下分开,数值设定同上。 COLS 与 ROWS 两参数尽量不要放在同一个 标记中,因 Netacape 偶然不能显示这类型的框架,尽量采用多重分割。

③、frameborder:设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。

④、border:设定框架的边框厚度。

⑤、bordercolor:设定框架的边框颜色。

⑥、framespacing:表示框架与框架间保留的空白的距离。

3、frame 标签的属性: 

①、name:设定框架名称。此为必须设置的属性。

②、src:设定此框架要显示的网页名称或路径。此为必须设置的属性。

③、scrolling:设定是否要显示滚动条。设定值为auto, yes, no。

④、bordercolor:设定框架的边框颜色。

⑤、frameborder:设定是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。

⑥、noresize:设定框架大小是否能手动调节。

⑦、marginwidth:设定框架边界和其中内容之间的宽度。

⑧、marginhight:设定框架边界和其中内容之间的高度。

⑨、width:设定框架宽度。

⑩、height:设定框架高度。

4、frameset使用实例:

如果要实现下面的效果

 页面分为三部分,顶部,左边和右边。其中点击左边的超链接,右边的框架页面会相应变化。

整体页面:main.html

1 <frameset rows="11%,*" border="1px" framespacing="0">
2         <frame src="top.html" name="top" frameborder="0" />
3         <frameset cols="12%,*"   framespacing="0" framespacing="0">
4             <frame src="left.html" name="left" scrolling="auto"/>
5             <frame src="right.html" name="right" scrolling="auto"/>
6         </frameset>
7 </frameset>

top.html,right.html就是一个空页面,left.html如下:

1 <!-- 左边菜单栏显示-->
2     <div >
3         <ul >
4             <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li>
5             <li ><a href="taskManage.html" target="right">任务管理</a></li>
6             <li ><a href="#" target="right" >数据集管理</a></li>
7             <li ><a href="#" target="right" >模型管理</a></li>
8         </ul>
9     </div>

页面的分层显示,主要就是 frameset 标签中对于 cols 和 rows 的使用,在配合 frame 标签的嵌套。而想要达到点击左边的菜单栏,右边的frame 相应发生变化,那必须要认识属性

target:规定在何处打开链接文档。浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。即 main.html 中,<frame name="target值">,这里的 name 属性值为多少,那么 left.html 中,<a target="name值"> 这里要相等。

5、如何在子页面中获取父页面所在的frameset中的其它的frame中的元素?

即如何在 right.html 中获取 left.html中<a></a>标签的属性值等等

$(parent.parent.mainFrame.document).contents().find("body").html();  //manFrame指的是你想要查看的那个frame的id

比如上面的 left.html页面中,任务创建的 ID 为 taskCreat,那么我们可以这样获取:并改变它的 class 属性。

$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");

 6、frameset 的优缺点

我们知道,目前的 HTML5 标准已经不支持 frameset 了,虽然使用它重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,加快了网页下载速度)。但是它也有很多缺点,比如浏览器的后退按钮是没用的;会产生很多页面,不易管理;代码复杂,不易被搜索引擎搜索;小型移动设备显示不全;多框架的页面会增加服务器 http 请求等等。所以对于 frameset 的使用我们需要慎重,而且现阶段的 DIV+CSS 用来实现这个功能也是可以的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端

02移动端布局

  一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem      2、rem 和 em 区别           2...

1959
来自专栏Google Dart

AngularDart Material Design 列表 顶

它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能力的列表的根节点。

1012
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

2126
来自专栏个人随笔

房上的猫:HTML5基础

一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

39112
来自专栏HTML5学堂

特殊字体神器-fontmin,秒杀一切工具

HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。 ...

4024
来自专栏程序员的知识天地

HTML/CSS/JS 是如何在浏览器中,渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

2734
来自专栏欧阳大哥的轮子

iOS的一种基于服务器下发的动态布局方案(一)

栅格布局MyGridLayout是MyLayout布局体系里面的第八种布局。这是一种将布局约束设置和视图分离的布局方式,就像HTML中的标签元素和css样式可以...

1573
来自专栏菜鸟计划

javascript简史

一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

2735
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

2006
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

1092

扫码关注云+社区