Outline
• Karakteristik navigasi situs yang baik.
• Jenis-jenis navigasi situs
• Membuat navigasi dengan fasilitas yang sudah tersedia di Dreamweaver
– Navigasi Flash
– Navigasi dari Snippet
– Pop Up Menu
• Membuat navigasi dengan tabel
Pembagian Navigasi
• Inline Navigation. Adalah navigasi yang menjadi bagian dari suatu content (isi) utama, umumnya berupa link dan bentuknya sederhana.
• Site Navigation. Adalah navigasi yang letaknya terpisah dari content, umumnya terletak di atas, kiri atau kanan. Umumnya navigasi jenis ini dibuat semenarik dan sejelas mungkin.
• Search-based Navigation. Adalah navigasi yang didasarkan pada form pencarian, jadi disini pengunjung dapat menginputkan suatu kata kunci dan akan ditampilkan halaman sesuai. Fasilitas ini sangat penting jika situs memiliki content atau halaman yang cukup banyak.
Pembagian Navigasi Dilihat dari Bentuknya
• List of contents.
• Breadcrumb trail
• Horizontal top bar
• Tabs
• 2-level top (bar or tabs)
• Top and side bars
• Buttons bar with revealed drop-down
• Multiple-level tree nav
• Paging
Navigasi yang Baik
• Jumlah item dalam navigasi tidak terlalu banyak.
• Jangan menggantungkan sepenuhnya pada image grafis untuk navigasi. Jika menggunakan image, sertakan juga atribut alt pada tag ![]()
.
• Halaman utama (homepage) harus mudah ditemukan.
• Integrasikan fasilitas navigasi dengan content.
• Hindari frame jika mungkin (gunakan tabel atau CSS).
Navigasi dengan Flash
• Kelebihan:
– Dengan Dreamweaver cukup mudah.
– Animasi dapat dibuat untuk menarik pengunjung
• Kekurangan
– Tidak semua browser harus mendukung flash (terinstall flash player)
– Relatif lebih lambat (boros bandwidth)
• Jenis menu dengan Flash:
– Menu dengan Flash Text
– Menu dengan Flash Button
Menu dengan Flash Text
- Jenis font dan ukurannya
- Warna tulisan dan warna background
- Teks menu
- Halaman / link menu
- Nama file flash
Hasilnya seperti di bawah ini
Menu dengan Flash Button
- Preview jenis tombol
- Jenis tombol
- Teks menu
- Jenis dan ukuran tulisan
- Halaman / link menu
Hasilnya seperti di bawah ini
Jump Menu (Dropdown menu)
- Item menu
- Teks menu
- Link menu
- Pilihan (opsi) menu
- Tombol untuk menambah, mengurang dan mengatur posisi menu
Hasilnya seperti dibawah ini
Navigasi dengan Tabel
• Menu / navigasi dengan memanfaatkan tag
untuk mengatur item navigasi dan tampilannya.
• Macromedia Dreamweaver menyediakan beberapa bentuk navigasi tabel siap-pakai (snippets).
• Kelebihan: mudah
• Kekurangan: kurang menarik, tambahkan CSS agar menarik.
Navigasi dengan Tabel
Hasilnya seperti di bawah ini
Pop Up Menu
• Bentuk navigasi bertingkat (tree)
• Cocok dipilih jika jumlah item navigasi (menu) cukup besar.
• Javascript based
• Dreamweaver menyediakan fasilitas pembuatan Popup Menu.
Hasilnya seperti di bawah ini
No comments:
Post a Comment