在看w3school里面HTML课程的时候,看到框架,有一个导航框架的实例。实现了功能,但是没有给出源码。我查了一下frame的具体操作方法,写出了所有代码。

我写的导航框架包括五个文件
HTML:frame导航框架的实现方法_操作方法
其中,每个文件的代码依次为。
框架_导航框架.html

<html>
<frameset cols = "120,*">
<frame src = "框架_导航框架_目录链接.html"/>
<frame src = "框架_导航框架_显示a.html" name="showfram"/>

</html>

在这部分代码中,使用cols属性将页面分为两部分,一部分包括120像素,另一部分为剩余部分。同时指定两部分分别的HTML代码。第二个frame中name属性,相当于给该frame起了一个名字,方面后面对该部分进行操作。

框架_导航框架_目录链接.html

<html>
<p> <a href = "框架_导航框架_显示a.html" target="showfram">Frame a </a> </p>
<p> <a href = "框架_导航框架_显示b.html" target="showfram">Frame b </a> </p>
<p> <a href = "框架_导航框架_显示c.html" target="showfram">Frame c </a> </p>
</html>

在框架_导航框架.html中,相当于用frameset将整个页面分成了两部分,此部分代码相当于对左边部分进行操作。增加三个超链接。target属性,用于指定对应的html文件在名称name为showfram的frame中打开。

框架_导航框架_显示a.html

<html>

<body bgcolor = "yellow">

<p>Frame B </p>

</body>
</html>

框架_导航框架_显示b.html

<html>

<body bgcolor = "blue">

<p>Frame B </p>

</body>
</html>

框架_导航框架_显示c.html

<html>

<body bgcolor = "purple">

<p>Frame a </p>

</body>
</html>

这三部分代码仅书写三个不同的结果界面。
最终实现效果图如下。

初始界面以及点击Frame a界面:
HTML:frame导航框架的实现方法_操作方法_02
点击Frame b界面:
HTML:frame导航框架的实现方法_html_03
点击Frame c界面:
HTML:frame导航框架的实现方法_超链接_04