頁面外觀設計與布局.ppt

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