Converting an Existing Web Page to Use the Master Page

You may already have existing Web pages that you want to convert to use a Master Page.  As you saw in the previous lesson, using a Master Page involves two main steps: registering the Master Page in the Page directive, and placing the page's content in a Content control (which is, in turn, hosted by the Master Page in its ContentPlaceHolder control). 

You will now convert the Authors.aspx page to use a Master Page.

1. Open Authors.aspx in Source view. In the Page directive begin typing "MasterPageFile". You will notice that IntelliSense quickly recognizes your intentions. When MasterPageFile is selected press Tab and then type "=".

2. Notice that IntelliSense knows what Master Pages are available in the project and lists them in its menu. Select MasterPage.master and then press Tab. (You could also use the Pick Master feature to find a Master Page that is not currently in your project.) The result should read: MasterPageFile="~/MasterPage.master".

The Master Page contains the HTML, HEAD, BODY, FORM, etc. tags. These cannot also be in a content page.

3. Remove all tags outside of the outer div tag. Also delete <h1>Authors</h1> because the site header will now reside in the Master Page.

4. Wrap the remaining body content in a Content control manually by adding the control's opening and closing tags. IntelliSense is again there to help. In addition to the ID and runat attributes you'll need to specify the ID of the ContentPlaceHolder control on the Master Page. IntelliSense should also display this ID, but if not, recall that it is "bodyContentPlaceHolder".

Note that when you enter the final character of the opening tag, VWD's tag completion feature will automatically add the closing tag.

5.  Move the closing Content control tag below the closing div tag.

All page content except for the Page directive should now be between the asp:Content tags.

6. Press F5 to run the application.

You have successfully converted the Authors.aspx page to use a Master Page. Although this was a manual process, it was quick and easy.  You should now be more familiar with how Content and Master Pages work together.

7. Close your browser.