ASP.NET 2.0網站換膚實現過程 __.net

來源:互聯網
上載者:User

一、簡介:

 

  利用Themes我們可以很容易的更改控制項、頁面的風格,而不需要修改我們的代碼和分頁檔。Themes檔案被單獨的放在1App_Themes檔案夾下面,與你的程式是完全分開的。

 

  二、怎麼使用ThemesSkins

 

  先看個非常簡單的執行個體:

 

App_Themes/default/1.skin檔案代碼:

 

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />   

  default.aspx:檔案代碼:

 

<%@ Page Language="C#" Theme="default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page with Example Theme Applied</title> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" /><br /> </form> </body> </html>   

 

  可以看到我們在default.aspx並沒有寫如何的控制style的代碼,但運行取發現label上的字都變成了粗體紅色了,這就是1個最基本的theme例子。

 

  App_Themes檔案夾:

 

  App_Themes檔案夾位於程式的根目錄下,App_Themes下必須是Theme名稱的子檔案夾,子檔案夾中可以包含多個.skin.css檔案。下圖中建立2Theme,名稱分別為defaultdefault2

 

 

 

  使用themes

 

  1、在1個頁面中應用Theme:

 

  如果想在某1個頁面中應用Theme,直接在aspx檔案中修改<%@ Page Theme="..." %>,比如你想這個頁面應用default2 theme,設定<%@ Page Theme="default2" %>OK

 

  2、在所有頁面應用同1Theme:

 

  如果要在所有頁面上使用相同的Theme,在web.config中的<system.web>節點下加上句<pages theme="..."/>

 

  3、讓控制項不應用Theme:

 

  第1個例子中我們看到了2Label的風格都變了,就是說.skin檔案中的風格在頁面上所有Label都起作用了。但有時我們希望某1Label不應用.skin中的風格,這時你只需設定LabelEnableTheming屬性為false的時候就可以了。

 

  也許你還想不同的label顯示不同的風格,你只需設定labelSkinID屬性就可以,見下面的執行個體:

 

App_Themes/default/1.skin

 

<asp:label runat="server" font-bold="true" forecolor="Red" /> <asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />   

deafult.aspx

 

<%@ Page Language="C#" Theme="default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page with Example Theme Applied</title> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" /><br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> </form> </body> </html>   

  運行後就會發現2label顯示的風格不一樣了。

 

  4、其他方法:

 

  前面已經說了在aspx檔案頭使用 <%@ Page Theme="..." %>來使用theme,而用這個方法應用theme中的風格將會覆蓋你寫在aspx中的控制項屬性style。比如:

 

  App_Themes/default/1.skin

 

<asp:Label Font-Bold="true" ForeColor="Red" runat="server" />   

  default.aspx

 

<%@ Page Language="C#" Theme="default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> </head> <body> <form id="form1" runat="server"> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /> </form> </body> </html>   

  運行結果,所有的labelforecolor都為red

 

  而使用<%@ Page StyleSheetTheme="..." %>應用theme就不會覆蓋你在aspx檔案中寫的屬性style

 

  控制項應用style屬性的順序如下:

 

  aStyleSheetTheme引用的風格

 

  b、代碼設定的控制項屬性

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.