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:
- Header
- Body / Content Area
- Sidebar
- 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.
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
htmlpenuh 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 halamanxhtmltersebut, 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 menggunakanIDatauclassini 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;
}
#headermemanipulasi elemen yang memiliki id=”header”. Demikian juga dengan fungsi lainnya.Widthmenentukan lebar suatu elemenHeightmenentukan tinggi suatu elemenBordermenentukan garis batas / stroke suatu elemenMarginmenentukan jarak elemen ke elemen lainnyaFloatberfungsi “memadatkan” suatu elemen. Lebih jelas mengenai float bisa dibaca di All About Floats oleh CSS-Tricks.- Pseudo class
:afterdan value-nya berfungsi untuk mengatasi Collapsing yang dihasilkan olehfloat. 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.
Toekangweb » 50 Tutorial CSS/XHTML dalam Bahasa Indonesia
13 May 2010
[...] Layouting Menggunakan CSS [...]
Fitri PMRELOAD
27 November 2010
nambah smangadh bener ndan…
makasi banyak..
kensin
17 August 2011
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
fikrirasyid
22 August 2011
Trims