美文网首页
从屌丝到架构师的飞越(HTML篇)- HTML 多视窗框架

从屌丝到架构师的飞越(HTML篇)- HTML 多视窗框架

作者: 走着别浪 | 来源:发表于2019-08-07 07:52 被阅读0次

    一、介绍

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

    使用框架的坏处:

    (1)开发人员必须同时跟踪更多的HTML文档

    (2)很难打印整张页面

    在HTML中frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

    二、知识点介绍

    1、框架的含义和基本构成

    2、框架集<frameset>控制

    3、子窗口<frame>标签的设定

    4、<noframes></noframes>标签

    5、窗口的名称和链接

    6、浮动窗口<iframe>

    三、上课对应视频的说明文档

    1、框架的含义和基本构成

    框架就是把一个浏览器窗口划分为若干个小窗口,每个窗口可以显示不同的 URL 网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果,也可以非常方便的完成导航工作。

    而所有的框架标记 要放在一个 html 文档中。html 页面的文档体标签<body>被框架集标签<frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性。

    <html>

    <head>

    </head>

    <frameset>

    <frame src="url 地址1">

    <frame src="url 地址2">

    ......

    <frameset>

    </html>

    2、框架集<frameset>控制

    框架结构可以根据框架集标签<frameset>的分割属性分为3 种:

    ➢ 左右分割窗口

    ➢ 上下分割窗口

    ➢ 嵌套分割窗口

    <frameset cols="40%,2*,*"> 将窗口分为40%,40%,20%

    <frameset cols="100,200,*">

    <frameset cols="100,*,*"> 将100 像素以外的窗口平均分配

    <frameset cols="*,*,*"> 将窗口分为三等份

    3、子窗口<frame>标签的设定

    <frame>是个单标签,<frame>标签要放在框架集frameset 中,<frameset>设置了几个子窗口就必须对应几个<frame>标签,而且每一个<frame>标签内还必须设定一个网页文件src="*.html",其常用属性有:

    3.1

    实例一 sl9-1.html

    首先我们新建一个文件夹,然后做四个要放到子窗口中的页面,sl1.html、sl2.html、sl3.html、sl4.html。

    <html>

    <head>

    </head>

    <frameset rows="20%,2*,*" framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl1.html">

    <frame src="sl2.html">

    <frame src="sl3.html">

    </frameset><noframes></noframes>

    </html>

    3.2窗口的上下设定

    实例二 sl9-2.html

    <html>

    <head>

    </head>

    <frameset rows="20%,*,200" framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl1.html">

    <frame src="sl2.html">

    <frame src="sl3.html" noresize="noresize">

    </frameset><noframes></noframes>

    </html>

    3.3窗口的嵌套设定

    实例三 sl9-3.html

    <html>

    <head>

    </head>

    <frameset cols="20%,*" framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl1.html">

    <frameset rows="300,500"framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl2.html">

    <frame src="sl3.html">

    </frameset>

    </frameset><noframes></noframes>

    </html>

    实例四 sl9-4.html

    <html>

    <head>

    </head>

    <frameset rows="20%,*" framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl1.html">

    <frameset cols="20%,*"framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl2.html">

    <frame src="sl3.html">

    </frameset>

    </frameset><noframes></noframes>

    </html>

    实例五 sl9-5.html

    <html>

    <head>

    </head>

    <frameset rows="20%,*,15%" framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl1.html">

    <frameset cols="20%,*"framespacing="1" frameborder="yes" border="1"

    bordercolor="#FF00FF">

    <frame src="sl2.html">

    <frame src="sl3.html">

    </frameset>

    <frame src="sl4.html">

    </frameset><noframes></noframes>

    </html>

    4、<noframes></noframes>标签

    <noframes>标签,这对标签的作用是当浏览者使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES>这个标记,当使用的浏览器看不到框架时,他就会看到 <NOFRAMES>你的浏览器不支持框架网页</NOFRAMES>之间的内容,而不是一片空白。

    5、窗口的名称和链接

    如果在窗口中要做链接,就必须对每一个子窗口命名,以便于被用于窗口间的链接,窗口命名要有一定的规则,名称必须是单个英文单词,允许使用下滑线,但不允许使用"—","句点"和空格等,名称必须以字母开头,不能使用数字,还不能使用网页脚本中保留的关键字,在窗口的链接中还要用到一个新的属性"target",用这个属性就可以将被链接的内容放置到想要放置的窗口内。

    文件一:

    ml.html

    <html>

    <head>

    <title>无标题文档</title>

    </head>

    <body>

    <center>

    <h2>目录</h2>

    <hr>

    <p><a href="sl1.html" target="aa2">爱在深秋</a></p>

    <p><a href="sl2.html" target="aa3">图像对文字的水平居中</a></p>

    <p><a href="sl3.html" target="aa2">图像与文本之间的距离</a></p>

    <p><a href="sl4.html" target="aa3">图像大小的设定</a></p>

    <p><a href="http://www.sina.com.cn" target="aa3">新浪网站</a></p>

    </center>

    </body>

    </html>

    文件二:

    sl94.html

    <html>

    <head>

    </head>

    <frameset cols="20%,*,200" framespacing="1" frameborder="yes" border="1"

    bordercolor="#99CCFF">

    <frame src="ml.html" name="aa1">

    <frame src="sl1.html" name="aa3">

    <frame src="sl2.html" name="aa2" noresize="noresize">

    </frameset><noframes></noframes>

    </html>

    6、浮动窗口<iframe>

    <iframe>这标记只适用於IE 浏览器。它的作用是在浏览器窗口中可以嵌入一个框窗以显示另一个文件。它是一个围堵标记,但围著的字句只有在浏览器不支援 iframe 标记时才会显示,如<noframes> 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好,若 JavaScript认出该浏览器并非 Internet Explorer 便会切换至另一版本。

    <html>

    <head>

    <title>浮动框架</title>

    </head>

    <body bgcolor="#E1FFE1">

    <center>

    <iframe src="ml1.html" name="aa" width="600" height="400" marginwidth="30"

    marginheight="20" align="middle" allowtransparency="true">

    这是一个浮动窗口

    </iframe>

    <p><a href="sl1.html" target="aa">爱在深秋</a></p>

    <p><a href="sl2.html" target="aa">图像对文字的水平居中</a></p>

    <p><a href="sl3.html" target="aa">图像与文本之间的距离</a></p>

    <p><a href="sl4.html" target="aa">图像大小的设定</a></p>

    <p><a href="http://www.sina.com.cn" target="aa3">新浪网站</a></p>

    </center>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:从屌丝到架构师的飞越(HTML篇)- HTML 多视窗框架

          本文链接:https://www.haomeiwen.com/subject/nnborctx.html