主題

2019-11-14 15:47:21

字體：大中小

來源：轉載

供稿：網友

主題機制使得開發人員可以很輕松地對頁面的設置實現更多的選擇。它在處理主題的設置時提供了清晰的目錄結構，提供了良好的擴展性。因此使用主題可以提高設計和維護網站的效率。

主題是有關頁面和控件的外觀屬性設置的集合，由一組元素組成，包括外觀文件、級聯樣式表（CSS）、圖像和其他資源。

主題至少包含外觀文件（.skin文件），主題是在網站或Web服務器上的特殊目錄中定義的，一般把這個特殊目錄稱為專用目錄，目錄的名字為App_Themes。App_Themes目錄下可以包含多個主題目錄，主題目錄的命名由程序員決定。而外觀文件等資源則是放在主題目錄下的。

主題的組成元素

　　1.外觀文件

　　外觀文件又稱皮膚文件，是具有文件擴展名.skin的文件，在皮膚文件里，可以定義控件的外觀屬性。

　　外觀文件形式一般具有下面形式：

　　　　<asp:Label runat="serve BackColor="Blue"></asp:Label>

　　上面定義了Label控件的一個皮膚，可以在網頁引用該皮膚去設置Label控件的外觀。

　　2.級聯樣式表

　　級聯樣式表就是CSS文件，是具有文件擴展名.css的文件，也是用來存放定義控件外觀屬性的代碼的文件。

　　3.圖像和其他資源

　　圖像就是圖形文件，其他資源可能是聲音文件、腳本文件等。有時候為了控件美觀，只是靠顏色、大小和輪廓來定義并不能滿足要求，這時候就會考慮把一些圖片、聲音等加到控件外觀屬性定義中去。

主題的分類

主題按照應用范圍可分為頁面主題和全局主題。

　　頁面主題應用于單個Web應用程序它是一個位于/App_Themes文件夾下的主題文件夾，包含控件外觀、樣式表、圖形文件和其他資源。

　　全局主題可應用于服務器上的所有網站，全局主題和頁面主題類似，全局主題存儲在Themes文件夾中，服務器上的任何網站以及任何網站中的任何頁面都可以引用全局主題。

主題的特性

　　1.主題只在asp.net控件中有效。

　　2.母版頁上不能設置主題，但主題可以在內容頁面上設置。

　　3.主題上設置的ASP.NET控件的樣式覆蓋頁面上設置的樣式。

　　4.如果在頁面上設置EnableTheming="false"，則主題無效。

　　5.在頁面中動態設置主題，必須在頁面生命周期Page_PReinit事件之前進行設置。

　　6.主題包括.skin和.css。

使用主題時可能會引起安全問題

　　1.改變控件的行為，導致有異于預期的行為。

　　2.插入客戶端腳本，導致跨站點式腳本風險。

　　3.改變驗證。

　　4.公開敏感信息。

緩解措施

　　1.使用正確的訪問控制設置來保護全局和應用程序的主題目錄，應只允許受信任的用戶將文件寫入主題目錄中。

　　2.不要使用來自不受信任的主題，若要在網站上使用來自單位外部的主題，應先檢查是否包含惡意代碼。

　　3.不要在查詢數據中公開主題名稱，惡意用戶可以通過此信息來使用開發人員不知道的主題，從而公開敏感信息。

主題的創建

　　1.右鍵單擊要為之創建主題的網站項目，在彈出的菜單中選擇“添加ASP.NET文件夾”|“主題”命令。此時就會在該網站項目下添加一個名為App_Themes文件夾，并在該文件夾中自動添加一個默認名為主題1的文件夾。

　　2. 右鍵單擊主題1文件夾，在彈出的菜單里選擇“添加”命令，彈出添加菜單，該菜單提供了在主題1文件夾里可以添加的文件的模板。

　　3. 選擇新建項，在彈出對話框里選擇“外觀文件”，修改文件名為Skin1，單擊“添加”，Skin1.skin就會添加在Themes1目錄下。

主題的應用

　　在網頁中使用某個主題，只需在網頁定義中加上“Theme=[主題目錄]”屬性，示例代碼如下：

　　　　<%@ Page Theme="主題1"%>

　　　　通過把屬性Themes設置為Themes1來把該主題應用于網頁。

　　為了將主題應用于整個項目，可以項目的根目錄下的Web.config文件里進行配置，示例代碼如下：

1 <configuration>2     <system.web>3         <Pages Themes="主題1"></Pages>4     </system.web>5 </configuration>

SkinID的應用

