第11章 外觀與皮膚-主題_第1頁
第11章 外觀與皮膚-主題_第2頁
第11章 外觀與皮膚-主題_第3頁
第11章 外觀與皮膚-主題_第4頁
第11章 外觀與皮膚-主題_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

本章要求：第11章外觀與皮膚——主題主題的組成元素及存儲方式如何創(chuàng)建外觀文件為主題添加CSS樣式為單個頁面指定和禁用主題為應(yīng)用程序指定和禁用主題如何實現(xiàn)主題的動態(tài)加載主要內(nèi)容1.主題概述2.創(chuàng)建主題3.主題的使用4.綜合實例——設(shè)計網(wǎng)站登錄模塊外觀第11章外觀與皮膚——主題11.1.1組成元素11.1.2文件存儲和組織方式11.1主題概述主題由外觀、級聯(lián)樣式表（CSS）、圖像和其他資源組成，它是在網(wǎng)站或Web服務(wù)器上的特殊目錄中定義的，如圖11-1所示。圖11-1添加主題文件夾11.1.1組成元素在設(shè)計網(wǎng)站中的網(wǎng)頁時，有時對控件、頁面設(shè)置等內(nèi)進(jìn)行重復(fù)的設(shè)計，主題的出現(xiàn)就是將重復(fù)的工作簡單化，不僅提高開發(fā)效率，更重要的是能夠統(tǒng)一網(wǎng)站的外觀。主題由外觀、級聯(lián)樣式表（CSS）、圖像和其他資源組成。下面分別對主題的幾個組成部分進(jìn)行介紹。外觀外觀文件是主題的核心內(nèi)容，用于定義頁面中服務(wù)器控件的外觀，它包含各個控件（如Button、TextBox或Calendar控件）的屬性設(shè)置?？丶庥^設(shè)置類似于控件標(biāo)記本身，但只包含要作為主題的一部分來設(shè)置的屬性。例如，下面的代碼定義了TextBox控件的外觀：<asp:TextBoxrunat="server"BackColor="PowderBlue"ForeColor="RoyalBlue"/>控件外觀的設(shè)置與控件聲明代碼類似，在控件外觀設(shè)置中，只能包含作為主題的屬性定義。上述代碼中設(shè)置了TextBox控件的前景色和背景色屬性。如果將以上控件外觀應(yīng)用到單個Web頁上，那么頁面內(nèi)所有TextBox控件都將顯示所設(shè)置的控件外觀。級聯(lián)樣式表（CSS）主題還可以包含級聯(lián)樣式表（.css文件）。將.css文件放在主題目錄中時，樣式表會自動作為主題的一部分應(yīng)用。

說明：

主題中可以包含一個或多個級聯(lián)樣式表。圖像和其他資源主題還可以包含圖像和其他資源，如腳本文件或視頻文件等。通常，主題的資源文件與該主題的外觀文件位于同一個文件夾中，但也可以在Web應(yīng)用程序中的其他地方，如主題目錄的某子文件夾中。在Web應(yīng)用程序中，主題文件必須存儲在根目錄的App_Themes文件夾下（除全局主題之外），開發(fā)人員可以手動或者使用VisualStudio2010在網(wǎng)站的根目錄下創(chuàng)建該文件夾。如圖11-2所示為App_Themes文件夾的示意圖。圖11-2App_Themes文件夾示意圖11.1.2文件存儲和組織方式在圖11-2所示的App_Themes文件夾中包括“主題1”和“主題2”兩個文件夾，每個主題文件夾中都可以包含自己的外觀文件、CSS文件和圖像文件等。通常APP_Themes文件夾中只存儲主題文件及與主題有關(guān)的文件，盡量不存儲其他類型文件。外觀文件是主題的核心部分，每個主題文件夾下都可以包含一個或者多個外觀文件，如果主題較多，頁面內(nèi)容較復(fù)雜時，外觀文件的組織就會出現(xiàn)問題，這時就需要開發(fā)人員在開發(fā)過程中，根據(jù)實際情況對外觀文件進(jìn)行有效管理。通常根據(jù)SkinID、控件類型及文件等3種方式對外觀文件進(jìn)行組織，具體說明如表11-1所示。表11-1 3種常見的外觀文件組織方式及說明組織方式說明根據(jù)SkinID在對控件外觀設(shè)置時，將具有相同的SkinID放在同一個外觀文件中，這種方式適用于網(wǎng)站頁面較多、設(shè)置內(nèi)容復(fù)雜的情況根據(jù)控件類型組織外觀文件時，以控件類型進(jìn)行分類，這種方式適用于頁面中包含控件較少的情況根據(jù)文件組織外觀文件時，以網(wǎng)站中的頁面進(jìn)行分類，這種方式適用于網(wǎng)站中頁面較少的情況11.2創(chuàng)建主題11.2.1創(chuàng)建外觀文件11.2.2為主題添加CSS樣式11.2.1創(chuàng)建外觀文件在創(chuàng)建外觀文件之前，首先需要了解外觀文件。外觀文件分為“默認(rèn)外觀”和“已命名外觀”兩種類型。如果控件外觀沒有包含SkinID屬性，那么就是默認(rèn)外觀，此時，向頁面應(yīng)用主題，默認(rèn)外觀會自動應(yīng)用于同一類型的所有控件；而已命名外觀是設(shè)置了SkinID屬性的控件外觀，已命名外觀不會自動按類型應(yīng)用于控件，而應(yīng)該通過設(shè)置控件的SkinID屬性將其顯式應(yīng)用于控件，通過創(chuàng)建已命名外觀，可以為應(yīng)用程序中同一類型控件的不同實例設(shè)置不同的外觀?？丶庥^設(shè)置的屬性可以是簡單屬性，也可以是復(fù)雜屬性。簡單屬性是控件外觀設(shè)置中最常見的類型，如控件背景顏色（BackColor）、控件的寬度（Width）等。復(fù)雜屬性主要包括集合屬性、模板屬性和數(shù)據(jù)綁定表達(dá)式（僅限于<%#Eval%>或<%#Bind%>）等類型。說明：

