[互聯(lián)網(wǎng)]ch04 網(wǎng)站設(shè)計(jì)

1、ahnu1第四章第四章網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì)2網(wǎng)站設(shè)計(jì)網(wǎng)站設(shè)計(jì)v4.1 母版頁和內(nèi)容頁母版頁和內(nèi)容頁v4.2 網(wǎng)站地圖和導(dǎo)航網(wǎng)站地圖和導(dǎo)航v4.3 主題和外觀主題和外觀v4.4 web部件部件3網(wǎng)站設(shè)計(jì)概述網(wǎng)站設(shè)計(jì)概述v站點(diǎn)設(shè)計(jì)三原則：站點(diǎn)設(shè)計(jì)三原則： 站點(diǎn)中網(wǎng)頁的外觀設(shè)計(jì)和內(nèi)容應(yīng)相互獨(dú)立 站點(diǎn)要有統(tǒng)一的風(fēng)格和布局 站點(diǎn)要為用戶提供方便的站點(diǎn)導(dǎo)航44.1 母版頁和內(nèi)容頁母版頁和內(nèi)容頁54.1.1 母版頁和內(nèi)容頁概述母版頁和內(nèi)容頁概述vasp.net2.0提供了母版頁和內(nèi)容頁功能來幫助提供了母版頁和內(nèi)容頁功能來幫助幫助開發(fā)人員創(chuàng)建頁面模板，實(shí)現(xiàn)網(wǎng)站一致性要幫助開發(fā)人員創(chuàng)建頁面模板，實(shí)現(xiàn)網(wǎng)站一致性要求。

2、這個過程可總結(jié)為求。這個過程可總結(jié)為“兩個包含，一個結(jié)合兩個包含，一個結(jié)合”。v“兩個包含兩個包含”是指將頁面內(nèi)容分為公共部分和非是指將頁面內(nèi)容分為公共部分和非公共部分，且兩者分別包含在兩個文件中，公共公共部分，且兩者分別包含在兩個文件中，公共部分包含在母版頁中，非公共部分包含在內(nèi)容頁部分包含在母版頁中，非公共部分包含在內(nèi)容頁中。中。v“一個結(jié)合一個結(jié)合”是指通過控件應(yīng)用和屬性設(shè)置等行是指通過控件應(yīng)用和屬性設(shè)置等行為，將母版頁和內(nèi)容頁結(jié)合起來最后將結(jié)果發(fā)給為，將母版頁和內(nèi)容頁結(jié)合起來最后將結(jié)果發(fā)給客戶端瀏覽器。客戶端瀏覽器。6母版頁母版頁v母版頁為具有擴(kuò)展名母版頁為具有擴(kuò)展名.master的的

3、asp.net文件，文件，它可以包括靜態(tài)文本、它可以包括靜態(tài)文本、html元素和服務(wù)器控件。元素和服務(wù)器控件。母版頁通常是用于布局，即定義網(wǎng)站中不同網(wǎng)頁母版頁通常是用于布局，即定義網(wǎng)站中不同網(wǎng)頁的相同部分。的相同部分。v母版頁代碼和普通的母版頁代碼和普通的.aspx文件代碼格式很相近，文件代碼格式很相近，最關(guān)鍵的不同是母版頁由特殊的最關(guān)鍵的不同是母版頁由特殊的 master指令指令識別，該指令替換了用于普通識別，該指令替換了用于普通.aspx頁的頁的 page指令，格式如下：指令，格式如下： 7母版頁代碼結(jié)構(gòu)母版頁代碼結(jié)構(gòu)master page title8內(nèi)容頁內(nèi)容頁v內(nèi)容頁是以母版頁為基礎(chǔ)

