ASP.NET的皮膚、主題和母版頁

1、第12章 ASP.NET的皮膚、主題和母版頁在Web應(yīng)用程序開發(fā)中，一個(gè)良好的Web應(yīng)用程序界面能夠讓網(wǎng)站的訪問者耳目一新，當(dāng)用戶訪問Web應(yīng)用時(shí)，網(wǎng)站的界面和布局能夠提升訪問者對(duì)網(wǎng)站的興趣和繼續(xù)瀏覽的耐心。ASP.NET提供了皮膚、主題和模板頁的功能增強(qiáng)了網(wǎng)頁布局和界面優(yōu)化的功能，這樣即可輕松的實(shí)現(xiàn)對(duì)網(wǎng)站開發(fā)中界面的控制。12.1 皮膚和主題皮膚和主題是自ASP.NET 2.0就包括的內(nèi)容，使用皮膚和主題，能夠?qū)邮胶筒季中畔⒎纸獾絾为?dú)的文件中，讓布局代碼和頁面代碼相分離。主題可以應(yīng)用到各個(gè)站點(diǎn)，當(dāng)需要更改頁面主題時(shí)，無需對(duì)每個(gè)頁面進(jìn)行更改，只需要針對(duì)主題代碼頁進(jìn)行更改即可。 CSS簡介在任

2、何Web應(yīng)用程序的開發(fā)過程中，CSS（Cascading Style Sheets，級(jí)聯(lián)樣式表）都是非常重要的頁面布局方法，而且CSS也是最高效的頁面布局方法。CSS發(fā)展于1994年10月，是為了補(bǔ)救HTML 3.2語法中的不足，但是由于當(dāng)時(shí)網(wǎng)絡(luò)的發(fā)展的不足和瀏覽器的支持率較低，直到1996年底，才正式發(fā)表了CSS 1.0規(guī)格，也正是1996年之后，瀏覽器才開始正式的支持CSS。在網(wǎng)頁布局中，CSS經(jīng)常被使用于頁面樣式布局和樣式控制。熟練的使用CSS能夠讓網(wǎng)頁布局更加的方便，在頁面維護(hù)時(shí)，也能夠減少工作量。通常CSS能夠支持三種定義方式，一是直接將樣式控制放置于單個(gè)HTML元素內(nèi)，稱為內(nèi)聯(lián)式；

3、二是在網(wǎng)頁的head部分定義樣式，稱為嵌入式；三是以擴(kuò)展名為.css文件保存樣式，稱為外聯(lián)式。這三種樣式適用于不同的場合，內(nèi)聯(lián)式適用于對(duì)單個(gè)標(biāo)簽進(jìn)行樣式控制，這樣的好處就在于開發(fā)方便，而在維護(hù)時(shí)，就需要針對(duì)每個(gè)頁面進(jìn)行修改，非常的不方便；而嵌入式可以控制一個(gè)網(wǎng)頁的多個(gè)樣式，當(dāng)需要對(duì)網(wǎng)頁樣式進(jìn)行修改時(shí)，只需要修改head標(biāo)簽中的style標(biāo)簽即可，不過這樣仍然沒有讓布局代碼和頁面代碼完全分離；而外聯(lián)式能夠?qū)⒉季执a和頁面代碼相分離，在維護(hù)過程中，能夠減少工作量。 CSS基礎(chǔ)CSS能夠通過編寫樣式控制代碼來進(jìn)行頁面布局，在編寫相應(yīng)的HTML標(biāo)簽時(shí)，可以通過Style屬性進(jìn)行CSS樣式控制，示例代碼

4、如下所示。 這是一段文字上述代碼使用內(nèi)聯(lián)式進(jìn)行樣式控制，并將屬性設(shè)置為font-size:14px，其意義就在于定義文字的大小為14px；同樣，如果需要定義多個(gè)屬性時(shí)，可以同寫在一個(gè)style屬性中，示例代碼如下所示。 這是一段文字1 這是一段文字2 這是一段文字3 This is My First CSS code 這是一段文字5上述代碼分別定義了相關(guān)屬性來控制樣式，并且都使用內(nèi)聯(lián)式定義樣式，這些CSS的屬性的意義如下所示：字體名稱屬性（font-family）：該屬性設(shè)定字體名稱，如Arial,、Tahoma,、Courier等，可以定義字體的名稱。字體大小屬性（font-size）：該屬

5、性可以設(shè)置字體的大小。字體大小的設(shè)置可以有多種方式，最常用的就是pt和px。該屬性有三個(gè)值可選：normal,、italic、oblique、normal是默認(rèn)值，italic、oblique都是斜體顯示。字體粗細(xì)屬性（font-weight）：該屬性常用值是normal和bold，normal是默認(rèn)值，bold是粗體。字體變量屬性（font-variant）：該屬性有兩個(gè)值normal和small-caps，normal是默認(rèn)值。small-caps表示字體將被顯示成大寫。字體屬性（font）：該屬性是各種字體屬性的一種快捷的綜合寫法。字體顏色(color)：該屬性用來控制字體顏色。這些屬性

6、分別定義了字體屬性，如圖12-1所示。圖12-1 CSS樣式控制用內(nèi)聯(lián)式的方法進(jìn)行樣式控制固然簡單，但是在維護(hù)過程中卻是非常的復(fù)雜和難以控制。當(dāng)需要對(duì)頁面中的布局進(jìn)行更改時(shí)，則需要對(duì)每個(gè)頁面的每個(gè)標(biāo)簽的樣式進(jìn)行更改，這樣無疑增大的工作量，當(dāng)需要對(duì)頁面進(jìn)行布局時(shí)，可以使用嵌入式的方法進(jìn)行頁面布局，示例代碼如下所示。 這是一段文字1 .font1 font-size:14px; .font2 font-size:14px; font-weight:bolder; .font3 font-size:14px; font-style:italic; .font4 font-size:14px; fon

