ASP中的樣式主題和母版頁.ppt

第8章ASP NET中的樣式 主題和母版頁 本章開始討論ASP NET的頁面創(chuàng)作技術(shù) 現(xiàn)如今的網(wǎng)頁網(wǎng)站 WebBase應(yīng)用程序越來越注重頁面的外觀和可操作性 一致的外觀能給用戶良好的印象 并能充分展示企業(yè)的形象和文化內(nèi)涵 ASP NET提供了多種用于統(tǒng)一頁面外觀的方法 主要有 樣式主題母版頁本章內(nèi)容有 如何在ASP NET中應(yīng)用CSS樣式如何創(chuàng)建和使用主題如何創(chuàng)建和使用母版頁 8 1在ASP NET中應(yīng)用CSS樣式 隨著Web的越來越盛行 Web設(shè)計(jì)也越來越趨向于整體與結(jié)構(gòu)化 在早期 比如在1999年以前 Web站點(diǎn)的設(shè)計(jì)者們使用HTML語法來格式化顯示樣式 這種方式具有多種限制 比如在不同的瀏覽器中的顯示效果不一致 缺乏標(biāo)準(zhǔn)的支持 HTML代碼結(jié)構(gòu)混亂等等 8 1 1創(chuàng)建樣式 在ASP NET中 可以創(chuàng)建三種類型的樣式 1 內(nèi)聯(lián)樣式2 內(nèi)部樣式表3 外部樣式表 8 1 2應(yīng)用樣式 現(xiàn)在己經(jīng)創(chuàng)建好了CSS樣式表文件 并定義了CSS樣式規(guī)則 下面來為Web頁面應(yīng)用樣式 VS2010中提供了一些非常實(shí)用的工具 用來非常精細(xì)的控制和修改CSS樣式 8 2主題 讀者一定非常了解Windows主題 當(dāng)選擇不同的主題設(shè)置時(shí) Windows用戶界面將會(huì)發(fā)生很大的變化 ASP NET提供了同樣的主題的技術(shù) 這讓用戶可以對(duì)Web站點(diǎn)進(jìn)行統(tǒng)一的控制 很多Blog站點(diǎn)都提供了主題選擇功能 當(dāng)選擇不同的主題時(shí)會(huì)發(fā)現(xiàn)頁面的很多方面發(fā)生了變化 比如控件的顯示 頁面的布局等等 很多初學(xué)者容易混淆主題與CSS的區(qū)別 CSS用于控制HTML格式的呈現(xiàn) 而主題則可以控制ASP NET服務(wù)器控件的很多屬性 一些屬性可能會(huì)生產(chǎn)生不一樣的HTML輸出 8 2 1創(chuàng)建主題 為了在ASP NET中創(chuàng)建主題 需要先創(chuàng)建一個(gè)名為App Themes的主題文件夾用來存放主題 該文件夾必須位于應(yīng)用程序的根目錄中 在該文件夾中可以存放多個(gè)主題設(shè)置 每個(gè)主題必須用一個(gè)單獨(dú)的子文件夾進(jìn)行存放 8 2 2創(chuàng)建命名皮膚 在上一節(jié)中為TextBox控件創(chuàng)建了一個(gè)皮膚 當(dāng)在頁面上應(yīng)用主題后 會(huì)發(fā)現(xiàn)所有的TextBox控件的呈現(xiàn)外觀都發(fā)生了改變 這種皮膚稱為默認(rèn)皮膚 開發(fā)人員可能想為某個(gè)指定的TextBox控件應(yīng)用一種不同的皮膚 此時(shí)可以考慮使用命名皮膚 8 2 3處理主題沖突 當(dāng)應(yīng)用一個(gè)主題到頁面上時(shí) ASP NET會(huì)檢查Web頁面上的控件以及定義的皮膚文件以查看是否為控件定義了屬性 如果在皮膚文件中存在匹配的皮膚定義 將覆蓋控件本身的屬性定義而使用皮膚定義 也就是說 如果頁面上應(yīng)用了皮膚 那么在皮膚中定義的屬性將具有優(yōu)先權(quán) 8 2 4為整個(gè)網(wǎng)站應(yīng)用主題 除了為單個(gè)頁面使用Theme或者是StyleSheetTheme屬性設(shè)置主題之外 還可以為應(yīng)用程序中的所有頁面同時(shí)應(yīng)用主題 可以在web config配置文件中配置Web應(yīng)用程序的所有頁面都可用的主題 8 2 5添加CSS樣式 也可以在主題中添加樣式表文件來控制頁面中的HTML元素和ASP NET控件的外觀 如果向主題文件夾中添加一個(gè)CSS文件 則CSS樣式將被應(yīng)用到應(yīng)用了主題的任何頁面 8 2 6動(dòng)態(tài)應(yīng)用主題 一些網(wǎng)站提供了讓用戶選擇主題的功能 用戶根據(jù)主題外觀縮略圖選擇一個(gè)主題 將呈現(xiàn)相應(yīng)的外觀效果 在ASP NET中可以編程的方式動(dòng)態(tài)的應(yīng)用主題 只需要在PreInit事件中動(dòng)態(tài)的指定Theme屬性 就可以實(shí)現(xiàn)主題的動(dòng)態(tài)切換效果 8 3母版頁 母版頁類似于Word中的模板 允許在多個(gè)頁面中共享相同的內(nèi)容 比如網(wǎng)站的LOGO 可能需要在多個(gè)頁面中重用 則可以將其放在母版頁中 在Dreamweaver中可以使用模板頁 ASP NET的母版頁與此類似 使用母版頁可以簡(jiǎn)化維護(hù) 擴(kuò)展和修改網(wǎng)站的過程 并能提供一致 統(tǒng)一的外觀 8 3 1創(chuàng)建母版頁 母版頁的使用與普通頁面類似 可以在其中放置文件或者圖形 任何的HTML控件和Web控件 后置代碼等等 母版頁的擴(kuò)展名以 master結(jié)尾 不能被瀏覽器直接查看 母版頁必須在被其他頁面使用后才能進(jìn)行顯示 8 3 2默認(rèn)內(nèi)容 當(dāng)在母版頁中定義了ContentPlaceHolder后 也可以在母版頁中包含默認(rèn)的內(nèi)容 假如內(nèi)容頁中沒有為母版頁中的ContentPlaceHolder控件關(guān)聯(lián)相應(yīng)的Content控件的話 默認(rèn)內(nèi)容將進(jìn)行顯示 8 3 3母版頁和相對(duì)路徑 筆者將母版頁和相對(duì)路徑劃為一小節(jié)來進(jìn)行討論 是有來由的 ASP NET中母版頁處理相對(duì)路徑有一些奇怪 不小心可就會(huì)讓開發(fā)人員摸不著北 假如在母版頁中只添加一些文本信息 這可能并不是任何問題 但是一個(gè)真正的網(wǎng)站或應(yīng)用程序 通常都需要在母版頁中添加很多圖片 或者是其他的HTML標(biāo)簽來指向其他的資源 那么將會(huì)產(chǎn)生問題 8 3 4在web config中配置母版頁 可以在web config配置文件中定義母版頁 這樣母版將被應(yīng)用到網(wǎng)站中所有的文件或者是某個(gè)指定文件夾的文件 8 3 5修改母版頁 使用母版頁將會(huì)在多個(gè)內(nèi)容頁上顯示相同的內(nèi)容 一些頁面可能想覆蓋某些母模頁中定義的顯示 來提供自定義的顯示 比如如果想修改內(nèi)容頁的標(biāo)題 可以在Page區(qū)中修改Title屬性 也可以通過編程的方式改變Title屬性 除此之外還可以修改CSS中的樣式規(guī)格 這是因?yàn)槟赴骓撝械腍TML標(biāo)簽具有runat server 聲明 表示己經(jīng)被設(shè)置為服務(wù)器端Head標(biāo)簽 因此開發(fā)人員可以使用Page Header屬性來訪問Header中的屬性 8 3 6動(dòng)態(tài)加載母版頁 可以為內(nèi)容頁動(dòng)態(tài)的指定不同的母版頁 在一些場(chǎng)合 這個(gè)功能非常實(shí)用 比如網(wǎng)站提供了些外觀的交互式選擇項(xiàng) 類似于現(xiàn)今比較流行的Blog系統(tǒng) 當(dāng)用戶選擇不同的外觀時(shí) 動(dòng)態(tài)的切換母版頁 給用戶不一樣的交互式體驗(yàn) 8 3 7母版頁的嵌套 可以創(chuàng)建一個(gè)嵌套在其他母版頁中的母版頁 比如設(shè)計(jì)一個(gè)上下兩欄面局的母版頁 頂欄顯示網(wǎng)站Logo 而底欄可能根據(jù)用戶不同的需要呈現(xiàn)不同的頁面布局 例如左右式布局或三欄式布局等等 這時(shí)可以考慮使用嵌套母版頁 VS2010對(duì)嵌套母版頁還提供了設(shè)計(jì)時(shí)的支持 8 4小結(jié) 本章介紹了ASP NET中的外觀處理技術(shù) 首先討論了CSS 演示了在VS2010中如何創(chuàng)建CSS 如何向ASP NET頁面應(yīng)用CSS 接下來討論了ASP NET中的主題 主題可以為ASP NET中的服務(wù)器控件提供一致的外觀 并可以方便的切換主題 本章討論了創(chuàng)建皮膚文件 使用命名皮膚處理多個(gè)皮膚的沖突 在web config配置文件中 為整個(gè)網(wǎng)站應(yīng)用主題以及如何動(dòng)態(tài)的切換主題 母版頁類似于Word中的模板 本章討論了如何創(chuàng)建母版頁 定義母版頁的默認(rèn)內(nèi)容 如何處理母版頁的相對(duì)路徑 動(dòng)態(tài)加載母版頁以及母版頁的多級(jí)嵌套技術(shù) 8 5常見面試題分析 8 5 1如何讓