I normally try to keep my posts short and to-the-point, while offering details should they be desired. I'm afraid this isn't one of those times. So, here's my little 2 cents on the topic, and I hope it helps. ^^
A VERY simple approach to web design is to break-down the website as much as possible. In most template designs, there are five primary sections (four if you are not using a fixed-width): outer wrapper, header, navigation, body, and footer. Here's a "visual" of what I mean, as applied to your provided design:
Code:
┌─────────────────────┐
│┌───────────────────┐│
││ NAVIGATION ││
│└───────────────────┘│
│┌───────────────────┐│
││ ││
││ HEADER ││
││ ││
│└───────────────────┘│
│┌───────────────────┐│
││ ││
││ ││
││ ││
││ BODY ││
││ ││
││ ││
││ ││
│└───────────────────┘│
│┌───────────────────┐│
││ FOOTER ││
│└───────────────────┘│
└─────────────────────┘
Anything on the page that would appear ONLY on that page, would be coded into the "body" of the page. Everything else is the actual template that would appear on EVERY page you have on the website. In the old days of coding, it wasn't uncommon to see tables used for templates, I still prefer it, but it is a significantly more flexible option to use division tags. Here is a basic structure for the same example displayed above:
Code:
<html>
<head>
<title>My Title</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</body>
</html>
By applying CSS to this basic structure, you can set-up a website to take numerous designs without ever changing the actual code.
Something else to keep in mind is backwards compatibility. It is true that most users have modern browsers and won't have trouble displaying new or old websites. There are always exceptions. Do you want to make the website display and function completely with these out-dated browsers? If so, do you want identical functionality between new and old browsers, and improved functionality for the newer browsers? The level of code you have to use, and the complexity of it, will vary greatly upon what you wish in terms of the browser functionality for users.
