Selasa, 09 Oktober 2012

Membuat Drop down menu dengan Dreamweaver

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. Berikut ini langkah-langkahnya
1. Buka Macromedia Dreamweaver dan buatlah sebuah halaman HTML baru dengan mengakses menu File > New.
2. Aktifkan window Behaviors melalui menu Window > Behaviors atau dengan shortcut Shift + F4

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 diaktifkan di langkah sebelumnya klik tombol Add behaviour yaitu icon dengan tanda [+]. Akan ditampilkan beberapa pilihan behaviour dan pilih Show Pop-Up Menu.
show popup 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’ dan jika ingin mengatur posisi dari menu bisa mengaktifkan tab ‘Position’ silahkan di coba-coba sendiri :) . Klik tombol OK jika menu sudah diatur sesuai keinginan.
pengaturan popup menu5. Jika sudah Simpan halaman dan tampilkan hasilnya di browser dengan mengakses menu File > Preview in browser… atau shortcut F12.
tampilan menu dropdown6. Selamat mencoba , semoga berhasil..

0 komentar:

Posting Komentar