4、，可以在內(nèi)容頁中添加內(nèi)容頁是以母版頁為基礎(chǔ)，可以在內(nèi)容頁中添加網(wǎng)站中的每個網(wǎng)頁的不同部分。對于頁面的非公網(wǎng)站中的每個網(wǎng)頁的不同部分。對于頁面的非公共部分，在母版頁中使用一個或多個共部分，在母版頁中使用一個或多個contentplaceholder控件來占位，而具體內(nèi)控件來占位，而具體內(nèi)容則放在內(nèi)容頁中。容則放在內(nèi)容頁中。v例如，如上例代碼所示，母版頁包含兩個例如，如上例代碼所示，母版頁包含兩個contentplaceholder控件，控件，main和和footer，用于占位。在內(nèi)容頁中，創(chuàng)建兩個用于占位。在內(nèi)容頁中，創(chuàng)建兩個content控件，控件，一個映射到一個映射到contentplace

5、holder控件控件main，而另一個映射到而另一個映射到contentplaceholder控件控件footer，如圖，如圖 4 1所示。所示。9母版頁和內(nèi)容頁的結(jié)構(gòu)母版頁和內(nèi)容頁的結(jié)構(gòu) 10母版頁的運(yùn)行過程母版頁的運(yùn)行過程v 在運(yùn)行時，母版頁是按照下面的步驟處理的：在運(yùn)行時，母版頁是按照下面的步驟處理的：1. 用戶通過鍵入內(nèi)容頁的url來請求某頁。2. 獲取該頁后，讀取 page指令。如果該指令引用一個母版頁，則也讀取該母版頁。如果這是第一次請求這兩個頁，則兩個頁都要進(jìn)行編譯。3. 包含更新的內(nèi)容的母版頁合并到內(nèi)容頁的控件樹中。4. 各個content控件的內(nèi)容合并到母版頁中相應(yīng)的cont

6、entplaceholder控件中。5. 瀏覽器中呈現(xiàn)得到的合并頁。114.1.2 創(chuàng)建母版頁創(chuàng)建母版頁 v首先使用首先使用vwd創(chuàng)建一個普通的創(chuàng)建一個普通的web站點(diǎn)，然后站點(diǎn)，然后在站點(diǎn)根目錄下創(chuàng)建一個母版頁，默認(rèn)的情況下在站點(diǎn)根目錄下創(chuàng)建一個母版頁，默認(rèn)的情況下母版頁的文件名為：母版頁的文件名為：masterpage.master。母版頁的擴(kuò)展名是母版頁的擴(kuò)展名是.master，以，以.master為后綴為后綴的文件都是母版頁。的文件都是母版頁。12母版頁的代碼主要分成三個部分母版頁的代碼主要分成三個部分v第一部分是基本網(wǎng)頁標(biāo)記第一部分是基本網(wǎng)頁標(biāo)記v第二部分是網(wǎng)頁上運(yùn)行的腳本代碼第二部

7、分是網(wǎng)頁上運(yùn)行的腳本代碼v第三部分是第三部分是contentplaceholder控件控件13【例例 4 1】 這是母版頁頂部這是母版頁頂部 這是母版頁底部這是母版頁底部14創(chuàng)建母版頁創(chuàng)建母版頁v簡單地說，每個母版頁必須包含以下元素：簡單地說，每個母版頁必須包含以下元素： 基本的html和xml等web標(biāo)記 代碼的第一行是 contentplaceholder控件和它的id屬性15創(chuàng)建內(nèi)容頁創(chuàng)建內(nèi)容頁v創(chuàng)建母版頁后，接下來創(chuàng)建內(nèi)容頁。內(nèi)容頁實(shí)際創(chuàng)建母版頁后，接下來創(chuàng)建內(nèi)容頁。內(nèi)容頁實(shí)際上是普通的上是普通的.aspx文件，包含除母版頁外的其他文件，包含除母版頁外的其他非公共部分。非公共部分。v對

