【正文】 在菜單上時，瀏覽器已經(jīng)知道要顯示的是什么內(nèi)容了。瀏覽器在顯示這些菜單的內(nèi)容時確實執(zhí)行了一些本地代碼。用戶可能會通過單擊一個按鈕提交訂單購買一些 CD。如果將頁面的第一部分放置到一個 div元素中，則這個錯誤就不存在了，而頁面的外觀不會發(fā)生任何變化： div div style=float:leftLefthand content here/div div style=float:rightRighthand content here/div br / /div 自動產(chǎn)生的所有代碼都遵循 XHTML 的規(guī)則。 Visual Web Developer 有一個強(qiáng)大的功能可幫助開發(fā)與各種標(biāo)準(zhǔn)兼容的網(wǎng)站。 實質(zhì)上， XHTML 的目標(biāo)是同時為 Web 開發(fā)人員和瀏覽器開發(fā)人員提供一組普遍的規(guī)則。 ● 標(biāo)記和屬性的名稱必須小寫 (因此 div id=myDiv是可以接受的，但 Div ID=myDiv就不是 )，因為 XHTML 是區(qū)分大小寫的 (因此 div、 Div和 DIV在 XHTML 中是不同的實體 )。在介紹 XHTML 時將引入 Web 開發(fā)中的更多原則，遵守這些規(guī)則是提高技術(shù)的一種非常好的方法。 編寫 HTML 代碼很容易形 成無法維護(hù)的局面，因為到處都是標(biāo)記和樣式。nbsp字符分隔的兩個詞語 (或元素 )不能分別放置在兩行上。)。 HTML 的input元素具有多種變體；如果其 type屬性設(shè)置為 text，那么該元素在屏幕上顯示為一個文本框。在頁面上定義一個超鏈接，使得開發(fā)人員同時可以指定目標(biāo)內(nèi)容Some text with a a href= hyperlink in it (在屬性 href 中 )和顯示給用戶的文本 head body HTML 頁面的兩個主要部分是 head和body。使用 div標(biāo)記的各種屬性，可以將包含在該標(biāo)記元素內(nèi)的文本放置在頁面上的任何位置。 ● 呈現(xiàn)是將 HTML 代碼轉(zhuǎn)換為可視元素的過程，因此前面的代碼將呈現(xiàn)為圖 311 所示的頁面。height:100px。 ● 括號內(nèi)的內(nèi)容稱為元素 (element)，但嚴(yán)格地說，元素通常由開標(biāo)記和閉標(biāo)記組成，有時在這一對標(biāo)記之間會包含文本或其他 HTML 元素。例如，將頁面上的元素放置在 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標(biāo)記附帶了一些樣式，這些樣式指定了頁面的顏色和文本的字體： body style=color: darkolivegreen。結(jié)果頁面如圖310 所示 (該圖與圖 31 一樣 )。稍做修改即可為圖片添加一些樣式和鏈接。 (7) 在獲得表格之后，就可以在每個表格單元中添加內(nèi)容了。 圖 34 (5) 切換到 Design View 并輸入一些文本，如圖 35 所示。 (2) 打開 VWD 并從主菜單中選擇 Open Web Site。下面是一個簡單的練習(xí) —— 創(chuàng)建一個非常簡單的頁面并在 HTML 視圖中研究這個頁面的代碼，查看 HTML 元素是怎樣組織的。 靜態(tài)頁面設(shè)計 術(shù)語靜態(tài)表示頁面只是用于查看的，圖 31 顯示了一個示例， Inter 上有很多這樣的頁面 (想像一下只有文本、或者只有一系列圖片的 HTML 頁面 )—— 開發(fā)人員并不總是需要讓站點(diǎn)的每個頁面上都包含一個用于提交信息的表單、或者響應(yīng)用戶的輸入。 在 VWD 的協(xié)助下， 具有一些用于設(shè)計和布局頁面的強(qiáng)大工具。 靜態(tài)頁面設(shè)計（ 1） 一個設(shè)計成功的網(wǎng)站應(yīng)該易于使用、直觀而且表示清晰?；貞浺幌?，您已經(jīng)通過從 VWD 的工具箱中拖放控件的方式創(chuàng)建了一些內(nèi)容很簡單的頁面。依據(jù)定義，靜態(tài)頁面包含不會發(fā)生改變 (或者至少不會頻繁發(fā)生改變 )的內(nèi)容。 啟動 VWD！這個練習(xí)不需要什么思考 —— 只要按照每個步驟操作，同時好好體驗這項技術(shù)就可以了。在彈出的對話框中，選擇Chapter03 文件夾并單擊 Open(如圖 32)所示。 圖 35 不用在意具體的文本 —— 這只是一個簡單的示例，沒有必要將該頁面在Web 上發(fā)布。試著在一個單元格中添加一些文本，然后從 VWD 窗口左邊的工具箱的 HTML 面板中拖放一個圖片標(biāo)記到頁面上，如圖 37 所示。 圖 39 (9) 為了完成這個示例，作者添加了一些 文本和圖片。 圖 310 操作回顧 在學(xué)習(xí)本章的過程中，您將更加熟悉在設(shè)計窗口中添加布局元素的技術(shù)，可以在屏幕右邊的 Properties 窗格中修改屬性，或者手工修改代碼。 fontfamily: geia 這些屬性將應(yīng)用于 body的開標(biāo)記和閉標(biāo)記之間的所有元素上，也就是頁面上所有可見的內(nèi)容。有些元素只有一個標(biāo)記。float:left。 圖 311 表 31 包含了一些可能遇到的 HTML 元素。例如，要將兩個 div元素并排放置，可以為其中一個 元素設(shè)置 float:left 樣式，而為另一個設(shè)置 float:right 樣式 div style=float:leftLefthand content here/div div style=float:right Righthand content here/div span 用于格式化文本中的字符的標(biāo)記，因此可以用 span標(biāo)記包住一句話中的一個詞語，并讓該標(biāo)記設(shè)置為粗體字以突出該詞語 divSome standard text with a span style=fontweight:boldbold/span word in the middle/div table tr td table元素中包含了行 (tr)和列(td)。 head是放置 title元素和link元素 (附帶各種元數(shù)據(jù) )的區(qū)域。如果其 type 屬性設(shè)置為 submit，它將顯示為一個按鈕，在單擊該按鈕時，表單將被提交給服務(wù)器 form id=form1 runat=server input id=Text1 type=text/ input id=Submit1 type=submit value=submit/ /form (續(xù)表 ) 元 素 說 明 用 法 示 例 title link 在頁面的 head區(qū)域， title元素控制了在頁面的標(biāo)題欄顯示的文本。 /script script runat=server Protected Sub Page_Load( _ sender as Object, _ e as EventArgs) … End Sub /script br/ hr/ amp。 hr/元素顯示一條橫跨頁面的水平線 This is a string of text with a linebr/ break and aamp。很多較老的用于創(chuàng)建 HTML 頁面的工具都會將開發(fā)人員精心編排的 HTML 代碼結(jié)構(gòu)打亂，按照其既定的原則修改代碼。 圖 312 從 HTML 到 XHTML 代碼 雖然大多數(shù)人都談?wù)?HTML 代碼，事實上如果編寫出色的 HTML 代碼，其實就是在編寫 XHTML。 ● 屬性值必須包含在雙引號內(nèi)。隨著類似 Firefox 這樣更新的Ｗ eb 瀏覽器開始搶占 Microsoft Inter Explorer 的生存空間，很重要的一點(diǎn)就是所有開發(fā)商在未來的產(chǎn)品開發(fā)計劃中都要遵循 XHTML 規(guī)則，從而避免開發(fā)出來的站點(diǎn)在 Inter Explorer 上工作得很好，而在 Netscape 上看起來卻非常丑陋這種老問題的出現(xiàn)。如果在VWD 中打開 ，將注意到在頁面的上方有一個工具欄 (如 圖 313 所示 )，該工具欄上將 Inter Explorer 設(shè)置為網(wǎng)頁的目標(biāo)瀏覽器。到目前為止您還沒有創(chuàng)建過動態(tài)內(nèi)容，那就讓我們看看如何創(chuàng)建更令人興奮的頁面吧。用戶還可能從頁面的菜單中選擇某項內(nèi)容 —— 例如，單擊 Wrox United站點(diǎn)中的某個菜單項。單擊頁面表單上的按鈕或鏈接可能會需要更長的時間才能響應(yīng)。這是一個動態(tài)客戶端代碼的例子。您可能已經(jīng)聽說過 PHP 和 JSP(Java Server Pages)—— 開發(fā)人員也使用這兩種語言編寫服務(wù)器端代碼。 在查看 Visual Web Developer 的工具箱時，可以看到幾個不同的區(qū)域，每個區(qū)域都包含了一組不同的工具。 這一節(jié)首先查看一些可以使用的控件的類型，然后討論它們?nèi)绾喂ぷ鳌? 圖 316 可用的控件類型包括： ● Standard：常用控件，網(wǎng)頁上 90%的元素都來自于這個類型。 ● Login：一組控件，用于簡化從一個完全開放的站點(diǎn)轉(zhuǎn)移到具有個人特色的站點(diǎn)。在本章的后面，您可以在為 Wrox United 站點(diǎn)創(chuàng)建菜單時用到一些導(dǎo)航控件。然而，如果服務(wù)器上安裝了所需的軟件，那么就可以提供更多的功能，而不僅僅是靜態(tài) HTML 頁面。記住，瀏覽器無法理解 。這是一個必須理解的關(guān)鍵概念，服務(wù)器所執(zhí)行的處理過程將在第 6 章詳細(xì)討論。 (2) 右擊站點(diǎn)的根目錄并選擇 Add New Item。 瀏覽器將啟動并 顯示該頁面。這并不是一個非常有趣的示例，但本例的重點(diǎn)是觀測服務(wù)器端代碼是怎么轉(zhuǎn)換為客戶端代碼的。 圖 321 圖 322 需要注意的代碼是描述服務(wù)器控件的代碼，該控件的 ID 是 TextBox1。 VWD 的 Source View Visual Web Developer 在創(chuàng)建和編輯頁面的時候主要有兩種模式。 (1) 回到 VWD 并確保位于 頁面的 Source View 中 (單擊窗口底部的Design 和 Source 按鈕在兩種模式之間進(jìn)行切換 )。 這是 VWD和 Visual Studio的一個功能，稱為 IntelliSense，設(shè)計它用于減輕開發(fā) 人員的工作。 圖 324 (4) 再向頁面添加一個控件；這一次，使用雙擊的技術(shù)進(jìn)行添加。 看一看圖 326，注意到在超鏈接的標(biāo)記內(nèi)出現(xiàn)了一個新屬性 NavigateUrl 以及為它輸入的值。 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 按鈕右邊的工具條；包含光標(biāo)當(dāng)前所在位置的元素將以橙色高亮顯示出來 (如圖 326 所示 )。應(yīng)該已經(jīng)注意到， VWD 在不同的階段有很多功能幫助開發(fā)人員創(chuàng)建頁面。 TextBox 控件直接映射為 HTML 的 input元素。 在這個簡單的示例中，在使用服務(wù)器控件代替手動編寫的 HTML 代碼時并沒有深入學(xué)習(xí)什么內(nèi)容，但記住這是一個純粹的靜態(tài)頁面。這些控件和它們的最終顯示形式看起來是一樣的，但是前者的功能要多得多。包含這些控件的網(wǎng)頁和標(biāo)準(zhǔn)應(yīng)用程序給我們的感覺很相似，所以在頁面中 添加這些控件的過程非常容易。使用 Label 控件可以根據(jù)用戶的交互容易地修改頁面某個部分的文本。 ● DropDown List 控件：用于向用戶提供一個可選擇的選項列表；該列表在沒有使用