Tekrar merhaba arkadaşlar, uzun bir süreden sonra ses getirecek bir ders ile karşınızdayım.

Bu derste webmaster arkadaşların çok işine yarayacak, zamandan tasarruf edecekleri harika bir yöntemi anlatacağım.

Günümüz web tasarım programlama dillerinde bildiğiniz gibi artık CSS moda, HTML ile tablolar ise demode olmuş durumda. Magazin programcılarının deyimiyle "CSS IN, HTML OUT" :)

Öncelikle "Neden CSS ?" sorusuna yanıt vererek kafanızdaki bazı soru işaretlerini kaldıralım. Standart olarak web tasarım şablonları HTML' de tablolarla oluşturulurdu ve halen oluşturmaya devam edenlerde mevcut. Hatta abartılarak iç içe tabloları defalarca kullandığımız zamanlar da olmuştur mutlaka. Bunun sonucunda gereksiz kodlar ile birlikte HTML sayfamız kabarıp şişer ve yüksek boyutlara gelirdi. Bu dönemlerde CSS sadece font rengi, font büyüklükleri gibi basit işler için kullanılırdı.

Günümüz şartlarında WEB 2.0 teknolojisi ile birlikte CSS Tasarımlar çoğumuzun dikkatini çekmiştir. Artık CSS basit şeyler için değil, tüm tasarım için kullanılmaya başlandı. Bu sayede daha hafif şablonlar oluşturarak hem sayfaların hızlı açılmasını sağlar hem de sitenin band genişliğinden tasarruf edersiniz. Blog sitelerine (Örnek: Wordpress) göz atacak olursanız CSS kullanılmamış bir siteye göre hız farkını hissedeceksiniz.

Daha fazla uzatmadan konuya giriyorum. Web siteniz için Photoshop' ta bir şablon oluşturdunuz. Bunu CSS Tasarıma dönüştürmek istiyorsunuz. 30 saniyede bunu yapabilirsiniz. Evet yanlış duymadınız. Photoshop'un yan programı olan Imageready kullanarak bunu yapmanız mümkün. Şimdi nasıl oluyor adım adım izleyin ve sizde uygulamaya başlayın.

1- Dosyanızı Photoshop ile açın

2- "File" menüsünden "Edit with Imageready" tıklayın

3- "Slice" özelliğini kullanarak şablonu dilimleyin. (Kabaca anlatacak olursak; şablonu istediğiniz parçalara ayırın. Örneğin header (üst bölge), ana bölge ve footer (alt bölge))

4- Şablonu parçalara böldüğünüzde şekilde görüldüğü gibi mavi kareli numaralar belirecektir

5- "File" menüsünden "Output Setting" altından "Slices" diyoruz

6- Çıkan pencereden "Generate CSS" seçili hale getiriyoruz ve başka bir işlem yapmadan "OK" diyoruz

7- "File" menüsü altından "Save Optimized As" diyerek gelen pencereden "HTML and Images" seçeneğini seçerek dosyaları istediğimiz bir yere kaydediyoruz.

8- Kaydedilen HTML dosyasını çalıştırıp kaynak kodlarını görüntülediğimizde bütün işlemlerin "<table>" ile değil <div id=...."> şeklinde halledildiğini farkedeceksiniz.

Umarım bu ders bir nebzede olsa web tasarımı yaparken zamanınızı hızlandırmaya yararlı olacaktır.

Herkese başarılar dilerim.