樣式、主題與母版頁

1、ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第1頁第第7章章 樣式、主題與母版頁樣式、主題與母版頁本章概述 本章的學習目標主要內(nèi)容ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第2頁本章概述本章概述l開發(fā)開發(fā)Web應用程序通常需要考慮兩個方面：功能應用程序通常需要考慮兩個方面：功能和外觀。其中，外觀考慮的重點是使和外觀。其中，外觀考慮的重點是使Web站點的站點的美觀問題，例如控件的顏色、圖像的使用、頁面美觀問題，例如控件的顏色、圖像的使用、頁面的布局等。的布局等。ASP.NET提供了一些自定義功能，主提供了一些自定義功能，主要用在要用在ASP.NET程序中

2、的頁面、控件的外觀及樣程序中的頁面、控件的外觀及樣式上，例如可以為某個控件設(shè)置字體、背景色和式上，例如可以為某個控件設(shè)置字體、背景色和前景色、寬度以及高度等樣式，還可以通過合理前景色、寬度以及高度等樣式，還可以通過合理定位頁面中的元素，為用戶呈現(xiàn)出易于使用且視定位頁面中的元素，為用戶呈現(xiàn)出易于使用且視覺美觀的效果。本章將全面介紹覺美觀的效果。本章將全面介紹Web應用程序的應用程序的樣式控制和頁面布局。樣式控制和頁面布局。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第3頁本章的學習目標本章的學習目標l理解理解CSS的概念，掌握的概念，掌握CSS的用法；的用法；l理解布局的概念

3、，掌握理解布局的概念，掌握CSS和和Div布局的方布局的方法；法；l理解主題的概念，掌握主題的創(chuàng)建和引用；理解主題的概念，掌握主題的創(chuàng)建和引用；l理解母版頁和內(nèi)容頁的概念，掌握創(chuàng)建母理解母版頁和內(nèi)容頁的概念，掌握創(chuàng)建母版頁和內(nèi)容頁的方法。版頁和內(nèi)容頁的方法。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第4頁主要內(nèi)容主要內(nèi)容7.1 CSS簡介簡介7.2 頁面布局頁面布局7.3 主題主題7.4 母版頁母版頁7.5 本章小結(jié)本章小結(jié)ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第5頁7.1 CSS簡介簡介lCSS(Cascading Style Sheet)，即

4、層疊樣式表，是，即層疊樣式表，是一種標記性語言，用于控制網(wǎng)頁樣式并允許將樣式一種標記性語言，用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離。使用信息與網(wǎng)頁內(nèi)容分離。使用 CSS 樣式可以非常靈活樣式可以非常靈活地控制網(wǎng)頁外觀，大大減輕實現(xiàn)精確布局定位、維地控制網(wǎng)頁外觀，大大減輕實現(xiàn)精確布局定位、維護特定字體和樣式的工作量。護特定字體和樣式的工作量。lCSS中有兩種定義樣式的方法，分別是內(nèi)聯(lián)式和級中有兩種定義樣式的方法，分別是內(nèi)聯(lián)式和級聯(lián)式，分別對應兩類樣式：內(nèi)聯(lián)式樣式和級聯(lián)式樣聯(lián)式，分別對應兩類樣式：內(nèi)聯(lián)式樣式和級聯(lián)式樣式。式。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第

5、6頁7.1 CSS簡介簡介l樣式是指樣式是指XHTML標記元素在瀏覽器中呈現(xiàn)的形式，標記元素在瀏覽器中呈現(xiàn)的形式，如字體的大小、顏色、位置等。在如字體的大小、顏色、位置等。在XHTML中，最容中，最容易、最快速的方法是通過設(shè)置標記元素的易、最快速的方法是通過設(shè)置標記元素的style屬性屬性來控制元素的樣式，其一般形式如下：來控制元素的樣式，其一般形式如下：顯示內(nèi)容顯示內(nèi)容l屬性名與屬性值之間用冒號屬性名與屬性值之間用冒號(:)分隔，如果一個樣式分隔，如果一個樣式中包含多個屬性，各屬性之間用分號中包含多個屬性，各屬性之間用分號(;)隔開。例如：隔開。例如：ASP.NET 4.5網(wǎng)站開發(fā)實例教程第

6、7章 樣式、主題與母版頁第7頁內(nèi)聯(lián)式樣式內(nèi)聯(lián)式樣式l直接將樣式控制放在單個直接將樣式控制放在單個HTML元素內(nèi)，稱為內(nèi)聯(lián)元素內(nèi)，稱為內(nèi)聯(lián)式或行內(nèi)樣式。該樣式通過式或行內(nèi)樣式。該樣式通過style屬性控制每個元素屬性控制每個元素的外觀。這種樣式直觀但是很繁瑣，除非具有相同的外觀。這種樣式直觀但是很繁瑣，除非具有相同樣式的元素較少，否則很少采用。下面的代碼采用樣式的元素較少，否則很少采用。下面的代碼采用內(nèi)聯(lián)式來控制各個元素的樣式。內(nèi)聯(lián)式來控制各個元素的樣式。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第8頁 級聯(lián)式樣式級聯(lián)式樣式l在網(wǎng)頁的在網(wǎng)頁的head部分定義或?qū)氲臉邮?，稱

