Membuat Rancangan Awal Layout

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 AwalLayout 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;

}          }