【正文】 頁面可以作為容器包含其 他頁面了。 charset=utf8 / meta equiv=ContentLanguage content=enuk / titleWrox United/title link rel=stylesheet type=text/css href= runat=server / /head 其次， Master 頁面中有一個(gè)用于存放腳本的區(qū)域，這些腳本可以在所有的頁面上運(yùn)行 (例如， Page_Load 的代碼，該事件在頁面每次加載的時(shí)候都會(huì)運(yùn)行 )，例如： script runat=server Sub Page_Load(ByVal sender As Object, ByVal e As ) 39。 首先是一些基本的標(biāo)記 (tag)和標(biāo)志 (例如 Master 頁面的標(biāo)志， DOCTYPE、 xmlns、 html和 head 標(biāo)記 )，所有已顯示出來的頁面都會(huì)包 含這些內(nèi)容。 圖 21 幸運(yùn)的是，構(gòu)造這一體系的重?fù)?dān)由 承擔(dān)；開發(fā)人員只需創(chuàng)建下面兩 個(gè)小節(jié)中討論的 Master 和 Content 頁面即可。 每個(gè) Content 頁面都以 Master 頁面為基礎(chǔ)，開發(fā)人員將在這里為每個(gè)頁面添加具體的內(nèi)容。 Master頁面定義了所有基于該頁面的網(wǎng)頁使用的布局。 ● 頁面左邊的導(dǎo)航 條，提供一些頁面導(dǎo)航選項(xiàng)。 ● 為所有頁面創(chuàng)建一致的外觀。本章專注于第二種定義。 注意，術(shù)語設(shè)計(jì) (design)有兩層意思。例如，對(duì)于博客站點(diǎn)，當(dāng)用戶 單擊按鈕發(fā)布新帖子的時(shí)候，如何確保將用戶輸入的文本保存到數(shù)據(jù)庫中？描述要盡可能地詳細(xì)，因?yàn)橐院缶S護(hù)這個(gè)站點(diǎn)的人很可能不再是當(dāng)初的開發(fā)人員。在一個(gè)專業(yè)的開發(fā)環(huán)境中，這個(gè)過程通常包括 如下步驟： ● 開發(fā)一個(gè)功能模型，該模型描述站點(diǎn)的具體運(yùn)行情況。 在本章的結(jié)束部分有一些練習(xí)可以幫助加深對(duì)這些概念的理解。 本章將介紹以下概念： ● 怎樣啟動(dòng)站點(diǎn)的設(shè)計(jì)流程，并在開始編寫代碼之前考慮站點(diǎn)的所有需求。另外，考慮一個(gè)簡單的零售商店，它想進(jìn)入電子商務(wù)領(lǐng)域，它希望通過 Web 站點(diǎn)讓客戶瀏覽并購買商品。在著手開發(fā)任何一個(gè)站點(diǎn)之前，都必須仔細(xì)地考慮和設(shè)計(jì)，之后 才能編寫代碼實(shí)現(xiàn)站點(diǎn)。 ● 使用 Master和 Content頁面實(shí)現(xiàn)站點(diǎn)的一致外觀，這是 。 總體設(shè)計(jì)目標(biāo) 設(shè)計(jì)一個(gè)功能完整的 Web 應(yīng)用程序是一項(xiàng)很復(fù)雜的任務(wù)。當(dāng)用戶單擊 Log In 按鈕時(shí)會(huì)發(fā)生什么事情？當(dāng)用戶想瀏覽產(chǎn)品時(shí)哪些功能是可用的？在開始設(shè)計(jì)之前，需要回答這些問題以及其他很多問題，以免最后開發(fā)出來的站點(diǎn)不是客戶想要的！ ● 確定在實(shí)現(xiàn)站點(diǎn)的過程中可以使用的技術(shù)。 這似乎需要做很多工作，但即使是對(duì)比較小的企業(yè)或者單個(gè)貿(mào)易承包人，遵循這個(gè)流程將幫助開發(fā)人員和客戶保持良好的合作關(guān)系，并為將來和客戶以及客戶的朋友或商業(yè)伙伴繼續(xù)合作打下基礎(chǔ)。第一層意思是對(duì)色彩和布局做出選擇，這通常由站點(diǎn)的美工人員完成。下一章介紹怎樣混合使用 HTML 和 控件設(shè)計(jì)站點(diǎn)中的每個(gè)頁面。 注意： 其他總體設(shè)計(jì)目標(biāo)將在本書的后續(xù)章節(jié)中討論，包括鑒別會(huì)員的登錄系統(tǒng)界面 (第 4章 )、為站點(diǎn)設(shè)置統(tǒng)一的樣式和主題風(fēng)格 (第 5章 )和在數(shù)據(jù)庫或 XML數(shù)據(jù)文件中獲得盡可能多的信息 (第7和第 8章 )。 ● 提供版權(quán)信息的頁腳和一個(gè)用于聯(lián)系網(wǎng)管的二級(jí)菜單。它是頁面布局的最高控制，指定了每個(gè)頁面上的標(biāo)題應(yīng)該多大、導(dǎo)航功能應(yīng)該放置在什么位置、以及在每個(gè)頁面的頁腳中 應(yīng)該顯示什么內(nèi)容 —— 有些類似每個(gè)頁面的形狀切割插件 (cookie cutter)。 Content 頁面包含文本、 HTML和位于 asp:content標(biāo) 記內(nèi)的控件。 創(chuàng)建 Master 頁面 要?jiǎng)?chuàng)建 Master頁面，可以在 VWD 的 Solution Explorer 中右擊根目錄，選擇 Add Item，并將類型指定為 Master Page。這些內(nèi)容在 Master頁面中只輸入一次，以減少重復(fù)工作。 ... End Sub /script 第三， Master 頁 面包 含 一些 HTML 布局 、開 始 / 結(jié) 束標(biāo) 記 asp:content… ContentPlaceHolderID=“ xxx” 和 /asp:content。下一節(jié)中將創(chuàng)建一些 Content頁面。注意對(duì)話框底部的 Select master page(如圖 22 所示 )復(fù)選框。 圖 23 VWD 在這個(gè) Content頁面中設(shè)置了兩個(gè)值。一個(gè) Master 頁面中可能會(huì)包含多個(gè)可以插入 Content頁面的位置。 Master 和 Content 頁面的示例 本書中的所有練習(xí)基本上都可以在 Design 視圖中完成 (不用直接處理代碼 )?；疑糠种甘玖?Master頁面和描述插入到 Master頁面中的內(nèi)容的控件。這些數(shù)據(jù)由 Master 頁面提供。在附錄 E 中還有 HTML 和 CSS的簡單參考。在一個(gè) Master頁面中，應(yīng)該在 head部分包含一個(gè)類似如下的鏈接 (灰色部分代碼 )從而將頁面和 CSS 鏈接在一起： head id=PageHead runat=server titleWrox United/title link rel=stylesheet type=text/css href= runat=server / /head 在下面的“試一試”部分，您將有機(jī)會(huì)創(chuàng)建 Wrox United 站點(diǎn)的 Master 頁面。首先導(dǎo)入一個(gè)作者創(chuàng)建的 CSS 文件。不必修改該文件。將該頁面命名為 。第一個(gè)標(biāo)記是一個(gè)指示符，表明這是一個(gè) Master 頁面，而第二個(gè)標(biāo)記是普通的文檔類型指示符。 (5) 切換到 Design 視圖設(shè)置樣式表。 圖 25 (6) 添加 div標(biāo)記分隔頁面可以簡化頁面格式的修改?？梢詮墓ぞ呦涞?HTML 面板中將 div拖放到頁面上，但是在 Design 視圖中很難將其放到正確的位置 上。將 id 屬性設(shè)置為content。將標(biāo)題下面 的第一個(gè) div的 id 設(shè)置為 sidebar，并將最下面的那個(gè) div的 id 設(shè)置為 footer。 Wrox Press and its subsidiaries 2020. /p p class=right Website designed by a href= title=croakFrog Box Design/a /p /div /form 操作回顧 首先為站點(diǎn)導(dǎo)入一個(gè) CSS 文件，這個(gè)文件是由作者創(chuàng)建好的，包含在本書的下載代碼中 (實(shí)際上，作者并不善于設(shè)計(jì)。通過使用 Master Page 模板， VWD為您創(chuàng)建了基本的 HTML 和 XML 輸入標(biāo)記。 然后對(duì) Master 頁面做了一些基本的修改，使它能支持本書后續(xù)章節(jié)將要添加的功能。 下面的“試一試”部分將創(chuàng)建一個(gè) Content 頁面，這個(gè)頁面用于填充 頁面中的占位符。將該頁面命名為 并確保同時(shí)選中 Select a master page 和 Place code in separate file 兩個(gè)復(fù)選框，如圖 26 所示，即使該頁面沒有任何代碼 (如果沒有為代碼指定一個(gè)單獨(dú)的文件，那么代碼的架構(gòu)標(biāo)記 (framework tag)就將出現(xiàn)在 .aspx文件中。 graphics were done by Lou. Conformance is XHTML Transitional and CSS . (4) 在這里可以體驗(yàn)到 VWD對(duì)創(chuàng)建非 ASP 標(biāo)記的輔助作用，例如創(chuàng)建超鏈接。 (5) 在 Design 視圖中查看該頁面，可以注意到， Master 頁面已經(jīng)出現(xiàn)在頁面架構(gòu)中，而Content頁面內(nèi)只有您輸入的文本。 Content 頁面是如何獲得與 頁面相互協(xié)作的 3 個(gè)功能的呢？起始標(biāo)記%Page… 必須包含 MasterPageFile 屬性。 Master 和 Content 頁面機(jī)制還有其他一些功能，雖然這些功能在 Wrox United 示例站點(diǎn)中沒有實(shí)現(xiàn)，但是多層次 的 Master 頁面可以用于一個(gè)最終頁面。這個(gè)功能提供了一種顯示多層次結(jié)構(gòu)標(biāo)準(zhǔn)內(nèi)容的方式。 VWD沒有包含用于創(chuàng)建多層次 Master 的自動(dòng)工具。如果是中間頁面，它即是 Content 又是 Master，那么第一行的標(biāo)記必須以 %master… 開始，同時(shí)包含 …masterPageFile=% 。 下面的示例演示了一個(gè) Corporate Master 頁面、一個(gè) Research department Master 頁面和最終包含具體內(nèi)容的 。注意在第一行代碼中， Master 和 MasterPageFile=將該頁面設(shè)置為 Corporate Master 頁面的內(nèi)容。這個(gè)頁面不是 Master 頁面，它位于最底層： % Page Language=VBMasterPageFile=~/Title=Untitled Page % asp:Content ID=Content1 ContentPlaceHolderID=ContentPlaceHolderResearch Runat=Server Publication text /asp:Content Master 頁面支持多個(gè)內(nèi)容占位符 到目前為止，本書的示例在 Master 頁面中只使用了一個(gè) asp: ContentPlaceHolder，在Content頁面中也只使用了一個(gè) asp:content標(biāo)記。這個(gè)標(biāo)準(zhǔn)不僅包含每個(gè)網(wǎng)頁的名稱，還應(yīng)該能夠表明它們的層次結(jié)構(gòu)關(guān)系。 在一個(gè)名為 的 XML 文件中包含這些信息。但在寫作本書的時(shí)候，還沒有工具可以掃描站點(diǎn)并生成存放在這些標(biāo)記中的實(shí)際數(shù)據(jù)。每個(gè)數(shù)據(jù)項(xiàng)保存在一個(gè)節(jié)點(diǎn)中，其中節(jié)點(diǎn)表示站 點(diǎn)的一個(gè)頁面，包含頁面的 URL、標(biāo)題和描述。節(jié)點(diǎn)的名稱很簡單： siteMap，該標(biāo)記包含了多個(gè) siteMapNode標(biāo)記。 注意在一個(gè) URL 中可以包含 querystring 數(shù)據(jù)，這是定義在頁面 URL 之后的附加信息，作為頁面請(qǐng)求的一部分發(fā)送給服務(wù)器。注意表示子頁面(Members 和 Calendar)的標(biāo)記可以使用單標(biāo)記形式 Tag?/ 。 VWD 既沒有提供可以執(zhí)行自動(dòng)掃描和生成數(shù)據(jù)的工具，也沒有提供從 Solution Explorer 到 文件的拖放功能。以這種方式，可以向用戶提供一個(gè)鏈接，但當(dāng)用戶單擊這個(gè)鏈接的時(shí)候，站點(diǎn)將提示他先以擁有足夠權(quán)限的用戶身份進(jìn)行登錄，然后才能查看這個(gè)頁面。 (1) 在 Solution Explorer 中右擊根目錄并選擇 Add New Item。 (2) 用下面的代碼修改第一個(gè) siteMapNode，使其表示 Home 頁面： siteMapNode title=Homeurl=description=Wrox United Home Page (3) 修改下一個(gè) siteMapNode(第一個(gè)子節(jié)點(diǎn) )： siteMapNode title=Fixtures url= description=Match Fixtures (4) 將整個(gè)空白 siteMapNode復(fù)制到剪切板以便粘貼它，而不必重復(fù)輸入該標(biāo)記。您所需做的就是在 Notepad 中打開這個(gè)文件，復(fù)制該文件的所有內(nèi)容，并將其粘貼到您所創(chuàng)建的文件的底部。 VWD沒有包含可以自動(dòng)創(chuàng)建該文件的工具，但包含了一個(gè)簡單的模板，該模板提供一些標(biāo)記作為工作的起點(diǎn)。但接下來必須手動(dòng)輸入所有數(shù)據(jù)，并開始為其他頁面及其數(shù)據(jù)復(fù)制和粘貼標(biāo)記。在頁面上，開發(fā)人員將放置配置好的控件以獲取和顯示信息 (例如球隊(duì)的球員列表 )。通過使用相同的色彩、圖標(biāo)和屏幕布局，可以為用戶創(chuàng)建一種臨場感 (sense of presence)。首先，所有頁面上的菜單條將簡化從站點(diǎn)的一個(gè)部分跳轉(zhuǎn)到另一個(gè)部分的導(dǎo)航。 ● 包含站點(diǎn)的配置信息；例如，指定一個(gè)定制的標(biāo)準(zhǔn)錯(cuò)誤頁面，當(dāng)站點(diǎn)內(nèi)發(fā)生錯(cuò)誤時(shí)，向終端用戶顯示這個(gè)頁面。 ● 連接字符串，用于從數(shù)據(jù)源讀取數(shù)據(jù)或向數(shù)據(jù)源寫入數(shù)據(jù)時(shí)連接數(shù)據(jù)源。另一種方式是使用 Web Site Administration Tool，可以在 VWD中啟動(dòng)這個(gè)工具。如果打開該文件，則可以看到它的結(jié)構(gòu) (帶有開標(biāo)記和閉標(biāo)記，每個(gè)標(biāo)記都有屬性，有些還包含了子節(jié)點(diǎn) )和其他 XML 文件的結(jié)構(gòu)是一樣的。所有這些值包含在一個(gè)文