8、于內(nèi)容頁有兩個概念需要強(qiáng)調(diào)：一是內(nèi)容頁中對于內(nèi)容頁有兩個概念需要強(qiáng)調(diào)：一是內(nèi)容頁中所有內(nèi)容必須包含在所有內(nèi)容必須包含在content控件中；二是內(nèi)容控件中；二是內(nèi)容頁必須綁定母版頁。頁必須綁定母版頁。16【例例 4 2】 這是內(nèi)容頁這是內(nèi)容頁17創(chuàng)建內(nèi)容頁創(chuàng)建內(nèi)容頁v簡單地說，內(nèi)容頁應(yīng)具有下列三個特點(diǎn)：簡單地說，內(nèi)容頁應(yīng)具有下列三個特點(diǎn)： 內(nèi)容頁中沒有和標(biāo)記，也沒有、等這些web元素，這些元素都被放置在母版頁。 在代碼的第一行應(yīng)聲明所綁定的母版頁 包含控件184.1.4 母版頁和內(nèi)容頁的案例母版頁和內(nèi)容頁的案例v作業(yè)：設(shè)計(jì)一個精品課程網(wǎng)站母版，功能要求如作業(yè)：設(shè)計(jì)一個精品課程網(wǎng)站母版，功能要求

9、如下：下：v（1）有一個固定的標(biāo)題導(dǎo)航欄）有一個固定的標(biāo)題導(dǎo)航欄v（2）要求有一個相同側(cè)欄）要求有一個相同側(cè)欄v（3）要求有一個相同的頁腳）要求有一個相同的頁腳v（4）至少包含三個頁面）至少包含三個頁面v以學(xué)號以學(xué)號+姓名的形式命名后壓縮成姓名的形式命名后壓縮成rar文件并提交文件并提交到到ftp作業(yè)中！作業(yè)中！19【例例 4 3】(母版頁母版頁) asp學(xué)習(xí)教程學(xué)習(xí)教程歡迎光臨本網(wǎng)站歡迎光臨本網(wǎng)站20【例例 4 3】(內(nèi)容內(nèi)容.aspx)母版頁和內(nèi)容頁母版頁和內(nèi)容頁網(wǎng)站網(wǎng)站地圖和導(dǎo)航地圖和導(dǎo)航主題主題和外觀和外觀21【例例 4 3】(母版頁與內(nèi)容頁母版頁與內(nèi)容頁.aspx)22母版頁母版頁v

10、母版頁具有下面的優(yōu)點(diǎn)：母版頁具有下面的優(yōu)點(diǎn)： 使用母版頁可以集中處理頁的通用功能，以便可以只在一個位置上進(jìn)行更新。 使用母版頁可以方便地創(chuàng)建一組控件和代碼，并將結(jié)果應(yīng)用于一組頁。例如，可以在母版頁上使用控件來創(chuàng)建一個應(yīng)用于所有頁的菜單。 通過允許控制占位符控件的呈現(xiàn)方式，母版頁可以在細(xì)節(jié)上控制最終頁的布局。 母版頁提供一個對象模型，使用該對象模型可以從各個內(nèi)容頁自定義母版頁。234.1.5 嵌套母版頁嵌套母版頁v母版頁是可以嵌套的。即在一個大的母版頁中再母版頁是可以嵌套的。即在一個大的母版頁中再包含一個小的母版頁，稱之為子母版頁。子母版包含一個小的母版頁，稱之為子母版頁。子母版頁的文件擴(kuò)展名也

11、是頁的文件擴(kuò)展名也是.master，其中至少包含一，其中至少包含一個內(nèi)容頁。因?yàn)榭蛻舳藶g覽器是無法訪問擴(kuò)展名個內(nèi)容頁。因?yàn)榭蛻舳藶g覽器是無法訪問擴(kuò)展名為為.master的文件的。的文件的。244.2 網(wǎng)站地圖和導(dǎo)航網(wǎng)站地圖和導(dǎo)航v對于一個網(wǎng)站，特別是結(jié)構(gòu)復(fù)雜，內(nèi)容豐富的網(wǎng)對于一個網(wǎng)站，特別是結(jié)構(gòu)復(fù)雜，內(nèi)容豐富的網(wǎng)站，應(yīng)為用戶提供一個好的網(wǎng)站導(dǎo)航。好的網(wǎng)站站，應(yīng)為用戶提供一個好的網(wǎng)站導(dǎo)航。好的網(wǎng)站導(dǎo)航應(yīng)可以使訪問者在任何地方都可以清楚地了導(dǎo)航應(yīng)可以使訪問者在任何地方都可以清楚地了解自己的位置，且有好的、方便的途徑返回首頁解自己的位置，且有好的、方便的途徑返回首頁或上一級菜單?；蛏弦患壊藛巍as

