逐步解說：在 ASP.NET 中使用巢狀主版頁面

發行項
08/21/2008

更新：2007 年 11 月

本逐步解說說明如何以巢狀方式在另一個主版頁面 (Master Page) 中建立主版頁面。主版頁面可做為指定網頁外觀的範本。

您可以巢狀方式內嵌網頁，讓每個網頁都具有彈性的配置之外，同時讓網站保有一致的外觀。例如，您可以建立上層主版頁面，在網頁上方放置公司橫幅，並於側邊欄位放置網站巡覽控制項。接著，您可以針對使用上層主版頁面的特定部門或產品建立其下層主版頁面。它也可以當做所有其他相關部門或產品頁面的主版頁面來使用。如此一來，每個產品線或部門就會有一致的外觀，而且所有透過上層主版頁面顯示的頁面將擁有一致的整體外觀。如需主版頁面的詳細資訊，請參閱 ASP.NET 主版頁面概觀。

本逐步解說將說明下列工作：

建立主版頁面。
以巢狀方式在另一個主版頁面中建立主版頁面。
建立您要在主版頁面中顯示其內容的 ASP.NET Web 網頁。

必要條件

若要完成這個逐步解說，您需要下列項目：

Visual Studio 2008 或 Microsoft Visual Web Developer Express 版。如需下載資訊，請參閱 Visual Studio 開發人員中心網站。
.NET Framework 3.5 版。
.jpg、.gif 或其他圖形檔，可以在主版頁面上做為橫幅使用。建議橫幅的寬度不要超過 780 像素，高度不要超過 150 像素。不過，是否顯示商標是選擇性的作法，而且圖形的具體大小對完成這個逐步解說而言並不是非常重要。

建立網站

如果您已經在 Visual Web Developer 中建立了網站 (例如，藉由遵循逐步解說：在 Visual Web Developer 中建立基本 Web 網頁中的步驟)，可以使用該網站，並繼續進行下一節「建立主版頁面」的步驟。否則，請依照下列步驟建立新的網站和網頁。

若要建立檔案系統網站

開啟 Visual Web Developer。
按一下 [檔案] 功能表上的 [新網站]。

[新網站] 對話方塊便會顯示。
按一下 [Visual Studio 安裝的範本] 底下的 [ASP.NET 網站]。
在 [位置] 方塊中，輸入您想要用來儲存網站頁面的資料夾名稱。

例如，輸入下列資料夾名稱：C:\Tasks
在 [語言] 清單中，按一下您想要使用的程式語言。
按一下 [確定]。

Visual Web Developer 會建立資料夾和名稱為 Default.aspx 的新頁面。

建立上層主版頁面。

在本節中，您將建立上層主版頁面。本頁面包含可在整個網站中使用的橫幅與導覽控制項。稍後，您將建立另一個主版頁面，以便用內嵌在此上層主版頁面中。下層主版頁面可以提供各種不同的頁面配置，同時保有上層主版頁面所建立的外觀。

若要建立主版頁面

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

[加入新項目] 對話方塊隨即出現。
在 [Visual Studio 安裝的範本] 下，按一下 [主版頁面]。
在 [名稱] 方塊中輸入 ParentMaster。
清除 [將程式碼置於個別檔案中] 核取方塊。
在 [語言] 清單中，按一下您想要使用的程式語言。
按一下 [加入]。

新的主版頁面就會在 [原始碼] 檢視中開啟。

將項目加入至上層主版頁面

在主版頁面的上方是 @ Master 宣告，而不是通常處於 ASP.NET 網頁上方的 @ Page 宣告。網頁的主體包含 ContentPlaceHolder 控制項，此主版頁面區域就是可取代內容在執行階段與內容頁面合併的位置。稍後在本逐步解說中，您將會使用更多的內容預留位置。

將圖形加入至上層主版頁面

在您將圖形加入至上層主版頁面之前，必須先將圖形檔加入至網站中。

建立一個寬度為 780 像素，高度為 150 項目的橫幅圖形，以及一個寬度為 780 項目，高度為 50 像素的頁尾圖形。圖形可用來顯示上層主版頁面的圖形如何在巢狀主版頁面中呈現。如果您沒有這些圖形，可以使用 Microsoft Paint 或另一個圖形程式來建立。

若要將現有圖形檔加入至網站

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入現有項目]。

[加入現有項目] 對話方塊隨即出現。
選取您建立的圖形檔。
按一下 [加入]。

在上層主版頁面中，加入兩個簡單圖形 (一個橫幅圖形與一個頁尾圖形)。這些圖形可讓您清楚看見巢狀主版頁面 (您稍後將於本逐步解說中建立) 中使用的上層主版頁面。

若要將橫幅與頁尾圖形加入至上層主版頁面

在 [原始碼] 檢視中，在緊鄰開啟的 <form> 標籤之後加入包含橫幅圖形之 img 項目的 div 項目。

例如，如果您建立了一個名為 Banner.gif 的圖形，則要加入此圖形的標記將如下列所示：
```
<div id="banner">
  <img src="banner.gif" alt="banner graphic" />
</div>
```
在緊鄰結束的 </form> 標籤之前，加入包含結尾圖形之 img 項目的 div 項目。

例如，如果您建立了一個名為 Footer.gif 的圖形，則要加入此圖形的標記將如下列所示：
```
<div id="banner">
  <img src="footer.gif" alt="footer graphic" />
</div>
```
儲存主版頁面。

請注意，您尚未在 ContentPlaceHolder 控制項內加入任何項目。您要建立的下一組主版頁面將位於 ContentPlaceHolder 控制項中。

建立下層主版頁面

若要以巢狀方式在另一個主版頁面中建立主版頁面，您必須先建立另一個主版頁面。新的主版頁面將位於上層主版頁面的內容預留位置中。下層主版頁面可讓您以不同方式排列頁面，同時保有上層主版頁面所建立的一致外觀。

若要建立下層主版頁面

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

接著會顯示 [加入新項目] 對話方塊。
在 [Visual Studio 安裝的範本] 下，按一下 [主版頁面]。
在 [名稱] 方塊中輸入 ChildMaster。
清除 [將程式碼置於個別檔案中] 核取方塊。
選取 [選取主版頁面] 核取方塊。
在 [語言] 清單中，按一下您想要使用的程式語言。
按一下 [加入]。

[選取主版頁面] 對話方塊隨即出現。
選取您先前於本逐步解說中建立的上層主版頁面。
按一下 [確定]。

新的主版頁面就會在 [原始碼] 檢視中開啟。

請注意，新的主版頁面上層的 @ Master 宣告指出它參考主版頁面。

將 ContentPlaceHolder 控制項加入至下層主版頁面

由於下層主版頁面與另一個主版頁面產生關聯，因此會包含兩個 Content 控制項。您可以使用第一個內容預留位置，將資訊加入至通常會出現在 head 項目 (例如 script 項目) 的頁面中。您可以在第二個 Content 控制項中，加入 ContentPlaceHolder 控制項。這樣便可讓使用下層主版頁面的 ASP.NET 網頁提供網頁內容。您可以將其他頁面項目加入至 Content 控制項中。下層主版頁面可以包含額外的頁面項目，以提供使用下層主版頁面的網頁一致的外觀。

若要將 ContentPlaceholder 控制項加入至下層主版頁面

開啟或切換至下層主版頁面
切換至 [原始碼] 檢視。

將下列標記加入至第二個 Content 控制項區段，以建立 ContentPlaceHolder 控制項：

<div id="2col">
  <asp:ContentPlaceHolder ID="leftcolumn" >
  </asp:ContentPlaceHolder>
  <asp:ContentPlaceHolder ID="rightcolumn" >
  </asp:ContentPlaceHolder>
</div>

儲存檔案。

下層主版頁面現在已經擁有 ContentPlaceHolder 控制項，內含來自 ASP.NET 頁面，且使用下層主版頁面的標記。

建立使用下層主版頁面的內容頁面

在先前步驟中，您以巢狀方式在另一個主版頁面中建立了主版頁面。結果的下層主版頁面可讓您使用上層主版頁面的 UI 項目。它同時會在第二個主版頁面中提供額外的 UI 項目。在本逐步解說中，您已將圖形加入至上層主版頁面，並將預留位置加入至第二個主版頁面中。若要查看作用中的巢狀主版頁面，可以建立使用下層主版頁面的 ASP.NET 網頁。您建立來使用下層主版頁面的新網頁將自動為您於下層主版頁面中建立的每個 ContentPlaceHolder 控制項包含一個 Content 控制項。

若要建立使用下層主版頁面的網頁

在 [方案總管] 中，以滑鼠右鍵按一下網站名稱，然後按一下 [加入新項目]。

接著會顯示 [加入新項目] 對話方塊。
按一下 [Visual Studio 安裝的範本] 下方的 [Web Form]。
在 [名稱] 方塊中輸入 Tasks。
選取 [將程式碼置於個別檔案中] 核取方塊。
選取 [選取主版頁面] 核取方塊。
在 [語言] 清單中，按一下您想要使用的程式語言。
按一下 [加入]。
在選取 [選取主版頁面] 對話方塊中，選取您先前於本逐步解說中建立的下層主版頁面。
按一下 [確定]。

新的內容網頁就會在 [原始碼] 檢視中開啟。
將第一個 Content 控制項的 ID 變更為 leftcolumn 並將第二個 Content 控制項的 ID 變更為 rightcolumn。
將文字或頁面項目加入至左側或右側欄位的 Content 控制項中。
按 CTRL+F5 執行此網站。

請注意，Tasks.aspx 頁面會顯示您於本逐步解說中建立的所有項目組合。這當中包含上層主版頁面的圖形、下層主版頁面中的雙欄式配置，以及您加入至 Tasks.aspx 頁面的文字與控制項。

後續步驟

現在您已經了解了巢狀主版頁面的運作方式，可以開始建立使用上層主版頁面的其他下層主版頁面。您於本逐步解說中建立的下層主版頁面會建立雙欄式配置。另一個您為上層主版頁面建立的下層主版頁面會建立單欄式配置或其他配置。

請參閱

工作

逐步解說：建立和修改 CSS 檔

共用方式為