Rumah Media Sosial Membuat Gambar Rollover di Dreamweaver CS3 - dummies

Membuat Gambar Rollover di Dreamweaver CS3 - dummies

Video: TUTORIAL WEB DESAIN PART 3 MEMBUAT ROLLOVER IMAGE UNTUK MAIN MENU 2025

Video: TUTORIAL WEB DESAIN PART 3 MEMBUAT ROLLOVER IMAGE UNTUK MAIN MENU 2025
Anonim

Dalam Dreamweaver, gambar Rollover - sesuai namanya - dirancang untuk bereaksi saat seseorang menggulung kursor di atas gambar. Efeknya bisa sama dramatisnya dengan gambar seekor anjing yang digantikan oleh gambar singa, atau sama halusnya dengan warna sebuah kata yang berubah saat satu gambar menggantikan yang lain. Either way, Dreamweaver menyertakan kotak dialog khusus untuk rollover yang membuat efek rollover sederhana menjadi salah satu perilaku termudah untuk diterapkan.

Untuk membuat gambar rollover dengan menggunakan kotak dialog Insert Image Rollover Dreamweaver, ikuti langkah-langkah ini:

1. Klik untuk menempatkan kursor pada halaman di mana Anda ingin rollover muncul.

Efek rollover memerlukan setidaknya dua gambar: satu untuk keadaan awal dan satu untuk keadaan rollover. Anda dapat menggunakan dua gambar yang berbeda atau dua gambar yang serupa, namun keduanya memiliki dimensi yang sama. Jika tidak, Anda mendapatkan beberapa efek penskalaan aneh karena kedua gambar harus ditampilkan di ruang yang sama persis pada halaman.

2. Pilih Insert -> Image Objects -> Rollover Image.

Kotak dialog Insert Rollover Image akan muncul.

3. Di kotak Image Name, beri nama gambar Anda.

Sebelum Anda dapat menerapkan perilaku pada elemen, seperti gambar, elemen harus memiliki nama sehingga skrip perilaku dapat merujuknya. Anda bisa memberi nama elemen apapun yang Anda suka asalkan Anda tidak menggunakan spasi atau karakter khusus.

4. Di kotak Original Image, tentukan gambar pertama yang ingin Anda lihat. Gunakan tombol Browse untuk mencari dan memilih gambar.

Jika gambarnya belum ada di folder akar situs Anda, Dreamweaver akan menyalinnya ke situs Anda saat Anda membuat rollover.

5. Di kotak Rollover Image, masukkan gambar yang ingin Anda lihat saat pengunjung memindahkan kursor di atas gambar pertama.

Sekali lagi, Anda dapat menggunakan tombol Browse untuk mencari dan memilih gambar.

6. Pilih kotak centang Preload Rollover Image untuk memuat semua gambar rollover ke cache browser saat halaman pertama kali dimuat.

Jika Anda tidak memilih melakukan langkah ini, pengunjung Anda mungkin mengalami penundaan karena gambar kedua tidak akan didownload sampai mouse digulung di atas gambar aslinya.

7. Di kotak Klik Klik, Ke URL, masukkan alamat Web atau telusuri untuk menemukan halaman lain di situs Anda yang ingin Anda tautkan.

Jika Anda tidak menentukan URL, Dreamweaver secara otomatis memasukkan tanda # sebagai placeholder.

8. Klik OK

Gambar secara otomatis diatur sebagai rollover.

9. Klik ikon dunia di bagian atas ruang kerja untuk melihat pratinjau pekerjaan Anda di browser dan uji bagaimana cara kerja rollover.

Membuat Gambar Rollover di Dreamweaver CS3 - dummies

Pilihan Editor

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Kantor 2011 untuk Mac: Membuat Tabel dengan Kotak Dialog atau Teks - dummies

