Daha karmaşık bir sayfa oluşturmaya başlamadan önce Dreamweaver'da Birden Fazla Görüntü ile Takas Oluşturma - mankenler

Dreamweaver'ın Görüntüyü Değiştirme davranışı ile daha karmaşık bir sayfa tasarımı oluşturmaya başlamadan önce bak

Görüntüyü Değiştirme davranışını kullanırken, takas ettiğiniz tüm görüntüleri aynı boyutta (yükseklik ve genişlik) yapmak önemlidir. Eğer resimler aynı boyutta değilse, birincisi hariç tüm resimler, sayfaya yerleştirilen ilk resim tarafından alınan alana uyacak şekilde gerilir veya sıkıştırılır.

Görüntüyü Değiştirme davranışını, aynı yükseklik ve genişliğe sahip olmayan bir dizi resimle kullanıyorsanız, birkaç seçeneğiniz vardır:

Daha büyük olanları kırpın, böylece tüm görüntüler aynı boyuttur.

Yatay ve dikey görüntüler, her yatay için iki dikey görüntü birleştirerek tasarımınızdaki aynı alanı kaplar hale getirin. Sadece bir dosya oluşturun. Photoshop gibi bir programda, aynı dosyaya iki dikey resim yerleştirin ve dosyayı bir yatay resimle aynı boyuta gelecek şekilde boyutlandırın.

En büyük görüntünün boyutunda bir resim dosyası oluşturun, arka planı siyah veya beyaz gibi nötr bir renge ayarlayın ve diğer tüm görüntüleri arka plan üzerine yerleştirin, böylece hepsini kaydedebilirsiniz aynı dosya boyutuyla.

Görüntü Değiştirme davranışını kullanmak için aşağıdaki adımları izleyin:

1Başlangıçta görüntülenmesini istediğiniz tüm görüntüleri içeren bir sayfa tasarımını oluşturun.

Londra'daki Tower Bridge için sayfa tasarımında yer alan üç fotoğrafın iki kopyası vardır: bir tane minyatür resim ve daha büyük bir versiyon. Sayfa ilk olarak bir web tarayıcısına yüklendiğinde, üç küçük resim de sayfanın altına yerleştirilir ve ilgili büyük sürümlerin birincisi ana alanın küçük resimlerinin hemen üstünde görüntülenir.

2 Özellik denetimindeki görüntülerinize ad verin.

Resimlerinizi JavaScript ile hedeflemek için, davranışlar nasıl işliyorsa, önce her görüntüye benzersiz bir kimliği verin. Aynı veya benzer isimleri kullanabilseniz de, resim kimliği resim dosyası veya metin etiketi ile aynı değildir. Resim kimlikleri boşluklara veya herhangi bir özel karaktere sahip olmamalıdır.

3Pencere'yi seçin → Davranışlar.

Davranışlar paneli açılır. Davranışlar panelini sayfadaki başka bir yere sürükleyebilir ve alt veya yanını sürükleyerek genişletebilirsiniz. Herhangi bir panelin üstündeki koyu gri çubuğu tıklayarak daha fazla yer açmak için diğer açık panelleri de kapatmak isteyebilirsiniz.

4Bir resim seçin.

Sayfadaki eylemin tetikleyicisi olarak kullanılacak görüntüyü seçin.

5Görsel Değiştirme davranışını seçin.

Çalışma alanındaki tetikleyici görüntü seçiliyken, eylemlerin açılır listesini açmak için Davranışlar panelindeki artı işaretini tıklayın ve uygulamak istediğiniz eylemi seçin.

6Görüntü Değiştir iletişim kutusundan değiştirilecek görüntüleri belirtin.

Görüntüler listesinde, değiştirilecek resmin kimliğini seçin. Ana görüntünün yerini alan görüntüyü seçmek için Göz At düğmesini tıklayın. Resim zaten yerel site klasörüne kaydedilmemişse, Dreamweaver bunu sizin yerinize kopyalamayı teklif edecektir.

7Tablo Değiştir iletişim kutusunun altındaki tarayıcıya, sayfa yüklendiğinde önbellekte tüm görüntüleri yükleyecek şekilde talimat vermek için Resimleri Ön On seçeneğini seçin.

Bu seçeneği seçerseniz, görüntü takas kullanıldığında gecikme yaşanabilir.

8İstiyorsanız, Görüntüleri Geri YükleOtomatik Kaldır seçeneğini kaldırın.

Restore Images OnMouseOut seçeneği, bir etkinlik tamamlandığında (fare, tetikleyici küçük resmin dışına taşındığında olduğu gibi) orijinal resim değiştirildi demektir. Varsayılan olarak, Dreamweaver, Görüntüyü Değiştirme davranışı için bu seçeneği önceden seçer. İmleci bir başka küçük resim üzerinde döndürdüğünüzde orijinal görüntüyü değiştirmenin rahatsız edici olduğunu fark ederseniz bu seçeneğin seçimini kaldırmak isteyebilirsiniz.

9Değişim için tüm ayarları belirttikten sonra Tamam'ı tıklayın.

Yeni davranış Davranışlar panelinde görünür.

10Ödeme için bir olay belirtin.

Eylem uygulandıktan sonra, geri dönüp hangi olayın eylemi tetikleyeceğini belirtebilirsiniz. Varsayılan olarak Dreamweaver, Görüntüyü Değiştir eylemini kullandığınızda OnMouseOver olayını uygular, ancak olayın, Görüntüyü Değiştir eylemini tetiklemek için görüntüyü tıklatmasını gerektiren OnClick gibi mevcut herhangi bir seçeneğe değiştirebilirsiniz.

11Başka davranışları uygulayın.

Swap Image davranışını bir sayfadaki diğer görüntülere uygulamak için, tetikleyici olarak sunmak istediğiniz görüntüyü seçmek için tıklayıp ardından takas edilmesi gereken ilgili resmi belirterek Adım 5-10'u tekrarlayın.

12Çalıştılarınızı bir tarayıcıda test edin.

Dreamweaver'da çalışma alanının sol üst kısmındaki Canlı Görüntüleme düğmesini tıklatana veya sayfanızı bir web tarayıcısında önizleyene kadar bu tür davranışların etkilerini göremezsiniz.