您现在的位置是:首页 > 前端学习 > Web前端Web前端

创建框架结构的页面(第十一章)(图文)

第十三双眼睛2020-02-24【Web前端】人已围观

简介框架指的是页面的一种布局,这种布局和之前说的表格布局和之后要学习的div+css布局不一样,那么具体框架是怎样的呢,事实上,框架布局也许缺少了一些灵活性,但是它的特点是可以将浏览器分隔成几个部分,这是其他标签无法做到的,本章的主要知识点如下:
1学习如何创建框架集
2掌握基本的页面布局
3通过一些属性修饰布局
4学习如何在框架内部实现页面连接及锚点连接
5创建浮动框架

创建窗口框架页面
有这样一种页面,导航栏放在左侧,右侧是页面主体,但是当浏览者单击左侧导航栏时,右侧的页面会刷新,但是,左侧导航栏部分仍然保持不变。
使用<frame>标签可以在页面中设置框架。当一个浏览器被分隔成多个框架的时候,这些框架放在一起,即称之为框架集。框架集的HTML标签为<frameset>也称之为框架结构标签,所以,如果要在框架中放入内容,采用的方式是通过引用页面中的路径,来加载对象。它的代码如下:
<frameset>
        <frame src="" />
        <frame src="" />
</frameset>
需要注意的是,部能将<frame>标签和body标签一起使用,原理上,因为框架集分隔的是浏览器,也就是说,框架集最少要有2个页面。所以,不存在只有一个页面的框架集,而且,框架集的作用是将多个页面同时展示在浏览器中,同样,也部存在包含框架的独立页面,正是因为这样,<frameset>标签不能放在body内部,这样做没有意义。
横向分隔窗口
窗口的分隔只能由两个方向,没有斜方向的分隔方法,使用row属性实现横向分隔窗口。代码如下所示;
<frameset rows="框架高度,框架高度...*">
其中,框架高度可以用像素也可以用百分比,*表示最后一个框架的高度,即生下来的最后一个,也就无需用数值来表示
例子:
横向分隔窗口的方法;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>横向分隔窗口的方法</title>
    </head>
    <frameset rows="40%,40%,*">
        <frame />
        <frame />
        <frame />
    </frameset>
</html>

纵向分隔窗口
另一种形式是纵向分隔窗口,当纵向分隔窗口的时候,使用的是cols属性。
例子:纵向分隔窗口
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>纵向分隔窗口</title>
    </head>
    <frameset cols="40%,30%,*">
        <frame />
        <frame />
        <frame />
    </frameset>
</html>
框架的嵌套
框架的嵌套就是同时混合使用横向结构和纵向结构,即在分隔好的框架种进行新的窗口分隔,之后将这个框架替换成一个新的框架集,那么,写法上只要在<frameset>标签种放入<frameset>就可以了
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>框架的嵌套</title>
    </head>
    <frameset cols="25%,*">
        <frame />
        <frameset rows="40%,*">
            <frame />
            <frame />
        </frameset>
    </frameset>
</html>
将页面放入到窗口框架中
将页面放入到窗口框架种,需要在每一个框架种通过路径的方式来添加页面。
例子:将页面放入到窗口中
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>将页面放入到窗口种中</title>
    </head>
    <frameset rows="40%,*">
        <frame src="red.html"/>
        <frameset cols="50%,*">
            <frame src="green.html"/>
            <frame src="blue.html"/>
        </frameset>
    </frameset>
</html>
给无法处理框架的浏览器注释说明
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>给无法支持框架的浏览器注释说明</title>
    </head>
    <body>
        <frameset cols="20%,40%,*">
            <frame />
            <frame />
            <frame />
            <noframes>
                <body>
                    抱歉,您的浏览器部支持框架
                </body>
            </noframes>
        </frameset>
    </body>
</html>
固定框架的位置
在frameset标签的框架集中,虽然框架的位置是按照实现设定好的出现在浏览器中,但是框架的边框并非是固定的,浏览者还是可以拖拽边框,框架的大小是可以随意改变的,若设计者希望固定框架的尺寸,可以使用<noresize>标签来定位框架的边框
例子:固定框架的边框
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>固定框架的边框</title>
    </head>
    <frameset cols="40%,20%,*">
        <frame noresize="noresize"/>
        <frame noresize="noresize"/>
        <frame noresize="noresize"/>
    </frameset>
