Di tutorial sebelumnya, kita telah membuat file PSD sederhana dengan Framework 960gs. Di tutorial ini, kita akan belajar teknik slicing, markup dengan HTML 5, dan mengatur penempatan setiap elemen dengan Framework 960gs. Pastikan Anda telah menguasai dua artikel sebelumnya tentang 960gs yaitu Panduan Mudah Desain Web dengan 960gs –Bagian 1 dan Bagian 2.
Preview
Berikut adalah tahapan yang akan kita peroleh di tutorial ini.
Detail Tutorial
- Tingkat Kesulitan: Pemula
- Software yang Digunakan: Adobe Photoshop, Teks Editor
- Teknik yang Dipelajari: Grid 960, Proses Slicing Desain Web
- Lama Pengerjaan: 20 menit
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:
Tutorial
Langkah Awal
Siapkan file dengan nama index.html dan folder dengan nama css untuk file css dan img untuk gambar. Di dalam folder css, buat file kosong dengan nama style.css. Ambil file reset.css, type.css, dan 12_col_960.css dari paket Framework 960gs.
Langkah 1: Slicing
Buka file PSD. Klik ikon mata di depan layer Background untuk menyembunyikannya. Seleksi logo dengan tool Marquee. Tekan Ctrl + Shift + C untuk menyimpannya ke Clipboard.
Langkah 2
Buat file baru (Ctrl + N) dengan ukuran sesuai Clipboard. Paste gambar (Ctrl + V).
Langkah 3
Sembunyikan layer Background.
Langkah 4
Tekan Ctrl + shift + Alt + S untuk menyimpan ke dalam format Web. Simpan dengan format file PNG-24 dan pastikan Transparency aktif.
Langkah 5
Ulangi proses ini pada elemen gambar yang lain. Jika gambar itu memerlukan transparansi, gunakan format file PNG-24. Jika tidak, gunakan JPEG karena ukurannya jauh lebih kecil.
Di akhir proses slicing, kita akan memperoleh file gambar berikut.
Langkah 6: Mark Up HTML 5
Berikut adalah outline layout HTML yang kita harapkan. Kita bisa membayangkan ouline HTML 5 sebagai daftar isi sebuah buku. Anda bisa menemukan lebih banyak informasi tentang algoritma outline HTML 5 di Smashing Magazine.
Untuk mempermudah, lihat gambar di bawah. Logo dan navigasi kita simpan bersama dalam tag header atau cover buku. Kedua gambar kita simpan dalam sebuah section atau bab buku. Kedua post blog kita simpan sebagai section atau bab terpisah. Kutipan adalah informasi yang berkaitan dengan halaman sehingga kita simpan sebagai aside atau sidebar. Terakhir adalah footer.
Di dalam header, navigasi kita simpan dalam tag khusus nav. Gambar besar bisa kita tampilkan sebagai berita terpisah sehingga kita definisikan sebagai sebuah article yaitu artikel di dalam bab. Logika yang sama berlaku untuk kedua artikel blog.
Teks banner kita anggap cukup penting dan kita format sebagai heading 3. Judul artikel blog dan tagline-nya kita anggap lebih penting dengan menyimpannya sebagai heading 2 dan 4.
Langkah 7
Berikut adalah markup HTML yang kita butuhkan. Lihat hasilnya di sini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE HTML> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Halaman Web Sederhana dengan Grid 960</title> <link rel="stylesheet" type="text/css" href="css/960_12_col.css" media="all"> <link rel="stylesheet" type="text/css" href="css/reset.css" media="all"> <link rel="stylesheet" type="text/css" href="css/text.css" media="all"> <link rel="stylesheet" type="text/css" href="css/style.css" media="all"> </head> <body> <header> <div id="logo"> <h1>Photoshoot</h1> </div> <nav> <ul> <li><a href="#" class="selected">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="banner"> <article> <h3>Suspendisse suscipit euismod mollis. Donec sed erat in leo venenatis ultrices ut vel augue. Praesent at nibh vitae arcu blandit lobortis.</h3> </article> <img src="img/small-photo.jpg" alt="Foto Kecil" class="grid_4"> </section> <section> <article> <h2>what we offer</h2> <h4>perfection and creativity</h4> <p>Sed at suscipit turpis. Ut in blandit nibh. Praesent et est ac felis blandit ornare. Ut sagittis justo ut ante convallis egestas iaculis risus egestas. Sed eu mauris id ipsum elementum accumsan sit amet eu tellus. Aenean at lacus at lacus ullamcorper volutpat. Curabitur imperdiet velit in sapien consequat luctus. Donec est elit, tincidunt sed tincidunt sed, consectetur at purus. Nam placerat vehicula accumsan.</p> <p>Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat. Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.</p> <div class="button"><a href="#">Read More</a></div> </article> <article> <h2>we can do</h2> <h4>a very quick photo shoot</h4> <p>Sed et ante eget lorem semper iaculis molestie a lorem. Duis nulla velit, accumsan fringilla dapibus faucibus, viverra sed mauris. Morbi eu magna felis. Donec eget risus diam, sed porttitor neque.</p> <p>Aenean vel dui turpis, a sagittis lectus. Morbi odio nisi, gravida dictum venenatis non, tempor eu risus. Ut rhoncus porta dui at euismod. Nam quis congue tellus. Nullam dapibus lacus sed metus eleifend mollis. Donec rutrum hendrerit quam, ut porttitor est malesuada sed. Aliquam erat volutpat.</p> <p>Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.</p> <div class="button"><a href="#">Read More</a></div> </article> </section> <aside> <blockquote> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis ultrices felis, aliquam tincidunt augue accumsan vitae. Aenean porta mattis risus, vel tempus lacus eleifend ut.</p> <div id="nama">Mohammad Jeprie</div> <div id="status">Owner of <a href="http://psdfreemium.com">PSDfreemium</a></div> </blockquote> </aside> <footer> <p>a simple design from <a href="http://desaindigital.com">DesainDigital</a></p> </footer> </body> </html> |
Perhatikan bahwa di bagian atas terdapat kode yang mengambil file reset.css, text.css, dan 12_col_960.css dari paket Framework 960gs. Dalam projek sesungguhnya, sangat disarankan untuk menyatukan ketiga file css untuk mengurangi http request –saya tidak tahu apa itu tapi intinya adalah situs akan load lebih cepat.
1 2 3 | <link rel="stylesheet" type="text/css" href="css/960_12_col.css" media="all"> <link rel="stylesheet" type="text/css" href="css/reset.css" media="all"> <link rel="stylesheet" type="text/css" href="css/text.css" media="all"> |
Langkah 7
Buka HTML 5 Outliner dan periksa kode di atas dengan cara copy-kan langsung atau berikan link halaman demonya.
Ternyata artikel kita terbagi dua. Ini terjadi karena secara otomatis heading akan menghasilkan section atau bab baru. Agar kedua heading ini menyatu kita simpan keduanya dalam tag hgroup.
Langkah 8
Simpan h2 dan h4 di artikel blog ke dalam hgroup. Hasilnya bisa dilihat di sini.
1 2 3 4 | <hgroup> <h2>what we offer</h2> <h4>perfection and creativity</h4> </hgroup> |
Langkah 9
Setelah diperiksa di HTML 5 Outliner, sekarang keduanya akan menyatu.
Langkah 9: Grid
Sekarang kita mulai menggunakan grid 960. Di bawah tampilan desain saat ini.
Langkah 10
Untuk menggunakan framework 960gs, kita harus menyimpan semuanya dalam class bernama container_12.
Langkah 11
Edit markup HTML. Simpan seluruh elemen di dalam div dengan nama class container_12.
Dan seperti inilah hasilnya.
Langkah 12: Menggunakan Grid Overlay
Kita perlu tool untuk membantu kita melihat grid situs. Buka Grid Overlay Bookmark. Geser tombol Grid Overlay ke baris Bookmark browser.
Langkah 13: Menghitung Grid
Logo situs ini berada dalam 3 kolom.
Langkah 14
Navigasi bisa kita simpan dalam sisa 9 kolom yang tersedia.
Langkah 15
Berikutnya, kita cukup menambahkan class grid_3 dan grid_9 pada logo dan navigasi.
Langkah 16
Klik tombol bookmark Grid Overlay untuk melihat posisi elemen pada grid.
Langkah 17
Lanjutkan proses ini pada elemen-elemen lainnya.
Hasil Akhir
Inilah hasil yang kita peroleh saat ini. Masih kasar karena kita sama sekali belum mengatur style halaman. Walaupun begitu, kita sudah cukup berhasil dengan penempatannya. Di tutorial berikutnya, kita akan belajar memperbaiki tampilan setiap elemen dengan langsung mengedit file CSS.
