XHTML 框架导航示例_HTML教程

框架经常用于固定栏目导航的情况，如后台管理页面，其好处是操作时不用刷新整个页面。

上下框架导航例子

为简单起见，下面演示一个简单的上下导航框架的制作。对于更复杂的框架导航，原理是一样的。

frame.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="50,*">
  <frame src="frame_top.html" name="top" scrolling="no" noresize="noresize" />
  <frame src="frame_main.html" name="main" scrolling="yes" />
  <noframes>
   <body>
   <p>对不起，您的浏览器不支持框架！</p>
   </body>
  </noframes>
 </frameset>
</html>

frame_top.html 页面代码

<html>
 <head>
  <title>顶部导航页面</title>
 </head>
 <body>
  <p>
  <a href="frame_main.html" target="main">主页面</a>
  <a href="menu1.html" target="main">菜单1</a>
  <a href="index.html" target="_top">回全屏首页</a>
  </p>
 </body>
</html>

frame_main.html 页面代码

<html>
 <head>
  <title>主页面</title>
 </head>
 <body>
  <p>
  <p>这是主页面：frame_main！</p>
  </p>
 </body>
</html>

menu1.html 页面代码

<html>
 <head>
  <title>菜单1</title>
 </head>
 <body>
  <p>
  <p>这是菜单1页面：menu1.html。</p>
  </p>
 </body>
</html>

将以上文件存储在同一目录下，在浏览器查看 frame.html 页面，可以看到我们的框架结构。分别点击上面的菜单，可以看出导航效果。

提示

在该例子里面，请注意 target 属性的使用，其取值分别与 <frame /> 标签的 name 属性对应。当链接目标为自己本身时，可以取值 _self ，若要跳出框架，可以取值 _top 。