7、為級聯(lián)式部分定義或?qū)氲臉邮?，稱為級聯(lián)式樣式。級聯(lián)式樣式可以使用以下兩種方式來實現(xiàn)。樣式。級聯(lián)式樣式可以使用以下兩種方式來實現(xiàn)。l第一種方式是，在第一種方式是，在head部分直接定義部分直接定義CSS樣式，稱為內(nèi)嵌式。樣式，稱為內(nèi)嵌式。(1)第二種方式是，在第二種方式是，在head部分通過導入以擴展名為部分通過導入以擴展名為.css的文件的文件來實現(xiàn)來實現(xiàn)CSS樣式，稱為鏈接式。樣式，稱為鏈接式。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第9頁主要內(nèi)容主要內(nèi)容7.1 CSS簡介簡介7.2 頁面布局頁面布局7.3 主題主題7.4 母版頁母版頁7.5 本章小結(jié)本章小結(jié)ASP.

8、NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第10頁7.2 頁面布局頁面布局l頁面水平居中：實現(xiàn)的方法是在頁面水平居中：實現(xiàn)的方法是在body的的style樣式中樣式中設(shè)置設(shè)置text-align屬性的值為屬性的值為center即可。如果還希望即可。如果還希望頁面的寬度固定，則可以通過設(shè)置頁面的寬度固定，則可以通過設(shè)置div的的width屬性屬性來實現(xiàn)。來實現(xiàn)。l頁面滿寬度顯示：實現(xiàn)的方法是將頁面滿寬度顯示：實現(xiàn)的方法是將div1的固定寬度的固定寬度設(shè)置為百分比即可，這樣寬度就會隨顯示界面的大設(shè)置為百分比即可，這樣寬度就會隨顯示界面的大小自動調(diào)整。小自動調(diào)整。ASP.NET 4.5

9、網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第11頁主要內(nèi)容主要內(nèi)容7.1 CSS簡介簡介7.2 頁面布局頁面布局7.3 主題主題7.4 母版頁母版頁7.5 本章小結(jié)本章小結(jié)ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第12頁7.3 主題主題l網(wǎng)站的美觀主要涉及頁面和控件的樣式屬性。在網(wǎng)站的美觀主要涉及頁面和控件的樣式屬性。在ASP.NET應用程序中，可以利用應用程序中，可以利用CSS控制各元素的控制各元素的樣式以及部分服務(wù)器控件的樣式，但是，有些服務(wù)樣式以及部分服務(wù)器控件的樣式，但是，有些服務(wù)器控件的屬性無法通過器控件的屬性無法通過CSS進行控制。為了解決這進行控制。為了解

10、決這個問題，個問題，ASP.NET提供了一種稱為提供了一種稱為“主題主題”的新方的新方式，它可以保持網(wǎng)站外觀的一致性和獨立性，同時式，它可以保持網(wǎng)站外觀的一致性和獨立性，同時使頁面的樣式控制更加靈活方便，例如動態(tài)實現(xiàn)不使頁面的樣式控制更加靈活方便，例如動態(tài)實現(xiàn)不同用戶界面的切換等。同用戶界面的切換等。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第13頁主題概述主題概述l主題是指頁面和控件外觀屬性設(shè)置的集合。主題由一個文件主題是指頁面和控件外觀屬性設(shè)置的集合。主題由一個文件組構(gòu)成，包括皮膚文件組構(gòu)成，包括皮膚文件(擴展名為擴展名為.skin)、級聯(lián)樣式表文件、級聯(lián)樣式表文件(

11、擴擴展名為展名為.css)、圖片和其他資源等，一個主題至少包含一個皮、圖片和其他資源等，一個主題至少包含一個皮膚文件。膚文件。l主題分為兩大類型，一類是應用程序主題，另一類是全局主主題分為兩大類型，一類是應用程序主題，另一類是全局主題。題。l應用程序主題是指保存在應用程序主題是指保存在Web應用程序的應用程序的App_Themes文件文件夾下的一個或多個主題文件夾，主題的名稱就是文件夾的名夾下的一個或多個主題文件夾，主題的名稱就是文件夾的名稱。稱。l全局主題是指保存在服務(wù)器上，根據(jù)不同的服務(wù)器配置決定全局主題是指保存在服務(wù)器上，根據(jù)不同的服務(wù)器配置決定的，能夠?qū)Ψ?wù)器上所有的，能夠?qū)Ψ?wù)器上所

