【導讀】一個設計成功的網站應該易于使用、直觀而且表示清晰。開發(fā)人員的工作是。在設計好站點的基本結構之后，就需要決定怎樣呈現信息和用戶界面元素。在VWD的協助下，具有一些用于設計和布局頁面的強大工具。設計一個站點顯然會涉及到多得多的拖放操作，但有些方法可以簡化這個過。單、或者響應用戶的輸入。依據定義，靜態(tài)頁面包含不會發(fā)生改變(或者至少不。假設有一個私人站點，其中有一個“AboutMe”頁面。言，每年最多只會修改幾次。站點都很簡單、普通，為不同的布局編寫HTML表格足以占用我數個下午的時間。個頁面的代碼，查看HTML元素是怎樣組織的。這個練習不需要什么思考——只要按照每個步驟操作，同時好。好體驗這項技術就可以了。確保將該基礎代碼放置在。打開VWD并從主菜單中選擇OpenWebSite。Chapter03文件夾并單擊Open所示。在獲得表格之后，就可以在每個表格單元中添加內容了。口中的屬性值從而改變表格的間隔和邊框等屬性。以在屏幕右邊的Properties窗格中修改屬性，或者手工修改代碼。

　　

【正文】 MapPath 控件的工作原理之后，我們將繼續(xù)學習其他兩個導航控件： Menu控件和 TreeView 控件。然而，要在頁面上使用這兩個控件，需要添加一個不同類型的控件為它們提供數據；該控件是 SiteMapDataSource。 3. SiteMapDataSource 控件 這個控件是非可視的控件，它用于以一種 Menu 和 TreeView 控件能夠理解的方式處理定義在 文件中的節(jié)點，從而可以修改這些控件將要顯示的內容。 要在站點中添加這個控件，只需拖動一個副本到頁面上。這就是所有的操作。 VWD 產生的代碼在 Source View 中如下所示： asp:SiteMapDataSource ID=SiteMapDataSource1 runat=server / 在下一個“試一試”練習中，將自行添加這個控件以便可以使用 Menu 控件。 Menu 控件用于為 Wrox United 站點提供導航的功能，從而不必輸 入鏈接；讓我們看一看這是怎樣和SiteMapDataSource 控件聯系在一起的。 4. Menu 控件 Menu 控件提供靜態(tài)和動態(tài)混合的菜單功能。在向頁面添加這個控件的時候，開發(fā)人員可以選擇將它設置為一個完全動態(tài)的菜單，以便整個站點的導航結構都可以顯示在菜單中，類似于 Windows 的 Start 菜單。另一種選擇是，可以采取一種更傳統的方法，可使用固定菜單，或者使用混合這兩種功能的方法。動態(tài)菜單使用由 產生的客戶端 JavaScript代碼 (同樣，不需要開發(fā)人員輸入任何代碼 )。 為了向站點添加 Menu 控件，首先必須添加 SiteMapDataSource 控件，這個控件指定了菜單可以顯示的鏈接以及這些鏈接出現的順序。在下面的“試一試”中，將在一個基于WroxUnited 應用程序的示例中添加這兩個控件。 (1) 打開 文件并切換到 Design View。將光標放在頁面左邊的 nav div 中，如圖 337 所示 。 (2) 在將一個 SiteMapDataSource 控件 (圖 338 和 339 都高亮顯示這個控件 )拖放到 nav div 內的頁面上 (該控件位于工具箱的 Data 面板上 )，并在屬性窗口中將該控件命名為siteData。 所有的鋪墊工作已經完成 —— 接下來，將添加 Menu 控件本身。 圖 337 圖 338 (3) 將 Menu 控件拖放到緊靠 SiteMapDataSource 控件右邊緣的地方。您將看到一個彈出的對話框，如圖 339 所示 —— 這是 Smart Tasks 窗口。 在這個對話框中，選擇在第 3 步中創(chuàng)建的 siteData 數據源。在完成該設置之后，菜單將變?yōu)槿鐖D 340 所示。 圖 339 圖 340 (4) 單擊菜單右上角的小箭頭關閉該菜單。現在，選中 Menu 控件并在屬性窗口中將它的 StaticDisplayLevels 屬性設置為 2。您將會立即看到變化，如圖 341 所示。 (5) 在該控件能以在完整版本的 Wrox United 站點中的方式工作之前，需要設置它的一些屬性值。切換到 Source View 并在代碼中添加如下屬性： asp:Menu ID=Menu1 runat=server DataSourceID=siteData StaticDisplayLevels=2 orientation=Vertical StaticSubMenuIndent=0 disappearafter=200 AccessKey=m EnableViewState=false DynamicMenuStyle CssClass=dynamicMenu / DynamicMenuItemStyle CssClass=dynamicMenuItem / /asp:Menu 圖 341 (6) 現在再次運行站點 (按下 Ctrl+F5 不帶調試功能啟動站點 )，將看到如圖 342 所示的畫面。 圖 342 注意可以將鼠標光標停留在 About 鏈接上，片刻之后一個包括 History 頁面的子菜單將顯示出來。這就是動態(tài)菜單的最佳形式 —— 很不錯吧！ 操作回顧 添加到 Master 頁面的 Menu 控件將讀取 SiteMapDataSource 控件 (siteData)的內容并根據保存在該數據 源中的數據顯示一組鏈接。 SiteMapDataSource 控件本身不需要任何修改 (除了重新命名以外 )—— 默認情況下， SiteMapDataSource 將讀取 文件并扮演 Menu控件的中間人，以使它能夠根據 文件的內容顯示鏈接。 如果需要，可以使用表 33 所示的屬性定制 SiteMapDataSource。 表 33 屬 性 值 結 果 EnableViewSatae True/False 指定 SiteMapDataSource 控件在回傳 (postback)的時候是否保留數據 ShowStartingNode True/False 指定在依賴于該數據源的控件上是否顯示根節(jié)點 SiteMapProvider 任何合法的提供程序 可用于指定一個自定義數據提供程序 (例如，如果站點地圖數據存儲在一個完全不同的結構之中，如 .csv 文件或數據庫，而不是 文件中，那么就必須設置這個屬性 ) StartFromCurrentNode True/False 如果設置為 true，那么只有當前節(jié)點 (活動頁面 )的子鏈接而不是整個層次結構會顯示出來 StartingNodeOffset 整數值 用于指定從哪個層次結構開始顯示。如果希望Menu 控件只顯示子鏈接，而不是整個站點的完整結構，那么這個屬性會有用。如果在 Wrox United站點中將該屬性的值設置為 1，那么菜單將忽略第一級菜單項，而只顯示下面的一個層次結構，因此，在 Wrox United 的層次結構中，這將顯示 Future and Past Fixtures、 History、 News 以及類似的鏈接 StartingNodeUrl 在 文件中定義的表示頁面URL 的字符串 用于指定一 個啟動層次結構的不同位置。 將菜單綁定到 SiteMapDataSource 控件是從 數據文件創(chuàng)建鏈接層次結構的一種簡便方法，但使用這個控件還可以完成更多的事情，包括綁定到完全不同的數據源，將控件 (除 Menu 控件以外 )與數據相結合。如果必須經常處理以完全不同的格式 (以外的格式 )存儲的站點地圖數據，那么為了利用 SiteMapDataSource 控件，必須對SiteMapProvider 類進行自定義。創(chuàng)建自定義的數據提供程序是一個相當復雜的過程 (這已超出本章的討論范 圍 )，要獲得關于該過程的更多信息，可以參考由 Bill Evjen 編寫、 Wrox 出版社出版的 Professional 。 在這個示例中，對 Menu 控件的修改非常少，只是為它添加了一些屬性值。下面的代碼顯示了添加的屬性值： asp:Menu ID=Menu1 runat=server DataSourceID=siteData StaticDisplayLevels=2 orientation=Vertical StaticSubMenuIndent=0 disappearafter=200 AccessKey=m EnableViewState=false DynamicMenuStyle CssClass=dynamicMenu / DynamicMenuItemStyle CssClass=dynamicMenuItem / /asp:Menu Menu 控件本身的其他屬性都很簡單。這個示例在 Properties 面板中設置了列表第一行的兩個屬性 (DataSourceID 和 StaticDisplayLevels)。其他屬性控制如 下內容： ● Orientation：用于在頁面上設置一個水平菜單條。 ● StaticSubMenuIndent：控制顯示了子菜單條目的縮進深度，如果這些菜單層級被設置為以靜態(tài)模式顯示。 ● DisappearAfter：指定彈出式菜單在消失前的可視時間長度。 ● AccessKey：設置鍵盤快捷鍵以增強可用性。 ● EanbleViewstate： 的功能之一，如果將其設置為 true，則頁面在回送到服務器時會維護控件的狀態(tài)。例如，在 向服務器提交數據時，對文本框中的值保持 不變。這個控件沒有必要使用該屬性，而且將其禁用將對頁面的性能有微小的改 善。 除了這些屬性以外還有兩個屬性，它們幫助定義所顯示控件的可視風格。DynamicMenuStyle 控制彈出式菜單本身的外觀，而 DynamicMenuItemStyle 控制鏈接的外觀。這些內容的風格由 CSS 控制。第 5 章將詳細介紹。 本章最后介紹的導航控件是 TreeView 控件。這個控件在用法上非常類似于 Menu 控件。 5. TreeView控件 TreeView 和 Menu 控件在使用上非常類似，但顯示 的結果卻完全不同。使用 TreeView控件，其實就類似于使用 Windows Explorer 處理保存在文件系統內的文件、展開或折疊帶有子層次結構的節(jié)點。 部署該控件非常類似于部署 Menu 控件；只需將該控件拖放到頁面上并選擇使用SiteMapDataSource 控件提供數據。如果在 Wrox United 站點上使用該控件，那么頁面將如圖343 所示。 注意在圖 343 中 Home 節(jié)點和 Fixtures 節(jié)點都是展開的，而 About 節(jié)點沒有展開。如果重新放置這個控件，那么除了一些細小的樣式差異之外，可以輕松地使用這個 控件代替Menu 控件進行導航。 圖 343 本章討論了瀏覽器能理解的代碼和服務器控件之間的差別，其中服務器控件將由服務器轉換為可以在瀏覽器上顯示的格式。具體地說，現在應該熟悉了以下內容： ● HTML 是瀏覽器可以理解的語言，用于 Web 編程，形成我們可以在任意站點上查看的網頁。 ● XHTML 是 遵守一組嚴格規(guī)定的 HTML 版本，其目的是使目前和將來的瀏覽器都能理解同一種語言，從而消除開發(fā)站點時的一些不確定因素。 ● 客戶端代碼和服務器端代碼是兩個不同的實體；服務器端代碼在服務器上處理，并轉換成瀏覽器可以理解的客戶端代碼。 ● 在 VWD 開發(fā)環(huán)境中，可以使用 的服務器控件迅速地構造一個復雜的站點，并且可以在 Design View 和 Source View 中添加這些控件。 ● 服務器控件 (由服務器 )轉換為瀏覽器可以理解的 HTML，如果瀏覽器支持 JavaScript 的話，服務器將同時產生用于操作動態(tài)客戶端元素的 JavaScript 代碼。 ● 開發(fā)人員只需要進行少量的工作就可以為站點添加復雜的導航功能。 下一章首先討論怎樣通過服務器控件個性化站點以及用于站點登錄的優(yōu)雅的 功能。 這些練習可以幫助您更加熟悉 VWD的界面。示例代碼 (從 )是一個最終解決方案，但顯然可以通過親自嘗試這些練習學到更多知識。練習的答案在附錄 A 中。 (1) 練習使用 VWD 的拖放功能創(chuàng)建一個包含如下信息的簡單站點： ● WroxUnited 圖標 (可免費從 下載 —— 或自己選擇一個小圖片 )。 ● 隊員的名字和每個隊員的一些信息，在表格中顯示這些內容，如圖 344 所示。 圖 344 (2) 在本章的 Wrox United 站點版本中打開 Master 頁面。刪除 Menu 控件并用 TreeView控件代替。將該控件綁定到 siteData數據源 —— 您將在 Design View中 (如圖 345所示 )或運行該頁面的時候 (如前面的圖 343所示 )看到一個完整的樹型結構。 圖 345