Llevo un rato analizándolo. La verdad es que empezar desde el comienzo, es demasiado. Daré por supuesto que tienes la base base de saber como acomodar todo el el HEAD y el BODY, así como usar un DOCTYPE y todo eso. Si no, puedes copiarlo sin problema de cualquier otra página, y es de lo primero que te enseñan cuando encuentras un buen tutorial.
La base
Lo primero, es crear divisores para cada sección, que según puedo ver, son cuatro:
Código HTML:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="body"></div>
<div id="footer"></div>
</body>
Para fines prácticos, pondremos los mismos colores que elegiste de fondo, en tonos claros. El CSS sería como sigue:
Código:
#header{background:#99f;padding:0.5em;text-align:center}
#nav{background:#f99;width:60em;margin:0 auto;padding:0.5em;text-align:center}
#body{background:#c9f;width:60em;margin:0 auto;padding:0.5em}
#footer{background:#fc9;width:60em;margin:0 auto;padding:0.5em;text-align:center}
margin:0 auto centra tus divisores ya con su ancho dado, y padding hará un pequeño espacio interno. Cambia los valores a los que mejor acomoden a tus necesidades. Con eso se tendrá la estructura básica.
El header
La parte superior no tiene gran ciencia, tan solo unas líneas como estas en tu HTML:
Código HTML:
<div id="header">
<h1><a href="index.html">Logotipo</a></h1>
<p style="text-align:right"><a href="#">Login</a> <a href="#">Registrarse</a></p>
</div>
El texto de logotipo puedes cambiarlo con una imagen como <img src="logotipo.jpg" alt="Logotipo" />