7、t-variant:small-caps; .font5 font-size:14px; color:red; 上述代碼分別定義了5種字體樣式，這些樣式都是通過“.”號(hào)加樣式名稱定義的，在定義了字體樣式后，就可以在相應(yīng)的標(biāo)簽中使用class屬性來定義樣式，示例代碼如下所示。 這是一段文字1 這是一段文字2 這是一段文字3 This is My First CSS code 這是一段文字5其運(yùn)行后的結(jié)果依然同11-12所示，但是這樣編寫代碼在維護(hù)起來更加的方便，只需要找到head中的style標(biāo)簽，就可以對(duì)樣式進(jìn)行全局控制。雖然嵌入式能夠解決單個(gè)頁面的樣式問題，但是這樣只能針對(duì)單個(gè)頁面進(jìn)行樣式控

8、制，而在很多網(wǎng)站的開發(fā)應(yīng)用中，大量的頁面樣式基本相同，只有少數(shù)的頁面不盡相同，所以使用嵌入式還是有不足，這里就可以使用外聯(lián)式。使用外聯(lián)式，必須創(chuàng)建一個(gè).css文件后綴的文件，并在當(dāng)前頁面中添加引用，.css頁面代碼如下所示。.font1 font-size:14px;.font2 font-size:14px; font-weight:bolder;.font3 font-size:14px; font-style:italic;.font4 font-size:14px; font-variant:small-caps;.font5 font-size:14px; color:red;在.c

9、ss文件中，只需要定義如head標(biāo)簽中的style標(biāo)簽的內(nèi)容即可，其編寫方法也與內(nèi)聯(lián)式和內(nèi)嵌式相同。在編寫完成CSS文件后，需要在使用的頁面的head標(biāo)簽中添加引用，示例代碼如下所示。上述代碼添加了一個(gè)css.css文件的引用，意在告訴瀏覽器當(dāng)前頁面的一些樣式可以在css.css中找到并解析。在使用了外聯(lián)式后，當(dāng)前頁面的HTML代碼就能夠變得簡單和整潔，示例代碼如下所示。 這是一段文字1 這是一段文字1 這是一段文字2 這是一段文字3 This is My First CSS code 這是一段文字5使用外聯(lián)式能夠很好的將頁面布局的代碼和HTML代碼相分離，這樣不僅能夠讓多個(gè)頁面同時(shí)使用一個(gè)C

10、SS樣式表進(jìn)行樣式控制，同樣在維護(hù)的過程中，只需要修改相應(yīng)的CSS文件中的樣式的屬性即可實(shí)現(xiàn)該樣式在所有的頁面中都進(jìn)行更新的操作。這樣無疑是減少了工作量，提高的代碼的可維護(hù)性。可見外聯(lián)式能夠讓樣式控制既方便又靈活。 CSS常用屬性CSS不僅能夠控制字體的樣式，CSS還具有強(qiáng)大的樣式控制功能，包括背景，邊框，邊距等屬性，這些屬性能夠?yàn)榫W(wǎng)頁布局提供良好的保障，熟練的使用這些屬性能夠極大的提高Web應(yīng)用的友好度。1CSS背景屬性CSS能夠描述背景，包括背景顏色、背景圖片、背景圖片重復(fù)方向等屬性，這些屬性為頁面背景的樣式控制提供了強(qiáng)大的支持，這些屬性包括如下所示：背景顏色屬性（background-c

11、olor）：該屬性為HTML元素設(shè)定背景顏色。背景圖片屬性（background-image）：該屬性為HTML元素設(shè)定背景圖片。背景重復(fù)屬性（background-repeat）：該屬性和background-image屬性連在一起使用，決定背景圖片是否重復(fù)。如果只設(shè)置background-image屬性，沒設(shè)置background-repeat屬性，在缺省狀態(tài)下，圖片既x軸重復(fù)，又y軸重復(fù)。背景附著屬性（background-attachment）：該屬性和background-image屬性連在一起使用，決定圖片是跟隨內(nèi)容滾動(dòng)，還是固定不動(dòng)。背景位置屬性（background-posit

12、ion）：該屬性和background-image屬性連在一起使用，決定了背景圖片的最初位置。背景屬性（background）：該屬性是設(shè)置背景相關(guān)屬性的一種快捷的綜合寫法。通過這些屬性能夠?yàn)榫W(wǎng)頁背景進(jìn)行樣式控制，示例代碼如下所示。body background-color:green;上述代碼設(shè)置了網(wǎng)頁的背景顏色為綠色，如圖12-2所示。同樣，設(shè)計(jì)人員能夠使用background-image屬性設(shè)置背景圖片，并說明圖片是否重復(fù)，如圖12-3所示。 圖12-2 修改背景顏色 圖12-3 背景圖片當(dāng)使用background-image屬性設(shè)置背景圖片時(shí)，還需要使用background-repea

13、t屬性進(jìn)行循環(huán)判斷，示例代碼如下所示。body background-image:url(bg.jpg); background-repeat:repeat-x;上述代碼將bg.jpg作為背景圖片，并且以x軸重復(fù)，如果不編寫background-repeat屬性，則默認(rèn)是即x軸重復(fù)也y軸重復(fù)。上述代碼還可以簡寫，示例代碼如下所示。body background:green url(bg.jpg) repeat-x;2CSS邊框?qū)傩訡SS還能夠進(jìn)行邊框的樣式控制，使用CSS能夠靈活的控制邊框，邊框?qū)傩园ㄓ校哼吙蝻L(fēng)格屬性（border-style）：該屬性用來設(shè)定上下左右邊框的風(fēng)格。邊框?qū)挾葘傩?/p>

14、（border-width）：該屬性用來設(shè)定上下左右邊框的寬度。邊框顏色屬性（border-color）：該屬性設(shè)置邊框的顏色。邊框?qū)傩裕╞order）：該屬性是邊框?qū)傩缘囊粋€(gè)快捷的綜合寫法。通過這些屬性能夠控制邊框樣式，示例代碼如下所示。.mycss border-bottom:1px black dashed; border-top:1px black dashed; border-left:1px black dashed; border-right:1px black dashed;上述代碼分別設(shè)置了邊框的上部分、下部分、左部分、右部分的邊框?qū)傩?，來形式一個(gè)完整的邊框，同樣可以使用邊框