12、有Web應用程序起作用的主題文件夾。應用程序起作用的主題文件夾。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第14頁皮膚文件皮膚文件l皮膚文件是主題的核心文件，也稱為外觀文件，專門用于定皮膚文件是主題的核心文件，也稱為外觀文件，專門用于定義服務(wù)器控件的外觀。在主題中可以包含一個或多個皮膚文義服務(wù)器控件的外觀。在主題中可以包含一個或多個皮膚文件，后綴名為件，后綴名為.skin。l在控件皮膚設(shè)置中，只能包含主題的屬性定義，如樣式屬性、在控件皮膚設(shè)置中，只能包含主題的屬性定義，如樣式屬性、模板屬性、數(shù)據(jù)綁定表達式等，不能包含控件的模板屬性、數(shù)據(jù)綁定表達式等，不能包含控件的ID，如

13、，如Label控件的皮膚設(shè)置代碼如下：控件的皮膚設(shè)置代碼如下：l右擊右擊VS中某一個中某一個“主題主題”文件夾，選擇文件夾，選擇【添加添加】|【新建項新建項】命令，在彈出對話框中選擇命令，在彈出對話框中選擇【SkinFile】，并在，并在【名稱名稱】文文本框中修改皮膚文件名，單擊本框中修改皮膚文件名，單擊【添加添加】按鈕即可添加一個皮按鈕即可添加一個皮膚文件。同樣的方法可以添加多個皮膚文件。膚文件。同樣的方法可以添加多個皮膚文件。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第15頁級聯(lián)樣式表文件級聯(lián)樣式表文件l題中可以包含一個或多個題中可以包含一個或多個CSS文件，一旦文件

14、，一旦CSS文件被放在主文件被放在主題中，則應用時無需再在頁面中指定題中，則應用時無需再在頁面中指定CSS文件鏈接，而是通文件鏈接，而是通過設(shè)置頁面或網(wǎng)站所使用的主題即可，當主題得到應用時，過設(shè)置頁面或網(wǎng)站所使用的主題即可，當主題得到應用時，主題中的主題中的CSS文件會自動應用到頁面中。文件會自動應用到頁面中。l右擊某一個右擊某一個“主題主題1”文件夾，選擇文件夾，選擇【添加添加】|【新建項新建項】命令，命令，在彈出的對話框中選擇在彈出的對話框中選擇【SkinFile】，并在，并在【名稱名稱】文本框文本框中修改樣式表文件名，單擊中修改樣式表文件名，單擊【添加添加】按鈕即可添加一個樣式按鈕即可添

15、加一個樣式表文件。同樣的方法可以添加多個樣式表文件。表文件。同樣的方法可以添加多個樣式表文件。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第16頁主要內(nèi)容主要內(nèi)容7.1 CSS簡介簡介7.2 頁面布局頁面布局7.3 主題主題7.4 母版頁母版頁7.5 本章小結(jié)本章小結(jié)ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第17頁7.4 母版頁母版頁l在在Web站點開發(fā)中，有很多元素，如站點標題、公共導航以站點開發(fā)中，有很多元素，如站點標題、公共導航以及版權(quán)信息等，會出現(xiàn)在每一個頁面中，這些元素的一致布及版權(quán)信息等，會出現(xiàn)在每一個頁面中，這些元素的一致布局會讓用戶知

16、道自己始終是在同一個站點中。雖然這些元素局會讓用戶知道自己始終是在同一個站點中。雖然這些元素可以通過在可以通過在XHTML中使用包含文件構(gòu)建，但中使用包含文件構(gòu)建，但ASP.NET提供提供了更加健壯的母版頁技術(shù)來實現(xiàn)。了更加健壯的母版頁技術(shù)來實現(xiàn)。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第18頁母版頁和內(nèi)容頁的概念母版頁和內(nèi)容頁的概念l母版頁是用于設(shè)置頁面外觀的模板，是一種特殊的母版頁是用于設(shè)置頁面外觀的模板，是一種特殊的ASP.NET網(wǎng)頁文件，同樣也具有其他網(wǎng)頁文件，同樣也具有其他ASP.NET文件的功能，如添加控文件的功能，如添加控件、設(shè)置樣式等，只不過擴展名是件、

17、設(shè)置樣式等，只不過擴展名是.master。在母版頁中，。在母版頁中，界面被分為公用區(qū)和可編輯區(qū)，公用區(qū)的設(shè)計方法與一般頁界面被分為公用區(qū)和可編輯區(qū)，公用區(qū)的設(shè)計方法與一般頁面的設(shè)計方式相同，可編輯區(qū)用面的設(shè)計方式相同，可編輯區(qū)用ContentPlaceHolder控件預控件預留出來。留出來。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第19頁母版頁和內(nèi)容頁的概念母版頁和內(nèi)容頁的概念l引用母版頁的引用母版頁的.aspx頁面稱為內(nèi)容頁，在內(nèi)容頁中，母版頁頁面稱為內(nèi)容頁，在內(nèi)容頁中，母版頁的的ContentPlaceHolder控件預留的可編輯區(qū)會被自動替換為控件預留的可編輯區(qū)會

18、被自動替換為Content控件，開發(fā)人員只需要在控件，開發(fā)人員只需要在Content控件區(qū)域中填充內(nèi)控件區(qū)域中填充內(nèi)容即可，在母版頁中定義的其他標記將自動出現(xiàn)在引用該母容即可，在母版頁中定義的其他標記將自動出現(xiàn)在引用該母版頁的版頁的.aspx頁面中，母版頁的部分以灰色顯示，表示不能頁面中，母版頁的部分以灰色顯示，表示不能修改這些內(nèi)容。修改這些內(nèi)容。l每一個母版頁中可以包含一個或多個內(nèi)容頁。使用母版頁可每一個母版頁中可以包含一個或多個內(nèi)容頁。使用母版頁可以統(tǒng)一管理和定義具有相同布局風格的頁面，給網(wǎng)頁設(shè)計和以統(tǒng)一管理和定義具有相同布局風格的頁面，給網(wǎng)頁設(shè)計和修改帶來極大的方便。修改帶來極大的方便。

19、ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第20頁創(chuàng)建母版頁和內(nèi)容頁創(chuàng)建母版頁和內(nèi)容頁l(1) 在在VS的的【解決方案資源管理器解決方案資源管理器】中右擊網(wǎng)站名稱，然后中右擊網(wǎng)站名稱，然后單擊單擊【添加添加】|【新建項新建項】命令，然后在彈出對話框中單擊命令，然后在彈出對話框中單擊【MasterPage】。在。在【名稱名稱】文本框中輸入文本框中輸入Master1.Master，如圖所示。，如圖所示。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章 樣式、主題與母版頁第21頁創(chuàng)建母版頁和內(nèi)容頁創(chuàng)建母版頁和內(nèi)容頁l(2) 切換到切換到【設(shè)計設(shè)計】視圖，刪除視圖，刪除Content

20、PlaceHolder控件，控件，然后單擊頁面中的層，插入一個然后單擊頁面中的層，插入一個4行行1列的表格，邊框設(shè)置為列的表格，邊框設(shè)置為1，表格的，表格的width設(shè)置為設(shè)置為780像素。像素。l(3)插入表格后，可以將內(nèi)容添加到母版頁，此內(nèi)容將在所有插入表格后，可以將內(nèi)容添加到母版頁，此內(nèi)容將在所有頁面上顯示。頁面上顯示。l(4) 在在【解決方案資源管理器解決方案資源管理器】中右擊中右擊Master1.master，然，然后選擇后選擇【添加添加】|【內(nèi)容頁內(nèi)容頁】命令，新建并打開命令，新建并打開WebForm1.aspx，重命名為，重命名為Index.aspx。ASP.NET 4.5網(wǎng)站開

21、發(fā)實例教程第7章 樣式、主題與母版頁第22頁創(chuàng)建母版頁和內(nèi)容頁創(chuàng)建母版頁和內(nèi)容頁l(5) 切換到切換到【設(shè)計設(shè)計】視圖。母版頁中的視圖。母版頁中的 ContentPlaceHolder 控件在新的內(nèi)容頁中顯示為控件在新的內(nèi)容頁中顯示為 Content 控件。而其他的母版頁控件。而其他的母版頁內(nèi)容顯示為淺灰色，表示在編輯內(nèi)容頁時不能更改這些內(nèi)容。內(nèi)容顯示為淺灰色，表示在編輯內(nèi)容頁時不能更改這些內(nèi)容。在與母版頁上的在與母版頁上的ContentPlaceHolder1匹配的匹配的Content 控件控件中，輸入主頁要顯示的內(nèi)容，然后選擇文本，通過從中，輸入主頁要顯示的內(nèi)容，然后選擇文本，通過從【工具工具箱箱】上的上的【塊格式塊格式】下拉列表中選擇下拉列表中選擇【標題標題2】，保存頁面。，保存頁面。l(6) 使用同樣的方法創(chuàng)建使用同樣的方法創(chuàng)建“關(guān)于關(guān)于”內(nèi)容頁，名字為內(nèi)容頁，名字為About.aspx。ASP.NET 4.5網(wǎng)站開發(fā)實例教程第7章