逐步解說：建立使用者可選取的佈景主題
更新：2007 年 11 月
本逐步解說將說明如何建立 ASP.NET 網頁，當中可讓使用者選取網頁的佈景主題。雖然這個範例使用單一控制項面板和基本階層式樣式表 (CSS) 檔案，但所展現的原理適用於更複雜的佈景主題，其中包含圖形、CSS 檔案中的不同配置和更複雜的伺服器控制項面板。
逐步解說將說明的工作包括：
在 Microsoft Visual Web Developer 中，建立佈景主題，其中包括 CSS 檔案和伺服器控制項面板。
建立一個使用佈景主題的 ASP.NET 主版頁面 (Master Page)。
建立一個套用使用佈景主題之主版頁面的 ASP.NET 網頁。
建立一個下拉式清單 (Drop-Down List) 伺服器控制項，它會將新佈景主題套用至網頁，其中包括主版頁面項目上的變更樣式。
執行網頁以顯示將不同佈景主題套用至網頁的結果。
必要條件
若要完成這個逐步解說，您將需要：
Visual Web Developer (Visual Studio)。
.NET Framework。
建立網站
如果已在 Visual Web Developer 中建立了網站 (例如，依照逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟完成)，則可以直接使用該網站並跳至下一節「建立主版頁面」。否則，請依照下列這些步驟建立新的網站和 Web 網頁。
若要建立檔案系統網站
開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。
[新網站] 對話方塊隨即出現。
在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來保存網站頁面的資料夾名稱。
例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，請按一下您想要操作的程式語言。
按一下 [確定]。
Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。
建立佈景主題
佈景主題是屬性設定的集合，可以讓您定義網頁和控制項的外觀。您可以在 Web 應用程式中將所有網頁都一致套用這個外觀。佈景主題由數個項目組成：伺服器控制項面板、CSS 檔案和其他資源。在這個範例中，您將使用面板和樣式表來建立佈景主題。
佈景主題是定義在網站專案的特殊目錄中。
若要建立佈景主題
在 [方案總管] 中，以滑鼠右鍵按一下網站專案名稱，再按一下 [加入 ASP.NET 資料夾]，然後按一下 [佈景主題]。
隨即自動建立 App_Themes 資料夾，並加入名為 Theme1 的佈景主題。
以滑鼠右鍵按一下新增的 [Theme1] 資料夾，然後按一下 [重新命名]。輸入 Blue，然後按 ENTER。
以滑鼠右鍵按一下新增的 [Blue] 資料夾，然後按一下 [加入新項目]。
在 [加入新項目] 對話方塊中，選取 [面板檔案] 並將檔案命名為 default.skin，然後按一下 [加入]。
在 [方案總管] 中，再次以滑鼠右鍵按一下新增的 [Blue] 資料夾，然後按一下 [加入新項目]。
在 [加入新項目] 對話方塊中，選取 [樣式表] 並將樣式表命名為 default.css，然後按一下 [加入]。
隨即建立第一個佈景主題與空白 CSS 檔案和伺服器控制項面板檔案。等一下您就會編輯這些檔案，但必須先建立一個網頁，裡面包含控制項和一些可將佈景主題套用至當中的 HTML 程式碼。
建立主版頁面
為了顯示可以很方便將佈景主題套用至主版頁面和使用主版頁面的網頁，請在 Web 專案中建立用於 Default.aspx 網頁的簡單主版頁面。
若要建立主版頁面
在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。
在 [Visual Studio 安裝的範本] 下，按一下 [主版頁面]。
在 [名稱] 方塊中，輸入 Master1.master。
在 [語言] 清單中，按一下您想要的程式語言。
清除 [將程式碼置於個別檔案中] 核取方塊，然後按一下 [加入]。
新的主版頁面就會在 [原始碼] 檢視中開啟。在網頁的上方是 @ Master 宣告，而不是通常處於 ASP.NET 網頁上方的 @ Page 宣告。網頁的主體包含 asp:contentplaceholder 控制項，其定義主版頁面的區域，這是可置換的內容將在執行階段從內容頁面加以合併的位置。稍後在本逐步解說中，您將會更多地使用內容預留位置。
配置主版頁面
主版頁面定義構成網頁的項目。它可以包含靜態 (Static) 文字和控制項的任何組合。主版頁面還可包含一個或多個內容預留位置，以指定顯示網頁時將出現動態內容的位置。
在本逐步解說中，您將使用一個有標題、數個水平分隔線和主版頁面內容預留位置的表格做為 Home.aspx 網頁的配置。
若要對主版頁面建立表格
當 Master1.master 檔案在 [原始碼] 檢視中處於選取狀態時，選取兩個 form 項目之間的文字，然後將下列內容貼到選取的區域。請注意，這段程式碼會將內容預留位置放在表格中，而不像在預設主版配置中那樣是放在 div 項目之間。
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table><table width="100%" cellspacing="0" cellpadding="0" border="0" class="header"> <tr> <td class="title">Switchable Themes Example</td> </tr> <tr> <td><hr /></td> </tr> <tr> <td> <asp:contentplaceholder id="ContentPlaceHolder1" > </asp:contentplaceholder> </td> </tr> <tr> <td><hr /></td> </tr> </table>主版頁面現在已有可套用至內容頁面 (名稱為 Home.aspx) 的配置，而您將在下一節建立這個內容頁面。
建立內容頁面
主版頁面會提供內容的範本。藉由建立與主版頁面關聯的 ASP.NET Web 網頁，您可定義主版頁面的內容。內容頁面是特殊的 ASP.NET 網頁，當中只包含要與主版頁面合併的內容。在內容頁面中，您可以加入要在使用者要求該網頁時顯示的文字和控制項。
內容頁面將使用您已建立的主版頁面和還未完成的佈景主題，並使用主版頁面的內容預留位置，再加上標題、子標題和下拉式清單。因為內容頁面將使用主版頁面，它必須包含 @ Page 指示詞中的 MasterPageFile 屬性，以及內容預留位置。
若要建立內容頁面
在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，再按 [加入新項目]。
請在 [Visual Studio 安裝的範本] 下方，選取 [Web Form]。
在 [名稱] 方塊中輸入 Home。
在 [語言] 清單中，按一下您想要的程式語言。
選取 [選擇主版頁面] 核取方塊，然後按一下 [加入]。
[選擇主版頁面] 對話方塊隨即出現。
按一下 [Master1.master]，再按 [確定]。
隨即建立名稱為 Home.aspx 的新檔案。網頁包含 @ Page 指示詞，以將目前網頁附加至具有 MasterPageFile 屬性的所選主版頁面，如下列範例中所示。
<%@ Page Language="VB" MasterPageFile="~/Master1.master" ... %><%@ Page Language="C#" MasterPageFile="~/Master1.master" ... %>網頁還包含您隨後將使用的 <asp:Content> 項目。
將內容加入至內容頁面
內容頁面沒有組成 ASP.NET Web 網頁的一般項目 (例如，html、body 或 form 項目)。而是，您只需加入要在主版頁面上顯示的內容，方法是取代在主版頁面中建立的預留位置區域。在這個範例中，您可以加入標題 1 項目、標題 2 項目、段落項目和下拉式清單。您將使用下拉式清單來選取要套用至網頁的佈景主題。
若要將內容加入至首頁
將下列程式碼貼到 asp:Content 開頭和結尾標記之間。下列範例會建立三個 HTML 項目 (標題 1、標題 2 和段落)，也會加入一個下拉式清單。請注意，如果您喜歡的話，也可以在設計檢視中將控制項加入至網頁。
<h1 id="title1">Switchable Themes on a Page</h1><br /> <h2 id="title2">Note how the master page content and the page content are affected</h2> <p>Select a color from the drop-down list below to change the appearance of this page.</p> <br /><br /> <asp:dropdownlist id="ddlThemes" autopostback="true" > <asp:listitem value="Blue">I'd like the page to be blue!</asp:listitem> <asp:listitem value="Red">I'd like the page to be red!</asp:listitem> <asp:listitem value="Green">I'd like the page to be green!</asp:listitem> </asp:dropdownlist>加入指令碼區段，它將在佈景主題從下拉式清單中被選取時執行載入佈景主題的程式碼。下列範例和 script 標記應該加到內容頁面上 @ Page 指示詞的下一行。
<script > Public Sub Page_PreInit() ' Sets the Theme for the page. Me.Theme = "Blue" If ((Not (Request.Form) Is Nothing) _ AndAlso (Request.Form.Count > 0)) Then Me.Theme = Me.Request.Form(4).Trim End If End Sub </script><script > public void Page_PreInit() { // Sets the Theme for the page. this.Theme = "Blue"; if (Request.Form != null && Request.Form.Count > 0) this.Theme = this.Request.Form[4].Trim(); } </script>佈景主題在網頁生命週期的 PreInit 事件期間載入。網頁的要求表單包含值陣列，而索引值 4 是從下拉式清單中選取的值。這個值是指派給網頁的佈景主題，並在網頁載入時套用新佈景主題。
本逐步解說接下來的步驟是要建立數個佈景主題，您可以用來顯示套用不同佈景主題的結果。
編輯 Blue 佈景主題
Blue 佈景主題包含空白樣式表和空白面板。由於您知道預設網頁的構成項目和所用的主版頁面，因此現在可以編輯佈景主題檔案，為網頁項目加上色彩。
若要編輯 Blue 佈景主題
在 [原始碼] 檢視中，從 Blue 佈景主題資料夾開啟 Default.skin 檔案。
將下列程式碼加入至下拉式清單，以指定選取 Blue 佈景主題時的網頁色彩。
<asp:dropdownlist ForeColor="white" BackColor="Blue" />在 [原始碼] 檢視中，從 Blue 資料夾開啟 Default.css 檔案。首先，加入下列程式碼，格式化主版頁面的表格標題。
td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Navy; }接著，使用下列程式碼，加入表格的背景色彩。
table.header { background-color: Blue; }然後，在內容頁面中套用標題 1 和標題 2 項目樣式。
h1 { font-size: large; color: Navy; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Navy; }最後，套用水平分隔線和段落項目樣式。
p { font-family: Verdana; font-size: small; color: Aqua; text-align: left; } hr { border: 0; border-top: 2px solid Aqua; height: 2px; }
連接佈景主題和網頁
在可以看到 Home.aspx 網頁套用佈景主題的結果之前，您必須在 @ Page 指示詞中加入屬性，指示網頁使用佈景主題。
若要連接網頁和佈景主題
在 [原始碼] 檢視中，開啟 Home.aspx。
將 StylesheetTheme 屬性加入至 @ Page 指示詞，並將其設為 Blue 佈景主題。網頁指示詞應該看起來與下列範例相同。
<%@ Page Language="VB" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %><%@ Page Language="C#" MasterPageFile="~/switchtheme.master" Title="Switchable Themes" StylesheetTheme="Blue" %>
測試網頁
您可以採取與對任何 ASP.NET 網頁一樣的方式，執行網頁以進行測試。
若要測試網頁
當檢視 Home.aspx 網頁時，按 CTRL+F5 執行網頁。
ASP.NET 會將 Home.aspx 網頁中的內容與 Master1.master 網頁中的配置合併成單一網頁，然後在瀏覽器中套用 Blue 佈景主題並顯示結果的網頁。請注意，在主版檔案中定義的 HTML 項目、下拉式清單、標題和背景都已經套用了 Blue 佈景主題。
建立其他佈景主題
Blue 佈景主題的作用不錯，但本逐步解說的目的是要提供網頁使用者佈景主題的數個選項。您可以將面板和樣式表檔案複製到新佈景主題目錄，然後編輯佈景主題所使用的色彩來反映新佈景主題色彩。下列程序將建立兩個新佈景主題，其名稱分別為 Red 和 Green。
若要建立其他佈景主題
在 [方案總管] 中，以滑鼠右鍵按一下 [App_Themes] 資料夾，再按一下 [加入 ASP.NET 資料夾]，然後按一下 [佈景主題]。當資料夾標題 Theme1 處於選取狀態時，輸入 Red，然後按 ENTER。
開啟 [Blue] 資料夾，然後選取 Default.skin 和 Default.css 檔案。以滑鼠右鍵按一下這兩個選取的檔案，然後按一下 [複製]。
以滑鼠右鍵按一下 [Red] 資料夾，然後按一下 [貼上]。
重複步驟 1，但是將新佈景主題資料夾命名為 Green。接著，以滑鼠右鍵按一下 [Green] 資料夾，然後按一下 [貼上]，將 Default.skin 和 Default.css 檔案的複本放置到 [Green] 資料夾。
在面板檔案中編輯色彩屬性來反映佈景主題色彩。例如，Red 佈景主題中的面板檔案應該看起來與下列範例相同。
<asp:dropdownlist ForeColor="white" BackColor="Red" />編輯每個佈景主題的樣式表來反映佈景主題的名稱。請注意，您應該對不同的 HTML 項目和文字使用幾種濃淡不一的綠色，讓內容與背景形成對比。Green 佈景主題的可能看起來與下列範例相同。
p { font-family: Verdana; font-size: small; color: Teal; text-align: left; } hr { border: 0; border-top: 2px solid Teal; height: 2px; } h1 { font-size: large; color: Green; } h2 { font-family: Verdana; font-size: medium; margin-top: 30; color: Green; } table.header { background-color: Lime; } td.title { font-size: 1em; text-align: center; font-family: verdana; font-size: x-large; font-weight: bolder; color: Teal; }
測試佈景主題選項
現在就可以使用下拉式清單，在三個網頁佈景主題之間進行選取。
若要選取其他佈景主題
切換至 Home.aspx 網頁，然後按 CTRL+F5。
從下拉式清單中選取 [Green] 或 [Red]。
請注意，樣式表是套用至網頁的 HTML 項目，而面板是套用至下拉式清單控制項。
後續步驟
如需使用主版頁面的詳細資訊，請參閱 逐步解說：在 Visual Web Developer 中建立和使用 ASP.NET 主版頁面。