ASPNET程序設(shè)計(jì)教程第7章-網(wǎng)站設(shè)計(jì)課件

1、第7章 網(wǎng)站設(shè)計(jì)7.1 母版頁(yè)7.2 樣式表7.3 主題和皮膚7.4 網(wǎng)站導(dǎo)航7.1 母版頁(yè)7.1.1 母版頁(yè)和內(nèi)容頁(yè)概述母版頁(yè)代碼和普通的.aspx文件代碼格式很相近，最關(guān)鍵的不同是母版頁(yè)由特殊的 Master指令識(shí)別，該指令替換了用于普通.aspx頁(yè)的 Page指令，格式如下： 可以看出，其實(shí)母版頁(yè)和普通的.aspx頁(yè)面非常類似，第一行指定了母版頁(yè)的以下幾個(gè)屬性。(1) Master Language：使用的編程語(yǔ)言。(2) CodeFile：母版頁(yè)的后臺(tái)代碼。(3) Inherits：母版頁(yè)對(duì)應(yīng)的一個(gè)類。7.1.1 母版頁(yè)和內(nèi)容頁(yè)概述每個(gè)網(wǎng)頁(yè)的共同部分都可以在母版頁(yè)設(shè)計(jì)中體現(xiàn)出來(lái)。常見的

2、母版頁(yè)代碼結(jié)構(gòu)如下：Master page title 7.1.1 母版頁(yè)和內(nèi)容頁(yè)概述在內(nèi)容頁(yè)中，需要?jiǎng)?chuàng)建兩個(gè)Content控件，一個(gè)映射到Main，另一個(gè)則映射到Footer。當(dāng)客戶端請(qǐng)求內(nèi)容頁(yè)時(shí)，它的內(nèi)容Content與母版頁(yè)的一個(gè)副本合并，把定義在Content中的特定內(nèi)容放到Master頁(yè)面的指定占位符處，然后把整個(gè)包傳遞給瀏覽器，如圖7.1所示。7.1.2 創(chuàng)建母版頁(yè)母版頁(yè)具有下面的優(yōu)點(diǎn)：(1) 使用母版頁(yè)可以集中處理頁(yè)的通用功能，以便可以只在一個(gè)位置上進(jìn)行更新。(2) 使用母版頁(yè)可以方便地創(chuàng)建一組控件和代碼，并將結(jié)果應(yīng)用于一組頁(yè)。例如，可以在母版頁(yè)上使用控件來(lái)創(chuàng)建一個(gè)應(yīng)用于所有頁(yè)的

3、菜單。(3) 通過(guò)允許控制占位符控件的呈現(xiàn)方式，母版頁(yè)可以在細(xì)節(jié)上控制最終頁(yè)的布局。(4) 母版頁(yè)提供一個(gè)對(duì)象模型，使用該對(duì)象模型可以從各個(gè)內(nèi)容頁(yè)自定義母版頁(yè)。7.1.2 創(chuàng)建母版頁(yè)創(chuàng)建母版頁(yè)的方法是，在VS2008的“解決方案資源管理器”中右鍵單擊網(wǎng)站，選擇“添加新項(xiàng)”，在對(duì)話框中選擇“母版頁(yè)”模板。默認(rèn)情況下，新建的Master頁(yè)面的默認(rèn)名稱是MasterPage.master，它位于站點(diǎn)的根目錄，如圖7.2所示。7.1.2 創(chuàng)建母版頁(yè)以.master為后綴的文件都是母版頁(yè)，Master頁(yè)面包括3部分：(1) 第一部分是任何提交的頁(yè)面都需要的一些基本頁(yè)面標(biāo)記（例如，Master的DOCTY

4、PE、xmlns、html和head標(biāo)記）。這些內(nèi)容在Mater頁(yè)面中只輸入一次以減少重復(fù)。服務(wù)器能在DOCTYPE和xmlns引用的位置查找頁(yè)面上使用的標(biāo)記定義。這些標(biāo)記將不在Content頁(yè)面中出現(xiàn)。母版頁(yè)代碼的文件代碼頭聲明是，而不是普通.aspx文件頭聲明的。母版頁(yè) 7.1.2 創(chuàng)建母版頁(yè)(2) Master頁(yè)面的第二部分是在所有頁(yè)面上放置的要運(yùn)行的腳本代碼。例如：Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) End Sub7.1.2 創(chuàng)建母版頁(yè)(3) Master頁(yè)面包含一些用

5、于布局的HTML及多個(gè)ContentPlaceHolder控件，用于在母版中占位，控件本身不包含具體內(nèi)容，具體的內(nèi)容放置在內(nèi)容頁(yè)中。兩者通過(guò)ContentPlaceHolder控件的ID屬性綁定。例如： . . 版權(quán)所有copyright 200 創(chuàng)建母版頁(yè)【例7.1】創(chuàng)建母版頁(yè)。(1) 打開VS2008，新建網(wǎng)站W(wǎng)ebSite7。(2) 在“解決方案資源管理器”中，右擊站點(diǎn)，選擇“添加新項(xiàng)”，在“添加新項(xiàng)”對(duì)話框中選擇“母版頁(yè)”模板，命名為“MyMaster1.master”。(3) 打開MyMaster1.master，可以看到里面默認(rèn)的已經(jīng)有一個(gè)ContentPlaceHo

