desperately need help with the bAsiCs, skin -- step after psp & css??? Options

[radii]

uh guys I know this sounds n00by but ‘d like to know what I do after creating a picture for a skin? I’ve done all the link and coding stuff but what do I do then? I tried putting my code into the custom header but it ended up..well as a header image
here’s the code I made

<IMG SRC="http://www2.freepichosting.com/Images/421466184/1.jpg" USEMAP="#DONTSTAY" BORDER=0>
<MAP NAME="DONTSTAY">
<AREA SHAPE=RECT COORDS="514,227,565,170" HREF="http://xanga.com/"  ALT="to the gate."  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="619,263,650,231" HREF="http://xanga.com/private/home.aspx"  ALT="take out your keys"  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="486,294,570,262" HREF="http://www.xanga.com/profile.aspx?user=radii"  ALT="About."  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="599,344,657,312" HREF="http://www.xanga.com/logout.aspx"  ALT="don’t want to stay?"  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="556,371 ,596,343 " HREF="http://xanga.com/home.aspx?user=radii"  ALT="re-enter from the door."  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
<AREA SHAPE=RECT COORDS="597,420 ,694,390" HREF="http://xanga.com/private/subscribeto.aspx?user=radii"  ALT="make sure you’re stuck with me."  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
</MAP>

<style type="text/css">
/*
Footer Remover - xanga.com/add_ons
*/
table.footer, table.footernav {display: none;};
</style>

<STYLE TYPE="text/css">
BODY{
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#747D90;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#747D90;
scrollbar-arrow-color:#D7CCA5;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td,
p {
/* edits main text */
font:normal 10px verdana;
line-height:10px;
color:white;
letter-spacing:0px;
text-align:justify;
}

table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}

div.blogheader, .caption {
/* edits the dates */
font-family:Verdana;
text-transform:uppercase;
font-size:10px;
line-height:10px;
font-weight:bold;
color:#C0C0C0;
letter-spacing:0px;
background-color: #000000;
text-align: middle;
}

a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#92A8AF;
font:normal 10px verdana;line-height:10px;
text-decoration: none;
}
a:visited, a.footernav:visited,  {
/* edits the links that the user has visited */
color:#92A8Af;
font:normal 10px verdana;
line-height:10px;
text-decoration: none;
}

a:hover {
/* edits when user mouseovers the links */
color:#C5C0B9;
font:normal 10px verdana;
line-height:10px;
cursor: crosshair;
text-decoration: none;
}

input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #C5C080;
font:normal 10px verdana;
background-color: #c5c0b9;
letter-spacing:0px;
}

table.left {
/* this edits the menu module */
border: 1px solid #C5C080;
width:100px;
background-color: #000000;
}

table.blogbody {
/* this edits the other the place where the  blog is */
background-color:828277;
border:1px solid c5c080;
family-font: verdana;
width:400px;
FILTER: alpha(opacity=80);}

table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-color: #000000;
font: bold 10px verdana;
text-transform: uppercase;
color: #c5c080;
border: none;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-color: #000000;
border: none;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 0px solid #c0c0c0;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 700px;
}
hr {
/* horizontal divider */
border: 0px solid #FCEBFF;
}
</style>

<script type='text/javascript'>
document.title = ('==>=                    Late<=);
</script>

[Fireshrieker]

do you want the image map picture as a background? if so, then image maps always do this. you just have to move the divs up until it is where you want it (hence, using negative pixels in div positions)