頁(yè)面外觀設(shè)計(jì)與布局.ppt

《頁(yè)面外觀設(shè)計(jì)與布局.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《頁(yè)面外觀設(shè)計(jì)與布局.ppt（47頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

第6章頁(yè)面外觀設(shè)計(jì)與布局 內(nèi)容 CSS樣式控制主題母版頁(yè) 6 1CSS樣式控制 頁(yè)面中使用CSS的三種方法樣式規(guī)則 6 1 1頁(yè)面中使用CSS的三種方法 CSS被設(shè)計(jì)用來(lái)與HTML聯(lián)合建立網(wǎng)頁(yè) 它不能獨(dú)立運(yùn)行 需要依附到頁(yè)面上才能發(fā)揮作用 通常在網(wǎng)頁(yè)中CSS規(guī)定了3種定義樣式的方法 直接將樣式控制放置在單個(gè)HTML元素內(nèi) 稱為內(nèi)聯(lián)式 在網(wǎng)頁(yè)的head部分定義樣式 稱為嵌入式 以擴(kuò)展名 css的文件保存樣式定義 稱為外部鏈接式 被鏈接的文件稱為CSS文件 1 內(nèi)聯(lián)式樣式內(nèi)聯(lián)樣式直接將CSS放在某個(gè)HTML標(biāo)簽中 通過(guò)使用style屬性設(shè)置 一般形式為 style 屬性名1 值1 屬性名2 值2 屬性名與屬性值之間用 分隔 如果一個(gè)樣式中有多個(gè)屬性 各屬性之間用分號(hào) 隔開(kāi) 在VisualStudio2008中 有兩種設(shè)置樣式的方法 在源視圖下直接設(shè)置樣式 在設(shè)計(jì)視圖下 利用可視化界面設(shè)置樣式 例6 1 內(nèi)聯(lián)式樣式設(shè)置示例 參見(jiàn)示例 第06章 StyleDemo 6 1 aspx 2 嵌入式樣式在網(wǎng)頁(yè)的head部分直接實(shí)現(xiàn)CSS樣式 即在與標(biāo)簽內(nèi) 以開(kāi)始 結(jié)束 CSS規(guī)則由兩部分組成 選擇符和聲明 聲明由屬性名和屬性值組成 所以簡(jiǎn)單的CSS規(guī)則如下 選擇符 屬性名1 值1 屬性名2 值2 例如 p color Green p 段落標(biāo)簽 為選擇符 color 顏色 是p的屬性名 green 綠色 是color的屬性值 該規(guī)則聲明所有段落標(biāo)簽的內(nèi)容應(yīng)該將color屬性設(shè)置為綠色 即所有中文本將變成綠色 下面講述CSS規(guī)則中主要的4個(gè)要素 選擇符 表明CSS規(guī)則應(yīng)用到頁(yè)面的哪個(gè)部分 選擇符最簡(jiǎn)單的類型是元素選擇符 它指出明確的標(biāo)簽元素 例如HTML中的標(biāo)簽 聲明 聲明包含在 大括號(hào)內(nèi) 大括號(hào)內(nèi)應(yīng)首先給出屬性名 接著是冒號(hào) 然后是屬性值 結(jié)尾分號(hào)是可選項(xiàng) 推薦使用結(jié)尾分號(hào) 以便于規(guī)則的擴(kuò)展 屬性 屬性按官方CSS規(guī)范定義 用戶可以定義特有的樣式效果 與CSS兼容的瀏覽器可能會(huì)支持這些效果 如果不支持的瀏覽器會(huì)忽略這些屬性 值 聲明的值放置在屬性名和冒號(hào)之后 它確切定義應(yīng)該如何設(shè)置屬性 每個(gè)屬性值的范圍也在CSS規(guī)范中定義 在VisualStudio2008中 也有兩種設(shè)置嵌入式樣式的方法 在源視圖下直接設(shè)置樣式利用可視化窗口設(shè)置樣式 例6 2 嵌入式樣式設(shè)置示例 參見(jiàn)示例 第06章 StyleDemo 6 2 aspx 3 鏈接式樣式在頁(yè)面中使用CSS最常用的方法是鏈接式樣式 利用這種方法可以在網(wǎng)頁(yè)中調(diào)用已經(jīng)定義好的樣式表文件 css文件 與嵌入式相比 鏈接式可以將定義好的樣式在網(wǎng)站的多個(gè)頁(yè)面上重復(fù)使用 提高了開(kāi)發(fā)效率 降低了維護(hù)成本 同時(shí)也實(shí)現(xiàn)了將頁(yè)面結(jié)構(gòu)和表現(xiàn)徹底分離 最適合大型網(wǎng)站的外觀設(shè)計(jì) 在VisualStudio2008中 通過(guò)可視化界面創(chuàng)建外部鏈接式樣式 具體步驟如下 在 解決方案資源管理器 中 右擊網(wǎng)站的名稱 選擇 添加新項(xiàng) 在 VisualStudio已安裝的模板 下選擇 樣式表 如圖所示 在 名稱 文本框中 輸入StyleSheet1 css 然后單擊 添加 按鈕 編輯器將打開(kāi) 其中顯示一個(gè)包含空body樣式規(guī)則的新樣式表 如圖所示 在樣式表編輯器中大括號(hào)的外邊單擊鼠標(biāo)右鍵 在快捷菜單中選擇 添加樣式規(guī)則 命令 或者在菜單 樣式 中選擇 添加樣式規(guī)則 命令 都會(huì)彈出 添加樣式規(guī)則 對(duì)話框 如圖所示 最后 為Web頁(yè)面指定該樣式表 最簡(jiǎn)單的方法是在Web頁(yè)面的源視圖中將樣式表文件直接從 解決方案資源管理器 拖到頁(yè)面的head元素中或者直接拖到Web頁(yè)面的設(shè)計(jì)視圖中 例6 3 鏈接式樣式設(shè)置示例 參見(jiàn)示例 第06章 StyleDemo 6 3 aspx 6 1 2樣式規(guī)則 無(wú)論是定義內(nèi)嵌式樣式還是鏈接式樣式 每個(gè)樣式的定義格式相同 選擇符 屬性名1 值1 屬性名2 值2 其中 選擇符是指樣式定義的對(duì)象 可以是HTML標(biāo)記元素 用戶自定義的類 用戶自定義的id 偽類 具有層次關(guān)系的樣式規(guī)則及并列的樣式選擇符等 1 元素選擇符任何HTML元素都可以是一個(gè)CSS的元素選擇符 例如 div color red 該樣式規(guī)則中的元素選擇符是div div塊內(nèi)的所有文字顏色為紅色 2 類選擇符類選擇符用于定義頁(yè)面上的相關(guān)HTML元素組 使它們具有合適的相同樣式規(guī)則 創(chuàng)建類時(shí) 用戶需要給它命名 命名時(shí)最好使用字母和數(shù)字 定義了類之后 用戶可以使用它作為CSS的選擇符 類選擇符以 為起始標(biāo)記 一般格式為 類選擇符 屬性名1 值1 屬性名2 值2 例如 c1 color Red c2 font size large 上面定義了兩個(gè)類 類 c1 定義了顏色屬性 類 c2 定義了字體大小屬性 在HTML文檔中可以按下列方式引用 通知將與今天下午2點(diǎn)召開(kāi)各部門(mén)會(huì)議 標(biāo)簽中的文本顏色為紅色 標(biāo)簽中的字體大小為 large 因?yàn)樗鼈兏髯缘腸lass屬性值為類 c1 和類 c2 例6 4 類選擇符示例程序 參見(jiàn)示例 第06章 StyleDemo 6 4 aspx 3 id選擇符只有在頁(yè)面上的標(biāo)簽才能具有給定的id 它必須是唯一的 并只用于指示該元素 下面的例子中標(biāo)簽定義了一個(gè)id屬性 值是 next 下一步在CSS中 id選擇符由id值前面的 井號(hào) 符號(hào)指示 例如 next font size large 在實(shí)際應(yīng)用中 用戶應(yīng)如何選取類選擇或id選擇符設(shè)置樣式呢 類選擇符更靈活 id選擇符能完成的它都能完成 甚至比id選擇符能完成的還要多 如果想重用樣式 用戶也可以使用類選擇符來(lái)完成 但是用id選擇符就完成不了 因?yàn)閕d值在頁(yè)面文檔中必須是唯一的 即只有一個(gè)元素具有該值 注意 如果在一個(gè)元素的樣式定義中 既引用了元素選擇符 又引用了類選擇符和id選擇符 則id選擇符的優(yōu)先級(jí)最高 其次是類選擇符 元素選擇符的優(yōu)先級(jí)最低 4 偽類偽類可以看做是一種特殊的類選擇符 是能被支持CSS的瀏覽器自動(dòng)所識(shí)別的特殊選擇符 它的最大的用處就是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果 在CSS中用4個(gè)偽類來(lái)定義鏈接樣式 分別是a link a visited a hover和a active 例如 a link color FF0000 未被訪問(wèn)的鏈接紅色 a visited color 00FF00 已被訪問(wèn)過(guò)的鏈接綠色 a hover color FFCC00 鼠標(biāo)懸浮在上的鏈接橙色 a active color 0000FF 鼠標(biāo)點(diǎn)中激活鏈接藍(lán)色 以上語(yǔ)句分別定義了鏈接 已訪問(wèn)過(guò)的鏈接 鼠標(biāo)停在上方時(shí) 點(diǎn)擊鼠標(biāo)時(shí)的樣式 注意 必須按以上順序書(shū)寫(xiě) 否則不能按預(yù)期效果顯示 5 包含選擇符包含選擇符用于定義具有層次關(guān)系的樣式規(guī)則 它由多個(gè)樣式選擇符組成 選擇符之間用空格隔開(kāi) 一般格式為 選擇符1選擇符2 屬性名1 值1 屬性名2 值2 例如 divh1 color red 這種方式只對(duì)div中包含的h1起作用 對(duì)單獨(dú)的div或h1均無(wú)效 6 并列選擇符如果有多個(gè)不同的樣式選擇符的樣式相同 則可以使用并列選擇符簡(jiǎn)化定義 每個(gè)樣式選擇符之間用逗號(hào)隔開(kāi) 一般格式為 選擇符1 選擇符2 屬性名1 值1 屬性名2 值2 例如 classone bb h1 color red 6 2主題 主題的創(chuàng)建與應(yīng)用主題中的外觀文件主題中的CSS樣式文件主題的動(dòng)態(tài)應(yīng)用 6 2 1主題的創(chuàng)建與應(yīng)用 使用主題的一般步驟如下 步驟1 定義一個(gè)或多個(gè)主題 在App Themes文件夾下創(chuàng)建一個(gè)或多個(gè)主題 然后將主題包含的文件 包括 css文件 skin文件 圖片文件 Flash動(dòng)畫(huà)文件及其他資源文件等 保存到相應(yīng)主題文件夾下 步驟2 將主題應(yīng)用到網(wǎng)頁(yè)中 用以控制頁(yè)面和控件外觀 創(chuàng)建完主題后 既可以在Web站點(diǎn)中局部應(yīng)用 也可以全局應(yīng)用 1 主題的局部應(yīng)用局部應(yīng)用是指將主題應(yīng)用于一張頁(yè)面上 通過(guò)在Page指令中添加Theme屬性實(shí)現(xiàn) 代碼如下 也可以在屬性窗口中通過(guò)可視化的方式指定主題 如圖所示 效果是一樣的 除了可以將主題應(yīng)用在一張頁(yè)面之外 也可以將主題應(yīng)用在某一個(gè)單一的服務(wù)器控件上 具體做法與設(shè)置頁(yè)面主題相似 即通過(guò)設(shè)置Theme屬性來(lái)實(shí)現(xiàn) 應(yīng)用一個(gè)主題到頁(yè)面上時(shí) ASP NET會(huì)檢查Web頁(yè)面上控件的屬性與主題中外觀文件中定義的屬性是否沖突 如果有沖突 將以外觀文件中定義的屬性為準(zhǔn) 也就是說(shuō) 如果頁(yè)面上應(yīng)用了外觀 那么在外觀文件中定義的屬性將具有優(yōu)先權(quán) 當(dāng)需要讓控件的屬性設(shè)置不被外觀文件中的設(shè)置覆蓋 此時(shí)可以使用StyleSheetTheme屬性來(lái)代替Theme屬性 那么在頁(yè)面中所有控件自定義的屬性將不會(huì)再被外觀文件覆蓋 為頁(yè)面添加樣式表主題的示例代碼如下所示 如果頁(yè)面內(nèi)同時(shí)定義StyleSheetTheme和Theme屬性指定主題 那么優(yōu)先級(jí)是Theme 內(nèi)容頁(yè)內(nèi)定義的屬性 StyleSheetTheme 2 主題的全局應(yīng)用全局應(yīng)用是指將主題應(yīng)用于整個(gè)站點(diǎn) 一般是通過(guò)配置文件實(shí)現(xiàn)的 在網(wǎng)站根目錄下的web config文件中為站點(diǎn)設(shè)置主題的部分代碼如下 當(dāng)配置了全局主題后 所有頁(yè)面將具有相同的主題 如果希望某個(gè)頁(yè)面例外 可在該頁(yè)面中的Page指令里使用EnableTheming屬性禁用主題 代碼如下 6 2 2主題中的外觀文件 外觀文件專門(mén)用于定義服務(wù)器控件的外觀 在一個(gè)主題中可以包含一個(gè)或多個(gè)外觀文件 其擴(kuò)展名為 skin 例6 5 演示外觀文件的定義方法 參見(jiàn)示例 第06章 ThemeDemo Theme1 Skin1 skin 6 2 3主題中的CSS樣式文件 主題中也可以添加CSS樣式文件來(lái)控制頁(yè)面中的HTML元素和Web服務(wù)器控件的外觀 主題中的CSS樣式將被應(yīng)用到所有應(yīng)用了主題的頁(yè)面上 例6 6 演示如何在主題中添加樣式文件 參見(jiàn)示例 第06章 ThemeDemo Theme1 Stylesheet1 css 6 2 4主題的動(dòng)態(tài)應(yīng)用 在ASP NET中可以讓用戶動(dòng)態(tài)地選擇主題 以達(dá)到換膚的效果 對(duì)于一個(gè)Web頁(yè)面來(lái)說(shuō) 只需要在PreInit事件中動(dòng)態(tài)地指定Theme屬性即可 示例代碼如下 protectedvoidPage PreInit objectsender EventArgse Theme Theme1 這種方式適合于為單一頁(yè)面動(dòng)態(tài)應(yīng)用主題 如果想要在整個(gè)網(wǎng)站范圍內(nèi)動(dòng)態(tài)應(yīng)用主題可以通過(guò)修改web config文件來(lái)實(shí)現(xiàn) 例6 7 演示如何動(dòng)態(tài)應(yīng)用主題實(shí)現(xiàn)換膚功能 參見(jiàn)示例 第06章 ThemeDemo 6 7 aspx 6 3母版頁(yè) 創(chuàng)建母版頁(yè)創(chuàng)建內(nèi)容頁(yè)母版頁(yè)的工作原理母版頁(yè)和內(nèi)容頁(yè)中的事件從內(nèi)容頁(yè)訪問(wèn)母版頁(yè)的內(nèi)容母版頁(yè)的嵌套 6 3 1創(chuàng)建母版頁(yè) 母版頁(yè)的主要特點(diǎn)是 為開(kāi)發(fā)人員提供了在已有頁(yè)面上進(jìn)行統(tǒng)一布局的功能 這樣做的好處是 開(kāi)發(fā)人員不必花時(shí)間考慮如何將統(tǒng)一的布局嵌套到各個(gè)頁(yè)面 在沒(méi)有母版頁(yè)技術(shù)的時(shí)候 這項(xiàng)工作需要編程來(lái)實(shí)現(xiàn) 比較復(fù)雜 在母版頁(yè)中可以包括靜態(tài)文本 HTML元素和ASP NET服務(wù)器控件等各種內(nèi)容 通常情況下 母版頁(yè)中包括各個(gè)頁(yè)面的通用部分 如導(dǎo)航條 頁(yè)眉 頁(yè)腳以及版權(quán)信息等 右圖所示為微軟公司MSDN網(wǎng)站的一張頁(yè)面 圈起的部分即為母版頁(yè)內(nèi)容 當(dāng)用戶從左邊的目錄樹(shù)選擇相應(yīng)條目進(jìn)行瀏覽時(shí) 會(huì)發(fā)現(xiàn)頁(yè)面框架并未發(fā)生變化 例6 8 設(shè)計(jì)母版頁(yè)效果如圖所示 參見(jiàn)示例 第06章 MasterDemo MasterPage master 6 3 2創(chuàng)建內(nèi)容頁(yè) 應(yīng)用母版頁(yè)的 aspx頁(yè)面稱為內(nèi)容頁(yè) 它實(shí)際上是通過(guò)內(nèi)容占位符控件與母版頁(yè)建立起關(guān)系 母版頁(yè)中定義的占位符 最終需要由內(nèi)容頁(yè)來(lái)代替 內(nèi)容頁(yè)中的內(nèi)容在運(yùn)行時(shí)將自動(dòng)綁定到特定的母版頁(yè)中 在內(nèi)容頁(yè)中 母版頁(yè)的ContentPlaceHolder控件預(yù)留的可編輯區(qū)會(huì)被自動(dòng)替換為Content控件 開(kāi)發(fā)人員只需要在Content控件區(qū)域中填充內(nèi)容即可 在母版頁(yè)中定義的其它標(biāo)記將自動(dòng)出現(xiàn)在使用了該母版頁(yè)的 aspx頁(yè)面中 例6 9 設(shè)計(jì)2個(gè)引用了例6 8中MasterPage master母版頁(yè)的內(nèi)容頁(yè)Default aspx和Study Resource aspx 運(yùn)行效果如圖所示 參見(jiàn)示例 第06章 MasterDemo Default aspx和Study Resource aspx 6 3 3母版頁(yè)的工作原理 母版頁(yè)的工作原理如下 1 用戶在瀏覽器中通過(guò)內(nèi)容頁(yè)的URL來(lái)請(qǐng)求訪問(wèn)Web頁(yè)面 2 獲取該頁(yè)后 讀取頁(yè)面的Page指令 如果該指令引用一個(gè)母版頁(yè) 則讀取相應(yīng)的母版頁(yè) 如果是第一次請(qǐng)求這兩個(gè)頁(yè) 則兩個(gè)頁(yè)都要進(jìn)行編譯 3 將內(nèi)容頁(yè)中各個(gè)Content控件的內(nèi)容合并到母版頁(yè)中相應(yīng)的ContentPlaceHolder控件中 生成結(jié)果頁(yè) 4 用戶瀏覽器中呈現(xiàn)服務(wù)器返回的由母版頁(yè)與內(nèi)容頁(yè)合并的結(jié)果頁(yè) 步驟 2 3 4 對(duì)用戶來(lái)說(shuō)是透明的 由服務(wù)器自動(dòng)完成 用戶只需提供內(nèi)容頁(yè)的URL即可 下圖對(duì)上述過(guò)程進(jìn)行了闡釋 6 3 4母版頁(yè)和內(nèi)容頁(yè)中的事件 母版頁(yè)和內(nèi)容頁(yè)都可以包含控件的事件處理程序 對(duì)于控件而言 事件是在本地處理的 即內(nèi)容頁(yè)中的控件在內(nèi)容頁(yè)中觸發(fā)事件 母版頁(yè)中的控件在母版頁(yè)中觸發(fā)事件 也就是說(shuō) 控件事件不會(huì)從內(nèi)容頁(yè)發(fā)送到母版頁(yè) 同樣 也不能在內(nèi)容中處理來(lái)自母版頁(yè)控件的事件 母版頁(yè)與內(nèi)容頁(yè)合并后事件的發(fā)生順序如下 母版頁(yè)控件Init事件 內(nèi)容頁(yè)控件Init事件 母版頁(yè)Init事件 內(nèi)容頁(yè)Init事件 內(nèi)容頁(yè)Load事件 母版頁(yè)Load事件 內(nèi)容控件Load事件 內(nèi)容頁(yè)P(yáng)reRender事件 母版頁(yè)P(yáng)reRender事件 母版頁(yè)控件PreRender事件 內(nèi)容控件PreRender事件 6 3 5從內(nèi)容頁(yè)訪問(wèn)母版頁(yè)的內(nèi)容 有時(shí)需要在內(nèi)容頁(yè)中訪問(wèn)母版頁(yè)的內(nèi)容 可以使用弱類型引用和強(qiáng)類型引用兩種類型 弱類型引用 調(diào)用FindControl方法進(jìn)行訪問(wèn) 顯式地給FindControl方法傳遞一個(gè)控件的ID值將返回值轉(zhuǎn)換成已知類型的控件訪問(wèn)控件屬性 stringstrSearch TextBox Master FindControl txtSearch Text 強(qiáng)類型引用 訪問(wèn)母版頁(yè)中公開(kāi)屬性和方法 母版頁(yè)中公開(kāi)屬性publicstringSearchText get returntxtSearch Text set txtSearch Text value 在內(nèi)容頁(yè)中對(duì)母版頁(yè)中屬性訪問(wèn)stringstrSearch Master SearchText 例6 10 演示如何從內(nèi)容頁(yè)訪問(wèn)母版頁(yè)的內(nèi)容 參見(jiàn)示例 第06章 MasterDemo MasterPage master和6 10 aspx 6 3 6母版頁(yè)的嵌套 有時(shí)一個(gè)母版頁(yè)需要引用另一個(gè)頁(yè)作為其母版頁(yè) 可以采用母版頁(yè)的嵌套技術(shù)實(shí)現(xiàn) 例6 11 嵌套母版頁(yè)示例程序 參見(jiàn)示例 第06章 MasterDemo 6 11 father master 6 11 child master和6 11 aspx 6 4小結(jié) CSS樣式控制主題母版頁(yè) 上機(jī)實(shí)訓(xùn) 詳見(jiàn)本書(shū)第6章后實(shí)訓(xùn)6 請(qǐng)學(xué)生獨(dú)立完成 習(xí)題 詳見(jiàn)本書(shū)第6章后習(xí)題部分 請(qǐng)學(xué)生獨(dú)立完成 本章結(jié)束