如果单击左窗口中的导航列表超链接（如“注册＆认证”、“买家帮助”等），在右窗口中显示链接的页面内容，其实这就是典型的导航页面，该如何实现？下面就让我们来学习下ｈｔｍｌ框架制作导航相关知识。

ｔａｒｇｅｔ目标窗口属性分为两类：一类是框架页面之间的链接；另一类是４个特殊窗口的超链接。

１．框架页面之间的链接

要设置框架之间的超链接，需要两步：

第一步：设计好框架集页面，并为每个框架窗口定义名称。

如：＜ＦＲＡＭＥ　ｓｒｃ＝＂ｒｉｇｈｔ．ｈｔｍｌ”　ｎａｍｅ＝＂ｉｇｈｔｆｒａｍｅ＂＞

第二步：设置导航栏中的超链接的ｔａｒｇｅｔ目标窗口属性，使其值为框架窗口的名字。

如：＜ａ　ｈｒｅｆ＝”ｒｉｇｈｔ．ｈｔｍｌ”　ｔａｒｇｅｔ＝”ｒｉｇｈｔｆｒａｍｅ”＞

下面我们就在上节示例的基础上，来实现框架之间的超链接。

示例１：

首先根据需要，创建好框架集页面，然后为每个框架窗口定义名称。设置框架集页面（ｆｒａｍｅ　Ｓｅｔｓ．ｈｔｍｌ）的代码如下：

＜ＦＲＡＭＥＳＥＴ　ｒｏｗｓ＝＂２０％，＊＂　　ｆｒａｍｅｂｏｒｄｅｒ＝＂ｎｏ＂　ｂｏｒｄｅｒ＝＂０＂　ｆｒａｍｅｓｐａｃｉｎｇ＝＂０＂＞
　　＜ＦＲＡＭＥ　ｓｒｃ＝＂ｔｏｐ．ｈｔｍｌ＂　ｎａｍｅ＝＂ｔｏｐＦｒａｍｅ＂　ｓｃｒｏｌｌｉｎｇ＝＂Ｎｏ＂　ｎｏｒｅｓｉｚｅ＝＂ｎｏｒｅｓｉｚｅ＂　ｉｄ＝＂ｔｏｐＦｒａｍｅ＂　ｔｉｔｌｅ＝＂ｔｏｐＦｒａｍｅ＂　／＞
　　＜ＦＲＡＭＥＳＥＴ　　　ｃｏｌｓ＝＂２０％，＊＂　ｆｒａｍｅｓｐａｃｉｎｇ＝＂０＂　ｆｒａｍｅｂｏｒｄｅｒ＝＂ｎｏ＂　ｂｏｒｄｅｒ＝＂０＂＞
　　　　＜ＦＲＡＭＥ　ｓｒｃ＝＂ｌｅｆｔ．ｈｔｍｌ＂　ｎａｍｅ＝＂ｌｅｆｔＦｒａｍｅ＂　ｓｃｒｏｌｌｉｎｇ＝＂Ｎｏ＂　ｎｏｒｅｓｉｚｅ＝＂ｎｏｒｅｓｉｚｅ＂　　／＞
　　　　＜ＦＲＡＭＥ　ｓｒｃ＝＂ｍａｉｎ．ｈｔｍｌ＂　ｎａｍｅ＝＂ｒｉｇｈｔＦｒａｍｅ＂　　／＞

　　　　＜！－－ｎａｍｅ＝＂ｒｉｇｈｔＦｒａｍｅ＂　定义框架名，方便ｔａｒｇｅｔ引用－－＞
　　＜／ＦＲＡＭＥＳＥＴ＞
＜／ＦＲＡＭＥＳＥＴ＞

下面设置导航页中的超链接，也就是设置示例１　１中ｌｅｆｔ．ｈｔｍｌ中的超链接，最关键的是将导航页中的各个链接图片或文字的目标打开方式设置为在框架中打开，即将ｔａｒｇｅｔ属性值设为框架窗口的名字。

