...

Membuat Menu Bertingkat (Tree Menu)

by user

on
Category: Documents
0

views

Report

Comments

Transcript

Membuat Menu Bertingkat (Tree Menu)
Tutorial Macromedia Dreamweaver
Membuat Menu Bertingkat
(Tree Menu)
Oleh Achmad Solichin, http://achmatim.net, [email protected]
Membuat Menu Bertingkat (Tree Menu)
M
enu atau navigasi merupakan komponen penting di dalam suatu website.
Navigasi website sama halnya dengan navigasi sebuah kapal laut, dimana
sistem navigasi yang baik tentu akan menuntun nahkoda kapal beserta
seluruh penumpangnya menuju ke tujuan dengan cepat. Sebaliknya, navigasi yang
buruk bukan tidak mungkin akan membuat kapal terlambat menuju ke tujuan atau
bahkan tersesat di tengah laut. Navigasi di dalam website pun akan sama, yaitu jika
dirancang dengan baik akan memudahkan pengunjung untuk menemukan apa yang ia
cari. Namun jika navigasi tidak dirancang dengan baik atau bahkan tidak ada navigasi
sama sekali, dapat mengakibatkan pengunjung tersesat dan akhirnya akan menutup
website tersebut.
Dilihat dari bentuk dan susunannya, menu atau navigasi memiliki variasi yang beragam.
Ada beberapa navigasi yang disusun mendatar (horizontal), ke bawah (vertical),
berbentuk drop‐down menu atau dapat juga berupa menu bertingkat (tree‐menu).
Berdasarkan teknik pembuatannya juga beragam, dari yang menggunakan HTML, CSS,
Javascript, gambar sampai yang menggunakan teknologi flash. Masing‐masing memiliki
kelebihan dan kekurangan.
Di dalam tutorial ini akan disampaikan mengenai bagaimana membuat menu bertingkat
(tree‐menu) menggunakan fasilitas yang sudah tersedia di salah satu web development
software, yaitu Dreamweaver. Langkah‐langkah dalam tutorial dicoba menggunakan
Macromedia Dreamweaver 8, namun demikian dapat juga dicoba dengan versi‐versi
terbaru dari Dreamweaver.
1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan
mengakses menu File > New.
2. Aktifkan window Behaviour melalui menu Window > Behaviours atau dengan
shortcut Shift + F4 (Lihat gambar 1).
Gambar 1. Mengaktifkan Window Behaviors
3. Buatlah sebuah link dengan text atau gambar, isi halaman tujuan link dengan # yang
menandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yang
sama. Sorot (select) link tersebut, kemudian dari window behaviors yang telah
Achmad Solichin (Universitas Budi Luhur)
Page 2
Membuat Menu Bertingkat (Tree Menu)
diaktifkan di langkah sebelumnya klik tombol Add behaviour yaitu icon dengan
tanda [+]. Akan ditampilkan beberapa pilihan behaviors dan pilih Show Pop‐Up
Menu. Lihat gambar 2.
Gambar 2. Menambahkan Show Pop-Up Menu
4. Selanjutnya akan ditampilkan window Show Pop‐Up Menu. Buatlah menu bertingkat
sesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akan
membantu mengatur menu yang akan dibuat. Lihat contohnya di gambar 3. Jika
ingin mengatur tampilan dari menu, dapat membuka tab ‘Appearance’ seperti
terlihat di gambar 4 dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab
‘Position’ seperti terlihat pada gambar 5. Klik tombol OK jika menu sudah diatur
sesuai keinginan.
5. Simpan halaman dan tampilkan hasilnya di browser dengan mengakses menu File >
Preview in browser… atau shortcut F12. Contoh tampilan menu terlihat di gambar 6.
Kesimpulan
M
embuat menu bertingkat (tree‐menu) dengan menggunakan Macromedia
Dreamweaver ternyata sangat mudah. Teknik yang digunakan oleh
Dreamweaver dalam membuat menu tersebut adalah dengan javascript,
sehingga menu akan ditampilkan dengan baik pada browser yang mendukung javascript.
Semoga tutorial singkat ini bermanfaat untuk kita semua. Amin.
Achmad Solichin (Universitas Budi Luhur)
Page 3
Membuat Menu Bertingkat (Tree Menu)
Gambar 3. Menyusun menu bertingkat
Gambar 4. Mengatur Tampilan Menu
Achmad Solichin (Universitas Budi Luhur)
Page 4
Membuat Menu Bertingkat (Tree Menu)
Gambar 5. Mengatur Posisi Menu
Gambar 6. Hasil Tampilan di Browser
Achmad Solichin (Universitas Budi Luhur)
Page 5
Membuat Menu Bertingkat (Tree Menu)
Tentang Penulis
Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas
Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005). Saat
ini sedang menempuh pendidikan S2 di Magister Teknologi Informasi
Universitas Indonesia (2008). Kegiatan sehari‐hari adalah sebagai
Dosen di Universitas Budi Luhur (http://www.bl.ac.id), sekaligus
sebagai Kepala Laboratorium Komputer Universitas Budi Luhur
(http://labkom.bl.ac.id). Kegiatan lain aktif sebagai programmer, web
developer, system analyst dan memberikan pelatihan di berbagai bidang komputer
serta membuat tutorial‐tutorial praktis di bidang komputer. Penulis juga terlibat dalam
pengembangan E‐Learning di Universitas Budi Luhur. Penulis memiliki situs utama di
http://achmatim.net yang berisi berbagai tutorial praktis. Penulis dapat dihubungi
melalui email di [email protected], YM achmatim, Facebook achmatim dan Twitter
achmatim.
Achmad Solichin (Universitas Budi Luhur)
Page 6
Fly UP