15、屬性來整合這些代碼，示例代碼如下所示。.mycss border:1px black dashed;3CSS邊距和間隙屬性CSS的邊距和間隙屬性能夠控制標(biāo)簽的位置，CSS的邊距屬性使用的是margin關(guān)鍵字，而間隙屬性使用的是padding關(guān)鍵字。CSS的邊距和間隙屬性雖然都是一種定位方法，但是邊距和間隙屬性定位的對(duì)象不同，也就是參照物不同，如圖12-4所示。圖12-4 邊距屬性和間隙屬性的區(qū)別邊距屬性（margin）通常是設(shè)置一個(gè)頁面中一個(gè)元素所占的空間的邊緣到相鄰的元素之間的距離，而間隙屬性（padding）通常是設(shè)置一個(gè)元素中間的內(nèi)容（或元素）到父元素之間的間隙（或距離）。對(duì)于邊距屬性（

16、margin）有以下屬性：左邊距屬性（margin-left）：該屬性用來設(shè)定左邊距的寬度。右邊距屬性（margin-right）：該屬性用來設(shè)定右邊距的寬度。上邊距屬性（margin-top）：該屬性用來設(shè)定上邊距的寬度。下邊距屬性（margin-bottom）：該屬性用來設(shè)定下邊距的寬度。邊距屬性（margin）：該屬性是設(shè)定邊距寬度的一個(gè)快捷的綜合寫法，用該屬性可以同時(shí)設(shè)定上下左右邊距屬性。對(duì)于間隙屬性，基本同邊距屬性，只是margin改為了padding，其屬性如下所示。左間隙屬性（padding-left）：該屬性用來設(shè)定左間隙的寬度。右間隙屬性（padding-right）：該屬性

17、用來設(shè)定右間隙的寬度。上間隙屬性（padding-top）：該屬性用來設(shè)定上間隙的寬度。示例如下：下間隙屬性（margin-bottom）：該屬性用來設(shè)定下間隙的寬度。示例如下：間隙屬性（padding）：該屬性是設(shè)定間隙寬度的一個(gè)快捷的綜合寫法，用該屬性可以同時(shí)設(shè)定上下左右間隙屬性。使用邊距屬性和間隙屬性能夠進(jìn)行頁面布局，其中HTML頁面代碼如下所示。 這是一段文字1 DIV1 DIV3 DIV2HTML代碼制作完畢后，就可通過css.css文件為該頁面編寫樣式，示例代碼如下所示。.div1 float:left; margin-left:10px;/和左邊元素距離為10px backgro

18、und:white url(bg.jpg) repeat-x; border:1px solid #ccc; width:300px; height:200px; padding:30px;/內(nèi)部對(duì)齊30px.div2 float:left; margin-left:20px; /和左邊元素距離為20px background:white url(bg.jpg) repeat-x; border:1px solid #ccc; width:300px; height:260px;.div3 background:white;/背景為白色頁面布局完成后，運(yùn)行圖如圖12-5所示。圖12-5 邊距屬

19、性和間隙屬性CSS不僅提供了諸如此類的強(qiáng)大布局功能，CSS還提供了很多其他的布局功能，這些功能非常的多，能夠?yàn)轫撁娌季制鸬矫阑饔?。CSS還包括盒子模式、列表屬性和偽類等高級(jí)技巧，這些技巧就不在本書中一一介紹了。 將CSS應(yīng)用在控件上CSS不僅能夠用來進(jìn)行頁面布局，同樣也可以應(yīng)用在控件中，使用CSS能夠讓控件更具美感。在空間上使用CSS基本和在頁面上使用CSS的方法相同。在控件界面的編寫中，可以使用控件的默認(rèn)屬性，例如BackColor、ForeColor、BorderStyle等，同樣也可以通過style屬性編寫控件的屬性，示例代碼如下所示。 無標(biāo)題頁 上述代碼分別編寫了4個(gè)控件，其中2個(gè)控

20、件是輸入框和按鈕控件，另外2個(gè)控件也是輸入框和按鈕控件。不同的是，另外2個(gè)控件通過style屬性進(jìn)行了樣式控制，運(yùn)行后如圖12-6所示。圖12-6 控件的樣式控制除了通過style標(biāo)簽以外，控件自己還帶有“樣式”屬性，通過配置相應(yīng)的屬性，即可為控件進(jìn)行樣式控制。其中最典型的包括日歷控件，日歷控件能夠套用默認(rèn)格式以呈現(xiàn)更加豐富的樣式，示例代碼如下所示。 無標(biāo)題頁 .style1 width: 100%; 默認(rèn)樣式 選擇樣式 上述代碼通過屬性為日歷控件進(jìn)行了樣式控制，運(yùn)行后如圖12-7所示，默認(rèn)的樣式和配置了樣式之后的差別巨大。圖12-7 屬性樣式控制通過編寫樣式能夠讓控件的呈現(xiàn)更加的豐富，讓用戶

21、體驗(yàn)更加友好，當(dāng)用戶訪問頁面時(shí)，能夠提高用戶對(duì)網(wǎng)站的滿意程度?？丶臉邮娇刂?，不僅能夠使用默認(rèn)的屬性進(jìn)行樣式控制，同樣可以使用style屬性進(jìn)行樣式控制，但是style屬性的樣式控制在很多地方不能操作，例如日歷控件中的當(dāng)前日期樣式，而通過控件的屬性的配置，卻能夠快速配置當(dāng)前日期的樣式。 主題和皮膚主題是屬性設(shè)置的集合，通過使用主題的設(shè)置能夠定義頁面和控件的樣式，然后在某個(gè)Web應(yīng)用程序中應(yīng)用到所有的頁面，以及頁面上的控件，以簡化樣式控制。主題包括一系列元素，這些元素分別是皮膚、級(jí)聯(lián)樣式表（CSS）、圖像和其他資源。主題文件的后綴名稱為.skin，創(chuàng)建主題后，主題文件通常保存在Web應(yīng)用程序的特

22、殊目錄下，創(chuàng)建主題文件如圖12-8所示。創(chuàng)建外觀文件，Visual Studio會(huì)提示是否將文件存放到特殊目錄，如圖12-9所示。 圖12-8 創(chuàng)建外觀文件 圖12-9 將主題文件存放到特殊目錄單擊【是】按鈕后主題文件會(huì)存放到App_Themes文件夾中。主題文件通常都保存在Web應(yīng)用程序的特殊目錄下，以便這些文件能夠在頁面中進(jìn)行全局訪問。在主題文件中編寫代碼可以對(duì)控件進(jìn)行主題配置，示例代碼如下所示。 上述代碼創(chuàng)建了兩種日歷控件的主題，這兩個(gè)日歷控件的主題分別為SkinID=“blue”和SkinID=“now”。值得注意的是，SkinID屬性在主題文件中是必須且惟一的，因?yàn)檫@樣才可以在相應(yīng)頁

