Layout website dasar

April 23, 2009

Pada dasarnya layout website terbagi 3 bagian yaitu:header, content dan footer.Sebelumnya kita buat dalam sketsa tampilan diatas kertas, lalu kita implementasikan dalam bentuk kode html dan css.
sketsa layout
layout website dasar

kode css(nama file:layout.css)


body
{
 margin:0 100px 0 100px;
 background-color:#999;
}
#main
{
  padding:20px;
  background:url(images/bg.gif) repeat;
}
#header
{
  background:url(images/header.jpg) no-repeat;
  height:64px;
  margin-bottom:10px;
}
#content
{
  border:solid 1px #000;
  background-color: #998766;
  padding:10px;
}
#footer
{
  margin-top:10px;
  border:solid 1px #000;
  background-color: #fff;
  padding:5px 10px 5px 10px;
  font-size:small;
}

kode html(nama file:layout.html)


<html>
<head><TITLE>Test padding</TITLE>
<LINK href="layoutg.css" rel="StyleSheet"> 
</head>
<BODY>
<div id="main">
  <div id="header">
  </div>
  
  <div id="content">
     ini bagian dari layer content
  </div>
 
  <div id="footer">
   hak cipta siapa saza...
  </div>
</div>
</BODY>
</html>