Tutorial Macromedia Dreamweaver

Membuat Menu Bertingkat (Tree Menu)

Oleh Achmad Solichin, http://achmatim.net, achmatim@gmail.com

Membuat Menu Bertingkat (Tree Menu)

Achmad Solichin (Universitas Budi Luhur) Page 2

enu

atau

navigasi

merupakan komponen penting di dalam suatu

website

.Navigasi website sama halnya dengan navigasi sebuah kapal laut, dimanasistem navigasi yang baik tentu akan menuntun nahkoda kapal besertaseluruh penumpangnya menuju ke tujuan dengan cepat. Sebaliknya, navigasi yangburuk bukan tidak mungkin akan membuat kapal terlambat menuju ke tujuan ataubahkan tersesat di tengah laut. Navigasi di dalam website pun akan sama, yaitu jikadirancang dengan baik akan memudahkan pengunjung untuk menemukan apa yang iacari. Namun jika navigasi tidak dirancang dengan baik atau bahkan tidak ada navigasisama sekali, dapat mengakibatkan pengunjung tersesat dan akhirnya akan menutupwebsite 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

‐

).Berdasarkan teknik pembuatannya juga beragam, dari yang menggunakan HTML, CSS,Javascript, gambar sampai yang menggunakan teknologi flash. Masing

‐

masing memilikikelebihan dan kekurangan.Di dalam tutorial ini akan disampaikan mengenai bagaimana membuat

menu bertingkat(

tree

‐

)

menggunakan fasilitas yang sudah tersedia di salah satu

web development

software

, yaitu

Dreamweaver

. Langkah

‐

langkah dalam tutorial dicoba menggunakanMacromedia Dreamweaver 8, namun demikian dapat juga dicoba dengan versi

‐

versiterbaru dari Dreamweaver.1.

Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru denganmengakses menu

File > New

.2.

Aktifkan window

Behaviour

melalui menu

Window > Behaviours

atau denganshortcut

Shift + F4

(Lihat gambar 1).

Gambar 1. Mengaktifkan Window Behaviors

Buatlah sebuah

link

dengan

text

atau gambar, isi halaman tujuan

link

dengan

yangmenandakan bahwa link tersebut jika diklik nantinya akan tetap di halaman yangsama.

Sorot

(

select

)

link

tersebut, kemudian dari

window behaviors

yang telah

Membuat Menu Bertingkat (Tree Menu)

Achmad Solichin (Universitas Budi Luhur) Page 3

diaktifkan di langkah sebelumnya klik tombol

Add behaviour

yaitu icon dengantanda

[+]

. Akan ditampilkan beberapa pilihan

behaviors

dan pilih

Show Pop

‐

UpMenu

. Lihat gambar 2.

Gambar 2. Menambahkan Show Pop-Up Menu

Selanjutnya akan ditampilkan

window

Show Pop

‐

Up Menu

. Buatlah menu bertingkatsesuai rancangan menu yang diinginkan. Tersedia beberapa tombol yang akanmembantu mengatur menu yang akan dibuat. Lihat contohnya di

gambar 3

. Jikaingin mengatur tampilan dari menu, dapat membuka tab ‘

Appearance’

sepertiterlihat 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 diatursesuai 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

embuat menu bertingkat (

tree

‐

) dengan menggunakan

MacromediaDreamweaver

ternyata sangat mudah. Teknik yang digunakan olehDreamweaver 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.