html框架制作導航教程

如果單擊左窗口中的導航列表超鏈接（如“注冊＆認證”、“買家幫助”等），在右窗口中顯示鏈接的頁面內容，其實這就是典型的導航頁面，該如何實現？下面就讓我們來學習下ｈｔｍｌ框架制作導航相關知識。

ｔａｒｇｅｔ目標窗口屬性分為兩類：一類是框架頁面之間的鏈接；另一類是４個特殊窗口的超鏈接。

１．框架頁面之間的鏈接

要設置框架之間的超鏈接，需要兩步：

第一步：設計好框架集頁面，並為每個框架窗口定義名稱。

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

第二步：設置導航欄中的超鏈接的ｔａｒｇｅｔ目標窗口屬性，使其值為框架窗口的名字。

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

下面我們就在上節示例的基礎上，來實現框架之間的超鏈接。

示例１：

首先根據需要，創建好框架集頁面，然後為每個框架窗口定義名稱。設置框架集頁面（ｆｒａｍｅ　Ｓｅｔｓ．ｈｔｍｌ）的代碼如下：

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

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

下面設置導航頁中的超鏈接，也就是設置示例１　１中ｌｅｆｔ．ｈｔｍｌ中的超鏈接，最關鍵的是將導航頁中的各個鏈接圖片或文字的目標打開方式設置為在框架中打開，即將ｔａｒｇｅｔ屬性值設為框架窗口的名字。

由於ｌｅｆｔ．ｈｔｍｌ文檔中有多個超鏈接，而且為了說明框架之間的鏈接，所以我們先准備幾個鏈接頁面，如：ｂｕｙ．ｈｔｍｌ、ｓａｌｅ．ｈｔｍｌ、ｐｅｒｓｏｎ＿ｉｎｆｏ．ｈｔｍｌ。

設置了框架之間鏈接的ｌｅｆｔ．ｈｔｍｌ文檔代碼如下：

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

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

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

設置左側導航欄的超鏈接之後，使用浏覽器打開ｆｒａｍｅ　Ｓｅｔｓ．ｈｔｍｌ文檔，運行效果如圖１所示。

單擊框架導航欄中的鏈接圖片“買家幫助”，將會打開如圖２所示的頁面效果。同理，單擊“賣家幫助”和“個人資料修改”超鏈接，在內容區都會打開相應的ＨＴＭＬ文檔頁面。

圖１　框架頁面的默認顯示頁面
　

圖２　在框架窗口中打開“買家幫助”介紹頁面

２．４個特殊的窗口

在制作網頁中的超鏈接時，默認情況下超鏈接會在當前窗口中打開。通過使用ｔａｒｇｅｔ屬性，可以將目標頁面在一個新的窗口中打開。

語法：

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

其中，ｔａｒｇｅｔ屬性可以取４個值，這些值的具體含義見下表。

屬　性說　明＿ｂｌａｎｋ新啟一個窗口打開鏈接＿ｓｅｌｆ在同一個窗口中打開，默認取值（指沒有設置ｔａｒｇｅｔ屬性值時的情況）＿ｐａｒｅｎｔ在上一級窗口中打開（框架頁面中使用較多）＿ｔｏｐ在整個浏覽器窗口中打開

示例２：

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

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