</html>
框架中设置滚动条
窗口框架中有个细节,当页面中的内容超过浏览器的大小时,此时框架中会显示出滚动条,这个滚动条也是可以设置的,通过scrolling来设置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置滚动条</title>
    </head>
    <frameset rows="40%,*">
        <frame src="red.html" scrolling="auto"/>
        <frameset cols="38.2%,*">
            <frame src="green.html" scrolling="yes"/>
            <frame src="blue.html" scrolling="no" />
        </frameset>
    </frameset>
</html>
atuo:根据页面的内容是否超出框架的范围,而决定是否超出滚动条,
no:不出现滚动条
yes:表示无论页面的内容有多邵,都出现滚动条

判定边框是否显示
框架的边框也是可以修改的,通过一些简单的属性加修饰,可以改变框架边框的表现形式,如边框的粗细,颜色,或者是边框的边距。
在有些情况下,灰色的边框会很麻烦,看上去把页面弄得支离破碎,使用属性frameborder可以决定是否显示边框。它的写法是:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>框架</title>
    </head>
    <frameset cols="50%,*">
        <frame src="" frameborder="0"/>
        <frame src="" frameborder="0"/>
    </frameset>
</html>
改变边框的表现效果
border表示框架的边框,在这个属性上可以扩展出一些新的特性,如bordercolor,表示边框的颜色。
例子:
改变边框的效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>改变边框的效果</title>
    </head>
    <frameset rows="30%,70%" border="40px" bordercolor="#090">
        <frame />
        <frame />
    </frameset>
</html>
边框的边距
边距是指框架页面内容离边框的距离。使用marginwidth属性设置左右两边的边距,使用marginheight属性设置上下两边的边距
例子:设置边框的边距
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>设置边框的边距</title>
    </head>
    <frameset rows="30%,30%,*">
        <frame src="red.html" marginwidth="50px"/>
        <frame src="green.html" marginwidth="50px"/>
        <frameset cols="40%,*">
            <frame src="blue.html" marginheight="150px"/>
            <frame src="index.html" marginheight="50px" marginwidth="100px"/>
        </frameset>
    </frameset>
</html>
在指定的框架中打开连接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表页</title>
    </head>
    <body>
        <a href="red.html" target="main">red</a>
        <br />
        <br />
        <a href="green.html" target="main">green</a>
        <br />
        <br />
        <a href="blue.html" target="main">blue</a>
    </body>
</html>
框架内的锚点链接
使用frame属性还可以实现在框架内锚点链接,在框架集中设置页面路径的同时,指定锚点的位置
框架页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset cols="20%,*">
        <frame src="list.html" />
        <frame src="index.html" name="main"/>
    </frameset>
</html>


左侧列表页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表页</title>
    </head>
    <body>
        <a href="index.html#red" target="main">red</a>
        <br />
        <br />
        <a href="index.html#green" target="main">green</a>
        <br />
        <br />
        <a href="index.html#blue" target="main">blue</a>
    </body>
</html>


右侧主页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>框架</title>
    </head>
    <body>
        <a href="#" name="red">red</a>
        <a href="#" name="green">green</a>
        <a href="#" name="blue">blue</a>
    </body>
</html>

灵活的<iframe>框架
<iframe>标签的用法不同于<frame>,在表现上页有不少差别,<iframe>创建的框架具有更好的灵活性,它可以容易的放在浏览器中任何地方,可以自由控制窗口的大小,这种框架又被成为是嵌入式框架,或者浮动框架。这种框架也是页面中常见的一种。常见的属性如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建浮动框架</title>
    </head>
    <body>
        <a href="http://www.baidu.com" target="three">百度</a>
        <a href="http://www.zhaoybbk.com" target="three">javastudy</a>
        <a href="http://www.51xjava.com" target="three">51xjava</a>
        <p></p>
        <iframe width="800" height="400" scrolling="auto" align="center" name="three">
    </body>
</html>

 

Tags:HTML   网页   框架

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们