Fotoğraf Galerisi Şablonu Hazırlama

Site işleri ile uğraşan kişiler genelde kendi mamüllerini kullanmak isterler. Mesela bir fotoğraf galerisinde alt yapısından üst yapısına kadar herşeyini kendisi oluşturmak ister. Ama bazı zamanlar bu mümkün olmuyor. Programlama değil üst yapısında değişiklik yapacak bilgimiz olmayabiliyor. Aslında işin içine girince çok da zor olmadığı görülüyor. Bu yazımda basit yollu bir fotoğraf galerisinin üst yapısını yani tasarımını ve yerleşimini dilimin döndüğünce anlatmaya çalışacağım.

İşe bir stil dosyası oluşturmakla başlayıp, oluşturduğumuz stil dosyası içindeki kodları HTML dosyamızda göstermekle bitireceğiz. İnanın çok kolay olacak yapacağımız işlemler. Az da CSS bilginiz varsa tadından yenmeyecektir.
Burada sayfamızın arkaplan özelliklerini atayıp Internet Explorer için içerik ortalamasını tanımladık. Arkaplan için kendi resmimizin yolunu yazağız.
Galerimizin yer alacağı sayfanın özelliklerini tanımlayıp margin değerleri ile Firefox’da sayfamızın ortalı görünmesini sağladık.
Galerinin görüntüleneceği alanın özelliklerini tanımlıyoruz.
Şimdi de galeri öğelerinin yani resimlerin dizileceği alan ve özelliklerini tanımladık. Margin değeri ile resimler arasında gösterimde ne kadar boşluk olacağını, width ve height ile resimlerin genişlik ve yükseklik değerlerini, border ile çerçeve ve son olarak float ile nereye yaslayacağımızı belirledik.
Son haliyle kodlarımız böyle oladu. clear öğesini de boşlukları alarak Firefox’da düzgün görünmesi için kullandık. Şimdi bu kodları style.css olarak kaydediyoruz. Sırada HTML olarak dizilişi ve gösterimini yapmak var.
Burada stil dosyamızın bağlatısını yaptık. Onun yanında stil dosyamızdaki oluşturduğumuz alan ve özellikleri kullanmış olduk. Resmi gösterme işini 10. satırdaki kod ile yapıyoruz. Galeride göstereceğimiz her resim için bu satırdaki kodu kopyalayıp yeni resme göre uyarlayacağız.

Tabi benim anlattıklarım en basit ve sade olanı. Programlama ile bir alt yapı hazırlanıp üst seviyelere taşınabilir. Ya da biraz Java katıp işin içine görsel olarak daha iyi bir sunum hazırlayabiliriz. Bir örneğine şuradan bakabiliriz.