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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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