網站中的頁面是依階層來組織的。Web Site Designer 會利用這個階層式結構資訊來自動產生導覽鏈結和網站對照表。
當網站結構變更時(比方說,新增網頁),系統會自動重新產生導覽鏈結,以反映新的網站結構。這個動態導覽是利用導覽列和網站對映表的特殊註解標示來完成的。這些註解標示會使用網站結構資訊和 Web Site Designer 儲存在 XML 檔中(稱為 .website-config)的其他網站相關資訊。當您建立 Web 專案時,Web Site Designer 支援是專案的預設特性。Web 專案含有稱為「網站導覽」的 website-config 檔之位置保留區。 按兩下「網站導覽」會啟動 Web Site Designer,並在「導覽」視圖中開啟 website-config。
網站結構中頁面之間的關係
在 Web Site Designer 中,會以視覺化的方式將網站呈現在「導覽」視圖中。 網站中的每個網頁都是以網頁圖示來表示的。網頁圖示之間有連接的線條,用來說明頁面之間的關係。 頁面的相互關係有許多種,其中有許多是根據家族關係來建立模型。 比方說,頁面可以有親子關係或同屬關係。
在下面的範例中,index 頁面有連接 product 和 feedback.jsp 的線條。 這表示 index 是子頁面 product 和 feedback.jsp 的母項。 這也表示 product 和 feedback.jsp 頁面是同層級。
在階層中,error 頁面和 index 頁面的層次相同;不過,它沒有連接至任何其他頁面的連線。error 頁面和 index 頁面沒有家族類型的關係,它們是同層級的關係。
頁面關係用來自動產生導覽鏈結。
因此,如果 index、product 和 feedback.jsp 等頁面都選取了顯示在導覽中選項,feedback.jsp 頁面的導覽列可含有指向它的母項(index 頁面)及其同層級(product 頁面)的鏈結。
您可以看出這三個頁面都顯示在導覽中,因為您可以見到「顯示在導覽中」圖示。
不過,error 頁面不會顯示在導覽中。這是有道理的,因為您可能想要建立網站遇到問題時所顯示的 error 頁面;不過,您不會想在導覽或網站對照表中顯示 error 頁面。您也可以併入或排除網站對照表中的頁面。在這個範例中,error 頁面以外的所有頁面都會顯示成顯示在網站對照表中
。
在網站結構中定義導覽
最上頁(通常是網站中所建立的第一頁)通常會設為導覽根,不過,您可以變更要作為導覽根的頁面。導覽根很重要,因為它決定了產生導覽列和網站對照表之類網站導覽時所用的鏈結層次。
在這個範例中,index 頁面是導覽的根頁面。
網頁內容
在 Web Site Designer 中,您也可以依照「程式碼」圖示和
所示,
看出哪些頁面有實際的檔案與其相關聯。
在這個範例中,index 頁面有相關的 HTML 檔,feedback.jsp 頁面有相關的 JSP 檔。
有相關檔案的「頁面」圖示也會有實心黑色邊框,圖示邊框中斷的頁面則代表它們只是位置保留元。
您也可以從網頁圖示得知有沒有套用某個網頁範本。 依預設,如果頁面有相關的網頁範本,圖示的背景就是藍色。 您可以看出網頁範本已套用在 index 頁面上,因為網頁圖示背景是藍色。
在您定義好新的網站及其最上頁之後, 您可以在 Web Site Designer 中建立網頁圖示來安排網站,即可移入網站。您可以利用 Web Site Designer 來規劃和佈置整個網站的組織,之後,再建立每個網頁檔來填滿網站。
您可以將這些 Web Site Designer 工具與其他 Web 工具一起使用,如自由佈置模式和網頁範本。 您可以改變現有的網頁範本,也可以建立您自己的頁面範本,再將它套用在網站的所有網頁上,以確定會有一致的設計。 當編輯網頁範本時,您可以利用自由佈置模式來變更每個網頁的佈置。 您可以變更網頁範本,不需要變更個別網頁,比方說,改變導覽列的大小。 這些變更會套用至整個網站。
移入 Web Site Designer