Dreamweaver'da Basit Rollover Görüntüsü Oluşturma - Manzara

Rollovers, Dreamweaver'ın rollover'lara özel bir iletişim kutusu içerdiği popüler bir özelliktir: Rollover Resmi Ekle iletişim kutusu. Rollover görüntüleri, adından da anlaşılacağı üzere, bir kullanıcı imajı bir imajın üzerine getirdiğinde tepki verecek şekilde tasarlanmıştır. Etkisi, bir aslan resmi ile değiştirilen bir köpeğin resmi ya da değişen bir kelimenin rengi kadar incelikli olabilir.

Davranışlar panelinden Görüntüyü Değiştir seçeneğini kullanarak daha karmaşık rollover görüntü efekti oluşturabilirsiniz. Görüntüyü Değiştir seçeneği, birden fazla görüntüyü aynı anda değiştirmenize olanak tanır.

Dreamweaver'ın Görüntüyü Yeniden Yerleştir iletişim kutusunu kullanarak iki görüntüyle basit bir geçiş efekti oluşturmak için aşağıdaki adımları izleyin:

İmlecinizi, rollover'ınızın görünmesini istediğiniz sayfaya getirin.

Rollover efektleri en az iki görüntü gerektirir: birincil durum için diğeri aktarma durumu. İki farklı resim veya iki benzer resim kullanabilirsiniz, ancak her ikisi de aynı boyutlara sahip olmalıdır. Aksi takdirde, garip ölçeklendirme efektleri görürsünüz, çünkü her iki resim de sayfada tam olarak aynı boşlukta görüntülenmelidir.
Ekle → Görüntü → Rollover Resmi seçin.

Alternatif olarak, Ortak Ekle panelindeki Görüntüler simgesinde bulunan açılır listeyi kullanarak Rollover Resmi seçebilirsiniz.

Rollover Resmi Ekle iletişim kutusu görüntülenir.
Resim Adı kutusuna resminizi adlandırın.

Bir öğeye, örneğin bir resim uygulayabilmeniz için, öğenin bir ad olması gerekir, böylece davranış komut dosyası ona referans verebilir. Boşluklar veya özel karakterler kullanmadığınız sürece, elemanları istediğiniz gibi adlandırabilirsiniz.
Orijinal Görüntü kutusuna görünmesini istediğiniz ilk resmi belirtin. Görüntüyü bulmak ve seçmek için Gözat düğmesini kullanın.

Resimler yerel sitenizin klasöründe değilse, rollover oluşturduğunuzda Dreamweaver bunları sitenize kopyalar.
Rollover Image kutusuna, ziyaretçinin imleci ilk resim üzerinde hareket ettirdiğinde görünür olmasını istediğiniz resmi girin.

Yine, görüntüyü bulmak ve seçmek için Göz At düğmesini kullanabilirsiniz.
Sayfa ilk yüklendiğinde tüm rollover görüntülerini tarayıcının önbelleğine yüklemek için Rollover Görüntü Önceden Onayla onay kutusunu seçin.

Bu adımı seçmezseniz, ziyaretçileriniz bir imleç orijinal görüntü üzerinde kaydırılıncaya kadar ikinci görüntü indirileneceği için bir gecikme yaşayabilir.
Alternate Text (Alternatif Metin) alanına, resimlerin bir açıklaması girin.

Alternatif metin isteğe bağlıdır, ancak anahtar kelimeler kullanılması arama motoru optimizasyonunu artırabileceğinden önerilir.Benzer şekilde, Alternatif metin, web erişilebilirliğinin önemli bir parçasıdır, çünkü bu metin, görme özürlü kişiler tarafından ve diğer sınırlı görme veya hareket kabiliyetleri olan kişiler tarafından kullanılan ekran okuyucuları adı verilen özel tarayıcılar tarafından yüksek sesle okunmaktadır. Görüntüler görünmüyorsa, alternatif metin yalnızca tarayıcıda görüntülenir.
Tıklandığında, URL'ye Git kutusuna herhangi bir web adresi girin veya sitenize bağlanmak istediğiniz başka bir sayfayı bulmak için göz atın.

Bir URL belirtmezseniz, Dreamweaver otomatik olarak # işaretini koda bir yer tutucu olarak ekler.

# işareti, herhangi bir yere bağlantı oluşturmayan bağlantılar oluşturmak için kullanılan yaygın bir tekniktir. Başka bir sayfaya bağlanmayan üste binme görüntüleri çok kullanışlıdır, bu teknik kullanışlıdır. Rollover'ınızın bağlanmasını istiyorsanız, # işaretini başka bir sayfanın bağlantısıyla değiştirmeniz gerektiğini unutmayın.
Tamam'ı tıklayın.

Resimler otomatik olarak bir rollover olarak ayarlanır.
Rollover'ı hareket halindeyken görmek için dosyayı kaydedin ve sayfanızı bir web tarayıcısında önizlemek için çalışma alanının üst kısmındaki dünya simgesini tıklayın.

Rollover'ınızın Dreamweaver'ın Tasarım görünümünde nasıl çalıştığını veya Canlı görünüm seçeneğini kullanarak görebilirsiniz. Çalışma alanının sol üst kısmındaki Canlı düğmeyi tıkladığınızda, Dreamweaver'ı aslında Chrome tarayıcı gibi sayfaları görüntüleyen bir web tarayıcısı haline getirirsiniz.

Bilgisayarınızda, rollover görüntüsü içeren bir sayfayı önizleme yapıyorsanız, bazı web tarayıcıları, sayfayı görüntülemek için ActiveX denetimlerine izin vermeniz gerektiğini belirten bir uyarı görüntüler. Bu, yalnızca sayfanın kaydedildiği bilgisayarda açıldığında görünen bir güvenlik uyarısıdır.

Sayfayı bir web sunucusuna yayımlar ve ardından bir İnternet bağlantısı üzerinden görüntülerseniz, siz ve sitenizin ziyaretçileri bu hatayı göremez.