23、面中為控件配置所需要使用的主題，示例代碼如下所示。 上述控件并沒有對(duì)控件進(jìn)行樣式控制，只是聲明了SkinID屬性，當(dāng)聲明了SkinID屬性后，系統(tǒng)會(huì)自動(dòng)在主題文件中找到相匹配的SkinID，并將主題樣式應(yīng)用到當(dāng)前控件。在使用主題的頁面，必須聲明主題，如果不聲明主題，則頁面無法找到頁面中控件需要使用的主題，示例代碼如下所示。在頁面聲明主題后，控件就能夠使用.skin文件中的主題，通過SkinID屬性，控件可以選擇主題文件中的主題。運(yùn)行如圖12-10所示。圖12-10 選擇不同的主題主題還可以包括級(jí)聯(lián)樣式表（CSS文件），將.css放置在主題目錄中，樣式表則會(huì)自動(dòng)的應(yīng)用為主題的一部分，不僅如此，主

24、題還可以包括圖片和其他資源。 頁面主題和全局主題用戶可以為每個(gè)頁面設(shè)置主題，這種情況被稱為“頁面主題”。也可以為應(yīng)用程序的每個(gè)頁面都使用主題，在每個(gè)頁面使用默認(rèn)主題，這種情況被稱為“全局主題”。頁面主題是一個(gè)主題文件夾，其中包括控件的主題、層疊樣式表、圖形文件和其他資源文件，這個(gè)文件夾是作為網(wǎng)站中的“App_Themes”文件夾和子文件夾創(chuàng)建的。每個(gè)主題都是“App_Themes”文件夾的一個(gè)子文件夾，如圖12-11所示。圖12-11 多個(gè)主題使用全局主題，可以讓應(yīng)用程序中的所有頁面都能夠使用該主題，當(dāng)維護(hù)同一個(gè)服務(wù)器上的多個(gè)網(wǎng)站時(shí)，可以使用全局主題定義應(yīng)用程序的整體外觀。當(dāng)需要使用全局主題時(shí)

25、，則可以通過修改Web.config配置文件中的配置節(jié)進(jìn)行主題的全局設(shè)定。使用全局主題和使用頁面主題的方法基本相同，它們都包括屬性設(shè)置、樣式設(shè)置和圖形。但是全局主題和頁面主題不同的是，全局主題存放在服務(wù)器上的公共文件夾中，這個(gè)文件夾通常命名為Theme。服務(wù)器上的任何Web應(yīng)用程序都能夠使用Theme文件夾中的主題。主題能夠和CSS文件一樣，進(jìn)行頁面布局和控件樣式控制，但是主題和CSS文件的描述不同，所能夠完成的功能也不同，其主要區(qū)別如下所示：主題可以定義控件的樣式，不僅能夠定義樣式屬性，還能夠定義其他樣式，包括模板。主題可以包括圖形等其他主題元素文件。主題的層疊方式與CSS文件的層疊方式不同

26、。一個(gè)頁面只能應(yīng)用與一個(gè)主題，而CSS可以被多個(gè)文件應(yīng)用。主題不僅能夠進(jìn)行控件的樣式定義，還能夠定義模板，這樣減少了相同類型的控件的模板編寫操作。但是主題也有缺點(diǎn)，一個(gè)頁面只能應(yīng)用一個(gè)主題，而無法應(yīng)用多個(gè)主題。與之相反的是，一個(gè)頁面能夠應(yīng)用多個(gè)CSS文件。主題與CSS相比，主題在樣式控制上還有很多不夠強(qiáng)大的地方，而CSS頁面布局的能力比主題更加強(qiáng)大，樣式控制更加友好。 應(yīng)用和禁用主題通常情況下，可以在網(wǎng)站目錄下的“App_Themes”文件夾下定義主題，然后在頁面中進(jìn)行主題的使用聲明，這樣在頁面中就能夠使用主題了。制作主題的過程也非常簡單，在“App_Themes”文件夾下新建一個(gè)文件夾，則這

27、個(gè)文件夾的名稱就會(huì)作為主題名稱在應(yīng)用程序中保存。同樣，開發(fā)人員能夠在文件夾中可以新增“.skin”文件，以及“.css”文件和圖形圖像文件來修飾主題，這樣一個(gè)主題就制作完畢并能夠在頁面中使用了。在很多情況下，在Web開發(fā)中需要定義全局主題，這樣Web應(yīng)用程序就能夠使用這個(gè)主題，全局主題通常放在一個(gè)特殊的目錄下，放在這個(gè)目錄下的主題能夠被服務(wù)器上的任何網(wǎng)站，以及網(wǎng)站中的任何應(yīng)用所引用。全局主題存放的目錄如下所示。Iisdefaultrootaspnet_clientsystem_webversionThemes在全局主題目錄下，可以創(chuàng)建任何主題文件，這樣在網(wǎng)站上的其他Web應(yīng)用也能夠使用全局主題

28、作為主題。在主題的編寫過程中，通常需要以下幾個(gè)步驟：添加項(xiàng)目，包括.skin、css以及其他文件。創(chuàng)建皮膚，包括對(duì)控件屬性的定義。在頁面中聲明并使用皮膚。通過以上三個(gè)步驟能夠創(chuàng)建并使用皮膚，但是值得注意的是，在創(chuàng)建皮膚文件時(shí)，必須保存為.skin文件并且主題中控件的定義必須包括SkinID屬性且不能包括ID。在皮膚中，對(duì)控件的屬性的描述同樣必須要包括runat=“server”標(biāo)記，這樣才能夠保證皮膚文件中控件的皮膚的描述是正確和可讀的，示例代碼如下所示。 在定義了控件的皮膚后，就可以在單個(gè)頁面進(jìn)行皮膚的聲明和使用，示例代碼如下所示。同樣也可以使用StyleSheetTheme屬性進(jìn)行頁面主題

