Bagaimana Membuat Imej Rollover Mudah di Dreamweaver - dummies

Rollovers adalah ciri yang sangat popular yang Dreamweaver termasuk kotak dialog khas hanya untuk rollovers: kotak dialog Insert Rollover Image. Imej peralihan, seperti namanya, direka untuk bertindak apabila seseorang menggulung kursor ke atas imej. Kesannya boleh menjadi seperti dramatik sebagai gambar seekor anjing digantikan oleh gambar seekor singa, atau halus seperti warna perubahan kata.

Anda boleh membuat kesan imej peralihan yang lebih kompleks dengan pilihan Imej Swap dari panel Behaviors. Pilihan Imej Swap membolehkan anda menukar beberapa imej pada masa yang sama.

Untuk membuat kesan peralihan mudah dengan dua imej menggunakan kotak dialog Rencana Permukaan Imej Dreamweaver, ikuti langkah berikut:

1. Letakkan kursor anda pada halaman di mana anda mahu rollover muncul.

   Rollover kesan memerlukan sekurang-kurangnya dua imej: satu untuk keadaan awal dan satu untuk keadaan rollover. Anda boleh menggunakan dua imej yang berbeza atau dua yang sama, tetapi kedua-duanya harus mempunyai dimensi yang sama. Jika tidak, anda melihat kesan skala pelik kerana kedua-dua imej mesti dipaparkan di ruangan yang sama pada halaman.

2. Pilih Insert → Imej → Imej Rollover.

   Sebagai alternatif, anda boleh menggunakan senarai juntai yang tersedia dari ikon Imej dalam panel Bersama Biasa dan pilih Imej Rollover.

   Kotak dialog Imej Rollover masukkan.

   

3. Dalam kotak Nama Imej, namakan imej anda.

   Sebelum anda boleh memohon tingkah laku kepada elemen, seperti imej, elemen mesti mempunyai nama supaya skrip kelakuan boleh merujuknya. Anda boleh menamakan elemen apa sahaja yang anda suka selagi anda tidak menggunakan ruang atau aksara khas.

4. Dalam kotak Imej Asal, tentukan imej pertama yang anda mahu dilihat. Gunakan butang Semak untuk mencari dan memilih imej.

   Jika imej belum ada dalam folder tapak setempat anda, Dreamweaver akan menyalinnya ke dalam tapak anda apabila anda membuat peralihan.

5. Dalam kotak Imej Rollover, masukkan imej yang anda ingin kelihatan apabila pengunjung memindahkan kursor ke atas imej pertama.

   Sekali lagi, anda boleh menggunakan butang Layari untuk mencari dan memilih imej.

6. Pilih kotak semak Imej Rollover Rollover untuk memuatkan semua imej rollover ke dalam cache penyemak imbas apabila halaman pertama dimuatkan.

   Jika anda tidak memilih untuk melakukan langkah ini, pelawat anda mungkin mengalami kelewatan kerana imej kedua tidak akan dimuat turun sehingga kursor dilancarkan ke atas imej asal.

7. Dalam medan Teks Gantian, masukkan keterangan imej.

   Teks alternatif adalah pilihan tetapi disyorkan kerana penggunaan kata kunci dapat meningkatkan pengoptimalan enjin carian.Begitu juga, Teks alternatif adalah bahagian utama akses web kerana teks ini dibaca dengan kuat oleh pelayar khas yang disebut pembaca skrin, yang digunakan oleh orang yang buta dan yang lain dengan penglihatan atau mobiliti yang terhad. Teks alternatif dipaparkan hanya dalam penyemak imbas jika imej tidak kelihatan.

8. Dalam Apabila Diklik, Pergi ke kotak URL, masukkan mana-mana alamat web atau semak imbas untuk mencari halaman lain di laman web yang anda hendak pautkan.

   Jika anda tidak menentukan URL, Dreamweaver secara automatik memasukkan tanda # sebagai pemegang tempat dalam kod.

   Tanda # ialah teknik yang biasa untuk membuat pautan yang tidak dihubungkan di mana-mana sahaja. Oleh kerana imej rollover yang tidak dihubungkan ke halaman lain mempunyai banyak kegunaan yang hebat, teknik ini berguna. Ingatlah bahawa jika anda mahu peralihan anda dihubungkan, anda perlu mengganti tanda # dengan pautan ke laman lain.

9. Klik OK.

   Imej ditetapkan secara automatik sebagai peralihan.

10. Untuk melihat perubahan dalam tindakan, simpan fail tersebut dan kemudian klik ikon dunia di bahagian atas ruang kerja untuk melihat halaman anda dalam pelayar web.

Anda boleh melihat bagaimana rollover anda berfungsi dalam pandangan Reka Bentuk Dreamweaver atau dengan menggunakan pilihan paparan Langsung. Apabila anda mengklik butang Live di sebelah kiri atas ruang kerja, anda pada dasarnya menjadikan Dreamweaver sebagai pelayar web yang memaparkan halaman seperti penyemak imbas Chrome.

Apabila anda melihat halaman di komputer anda yang termasuk imej peralihan, beberapa pelayar web akan memaparkan peringatan yang menyatakan bahawa anda mesti membenarkan kawalan ActiveX untuk melihat halaman tersebut. Ini adalah amaran keselamatan yang muncul hanya apabila halaman dibuka pada komputer yang sama di mana halaman disimpan.

Jika anda menyiarkan halaman tersebut ke pelayan web dan kemudian melihatnya melalui sambungan Internet, anda dan pelawat tapak anda tidak akan melihat ralat ini.

Kredit: Artwork oleh istockphoto. com