練習 1.6:實現網站的動態導覽
您必須完成練習 1.5:將網頁範本套用在網站上,才能實現網站的動態導覽。
當您在練習 1.2 中設計網站的結構時,您做了一些網頁間之關係的決策。
請回想一下您如何利用連接網頁圖示的線條來佈置它們:

網頁相互關聯的方式有許多種。
這些關係有如家庭中的關係。
在這個範例中,「檢視所有分類廣告」是母項網頁,其他三個網頁是它的子項網頁。
另外,這三個網頁彼此是同輩關係網頁。
這些網頁關係用來產生導覽列和標籤等導覽鏈結。
每個網頁都會根據相關的網頁來自動建立它的導覽鏈結。
這個程序稱為動態導覽。
檢查網站結構
您要確定已設定好網站結構來指定導覽所應包括的網頁。
您可以在 Web Site Designer 中指定哪些網頁應該併入為動態導覽中的鏈結、哪些網頁應該併入網站對照表中,以及一些以網站結構和網頁關係為基礎的其他導覽選項。
當您有必須併入網站,但在導覽特性中沒有意義的網頁時,這非常有用。
比方說,您可能會有在網站發生問題時所顯示的錯誤網頁;不過,您不會想在導覽中顯示錯誤網頁。
- 按兩下「專案導覽器」視圖中的網站導覽來檢視您的網站結構。
- 您可以看到您的所有網頁都預設選取顯示在導覽中選項,因為顯示在導覽中圖示 (
) 是可見的。
顯示在導覽中圖示是網頁圖示之圖示列中的第一個圖示。
您要顯示在導覽列的每個網頁都必須選取這個選項。
如果要啟用動態導覽,請在這個網頁中新增一個鏈結。
您也可以停用網頁,使它不會出現在導覽中。
您必須從導覽中停用搜尋結果網頁(過濾清單),因為「檢視所有分類廣告」網頁的搜尋選項會將使用者送到這裡。
- 用滑鼠右鍵按一下過濾清單網頁圖示。
- 選取導覽 > 顯示在導覽中來取消選取它。
現在,過濾清單網頁圖示中的顯示在導覽中圖示應該會變成灰色。
- 您也必須停用「更新清單」網頁,因為「檢視所有分類廣告」網頁的更新選項會將使用者送到這裡。
請用滑鼠右鍵按一下更新清單網頁圖示。
之後,請選取導覽 > 顯示在導覽中來取消選取它。
現在,更新清單網頁圖示中的顯示在導覽中圖示應該會變成灰色。
- 您必須設定網站的導覽根。
「導覽根」通常會設為最上頁,通常就是網站中所建立的第一頁。
請用滑鼠右鍵按一下檢視所有分類廣告網頁圖示,再按一下導覽 > 設定導覽根。
列中的第三個圖示 (
) 是根圖示。
導覽根很重要,因為它決定了產生導覽列之類網站導覽時所用的鏈結層次。
附註:您不應取消選取「檢視所有分類廣告」網頁和「公佈清單」網頁的網站導覽所設定的預設選項。
- 按 Ctrl+S。
新增導覽元件至網頁範本中
- 在「專案導覽器」視圖中,按兩下 template.jtpl 來返回網頁範本。
- 在「選用區」視圖中,按一下網站導覽來開啟包含導覽元件的抽屜。
您可以在網站中新增許多不同類型的動態導覽元件,其中包括網站對照表。
最基本的元件是以網站結構為基礎的鏈結列所組成的水平列。
- 雖然您知道每個網頁頂端都需要一個讓使用者存取網站其他網頁的鏈結列,但您也想在導覽中增加一些視覺趣味。
請將水平欄標元件拖放到網頁範本的第二列;這個元件會在欄標化的列中建立動態鏈結。
這時會開啟插入水平欄標精靈。
- 接受預設值來使用範例導覽元件。
- 接受縮圖影像 (horizontal-tab01.html) 中的預設值,請注意,這時會自動移入檔案名稱欄位。
- 根據網頁關係來選取要出現在導覽列中的鏈結類型。
如果要指定網站的最上頁及每個網頁的所有同輩和子項都要出現在導覽中,請確定您選取了下列項目:
請注意,如果您選取前面或後面的鏈結,您可以提供這些鏈結所呈現的標籤,如「向前」和「向後」。
- 按一下確定。這時會在網頁範本中顯示導覽元件圖示 (
)。
- 將網頁範本變更儲存起來。當您儲存網頁範本時,會將動態導覽變更套用到網站中的所有網頁上。
導覽元件會在 Web 專案中加入一些檔案。
儲存好範本之後,請注意,「專案導覽器」視圖會包含一個新的 .html 以及若干 .gif 檔。
這些檔案會將標籤顯示在您的網頁中:
預覽導覽
如果您要查看導覽在實際網頁而不是範本中的外觀實例,請在「專案導覽器」視圖中按兩下 all_records.jsp,在 Page Designer 中按一下預覽標籤。
您可以看到標籤上的名稱就是網頁的導覽標籤,而不是檔案名稱。
另外,也請注意,現行網頁會顯示成強調顯示的標籤;當您導覽網站時,現行網頁一律會是頂端的強調顯示標籤。
要訣:如果您在「導覽」視圖中變更了網站結構,動態導覽鏈結會自動更新來反映新結構。
請注意,兩個標籤旁邊都有鏈結圖示
和 abc 符號。
這些符號是為了提醒您它們是鏈結,且它們是動態產生的文字。
當您測試網頁或顯示真正伺服器中的網頁時,不會出現這些圖示。
您已設定好動態導覽,現在,您已準備好開始練習 1.7:預覽網站。