frame,是网页开发必须掌握的知识。例如后台架构、局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受。
frame知识点包括(frameset标签、frame标签、iframe标签)。下面就对其一一介绍。
 
一、frameset

1. 属性

①border

设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、*”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框 架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为30像素;“*”表示该区域占用余下页面空间。例 如:cols="25%,200,*" 表示将页面分为三部分,左面部分占页面30%,中间横向宽度为200像素,页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。

2. 用例

<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
注意1:
cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构,代码正确写法为:
<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">
  <frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
  <frameset cols="213,*" frameborder="no" border="0" framespacing="0">
    <frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
    <frame src="???" name="mainFrame" id="mainFrame"/>
【即,若想即使用cols又使用rows,可利用frameset嵌套实现】
注意2:
<frameset cols="40%,*,*">
意思是:第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">
意思是:浏览器窗口等分为四部分。
 
二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。

⑤frameborder

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

⑥noresize

设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
2. 用例
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
 
三、iframe
是浮动的框架(frame),其常用属性与frame类似,其他的主要有以下(相同的就不列举了)
1. 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
2. 用例
<iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
注意:
iframe标签与frameset、frame标签的验证方法不同,是XHTML 1.0 Transitional。且iframe是放在body标签之内,而frameset、frame是放在body标签之外。
 
四、综合示例
<html>
<head>
<title>综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起,您的浏览器不支持“框架”!</p>
</body>
</noframes>
</frameset>
</html>
【说明】
<noframes></noframes>标志对也是放在<frameset>< /frameset>标志对之间,用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body>< /body>标志对,然后才可以使用我们熟悉的任何标志。
 
 
最后需要说明一点:
如果将代码按照我以上所写写到VS中报错的话,例如:
或者
解决方法如下:
工具→选项→文本编辑器→HTML→验证→Internet Explorer 6.0
 
好了,通过以上内容,大家再多加练习,就会慢慢熟悉frame的相关知识了,用好了的话你会发现真的挺好。至于frame系列标签的事件方法,一般用的不是非常多,需要的话,大家自己再查吧。【呵呵,其实本人还没有用到过】

Frameset使用教程的更多相关文章

  1. Frameset使用教程 小结

    frame,是网页开发必须掌握的知识.例如后台架构.局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受. frame知识点包括(frames ...

  2. 取代iframe框架

    一.frameset1. 属性①border设置框架的边框粗细.②bordercolor设置框架的边框颜色.③frameborder设置是否显示框架边框.设定值只有0.1:0 表示不要边框,1 表示要 ...

  3. html教程系列--form frameset

    <font> 标签: 规定文本的字体.字体尺寸.字体颜色.不建议直接使用,可以使用样式表替代. <footer> 标签:定义公用的底部信息.通常包含文档的作者.版权信息.使用条 ...

  4. HTML+CSS教程(二)frameset框架和iframe内嵌

    一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...

  5. html快速入门(基础教程+资源推荐)

    1.html究竟是什么? 从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的 ...

  6. HTML 30分钟入门教程

    作者:deerchao 转载请注明来源 本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hy ...

  7. js基础到精通全面教程--JS教程

    适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...

  8. HTML简明教程(二)

    HTML简明教程(二) 一.HTML 图像 二.HTML 表格 三.HTML 列表 四.HTML div和 span 五.HTML 布局 六.HTML 表单和输入 七.HTML 框架 八.HTML内联 ...

  9. html5,html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

随机推荐

  1. oracle sql 分页

    Oracle实现分页时,需要引入一个rownum的函数,rownum可以给记录一个类似于id的字段. 以下收整理了常用的几种sql分页算法,数据库以Oracle中emp为例.查询结果如下: SQL&g ...

  2. ViewController 视图控制器

    [父视图控制器 addChildViewController:子视图控制器]; 在此,图控制器A添加了另一个图控制器B,那么A充当父视图控制器,B充当子视图控制器.父视图控制器充当了视图控制器容器的角 ...

  3. HDU 1251 统计难题(字典树计算前缀数量)

    字典树应用,每个节点上对应的cnt是以它为前缀的单词的数量 #include<stdio.h> #include<string.h> struct trie { int cnt ...

  4. Mac系统下安装Tomcat,以及终端出现No such file or directory的错误提示解决方案

    Tomcat,作为一个免费的服务器口碑实在太好,本想安装一个研究研究,无奈电脑是mac系统,在网上搜了一些安装方法总是出错,直到遇到了这篇博客,http://www.cnblogs.com/qingy ...

  5. 2016"百度之星" - 资格赛(Astar Round1) Problem C

    字典树. 插入的时候update一下节点出现的次数. delete的时候,先把前缀之后的全删了.然后看前缀最后一个节点出现了几次,然后前缀上每个节点的次数都减去这个次数. 前缀从上到下再检查一遍,如果 ...

  6. iOS之Xcode修改应用图标

    随便找一个PNG为后缀的图标, 把它重命名为 icon.png 就可以了.  再次启动 IPhone 模拟器. 就成功了. 及时尺寸不符合审核规范,也是可以显示出来的,供测试效果吧. 为iPhone设 ...

  7. psql命令

    原文:http://blog.csdn.net/smstong/article/details/17138355 psql# shell 环境下,查看当前所在的数据库的命令是: select  cur ...

  8. AWK用法入门详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  9. Nginx安装及配置虚拟主机

    nginx安装部分 依赖环境 yum -y install gcc zlib openssl-devel zlib-devel 1. 下载好下面两个包:nginx-1.8.1.tar.gz pcre- ...

  10. jvm 配置,看看

    http://my.oschina.net/qiangzigege/blog/661757