外觀文件的后綴為.skin?！纠?1-1】本實例主要通過兩個TextBox控件分別介紹如何創(chuàng)建默認(rèn)外觀和命名外觀。實例運(yùn)行效果如圖11-3所示。圖11-3TextBox控件的默認(rèn)外觀和命名外觀程序開發(fā)步驟如下：（1）新建一個網(wǎng)站，在網(wǎng)站根目錄下創(chuàng)建一個App_Themes文件夾用于存儲主題。添加一個主題文件夾，命名為TextBoxSkin，在該主題下新建一個外觀文件，名稱為TextBoxSkin.skin，用來設(shè)置頁面中TextBox控件的外觀。TextBoxSkin.skin外觀文件的源代碼如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#FFFFC0"BorderColor="Olive"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>上面代碼中創(chuàng)建了兩個TextBox控件的外觀，其中沒有添加SkinID屬性的是TextBox的默認(rèn)外觀，另外一個設(shè)置了SkinID屬性的是TextBox控件的命名外觀，它的SkinID屬性為textboxSkin。注意：任何控件的ID屬性都不可以在外觀文件中出現(xiàn)，如果向外觀文件中添加了不能設(shè)置主題的屬性，將會導(dǎo)致錯誤發(fā)生。（2）在網(wǎng)站的默認(rèn)頁Default.aspx中添加兩個TextBox控件，應(yīng)用TextBoxSkin.skin中的控件外觀。首先在<%@Page%>標(biāo)簽中設(shè)置一個Theme屬性用來應(yīng)用主題。如果為控件設(shè)置默認(rèn)外觀，則不用設(shè)置控件的SkinID屬性；如果為控件設(shè)置命名外觀，則需要設(shè)置控件的SkinID屬性。Default.aspx文件的源代碼如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"

