Desain Layout Website dengan Menggunakan Cascading Style Sheet (CSS)

4 Votes

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

Bagian	Properti
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

    http://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>