第3章 頁(yè)面布局與外觀.ppt

1、第3章 頁(yè)面布局與外觀,主題 母版頁(yè) 站點(diǎn)導(dǎo)航,本章導(dǎo)學(xué),主題 樣式表與外觀 主題應(yīng)用 網(wǎng)站應(yīng)用 頁(yè)面應(yīng)用 母版頁(yè) 母版頁(yè)與頁(yè)面間的交互 站點(diǎn)導(dǎo)航 Menu控件 TreeView控件 SiteMapPath,頁(yè)面的布局與外觀,為保證整個(gè)站點(diǎn)外觀的整體性和一致性，網(wǎng)站一般采用級(jí)聯(lián)樣式表對(duì)頁(yè)面進(jìn)行樣式定義，而在ASP.NET中，除了使用樣式表還可以用外觀（皮膚）文件對(duì)控件進(jìn)行樣式定義。 在ASP.NET中，將樣式表和外觀布局文件放在不同的單獨(dú)的文件組中，形成不用的主題(theme)，從而實(shí)現(xiàn)對(duì)頁(yè)面和站點(diǎn)的風(fēng)格設(shè)置。,頁(yè)面的布局與外觀,級(jí)聯(lián)樣式表 CSS即Cascading Style Sheet(

2、級(jí)聯(lián)樣式單)的縮寫，常稱這為風(fēng)格樣式單Style Sheet，顧名思義，是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。 樣式表基本語(yǔ)法： 選擇符 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值； ,頁(yè)面的布局與外觀,4種樣式表定義 （1）內(nèi)嵌樣式 （2）內(nèi)部樣式 把樣式設(shè)置放到與標(biāo)志之間。 P font-family:宋體;font-size:9pt;color:blue （3）外部樣式。 把定義好的樣式表存放到一個(gè)文本文件中，保存時(shí)修改其擴(kuò)展名為.css。然后在實(shí)際網(wǎng)頁(yè)文件中通過(guò)鏈接樣式表引用的方法，稱為外部樣式。 （4）導(dǎo)入import url(.css) 優(yōu)先級(jí)：1234,頁(yè)面的布局與外觀,樣式表的選

3、擇符 標(biāo)簽選擇符 類選擇符 ID選擇符 組合選擇符,頁(yè)面的布局與外觀,實(shí)例：動(dòng)態(tài)切換網(wǎng)頁(yè)樣式風(fēng)格,頁(yè)面的布局與外觀,主題 主題是外觀文件和樣式的組合。 方法：添加主題或添加外觀文件 外觀文件使用技巧 復(fù)制式添加 善用skinid 主題應(yīng)用 整站應(yīng)用 配置文件添加 頁(yè)面應(yīng)用 ,頁(yè)面的布局與外觀,實(shí)例：動(dòng)態(tài)給網(wǎng)頁(yè)應(yīng)用主題,頁(yè)面的布局與外觀,母版頁(yè) 母版頁(yè)為整個(gè)站點(diǎn)的所有頁(yè)定義統(tǒng)一的布局和外觀，然后創(chuàng)建包含要顯示內(nèi)容的各個(gè)內(nèi)容頁(yè)。 創(chuàng)建母版頁(yè)*.master（實(shí)例） 應(yīng)用母版頁(yè)：創(chuàng)建內(nèi)容頁(yè) 創(chuàng)建綁定到特定母版頁(yè)的web 窗體 MasterPageFile=/MasterPage.master“,頁(yè)面的布局與外觀,母版頁(yè)作用范圍 頁(yè)面級(jí)別 Page指令中聲明MasterPageFile=/MasterPage.master“ 站點(diǎn)級(jí)別 在配置文件中聲明（不推薦） MasterPageFile=/MasterPage.master“,頁(yè)面的布局與外觀,母版頁(yè)拓展 在內(nèi)容頁(yè)中訪問母版頁(yè),頁(yè)面的布局與外觀,導(dǎo)航控件 可以為頁(yè)面開發(fā)動(dòng)態(tài)或靜態(tài)的導(dǎo)航菜單，方便用戶瀏覽網(wǎng)頁(yè)。 需要站點(diǎn)地圖文件支持：Web.sitemap Menu控件 TreeView控件 SiteMapPath,本章小結(jié),主題 Css+外觀 主題應(yīng)用 母版頁(yè) 用來(lái)統(tǒng)一布局 內(nèi)容頁(yè)