CarsPortal 2: Creating Master Page For Website in ASP.Net

Introduction

A Master Page is a page with contents shown in approximately all pages of the website. For example, if the website logo must be displayed in all pages of the website, why should we worry about adding the HTML with styles for the logo when a new page is created? The Master Page will do the job for us. In this tutorial the Master Page design will be introduced with an introduction to website design using only the tools provided in ASP.NET. The tutorial is implemented using Visual Studio 2012 Express for the web.

2.1 Create an empty ASP.NET Project

From the main menu select "File" -> "New" -> "Project..." then from the dialog box that appears:

1. Click “Web” application for the Visual C# tree item.
2. Click "ASP.NET Empty Web Application"
3. Provide a suitable name for the project.

 

An empty project will be created without any web forms. This is a good beginning point for those who want to make their own design of the website.

2.2 Add and Customize the Master Page

Did you notice the logo that appears in approximately all pages of the website? The Master Page is used as a frame for the entire website. The frame includes all the remaining content specific for each page.  It makes the process of implementing websites easier by not repeating the same contents every time a new form is created.

From the Solution Explorer right-click on your project and select "Add" -> "Master Page" as shown in the following figure:

Write “MaterPage.master” as a name for the new Master Page. MasterPage.master is added to the Solution Explorer.

Prepare the draft design for the website for creating a proper Master Page. Suppose the website to be created has the following design draft.



For designing the preceding Master Page use the following procedure:

1. Add a table with 5 rows by 6 columns. This is done from the main menu; select "TABLE" -> "Insert Table". Change the rows and columns of the table as shown in the following figure:
   
   
   
   
2. Select all the cells of the first row and then right-click on one of them. From the context menu select "Modify" -> "Merge cells" as shown in the figure. Do the same procedure for the third row, the last row, and the row before the last row.
   
   
   
   
3. Customize the row/column heights to accommodate the required design. To change the row height just point the mouse arrow toward the row border until the cursor changes to two arrowheads then drag and drop.
   
   
4. Write the contents of the rows and cells by typing “Used and new cars for sale” in the last row right “Al rights reserved to Taibah University, Dr. Osama Hosam” right “Home”, and so on. in their suitable cells. Justify its alignment from the tools bar as shown in the figure
   
   
   
   
5. Change the colors (background and font) of the first row by selecting the first row and then form the properties select “style”. From style click on the small button beside the style word. The following window will be shown, change the background color as shown in the following figure:
   
   
   
   Change the Font as shown in the following figure:
   
   
   
   You can easily change the style of the remaining cells to get the final design of the website.
    
6. Add a content placeholder to the middle row of the table (the third row) as shown in the figure, this content place holder defines the place that will be dynamic in the Master Page.
   
   
   

2.3 Creating the Home page and Connecting it the Master Page.

In this section we will create a home page and add an image to it. From the Solution Explorer right-click on the project and select "Add" -> "Web Form". Rename it to “Home.aspx”.

To connect the Home page to the Master Page, write the following code:

MasterPageFile="~/MasterPage.master"

To point to the dynamic place in the Master Page write the following code:

<asp:Content ID="Content1" ContentPlaceHolderID ="head" runat ="server">

</asp:Content>

The entire HTML code of the home page will look like the following:

 <%@ Page="" Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="myCars12.Home"MasterPageFile="~/MasterPage.master"%>

<asp:Content ID="Content1" ContentPlaceHolderID ="head" runat ="server">

</asp:Content>  

If you open the Home form in design view you will notice that it is connected to the Master Page.

Suppose we need to add the following car image to the home page of the website.



Add the car image to the project by first creating a new folder. To create a new folder, right-click on the project in the Solution Explorer and then select "Add" -> "New Folder" as shown in the figure. When the new folder is created rename it to "images" then right-click on the “images” folder and select "Add" -> "Existing item" as in the following:



Navigate to the image and then click “Add” to add the image. In the Solution Explorer, the image with the new folder should look like the following:

Open the “Home.aspx” in the design view, in the arrow beside the content place holder click “Create Custom Content”. This will allow you to add contents to the Home page.



Drag and drop the car image from the Solution Explorer, the resulting page should look like the following :

 

2.4 Setting the Default Page

So far we haven't set the default page, the page that will be the starting point of the project. Of course it will be the Home page in our project. To set the Home page as the start page, from the Solution Explorer right-click on the “Home.aspx” page and select “Set as Start Page” as shown in the figure.

 

The resulting website after running the project will be as shown in the following figure:

 

Exercise

Create a new web form for the “Contact Us” link. Connect it to the Master Page and add the suitable content to it.