ASP.NET程序設(shè)計(jì)嚴(yán)健武柳青第7章站點(diǎn)導(dǎo)航與母版頁本章導(dǎo)讀站點(diǎn)導(dǎo)航目的是使用戶可以在比較復(fù)雜的網(wǎng)站結(jié)構(gòu)中實(shí)現(xiàn)頁面之間的快速轉(zhuǎn)向。隨著網(wǎng)站文件的不斷增加，管理這些網(wǎng)頁文件之間的鏈接關(guān)系是件困難的事情。ASP.NET站點(diǎn)導(dǎo)航功能為用戶導(dǎo)航站點(diǎn)提供一致的方法，將所有頁面的鏈接保存在一個(gè)稱為“站點(diǎn)地圖”的獨(dú)立文件中，通過站點(diǎn)導(dǎo)航控件讀取文件中的信息，以列表方式或Web菜單方式呈現(xiàn)，從而使維護(hù)文件之間的鏈接關(guān)系變的更為輕松快捷。站點(diǎn)導(dǎo)航控件在建立反映網(wǎng)站結(jié)構(gòu)的站點(diǎn)地圖的基礎(chǔ)上，在ASP.NET網(wǎng)頁呈現(xiàn)導(dǎo)航結(jié)構(gòu)，使用戶可以在站點(diǎn)內(nèi)輕松地移動(dòng)。通過使用以下ASP.NET站點(diǎn)導(dǎo)航控件，可以輕松地在頁面中建立導(dǎo)航信息：⑴SiteMapPath：顯示導(dǎo)航路徑（又稱面包條或眉毛鏈接），向用戶顯示當(dāng)前頁面的位置，并以鏈接形式顯示返回主頁的路徑。該控件提供了許多可供自定義鏈接的外觀的選項(xiàng)。⑵TreeView：顯示一個(gè)樹狀結(jié)構(gòu)或菜單，讓用戶可以遍歷訪問站點(diǎn)中的不同頁面。單擊包含子節(jié)點(diǎn)的節(jié)點(diǎn)，可將其展開或折疊。⑶Menu：顯示一個(gè)可展開的菜單，讓用戶可以遍歷訪問站點(diǎn)中的不同頁面。將光標(biāo)懸停在菜單上時(shí)，將展開包含子節(jié)點(diǎn)的節(jié)點(diǎn)。7.1使用SiteMapPath創(chuàng)建頁面導(dǎo)航例7-1

假如某小型網(wǎng)站的結(jié)構(gòu)如圖7-1所示，使用SiteMapPath控件建立該網(wǎng)站地圖。圖7-1網(wǎng)站結(jié)構(gòu)假定對(duì)應(yīng)的網(wǎng)頁文件如下：⑴主頁：Default.aspx⑵新聞中心：NewsCenter.aspx⑶產(chǎn)品系列：Product.aspx⑷系列A：A.aspx⑸系列B：B.aspx⑹技術(shù)服務(wù)：Services.aspx[相關(guān)知識(shí)與技能]使用SiteMapPath控件創(chuàng)建站點(diǎn)導(dǎo)航，既不用編寫代碼，也不用顯式綁定數(shù)據(jù)。該控件可自動(dòng)讀取和呈現(xiàn)站點(diǎn)地圖信息。使用SiteMapPath控件建立上述網(wǎng)站導(dǎo)航前，必須先創(chuàng)建站點(diǎn)地圖文件，保存在D:\EX10文件夾中。然后依次建立上述ASP.NET網(wǎng)頁，并保存為指定的文件名。為了說明導(dǎo)航鏈接的實(shí)現(xiàn)，每個(gè)頁面暫時(shí)不添加內(nèi)容。完成后，在“解決方案資源管理器”中看到的文件列表如圖7-2所示。圖7-2文件列表[操作步驟]1.創(chuàng)建網(wǎng)站地圖文件⑴在“解決方案資源管理器”中添加新項(xiàng)。打開“添加新項(xiàng)”對(duì)話框，選擇“站點(diǎn)地圖”選項(xiàng)，添加站點(diǎn)地圖文件，如圖7-3所示。圖7-3添加站點(diǎn)地圖文件⑵單擊“添加”按鈕，向項(xiàng)目中添加站點(diǎn)地圖文件Web.Sitemap。在打開的視圖中可以看到以下XML格式的內(nèi)容：1<?xmlversion="1.0"encoding="utf-8"?>

2<siteMapxmlns="/AspNet/SiteMap-File-1.0">

3

<siteMapNodeurl=""title=""description="">

4

