white skin
看了一下visual web developer 中自帶的個人站點，發(fā)現(xiàn)aspnet2.0里面的很多技術(shù)使用起來確實很優(yōu)雅，比較典型的有 login控件和用戶系統(tǒng)、MasterPage、主題和皮膚、SiteMap等等。這些特性，甚至不需要教程就可以很快上手。本文要介紹的是主題和皮膚的應(yīng)用。
(一) 如何使用 1） 在你的應(yīng)用里面添加 App_Themes 文件夾 2） 將主題相關(guān)的文件（包括.css,、.skin文件、其他資源文件包括圖片、Flash等）組織到一個以主題名命名的文件夾中，將主題文件夾放于App_Themes目錄。如果有多個主題，重復(fù)上述步驟。 Example ： Css 文件（x.css） 理論上上來說，不同的主題中的樣式表和SKIN文件的結(jié)構(gòu)都應(yīng)該是完全相同的。 3） 設(shè)置你要應(yīng)用主題的控件的css樣式名為css中定義的樣式名（比如column、gradient） 設(shè)置你要應(yīng)用主題的服務(wù)器控件的SkinId為Skin文件中定義的skinid（比如login、create等），這樣在Skin中定義的控件屬性會自動附加到當前的控件上（內(nèi)部也是使用CSS實現(xiàn)的） 4） 應(yīng)用主題，有三種辦法 全局主題：在Web.config中<system.web>中添加<pages StyleSheetTheme ="ThemeName"/>節(jié)，這樣在整個應(yīng)用中都會自動應(yīng)用名為ThemeName 的主題 頁面主題：在ASPX文件頂部加入：<%@ Page Language="C#" StylesheetTheme=" ThemeName " %>，這樣當前頁面都會應(yīng)用名為ThemeName 的主題，或者在ASPX_CS中加(Page_Load方法)入如下代碼 Page. StyleSheetTheme = “ThemeName”; 角色主題：需要使用masterpage 來輔助實現(xiàn) ，通過User.IsInRole(“RoleName”) 來判斷用戶是否屬于某個角色，然后決定使用何種主題(Page. StyleSheetTheme = “ThemeName”)；當然，使用這種辦法還可以應(yīng)用用戶選擇的主題 如果你仍然感覺迷惑，請查看 Quick Start 。 (二) 工作原理 不同的主題和皮膚之間的不同主要是頁面和頁面中的控件的樣式（包括字體、段落、背景、邊框等等）、部分圖片的不同。 傳統(tǒng)的完全使用CSS來表現(xiàn)不同的主題的方案，在處理圖片和圖片按鈕的地方往往心有余而力不足。而在aspnet2.0里面一切都已經(jīng)變得簡單。 主題和皮膚是 dotnet framework2.0內(nèi)建支持的，服務(wù)器控件添加了SkinId屬性，Page類也添加了Theme 和 StyleSheetTheme 屬性，其目的就是優(yōu)雅的支持Skin。在應(yīng)用指定了主題之后，相關(guān)的頁面會自動鏈接位于主題目錄下的css文件和skin文件，css的用法跟傳統(tǒng)的用法沒有什么區(qū)別，而skin文件則以一種類似于css的方式工作，指定了SkinId的服務(wù)器控件會自動從skin文件中加載并附加匹配的屬性或樣式（最常用的是Image 和ImageButton的ImageUrl屬性,這樣做可以使頁面在不同的主題下）---這是在服務(wù)器端完成的。由于skin文件在使用后是緩存在內(nèi)存中的，所以效率不會有問題。 (三) Theme 和 StylesheetTheme 的區(qū)別 基本上，本文前面所有的 StyleSheetTheme 都可以替換為 Theme ，我猜想區(qū)別是使用 Theme 時位于主題文件夾中的 樣式表(CSS)文件不會被應(yīng)用到主題中，但是根據(jù)我的測試，發(fā)現(xiàn)兩種情況下生成的頁面中，只有<link href=’’>這一節(jié)的位置不同，一個出現(xiàn)在<Title>標記前面，一個則是后面。 (四) 優(yōu)雅之處 a) 完全Framework內(nèi)建的支持、不再需要復(fù)雜的編程，甚至不再需要編程； b) 在vs2005中有非常友好的設(shè)計時支持，也就是說，在設(shè)計的時候你就可以看到某種主題的效果； c) 學(xué)習(xí)曲線很平緩，如果你熟悉CSS的話，則更加沒有難度。Skin 文件(x.skin)
.column {
}{background-image: url(images/content-shim.gif);}
.gradient {}{ background-image: url(images/content-shim-photo.gif);}.solid {}{background-image: url(images/content-shim-none.gif);}.header {}{ background-image: url(Images/header.gif); background-repeat: no-repeat; position: relative; width: 789px; height: 76px; margin: 0 auto 5px auto;} <asp:imagebutton runat="server" Imageurl="Images/button-login.gif" skinid="login" /><asp:image runat="server" Imageurl="Images/button-create.gif" skinid="create" /><asp:image runat="server" ImageUrl="Images/button-download.gif" skinid="download"/>
