Setelah mockup desain selesai dibuat dan di-slice, langkah selanjutnya adalah meng-xhtml-kan mockup desain tersebut. Langkah pertama dari meng-xhtml-kan sebuah desain adalah layouting (membuat layout / kerangka besar tampilan – istilah yang saya buat sendiri LOL) menggunakan XHTML + CSS (+ JavaScript, jika diperlukan).

Layout umum sebuah website

Pada umumnya, layout dasar sebuah tampilan halaman web atau lebih spesifiknya blog terdiri dari empat bagian:

layout dasar tampilan web

  1. Header
  2. Body / Content Area
  3. Sidebar
  4. Footer

Pada banyak kasus, layout sebuah tampilan halaman web bisa saja terdiri dari satu body dan dua sidebar (3 column site) atau bahkan tanpa sidebar sama sekali (one column). Ada juga yang berupa kombinasi: dua kolom (body + sidebar) di halaman depan dan satu kolom (body saja ) di halaman single post. Model ini dianut oleh kubrick yang merupakan default theme wordpress hingga versi 2.9.

Mengukur “boks” kerangka halaman web

Konsep dasar CSS:

Pada dasarnya, semua elemen dalam web desain merupakan boks berupa persegi empat.

Untuk lebih jelas mengenai konsep dasar ini, baca The CSS Box Model yang ditulis oleh Chris Coyier.

Sekarang, saatnya “mengukur” boks – boks elemen layout tampilan web. Pengukuran elemen ini bisa dilakukan menggunakan software igraphic editing seperti photoshop, plugin MeasureIt (Firefox) atau software berbasis Adobe Air seperti Pixus.

layout dasar tampilan web + pengukuran

Note: untuk langkah ini, ukur saja elemen dasar (layout)-nya terlebih dahulu. Pengukuran detailnya dilakukan kemudian.

Ingat! Width / Height suatu elemen merupakan penjumlahan dari width / height + padding + border

Membuat “kerangka” dari xHTML dan CSS

Katakanlah gambar diatas akan kita gunakan sebagai acuan. Maka panduannya adalah sebagai berikut:

