第12章 建立網站的巡覽架構.

Presentation on theme: "第12章 建立網站的巡覽架構."— Presentation transcript:

1 第12章 建立網站的巡覽架構

2 第12章 建立網站的巡覽架構 12-1 網站巡覽的基礎 12-2 建立巡覽架構的網站地圖 12-3 Menu選單控制項
12-4 TreeView樹狀檢視控制項 12-5 SiteMapPath網站路徑控制項 12-6 XML文件與巡覽控制項

3 12-1 網站巡覽的基礎 網站巡覽簡介 網站巡覽控制項

4 網站巡覽簡介-說明 網站巡覽（Site Navigation）是在建立網站瀏覽架構和其使用介面，以便使用者能夠快速在網站中找到所需的網頁內容。常用的使用介面有超連結、選單或樹狀結構。 當使用者進入網站後，對於豐富的網站內容來說，一定產生一個問題，我現在到底在哪裡？網站巡覽就是在建立網站的邏輯架構，如同一張網站地圖，可以指引使用者他在哪裡？和如何到達指定的網頁？

5 網站巡覽簡介-圖例 換句話說，在建立網站巡覽的使用介面前，我們需要先定義網站的邏輯架構，通常是使用樹狀結構來定義此結構，如下圖所示：

6 網站巡覽控制項 在ASP.NET網站實作網站巡覽，預設使用Web.sitmap檔案定義網站地圖，並且提供網站巡覽控制項的使用介面，其說明如下表所示：

7 12-2 建立巡覽架構的網站地圖 12-2-1 建立網站地圖檔Web.sitemap
SiteMapDataSource資料來源控制項

8 12-2-1 建立網站地圖檔Web.sitemap-說明
ASP.NET網站地圖檔案Web.sitemap是使用XML文件來定義網站的巡覽架構。 ASP.NET提供巡覽控制項，可以直接存取網站地圖檔案內容來建立網站的巡覽功能。

9 12-2-1 建立網站地圖檔Web.sitemap-網站地圖檔案
請啟動VWD開啟網站。執行「檔案/新增檔案」指令，可以看到「加入新項目」對話方塊。

10 12-2-1 建立網站地圖檔Web.sitemap-網站地圖檔案的內容
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns=" > <siteMapNode url="~/Default.aspx" title="首頁"> <siteMapNode url="~/Mp3.aspx" title="MP3播放機"> <siteMapNode url="~/iPodVideo.aspx" title="iPod Video"/> <siteMapNode url="~/iPodNano.aspx" title="iPod Nano"/> <siteMapNode url="~/iPodShuffle.aspx" title="iPod Shuffle"/> </siteMapNode> <siteMapNode url="~/Computers.aspx" title="電腦"> <siteMapNode url="~/Desktop.aspx" title="桌上型"/> <siteMapNode url="~/Notebook.aspx" title="筆記型"/> <siteMapNode url="~/PDA.aspx" title="數位助理"/> </siteMap>

11 12-2-2 SiteMapDataSource資料來源控制項-說明
SiteMapDataSource資料來源控制項可以提供網站巡覽控制項Menu和TreeView所需的資料來源，其預設的資料來源就是上一節建立的Web.sitemap檔案。

12 12-2-2 SiteMapDataSource資料來源控制項-新增控制項
請在「工具箱」視窗展開【資料】區段，拖拉SiteMapDataSource資料來源控制項至左邊名為MenuContent的ContentPlaceHolder控制項，如下圖所示：

13 12-2-2 SiteMapDataSource資料來源控制項-控制項標籤
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 上述SiteMapDataSource資料來源控制項，預設是使用Web.sitmap檔案作為資料來源，其相關屬性的說明，如下表所示：

14 12-3 Menu選單控制項 使用靜態資料建立Menu控制項 使用動態資料建立Menu控制項

15 12-3-1 使用靜態資料建立Menu控制項-說明
當使用靜態資料建立Menu控制項時，網站的巡覽架構是定義在控制項標籤中的<Items>標籤，其下的每一個項目就是一個MenuItem控制項。 在VWD可以使用「功能表項目編輯器」對話方塊來幫助我們建立靜態資料的巡覽架構。 Menu控制項

16 12-3-1 使用靜態資料建立Menu控制項-Menu控制項屬性

17 12-3-1 使用靜態資料建立Menu控制項-MenuItem控制項屬性

18 12-3-1 使用靜態資料建立Menu控制項-新增Menu控制項
在「工具箱」視窗的【巡覽】區段，拖拉Menu控制項至編輯視窗的<div>標籤中，如下圖所示：

19 12-3-1 使用靜態資料建立Menu控制項-編輯項目
新增根項目、下一層項目和刪除項目 MenuItem控制項屬性

20 12-3-1 使用靜態資料建立Menu控制項-範例網站
ASP.NET網站：Ch12-3-1 在ASP.NET網頁新增Menu控制項，其選項的項目是iPod產品，按一下可以連接指定產品的ASP.NET網頁，如下圖所示：

21 12-3-2 使用動態資料建立Menu控制項-說明
動態資料建立Menu控制項就是從SiteMapDataSource資料來源控制項取得選項資料，其項目就是定義在網站地圖檔Web.sitemap。

22 12-3-2 使用動態資料建立Menu控制項-指定資料來源
選Menu控制項且開啟「Menu工作」功能表，在【選擇資料來源】欄指定資料來源為【SiteMapDataSource1】。

23 12-3-2 使用動態資料建立Menu控制項-範例網站
ASP.NET網站：Ch12-3-2 在ASP.NET網站的主版頁面擁有Menu控制項，其選單項目是定義在網站地圖檔Web.sitemap，我們可以使用資料來源控制項取得選項資料，如下圖所示：

