Adding a master page - Part 1

Let us start our project.

Start VWD Express. From the `File' menu, select `New Web Site...'

In the New Web Site Dialog box, select ASP.NET Web Site as the project template. Since we are going to use the built-in web server, select File System in the Location drop-down list. Select a choice of language in the Language drop-down list.

Specify the location where the project will be stored and give a name to the project.

Click on the `OK' button. The IDE will display the default page called `default.aspx' with some HTML code. Right now, we do not need this page. First, we want to add a master page in our project.

Move the mouse pointer over the `solution explorer' tab if it is not visible. Right-click on the project name.

Select `Add New Item...' from the menu. This will bring up the `Add New Item...' dialog box.

As you can see, we can add different types of templates to our project. But right now, we want to add a master page. Select the `Master Page' template. we can provide a name for the master page if we wish but do not change the `.master' extension. Click on the `Add' button to proceed.

The IDE displays the master page in the `Source' view. We can see in the solution explorer that the master page has been added to our project.

The source view presents us with some HTML code. There is not much to change here except the <title> tag. The text inside the <title> tag is the title of our page that is displayed in the title bar of the browser. We can change the title here and this title will be applicable to all the content pages as well. However, we can give each individual content page its own title, as we will see later.

Right now, we will change the view of the page from source view to design view.

Click on the `Design' tab located at the bottom of the page. Now we can see the master page in design view.

Our master page has just one control on it, a rectangular box with the label `ContentPlaceHolder-ContentPlaceHolder1'. This box will display the content page that is linked to our master page.

(Later on, we will learn about different controls that can be used on a page. ContentPlaceHolder control is just one of them.)

Select the ControlPlaceHolder by clicking on its label and press the delete key from the keyboard. The control is deleted!

Wait a minute! We deleted the control? But don't we need it for displaying the content pages?

Actually, we do. But before that, we need to format our master page nicely. We can add the control later when we need it.

Now we have a blank master page. We will apply some formatting to it. Here is a rough diagram of what this page should look like:

Site Logo	Site Banner
Site Navigation Menu	Site Content
Footer

To apply this format, we will insert a table into our master page. Tables are a convenient way to format a page by creating different sections in it.

To insert a table, click on the `Layout' menu and select the `Insert Table' option. A dialog box will pop up.

The dialog box provides some useful templates. Click the `Templates' drop-down list and select the `Header, footer and side' template as it matches with our layout. Click the `OK' button.

A table is now inserted in our master page though it does not look very useful now.

The header and the footer are too high while the middle row is too narrow.