| Dreamweaver ile Resim Değiştirmece (Swap Image) |
Sayfa 1 / 3 Zaman zaman güzel örneklerini gördüğümüz bu resim değiştirmece olayını Dreamweaver ile oldukça kolay yapabilmekteyiz. Rollover resimler konusunda bir resmin üzerine gidildiğinde yerine başka bir resim çıkmasını nasıl yapacağımızı görmüştük. Şimdi ise bir resim ya da linkin üzerine gidildiğinde (veya tıklandığında) başka bir resmin / resimlerin değiştirilmesini göreceğiz. Olayın temelini "Swap Image" isimli Behavior oluşturmakta. Yani rollover resimlerde aslında birer "Swap Image" olayıdır (event) diyebiliriz. Bu makalede yapacağımız örneğin son halini görmek için buraya, Photoshop dosyasının da dahil olduğu tüm uygulamayı indirmek için buraya tıklayabilirsiniz. Evet, örneği çalıştırdığınızda ne yapmaya çalıştığımızı daha iyi göreceksiniz. Neyse lafı fazla uzatmadan uygulamaya geçelim. Önce materyalleri hazırlayalımİşlemlere başlamadan önce grafik dosyalarınızı hazırlamanız gerekmektedir. Ben Photoshop ile basit bir tasarım yapıp "Slice tool" ile resmi dilimlere ayırdım
 Tasarımı Photoshop ile yapıp Slice tool ile parçalara ayırıyoruz Ardından File / Save for web menüsünden kaydedeceğim resim dosyası türünü ve kalitesini belirleyip "Save" düğmesine bastım.
 File / Save for web menüsünden çalışmamızı kaydediyoruz Son olarak dosya kayıt iletişim penceresinde "Kayıt türü" olarak "HTML and images (*.html)" seçeneğini seçip tüm dilimleri (All slices) kaydettim.
 Kayıt türü olarak HTML and images (*.html) seçeneğini seçiyoruz Böylece Photoshop çalışmamızı bir web sayfasına aktarmış olduk. Seçtiğimiz dizinde bir ".html" dokümanı ve "images" klasörü içerisinde de dilimlenmiş olan çalışmamızın grafik dosyaları kaydedilecektir. Sonrasında bu HTML dokümanını DW ile açıp ilgili değişiklikleri yapacağız. Sizde kendi ihtiyacınıza yönelik grafik dosyalarını hazırlayarak konuyu takip edebilirsiniz.
 Çalışmamızı Dreamweaver içerisine aktardık Dokümanı DW ile açtığınızda göreceğiniz üzere Photoshop dilimleri bir tablo içerisinde yerleştirip düzgün görünmesini sağlamaktadır. Bizde bu tabloyu tasarımımızda istediğimiz yere kopyalayabilirsiniz. Kopyala / Yapıştır işlemleri sırasında tablonun ve hücrelerin özelliklerini değiştirip bozmamaya özen göstermelisiniz, aksi takdirde kaymalar olabilir. Beyaz boş dilimleri silerek sayfanın yüklenme boyutunu azaltabilirsiniz, fakat sildiğiniz bu düz beyaz dilimlerin bulunduğu tablo hücrelerinin boyutlarını sildiğiniz dilim boyutu olarak yükseklik ve genişlik cinsinden girmelisiniz. Böylece deformasyonu önleyebilirsiniz.
Eğer tabloyu kopyaladığınız yeni sayfada dilimler
arasında boşluklar olursa yeni bir stil yaratıp border, padding, magrin
değerlerini 0 (sıfır) olarak girin, font size ve line heidght değerlerini de 1
piksel olarak atayın ve bu stili tabloya uygulayın. Böylece genişlemeleri
önlemiş olacaksınız.
Genişlemelere engel olmak için gereken ilgili CSS stili için kaynak kod şu şekilde olmalı:
Neyse işin hazırlık kısmı bu şekilde sizde kendi uygulamalarınızı yapıp bu aşamaya geldiyseniz şimdi asıl konumuza dönelim.
|
