[互聯(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 母版頁(yè)和內(nèi)容頁(yè)母版頁(yè)和內(nèi)容頁(yè)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)頁(yè)的外觀設(shè)計(jì)和內(nèi)容應(yīng)相互獨(dú)立 站點(diǎn)要有統(tǒng)一的風(fēng)格和布局 站點(diǎn)要為用戶提供方便的站點(diǎn)導(dǎo)航44.1 母版頁(yè)和內(nèi)容頁(yè)母版頁(yè)和內(nèi)容頁(yè)54.1.1 母版頁(yè)和內(nèi)容頁(yè)概述母版頁(yè)和內(nèi)容頁(yè)概述vasp.net2.0提供了母版頁(yè)和內(nèi)容頁(yè)功能來(lái)幫助提供了母版頁(yè)和內(nèi)容頁(yè)功能來(lái)幫助幫助開(kāi)發(fā)人員創(chuàng)建頁(yè)面模板，實(shí)現(xiàn)網(wǎng)站一致性要幫助開(kāi)發(fā)人員創(chuàng)建頁(yè)面模板，實(shí)現(xiàn)網(wǎng)站一致性要求。

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

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

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

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

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

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

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

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

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

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

12、p.net 2.0提供了一種新的技術(shù)來(lái)做網(wǎng)站導(dǎo)提供了一種新的技術(shù)來(lái)做網(wǎng)站導(dǎo)航，方便且快捷。在航，方便且快捷。在asp.net 2.0中實(shí)現(xiàn)網(wǎng)站中實(shí)現(xiàn)網(wǎng)站導(dǎo)航要涉及兩個(gè)方面內(nèi)容：網(wǎng)站地圖和網(wǎng)站導(dǎo)航導(dǎo)航要涉及兩個(gè)方面內(nèi)容：網(wǎng)站地圖和網(wǎng)站導(dǎo)航控件?？丶?。254.2.1 網(wǎng)站地圖網(wǎng)站地圖v為了使用為了使用asp.net 2.0的導(dǎo)航特點(diǎn)，必須利用的導(dǎo)航特點(diǎn)，必須利用一個(gè)標(biāo)準(zhǔn)的方法來(lái)描述網(wǎng)站中的每個(gè)網(wǎng)頁(yè)，即網(wǎng)一個(gè)標(biāo)準(zhǔn)的方法來(lái)描述網(wǎng)站中的每個(gè)網(wǎng)頁(yè)，即網(wǎng)站結(jié)構(gòu)。這個(gè)標(biāo)準(zhǔn)的方法不僅要描述網(wǎng)站中每個(gè)站結(jié)構(gòu)。這個(gè)標(biāo)準(zhǔn)的方法不僅要描述網(wǎng)站中每個(gè)頁(yè)面的名稱，還應(yīng)描述出網(wǎng)站的邏輯結(jié)構(gòu)。頁(yè)面的名稱，還應(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，并且存儲(chǔ)在應(yīng)用，并且存儲(chǔ)在應(yīng)用程序的根目錄下。程序的根目錄下。26【例例 4 4】 274.2.2 導(dǎo)航控件導(dǎo)航控件v創(chuàng)建一個(gè)反映站點(diǎn)結(jié)構(gòu)的站點(diǎn)地圖只完成了創(chuàng)建一個(gè)反映站點(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)頁(yè)中顯示導(dǎo)航結(jié)構(gòu)，網(wǎng)頁(yè)中顯示導(dǎo)航結(jié)構(gòu)，這樣用戶就可以在站點(diǎn)內(nèi)輕松地移動(dòng)。

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

15、容，以超鏈接方式顯示“主頁(yè)主頁(yè)”和和“計(jì)算計(jì)算機(jī)數(shù)據(jù)機(jī)數(shù)據(jù)”。 主頁(yè)計(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(wú)法實(shí)現(xiàn)用戶言，其導(dǎo)航功能還是有限的，因?yàn)闊o(wú)法實(shí)現(xiàn)用戶在不同頁(yè)面之間快速跳轉(zhuǎn)。在不同頁(yè)面之間快速跳轉(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)形式上有很大的不同。該控件在頁(yè)面中但在表現(xiàn)形式上有很大的不同。該控件在頁(yè)面中是以樹(shù)型結(jié)構(gòu)來(lái)實(shí)現(xiàn)導(dǎo)航功能，主要用來(lái)顯示分是以樹(shù)型結(jié)構(gòu)來(lái)實(shí)現(xiàn)導(dǎo)航功能，主要用來(lái)顯示分級(jí)數(shù)據(jù)，如目錄和文件目錄。級(jí)數(shù)據(jù)，如目錄和文件目錄。vtreeview控件由一個(gè)或多個(gè)節(jié)點(diǎn)構(gòu)成。樹(shù)中的控件由一個(gè)或多個(gè)節(jié)點(diǎn)構(gòu)成。樹(shù)中的每一項(xiàng)被稱為一個(gè)節(jié)點(diǎn)，由每一項(xiàng)被稱為一個(gè)節(jié)點(diǎn)，由treenode對(duì)象表示。對(duì)象表示。每個(gè)每個(gè)treenode還可以包括一個(gè)或多個(gè)還可以包括一個(gè)或多個(gè)treenode對(duì)象。包含對(duì)象。包含treenode及其子節(jié)點(diǎn)及其子節(jié)點(diǎn)的層次結(jié)構(gòu)

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

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

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

20、v級(jí)聯(lián)樣式表（級(jí)聯(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中原來(lái)文字的顯示中原來(lái)文字的顯示樣式，并增加了一些新的概念，如類、層等，可樣式，并增加了一些新的概念，如類、層等，可以實(shí)現(xiàn)對(duì)文字重疊、定位等。以實(shí)現(xiàn)對(duì)文字重疊、定位等。css還允許將樣式還允許將樣式定義單獨(dú)存儲(chǔ)在樣式文件中，將顯示的內(nèi)容和顯定義單獨(dú)存儲(chǔ)在樣式文件中，將顯示的內(nèi)容和顯示的樣式定義分離，這樣可以將多個(gè)網(wǎng)頁(yè)鏈接到示的樣式定義分離，這樣可以將多個(gè)網(wǎng)頁(yè)鏈接到該樣式表，從而為整個(gè)網(wǎng)站提

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

22、d提供了一個(gè)功能豐富的編輯器，用于編輯提供了一個(gè)功能豐富的編輯器，用于編輯頁(yè)面上元素的內(nèi)聯(lián)樣式。頁(yè)面上元素的內(nèi)聯(lián)樣式。43內(nèi)部級(jí)聯(lián)樣式表內(nèi)部級(jí)聯(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外部級(jí)聯(lián)樣式表外

23、部級(jí)聯(lián)樣式表v外部樣式表是一個(gè)具有外部樣式表是一個(gè)具有.css文件擴(kuò)展名的純文本文件擴(kuò)展名的純文本文件，其中包含樣式規(guī)則。使用文件，其中包含樣式規(guī)則。使用標(biāo)記可標(biāo)記可以將樣式表鏈接到網(wǎng)頁(yè)上。當(dāng)多個(gè)以將樣式表鏈接到網(wǎng)頁(yè)上。當(dāng)多個(gè)html文件要文件要共享樣式表時(shí)，可以采用這種方法，使整個(gè)網(wǎng)站共享樣式表時(shí)，可以采用這種方法，使整個(gè)網(wǎng)站應(yīng)用一致的樣式。將樣式與內(nèi)容分開(kāi)，方便了樣應(yīng)用一致的樣式。將樣式與內(nèi)容分開(kā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】 外部級(jí)聯(lián)樣式表示例外部級(jí)聯(lián)樣式表示例這是一個(gè)外部級(jí)聯(lián)樣式表這是一個(gè)外部級(jí)聯(lián)樣式表這行文字應(yīng)該是紅色的這行文字應(yīng)該是紅色的這段的底色應(yīng)是黃色這段的底色應(yīng)是黃色48css樣式規(guī)則的優(yōu)先級(jí)樣式規(guī)則的優(yōu)先級(jí)vcss是級(jí)聯(lián)樣式表，級(jí)聯(lián)是指繼承性，即在元素是級(jí)聯(lián)樣式表，級(jí)聯(lián)是指繼承性，即在元素中嵌套的元素可以繼承外部元素的樣式。級(jí)聯(lián)的中嵌套的元素可以繼承外部元素的樣式。級(jí)聯(lián)的優(yōu)先級(jí)順序是：瀏覽器缺省（優(yōu)先級(jí)最低）、外優(yōu)先級(jí)順序是：瀏覽器缺省（優(yōu)先級(jí)最低

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

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

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

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

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