《網(wǎng)站開發(fā)基礎教程8》由會員分享，可在線閱讀，更多相關《網(wǎng)站開發(fā)基礎教程8（36頁珍藏版）》請在人人文庫網(wǎng)上搜索。
1、ASP.NET 4.0網(wǎng)站建設基礎教程 主編：王 翔 LOGO 第八章第八章 創(chuàng)建統(tǒng)一風格的網(wǎng)站創(chuàng)建統(tǒng)一風格的網(wǎng)站 在實際的Web項目開發(fā)中，我們往往需要使網(wǎng)站各頁面保持一致 的風格與外觀，同時也希望網(wǎng)站的這種風格與外觀能讓訪問者耳目一 新，增強用戶體驗。 一個設計良好的網(wǎng)站界面與清晰的布局結構及導航指引往往能夠 提升訪問者對網(wǎng)站的興趣和繼續(xù)瀏覽的耐心。ASP.NET提供了主題、 皮膚、母版頁及站點導航等一系列功能用于增強其頁面布局和界面優(yōu) 化的能力，借助它們我們即可輕松的實現(xiàn)對網(wǎng)站整體風格與外觀的控 制。 LOGO 8.1 主題和皮膚 所謂主題，是指頁面和控件外觀設置的集合。主題由一組文件構
2、成，其中 至少包含一個或多個皮膚文件，另外還可以包含CSS文件、圖片和其它 資源。主題文件必須放在應用程序根目錄下的文件夾下。 皮膚文件是主題的核心內(nèi)容，用于定義頁面中服務器控件的外觀。皮膚文 件的擴展名是.skin ，其中包含對頁面中出現(xiàn)的各種類型服務器控件的 屬性設置。 LOGO n 8.1.1 CSS基礎基礎 通常CSS能夠支持三種定義方式： p 內(nèi)聯(lián)式：直接將樣式控制放置于單個HTML元素內(nèi)。適用于對單個標 簽進行樣式控制，使用方便，但在頁面維護時，需要針對每個頁面進 行修改，非常不便； p 嵌入式：在頁面的head部分進行樣式定義。可以控制一個頁面的多個 樣式，當
3、需要對頁面樣式進行修改時，只需要修改head標簽中的 style標簽即可，不過這樣仍然沒有讓布局代碼和頁面代碼完全分離； p 外聯(lián)式：以擴展名為.css文件保存樣式。能夠?qū)⒉季执a和頁面代碼 相分離，使頁面結構清晰簡潔，從而在維護時有效減少工作量。 LOGO 1. 內(nèi)聯(lián)式樣式表 內(nèi)聯(lián)式樣式表通過頁面元素的style屬性進行樣式控制，示例代碼如下所示： 內(nèi)聯(lián)式樣式表 如果需要同時包含多個屬性值時，也可以將其寫在同一個style屬性中，中間用分 號間隔，示例代碼如下所示： 內(nèi)聯(lián)式樣式表 用內(nèi)聯(lián)式方法進行樣式控制雖然簡單方便，但當在頁面中加入了過多的內(nèi)聯(lián)式樣 式后，既不利于我們理清頁面布局結構，又會
4、在更新維護時因需要單獨修改 每一處內(nèi)聯(lián)樣式而增大工作量。 LOGO 2. 嵌入式樣式表 嵌入式樣式表將樣式定義放于頁面的head部分母版頁中使用導航控件要求，并以標識。示例代碼如下所示： 嵌入式樣式表 .font1 font-size:10px; .font2 font-size:10px; font-:bold; color:blue; 在定義了字體樣式后，就可以在相應的標簽中使用class屬性來定義樣式，示例代 碼如下所示： 示例文字1示例文字2 示例文字3 LOGO 3. 外聯(lián)式樣式表 外聯(lián)式樣式表把樣式定義單獨存放在一個以.css為后綴名的樣式表文件中。在 .css文件中，只需將嵌入式樣式表中的內(nèi)
5、容移 入即可。在完成.css文件的設計后，需要在使用的頁面的head部分添加引用 。假設我們已經(jīng)創(chuàng)建并定義了一個樣式表文件mycss.css，并且存放在網(wǎng)站 的css文件夾中，當我們需要在使用這個樣式表文件時，需要加以引入，示例 代碼如下： 使用外聯(lián)式能夠很好的將頁面的布局代碼和HTML代碼相分離，不僅能夠讓多個 頁面同時共享一個CSS樣式表文件，實現(xiàn)統(tǒng)一的樣式控制，同時在維護過程 中，只需要修改.css文件中的樣式屬性即可實現(xiàn)引用該文件的頁面的全局更 新。 LOGO 4. CSS選擇器 準確而簡潔的運用CSS選擇器才能達到最好的效果，最常用的選擇器有 以下五類： （1）標記選擇器：顧名思義，
6、標記選擇器是直接將HTML標記作為選擇 器，如：body、p、h1等，它對頁面中的所有同類標記有效。 body font-:微軟雅黑, ; /*字體系列*/ font-size: ; /*字體大小*/ color:#; /*文本顏色*/ : 0; /*四個外邊距的寬度*/ : 0; /*四個內(nèi)邊距的寬度*/ -right: 30; /*右外邊距的寬度*/ text-align: left; /*文本的水平對齊方式*/ LOGO （2）id選擇器： 為了對頁面元素加以區(qū)分，我們通常會給它們定義id。例如，在采
7、用 div+css模式布局時，定義了一個層 div id=/div ，在 樣式表里可以這樣定義： # :0 auto; : #; /*層的背景色*/ color:#; 其中“”是自定義的頁面元素的id名稱，注意在名稱前面一定要 加#號。 LOGO （3）class（類別）選擇器： class選擇器可以作用在一組頁面元素上母版頁中使用導航控件要求，在CSS里用一個點開頭表示 class選擇器定義，例如： .font3 color: #; font-size:14px ; 在頁面中，用class=類別名的方法調(diào)用
8、，如：div class=font3示例 文字4/div。這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建 和刪除，但也應避免對它的濫用。 LOGO （4）群組選擇器： 當若干個元素需要使用同樣的樣式屬性時，可以使用群組選擇器，元素 之間用逗號分隔。如： p, td, li line-:20px; /*行間距*/ color:#; 使用組群選擇器，可以將具有多個相同屬性的元素，合并群組進行選擇 ，定義同樣的CSS屬性，這大大的提高了編碼效率并減小了CSS文件 體積。 LOGO （5）后代選擇器： 后代選擇器也叫派生選擇器。可以使用后代選擇器給一個元素里的子元 素定義樣式，
9、例如： ul li :40px; line-:40px; color:#; 上面的CSS代碼對無序列表ul的列表項元素li進行了屬性設置，它通常被 用于創(chuàng)建頁面導航條上。 后代選擇器的合理使用是非常有好處的，如果父元素內(nèi)包括的HTML元 素具有唯一性，則不必給內(nèi)部元素再指定class或id，直接應用此選擇 器即可。 LOGO n 8.1.2 皮膚文件皮膚文件 皮膚文件中一個image控件及一個Login（登錄）控件的樣式設置示例代碼如下： 使用皮膚文件時，只需在服務器控件中添加屬性，如下所示： LOGO n 8.1.3 主題主題 1. 頁面主題和
10、全局主題 用戶可以為每個頁面單獨設置主題，這種形式被稱為“頁面主題”。也可以為應 用程序的每個頁面都使用同一主題，這種形式被稱為“全局主題”。 每個主題都對應一個主題文件夾，其中包括控件的皮膚文件、CSS文件、圖形文 件和其他資源文件，這個文件夾是作為網(wǎng)站中的“”文件夾的子 文件夾創(chuàng)建的。 在使用頁面主題時，必須首先在要使用該主題的頁面聲明主題，示例代碼如下所 示： 或 【注意】和 Theme這兩個屬性用法基本一樣，但頁面加載時 的優(yōu)先級不同。 LOGO 當需要使用全局主題時，則是通過修改web.配置文件中的 配置節(jié)進行主題的全局設
11、定，從而使該站點應用程序下的所 有Web頁呈現(xiàn)統(tǒng)一的樣式，配置方法如下： 其中pages節(jié)的theme指定了主題的名稱，該名稱同樣對應網(wǎng)站中 文件夾的一個子文件夾的名字，若配置的主題不存在， 則會產(chǎn)生編譯錯誤。此外，對于新創(chuàng)建的.aspx文件，必須強制其 head標記具有runat=屬性，否則會在運行時拋出異常。 LOGO 2. 主題的創(chuàng)建和文件組織方式 默認情況下，主題以子文件夾形式存儲在網(wǎng)站中的文件夾下，如果 網(wǎng)站中不存在該文件夾，在“解決方案資源管理器”中右擊項目名稱，選擇 “添加”“添加ASP.NET文件夾”“主題”，系統(tǒng)就可以自動創(chuàng)
12、建該文 件夾并添加一個新主題，如果已經(jīng)存在文件夾，則只會在該文 件夾下添加新的主題。 主題創(chuàng)建后，就可以根據(jù)需要向其中添加皮膚文件（外觀文件）、樣式表文件、 圖形文件或其他資源文件。一個典型的主題文件組織結構。在 文件夾下包括了兩個子文件夾“主題1”和“主題2”，表示網(wǎng)站中已經(jīng)定義了 兩個主題。每個主題文件夾下都包含了一個外觀文件及一個樣式表文件，并 以文件夾的形式將樣式設計所需的圖片文件組織起來。 LOGO 3. 禁用主題 對于有些情況，主題會重寫頁和控件外觀的本地設置。當控件或頁面已經(jīng)定義了 外觀，而又不希望主題將它進行重寫和覆蓋時，可以禁用主題的覆
13、蓋行為。 對于頁面，可以用聲明的方法進行禁用，示例代碼如下所示： 當頁面需要某個主題的樣式，而又希望某個控件不被主題影響時，同樣可以通過 屬性對控件進行主題禁止，示例代碼如下所示： 這樣就可以保證該控件不會被主題樣式描述和控制，而頁面和頁面的其他元素仍 然可以使用主題中的樣式。 LOGO 【案例【案例8-1】使用表格對頁面進行布局，并實現(xiàn)頁面主題的 動態(tài)切換。 LOGO 8.2 母版頁與內(nèi)容頁 n 8.2.1 母版頁的創(chuàng)建與代碼結構母版頁的創(chuàng)建與代碼結構 1. 創(chuàng)建母版頁 LOGO 2. 母版頁的代碼結構 母版頁代碼和普通的Web頁面代碼結構與格式基本一致，僅有如下兩
14、點 區(qū)別： （1）母版頁由特殊的 指令識別，而不是普通頁面的 Page指 令，格式如下： （2）母版頁中默認包含兩個（內(nèi)容占位符）控件， 它們的作用是為內(nèi)容頁預留設計空間，我們也可以根據(jù)需要從工具箱 的【標準】分類中拖放控件進行自由調(diào)整。 LOGO n 8.2.2 內(nèi)容頁的創(chuàng)建與代碼結構內(nèi)容頁的創(chuàng)建與代碼結構 1 創(chuàng)建內(nèi)容頁 創(chuàng)建內(nèi)容頁的方法有如下兩種： （1）在母版頁任意位置單擊右鍵，選擇“添加內(nèi)容頁”，就會以此母版頁為基 礎自動生成內(nèi)容頁，并以“+序號”形式命名。 （2）在解決方案資源管理器中
15、右擊項目文件，選擇“添加新項”，在彈出的窗 口中選擇“Web窗體”，并勾選“選擇母版頁”復選框。指定頁面名稱后單 擊“添加”按鈕，在“選擇母版頁”對話框中選擇相應的母版頁。 LOGO n 2. 內(nèi)容頁的代碼結構內(nèi)容頁的代碼結構 LOGO 當客戶端瀏覽器請求內(nèi)容頁時，服務器將按以下步驟處理： （1）獲取該頁后，讀取 Page 指令。如果該指令通過 “”引用了一個母版頁，則同時讀取該母版頁。如果 是第一次請求這兩個頁，則兩個頁都要進行編譯； （2）將包含更新內(nèi)容的母版頁合并到內(nèi)容頁的控件中； （3）將內(nèi)容頁上各個 控件的內(nèi)容合并到母版頁中相應的 Cont
16、 控件中； （4）瀏覽器解釋后將最終呈現(xiàn)得到的合并頁。 LOGO 【案例【案例8-2】在【案例【案例8-1】的基礎上創(chuàng)建母版頁與內(nèi)容頁。 LOGO 8.3 站點導航 n 8.3.1 站點地圖與站點地圖與控件控件 1. 站點地圖文件結構 ASP.NET采用了XML格式文件描述頁面間的邏輯結構，這個文件的擴展名為 .，所以它被稱之為“站點地圖”。站點地圖就存放在應用程序根目錄 中。 如果要創(chuàng)建的網(wǎng)站結構為： 主頁 登錄頁面 注冊頁面 那么，站點地圖文件結構的示例代碼如下： LOGO 2 站點地圖文件的創(chuàng)建 在解決方案資源管理器中，右擊
17、項目名，選擇“添加新項”“站點地 圖”，單擊“添加”按鈕后就可以默認名“Web.”創(chuàng)建地圖文 件，然后在其中添加節(jié)點描述代碼即可。 LOGO n 3. 控件控件 創(chuàng)建好站點地圖文件已經(jīng)意味著網(wǎng)站導航功能完成了大部分，只需要在 頁面中放置導航控件來顯示導航結構，就可以輕松地實現(xiàn)導航了。 控件是ASP.NET提供的導航控件之一，它會顯示一個導航 路徑來標識當前頁的位置，并顯示返回主頁的路徑。 【注意】只有在站點地圖中列出的頁才能在控件中顯示導 航數(shù)據(jù)，如果將控件放在站點地圖中未列出的頁上，該 控件
18、不會顯示任何信息。 控件常用的屬性有：、等，還 可以通過定義模板來更靈活的設置導航的外觀樣式。 LOGO 【案例【案例8-3】在【案例【案例8-1】【案例】【案例8-2】的基礎上實現(xiàn)站點導航。 LOGO LOGO n 8.3.2 控件控件 控件主要用來以樹形結構顯示分級數(shù)據(jù)，它由任意多個（節(jié) 點）對象組成，每個還可以繼續(xù)包括任意多個子對象。 對象具有Text屬性和Value屬性，Text屬性指定在節(jié)點顯示的文字， Value屬
19、性是獲取節(jié)點的值。Nodes屬性是包含了所有節(jié)點的集合，可以用節(jié) 點編輯器為控件靜態(tài)添加節(jié)點，也可以使用編程的方式動態(tài)添加節(jié) 點。 LOGO 【案例【案例8-4】在母版頁上以編程的方式添加“新聞發(fā)布系統(tǒng) ”后臺管理界面的樹形導航。 LOGO void ( , e) if (!) . = true;/在控件中顯示網(wǎng)格線 = new ();/定義新聞管理根節(jié)點 .Text = 新
20、聞管理; tr1 = new ();/定義類別子節(jié)點 tr1.Text = 添加類別; tr1. = /.aspx; ..Add(tr1);/把子節(jié)點添加到根節(jié)點 tr2 = new ();/定義新聞子節(jié)點 tr2.Text = 添加新聞; tr2. = /.aspx; tr21 = new ();/定義二級子節(jié)點 tr21.Text = 純文本方式; tr21.Navi
21、 = /.aspx; tr2..Add(tr21);/添加二級子節(jié)點到一級子節(jié)點 tr22 = new (); tr22.Text = 編輯器方式; tr22. = /.aspx; tr2..Add(tr22);/添加二級子節(jié)點到一級子節(jié)點 ..Add(tr2);/把子節(jié)點添加到根節(jié)點 = new (); .Text = 退出管理;
22、. = /.aspx; .Nodes.Add();/把根節(jié)點添加到控件中 .Nodes.Add();/把根節(jié)點添加到控件中 LOGO n 8.3.3 Menu控件控件 Menu控件主要用來構建菜單，并以菜單形式實現(xiàn)站點的快速導航。該控件由任 意多個菜單項()組成，每個菜單項還可以繼續(xù)包括任意多個子菜單 項。Menu控件中的菜單項有以下三種類型： (1) 根菜單項 菜單項的最頂層，其下包含一個或多個子菜單項。 (2) 父菜單項 它有一個父菜單項，
23、并且包含一個或多個子菜單項 (3) 子菜單項 處于菜單項的最底層，無子菜單項 Menu控件主要具有如下的功能與特點： (1) 支持數(shù)據(jù)綁定。即允許通過數(shù)據(jù)綁定方式，使得菜單項與XML、表格、數(shù)據(jù) 庫等結構化數(shù)據(jù)緊密聯(lián)系。 (2) 支持站點導航功能。即通過集成數(shù)據(jù)源控件，實現(xiàn)導航 。 (3) 支持動態(tài)構建功能。即可通過編程方式訪問Menu對象模型，完成創(chuàng)建菜單、 構建菜單項和設置屬性等任務。 (4) 可使用樣式、主題和模板來定義控件外觀。 (5) 可根據(jù)不同類型瀏覽器和設備，自適應地完成控件呈現(xiàn)。 LOGO 【案例【案例8-5】在頁面中拖放一個Menu控件，通過控件的Items 集合屬性手動添加菜單結構。頁面運行時，單擊某一菜單項 則在頁面中顯示該菜單項的值。 LOGO 【案例【案例8-6】使用ADO.NET對象訪問數(shù)據(jù)庫實現(xiàn)動態(tài)級聯(lián) 菜單。 本章結束本章結束