Mendesain Halaman Web Sederhana dari PSD Hingga HTML --Bag 2
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.
Berikut adalah tahapan yang akan kita peroleh di tutorial ini.
Untuk mengikuti tutorial ini, pastikan Anda memiliki resource berikut:
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.
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.
Buat file baru (Ctrl + N) dengan ukuran sesuai Clipboard. Paste gambar (Ctrl + V).
Sembunyikan layer Background.
Tekan Ctrl + shift + Alt + S untuk menyimpan ke dalam format Web. Simpan dengan format file PNG-24 dan pastikan Transparency aktif.
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.
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
Di dalam header, navigasi kita simpan dalam tag khusus
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.
Markup HTML yang kita butuhkan. Lihat hasilnya di sini.
Portfolio
Blog
Contact
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.
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.
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.
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.
Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.
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
Simpan
Setelah diperiksa di HTML 5 Outliner, sekarang keduanya akan menyatu.
Sekarang kita mulai menggunakan grid 960. Di bawah tampilan desain saat ini.
Untuk menggunakan framework 960gs, kita harus menyimpan semuanya dalam
Edit markup HTML. Simpan seluruh elemen di dalam
Dan seperti inilah hasilnya.
Kita perlu tool untuk membantu kita melihat grid situs. Buka Grid Overlay Bookmark. Geser tombol Grid Overlay ke baris Bookmark browser.
Logo situs ini berada dalam 3 kolom.
Navigasi bisa kita simpan dalam sisa 9 kolom yang tersedia.
Berikutnya, kita cukup menambahkan
Klik tombol bookmark Grid Overlay untuk melihat posisi elemen pada grid.
Lanjutkan proses ini pada elemen-elemen lainnya.
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.
[hr]
Download File Demo
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
Markup HTML yang kita butuhkan. Lihat hasilnya di sini.
Halaman Web Sederhana dengan Grid 960
Photoshoot
Suspendisse suscipit euismod mollis. Donec sed erat in leo venenatis ultrices ut vel augue. Praesent at nibh vitae arcu blandit lobortis.
what we offer
perfection and creativity
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.
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.
we can do
a very quick photo shoot
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.
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.
Morbi non enim sem, eget ullamcorper ipsum. Duis ut erat nec metus eleifend rutrum. Integer quis egestas nibh.
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.what we offer
perfection and creativity
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.
[hr]
Download Link
Download File Demo
