練習 2.2:自訂入口網站
開始之前,您必須先完成練習 2.1:建立新入口網站以顯示 Portlet 應用程式。
建立新的主題
在建立入口網站應用程式的程序中,您可以選擇在 Portal Designer 中建立全新的主題。
這些主題會提供入口網站應用程式的整體外觀與操作方式,且會納入入口網站設計的許多元素,其中包括影像、導覽、工具列和頁面層次等視覺化效果。
請遵循下列步驟來建立這個指導教學所開發之入口網站的新主題:
- 從功能表列中,選取檔案 > 新建 > 主題。
- 在標題欄位中,輸入拍賣。
- 捲動選取公司主題作為來源主題。以現有主題為新主題的基礎會比較簡單,您便不需要從頭開始建立所有必要的主題元素。
- 按下一步。
- 從可用外觀清單中選取「陰影」外觀,再按一下設為預設外觀,使「陰影」成為新「拍賣」主題的預設外觀。
外觀是入口網站網頁內環繞著每個 Portlet 的邊框。
它和主題不同,主題會套用到入口網站的整體外觀與操作方式上,外觀則只限於您插入入口網站應用程式的每個 Portlet 的外觀與操作方式。
依預設,每個主題只能使用有限的外觀。
- 按一下完成。
- 在「概要」視圖中,展開元素 > 主題,選取「拍賣」。
- 在「內容」視圖中,選取預設值勾選框,將新主題套用到入口網站應用程式上。
這時變更會立即套用在入口網站配置上:

- 儲存入口網站配置。
在這部分的練習中,您將利用 CSS Designer 和 Page Designer 來更新拍賣入口網站應用程式中的樣式、主題和外觀。
變更現行主題的橫幅影像
如果要取代拍賣入口網站預設主題中的橫幅影像,請遵循下列步驟:
- 首先,您要將新的橫幅影像匯入專案中:
- 從功能表列中,選取檔案 > 匯入。這時會出現「匯入」對話框。
- 在選取匯入程式碼之下,按一下檔案系統。
- 按下一步。
- 由於不同的 Rational 產品會使用不同的安裝目標位置,因此,您必須離開產品的使用者介面來尋找包含新橫幅影像的外掛程式。請利用檔案搜尋工具,在本端檔案系統的產品安裝路徑之下,尋找 com.ibm.etools.portal.examples.application_6.0.0 外掛程式資料夾。
- 回到「匯入」精靈,按一下來源目錄欄位旁的瀏覽。導覽至下列目錄:
x:\com.ibm.etools.portal.examples.application_6.0.0\samples
其中 x: 是電腦中包含 com.ibm.etools.portal.examples.application_6.0.0 外掛程式的路徑。
- 選取 auction.gif 作為匯入目標,按一下確定。
- 按一下目標資料夾欄位旁的瀏覽,指定 AuctionPortal/PortalContent/themes/html/Auction。
- 按一下完成。
這時精靈會將檔案匯入工作區中。
- 在開啟 AuctionPortal 專案的入口網站配置檔的狀況下,從 Portal Designer 蹦現功能表中,選取編輯樣式。
這會在 CSS Designer 中開啟 Styles.css 檔。Styles.css 是應用程式中之預設主題的預設樣式表。
CSS Designer 提供兩種定義給 CSS 檔之樣式的視圖:「預覽」(左側)依照呈現 Web 資源的瀏覽器所顯示的樣子來提供樣式規則的視覺化範例,「來源」視圖(右側)顯示 CSS 檔的文字版本。
您可以利用其中任何一個視圖來編輯樣式。
- 捲動並選取預覽中的橫幅背景圖示。
- 從蹦現功能表中,選取編輯樣式規則 [.wpsToolbarBannerBackground]。
- 按一下設定樣式內容對話框左側中的背景內容。
- 在影像欄位中,輸入 ../../auction.gif。

- 按一下確定。
- 儲存 CSS 檔,關閉 CSS Designer。請注意,新的橫幅影像會套用到 Portal Designer 中開啟的頁面上。

- 儲存和關閉入口網站配置檔。
您可以利用 Page Designer 來大幅變更主題,如標頭區域中的工具列佈置。
您可以編輯主題及其相關外觀的佈置(和樣式)。變更儲存在主題的 default.jsp 檔、相關外觀的 control.jsp 檔,以及其他相關 JSP 檔中。另外,您在編輯器中進行的任何變更也會套用到這個主題在入口網站應用程式內的所有運用。
現在您已準備好開始進行練習 2.3:在 WebSphere Portal 測試環境中執行入口網站應用程式。