用ASP.NET 2.0主題控制網站外觀

asp.net|控制

自.NET Framework出現以來，對網站外觀進行控制一直是ASP.NET開發人員的期待。ASP.NET 2.0使之成為現實，應用它的主題與皮膚，我們可以對外觀進行控制。

開發人員經常將主題與主版頁面面弄混，但這兩個元素存在很大的不同。主版頁面面允許你控制一個網站的總體布局，或網站內的一組頁面，但主題主要關注網站的外觀與感覺。

在你能夠應用ASP.NET 2.0主題的所有優點之前，你有必要瞭解一些術語與過程。主題能夠應用一個稱之為皮膚或層疊樣式表（CSS）的新設計項目。

瞭解皮膚檔案

儘管在主題中不必應用皮膚，但我還是想首先介紹一下皮膚的概念，因為它是主題中的標準設計項目。皮膚提供了一種管理網路控制面板的方法。你也可以用它來大量設定一個控制項的某些特性。

皮膚的定義包含在皮膚檔案（以.skin為副檔名）中。在Visual Studio中，你可以選擇增加項目>皮膚檔案(Add New Item>Skin File)來方便地增加皮膚檔案。它們是基本的文字檔，因此你還可以應用自己喜歡的文字編輯器。

皮膚檔案中包含一些控制項和它們所應用的屬性。我讀到的微軟的所有檔案都建議為每個控制項類型建立單獨的皮膚檔案，但你也可以在一個單獨的檔案中包括數個控制項定義，而不會引起問題。下面的代碼是一個樣本皮膚檔案，它定義了標籤與文字框控制項的顯示顏色。

<asp:Label runat="server" BackColor="Red" ForeColor="White" />
<asp:TextBox runat="server" BackColor="Black" ForeColor="Yellow" />

標籤控制項將以紅色為背景，文本為白色；檔案框控制項以黑色為背景，文本為黃色。以下是定義皮膚檔案控制項的幾點提示：

• 每個被定義的控制項都需要runat="server"屬性。
• id屬性沒有包括在內。它是網路控制項的一個獨特屬性，因此只有在網頁的控制項才被指定。
• 皮膚檔案中只能定義呈現(presentation)特性。

你可能想瞭解如何定義同一類型控制項的多種格式。這就是skinid屬性的作用所在。在皮膚檔案中，你可以為一個控制項指定一個skinid屬性，以此來定義這個控制項類型的多種轉譯格式。

你還可以應用樣式(style)屬性或外部樣式表。微軟建議為不同的控制項建立單獨的皮膚檔案。例如，你可能想定義一個稱為label.skin的檔案的標籤控制項和其它控制項的外觀。

通過主題應用皮膚檔案

主題是一個或多個皮膚和/或CSS檔案的組合，用來控制ASP.NET網站內控制項的外觀。組成主題的檔案(皮膚與CSS)包含在一個主題檔案夾中。

檔案夾的名稱定義主題的名稱（如同頁面聲明、代碼等一樣），它是包含在網路應用軟體內的特殊App_Themes檔案夾的一個子檔案夾。如果你應用Visual Studio，你就可以在解決方案上右擊，並選擇增加ASP.NET檔案夾再選主題(Add ASP.NET Folder>Themes)；這樣就可自動地增加App_Themes檔案夾。你還可以通過Windows Explorer或你喜歡的方法來建立App_Themes檔案夾。

一個特殊主題檔案夾中的皮膚和CSS檔案包含那個主題中的所有元素。主題可以通過頁面指示的pagetheme屬性應用於網頁中，就像是這樣：

<%@ Page Language="C#" Theme="TechRepublicTest" %>

主題一旦指明後，皮膚與CSS檔案就與那個頁面相連。此時，你就可以為具有不止一個有效定義的控制項指定一個skinid屬性；如果沒有必要，也可以將其忽略。列表C中的網頁應用的是在樣本皮膚檔案中定義的控制項。

在頁面層級指定主題是件痛苦的事情，在有數百個頁面時更是如此。你也可在應用軟體的web.config檔案中指定主題。頁面元素（位於system.web元素中）包含一個主題屬性，它為網站指定預設的主題。

<pages theme="TechRepublicTest" />

這樣就不必設定頁面級主題屬性；但你仍可以用它來代替web.config檔案中定義的預設主題。

不要混淆主題與CSS

儘管主題與皮膚在很多方面與CSS相似，它們並不一樣。主題能夠控制一個網路控制項的視覺呈現，包括為DataGrid或TreeView控制項中的圖片指定模板布局。主題與CSS的另一主要不同之處在於：主題中沒有層疊。但是，主題中可以包含樣式表。而且，主題的特性值總是代替本地特性值。

單一化與個別化

長期以來，開發社區一直強烈要求公開由主題與皮膚提供的功能，感謝ASP.NET 2.0做到這一點。雖然CSS提供許多格式化的選項，主題則更進一步，其中可以應用CSS檔案。下周我們將繼續討論主題與主版頁面面，說明如何用它們來控制網站。