Creating a Master Page

Master pages provide a simple mechanism for creating a consistent site design for all pages in your web site. You can create a Master page for your site and define content areas on the page using the new ContentPlaceHolder control. You can create content pages and connect them to the content areas of the master page. At runtime when a user navigates to your site, ASP.NET 2.0 serves up the page by merging the master page with the content pages.

Creating a Master Page

1. In the Solution Explorer, right-click your project and select Add New Item from the shortcut menu.

2. In the Add New Item dialog, select MM.NET Master Page:

   

3. In the Name text box change the name of the Master Page, then click Add.

   This displays the new Master Page in source mode. For example:

   

   You can see the Master Page has a ContentPlaceHolder on the form.

   Applying a Cascading Style Sheet to the Master Page

   To apply a cascading style sheet to the master page, from the Solution Explorer, drag the mm.css cascading style sheet (located in the App_Themes\MMTheme folder) and drop it on the master page. This adds a link to the MM .NET cascading style sheet to the form. Cascading style sheets allow you to specify a uniform look and feel for your web pages (fonts, colors, and so on). For details, see the Help topic Using Cascading Style Sheets.

   Creating a Header for the Master Page

   1. To create a header for the master page, click in the empty area below the ContentPlaceHolder, then press the up arrow once. If you look at the bar directly below the design surface you will see the ContentPlaceHolder has focus:

      

      Press the up arrow again and you will see the <div> tag has focus:

      

   2. From the VS menu, select Table | Insert Table to launch the Insert Table dialog and set the desired properties. For example:

      

   3. Click OK to close the Insert Table dialog.

   4. Go to the Properties Window and select the Style property, then click its ellipses button [...] to display the Style Builder dialog. By default, the Font settings are displayed. You can select Background to change the Background settings.

   5. Select the Position button and set the Height to the desired value (for example, 100px):

      

   6. Click OK to close the dialog.

   7. Add your desired content to the header. For example, you can drag and drop labels into the header and set the text:

      

   Creating a Master Page with a Header and Left Navigation Bar

   Here is a screen shot of a master page with a header and left navigation bar: