建立網站結構

網站中的頁面是依階層來組織的。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 頁面有連接 productfeedback.jsp 的線條。 這表示 index 是子頁面 product 和 feedback.jsp 的母項。 這也表示 product 和 feedback.jsp 頁面是同層級。


Web Site Designer 導覽視圖

在階層中,error 頁面和 index 頁面的層次相同;不過,它沒有連接至任何其他頁面的連線。error 頁面和 index 頁面沒有家族類型的關係,它們是同層級的關係。

頁面關係用來自動產生導覽鏈結。 因此,如果 index、product 和 feedback.jsp 等頁面都選取了顯示在導覽中選項,feedback.jsp 頁面的導覽列可含有指向它的母項(index 頁面)及其同層級(product 頁面)的鏈結。 您可以看出這三個頁面都顯示在導覽中,因為您可以見到「顯示在導覽中」圖示。 不過,error 頁面不會顯示在導覽中。這是有道理的,因為您可能想要建立網站遇到問題時所顯示的 error 頁面;不過,您不會想在導覽或網站對照表中顯示 error 頁面。您也可以併入或排除網站對照表中的頁面。在這個範例中,error 頁面以外的所有頁面都會顯示成顯示在網站對照表中

在網站結構中定義導覽

最上頁(通常是網站中所建立的第一頁)通常會設為導覽根 ,不過,您可以變更要作為導覽根的頁面。導覽根很重要,因為它決定了產生導覽列和網站對照表之類網站導覽時所用的鏈結層次。 在這個範例中,index 頁面是導覽的根頁面。

網頁內容

在 Web Site Designer 中,您也可以依照「程式碼」圖示HTML 程式碼圖示JSP 程式碼圖示所示, 看出哪些頁面有實際的檔案與其相關聯。 在這個範例中,index 頁面有相關的 HTML 檔,feedback.jsp 頁面有相關的 JSP 檔。 有相關檔案的「頁面」圖示也會有實心黑色邊框,圖示邊框中斷的頁面則代表它們只是位置保留元。

您也可以從網頁圖示得知有沒有套用某個網頁範本。 依預設,如果頁面有相關的網頁範本,圖示的背景就是藍色。 您可以看出網頁範本已套用在 index 頁面上,因為網頁圖示背景是藍色。

在您定義好新的網站及其最上頁之後, 您可以在 Web Site Designer 中建立網頁圖示來安排網站,即可移入網站。您可以利用 Web Site Designer 來規劃和佈置整個網站的組織,之後,再建立每個網頁檔來填滿網站。

Web Site Designer 由編輯器和網站導覽抽屜組成:
  • Web Site Designer 編輯器。當您編輯 .website-config 檔或編輯「網站導覽」檔案時,會出現 Web Site Designer 編輯器。 您可以在 Web Site Designer 編輯器內檢視整個網站。 您可以利用這個工具來新增、刪除和重新排列組成網站的網頁。 編輯器有兩個視圖:「導覽」視圖和「詳細資料」視圖。「導覽」視圖顯示會網站結構,「詳細資料」視圖會列出網站結構使用的所有網頁。
  • 網站導覽抽屜。當您編輯 HTML 或 JSP 網頁時,會出現「網站導覽」抽屜。當 Web Site Designer 編輯器開啟時, 即會開啟「網站」抽屜。「選用區」視圖有一個網站導覽抽屜,其中有不同導覽列和網站對映表之類的各種網站元素。 您可以在 Page Designer 中,將這些項目拖曳至網頁中。
  • 網站抽屜。「選用區」視圖有一個網站抽屜,其中有各種頁面和專案元素。

您可以將這些 Web Site Designer 工具與其他 Web 工具一起使用,如自由佈置模式和網頁範本。 您可以改變現有的網頁範本,也可以建立您自己的頁面範本,再將它套用在網站的所有網頁上,以確定會有一致的設計。 當編輯網頁範本時,您可以利用自由佈置模式來變更每個網頁的佈置。 您可以變更網頁範本,不需要變更個別網頁,比方說,改變導覽列的大小。 這些變更會套用至整個網站。

移入 Web Site Designer

在 Web Site Designer 中使用「網站導覽」
註:
  • 某些文件類型不能使用網站導覽。 如果新增網站導覽之後出現無法使用這個網站導覽錯誤訊息,且目標頁面使用了所選的網站導覽規格檔,就會產生無效的程式碼。 比方說,如果頁面的文件類型是 CHTML 或 WML,幾乎所有「網站導覽」都會含有在這些標記語言中無效的標示。
  • 導覽列可能含有因相關規格檔而無效的程式碼。請編輯規格檔來更正錯誤。請參閱線上說明中的「編輯導覽規格」主題。
  • 頁面的導覽列可能含有毀損字元。如果導覽標籤含有無法根據頁面中的指定編碼規則來編碼的字元,就可能發生這個情況。 如果要避免這個情況,請將導覽標籤所用的字元類型限制於頁面所用的編碼,或在頁面中使用更有意義的編碼規則。
  • 「插入網站對照表」視窗上列出的所有範例規格檔,都能處理網站結構中第 1 至 5 層之間的頁面。即使您在屬性視圖中設給 siteedit:sitemap 標示的最後一層超出 5,在第 5 層之上的頁面鏈結也不會併入網站對照表中。
相關概念
Web 專案
階式樣式表 (CSS) 設計程式
相關工作
設計網站
建立網頁範本
使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.