從 Web Site Designer 套用網頁範本

請利用網頁範本來控制網站中所有網頁的共同元素。在將網頁範本套用到某個網站之後, 您只要在範本中變更一次即可,而不需要對個別網頁變更多次,因而可將未來設計變更的工作減至最低。

必備條件:
  1. 建立 Web 專案。
  2. 建立網站。
  3. 在 Web Site Designer 中建立網頁將現有的網頁新增至網站中

建議您利用 Site Designer 工具提供的網頁範本功能來維護網站的一致性。Web Site Designer 可以編輯整個網站的外觀與操作方式。 您可以利用網頁範本,使整個網站擁有一致的外觀與操作方式。 網頁範本含有利用 Web Site Designer 工具所建立的網站導覽(如:導覽列、導覽軌跡和導覽功能表)。

如果要套用網頁範本,請執行下列動作:

  1. 在 Web 視景的「專案瀏覽器」視圖中,展開 Web 專案。
  2. 按兩下網站導覽,在 Site Developer 中開啟您的網站。
  3. CTRL,再按一下網頁圖示來選取要套用網頁範本的頁面。
  4. 按一下滑鼠右鍵,選取網頁範本 > 套用範本。這時會開啟「套用網頁範本」精靈。
  5. 在精靈的指定網頁範本頁面中,選取您要使用的網頁範本類型
    1. 如果要從 Rational® Developer 所提供的範例範本中選取網頁範本,請執行下列動作:
      1. 按一下範例網頁範本圓鈕。
      2. 在「縮圖」顯示畫面中,按一下您要用的網頁範本的縮圖。
      3. 下一步
    2. 如果要選取使用者定義的網頁範本,請執行下列動作:
      1. 按一下使用者定義的網頁範本圓鈕。
      2. 按一下瀏覽來指定網頁範本的位置。
      3. 在「縮圖」顯示畫面中,按一下您要用的網頁範本的縮圖。
      4. 下一步
    限制: 您必須選取至少有一個內容區域的網頁範本。
  6. 如果您選取了要套用網頁範本的網頁,您選取的網頁會用來作為元素對映基礎的模型。 您要略過這個步驟,再繼續這個主題中的其餘步驟。 如果您選擇了多個要套用網頁範本的網頁,您必須選取一個網頁來作為元素對映的模型。 在精靈的選取網頁來指定如何套用網頁範本頁面中,您要將網頁內容區域對映至網頁範本中的內容區域。請選取您要用來對映的頁面。按下一步
    限制:
    • 您不能選取與網頁範本編碼不同的頁面。
    • 您不能選取已有網頁範本的頁面。
    • 您不能選取使用頁框的頁面。
    • 如果 XML 樣式 JSP 沒有說明網頁範本,您就不能選取 XML 樣式 JSP 所說明的頁面。
    • 如果 XML 樣式 JSP 說明了網頁範本,您就不能選取 XML 樣式 JSP 未說明的頁面。
  7. 在精靈的將頁面元素對映至網頁範本頁面中,指定網頁範本應如何顯示頁面內容。

    內容區域的來源定義在網頁範本內容區域清單中。 您在上一精靈頁面中選取的網頁元素會顯示在頁面元素清單中。 請在網頁範本內容區域清單中,選取一個內容區域。 請在頁面元素清單中,選取內容區域所要對映的元素。 之後,再按一下「對映」按鈕。 每個內容區域都要執行這個動作。 這會建立網頁範本中的內容區域與網頁中的元素之關聯。

    比方說,如果您選取某個範例網頁範本,就會預先定義 headareabodyarea 內容區域。 您可以選取 headarea 內容區域,再建立它與 HEAD(前後 HEAD 標示之間的任何東西)的關聯。 網頁範本中所定義的任何 headarea 內容區域屬性,都會套用在現有網頁的 HEAD 元素上。
    將網頁範本內容區域對映至頁面元素的範例。
    在套用範本之後,預覽框會顯示現行頁面和頁面將呈現的外觀預覽。

    提示:
    • 您可以選取頁面元素清單中的頁面元素,以在現行頁面的預覽中強調顯示某特定元素。
    • 您可以用滑鼠右鍵按一下現行頁面預覽,再從蹦現功能表中選取顯示原始大小來檢視放大的預覽。
    如果您選取了要套用網頁範本的單一頁面,請按一下完成。 這時會將範本套用到網頁中。 如果您選取了要套用網頁範本的多個頁面,請按下一步
  8. 在精靈的選取頁面 - 將套用網頁範本頁面中,選取要套用網頁範本的網頁。 如果網頁已有相關的網頁範本,您就不能套用第二個網頁範本。 另外,如果網頁使用頁框,您就不能套用網頁範本。
    註: 網頁範本是利用精靈的選取網頁來指定如何套用網頁範本頁面所設定的規格來套用在所有選取的網頁上。 如果在其他網頁中找到相同的元素,會將元素插入正確的內容區域中。 如果在其他網頁中找不到相同的元素,就會先展開要插入的元素,再將它插入內容區域中。 您可以在精靈完成之後,手動刪除不必要的元素來改變網頁。
    限制: 如果網頁和網頁範本的編碼不同,您就無法套用網頁範本。 如果 XML 樣式 JSP 說明了網頁範本或網頁,您就無法套用網頁範本。 無法套用網頁範本的網頁會在精靈的要套用網頁範本的頁面清單中收到錯誤訊息。
  9. 按一下完成。這時會將範本套用到網頁中。
套用包含 Faces 的網頁範本
重要:
  • 您無法將具有 Faces 模型的網頁範本同時套用到 Faces 頁面與非 Faces 頁面兩者中。如果要套用 Faces 模型網頁範本,請先將該範本套用到 Faces 頁面中,再將該範本個別套用到非 Faces 頁面中。
  • 當網頁範本使用「包含 Faces 元件的範本」模型時,在套用網頁範本之後,您必須在非 Faces JSP 上設定 Servlet URL,才能在伺服器中執行這個頁面。如果要設定 Servlet URL,請從主功能表中按一下編輯 > Servlet URL > 設定 Servlet URL
重要: 套用名為 JSP-*.jtpl 的範例網頁範本或插入 JSP 導覽列之後,「問題」視圖中會顯示下列錯誤訊息:
  • 中斷的鏈結 - http://java.sun.com/jsp/jstl/core
  • 中斷的鏈結 - http://www.ibm.com/siteedit/sitelib
  • 中斷的鏈結 - com.ibm.etools.siteedit.sitelib.core.SiteNavBean
  • JspCompile:套件 com.ibm.etools.siteedit.sitelib.core 不存在
如果要移除這些錯誤和警告,請在「專案瀏覽器」視圖中用滑鼠右鍵按一下您的 Web 專案,然後選取執行驗證
相關概念
階式樣式表 (CSS) 設計程式
相關工作
將內容新增至網頁範本中
將動態導覽新增至網頁範本中
變更導覽物件的外觀
編輯導覽規格
使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.