frameset标签设计页面注意事项

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

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

 

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

1 2         3         4             5             6         7 

登录后复制

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

1 2     

3

9

登录后复制

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

target:规定在何处打开链接文档。浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。即 main.html 中,,这里的 name 属性值为多少,那么 left.html 中,属性).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 的使用我们需要慎重,而且现阶段的 p+CSS 用来实现这个功能也是可以的。

 

以上就是frameset标签设计页面注意事项的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3196492.html

(0)
上一篇 2025年4月1日 03:03:00
下一篇 2025年4月1日 03:03:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • HTML中的<head>标签及其内容的详细介绍

    head title base meta link 立即学习“前端免费学习笔记(深入)”; script style 标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以: – 引用脚本 – 指示浏览器在哪…

    2025年4月1日
    100
  • 有关input标签的详解

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。1,type=text输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册…

    编程技术 2025年4月1日
    100
  • Html中的map标签

    图像的影像, 标签浅谈 在HTML中还可以把划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签: ;&#8211…

    2025年4月1日 编程技术
    100
  • HTML Map 标签的使用

    今天看到京东的一个营销活动,左侧浮动浮动是用html 中的map标签写的,因此有了这篇记录的文章。 直接上图如其中的大家电 @@##@@ 登录后复制 顺便在摘抄了一些相关资料奉上: HTML 标签 带有可点击区域的图像映射; 立即学习“前端…

    2025年4月1日
    100
  • html移动端-新建空白页面meta各个标签的详解

    nbsp;html>        Document 登录后复制 meta标签 登录后复制 viewport 视图窗口,移动端特属的标签。一般使用下面这段代码即可: 登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制 上面的…

    编程技术 2025年4月1日
    100
  • html 移动端的头部标签和meta标签的详述

    使用 html5 doctype,不区分大小写 nbsp;html> 登录后复制 更加标准的 lang 属性写法  登录后复制 meta 声明文档使用的字符编码 登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登录后复制登…

    编程技术 2025年4月1日
    100
  • html中ol标签与li标签的高级应用

      本文主要介绍html中有序列表标签ol,li的高级应用,   在网页设计时我们设计有序列表内容时,经常会在每个ITEM前手工加上一个数值,或是由程序加上这个数值。   而如果使用有序列表标签ol和li,则不需要这么麻烦,根本不用自行去填…

    2025年4月1日
    100
  • html标签dl、ul、ol 的使用详解

    这篇文章主要介绍了html列表标签、ul、ol 的使用,比较适合初学者,大家若感兴趣的可以学习下 代码如下: <!– 列表标签::分层列表 子标签::上层列表项 :下层列表项 ———— 无序列表标签: 子标签: –…

    编程技术 2025年4月1日
    100
  • 在循环里如何使用<optgroup>标签

    如何在循环里插入? $data = array (  0 =>   array (    ‘id’ => ‘1’,    ‘name’ => ‘WEB编程’,    ‘parentid’ => ‘0’,  ),  1…

    编程技术 2025年4月1日
    100
  • 关于html下拉框中optGroup标签的一个bug修复

    当下拉框中的第一项是optgroup时,在用鼠标滚轮改变选项时,如果快速的向上滚动则会把第一项的optgroup选中,这不是我们想要的结果,而且再用代码获取下拉框的值是就会发生错误。 选中optGroup后,下拉框失去焦点后selectIn…

    编程技术 2025年4月1日
    100

发表回复

登录后才能评论