　　SkinID是ASP.NET為Web控件提供的一個聯系到皮膚的屬性，用來標識控件使用哪種皮膚。有時需要同時為一種控件定義不同的顯示風格，這時可以在皮膚文件中定義SkinID屬性來區別不同的顯示風格，例如，在LabelSkinFile1.skin文件中對Label控件定義了三種顯示風格的皮膚，代碼如下：

1 <asp:Label  runat="server" BackColor="Red"></asp:Label>2 <asp:Label  runat="server" SkinID="Style2"BackColor="Pink"></asp:Label>3 <asp:Label  runat="server" SkinID="Style3" BackColor="Green"></asp:Label>

主題的禁用

　　當不希望主題重寫頁和控件外觀的本地設置時，就可以利用禁用方法來禁用主題。禁用頁的主題通過設置@Page指令的EnableTheming屬性為false來實現，例如：

　　<%@ Page EnableTheming="false"%>

　　禁用控件的主題通過將控件的EnableTheming屬性設置為false來實現，例如：

　　　　<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />

使用實例1：

在項目中新建App_Themes文件夾，添加主題1文件夾，并新建外觀文件Skin1.skin，代碼如下：

1 <asp:Label runat="server" BackColor="Green"/>2 <asp:TextBox runat="server" BackColor="Pink"/>3 <asp:Button runat="server" BackColor="White" ForeColor="Blue" Font-Italic="True" Font-Bold="true"/>

在Default.aspx中,在網頁定義中添加Theme="主題1"屬性，并添加如下代碼：

 1 <div> 2         <table> 3             <tr> 4                 <td> 5                     <asp:Label ID="Label1" runat="server" Text="用戶名：" /> 6                 </td> 7                 <td> 8                     <asp:TextBox ID="TextBox1" runat="server" /> 9                 </td>10             </tr>11             <tr>12                 <td>13                     <asp:Label ID="Label2" runat="server" Text="密碼：" />14                 </td>15                 <td>16                     <asp:TextBox ID="TextBox2" runat="server" />17                 </td>18             </tr>19             <tr>20                 <td>21                     <asp:Button ID="Button1" runat="server" Text="登錄"/>22                 </td>23             </tr>24         </table>25 </div>

使用實例2：

在項目中新建App_Themes文件夾，添加主題1文件夾，并新建外觀文件Skin1.skin，代碼如下：

1 <asp:Label runat="server" BackColor="Yellow"/>2 <asp:TextBox runat="server" BackColor="Yellow"/>3 <asp:Button runat="server" BackColor="White" ForeColor="Yellow" Font-Bold="true"/>4 <asp:DropDownList runat="server" BackColor="Yellow"/>

添加主題2文件夾，并新建外觀文件Skin2.skin，代碼如下：

1 <asp:Label runat="server" BackColor="Pink"/>2 <asp:TextBox runat="server" BackColor="Pink"/>3 <asp:Button runat="server" BackColor="White" ForeColor="Pink" Font-Bold="true"/>4 <asp:DropDownList runat="server" BackColor="Pink"/>

添加主題3文件夾，并新建外觀文件Skin3.skin，代碼如下：

1 <asp:Label runat="server" BackColor="Violet"/>2 <asp:TextBox runat="server" BackColor="Violet"/>3 <asp:Button runat="server" BackColor="White" ForeColor="Violet" Font-Bold="true"/>4 <asp:DropDownList runat="server" BackColor="Violet"/>

在Default.aspx中,在網頁定義中添加Theme="主題1"屬性，并添加如下代碼：

 1 <div> 2         <table> 3             <tr> 4                 <td> 5                     <asp:Label ID="Label1" runat="server" Text="用戶名：" /> 6                 </td> 7                 <td> 8                     <asp:TextBox ID="TextBox1" runat="server" /> 9                 </td>10             </tr>11             <tr>12                 <td>13                     <asp:Label ID="Label2" runat="server" Text="密碼：" />14                 </td>15                 <td>16                     <asp:TextBox ID="TextBox2" runat="server" />17                 </td>18             </tr>19             <tr>20                 <td colspan="2">21                     <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">22                         <asp:ListItem Value="主題1">黃色</asp:ListItem>23                         <asp:ListItem Value="主題2">粉色</asp:ListItem>24                         <asp:ListItem Value="主題3">紫色</asp:ListItem>25                     </asp:DropDownList>26                 </td>27             </tr>28             <tr>29                 <td colspan="2">30                     <asp:Button ID="Button1" runat="server" Text="登錄"/>31                 </td>32             </tr>33         </table>34 </div>

在Default.aspx.cs中，添加Page_PreInit事件，設置當前的被選中主題（主題的設置必須在Page_Load事件之前）。

1 protected void Page_PreInit(object sender, System.EventArgs e)2 {3     if (IsPostBack)4     {5         Page.Theme = Request["DropDownList1"];6     }7 }