Dreamweaver ve Rollover Resimler İle Çalışmak

Çok resmi oldu biraz
basitleştirirsek fareyle bir resmin veya linkin üzerine gittiğinizde
başka bir resmin görünmesi olayıdır.Rollover kavramını bu şekilde
açıkladıktan sonra bir örnekle olayı pekiştirelim, bir rollover
resim eklemek için;


Yeni bir doküman açın
bunu kaydedin. Arkasından bu dokümanı kaydettiğiniz
dizinle aynı dizine ya da alt dizinlerinden birine (images/ klasörü
olabilir mesela) kullanacağınız rollover image için gerekli resim
dosyalarını kaydetmelisiniz. İki adet resim dosyasına ihtiyacımız
var; Orginal image ve rollover image.



Resim dosyalarımızı
hazırladıktan sonra rollover image operasyonuna başlayabiliriz;



Insert
panelden "Common" sekmesi altında yer alan
Image düğmesinin bir alt düğmesi olan Rollover
image düğmesine yada Insert / Image Object /
Rollover image menüsü ile Rollover image iletişim
penceresini açıyoruz.





Şimdi ayarları yapmaya
başlıyoruz, sırasıyla;

• 
  
  
  İmage Name:
  Rollover image objesine bir isim vermek zorundayız. Buna spesifik
  bir isim verebilirsiniz fakat çok da önemli değil DW bizim için
  zaten bir isim vermiş. Eğer sayfa içerisinde çok fazla rollover
  resim kullandıysanız anlamlı isimler kullanmak işleri
  kolaylaştırabilir.
  
• 
  
  
  Orginal image:
  Adından da anlaşılacağı üzere orijinal resim dosyasını seçiyoruz.
  Bu resim linkimizin asıl resmini teşkil ediyor. Yani, fare imleci
  linkin üzerinde değilken görünecek resim.
  
• 
  
  
  Rollover image:
  Bu ise fare imleci linkin üzerine gittiğinde görünecek resmi ifade
  ediyor.
  

• 
  
  
  Preload
  Rollover image: Rollover resimlerin yüklenmesi uzun
  sürebilir ve bu süre zarfında ziyaretçi linkin üzerinde fare ile
  gittiğinde henüz yüklenmemiş resim gösterilmeye çalışılacak bu ise
  hoş olmayan bir görüntüye sebep olacaktır. İşte bu seçeneği
  kullanarak rollover image arka planda yükleninceye kadar, orginal
  image'in ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun
  ortadan kalkmış olur.
  
• 
  
  
  Altermate Text:
  Daha önce anlattığımız Alt Text hadisesi, resmin üzerine fare ile
  gidildiğinde görünen yazı, açıklama vs...
  
• 
  
  
  When Clicked
  Goto URL: Eğer rollover resmimize link vermek istiyorsak
  buraya ilgili dosyanın adresini yazabiliriz yada "Browse..."
  a tıklayıp dosya seçebiliriz.
  

Orgina image ve
Rollover image resim dosyalarının adresleri yine resim
ekleme konusunda anlatılan ilkeler doğrultusunda
olmalıdır.




Tüm ayarları uygun
şekilde yaptıktan sonra OK diyip rollover resmimizi
sayfamıza dâhil edebiliriz. Rollover resimler DW içinde sabit
görüneceklerdir. Dokümanınızı kaydedip Web tarayıcınız ile sayfayı
açarak test edebilirsiniz.










Rollover image
ve Orginal image dosyaları arasında bir bütünlük
olması çoğu zaman çok profesyonel etkiler ortaya çıkmasına sebep
olabilir. Örneğin yazı renklerinin veya arka fon renklerinin
değişmesi veya nesnelerin deforme olması her zaman için iyi bir
izlenim bırakan efektlerdir.




Navigation Bar
kullanımı




Sitenizde
ziyaretçilerin kolayca dolaşabilmeleri ve aradıkları bölümü
rahatça bulabilmeleri için bir navigasyon menüsü kullanmak en
mantıklı çözümdür. Bu menüyü sadece tablo ve text-linkleri
kullanarak yapabileceğiniz gibi göze daha hoş görünmesi adına
resim ve/veya rollover resimler ile de yapabilirsiniz.


Eğer navigasyon menüsü
için rollover tabanlı bir çözüm düşünüyorsanız her link için ayrı
ayrı rollover resim eklemek zor olacaktır. Bu gibi durumlarda
DW'ın kullanışlı araçlarından biri olan Insert Navigation
Bar'ı kullanabilirsiniz.

Navigation bar
kullanmak için;




Yeni bir doküman açın
ve kaydedin. Rollover resimler ile çalışırken
yaptığımız gibi resim dosyalarını önceden hazırlamış olmamız
gerekmektedir. Hazırlanması gereken resimler şu şekilde
sıralanabilir;

• 
  
  
  Up image:
  Rollover resimlerde gördüğümüz Orginal image
  ile aynı işleve sahip resim dosyasını belirtir. Yani fare imleci
  linkin üzerinde değilken görünene resim.
  
• 
  
  
  Over image:
  Fare imleci linkin üzerine geldiğinde görünecek resmi belirtir.
  
  
• 
  
  
  Down image:
  Fare ile linke tıklandığı anda görünecek resmi belirtir.
  (Genelde Over image deki ile aynı dosyayı
  kullanmak iyi bir sonuç verir fakat farklı da olabilirler)
  
  
• 
  
  
  Over While
  Down Image: Bu ise Over Image'in linke
  tıklandıktan sonraki versiyonu diyebiliriz. Yani diyelim ki
  linke bir kez tıklandı ve tıklandığı anda Down
  Image devreye girdi, işte bundan sonra Over
  image devre dışı kalacağından onun yerini bu dosya alır yani
  işlevi Over image ile aynıdır.
  