12、p.net 2.0提供了一種新的技術(shù)來做網(wǎng)站導(dǎo)提供了一種新的技術(shù)來做網(wǎng)站導(dǎo)航，方便且快捷。在航，方便且快捷。在asp.net 2.0中實(shí)現(xiàn)網(wǎng)站中實(shí)現(xiàn)網(wǎng)站導(dǎo)航要涉及兩個方面內(nèi)容：網(wǎng)站地圖和網(wǎng)站導(dǎo)航導(dǎo)航要涉及兩個方面內(nèi)容：網(wǎng)站地圖和網(wǎng)站導(dǎo)航控件?？丶?54.2.1 網(wǎng)站地圖網(wǎng)站地圖v為了使用為了使用asp.net 2.0的導(dǎo)航特點(diǎn)，必須利用的導(dǎo)航特點(diǎn)，必須利用一個標(biāo)準(zhǔn)的方法來描述網(wǎng)站中的每個網(wǎng)頁，即網(wǎng)一個標(biāo)準(zhǔn)的方法來描述網(wǎng)站中的每個網(wǎng)頁，即網(wǎng)站結(jié)構(gòu)。這個標(biāo)準(zhǔn)的方法不僅要描述網(wǎng)站中每個站結(jié)構(gòu)。這個標(biāo)準(zhǔn)的方法不僅要描述網(wǎng)站中每個頁面的名稱，還應(yīng)描述出網(wǎng)站的邏輯結(jié)構(gòu)。頁面的名稱，還應(yīng)描述出網(wǎng)站的邏輯結(jié)

13、構(gòu)。v網(wǎng)站地圖是一種擴(kuò)展名網(wǎng)站地圖是一種擴(kuò)展名.sitemap的的xml文件，文件，其中包括了站點(diǎn)結(jié)構(gòu)信息。默認(rèn)情況下站點(diǎn)地圖其中包括了站點(diǎn)結(jié)構(gòu)信息。默認(rèn)情況下站點(diǎn)地圖文件被命名為文件被命名為web.sitemap，并且存儲在應(yīng)用，并且存儲在應(yīng)用程序的根目錄下。程序的根目錄下。26【例例 4 4】 274.2.2 導(dǎo)航控件導(dǎo)航控件v創(chuàng)建一個反映站點(diǎn)結(jié)構(gòu)的站點(diǎn)地圖只完成了創(chuàng)建一個反映站點(diǎn)結(jié)構(gòu)的站點(diǎn)地圖只完成了asp.net站點(diǎn)導(dǎo)航系統(tǒng)的一部分。導(dǎo)航系統(tǒng)的站點(diǎn)導(dǎo)航系統(tǒng)的一部分。導(dǎo)航系統(tǒng)的另一部分是在另一部分是在asp.net網(wǎng)頁中顯示導(dǎo)航結(jié)構(gòu)，網(wǎng)頁中顯示導(dǎo)航結(jié)構(gòu)，這樣用戶就可以在站點(diǎn)內(nèi)輕松地移動。

14、通過使用這樣用戶就可以在站點(diǎn)內(nèi)輕松地移動。通過使用下列的下列的asp.net站點(diǎn)導(dǎo)航控件，在頁面中建立站點(diǎn)導(dǎo)航控件，在頁面中建立導(dǎo)航信息：導(dǎo)航信息： sitemappath控件 menu控件 treeview控件28sitemappath控件控件vsitemappath控件會顯示一個導(dǎo)航路徑，此路控件會顯示一個導(dǎo)航路徑，此路徑為用戶顯示當(dāng)前頁的位置，并顯示返回主頁的徑為用戶顯示當(dāng)前頁的位置，并顯示返回主頁的的路徑。如在上述示例中將的路徑。如在上述示例中將sitemappath控件控件添加到在線書店的添加到在線書店的“計(jì)算機(jī)網(wǎng)絡(luò)計(jì)算機(jī)網(wǎng)絡(luò)”頁中，將顯示頁中，將顯示如下內(nèi)容，以超鏈接方式顯示如下內(nèi)