<siteMapNodeurl=""title=""description=""/>5<siteMapNodeurl=""title=""description=""/>6

</siteMapNode>7</siteMap>標(biāo)記說明：行1：固定寫法，說明這是XML格式文件。行2、行7：XML文件的根節(jié)點(diǎn)，包含的子節(jié)點(diǎn)均在該對(duì)標(biāo)記內(nèi)，可以做為固定寫法。站點(diǎn)地圖文件是一份XML格式的文件。實(shí)際上，XML文件是一份樹狀結(jié)構(gòu)的文本格式數(shù)據(jù)庫，標(biāo)記以<siteMapNode></siteMapNode>形式成對(duì)出現(xiàn)，每一對(duì)標(biāo)記代表一個(gè)節(jié)點(diǎn)，節(jié)點(diǎn)也可以包含多個(gè)子節(jié)點(diǎn)。XML文件標(biāo)記是區(qū)分大小寫的。節(jié)點(diǎn)開始和結(jié)束標(biāo)記大小寫必須對(duì)應(yīng)。行3：代表一個(gè)節(jié)點(diǎn)。行4～5：代表行3的兩個(gè)子節(jié)點(diǎn)。行6：行3節(jié)點(diǎn)的結(jié)束標(biāo)記，在行3和行6之間出現(xiàn)的標(biāo)記<siteMapNode>均為其子節(jié)點(diǎn)。默認(rèn)產(chǎn)生的站點(diǎn)地圖結(jié)構(gòu)如圖7-4所示。節(jié)點(diǎn)1節(jié)點(diǎn)11節(jié)點(diǎn)12

圖7-4默認(rèn)站點(diǎn)結(jié)構(gòu)每個(gè)節(jié)點(diǎn)都包含若干個(gè)屬性，其中url代表節(jié)點(diǎn)對(duì)應(yīng)的網(wǎng)頁文件所在的位置，title代表將顯示在導(dǎo)航控件中的文字；description是導(dǎo)航控件節(jié)點(diǎn)的描述性說明文字，當(dāng)鼠標(biāo)停留在節(jié)點(diǎn)上時(shí)顯示提示信息。節(jié)點(diǎn)1節(jié)點(diǎn)11節(jié)點(diǎn)12⑶對(duì)于圖7-1所示站點(diǎn)結(jié)構(gòu)，在<siteMap>與</siteMap>之間將站點(diǎn)地圖文件內(nèi)容修改如下：

<siteMapNodeurl="Default.aspx"title="主頁"description="到主頁">

<siteMapNodeurl="NewsCenter.aspx"title="新聞中心"description="->新聞中心"/><siteMapNodeurl="Product.aspx"title="產(chǎn)品列表"description="->產(chǎn)品列表"><siteMapNodeurl="A.aspx"title="產(chǎn)品A系列"description="->A"/><siteMapNodeurl="B.aspx"title="產(chǎn)品B系列"description="->B"/>

</siteMapNode><siteMapNodeurl="Services.aspx"title="服務(wù)"description="->服務(wù)"/></siteMapNode>對(duì)照?qǐng)D7-1和對(duì)默認(rèn)生成的標(biāo)記的描述，上面的標(biāo)記應(yīng)該能很好的理解。2.添加站點(diǎn)導(dǎo)航控件⑴建立站點(diǎn)地圖文件web.siteMap文件后，可以直接將SiteMapPath拖動(dòng)到每一個(gè)頁面上。SiteMapPath自動(dòng)和站點(diǎn)地圖文件內(nèi)容建立聯(lián)系。在B.aspx頁面添加SiteMapPath控件的界面布局如圖7-4所示。圖7-5依次點(diǎn)擊導(dǎo)航鏈接節(jié)點(diǎn)的運(yùn)行結(jié)果7.2在頁面使用TreeView控件例7-2

以例7-1中已經(jīng)建立的站點(diǎn)地圖文件作為TreeView的數(shù)據(jù)來源，使用TreeView控件建立站點(diǎn)導(dǎo)航

[相關(guān)知識(shí)與技能]1.可以用已創(chuàng)建的站點(diǎn)地圖文件作為TreeView的數(shù)據(jù)來源，以樹狀形式列出網(wǎng)站的結(jié)構(gòu)。此外，也可以使用已建立的其它XML文件作為TreeView的數(shù)據(jù)來源。

