1.2.5 框架网页设计

框架可以将文档划分为若干窗格，在每个窗格中显示一个网页，从而得到在同一个浏览器窗口中显示不同网页的效果。框架网页是通过一个框架集<frameset>和多个框架<frame>标记来定义的。在框架网页中将<frameset>标记放在<head>标记之后取代<body>的位置，还可以使用<noframes>标记指出框架不能被浏览器显示时的替换内容。

框架网页的基本结构如下：

<!DOCTYPE html
PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>框架网页的基本结构</title>
</head>
<frameset属性="值"…>
    <frame属性="值"…/>
    <frame属性="值"…/>
    …
</frameset>
</html>

1.框架集

框架集包括如何组织各个框架的信息，可以用<frameset>标记定义。框架是按照行、列组织的，可以用<frameset>标记的下列属性对框架结构进行设置。

● cols：在创建纵向分隔框架时指定各个框架的列宽，取值有三种形式，即像素、百分比和相对尺寸。例如：

cols=" *, *, *"表示将窗口划分为三个等宽的框架。

cols=" 30%, 200, *"表示将浏览器窗口划分为三列框架，其中第1列占窗口宽度的30%，第2列为200像素，第三列为窗口的剩余部分。

cols=" *, 3 *, 2 *"表示左边的框架占窗口的1/6，中间的占1/2，右边的占1/3。

● rows：指定横向分隔框架时各个框架的行高，取值与cols属性类似。但rows属性不能与cols属性同时使用，若要创建既有纵向分隔又有横向分隔的框架，应使用嵌套框架。

● frameborder：指定框架周围是否显示3D边框。若取值为1（默认值）则显示，为0则显示平面边框。

● framespacing：指定框架之间的间隔（以像素为单位，默认为0）。

要创建一个嵌套框架集，可以使用如下代码：

<html>
<head>
    <title>嵌套框架</title>
</head>
<frameset rows="20%,400,*">
    <frame />
    <frameset cols="300, *" />
        <frame />
        <frame />
    </frameset>
    <frame />
</frameset>
</html>

2.框架

框架使用<frame>标记来创建，主要属性如下。

● name：指定框架的名称。

● frameborder：指定框架周围是否显示3D边框。

● marginheight：指定框架的高度（以像素为单位）。

● marginwidth：指定框架的宽度（以像素为单位）。

● noresize：指定不能调整框架的大小。

● scrolling：指定框架是否可以滚动，取值为yes、no和auto。

● src：指定在框架中显示的网页文件。

【例1.8】设计一个框架网页，并在各个框架中各显示一个网页。

（1）1_8frame.html（主网页）

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>框架中显示网页</title>
</head>
<frameset rows="80, *">
    <frame src="1_8top.html" name="frmtop" />
    <frameset cols="25%,*">
        <frame src="1_8left.html" name="frmleft" />
        <frame src="1_8content.html" name="frmmain" />
    </frameset>
</frameset>
</html>

（2）1_8top.html（上部网页）

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body bgcolor="#8888FF">
<marquee  behavior="alternate"  direction="right">
    <font size="5" color="blue">欢迎登录学生成绩管理系统</font>
</marquee>
</body>
</html>

（3）1_8content.html（下部右边网页）

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>content网页</title>
</head>
<body>
    <h2 align="center">这里是content网页。</h2>
</body>
</html>

（4）1_8left.html（下部左边网页）

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>left网页</title>
</head>
<body>
    <a href="1_5ex.html" target="frmmain">学生成绩表</a></br></br>
    <a href="1_6stu.html" target="frmmain">学生信息显示</a></br></br>
    <a href="1_8content.html" target="frmmain">返回主页</a></br>
</body>
</html>

完成后运行1_8frame.html文件，单击页面下部左边网页的“学生信息显示”超链接，运行效果如图1.20所示。

图1.20 框架网页

上一章目录下一章