There are IDEs out there but I don't really have any in mind at the moment (I just write it all by hand then scan it into a computer and translate it to characters then fix the typos and everything (Joking, I use Notepad)).
If you are wantint to make a 2 column layout like that you can do a number of things, you can use a table that has a set width and is wrapped with <center> tags, or you can use divs that are wrapped with <center> tags or you can use tables/divs that use CSS to center them. Here is some code that creates a 2 column layout then all you have to do is add
<img src="BANNER_IMAGE"><br style="cleat: both"> to the top of it (inside of the first div) to get the banner on top:
CODE
<style>
body{
margin: 0px;
padding: 0px;
text-align: center;
}
.holder{
text-align: left;
width: 740px;
background: transparent;
margin: auto;
border: 1px solid #999;
}
.content{
width: 588px;
background: #eee;
float: left;
padding: 2px;
}
.menu{
width: 150px;
background: lightblue;
float: left;
padding: 2px;
}
</style>
<br><br>
<div class="holder" id="h">
<div class="content" id="c">
The main page content will go here.
<BR><BR><BR>
</div>
<div class="menu" id="m">
Menu stuff here
</div>
</div>
<br>
<script>
nid = document.getElementById("c");
id = document.getElementById("m");
id.style.height = nid.offsetHeight;
</script>
That will get both of the 2 column divs to be the same height. If you don't want/ need that just delete the <script>...</script> portion at teh bottom.
Hope that helps.