Layout Situs dengan Tabel Pertemuan 05 Desain dan Pemrograman Web 1
Outline Konsep Dasar Layout Macam-macam Layout Layout dengan Tabel Membuat Layout Tabel dengan Dreamweaver
Apa itu Layout? Layout situs adalah tata letak komponen halaman situs web. Layout situs yang baik akan menjadikan situs baik juga. Layout situs yang baik harus mendukung tujuan pembuatan situs itu sendiri.
Layout Situs yang Baik Pengunjung merasa nyaman dengan tampilan (layout) situs, tetapi tetap dapat fokus pada isi (content). Desain situs tidak mengganggu kejelasan bagian isi. Pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content).
Web Page Anatomy
Web Page Anatomy Containing Block. Bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>. Logo. Identitas perusahaan, organisasi, pemilik situs. Navigation. Navigasi atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
Web Page Anatomy Content. Content is king. Isi adalah segalanya, karena disinilah sebagian besar informasi disajikan. Footer. Umumnya terdapat di bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link. Whitespace. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung bisa “bernafas” di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.
Bentuk-bentuk Layout Left-column navigation. Banyak digunakan, standar, klasik, sedikit kaku. Right-column navigation. Umumnya digunakan oleh situs yang mengutamakan content (isi). Three-column navigation. Digunakan untuk situs yang memiliki jumlah navigasi banyak, content relatif sedikit, dan menampilkan beberapa iklan (banner).
Trend Layout Situs Expansive Footer Navigation. Navigasi terletak di footer, footer memiliki ukuran yang lebih lebar. Three column with Contents First. Navigasi ada 2, content ditampilkan disisi kanan atau kiri (bukan di tengah)
Situs Inspirasi Layout CSS Zen Garden (http://www.csszengarden.com/) CSS Beauty (http://www.cssbeauty.com/) Stylegala Gallery (http://www.stylegala.com/archive/) CSS Vault (http://cssvault.com/) Design Interact Site of the Week (http://www.designinteract.com/sow/) Open Source Web Design (http://oswd.org)
Layout dengan Tabel Kelebihan: Kekurangan: Mudah, terutama untuk pemula. Kekurangan: Cukup rumit Boros bandwidth (ukuran besar). Beberapa browser tidak terlalu baik dalam menampilkannya.
Praktikum: Membuat Layout dengan Tabel Buka Dreamweaver dan Buat halaman baru Pilih Layout mode Buat tabel untuk container Buat tabel untuk header Buat tabel untuk navigasi Buat tabel untuk content Buat tabel untuk footer Buat cell untuk masing-masing komponen Atur pewarnaan untuk masing-masing komponen.
Buat halaman baru dan ubah mode tampilan menjadi ‘Layout’
Pilih mode ‘Layout Table’
Buat table sebagai dasar tampilan (container)
Buat table untuk header
Buat table untuk bagian navigasi
Buat table untuk bagian content (isi)
Buat table untuk bagian footer
Buat cell untuk bagian header
Buat cell untuk bagian menu
Buat cell untuk bagian content (isi)
Buat cell untuk bagian footer
Atur warna background bagian header
Atur warna background bagian menu navigasi
Atur warna background bagian footer
Atur Judul situs di bagian header
Tambahkan menu item di bagian navigasi
Preview di Web Browser (F12)
Video Praktikum Layout dengan Table (bagian 1)
Referensi Jason Beaird, The Principles of Beautiful Web Design, SitePoint, 2007