建立網站的巡覽架構

Download Report

Transcript 建立網站的巡覽架構 

第12章 建立網站的巡覽
架構
第12章 建立網站的巡覽架構
網站巡覽的基礎
 12-2 建立巡覽架構的網站地圖
 12-3 Menu選單控制項
 12-4 TreeView樹狀檢視控制項
 12-5 SiteMapPath網站路徑控制項
 12-6 XML文件與巡覽控制項
 12-1
12-1 網站巡覽的基礎
網站巡覽簡介
 12-1-2 網站巡覽控制項
 12-1-1
12-1-1 網站巡覽簡介-說明
 網站巡覽（Site
Navigation）是在建立網站
瀏覽架構和其使用介面，以便使用者能夠
快速在網站中找到所需的網頁內容。常用
的使用介面有超連結、選單或樹狀結構。
 當使用者進入網站後，對於豐富的網站內
容來說，一定產生一個問題，我現在到底
在哪裡？網站巡覽就是在建立網站的邏輯
架構，如同一張網站地圖，可以指引使用
者他在哪裡？和如何到達指定的網頁？
12-1-1 網站巡覽簡介-圖例
 換句話說，在建立網站巡覽的使用介面前，
我們需要先定義網站的邏輯架構，通常是
使用樹狀結構來定義此結構，如下圖所示：
12-1-2 網站巡覽控制項

在ASP.NET網站實作網站巡覽，預設使用
Web.sitmap檔案定義網站地圖，並且提供網站巡
覽控制項的使用介面，其說明如下表所示：
巡覽控制項
Menu
TreeView
SiteMapPath
說明
建立水平或垂直方向選單架構的巡覽架構，可以指定顯示
幾層的靜態選單，超過的選單就是動態選單，需要按一下
超連結，才能顯示選單內容
建立可展開或隱藏節點的樹狀架構巡覽架構，換句話說，
它就是使用階層架構來顯示選項。
此控制項並不是建立巡覽架構，它是使用類似資料夾的路
徑方式來顯示目前網頁所在的巡覽階層，可以讓我們快速
返回父階層或祖父階層的網頁
12-2 建立巡覽架構的網站地圖
建立網站地圖檔Web.sitemap
 12-2-2 SiteMapDataSource資料來源控制
項
 12-2-1
12-2-1 建立網站地圖檔
Web.sitemap-說明
 ASP.NET網站地圖檔案Web.sitemap是使
用XML文件來定義網站的巡覽架構。
 ASP.NET提供巡覽控制項，可以直接存取
網站地圖檔案內容來建立網站的巡覽功能。
12-2-1 建立網站地圖檔
Web.sitemap-網站地圖檔案

請啟動VWD開啟網站。執行「檔案/新增檔案」指
令，可以看到「加入新項目」對話方塊。
12-2-1 建立網站地圖檔
Web.sitemap-網站地圖檔案的內容
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File1.0" >
<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="數位助理"/>
</siteMapNode>
</siteMapNode>
</siteMap>
12-2-2 SiteMapDataSource資料來
源控制項-說明
 SiteMapDataSource資料來源控制項可以提
供網站巡覽控制項Menu和TreeView所需的
資料來源，其預設的資料來源就是上一節
建立的Web.sitemap檔案。
12-2-2 SiteMapDataSource資料來
源控制項-新增控制項

請在「工具箱」視窗展開【資料】區段，拖拉
SiteMapDataSource資料來源控制項至左邊名為
MenuContent的ContentPlaceHolder控制項，如
下圖所示：
12-2-2 SiteMapDataSource資料來
源控制項-控制項標籤
 SiteMapDataSource資料來源控制項標籤，
如下所示：
<asp:SiteMapDataSource
ID="SiteMapDataSource1" runat="server" />
 上述SiteMapDataSource資料來源控制項，
預設是使用Web.sitmap檔案作為資料來源，
其相關屬性的說明，如下表所示：
屬性
ShowStartingNode
說明
是否顯示開始節點，True 為顯示；False 為不顯示
12-3 Menu選單控制項
使用靜態資料建立Menu控制項
 12-3-2 使用動態資料建立Menu控制項
 12-3-1
12-3-1 使用靜態資料建立Menu控制
項-說明
 當使用靜態資料建立Menu控制項時，網站
的巡覽架構是定義在控制項標籤中的
<Items>標籤，其下的每一個項目就是一個
MenuItem控制項。
 在VWD可以使用「功能表項目編輯器」對