29、的設(shè)置，示例代碼如下所示。如果需要使用全局主題，則需要在Web.config配置文件中定義全局主題，示例代碼如下所示。在使用主題后，對(duì)于控件的屬性的編寫是沒有任何效果的，示例代碼如下所示。 上述代碼編寫了一個(gè)控件的屬性，其中某些屬性被主題覆蓋。簡單的說，局部的設(shè)置將會(huì)服從全局的設(shè)置，即頁面上的控件已經(jīng)具備自己的屬性設(shè)置，但是當(dāng)指定了SkinID屬性后，部分屬性將會(huì)服從全局屬性設(shè)置，如圖12-12和圖12-13所示。 圖12-12 本地屬性和全局屬性 圖12-13 運(yùn)行后的控件樣式雖然本地屬性設(shè)置為另一種樣式，但是運(yùn)行后的控件樣式卻不是本地屬性配置的樣式，因?yàn)槠渲械哪承傩砸呀?jīng)被主題更改。在設(shè)置

30、頁面或者全局主題的StyleSheetTheme屬性時(shí)，將主題作為樣式表主題應(yīng)用的話，本地頁的設(shè)置將優(yōu)先于主題中定義的設(shè)置，即局部設(shè)置將會(huì)覆蓋全局設(shè)置。對(duì)于主題而言，如果本地主題，以及全局主題都存在時(shí)，這種情況如控件本身的屬性和使用的主題屬性都存在一樣，本身的屬性將會(huì)被全局屬性更改，全局屬性中沒有的屬性將繼續(xù)保留。而相對(duì)與CSS文件而言，如果本地CSS描述和全局CSS描述都存在，包括控件本身的CSS描述和內(nèi)嵌式CSS文件的描述都一樣時(shí)，相反的，本地CSS描述會(huì)替代全局的CSS描述。對(duì)于有些情況，主題會(huì)重寫也和控件外觀的本地設(shè)置。當(dāng)控件或頁面已經(jīng)定義了外觀，而又不希望全局主題將本地主題進(jìn)行重寫和

31、覆蓋，可以禁用主題的覆蓋行為。對(duì)于頁面，可以用聲明的方法進(jìn)行禁用，示例代碼如下所示。 當(dāng)頁面需要某個(gè)主題的屬性描述，而又希望單個(gè)控件不被主題描述時(shí)，同樣可以通過EnableTheming屬性進(jìn)行主題禁止，示例代碼如下所示。 這樣就可以保證該控件不會(huì)被主題描述和控制，而頁面和頁面的其他元素可以使用主題描述中的相應(yīng)的屬性。 用編程的方法控制主題當(dāng)主題被制作完成后，很多場合用戶希望能夠自行更改主題，這種方式非常的實(shí)用，通過編程手段，只需要更改StyleSheetTheme屬性就能夠?qū)撁娴闹黝}進(jìn)行更改。通過編程的方法不僅能夠更改頁面的主題，同樣可以更改控件的主題，達(dá)到動(dòng)態(tài)更改控件主題的效果。當(dāng)需要更

32、改頁面的主題時(shí)，可以更改頁面的StyleSheetTheme屬性即可實(shí)現(xiàn)頁面主題更改的效果，StyleSheetTheme屬性的更改代碼只能編寫在PreInit事件中，示例代碼如下所示。 protected void Page_PreInit(object sender, EventArgs e) switch (Request.QueryStringtheme)/獲取傳遞的參數(shù) case MyTheme1:/判斷主題 Page.Theme = MyTheme1; break;/更改主題 case MyTheme2:/判斷主題 Page.Theme = MyTheme2; break;/更改主

33、題 上述代碼則通過更改Page的StyleSheetTheme屬性對(duì)頁面的主題進(jìn)行更改，在編程的過程中，同樣可以使用更加復(fù)雜的編程方法實(shí)現(xiàn)主題的更改。在更改頁面的代碼中，必須首先重寫StyleSheetTheme屬性，然后通過其中的get訪問器返回樣式表的主題名稱，示例代碼如下所示。 public override String StyleSheetTheme get/獲取主題 return MyTheme1;/返回主題名稱 對(duì)于控件，可以通過更改控件的SkinID屬性來對(duì)控件的主題進(jìn)行更改，示例代碼如下所示。 protected void Page_PreInit(object sender

34、, EventArgs e) Calendar3.SkinID = blue;/更改SkinID屬性 上述代碼通過修改控件的SkinID屬性修改控件的主題，在控件中，SkinID屬性是能夠?qū)⒖丶c主題進(jìn)行聯(lián)系的關(guān)鍵屬性。12.2 母版頁在Web應(yīng)用開發(fā)過程中，經(jīng)常會(huì)遇到Web應(yīng)用程序中的很多頁面的布局都相同這種情況。在ASP.NET中，可以使用CSS和主題減少多頁面的布局問起，但是CSS和主題在很多情況下還無法勝任多頁面的開發(fā)，這時(shí)就需要使用母版頁。 母版頁基礎(chǔ)開發(fā)人員能夠使用母版頁定義某一組頁面的呈現(xiàn)樣式，甚至能夠定義整個(gè)網(wǎng)站的頁面的呈現(xiàn)樣式，Visual Studio 2008能夠輕松的創(chuàng)

35、建母版頁文件，對(duì)網(wǎng)站的全部或部分頁面進(jìn)行樣式控制。單擊【添加項(xiàng)】選項(xiàng)，選擇【母版頁】項(xiàng)目，即可向項(xiàng)目中添加一個(gè)母版頁，如圖12-14所示。圖12-14 添加母版頁母版頁的后綴名為.master。母版頁同Web窗體在結(jié)構(gòu)上基本相同，與Web窗體不同的是，母版頁的聲明方法不是使用Page的方法聲明，而是使用Master關(guān)鍵字進(jìn)行聲明，示例代碼如下所示。母版頁的結(jié)構(gòu)基本同Web窗體，但是母版頁通常情況下是用來進(jìn)行頁面布局。當(dāng)Web應(yīng)用程序中的很多頁面的布局都相同，甚至中間需要使用的用戶控件、自定義控件、樣式表都相同時(shí)，則可以在一個(gè)母版頁中定義和編碼，對(duì)一組頁面進(jìn)行樣式控制。編寫母版頁的方法非常簡單，