15、容，以超鏈接方式顯示“主頁主頁”和和“計(jì)算計(jì)算機(jī)數(shù)據(jù)機(jī)數(shù)據(jù)”。 主頁計(jì)算機(jī)書籍計(jì)算機(jī)網(wǎng)絡(luò)29【例例 4 5】 30menu控件控件vsitemappath控件的實(shí)際意義在于可以準(zhǔn)確定控件的實(shí)際意義在于可以準(zhǔn)確定位當(dāng)前位置以及瀏覽器路線，但作為導(dǎo)航控件而位當(dāng)前位置以及瀏覽器路線，但作為導(dǎo)航控件而言，其導(dǎo)航功能還是有限的，因?yàn)闊o法實(shí)現(xiàn)用戶言，其導(dǎo)航功能還是有限的，因?yàn)闊o法實(shí)現(xiàn)用戶在不同頁面之間快速跳轉(zhuǎn)。在不同頁面之間快速跳轉(zhuǎn)。menu控件可以幫助控件可以幫助我們構(gòu)建導(dǎo)航菜單。我們構(gòu)建導(dǎo)航菜單。31【例例 4 6】 32【例例 4 7】33【例例 4 7】 34treeview控件控件vtreevi

16、ew控件和控件和menu控件在使用上非常相似，控件在使用上非常相似，但在表現(xiàn)形式上有很大的不同。該控件在頁面中但在表現(xiàn)形式上有很大的不同。該控件在頁面中是以樹型結(jié)構(gòu)來實(shí)現(xiàn)導(dǎo)航功能，主要用來顯示分是以樹型結(jié)構(gòu)來實(shí)現(xiàn)導(dǎo)航功能，主要用來顯示分級數(shù)據(jù)，如目錄和文件目錄。級數(shù)據(jù)，如目錄和文件目錄。vtreeview控件由一個或多個節(jié)點(diǎn)構(gòu)成。樹中的控件由一個或多個節(jié)點(diǎn)構(gòu)成。樹中的每一項(xiàng)被稱為一個節(jié)點(diǎn)，由每一項(xiàng)被稱為一個節(jié)點(diǎn)，由treenode對象表示。對象表示。每個每個treenode還可以包括一個或多個還可以包括一個或多個treenode對象。包含對象。包含treenode及其子節(jié)點(diǎn)及其子節(jié)點(diǎn)的層次結(jié)構(gòu)

17、構(gòu)成了的層次結(jié)構(gòu)構(gòu)成了treeview控件所呈現(xiàn)的樹結(jié)控件所呈現(xiàn)的樹結(jié)構(gòu)。構(gòu)。 35treeview節(jié)點(diǎn)類型節(jié)點(diǎn)類型 節(jié)點(diǎn)類型節(jié)點(diǎn)類型說明說明根節(jié)點(diǎn)根節(jié)點(diǎn)（root）該類型節(jié)點(diǎn)處于樹形最高層，沒有父該類型節(jié)點(diǎn)處于樹形最高層，沒有父節(jié)點(diǎn)，具有一個或多個子節(jié)點(diǎn)。節(jié)點(diǎn)，具有一個或多個子節(jié)點(diǎn)。父節(jié)點(diǎn)父節(jié)點(diǎn)（parent）該類型節(jié)點(diǎn)有一個父節(jié)點(diǎn)，有一個或該類型節(jié)點(diǎn)有一個父節(jié)點(diǎn)，有一個或多個子節(jié)點(diǎn)。多個子節(jié)點(diǎn)。葉節(jié)點(diǎn)葉節(jié)點(diǎn)（leaf）該類型節(jié)點(diǎn)處于樹形最底層，沒有子該類型節(jié)點(diǎn)處于樹形最底層，沒有子節(jié)點(diǎn)。節(jié)點(diǎn)。36【例例 4 9】 37【例例 4 10】 38導(dǎo)航控件導(dǎo)航控件v以上介紹了三個不同的以上介紹了

