To truly understand HTML, you must start from the largest elements and work your way down to the smallest, moving from top to bottom.
I won't reveal any advanced tricks or shortcuts for CSS3 - those are things you'll need to discover on your own.
When tackling a task like this, treat it as if you're writing a document: first create the content, then format it appropriately.
Begin with basic HTML and then progress to constructing frames:
<!DOCTYPE HTML>
<html>
<head>
<title>My layout</title>
</head>
<body>
<div id="zones_theSite">
<div id="zones_unb"><p>Universal navigation bar</p></div>
<div id="zones_body">
<div id="zones_header"><p>Header</p></div>
<div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
<div id="zones_fn"><p>Flashing news</p></div>
<div id="zones_main">
<div id="zones_lsb" class="column"><p>Left sidebar</p></div>
<div id="zones_mp" class="column"><p>Main page</p></div>
<div id="zones_rsb" class="column"><p>Right sidebar</p></div>
<div class="clearfix"></div>
</div>
<div id="zones_footer"><p>Footer</p></div>
</div>
</div>
</body>
</html>
Now let's move on to formatting. CSS provides endless possibilities when styling divisions (DIV).
<head>
<title>My layout</title>
<style type="text/css">
body {
background-color: #616161;
margin: 0;
}
div { position: relative; }
p {
margin: 0; padding: 3px;
color: #FFF;
text-transform: uppercase;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.clearfix { clear: both; }
#zones_unb {
width: 100%;
background-color: #000;
line-height: 2em;
text-align: center;
}
#zones_body {
width: 1000px;
margin: 0 auto;
background-color: #616161;
}
#zones_body div {
width: 100%;
text-align: center;
}
#zones_header {
height: 100px;
background-color: #E20000;
}
#zones_fnnb {
background-color: #0078FF;
line-height: 2em;
}
#zones_fn {
height: 80px;
background-color: #003ACE;
}
#zones_main p {
color: #000;
}
#zones_main {
width: 984px!important;
padding: 5px;
background-color: #FFF;
border: 3px solid #000;
}
#zones_main .column {
float: left;
}
#zones_lsb, #zones_rsb {
width: 200px!important; height: 300px;
border: 3px solid #000;
padding: 5px;
}
#zones_mp {
width: 552px!important;
}
#zones_footer {
height: 80px;
background-color: #3FCE00;
}
</style>
</head>
Simply replace the final HEAD section with the initial HEAD section in the first HTML code and you're all set. Remember, consider separating your CSS into a standalone .css file and customize it according to your preferences. :)