由于ｌｅｆｔ．ｈｔｍｌ文档中有多个超链接，而且为了说明框架之间的链接，所以我们先准备几个链接页面，如：ｂｕｙ．ｈｔｍｌ、ｓａｌｅ．ｈｔｍｌ、ｐｅｒｓｏｎ＿ｉｎｆｏ．ｈｔｍｌ。

设置了框架之间链接的ｌｅｆｔ．ｈｔｍｌ文档代码如下：

＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＭＥＴＡ　ｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂　ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；　ｃｈａｒｓｅｔ＝ｇｂ２３１２＂　／＞
＜ＴＩＴＬＥ＞左侧导航页面＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞

＜ＢＯＤＹ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｒｉｇｈｔ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂ｒｉｇｈｔＦｒａｍｅ＂＞

　　　＜！－－ｔａｒｇｅｔ＝＂ｒｉｇｈｔＦｒａｍｅ＂　ｒｉｇｈｔ．ｈｔｍｌ文档就会在名称为ｒｉｇｈｔｆｒａｍｅ框架窗口中打开－－＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｒｅｇ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５８＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｂｕｙ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂ｒｉｇｈｔＦｒａｍｅ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｂｕｙ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１６０＂　ｈｅｉｇｈｔ＝＂３２＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｓａｌｅ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂ｒｉｇｈｔＦｒａｍｅ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｓａｌｅ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５８＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｐｅｒｓｏｎ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５７＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ｐ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞
　

设置左侧导航栏的超链接之后，使用浏览器打开ｆｒａｍｅ　Ｓｅｔｓ．ｈｔｍｌ文档，运行效果如图１所示。

单击框架导航栏中的链接图片“买家帮助”，将会打开如图２所示的页面效果。同理，单击“卖家帮助”和“个人资料修改”超链接，在内容区都会打开相应的ＨＴＭＬ文档页面。

图１　框架页面的默认显示页面
　

图２　在框架窗口中打开“买家帮助”介绍页面

２．４个特殊的窗口

在制作网页中的超链接时，默认情况下超链接会在当前窗口中打开。通过使用ｔａｒｇｅｔ属性，可以将目标页面在一个新的窗口中打开。

语法：

＜ａ　ｈｒｅｆ＝＂ｕｒｌ＂　ｔａｒｇｅｔ＝＂＿ｂｌａｎｋ＂＞

其中，ｔａｒｇｅｔ属性可以取４个值，这些值的具体含义见下表。

属　性说　明＿ｂｌａｎｋ新启一个窗口打开链接＿ｓｅｌｆ在同一个窗口中打开，默认取值（指没有设置ｔａｒｇｅｔ属性值时的情况）＿ｐａｒｅｎｔ在上一级窗口中打开（框架页面中使用较多）＿ｔｏｐ在整个浏览器窗口中打开

示例２：

＜ＨＴＭＬ＞
＜ＨＥＡＤ＞
＜ＭＥＴＡ　ｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂　ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；　ｃｈａｒｓｅｔ＝ｇｂ２３１２＂　／＞
＜ＴＩＴＬＥ＞左侧导航页面＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞

＜ＢＯＤＹ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｒｉｇｈｔ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂＿ｂｌａｎｋ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｒｅｇ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５８＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｂｕｙ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂＿ｓｅｌｆ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｂｕｙ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１６０＂　ｈｅｉｇｈｔ＝＂３２＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｓａｌｅ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂ｒ＿ｐａｒｅｎｔ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｓａｌｅ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５８＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜Ｐ＞＜Ａ　ｈｒｅｆ＝＂ｐｅｒｓｏｎ＿ｉｎｆｏ．ｈｔｍｌ＂　ｔａｒｇｅｔ＝＂＿ｔｏｐｔ＂＞
　　　＜ＩＭＧ　ｓｒｃ＝＂ｉｍａｇｅｓ／ｐｅｒｓｏｎ．ｊｐｇ＂　ｗｉｄｔｈ＝＂１５７＂　ｈｅｉｇｈｔ＝＂３１＂　ｂｏｒｄｅｒ＝＂０＂　／＞＜／Ａ＞＜／Ｐ＞
＜／ＢＯＤＹ＞
＜／ＨＴＭＬ＞