Create a new HTML file in Macromedia Dreamweaver 8 (CTRL+N).



Then create a new CSS file by following the same steps as above, just make sure you select "CSS" instead of "HTML". Then save the two newly created files in the same folder. For example "my website". Save the HTML file as index.html and the CSS file as css.css.

The first thing we want to do, is to set the padding and the margins on the index site to 0. This is done using the CSS file we just created. Open your CSS file.



On line 3, type the same as I've done.



If you want to learn more about CSS, read the tutorial and ask around in the forums.

Now, go back to your html page and import your stylesheet.

Then switch to code view.



Inside the body tags, write this:

<div id="main-wrap">
</div>

This will be the main container of the page.

Then, inside the newly created div tag, create another one. Like this:

<div id="main-wrap">
<div id="header"></div>
</div>



Then, underneath the header div, still inside the main-wrap, write three more divs.

<div id="content"><div>
<div id="navigation"></div>
<div id="footer"></div>

You should also fill the div tags with some placeholder text like this:



If you return to the design view, you will see four of your div tags. This is because you filled them with text. Empty div tags will be 0px in height if you don't set the height using CSS.

It doesn't really look like a web site yet. But after some work in the CSS sheet we will get closer to a full site.

Open your CSS sheet.

On a new line, type:

#main-wrap{
width: 800px;
margin: auto;
}

This will set the width of the main-wrap div to 800px. The margin property is set to auto. This will center the div tag.



If you go back to the html page, you can see the changes we made.

It should look like this:



Go back to your CSS sheet and write this:

#main-wrap{
width: 796px;
margin: auto;
background-color: #CCCCCC;
padding: 2px;
}
#header{
height: 100px;
margin-bottom: 2px;
}
#content{
float: right;
width: 640px;
padding: 5px;
background-color: #FFFFFF;
}
#navigation{
margin-right: 652px;
padding: 5px;
background-color: #FFFFFF;
}
#footer{
clear: both;
margin-top: 2px;
padding: 5px;
background-color: #FFFFFF;
}



That's how you set up your divs for a site. If you have any questions ask in the forums, we are there to help you!

Next up is the tutorials on how to set up the text, navigation menu and so on. So tune in!