36、只需要像編寫HTML頁面一樣就可以編寫母版頁。在編寫網(wǎng)站頁面時(shí)，首先需要確定通用的結(jié)構(gòu)，并且確定需要使用控件或CSS頁面，如圖12-15所示。圖12-15 母版頁頁面布局在確定了母版頁布局的通用結(jié)構(gòu)后，就可以編寫母版頁的結(jié)構(gòu)了。這里使用Table進(jìn)行布局，在布局前，首選需要定義若干樣式，示例代碼如下所示。 body font-size:12px; text-align:center; .style1 width: 100%; height: 129px; .style2 background:url(images/bg.jpg) repeat-x; height: 111px; text-al

37、ign: center; font-size:18px; font-weight:bolder; .style3 background:url(images/bg.jpg) repeat-x; height: 94px; .style4 background:url(images/bg2.jpg) repeat-x; width: 129px; .style5 background:url(images/bg2.jpg) repeat-x; width: 476px; .style6 background:url(images/bg2.jpg) repeat-x; 這些樣式規(guī)定了一些基本樣式，

38、用來Table以及頁面的布局，整頁布局代碼如下所示。 標(biāo)題 左側(cè) 中間 右側(cè) 底部說明 上述代碼對(duì)頁面進(jìn)行了布局，并定位了頭部、中部和底部三個(gè)部分，而中部又分為左側(cè)、中間和右側(cè)三個(gè)部分，布局完成后效果如圖12-16所示。圖12-16 母版頁最終布局效果通過編寫HTML，就能夠進(jìn)行母版頁的布局，不僅如此，母版頁還能夠嵌入控件、用戶控件和自定義控件，方便母版頁中通用模塊的編寫。母版頁提供一個(gè)對(duì)象模型，其他頁面能夠通過母版頁快速的進(jìn)行樣式控制和布局，使用母版頁具有以下好處。母版頁可以集中的處理頁面的通用功能，包括布局和控件定義。使用母版頁可以定義通用性的功能，包括頁面中某些模塊的定義，這些模塊通常由

39、用戶控件和自定義控件實(shí)現(xiàn)。母版頁允許控制占位符控件的呈現(xiàn)方式。母版頁能夠?yàn)槠渌撁嫣峁?duì)項(xiàng)目型，其他頁面能夠使用母版頁進(jìn)行二次開發(fā)。母版頁能夠?qū)㈨撁娌季旨械揭粋€(gè)或若干個(gè)頁面中，這樣無需在其他頁面中過多的關(guān)心頁面布局。 內(nèi)容窗體使用母版頁的頁面被稱作內(nèi)容窗體（也稱內(nèi)容頁）。內(nèi)容窗體不是專門負(fù)責(zé)設(shè)計(jì)的頁面，它們只需要關(guān)注一般頁面的布局、事件以及窗體結(jié)構(gòu)即可，所以內(nèi)容窗體無需過多的考慮頁面布局。當(dāng)用戶請(qǐng)求內(nèi)容窗體時(shí)，內(nèi)容窗體將與母版頁合并并且將母版頁的布局和內(nèi)容窗體的布局組合在一起呈現(xiàn)到瀏覽器。創(chuàng)建內(nèi)容窗體的方法基本同Web窗體一樣，在Visual Studio 2005中創(chuàng)建Web窗體時(shí)，必須勾

40、選【選擇母版頁】選項(xiàng)，而在Visual Studio 2008中，有單獨(dú)的內(nèi)容頁可以選擇，如圖12-17所示。單擊【添加】按鈕，系統(tǒng)會(huì)提示選擇相應(yīng)的母版頁，選擇相應(yīng)的母版頁后，單擊【確定】按鈕即可創(chuàng)建內(nèi)容窗體，如圖12-18所示。 圖12-17 創(chuàng)建Web內(nèi)容窗體 圖12-18 選擇母版頁選擇母版頁后，系統(tǒng)會(huì)自動(dòng)將母版頁和內(nèi)容整合在一起，如圖12-19所示。圖12-19 使用母版頁在使用母版頁之后，內(nèi)容窗體不能夠修改母版頁中的內(nèi)容，也無法向母版頁中新增HTML標(biāo)簽，在編寫母版頁時(shí)，必須使用容器讓相應(yīng)的位置能夠在內(nèi)容頁中被填充。例如圖12-16，按照其方法編寫母版頁，內(nèi)容窗體不能夠?qū)ζ渲械奈淖诌M(jìn)

41、行修改，也無法在母版頁中插入文字。在編寫母版頁，如果需要在某一區(qū)域能夠允許內(nèi)容窗體能夠新增內(nèi)容，就必須使用ContentPlaceHolder控件作占位，在母版頁中，其代碼如下所示。 在母版頁中無需編輯此控件，當(dāng)內(nèi)容窗體使用了相應(yīng)的母版頁后，則能夠通過編輯此控件并向此占位控件中添加內(nèi)容或控件。單擊ContentPlaceHolder控件，并單擊Content任務(wù)，可在占位控件中增加控件或自定義內(nèi)容，如圖12-20所示。圖12-20 編輯內(nèi)容窗體編輯完成后，整個(gè)內(nèi)容窗體就編寫完畢了。內(nèi)容窗體無需進(jìn)行頁面布局，也無法進(jìn)行頁面布局，否則會(huì)拋出異常。在內(nèi)容窗體中，只需要按照母版頁中的布局進(jìn)行控件的拖放

42、即可。 母版頁的運(yùn)行方法在使用母版頁時(shí)，母版頁和內(nèi)容頁通常是一起協(xié)調(diào)運(yùn)作的，母版頁和內(nèi)容也協(xié)調(diào)運(yùn)作圖如12-21所示。圖12-21 母版頁和內(nèi)容窗體在母版頁運(yùn)行后，內(nèi)容窗體中ContentPlaceHolder控件會(huì)被映射到母版頁的ContentPlaceHolder控件，并向母版頁中的ContentPlaceHolder控件填充自定義控件。運(yùn)行后，母版頁和內(nèi)容窗體將會(huì)整合形成結(jié)果頁面，然后呈現(xiàn)給用戶的瀏覽器。母版頁運(yùn)行的具體步驟為：通過URL指令加載內(nèi)容頁面。頁面指令被處理。將更新過內(nèi)容的母版頁合并到內(nèi)容頁面的控件樹里。單獨(dú)的ContentPlaceHolder控件的內(nèi)容被合并到相對(duì)的母版頁