6、lder控件，默認(rèn)ID為ContentPlaceHolder1。像編輯普通網(wǎng)頁(yè)那樣，在“設(shè)計(jì)”視圖下，拖放控件設(shè)計(jì)網(wǎng)頁(yè)，如圖7.3所示。7.1.3 創(chuàng)建內(nèi)容頁(yè)創(chuàng)建內(nèi)容頁(yè)有兩種方法：(1) 在所要繼承的母版頁(yè)任意位置單擊右鍵，選擇“添加內(nèi)容頁(yè)”，如圖7.4所示。就會(huì)出現(xiàn)默認(rèn)的以“Default+序號(hào)”命名的內(nèi)容頁(yè)的.aspx文件。7.1.3 創(chuàng)建內(nèi)容頁(yè)(2) 在“解決方案資源管理器”中，右擊站點(diǎn)名稱，新建“添加新項(xiàng)”選項(xiàng)，在彈出的“添加新項(xiàng)”對(duì)話框中選擇“Web窗體”模板，并選中“選擇母版頁(yè)”復(fù)選框，如圖7.5所示。然后在“選擇母版頁(yè)”對(duì)話框中選擇相應(yīng)的母版頁(yè)，如圖7.6所示。7.1.3 創(chuàng)建內(nèi)

7、容頁(yè)【例7.2】創(chuàng)建例7.1中所創(chuàng)建的MyMaster1.master的內(nèi)容頁(yè)。(1) 按照前面介紹的具體方法在網(wǎng)站W(wǎng)ebSite7中添加一個(gè)內(nèi)容頁(yè)。選擇母版MyMaster1.master，給新的Web窗體命名為“Ex7-2.aspx”。(2) 打開Ex7-2.aspx，如圖7.7所示，頁(yè)面中灰色不可編輯。打開Ex7-2.aspx文件“源”視圖，代碼如下：7.1.3 創(chuàng)建內(nèi)容頁(yè)7.1.3 創(chuàng)建內(nèi)容頁(yè)(3) 在控件Content1中放置三個(gè)LinkButton控件，Text屬性分別為：母版頁(yè)、主題和皮膚、網(wǎng)站導(dǎo)航。(4) 在控件Content2中放置Label控件，設(shè)置Text屬性為：母版頁(yè)和

8、內(nèi)容頁(yè)。添加一個(gè)，在上面放置一段文字。(5) 設(shè)置顏色、字體等格式，根據(jù)需要適當(dāng)美觀。(6) 調(diào)試運(yùn)行，結(jié)果如圖7.8所示。7.1.4 母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行機(jī)制1代碼結(jié)構(gòu)從代碼結(jié)構(gòu)方面來(lái)說(shuō)，母版頁(yè)內(nèi)容以頁(yè)面公共部分為主，包括代碼頭、ContentPlaceHolder控件及其他常見Web元素。內(nèi)容頁(yè)則主要包含頁(yè)面非公共部分，包括代碼頭和Content控件。Content控件中包含著頁(yè)面非公共內(nèi)容。2運(yùn)行過(guò)程母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行過(guò)程可以概括為以下5個(gè)步驟：（1）用戶通過(guò)鍵入內(nèi)容頁(yè)的URL來(lái)請(qǐng)求某頁(yè)。（2）獲取內(nèi)容頁(yè)后，讀取 Page指令。如果該指令引用一個(gè)母版頁(yè)，則也讀取該母版頁(yè)。如果是第一次請(qǐng)

9、求這兩個(gè)頁(yè)，則兩個(gè)頁(yè)都要進(jìn)行編譯。（3）母版頁(yè)合并到內(nèi)容頁(yè)的控件樹中。（4）各個(gè)Content控件的內(nèi)容合并到母版頁(yè)相應(yīng)的ContentPlaceHolder控件中。（5）呈現(xiàn)得到結(jié)果頁(yè)。7.1.4 母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行機(jī)制3事件順序當(dāng)訪問結(jié)果頁(yè)時(shí)，實(shí)際訪問的是內(nèi)容頁(yè)和母版頁(yè)。作為有著密切關(guān)系的兩個(gè)頁(yè)面，二者都要執(zhí)行各自的初始化和加載等事件。具體過(guò)程如圖7.9所示。7.1.4 母版頁(yè)和內(nèi)容頁(yè)的運(yùn)行機(jī)制以上8個(gè)過(guò)程對(duì)應(yīng)著11個(gè)具體事件：（1）母版頁(yè)中控件Init事件；（2）內(nèi)容頁(yè)中Content控件Init事件；（3）母版頁(yè)Init事件；（4）內(nèi)容頁(yè)Init事件；（5）內(nèi)容頁(yè)Load事件；（6）

