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

　　

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