Pikasa - Resim Editoru

 Yeni bir HTML dersinde daha sizi görmek güzel
Bu dersimizde hayvan resimleri konusunda yapacağım siteye sizinle başlamayı uygun gördüm.
Hayvan resimlerini bir arkadaşımdan rica ettim 71 grup hayvandan 20 şer kadar resim topladı.
Biz bu derste köpek resimleri kısmını birlikte yapacağız.
Siz de herhangi bir konuda resim toplayıp ufak bir site yapmaya başlayabilirsiniz.
Öncelikli olarak aşağıdaki linkten resimleri küçültmek için kullanacağımız programı (resim programını indiriniz).   (google resim editörünü indirmek için yandaki linke tıklayınız)
Haydin picasa 'yı bilgisayarınıza kuralım.
İndirdiğiniz programı (picasa kurulum programını) çalıştırdığınızda aşağıdaki ekran gelecektir.

Kabul Et butonuna tıklayınız. Bir sonraki ekran aşağıdaki gibi olacaktır.


Picasa'nın kurulacağı yeri önerildiği gibi bırakın ve kur butonuna tıklayınız.


Kurulumu tamamladıktan sonra (Bitir butonuna tıklandıktan sonra) Picasa otomatik olarak çalışacaktır.
İlk kez çalıştığında bilgisayarınızda ne kadar resim dosyası varsa hepsini araştırıp bulur.
O araştırıp bulurken bekleyebilirsiniz.
Bu araştırmayı daha sonraki açılışlarda yapmaz; ilk yaptığı araştırmadaki bilgiyi kullanır.

Kurduğumuz picasa programını resimleri küçültmek (pul resim elde etmek) için kullanacağız.
Picasa programının başkaca işlevleri de var fakat biz şimdilik resim küçültmek için kullanacağız.


Yukarıdaki resimde ben köpek resimlerinin olduğu klasöre odaklandım ve :
Eylemler butununa tıklayıp gördüğünüz menünün gelmesini sağladım.
Menüden "Tüm resimleri Seç" i tıklayıp kopek klasöründeki bütün resimleri seçtim.


Dışa Aktar butonuna (sağ alt tarafta) tıkladığınızda Klasöre "Aktar ekranı" gelecektir.
Dışarıya aktarılacak klasörü değiştirebilirsiniz.
ben pul resim (küçük resim) boyutu olarak 140 pikseli seçtim.
Resim kalitesi olarak %85 'i yeterli görüyorum.

"Aktarma ekranı" adındaki ekrandaki ayarları yaptıktan sonra Tamam butonuna tıkladığınızda;
Seçili bütün resimler seçtiğiniz klasöre seçtiğiniz boyutta ve kalitede kopyaları oluşturulacaktır.
Yapmayı düşündüğüm hayvan resimleri sayfasının taslağını aşağıdaki gibidir.

Resme tıklayarak 15 aşamada anlatacağım sayfanın son halini (15. aşamasını) görebilirsiniz.

15 aşamada olayı anlatmadan önce şunları vermek istiyorum:
1) <table aling=center> şeklinde kullanıldığında tablonun kendisi sayfada ortalanır.
2) aling hücre içindeki şeyleri sağa, sola veya ortaya hizalar.
3) valign ise hücre içindekilerin dikey hizalaması için kullanılır (üst, orta, alt)
4) Bazen tablonun kendisini (tablo görüntüsünü) değil tablo davranışı elde etmek isteriz ve border=0 yaparız.
5) <hr> yatayda bir çizgi elde etmek için kullanılır. diğer bazı etiketler gibi bgcolor ve width özelliği alır.
6) <tr align=center> şeklinde kullanıldığında ilgili tr içindeki bütün hücrelerin (<td></td>) içindekiler ortalanır.

15 aşamada hazırlayacağımız hayvan resimleri sayfasının son halini görmek için buraya tıklayınız.

Ödev:
Yukarıdaki linke tıkladığınızda açılan sayfadayken
1) boş bir yere sağ tıklayın.
2) çıkan menüden kaynağı görüntüle (view source) 'u seçip
3) açılan kod pencersindeki kodu inceleyiniz.
Eğer yukarıdaki gibi yapmak size karışık geldiyse buraya tıklayarak ta ilgili kodu görebilirsiniz.