Cara Membuat Pembagian Layout Website Menggunakan Manipulasi CSS

Posted by : BayuBayyz Selasa, 24 Maret 2015

Contoh Layout Website dengan Menggunakan Manipulasi CSS

Layout sebuah Web merupakan hal yang mendasar dan sangat penting untuk kita perhatikan sebelum membuat sebuah website atau dalam merancang sebuah website, Layout tersebut harus dibagi-bagi dan ditata sedemikian rupa sehingga dapat diterima dengan baik oleh pengunjung web kita.
Bagian-bagian dalam tampilan sebuah website sangat penting untuk menampilkan konten pada letak dan atau bagian yang sesuai dengan keinginan. Misalnya dalam sebuah kasus kita ingin membagi layout kita menjadi 2 bagian, sisi kiri untuk menampilkan artikel-artikel dan sisi kanan untuk menampilkan list artikel.
Maka yang harus diperhatikan adalah sebagai berikut :
1. Lebar layar untuk menampilkan seluruhnya diasumsikan 100%
2. Bagi 100% tersebut menjadi 2 bagian untuk sisi kiri dan sisi kanan. Misalkan sisi kiri untuk artikel-artikel lebarnya 70% dan 30% sisanya untuk sisi kanan. (*Anda dapat membaginya sesuai kebutuhan)
3. Script HTML dan CSS tentunya

Baik sekarang bagaimana script untuk Membuat Pembagian Layout Website Menggunakan CSS ?
Berikut langkah-langkahnya :
1. Buka Notepad/ Dreamweaver/ Sublime/ Text Editor lainnya.
2. Copy dan pastekan Script yang sudah saya buat berikut ini :

<!DOCTYPE HTML>
<html>
<head>
<title>Contoh Table menggunakan div by @BayuWPP</title>
<style type="text/css">
.lebarkolom {
width:80%;    /* ukuran penuh layar table pada browser*/
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 0px solid #000; /* border, opsional */
}
.baris {
width: 100%;    /* harus 100% supaya penuh ke area table */
}
.kolom1 {
width: 70%; /* lebar kolom 1 70% untuk artikel-artikel */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /*BayuWPP*/
              /* padding maupun border akan mempengaruhi lebar kolom */
float: left; /* Konten di letakkan di sebelah kiri*/
}
.kolom2 {
width: 30%; /* lebar kolom 2 30% untuk list artikel*/
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /*bayubayyz.blogspot.com*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left; /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
<h3>bayubayyz.blogspot.com</h3>
<div class="lebarkolom">
   <div class="baris">
      <div class="kolom1">
        Kolom Pertama 
      </div>
      <div class="kolom2">
        Kolom Kedua 
      </div>
   </div>
   <div style="clear: both;" /> 
</div>
</body>
</html>

3. Jangan lupa save file dengan beri nama dan exstensi .html dan lihat hasilnya dengan membuka file tersebut!
4. Selamat ! Anda kini mengetahui Cara Membuat Pembagian Layout Website Menggunakan Manipulasi CSS !