1 / 33

Desain dan Pemrograman Web 1

Desain dan Pemrograman Web 1. PG110 – 3 SKS. PERTEMUAN 07. MENU dan navigasi situs. 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

axl
Download Presentation

Desain dan Pemrograman Web 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desain dan Pemrograman Web 1 PG110 – 3 SKS

  2. PERTEMUAN 07 MENU dan navigasi situs

  3. 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

  4. 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.

  5. 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

  6. 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 <img>. Halaman utama (homepage) harus mudah ditemukan. Integrasikan fasilitas navigasi dengan content. Hindari frame jika mungkin (gunakan tabel atau CSS).

  7. 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

  8. Menu dengan Flash Text (1)

  9. Menu dengan Flash Text (2) • Jenis font dan ukurannya • Warna tulisan dan warna background • Teks menu • Halaman / link menu • Nama file flash

  10. Menu dengan Flash Text (3)

  11. Menu dengan Flash Button (1)

  12. Menu dengan Flash Button (2) • Preview jenis tombol • Jenis tombol • Teks menu • Jenis dan ukuran tulisan • Halaman / link menu

  13. Menu dengan Flash Button (3)

  14. Jump Menu (Dropdown menu) Menu berbentuk Dropdown (combo box). Umumnya digunakan untuk navigasi cepat. Memanfaatkan fungsi Javascript untuk mengatur menu / navigasi. Di Dreamweaver dapat diakses melalui menu Insert > Form > Jump Menu.

  15. Jump Menu (Dropdown menu)

  16. Jump Menu (Dropdown menu) • Item menu • Teks menu • Link menu • Pilihan (opsi) menu • Tombol untuk menambah, mengurang dan mengatur posisi menu

  17. Jump Menu (Dropdown menu)

  18. Navigasi dengan Tabel Menu / navigasi dengan memanfaatkan tag <table> 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.

  19. Navigasi dengan Tabel

  20. Navigasi dengan Tabel

  21. Navigasi dengan Tabel

  22. Navigasi dengan Tabel

  23. Pop Up Menu Bentuk navigasi bertingkat (tree) Cocok dipilih jika jumlah item navigasi (menu) cukup besar. Javascript based Dreamweaver menyediakan fasilitas pembuatan Popup Menu.

  24. Pop Up Menu

  25. Pop Up Menu

  26. Pop Up Menu

  27. Pop Up Menu

  28. Pop Up Menu

  29. Pop Up Menu

  30. Pop Up Menu

  31. Pop Up Menu

  32. Video Praktikum Video Praktikum Menu dan Navigasi

  33. Terima Kasih Fakultas Teknologi Informasi Universitas Budi Luhur http://fti.bl.ac.id

More Related