第9章 頁面導(dǎo)航

第9章頁面導(dǎo)航學(xué)習(xí)目標(biāo)本章將主要介紹導(dǎo)航控件，這些控件主要用來美化Web頁，對網(wǎng)站中的頁面實(shí)行統(tǒng)一化。熟練掌握站點(diǎn)地圖。熟練使用導(dǎo)航控件.9.1情景分析無論小型站點(diǎn)還是大型站點(diǎn)都包含幾個甚至上千個頁面，如何在這些頁面間建立導(dǎo)航是網(wǎng)站設(shè)計中非常重要的一環(huán)。以往設(shè)計一個導(dǎo)航需要花費(fèi)大量的時間，ASP.NET3.5引入的網(wǎng)站導(dǎo)航系統(tǒng)使得這一切變得容易起來。9.2站點(diǎn)地圖ASP.NET2.0的導(dǎo)航系統(tǒng)的目標(biāo)是創(chuàng)建一個可以吸引開發(fā)人員和Web站點(diǎn)設(shè)計人員的導(dǎo)航模型。要為站點(diǎn)創(chuàng)建一致的、容易管理的導(dǎo)航解決方案，可以使用ASP.NET站點(diǎn)導(dǎo)航。ASP.NET站點(diǎn)導(dǎo)航能夠?qū)⒅赶蛩许撁娴逆溄哟鎯υ谝粋€位置，并在列表中呈現(xiàn)這些鏈接，或用一個特定Web服務(wù)器控件在每頁上呈現(xiàn)導(dǎo)航菜單，ASP.NET中的導(dǎo)航控件主要有3種：SiteMapPath控件、Menu控件、TreeView控件，本書將使用這些控件在ASP.NET網(wǎng)頁上創(chuàng)建菜單和其他導(dǎo)航輔助功能。1TreeView控件TreeView控件以樹狀結(jié)構(gòu)顯示菜單的節(jié)點(diǎn)，單擊包含子節(jié)點(diǎn)的節(jié)點(diǎn)可將其展開或折疊。TreeView控件可以自行編輯節(jié)點(diǎn)也可以綁定到站點(diǎn)地圖。使用TreeView控件可以為用戶顯示節(jié)點(diǎn)層次結(jié)構(gòu)?！纠?-1】使用TreeView控件實(shí)現(xiàn)站點(diǎn)導(dǎo)航。具體操作步驟如下：（1）啟動VisualStudio,新建項(xiàng)目，命名為NavigationApp。（2）右鍵單擊NavigationApp，為該應(yīng)用程序添加一些新的Web頁面（3）單擊Default.aspx頁面，切換到“設(shè)計”視圖，添加一個TreeView控件。（4）選擇TreeView控件，單擊右上角的小三角形，選擇編輯節(jié)點(diǎn)，彈出如圖9-2所示的“TreeView節(jié)點(diǎn)編輯器”對話框，為TreeView控件添加根節(jié)點(diǎn)和子節(jié)點(diǎn)。（5）單擊“確定”按鈕，調(diào)整各控件的位置和大小2Menu控件Menu控件和TreeView控件具有相同的功能，只是外觀不同。Menu控件具有兩種顯示模式：靜態(tài)模式和動態(tài)模式。靜態(tài)模式意味著Menu控件始終是展開的，整個結(jié)構(gòu)都是可視的，用戶可以單擊任何部位。在動態(tài)顯示的菜單中，只有指定的部分是靜態(tài)的，當(dāng)用戶將鼠標(biāo)指針放置在父節(jié)點(diǎn)上時才會顯示其子菜單項(xiàng)。Menu控件的使用和TreeView控件類似，可以直接配置其各節(jié)點(diǎn)的內(nèi)容，也可以使用綁定到數(shù)據(jù)源的方式來指定其內(nèi)容。3SiteMapPathSiteMapPath控件會顯示一個導(dǎo)航控件，此路徑為用戶顯示當(dāng)前頁的位置，并顯示返回到主頁的路徑連接。此控件提供了許多可供自定義連接的外觀選項(xiàng)。SiteMapPath控件包含來自站點(diǎn)地圖的導(dǎo)航數(shù)據(jù)。此數(shù)據(jù)包括有關(guān)網(wǎng)站中頁的信息，如URL、標(biāo)題、說明和導(dǎo)航層次結(jié)構(gòu)中的位置。若將導(dǎo)航數(shù)據(jù)存儲在一個地方，則可以更方便地在網(wǎng)站的導(dǎo)航菜單中添加和刪除項(xiàng)。9.3后臺管理頁面設(shè)計【例9-2】管理員后臺管理瀏覽圖書界面的設(shè)計。具體操作步驟如下：雙擊圖9-1中的Default.aspx，在右側(cè)屬性中設(shè)置該頁面的BgColor屬性為“#00cc99”拖動Table控件到Default.aspx，將Table控件修改為兩行兩列的表格，然后合并第一行。在第一行輸入“陽光書城后臺管理系統(tǒng)”。拖動【例9-1】中設(shè)計好的TreeView控件到第二行左邊列。切換到“源”視圖，在表格第二行右邊列輸入：<iframename="f1"id="I1"frameborder="0"style="width:1006px;height:327px;margin-left:0px;"></iframe>在這里一定要注意設(shè)定iframe的name屬性（這里設(shè)置為f1）。

右鍵單擊【例9-1】中設(shè)計好的TreeView控件，選擇編輯節(jié)點(diǎn)，在彈出的對話框9-6中，如下圖所示，分別選擇各個子節(jié)點(diǎn)，設(shè)置右窗口的屬性Target=f1。雙擊圖9-1中的Searchbook.aspx，在右側(cè)屬性中設(shè)置該頁面的BgColor屬性為“#00cc99”。從工具箱拖動控件GridV