共用方式為

逐步解說：使用 Visual Studio 中的佈景主題自訂網站

  • 發行項

更新：2007 年 11 月

此逐步解說說明如何使用主題，將一致的外觀套用至網站的網頁和控制項。主題可以包含面板檔案，此檔案定義了個別控制項的一般外觀、一個或多個樣式表，以及與控制項 (例如 TreeView 控制項) 一起使用的一般圖形。此逐步說明顯示如何在網站中使用 ASP.NET 主題。

逐步解說將說明的工作包括：

  • 將預先定義的 ASP.NET 主題套用至個別網頁以及整個網站中。

  • 建立自己的主題，此主題包含用於定義個別控制項外觀的面板。

必要條件

若要完成這個逐步解說，您必須要有：

  • Microsoft Visual Web Developer (Visual Studio)。

  • .NET Framework。

建立網站

如果已經在 Visual Web Developer 中建立了網站 (例如，籍由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，您可以使用該網站並繼續進行下一節的步驟。否則，請依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

  1. 開啟 Visual Web Developer。

  2. 在 [檔案] 功能表上，按一下 [新網站]。

    [新網站] 對話方塊隨即出現。

  3. 請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。

  4. 在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。

    例如，輸入資料夾名稱 C:\WebSites。

  5. 在 [語言] 清單中，請按一下您想要操作的程式語言。

  6. 按一下 [確定]。

    Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

若要開始使用此逐步解說中主題，請設定 Button 控制項、Calendar 控制項和 Label 控制項，以便您可以查看主題對這些控制項的影響如何。

若要將控制項放置在網頁上

  1. 切換至 [設計] 檢視。

  2. 從 [工具箱] 的 [標準] 組群中，將 [Calendar] 控制項、[Button] 控制項和 [Label] 控制項拖曳至頁面。頁面的精確配置並不重要。

    注意事項：

    請勿對任何控制項套用任何格式。例如，請勿使用 AutoFormat 命令設定 [Calendar] 控制項的外觀。

  3. 切換至原始碼檢視。

  4. 確定頁面的 <head> 項目具有 屬性 (Attribute)，以便其看起來如下：

    <head ></head>

  5. 儲存 Web 網頁。

若要測試頁面，您會想先查看套用主題前的頁面，然後才是套用不同主題的頁面。

對頁面建立並套用主題。

ASP.NET 可讓您方便地將預先定義的主題套用至頁面，或建立一個唯一主題 (如需詳細資訊，請參閱 HOW TO：定義 ASP.NET 佈景主題)。在這部分的逐步解說中，您將建立具有一些簡單面板的主題，這些面板定義了控制項的外觀。

若要建立新的主題

  1. 在 Visual Web Developer 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入 ASP.Net 資料夾]，再按 [主題]。

    建立名為 [App_Themes] 的資料夾和名為 [Theme1] 的子資料夾。

  2. 將 [Theme1] 資料夾重新命名為 sampleTheme。

    這個資料夾的名稱將是您所建立之主題的名稱 (此處為 sampleTheme)。精確名稱並不重要，但在套用自訂主題時您必須記住此名稱。

  3. 以滑鼠右鍵按一下 [sampleTheme] 資料夾，選取 [加入新項目]，然後加入新文字檔並將其命名為 sampleTheme.skin。

  4. 在 sampleTheme.skin 檔案中，加入下列程式碼範例中所示的面板定義。

    <asp:Label  ForeColor="red" Font-Size="14pt" Font-Names="Verdana" />
<asp:button  Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>
    注意事項：

    您所定義的精確特性並不重要。建議使用先前選取的值，在稍後測試主題時會更強調此點。

    面板定義與建立控制項的語法類似，除了那些只包含影響控制項外觀之設定的定義以外。例如，面板定義不包含 ID 屬性的設定。

  5. 儲存面板檔案，然後將其關閉。

您現在就可以在套用任何主題前測試頁面。

注意事項：

如果您將階層式樣式表 (CSS) 檔案加入至 [sampleTheme] 資料夾，則其會被套用至所有使用此主題的頁面。

若要測試主題

  1. 按 CTRL+F5 執行頁面。

    控制項將以其預設外觀顯示。

  2. 關閉瀏覽器，然後回到 Visual Web Developer。

  3. 在 [原始碼] 檢視中，將下列屬性加入至 @ Page 指示詞：

    <%@ Page Theme="sampleTheme" ... %>
    注意事項：

    您必須在屬性值中指示一個實際主題的名稱 (此處為先前定義的 sampleTheme.skin 檔案)。

  4. 按 CTRL+F5 再次執行此頁。

    此時，控制項會使用主題中所定義的色彩配置來呈現。

    [Label] 和 [Button] 控制項會以您在 sampleTheme.skin 檔案中進行的設定來顯示。因為您未在 sampleTheme.skin 檔案中建立 [Calendar] 控制項的一個項目，所以其會以預設外觀顯示。

  5. 在 Visual Web Developer 中，請將主題設定為另一個主題的名稱 (如果可用)。

  6. 按 CTRL+F5 再次執行頁面。

    控制項會再次變更外觀。

樣式表主題與自訂主題的比較

