Minggu, 12 Februari 2012

MEMBUAT LINK DAN NAVIGASI

Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.
1. Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.
Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.
Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.
  1. Pertama kali, klik menu PC.
    dreamweaver_21.gif
  2. Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
    dreamweaver_22.gif
  3. Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
    dreamweaver_23.gif
  4. Selanjutnya pilih Show Pop up Menu.
    dreamweaver_24.gif
  5. Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
    dreamweaver_25.gif
  6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
    dreamweaver_26.gif
  7. Kemudian masukkan alamat URL pada kolom Link.
    dreamweaver_27.gif
  8. Selanjutnya pada kolom Target, pilih _parent.
    dreamweaver_28.gif
  9. Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
    dreamweaver_29.gif
  10. Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
    dreamweaver_30.gif
  11. Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
    dreamweaver_31.gif
  12. Klik Tab Position untuk menentukan posisi pop up menu.
    dreamweaver_32.gif
  13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
    dreamweaver_33.gif
  14. Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

0 komentar:

Posting Komentar