Header

  • Width (lebar) 960 piksel
  • Height (tinggi) 200 piksel
  • Background putih (hexacode: #fff)
  • Border (garis pembatas / stroke) 1 piksel berwarna merah tua (hexacode: #920000)
  • Margin-bottom (jarak elemen ke elemen dibawahnya) 10 piksel)

Body

  • Width (lebar) 640 piksel
  • Height (tinggi) fleksibel tergantung jumlah konten
  • Background putih (hexacode: #fff)
  • Border (garis pembatas / stroke) 1 piksel berwarna merah tua (hexacode: #920000)
  • Margin-right (jarak kanan ke elemen lain) 10 piksel

Sidebar

  • Width (lebar) 210 piksel
  • Height (tinggi) fleksibel tergantung jumlah konten
  • Background putih (hexacode: #fff)
  • Border (garis pembatas / stroke) 1 piksel berwarna merah tua (hexacode: #920000)

Footer

  • Width (lebar) 960 piksel
  • Height (tinggi) 160 piksel
  • Background putih (hexacode: #fff)
  • Border (garis pembatas / stroke) 1 piksel berwarna merah tua (hexacode: #920000)
  • Margin-top (jarak antara elemen ke elemen diatasnya) 10 piksel

Tambahan: Body & Sidebar Wrapper

  • Width (lebar) 210 piksel
  • Height (tinggi) fleksibel tergantung jumlah konten
  • Background putih none
  • Border (garis pembatas / stroke) none

Untuk membuat elemen Body & Sidebar berada di tengah, kita perlu membuat boks tak terlihat yang berfungsi sebagai wrapper (bungkus) kedua elemen tersebut yang berfungsi mengatur posisi kedua elemen tersebut.

Elemen body dan sidebar dibungkus dengan “wrapper” karena kedua elemen tersebut akan di-float:left agar memiliki posisi yang berdampingan. Elemen yang diberi float:left atau right tidak bisa dibuat margin:auto. Note: baca lebih lanjut mengenai float disini.

Penulisan xHTML dan CSS

Saatnya membuka editor teks dan menulis kode. Berikut ini adalah kode xHTMLnya. Buka Editor, copy paste kode ini, dan save dengan nama index.html.

Saya agak kesulitan menampilkan halaman html penuh dalam editor, jadi silahkan akses filenya disini.

  • Baris pertama merupakan deklarasi dari file – memberitahu peramban (browser) bahwa file tersebut merupakan file xhtml
  • Kode yang dibaca oleh browser merupakan semua yang terdapat di antara tag <html> dan tag penutup (closing tag) </html>
  • Kode yang berada diantara tag <head> dan tag penutup </head> berisi informasi mengenai halaman xhtml tersebut, dan informasi eksternal seperti meta title, lokasi file CSS / JavaScript yang mendukung tampilan file tersebut, lokasi favicon dari file tersebut, deklarasi fungsi JavaScript, dll. Informasi yang ditulis di area ini tidak akan dimunculkan di halaman browser
  • Kode yang berada diantara tag <body> dan tag penutup </body> akan dimunculkan di layar browser
  • Meta tag <link rel="" /> yang berada di baris keempat berfungsi untuk memuat file CSS terpisah kedalam halaman web. Fungsi dari file CSS ini adalah untuk men-styling halaman web yang memuatnya.
  • Markup / tag <div> merupakan markup / tag yang menentukan bagian / section dalam satu halaman web. <div> tidak memiliki efek apa-apa secara visual jika tidak di style menggunakan CSS, dan tidak memiliki nilai secara semantic.
  • Id="" merupakan “penanda” yang digunakan untuk menandai suatu elemen. Elemen yang telah ditandai menggunakan ID atau class ini kemudian dapat dimanipulasi tampilannya menggunakan CSS, dan bahkan dimanipulasi behavior-nya menggunakan JavaScript. Lebih jelas mengenai ID dan class dapat diketahui di artikel ini.

Sekarang buka file baru (Ctr + N), copy paste kode CSS di bawah, dan save sebagai style.css di dalam direktori yang sama dengan file index.html diatas.

/* teks ini tidak akan dieksekusi oleh browser */

#header{
	width:958px;
	height:200px;
	border:1px solid #920000;
	margin:0 auto 10px auto;
}

#body-sidebar-wrapper{
	width:960px;
	margin:0 auto;
}

#body-sidebar-wrapper:after{
	 content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

#body{
	float:left;
	width:638px;
	margin:0 10px 0 0;
	border:1px solid #920000;
}

#sidebar{
	float:left;
	width:308px;
	border:1px solid #920000;
}

#footer{
	width:958px;
	height:160px;
	border:1px solid #920000;
	margin:0 auto;
	margin-top:10px;
}
  • #header memanipulasi elemen yang memiliki id=”header”. Demikian juga dengan fungsi lainnya.
  • Width menentukan lebar suatu elemen
  • Height menentukan tinggi suatu elemen
  • Border menentukan garis batas / stroke suatu elemen
  • Margin menentukan jarak elemen ke elemen lainnya
  • Float berfungsi “memadatkan” suatu elemen. Lebih jelas mengenai float bisa dibaca di All About Floats oleh CSS-Tricks.
  • Pseudo class :after dan value-nya berfungsi untuk mengatasi Collapsing yang dihasilkan oleh float. Lebih detail mengenai float collapsing bisa dibaca di artikel All About Float yang sudah disebutkan diatas.

Note: ketahui bahwa masing-masing browser memiliki default value CSS untuk setiap tag / markup. Untuk membuat kode CSS lebih baik, gunakan CSS Reset.

6 thoughts on “Layouting Menggunakan CSS

  1. nambah smangadh bener ndan…
    makasi banyak..

  2. Mantab bos. banyak blog yg ngasih scriptnya tapi disini saya belajar dengan penjelasan yg terperinci sesuai yg saya butuhkan, semoga tutorial css berikut2nya selalu ada penjelasan seperti ini sehingga mudah di pahami dan di mengerti.. GOOD JOB

  3. Tolong dishare cara membuat width menu penuh di layar monitor seperti menu dalam blog ini yang berwarna hitam di atas.

    Terimakasih sebelumnya.

  4. Terima kasih ya.. Informasinya benar-benar bermanfaat, sekarang sy jadi tahu struktur dan cara membuat .css 😀

Share Your Thought