【正文】 le=float:left。注意兩個以粗體顯示的 div元素的 style 屬性將使得頁面的內(nèi)容顯示為兩列： body form id=form1 runat=server div style=float:left。 (1) 先為站點創(chuàng)建一個 Master 頁面。稍后會看到這是怎樣實現(xiàn)的。所需做的工作是在主題的文件夾中創(chuàng)建另一個 .skin文 件并在其中創(chuàng)建更多的控件定義。 (12) 將下面的代碼添加到藍色皮膚文件 ()中從而為 TreeView 和ImageButton 控件指定樣式： asp:TreeView runat=server ExpandDepth=1 FontNames=Century Gothic BorderColor=LightSteelBlue BorderStyle=Solid SelectedNodeStyle FontBold=True ForeColor=SteelBlue / RootNodeStyle FontBold=” True / NodeStyle ForeColor=MidnightBlue / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=SteelBlue / /asp:TreeView asp:ImageButton SkinId=homeImage runat=server ImageUrl=~/ / (13) 現(xiàn)在需要添加一些代碼，這些代碼類似于紅色皮膚文件 ()中的代碼，從而指定怎樣為一個 TreeView 控件設置樣式： asp:TreeView runat=server ExpandDepth=1 FontNames=Garamond BorderColor=Chocolate BorderStyle=Ridge SelectedNodeStyle FontBold=True ForeColor=Chocolate / RootNodeStyle FontBold=True / NodeStyle ForeColor=DarkRed / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=Chocolate / /asp:TreeView asp:ImageButton SkinId=homeImage runat=server ImageUrl=~/ / 創(chuàng)建主題所要做的事情就是這么多 —— 現(xiàn)在應該在 Chapter05 站點中擁有兩個主題：Blue 和 Red。 (9) 在 VWD 中打開 文件并將 Calendar控件和 Label控件的 HTML 代碼復制粘貼到這個皮膚文件中，然后刪除這些控件的 ID 標記。 圖 515 注意 Properties 窗格中為 Calendar 控件包含了很多不同的樣式選項。在 Solution Explorer 中右擊 C:\… \Chapter05 文件夾并選擇 Add New Item，選擇 Web Form并將該文件命名為 ，單擊 OK 從 而添加一個新頁面。 圖 513 單擊 Add。 (3) 右擊 App_Themes 文件夾并添加一個新的 Theme 文件夾 Red。右擊 Solution Explorer頂部的 C:\… \Chapter05文件夾并選擇 Add Folder→ Theme。因此，如果希望在 Web 頁面上包含兩個 Label 控件并使用一個主題為其中一個設置樣式， 那么可以使用如下語法： asp:Label ID=Label1 SkinID=textLabel runat=server Text=Label Styled label/asp:Label asp:Label ID=Label2 runat=server Text=LabelUnstyled label/asp:Label 這個示例中的 SkinId 屬性指定了用于控件的樣式，只要它是定義在頁面所使用的主題中。每個帶有皮膚文件的元素 都沒有 ID。 所有的主題都保存在一個名為 App_Themes 的應用程序文件夾中。另一種方式是將它用作 Customization 主題，這將改變您習慣使用的樣式選取規(guī)則，因為 Customizaton 主題將指定用于每個元素的樣式，覆蓋在單獨的樣式表中指定的所有樣式，或者甚至覆蓋元素的 style 屬性中指定的樣式。記住服務器控件必須轉(zhuǎn)換為標準的 HTML，而且如果瀏覽器理解在頁面上如何呈現(xiàn) JavaScript的話，還可能會有一些 JavaScript 腳本。 所要做的是提供一種機制，這種機制基于服務器端控件的類型而不是客戶端控件的類型來指定元素的外觀 ，因此當一個控件在不同的瀏覽器上顯示時，其一致性將能盡可能地保持。 This text is contained within an Panel control /div /form 如果在比較老的瀏覽器 (例如 Mozilla )中查看這個頁面，將產(chǎn) 生如下代碼： form name=form1 method=post action= id=form1 input type=hidden span=__VIEWSTATE id=__VIEWSTATE value=/wEPDwULLTEwODU4OTkxMzRkZHBovyeleyCJNtOpi+uco+l/zE5a / div id=Panel1 This text is contained within an Panel control /div /form 注意在兩種情況下 Panel 都被呈現(xiàn)為一個 div控件，但在第二種情況中，它丟失了高度和寬度信息。例如，一個簡單的 控件 Panel。 This is an label/span 注意在瀏覽器中自定義的樣式屬性被轉(zhuǎn)換為一個標準的 style 標記。相對而言， Label控件非常簡單，所以可對其添加的樣式不 是很多。任何定義在 Style 屬性中的樣式都將重寫那些在 CSS 文件中指定的樣式，從而使得開發(fā)人員可以調(diào)整頁面上特定元素的外觀。當把 CSS文件 拖放到設計區(qū)時，頁面的頂部將添加如下代碼： html xmlns= head runat=server titleStyled Page 2/title link href= rel=stylesheet type=text/css / /head 頁面頂部的這個鏈接告訴 Web 頁面到什么地方查找樣式信息。該操作一完成，頁面的外觀就將發(fā)生變化 (如圖 511)所示。 (6) 最后的收尾工作只有一件事情要做，那就是告訴 Web 頁面引用定義在 .css文件中的樣式。 另外還要注意到工具欄上的 Build Style 圖標；如果單擊這個按鈕，將啟動 Style Builder對話框。 } a:hover { textdecoration: none。Trebuchet MS39。 form id=form1 runat=server div class=HighlightedText This is highlighted text./div h1 class=HighlightedText This is also highlighted text./h1 diva href=This is a sample link/a/div /form (4) 該鏈接的后面添加一個換行符，并在該換行符的后面添加一個 的 Label控件。 (2) 從 div標記和標題，并刪除每個元素中的 style 屬性。 } 接下來可以將該樣式表鏈接到 Web 頁面，并在頁面中添加如下灰色部分代碼： form id=form1 runat=server div class=HighlightedTextThis is highlighted text./div h1 class=HighlightedTextThis is also highlighted text./h1 diva href=This is a sample link/a/div /form 在查看這個頁面時將看到如圖 58 所示的畫面。 textdecoration: underline。開發(fā)人員需要進行的所有工作就是創(chuàng)建一個擴展名為 .css 的文件，將 Web頁面內(nèi)的樣式信息復制到該文件中，并以如下方式添加該樣式表的鏈接： head runat=server titleStyled Page 2/title link href= rel=stylesheet type=text/css / /head 樣式表文件中只包含樣式信息，因此可以說現(xiàn)在已擁有一個包含所有樣式代碼的樣式表： .HighlightedText { fontfamily: 39。}: 這種技術對于創(chuàng)建要在多個頁面中使用樣式信息的站點并不理想，因為開發(fā)人員必須為站點內(nèi)的每個頁面 單獨地復制 style標記和樣式定義。 marginbottom:.0001pt。在保存該文件之后，作者查看了產(chǎn)生的源代碼，并發(fā)現(xiàn)了如下所示的樣式 定義，它們描述了在本章中使用的某些高亮區(qū)域是怎樣定義的： , , {margintop:0cm。 } /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 這些代碼和前面示例中所使用的代碼是一樣的。 在下一小節(jié)將首先介紹把樣式定義放在頁面上的 style標記內(nèi)的技術，然后再介紹怎樣引入外部的 CSS 樣式表。 完全使用 CSS 為頁面設置樣式的第一步就是決定要為每個元素設置什么樣的樣式并創(chuàng)建一組樣式定義。 textdecoration: underline。 也可以對樣式信息使用類似錨標記 (a)這種帶有特定變化的標記，從而在將鼠標放置在這些標記上時它們的外觀能夠自動發(fā)生變化，如下所示： a:link, a:visited { color: cc3300。開括號的位置可以緊跟在元素或類名的后面，也可以另起一行；例如， div 樣式可以重寫為如下形式： div{ fontfamily: 39。 為了將樣式用于元素，并不需要對元素本身進行任何修改；只要頁面知道在什么地方能夠找到樣式信息，樣式就可以自動地得以應用 (稍后將討論怎樣定位樣式信息 )。Trebuchet MS39。下面是一個樣式表的一部分代碼，其中分別定義了這兩種樣式： div { fontfamily: 39。 HTML 元素的樣式屬性的語法和樣式表中所使用的樣式語法完全一樣，下一小節(jié)將學習如何使用樣式表從而提高代碼的可維護性。 圖 56 操作回顧 現(xiàn)在這個頁面可能還不是很令人滿意，但修 改其外觀并不需要占用很多時間。Trebuchet MS39。這個操作將在 Source View 中自動添加如下代碼： div style=fontfamily: 39。我們將在另一個頁面使用這個對話框設置樣式。如果在屬性值內(nèi)的任意位置單擊鼠標，在屬性值的后面將會出現(xiàn)橢圓按鈕 (?) 。 borderbottom:solid 2pt navy。 這個初始站點僅僅包含了少數(shù)幾個文件，從而為進行本章中的示例做好了準備。color:red。本章將重點討論這個過程中涉及到的頁面樣式化、規(guī)則和層次結構 —— 在頁面上布局元素和放置內(nèi)容是站點設 計的一部分，本書從始至終都將討論這個主題。沒有這類元素的頁面一般只適用于特定的用戶；例如，開發(fā)人員為了驗證一個概念，或者希望嘗試一本書中的某種新技術。 本章討論了以下內(nèi)容： ● 為站點設置樣式，從為單個元素設置樣式到使用 CSS 樣式表 ● 在 VWD 中為應用程序開發(fā)樣式表 ● 使用 的主題 (theme)和皮膚 (skin)快速開發(fā)樣式化的 Web 頁面，使它們符合一致的外觀 ● 使用主題和皮膚為 Wrox United 添加樣式 另外，本章還討 論了實用性和可存取性，這是兩個重要的方面，在站點的開發(fā)過程中應給予充分考慮。站點的外觀多少包含一些美學因素，涉及到色彩和圖片的使用、頁面的布局以及在某種程度上還包括在瀏覽器上顯示的代碼樣式。Web應用程序的功能方面主要包括站點的結構、控件的行為、用戶經(jīng)驗、保護應用程序安全的代碼、當用戶單