How To Make Simple Website Layout Using Dreamweaver

The most important thing for a website is its layout. The layout should design according to SEO. The SEO stands for search engine optimization which is essential to improve your websites visibility in search engines.

In this tutorial we are going to design a simple and SEO optimize website layout using Dreamweaver cs5. We are also providing  a video tutorial on this topic at the end for more details.

Website Layout have following sections :

1) Header

2) Navigation Panel

3) SideWidgets

4) Body

5) Footer

How to make Basic Website Layout Using Dreamweaver cs5 :

1) Open Dreamweaver cs5 and select new HTML document.

2) Go to design view. Select layout tab and click on insert div tag.

 3) Enter the name of the class as "mainWrapper" and click on the new CSS rule. A CSS rule windows will open.

 4) In new CSS rule window, under the rule definition heading, select new style sheet file.

 5) A new window will appear to save this new style sheet file. Enter the name of the new style sheet file and click save.

 6) A window for CSS rule definition will appear. Select the box and enter the desired width and height then Click OK.

7) This is the outer layout. Now we have to add separate div for header, navigation, side-widget, body and footer.

8) The process is same as above except the 4th and 6th step. In 4th step just select style.css from drop down. In the 6th step, float is important for other sections. Choose left from drop down menu.

9) Repeat the same for each sections (navigation, side-widget, body, footer). To add navigation div, select the header div and press left key then insert new div and go with above procedure.

10) Below is the video tutorial for this topic. It covers complete layout design step by step.   

For more Details See a video tutorial :

 

 

Please share your views in commentBox. Thanks !