Customizing the Look of Outlook Web Access

上次修改主題的時間： 2007-09-06

作者：Darcy Jayne

讓您的使用者和管理階層留下深刻印象的一種方法，是使用您組織的標誌和色彩自訂 Microsoft Office Outlook Web Access。自訂 Outlook Web Access 是將您的組織識別建立到許多使用者所依賴之工具中的一個理想方法。

本文將會告訴您如何自訂登入、語言選項和登出頁面，以及如何使用自訂標頭建立主題。如果您想要為組織建立包含較複雜變更的 Outlook Web Access 主題，請從研究階層式樣式表 (.css 檔案) 的運作方式開始著手。等到您充份了解 .css 檔案後，請一次變更幾個元素並測試您的變更，以確定結果合乎您的預期。

主題中的內容

主題在 Outlook Web Access 選項中稱為色彩配置，定義 Outlook Web Access 所使用的背景色彩、字型、強調顯示色彩、圖示及標頭。當您在執行 Microsoft Exchange Server 2007 的電腦上安裝 Client Access server role 時，預設會安裝兩個主題。預設主題為「天藍」和「碳黑」。

每個主題是一組媒體檔案和階層式樣式表 (.css 檔案) 的集合，儲存在 Client Access Server 的安裝目錄 \Client Access\OWA\version\themes 中。每個主題都儲存在自己的 \themes 子目錄中。

預設主題 (天藍) 是基礎主題，您可以在 \themes\base 中找到它。base 資料夾中含有定義主題的所有必要檔案。這些檔案包含 .css 檔案、圖形，以及定義主題名稱的 .xml 檔案。您可以將選取的檔案複製到新目錄中，再依需要修改這些檔案，以建立其他主題。使用自訂主題時，會先使用自訂主題目錄中的元素，而尚未自訂的任何必要元素則從基礎主題取得。例如，如果您建立新主題的方式是只將標題圖形複製到新主題並加以修改，則當使用者選取該主題時，標題圖形將來自新主題，而其餘主題內容將來自基礎主題。

Exchange 2007 SP1 中的新功能

Outlook Web Access 在 Exchange Server 2007 Service Pack 1 (SP1) 中新增了另外兩個額外的主題。這兩個主題是 Xbox 和 Zune。

開始之前

建議的最佳作法是，只要是變更或建立 Outlook Web Access 主題，就使用下列指導方針：

• 開始編輯檔案之前，尤其是在編輯 \themes\base 目錄中的檔案時，請務必建立原始檔案的備份。

• 請勿刪除 \Client Access\OWA\version\themes\base 資料夾或其中的任何檔案。

• 請勿變更郵件頂端顯示的資訊列，其作用是在警告使用者，郵件中可能含有有害的內容、網路釣魚攻擊、病毒以及遭到封鎖或遺失的內容。

建立主題

若要開始，要先建立新主題的資料夾，然後從基礎主題複製檔案的子集到新資料夾。

1. 使用委派了本機 Administrators 群組成員資格的帳戶，登入主控 Outlook Web Access 的 Client Access Server。

2. 開啟 Windows 檔案總管，找到 Exchange 伺服器安裝目錄。

3. 在 \Client Access\OWA\<version>\themes 中建立新的資料夾，並為資料夾命名，例如 Fourth Coffee。

4. 將基礎主題中的下列檔案複製到新資料夾：

   • premium.css

   • owafonts.css

   • logopt.gif

   • logopb.gif

   • nbbkg.gif

為新主題命名

自訂主題有兩種命名方式。第一種方式是以您想用的名稱，為您在其中建立新主題的資料夾命名。例如，因為我們將新資料夾命名為 Fourth Coffee，所以新主題會自動命名為 Fourth Coffee。

也可以從基礎主題複製 themeinfo.xml 檔案至新資料夾，然後再編輯檔案，來為自訂主題命名。您可以使用文字編輯器 (例如記事本) 來編輯 themeinfo.xml 檔案，將主題顯示名稱變更為您要的主題名稱。Themeinfo.xml 檔案會將資料夾名稱覆寫為您的主題名稱。

若要使用 themeinfo.xml 檔案為新主題命名，請執行下列步驟：

1. 從基礎主題資料夾複製 themeinfo.xml 檔案到名為 Fourth Coffee 的資料夾。

2. 開啟自訂主題資料夾中的 themeinfo.xml 的複本。

3. 找到 theme displayname 值，將值變更為 Fourth Coffee Theme。

   檔案的名稱應為 theme displayname = "Fourth Coffee Theme"

4. 儲存及關閉 themeinfo.xml。

附註：
如果變更主題的名稱，則必須停止並啟動 IIS，以讓變更生效。作法是開啟 [命令提示字元] 視窗，並使用 iisreset/noforce 命令。

建立自訂標頭

您已經複製好檔案並將主題命名，接著請嘗試自訂標頭。若要在 Outlook Web Access 中變更標頭，需要下列檔案，您已經將這些檔案複製到新主題的資料夾：

• premium.css

• owafonts.css

• logopt.gif

• logopb.gif

• nbbkg.gif

Premium.css 和 owafonts.css 定義 Outlook Web Access 使用的字型和色彩。Logopt.gif、logopb.gif 及 nbbkg.gif 是在 Outlook Web Access 中用來建立頁首標頭的影像檔。

1. 先使用影像編輯工具來開啟和修改 logopt.gif。

2. 舉例而言，您要將 logopt.gif 的背景色彩變更為淡紫色，HTML RGB 值為 #DCBEC8。編輯 logopb.gif 和 nbbkg.gif，使兩者有相同的的背景色彩。

