043. asp.net主題之一初識主題和皮膚

主題由外觀, 級聯樣式表(CSS), 圖像和其它資源組成, 主題中至少包含外觀. 他是在網站或Web服務器上的特殊目錄中定義的:

外觀:

         外觀文件是主題的核心內容, 用於定義頁面中服務器控件的外觀, 它包含各個控件(如Button, TextBox 或 Calendar控件)的屬性設置. 控件外觀設置類似於控件標記本身, 但只包含要作為主題的一部分來設置的屬性. 例如, 下面的TextBox控件的外觀代碼:

         <asp:TextBox runat="server" BackColor="PowderBlue" ForeColor="RoyalBlue" />

控件外觀的設置與控件聲明代碼類似. 在控件外觀設置中只能包含作為主題的屬性定義. 上述代碼中設置了TextBox控件的前景色和背景色屬性. 如果將以上控件外觀應用到單個web頁面上, 那么頁面內所有TextBox控件都將顯示所設置的控件外觀.

級聯樣式表:

主題還可以包含級聯樣式表(.css文件). 將.css文件放在主題目錄中時, 樣式表自動作為主題的一部分應用. 使用文件擴展名.css在主題文件夾中定義樣式表. 主題中可以包含一個或多個級聯樣式表.

圖像和其它資源:

主題還可以包含圖像和其它資源, 如腳本文件或視頻文件, 通常, 主題的資源文件與該主題的外觀文件位於同一個文件夾中. 但也可以在Web應用程序中的其它地方. 例如主題目錄下的某個子文件夾中的文件

============================================================================================

 文件存儲和組織方式

在Web應用程序中, 主題文件必須存儲在根目錄的App_Themes文件夾下(除全局主題之外), 開發人員可以手動或者使用VS工具創建該文件夾, 創建完成后, 如下圖:

外觀文件是主題的核心部分, 每個主題文件夾下都可以包含一個或多個外觀文件, 如果主題較多, 頁面內容復雜時, 外觀文件的組織就會出現問題, 此時就需要開發人員在開發過程中, 根據實際情況對外觀文件進行有效的管理. 通常根據SkinID. 控件類型  及文件 這三種方式組織:

三種常見的外觀文件愛你的組織方式
根據SkinID	在對控件外觀設置時, 將具有相同的SkinID放在同一個外觀文件中, 這種方式適合網站頁面較多, 設置內容復雜的情況
根據控件類型	組織外觀文件時, 以控件類型進行分類, 這種方式適用於頁面包含控件較少的情況
根據文件	組織外觀文件時, 以網站中的頁面進行分類, 這種方式適用於網站的網頁較少的情況

 

外觀文件分為默認外觀和已命名外觀兩種類型, 如果控件外觀沒有包含SkinID屬性, 那么就是默認外觀. 此時, 向頁面應用主題, 默認外觀自動應用於同一類型的所有控件. 已命名外觀是設置了SkinID屬性的控件外觀, 已命名外觀不會自動按類型應用於控件, 而應當通過設置控件的SkinID屬性將已命名外觀顯示應用於控件. 通過創建已命名外觀, 可以為應用程序中同一控件的不同實例, 設置不同的外觀

 

創建一個簡單的默認外觀和命名外觀實例:

1. 新建任意一個項目, 添加主題文件夾, 修改默認名稱:

 

2. TextBoxSkin.skin文件代碼如下:

TextBox的默認外觀—-這行是不能有的, 否則會報錯
<asp:TextBox runat="server" Text="文本框外觀1" BackColor="#FFE0C0" BorderColor="#FFC080" Font-Size="12pt" ForeColor="#C04000" Width="149px"/>
帶有SkinID屬性的是命名外觀—-這行是不能有的, 否則會報錯
<asp:TextBox SkinId="textboxSkin" runat="server" Text="文本框外觀2" BackColor="#FFFFC0" BorderColor="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>

 任何控件的ID屬性都不可用在外觀文件中出現, 如果向外觀文件中添加了不能設置主題的屬性, 將會發生錯誤.

3. Default.aspx調用代碼如下:

        <table>
            <tr>
                <td style="width: 100px">
                    默認外觀：</td>
                <td style="width: 247px">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td style="width: 100px">
                    命名外觀：</td>
                <td style="width: 247px">
                    <asp:TextBox ID="TextBox2" runat="server" SkinID ="textboxSkin"> </asp:TextBox></td>
            </tr>
        </table>

4. 最終效果圖: