8. 多框架页面的创建

8.1 框架概念

框架是由单个框架加上框架集构成的区域。

每个框架是指页面中一个独立额区，框架集是一个关于框架结构的页面，定义本页面的框架数、大小、布局以及框架之间的相互关系。

8.2 框架集标记

框架集文件保存了所有框架的信息，例如设定框架的布局，水平框架与垂直框架的数目、尺寸、名称等。

框架集标记<frameset>语法格式如下：

<frameset>

<frame>

......

</frameset>

<frameset>标记的rows属性用来将浏览器分割成为上下窗口。rows属性值是一个以逗号分开的长度值列表，单位是像素或百分比。

<frameset rows=”60,*”>

<frameset>标记的cols属性用来将浏览器分割成为左右窗口。cols属性是一个以逗号分开的长度值列表，单位是像素后者百分比。

例如：

<frameset cols=”20%,*”>

<frame name=”left “ src=”**” scrolling=”auto”>

<frame name=”right“ src=”**” scrolling=”auto”>

</frameset>

8.3 框架标记

框架标记<frame>的作用是定义框架网页的内容，例如框架名称、框架对应的框架页面文件、滚动条等。

每个框架对应一个网页，这个网页称为框架页面。

格式如下：

<frame name=”” src=”” scrolling=”” frameborder=””>

name属性用来命名框架名称。src属性用于指定框架页面对应的HTML页面文件。scrolling属性用来设定框架空间不够用时，是否显示滚动条，yes表示“显示滚动条”，no表示“不显示滚动条”，auto表示“根据页面的长度自动判断是否显示滚动条”。frameborder属性用来设定是否显示边框，0表示不显示边框，1表示显示边框，默认的情况是0。

由于框架中的内容有时较少，不需要滚动条就可以全部显示，因此滚动条有时会显示灰色，表示不可用的状态。

8.4 无框架标记

目前市场上浏览器的种类众多，并非每一种浏览器都支持框架结构。考虑到这类用户，HTML还提供了无框架标记<noframes>。当浏览器不能正常加载框架标记<frameset>时，浏览器就会检测到<noframes>标记。并显示其中内容。

框架结构如下：

<frameset rows=”60,*”>

<frame>

<frame>

......

<noframes>

<body>

......

</body>

</noframes>

</frameset>

8.5 框架之间的信息交互

虽然多框架页面中的各个框架页面是相互独立的HTML文档，但是编程人员可以利用为框架命名的方式使框架间产生一定的相互关系，其中最常用的就是框架间的链接关系。

要实现框架间信息的交互，首先要在编写框架集文件是命名相关框架。

<frame name=”top” src=”**” scrolling=”auto” >

......

<frame name=”left” src=”**” scrolling=”auto” >

<frame name=”right” src=”**” scrolling=”auto” >

这些源码是将上部框架命名为“top”，左下侧框架命名为“left”，右下侧框架命名为“right”。命名完成后，在先关的超链接中进行改动，将其超链接标记<a>的target属性赋值为目标框架的名称。

<h2><a href=”**” target=right>天鹅</a></h2>

实例：

本例定义一个整个页面的框架集文件，3个框架文件，2个连接文件

1.html

<html>

<head>

<title>使用框架实例</title>

</head>

<frameset rows="60,*">

<frame name="top" src="top.html" scrolling="auto">

<frameset cols="20%,*">

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

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

</frameset>

<noframeset>

<body>

<p>此网页使用了框架，但是浏览器不支持</p>

</body>

</noframeset>

</frameset>

</html>

top.html

<html>

<head>

<title>上侧框架</title>

</head>

<body>

<h1><center>动物园简介</center></h1>

</body>

</html>

leht.html

<html>

<head>

<title>左侧框架</title>

</head>

<body>

<br>动物园里，你最喜欢哪个动物？：

<h2><a href="right1.html" target=right>狮子</a></h2>

<h2><a href="right2.html" target=right>老虎</a></h2>

<h2><a href="right3.html" target=right>大象</a></h2>

</body>

</html>

right1.html

<html>

<head>

<title>右侧框架</title>

</head>

<body>

<h2><br><br>狮子:<br><br></h2>

dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

</body>

</html>

right2.html

<html>

<head>

<title>右侧框架</title>

</head>

<body>

<h2><br><br>老虎:<br><br></h2>

dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

</body>

</html>

right3.html

<html>

<head>

<title>右侧框架</title>

</head>

<body>