2.Web服務(wù)器TreeView控件用于以樹形結(jié)構(gòu)顯示分層數(shù)據(jù)，如目錄或文件目錄。該控件支持以下功能：⑴自動(dòng)數(shù)據(jù)綁定。該功能允許將控件的節(jié)點(diǎn)綁定到分層數(shù)據(jù)（如XML文檔）。⑵通過與SiteMapDataSource控件集成，提供對(duì)站點(diǎn)導(dǎo)航的支持。⑶可以顯示為可選擇文本或超鏈接的節(jié)點(diǎn)文本。⑷可通過主題、用戶定義的圖像和樣式自定義外觀。⑸通過編程訪問TreeView對(duì)象模型，從而可以動(dòng)態(tài)地創(chuàng)建樹、填充節(jié)點(diǎn)以及設(shè)置屬性等。⑹能夠在每個(gè)節(jié)點(diǎn)旁邊顯示復(fù)選框。3．TreeView控件由一個(gè)或多個(gè)節(jié)點(diǎn)構(gòu)成。樹中的每個(gè)項(xiàng)都被稱為一個(gè)節(jié)點(diǎn)，由TreeNode對(duì)象表示。節(jié)點(diǎn)可以有三種不同的類型：●根節(jié)點(diǎn)：沒有父節(jié)點(diǎn)、但具有一個(gè)或多個(gè)子節(jié)點(diǎn)的節(jié)點(diǎn)?！窀腹?jié)點(diǎn)：具有一個(gè)父節(jié)點(diǎn)，并且有一個(gè)或多個(gè)子節(jié)點(diǎn)的節(jié)點(diǎn)?！袢~節(jié)點(diǎn)：沒有子節(jié)點(diǎn)的節(jié)點(diǎn)。每個(gè)節(jié)點(diǎn)都具有一個(gè)Text屬性和一個(gè)Value屬性。Text屬性的值顯示在TreeView控件中，Value屬性用于存儲(chǔ)有關(guān)該節(jié)點(diǎn)的任何附加數(shù)據(jù)（例如,傳遞給與節(jié)點(diǎn)相關(guān)聯(lián)的回發(fā)事件的數(shù)據(jù)）。4.TreeView控件在頁面中呈現(xiàn)的形式如圖7-6所示。各個(gè)部分說明見表7-1。圖7-6TreeView控件在頁面中呈現(xiàn)的形式表7-1圖7-6中各部分的說明項(xiàng)說明“展開/折疊”圖像一個(gè)可選圖像，指示是否可以展開節(jié)點(diǎn)以顯示子節(jié)點(diǎn)。默認(rèn)情況下，如果節(jié)點(diǎn)可以展開，該圖像為加號(hào)[+]；如果該節(jié)點(diǎn)可以折疊，該圖像為減號(hào)[-]。復(fù)選框復(fù)選框是可選的，以允許用戶選擇特定節(jié)點(diǎn)?！肮?jié)點(diǎn)”圖像可以指定要顯示在節(jié)點(diǎn)文本旁邊的圖像?！肮?jié)點(diǎn)”文本在TreeNode對(duì)象上顯示的實(shí)際文本，其作用類似于導(dǎo)航模式中的超鏈接或選擇模式中的按鈕。[操作步驟]1.界面布局新建Web窗體，保存為Ex7_2.aspx。將工具箱“導(dǎo)航”選項(xiàng)卡中的TreeView控件拖動(dòng)到Web窗體，通過智能標(biāo)記向?qū)нM(jìn)行界面布局，在“選擇數(shù)據(jù)源”菜單中選擇“新建數(shù)據(jù)源….”選項(xiàng)，如圖7-7所示。圖7-7添加TreeView控件，選擇數(shù)據(jù)源2.創(chuàng)建數(shù)據(jù)源連接 選擇“新建數(shù)據(jù)源…”后，彈出“數(shù)據(jù)源配置向?qū)А睂?duì)話框，如圖7-8所示。在該對(duì)話框中選擇“站點(diǎn)地圖”選項(xiàng)。圖7-8“數(shù)據(jù)源配置向?qū)А睂?duì)話框圖7-9完成數(shù)據(jù)源配置完成數(shù)據(jù)源配置后，將看到頁面自動(dòng)添加了SiteMapDataSource數(shù)據(jù)連接控件。也可以在添加TreeView控件前先添加該控件，該控件不需要設(shè)置任何屬性，自動(dòng)和網(wǎng)站中的站點(diǎn)地圖文件建立連接。一般情況下，一個(gè)網(wǎng)站中只用一個(gè)站點(diǎn)地圖文件。在圖7-9中選中“顯示行”復(fù)選框，將看到節(jié)點(diǎn)之間的連線。3.測試運(yùn)行按F5鍵運(yùn)行，運(yùn)行結(jié)果如圖7-10所示。圖7-10運(yùn)行結(jié)果站點(diǎn)地圖文件中，每個(gè)SiteMapNode控件的Title屬性和Url屬性自動(dòng)與TreeView控件中每個(gè)TreeNode對(duì)象的Text屬性和NavigateUrl屬性相關(guān)聯(lián)。此外，也可以用TreeView控件建立不與數(shù)據(jù)源相連接的列表視圖。在添加TreeView控件到Web窗體后，通過智能標(biāo)記選擇“編輯節(jié)點(diǎn)”選項(xiàng)，如圖7-11所示，手工添加要顯示的列表數(shù)據(jù)。在彈出的“TreeView節(jié)點(diǎn)編輯器”對(duì)話框中，可以添加根節(jié)點(diǎn)及字節(jié)點(diǎn)，可以通過右邊的屬性設(shè)置欄對(duì)節(jié)點(diǎn)進(jìn)行設(shè)置，如圖7-12所示。圖7-11編輯節(jié)點(diǎn)添加根節(jié)點(diǎn)添加子節(jié)點(diǎn)刪除節(jié)點(diǎn)圖7-12建立TreeView節(jié)點(diǎn)[知識(shí)拓展]1.在“TreeView節(jié)點(diǎn)編輯器”對(duì)話框中，可設(shè)置的主要屬性：⑴ImageUrl：設(shè)置當(dāng)前選中的節(jié)點(diǎn)的圖片來源。⑵NavigateUrl：設(shè)置點(diǎn)擊當(dāng)前節(jié)點(diǎn)時(shí)，轉(zhuǎn)向的目標(biāo)網(wǎng)頁URL。⑶Selected：當(dāng)前節(jié)點(diǎn)默認(rèn)識(shí)狀態(tài)是否被選中⑷SelectAction：點(diǎn)擊時(shí)產(chǎn)生的動(dòng)作，有四種選擇，分別為：Expand（展開子節(jié)點(diǎn)）；Select（選擇節(jié)點(diǎn)）；SelectExpand（選中并展開子節(jié)點(diǎn)）；None（不產(chǎn)生任何反應(yīng)）。⑸ShowCheckBox：是否在當(dāng)前節(jié)點(diǎn)左邊顯示復(fù)選框⑹Target：點(diǎn)擊節(jié)點(diǎn)時(shí)，按什么方式打開NavigateUrl屬性中設(shè)置的目標(biāo)網(wǎng)頁，如"_blank"代表新開窗口。⑺Text：節(jié)點(diǎn)顯示的文本內(nèi)容⑻Value：節(jié)點(diǎn)代表的值，用于代碼檢測的判斷。2.自定義TreeView控件的外觀TreeView控件的外觀可以完全自定義，這使得頁面可以使用多種多樣的顯示樣式。若要自定義TreeView控件的外觀，可以執(zhí)行以下操作：●指定影響控件顯示和呈現(xiàn)的TreeView控件屬性?！裰付ㄒ粋€(gè)ImageSet屬性，該屬性選擇一組在運(yùn)行時(shí)與控件一起呈現(xiàn)的內(nèi)置圖像?！裰付ㄓ糜诳刂芓reeView控件內(nèi)特定TreeNode對(duì)象組的顯示及呈現(xiàn)特性的圖像和樣式屬性。●使用VisualStudio的自動(dòng)套用格式功能，可迅速完成一組圖像和樣式屬性的自定義?！駷閼?yīng)用程序中的TreeView控件指定一個(gè)預(yù)定義主題，或一個(gè)定義運(yùn)行時(shí)顯示及呈現(xiàn)特性的外觀。⑴自定義節(jié)點(diǎn)旁的圖象顯示父節(jié)點(diǎn)展開時(shí)，默認(rèn)顯示“-”號(hào)，節(jié)點(diǎn)展開時(shí)默認(rèn)顯示“+”號(hào)。通過以下三個(gè)屬性，可以自定義TreeView在父節(jié)點(diǎn)折疊、展開時(shí)，以及葉、子節(jié)點(diǎn)顯示的圖象：①CollapseImageUrl：指定TreeView控件折疊時(shí)節(jié)點(diǎn)顯示的圖象。②ExpandImageUrl：指定TreeView控件展開時(shí)節(jié)點(diǎn)顯示的圖象。③NoExpandImageUrl：指定TreeView控件葉、子節(jié)點(diǎn)顯示的圖象。自定義節(jié)點(diǎn)顯示的圖片時(shí)，必須設(shè)置ImageSet屬性值為Custom，ShowLines屬性值為False。⑵改變TreeView控顯示的外觀樣式圖7-13是TreeView各樣式對(duì)應(yīng)的部分示意。在TreeView屬性窗口的“樣式”選項(xiàng)卡中，可以設(shè)置節(jié)點(diǎn)的前景色和背景色。圖7-13節(jié)點(diǎn)樣式屬性各對(duì)應(yīng)部分圖中未列出的SelectedNodeStyle部分表示節(jié)點(diǎn)在選中時(shí)的樣式。節(jié)點(diǎn)樣式屬性包含以下幾個(gè)共同的屬性：①NodeSpacing：指定整個(gè)當(dāng)前節(jié)點(diǎn)與上下相鄰節(jié)點(diǎn)之間的垂直間距。②VerticalPadding：指定在TreeNode文本頂部和底部呈現(xiàn)的間距。③HorizontalPadding：指定在TreeNode文本左側(cè)和右側(cè)呈現(xiàn)的間距。④ChildNodesPadding：指定TreeNode的子節(jié)點(diǎn)上方和下方的間距。⑤ImageUrl：指定在TreeNode旁顯示的圖像的路徑。對(duì)應(yīng)節(jié)點(diǎn)的位置如圖7-14所示圖7-14節(jié)點(diǎn)部分屬性對(duì)應(yīng)位置7.3在頁面使用Menu控件不用編寫任何代碼，同樣可以使用菜單控件Menu，以XML數(shù)據(jù)源或網(wǎng)站地圖文件作為數(shù)據(jù)源，實(shí)現(xiàn)網(wǎng)站導(dǎo)航。實(shí)現(xiàn)的步驟與TreeView控件類似：首先建立網(wǎng)站地圖文件，將工具箱“數(shù)據(jù)”選項(xiàng)卡中的SiteMapDataSource控件添加到Web窗體，再添加Menu控件并選擇其數(shù)據(jù)源為SiteMapDataSource，即可實(shí)現(xiàn)根據(jù)站點(diǎn)地圖文件內(nèi)容，以菜單方式實(shí)現(xiàn)站點(diǎn)導(dǎo)航。Menu控件實(shí)現(xiàn)站點(diǎn)導(dǎo)航的界面布局和運(yùn)行狀態(tài)如圖7-15所示。圖7-15Menu控件實(shí)現(xiàn)站點(diǎn)導(dǎo)航的界面布局和運(yùn)行狀態(tài)1.Menu控件的兩種顯示模式Menu控件有一組以Static（靜態(tài)）和一組以Dynamic（動(dòng)態(tài)）開頭的屬性。這些屬性分別對(duì)應(yīng)Menu控件的兩種顯示模式：靜態(tài)模式和動(dòng)態(tài)模式。靜態(tài)顯示意味著Menu控件始終是完全展開的，整個(gè)結(jié)構(gòu)都是可視的，用戶可以單擊任何部位。在動(dòng)態(tài)顯示的菜單中，只有指定的部分是靜態(tài)的，僅當(dāng)用戶將鼠標(biāo)指針放置在父節(jié)點(diǎn)上時(shí)，才會(huì)顯示其子菜單項(xiàng)。也可以認(rèn)為，運(yùn)行時(shí)可見的菜單項(xiàng)為靜態(tài)菜單項(xiàng)，當(dāng)鼠標(biāo)指向某靜態(tài)菜單項(xiàng)而動(dòng)態(tài)列出的菜單項(xiàng)，則為動(dòng)態(tài)菜單（項(xiàng)）。⑴靜態(tài)顯示行為使用Menu控件的StaticDisplayLevels屬性可控制靜態(tài)顯示行為。StaticDisplayLevels屬性指示從根菜單算起，靜態(tài)顯示的菜單的層數(shù)。例如，若將StaticDisplayLevels設(shè)置為3，菜單將以靜態(tài)顯示的方式展開其前三層。靜態(tài)顯示的最小層數(shù)為1，如果將該值設(shè)置為0或負(fù)數(shù)，該控件將引發(fā)異常。圖7-16所示是設(shè)置StaticDisplayLevels為3時(shí)的設(shè)計(jì)階段界面。圖7-16StaticDisplayLevels為3的設(shè)計(jì)階段界面⑵動(dòng)態(tài)顯示行為MaximumDynamicDisplayLevels屬性指定在靜態(tài)顯示層后應(yīng)顯示的動(dòng)態(tài)顯示菜單節(jié)點(diǎn)層數(shù)。例如，若菜單有3個(gè)靜態(tài)層和2個(gè)動(dòng)態(tài)層，則菜單的前三層靜態(tài)顯示，后兩層動(dòng)態(tài)顯示。如果將MaximumDynamicDisplayLevels屬性設(shè)置為0，則不會(huì)動(dòng)態(tài)顯示任何菜單節(jié)點(diǎn)。如果將MaximumDynamicDisplayLevels屬性設(shè)置為負(fù)數(shù)，則引發(fā)異常。2.菜單控件Menu的使用說明⑴設(shè)置菜單顯示方向設(shè)置Menu控件的Orientation屬性可以使菜單水平布局（Horizontal）或垂直布局（Vertical）。⑵設(shè)置動(dòng)態(tài)菜單顯示時(shí)間Menu控件的DisappearAfter屬性表示當(dāng)鼠標(biāo)離開動(dòng)態(tài)菜單時(shí)，動(dòng)態(tài)菜單顯示多長時(shí)間自動(dòng)消息，默認(rèn)為500，單位為毫秒。修改該值可以增加或縮短動(dòng)態(tài)菜單顯示時(shí)間。⑶使用圖象通過使用圖像，使得鼠標(biāo)指針懸停于菜單項(xiàng)上方時(shí)指示存在可用的子菜單項(xiàng)。此外，還可以使用圖像來區(qū)分靜態(tài)和動(dòng)態(tài)菜單項(xiàng)，或用圖像充當(dāng)整個(gè)菜單或某個(gè)級(jí)別菜單項(xiàng)的背景。使用級(jí)聯(lián)樣式表(CSS)和Menu控件的屬性，也可以指定要使用的圖像，以及這些圖像的顯示方式。①使用默認(rèn)的彈出圖像若要使用默認(rèn)圖像來指示某個(gè)靜態(tài)菜單項(xiàng)包含子項(xiàng)，應(yīng)將StaticEnableDefaultPopOutImage屬性設(shè)置為true；若要使用默認(rèn)圖像指示某個(gè)動(dòng)態(tài)菜單項(xiàng)包含子項(xiàng)，應(yīng)將DynamicEnableDefaultPopOutImage屬性設(shè)置為true。將這兩個(gè)屬性或其中一個(gè)屬性的值設(shè)置為false，將隱藏每個(gè)有子項(xiàng)的菜單項(xiàng)上的默認(rèn)黑箭頭圖像。②指定自定義指示器圖標(biāo)若要使用為指示器圖標(biāo)創(chuàng)建的自定義圖像，應(yīng)為StaticPopOutImageUrl屬性和DynamicPopOutImageUrl屬性賦值。每個(gè)屬性指定一個(gè)要使用圖像的文件位置和名稱。StaticPopOutImageUrl屬性控制用于靜態(tài)菜單項(xiàng)的圖像，DynamicPopOutImageUrl屬性控制用于動(dòng)態(tài)菜單項(xiàng)的圖像。③指定分隔符圖像可以使用分隔符圖像分隔同一級(jí)別的菜單項(xiàng)?？梢灾付@示在靜態(tài)菜單或動(dòng)態(tài)菜單給定級(jí)別或全部級(jí)別的菜單項(xiàng)之上/下的分隔符圖像?？梢允褂盟膫€(gè)屬性指定分隔符圖像，兩個(gè)用于靜態(tài)菜單項(xiàng)的頂部和底部分隔符，兩個(gè)用于動(dòng)態(tài)菜單項(xiàng)的頂部和底部分隔符，即：●StaticTopSeparatorImageUrl●StaticBottomSeparatorImageUrl●DynamicTopSeparatorImageUrl●DynamicBottomSeparatorImageUrl④指定滾動(dòng)圖像如果指定多個(gè)菜單項(xiàng)，用于顯示動(dòng)態(tài)菜單項(xiàng)的彈出窗口可能無法顯示所有菜單項(xiàng)。Menu控件將自動(dòng)創(chuàng)建滾動(dòng)條，以便用戶能滾動(dòng)瀏覽菜單項(xiàng)列表；可以使用ScrollDownImageUrl屬性和ScrollUpImageUrl屬性將自定義箭頭或其他圖像分配給滾動(dòng)條的向上和向下圖標(biāo)。⑤在CSS中指定圖像大小圖像的使用方式可能會(huì)顯著影響Menu控件顯示該圖像的效果。例如，在首次顯示某個(gè)頁面時(shí)，如果瀏覽器尚未緩存Menu控件所使用的圖像，在瀏覽器確定這些圖像的大小前，它們呈閃爍或“跳動(dòng)”狀態(tài)。通過在級(jí)聯(lián)樣式表(CSS)中指定Menu控件所使用圖像的大小，可以避免此類情況。以下示例將類名“menuitem”分配給StaticMenuItemStyle和DynamicMenuItemStyle屬性。<StaticMenuItemStyleCssClass="menuitem"/><DynamicMenuItemStyleCssClass="menuitem"/>然后，在包含菜單的頁所引用CSS文件中，您可以引用該菜單項(xiàng)的CSS類并設(shè)置圖像大小。下面代碼引用CSS類“menuitem”，并指定當(dāng)菜單項(xiàng)有子項(xiàng)時(shí)用40*40像素的圖像來指示。代碼如下：.menuitem{}/*Stylecodeforeachmenuitemgoeshere.*/.menuitemimg{width:40px;height:40px;}⑷菜單行為和樣式Menu控件使用兩種顯示模式：靜態(tài)模式和動(dòng)態(tài)模式。靜態(tài)顯示模式意味著部分或全部菜單結(jié)構(gòu)始終可見。完全靜態(tài)的菜單顯示整個(gè)菜單結(jié)構(gòu)，用戶可以選擇任何部分。動(dòng)態(tài)顯示模式意味著當(dāng)鼠標(biāo)指針置于某些項(xiàng)上時(shí)顯示部分菜單結(jié)構(gòu)；僅當(dāng)用戶將鼠標(biāo)指針放置在父節(jié)點(diǎn)上時(shí)，才會(huì)顯示子菜單項(xiàng)。StaticDisplayLevels屬性指示靜態(tài)顯示菜單項(xiàng)德層數(shù)。如果有四層菜單項(xiàng)，并且StaticDisplayLevels屬性設(shè)置為3，則靜態(tài)顯示前三層，動(dòng)態(tài)顯示最后一層菜單項(xiàng)。若要控制菜單靜態(tài)部分的外觀，可以在名稱中使用包含單詞“Static”的樣式屬性，即：StaticMenuStyleStaticMenuItemStyleStaticSelectedStyleStaticHoverStyle若要控制菜單的動(dòng)態(tài)部分的外觀，可以在名稱中使用包含單詞“Dynamic”的樣式屬性，即：DynamicMenuStyleDynamicMenuItemStyleDynamicSelectedStyleDynamicHoverStyleStaticMenuStyle屬性和DynamicMenuStyle屬性分別影響整組靜態(tài)或動(dòng)態(tài)菜單項(xiàng)。例如，如果使用DynamicMenuStyle屬性指定一個(gè)邊框，則整個(gè)動(dòng)態(tài)區(qū)域?qū)?huì)有一個(gè)邊框。與此相反，StaticMenuItemStyle屬性和DynamicMenuItemStyle屬性影響單個(gè)菜單項(xiàng)。例如，如果使用DynamicMenuItemStyle屬性指定一個(gè)邊框，則每個(gè)動(dòng)態(tài)菜單項(xiàng)都有自己的邊框。當(dāng)鼠標(biāo)指針置于菜單項(xiàng)上時(shí)，StaticSelectedStyle屬性和DynamicSelectedStyle屬性僅影響所選的菜單項(xiàng)，而StaticHoverStyle屬性和DynamicHoverStyle屬性影響菜單項(xiàng)的樣式。在實(shí)際網(wǎng)頁設(shè)計(jì)中，不一定要使用菜單控件，用戶也許更喜歡使用表格方式布局類似菜單的導(dǎo)航功能，結(jié)合客戶端腳本語言如JavaScript或Vbscript，進(jìn)行更靈活的顯示和控制。使用菜單控件可以節(jié)省編寫代碼的時(shí)間，提高開發(fā)效率。7.4使用ASP.NET母版頁創(chuàng)建網(wǎng)站一致布局例7-3