Yeri gelmişken
belirtelim Down image ve Over While Down
Image, Frame kullanılarak yapılmış
navigasyon menülerinde bir işleve sahiptir. Yani navigasyon
menüsünün sabit kaldığı ve değişmediği durumlar için geçerlidir.






Resim dosyalarını
isimlendirirken son ekler kullanmak işleri oldukça
kolaylaştıracaktır. Örneğin navigasyon barın ana sayfa linki
için;


Up image:
menu_anasayfa_a.gif
Over image: menu_anasayfa_b.gif
Down image: menu_anasayfa_c.gif
Over While Down Image: menu_anasayfa_d.gif



Gibi bir isimlendirme
ile karışıklıklardan kurtulabilirsiniz.




Dosyalarımız da hazırsa
navigation menümüzü yapalım. Insert paneldeki
Image düğmesinin bir alt düğmesi olan
Navigation Bar düğmesi veya Insert / Image Object
/ Navigation Bar menüsü ile sayfanıza navigasyon menüsü
eklemeye başlayabilirsiniz.







Şimdi ayarları yapmaya
başlıyoruz, sırasıyla;

• 
  
  
  Nav. Bar
  Elements: Navigasyon menüsü öğelerini belirtir. Buradan
  + ve - düğmelerini kullanarak yeni bir öğe ekleyebilir ya da
  çıkarabilirsiniz. Düzenlemek istediğiniz öğenin üzerine
  tıklamanız yeterli olacaktır.
  
• 
  
  
  Element Name:
  Her öğenin bir ismi olmalıdır. Buraya öğeyi en iyi tanımlayan
  ismi girmelisiniz. Boşluk ve Türkçe karakter kullanmamaya dikkat
  etmelisiniz.
  
• 
  
  
  Up, Over,
  Down, Over While Down image'lerin neler olduğunu
  yukarda belirtmiştik. Uygun resimleri seçmelisiniz.
  
• 
  
  
  Altermate
  Text: Daha önce anlattığımız Alt Text hadisesi, resmin
  üzerine fare ile gidildiğinde görünen yazı, açıklama vs...
  
• 
  
  
  When Clicked
  Goto URL: Eğer elemente link vermek istiyorsak buraya
  ilgili dosyanın adresini yazabiliriz yada "Browse..."
  a tıklayıp dosya seçebiliriz.
  
  
  
  • 
    
    
    ..in:
    Bu kısım Target kısmıdır. Kullandığınız
    Framelere göre bunu nasıl düzenleyeceğiniz Frame konusunda
    ayrıntılı bir biçimde anlatılmıştır.
    
  
  </li>
  
• 
  
  
  Options
  
  
  
  
  • 
    
    
    Preload
    images : Rollover resimlerin yüklenmesi uzun
    sürebilir, ve bu süre zarfında ziyaretçi linkin üzerinde fare
    ile gittiğinde henüz yüklenmemiş resim gösterilmeye
    çalışılacak bu ise hoş olmayan bir görüntüye sebep olacaktır.
    İşte bu seçeneği kullanarak Over image arka
    planda yükleninceye kadar, Up image'in
    ekranda sabit kalmasını sağlayabiliriz. Böylece bu sorun
    ortadan kalkmış olur.
    
  • 
    
    
    Show Down
    Image Initialy: Bir öğeye tıklandığında ziyaretçinin
    hangi sayfayı gezdiğini vurgulamak için bu seçeneği
    kullanabiliriz. Örneğin ziyaretçi linkler kısmını gezerken
    Linkler elementinin Down image
    gösterilmelidir ki, ziyaretçi o anda gezdiği sayfanın linkler
    sayfası olduğunu anlayabilsin. Eğer Frame kullanmıyorsanız bu
    seçenek ile navigasyon menüsü eklediğiniz sayfaya ait elemente
    tıklayıp bu seçeneği işaretlerseniz bu sayfada bu sayfaya ait
    elementin Down image'i varsayılan olarak
    yüklenecektir. Bu şekilde anlatınca biraz karışık oluyor fakat
    bir örnek yapıp daha iyi anlayabilirsiniz.
    
  
  </li>
  

• 
  
  
  Insert :
  Horizontaly (yatay) - Verticaly (dikey) burada
  navigasyon menüsünün yatay mı yoksa dikey mi olacağını
  belirtiyoruz.
  
• 
  
  
  Use Table:
  her zaman işaretli kalması gereken bir noktadır. Menünün daha
  düzgün görünmesini sağlayacaktır.
  

Eğer baştan
Show Down Image Initialy seçeneğini
işaretlemeyi unuttuysanız Nav barı ekledikten sonra ilgili
elementin üzerine bir kez tıklayıp Behaviors Panelden /
Set Nav Bar Image seçeneğini kullanabilirsiniz.




Tüm ayarları uygun bir
biçimde yaptıysanız OK diyip vanigasyon barınızı sayfaya dahil
edebiliriz. . Menü resimleri DW içinde sabit görüneceklerdir.
Dokümanınızı kaydedip Web tarayıcınız ile sayfayı açarak test
edebilirsiniz.





Her sayfada sadece
bir Nav. Bar kullanabilirsiniz. Önceden eklediğiniz bir Nav. Bar
üzerinde değişiklik yapmak için; tekrar Insert / Oöage
Objects / Navigation Bar menüsü ile yeni bir nav. Bar
ekliyormuş gibi yapmalısınız. DW size "Each page can
only have one Navigation Bar, an done already exist on this page
Would you like to modify the existing one?" şeklinde
sayfada zaten var olan nav. Barı düzenlemek isteyip
istemediğiniz soracaktır. Buna olumlu yanıt vererek önceden
eklediğiniz nav. Barı düzenleyebilirsiniz.