Sementara ada cara baru untuk membuat tabel di Office 2011 untuk Mac, Anda masih bisa menggunakan teknik stand-by. Menu yang familiar masih bekerja di Office 2011 untuk Mac, dan inilah buktinya. Dialog meja semuanya masih ada di sana: Di Word, pilih Table → Insert → Table; Sebagai alternatif, pada tab Tabel Ribbon, di Tabel Pilihan ...

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Kantor 2011 untuk Mac: Melepaskan Command Toolbar - dummies

Apakah Anda menggunakan Office 2011 untuk Mac atau Produk Microsoft Office lainnya, toolbar Anda bisa sangat berantakan. Setiap kali Anda merasa perlu untuk men-tweak antarmuka aplikasi Microsoft Office, Anda perlu memanggil dialog Customize Toolbars and Menus. Ini adalah dialog super kuat di Word, Excel, dan PowerPoint yang memungkinkan Anda ...

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Kantor 2011 untuk Mac: Berbagi Toolbar dan Menu - dummies

Setelah Anda menyesuaikan Office 2011 Anda bilah alat dan antarmuka, Anda dapat berbagi penyesuaian dengan orang lain. Namun, pastikan bahwa Anda menasihati orang-orang yang telah Anda lakukan sebelum membagikan dokumen Anda dengannya; Jika tidak, mereka mungkin akan terkejut saat mereka membuka dokumen Anda dan melihat susunan toolbar atau menu yang berbeda dari pada apa ...

Pilihan Editor

Penting Office 2007 Commands - dummies

Penting Office 2007 Commands - dummies

Anda dapat membuat program Office 2007 lebih mudah jika Anda menggunakan pintasan sederhana ini. Perintah-perintah ini, seperti mengurungkan kesalahan dan memperbesar dan memperkecil akan membantu Anda menghemat waktu. Memasuki simbol: Untuk memasukkan simbol atau karakter asing yang tidak ada pada keyboard Anda, masuk ke tab Insert dan klik Symbol ...

Menyesuaikan Perintah Menu di Office 2003 - dummies

Menyesuaikan Perintah Menu di Office 2003 - dummies

Office 2003 menyediakan dua teknik untuk menyesuaikan menu dan perintah menu. Anda bisa memulai dari kotak dialog Rearrange Commands atau menggunakan metode drag-and-drop. Teruslah membaca. Menangani perintah menu di kotak dialog Rearrange Commands Teknik tombol Options Toolbar untuk menangani tombol toolbar bagus dan keren, tapi bagaimana jika Anda ingin ...

Pilihan Editor

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Bagaimana memecahkan kesalahan logis dalam analisis argumen Pertanyaan GRE - dummies

Ketika Anda menjawab Argument Analysis Pertanyaan di GRE, argumen mungkin tampak logis dan adil di permukaan tapi sebenarnya keliru (keliru, cacat). Alasan melingkar, penalaran sebab-akibat yang keliru, dan generalisasi sweeping adalah tiga tanda argumen lemah. Dengan melihat beberapa kesalahan logis yang lebih umum, Anda dapat mengidentifikasi kelemahan dalam argumen dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Matematika GRE - Pertanyaan Praktik - dummies

Meskipun pertanyaan matematika biasanya hanya memiliki satu jawaban yang benar, ini tidak selalu terjadi. Akibatnya, beberapa pertanyaan pilihan ganda pada tes GRE Math akan memberi Anda daftar jawaban dan meminta Anda untuk memilih lebih dari satu. Pertanyaan praktik berikut meminta Anda untuk menemukan nilai kemungkinan yang berbeda secara berurutan dan ...

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pilihan ganda, Beberapa Jawaban tentang Tes Verbal GRE - Pertanyaan Praktik - dummies

Pada tes GRE Verbal, beberapa pertanyaan pilihan ganda akan memiliki lebih dari satu jawaban yang benar. Untuk pertanyaan ini, Anda akan diminta untuk melihat-lihat pilihan jawaban dan memilih semua yang menurut Anda benar. Dalam pertanyaan praktik berikut, Anda diminta untuk membaca bagian yang disertakan, dan kemudian ...