1. Membuat Rancangan Awal Layout :
Rancangan Awal merupakan Rencana Layout yang akan dibuat. Rancangan Awal ini dapat dibuat dengan menggunakan Ms. Word, Corel Draw atau Adobe Illustrator. Contoh dari Rancangan Awal Website adalah :
2. Membuat Layout Website
Layout Website/Story Board dibuat setelah membuat Rancangan Awal. Layout Website/Story Board dibuat dengan menggunakan CSS (Cascading Stylesheet) secara eksternal yang disimpan di folder css pada localhost. Layout Website yang sesuai dengan Rancangan Awal diatas adalah :
Nama File : layout.css
#wrapper{ width:1000px;
height:750px;
background:grey;
margin-top:10px;
margin-left:10px;
margin-bottom:10px;
margin-right 10px;
padding:10px;
}
#menu { margin-bottom:10px;
height:50px;
width:750px;
background:aqua;
float:left;
}
#pencarian { margin-bottom:10px;
margin-left:50px;
height:50px;
width:200px;
background:red;
float:left;
}
#logo { margin-bottom:10px;
margin-right:20px;
height:150px;
width:150px;
background:url(logo-akprind.gif);
float:left;
clear:both;
}
#header { margin-bottom:10px;
height:250px;
width:810px;
background:white;
float:left;
padding:10px;
}
#berita1 { margin-bottom:10px;
margin-right:20px;
height:250px;
width: 250px;
background:white;
float:left;
clear:both;
}
#berita2 { margin-bottom:10px;
margin-right:20px;
margin-left:260px;
margin-top:-260px;
height:250px;
width: 250px;
background:white;
float:left;
clear:both;
}
#berita3 { margin-bottom:10px;
margin-right:20px;
margin-left:520px;
margin-top:-260px;
height:250px;
width: 250px;
background:white;
float:left;
clear:both;}
#berita4 { margin-bottom:10px;
margin-left:780px;
margin-top:-260px;
height:250px;
width: 230px;
background:white;
float:left;
clear:both;
} }
