CSS, web işleri ile uğraşan herkesin kısmen de olsa bilmesi gereken bir iştir. Blog yazarlarının bile bloglarında yapacağı yerleşimlerde, ekleyecekleri resimlerde, yazacakları yazılarda mantıken bilmeleri gereken birşeydir. Daha sonraki aşamada ise kendi tasarımlarını CSS’e aktarıp bir dizayn oluşturması vardır. Ancak bazen bu durum çok kolay olmayabiliyor. CSS’deki tüm terimlerin akılda tutulması bazen zor olabiliyor.

İşte tüm bunları göz önünde bulunduran ve neredeyse hiç bilgisi olmayan birinin bile kolayca CSS hazırlamasına imkan sağlayan Drawter artık imdada yetişiyor. Drawter yazarak değil çizerek CSS kodları hazırlamamızı sağlayan çok güzel bir servis.

Şimdi servisin kullanımından biraz bahsedeyim resimler yardımıyla.

Bizi yukarıdaki gibi üst ve sol kısımda cetveli bulunan bomboş bir sayfa karşılıyor. Burada biz istediğimiz ölçüleri çizeceğiz. Örnekte ben 500 px genişlik ve 50 px yüksekliğe sahip bir alan çizdim. Şidmi ikinci resimde bu alana div mi yoksa başlık mı veya başka bir şey mi geleceğini belirleyeceğiz.

Az önce çizdiğimiz alana “drawing options” menüsünden ne atayacağımızı seçiyoruz. Ayrıca “markup tree” yardımı ile iç içe giren divleri görebiliyoruz. Daha doğrusu kutu modelini daha basit bir şekilde görebiliyoruz.

Tüm işlemlerimiz bittikten sonra da “code” menüsünden kodumuzu oluşturuyoruz. Hepsi bu kadar. Zaten HTML yerleşim kodunu da CSS kodu ile birlikte verdiği için tekrar zamanımızı harcamaya gerek kalmıyor. Ayrıca işe başlamadan önce şuradaki videoyu da izleyerek anlatmak istediklerim hakkında daha geniş bilgiye sahip olabilirsiniz.