18、三個不同的asp.net 站點(diǎn)導(dǎo)航控件，站點(diǎn)導(dǎo)航控件，利用任何一個控件都可以輕松地在頁面中建立導(dǎo)利用任何一個控件都可以輕松地在頁面中建立導(dǎo)航信息：航信息： sitemappath：此控件顯示導(dǎo)航路徑，向用戶顯示當(dāng)前頁面的位置，并以鏈接的形式顯示返回主頁的路徑。 menu：此控件顯示一個可展開的菜單，讓用戶可以遍歷訪問站點(diǎn)中的不同頁面。將光標(biāo)懸停在菜單上時，將展開包含子節(jié)點(diǎn)的節(jié)點(diǎn)。 treeview：此控件顯示一個樹狀結(jié)構(gòu)或菜單，讓用戶可以遍歷訪問站點(diǎn)中的不同頁面。單擊包含子節(jié)點(diǎn)的節(jié)點(diǎn)可將其展開或折疊。394.3 主題和外觀主題和外觀v在開發(fā)任何在開發(fā)任何web應(yīng)用時通常包含兩個方面：站點(diǎn)應(yīng)用時

19、通常包含兩個方面：站點(diǎn)的外觀設(shè)計(jì)和站點(diǎn)的功能。的外觀設(shè)計(jì)和站點(diǎn)的功能。vasp.net 2.0包含了大量用于定制外觀的新特包含了大量用于定制外觀的新特性。其中，服務(wù)器端控件提供性。其中，服務(wù)器端控件提供style對象模型用對象模型用于定制字體、邊界、背景前景顏色、寬度、高度于定制字體、邊界、背景前景顏色、寬度、高度等信息。控件支持使用等信息。控件支持使用css定制其外觀。同時還定制其外觀。同時還可以將所有這些定制在一些可以將所有這些定制在一些skin文件里，并將文件里，并將skin文件放置在文件放置在theme文件夾中，反復(fù)使用。文件夾中，反復(fù)使用。404.3.1 css 級聯(lián)樣式表級聯(lián)樣式表

20、v級聯(lián)樣式表（級聯(lián)樣式表（css）是）是w3c為彌補(bǔ)為彌補(bǔ)html在顯在顯示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。css標(biāo)準(zhǔn)中重新定義了標(biāo)準(zhǔn)中重新定義了html中原來文字的顯示中原來文字的顯示樣式，并增加了一些新的概念，如類、層等，可樣式，并增加了一些新的概念，如類、層等，可以實(shí)現(xiàn)對文字重疊、定位等。以實(shí)現(xiàn)對文字重疊、定位等。css還允許將樣式還允許將樣式定義單獨(dú)存儲在樣式文件中，將顯示的內(nèi)容和顯定義單獨(dú)存儲在樣式文件中，將顯示的內(nèi)容和顯示的樣式定義分離，這樣可以將多個網(wǎng)頁鏈接到示的樣式定義分離，這樣可以將多個網(wǎng)頁鏈接到該樣式表，從而為整個網(wǎng)站提

21、供一個通用的外觀。該樣式表，從而為整個網(wǎng)站提供一個通用的外觀。41樣式表定義樣式表定義vcss樣式表定義的基本語法如下：樣式表定義的基本語法如下： selector property1 : value ; property2 : value2v其中：其中： selector是指要引用樣式的對象，可以是一個或多個html標(biāo)記（各個標(biāo)記之間以逗號分開）。 一個或多個樣式屬性和屬性的取值（value），組成樣式規(guī)則。42內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表v內(nèi)聯(lián)樣式表是寫在標(biāo)記內(nèi)的，只對所在標(biāo)記有效。內(nèi)聯(lián)樣式表是寫在標(biāo)記內(nèi)的，只對所在標(biāo)記有效。如：如： 這是內(nèi)聯(lián)樣式，字體大小20pt,紅色 這段沒使用內(nèi)聯(lián)樣式vvw

