Bagaimana Membuat Swaps dengan Beberapa Gambar di Dreamweaver - dummies

Sebelum Anda mulai membuat desain halaman yang lebih rumit dengan perilaku Swap Image Dreamweaver, lihatlah halaman selesai Dengan perilaku Swap Image, Anda dapat mengganti semua atau semua gambar pada halaman.

Bila Anda menggunakan perilaku Swap Image, penting untuk membuat semua gambar yang Anda akan menukar ukuran yang sama (tinggi dan lebar) Jika gambar tidak berukuran sama, semua gambar kecuali yang pertama akan diregangkan atau dikompres agar sesuai dengan ruang yang diambil oleh gambar pertama yang dimasukkan ke dalam halaman.

Jika Anda menggunakan perilaku Swap Image dengan serangkaian gambar yang tidak memiliki tinggi dan lebar yang sama, Anda memiliki beberapa pilihan:

Pangkas yang lebih besar sehingga semua gambar memiliki ukuran yang sama.

Buat gambar horizontal dan vertikal mengambil ruang yang sama dalam desain Anda dengan menggabungkan dua gambar vertikal untuk setiap horisontal. Cukup buat file Dalam program seperti Photoshop, masukkan dua gambar vertikal ke file yang sama berdampingan, lalu ukurankan gambar itu sehingga file berukuran sama dengan satu gambar horizontal.

Buat satu file gambar seukuran gambar terbesar Anda, atur latar belakang ke warna netral, seperti hitam atau putih, lalu masukkan semua gambar lainnya ke latar belakang sehingga Anda dapat menyimpan semuanya dengan ukuran file yang sama.

Ikuti langkah-langkah berikut untuk menggunakan perilaku Swap Image:

1Buat ​​desain halaman dengan semua gambar yang Anda inginkan ditampilkan pada awalnya.

Masing-masing dari tiga foto dalam desain halaman untuk Tower Bridge di London memiliki dua salinan: satu thumbnail dan satu versi yang lebih besar. Saat halaman pertama dimuat di browser web, ketiga gambar thumbnail diposisikan di bagian bawah halaman, dengan versi pertama yang sesuai ditampilkan di area utama tepat di atas thumbnail.

2Name foto Anda di Property inspector.

Untuk menargetkan gambar Anda dengan JavaScript, yaitu bagaimana perilaku bekerja, pertama berikan setiap gambar sebuah ID unik. ID gambar tidak sama dengan nama file gambar atau tag teks, meskipun Anda dapat menggunakan nama yang sama atau serupa. Image ID seharusnya tidak memiliki spasi atau karakter khusus.

3Choose Window → Behaviors.

Panel Perilaku terbuka. Anda dapat menarik panel Behaviors di tempat lain pada halaman, dan Anda dapat memperluasnya dengan menyeret bagian bawah atau sampingnya. Anda mungkin juga ingin menutup panel terbuka lainnya untuk memberi ruang lebih banyak dengan mengklik panel abu-abu gelap di bagian atas panel manapun.

4Pilih gambar.

Pilih gambar di halaman yang akan berfungsi sebagai pemicu aksi.

5Pilih perilaku Swap Image.

Dengan gambar pemicu yang dipilih di ruang kerja, klik tanda tambah di panel Perilaku untuk membuka daftar tindakan turun, dan pilih tindakan yang ingin Anda terapkan.

6Periksa gambar untuk swap di kotak dialog Swap Image.

Dalam daftar Gambar, pilih ID untuk gambar yang akan diganti. Klik tombol Browse untuk memilih gambar yang menggantikan gambar utama. Jika gambar belum tersimpan di folder situs lokal, Dreamweaver akan menawarkan untuk menyalinnya ke sana untuk Anda.

7Di bagian bawah kotak dialog Swap Image, pilih opsi Gambar Preload untuk menginstruksikan browser untuk memuat semua gambar ke dalam cache saat halaman dimuat.

Jika Anda tidak memilih opsi ini, penundaan mungkin terjadi saat swap gambar digunakan.

8Jika Anda mau, batalkan pilihan Restore Images OnMouseOut.

Opsi Restore Images OnMouseOut berarti bahwa ketika sebuah acara selesai (seperti ketika mouse dipindahkan dari gambar kecil pemicu), gambar asli akan diganti. Secara default, Dreamweaver memprioritaskan opsi ini untuk perilaku Swap Image. Anda mungkin ingin membatalkan pilihan opsi ini jika Anda menemukan bahwa mengganti gambar asli setiap kali Anda memutar kursor di atas gambar kecil lainnya akan mengganggu.

9Setelah Anda menentukan semua pengaturan untuk perilaku tersebut, klik OK.

Perilaku baru muncul di panel Behaviors.

10Tentukan sebuah acara untuk perilakunya.

Setelah tindakan diterapkan, Anda dapat kembali dan menentukan acara mana yang akan memicu tindakan tersebut. Secara default, Dreamweaver menerapkan event OnMouseOver saat Anda menggunakan action Swap Image, namun Anda dapat mengubah event tersebut menjadi yang tersedia, seperti OnClick, yang mengharuskan pengguna mengklik gambar untuk memicu aksi Swap Image.

11Aplikasi perilaku tambahan.

Untuk menerapkan perilaku Swap Image ke gambar lain di halaman, ulangi Langkah 5-10, klik untuk memilih gambar yang ingin Anda sajikan sebagai pemicu dan kemudian menentukan gambar yang sesuai yang harus ditukar.

12Test pekerjaan Anda di browser.

Anda tidak dapat melihat efek dari perilaku seperti ini sampai Anda mengklik tombol Live view di bagian kiri atas ruang kerja di Dreamweaver atau melihat pratinjau halaman Anda di browser web.