Como pongo esto de encabezado?

Hola que tal queria saber como hacer para ubicar este diseño que hice como encabezado en ice blue soy un poco novato y logre hacer esto explorando por la web pero aora quiero ponerlo como encabezado
aqui el diseño:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'><!--//--><![CDATA[//><!--

(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
//--><!]]></script> <script type='text/javascript'><!--//--><![CDATA[//><!--

(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
//--><!]]></script> <script type='text/javascript'>
jQuery().ready(function() {
jQuery('.kwicks').kwicks({
max: 750,
duration: 1000
});

jQuery(".kwik").hoverIntent(function() {
jQuery(this).children(".kwikmet").fadeIn("slow") ;
}, function() {
jQuery(this).children(".kwikmet").fadeOut("3000");
});
});
</script> <style type="text/css">
#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}
ul.kwicks{
margin:0px;
padding:0px 10px;
list-style:none;
}
.kwicks li {
float: left;
width: 196px;
height: 250px;
position:relative;
}
.kwikmet{
position:absolute;
bottom:10px;
left:10px;
right:10px;
display:none;
background:url(http://4.bp.blogspot.com/_ActSVcJ9YKs/TMB2jzuRRlI/AAAAAAAABrY/QmZFEF8AFlw/s000/trans.png);
padding:10px;
width:710px;
color:#888;
}
.kwikmet h2 a{
color:#fff;
font-size:16px;
font-family:georgia;
font-weight:normal;
padding-bottom:10px;
}
.slidimg{
width:750px;
height:250px;
}
.rounded{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

margin:0;
padding: 0;
}
</style>

HTML:

<div id="slidearea">
<ul class="kwicks">
<li class="kwik"><a href="#"> <img style="width: 750px; height: 250px;" src="http://mkgaming.com/wp-content/uploads/2012/04/god_of_war_ascension.jpg" class="slidimg" alt="" /> </a>
<div class="kwikmet rounded">
<h2><a title="xxxx" rel="bookmark" href="#">God Of War Ascension</a></h2>
<p></p>
</div>
</li>
<li class="kwik"><a href="#"> <img style="width: 750px; height: 250px;" src="http://pretemactuario.files.wordpress.com/2011/07/gears_of_war_3_3d.jpg" class="slidimg" alt="" /> </a>
<div class="kwikmet rounded">
<h2><a title="permanent link to category name clash" rel="bookmark" href="#">Gears of War 3</a></h2>
<p></p>
</div>
</li>
<li class="kwik"><a href="#"> <img style="width: 750px; height: 250px;" src="http://cdn.webadictos.net/media/2012/05/resident-evil-6-characters.jpeg" class="slidimg" alt="" /> </a>
<div class="kwikmet rounded">
<h2><a title="permanent link to block quotes" rel="bookmark" href="#">Resident Evil 6</a></h2>
<p></p>
</div>
</li>
<li class="kwik"><a href="#"> <img style="width: 750px; height: 250px;" src="http://games.tecnogaming.com/images/novedades/2011/assassins-creed-revelations.jpg" class="slidimg" alt="" /> </a>
<div class="kwikmet rounded">
<h2><a title="permanent link to block quotes" rel="bookmark" href="#">Assasins Creed Revelation</a></h2>
<p></p>
</div>
</li>
<li class="kwik"><a href="#"> <img style="width: 750px; height: 250px;" src="http://www.gameit.es/wp-content/uploads/2012/05/Resident-Evil-Characters-570x362.jpg" class="slidimg" alt="" /> </a>
<div class="kwikmet rounded">
<h2><a title="permanent link to contributor post, approved" rel="bookmark" href="#">Resident Evil Operation Racoon City</a></h2>
<p></p>
</div>

ve a editar pagina/configuracion avanzada/baja hasta el final y ahi 2 box que dicen escribe lo que va encima de pagina y lo pones ahi si no agarra me avisas!...
saludos

Es algo parecido a lo que quiero pero necesito que la publicidad quede por arriba , se puede lograr? gracias por contestar

si se puede, depende de el diseño que tengas