Your SlideShare is downloading. ×
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Seri dreamweaver -_membuat_menu_bertingkat_tree_menu
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Seri dreamweaver -_membuat_menu_bertingkat_tree_menu

193

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
193
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tutorial Macromedia Dreamweaver Membuat Menu Bertingkat (Tree Menu) Oleh Achmad Solichin, http://achmatim.net, achmatim@gmail.com
  • 2. 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, 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 M
  • 3. Membuat Menu Bertingkat (Tree Menu) Achmad Solichin (Universitas Budi Luhur) Page 3 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 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. M
  • 4. Membuat Menu Bertingkat (Tree Menu) Achmad Solichin (Universitas Budi Luhur) Page 4 Gambar 3. Menyusun menu bertingkat Gambar 4. Mengatur Tampilan Menu
  • 5. Membuat Menu Bertingkat (Tree Menu) Achmad Solichin (Universitas Budi Luhur) Page 5 Gambar 5. Mengatur Posisi Menu Gambar 6. Hasil Tampilan di Browser
  • 6. Membuat Menu Bertingkat (Tree Menu) Achmad Solichin (Universitas Budi Luhur) Page 6 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 achmatim@gmail.com, YM achmatim, Facebook achmatim dan Twitter achmatim.

×