練習 1.7:自訂入口網站

開始之前,您必須先完成練習 1.6:建立新入口網站以顯示 Portlet 應用程式

建立新的主題

在建立入口網站應用程式的程序中,您可以選擇在 Portal Designer 中建立全新的主題。 這些主題會提供入口網站應用程式的整體外觀與操作方式,且會納入入口網站設計的許多元素,其中包括影像、導覽、工具列和頁面層次等視覺化效果。 請遵循下列步驟來建立這個指導教學所開發之入口網站的新主題:

  1. 從功能表列中,選取檔案 > 新建 > 主題
  2. 標題欄位中,輸入拍賣
  3. 捲動選取公司主題作為來源主題。以現有主題為新主題的基礎會比較簡單,您便不需要從頭開始建立所有必要的主題元素。
  4. 下一步
  5. 從可用外觀清單中選取「陰影」外觀,再按一下設為預設外觀,使「陰影」成為新「拍賣」主題的預設外觀。

    外觀是入口網站網頁內環繞著每個 Portlet 的邊框。 它和主題不同,主題會套用到入口網站的整體外觀與操作方式上,外觀則只限於您插入入口網站應用程式的每個 Portlet 的外觀與操作方式。 依預設,每個主題只能使用有限的外觀。

  6. 按一下完成
  7. 在「概要」視圖中,展開元素 > 主題,選取「拍賣」。
  8. 在「內容」視圖中,選取預設值勾選框,將新主題套用到入口網站應用程式上。

    這時變更會立即套用在入口網站配置上。

  9. 儲存入口網站配置。

在這部分的練習中,您將利用 CSS Designer 和 Page Designer 來更新拍賣入口網站應用程式中的樣式、主題和外觀。

變更現行主題的橫幅影像

如果要取代拍賣入口網站預設主題中的橫幅影像,請遵循下列步驟:

  1. 首先,您要將新的橫幅影像匯入專案中:
    1. 從功能表列中,選取檔案 > 匯入。這時會出現「匯入」對話框。
    2. 選取匯入程式碼之下,按一下檔案系統
    3. 下一步
    4. 按一下來源目錄欄位旁的瀏覽,導覽至下列目錄:<installdir>/portal/eclipse/plugins/com.ibm.etools.portal.examples.application_versionnumber/samples,其中 <installdir> 是 Rational Developer 安裝目錄。
    5. 選取 auction.gif 作為匯入目標。
    6. 按一下目標資料夾欄位旁的瀏覽,指定 AuctionPortal/PortalContent/themes/html/Auction
    7. 按一下完成

      這時精靈會將檔案匯入工作區中。

  2. 在開啟 AuctionPortal 專案的入口網站配置檔的狀況下,從 Portal Designer 蹦現功能表中,選取編輯樣式。 這會在 CSS Designer 中開啟 Styles.css 檔。Styles.css 是應用程式中之預設主題的預設樣式表。

    CSS Designer 提供兩種定義給 CSS 檔之樣式的視圖:「預覽」(左側)依照呈現 Web 資源的瀏覽器所顯示的樣子來提供樣式規則的視覺化範例,「來源」視圖(右側)顯示 CSS 檔的文字版本。 您可以利用其中任何一個視圖來編輯樣式。

  3. 捲動並選取預覽中的橫幅背景圖示。
  4. 從蹦現功能表中,選取編輯樣式規則 [.wpsToolbarBannerBackground]
  5. 按一下設定樣式內容對話框左側中的背景內容。
  6. 影像欄位中,輸入 ../../auction.gif
    「設定樣式內容」對話框
  7. 請按一下確定
  8. 儲存 CSS 檔,關閉 CSS Designer。請注意,新的橫幅影像會套用到 Portal Designer 中開啟的頁面上。

變更標頭區域中的工具列佈置

您可以利用 Page Designer 來變更主題,如標頭區域中的工具列佈置。 您可以編輯主題及其相關外觀的佈置(和樣式)。變更儲存在主題的 default.jsp 檔、相關外觀的 control.jsp 檔,以及其他相關 JSP 檔中,如 PageBarInclude.jsp。 另外,您在編輯器中進行的任何變更也會套用到這個主題在入口網站應用程式內的所有運用。

  1. 在開啟 AuctionPortal 專案的入口網站配置檔的狀況下,從 Portal Designer 蹦現功能表中,選取編輯主題。 這會在 Page Designer 中開啟 Default.jsp 檔。

    Page Designer 會提供主題及相關外觀的視覺化表示法。

  2. 如下列影像所示,選取工具列區:
    Page Designer 請注意,Page Designer 中的預覽標籤不支援呈現入口網站主題。
  3. 在「內容」視圖中,您會見到 jsp:directive.include 值是 ./ToolBarInclude.jsp。 如果要變更工具列碼,請按一下「瀏覽」圖示,展開 PortalContent > 主題 > html 資料夾。 之後,選取其他主題資料夾之一,如 Engineering 資料夾,再選取這個目錄中的 ToolBarInclude.jsp 檔。按一下確定之後,「設計」頁面會顯示新的工具列。

    在某些情況下,當很難選取個別主題元素時,請考慮利用「概要」視圖來尋找您要更新的特定元素。 如果您在「概要」視圖中選取了某個節點,編輯器和「內容」視圖中的選項會同步化。

  4. 儲存 JSP 檔,關閉 Page Designer。

現在您已準備好開始進行模組 2:再查看入口網站應用程式

使用條款 | 讀者意見
(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.