24 12-4 TreeView樹狀檢視控制項 12-4-1 使用靜態資料建立TreeView控制項

25 12-4-1 使用靜態資料建立TreeView控制項-說明
當使用靜態資料來建立TreeView控制項時，網站的巡覽架構是定義在控制項標籤中的<Items>標籤，其下的每一個項目就是一個MenuItem控制項。 在VWD可以使用「TreeView節點編輯器」對話方塊來幫助我們建立靜態資料的巡覽架構。 TreeView控制項

26 12-4-1 使用靜態資料建立TreeView控制項-屬性

27 12-4-1 使用靜態資料建立TreeView控制項-新增TreeView控制項
在「工具箱」視窗的【巡覽】區段，拖拉TreeView控制項至編輯視窗的<div>標籤中，如下圖所示：

28 12-4-1 使用靜態資料建立TreeView控制項-編輯節點
按一下上方箭頭圖示顯示「TreeView工作」功能表，然後選【編輯節點】超連結，可以看到「TreeView節點編輯器」對話方塊。 新增根節點、下一層節點和刪除節點 MenuItem控制項屬性

29 12-4-1 使用靜態資料建立TreeView控制項-範例網站
ASP.NET網站：Ch12-4-1 在ASP.NET網頁新增TreeView控制項，其節點是第12-2-1節網站地圖檔Web.sitemap中的資訊產品節點，按一下可以連接指定產品的ASP.NET網頁，如下圖所示：

30 12-4-2 使用動態資料建立TreeView控制項-說明
TreeView控制項一樣可以使用動態資料來取得節點資料，換句話說，就是使用SiteMapDataSource控制項取得網站地圖定義的節點資料。

31 12-4-2 使用動態資料建立TreeView控制項-指定資料來源
選TreeView控制項且開啟「TreeView工作」功能表，在【選擇資料來源】欄指定資料來源為【SiteMapDataSource1】。

32 12-4-2 使用動態資料建立TreeView控制項-範例網站
ASP.NET網站：Ch12-4-2 此ASP.NET網站和Ch12-3-2相同，只是在主版頁面擁有的是TreeView控制項，其節點是定義在網站地圖檔Web.sitemap，我們可以指定資料來源控制項取得節點資料，如下圖所示：

33 12-5 SiteMapPath網站路徑控制項 新增SiteMapPath控制項 使用樣板標籤建立網站路徑

34 12-5-1 新增SiteMapPath控制項-說明
SiteMapPath網站路徑控制項預設使用Web.sitemap檔案來建立網站路徑，它並不需要透過SiteMapDataSource資料來源控制項來取得資料。SiteMapPath控制項的常用屬性說明，如下表所示：

35 12-5-1 新增SiteMapPath控制項-新增控制項
在「工具箱」視窗的【巡覽】區段，拖拉SiteMapPath控制項至編輯視窗SiteMapDataSource控制項上方名為UpContent的Content控制項，就可以新增此控制項。

36 12-5-1 新增SiteMapPath控制項-範例網站
ASP.NET網站：Ch12-5-1 在ASP.NET網頁PDA.aspx新增SiteMapPath控制項，如下圖所示：

37 使用樣板標籤建立網站路徑-說明 SiteMapPath網站路徑控制項可以使用樣板標籤來自訂網站路徑的格式（事實上，Menu和TreeView控制項也支援樣板標籤），例如：改為使用Button控制項來顯示路徑節點。樣板標籤的說明，如下表所示：

38 使用樣板標籤建立網站路徑-樣板標籤 樣板標籤的說明，如下表所示：

39 12-5-2 使用樣板標籤建立網站路徑-資料繫結運算式
因為我們是使用樣板標籤來建立網站路徑，所以需要自行處理轉址至其他網頁。在自訂的Button控制項是使用資料繫結來取得節點名稱和URL網址，如下所示： <%# Eval("title") %> <%# Eval("url") %> 上述程式碼可以取得網站路徑的節點名稱title和URL網址的url，以Button控制項為例，就是將Text屬性指定成<%# Eval("title") %>來顯示節點名稱。

40 12-5-2 使用樣板標籤建立網站路徑-事件處理程序
在Command事件處理程序可以使用Response.Redirect()方法來轉址至參數的URL網址，如下所示： protected void Button1_Command(object sender, CommandEventArgs e) { Response.Redirect( e.CommandArgument.ToString()); }

41 使用樣板標籤建立網站路徑-編輯樣板 選【SiteMapPath】控制項，開啟「SiteMapPath工作」功能表後，選【編輯樣板】超連結，預設切換至NodeTemplate樣板編輯框，如下圖所示：

42 12-5-2 使用樣板標籤建立網站路徑-範例網站 ASP.NET網站：Ch12-5-2
在ASP.NET網頁PDA.aspx已經新增SiteMapPath控制項，我們準備使用樣板標籤來建立自訂的網站網徑，使用的是Button控制項，如下圖所示：

43 12-6 XML文件與巡覽控制項-說明 Menu和TreeView巡覽控制項除了可以建立網站架構的選單外，我們也可以用來顯示XML文件，特別是TreeView控制項，因為XML文件的資料本身就是一種樹狀結構。 事實上，TreeView控制項可以透過XmlDataSource資料來源控制項，從XML文件取得階層的節點資料。

44 12-6 XML文件與巡覽控制項-範例網站 ASP.NET網站：Ch12-6
在ASP.NET網頁的TreeView控制項，新增資料來源為XML文件AppB_2_1.xml，我們準備直接從TreeView控制項建立新的資料來源，所以並沒有新增XmlDataSource控制項，如下圖所示：

45 End