參照?qǐng)D7-17的頁面布局，設(shè)計(jì)母版頁，并依照設(shè)計(jì)的母版頁創(chuàng)建內(nèi)容頁。圖7-17參考網(wǎng)站[相關(guān)知識(shí)與技能]

本例以一個(gè)頁面典型的布局為例，介紹母版頁面建立和使用。母版頁相當(dāng)于頁面的模版。在大部分網(wǎng)站中，每個(gè)頁面可能都有部分內(nèi)容相同，如包含公司Logo、導(dǎo)航菜單和公司信息等內(nèi)容，可以將這部分內(nèi)容做成母版，在每個(gè)頁面中都套用該母版，從而不需要為每個(gè)頁面設(shè)計(jì)內(nèi)容相同的信息，如圖7-18MSDN網(wǎng)站的界面。圖7-18母版頁1．母版頁的組成母版頁由兩部分組成：母版頁面和內(nèi)容頁面。母版頁也是一個(gè)Aspx頁面，可以在其Web界面上添加任意的靜態(tài)文本或控件，這些添加的界面都將顯示在使用該母版的內(nèi)容頁面上。特別是，母版頁面可以包含一個(gè)或多個(gè)ContentPlaceHolder占位符控件，這些占位符控件空間位置將被套用該母版的內(nèi)容頁面中的內(nèi)容所代替。內(nèi)容頁面是一般的aspx頁面，如果內(nèi)容頁面使用了母版，則內(nèi)容頁所有添加的界面元素將放置在母版頁面中占位符控件所在的空間位置，母版頁面中非占位符的其他元素將在內(nèi)容頁面顯示，但不能編輯。在內(nèi)容頁中，添加Content控件并將這些控件映射到母版頁上的ContentPlaceHolder控件，可以創(chuàng)建內(nèi)容。例如，母版頁可能包含名為Main和Footer的內(nèi)容占位符。在內(nèi)容頁中，可以創(chuàng)建兩個(gè)Content控件，一個(gè)映射到ContentPlaceHolder控件Main，另一個(gè)映射到ContentPlaceHolder控件Footer，如圖7-19所示。圖7-19使用母版的頁面輸出過程創(chuàng)建Content控件后，向這些控件添加文本和控件。在內(nèi)容頁中，Content控件外的任何內(nèi)容（除服務(wù)器代碼的腳本塊外）都將導(dǎo)致錯(cuò)誤。2．母版頁使用制作母版頁之前，要對(duì)頁面結(jié)構(gòu)布局進(jìn)行規(guī)劃，即分清頁面中哪些信息是公共顯示的部分，如頁面頂部的菜單和LOGO，以及頁面底部的信息等，從而建立每個(gè)頁面統(tǒng)一的整體布局。[操作步驟]創(chuàng)建母版頁的基本思路：建立母版頁，并建立母版頁面中控件布局，使用占位符控件為內(nèi)容頁面預(yù)留空間；創(chuàng)建內(nèi)容頁，應(yīng)用已建好的母版頁，在母版頁占位符控件位置空間完成內(nèi)容頁面的控件布局。1.根據(jù)圖參考網(wǎng)站的頁面布局，設(shè)計(jì)頁面結(jié)構(gòu)如圖7-20所示。圖7-20頁面布局2.創(chuàng)建母版頁在菜單欄上選擇“新建項(xiàng)目

