Creating ASP.NET 3.5 Website Templates: A Second Look

In the first part of this series, you learned the concept and importance of using “master pages” in your ASP.NET web development. In this part, you will learn how to start implementing those techniques in your website development.

The website developer works on two things when developing ASP.NET websites. The first is designing the template (the HTML code and design of your master page), while the second is putting content in the regions defined by the ContentPlaceHolder web control.

You can accomplish this in two ways. You can either add static text, or drag web controls from the Visual Web Developer toolbox to generate dynamic content (database-driven).

Designing a Master Page ASP.NET template

Suppose you would like to implement the design shown in the screen shot below in a master page:

Let’s use the master page file created in the first part. You need to open the  “masterpageexercise” project in Visual Web Developer. Once the project has been opened, follow the steps below.

Step 1. Go to MasterPage.Master in the Source code view. You can open this file in Solution Explorer by right clicking on MasterPage.Master, clicking “Open,” and finally clicking “Source.” Copy and paste the default code — namely the one which has still NOT been edited by you to a notepad file — and save it as defaultmasterpage.txt for future reference.

For example, this is the content of defaultmasterpage.txt:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

 

With this file, if you ever make mistakes during the editing and designing of your master page, and no longer remember how to go back to the original master page code, you can just delete the edited master page and then paste the original code, shown above, back into the MasterPage.master file.

In this way, you can then start editing your master page file again, without needing to create another Visual Web Developer project.

Step 2. Let’s start preparing the header image. There are lots of websites on the Internet that offer free website header images. For example, let’s use this one: http://www.freewebpageheaders.com/gallery/showphoto.php/photo/1362.

Download the image to your desktop, and then rename it as header.jpg.

Now go to your masterpageexercise folder, where your ASP.NET files are saved. Create a new folder in the root named "images." This is how your masterpageexercise folder will look after adding the images folder:

Now copy and paste header.jpg from your Desktop to the images folder.

Step 3. Let’s start implementing the design as planned (shown in the first screen shot.) To make the design process easy, you can use HTML tables to implement the layout.

Go to the “Design” view of MasterPage.master. Delete the default ContentPlaceHolder by first selecting it, and then pressing the delete key in your keyboard.

If you see the warning “If you remove this region, you will break any attached pages…” just click “Yes.” Then go to File -> Save All.

Now the only element remaining in the Design view is the Div tag.

Step 4. Make sure that the computer cursor is inside the div tag, and then go to Table -> Insert table. You will need to create a table where your header image will be placed.

Configure the table as follows:

Rows: 1
Columns: 1

The above values are set to one because the header image needs to occupy just one cell of the table.

Under Layout/Alignment: Center (because you need to place the header image at the center of your browser).

Float: Default

Check “Specify width”, and then select “In Pixels.” Set the value to 800, which is equal to the width of the header image.

Check “Specify height” and then select “In Pixels.” Set the value to 200, which is equal to the height of the header image.

Just leave the rest at their default settings. The “Insert table” configuration should look like the screen shot below.

Finally, click OK. The table is then added to your Design view. Go to File -> Save All.

{mospagebreak title=Designing the Template continued}

Step 5. Now go to the Source code view of MasterPage.master; you can then insert your image HTML code.

Most header images are also an image link pointing to the home page of the website. So the HTML code to be added will look like this:

<a href="Default.aspx"><img src="images/header.jpg" alt="Codex-M Farming Tutorial Website" /></a>

Add that between <td></td> tag in the HTML table, so your body section in MasterPage.master including the header image code will be:

<body>
    <form id="form1" runat="server">
    <div>
        <table align="center" class="style1">
            <tr>
                <td><a href="Default.aspx"><img src="images/header.jpg" alt="Codex-M Farming Tutorial Website" /></a></td>
            </tr>
        </table>
    </div>
    </form>
</body>

Step 6. You might notice that in the Design view, the image is bordered with a blue line. If you need to remove this border, you can click the image in Design view, and then in the properties (in the lower right of your screen), click the ellipsis of “Style” (for example):

Go to the “Border” section and then uncheck “border-width” and “border-color;” the same for all options. Under “border-style,” change the “top” to “none” and make sure “same for all” is checked.

Go to File -> Save All.

Step 7. In the Design view, make sure your cursor is positioned below the header image. You need to add another table — this time, for the sidebar navigation and the content. Go to Table -> Insert table and configure it as follows:

Rows: 1

Columns: 2 (one column for sidebar and one column for the content)

Alignment: Center

Float: Default

Check “Specify width” and then check “In Pixels;” set the value to 800. Just leave the rest of the settings at their default values. The configuration should look like this:

The height is not specified because there is no fixed height definition; it can vary in the actual implementation.

Click OK to implement the table. You can then easily click and drag the height according to your needs.

Step 8. Finally, you need one last table for the footer section. Make sure the cursor is positioned below the previous table (sidebar and content), and then go to Table -> Insert table and configure as follows:

Rows: 1

Columns: 1

Alignment: Center

Check “Specify width,” and then check “In Pixels.” Set the value to 800.

The rest of the settings remain at their default values; click OK.

Step 9. You can now place a “ContentPlaceHolder” web control in the content section as defined in the first screen shot. Feel free to click and drag this control from Toolbox -> ContentPlaceholder to the Content section in the second table.

Important:

1. Make sure that all tables are within the original <div></div> tags. So they will have this structure:

<div>
<table1 for header image>
<table2 for content and sidebar>
<table3 for footer>
</div>

2. Make sure that the <div> tag is within the <form runat=”server”> tag. The <form runat=”server”> tag should be within the <body> tag. So the code structure will be:

<body>
<form id="form1" runat="server">
<div>
<table for header image>
<table for sidebar and content>
<table for footer>
</div>
</form>
</body>

Final Design Output

Below is the result of the editing process of MasterPage.master to realize the design as shown in the first screen shot:

Note that the ContentPlaceHolder web control is on the right side of the sidebar (inside the violet colored box). The ContentPlaceHolder is where the unique content will be placed. It is not part of the master page layout.

In the third part of this tutorial, you will learn how to inherit this master page design to your new or existing ASP.NET pages to complete your website project. 

[gp-comments width="770" linklove="off" ]