通常，用戶友好的個性化站點都有著一致的，站點統一的頁面布局和導航體系。asp.net 2.0引入的兩個新特性給我們在統一站點的頁面布局和站點導航上提供了簡單而有效的工具，它們是母版頁和站點導航。母版頁允許開發者創建統一的站點模板和指定的可編輯區域。這樣，aspx頁面只需要給模板頁中指定的可編輯區域提供填充內容就可以了，所有在母版頁中定義的其他標記將出現在所有使用了該母版頁的aspx頁面中。這種模式允許開發者可以統一的管理和定義站點的頁面布局，因此可以容易的得到擁有統一的視覺和感覺的頁面并且還易于更新。

站點導航系統允許開發者定義站點地圖并提供了API以便通過程序查詢站點地圖信息。新的導航控件包括Menu,TreeView和SiteMapPath,這樣可以很容易的在一個一般的導航用戶界面元素里呈現全部或者部分站點地圖。我們將使用默認的站點導航提供者，這意味著我們的站點地圖將定義在一個xml格式的文件中。

為說明這些觀念并且使我們的教程的示例站點可用性更佳，讓我們通過本次課程定義一個站點統一的頁面布局，實現一個站點地圖，并且添加導航UI。在這個課程結束時我們的課程示例站點就擁有一個優美的設計效果了。

圖1：本課程的最終成果

步驟1：創建母版頁

第一步是為我們的站點創建母版頁。到目前為止我們的站點只有一個類型化的DataSet（Northwind.xsd,位于App_Code文件夾），業務邏輯層類庫（ProductsBLL.cs,CategoriesBLL.cs等等，這些都在App_Code文件夾里），數據庫（NORTHWIND.MDF,位于App_Data文件夾），配置文件（web.config）,和一個CSS文件（Style.css）。

我整理這些頁面和文件以說明前面兩次課程中介紹的數據訪問層和業務邏輯層將會在以后課程的更多細節中重用這些示例。

圖2：我們項目中的文件

要創建母版頁，用右鍵點擊解決方案管理器中的項目名稱并選擇添加新項。然后從模板列表窗口中選擇母版類型并且命名為Site.master

圖3：添加一個母版頁到站點中

在母版頁中定義站點統一的頁面布局。你可以用設計視圖定義你需要的布局或者控件，你還可以手動的在代碼視圖中添加標記。在我們的母版頁中使用了定義在外部文件Style.css中的層疊樣式表來定義位置和風格。也許你不知道下面這些標記怎樣顯示，樣式表規則定義了導航用的< div>標簽中的內容絕對定位在頁面的左邊并且寬度固定為200像素。 

< %@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" 
 %>  
   
 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   
 < html xmlns="http://www.w3.org/1999/xhtml" >  
 < head runat="server">  
     < title>Working with Data Tutorials< /title>  
     < link href="Styles.css" rel="stylesheet" type="text/css" />  
 < /head>  
< body>  
    < div id="wrapper">  
 
        < form id="form1" runat="server">  
 
            < div id="header">  
                < span class="title">Working with Data Tutorials< /span>  
                < span class="breadcrumb">  
                 TODO: Breadcrumb will go here< /span>  
            < /div>  
 
            < div id="content">  
                < asp:contentplaceholder id="MainContent" 
                 runat="server">  
                  < !-- Page-specific content will go here -->  
                < /asp:contentplaceholder>  
            < /div>  
 
            < div id="navigation">  
                TODO: Menu will go here  
            < /div>  
        < /form>  
    < /div>  
< /body>  
< /html>  
 

一個母版頁定義了固定的布局和可以被那些使用了母版頁的aspx頁面填充的可編輯區域

這個可編輯區域是通過ContentPlaceHolder控件顯示，位于< div>標記中。我們的母版頁中只有一個ContentPlaceHolder(MainContent),但是母版頁中是可以包含多個ContentPlaceHolder控件的。

輸入上面的標記，切換到設計視圖觀察母版頁的布局。所有的使用了這個母版頁的aspx頁面都會有這樣統一的布局，而MainContent區域是留給aspx頁面展現自己才華的地方。

圖4：在設計視圖中顯示的母版頁

【編輯推薦】

1. ASP.NET MVC路徑選擇系統構建
2. ASP.NET MVC框架中的URL路徑選擇場景
3. ASP.NET MVC 框架URL路徑選擇規則
4. ASP.NET MVC框架：使用強類型類來傳遞ViewData
5. 使用ASP.NET MVC框架創建電子商務網站