Mendesain Layout atau Template Website


Mendesain Layout atau Template Website
sebelum Anda membuat website Anda perlu merancang website yang akan Anda buat. Kalau Anda sudah menentukan rancangan websitenya, sekarang kita buat desain dasar websitenya karena tampilan dasar atau layout adalah dasar pondasi dari mendesain halaman website.
Untuk mendesain tampilan halaman website Anda perlu menggunakan CSS. Nah, pada Postingan kali ini saya akan bahas bagaimana cara mendesain layout atau tampilan dasar dari halaman website dengan menggunakan CSS atau bisa dikatakan kalau artikel ini merupakan implementasi dari artikel sebelumnya yaitu tentang Apa Itu CSS.
Apakah Anda sudah tahu bagaimana cara mendesain layout atau template website? langsung ja….!!!

Sebagian orang membuat desain halaman website dengan menggunakan elemen table. Padahal yang namanya tabel itu digunakan untuk membuat suatu pentabelan konten website, bukan layout. Jadi solusinya kita akan menggunakan elemen div untuk membuat desain layout seperti pada gambar diatas. Tapi bagaimana caranya?
Seperti yang Anda lihat pada gambar di atas kalau halaman website dibagi-bagi menjadi beberapa area antara lain container, header, content, content-inner, sidebar, dan footer dimana container merupakan global area yang menampung header, content, ccontent-inner, sidebar, dan footer. Sedangkan area content juga menjadi area yang menampung area content-inner dan sidebar.
Langsung saja Anda coba sendiri dengan membuat dokumen HTML dengan nama coba.htm atau coba.html dan isinya seperti dibawah:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>Desain Layout</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<div id=”container”>
<div id=”header”>
</div>
<div id=”content”>
<div id=”content-inner”>
</div>
<div id=”sidebar”>
</div>
</div>
<div id=”footer”>
</div>
</div>
</body>
</html>
Coba Anda lihat pada script di atas, terdapat kode . Tentunya Anda sudah tahu kalau dokumen HTML diatas memerlukan satu file CSS yaitu style.css. Nah, sekarang Anda buat file CSS yang dibutuhkan dokumen HTML diatas dengan membuat file CSS dengan nama style.css dan isi seperti berikut:

body {
font: 12px Verdana;
background: #eee;
}
#container {
margin: 10px auto;
width: 700px;
}
#header {
float: left;
width: 700px;
height: 90px;
background: #d00;
}
#content {
float: left;
width: 700px;
background: #ddd;
}
#content-inner {
float: left;
width: 500px;
min-height: 400px;
background: #fff;
}
#sidebar {
float: right;
width: 200px;

}
#footer {
float: left;
width: 700px;
height: 50px;
background: #d00;
}
Seperti yang saya katakan diatas kalau area container menampung area-area lain seperti header, content, content-inner, sidebar, dan footer, maka CSS untuk container diset dengan batas atas bagian luar (margin) 10px auto yang akan ditampilkan di bagian tengah dalam halaman website.
Sedangkan area lainnya yaitu header, content, content-inner, sidebar, dan footer menggunakan property float semua. Saya menggunakan property float ini agar mudah dalam membagi-bagi area kanan dan kiri tepatnya dalam pambagian content-inner dan sidebar sehingga tampilannya seperti yang Anda lihat di atas.
Jika Anda tidak menggunakan float pada header dan tapi menggunakan float pada content maka content akan naik menutupi area header.

3 Comments Add yours

  1. google mengatakan:

    Hi to all, the contents present at this site are really remarkable for people experience,
    well, keep up the good work fellows.

  2. SocialKingMaker.com mengatakan:

    ❤ I think you can get more Instagram fans with SocialKingMaker.com help! Look at their site – SocialKingMaker.com

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s