10、母版頁(yè)Load事件；（7）內(nèi)容頁(yè)中Content控件Load事件；（8）內(nèi)容頁(yè)P(yáng)reRender事件；（9）母版頁(yè)P(yáng)reRender事件；（10）母版頁(yè)控件PreRender事件；（11）內(nèi)容頁(yè)中Content控件PreRender事件。7.1.5 訪問母版頁(yè)控件和屬性1使用FindControl方法例如，在母版頁(yè)面上有一個(gè)ID為L(zhǎng)abel1的標(biāo)簽控件，在內(nèi)容頁(yè)中有一個(gè)ID為L(zhǎng)abelTitle的標(biāo)簽控件，在頁(yè)面加載事件中，讓內(nèi)容頁(yè)的控件LabelTitle獲取母版頁(yè)控件Label1的Text，代碼如下： Protected Sub Page_Load(ByVal sender As Obje

11、ct, ByVal e As System.EventArgs) Handles Me.Load LabelTitle.Text =CType(Master.FindControl(Label1), Label).Text End Sub2使用MasterType指令下面是添加了MasterType指令的某個(gè)內(nèi)容頁(yè)的前兩行代碼：7.1.5 訪問母版頁(yè)控件和屬性【例7.3】訪問母版頁(yè)。(1) 添加一個(gè)母版頁(yè)，命名為“MyMaster2.master”，再添加一個(gè)Web窗體文件，命名為“Ex7-3.aspx”。(2) 選擇母版MyMaster2.master，在頁(yè)面首部添加一個(gè)ID為L(zhǎng)abelM的

12、Label控件，其Text屬性為“我是母版的！”。創(chuàng)建屬性MasterPageLabel，并通過(guò)母版頁(yè)類的此屬性對(duì)該控件進(jìn)行訪問，代碼如下： Public Property MasterPageLabel() As Label Get Return LabelM End Get Set(ByVal value As Label) LabelM = value End Set End Property 7.1.5 訪問母版頁(yè)控件和屬性(3) 打開內(nèi)容頁(yè)Ex7-3.aspx，在內(nèi)容頁(yè)中添加一個(gè)Label控件，ID為“LabelGetMaster”，訪問母版頁(yè)中ID為L(zhǎng)abelM的Label控件的T

13、ext屬性，添加Page的Load事件處理代碼，代碼如下： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load LabelGetMaster.Text = Master.MasterPageLabel.Text End Sub切換到Ex7-3.aspx的“源”視圖，添加如下代碼：(4) 運(yùn)行網(wǎng)頁(yè)，如圖7.10所示。7.1.6 動(dòng)態(tài)加載母版頁(yè)例如，在Session中存儲(chǔ)用戶是否登錄的值login，根據(jù)用戶是否登錄自動(dòng)選擇母版頁(yè)的代碼片段如下： Protected