網(wǎng)站

添加新項(xiàng)”選項(xiàng)，在彈出的“添加新項(xiàng)”對(duì)話框中選擇“母版頁”圖標(biāo)，如圖7-21所示。

圖7-21“添加新項(xiàng)”對(duì)話框在打開的Web窗體上默認(rèn)生成一個(gè)內(nèi)容占位符控件ContentPlaceHolder1，在源代碼視圖<form>與</form>之間可以看到以下標(biāo)記：

<div><asp:contentplaceholderid="ContentPlaceHolder1"runat="server"></asp:contentplaceholder></div>即頁面中只有一個(gè)占位符控件。為了符合布局要求，將默認(rèn)生成的內(nèi)容占位符控件ContentPlaceHolder1刪除，重新按照?qǐng)D7-20進(jìn)行布局。3.母版頁面布局插入一個(gè)4行2列的表格，將第一行進(jìn)行行合并，準(zhǔn)備插入圖片或動(dòng)態(tài)Flash文件。將第二行進(jìn)行行合并，準(zhǔn)備安排菜單欄目。將四行合并，準(zhǔn)備顯示一些靜態(tài)文本。●第1、2、4行的信息（包括靜態(tài)文本和任何添加的非占位符控件，將全部顯示在每一個(gè)使用該母版的內(nèi)容頁面上）。在第三行左邊和右邊分別插入一個(gè)內(nèi)容占位符控件contentplaceholder，調(diào)整表格和列的尺寸至合適位置；同時(shí)，將第三行兩個(gè)單元格的垂直對(duì)齊方式設(shè)置為Top值（使得內(nèi)容頁放置在該占位空間的內(nèi)容頂部對(duì)齊），母版頁界面布局如圖7-22所示。圖7-23母版頁布局4.建立內(nèi)容頁，并應(yīng)用母版頁新建Web窗體，在保存時(shí)，在“添加新項(xiàng)”對(duì)話框中選中“選擇母版頁”復(fù)選框，如圖7-24