En sorunsuz çözüm css bilgisi ve Mocromedia Dreamweaver.Microsoft frontpage ile div taglarına pek müdahale etmezsen çok iyi tasarımlar yapabiliyorsun.Ama işin içine div yani etiketler girince maalesef kaymalar olabiliyor.Benim tavsiyem css öğrenmeniz ve Dreamweaver kullanmanız.
Yaptığın tasarımların hangi tarayıcıda nasıl göründüğünü görmek ve test etmek için bu siteyi kullanabilirsin.E tabi dosyalarını host a atmış olman lazım.
http://browsershots.org/
-----Html kodlarını
http://validator.w3.org/
adresinden kontrol ettir ve düzelt. Gözün korkmasın, ilk denemende 500 ün üzerinde hata bulabilir. Sadece sayfadaki <br> taglarını bul/değiştir ile <br /> biçimine çevirince hata sayısı oldukça azalır. Aslında tüm tarayıcılara uygun kod hazırlamak biraz zor ama bir çok kez tasarımcılar da kendi işlerini zorlaştırıyorlar. Unutulmaması gerekenler altın kurallar şunlar:
- Frontpage, dreamweaver gibi WYSIWYG programlarını unutun, HTML ve CSS öğrenin, html ve css kodlarını kendiniz yazın. Standart "tag" ların dışındaki tagları kullanmayın.
- http://validator.w3.org/ http://jigsaw.w3.org/css-validator/
adresinden yazdığınız html ve css dosyalarının "web standartları" na uygun olup olmadığını test edin. Uymayan yerleri düzeltin.
- Yaptığınız sayfaları "kesinlikle" farklı tarayıcılar ile test edin. Tüm tarayıcılar ile birbirinin tıpatıp aynısı olmasa bile, en azından "kullanılabilir" bir sayfa yapmanız gerekir. Örneğin http://www.acikgazete.com/ adresini "mac os" kullanıcıları takip edemiyorlar, bunu "mac os" altında doğru gösterebilecek bir browser yok. Linux altında da durum aynı. Bu potansiyel müşterilerin kaybına ve firma/ürün prestijinin yok olmasına neden olur.
- Resim biçimindeki layout ve butonlardan kaçınmanızı tavsiye ederim.
Bu altın kurallara uyduğunuzda, tasarımlarınızın "cep telefonları ile dahi" oldukça doğru göründüğüne şahit olacaksınız. Javascript konusunda henüz net bir çözüm yok.Layout oluşturmak için css kullanmanızı, butonlar için ise "smallcaps" biçiminde serif (tirnaklı) font kullanmanızı tavsiye ederim.Görüntüsü hoş olduğu gibi birtakım avantajlar da sağlıyor:
- Ufak ekranlı mobil cihazlarda çözünürlükten dolayı görüntüleme problemi yaşanmaz.
- Görme özürlülerin kullandığı özel web tarayıcılarında (veya tarayıcı plug-in lerinde" metinler ve linkler okunur.
(Aslında resimler için ise "alternatif metin" etiketi altındaki yazı da okunur. fakat alternatif metin için genellikle daha uzun açıklamalar tercih edilir)
İlk bakışta "aşırı sade" olacakmış gibi gelen bu tarz sayfalara en hoş örnek "wordpress" sayfaları. Ayrıca tasarım açısından çok zarif ve başarılı bulduğum
http://www.alistapart.com/ sayfası da güzel bir örnek.Buton olarak düşük çözünürlüklü resimler kullanılıp alternatif metin doğru formüle edildiğinde teknik açıdan bir problem olmayacaktır.