Theme="TextBoxSkin"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat=“server”></head><body><formid="form1"runat="server"><div><table><tr><tdstyle=“width:100px”><tdstyle="width:247px"><asp:TextBoxID="TextBox1"runat="server"></asp:TextBox></td></tr><tr><tdstyle=“width:100px”><tdstyle="width:247px"><asp:TextBoxID="TextBox2"runat="server"SkinID="textboxSkin"></asp:TextBox></td></tr></table></div></form></body></html>11.2.2為主題添加CSS樣式主題中的樣式表（CSS樣式）主要用于設(shè)置頁面和普通HTML控件的外觀樣式，而且，主題中的.css樣式表是自動作為主題的一部分加以應(yīng)用的。【例11-2】本實例主要對頁面背景、頁面中的普通文字、超鏈接文本以及HTML提交按鈕創(chuàng)建樣式。實例運(yùn)行效果如圖11-4所示。圖11-4為主題添加CSS樣式程序開發(fā)步驟如下：（1）新建一個ASP.NET網(wǎng)站，在網(wǎng)站根目錄下創(chuàng)建一個App_Themes文件夾，用于存儲主題。添加一個名為MyTheme的主題，在MyTheme主題下添加一個樣式表文件，默認(rèn)名稱為StyleSheet.css。頁面中共有3處被設(shè)置的樣式，一是頁面背景顏色、文本對齊方式及文本顏色；二是超鏈接文本的外觀、懸停效果；三是HTML按鈕的邊框顏色。StyleSheet.css文件的源代碼如下：body text-align:center; color:Yellow; background-color:Navy;A:link color:White; text-decoration:underline;A:visited color:White; text-decoration:underline;A:hover color:Fuchsia; text-decoration:underline; font-style:italic;Input border-color:Yellow;說明：主題中的CSS文件與普通的CSS文件沒有任何區(qū)別，但主題中包含的CSS文件主要針對頁面和普通的HTML控件進(jìn)行設(shè)置，并且主題中的CSS文件必須保存在主題文件夾中。（2）在網(wǎng)站的默認(rèn)網(wǎng)頁Default.aspx中，應(yīng)用主題中CSS文件樣式的代碼如下：<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"Theme="myTheme"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat="server"><title>為主題添加CSS樣式</title></head><body><formid="form1"runat="server"><div>