22、d提供了一個功能豐富的編輯器，用于編輯提供了一個功能豐富的編輯器，用于編輯頁面上元素的內(nèi)聯(lián)樣式。頁面上元素的內(nèi)聯(lián)樣式。43內(nèi)部級聯(lián)樣式表內(nèi)部級聯(lián)樣式表v利用利用標(biāo)記將樣式表嵌在標(biāo)記將樣式表嵌在html文件的頭文件的頭部。部。標(biāo)記的屬性標(biāo)記的屬性type用于指明樣式的用于指明樣式的類別，默認(rèn)值為類別，默認(rèn)值為text/css。內(nèi)部樣式表的作用。內(nèi)部樣式表的作用范圍是本范圍是本html文件。文件。44【例例 4 11】 css實(shí)例實(shí)例h1text-align:center; color:green;font-family:隸書隸書這段文字居中，綠色，隸書這段文字居中，綠色，隸書45外部級聯(lián)樣式表外

23、部級聯(lián)樣式表v外部樣式表是一個具有外部樣式表是一個具有.css文件擴(kuò)展名的純文本文件擴(kuò)展名的純文本文件，其中包含樣式規(guī)則。使用文件，其中包含樣式規(guī)則。使用標(biāo)記可標(biāo)記可以將樣式表鏈接到網(wǎng)頁上。當(dāng)多個以將樣式表鏈接到網(wǎng)頁上。當(dāng)多個html文件要文件要共享樣式表時，可以采用這種方法，使整個網(wǎng)站共享樣式表時，可以采用這種方法，使整個網(wǎng)站應(yīng)用一致的樣式。將樣式與內(nèi)容分開，方便了樣應(yīng)用一致的樣式。將樣式與內(nèi)容分開，方便了樣式的定位和編輯。式的定位和編輯。46【例例 4 12】p background-color: yellow; color: #000000;.text font-family: 宋體宋體

24、;font-size: 14pt; color: red;h1 color: #ff8800;font-family: 隸書隸書; 47【例例 4 12】 外部級聯(lián)樣式表示例外部級聯(lián)樣式表示例這是一個外部級聯(lián)樣式表這是一個外部級聯(lián)樣式表這行文字應(yīng)該是紅色的這行文字應(yīng)該是紅色的這段的底色應(yīng)是黃色這段的底色應(yīng)是黃色48css樣式規(guī)則的優(yōu)先級樣式規(guī)則的優(yōu)先級vcss是級聯(lián)樣式表，級聯(lián)是指繼承性，即在元素是級聯(lián)樣式表，級聯(lián)是指繼承性，即在元素中嵌套的元素可以繼承外部元素的樣式。級聯(lián)的中嵌套的元素可以繼承外部元素的樣式。級聯(lián)的優(yōu)先級順序是：瀏覽器缺?。▋?yōu)先級最低）、外優(yōu)先級順序是：瀏覽器缺?。▋?yōu)先級最低

25、）、外部級聯(lián)樣式表、內(nèi)部級聯(lián)樣式表、內(nèi)聯(lián)樣式表部級聯(lián)樣式表、內(nèi)部級聯(lián)樣式表、內(nèi)聯(lián)樣式表（優(yōu)先級最高）。（優(yōu)先級最高）。 494.3.2 主題和外觀主題和外觀v“主題主題”是指頁面和控件外觀屬性設(shè)置的集合，是指頁面和控件外觀屬性設(shè)置的集合，使用這些設(shè)置可以定義頁面和控件的外觀，然后使用這些設(shè)置可以定義頁面和控件的外觀，然后可以在某個可以在某個web應(yīng)用程序中的所有頁、整個應(yīng)用程序中的所有頁、整個web應(yīng)用程序或服務(wù)器上的所有應(yīng)用程序或服務(wù)器上的所有web應(yīng)用程中應(yīng)用程中一致地應(yīng)用此外觀。利用主題功能，開發(fā)人員可一致地應(yīng)用此外觀。利用主題功能，開發(fā)人員可以方便地為整個網(wǎng)站定義外觀。以方便地為整個網(wǎng)