話方塊來幫助我們建立靜態資料的巡覽架
構。
Menu控制項
12-3-1 使用靜態資料建立Menu控制
項-Menu控制項屬性
 Menu控制項的常用屬性說明，如下表所示：
屬性
StaticDisplayLevels
Orientation
說明
顯示幾層靜態選單，超過的選單就成為動態選單，預
設值是 1
顯示靜態選單的方向是垂直 Vertical（預設）
，或水平
Horizontal
12-3-1 使用靜態資料建立Menu控制
項-MenuItem控制項屬性
 MenuItem控制項的常用屬性說明，如下表
所示：
屬性
NavigateUrl
Text
ToolTip
說明
指定項目連接的 URL 網址
指定項目名稱
指定項目的提示說明文字
12-3-1 使用靜態資料建立Menu控制
項-新增Menu控制項
 在「工具箱」視窗的【巡覽】區段，拖拉
Menu控制項至編輯視窗的<div>標籤中，如
下圖所示：
12-3-1 使用靜態資料建立Menu控制
項-編輯項目

按一下上方箭頭圖示顯示「Menu工作」功能表，
選【編輯功能表項目】超連結，可以看到「功能
表項目編輯器」對話方塊。
新增根項目、下
一層項目和刪除
項目
MenuItem控制項
屬性
12-3-1 使用靜態資料建立Menu控制
項-範例網站
ASP.NET網站：Ch12-3-1

在ASP.NET網頁新增Menu控制項，其選項的項目
是iPod產品，按一下可以連接指定產品的
ASP.NET網頁，如下圖所示：
12-3-2 使用動態資料建立Menu控制
項-說明
 動態資料建立Menu控制項就是從
SiteMapDataSource資料來源控制項取得選
項資料，其項目就是定義在網站地圖檔
Web.sitemap。
12-3-2 使用動態資料建立Menu控制
項-指定資料來源
 選Menu控制項且開啟「Menu工作」功能
表，在【選擇資料來源】欄指定資料來源
為【SiteMapDataSource1】。
12-3-2 使用動態資料建立Menu控制
項-範例網站
ASP.NET網站：Ch12-3-2

在ASP.NET網站的主版頁面擁有Menu控制項，其
選單項目是定義在網站地圖檔Web.sitemap，我
們可以使用資料來源控制項取得選項資料，如下
圖所示：
12-4 TreeView樹狀檢視控制項
使用靜態資料建立TreeView控制項
 12-4-2 使用動態資料建立TreeView控制項
 12-4-1
12-4-1 使用靜態資料建立TreeView
控制項-說明
當使用靜態資料來建立TreeView控制項時，網站
的巡覽架構是定義在控制項標籤中的<Items>標籤，
其下的每一個項目就是一個MenuItem控制項。
 在VWD可以使用「TreeView節點編輯器」對話方
塊來幫助我們建立靜態資料的巡覽架構。

TreeView控制項
12-4-1 使用靜態資料建立TreeView
控制項-屬性
 TreeView控制項的常用屬性說明，如下表
所示：
屬性
CollapseImageUrl
ExpandImageUrl
ImageSet
ExpandDepth
ShowLines
說明
隱藏樹狀結構的圖片
展開樹狀結構的圖片
隱藏與展開樹狀結構使用的圖片集，常用值有 Arrows、
Contacts、Events、Inbox、Faq 和 News 等
顯示幾層樹狀結構，預設值 FullyExpand 是完全展開
是否顯示連接父節點與子節點的連接線，True 為顯示；
False 為隱藏
12-4-1 使用靜態資料建立TreeView
控制項-新增TreeView控制項
 在「工具箱」視窗的【巡覽】區段，拖拉
TreeView控制項至編輯視窗的<div>標籤中，
如下圖所示：
12-4-1 使用靜態資料建立TreeView
控制項-編輯節點

按一下上方箭頭圖示顯示「TreeView工作」功能
表，然後選【編輯節點】超連結，可以看到
「TreeView節點編輯器」對話方塊。
新增根節點、下
一層節點和刪除
節點
MenuItem控制項
屬性
12-4-1 使用靜態資料建立TreeView
控制項-範例網站
ASP.NET網站：Ch12-4-1

在ASP.NET網頁新增TreeView控制項，其節點是
第12-2-1節網站地圖檔Web.sitemap中的資訊產
品節點，按一下可以連接指定產品的ASP.NET網
頁，如下圖所示：
12-4-2 使用動態資料建立TreeView
控制項-說明
 TreeView控制項一樣可以使用動態資料來
取得節點資料，換句話說，就是使用
SiteMapDataSource控制項取得網站地圖定
義的節點資料。
12-4-2 使用動態資料建立TreeView
控制項-指定資料來源
 選TreeView控制項且開啟「TreeView工作」
