html里frame导航框架实现方法

来源：互联网发布：mac地址制造商编辑：程序博客网时间：2024/05/16 10:38

html里frame导航框架实现方法

看了w3cschool里面html框架一节，里面有讲到导航框架，而且有一个可以diy的实例，但是这个例子里省掉了关键性的内容，让人看得不明不白，，经过我的整理，现在还原html里frame导航框架的设置方法。

过程很简单的，，只需简单的几步就可以实现这个美妙的功能了。

这个框架导航还是非常有用的，大凡有点名气的网站，大都或多或少用到了这个功能。

我以最精简的实例讲解。这个例子模仿w3cschool关于html导航框架的例子。

首先，用dreamweaver在电脑桌面新建一个站点，站点根文件夹里建5个网页，分别取名1.html，2.html，3.html，4.html，5.html。

其次，分别在这5个网页里面写入代码，在1.html，2.html，3.html，3个网页里分别设置一种背景颜色就行了，因为只是简单的测试，

比如红色，蓝色，橙色。

在5.html里写入

<html>

<framesetcols="30%,70%">
<frame src="4.html" />
<framesrc="5.html" name="show"/>

</html>

在4.html里写入

<html>

<ahref="1.html" target="show">A</a> 
 <a href="2.html" target="show">B</a> 
 <a href="3.html" target="show">C</a>

</html>

大功告成了，用浏览器打开5.html，会有如下这个红色的页面，

点击B的时候会有这个页面，

点击C的时候会有这个页面，

预期的效果实现了，左边的A,B,C就是导航菜单，后边的就是变化的网页内容。

红色部分是关键内容，请细心琢磨。我觉得这是指定哪个网页在哪个窗口打开，这也是frame框架的关键所在。

<frame src="5.html"name="show"/> ，这句里的name="show",是指定这个frame的名称为show,

<a href="1.html"target="show">A</a>，这句起到的作用是指定1.html这个网页在名称为show的flame里打开。

2 0