How to Create a Simple ASP.NET Website-Master Pages

ASP.NET Website-technirmiti

One always wish to learn website designing and it’s definitely a tough task to create interactive websites. To start with the basics, here is our step by step guide on how to create a simple ASP.NET website. Designing a ASP.NET website is comparatively easy. Thanks to our powerful and most efficient IDE, Visual Studio.

In this tutorial, we will develop or design a simple ASP.NET website which has 4 tabs: HOME, SERVICES, GALLERY and CONTACT US. We have used the concept of Master Page to keep the layout and look of the website unique through out. Then we create 4 web pages each for the 4 tabs.

What is Master Page?

Master page is nothing but a web page with one extra component, i.e. Content Placeholder. This kind of a web page is used to design the layout of the website which will remain common in all the pages of a website.

Things like Menus, Header, Footer, Sidebar are designed in a Master Page. So, whatever is put in Master Page remains unchanged in all the web pages. We put Content Placeholder in a Master Page so that, only this part of a Master Page can be changed in other pages.

So let’s start by creating a New Website in Visual Studio 2010.

Step 1: Create a Master Page in ASP.NET Website

Once you create a ASP.NET New Website in Visual Studio 2010, You will see a Solution Explorer to the right of the screen. In that you will find the name you gave to your Website (Ex. WebsiteTutorial in our case).

  • Right click on the Website name (WebsiteTutorial) -> Add New Item -> Master Page. Refer the diagram below:

ASP.NET Website-technirmiti

  • You will see a blank page with only one component, i.e. Content Placeholder.

Step 2: Design the Master Page for ASP.NET Website

We use HTML table to keep our Master Page aligned and well organised.

  • Go to ToolBox and drag a Table from HTML section on to the web page(Master Page).
  • First row of this table will be used to put the tabs/Menu of the Website.
    • To create 4 tabs, use 4 LinkButtons from the ToolBox and put them each in one cell of the first row.
    • Change the Text of those LinkButtons as HOME, SERVICES, GALLERY and CONTACT US. (Right Click on LinkButton -> Properties)
    • You can change the color of the first row itself to give the Menu feeling.
      • Select the row -> Properties -> BgColor
      • Select any color
  • Second row of the table will hold the Content Placeholder so that only this part will be changeable in other places. Follow the steps:
    • Select the row -> right Click -> Modify -> Merge Cells

ASP.NET Website-technirmiti

  • Now drag and drop the Content Placeholder in the merged row.
  • Last row of the table will hold the footer. Simply type the text of your wish. (Designed by TechNirmiti Solutions)

You can also set the background image for your website.

  • For that, first copy and paste your image file in the Website project. (Right click on Website name -> Paste)
  • To set the background image, right click on web page -> Properties -> Background.
  • Select the image.

Step 3: Design the Web Pages Using Master Page

We need to create 4 web pages using the same Master Page. So, Let’s create HOME page first.

  • Right Click on Website Name -> Add New Item -> Web Form.
  • Change it’s name to HOME.aspx.
  • Select the check box to select the Master Page as shown below:

ASP.NET Website-technirmiti

  • Select the corresponding Master Page which is created earlier and click Ok.
  • Your new Home Page will look like following picture where only editable area is the Content Placeholder.

ASP.NET Website-technirmiti

  • I write the simple content there to recognize it’s a Home page. “This is the Home Page

Similarly create all remaining 3 pages: SERVICES, GALLERY and CONTACT US and put some content in it.

Step 4: Link all the Webpages in Master Page

  • Open Master Page and click on LinkButon HOME -> Right Click -> Properties ->PostBackUrl.
  • Select the home page. i.e. Home.aspx as shown below:

ASP.NET Website-technirmiti

  • Similarly link remaining 3 pages to remaining 3 LinkButtons.

Set Home.aspx as start page (Right click on Home.aspx in Solution Explorer -> Set as Start Page).

Run the website. (Go to Debug -> Start Debugging).

You will see the website in a browser. You can add images, background color, Text colors and much more by just right clicking on any component and looking for it’s properties.

That’s all about the ASP.NET website we created in Visual Studio 2010 using a Master Page. Stay tuned to learn more and more about ASP.NET and C#.

Also read: ASP.NET Validation for a Website-Tutorial

mm

About Sunayana Gawde

Sunayana Gawde is Project Manager at TechNirmiti Solutions and the Author at TechOpinion. She is a researcher in the field of Computer Science and Technology. She loves to write about Technology. You can follow her on Facebook Twitter and Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *