Adding a master page - Part 2

We will resize the table rows and columns until it looks like the following format. To resize, move the mouse-pointer to the border of a row or column and drag the mouse. Note that when we drag the mouse, the width or height of that column or row is shown in pixel. Resize until the table matches the following format approximately:

Now name the different parts of the table for future reference.

We need to do just one more modification to the table. Presently, the top row is designated for the logo and the banner. We need to split the row in two sections so that the logo and the banner each will reside in separate cells.

To do this, click inside the top row. From the `Layout' menu, select `Insert -> Cell to the left'. That is it. Now the top row has two cells and we have marked them properly:

But what about the un-marked cell in the second row? This is where we will display the content pages. To do that, we need to add a `ContentPlaceHolder' control in this cell.

Now is the time to use the toolbox. Search for the ContentPlaceHolder control in the toolbox found near the bottom of the Standard tools tab. Drag the control and place it in the empty cell. There! We now have the ContentPlaceHolder to display the content pages.

We are almost done with the master page but before moving on let us apply some style or design to it to make it look presentable.

We will start with the footer row. Click inside the row and delete the text (footer). We can type something useful here, like the copyright notice. We can also change the alignment of this text from the `Format' menu by selecting the `Justify' option and then selecting a justify mode. In our example, the footer text is center justified.

Next, we will add some background color to the footer row, add a border at the top and adjust its width. For doing all these, we need to select the footer cell. Click inside the footer cell and then from the Layout menu, choose the `Select' and then `Cell' option. Now the entire footer cell is selected. From the `Format' menu, click on the `Styles...' option. We will get a dialog box called `Style Builder'.

In the Style dialog box, click on the background tab. Select a background color from the drop-down list or look for more colors in by clicking the button next to it.

Click on the position tab and enter "100" as width and "%" as unit.

Click on the edges tab; there is a drop-down list called `Select the edge to be changed'. Select `Top'. Then from the following drop-down lists below, select a line-style, line-width and line-color.

That's it for the footer formation. Click on the `OK' Button.

Using the same process, we can apply styles to the different cells of the table.

In our case:

• The `side' section has a width of 150 px, a background color and - something new here - a vertical alignment set to `Top'. This can be done using the `Text' tab in the style builder dialog box. Click on it, then from the `Vertical' drop-down list, select `top'. This places the contents of the cell at the top instead of in the center as it was earlier.
• The `Logo' section has a background color, a bottom edge with solid line and black color and horizontal alignment set to - `center' (again use the `Text' tab here).
• The `Banner' section has a text. We can format this text by selecting it and then using the options on the `Formatting' toolbar. The horizontal alignment of this cell is `center' and it also has a background color.
• The content section has its vertical alignment set to `top'.

As the last step, we will add an image in the Logo cell and the Banner cell. To do this, right click on the project name in the solution explorer and select `Add Existing Item...' from the menu.

This will open up a dialog box from where we can search and select the image file we want to add to our project. Select the desired file and then click the `Add' button. The file is now added to the project and shown in the solution explorer.

To put the image in the Logo section, just drag the file from the solution explorer and drop it inside the `Logo' cell. Similarly, more image files can be added to a page.

And now we have a more presentable looking master page.

What looks like a long process to crete a master page is actually very easy once we practice a little. We will gain three major benefits from using master pages in our projects. First, we can now add as many content pages as we want and each of them will have the same design. Second, if we change something in our master page (change the logo or the footer, for example), the change will be applicable to all the content pages. Third, we did not write a single line of code. Everything is visual.

However, a master page is of no use without the content pages. We cannot view the master page in a browser. In the next chapter, we will learn how to create content pages and use them with our master page.