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.

Author: Hamdi Yaman

1987 yılında gözlerimi açtığım şu küçük dünyada 2006 yılından bu yana blog yazıyorum. İnternet dünyasının bugünü ve yarını hakkında her zaman ilgili olmuşumdur.

10 comments

gerçekten css öğrenmek isteyenler için muazzam bir program. ama video yeterli seviyede değil diye duşunuyorum. hamdi bey sizden ricam keşke kendi sitenizi bu program dahilinde nasıl yaptığınızı anlatan bir video yayınlasanız yada uygun görduğunuz css çalışmalarını bu program dahilinde video olarak yayınlasanız inanın çok buyuk katkınız olmuş olur bizlere…

bende Türkçe bir anlatım bekliyorum 🙂
güzel, üstüne düşünce klavye kullanmayı bilmeyenler bile biraz biraz öğrenir gibi geliyor 🙂
Türkçe ayrıntılı anlatım hazırlanamaz mı?

CSS için alıştırma turları atılacak bir yer. CSS ten korkanlara güzel bir geçiş platformu.

vay arkadaş hergün daha da kolaylaşıyor bu işler işsiz kalacağız 😀

Bir cevap yazın

*