最新消息:

XHTML框架结构

Html 大步 762浏览 0评论

XHTML框架结构
作用:将一个浏览器窗口划分为若干个小窗口,这样就可以只打开一个窗口,看到不同的页面的效果,适合导航等。
框架结构使用的时候,<body>标签会被<frameset>所取代,然后通过<frameset>的子窗口标签<frame>定义每一个子窗口和子窗口的页面属性,子窗口的排列遵循从左到右,从上到下的次序规则。

1.划分框架
用<frameset>标记来划分框架,
属 性                        描 述
border                 设置边框粗细,默认是5象素.
bordercolor                   设置边框颜色
frameborder        指定是否显示边框 :"0"代表不显示边框,"1"代表显示边框
cols               用"象素数" 和 "%"分割左右窗口,"*"表示剩余部分
rows               用"象素数" 和 "%"分割上下窗口,"*"表示剩余部分
framespacing="5"      表示框架与框架间的保留空白的距离
noresize          设定框架不能够调节,只要设定了前面的,后面的将继承

2.子窗口的<frame>标签设定
<frame>是单标签,该标签必须放在框架集<frameset>中使用。<frameset>设置了几个子窗口就必须对应几个<frame>标签,而且每一个<frame>标签内还必须使用src属性设定一个网页文件。
属 性                            描 述
src                            指示加载的url文件的地址
bordercolor                         设置边框颜色
frameborder      指示是否要边框,1显示边框,0不显示(不提倡用 yes 或 no)
border                             设置边框粗细
name              指示框架名称,是连结标记的 target所要的参数
noresize           指示不能调整窗口的大小,省略此项时就可调整,
scrolling        指示是否要滚动条,auto根据需要自动出现,Yes有,No无
marginwidth           设置内容与窗口左右边缘的距离,默认为1
marginheight       设置内容与窗口上下边缘的边距,默认为1
width            框窗的宽及高 默认为width="100" height="100"
align            可选值为 left, right, top, middle, bottom

3.窗口的名称和链接
如果在窗口中要做链接,就必须对每一个子窗口命名,以便被用于窗口间的链接。在窗口的链接中使用targe属性,就可以将被链接的内容放置到想要放置的窗口内。

演示文件代码如下,将三个代码分别一次按顺序保存为index.html、main.html、menu.html、top.html,并且放到同一个文件夹下!

index.html代码:

1
2
3
4
5
6
7
8
9
10
<html>                                                                               <!--  网页开始标记 -->
    <head><title>使用框架定义后台管理平台模型</title></head>                     <!--  设置网页标题 -->
    <frameset rows="80,*" frameborder="1" border="5">                            <!--  划分上下两行 -->
       <frame src="top.html" name="top" scrolling="no" noresize/>           <!--  顶部大类窗体 -->
        <frameset cols="200, *">                                             <!--  划分左右两列 -->
              <frame src="menu.html" name="menu" scrolling="no" noresize/> <!--  左边菜单窗体 -->
              <frame src="main.html" name="main" noresize />               <!--  右边内容窗体 -->
        </frameset>                                                          <!--  内层框架结束 -->
    </frameset>                                                                  <!--  外层框架结束 -->
</html>           

main.html代码:

1
2
3
4
5
6
<html>
    <head><title>无标题文档</title></head>
    <body>
        <center><h4>大类管理(一) > 管理选项1 > 内容设置</h4></center>
    </body>
</html>

menu.html代码:

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head><title>无标题文档</title></head>
    <body>
        <center><h3>大类管理(一)菜单</h3></center>
        <p>
            <a href="main.html" target="main">管理选项1</a><br>
            <a href="main2.html" target="main">管理选项2</a><br>
            <a href="main3.html" target="main">管理选项3</a><br
        </p>
    </body>
</html>

top.html代码:

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head><title>无标题文档</title></head>
    <body>
        <center><h2>后台管理平台</h2></center>
        <p>
            <a href="menu.html" target="menu">大类管理(一)</a> ||
            <a href="menu2.html" target="menu">大类管理(二)</a> ||
            <a href="menu3.html" target="menu">大类管理(三)</a
        </p>
    </body>
</html>

演示截图:

xtml框架结构

转载请注明:大步's Blog » XHTML框架结构

SiteMap