Monday, May 14, 2018

Design Header, Footer, Sidebar, Content Layout in ASP.Net

Design Header, Footer, Sidebar, Content Layout in ASP.Net

When you develop a web application through, you have to consider about the Layout of form. Before we start, you have to learn about basic fundamental of web development in SKOTechLearn describe the easiest way to design Header, Footer, Sidebar, Content Layout.

Layout design depends on following point.
  1. Header 
  2. Footer
  3. Sidebar
  4. Content
But how can we design in web Form?

You can design through “DIV” or through HTML “Table”. But, here we will learn designing through HTML “Table” control. Basically both use for static point of view in any webpage development.

 Step 1: Drag Table to Web Form
First, drag HTML “Table” control from Toolbox.
Add HTML Table for header footer sidebar layout
Add HTML Table
 Step 2: Design Table

1. Header :
We will merge some cells of Table for settings in perfect format. Select first 3 cells and right click on it. Select “Merge Cells” option of “Modify” sub menu from drop down menu list. This will merge First upper side cell.

2. Footer:
We will merge last row’s 3 cells. And call this cell as Footer.

3. Content:
Like same way merge middle row’s right side 2 cells as content.

4. Sidebar:
Remain cell will call as sidebar.

Note: You have to remind one thing that you have to adjust height and width according to your layout requirement. You can increase or decrease cell's width or height for adjust layout.

 Steps: Right Click (Selected Cells) >> Modify >> Merge Cells

Merge cells of Table for design Layout in
Merge cells of Table

 Step 3: Drag Control in Table's content Cell
When you set merge process according to given instruction, you table looks like above given image.
Drag some control to more understanding purpose. Suppose we add some controls like Label, TextBox and Buttons.

Controls Description:
Controls Change Text from Properties
Label1 My First Website Design
Label2 Second Page
Label3 Third Page
Label4 Fourth Page
Label5 Fifth Page
Label6 Sixth Page
Label7 Seventh Page
TextBox1 "" (Leave as Blank)
TextBox2 "" (Leave as Blank)
Label7 0
Button1 Add
When you complete this designing process or complete setting of form, run web form in window.

 Step 4: Run time Output
When you run application, your designing form will open in your default Web browser. It will looks like:
Web page running output for design header footer layout
WebForm running output
If you want to write code on “Add” button. Just double click on button or right click to select “View Code” option from drop down menu. And write code as:

VB Code: 
Public Class WebForm1

Inherits System.Web.UI.Page

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

  End Sub

  Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click

     Label7.Text = Val(TextBox1.Text) + (TextBox2.Text)

  End Sub

End Class
You can use this process in Master Page for its related content page. You can also process on layout setting through “DIV”, adjusting like Table’s cells. You can adjust it Left, right middle, top, bottom as table's adjust.

Both HTML controls work same for static setting in ASP web form designing. It gives your web form as professional look.
When you will apply all these steps it will easy to design Header, Footer, sidebar, content Layout in ASP.Net (SKOTechLearn).


  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

  2. Great blog . I want to share a very helpful blog about business valuation here