43、中。合并的頁面被加載并顯示給瀏覽器。從瀏覽者的角度來說，母版頁和內(nèi)容窗體的運(yùn)行并沒有什么本質(zhì)的區(qū)別，因?yàn)樵谶\(yùn)行的過程中，其URL是惟一的。而從開發(fā)人員的角度來說，實(shí)現(xiàn)的方法不同，母版頁和內(nèi)容窗體分別是單獨(dú)而離散的頁面，分別進(jìn)行各自的工作，在運(yùn)行后合并生成相應(yīng)的結(jié)果頁面呈現(xiàn)給用戶。在內(nèi)容頁中使用，母版頁無需存放在特殊的目錄中，只需放在普通的目錄文件中即可，內(nèi)容頁需要使用母版頁時(shí)，只需要使用MasterPageFile屬性即可，示例代碼如下所示。使用MasterPageFile屬性能夠聲明母版，Page指令中的MasterPageFile屬性會(huì)解析為一個(gè).master頁面，在運(yùn)行時(shí)，就能夠?qū)⒛赴骓?/p>

44、和內(nèi)容窗體合并為一個(gè)Web窗體并呈現(xiàn)給瀏覽器。 嵌套母版頁母版頁與母版頁之間能夠嵌套運(yùn)行，讓一個(gè)母版頁作為另一個(gè)母版頁的子母版，能夠方便的將頁面進(jìn)行模塊化。當(dāng)編寫Web應(yīng)用時(shí)，可以使用母版頁進(jìn)行較大型的框架布局，對(duì)一個(gè)頁面進(jìn)行整體的樣式控制。同樣可是使用母版頁進(jìn)行嵌套，對(duì)細(xì)節(jié)的地方進(jìn)行細(xì)分。母版頁的結(jié)構(gòu)和Web窗體的結(jié)構(gòu)十分相似，與任何母版頁一樣，母版頁也可以包含母版頁，被包含的母版頁被稱為子母版。子母版通常會(huì)包含一些控件，這些控件將映射到父母版上的內(nèi)容占位符。在MyMaster頁面中，可以編寫相應(yīng)的代碼進(jìn)行嵌套，示例代碼如下所示。 Master母版頁: 上述代碼創(chuàng)建了MyMaster母版頁，

45、并使用了Content控件進(jìn)行占位控件的編寫。右擊當(dāng)前項(xiàng)目并單擊【新建項(xiàng)】選項(xiàng)，創(chuàng)建一個(gè)Child.master母版頁并為母版頁編寫相應(yīng)的HTML代碼，示例代碼如下所示。子母版頁:上述代碼在子母版頁中創(chuàng)建了一個(gè)文本框。在父母版頁中則可以使用此母版頁，使用方法同樣是使用MasterPageFile屬性進(jìn)行聲明。在Child子母版中已經(jīng)聲明了MyMaster母版頁，在使用和加載Child頁面時(shí)，可以使用MasterPageFile=/MyMaster.Master語法對(duì)子母版頁的母版進(jìn)行聲明，在上述代碼中Child母版頁使用了MyMaster母版頁，并使用ContentPlaceHolderID=

46、ContentPlaceHolder4屬性對(duì)該控件進(jìn)行占位控件的填充，如圖12-22所示。圖12-22 嵌套母版頁母版頁嵌套完畢后，使用母版頁的頁面也應(yīng)該進(jìn)行相應(yīng)的修改，在使用嵌套后，子母版頁應(yīng)該被聲明到需要使用的頁面，而不是母頁面。簡單的說，需要使用的頁面應(yīng)該聲明的是子頁面，而不是母母版頁，在這里應(yīng)該為Child.master，示例代碼如下所示。上述代碼聲明了該頁的母版頁為Child.master，運(yùn)行結(jié)果如圖12-23所示。圖12-23 嵌套母版頁嵌套母版頁之后，使用子母版頁的頁面將不能直接進(jìn)行頁面編輯，在Visual Studio 2008中，使用子母版頁的頁面將顯示為空白，但并不表示頁

47、面顯示將為空白。12.3 Microsoft Expression 2Microsoft Expression 2是微軟推出的一套專業(yè)的設(shè)計(jì)軟件。Microsoft Expression 2 Studio包括Expression Web 2，Expression Blend 2，Expression Design 2，Expression Media 2和Expression Encoder 2，它們可以協(xié)調(diào)的同Visual Studio 2008一起協(xié)同合作，并支持Vista和Window Server 2008操作系統(tǒng)。 Microsoft Expression 2簡介Microsoft

48、Expression 2是微軟推出的強(qiáng)大的設(shè)計(jì)軟件，不僅能夠設(shè)計(jì)和進(jìn)行網(wǎng)頁布局，同時(shí)還支持XAML語言，能夠進(jìn)行Silverlight設(shè)計(jì)，WPF設(shè)計(jì)，Microsoft Expression 2 Studio包括的軟件如下所示：Microsoft Expression Web：網(wǎng)頁設(shè)計(jì)工具，用于網(wǎng)頁設(shè)計(jì)、頁面布局。Microsoft Expression Blend：交互設(shè)計(jì)工具，可以用于Silverlight、WPF的設(shè)計(jì)和開發(fā)。Microsoft Expression Design：平面圖形設(shè)計(jì)工具，可以對(duì)圖像進(jìn)行編輯和設(shè)計(jì)。Microsoft Expression Media：多媒體編

49、輯工具，可以對(duì)多媒體進(jìn)行編輯、剪切和設(shè)計(jì)。Expression Encoder：音頻編輯工具，可以對(duì)音頻進(jìn)行編輯、剪切和設(shè)計(jì)。Microsoft Expression 2包含的軟件為微軟的產(chǎn)品開發(fā)和設(shè)計(jì)做出了強(qiáng)有力的保障，其中對(duì)于ASP.NET開發(fā)人員最常用的就包括Microsoft Expression Web、Microsoft Expression Blend和Microsoft Expression Design。Microsoft Expression Web提供了對(duì)ASP.NET中控件的支持，這彌補(bǔ)了傳統(tǒng)的Dreamware系列對(duì)ASP.NET的控件不支持，造成ASP.NET頁面設(shè)

