【正文】 務(wù)器控件時(shí)可以專注于其中最常用的控件。服務(wù)器控件使得在服務(wù)器上處理可視的元素成為可能。如果該文件是項(xiàng)目的本地文件，那么 在服務(wù)器端應(yīng)為文件名加上前綴 ~/。頁(yè)面的主要內(nèi)容包含在一個(gè) div控件內(nèi)，其中是三個(gè)添加到該頁(yè)面的控件： 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 圖 327 現(xiàn)在看一看呈現(xiàn)的代碼 —— 在瀏覽器中打開該頁(yè)面時(shí)，選擇 View→ Source 菜單，查看div的內(nèi)容是如何變化的： div input name= TextBox1 type=text id=TextBox1 /br / img id=MyImage src= style=borderwidth:0px。 (7) 現(xiàn)在再次運(yùn)行該頁(yè)面并觀察結(jié)果，如圖 327 所示。如果希望將它們安排在不同的行上，只需切換到 Source View 并在每個(gè)控件的后面輸入 br / ，從而添加一個(gè) HTML 換行符。 圖 325 (5) 在頁(yè)面能夠成功運(yùn)行之前，必須先編輯這個(gè)控件，因此將光標(biāo)放置在 Hyperlink 定義內(nèi)的任意位置 上，然后將注意力轉(zhuǎn)移到屏幕右邊的 Properties 面板上 (如果該面板沒有顯示出來(lái)，如圖 325 所示，則需要將鼠標(biāo)放置到屏幕右邊的 Properties 選項(xiàng)卡上使 Properties 面板彈出來(lái)，或者選擇 View→ Properties Window 彈出該窗口 )。要強(qiáng)制顯示任何相關(guān)的 IntelliSense，按下 Ctrl+Space將相應(yīng)的內(nèi)容彈出來(lái)。 div asp:TextBox ID=TextBox1 runat=server/asp:TextBox /div (2) 在 Source View 中添加服務(wù)器控件時(shí)有兩個(gè)選擇；可以手動(dòng)輸入代碼，或者從工具箱中拖放控件，類似于在 Design View 中使用的技術(shù)。然而， Source View 在手動(dòng)編輯頁(yè)面和修改細(xì)微的問(wèn)題時(shí)非常有用，因此現(xiàn)在有必要研究一下這種模式，并熟悉它的功能。服務(wù)器接收到關(guān)于該頁(yè)面的請(qǐng)求，并從源請(qǐng)求中知道瀏覽器能夠理解 HTML，因此服務(wù)器將控件轉(zhuǎn)換為 HTML版本并與頁(yè)面的其他部分一起發(fā)送回瀏覽器。 這是客戶端代碼 —— 呈現(xiàn)的頁(yè)面輸出。 圖 319 圖 320 注意在地址欄內(nèi)顯示的數(shù)字 (在 localhost 后面 )是一個(gè)隨機(jī)數(shù)，每回第一次 開始調(diào)試時(shí)這個(gè)數(shù)字都會(huì)變化。 圖 318 (4) 如果沒有處于 Design View 中，則確保切換到這個(gè)模式并從屏幕左邊工具箱的Standard 區(qū)域雙擊 TextBox 控件 (如圖 319 所示 )向頁(yè)面添加文本框。這個(gè)“試一試”是一個(gè)非常簡(jiǎn)單的示例，它將演示 代碼和 HTML 代碼的區(qū)別。服務(wù)器讀取 代碼并進(jìn)行處理，將所有 特有的內(nèi)容轉(zhuǎn)換為 HTML 以及 (如果瀏覽器支持的話 )一些 JavaScript 代碼，然后將最新生成的 HTML 發(fā)送回瀏覽器。“執(zhí)行某些處理”就是 的功能所在。如果只是搭建一個(gè)靜態(tài)的 HTML 站點(diǎn)并希望測(cè)試輸出，這樣做是可以的，但是在開發(fā)網(wǎng)站時(shí)，無(wú)法要求用戶先下載網(wǎng)頁(yè)然后再查看！這就是為什么網(wǎng)站在部署之后，必須上載到 Web 服務(wù)器的 原因，每個(gè)人都可以通過(guò)它的URL(Uniform Resource Locator，統(tǒng)一資源定位符 )進(jìn)行訪問(wèn)。 ● HTML：簡(jiǎn)單的 HTML 元素。 ● Validation：可添加到網(wǎng)頁(yè)上驗(yàn)證用戶輸入的控件 (例如，確保特定的文本框中包含了數(shù)據(jù)，或者輸入的數(shù)據(jù)格式必須正確 )。開發(fā)人員不僅可以選擇標(biāo)準(zhǔn)的網(wǎng)頁(yè)元素(例如單選按鈕、超鏈接和下拉列表框等 )，還可以選擇其他類型的控件 (如圖 316 所示 )，這些類型包含了更多可用的控件。 在 ，服務(wù)器控件表現(xiàn) 為一個(gè)標(biāo)記；例如 asp:textbox…/。 當(dāng)說(shuō)到在 中創(chuàng)建動(dòng)態(tài)頁(yè)面時(shí)，最快的方法就是將服務(wù)器端控件拖放到頁(yè)面上、設(shè)置這些控件的屬性、最后編寫代碼定制它們的功能。在服務(wù)器上完成處理的代碼就是動(dòng)態(tài)服務(wù)器代碼，也是您在閱讀本書的過(guò)程中將要學(xué)習(xí)編寫的代碼。 圖 315 動(dòng)態(tài)客戶端代碼和動(dòng)態(tài)服務(wù)器代碼 將鼠標(biāo)放在 Wrox United 站點(diǎn)的菜單上會(huì)運(yùn)行一些代碼，這些代碼很可能是用 JavaScript編寫的，大多數(shù)瀏覽器都能理解和運(yùn)行這種編程語(yǔ)言，它用于向用戶輸入提供快速的響應(yīng)。 可以注意到，單擊這個(gè)菜單和單擊另一個(gè)不同的菜單之間沒有延遲 —— 頁(yè)面的反應(yīng)就像自己的系統(tǒng)一樣。 在單擊網(wǎng)頁(yè)表單中的按鈕時(shí)，用戶希望能發(fā)生一定的動(dòng)作 —— 大多數(shù)時(shí)候 (如果頁(yè)面的代碼編寫正確 )，確實(shí)會(huì)有動(dòng)作發(fā)生。 圖 314 在圖 314 中以高亮方式表示的錯(cuò)誤表明 br / 標(biāo)記應(yīng)該只出現(xiàn)在塊元素內(nèi)，例如一個(gè)div內(nèi)部。在 Inter Explorer 或 Firefox 的下一個(gè)版本出現(xiàn)的時(shí)候，這樣的站點(diǎn)出現(xiàn)問(wèn)題的機(jī)會(huì)最小。該頁(yè)面的第 4 部分專門介紹了XHTML 與標(biāo)準(zhǔn) HTML 之間的差異。 XHTML 規(guī)則的核心內(nèi)容如下： ● 總是使用閉標(biāo)記 (因此對(duì)每個(gè)段落總是同時(shí)使用 p和 /p)或使用自閉標(biāo)記 (例如用br/代替 br)。 也許保持代碼整齊和易于維護(hù)的最佳方法是堅(jiān)持一個(gè)普遍的標(biāo)準(zhǔn)。 熟悉這些 HTML 元素對(duì)所有 開發(fā)人員都是很必要的，不但要理解怎樣使用這些元素，還要知道如何按照標(biāo)準(zhǔn)恰當(dāng)?shù)厥褂盟鼈?，并確保所開發(fā)的站點(diǎn)能讓盡可能多的人訪問(wèn)。nbsp 用于表示不可分割的空格字符串；因此由一個(gè) amp。HelloWorld! 39。在創(chuàng)建帶有數(shù)據(jù)輸入表單的站點(diǎn)時(shí)，用于將數(shù)據(jù)傳送到服務(wù)器的元素必須包含在 form元素之內(nèi)。根據(jù)可訪問(wèn)性原則， div元素應(yīng)用于定位和布局，但很多站點(diǎn)仍然使用表格，因?yàn)樗容^容易開發(fā) table border=1 tr tdThe contents of a cell/td /tr /table a 錨 (anchor)元素。這個(gè)標(biāo)記將一個(gè)圖片放置到頁(yè)面上 img src= / div 類似段落的一塊文本。color:white These are my details, my favorite color, and my hobbies /div 在這個(gè)例子中， div… 和 /div是描述 div 元素的兩個(gè)標(biāo)記 (tag)， id=和 style=是屬性，這兩個(gè)標(biāo)記之間的文本是元素的內(nèi)容。 下面是一個(gè)簡(jiǎn)單的 HTML 元素： div id=divUserDetails style= width:300px。 如果對(duì) HTML 不熟悉，那么需要理解下面的幾個(gè)基本概念： ● HTML 文件是帶有一些附加括號(hào)的可閱讀的文本 —— 在瀏覽網(wǎng)頁(yè)的時(shí)候，Ｗ eb 瀏覽器知道怎樣將這些括號(hào)轉(zhuǎn)換為某些看起來(lái)很有趣的格式。 在這個(gè)示例中，練習(xí)了怎樣使用 HTML 進(jìn)行簡(jiǎn)單的頁(yè)面布局。 fontfamily: geia This is a simple static web page with an image and some interesting information about some places I have been:br / br / table cellspacing=3 cellpadding=3 border=1 tr 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 td img src= height=100 /br / A view of old parts of Budapest (Hungary) across the Danube./td /tr tr td style=height: 192px img src= width=100 /br / A castle on the end of a peninsula on the shores of Lake Garda, Italy./td td style=height: 192px img src= width=100 /br / Selfridges at the Bullring shopping centre a truly remarkable piece of architecture in Birmingham, UK.br //td /tr /table /body 在向頁(yè)面添加內(nèi)容完成之后，可以按下 Ctal+F5 查看該頁(yè)面。 圖 38 (8) 單擊屏幕底部的 Source 按鈕并看到由 VWD 產(chǎn)生的 HTML 代碼 (如圖 39所示 )。將表格設(shè)置為 2 行 2 列，如果喜歡可以設(shè)置邊框和間距 (padding)，如圖 36 所示。 圖 33 (4) 在彈出的 Add New Item 對(duì)話框中，選擇一個(gè)名為 的新 HTML 頁(yè)面，并單擊 Add(如圖 34 所示 )。確保將該基礎(chǔ)代碼放置在C:\BegASPNet2\Chapters\Begin\Chapter03\Samples文件夾下。 圖 31 靜態(tài)頁(yè)面讓作者想起了 1995年前后的 Web—— 那個(gè)時(shí)候我瀏覽過(guò)的大多數(shù)站點(diǎn)都很簡(jiǎn)單、普通，為不 同的布局編寫 HTML 表格足以占用我數(shù)個(gè)下午的時(shí)間。 本章討論如下內(nèi)容： ● 創(chuàng)建和布局靜態(tài)頁(yè)面 ● HTML 和 VWD 中的 HTML 查看器 ● 服務(wù)器控件和動(dòng)態(tài)內(nèi)容 ● Design View 下的配置控件 ● Web 控件庫(kù)中可用的控件 ● 向頁(yè)面添加動(dòng)態(tài)導(dǎo)航控件，讓這些控件運(yùn)行而無(wú)需編寫任何代碼 如果曾經(jīng)編寫過(guò) HTML 代碼，那么對(duì)本章中的某些內(nèi)容會(huì)比較熟悉，但 VWD提供的用于編寫 HTML 的工具集相當(dāng)復(fù)雜，所以還是有必要學(xué)習(xí)并體驗(yàn)這些工具帶來(lái)的新鮮感。在設(shè)計(jì)好站點(diǎn)的基本結(jié)構(gòu)之后，就需要決定怎樣呈現(xiàn)信息和用戶界面元素。開發(fā)人員的工作是確保所開發(fā)的站點(diǎn)不僅僅在功能上是正確的，而且以一種有意義的方式表現(xiàn)出來(lái)。設(shè)計(jì)一個(gè)站點(diǎn)顯然會(huì)涉及到多得多的拖放操作，但有些方法可以簡(jiǎn)化這個(gè)過(guò)程。假設(shè)有一個(gè)私人站點(diǎn)，其中有一個(gè)“ About Me”頁(yè)面—— 可能有時(shí)會(huì)修改這個(gè)頁(yè)面的內(nèi)容 (例如搬家、換工作或者結(jié)婚 )，但總體而言，每年最多只會(huì)修改幾次。 (1) 首先，如果已從 下載了本章的基 礎(chǔ)代碼，那么這些代碼將會(huì)有所 幫助。 圖 32 (3) 在右邊的 Solution Explorer 中 (如圖 33 所示 )，右擊 Chapter03 site并選擇 Add New Item。 (6) 接下來(lái)，從工具欄中選擇 Layout→ Insert Table 向頁(yè)面添加表格。 圖 36 圖 37 在設(shè)計(jì)區(qū)中添加表格之后，可以單擊屏幕底部的 table按鈕單獨(dú)選中頁(yè)面上的這個(gè)元素 (如圖 38 所示 )—— 開發(fā)人員可以修改屏幕右邊 Properties 窗口中的屬性值從而改變表格的間隔和邊框等屬性。下面的代碼是頁(yè)面完成后的版本，可以從 下載到該代碼 —— 注意 body標(biāo)記的 style屬性： body style=color: darkolivegreen。靜態(tài)元素，例如本例中使用的這些 (body標(biāo)記內(nèi)的簡(jiǎn)單文本框、表格以及圖片 )