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
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.
Tidak ada komentar:
Posting Komentar