<h2><br><br>大象:<br><br></h2>

dhuialhdulahdliashfa

lshdsdfjklfhsaldjkdflhalskjhf

</body>

</html>

转载于:https://www.cnblogs.com/free-1122/p/9865202.html

web-8. 多框架页面的创建相关推荐

  1. 10个优秀的 Web UI库/框架 详细出处参考：http://www.jb51.net/web/22251.html

    点评:UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web U ...

  2. 10个优秀的 Web UI 库/框架

    来源:http://www.webjx.com/web/xindejiqiao-10467.html UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合 ...

  3. ASP.NET Core开源Web应用程序框架ABP

    "作为面向服务架构(SOA)的一个变体,微服务是一种将应用程序分解成松散耦合服务的新型架构风格. 通过细粒度的服务和轻量级的协议,微服务提供了更多的模块化,使应用程序更容易理解,开发,测试, ...

  4. Atata——C# Web测试自动化框架

    从 GitHub 下载示例 介绍 Atata Framework --基于Selenium WebDriver的C#/.NET Web测试自动化全功能框架.使用流畅的页面对象模式:拥有独特的日志系统: ...

  5. Python Web开发——Django框架学习

    文章目录 Web开发简介 Web应用技术 Web前端开发 Web后端开发 使用 Django 开发后端服务 项目目标 管理员操作 登录界面 客户管理界面 添加客户界面 药品管理界面 添加药品界面 订单 ...

  6. WEB UI自动化测试框架搭建(一)_公用方法Utils

    本栏目内的所有项目使用的都是PyCharm 2020.1专业版,可以下载后自行在网上找教程破解. WEB UI自动化测试框架搭建(一)~(七)源代码:https://download.csdn.net ...

  7. 《ASP.NET Web API 2框架揭秘》

    <ASP.NET Web API 2框架揭秘> 基本信息 作者: 蒋金楠 出版社:电子工业出版社 ISBN:9787121235368 上架时间:2014-7-5 出版日期:2014 年7 ...

  8. web前端开源框架_9个用于前端Web开发的开源CSS框架

    web前端开源框架 当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...

  9. ASP NET Web API 2框架揭秘

    ASP.NET Web API2框架揭秘(.NET领域再现力作顶级专家精讲微软全新轻量级通信平台) 蒋金楠 著   ISBN 978-7-121-23536-8 2014年7月出版 定价:108.00 ...

最新文章

  1. noip2005 过河
  2. SQL语言包含4个部分
  3. Sklearn（v3）——SVM理论(4)
  4. 齐次(Homogeneous)、单项式、多项式
  5. ssh免密码登陆（三个节点master slave1 slave2）详细带命令版
  6. python如何编辑pdf_python3.6 导入并编辑pdf 错误在哪里啊
  7. python if return_python - 使用if-return-return或if-else-return更有效？
  8. 工科数学分析寒假预习day3 一般级数的敛散性
  9. 如何申请免费的ssl证书
  10. Python学习第2天：入门必备(基础篇)
  11. 各大搜索引擎收录入口
  12. 使用QGIS插件转换火星坐标、百度坐标和WGS84坐标
  13. lightroom 闪退_微信QQ一碰就闪退，别人永远看不了你的隐私~
  14. 2023年3月华为认证HCIP新增题库（考试编号H12-821）
  15. sketch怎么转换成html,手稿秒变html的Sketch 2 Code
  16. CSS设置下划线与文字间距距离
  17. flutter 学习资源汇总
  18. 坛经与禅宗的智慧-王德峰
  19. 有人这样评价Ruby，你赞同他的观点吗？
  20. Leetcode 414

热门文章

  1. CIKM 2021 | BH：面向Web级应用的基于二进制码的Hash Embedding
  2. 12. Excel数据可视化看板--动态销售月报看板
  3. opc服务器组态文件已写保护_iscada电力组态监控源代码，电力组态版，只有opc驱动版本...
  4. sqlserver导入向导时提示外部表不是预期格式_Excel办公实操，导入本地数据，创建参数查询，就是简单...
  5. java 解决故意弄得错误,高效的Java错误处理
  6. 编译32位_玩转Android10源码开发定制(11)内核篇之安卓内核模块开发编译
  7. python自然语言的背景_PYTHON 自然语言处理
  8. 疯子的算法总结(一) 位运算（快速幂、快速乘）
  9. LeetCode Hot100 ---- 最长相关专题（动态规划）
  10. C++笔记——指向常量的指针/指针常量