26、站定義外觀。50外觀文件外觀文件v主題由一個文件組構(gòu)成，其中可以包括外觀文件、主題由一個文件組構(gòu)成，其中可以包括外觀文件、級聯(lián)樣式表文件、圖片和其他資源等，主題中至級聯(lián)樣式表文件、圖片和其他資源等，主題中至少包含一個外觀文件。少包含一個外觀文件。v外觀文件的文件擴(kuò)展名為外觀文件的文件擴(kuò)展名為.skin，其中包括對各，其中包括對各種服務(wù)器控件的屬性設(shè)置。下面是一個外觀文件種服務(wù)器控件的屬性設(shè)置。下面是一個外觀文件的源代碼：的源代碼：51主題的應(yīng)用范圍主題的應(yīng)用范圍v 可以定義單個可以定義單個web應(yīng)用程序的主題，也可以定應(yīng)用程序的主題，也可以定義供義供web服務(wù)器上所有應(yīng)用程序使用的全局主服務(wù)器

27、上所有應(yīng)用程序使用的全局主題。即主題可以分為兩種類型：題。即主題可以分為兩種類型：頁面主題頁面主題和和全局全局主題主題。從組成角度看，這兩種主題沒有任何區(qū)別，。從組成角度看，這兩種主題沒有任何區(qū)別，只是主題的應(yīng)用范圍不同。只是主題的應(yīng)用范圍不同。52外觀文件組織方式外觀文件組織方式組織依據(jù)組織依據(jù)文件夾截圖文件夾截圖說明說明根據(jù)根據(jù)skinid每個外觀文件都包含具有每個外觀文件都包含具有相同相同skinid的多個控件定的多個控件定義。這種方式適用于站點(diǎn)義。這種方式適用于站點(diǎn)頁面較多，設(shè)置內(nèi)容復(fù)雜頁面較多，設(shè)置內(nèi)容復(fù)雜的情況。的情況。根據(jù)控件根據(jù)控件類型類型每個外觀控件都包含特點(diǎn)每個外觀控件都包

28、含特點(diǎn)控件的一組外觀定義。這控件的一組外觀定義。這種方式適用于站點(diǎn)頁面種種方式適用于站點(diǎn)頁面種包含控件較少的情況。包含控件較少的情況。根據(jù)文件根據(jù)文件組成組成每個外觀文件定義一個頁每個外觀文件定義一個頁面中控件的外觀。這種方面中控件的外觀。這種方式適用于站點(diǎn)中包含頁面式適用于站點(diǎn)中包含頁面較少的情況。較少的情況。53【例例 4 13】(bluebits.skin)54【例例 4 14】(blue.aspx)無標(biāo)題頁無標(biāo)題頁 55設(shè)置主題設(shè)置主題v通常，為單個頁面設(shè)置主題有兩種方法：通常，為單個頁面設(shè)置主題有兩種方法： 一是在頁頭中設(shè)置theme屬性值為主題名，主題中定義的控件外觀將直接應(yīng)用于網(wǎng)

29、頁。 二是通過stylesheettheme為單個頁面指定主題。v兩者略有不同。使用兩者略有不同。使用theme定義的主題設(shè)置頁定義的主題設(shè)置頁面時，主題中設(shè)置的控件外觀屬性優(yōu)于頁面中設(shè)面時，主題中設(shè)置的控件外觀屬性優(yōu)于頁面中設(shè)置的控件屬性，即當(dāng)定義的屬性沖突時，按控件置的控件屬性，即當(dāng)定義的屬性沖突時，按控件外觀中定義的屬性來顯示。但使用外觀中定義的屬性來顯示。但使用stylesheettheme時，控件外觀的設(shè)置則可時，控件外觀的設(shè)置則可被頁面中設(shè)置的所替代。被頁面中設(shè)置的所替代。56頁面內(nèi)容顯示的優(yōu)先級頁面內(nèi)容顯示的優(yōu)先級vstylesheet themevcss stylevelement sty