Dokumen ini membahas tentang menu dan navigasi situs web. Terdapat beberapa jenis navigasi seperti inline, site navigation, dan search-based navigation. Dokumen ini juga menjelaskan cara membuat navigasi menggunakan fasilitas Dreamweaver seperti navigasi Flash, snippet, pop up menu, dan tabel.

1. Desain dan
Pemrograman Web 1
PG110 – 3 SKS
© 2009 Fakultas Teknologi Informasi Universitas Budi Luhur
Jl. Ciledug Raya Petukangan Utara Jakarta Selatan 12260
Website: http://fti.bl.ac.id Email: sekretariat_fti@bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 1

2. PERTEMUAN 07
MENU DAN NAVIGASI SITUS
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 2

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
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 3

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.
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 4

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
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 5

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).
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 6

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
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 7

8. Menu dengan Flash Text (1)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 8

9. Menu dengan Flash Text (2)
1. Jenis font dan
ukurannya
2. Warna tulisan dan
warna
background
3. Teks menu
4. Halaman / link
menu
5. Nama file flash
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 9

10. Menu dengan Flash Text (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 10

11. Menu dengan Flash Button (1)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 11

12. Menu dengan Flash Button (2)
1. Preview jenis
tombol
2. Jenis tombol
3. Teks menu
4. Jenis dan ukuran
tulisan
5. Halaman / link
menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 12

13. Menu dengan Flash Button (3)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 13

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.
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 14

15. Jump Menu (Dropdown menu)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 15

16. Jump Menu (Dropdown menu)
1. Item menu
2. Teks menu
3. Link menu
4. Pilihan (opsi)
menu
5. Tombol untuk
menambah, meng
urang dan
mengatur posisi
menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 16

17. Jump Menu (Dropdown menu)
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 17

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.
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 18

19. Navigasi dengan Tabel
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 19

20. Navigasi dengan Tabel
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 20

21. Navigasi dengan Tabel
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 21

22. Navigasi dengan Tabel
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 22

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.
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 23

24. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 24

25. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 25

26. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 26

27. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 27

28. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 28

29. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 29

30. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 30

31. Pop Up Menu
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 31

32. Video Praktikum
 Video Praktikum Menu dan Navigasi
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 32

33. Terima Kasih
Fakultas Teknologi Informasi
Universitas Budi Luhur
http://fti.bl.ac.id
FAKULTAS TEKNOLOGI INFORMASI DESAIN DAN PEMROGRAMAN WEB 1 – PG110 – 3 SKS 33