【正文】 圖 345 。刪除 Menu 控件并用 TreeView控件代替。 ● 隊員的名字和每個隊員的一些信息，在表格中顯示這些內容，如圖 344 所示。練習的答案在附錄 A 中。 這些練習可以幫助您更加熟悉 VWD的界面。 ● 開發(fā)人員只需要進行少量的工作就可以為站點添加復雜的導航功能。 ● 在 VWD 開發(fā)環(huán)境中，可以使用 的服務器控件迅速地構造一個復雜的站點，并且可以在 Design View 和 Source View 中添加這些控件。 ● XHTML 是 遵守一組嚴格規(guī)定的 HTML 版本，其目的是使目前和將來的瀏覽器都能理解同一種語言，從而消除開發(fā)站點時的一些不確定因素。 圖 343 本章討論了瀏覽器能理解的代碼和服務器控件之間的差別，其中服務器控件將由服務器轉換為可以在瀏覽器上顯示的格式。 注意在圖 343 中 Home 節(jié)點和 Fixtures 節(jié)點都是展開的，而 About 節(jié)點沒有展開。 部署該控件非常類似于部署 Menu 控件；只需將該控件拖放到頁面上并選擇使用SiteMapDataSource 控件提供數(shù)據(jù)。 5. TreeView控件 TreeView 和 Menu 控件在使用上非常類似，但顯示 的結果卻完全不同。 本章最后介紹的導航控件是 TreeView 控件。這些內容的風格由 CSS 控制。 除了這些屬性以外還有兩個屬性，它們幫助定義所顯示控件的可視風格。例如，在 向服務器提交數(shù)據(jù)時，對文本框中的值保持 不變。 ● AccessKey：設置鍵盤快捷鍵以增強可用性。 ● StaticSubMenuIndent：控制顯示了子菜單條目的縮進深度，如果這些菜單層級被設置為以靜態(tài)模式顯示。這個示例在 Properties 面板中設置了列表第一行的兩個屬性 (DataSourceID 和 StaticDisplayLevels)。 在這個示例中，對 Menu 控件的修改非常少，只是為它添加了一些屬性值。如果必須經(jīng)常處理以完全不同的格式 (以外的格式 )存儲的站點地圖數(shù)據(jù)，那么為了利用 SiteMapDataSource 控件，必須對SiteMapProvider 類進行自定義。如果在 Wrox United站點中將該屬性的值設置為 1，那么菜單將忽略第一級菜單項，而只顯示下面的一個層次結構，因此，在 Wrox United 的層次結構中，這將顯示 Future and Past Fixtures、 History、 News 以及類似的鏈接 StartingNodeUrl 在 文件中定義的表示頁面URL 的字符串 用于指定一 個啟動層次結構的不同位置。 表 33 屬 性 值 結 果 EnableViewSatae True/False 指定 SiteMapDataSource 控件在回傳 (postback)的時候是否保留數(shù)據(jù) ShowStartingNode True/False 指定在依賴于該數(shù)據(jù)源的控件上是否顯示根節(jié)點 SiteMapProvider 任何合法的提供程序 可用于指定一個自定義數(shù)據(jù)提供程序 (例如，如果站點地圖數(shù)據(jù)存儲在一個完全不同的結構之中，如 .csv 文件或數(shù)據(jù)庫，而不是 文件中，那么就必須設置這個屬性 ) StartFromCurrentNode True/False 如果設置為 true，那么只有當前節(jié)點 (活動頁面 )的子鏈接而不是整個層次結構會顯示出來 StartingNodeOffset 整數(shù)值 用于指定從哪個層次結構開始顯示。 SiteMapDataSource 控件本身不需要任何修改 (除了重新命名以外 )—— 默認情況下， SiteMapDataSource 將讀取 文件并扮演 Menu控件的中間人，以使它能夠根據(jù) 文件的內容顯示鏈接。 圖 342 注意可以將鼠標光標停留在 About 鏈接上，片刻之后一個包括 History 頁面的子菜單將顯示出來。 (5) 在該控件能以在完整版本的 Wrox United 站點中的方式工作之前，需要設置它的一些屬性值?，F(xiàn)在，選中 Menu 控件并在屬性窗口中將它的 StaticDisplayLevels 屬性設置為 2。在完成該設置之后，菜單將變?yōu)槿鐖D 340 所示。您將看到一個彈出的對話框，如圖 339 所示 —— 這是 Smart Tasks 窗口。 所有的鋪墊工作已經(jīng)完成 —— 接下來，將添加 Menu 控件本身。將光標放在頁面左邊的 nav div 中，如圖 337 所示 。在下面的“試一試”中，將在一個基于WroxUnited 應用程序的示例中添加這兩個控件。動態(tài)菜單使用由 產(chǎn)生的客戶端 JavaScript代碼 (同樣，不需要開發(fā)人員輸入任何代碼 )。在向頁面添加這個控件的時候，開發(fā)人員可以選擇將它設置為一個完全動態(tài)的菜單，以便整個站點的導航結構都可以顯示在菜單中，類似于 Windows 的 Start 菜單。 Menu 控件用于為 Wrox United 站點提供導航的功能，從而不必輸 入鏈接；讓我們看一看這是怎樣和SiteMapDataSource 控件聯(lián)系在一起的。這就是所有的操作。 3. SiteMapDataSource 控件 這個控件是非可視的控件，它用于以一種 Menu 和 TreeView 控件能夠理解的方式處理定義在 文件中的節(jié)點，從而可以修改這些控件將要顯示的內容。 表 32 屬 性 說 明 選項 (粗體表示默認值 ) RenderCurrentNodeAsLink 指定是否可以單擊活動節(jié)點，或者是否以普通文本顯示當前節(jié)點 True/False PathDirection 設置節(jié)點出現(xiàn)的順序是由根節(jié)點 到當前節(jié)點 (從左到右 )還是反過來 RootToCurrent/CurrentToRoot PathSeparator 設置所使用的節(jié)點之間的分隔符 ，任意 ASCII 字符 在學習了 SiteMapPath 控件的工作原理之后，我們將繼續(xù)學習其他兩個導航控件： Menu控件和 TreeView 控件。 另一個可以修改的內容是修改路徑分隔符字符，例如： asp:SiteMapPath ID=crumbs runat=server PathSeparator= : /asp:SiteMapPath 如果再次導航到 頁面，用戶將看到以下內容： Home : About : History 除了這兩個屬性之外，開發(fā)人員還可以設置其他很多屬性以定制這個控件。 2. SiteMapPath 控件的屬性 在前面的“試一試”練習中，添加了一個 SiteMapPath 控件，沒有進行任何修改該控件就可以顯示 文件中列出的節(jié)點。 因 此 ， 導 航 到?type=future 頁面時該控件上顯示的內容是： Home Fixtures Future Fixtures 下面的代碼顯示了 SiteMapPath 控件是怎樣添加到頁面的： div id=breadcrumbs asp:SiteMapPath ID=crumbs runat=server /asp:SiteMapPath /div 不用對控件進行任何定制 (不需要設置任何特定的屬性 )，就可以顯示 中的節(jié)點。下面是與您查看的節(jié)點相關的 代碼。只要向頁面添加這個控件就可以獲得該功能，因為在應用程序文件中已經(jīng)包含了一個 文件。圖 336 顯示了頁面底部呈現(xiàn)的 SiteMapPath 控件是如何變化的。注意作者瀏覽器中的 URL 是 號 (冒號后面的數(shù)字 )可能會與此不同。注意在圖 334 中鼠標光標高亮顯示該控件的 ID 屬性。 圖 333 (4) 忽略該控件的 Common Task 菜單 —— 這里只需要修 改控件的名稱。當在窗口右下方看到 divbreadcrumbs以高亮顯示時，表示找到了正確的控件，如圖 332 所示。確保位于 Design View 中。在下面的試一試中，將為站點添加這兩項內容，并查看添加導航功能是多么簡單。如果所看到的畫面與該圖不同，不用擔心 —— VWD 在顯示使用 CSS 的頁面時有些問題，所以不用滾動就可以看到大部分網(wǎng)頁。作者已經(jīng)修改了這個版本，從而使您可以完成這些練習。已經(jīng)有這個文件啦？是的！ (如果沒有，需要返回到第 2 章學習怎樣創(chuàng)建該文件！ ) 在創(chuàng)建 文件之后，添加 SiteMapPath 控件并查看結果就很容易了 —— 所需做的就是在頁面上添加該控件。 Wrox United 就是一個，如圖 330 所示。有些頁面以一種獨特的方式向服務器提交信 息，如果不再次提交信息將無法返回這個頁面。 breadcrumb可以幫助用戶返回到瀏覽路徑上的某個點，而不用依賴于瀏覽器的返回按鈕。 圖 330 術語 breadcrumb 很可能來源于一個古老的童話 Hansel and Gretel—— 兩個孩子到深林中探險，他們在身后留下一串面包碎屑以便能找到回家的路。 1. SiteMapPath 控件 這個控件用于為站點添加 breadcrumb 功能，幫助用戶查看位于站點中的什么層次結構。與使用舊版 開發(fā)人員的情況相比，這是一個非常大的改進 —— 以前在任務列表中每一項都需要耗費開發(fā)人員數(shù)小時的工作現(xiàn)在只需要數(shù)秒鐘的時間！ Menu、 TreeBiew和 SiteMapPath 控件是 的新控件，它們的使用快捷而簡單。在這個問題上沒有真正的對與錯，所以應該根據(jù)自己的判斷進行選擇，但應該注意到，可能會遇到使用其他方法編寫的代碼，這些方法仍然是有效可行的。例如，向 HTML div 和 table 元素添加runat=“ server”是作者通常使用的一種技術，如果我知道我希望根據(jù)用戶的輸入顯示或隱藏頁面的某部分，就可以把需要在服務器上處理的元素轉換為服務器控件，然后動態(tài)地控制它們的可視性。在選擇向頁面添加哪種類型的控件時，絕大多數(shù)開發(fā)人員的方法是在頁面上主要使用 的 Standard Server Control，而在布局時使用靜態(tài) HTML 元素。 2. 應該使用 HTML控件還是 這個問題實際上只與頁面上簡單的元素有關，例如文本框、按鈕和表格等。然而，一旦為某個元素添加了 runat=“ server”屬性 (并為其指定一個惟一的 ID)，例如一個 div 元素，接下來就可以使用運行在服務器上的代碼動態(tài)地指定這個 div 要顯示什么、以及應將它放置在什么位置。如將在第 6 章看到的那樣，當頁面提交 到服務器的時候，可以使用代碼動態(tài)地處理任何服務器控件 (由 HTML 元素轉換而來的或 的 )。可以將服務器端控件嵌入到類似這種用于布局頁面的靜態(tài)的、非服務器的HTML 元素內。例如，在 Table 控件中，可以在每個表格單元內嵌入 不同的控件。在 Source View 中，開發(fā)人員可以添加任意合法的 HTML 元素；例如，用于超鏈接的錨標記 a，或者用于突出顯示頁面某個部分文本的 span標記。如 果瀏覽工具箱上的這個區(qū)域 (如圖 329 所示 )，將看到諸如 Input(Text)文本框、 Table 控件以及 Div 等客戶端的 HTML 元素。在這種情況下，開發(fā)人員可能只想在頁面上添加靜態(tài)的 HTML 控件；例如，僅僅在頁面上放置一些元素以便為元素的分組提供容器。在下一章中，您對這個配置應用程序將會非常熟悉，它是在一個頁面上有多種控件的經(jīng)典示例。for：標簽后面是一個 TextBox 控件，再后面是一個 Button 控件。在這個畫面中能夠看到很多上面介紹的控件。 ● CheckBox 和 Radio Button 控件：用于選擇可選的附加信息，具體形式分別是 yes/no和“多選一 ”。 ● DropDown List 控件：用于向用戶提供一個可選擇的選項列表；該列表在沒有使用時會折疊起來以節(jié)省空間。 ● Image 控件：用于在頁面上顯示圖片。使用 Label 控件可以根據(jù)用戶的交互容易地修改頁面某個部分的文本。 ● Button 控件：