Menu dan navigasi situs

Posted on June 15, 2010. Filed under: Desain Web 1 ( Semester 2) |

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
  1. Jenis font dan ukurannya
  2. Warna tulisan dan warna background
  3. Teks menu
  4. Halaman / link menu
  5. Nama file flash
Hasilnya seperti di bawah ini
Menu dengan Flash Button
  1. Preview jenis tombol
  2. Jenis tombol
  3. Teks menu
  4. Jenis dan ukuran tulisan
  5. Halaman / link menu
Hasilnya seperti di bawah ini
Jump Menu (Dropdown menu)
  1. Item menu
  2. Teks menu
  3. Link menu
  4. Pilihan (opsi) menu
  5. 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

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

  • Blog Stats

    • 53,773 hits
  • Top Rated

Liked it here?
Why not try sites on the blogroll...

%d bloggers like this: