1. Pertama, anda buat terlebih dahulu gambar yg akan dijadikan menu awal (keadaan menu sebelum disorot oleh mouse), pada contoh diatas adalah menu yg berwarna biru. dengan ukuran W : 100px dan H : 35px.
2. Buka program Adobe Photoshop dan buat dokumen baru dengan ukuran seperti berikut :
3. Setelah itu, dengan menggunakan Gradient tool anda warnai dokumen tersebut dan ketikan nama dari menu yg akan anda buat. Seperti contoh berikut ini :
4. Buatlah gambar untuk menu lainnya dengan ukuran yg sama seperti diatas. Dalam tutorial ini saya menggunakan 3 menu, dengan nama file home.jpg profil.jpg news.jpg
5. Oke, setelah selesai membuat menu awal (menu yg berwarna biru), saatnya membuat menu lagi dengan jumlah yg sama, ukuran yg sama, teks yg sama jugaaa, tetapi kali ini kita bedakan warnanya yak!
Dalam tutorial ini adalah menu yg berwarna orange, menu ini akan terlihat ketika mouse diarahkan ke menu awal (menu yg berwarna biru).
6. Jika anda menyimpan file .PSD dari menu awal yg sudah anda buat td, tentu anda tidak perlu lagi membuat menu over(menu yg berwarna orange) ini dari pertama, cukup anda ganti warna backgroundnya saja. Kemudian save dengan nama yg berbeda. home_up.jpg profil_up.jpg news_up.jpg
7. Setelah selesai membuat menu-menu awal dan over, saatnya kita menggunakan Adobe Dreamweaver. Pada tutorial ini saya menggunakan DW CS3.
8. Buka program Adobe Dreamweaver pilih extensi file HTML. Setelah itu klik menu insert > table kemudian atur seperti berikut :
Rows : jumlah baris dalam table
Columns : jumlah kolom dalam table. (saya menggunakan 3 kolom karena menggunakan 3 menu) kolom = jumlah menu
Table Width : Panjang table (saya menggunakan ukuran 300 px karena saya menggunakan 3 menu, dan width dari tiap menu adalah 100 px. jadi 3 x 100px = 300px)
9. Nah setelah tablenya jadiii, klik didalam kolom pertama.
10. Setelah itu klik menu insert > image objects > rollover image. Kemudian keluar menu seperti berikut :
Original image : adalah keadaan sebelum kursor diarahkan ke menu
Rollover image : adalah keadaan ketika kursor diarahkan ke menu
11. Klik tombol browse pada Original image kemudian pilih gambar yg sudah anda buat sebagai menu awal.
Dalam tutorial ini adalah menu yg berwarna biru. dengan nama home.jpg profil.jpg news.jpg
12. Setelah itu klik tombol browse pada Rollover image kemudian pilih gambar menu yang berwarna orange. home_up.jpg profil_up.jpg news_up.jpg
contoh :
Original image = home.jpg (menu yg berwarna biru)
Rollover image = home_up.jpg (menu yg berwarna orange)
Lakukan cara yg sama untuk kolom - kolom berikutnya. Setelah selesai, save terlebih dahulu pekerjaan anda kamudian tekan tombol F12 atau anda doubleclick saja pada filenya.
Semoga bermanfaat. :)
0 Komentar