14、Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit If CBool(Session(login) Then Page.MasterPageFile = /MasterPage_LoginUser.master Else Page.MasterPageFile = /MasterPage_GuestUser.master End If End Sub7.1.7 母版頁(yè)應(yīng)用范圍1頁(yè)面級(jí)頁(yè)面級(jí)母版頁(yè)是最為常見的。只要通過(guò)屬性設(shè)置，在內(nèi)容頁(yè)中正確綁定母版頁(yè)即可，而內(nèi)容頁(yè)可以是

15、應(yīng)用程序中任意的.aspx頁(yè)面。示例代碼如下：2應(yīng)用程序級(jí)如果應(yīng)用程序中有很多頁(yè)面需要綁定同一個(gè)母版頁(yè)，分別綁定，就會(huì)顯得特別麻煩?？梢栽赪eb.config中添加一個(gè)配置節(jié)，并設(shè)置其中的MasterPageFile的屬性值為母版頁(yè)URL地址。示例代碼如下： 7.1.7 母版頁(yè)應(yīng)用范圍3文件夾級(jí)應(yīng)用程序級(jí)的綁定母版雖然方便，但這種方式缺乏靈活性。任何違背了規(guī)則（例如，含有根標(biāo)簽或者定義了一個(gè)不對(duì)應(yīng)ContentPlaceHolder的內(nèi)容區(qū)域）的Web頁(yè)面都會(huì)自動(dòng)中斷。如果一定要使用這一功能，建議不要對(duì)整個(gè)網(wǎng)站應(yīng)用該功能；可以為內(nèi)容頁(yè)面創(chuàng)建一個(gè)子文件夾，并只在這個(gè)文件夾里創(chuàng)建一個(gè)應(yīng)用母版頁(yè)的w

16、eb.config文件。7.1.8 緩存母版頁(yè)許多開發(fā)人員使用高速緩存來(lái)提高ASP.NET頁(yè)面的性能，它也可以用于包含更新頻率不高的數(shù)據(jù)頁(yè)面。在處理一般的.aspx頁(yè)面時(shí)，可以使用如下代碼給頁(yè)面應(yīng)用輸出高速緩存：這行代碼表示在服務(wù)器的內(nèi)存中把頁(yè)面緩存10秒。VaryByParam表示根據(jù)什么參數(shù)來(lái)結(jié)束緩存，Duration表示緩存時(shí)長(zhǎng)。7.2 樣式表7.2.1 樣式選擇符內(nèi)聯(lián)式適用于單獨(dú)控制某個(gè)元素樣式的情況。這種方式的優(yōu)點(diǎn)是設(shè)置樣式直觀、方便；缺點(diǎn)是修改某些元素的樣式時(shí)，需要打開網(wǎng)頁(yè)文件才能修改。下邊的代碼采用內(nèi)聯(lián)式控制各個(gè)元素的樣式： 學(xué)生成績(jī)管理系統(tǒng)7.2.1 樣式選擇符嵌入式適合控制一

17、個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的多個(gè)元素。如果把上例中的樣式改成嵌入式定義，在head內(nèi)定義樣式，可以將代碼改成如下的形式： 一個(gè)Hello網(wǎng)頁(yè) #div0text-align: center; imgwidth: 300px; height: 60px; #div1font-size: 40px; color: red; 學(xué)生成績(jī)管理系統(tǒng)7.2.1 樣式選擇符外部鏈接式則適用于控制多個(gè)網(wǎng)頁(yè)內(nèi)具有相同樣式的元素。.css文件內(nèi)的內(nèi)容和嵌入式方式下head標(biāo)記內(nèi)的style標(biāo)記內(nèi)的內(nèi)容相同，只是單獨(dú)保存在一個(gè)文件中，例如：#div0text-align: center;imgwidth: 300px; h

18、eight: 60px;#div1font-size: 40px; color: red;在XHTML中引用樣式文件后，文件內(nèi)的元素才會(huì)應(yīng)用樣式文件內(nèi)的樣式規(guī)則。引用樣式文件的方法如下，在head標(biāo)記塊內(nèi)添加下面的代碼：7.2.1 樣式選擇符1. 標(biāo)簽選擇符標(biāo)簽選擇符常見格式如下：標(biāo)簽名 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 例如：divbackground-color: white; /背景顏色text-align: center;/文本水平布局7.2.1 樣式選擇符2. 類選擇符類選擇符常見形式如下：.類名 樣式屬性1:值1; 樣式屬性2:值2; 樣式屬性3:值3; 例

19、如：.centerbackground-color: white; /背景顏色text-align: center;/文本水平布局7.2.1 樣式選擇符3. ID選擇符ID選擇符常見格式如下：ID名稱 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 例如：#headerbackground-color: white;text-align: center;7.2.1 樣式選擇符4. 偽類“偽類”是專門針對(duì)超鏈接標(biāo)簽的選擇符，使用偽類可以為訪問過(guò)的、未訪問過(guò)的、激活的以及鼠標(biāo)指針懸停于其上的4種狀態(tài)超鏈接定義不同的顯示樣式。即：A:link代表未訪問過(guò)的超鏈接A:visited代表訪問過(guò)

20、的超鏈接A:active當(dāng)超鏈接處于選中狀態(tài)A:hover當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接上例如：A:activecolor: blue;background-color: buttonface;7.2.1 樣式選擇符5. 包含選擇符包含選擇符一般格式如下：選擇符1 選擇符2 樣式屬性1:值1;樣式屬性2:值2; 樣式屬性3:值3; 各選擇符之間用空格分割。例如：DIV P H1font-weight: bold;color: red;7.2.2 樣式生成器樣式生成器可以幫助設(shè)計(jì)者快速的設(shè)置元素的樣式，在Web窗體的“設(shè)計(jì)”視圖下，選中某個(gè)元素，鼠標(biāo)右擊，選擇“屬性”，在“屬性”窗口中，點(diǎn)擊“style

21、”，即可出現(xiàn)如圖7.11所示“修改樣式”窗口。7.2.2 樣式生成器1. 字體(1) font-family：設(shè)置元素內(nèi)字體所采用的字體名稱，例如“宋體”，“黑體”等。(2) font-size：設(shè)置元素內(nèi)字體的大小，字體的大小采用CSS中統(tǒng)一的長(zhǎng)度單位。 7.2.2 樣式生成器值描 述值描 述值描 述px像素pt點(diǎn)（=1/72in）pc派卡（1pc=）cm厘米mm毫米in英寸ex當(dāng)前瀏覽器默認(rèn)字體中小寫字母“x”的高度em當(dāng)前瀏覽器字體中大寫字母“M”的寬度字體大小的取值很多，可能取值如表7.1、7.2所示。值描 述xx-small 、x-small 、small medium large

22、、x-large 、xx-large把字體的尺寸設(shè)置為不同的尺寸，從 xx-small 到 xx-large。默認(rèn)值：medium。medium和瀏覽器的基準(zhǔn)字號(hào)相同（基準(zhǔn)字號(hào)默認(rèn)是16px）smaller把 font-size 設(shè)置為比父元素更小的尺寸larger把 font-size 設(shè)置為比父元素更大的尺寸inherit把 font-size 設(shè)置為父元素的尺寸%把 font-size 設(shè)置為基于父元素的一個(gè)百分比。值把 font-size 設(shè)置為某個(gè)確定的值7.2.2 樣式生成器(3) font-weight：設(shè)置元素內(nèi)字體的粗細(xì)，可能取值如表7.3所示。值描 述normal默認(rèn)。定義

23、標(biāo)準(zhǔn)的字符bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。100 200 300 400 500 600 700 800 900定義由細(xì)到粗的字符。400 等同于 normal，而 700 等同于 bold。7.2.2 樣式生成器(4) font-style：設(shè)置元素內(nèi)字體的方格，可能的取值如表7.4所示。(5) font-variant：設(shè)置元素內(nèi)小型大寫字母的顯示方式，可能的取值如表7.5所示。值描 述normal默認(rèn)。瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體。italic瀏覽器會(huì)顯示一個(gè)斜體的字體。oblique瀏覽器會(huì)顯示一個(gè)傾斜的字體。值描 述normal默認(rèn)。瀏覽器

24、會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。small-caps瀏覽器會(huì)顯示小型大寫字母的字體，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。7.2.2 樣式生成器(6) font-transform：設(shè)置元素內(nèi)單詞的字母轉(zhuǎn)換，可能的取值如表7.6所示。值描 述none 默認(rèn)，無(wú)轉(zhuǎn)換發(fā)生capitalize將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其余無(wú)轉(zhuǎn)換發(fā)生uppercase轉(zhuǎn)換成大寫lowercase轉(zhuǎn)換成小寫7.2.2 樣式生成器(7) color：設(shè)置元素內(nèi)字體的顏色。通過(guò)可視化的顏色選擇器進(jìn)行選擇即可。(8) text-decoration：設(shè)置字體的裝飾

25、，可能的取值如表7.7所示。值描 述值描 述none 默認(rèn)，無(wú)裝飾line-through貫穿線blink閃爍overline上劃線underline下劃線7.2.2 樣式生成器2. 塊7.2.2 樣式生成器(1) line-height：設(shè)置元素內(nèi)字體的行高，字體最底端與字體內(nèi)部頂端之間的距離，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。(2) vertical-align：設(shè)置元素內(nèi)字體的垂直對(duì)其方式，可能的取值如表7.8所示。值描 述Sub垂直對(duì)齊文本的下標(biāo)super垂直對(duì)齊文本的上標(biāo)值由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)?？蔀樨?fù)數(shù)。定義由基線算起的偏移量。基線對(duì)

