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

When you develop a web application through ASP.net, you have to consider about the Layout of form. This Post is related to Add Header Footer in ASP.Net and Layout Design in ASP.Net. Before we start, you have to learn about basic fundamental of web development in ASP.net. SKOTechLearn describe the easiest way to Design Header, Footer, Sidebar, Content Layout in ASP.Net.

Layout design depends on following point.

1. Header
2. Footer
3. Sidebar
4. Content

But how can we design it in web Form in ASP.Net?

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.

Menu adding and designing in asp.net with Tech Tips

Step 1: Add Table on Web Form in ASP.Net

First, drag HTML “Table” control from Toolbox.

Add HTML Table

Step 2: Layout Design through Table in ASP.Net

For Content layout Design in WebPage, you have to understand following point. The following point also describe how to Add sidebar in ASP.Net?

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.

Textbox with glowing style design in ASP.Net

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

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.

Take a look about Master Page designing in ASP.Net

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 ASP.net window.

Step 4: WebPage with Header Footer and Content Layout Output

When you run application, your designing form will open in your default Web browser. It will looks like:

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.

Menu design with related features in VB6.0 easy tech tips

When you will apply all these steps, you are ready to design Header, Footer, sidebar, content Layout in ASP.Net (SKOTechLearn).

• Tweet
• Share
• Share
• Share