自訂 Outlook Web App 登入及登出頁面

發行項
03/02/2017

適用版本： Exchange Server 2010 SP2, Exchange Server 2010 SP3

上次修改主題的時間： 2016-11-28

本主題說明如何建立 Outlook Web App 的自訂登入及登出頁面。

要尋找 Outlook Web App 的其他進階管理工作嗎？請參閱管理 Outlook Web App 進階功能。

自訂登入及登出頁面

Outlook Web App 的登入、語言選項及登出頁面是根據基礎主題資料夾中的圖形及 logon.css 檔案建立。因此，若要使用自訂的登入及登出頁面，您必須修改基礎主題資料夾中的檔案。您可以在 Exchange 安裝目錄中的 \V14\Client Access\OWA\<版本號碼>\themes\base 找到基礎主題資料夾。

附註：
在 Exchange Server 2010 SP1 中，路徑是 \V14\Client Access\OWA\<版本號碼>\themes\resources。

登入、語言選項及登出頁面使用 logon.css 檔案來定義文字樣式及色彩。頁面的建立會結合上、下和左右框線的數個影像，也包括重複使用影像和角落來延長。下列檔案建立登入頁面：

logon.css
lgnbotl.gif
lgnbotm.gif
lgnbotr.gif
lgnexlogo.gif
lgnleft.gif
lgnright.gif
lgntopl.gif
lgntopm.gif
lgntopr.gif

使用純色建立新的外觀最簡單，因為同一組影像可用於這三個頁面：登入頁面、第一次登入每個信箱時顯示的語言選項頁面，以及登出頁面。根據頁面的內容，頁面會依水平和垂直方向調整大小。

如果您有多部 Client Access Server，且希望它們全都使用相同的登入和登出頁面，您必須將修改過的登入及登出檔案複製到每部 Client Access Server 中。hzwxtu您也應該建立自訂檔案的備份副本。如果您重新安裝或升級 Exchange，將會覆寫主題資料夾中的所有檔案。在重新安裝或升級完成之後，您必須將自訂檔案複製回適當的主題資料夾。

注意：
在變更檔案以建立自訂的登入及登出頁面之前，請先將所有您會變更的檔案備份。

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

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

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

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

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

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

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

在 Microsoft Internet Explorer 中開啟 Outlook Web App 登入或登出頁面之後，您不必重設 IIS 或結束 Internet Explorer，即可測試變更。

在 Internet Explorer 中開啟 Outlook Web App 登入或登出頁面。
在工具列上，按一下 [工具]，然後按一下 [網際網路選項]。
在 [一般] 索引標籤上，按一下 [瀏覽歷程記錄] 下的 [刪除]。
在 [Temporary Internet Files] 下，按一下 [刪除檔案]，在詢問您是否確定刪除所有 Internet Explorer 暫存檔案時，按一下 [是]。
按一下 [確定]，關閉 [網際網路選項]。
按一下 [重新整理] 以查看變更。

每次變更登入或登出頁面檔案時，請重複這些步驟來查看變更。如果您做了數項變更，可以讓登入或登出頁面保持開啟狀態，然後重複步驟以查看變更。

變更 Outlook Web App 中的標誌

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱用戶端存取權限主題中的「圖形編輯器」項目。

若要自訂 Outlook Web App，您可以將登入和登出頁面的 Outlook Web App 標誌變更為您的組織標誌。

為您要變更的檔案建立複本，並儲存到安全的位置，必要時就能還原原始頁面。
使用影像編輯工具開啟 lgntopl.gif 檔案，修改檔案來建立您要使用的標誌。
儲存變更，然後按一下 [重新整理] 按鈕來查看變更。

附註：
如果您已變更 lgntopl.gif 的背景色彩，建議您將其餘用來建立登入及登出頁面的檔案，修改為相符的色彩。

變更字型樣式及色彩

您必須已獲指派權限，才能執行此程序。若要查看您需要的權限，請參閱用戶端存取權限主題中的「文字編輯器」項目。

您可以編輯 logon.css 檔案，變更頁面使用的字型樣式和部分色彩。其中包括在登入頁面和語言選擇頁面中心的控制項背後的背景色彩。如果已變更這些頁面的色彩，建議您變更為相符的背景色彩。

若要變更登入、語言選擇及登出頁面的背景和字型色彩，您必須找出登入樣式表 (logon.css) 中的值，然後決定您要使用的色彩的 HTML RGB 值。HTML RGB 色彩值是以七個字元的字串所定義，格式為數字記號 (#) 後面接著六個字元的字串。若要尋找許多色彩的 HTML RGB 值，請參閱 MSDN Library 中的色彩表 (英文)。如果必須搭配特定的色彩，但在線上找不到相符的色彩，您可以使用影像編輯工具來取樣並決定 HTML RGB 值。

若要測試變更，請開啟 Internet Explorer，輸入 Outlook Web App 的 URL。若是在主控 Outlook Web App 虛擬目錄的 Client Access Server 上測試預設網站的變更，您可以開啟 Internet Explorer 並輸入 URL https://localhost/owa 來進行測試。

附註：
使用者只有在第一次登入 Outlook Web App 時才會看到語言選擇頁面。

下表列出登入和登出頁面的元素及每一個元素的描述。

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

變更的元素	搜尋的字串	描述
網頁瀏覽器視窗的背景色彩	`body{background-color:#ffffff`	網頁瀏覽器視窗的背景色彩。此控制著登入及登出頁面周圍的視窗色彩。
登入及登出頁面的背景色彩	`Background: #ffffff`	登入及登出頁面的背景色彩。如果變更圖形檔的背景色彩，則應該變更為相符的背景色彩。
警告文字	`wrng{color:#ff6c00;`	當使用者選取 [這是私人電腦] 時出現的警告文字的色彩。在現有的 Outlook Web App 登入頁面上，此警告文字為橙色，與白色背景形成明顯對比。如果變更登入頁面的背景色彩，您也可能想要將警告文字的色彩變得更為明顯。
主要文字色彩	`select, table{color:#444444;}`	主要文字色彩是黑色。代表 Outlook Web App 登入頁面上可選取的選項和輸入欄位。例如使用者名稱和密碼欄位的標籤，以及安全性選項旁邊的文字。如果您已為登入頁面選擇淺色色彩，黑色仍然適合這些文字。
顯示說明/隱藏說明	`a{color:#ff6c00;`	登入頁面上的連結，可供使用者點選以顯示或隱藏私人及公用登入的說明。
說明文字	`expl{color:#999999;`	當使用者按一下 [顯示說明] 時顯示之文字的色彩。
Outlook Web App 精簡版的描述	`disBsc{color:#999999;`	當使用者選取 [使用 Outlook Web App 精簡版] 時，會顯示 Outlook Web App 精簡版的簡短說明。

在決定您要變更色彩的元素並確定這些元素將改為什麼 HTML RGB 值之後，請使用下列程序來變更以 .css 檔案定義的任何元素的色彩。

變更元素的色彩