Layout of Website

Posted on Updated on

How to make the website layout?

We can create the layout of the website with the help of html and css. We use div to make layout and structure and css for give them design. Almost every website have same design header footer left bar right bar and center bar. Some web site give margin from left and right and site preview in center. So starting a website let us know about the div with easy example.

Let take a example of cake we use a box to and make layers of cake one by one like first as same we create a div which is use to make the boundary of the website and then we set the div inside the div and set the properties of the div with the help of css using selector id or class.

Note that : div name should be understand or proper . like header _ div etc.

Lets open notebook ++ make html page.

< !doctype html >

< html >

< head >

< title > My div structure < /title >

< /head >

< body >

< div id = “ outer_div “ >

< div id = “ header_div “ >

< /div >

< /div >

< /body >

< /html >

In this step we create the only header part and css for this is :

>

* {

margin : 0 px ;

padding : 0 px ;

}

# outer_div {

max-width : 1349 px ; // it is the outer div maximum width

width : 100% ; // we use the full width

}

# header_div {

width : 100% ; // header take the full width of the outer div

height : 200 px ; // it use to set the height of the div

background-color : peru ; // it show the background color of the div

float : left ; // it shift the next content to left and free the side.

}

Now the next step is to create the left bar :

Here we create the left side of the website inside the outer div by just declare the div and set the id of the div in html and wirte the code into the css let see the below example :

< div id = “ outer_div “ >

< div id = “ header_div “ >

< /div >

< div id = “ left_div “ >

< /div >

< /div >

And css code for the left bar :

# left_div

{

width : 20% ;

height : 600 px ;

background-color : red ;

float : left ;

}

Third step to create the center div of the website Html code :

< div id = “ center_div “ >

< /div >

And css code for the center div.

# center_div {

width : 60% ;

background-color : rebeccapurple ;

float : left ;

height : 600 px ;

}

Forth step is to create the right div. Html code :

< div id = “ right_div “ >

< /div >

Css code :

# right_div {

width : 20% ;

height : 600 px ;

background-color : bisque ;

float : left ;

}

Fifth step is to create the footer div Html code :

< div id = “ footer_div “ >

< /div >

Css code :

# footer_div {

width : 100% ;

height : 100 px ;

background-color : # 533E1F ;

float : left ;

}

This is the final step when you complete it the output is like…………….

dsfd6s5f9

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s