Yeni bir proje için bir site hazırlayacaksınız diyelim. İşin kaliteli olmasını istediğiniz için tasarımını bir grafikere çizdirdiniz ve PSD veya PNG olarak grafikerden çalışmayı aldınız. Sırada resim halindeki bu tasarımı kodlamak var. Kodlamak derken öyle veritabanı, PHP / ASP programlamasından bahsetmiyorum. Sadece grafikerden almış olduğunuz resim halindeki tasarımı, web standartlarına (W3C) uygun, tüm tarayıcılarda aynı görünen bir HTML dosyası yapacaksınız. Nelere ihtiyaç duyarsınız, sorunlarla nasıl başedersiniz? Sizin için bu konuda bir harita çıkartayım istedim. Böylece daha projenin başında ihtiyacınız olanları derler ve çalışmanız sırasında arayışa düşmeden, dikkatiniz dağılmadan siteyi tamamlayabilirsiniz.



Gördüğünüz gibi tek bir index.html dosyamız var. Sitenin anasayfasının tüm unsurlarını (başlık, gövde ve alt) aynı dosyada oluşturacağız. Bu tasarımı biçimlendirmemizi sağlayacak yardımcı elemanlar yani resimler, stil dosyaları (CSS), javascript kütüphaneleri ve flash nesneleri resimde görmüş olduğunuz klasörlerde bulunacaklar. Peki neler bulunabilir bu klasörlerde?
CSS

Sitenizin yeni teknolojilere göre kodlanması artık bu zamanda şart oldu. Bu konuda da ilk adım CSS ile kodlamadır. Fakat CSS’in şöyle bir sorunu vardır. Her tarayıcıda aynı göstermek için biraz çaba sarfetmek zorundasınız. Kimisi bunun çok zor olduğunu düşünür fakat aksine temel bazı şeyleri bildikten sonra hiç de öyle korkulacak bir durum değildir.


Öncelikle CSS sıfırlama (reset) ne demek bilmelisiniz.Bunun için şuradan bilgi alabilirsiniz. Kısaca söylemek gerekirse tüm CSS seçicilerinin varsayılan değerlerini sıfırlıyoruz ki tarayıcılar başlangıçta kendi kafalarına göre yorumlamasınlar.


CSS konusunda bilmeniz gereken diğer bir husus clearfix gibi en çok bilinen CSS hileleri hakkında bilgi sahibi olmak. Bu konuyu da işin duayeninden öğrenebilirsiniz: En çok kullandığım CSS Hileleri(Hack).


Son olarak transparan özellikli resimlerin tarayıcılarda çıkardığı sorunları gidermeniz lazım. Bunun da oldukça basit ve etkili bir çözümünü PNG ve IE Transparanlık Sorunu adlı makalede bulabilirsiniz.