為主題添加CSS文件<table><tr><tdstyle="width:100px"><ahref="Default.aspx">明日科技</a></td><tdstyle="width:100px"><ahref="Default.aspx">明日科技</a></td></tr><tr><tdstyle="width:100px"><inputid="Button1"type="button"value="button"/></td><tdstyle="width:100px"></td></tr></table></div></form></body></html>11.3主題的使用11.3.1指定和禁用主題11.3.2動態(tài)加載主題11.3.1指定和禁用主題可以對頁或網(wǎng)站應(yīng)用主題，還可以對全局應(yīng)用主題。在網(wǎng)站級設(shè)置主題，會對站點上的所有頁和控件應(yīng)用樣式和外觀，除非對個別頁重寫主題；而在頁面級設(shè)置主題，會對該頁及其所有控件應(yīng)用樣式和外觀。當(dāng)然，既然能夠為頁面或者網(wǎng)站應(yīng)用主題，相反也可以禁用主題。本節(jié)將對如何指定和禁用主題進(jìn)行講解。1．為單個頁面指定和禁用主題為單個頁面指定主題可以將@Page指令的Theme或StyleSheetTheme屬性設(shè)置為要使用的主題的名稱，代碼如下：<%@PageTheme="ThemeName"%>或<%@PageStyleSheetTheme="ThemeName"%>注意：StyleSheetTheme屬性的工作方式與普通主題（使用Theme設(shè)置的主題）類似，不同的是，當(dāng)使用StyleSheetTheme時，控件外觀的設(shè)置可以被頁面中聲明的同一類型控件的相同屬性所代替。例如，如果使用Theme屬性指定主題，該主題指定所有的Button控件的背景都是黃色，那么即使在頁面中個別Button控件的背景設(shè)置了不同顏色，頁面中的所有Button控件的背景仍然是黃色。如果需要改變個別Button控件的背景，這種情況下就需要使用StyleSheetTheme屬性指定主題。禁用單個頁面的主題，只要將@Page指令的EnableTheming屬性設(shè)置為false即可，代碼如下：<%@PageEnableTheming="false"%>如果想要禁用控件的主題，只要將控件的EnableTheming屬性設(shè)置為false即可。以Button控件為例，代碼如下：<asp:Buttonid="Button1"runat="server"EnableTheming="false"/>2．為應(yīng)用程序指定和禁用主題為了快速的為整個網(wǎng)站的所有頁面設(shè)置相同的主題，可以通過Web.config文件中的<pages>元素進(jìn)行設(shè)置，代碼如下：<configuration><system.web><pagestheme="ThemeName"></pages></system.web><connectionStrings/>或<configuration><system.web><pagesStylesheetTheme="ThemeName"></pages></system.web><connectionStrings/>禁用整個應(yīng)用程序的主題設(shè)置，只要將<pages>配置節(jié)中的Theme屬性或者StylesheetTheme屬性的值設(shè)置為空（""）即可。11.3.2動態(tài)加載主題除了在頁面聲明和配置文件中指定主題和外觀選項之外，還可以通過編程方式動態(tài)加載主題?！纠?1-3】本實例主要通過選擇相應(yīng)的主題，實現(xiàn)對頁面動態(tài)加載主題的功能。默認(rèn)情況下，頁面應(yīng)用主題一樣式。實例運(yùn)行效果如圖11-5和圖11-6所示。圖11-5主題一圖11-6主題二程序開發(fā)步驟如下：（1）新建一個ASP.NET網(wǎng)站，添加兩個主題，分別名為Theme1和Theme2，并且每個主題包含一個外觀文件（TextBoxSkin.skin）和一個CSS文件（StyleSheet.css），用于設(shè)置頁面外觀及控件外觀。主題文件夾Theme1中的外觀文件TextBoxSkin.skin的源代碼如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#FFFFC0"BorderColor="Olive"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>主題文件夾Theme1中的級聯(lián)樣式表文件StyleSheet.css的源代碼如下：body text-align:center; color:Yellow; background-color:Navy;A:link color:White; text-decoration:underline;A:visited color:White; text-decoration:underline;A:hover color:Fuchsia; text-decoration:underline; font-style:italic;Input border-color:Yellow;主題文件夾Theme2中的外觀文件TextBoxSkin.skin的源代碼如下：<asp:TextBoxrunat="server"Text="HelloWorld!"BackColor="#C0FFC0"BorderColor="#00C000"ForeColor="#004000"Font-Size="12pt"Width="149px"/><asp:TextBoxSkinId="textboxSkin"runat="server"Text="HelloWorld!"BackColor="#00C000"BorderColor="#004000"ForeColor="#C0FFC0"BorderStyle="Dashed"Font-Size="15pt"Width="224px"/>主題文件夾Theme2中的級聯(lián)樣式表文件StyleSheet.css的源代碼如下：body text-align:center; color:#004000; background-color:Aqua;A:link color:Blue; text-decoration:underline;A:visited{ color:Blue; text-decoration:underline;A:hover color:Silver; text-decoration:underline; font-style:italic;Input border-color:#004040;}（2）在網(wǎng)站的默認(rèn)主頁Default.aspx中添加一個DropDownList控件、兩個TextBox控件、一個HTML/Button控件以及一個超鏈接。（3）DropDownList控件中包含兩個選項，一個是“主題一”，另一個是“主題二”。當(dāng)用戶選擇任意一個選項時，都會觸發(fā)DropDownList控件的SelectedIndexChanged事件，在該事件下，將選中項的主題名稱存放在URL的QueryString（即theme參數(shù)）中，并重新加載頁面。代碼如下：protectedvoidDropDownList1_SelectedIndexChanged(objectsender,EventArgse)stringurl=Request.Path+"?theme="+DropDownList1.SelectedItem.Value;Response.Redirect(url);}（4）使用Theme屬性指定頁面的主題，只能在頁面的PreInit事件發(fā)生過程中或者之前設(shè)置，這里是在PreInit事件發(fā)生過程中修改Page對象的Theme屬性值。代碼如下：voidPage_PreInit(Objectsender,EventArgse)stringtheme="Theme1";if(Request.QueryString["theme"]==null)theme="Theme1";Elsetheme=Request.QueryString["theme"];Page.Theme=theme;ListItemitem=DropDownList1.Items.FindByValue(theme);if(item!=null){item.Selected=true;}}11.4綜合實例——設(shè)計網(wǎng)站登錄模塊外觀本實例主要實現(xiàn)通過主題設(shè)置網(wǎng)站登錄模塊中服務(wù)器控件外觀的功能。實例運(yùn)行效果如圖11-7所示。圖11-7網(wǎng)站登錄模塊外觀程序開發(fā)步驟如下：（1）新建一個ASP.NET網(wǎng)站，命名為LoginSkin，默認(rèn)主頁名為Default.aspx。（2）Default.aspx頁中添加兩個TextBox控件和兩個Button控件，分別用來輸入用戶名和密碼、并執(zhí)行登錄、重置操作。（3）在網(wǎng)站根目錄下的App_Themes文件夾中創(chuàng)建一個名稱為mytheme的主題，為該主題創(chuàng)建一個外觀文件SkinFile.skin，該外觀文件用于設(shè)置登錄模塊中文本框和按鈕的外觀。SkinFile.skin外觀文件代碼如下：<asp:TextBoxrunat="server"Text=""BackColor="#FFE0C0"BorderColor="#FFC080"Font-Size="12pt"ForeColor="#C04000"Width="149px"/><asp:Buttonrunat="server"BackColor="White"BorderColor="#0066FF"BorderStyle="Solid"BorderWidth="1

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論