Dreamweaver ve Resimler

Öyle ki tasarımın
önemli bir bölümünü ve kilit noktasını oluşturan resimler, harici
editörler ile (Photoshop, GIMP, Paint Shop Pro, Paint)
oluşturulup düzenlenir ve daha sonra DW içine alınır. Bizim
ilgileneceğimiz kısım ikinci basamak olan DW'ın içinde resimlerin
sayfamız içerisinde nasıl kullanılacağı ve düzenlenmesi konusu.


Image Placeholder




İşinize ne kadar yarar
bilemiyorum fakat bir deyinmekte fayda var.


Image
Placeholder nedir?


Resim yüklenmeden önce
sayfada görüntülenen ve resmin boyutlarını ve yerini belirten bir
yer belirteci diyebiliriz. Ziyaretçiye resim hakkında bir ön fikir
vermek için kullanılabilecek bu özellik ile resimlerin yeri daha
sayfa yüklenmeden belli olacaktır. Böylece ziyaretçi sayfanın
tamamının yüklenmesini beklemek zorunda kalmayacaktır.






Bir image placeholder
eklediğinizde resim için gerekli HTML kodu sayfaya eklenecektir.
(<img src=""">" şeklinde) Sonradan placeholder'ın üzerine
tıklayıp Property Inspector üzerinden resim
ayarlarını yaparak SRC den ilgili resim
dosyasını seçmelisiniz.






Sayfaya Resim eklemek





Öncelikle yeni bir
doküman açın ve bunu kaydedin. Bu nokta çok
önemli Yeni bir sayfaya başlamadan önce mutlaka onu
kaydetmelisiniz. Aksi takdirde dosya yollarında sorunlar oluşacak
ve sonuçta dosyaları sunucuya gönderdiğinizde resimler
görünmeyecek linkler çalışmayacaktır.


Dokümanınızı
kaydettikten sonra "Insert" panelinden ya da
Insert / Image menüsü ile bir resim eklemek için
ilk adımı atabiliriz. Insert paneldeki "Image"
düğmesi genişleyebilen bir düğmedir. Aynı düğmenin alt menüleri
ile Rollover image (üzerine fare ile gidilince
değişen resimler) ve ya navigasyon menüleri de eklemek mümkün.




Biz şu anda "Image"
seçeneğine tıklıyoruz. Açılan diyalog penceresinden aradığımız
resmi bulup seçiyoruz ve OK diyoruz.



Resmi seçerken
URL kısmına dikkat etmemiz gerekiyor. Öte yandan dokümana
eklediğimiz resimler ya bu dokümanla aynı dizinde ya da alt
dizinlerden birinde olmalıdır. Örneğin "images"
adlı bir klasör yaratıyoruz ve tüm resim dosyalarımızı buraya
atıyoruz. Ve bir resim eklemek istediğimizde URL kısmında "images/resim_dosyasi_adi.gif"
şeklinde bir ibare yer alıyorsa sorun yok demektir. Fakat "file://C./Program
Files/..." gibi bir adres görüyorsanız başınız dertte
demektir. Ya dokümanı henüz kaydetmediniz ya da çok alakasız bir
dizindeki resmi dokümana eklemek istiyorsunuz demektir.




Bu bakımdan tanımlı
siteler ile çalışmanın bazı avantajları ortaya çıkıyor. Eğer bir
site tanımlaması yaptı iseniz ve bu tanımlama sırasında resimler
için bir klasör belirtip Links Relavite to
seçeneğini girdiyseniz DW sizin için bütün URL sorunlarını
halledecektir. Farklı dizindeki dosyaları dokümanınıza eklemeye
kalktığınızda dahi bunu site içerisindeki resimler klasörüne
taşıyacaktır.



Eğer site için
varsayılan resimler klasörü belirtmezseniz sizi uyararak bu resimi
taşıyıp taşımak istemediğiniz soracaktır. Eğer bu soruya
Hayır derseniz resim adresi "file://C./Program Files/..."
gibi atanacaktır. Buda dosyaları sunucuya gönderdiğinizde
resimlerin görünmemesine neden olacaktır. Sonrası malûm,
yeni başlayanların en çok karşılaştığı sorun; "anaa resimler nerde
yaa ?" Eğer böyle bi sorunla karşılamak istemiyorsanız resim
eklerken bu URL kısmına dikkat edeceksiniz. Aynı
şekilde Properties panelinden SRC
kısmından da olaya müdahale edebilmeniz mümkün tabi.





Resmimizi seçme ve site
içerisine taşıma işlemleri bittikten sonra DW bize resim ile
ilgili ilk bilgileri girebileceğimiz bir iletişim penceresi
açacaktır.





Bu iletişim penceresi
opsiyonel bir seçenektir. Eski DW sürümlerinde bu pencere çıkmadan
doğrudan resmi sayfamıza dâhil ediyordu. BW 8 de bunu varsayılan
olarak açık hale getirmişler. Aslında faydalı bir araç, resmi
eklerken alternate metin (alt text) girmenize olanak sağlıyor. Alt
metni olmayan resimler ise W3C standartlarına göre geçersiz
resimler olarak değerlendiriliyor. Bu bakımdan faydalı bir özellik
ama isterseniz Edit / Preferences menüsünden
ulaşabildiğiniz ayarlar kısmından Accessibility
sekmesi altından hangi nesneler için bu iletişim penceresinin
görüntülenmesi gerektiğini seçebilirsiniz.





Resim dosyalarının
türleri GIF, JPEG, ya da PNG
den başka bir şey olmamalı. Bunlar tüm tarayıcılar ve web
teknolojileri tarafından desteklenen standartlardır ve
az yer kaplarlar. Ayrıca dosya isimleri Türkçe
karakter ve boşluk içermemelidir. (ust_kose_1.gif gibi
isimler kullanmalısınız.)






Resimleri
biçimlendirmek




Eklediğiniz resimler
üzerinde kayıtsız şartsız egemenlik için her zamanki gibi yine
Properties panelini kullanabiliyoruz. Sayfanıza
bir resim eklediğinizde veya sayfadaki bir resmin üzerine
tıkladığınızda Properites paneli aşağıdaki
görünümü alacaktır. Paneldeki bileşenler şu şekilde sıralanabilir;

• 
  
  
  Image ID:
  Resmimizin sayfa içerisindeki benzersiz ve sadece bu resme özel
  bir ismi diyebiliriz. Türkçe karakter ve boşluk içermeyen bir
  isim verebilirsiniz.
  
• 
  
  
  W:
  Piksel cinsinden genişlik.
  
• 
  
  
  H:
  Piksel cinsinden yükseklik.
  
• 
  
  
  Link:
  Resme link vermek için buraya linki girin yada kutucuğun
  yanındaki Klasör resmine tıklayarak Browse / Göz at
  penceresini kullanın.
  
• 
  
  
  Src:
  Resmin adresi, eğer "file://C:/Program Files ...."
  Gibi bir ifadeyle başlıyorsa sunucuya gönderdiğinizde resimler
  görünmeyecektir.
  
• 
  
  
  Edit & Resim
  düzenleme seçenekleri: Bu seçeneklerden bazılarına (Contrast
  ve Sharpen gibi) tıkladığınızda anlamadığım bir sebepten dolayı
  DW açılması gereken iletişim penceresini doküman pencerelerinin
  arkasına atmakta ve pencereye erişiminizi engellemektedir.
  Herhangi bir yere tıklamanıza da izin vermediğinden sizi zor bir
  duruma sokmaktadır. Ben sorunu çözmek için bir kere görev
  çubuğundaki (taskbar) simge durumundaki DW a tıklıyorum umarım
  sizlere de yardımcı olur.
  
  
  
  • 
    
    
    Edit:
    Eğer sisteminizde kuruluysa Fireworks'ü
    açarak resim üzerinde düzenlemeler yapmanızı sağlar.
    
  • 
    
    
    Optimize:
    Sisteminizde Fireworks kurulu ise resmi sıkıştırıp boyutunu
    azaltır ve optimize eder
    
  • 
    
    
    Crop:
    Eğer resim gereğinden fazla büyükse ve istediğiniz kısım
    resmin sadece bir bölümünde ise bu araç ile resmi
    kırpabilirsiniz.
    
  • 
    
    
    Resample:
    Resmi yeniden boyutlandırmaya yarar.
    
  • 
    
    
    Brightness
    and Contrast: Resme kontrast ve parlaklık ayarı
    yapmanızı sağlar.
    
  • 
    
    
    Sharpen:
    Resimleri netleştirmek ve hatları keskinleştirmek için
    kullanabileceğiniz bir araç.
    
  
  </li>
  
• 
  
  
  Alt:
  Alt text olarak isimlendirilen fare ile resmin üzerine
  gidildiğinde fare imlecinin kenarında çıkan açıklama kutucuğunda
  görünen metin.
  
• 
  
  
  Image Map
  seçenekleri: Resmin sadece bir bölgesine link vermek
  için kullandığımız Image Map olayına hükmetmemizi sağlayan seçim
  araçları.
  
• 
  
  
  H Space:
  Resmin etrafındaki diğer materyallere (metin veya diğer
  resimlere) olan yatay uzaklığı (piksel olarak).
  
  
• 
  
  
  V Space:
  Resmin etrafındaki diğer materyallere (metin veya diğer
  resimlere) olan dikey uzaklığı (piksel olarak).
  
  
• 
  
  
  Target:
  Eğer resme link verdiyseniz link ile ilgili Target ayarını
  buradan seçebiliyoruz.
  
• 
  
  
  Low src:
  Resim yüklenmeden önce o resmin yerinde görünecek geçiş resmi
  diyebiliriz. Örneğin bir resim galerisinde bir resim görünmesi
  gereken yere o resmin 2 bit versiyonunu (Siyah-beyaz) low src
  olarak verebilirsiniz. Böylece ziyaretçi resmin yüklendiğinde
  nasıl bir şey olacağı konusunda fikir sahibi olabilir.
  
• 
  
  
  Border:
  Çerçeve, eğer resme link verdiyseniz bu otomatik olarak 0 olarak
  atanacaktır. Ama isterseniz bunu piksel cinsinden girip farklı
  görünüşler elde edebilirsiniz.
  
• 
  
  
  Align:
  Resmin hizalanmasıyla ilgili ayarları bu menüden yapıyoruz.
  
  
• 
  
  
  Sağa
  yasla-Ortala-Sola yasla: yine hizalama ama biraz daha
  farklı bir opsiyon.
  
• 
  
  
  Class:
  Resmi etkilemesini istediğiniz CSS stili.
  

Image Map ile çalışmak





Image Map
nedir? ilk önce bu soruyu cevaplayalım; diyelim resmin sadece bir
bölgesine link vermeniz gerekiyor. (Örneğin bir dünya haritasında
sadece Türkiye'ye link vereceksiniz) İşte böyle işlemler için
Image Map'leri kullanıyoruz.


Zaten kelime anlamı
itibariyle "harita" olan Image Map'ler bir nevi resmi
haritalayarak (işte yeni bir terim doğdu haritalamak :) belli
bölgeleri seçmenize olanak sağlıyor.

Image map eklemek için:




Resmi seçtikten sonra
resimle ilgili ayarları yaptığımız Property Inspector
üzerinde sol alt köşede bulunan Map
kısmını kullanacağız. Aynı şekilde Insert
paneldeki Image düğmesinin alt düğmelerindeki
Image map seçeneklerinden birini de
kullanabilirsiniz





Buradaki üç farklı
mapping yönteminden birini seçtikten sonra resminizin üzerinde
map'lerinizi seçmeye başlayabilirsiniz. Siyah ok simgesi ile
ifade edilen düğme ise; Pointer Hotspot tool
olarak isimlendirilen ve sonradan, mapler üzerinde köşelerinden
tutup çekiştirerek değişiklik yapmaya yarayan bir araçtır.






Map işlemi yapılan
bölgeler açık mavi bir kısım olarak işaretlenecektir. Bunları ayrı
ayrı seçerek tek tek ayarlarını yapabilirsiniz. Buradaki ayarlar
bir resim dosyası için yapılan ayarların aynısıdır.






Örneğin bir resmi
seçtikten sonra resimde önceden tanımlanmış olan bir image map
bölgesine bir kez tıkladığınızda map bölgesinin kenarlarında ufak
tutamaçlar çıkacaktır. Bunlarla map bölgesini tekrar
boyutlandırabilirsiniz. Veya sadece bu bölgeye ait link vermek
için Property Inspector üzerinde "Link"
kısmına ilgili dosyanın adresini yazabilirsiniz. Bir map bölgesini
seçip klavyeden "Del" tuşuna basarsanız map
bölgesi silinecektir.




Fireworks'den
Dreamweaver'a




Fireworks kullanarak
hazırladığınız bir dokümanı Export seçeneği ile
HTML olarak export ettiğinizde bunu o anda DW'da çalıştığınız
dokümana dâhil etmek isteyebilirsiniz. Bu gibi durumlarda
Insert Fireworks HTML seçeneği çok iş görecektir.


Firewokrs HTML
dosyalarını sayfaya eklemek için:




Dokümanınızı
Fireworks'ün derlediği HTML dosyası ile aynı dizine kaydedin ve
Insert panelde yer alan Image
düğmesinin bir alt düğmesi olan Firewokrs HTML
düğmesi ile ya da, Insert / Image Objects / Fireworks HTML
menüsü ile ilgili iletişim penceresini açın.



Yapmanız gereken tek
şey Firewokrs tarafından derlenmiş HTML dosyasını seçmektir. Eğer
dosya DW'da çalıştığınız dokümana dâhil edildikten sonra var olan
Fireworks dosyasını silmek istiyorsanız "Delete file after
insertion" seçeneğini işaretlemelisiniz.




Resim galerileri
oluşturmak




Elinizde çok sayıda resim
varsa ve bunları kullanıcılara düzenli bir yapı ve/veya galeri
şeklinde sunmak istiyorsanız DW'ın içerisinde gelen "Create
Web Photo Album" bileşenini (Commands
menüsü altında bulabilirsiniz) kullanabilirsiniz.

Yeni bir foto albüm
yapmak için;




Öncelikle yeni bir
doküman açın ve bunu tanımlanmış bir sitenin altına kaydedin.






Bu Commandı
kullanmadan önce dokümanınızı mutlaka kaydetmiş olmalısınız. Öte
yandan bu kayıtlı doküman önceden tanımlanmış bir sitenin
altında yer almalıdır. Sebebi, kaynak olarak seçtiğiniz
dosyaların hedef olarak seçtiğiniz dizine kopyalanması sırasında
resim ve dosya link yollarının doğru ve sorunsuz bir şekilde
olması içindir. Aksi taktirde dosya yolları C:/Program
Files/Macromedia .... Şeklinde olacaktır ve sizin
bilgisayarınızda çalışmasına rağmen sunucuda çalışmayacaktır.








Fotoğraf albümünün
oluşturulabilmesi için sisteminizde Fireworks'ün
de kurulu olması gerekmektedir.




Ardından Commands
/ Create Web Photo Album menüsü ile albüm bileşenini
çalıştırıyoruz. Açılan iletişim penceresinde sırayla;

• 
  
  
  Photo Album
  Title: Albümünüzün başlığı.
  
• 
  
  
  Subheading Info:
  Albümünüz ile ilgili kısa bir açıklama.
  
• 
  
  
  Other Info:
  Diğer açıklama metni.
  
• 
  
  
  Source Image
  Folder: Albüm haline getirilecek orijinal resim
  dosyalarının olduğu klasör.
  
• 
  
  
  Destination
  Folder: Albümün oluşturulacağı hedef klasör.
  
• 
  
  
  Thumbnail Size:
  Resimlerin ön izlemeleri olan ufak resimlerin hangi boyutlarda
  (piksel cinsinden) olacağını belirtir.
  
• 
  
  
  Show Filenames:
  Resim dosyalarının isimlerini altlarında görüntülenmesini sağlar.
  Büyük projelerde bunlar resimler için açıklayıcı bilgiler
  içerebilir.
  
• 
  
  
  Columns:
  Küçük resimlerin kaç kolon şeklinde sayfaya yerleştireceğini
  belirtir.
  
• 
  
  
  Thumbnail
  Format: Küçük resimlerin formatının ne olacağını
  belirler. (Genelde GIF küçük resimlerin daha az
  yer kaplamasını sağlayacaktır)
  
• 
  
  
  Photo Format:
  Orijinal resimlerin hangi formatta olacaklarını belirtir. (Bunlar
  için kullanacağınız format oldukça önemlidir. Zira resmin
  yüklenmesi ne kadar kısa sürerse ziyaretçi için o kadar cazip
  olacaktır. Eğer resimlerinizde fazla kontrast/renk varsa format
  olarak JPEG kullanmak akıllıca olacaktır.)
  
• 
  
  
  Scale:
  Büyük resimlerin orijinallerine göre hangi boyutlarda kalacağını
  belirtir. Eğer resimlerin büyük hallerinin belli bir oranda
  küçültülmesini istiyorsanız buraya bu oranı girerek resimleri
  küçültebilirsiniz.
  
• 
  
  
  Create
  Navigation Page for Each photo: Her resim için ayrı bir
  HTML dosyası oluşturarak albüm içerisinde gezintinin en üst
  düzeyde olmasını sağlar.
  

Gerekli bilgileri
girdikten sonra OK e tıkladığınızda Fireworks açık
değilse otomatik olarak açılıp işleme başlayacaktır. Seçtiğiniz
resimler sırayla açılıp işlenecektir. Fireworks ise size durumu
küçük bir iletişim penceresi yardımı ile bildirecektir.



İşlem tamamlandığında
DW'da Album Created mesajı görünecektir. Resim
dosyanız yaratılmıştır. Sayfayı kaydedip deneyebilirsiniz.