Desain Layout Website dengan Menggunakan Cascading Style Sheet (CSS)

CSS merupakan salah satu bahasa pemrograman web untuk mengatur beberapa komponen dalam sebuah halaman web sehingga akan lebih terstruktur dan seragam. CSS dapat terpisah dengan dokumen sehingga akan meringkas kode pada halaman dan tentunya akan mengurangi keruwetan dokumen. Sebuah file CSS dapat digunakan pada sejumlah dokumen.

Desain layout website bisa menggunakan model tabel atau bisa juga dengan div. Diantara kedua model tersebut memiliki kelebihan dan kekurangan tersendiri-sendiri tergantung pada sistem web yang akan dikembangkan. Menggunakan model tabel mudah dan cepat proses pembuatannya akan tetapi kelemahannya adalah sulit untuk memodifikasi mana kala ada perubahan desain antarmuka dan desain sistem, karena model desain menggunakan tabel ini harus melakukan perubahan pada setiap elemen yang berada di dalamnya. Sedangkan menggunakan model div butuh waktu yang lebih lama, akan tetapi walaupun lebih lama, dengan model div ini akan mempermudah pengembangan lebih lanjut sesuai dengan kebutuhan sistem.

Artikel ini akan membahas tentang desain layout website dengan menggunakan CSS. Model yang digunakan adalah menggunakan tag div.

Persiapan

Beberapa hal yang harus dipersiapkan untuk memulainya, pertama yang perlu dipersiapkan adalah gambaran layoutnya. Dibawah ini merupakan gambaran sederhana layout website.

Keterangan

BagianProperti
Pembungkus Class .pembungkus
  Lebar 900 pixel
  Tinggi Tinggi dikosongkan agar nanti dapat secara otomatis memanjang sesuai panjang konten
Header Class .header
  Lebar Otomatis
  Tinggi 140 pixel
Menu Class .menu
  Lebar Otomatis
  Tinggi minimal 400 pixel
Navigasi Class .navigasi
  Lebar 200 pixel
  Tinggi minimal 400 pixel
Konten Class .konten
  Lebar 700 pixel
  Tinggi Otomatis
Footer Class .footer
  Lebar Otomatis
  Tinggi 100 pixel

Sekarang mari kita tuangkan dalam kode css. Kita bisa menggunakan editor apa saja, misal menggunakan notepad atau untuk lebih mudahnya kita menggunakan Adobe Dreamweaver karena bisa sekaligus melihat outputnya.

Buat file css dengan nama style.css dan tulis kode di bawah ini

/*
    style.css
    Contoh file css
    https://andikhermawan.wordpress.com */
 
body {
    margin:0;
}
 
.pembungkus {
    width:900px;
    padding:10px;
    border:1px solid #999;
    margin:10px auto;
}
 
.header {
    height:140px;
    background-color:#999;
}
 
.menu {
    height:35px;
    background-color:#666;
}
 
.navigasi {
    float:left;
    width:200px;
    background-color:#999;
    min-height:300px;
}
 
.kontent {
    margin-left:200px;
    background-color:#EEE;
    min-height:300px;
}
 
.footer {
    clear:both;
    height:100px;
    background-color:#CCC;
}

 

Buat file index.html dan tulis kode seperti di bawah ini

 <html>
<head>
<title>Contoh Desain Layout Website dengan Menggunakan CSS</title>
 
<!-- untuk menyertakan file css -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="pembungkus">
    <div class="header">
        Header
    </div>
    <div class="menu">
        Menu
    </div>
    <div class="navigasi">
        Navigasi
    </div>
    <div class="kontent">
        Konten        
    </div>
    <div class="footer">
        Footer
    </div>
</div>
 
</body>
</html>
 

Sekarang coba buka menggunakan browser maka akan tampak seperti di bawah ini.

Silahkan mencoba dan semoga bermanfaat…

Berita Terkait