Membuat Photo Gallery Dengan Dreamweaver

Kamis, 18 Desember 2008

Dapet ilmu baru dari Mr. Rais, supaya ga ilang, coba di posting di blog aja. Thank's Mr. Rais :)

Langkah-langkah membuat Photo Gallery :
1. Buat sebuah layer dengan cara klik "[insert] - [layout object] - [layer]".


Layer ini digunakan untuk meletakkan gambar dalam ukuran kecil (thumbnail). Tentukan ukuran layer sesuai dengan keinginan, misal 100px x 100px.

2. Pada layer tersebut masukkan gambar yang kita inginkan dengan cara klik [insert] - [image] - [pilih gambar] - [OK]Sesuaikan ukuran gambar dengan ukuran layer yang tadi dibuat.


3. Beri link pada gambar, dengan cara menambahkan tanda pagar (#) pada kotak link
4. Buat layer dengan ukuran yang lebih besar, untuk gambar ukuran besar, ikuti langkah no. 1, kemudian masukkan gambar yang sama dengan gambar pertama. Ukuran gambar disesuaikan dengan ukuran layer.Atur visibility layer menjadi hidden
5. Klik gambar yang pertama (yang dalam ukuran kecil) kemudian pada bagian tag, klik tag

6. Aktifkan behaviors, dengan klik [window] - [behaviors]
7. Klik "Add behaviors" (ditunjukkan dengan tanda plus) pada bagian behavior, dan pilih [show-hide layers]
Pilih layer yang berisi gambar ukuran besar, kemudian klik [show] - [OK]. Pada kotak behaviors, ganti "OnClick" dengan "OnMouseOver", yanga artinya, layer akan ditampilkan begitu mouse menyentuh gambar ukuran kecil.8. Ulangi langkah 7, namun kali ini pilih "hide" dan cation-nya pilih "OnMouseOut", yang artinya layer akan disembunyikan jika mouse tidak menyentuh gambar.



9. Simpan pekerjaan Anda, dan tampilkan hasilnya di browser.