26、于數(shù)值來(lái)說(shuō)為0，對(duì)于百分?jǐn)?shù)來(lái)說(shuō)就是0%7.2.2 樣式生成器(3) text-align：設(shè)置元素內(nèi)文本水平對(duì)其方式，可能取值如表7.9所示。值描 述left默認(rèn)值。左對(duì)齊right右對(duì)齊center居中對(duì)齊justify兩端對(duì)齊(4) text-indent：設(shè)置元素內(nèi)字體的縮進(jìn)，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。(5) white-space：設(shè)置元素內(nèi)空格字符處理方式，可能取值如表7.10所示。值描 述normal默認(rèn)處理方式。文本自動(dòng)處理?yè)Q行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行pre用等寬字體顯示預(yù)先格式化的文本。不合并字間的空白距離和進(jìn)行兩端對(duì)齊。nowrap強(qiáng)

27、制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇 br 元素7.2.2 樣式生成器(6) word-spacing：設(shè)置元素內(nèi)單詞間的間距，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。(7) letter-spacing：設(shè)置元素內(nèi)文字之間的間距，取值為“由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 百分?jǐn)?shù)”。7.2.2 樣式生成器3. 背景7.2.2 樣式生成器(1) background-color：設(shè)置元素背景顏色，通過(guò)顏色選擇窗口選擇。(2) background-image：設(shè)置元素背景圖片，通過(guò)“瀏覽”定位到某張圖片。(3) background-repeat：設(shè)置元素背景圖

28、片的平鋪方式，常用于背景圖片大小小于元素的大小的情況，可能取值如表7.11所示。值描 述repeat默認(rèn)值。背景圖像在縱向和橫向上平鋪no-repeat背景圖像不平鋪兩端對(duì)齊。repeat-x背景圖像僅在橫向上平鋪repeat-y背景圖像僅在縱向上平鋪7.2.2 樣式生成器(4) background-attachment：設(shè)置元素背景圖片是否隨元素內(nèi)容滾動(dòng)，對(duì)于那些帶滾動(dòng)條的元素需要設(shè)置，可能取值如表7.12所示。值描 述scroll默認(rèn)值。背景圖像是隨元素內(nèi)容的滾動(dòng)而滾動(dòng)。Fixed背景圖像固定。(5) background-position：設(shè)置背景圖片在元素內(nèi)的位置。分為X軸上的位置和

