Dalam membuat desain website kita harus menentukan terlebih dahulu bagaimana konsep tata letak tampilan halaman website atau yang lazim disebut layout. Pada tutorial ini saya akan memberikan tips untuk membuat layout website 3 kolom dengan css, untuk lebih jelasnya sebelum saya bahas lebih lanjut berikut ini saya jelasin sekilas mengenai jenis-jenis layout website yang sering digunakan.
1. Layout website 1 kolom
2. Layout yang dilengkapi dengan kolom serta content dan sidebar (2 kolom)
3. Layout website dengan 1 kolom serta 2 sidebar (3 kolom)
Nah, pada tutorial ini saya akan bahas cara pembuatan layout website 3 kolom yang nantinya kolom content berada di tengah-tengah serta terdapat 2 sidebar disisi kiri dan kanan halaman. Mari langsung dicoba, namun sebelum nya download terlebih dahulu file-file yang diperlukan seperti background dan logo website yang telah saya siapkan disini.
Langkah 1
Tulislah skrip css berikut dan simpan dengan nama style.css*{margin:0 auto; padding:0}body{background:#c0c0c0; font-family:verdana; font-size:10px; color:#4c4e55; }#container{width:1007px; height:1369px; background:url('bg.jpg') no-repeat; }#header{height: 150px; border: 1px solid #009900; }#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0; padding:3px; border:1px solid #009900; }#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px; border:1px solid #009900; }#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0; padding: 3px; border: 1px solid #009900; }#footer{height:201px; border:1px solid #009900; clear: both; }Langkah 2
Selanjutnya buat juga kode html berikut dan simpanlah dengan nama index.html satu folder dengan skrip css. Dalam kode html ini kita masukkan tag yang berfungsi untuk memanggil pengaturan layout website yang telah dibuat di halaman style.css
<html><head><title>Layout Website 3 Kolom</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="container"> <div id="header"> </div> <div id="sidebar_kiri"> </div> <div id="center"> </div> <div id="sidebar_kanan"> </div> <div id="footer"> </div></div></body></html>
Tampilan layout diatas adalah layout dasar yang dapat dikembangkan lagi dengan menambahkan isi atau konten-konten yang diinginkan. Namun, jangan lupa untuk menghilangkan garis border nya agar terlihat lebih rapi J pada tampilan diatas memang sengaja saya tampilkan border berwarna hijau agar lebih mudah untuk melihat hasil kode yang dibuat. Untuk menghilangkan border tersebut silahkan anda hapus kode border: 1px solid #009900; disetiap ID Selector #header, #sidebar_kiri, #center, #sidebar_kanan dan #footer.
Pengembangan
Berikut ini saya tambahkan contoh cara mengembangkan tampilan header dan navigasi menu pada tampilan website yang dibuat. Sisipkan kode css berikut pada skrip css yang telah dibuat sebelumnya, kode ini berisi pengaturan tampilan logo web dan navigasi menu.
#logo{width:300px; float:left}.gmbr_logo{margin:45px 0px 0px 50px;}#menu{width:700px; float:right;}#menu ul{margin:60px; float:right; list-style:none;}#menu li{float:left;}#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold; font-family:arial; font-size:14px; color:#313132; }#menu a:hover {background:#FFCC00; text-decoration:underline;}Berikut penulisan kode css yang lengkap setelah ditambahkan kode diatas.
*{margin:0 auto; padding:0}body{background:#c0c0c0; font-family:verdana; font-size:10px; color:#4c4e55; }#container{width:1007px; height:1369px; background:url('bg.jpg') no-repeat; overflow:hidden; }#header{height: 150px; border: 1px solid #009900; }#logo{width:300px; float:left}.gmbr_logo{margin:45px 0px 0px 50px;}#menu{width:700px; float:right;}#menu ul{margin:60px; float:right; list-style:none;}#menu li{float:left;}#menu a{display:block; padding:7px 12px; text-decoration:none; font-weight:bold; font-family:arial; font-size:14px; color:#313132; }#menu a:hover {background:#FFCC00; text-decoration:underline;}#sidebar_kiri{float:left; width:250px; height:1000px; margin:3px 0; padding:3px; border:1px solid #009900; }#center{float:left; width: 577px; height:1000px; margin:3px; padding:3px; border:1px solid #009900; }#sidebar_kanan{float:left; width:150px; height:1000px; margin:3px 0; padding: 3px; border: 1px solid #009900; }#footer{height:201px; border:1px solid #009900; clear: both; } Lengkapi juga kode html yang telah dibuat dengan kode berikut dibawah tag <div id=”header”>.
<div id="logo"> <p><img class="gmbr_logo" src="logo.png"></p> </div> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div>Berikut kode lengkap pada dokumen html yang dibuat.
<html><head><title>Layout Web 3 Kolom</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="container"> <div id="header"> <div id="logo"> <p><img class="gmbr_logo" src="logo.png"></p> </div> <div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="sidebar_kiri"> Sidebar Kiri </div> <div id="center"> Konten </div> <div id="sidebar_kanan"> Sidebar Kanan </div> <div id="footer"> </div></div></body></html>
Catatan :
Pada kode diatas saya mengambil contoh lebar (width) 10007px dan tinggi (height) 1369px. Karena akan dibuat menjadi 3 kolom, berarti lebar 1007 px dibagi menjadi 3, namun tidak dibuat dengan ukuran yang tepat dikarenakan sisa nya digunanakan untuk membarikan jarak antar kolom.
Tidak ada komentar:
Posting Komentar