功能表，在【選擇資料來源】欄指定資料
來源為【SiteMapDataSource1】。
12-4-2 使用動態資料建立TreeView
控制項-範例網站
ASP.NET網站：Ch12-4-2

此ASP.NET網站和Ch12-3-2相同，只是在主版頁
面擁有的是TreeView控制項，其節點是定義在網
站地圖檔Web.sitemap，我們可以指定資料來源
控制項取得節點資料，如下圖所示：
12-5 SiteMapPath網站路徑控制
項
新增SiteMapPath控制項
 12-5-2 使用樣板標籤建立網站路徑
 12-5-1
12-5-1 新增SiteMapPath控制項-說
明
 SiteMapPath網站路徑控制項預設使用
Web.sitemap檔案來建立網站路徑，它並不
需要透過SiteMapDataSource資料來源控制
項來取得資料。SiteMapPath控制項的常用
屬性說明，如下表所示：
屬性
PathSeparator
ParentLevelsDisplayed
RenderCurrentNodeAsLink
說明
路徑分隔字串
父路徑顯示幾層的節點
目前節點是否成為超連結，預設值 False 為不
是；True 為是
12-5-1 新增SiteMapPath控制項-新
增控制項

在「工具箱」視窗的【巡覽】區段，拖拉
SiteMapPath控制項至編輯視窗
SiteMapDataSource控制項上方名為UpContent
的Content控制項，就可以新增此控制項。
12-5-1 新增SiteMapPath控制項-範
例網站
ASP.NET網站：Ch12-5-1

在ASP.NET網頁PDA.aspx新增SiteMapPath控制
項，如下圖所示：
12-5-2 使用樣板標籤建立網站路徑說明
 SiteMapPath網站路徑控制項可以使用樣板
標籤來自訂網站路徑的格式（事實上，
Menu和TreeView控制項也支援樣板標籤），
例如：改為使用Button控制項來顯示路徑節
點。樣板標籤的說明，如下表所示：
12-5-2 使用樣板標籤建立網站路徑樣板標籤
 樣板標籤的說明，如下表所示：
樣板標籤
RootNodeTemplate
CurrentNodeTemplate
NodeTemplate
PathSeparatorTemplate
說明
定義根路徑節點的樣式
定義目前路徑節點的樣式
定義路徑節點的樣式
路徑分隔符號的樣式
12-5-2 使用樣板標籤建立網站路徑資料繫結運算式

因為我們是使用樣板標籤來建立網站路徑，所以
需要自行處理轉址至其他網頁。在自訂的Button
控制項是使用資料繫結來取得節點名稱和URL網
址，如下所示：
<%# Eval("title") %>
<%# Eval("url") %>

上述程式碼可以取得網站路徑的節點名稱title和
URL網址的url，以Button控制項為例，就是將
Text屬性指定成<%# Eval("title") %>來顯示節點
名稱。
12-5-2 使用樣板標籤建立網站路徑事件處理程序
在Command事件處理程序可以使用
Response.Redirect()方法來轉址至參數的URL網
址，如下所示：
protected void Button1_Command(object sender,
CommandEventArgs e)
{
Response.Redirect(
e.CommandArgument.ToString());
}

12-5-2 使用樣板標籤建立網站路徑編輯樣板

選【SiteMapPath】控制項，開啟「SiteMapPath
工作」功能表後，選【編輯樣板】超連結，預設
切換至NodeTemplate樣板編輯框，如下圖所示：
12-5-2 使用樣板標籤建立網站路徑範例網站
ASP.NET網站：Ch12-5-2

在ASP.NET網頁PDA.aspx已經新增SiteMapPath
控制項，我們準備使用樣板標籤來建立自訂的網
站網徑，使用的是Button控制項，如下圖所示：
12-6 XML文件與巡覽控制項-說明

Menu和TreeView巡覽控制項除了可以建立網站
架構的選單外，我們也可以用來顯示XML文件，
特別是TreeView控制項，因為XML文件的資料本
身就是一種樹狀結構。
 事實上，TreeView控制項可以透過
XmlDataSource資料來源控制項，從XML文件取
得階層的節點資料。
12-6 XML文件與巡覽控制項-範例網
站
ASP.NET網站：Ch12-6

在ASP.NET網頁的TreeView控制項，新增資料來
源為XML文件AppB_2_1.xml，我們準備直接從
TreeView控制項建立新的資料來源，所以並沒有
新增XmlDataSource控制項，如下圖所示：