Transcript ASP.NET 2.0網頁製作徹底研究

第12章 ASP.NET的網站導覽與
一致化




12-1
12-2
12-3
12-4
主版頁面
網站導覽控制項
MultiView與Wizard控制項
佈景與外觀
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
12-2-3
12-2-4
12-2-5
超連結控制項建立網站導覽
ASP.NET 2.0版的網站導覽
Menu選單控制項
TreeView樹狀檢視控制項
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"
Title="步驟一">
………
</asp:WizardStep>
<asp:WizardStep Runat="server"
Title="步驟二">
………
</asp:WizardStep>
<asp:WizardStep Runat="server"
Title="步驟三">
………
</asp:WizardStep>
<asp:WizardStep Runat="server"
Title="結束">
………
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
StepType="Start"
StepType="Step"
StepType="Finish"
StepType="Complete"
12-3-2 Wizard控制項-3
12-4 佈景與外觀







12-4-1
12-4-2
12-4-3
12-4-4
12-4-5
12-4-6
12-4-7
佈景與外觀的基礎
建立外觀和套用佈景
預設與具名外觀
覆寫控制項的外觀
在佈景使用CSS和圖片
動態載入指定佈景
套用整個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應用程
式的佈景。