How to Create a Detailed Master Page

ASP.NET master pages are template pages that allow developers to create webpages without duplicating common code. For example, a developer might want to use a navigation bar that is common to all pages on a site. Instead of placing the bar on every webpage, developers put it in a detailed master page and let content pages reference the master page. Master pages also reduce maintenance costs by reducing the time required to make site-wide code changes.

Instructions

1

Open Microsoft Visual Studio and select "File > New Web Site." A list of installed templates will appear.

2

Click "ASP.NET Web Site" and enter "TestProject" (without quotes) for the name of your website. Click "OK" to close the template window.

3

Right-click "TestProject" in the Solution Explorer. The Solution Explorer is located in a panel on the right of the screen.

4

Choose "Add New Item" from the drop-down context menu to open the "Add New Item" window. Double-click "Master Page." The window will close and a file named "masterPage.master" will appear in the Solution Explorer.

5

Double-click "masterPage.master" to display its code in the code editor.

6

Add the following code below the opening "

" tag:

This is a heading

This will add a heading to the top of the master page.

7

Add this code before the closing "

" tag:

This is a footer

This will add a footer to the bottom of the master page.

8

Right-click "masterPage.master" and select "Add Content Page" from the context menu. Visual Studio will add a content page named "Default2.aspx" to the Solution Explorer and open the code in the code editor. This ".aspx" page will display the page elements defined in the master page.

9

Add this HTML code before the second "" closing tag:

This paragraph is in the content page

10

Press "F5." Visual Studio will open the browser and display the following text on the webpage:

This is a heading
This is paragraph is in the content page
This is a footer