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

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

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