29、Y軸上的位置，元素的左上角為坐標(biāo)原點(diǎn)，頂部邊緣往右的方向?yàn)閄軸方向，左部邊緣向下的方向?yàn)閅軸方向。他們可能的取值如表7.13所示。值描 述left居左center居中right居右值百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值7.2.2 樣式生成器4. 邊框7.2.2 樣式生成器(1) border-style：設(shè)置元素邊框的樣式，可能取值如表7.14所示。值描 述none默認(rèn)值。無(wú)邊框。不受任何指定的 border-width 值影響hidden隱藏邊框。IE不支持dotted在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線dashed在MAC平臺(tái)上IE

30、4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線solid實(shí)線邊框double雙線邊框。兩條單線與其間隔的和等于指定的 border-width 值groove根據(jù) border-color 的值畫3D凹槽ridge根據(jù) border-color 的值畫3D凸槽inset根據(jù) border-color 的值畫3D凹邊outset根據(jù) border-color 的值畫3D凸邊7.2.2 樣式生成器(2) border-width：設(shè)置元素邊框的寬度，可能取值如表7.15所示。(3) border-color：設(shè)置元素邊框的顏色，通過(guò)顏色選擇窗口選擇。值描 述medium默認(rèn)值。

31、默認(rèn)寬度。thin小于默認(rèn)寬度。thick大于默認(rèn)寬度。值由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值，不可為負(fù)值。7.2.2 樣式生成器5. 方框7.2.2 樣式生成器要理解元素的“邊距”和“空白”的概念，需要理解CSS中元素的“盒模型”。網(wǎng)頁(yè)內(nèi)的每一個(gè)元素在網(wǎng)頁(yè)上都是可以看成一個(gè)盒子，盒子結(jié)構(gòu)如圖7.17所示。左邊距左邊框左空白右邊距右邊框右空白內(nèi)容7.2.2 樣式生成器6. 定位7.2.2 樣式生成器position：用來(lái)設(shè)置元素在網(wǎng)頁(yè)內(nèi)的位置模式，可能取值如表7.16所示。值描 述static默認(rèn)值。無(wú)特殊定位，元素遵循HTML定位規(guī)則，正常流中的位置。absolute將元素從文檔流中拖出，使用

32、top，right，bottom，left等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父元素進(jìn)行絕對(duì)定位。如果不存在這樣的父元素，則依據(jù) body 元素。允許元素重疊，而其層疊通過(guò) z-index 屬性定義。relative元素不可層疊，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置fixed未支持。元素定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范。7.2.2 樣式生成器7. 布局7.2.2 樣式生成器visibility：設(shè)置元素的可視屬性，可能取值如表7.17所示。(2) display：設(shè)置元素是否顯示以及如何顯示，可能取值如表7.18所示。值描

33、述visible元素可視hidden元素隱藏collapse主要用來(lái)隱藏表格的行或列。隱藏的行或列能夠被其他內(nèi)容使用。值描 述block默認(rèn)值。將元素強(qiáng)制作為塊元素呈遞，為元素之后添加新行none隱藏元素。與visibility屬性的hidden值不同，其不為被隱藏的元素保留其物理空間inline內(nèi)聯(lián)元素的默認(rèn)值。將元素強(qiáng)制作為內(nèi)聯(lián)元素呈遞7.2.2 樣式生成器(3) float：設(shè)置元素相對(duì)與父元素的浮動(dòng)，可能取值如表7.19所示。(4) clear：設(shè)置元素兩邊是否允許有浮動(dòng)元素，可能取值如表7.20所示。值描 述Left元素浮動(dòng)到父元素的左邊Right元素浮動(dòng)到父元素的右邊值描 述Bot

34、h父元素內(nèi)，本元素的兩面都不允許有元素。Left父元素內(nèi)，本元素的左邊不允許有元素right父元素內(nèi)，本元素的右邊不允許有元素7.2.2 樣式生成器(5) cursor：設(shè)置光標(biāo)停留到元素內(nèi)的形狀。(6) overflow：設(shè)置元素內(nèi)容溢出情況下的顯示方式，可能取值如表7.21所示。(7) clip：rect：設(shè)置元素的可視區(qū)域，通過(guò)一個(gè)矩形區(qū)域來(lái)指定。值描 述visible默認(rèn)值。不剪切內(nèi)容也不添加滾動(dòng)條。auto在必需時(shí)對(duì)象內(nèi)容才會(huì)被裁切或顯示滾動(dòng)條scroll總是顯示滾動(dòng)條hidden不顯示超過(guò)對(duì)象尺寸的內(nèi)容7.2.2 樣式生成器8. 列表7.2.2 樣式生成器(1) list-styl

