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

Slides:



Advertisements
Similar presentations
应用地球物理卓越人才培养体系构建与实践 吉林大学地球探测科学与技术学院 刘 财 经验交流.
Advertisements

Microsoft Web Developer ASP .NET 2.0 入門
第1章 ASP.NET、VWD與HTML的基礎
08 CSS 基本語法 8-1 CSS 的演進 8-2 CSS 樣式規則與選擇器 8-3 連結HTML 文件與CSS 樣式表
題目:十六對一多工器 姓名:李國豪 學號:B
第11章 網站外觀的一致化設計 11-1 CSS層級式樣式表 11-2 主版頁面 11-3 佈景與面板.
DreamWeaver MX (II) 林偉川.
程式設計概論 1.1 程式設計概論 程式語言的演進 物件導向程式 程式開發流程 1.2 C++開發工具
Google協作平台.
連結資料庫 ACCESS MSSQL.
在 Web 应用中,导航是非常重要的。ASP
Q101 在701 SDX Linux上的標準安裝與使用程序v2
第二章 Linux基本指令與工具操作 LINUX 按圖施工手冊.
客戶端的檔案上傳 HtmlInputFile檔案控制項 上傳單一檔案 同時上傳多個檔案.
第8章 ADO.NET元件與資料繫結 8-1 資料庫的基礎 8-2 ASP.NET網頁資料庫
類別(class) 類別class與物件object.
SQL Stored Procedure SQL 預存程序.
R教學 安裝RStudio 羅琪老師.
1 创建SqlDataSouce控件 数据源控件(SqlDataSource)
第15章 豐富控制項.
自由軟體介紹(一) 把flash通通帶回家 報告人:陳俊銘.
網頁切換移轉 JS vs. ASP.NET.
Word與PowerPoint的結合 建功國小 陳旻杰 健行國小 張慧如.
Quiz6 繳交期限: 12/14(四) 23:59前.
檔案與磁碟的基本介紹.
第二章 SPSS的使用 2.1 啟動SPSS系統 2.2 結束SPSS系統 2.3 資料分析之相關檔案 2.4 如何使用SPSS軟體.
系統設定 IE8相容性檢視
FTP檔案上傳下載 實務與運用.
網頁切換移轉 JS vs. ASP.NET.
VS.NET 2003 IDE.
FileUpload控制項 建國科技大學 資管系 饒瑞佶 2007年.
第10章 Web應用程式的資料分享 10-1 Web應用程式的基礎 10-2 設定ASP.NET的Web應用程式 10-3 網頁間的資料分享
Ch20. 計算器 (Mac 版本).
Dreamweaver 8 潘雅真老師.
第 19 章 XML記憶體執行模式.
PowerPoint 2019/4/9.
電子商務新版面問題排除.
網路工具運用 講師:鍾詩蘋.
HTML – 超連結與圖片 資訊教育.
伸峰科技股份有限公司 李書帆 SanfongWeb 網頁編修 伸峰科技股份有限公司 李書帆
網頁程式概論 建國科技大學資管系 饒瑞佶 2015/9 V1 2016/4 V2 2016/9 V3.
資料來源 2 網路過濾軟體之安裝說明 資料來源 2.
網頁資料知多少? 事 實 ? 謠言?.
讓Emulator可以 使用Android Market
表格(HTML – FORM).
如何利用範本來製作網頁.
Google協作平台+檔案分享(FileZilla+網路芳鄰)
個人網路空間 資訊教育.
第6章 資料驗證、HTTP物件與錯誤處理 6-1 資料驗證的基礎 6-2 基本驗證控制項 6-3 進階驗證控制項
VS.NET 2003 IDE.
GridView.
MicroSim pspice.
Video 影像 (VideoPlayer 影像播放器、Camcorder 錄影機) 靜宜大學資管系 楊子青
取得與安裝TIDE 從TIBBO網站取得TIDE
編輯網頁可用那些應用程式? 記事本 Word FrontPage Dreamweaver.
基本指令.
程式移植.
Dreamweaver 進階網頁製作 B 許天彰.
1. 查詢個人電腦版本 1.進入控制台 2.點選“所有控制台項目” 3.點選“系統”.
進階UI元件:ListView元件以及複選 靜宜大學資管系 楊子青
Brief Guide of FrontPage
班級:博碩子一甲 授課老師:鐘國家 助教:陳國政
Cloud Training Material- 事件 Sherman Wang
Activity的生命週期: 播放音樂與影片 靜宜大學資管系 楊子青
連結資料庫 MYSQL.
DreamWeaver MX (IV) 林偉川.
若要查看更多祕訣、影片、說明和訓練,請瀏覽 aka.ms/officetips
第五章 自訂佈景主題與文字處理 講授者:詹雅愔.
Chapter 4 Multi-Threads (多執行緒).
Develop and Build Drives by Visual C++ IDE
Presentation transcript:

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

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

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

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

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

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

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

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-File-1.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="數位助理"/> </siteMap>

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

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

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

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

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

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

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

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

12-3-1 使用靜態資料建立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樹狀檢視控制項 12-4-1 使用靜態資料建立TreeView控制項

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

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

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網站路徑控制項 12-5-1 新增SiteMapPath控制項 12-5-2 使用樣板標籤建立網站路徑

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

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 使用樣板標籤建立網站路徑-樣板標籤 樣板標籤的說明,如下表所示:

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控制項,如下圖所示:

End