建立主題之後，可以透過將其做為一個自訂主題 (如在前面章節中所做) 或者樣式主題來與頁面相關聯的方式，調整該主題在您應用程式中的使用方式。樣式表主題使用與自訂主題相同的主題檔案，但在頁面的控制項和屬性中其優先順序較低 (與 CSS 檔案相同)。ASP.NET 內的優先順序為：

  • 主題設定，包含 Web.config 檔案中設定的主題。

  • 本機頁面設定。

  • 樣式表主題設定。

出於這點，如果您選擇使用樣式表主題，則您主題的屬性會被頁面內本機宣告的任何項目所覆寫。同樣地，如果使用自定主題，您主題的屬性也將覆寫本機頁面內的任何項目以及所有正在使用之樣式表主題內的任何項目。

若要使用樣式表主題並查看優先順序

  1. 切換至原始碼檢視。

  2. 變更頁面宣告：

    <%@ Page theme="sampleTheme" %>

    若要變更樣式表主題宣告，則為：

    <%@ Page StyleSheetTheme="sampleTheme" %>

  3. 按 CTRL+F5 執行頁面。

    請注意，[Label1] 控制項的 ForeColor 屬性為紅色。

  4. 切換至 [設計] 檢視。

  5. 選取 [Label1]，並在 [屬性] 中將 [前景色彩] 設定為 blue。

  6. 按 CTRL+F5 執行頁面。

    [Label1] 的 ForeColor 屬性為藍色。

  7. 切換至原始碼檢視。

  8. 藉由以下變更，變更頁面宣告為宣告主題而不是樣式表主題：

    <%@ Page StyleSheetTheme="sampleTheme" %>

    取代為：

    <%@ Page Theme="sampleTheme" %>

  9. 按 CTRL+F5 執行頁面。

    [Label1] 的 ForeColor 屬性再次變為紅色。

在現有控制項基礎上建立自訂主題

建立面板定義的一個簡易方法是，使用設計工具設定外觀屬性，然後將控制項定義複製至面板檔案。

若要在現有控制項基礎上建立自訂主題

  1. 在 [設計] 檢視中，設定 [Calendar] 控制項屬性，使得控制項具有特殊外觀。下列為建議的設定：

    • BackColor   Cyan

    • BorderColor   Red

    • BorderWidth   4

    • CellSpacing   8

    • Font-Name   Arial

    • Font-Size   Large

    • SelectedDayStyle-BackColor   Red

    • SelectedDayStyle-ForeColor   Yellow

    • TodayDayStyle-BackColor   Pink

    注意事項：

    您所定義的精確特性並不重要。建議使用先前清單中的值，在稍後測試主題時會更強調此點。

  2. 切換至 [原始碼] 檢視並複製 <asp:calendar> 項目及其屬性。

  3. 切換至或開啟 sampleTheme.skin 檔案。

  4. 將 Calendar 控制項定義貼入 sampleTheme.skin 檔案。

  5. 從 sampleTheme.skin 檔案的定義中移除 ID 屬性。

  6. 儲存 sampleTheme.skin 檔案。

  7. 切換至 Default.aspx 頁面，然後將第二個 [Calendar] 控制項拖曳至頁面。請勿設定其任何屬性。

  8. 執行 Default.aspx 頁面。

    將會同時出現兩個 [Calendar] 控制項。第一個 [Calendar] 控制項反映您所做的明確屬性設定。第二個 [Calendar] 控制項會從您在 sampleTheme.skin 檔案所做的面板定義中繼承其外觀屬性。

將主題套用至網站

您可以將主題套用至整個網站，這表示您不需要將此主題重新套用至個別頁面 (如果想將其套用至個別頁面，您可以覆寫頁面上的主題設定)。

若要設定網站的主題

  1. 如果沒有自動將 Web.config 檔案加入至網站，請按照下列步驟建立此檔案：

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

    2. 在 [樣板] 下選取 [Web 組態檔]，然後按一下 [加入]。

      注意：您不需要輸入名稱，因為檔案的名稱一定是 Web.config。

  2. 如果 <pages> 項目不存在，則請加入。<pages> 項目應該出現在 <system.web> 項目內。

  3. 請將下列屬性加入至 <pages> 項目。

    <pages theme="sampleTheme" />
    注意事項：

    Web.config 區分大小寫，且值是大小寫混合的(例如：theme 和 styleSheetTheme)。

  4. 儲存並關閉 Web.config 檔案。

  5. 切換至 Default.aspx 並切換至 [原始碼] 檢視。

  6. 請移除頁面宣告中的 theme="themeName" 屬性。

  7. 按 CTRL+F5 執行 Default.aspx。

    此頁面現在會以您在 Web.config 檔案中指定的主題顯示。

如果選擇在頁面宣告中指定一個主題名稱，它將覆寫您在 Web.config 檔案中指定的任何主題。

後續步驟

主題的 ASP.NET 支援提供了各種用於調整整個應用程式之外觀及操作的選項。此逐步解說涵蓋了一些基礎概念，但您可能還想要做進一步暸解。例如，您可能想要進一步暸解下列內容：

請參閱

概念

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