码迷,mamicode.com
首页 > 其他好文 > 详细

框架---学习笔记04

时间:2017-01-12 11:55:49      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:支持   ima   独立   src   尺寸   get   包括   html   frame   

第9章 框架

    9.1 框架概述
        框架的作用,就是把浏览器窗口划分成若干个小窗口,每个小窗口可以分别显示不同的网页。这样在一个页面中可以同时显示不同网页内容,不同窗口的内容相互独立。框架的主要用途是导航,通常会在一个窗口中显示导航条,另外一个窗口则作为内容窗口,用于显示导航栏目的目标页面内容,窗口的内容会根据导航栏目的不同而动态变化。
    html框架集与body同级,因此不能同时出现。框架的基本结构主要分为框架集<frameset>和框架<frame>两个部分,基本语法如下:
    <frameset>
        <frame/> <!-- 一个框架集中可以包括多个框架,每个框架窗口显示的页面由框架的 src 属性指定。 -->
        <frame/>
        ...
    </frameset>
    9.2 框架集标记<frameset>
    定义浏览器窗口的分割方式、各分割窗口(框架)的大小以及设置框架边框的颜色和粗细等属性。主要属性有:
    属性             说明
    border         边框宽度,框架粗细
    bordercolor    边框颜色
    frameborder    是否显示边框(取值1, 0或yes,no)
    framespacing   边框间距
    rows 上下分割窗口 cols 左右分割窗口
    <frameset>标记对浏览器窗口的分割存在不同的方式,主要分为以下几种类型
    ● cols左右(水平)分割  <frameset cols="80,*">
    ● rows上下(垂直)分割  <frameset rows="80,*">
    cols把框架分成左右两半,上下分割使用rows(分成上下两半)。每个框架的大小使用逗号隔开,最后一个使用*会把剩下的都分配给它
    ● 嵌套分割:左右上下分割都有。<frameset>里面再嵌套一个<frameset>标记
1     <frameset rows="100,*">
2         <frame/>
3         <frameset cols="20%,*">
4         <frame/>
5         </frameset>
6     </frameset>
    效果图如下:
技术分享

    9.3 框架标记<frame>
    <frameset>分割得到的每个子窗口都需要显示不同的页面内容,这些页面内容由<frame>标记来设置。<frame>是个单标记,它必须放在框架集frameset中,<frameset>分割了几个子窗口就必须对应几个<frame>标记。<frame>标记的常用属性有:
    属性            属性值           说明
    src                             显示页面的URL地址
    scrolling      yes、no、auto    是否显示滚动条
    noresize                        禁止改变框架的尺寸大小
    border         边框宽度,框架粗细
    bordercolor    边框颜色
    marginwidth    设置内容与框架窗口左右边框的距离
    marginheight   设置内容与框架窗口上下边框的距离
 
    基本语法:<frame src="01.html" name="test" />
    <!-- src 框架的源文件地址,name 框架名(命名框架,以便超链接使用它作为目标窗口) -->
 
    9.4 不支持框架标记<noframes>
    当用户浏览器版本太低不支持框架时,浏览器制作人员无法改变这一现象,所能做的只是告诉用户事实,把显示给用户看的文本信息放在<body></body>标记对之间;而<noframes>放在</frameset>标记后面。
    demo:
    <frameset cols="130,*"><frame src="menu.html"/><frame src="introduce.html"/></frameset>
    <noframes>
        <body>抱歉,您的浏览器版本太低,不支持框架,无法看到页面内容,请使用较新的浏览器来浏览。</body>
    </noframes>
    当用户浏览器版本太低不支持框架时,浏览器窗口将显示<body></body>标记对之间的文本内容,否则将显示<frameset></frameset>中各个框架的页面内容。
 
    9.5 浮动框架标记<iframe>(也有叫“内嵌框架”的)
    浮动框架时一种特殊的框架页面,主要体现在这个框架时嵌套在一个HTML页面中,作为页面的一个组成部分。具有和<frame>一样的属性,也有自己的属性:
    <iframe src="源文件地址" name="名" width="宽" height="高" align="对齐方式">
 
    9.6 框架与超链接
    一般情况下在框架中的a链接使用target属性实现框架内文件跳转时:
          href(一直不变,即指向打开的文件路径不需要变)
            _self -> 自己框架页面打开
           _blank -> 新页面打开
             _top -> 顶级框架页面打开
          _parent -> 到其父级框架页面打开
       _framename -> 将我们想要打开的页面在指定的框架中打开
 
    demo:
    首先,新建一个网页“框架集和框架.html”,为右侧框架窗口添加"name"标识,输入下面的内容:
 1     <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>框架集frameset和框架frame</title>
 6     </head>
 7     <frameset cols="10%,*">
 8     <frame src="menu.html" />
 9     <frame  src="http://qq.com" name="RightFrame" />
10     </frameset>
11     </html>
    然后,新建一个网页“menu.html”,在左侧窗口中,设置"target"属性显示的窗口名,输入下面的内容:
 1     <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6     </head>
 7     <body>
 8         <a href="http://qq.com/"  target="RightFrame">qq</a>
 9         <a href="http://baidu.com" target="RightFrame">百度</a>
10         <a href="http://taobao.com" target="RightFrame">淘宝</a>
11     </body>
12     </html>
    如下图,刚开始打开这个“框架集和框架.html”这个网页时,显示的效果如下:
技术分享

    左边相当于是一个菜单,右边是显示效果,当你单击“百度”或者“淘宝”时都可以链接到相应网站。
    这就是我使用frameset和frame来实现的菜单功能。
    下面,讲一下框架与超链接。在"menu.html"中插入下面的代码:
    <span><a href="http://qq.com" target="_parent">在父框架中打开qq</a></span>
    这个时候,在浏览器中打开”框架集和框架.html“,单击”在父框架中打开qq“,这个时候,你会发现,整个网页直接转向了qq首页。”框架集和框架.html“就相当于”menu.html“的父框架,当”menu.html“中的a指定了target="_parent"时,就会直接在”框架集和框架.html“中打开这个网页。对于target="_self"或者其它效果就交给你们自己去修改玩玩。
 

框架---学习笔记04

标签:支持   ima   独立   src   尺寸   get   包括   html   frame   

原文地址:http://www.cnblogs.com/chenhaoqiang/p/6275267.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!