【正文】 圖 325 (5) 在頁面能夠成功運行之前，必須先編輯這個控件，因此將光標放置在 Hyperlink 定義內(nèi)的任意位置 上，然后將注意力轉移到屏幕右邊的 Properties 面板上 (如果該面板沒有顯示出來，如圖 325 所示，則需要將鼠標放置到屏幕右邊的 Properties 選項卡上使 Properties 面板彈出來，或者選擇 View→ Properties Window 彈出該窗口 )。 (7) 現(xiàn)在再次運行該頁面并觀察結果，如圖 327 所示。如果該文件是項目的本地文件，那么 在服務器端應為文件名加上前綴 ~/。本章前面已經(jīng)列出控件的不同類型，在瀏覽可以添加到站點的服務器控件時可以專注于其中最常用的控件。 ● Image 控件：用于在頁面上顯示圖片。for：標簽后面是一個 TextBox 控件，再后面是一個 Button 控件。在 Source View 中，開發(fā)人員可以添加任意合法的 HTML 元素；例如，用于超鏈接的錨標記 a，或者用于突出顯示頁面某個部分文本的 span標記。然而，一旦為某個元素添加了 runat=“ server”屬性 (并為其指定一個惟一的 ID)，例如一個 div 元素，接下來就可以使用運行在服務器上的代碼動態(tài)地指定這個 div 要顯示什么、以及應將它放置在什么位置。在這個問題上沒有真正的對與錯，所以應該根據(jù)自己的判斷進行選擇，但應該注意到，可能會遇到使用其他方法編寫的代碼，這些方法仍然是有效可行的。 breadcrumb可以幫助用戶返回到瀏覽路徑上的某個點，而不用依賴于瀏覽器的返回按鈕。作者已經(jīng)修改了這個版本，從而使您可以完成這些練習。當在窗口右下方看到 divbreadcrumbs以高亮顯示時，表示找到了正確的控件，如圖 332 所示。圖 336 顯示了頁面底部呈現(xiàn)的 SiteMapPath 控件是如何變化的。 2. SiteMapPath 控件的屬性 在前面的“試一試”練習中，添加了一個 SiteMapPath 控件，沒有進行任何修改該控件就可以顯示 文件中列出的節(jié)點。這就是所有的操作。在下面的“試一試”中，將在一個基于WroxUnited 應用程序的示例中添加這兩個控件。在完成該設置之后，菜單將變?yōu)槿鐖D 340 所示。 SiteMapDataSource 控件本身不需要任何修改 (除了重新命名以外 )—— 默認情況下， SiteMapDataSource 將讀取 文件并扮演 Menu控件的中間人，以使它能夠根據(jù) 文件的內(nèi)容顯示鏈接。 在這個示例中，對 Menu 控件的修改非常少，只是為它添加了一些屬性值。例如，在 向服務器提交數(shù)據(jù)時，對文本框中的值保持 不變。 5. TreeView控件 TreeView 和 Menu 控件在使用上非常類似，但顯示 的結果卻完全不同。 ● XHTML 是 遵守一組嚴格規(guī)定的 HTML 版本，其目的是使目前和將來的瀏覽器都能理解同一種語言，從而消除開發(fā)站點時的一些不確定因素。練習的答案在附錄 A 中。 圖 345 。 這些練習可以幫助您更加熟悉 VWD的界面。 圖 343 本章討論了瀏覽器能理解的代碼和服務器控件之間的差別，其中服務器控件將由服務器轉換為可以在瀏覽器上顯示的格式。 本章最后介紹的導航控件是 TreeView 控件。 ● AccessKey：設置鍵盤快捷鍵以增強可用性。如果必須經(jīng)常處理以完全不同的格式 (以外的格式 )存儲的站點地圖數(shù)據(jù)，那么為了利用 SiteMapDataSource 控件，必須對SiteMapProvider 類進行自定義。 圖 342 注意可以將鼠標光標停留在 About 鏈接上，片刻之后一個包括 History 頁面的子菜單將顯示出來。您將看到一個彈出的對話框，如圖 339 所示 —— 這是 Smart Tasks 窗口。動態(tài)菜單使用由 產(chǎn)生的客戶端 JavaScript代碼 (同樣，不需要開發(fā)人員輸入任何代碼 )。 3. SiteMapDataSource 控件 這個控件是非可視的控件，它用于以一種 Menu 和 TreeView 控件能夠理解的方式處理定義在 文件中的節(jié)點，從而可以修改這些控件將要顯示的內(nèi)容。 因 此 ， 導 航 到?type=future 頁面時該控件上顯示的內(nèi)容是： Home Fixtures Future Fixtures 下面的代碼顯示了 SiteMapPath 控件是怎樣添加到頁面的： div id=breadcrumbs asp:SiteMapPath ID=crumbs runat=server /asp:SiteMapPath /div 不用對控件進行任何定制 (不需要設置任何特定的屬性 )，就可以顯示 中的節(jié)點。注意作者瀏覽器中的 URL 是 號 (冒號后面的數(shù)字 )可能會與此不同。確保位于 Design View 中。已經(jīng)有這個文件啦？是的！ (如果沒有，需要返回到第 2 章學習怎樣創(chuàng)建該文件！ ) 在創(chuàng)建 文件之后，添加 SiteMapPath 控件并查看結果就很容易了 —— 所需做的就是在頁面上添加該控件。 圖 330 術語 breadcrumb 很可能來源于一個古老的童話 Hansel and Gretel—— 兩個孩子到深林中探險，他們在身后留下一串面包碎屑以便能找到回家的路。例如，向 HTML div 和 table 元素添加runat=“ server”是作者通常使用的一種技術，如果我知道我希望根據(jù)用戶的輸入顯示或隱藏頁面的某部分，就可以把需要在服務器上處理的元素轉換為服務器控件，然后動態(tài)地控制它們的可視性。如將在第 6 章看到的那樣，當頁面提交 到服務器的時候，可以使用代碼動態(tài)地處理任何服務器控件 (由 HTML 元素轉換而來的或 的 )。如 果瀏覽工具箱上的這個區(qū)域 (如圖 329 所示 )，將看到諸如 Input(Text)文本框、 Table 控件以及 Div 等客戶端的 HTML 元素。在這個畫面中能夠看到很多上面介紹的控件。使用 Label 控件可以根據(jù)用戶的交互容易地修改頁面某個部分的文本。這些控件和它們的最終顯示形式看起來是一樣的，但是前者的功能要多得多。 TextBox 控件直接映射為 HTML 的 input元素。 body form id=form1 runat=server div asp:TextBox ID=TextBox1 runat=server/asp:TextBoxbr / asp:Image ID=MyImage runat=server ImageUrl=~/ /br / asp:HyperLink ID=HyperLink1 runat= server NavigateUrl=Visit Wrox United Online! /asp:HyperLink /div /form /body 圖 326 請注意屏幕底部 Design 和 Source 按鈕右邊的工具條；包含光標當前所在位置的元素將以橙色高亮顯示出來 (如圖 326 所示 )。 圖 324 (4) 再向頁面添加一個控件；這一次，使用雙擊的技術進行添加。 (1) 回到 VWD 并確保位于 頁面的 Source View 中 (單擊窗口底部的Design 和 Source 按鈕在兩種模式之間進行切換 )。 圖 321 圖 322 需要注意的代碼是描述服務器控件的代碼，該控件的 ID 是 TextBox1。 瀏覽器將啟動并 顯示該頁面。這是一個必須理解的關鍵概念，服務器所執(zhí)行的處理過程將在第 6 章詳細討論。然而，如果服務器上安裝了所需的軟件，那么就可以提供更多的功能，而不僅僅是靜態(tài) HTML 頁面。 ● Login：一組控件，用于簡化從一個完全開放的站點轉移到具有個人特色的站點。 這一節(jié)首先查看一些可以使用的控件的類型，然后討論它們?nèi)绾喂ぷ?。您可能已?jīng)聽說過 PHP 和 JSP(Java Server Pages)—— 開發(fā)人員也使用這兩種語言編寫服務器端代碼。單擊頁面表單上的按鈕或鏈接可能會需要更長的時間才能響應。到目前為止您還沒有創(chuàng)建過動態(tài)內(nèi)容，那就讓我們看看如何創(chuàng)建更令人興奮的頁面吧。隨著類似 Firefox 這樣更新的Ｗ eb 瀏覽器開始搶占 Microsoft Inter Explorer 的生存空間，很重要的一點就是所有開發(fā)商在未來的產(chǎn)品開發(fā)計劃中都要遵循 XHTML 規(guī)則，從而避免開發(fā)出來的站點在 Inter Explorer 上工作得很好，而在 Netscape 上看起來卻非常丑陋這種老問題的出現(xiàn)。 圖 312 從 HTML 到 XHTML 代碼 雖然大多數(shù)人都談論 HTML 代碼，事實上如果編寫出色的 HTML 代碼，其實就是在編寫 XHTML。 hr/元素顯示一條橫跨頁面的水平線 This is a string of text with a linebr/ break and aamp。如果其 type 屬性設置為 submit，它將顯示為一個按鈕，在單擊該按鈕時，表單將被提交給服務器 form id=form1 runat=server input id=Text1 type=text/ input id=Submit1 type=submit value=submit/ /form (續(xù)表 ) 元 素 說 明 用 法 示 例 title link 在頁面的 head區(qū)域， title元素控制了在頁面的標題欄顯示的文本。例如，要將兩個 div元素并排放置，可以為其中一個 元素設置 float:left 樣式，而為另一個設置 float:right 樣式 div style=float:leftLefthand content here/div div style=float:right Righthand content here/div span 用于格式化文本中的字符的標記，因此可以用 span標記包住一句話中的一個詞語，并讓該標記設置為粗體字以突出該詞語 divSome standard text with a span style=fontweight:boldbold/span word in the middle/div table tr td table元素中包含了行 (tr)和列(td)。float:left。 fontfamily: geia 這些屬性將應用于 body的開標記和閉標記之間的所有元素上，也就是頁面上所有可見的內(nèi)容。 圖 39 (9) 為了完成這個示例，作者添加了一些 文本和圖片。 圖 35 不用在意具體的文本 —— 這只是一個簡單的示例，沒有必要將該頁面在Web 上發(fā)布。 啟動 VWD！這個練習不需要什么思考 —— 只要按照每個步驟操作，同時好好體驗這項技術就可以了?；貞浺幌拢呀?jīng)通過從 VWD 的工具箱中拖放控件的方式創(chuàng)建了一些內(nèi)容很簡單的頁面。 在 VWD 的協(xié)助下， 具有一些用于設計和布局頁面的強大工具。下面是一個簡單的練習 —— 創(chuàng)建一個非常簡單的頁面并在 HTML 視圖中研究這個頁面的代碼，查看 HTML 元素是怎樣組織的。 圖 34 (5) 切換到 Design View 并輸入一些文本，如圖 35 所示。稍做修改即可為圖片添加一些樣式和鏈接。例如，將頁面上的元素放置在 HTML 表格中，每個表格單元中都包含了一些文本和圖片： td img src= height=100 /br / A church near Faja Grande, a small town on the westernmost edge of Flores one of the 9 islands in the Azores. /td 這個頁面的 body標記附帶了一些樣式，這些樣式指定了頁面的顏色和文本的字體： body style=color: