狠狠撸

第 12 章 ASP.NET 的網站導覽與一致化 12-1 主版頁面 12-2 網站導覽控制項 12-3 MultiView 與 Wizard 控制項 12-4 佈景與外觀

12-1 主版頁面 12-1-1 主版頁面的基礎 12-1-2 建立主版頁面 12-1-3 建立內容頁面 12-1-4 巢狀主版頁面 12-1-5 存取主版頁面屬性 12-1-6 設定 Web 網站的主版頁面和動態載入主版頁面

12-1-1 主版頁面的基礎 - 說明 1 主版頁面類似 HTML 框架頁，可以將網頁分割成編輯區域，這是使用 ContentPlaceHolder 控制項標示的編輯區域，其他部分屬於網頁固定內容，可以建立網站每一頁網頁相同的外觀配置，如下圖所示：

12-1-1 主版頁面的基礎 - 說明 2 主版頁面使用 ContentPlaceHolder 控制項定義可編輯區域，其他部分是網站每一頁網頁都擁有的固定部分。我們可以在固定部分加上導覽架構、公司商標和版權宣告等網頁內容。內容頁面是使用 Content 控制項所建立的網頁內容，屬於網頁內容的變動部分， Content 控制項內容可以填入主版頁面對應 ContentPlaceHolder 控制項的位置，在整合後才顯示實際顯示的網頁內容。

12-1-2 建立主版頁面 -Page 指引指令主版頁面的副檔名是 .master ，它和其他 Web 表單的 ASP.NET 程式沒有什麼不同，一樣可以新增 Web 控制項、 HTML 標籤和程式碼。其差別是使用 Master 指引指令取代 Page 指引指令，如下所示： <%@ Master Language="VB" %> 上述 Master 指引指令和 Page 指引指令擁有相同屬性，例如： Language 屬性。

12-1-2 建立主版頁面 -ContentPlaceHolder 控制項在主版頁面可以擁有 0 至多個 ContentPlaceHolder 控制項，如下所示： <asp:ContentPlaceHolder Id="content" Runat="server"/> 上述標籤建立名為 content 的 ContentPlaceHolder 控制項， Id 屬性是用來對應內容頁面的 Content 控制項。

12-1-2 建立主版頁面 - 預設內容在 ContentPlaceHolder 控制項可以擁有預設內容（ Default Content ），如下所示： <asp:ContentPlaceHolder Id="menu“ Runat="server"> <br><a href="Ch12-1-3.aspx"> 網站首頁 </a><p> <a href="Ch12-1-3.aspx"> 圖書目錄 </a><p> ……… </asp:ContentPlaceHolder>

12-1-3 建立內容頁面 -Page 指引指令在建立好主版頁面後，就可以建立套用主版頁面的內容頁面。 ASP.NET 程式的 Page 指引指令可以指定套用的主版頁面，如下所示： <%@ Page MasterPageFile="Ch12-1-2.master" Title="Ch12-1-3.aspx" %> 上述 Page 指引指令使用 MasterPageFile 屬性指定套用的主版頁面檔案， Title 屬性是網頁標題文字，也就是指定主版頁面 HtmlHead 控制項的標題文字。

12-1-3 建立內容頁面 -Content 控制項 ASP.NET 程式的實際內容是位在 Content 控制項，如下所示： <asp:Content ContentPlaceHolderID="content“ Runat="server"> ……… </asp:Content> 上述標籤使用 ContentPlaceHolderID 指明對應的 ContentPlaceHolder 控制項，標籤中是網頁內容的 HTML 標籤和伺服端控制項。

12-1-4 巢狀主版頁面 ASP.NET 的 Web 應用程式能夠建立多個主版頁面來建立不同的版面配置。不只如此，我們還可以繼承其他主版面頁的版面配置來建立巢狀主版頁面，如下所示： <%@ Master MasterPageFile="Ch12-1-2.master" %> 上述 Master 指引指令使用 MasterPageFile 屬性指定上一層主版頁面 Ch12-1-2.master 。換句話說，在主版頁面的 Content 控制項也可以擁有 ContentPlaceHolder 控制項。

12-1-5 存取主版頁面屬性 - 公開主版頁面的屬性在主版頁面公開屬性是使用 Property 指令來定義類別屬性，如下所示： <script Runat="server"> Private copyright As String Public Property Footer() As String Get Return copyright End Get Set(value As String) copyright = value End Set End Property </script>

12-1-5 存取主版頁面屬性 - 存取主版頁面的屬性和控制項 1 內容頁面的 ASP.NET 程式可以在 MasterType 指引指令指定參考的主版頁面檔案，如下所示： <%@ Page Language="VB" Title="Ch12-1-5.aspx" MasterPageFile="Ch12-1-5.master" %> <%@ MasterType VirtualPath="Ch12-1-5.master" %> 上述 MasterType 指引指令使用 VirtualPath 屬性指明參考的主版頁面檔案。

12-1-5 存取主版頁面屬性 - 存取主版頁面的屬性和控制項 2 在 Page_Load() 事件處理可以存取主版頁面的公開屬性，如下所示： <script Runat="server"> Sub Page_Load(Sender As Object, E As EventArgs) Master.Footer= _ "(C)Copyright by 陳會安 2006,2007" Dim label As Label label = Master.FindControl("mySite") label.Text="MyComputerBooks.com" End Sub </script>

12-1-6 設定 Web 網站的主版頁面和動態載入主版頁面設定 Web 網站的主版頁面為了建立網站一致化的版面配置，我們可以替整個 Web 應用程式套用主版頁面，這是在 Web 組態檔 web.config 設定，如下所示： <configuration> <system.web> <pages master="Ch12-1-2.master"/> </system.web> </configuration> 上述 pages 標籤的 master 屬性指定整個 Web 應用程式套用的主版頁面。

12-1-6 設定 Web 網站的主版頁面和動態載入主版頁面動態載入主版頁面在內容頁面的 ASP.NET 程式可以動態載入主版頁面，這需要在 Page_PreInit() 事件處理程序載入主版頁面，如下所示： <%@ Page Language="VB" %> <script Runat="server"> Sub Page_PreInit(Sender As Object, E As EventArgs) Page.MasterPageFile = "Ch12-1-2.master" Page.Title = "Ch12-1-6.aspx" End Sub </script>

12-2 網站導覽控制項 12-2-1 超連結控制項建立網站導覽 12-2-2 ASP.NET 2.0 版的網站導覽 12-2-3 Menu 選單控制項 12-2-4 TreeView 樹狀檢視控制項 12-2-5 SiteMapPath 網站路徑控制項

12-2-1 超連結控制項建立網站導覽最基本的網站導覽控制項是 ASP.NET 1.0/1.1 版提供的 HTML 控制項 HtmlAnchor 和 Web 控制項 HyperLink ，這兩個控制項可以建立超連結來建立網站導覽。首先是 HtmlAnchor 控制項，如下所示： <a Id="link1" Runat="server"></a> 上述標籤建立名為 link1 的 HtmlAnchor 控制項。 Web 控制項 HyperLink ，如下所示： <asp:HyperLink Id="link2" Text=" 圖書搜尋 " Runat="server"/>

12-2-2 ASP.NET 2.0 版的網站導覽 - 說明 ASP.NET 2.0 版實作網站導覽功能，預設使用 XML 文件定義網站地圖，並且提供網站導覽控制項 Menu 、 TreeView 和 SiteMapPath ，可以顯示選單、樹狀選單和網站路徑等網站導覽功能。

12-2-2 ASP.NET 2.0 版的網站導覽 - 網站地圖檔案 web.sitemap(1) 網站地圖是由 SiteMapNode 物件組成的階層架構， ASP.NET 提供 Site Navigation API ，可以存取階層架構建立網站導覽功能，在實作上，我們可以直接使用 ASP.NET 導覽控制項來建立網站導覽功能。 ASP.NET 2.0 版預設的網站地圖是使用 XML 檔案來建立，這是位在 Web 應用程式根目錄，名為 web.sitemap 的特殊檔案。

12-2-2 ASP.NET 2.0 版的網站導覽 - 網站地圖檔案 web.sitemap(2) <?xml version="1.0" encoding="UTF-8" ?> <siteMap> <siteMapNode url="~/default.aspx" title=" 首頁 "> <siteMapNode url="~/language.aspx" title=" 程式語言 "> <siteMapNode url="~/c.aspx" title="C 與 C++ 語言 "/> <siteMapNode url="~/Ch12-2-5Button.aspx" title="Java 2 語言 "/> </siteMapNode> <siteMapNode url="~/webdesign.aspx" title=" 網頁設計 "> <siteMapNode url="~/aspnet.aspx" title="ASP.NET"/> <siteMapNode url="~/php.aspx" title="PHP 5"/> <siteMapNode url="~/Ch12-2-5.aspx" title="JSP 2"/> </siteMapNode> </siteMapNode> </siteMap>

12-2-2 ASP.NET 2.0 版的網站導覽 - SiteMapDataSource 資料來源控制項 SiteMapDataSource 資料來源控制項就是第 10 章的資料來源控制項，可以提供網站導覽控制項 Menu 和 TreeView 所需的資料，如下所示： <asp:SiteMapDataSource Id="sitemap" Runat="server"/> 上述 SiteMapDataSource 資料來源控制項，預設使用 web.sitmap 檔案作為資料來源。

12-2-2 ASP.NET 2.0 版的網站導覽 - 網站地圖提供者 (1) ASP.NET 的 Web 應用程式預設只擁有一個位在根目錄的 web.sitemap 檔案，因為網站通常只有一種導覽架構，所以只需一個網站地圖即可。不過，在 Web 應用程式仍然可以建立其他網站地圖檔，例如：前述使用 VWD 建立的 Ch12-2-2.sitemap ，此時需要在 web.config 檔案新增網站地圖提供者（ Site Map Providers ）。

12-2-2 ASP.NET 2.0 版的網站導覽 - 網站地圖提供者 (2) <system.web> <siteMap enabled="true"> <providers> <add name="MyProvider" type="System.Web.XmlSiteMapProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" siteMapFile="Ch12-2-2.sitemap"/> </providers> </siteMap> </system.web>

12-2-3 Menu 選單控制項 - 資料來源 Menu 選單控制項可以建立水平或垂直方向的選單，其資料來源可以是 SiteMapDataSource 資料來源控制項，在 ASP.NET 程式需要新增此控制項，如下所示： <asp:SiteMapDataSource Id="sitemap" Runat="server"/> 上述標籤建立名為 sitemap 的 SiteMapDataSource 資料來源控制項，在 Menu 控制項是使用 DataSourceID 屬性來指定資料來源。

12-2-3 Menu 選單控制項 - 標籤 <asp:Menu id="NavigationMenu" Runat="Server" StaticDisplayLevels="2" DataSourceID="sitemap" StaticMenuItemStyle-VerticalPadding="3" StaticMenuItemStyle-Font-Size="10pt" StaticMenuItemStyle-ForeColor="maroon" StaticHoverStyle-ForeColor="red" DynamicMenuStyle-HorizontalPadding="6" DynamicMenuStyle-VerticalPadding="3" DynamicMenuStyle-BackColor="maroon" DynamicMenuItemStyle-VerticalPadding="6" DynamicMenuItemStyle-Font-Size="10pt" DynamicMenuItemStyle-ForeColor="white" DynamicHoverStyle-BackColor="lightgray" DynamicHoverStyle-ForeColor="black"/>

12-2-3 Menu 選單控制項 - 圖例

12-2-4 TreeView 樹狀檢視控制項 - 資料來源 TreeView 控制項能夠建立可展開且垂直顯示的樹狀結構，換句話說，就是使用階層架構來顯示網站地圖。可以使用 SiteMapDataSource 資料來源控制項，如下所示： <asp:SiteMapDataSource Id="sitemap" Runat="server" ShowStartingNode="False"/> 上述標籤建立名為 sitemap 的 SiteMapDataSource 資料來源控制項。

12-2-4 TreeView 樹狀檢視控制項 - 標籤在 TreeView 控制項是使用 DataSourceID 屬性指定資料來源，如下所示： <asp:TreeView Id="treeview" Runat="server" DataSourceID="sitemap" ImageSet="Arrows" ExpandDepth="0" ShowLines="True" HoverNodeStyle-Font-Bold="True" RootNodeStyle-ForeColor="Blue"/> 上述標籤建立 TreeView 控制項，使用 sitemap 資料來源，也就是之前 SiteMapDataSource 資料來源控制項。

12-2-4 TreeView 樹狀檢視控制項 - 圖例

12-2-5 SiteMapPath 網站路徑控制項 - 標籤 SiteMapPath 網站路徑控制項如同檔案完整路徑，可以顯示目前執行 ASP.NET 程式檔案所在的網站路徑，例如：首頁 > 網頁設計 >JSP 2 。 SiteMapPath 網站路徑控制項預設使用 web.sitemap 檔案建立網站路徑，不過，它並不需要 SiteMapDataSource 資料來源控制項，如下所示： <asp:SiteMapPath Id="SitePath" Runat="Server" PathSeparator=" / " PathSeparatorStyle-Font-Size="10pt" NodeStyle-Font-Size="10pt" NodeStyle-ForeColor="maroon" CurrentNodeStyle-Font-Underline="False" CurrentNodeStyle-ForeColor="red"/>

12-2-5 SiteMapPath 網站路徑控制項 - 圖例

12-3 MultiView 與 Wizard 控制項 12-3-1 MultiView 控制項 12-3-2 Wizard 控制項

12-3-1 MultiView 控制項 - 標籤 MultiView 控制項的功能類似 Panel 控制項，可以切換顯示不同 View 控制項的部分網頁內容，如下所示： <asp:MultiView Id="multiview" Runat="server" ActiveViewIndex="0"> <asp:View Id="view1" Runat="server"> ……… </asp:View> ……… <asp:View Id="view3" Runat="server"> ……… </asp:View> </asp:MultiView>

12-3-1 MultiView 控制項 - 切換顯示在 ASP.NET 程式可以新增 Button 控制項切換 View 控制項，如下所示： <asp:Button Id="btn1" Runat="server" Text="GridView 檢視 " OnClick="btn1_Click"/> 上述 Button 控制項可以切換顯示 view1 的 View 控制項內容，其事件處理程序，如下所示： Sub btn1_Click(Sender as Object, _ E as EventArgs) multiview.SetActiveView(view1) End Sub

12-3-2 Wizard 控制項 -1 Wizard 控制項可以在網頁建立多步驟瀏覽的精靈頁面，用來收集使用者資訊，如下所示： <asp:Wizard Id="wizard" Runat="server" ActiveStepIndex="0" Width="322px" CellPadding="5" OnFinishButtonClick="showResult" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderWidth="1px" HeaderText=" 程式設計調查 " StepStyle-ForeColor="#333333" SideBarStyle-BackColor="#507CD1" HeaderStyle-BackColor="#284E98" ……… NavigationButtonStyle-BackColor="White" ……… SideBarButtonStyle-BackColor="#507CD1" SideBarButtonStyle-ForeColor="White">

12-3-2 Wizard 控制項 -2 <WizardSteps> <asp:WizardStep Runat="server" StepType="Start" Title=" 步驟一 "> ……… </asp:WizardStep> <asp:WizardStep Runat="server" StepType="Step" Title=" 步驟二 "> ……… </asp:WizardStep> <asp:WizardStep Runat="server" StepType="Finish" Title=" 步驟三 "> ……… </asp:WizardStep> <asp:WizardStep Runat="server" StepType="Complete" Title=" 結束 "> ……… </asp:WizardStep> </WizardSteps> </asp:Wizard>

12-4 佈景與外觀 12-4-1 佈景與外觀的基礎 12-4-2 建立外觀和套用佈景 12-4-3 預設與具名外觀 12-4-4 覆寫控制項的外觀 12-4-5 在佈景使用 CSS 和圖片 12-4-6 動態載入指定佈景 12-4-7 套用整個 Web 應用程式的佈景

12-4-1 佈景與外觀的基礎 - 說明對於 Web 網站來說，維護網頁色彩、字型和尺寸等一致外觀的顯示效果是一件十分重要的工作。傳統網站設計者是使用層級式樣式表 CSS （ Cascading Style Sheets ）來格式化網頁元素的字型、色彩或尺寸。 ASP.NET 的佈景可以取代 CSS 功能，它包含樣式屬性、 CSS 和圖片，可以套用在伺服端控制項、 Web 表單或整個 Web 應用程式。 ASP.NET 佈景的組成元素，如下所示：外觀檔案，其副檔案為 .skin 。 CSS 檔案。圖片檔案。

12-4-1 佈景與外觀的基礎 - 佈景目錄 ASP.NET 佈景的相關檔案是儲存在 Web 應用程式根目錄下，名為「 App_Themes 」的子目錄，如果 Web 應用程式需要套用佈景（ Themes Directory ），請先建立此目錄。在此目錄下是各種佈景名稱的子目錄，例如：名為 Maroon 的佈景，其目錄是「 \App_Themes\Maroon 」，在此目錄下的檔案是組成佈景的 .skin 檔、 CSS 檔和圖片檔案。

12-4-1 佈景與外觀的基礎 - 建立佈景的步驟在 ASP.NET 的 Web 應用程式建立佈景，首先需要建立所需的目錄架構，以名為 Maroon 的佈景來說，其建立步驟如下所示： Step 1 ：在 Web 應用程式根目錄建立名為 App_Themes 的目錄。 VWD 可以在「方案總管」視窗，執行右鍵快顯功能表的【新增資料夾】指令來新增此目錄。 Step 2 ：在 App_Themes 目錄執行右鍵「加入 ASP.NET 資料夾 /Theme 」指令，新增名為 Maroon 的子目錄。 Step 3 ：將 .skin 檔、 CSS 檔和圖片檔都置於此目錄，就完成佈景的建立。

12-4-2 建立外觀和套用佈景 - 建立外觀 .skin 檔案在替名為 Maroon 的佈景建立目錄「 \App_Themes\Maroon 」後，就可以在此目錄下新增外觀 .skin 檔案。外觀 .skin 檔案是一個 ANSI 文字檔案，檔案名稱不需要和佈景同名，只需副檔名為 .skin 即可。佈景可以包含多個外觀 .skin 檔案，例如：替每一種控制項都建立專屬的外觀 .skin 檔案。在執行 ASP.NET 程式前，系統會先將位在佈景目錄下，所有外觀 .skin 檔案合併成一個檔案後，才套用到 ASP.NET 程式，所以名稱並不重要，讀者可以自行命名。

12-4-2 建立外觀和套用佈景 -.skin 檔案範例例如： Controls.skin 外觀檔案，如下所示： <asp:TextBox BackColor="Maroon" ForeColor="White" BorderStyle="Solid" Runat="server"/> <asp:Button BackColor="Maroon“ ForeColor="White" Font-Bold="True“ Runat="server"/> 上述檔案內容是伺服端控制項，只是沒有 Id 屬性，可以在上述標籤使用控制項樣式屬性來格式化控制項外觀。

12-4-2 建立外觀和套用佈景 - 在 ASP.NET 程式套用佈景在建立好外觀 .skin 檔案後，就可以在 ASP.NET 程式套用佈景，如下所示： <%@ Page Language="VB" Theme="Maroon" %> 上述程式碼使用 Page 指引指令的 Theme 屬性來指定佈景，以此例是 Maroon 。

12-4-3 預設與具名外觀 -1 在外觀 .skin 檔案的控制項，沒有 SkinId 屬性是預設外觀，指定 SkinId 屬性稱為具名外觀，如下所示： <asp:Label ForeColor="White" BackColor="Maroon" Runat="server"/> <asp:Label SkinId="RedLabel“ Runat="server" ForeColor="White“ BackColor="Red"/> 上述 2 個 Label 控制項的第 1 個是預設外觀，第 2 個是具名外觀。

12-4-3 預設與具名外觀 -2 在 ASP.NET 程式可以使用 SkinId 屬性來指明套用哪一個控制項，如下所示： <asp:Label Id="label3" Runat="server" SkinId="RedLabel" Text="ASP.NET 2.0 網頁製作徹底研究 "/> 上述 Label 控制項是套用 RedLabel 樣式，如果沒有指明，就是套用預設外觀的樣式。

12-4-4 覆寫控制項的外觀在上一節程式範例，雖然 Label 控制項有指定樣式屬性 BackColor 和 ForeColor ，但是設定樣式會被外觀檔案的樣式取代。如果想在 ASP.NET 程式指定樣式屬性來覆寫外觀檔案的控制項樣式，在套用佈景時是使用 StyleSheetTheme 屬性，如下所示： <%@ Page StyleSheetTheme="Maroon" %> 上述程式碼使用 Page 指引指令的 StyleSheetTheme 屬性來指定佈景，以此例是 Maroon 。

12-4-5 在佈景使用 CSS 和圖片 -CSS 樣式表檔案 CSS 層級式樣式表可以和外觀檔案搭配使用，我們只需將 CSS 檔案置於佈景目錄即可。例如： Maroon.css 的樣式表檔案，如下所示： p { font-size: 12pt; color: yellow; background-color: blue; line-height: 25px; } a:link {color:blue ; text-decoration:none} a:active {color:green ; text-decoration:none} a:visited {color:yellow; text-decoration:none} a:hover {color:red ; text-decoration:underline}

12-4-5 在佈景使用 CSS 和圖片 - 在佈景使用 CSS 樣式表檔案在 ASP.NET 程式只需套用佈景，並且使用 HtmlHead 控制項，就可以套用 CSS 樣式，如下所示： <%@ Page Theme="Maroon" %> <html> <head Runat="server"> <title>Ch12-4-5.aspx</title></head> ……… 上述 head 標籤加上 Runat="server" ，就可以套用位在佈景目錄的 CSS 樣式表檔案。

12-4-5 在佈景使用 CSS 和圖片 - 在佈景使用圖片檔案佈景可以替控制項加上圖片，例如： Menu 、 TreeView 和 BulletedList 等控制項可以加上圖片的顯示外觀。例如： BulletedList.skin 檔案內容，如下所示： <asp:BulletedList Runat="server" BulletStyle="CustomImage" BulletImageUrl="ball.gif"> <asp:ListItem Text="ASP.NET"/> <asp:ListItem Text="PHP"/> <asp:ListItem Text="JSP"/> </asp:BulletedList>

12-4-6 動態載入指定佈景在 ASP.NET 程式可以動態載入佈景，套用佈景是在 Page_PreInit() 事件處理程式指定，如下所示： Sub Page_PreInit(Sender As Object, E As EventArgs) Page.Theme = Request("selectedTheme") If Page.Theme Is Nothing Then Page.Theme = "Maroon" End If Label2.SkinId = "BlueLabel" End Sub 不過在此事件，並不能取得控制項屬性，所以使用 Request 屬性取得控制項的選擇，如下所示： Page.Theme = Request("selectedTheme")

12-4-7 套用整個 Web 應用程式的佈景對於整個 Web 應用程式，我們可以在 web.config 檔案替整個 Web 應用程式套用佈景。例如：套用 Maroon 佈景至整個 Web 應用程式，如下所示： <configuration> <system.web> <pages theme="Maroon"/> </system.web> </configuration> 上述標籤的 theme 屬性指定套用整個 Web 應用程式的佈景。

狠狠撸

Asp.Net2 12

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

More from Chui-Wen Chiu (20)

Asp.Net2 12