asp.net2.0揭秘讀書筆記三:使用主題設計網站

來源:互聯網
上載者:User
 

一、建立主題

在名為App_Themes的應用程式的檔案夾中新增檔案夾就可以建立主題。在App_Themes中添加的每一個檔案夾都代表一個主題。

在主題檔案夾中比較重要的檔案類型有皮膚檔案和CSS檔案。

 

二、在主題中添加皮膚

一個主題可能包含一個或多個皮膚檔案。可以通過皮膚來修改所有具有皮膚效果的ASP.NET控制項屬性。

例如,將Web應用程式中所有的TextBox控制項的背景顏色設為黃色並選擇dotted作為它的邊框樣式。在App_Themes檔案夾下建立Simple檔案夾,然後在Simple檔案夾中建立TextBox.skin檔案,該檔案代碼如下所示:

<asp:TextBox BackColor=”Yellow” BorderStyle=”Dotter” runat=”Server”/>

注意上面代碼裡面runat是必須的,而且不能帶ID屬性。

主題檔案夾下可以擁有一個或上百給皮膚檔案,但在一個主題檔案夾下的所有的檔案都會編譯成一個主題類。

 

上面的主題檔案夾Simple如果要在某個頁面使用其定義的主題,則使用如下代碼:

<%@ Page Language=”C#” Theme=”Simple”%>

如果該頁面的TextBox控制項屬性EnableTheming設定為false,則主題不起作用。

 

1、 建立命名皮膚

在定義命名皮膚時比定義預設皮膚增加SkinID屬性,在應用主題頁面指定控制項的SkinID屬性為命名皮膚定義的SkinID屬性名稱即可。

2、 Themes和StyleSheetThems

使用Themes指定應用某個主題時候,主題定義皮膚會覆蓋頁面中控制項自訂的皮膚。

而使用StyleSheetThems指定則不會覆蓋。

<%@ Page Language=”C#” StyleSheetThems=”Simple”%>

3、 禁用皮膚

每個控制項都包含有EnableTheming屬性,設定為false則禁用主題皮膚。

4、 在Web設定檔中註冊主題

<system.web>

<pages theme=”Simple” />

</system.web>

在啟用程式中的主題後,可以在特定頁面中通過

<%@ Page Language=”C#” EnableTheming=”false”%>

來禁用主題。

 

三、在主題中添加CSS

除了使用主題皮膚外,也可以使用CSS來控制頁面上HTML元素和ASP.NET控制項的皮膚。如果在主題檔案夾下添加了CSS檔案,則在頁面應用主題時也會自動應用CSS。

 

四、建立全域主題

此種情況本人應用較少,跳過。對於很少用到的知識而且又不是基礎性的,我的學習原則是知道有這個應用即可,待有機會真正用上時再學習也不遲。不然在技術的汪洋大海裡面永遠也不知岸在哪裡。

 

五、Live App皮膚

通過處理頁面的Page_PreInit事件可以在頁面Live App主題。在請求頁面時,這是第一個被觸發的事件。在其後的Page_Load或Page_PreRender等事件中是不能Live App主題的。

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">

 

    protected void Page_PreInit(object sender, EventArgs e)

    {

        if (Request["theme"] != null)

        {

            switch (Request["theme"])

            {

                case "Green":

                    Profile.userTheme = "GreenTheme";

                    break;

                case "Pink":

                    Profile.userTheme = "PinkTheme";

                    break;   

            }

        }

        Theme = Profile.userTheme;

    }

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Dynamic Theme</title>

</head>

<body>

    <form id="form1" runat="server">

    <div class="content">

   

    <h1>Dynamic Theme</h1>

 

    Please select a Theme:

    <ul>

    <li>

        <a href="DynamicTheme.aspx?theme=Green">Green Theme</a>

    </li>

    <li>

        <a href="DynamicTheme.aspx?theme=Pink">Pink Theme</a>

    </li>

    </ul>

   

    </div>

    </form>

</body>

</html>

 

通過頁面的Theme屬性,特定主題可以應用到此頁面。通過在PreInit事件中將主題名稱賦給Theme屬性,主題將會應用到此頁面。

當把資訊儲存到Profile對象中時,在瀏覽多個網站時這個資訊仍然會保留。所以如果使用者選擇了一次自己喜歡的主題,那麼當使用者在以後再次返回到此網站時仍然會應用此主題。

在Web.Config檔案中定義Profile

<system.web>

 

    <!--

    <pages theme="Simple3" />

    -->

 

    <profile>

      <properties>

        <add name="userTheme" />

      </properties>

    </profile>

   

 </system.web>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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.