实现页面的分帧显示

转载 2006年06月09日 17:26:00
实现页面的分帧显示



,Frame,可以将显示区域分割成几个显示页面,每个页面占据一个帧。

比如CSDN的社区就可以很明显的看见页面被分成两个部分,我们可以左右拖动中间的滚动条以调整两部分所占页面的比例。

图1frame.bmp

一个简单的实现方法是这样的:
将显示区域分为左右两个区域,左区域显示链接菜单,点击左边链接时在右区域显示相应页面。

图2
frame2.bmp


------------------------------------
示例:

假设我们将显示区域分为左右两个区域(分别占25%与75%),左边显示菜单,右边显示对应页面。

菜单页面:
menu.htm:

<html>
    <head>
        <title>left</title>
    </head>

    <body>
        <p>
            <a href="right_1.htm" target="main">页面1</a>
            <br><br>   
            <a href="right_2.htm" target="main">页面2</a>
        </p>
    </body>


</html>

页面1:

<html>
    <head>
        <title>right_1</title>
    </head>

    <body>
   
        <p>
            <font color="red">这是页面1</font>
        </p>

    </body>


</html>

页面2:

<html>
    <head>
        <title>right_2</title>
    </head>

    <body>
   
    <p>
        <font color="green">这是页面2</font>
    </p>

    </body>


</html>

如何组织它们:
index.htm:

<html>
    <head>
        <title>帧示例</title>
    </head>

    <frameset cols="25%,*">
        <frame src="menu.htm" scrolling="no" name="left">
        <frame src="right_1.htm" scrolling="auto" name="main">
    </frameset>

</html>

------------------------------------

对index.htm的解释:

<frameset></frameset>:帧设置,我们将显示区域分成左右两个区域,实际上就时设置了左右两个帧。

<cols="25%,*">: frameset的一个属性,表示按照列为主序,也就时分成几个怎样的列,这里分成了两个
,第一列占总宽度的25%,你可以采用象素值比如200而不是这里的百分比,*号表示剩余的,这里剩余的
全部给了另以列,如果有几个*号,则它们平均分配生育的,又比如cols="200,*,*",共三列,第一列200象素,
剩余的平均分配给另两列。除此之外还有rows属性,与cols用法相同,比如 rows="25%,35%,*",cols="30%,*"
则将显示区域分为三行两列共6帧。

<frame>表示一个帧,利用它的属性对该帧进行具体设置,src属性表示该帧初始时的页面文件,name属性表示
该帧名称,scr与name属性必须显式指明,scrolling表示滚动方式(no,auto或yes),如果在frame中加入noresize
属性则用户不可调整帧大小。


对menu.htm的解释:

<a href="right_1.htm" target="main">页面1</a>:注意这里的target属性,是你设置的某个帧的name属性值,
这使链接打开的新页面在指定的该帧中显示(否则,如果在新窗口中打开,我们忙碌了半天的此项工作也就
没有意义了).

HTML高级标签之窗口分帧(后台管理页面)

上一章学习了界面分帧,  这次再学习一下如何构建一个后台管理的界面. 三: 窗口分帧之后台管理页面 1.作用: 使用frameset进行窗口分帧, 构建一个简易的后台管理页面 ...

HTML高级标签之窗口分帧(前台界面演示)

窗口分帧就是一个浏览器显示多个窗口,   显示多个页面,  更多用于后台页面. 下章会讲到后台的运用. 二: 窗口分帧 1.作用: 将浏览器分为多个窗口, 每个窗口显示不同的网页(URL) ...

商品浏览系统之商品详细信息显示页面实现

一 代码  page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>  page...

C#实现点击菜单栏在同一页面显示

  • 2016年06月12日 19:33
  • 5.69MB
  • 下载

Android实现页面悬浮显示

  • 2016年07月12日 17:20
  • 135KB
  • 下载

实现:上传图片后再把图片显示到页面上去

kindeditor还是没学好,很多功能都只是
  • sunhuwh
  • sunhuwh
  • 2014年05月21日 04:09
  • 18238

html5实现页面的显示本地图片

  • 2013年01月18日 14:50
  • 1021B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现页面的分帧显示
举报原因:
原因补充:

(最多只允许输入30个字)