35、e-type：設(shè)置元素內(nèi)列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記。可能取值如表7.22所示。(2) list-style-image：設(shè)置元素內(nèi)列表項(xiàng)所使用的圖片值描 述Disc默認(rèn)值。實(shí)心圓circle空心圓square實(shí)心方塊decimal阿拉伯?dāng)?shù)字decimal-leading-zero以一個(gè)0開頭的數(shù)字e.g., 01, 02, 03, ., 98, 99lower-roman小寫羅馬文字i, ii, iii, iv, v, etc.upper-roman大寫羅馬文字I, II, III, IV, V, etc.lower-latin小寫拉丁文a, b, c, . zupper-latin大寫拉丁文A,

36、 B, C, . Z7.3 主題和皮膚7.3.1 主題概述1主題與CSSCSS規(guī)則只限于一組固定的樣式特性。它們?cè)试S重用特定的格式化細(xì)節(jié)（字體、邊框、前景和背景色等），但它們顯然不能控制ASP.NET控件的其他方面。主題彌補(bǔ)了中間的鴻溝。和CSS相似，主題允許定義一組作用于多個(gè)頁(yè)面中的控件的樣式特性。不過(guò)，和CSS不同的是，主題不是由瀏覽器實(shí)現(xiàn)。以下是它們的主要區(qū)別：(1) 主題基于控件而不是HTML。(2) 主題應(yīng)用在服務(wù)器上。(3) 可以通過(guò)配置文件來(lái)應(yīng)用主題。(4) 主題不會(huì)像CSS那樣級(jí)聯(lián)。7.3.1 主題概述2文件存儲(chǔ)和組織方式常見的外觀文件組織方式如下：（1）根據(jù)SkinID組織。

37、每個(gè)外觀文件都包含具有相同SkinID的多個(gè)控件外觀定義，如圖7.24所示。（2）根據(jù)控件類型組織。每個(gè)外觀文件都包含特定控件的一組外觀定義，如圖7.25所示。（3）根據(jù)網(wǎng)頁(yè)文件名組織。每個(gè)外觀文件定義某一個(gè)網(wǎng)頁(yè)文件頁(yè)面中控件的外觀，站點(diǎn)中有多少個(gè)網(wǎng)頁(yè)文件，就有對(duì)應(yīng)數(shù)目的外觀文件，如圖7.26所示。 7.3.1 主題概述3皮膚文件下面是一個(gè)外觀文件中一個(gè)文本框服務(wù)器控件的外觀設(shè)置代碼：7.3.1 主題概述4主題的類型每個(gè)主題都是App_Themes文件夾的一個(gè)不同的子文件夾。圖7.27展示的是一個(gè)典型的頁(yè)面主題，它定義了5個(gè)主題MyTheme、Theme1、Theme2、ThemeA、Them

38、eB，不同的主題下有著不同的組成。7.3.2 創(chuàng)建主題1創(chuàng)建主題文件夾為了給應(yīng)用程序創(chuàng)建自己的主題，首先需要在應(yīng)用程序中創(chuàng)建正確的文件夾結(jié)構(gòu)。2創(chuàng)建外觀文件一個(gè)定義好的包含多個(gè)Skin選項(xiàng)的外觀文件代碼片段如下： 7.3.2 創(chuàng)建主題3添加CSS文件在主題中添加CSS文件的方法：右擊主題文件夾，選擇“添加新項(xiàng)”選項(xiàng)，在彈出的“添加新項(xiàng)”對(duì)話框中選擇“樣式表”模板，修改名稱，單擊“添加”按鈕即可。4給主題添加圖像使用Images文件夾中的文件有兩個(gè)簡(jiǎn)單的方法：(1) 把圖像直接合并到.skin文件中，示例代碼片段如下。 .7.3.2 創(chuàng)建主題(2) 如果服務(wù)器控件并沒有image屬性，那么就必須

39、使用.skin文件和CSS文件。此時(shí)可以將基于主題的圖像放在任意元素上。下面的代碼是在CSS文件中的CSS類上給元素定義使用背景圖像：.theme_header background-image :url( images/smokeandglass_brownfadetop.gif);.theme_highlighted background-image :url( images/smokeandglass_blueandwhitef.gif);.theme_fadeblue background-image :url( images/smokeandglass_fadeblue.gif);在

40、CSS文件中定義過(guò)這些CSS類之后，就可以在定義服務(wù)器控件時(shí)，在.skin文件中使用它們，代碼如下： 7.3.3 應(yīng)用主題1給單個(gè)頁(yè)面應(yīng)用主題定義頁(yè)面主題后，可以使用 Page 指令的Theme屬性將該主題放置在單個(gè)頁(yè)上。例如：2給全局應(yīng)用主題要?jiǎng)?chuàng)建全局主題，則一般存放于以下位置：iisdefaultrootaspnet_clientsystem_webversionThemes例如，默認(rèn)Web根文件夾位于 Web 服務(wù)器上的 C:Inetpubwwwroot 中，則新的全局主題Themes文件夾可能為：C:Inetpubwwwrootaspnet_clientsystem_webversio

