自.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" />
標簽控件將以紅色為背景,文本為白色;文件框控件以黑色為背景,文本為黃色。以下是定義皮膚文件控件的幾點提示:
你可能想了解如何定義同一類型控件的多種格式。這就是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文件。下周我們將繼續討論主題與母版頁面,說明如何用它們來控制網站。
新聞熱點
疑難解答
圖片精選