共用方式為

HOW TO：定義 ASP.NET 頁面佈景主題

  • 發行項

更新：2007 年 11 月

在 Visual Web Developer 中，您可以定義頁面主題，然後將其套用至應用程式中的一個或多個頁面。您也可以在電腦層級建立可用於伺服器上多個應用程式的主題。

主題由一些支援檔案所組成，包含網頁外觀的樣式表、定義伺服器控制項外觀的控制項面板，以及組成主題的任何其他支援影像或檔案。不管主題定義為頁面主題還是全域主題，主題的內容是相同的。

這些主題可藉由使用 @ Page 指示詞的 Theme 或 StyleSheetTheme 屬性 (Attribute)，或藉由設定應用程式組態檔案中的 pages 項目 (ASP.NET 設定結構描述) 項目來套用。Visual Web Developer 將僅以視覺化方式提供藉由使用 StyleSheetTheme 屬性套用的主題。

若要建立網頁主題

  1. 在 [方案總管] 中，以滑鼠右鍵按一下要建立其頁面主題的網站名稱，然後按一下 [加入 ASP.NET 資料夾]。

  2. 按一下 [主題]。

    如果 [App_Themes] 資料夾不存在，Visual Web Developer 則會建立一個。然後 Visual Web Developer 會建立主題的新資料夾做為 App_Themes 資料夾的子資料夾。

  3. 為新資料夾輸入名稱。

    這個資料夾的名稱也是頁面主題的名稱。例如，如果建立名為 \App_Themes\FirstTheme 的資料夾，則主題名稱為 FirstTheme。

  4. 在新資料夾中加入組成主題之控制項面板、樣式表和影像的檔案。

若要將面板檔案和面板加入至頁面主題

  1. 在 [方案總管] 中，以滑鼠右鍵按一下主題名稱，然後按一下 [加入新項目]。

  2. 在 [加入新項目] 對話方塊中，按一下 [面板檔案]。

  3. 在 [名稱] 方塊中，輸入 .skin 檔案的名稱，然後按一下 [加入]。

    一般慣例是為每個控制項建立一個 .skin 檔案，例如 Button.skin 或 Calendar.skin。不過，您也可以依需要建立任意數量的 .skin 檔案。

  4. 在 .skin 檔案中，使用宣告式語法加入一般的控制項定義，但僅包含想要為主題設定的屬性。控制項定義必須包括 屬性，但不能包括 ID="" 屬性。

    下列程式碼範例示範 Button 控制項的預設控制項面板，它會定義主題中所有 Button 控制項的色彩和字型。

    <asp:Button  
  BackColor="Red" 
  ForeColor="White" 
  Font-Name="Arial" 
  Font-Size="9px" />

    這個 Button 控制項面板不包含 skinID 屬性。它將套用至設定了主題之應用程式中所有不指定 skinID 屬性的 Button 控制項。

    注意事項：

    有一種簡單的方式可以建立控制項面板，就是將控制項加入至頁面，然後將它設定為您想要的外觀。例如，您可能會將 Calendar 控制項加入網頁，然後設定它的日期標頭、選取的日期和其他屬性。然後，可以從網頁將控制項定義複製至面板檔案，但必須移除 ID 屬性。

  5. 針對要建立的每個控制項面板檔案，重複步驟 2 和 3。

    注意事項：

    您可以為每個控制項只定義一個預設面板。使用面板控制項宣告中的 SkinID 屬性，建立相同類型控制項的具名面板。

若要將階層式樣式表檔案加入至頁面主題

  1. 在 [方案總管] 中，以滑鼠右鍵按一下主題名稱，然後按一下 [加入新項目]。

  2. 在 [加入新項目] 對話方塊中，按一下 [樣式表]。

  3. 在 [名稱] 方塊中，輸入 .css 檔案的名稱，然後再按 [加入]。

    當主題套用至頁面時，ASP.NET 會將對樣式表的參考加入至頁面的標頭項目。如需詳細資訊，請參閱 HOW TO：套用 ASP.NET 佈景主題

建立全域主題

全域主題可套用至伺服器上的所有網站。為全域主題建立資料夾的位置取決於您是否使用 Internet Information Services (IIS) 執行網站，或使用「ASP.NET 程式開發伺服器」測試網站。

注意事項：

如果使用檔案系統網站，依照預設，Visual Web Developer 會藉由啟動「ASP.NET 程式開發伺服器」執行網站測試。對於其他類型的網站，Visual Web Developer 會在 IIS 中執行頁面測試。

若要建立全域主題

  1. 使用下列路徑建立 Themes 資料夾。

    %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes
    注意事項：

    全域主題的資料夾名稱是 Themes，而不是 App_Themes (這是用來儲存頁面主題)。

    建立 Themes 資料夾的子資料夾以儲存全域主題檔案。

    子資料夾的名稱是主題的名稱。例如，如果建立名為 \Themes\FirstTheme 的資料夾，則主題名稱為 FirstTheme。

  2. 在新資料夾中加入組成全域主題之控制項面板、樣式表和影像的檔案。

    注意事項：

    定義全域主題時，不能使用 Visual Web Developer 直接將面板和樣式表檔案加入主題。您可能會發現，將主題做為頁面主題來定義和測試，然後將它複製到用於 Web 伺服器上全域主題的資料夾要更為簡單。

  3. 如果網站是使用「ASP.NET 程式開發伺服器」測試的檔案系統網站，則主題已經準備好測試。

  4. 如果使用本機 IIS 網站測試網站，則開啟命令視窗，並執行 aspnet_regiis -c 以在執行 IIS 的伺服器上安裝主題。

  5. 如果您正在測試遠端網站或 FTP 站台上的主題，則必須使用下列路徑手動建立 Themes 資料夾。

    IISRootWeb\aspnet_client\system_web\version\Themes

請參閱

概念

ASP.NET 佈景主題和面板概觀