HTML RGB 色彩值是以七個字元的字串來定義，格式為數字記號 (#) 後面接著六個字元的字串。

若要測試自訂主題，請登入 Outlook Web Access (高階) (不要選取 [使用 Outlook Web Access (基本)] 選項)，按一下 [選項]，然後按一下 [一般設定]，然後從 [外觀] 功能表中選取您的自訂主題。必須儲存變更，然後按一下 [重新整理]，才能看到新的主題。

下圖說明建立「天藍」Outlook Web Access 主題的標頭所用的原始檔案，以及修改這些檔案所建立的新標頭。

Outlook Web Access 標頭檔

Outlook Web Access 自訂標頭

變更預設 Outlook Web Access 主題

您已經建立好新的主題並自訂了標頭，接著可嘗試將它設定為 Outlook Web Access 的預設主題。若要將預設的 Outlook Web Access 主題從基礎主題變更為您的自訂主題，要使用 Set-OwaVirtualDirectory 指令程式。在後面的範例中，您將使用「FourthCoffeeCAS」作為伺服器、「owa」作為虛擬目錄、「Default Web Site」作為網站，以及「Fourth Coffee」作為資料夾名稱。

• 若要將 Outlook Web Access 的預設主題設定為 Fourth Coffee，請執行以下命令：set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "fourth coffee"

附註：
如果資料夾名稱中沒有空格，可以省略引號。

如果有任何使用者已經登入 Outlook Web Access 並選取了主題，將不會強制這些使用者換成新主題。為了保證所有使用者都使用新主題，您必須停用主題選取。您也是要使用 Set-OwaVirtualDirectory 指令程式來執行這項工作。

• 若要停用 Outlook Web Access 中的主題選取，請執行以下命令：set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -themeselectionenabled $false

您可以執行以下命令，一次完成這兩個命令： set-owavirtualdirectory -identity "fourthcoffeeCAS\owa (default web site)" -defaulttheme "Fourth Coffee" -themeselectionenabled $false

自訂登入及登出頁面

自訂主題是在使用者登入後，提供 Outlook Web Access 自訂外觀的一個絕佳方法，但是自訂登入頁面是可以馬上注意到的。Outlook Web Access 只會使用基礎主題登入、語言選擇及登出頁面。因此，您必須修改基礎主題資料夾中的檔案，來建立自訂頁面。

登入、語言選擇及登出頁面的文字樣式、色彩及背景色彩是由 logon.css 檔案定義。結合儲存為 .gif 檔案的一組影像即可建立這些頁面。下列檔案建立登入頁面：

• logon.css

• lgnbotl.gif

• lgnbotm.gif

• lgnbotr.gif

• lgnexlogo.gif

• lgnleft.gif

• lgnright.gif

• lgntopl.gif

• lgntopm.gif

• lgntopr.gif

您要建立一個新的外觀，方式是修改這些檔案，以建立 Fourth Coffee 的一組自訂登入與登出頁面。為了單純起見，所有影像的背景都要使用單色。

首先，在基礎主題資料夾中建立一個新資料夾，將資料夾命名為「backup」。將用於建立登入和登出頁面的所有檔案複製到新資料夾，以便保留備份副本，以備萬一想要改回原始登入和登出頁面時使用。基礎主題資料夾位於 Exchange 安裝目錄的 \Client Access\OWA\version\themes\base 中。

下圖說明當使用者按一下 [顯示說明] 並選取 [這是私人電腦] 和 [使用 Outlook Web Access (基本)] 時顯示的預設 Outlook Web Access 登入頁面。其中一個圖顯示建立頁面的圖形檔如何互相搭配。另一個則顯示 logon.css 檔案如何決定登入頁面的背景和文字色彩。

顯示自訂圖形檔案的 Outlook Web Access 登入頁面

顯示文字選項的預設 Outlook Web Access 登入頁面

下圖說明預設 Outlook Web Access 登出頁面。其中一張圖顯示建立頁面的圖形檔案如何互相搭配。另一張則顯示 logoff.css 檔案如何決定登出頁面的背景和文字色彩。

顯示自訂圖形檔案的 Outlook Web Access 登出頁面

顯示文字選項的預設 Outlook Web Access 登出頁面

測試登入和登出頁面的變更

您可以在變更時在 Internet Explorer 中開啟 Outlook Web Access 登入頁面，以及使用下列步驟，在每次變更後儲存，來測試變更。

1. 在 Internet Explorer 中開啟 Outlook Web Access 登入或登出頁面。如果要在主控 Outlook Web Access 虛擬目錄的 Client Access Server 上測試預設網站的變更，可以開啟 Internet Explorer 並輸入 URL https://localhost/owa 來測試變更。

2. 在工具列上，按一下 [工具]，然後按一下 [網際網路選項]。

3. 在 [一般] 索引標籤的 [Temporary Internet Files] 下，按一下 [刪除檔案]，在詢問您是否確定刪除所有暫存的 Internet Explorer 檔案時，按一下 [是]。

4. 按一下 [確定]，關閉 [網際網路選項]。

5. 按一下 [重新整理] 以查看變更。

每次變更登入或登出頁面檔案時，請重複這些步驟來查看變更。如果進行多項變更，您可以讓登入或登出頁面保持開啟，並重複步驟 2 至 6 來查看變更。

自訂影像檔

您的原始檔案已經安全地備份到另一個目錄中，而且您知道如何在變更後檢閱變更，接著就可以修改屬於登入、語言選擇及登出頁面圖形建置區塊的 .gif 檔案。

修改方式是使用影像編輯工具開啟 lgntopl.gif，將影像修改為您的新設計，如下圖中所示：

Fourth Coffee 標誌

因為我們在前面已經將 lgntopl.gif 的背景色彩變更為淡紫色 (HTML RGB 值為 #DCBEC8)，所以您將要開啟其餘每一個 .gif 檔案，並變更其背景色彩以保持一致。

完成風格

您已經編輯好 .gif 檔案，接下來還必須編輯 logon.css 檔案，使背景緊密結合。您的新背景色彩可能無法和原始文字及分界線色彩配合得很好。除了設定背景色彩以匹配您的新標誌以外，您還要變更主要文字色彩和分界線色彩，以便和您的新頁面搭配得更好。

背景、主要文字及分界線色彩這三種色彩，全都是在 logon.css 中以 HTML RGB 值定義。若要將這些色彩變更為您的新色彩，必須在 logon.css 中找到這些色彩，再將其 HTML RGB 色彩值變更為您想要的值。

若要變更色彩，請在文字編輯器 (例如記事本) 中開啟 logon.css。搜尋要變更之每個色彩元素的字串，根據下表中的資訊以新值取代 HTML RGB 值，然後儲存並關閉 logon.css。

登入和登出頁面元素及其描述

完成之後，新的標誌和登出頁面會類似下列各圖。

Fourth Coffee 登入頁面

Fourth Coffee 登出頁面

相關資訊

如需如何建立自訂 Outlook Web Access 主題的相關資訊，請參閱如何建立 Outlook Web Access 的佈景主題。

Darcy Jayne - 技術文件作者，Microsoft Exchange Server