Ich versuche mich mal an einem Tutorial, ist mein erstes für giatu, Kritik ist gerne gesehen :)

Der Aufbau für das Layout ist folgender: klick hier

CSS:
Zuerst brauchen wir den Divider, der alle anderen umschließt: #container
{
margin:0 auto;
width: 600px;
} margin:0 auto; gibt den Abstand vom Rand an. Hierbei ist er für oben und unten null, der auto-Befehl sorgt dafür, dass das Layout zentriert ist.

Jetzt kommt das Header-Bild: #header
{
background:url(URL_header_img.jpg) no-repeat;
height:200px;
} Bei height die Höhe deines Bildes angeben. Der Rest ist hoffentlich klar =)

Die Navigation: #navi
{
float:left;
margin:2px;
width:200px;
} Als float-Befehl kann man auch noch right angeben, dann ist die Navi dementsprechend rechts (dann muss man im Footer aber auch clear:both; angeben).
margin sorgt mal wieder für Abstand.

Der Content: #content
{
float:left;
margin:2px;
width:390px;
} Eigentlich das selbe wie gerade =) Bei der Breitenangabe muss man vorsichtig sein, da es durch margin zu Problemen in verschiedenen Browsern führen kann. Am besten weniger nehmen.

Footer: #footer
{
clear:left;
background:url(URL_footer_img.jpg) no-repeat;
height:100px;
} Der clear-Befehl stoppt float. Der Rest ist ja wie beim Header.

HTML <div id="container">
<div id="header"></div>
<div id="navi"> Text </div>
<div id="content"> Text</div>
<div id="footer"></div>
</div>

Das wär's schon. Ich hoffe ich habe alles richtig gemacht und es hat geholfen.