【文章內(nèi)容簡介】 個文件夾的名稱就是所創(chuàng)建的主題的名稱。 所有的主題都保存在一個名為 App_Themes 的應用程序文件夾中。下面是一個皮膚文件示 例： asp:Calendar runat=server FontNames=Century Gothic FontSize= Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar asp:TreeView runat=server ExpandDepth=1 FontNames=Century Gothic BorderColor=LightSteelBlue BorderStyle=Solid SelectedNodeStyle FontBold=True ForeColor=SteelBlue / RootNodeStyle FontBold=True / NodeStyle ForeColor=MidnightBlue / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=SteelBlue / /asp:TreeView asp:Label SkinId= textLabel runat=server FontNames=Century Gothic Font Size=10pt ForeColor=MidnightBlue/asp:Label asp:ImageButton SkinId=homeImage runat=server ImageUrl= ~/ / 這個文件包含了為 4 種類型的元素所作的定義。這個文件中的 TreeView 控件和 Calendar 控件定義了站點上的每個日歷控件和樹型視圖控件的外觀。注意這些控件沒有ID 屬性 —— 這是所有皮膚文件的一個特點。每個帶有皮膚文件的元素 都沒有 ID。在運行的時候，如果將這個主題指定為頁面的默認主題，而該頁面上包含一個 Calendar 控件，那么這個控件將自動繼承在這個文件中定義的樣式。 在這個皮膚文件中的另外兩個控件 Label和 Image Button都有相關的 SkinId 屬性。這些屬性使得開發(fā)人員可以創(chuàng)建帶有多種類型的 Label控件或 Image Button控件的站點，并使用皮膚數(shù)據(jù)提供的信息為選中的控件設置樣式 —— 對皮膚文件的鏈接由 SkinId 屬性控制。因此，如果希望在 Web 頁面上包含兩個 Label 控件并使用一個主題為其中一個設置樣式， 那么可以使用如下語法： asp:Label ID=Label1 SkinID=textLabel runat=server Text=Label Styled label/asp:Label asp:Label ID=Label2 runat=server Text=LabelUnstyled label/asp:Label 這個示例中的 SkinId 屬性指定了用于控件的樣式，只要它是定義在頁面所使用的主題中。 在下面的“試一試”練習中，將在 VWD中創(chuàng)建一個簡單的主 題并查看怎樣定義樣式格式。將在本章后面的示例中使用這個主題和另一個主題。 (1) 在 VWD中，打開 Chapter05 Web站點。右擊 Solution Explorer頂部的 C:\… \Chapter05文件夾并選擇 Add Folder→ Theme。將看到如圖 512 所示的畫面。 圖 512 (2) 將在應用程序內(nèi)創(chuàng)建一個名為 App_Themes 的文件夾，以及一個在 App_Themes 內(nèi)的新的空文件夾，必須為這個文件夾命名。現(xiàn)在將其命名為 Blue。 (3) 右擊 App_Themes 文件夾并添加一個新的 Theme 文件夾 Red?，F(xiàn)在已經(jīng)為站點創(chuàng)建了兩個主題，雖然到目前為止還沒有任何包含樣式定義的皮膚文件。 (4) 右擊 Blue 文 件夾并選擇 Add New Item。選擇 Skin File 并將其命名為 ，如圖 513 所示。 圖 513 單擊 Add。查看生成的結(jié)果文件 (如圖 514 所示 )將看到一些默認的注釋，這些注釋介紹了皮膚文件的基本知識。 圖 514 (5) 重復這個步驟為 Red 主題添加一個皮膚文件，并將其命名為 。 (6) 在這個示例中，您將發(fā)現(xiàn)在向皮膚文件添加控件之前，創(chuàng)建一個簡單的 頁面來試驗新的樣式是非常方便的。在 Solution Explorer 中右擊 C:\… \Chapter05 文件夾并選擇 Add New Item，選擇 Web Form并將該文件命名為 ，單擊 OK 從 而添加一個新頁面。 (7) 將兩個 Calendar 控件拖放到該頁面上。接下來為這兩個控件設置樣式，第一步是手動為每個控件添加一些樣式，使其中一個用于藍色主題，而另一個用于紅色主題。稍后，您將看到這些控件所使用的樣式 —— 首先，圖 515 顯示了在樣式化之后它們看起來是什么樣子。 圖 515 注意 Properties 窗格中為 Calendar 控件包含了很多不同的樣式選項。按表 51 和表 52所示設置屬性。 表 51 Blue Skin 屬 性 樣 式 代 碼 FontNames Century Gothic asp:Calendar ID=Calendar1 runat=server FontSize Small OtherMonthDayStyle BackColor Lavender DayStyleForeColor MidnightBlue TitleStyleBackColor LightSteelBlue FontNames=Century Gothic FontSize=Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar 表 52 Red Skin 屬 性 樣 式 代 碼 FontNames Garamond asp:Calendar ID=Calendar2 runat=server FontNames=Garamond FontSize=Medium BorderColor=Chocolate BorderStyle=Ridge FontSize Medium BorderColor Chocolate BorderStyle Ridge BorderWidth 8px DayNameFormat FirstLetter OtherMonthDayStyle BackColor BlanchedAlmond DayStyleForeColor Maroon TitleStyleBackColor Maroon TitleStyleFontBold True TitleStyleForeColor FFFFC0 BorderWidth=8px DayNameFormat=FirstLetter OtherMonthDayStyle BackColor=BlanchedAlmond / DayStyle ForeColor=Maroon / TitleStyle BackColor=Maroon FontBold=True ForeColor=FFFFC0 / /asp:Calendar (8) 現(xiàn)在將一個 Label 控件拖放到頁面上并為其指定一些顏色和字體樣式。下面的代碼創(chuàng)建兩個標簽并定義了兩個應該和藍色以及紅色主題匹配的樣式： asp:Label ID=Label1 runat=server Text=Label FontNames=century gothic FontSize=10pt ForeColor=MidnightBlue/asp:Label asp:Label ID=Label2 runat=server FontNames=garamond FontSize=11pt ForeColor=DarkRed Text=Label/asp:Label 在定義好樣式之后，就為接下來的步驟做好了準備。 (9) 在 VWD 中打開 文件并將 Calendar控件和 Label控件的 HTML 代碼復制粘貼到這個皮膚文件中，然后刪除這些控件的 ID 標記。 (10) 最后，為 Label 控件添加 SkinID 屬性，以便為其指定一個在后面可以使用的惟一樣式引用 (注意下面代碼中的粗體部分 )： asp:Calendar runat=server FontNames=Century Gothic FontSize=Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar asp:Label SkinId=textLabel runat=server FontNames=Century Gothic FontSize=10pt ForeColor=MidnightBlue/asp:Label (11) 針對紅色的控件重復步驟 8，將它們放置在 定義文件中： asp:Calendar runat=server FontNames=Garamond FontSize=Medium BorderColor=Chocolate BorderStyle=Ridge BorderWidth=8px DayNameFormat=FirstLetter OtherMonthDayStyle BackColor=BlanchedAlmond / DayStyle ForeColor=Maroon / TitleStyle BackColor=Maroon FontBold=True ForeColor=FFFFC0 / /asp:Calendar asp:Label SkinId=textLabel runat=server FontNames=Garamond FontSize=11pt ForeColor=DarkRed / 對其他希望添加到皮膚文件中的任何控件只需要重復以上步驟即可。在下一個“試一試”練習中，將在頁面上添加一個 Calendar 控件和一個 Label控件以顯示這些主題怎樣改變它們的外觀。另外，還將添加一個 TreeView 控件和一個 ImageButton 控件，因此在皮膚文件中需要再添加一些樣式信息。 (12) 將下面的代碼添加到藍色皮膚文件 ()中從而為 TreeView 和ImageButton 控件指定樣式： asp:TreeView runat=server ExpandDepth=1 FontNames=Century Gothic BorderColor=LightSteelBlue BorderStyle=Solid SelectedNodeStyle FontBold=True ForeColor=SteelBlue / RootNodeStyle FontBold=” True / NodeStyle ForeColor=MidnightBlue / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=SteelBlue / /asp:TreeView asp:ImageButton SkinId=homeImage runat=server ImageUrl=~/ / (13) 現(xiàn)在需要添加一些代碼，這些代碼類似于紅色皮膚文件 ()中的代碼，從而指定怎樣為一個 TreeView 控件設置樣式： asp:TreeView runat=server ExpandDepth=1 FontNames=Garamond BorderColor=Chocolate BorderStyle=Ridge SelectedNodeStyle FontBold=True ForeColor=Chocolate / RootNodeStyle FontBold=True / NodeStyle ForeColor=DarkRed / Le