50、計(jì)困難，Microsoft Expression Web還提供了頁面的調(diào)試環(huán)境，通過Microsoft Expression Web也能夠進(jìn)行基本的網(wǎng)頁調(diào)試。在開源的影響力之下，Microsoft Expression Web還支持php的腳本編寫。Microsoft Expression Blend提供了對(duì).NET中Silverlight，以及WPF的設(shè)計(jì)和開發(fā)的支持。在Visual Studio 2005甚至是Visual Studio 2008中，Silverlight以及WPF都不能很好的進(jìn)行設(shè)計(jì)和可視化開發(fā)，因?yàn)镾ilverlight和WPF都是較新的技術(shù)，而Microsoft Ex

51、pression Blend提供了對(duì)Silverlight和WPF的開發(fā)支持。Microsoft Expression Design用于平面設(shè)計(jì)，Microsoft Expression Design不僅能夠像傳統(tǒng)的Photoshop一樣設(shè)計(jì)和開發(fā)JPG、GIF格式的圖片，也能夠?yàn)镾ilverlight和WPF應(yīng)用程序開發(fā)資源文件。這種資源文件可以是不規(guī)則的窗體，也可以是一段動(dòng)畫，Microsoft Expression Design能夠保存為資源文件所需要的文件類型。Microsoft Expression 2是微軟推出的設(shè)計(jì)軟件，在傳統(tǒng)的開發(fā)過程中，雖然Visual Studio提供了可視

52、化編程的解決方案，但是Visual Studio中可視化開發(fā)的效率依舊不高，對(duì)于計(jì)算機(jī)配置不是很高的用戶更是如此。而另一方面，在開發(fā)過程中，開發(fā)小組很難將開發(fā)人員和設(shè)計(jì)人員完全的分離開，而使用Microsoft Expression 2，可以使設(shè)計(jì)人員專注于設(shè)計(jì)，使開發(fā)人員專注于代碼的編寫。 安裝Microsoft Expression 2Microsoft Expression 2并不是免費(fèi)的軟件，但是開發(fā)人員可以在微軟的官方主頁上下載試用版本下載地址為，其中Expression Studio 2包括了所有的軟件包，如果無需其他軟件包，可以選擇單獨(dú)的軟件包進(jìn)行下載。下載完成后，單擊msi安裝

53、程序，即可安裝Microsoft Expression 2。系統(tǒng)會(huì)提取文件，當(dāng)文件提取完畢后，即會(huì)加載進(jìn)入安裝界面，如圖12-24所示。等待安裝程序初始化，安裝程序會(huì)進(jìn)入下一步，提示要求輸入密鑰并進(jìn)行激活，安裝程序會(huì)確定Expression Studio 2的安裝狀態(tài)，并繼續(xù)安裝。圖12-25所示。 圖12-24 安裝Microsoft Expression 2 圖12-25 確定Microsoft Expression 2安裝狀態(tài)按著安裝程序的提示，基本上只需要單擊下一步就能夠?qū)icrosoft Expression 2自行安裝到本地計(jì)算機(jī)，Microsoft Expression 2安裝

54、完畢后，就能夠選擇相應(yīng)的應(yīng)用程序做相應(yīng)的開發(fā)。Microsoft Expression 2的界面為黑色界面，看上去比較清新，但可能傳統(tǒng)的用戶很難適應(yīng)這樣的布局，如圖12-26所示。圖12-26 Microsoft Expression Web12.4 使用Microsoft Expression Web 2制作頁面Microsoft Expression Web 2是屬于Microsoft Expression 2 Studio軟件包中對(duì)ASP.NET開發(fā)人員來說最為強(qiáng)大的開發(fā)工具，Microsoft Expression Web 2不僅提供了基本的網(wǎng)頁布局功能，還支持ASP.NET中控件的拖

55、動(dòng)。 創(chuàng)建ASPX頁面通過Microsoft Expression Web 2能夠快速的創(chuàng)建ASPX頁面。在菜單欄中單擊【文件】選項(xiàng)，單擊【新建】按鈕，可以選擇創(chuàng)建相應(yīng)的項(xiàng)目。Microsoft Expression Web 2支持新建項(xiàng)目和新建網(wǎng)站，新建項(xiàng)目是為現(xiàn)有項(xiàng)目添加文件，也可以通過新建網(wǎng)站來新建另一個(gè)項(xiàng)目，在這里建立一個(gè)文件即可。單擊【新建】按鈕，系統(tǒng)會(huì)彈出對(duì)話框，用于創(chuàng)建新項(xiàng)目，如圖12-27所示。Microsoft Expression Web 2不僅支持創(chuàng)建ASPX頁面，也能夠創(chuàng)建母版頁、XML、動(dòng)態(tài)Web模板，甚至能夠支持創(chuàng)建PHP頁面。這里可以選擇一個(gè)ASPX頁面進(jìn)行創(chuàng)建，

56、單擊確定，創(chuàng)建一個(gè)ASPX頁面。創(chuàng)建ASPX頁面后，在Microsoft Expression Web 2的工具箱中，就可以看到Microsoft Expression Web 2為開發(fā)人員提供了HTML控件和ASPX控件，如圖12-28所示。 圖12-27 新建文件 圖12-28 HTML控件和ASP.NET控件設(shè)計(jì)人員能夠?qū)㈨撁娌季诌M(jìn)行設(shè)計(jì)，同時(shí)設(shè)計(jì)人員也能夠拖動(dòng)ASP.NET控件到頁面布局中，這樣就極大的方便了設(shè)計(jì)人員在前臺(tái)界面的設(shè)計(jì)開發(fā)。而編程人員只需獲取相應(yīng)的頁面，然后對(duì)頁面進(jìn)行邏輯代碼的編寫，即可組成一個(gè)完整的ASPX頁面。Microsoft Expression Web 2不僅能夠支持設(shè)計(jì)人員對(duì)現(xiàn)有的頁面進(jìn)行控件的拖放，還能夠支持進(jìn)行數(shù)據(jù)源配置和數(shù)據(jù)綁定，如圖12-29所示。圖12-29 配置數(shù)據(jù)源在可視化開發(fā)中，Microsoft Expression Web 2的效率比Visual S