Cara Membuat Link dan Navigasi di Blog

Unknown | 2:46 PM |
Artikel blog tutorial ewabloggerock berikut ini menjelaskan tentang 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.
2. Membuat Rollover Image

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.
  1. Buatlah duplikasi gambar tombol yang telah ada.
    dreamweaver_41.gif
  2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
    dreamweaver_42.gif
  3. Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
    dreamweaver_43.gif
  4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
    dreamweaver_44.gif
  5. Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
    dreamweaver_45.gif
  6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
    dreamweaver_46.gif
  7. Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
    dreamweaver_47.gif
  8. Untuk melihat hasilnya, tekan tombol F12.

Description: Cara Membuat Link dan Navigasi di Blog
Rating: 4.5

Related Post



4 komentar:

Tutor Di said...

Wah ini dia, I like it, simple dan tanpa perlu belajar pemrograman dari awal.

16 September, 2011
Ronan Elektron said...

Good Post sob.. :)
Kunjungi juga http://ronanelektron.blogspot.com? :)

22 April, 2014
Yose Phin said...

Update Betting : Sbobet, Live Casino, Maxbet, s4bung 4yam, Togel, dll
minimal dp/wd 50rb.. ayo daftar

16 May, 2018
makanan dan minuman said...

AJOQQ menyediakan 8 permainan yang terdiri dari :
Poker,Domino99 ,BandarQ,BandarPoker,Capsa,AduQ,Sakong,Bandar66 ( NEW GAME )
Ayo segera bergabung bersama kami di AJOQQ :)
Bonus : Rollingan 0.3% dan Referral 20% :)

04 August, 2018

Post a Comment