【正文】 開發(fā)任何 Web應用程序的過程都是圍繞著兩個主要方面進行的：功能和外觀。Web應用程序的功能方面主要包括站點的結構、控件的行為、用戶經驗、保護應用程序安全的代碼、當用戶單擊某個按鈕時會發(fā)生什么，等。站點的外觀多少包含一些美學因素，涉及到色彩和圖片的使用、頁面的布局以及在某種程度上還包括在瀏覽器上顯示的代碼樣式。一個成功的應用程序應努力在兩者之間保持平衡，既保證在視覺上給用戶享受，又保證使用上的簡單性，但很多站點在這個問題上都做得不好。 本章首先介紹為 Web 應用程序制作樣式的基本工具，然后介紹 Visual Web Developer 設置樣式的能力。在介紹編寫獨立的 CSS文件之前，先介紹為單個控件設置樣式的基礎知識，然后介紹主題 —— 一種為頁面和站點設置樣式的新技術。 本章討論了以下內容： ● 為站點設置樣式，從為單個元素設置樣式到使用 CSS 樣式表 ● 在 VWD 中為應用程序開發(fā)樣式表 ● 使用 的主題 (theme)和皮膚 (skin)快速開發(fā)樣式化的 Web 頁面，使它們符合一致的外觀 ● 使用主題和皮膚為 Wrox United 添加樣式 另外，本章還討 論了實用性和可存取性，這是兩個重要的方面，在站點的開發(fā)過程中應給予充分考慮。 為站點設置樣式 站點的首頁是訪客首先看到的頁面，雖然我們知道不能通過一本書的封面判斷其價值 (特別是 Wrox 出版社的書籍，不能通過作者的面部照片判斷書籍價值 )，但我們仍會根據(jù)書籍的外觀產生第一印象，無論是一種普通的反應 (一般吧，功能還可以，搜索框在哪里？ )，一種肯定的反應 (整潔、樸實、美觀，我想瀏覽其他頁面！ )，還是一種否定的反應 (哇，一團糟，我要到其他地方去！ )。第一印象是很重要的，因此必須正確處理！ 任何站點設計中都包 含有常見的元素；例如，一個顯示公司名稱的標題，站點主要內容的介紹，或者您瀏覽站點的原因。另外還會發(fā)現(xiàn)諸如菜單、搜索框、鏈接組、頁腳等區(qū)域。沒有這類元素的頁面一般只適用于特定的用戶；例如，開發(fā)人員為了驗證一個概念，或者希望嘗試一本書中的某種新技術。準確地放置這些元素是很重要的，就像組織站點的內容以符合站點的樣式一樣。 設置樣式和布局站點是 Web 開發(fā)中的一個有機整體。雖然布局站點是一個方面，但設置樣式可能更加復雜。本章將重點討論這個過程中涉及到的頁面樣式化、規(guī)則和層次結構 —— 在頁面上布局元素和放置內容是站點設 計的一部分，本書從始至終都將討論這個主題。 style 屬性 改變 Web 頁面上元素外觀的最快捷的方法是添加 style 屬性。 Web 頁面上任何可見的元素都具有 style 屬性。例如： div style=fontweight:bold。color:red。borderbottom:solid 2pt navyThis is a styled div tag/div 圖 51 顯示了這個 style 屬性在 Inter Explorer 中的效果。 圖 51 在下面的“試一試”練習中，首先將創(chuàng)建一個可以在其中進行本章所有示例的站點。 (1) 在 VWD 中，打開名為 Chapter05 的初始示例站點(C:\BegASPNET2\Chapters\Begin\)。 這個初始站點僅僅包含了少數(shù)幾個文件，從而為進行本章中的示例做好了準備。 (2) 添加一個新的空白 .aspx 頁面并將其命名為 。直接切換到Source View 并在 Form 標記之間輸入灰色部分的代碼： form id=form1 runat=server div style=fontweight:bold。 color:red。 borderbottom:solid 2pt navy。 This is a styled div tag /div /form 請注意 VWD 是如何幫助您輸入樣式信息的 (如圖 52所示 )。 圖 52 (3) 現(xiàn)在切換到 Design View 并觀察這些格式化信息是如何應用到頁面上的，如圖 53所示。 圖 53 (4) 注意屬性窗口是如何顯示 style 屬性值的。如果在屬性值內的任意位置單擊鼠標，在屬性值的后面將會出現(xiàn)橢圓按鈕 (?) 。單擊該按鈕將會看到如圖54所示的 Style Builder 對話框。 在為元素設置樣式時這個對話框非常有用，因為使用它可以不必記住每個樣式的語法。開發(fā)人員所需做的就是選擇希望應用于元素的樣式并單擊 OK 即可。我們將在另一個頁面使用這個對話框設置樣式。 圖 54 (5) 創(chuàng)建另一個 .aspx頁面并將其命名為 。在這個頁面中，需要添加一個 div元素，該元素內的文本是“ This is highlighted text”以及一個標題 1(h1)元素，該元素內的文本是“ This is also highlighted text”。 (6) 使用 Style Builder 對話框 (如圖 55所示 )將兩個元素的字體設置為Trebuchet MS，并將顏色設置為藏青色。這個操作將在 Source View 中自動添加如下代碼： div style=fontfamily: 39。Trebuchet MS39。Color: Navy。 This is highlighted text./div h1 style=fontfamily: 39。Trebuchet MS39。Color: Navy。 This is also highlighted text./h1 圖 55 (7) 在瀏覽器中查看該頁面以便瀏覽完成后的文檔。其內容應該類似圖 56所示。 圖 56 操作回顧 現(xiàn)在這個頁面可能還不是很令人滿意，但修 改其外觀并不需要占用很多時間。接下來就可以把這項技術用于站點上的每個元素。可以在一個站點中使用多種不同的樣式屬性，附錄 E中列出了一些最常用的元素，可以幫助開發(fā)人員為站點選擇最喜歡的樣式。 在學習了如何為頁面上的元素設置樣式之后，將樣式表嵌入代碼就不是什么復雜的問題了。 HTML 元素的樣式屬性的語法和樣式表中所使用的樣式語法完全一樣，下一小節(jié)將學習如何使用樣式表從而提高代碼的可維護性。 樣式表的概念從出現(xiàn)至今已有數(shù)年的時間 (它最初是由 W3C在 1996年 12月作為一個建議提出來的 )，每個設計得很優(yōu)秀的站點都包含有 一個定義明確的 CSS樣式表，這個樣式表為站點定義了一個特定的外觀。使用樣式表，開發(fā)人員可以定義頁面上每種類型的元素應怎樣顯示，同時還可以為特定的樣式創(chuàng)建定義并將其應用于頁面上的相關元素。例如，可以指定每個 div標記的實例都應包含藏青色的文本，或者也可以定義一個名為 HighlightedText的樣式類 (class)，然后將其應用于頁面上的所有 div標記以及類似的元素。下面是一個樣式表的一部分代碼，其中分別定義了這兩種樣式： div { fontfamily: 39。Trebuchet MS39。 Color: Navy。 } .HighlightedText { fontfamily: 39。Trebuchet MS39。 Color: Navy。 } 注意這兩者之間的惟一差別是 HighlightedText 類的前面有一個點號，這個類名是用戶自定義的。點號表示可以將這個區(qū)域作為一個類應用于任意元素，而不用為某種特定類型的元素定義默認樣式。 為了將樣式用于元素，并不需要對元素本身進行任何修改；只要頁面知道在什么地方能夠找到樣式信息，樣式就可以自動地得以應用 (稍后將討論怎樣定位樣式信息 )。然而，為元素指定某個 特定的自定義類樣式時，可以使用 Class 屬性，例如： div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 雖然在本書中看不到文本的顏色，但是可以看到在前面的樣式類定義的字體樣式已經應用于這兩個元素，如圖 57 所示。 圖 57 當然，如果親自進行這個練習，將看到字體呈藏青色。 1. 樣式的語法 樣式定義包含在花括號之間。開括號的位置可以緊跟在元素或類名的后面，也可以另起一行；例如， div 樣式可以重寫為如下形式： div{ fontfamily: 39。Trebuchet MS39。 Color: Navy。 } 可以任意選擇自己喜歡的樣式 —— 就作者個人而言，我喜歡將所有的括號放在一條垂直線上對齊。 也可以對樣式信息使用類似錨標記 (a)這種帶有特定變化的標記，從而在將鼠標放置在這些標記上時它們的外觀能夠自動發(fā)生變化，如下所示： a:link, a:visited { color: cc3300。 textdecoration: underline。 } a:hover { textdecoration: none。 } a:active { color: ff9900。 textdecoration: underline。 } 此代碼將在頁面上顯示帶有下劃線的紅色鏈接，當用戶將鼠標放在鏈接上時，下劃線將消失，而在單擊鏈 接時，它們立即變成淺橙色。通過這種方式可以提示用戶鼠標正位于某個鏈接之上，并且剛才單擊過某個鏈接。由逗號分隔開的兩個條目表示后面的樣式信息對它們都有效 (在這個示例中，逗號分隔的兩個條目是 a:link 和 a:visited)。 完全使用 CSS 為頁面設置樣式的第一步就是決定要為每個元素設置什么樣的樣式并創(chuàng)建一組樣式定義。 可以將樣式定義存放在兩個位置從而將其應用到 Web頁面上。第一個位置是將其存放在頁面頂部 head元素內的 style標記內。另一種選擇是創(chuàng)建一個獨立的外部樣式表來保存樣式定義，并將這個外部樣 式表文件鏈接到需要使用它的 Web頁面。 在下一小節(jié)將首先介紹把樣式定義放在頁面上的 style標記內的技術，然后再介紹怎樣引入外部的 CSS 樣式表。 2. 將樣式信息從 style屬性移到 style 區(qū)域 如果只對單個頁面設置樣式，則可以將樣式信息嵌入到頁面的 HTML 語言的 head標記內，如下所示： html xmlns= head runat=server titleStyled Page 1/title style .HighlightedText { fontfamily: 39。Trebuchet MS39。 Color: Navy。 } /style /head body form id=form1 runat=server div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 /form /body /html 這些代碼和前面示例中所使用的代碼是一樣的。注意怎樣使用 style標記在頁面的head區(qū)域內簡便地嵌入樣式信息。在單個頁面中使用這種技術是很好的 —— 實際上，如果曾經將 Word文檔保存為 HTML，將看到這種技術用于定義文檔的樣式從而使得該文檔呈現(xiàn)為 HTML。作者在 Word 2020中將這個文件保存為 Web Page(Filtered)，這種方式產生的 HTML代碼比在 Word 中將這個文件保存為 Web Page 時自動產生的標準代碼要整潔得多。在保存該文件之后，作者查看了產生的源代碼，并發(fā)現(xiàn)了如下所示的樣式 定義，它們描述了在本章中使用的某些高亮區(qū)域是怎樣定義的： , , {margintop:0cm。 marginright:0cm。 marginbottom:0cm。 marginleft:。 marginbottom:.0001pt。 lineheight:112%。 fontsize:。 fontfamily:Courier。}: 這種技術對于創(chuàng)建要在多個頁面中使用樣式信息的站點并不理想，因為開發(fā)人員必須為站點內的每個頁面 單獨地復制 style標記和樣式定義。對這種情況的解決方案是將樣式定義移到一個單獨的 CSS 文件中。 3. 將樣式信息移動到單獨的 CSS 文件中 這可能是最簡單的一個步驟。一旦將樣式定義封裝在 style標記之內以后，將這些信息提取到一個單獨的樣式表中實在是一件非常容易的事情。開發(fā)人員需要進行的所有工作就是創(chuàng)建一個擴展名為 .css 的文