As zbing said above your question is basically asking how to code a web page which would really take a few books to do justice 
Creating a design in photoshop is the easy part because it’s just a picture. A webpage is (or should be) a living medium and a flat design doesn’t really translate into a workable web page unless you approach it correctly from the start.
You would rarely create a page that sits on a whole page background image like that instead you would create each element to be scalable and shrink and grow with content as required.
For example the wooden background should be constructed in clever slices so that a small section could be repeated to create the whole page but still give a similar effect but may have to sacrifice some design elements.
With your design you are stuck to a fixed height and width layout and a content section that will need a scrollbar attached so that the height can remain constant. It’s not really a user friendly design.
Anyway, if you must use that approach then here’s is a basic structure that will fit your image but all internal elements still need to be styled.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Bonkage.com</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<style type="text/css">
/* css in the head while developing only. It should be removed externally to main.css */
/* main CSS Document */
html, body, table{
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe,blockquote,
h1, h2, h3, h4, h5, h6, p,
dl, dt, dd, ol, ul, fieldset,
form, legend, table, caption, th, td {
margin: 0;
padding: 0;
border:none;
}
ol, ul {list-style: none;}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
/* clearing technique if visible overflow required */
.clearfix:after {
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {zoom:1.0}
a img,img{border:none;display:block}/* remove borders from linked images*/
a{color:#fff;text-decoration:none;}
a:visited{color:#fff}
a:hover{text-decoration:underline;}
a:focus{outline:1px dotted #ccc}
a:active{text-decoration:underline;}
input,textarea,select,label{
font-family:Arial; /* set font-family for IE*/
vertical-align:middle;
}
/* end reset styles */
/* a few defaults */
p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.75em}
html,body{min-width:950px;}
body {
line-height: 1.3;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
text-align:center;/* for ie5.+*/
background:#1a1812 url(images/bg3.jpg) no-repeat 50% 0;
color:#000;
}
* html body {
font-size:x-small;/* ie5 - 13px - but allows text to be resized*/
f\\ont-size:small;/* ie6 - 13px*/
}
/* main structure */
#outer{
text-align:left;
width:960px;
padding:55px 0 10px;
margin:auto;
text-align:left;
font-size:93%;/* 12px*/
position:relative;
}
#header{
height:100px;
background:red;/* for testing only*/
margin:0 0 312px;
overflow:hidden;
}
#main{
width:100%;
clear:both;
overflow:hidden;
}
#content{
width:645px;
padding:20px;
float:left;
background:red;/* for testing only*/
margin:0 0 20px 15px;
display:inline;
height:790px;
overflow:auto;
}
#content h1{
text-align:center;
font-size:180%;
margin:0 0 20px;
}
#content h1 span{
display:block;
padding:10px 0;
font-size:80%;
}
#sidebar{
float:right;
width:240px;
margin:0 5px 20px 0;
display:inline;
background:red;/* for testing only*/
}
#footer{
clear:both;
background:red;/* for testing only*/
}
</style>
</head>
<body id="home">
<div id="outer">
<div id="header">
<ul id="nav">
<li><strong>Home</strong></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Prices </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="main">
<div id="content">
<h1>Welcome to Bonkage.com <span>Web/Image/Video Editing & Design Services</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor.</p>
<p>Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
<div id="sidebar">
<ul>
<li><a href="#">Website Design<span></span></a></li>
<li><a href="#">Promo/ Ad Creation<span></span></a></li>
<li><a href="#">Image/ Video Editing<span></span></a></li>
<li><a href="#">Press/Media Kit Creation<span></span></a></li>
</ul>
</div>
</div>
<!-- end main -->
<div id="footer">
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">@Bonkage</a></li>
</ul>
</div>
</div>
</body>
</html>
The background image I was using is attached and cuts your 3 megabyte image down to 140k (although 140k is still miles too big).
However, I think you should consider a more friendly design and try to create a design that will scale well and grow with content.