41、nThemes7.3.3 應(yīng)用主題3應(yīng)用主題的優(yōu)先級(jí)把某個(gè)主題應(yīng)用到頁(yè)面后，ASP.NET會(huì)考慮Web頁(yè)面上的每個(gè)控件并檢查外觀文件中是否為控件定義了屬性，如果ASP.NET在外觀文件里發(fā)現(xiàn)了匹配的標(biāo)簽，從外觀文件獲得的信息就會(huì)覆蓋控件的當(dāng)前屬性。4禁用主題默認(rèn)情況下，主題將重寫頁(yè)和控件外觀的本地設(shè)置。當(dāng)控件或頁(yè)已經(jīng)有預(yù)定義的外觀，而又不希望主題重寫它時(shí)，可以禁用此行為。對(duì)于頁(yè)面，禁用主題的方法為：對(duì)于控件，禁用主題的方法為：7.3.3 應(yīng)用主題【例7.5】創(chuàng)建和應(yīng)用主題示例。(1) 在網(wǎng)站W(wǎng)ebSite7中創(chuàng)建App_Themes目錄，并在其下創(chuàng)建“主題1”目錄。(2) 在“主題1”內(nèi)添加一

42、個(gè)樣式表文件“StyleSheet.css”和一個(gè)外觀文件“SkinFile.skin”，并把一個(gè)圖片復(fù)制到“主題1”目錄下。目錄結(jié)構(gòu)如圖7.28所示。(3) 添加一個(gè)臨時(shí)Web窗體文件“Temp.aspx”，切換到設(shè)計(jì)視圖，在頁(yè)面上拖放兩個(gè)Label控件，ID分別為“Label1”和“Label2”。按照?qǐng)D7.29和圖7.30所示分別設(shè)置兩個(gè)標(biāo)簽控件的外觀屬性。 7.3.3 應(yīng)用主題(4) 切換到“Temp.aspx”的“源”視圖，把控件的代碼復(fù)制到“SkinFile.skin”文件中，并去掉相關(guān)控件的ID屬性，修改成如下的代碼：(5) 在“StyleSheet.css”的文件中加入如下的樣

43、式規(guī)則：bodybackground-image: url(bg.png);text-align: center;background-repeat: no-repeat;7.3.3 應(yīng)用主題(6) 添加一個(gè)Web窗體文件，命名為“Ex7-5.aspx”，切換到“設(shè)計(jì)”視圖，在屬性窗口頂部下拉列表中，選中“Document”，在列表中定位到“StyleSheetTheme”，設(shè)置其值為“主題1”。(7) 向“Ex7-5.aspx”文件中拖放兩個(gè)Label控件，會(huì)發(fā)現(xiàn)兩個(gè)控件顯示效果如圖7.31所示。7.3.3 應(yīng)用主題(8) 修改Label2的SkinID屬性為“other”，則Label2會(huì)

44、自動(dòng)換成如圖7.32所示的外觀。7.3.4 動(dòng)態(tài)加載主題與動(dòng)態(tài)切換母版類似，可以在頁(yè)面的PreInit方法的處理程序中，設(shè)置頁(yè)面的Theme屬性。例如： Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit Select Case CStr(Request.QueryString(theme) Case Blue Page.Theme = BlueTheme Case Pink Page.Theme = Pinktheme End Select End

45、 Sub7.4 網(wǎng)站導(dǎo)航7.4.1 站點(diǎn)地圖創(chuàng)建站點(diǎn)地圖的方法與添加Web窗體文件方法相同，只是在“添加新項(xiàng)”對(duì)話框中選擇“網(wǎng)站地圖”模板。下面是一個(gè)Web.sitemap文件的示例： 7.4.1 站點(diǎn)地圖表7.23描述了元素中最常見的一些屬性。屬 性說(shuō) 明titletitle屬性提供鏈接的文本描述。這里使用的String值是用于鏈接的文本descriptiondescription屬性不僅說(shuō)明該鏈接的作用，還用于鏈接上的ToolTip屬性。ToolTip屬性是終端用戶把光標(biāo)停留在鏈接上幾秒后顯示出來(lái)的黃框urlurl屬性描述了文件在解決方案中的位置。如果文件在根目錄下，就使用文件名，例如“Default.aspx”。如果文件位于子文件夾下，就在這個(gè)屬性的String值中包含該文件夾，例如，“MySubFolder/Markets.aspx”7.4.2 用SiteMapPath控件導(dǎo)航聲明SiteMapPath控件的語(yǔ)法是：常見的屬性如表7.24所示。屬性描述選項(xiàng)（粗體為默認(rèn)值）RenderCurrentNodeAsLink指定活動(dòng)節(jié)點(diǎn)是否是可單擊的，或者指定當(dāng)前節(jié)點(diǎn)是否顯示為純文本True / FalsePathDirection設(shè)置路徑導(dǎo)航是否以從根鏈接到當(dāng)前鏈接的順序顯示（從左到右）或者反之RootToCurre