frameset标签设计页面

时间：2022-12-26 07:33:20

重要事项：不能将 <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使用实例：

如果要实现下面的效果

frameset标签设计页面

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

整体页面：main.html

 <frameset rows="11%,*" border="1px" framespacing="0">

         <frame src="top.html" name="top" frameborder="0" />

         <frameset cols="12%,*"   framespacing="0" framespacing="0">

             <frame src="left.html" name="left" scrolling="auto"/>

             <frame src="right.html" name="right" scrolling="auto"/>

         </frameset>

 </frameset>

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

 <!-- 左边菜单栏显示-->

     <div >

         <ul >

             <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li>

             <li ><a href="taskManage.html" target="right">任务管理</a></li>

             <li ><a href="#" target="right" >数据集管理</a></li>

             <li ><a href="#" target="right" >模型管理</a></li>

         </ul>

     </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 用来实现这个功能也是可以的。

frameset标签设计页面的更多相关文章

  1. HTML &lt&semi;frameset&gt&semi; 标签

    <frameset></frameset>:框架标签,可以将页面分割,被frameset标签分割的页面,不允许使用body标签;frameset标签页面内只能出现framese ...

  2. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  3. h1、h2、h3标签及strong标签对页面seo的影响

    今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2&gt ...

  4. HTML &lt&semi;base&gt&semi; 标签 为页面上的所有链接规定默认地址或默认目标

    定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标. 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白. 使用 <base& ...

  5. Frameset标签

    Frameset标签不能在body中设置. <!DOCTYPE html> <html> <head> <title>框架标签</title&gt ...

  6. 用A标签实现页面内容定位 点击链接跳到具体位置

    经常在*等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了.实例参考微信营销理论手册的目录. 首先用A标签定义目录的链接. & ...

  7. Winform中在使用Dock属性设计页面布局控件的顺序导致页面效果不同的问题

    场景 在Winform中进行页面设计时,常使用控件的Dock属性来进行布局调整.但是由于设置属性的顺序问题,导致达不到想要的效果. 比如以下两个控件 下面的控件设置的Dock属性是Bottom,即在页 ...

  8. 你知道HTML标签设计的本意吗？ 把HTML标签用到该用的地方去

    "DIV+CSS"这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合.这样做,对于视觉上并没有什么影响, ...

  9. 你知道HTML标签设计的本意吗？

    “DIV+CSS”这个词汇不知道害了多少人,也许其提出者本意并没有错,但是跟风者从表现曲解了其意思,认为整个页面就应当是DIV+CSS文件的组合.这样做,对于视觉上并没有什么影响,因为还原了之前设计的 ...

随机推荐

  1. SSH加固

    1.修改ssh默认端口 vi /etc/ssh/sshd_config  中Port:service ssh restart 2.安装denyhosts,应对暴力破解ssh. A.直接 apt-get ...

  2. 查询修改linux 打开文件句柄数量

    查询系统支持最大可打开文件句柄数量: #vi /proc/sys/fs/file-max 查询当前连接用户最大可打开文件句柄数量: #ulimit -a 修改当前连接用户最大可打开文件句柄数量: #u ...

  3. Json&period;Net学习笔记

    http://www.cnblogs.com/xiaojinhe2/archive/2011/10/28/2227789.html Newtonsoft.Json(Json.Net)学习笔记 http ...

  4. 深度剖析：CDN内容分发网络技术原理--转载

    1.前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加,用户数量也在不断增加,受Web服务器的负荷和传输距离等因 ...

  5. Hibernate 关联关系映射实例

    双向多对一/一对多(many-to-one/one-to-many) 例子,多个学生对应一个班级,一个班级对应多个学生: 班级类,Grade.java: public class Grade { pr ...

  6. 网络资源&lpar;4&rpar; - extJS视频

    2014_08_24 http://v.youku.com/v_show/id_XMjk2ODc0MjA4.html?f=7183617 extJS视频教程04——ExtJS框架入门

  7. HBase1&period;0&period;1基本操作（java代码）

    public class HQuery { private static ConnHBase connHbase=new ConnHBase(); /***************建表******** ...

  8. SQL笔记之SELECT语句

    SELECT语句的完整语法: SELECT[ALL/DISTINCT]目标列表达式  [AS 别名],··· --ALL不去掉重复 DISTINCT去掉重复 FROM 表名或视图名 或者(SELECT ...

  9. Mysql中大数据类型的存取

    标准SQL中提供了八种大数据类型 上面四种是针对字节数据(二进制字符串类型,主要存储图片.音频信息等),下面四种是针对字符数据(非二进制字符串类型,纯文本文件). MySql中不使用标准SQL中针对字 ...

  10. Hive sql 查询数据库查询 top-n

    数据库查询*分组排序取top n要求:按照课程分组,查找每个课程最高的两个成绩. 数据文件如下: 第一列no为学号,第二列course为课程,第三列score为分数 mysql> select ...

相关文章