WEBSITE LAYOUT DESIGN

Posted on by

TOP FIVE WEBSITE LAYOUTS

We want to make a stationed point and briefly look at the top five website layouts that are available for developers like you and me. The common layouts include a single column layout, the two column layout, the three column layout, the four column layout and the vertical navigation menu layout. We will briefly look at each one and then we will select one and create a responsive design using pure JavaScript and css media queries. Responsive design allows a web page to fit on any small screen.

SINGLE COLUMN LAYOUT WEB PAGE DESIGN

The division tag <div> defines a section in an html document or webpage. It is used to divide a web page into different and distinct sections. What you see on top of the page is exactly what we will be making. Our page is neat and presentable. This page is divided into a banner, a navigation menu, the main content area and the footer.

To create a single column layout we have the following skeleton html document with multiple <div> elements and each is responsible for a unique section of the web page.

HTML SINGLE COLUMN LAYOUT

SINGLE COLUMN LAYOUT BASIC MARKUP DOCUMENT
<!DOCTYPE html>
<html lang = “en”>
<head>
<title>CSS Website Layout</title>
<meta charset = “utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>  
<div class=”head”></div>  
<div class=”nav”></div>  
<div class=”column”></div>  
<div class=”footer”></div>  
</body>
</html>    

W e have defined four <div> elements one for the header, one for the navigation, one for the main content and one for the footer. This is the simplest web layout and it is very easy to set up.

Once the set up is done the next step is to insert content and a navigation and add some simple css to style the page. We insert a simple navigation and some images.

HTML SINGLE COLUMN LAYOUT COMPLETE

SINGLE COLUMN LAYOUT COMPLETE HTML-CSS DOCUMENT
<!DOCTYPE html>
<html lang = “en”>
<head> <title>CSS Website Layout</title>
<meta charset = “utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>

body {width:60%; margin: 20px auto; border:solid gray; border-width:2px;
border-radius:5px; padding:2px;margin-top:60px; background:#333;}
.head {padding: 2px;}
.nav {width: 100%; margin:auto; text-align: center; padding:10px;}
.nav a { font-size:16px; text-align:justify; font-weight:bold;text-decoration:none;
padding: 10px 12px; color:#bbb;}
.column { padding: 2px;}
.footer{text-align: center;}
img{border:solid gray; border-width:1px; padding:2px; width:100%;}

</style>
</head>
<body>
<div class=”head”>
<img src = “image/0004.jpg”>
</div>
 
<div class=”nav”>            
<a href=”#” >HONE</a>                                                           
<a href=”#”>NIPA</a>                      
<a href = “#”>APEX</a>                       
<a href=”#”>CBU</a>                                                              
<a href=”#”>UNZA</a>             
 <a href=”#”>KATUNJILA</a>                                                            
<a href=”#”>MULUNGUSHI</a>            
 <a href=”#”>RIDGEWAY</a>
</div>  
 
<div class=”column”><img src = “image/vg0005.png”></div>  
<div class=”footer”><img src = “image/advertisement.jpg”></div>  
</body>
</html>    

You can run this code on your system with your own media images. You also can download all the layouts at the end of the session and compare them to your own creation from this guide. For now we are just working with images because we want to focus on the layout and not the content. you have to select the file to download it from dropbox.This is the simplest layout in the history of website design.

Leave a comment