usahawan-maju | Cara Membuat Layout Dengan CSS - Untuk membuat sebuah layout halaman web kita bisa menggunakan banyak cara, bisa dengan mendownload template yang sudah jadi atau bawaan dari dreamwifer, bisa membuat sendiri dengan tag frameset dalam HTML atau bisa juga membuat layout dengan tag div pada css.
Berikut adalah contoh sederhana mengatur layout dengan menggunakan <div> :
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#halaman{ background-color:#660099;
min-width: 700px;
height:200px;
}
#atas {background-color:#CF0;
height:100px;}
#kiri {background-color:#0C0;
max-width:200px; float:left;
height:400px;}
#kanan {background-color:#063;
max-width:200px; float:right;
height:400px;}
#bawah {background-color:#F00;
height:100px;}
#tengah {background-color:#000000;
height:400px;}
</style>
</head>
<body>
<div id="halaman">
<div id="atas">bagian atas halaman </div>
<div id="kiri"> bagian kiri halaman </div>
<div id="tengah">
<div id="kanan"> bagian kanan halaman </div>
<div id="isi"> bagian isi halaman </div>
</div>
<div id="bawah">Bagian bawah halaman</div>
</div>
</body>
</html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#halaman{ background-color:#660099;
min-width: 700px;
height:200px;
}
#atas {background-color:#CF0;
height:100px;}
#kiri {background-color:#0C0;
max-width:200px; float:left;
height:400px;}
#kanan {background-color:#063;
max-width:200px; float:right;
height:400px;}
#bawah {background-color:#F00;
height:100px;}
#tengah {background-color:#000000;
height:400px;}
</style>
</head>
<body>
<div id="halaman">
<div id="atas">bagian atas halaman </div>
<div id="kiri"> bagian kiri halaman </div>
<div id="tengah">
<div id="kanan"> bagian kanan halaman </div>
<div id="isi"> bagian isi halaman </div>
</div>
<div id="bawah">Bagian bawah halaman</div>
</div>
</body>
</html>
Selamat mencoba, dan silahkan Anda kembangkan sendiri sesuai dengan keinginan, jika mau lebih mudah dalam mengeksplor selector dan propertinya bisa menggunakan dreamwifer atau macromedia. Alasan kenapa perlu belajar membuat layout dengan CSS adalah karena pengaksesan script css lebih ringan dari script lain, sehingga akan mempercepat dan memperingan kerja browser kita. Untuk CSS Lanjutan bisa baca disini.
