giris

Stylizer ile CSS kodlama

Profesyonel web tasarımcılarına müthiş bir kolaylık sağlayan bu yazılım, işe yeni başlayanlara da kolayca CSS öğrenme fırsatı tanıyor.

Web tasarımı için dünyada ve Türkiye’de en çok kullanılan yazılımlar Microsoft ve Adobe gibi büyük yazılım şirketlerinin çok da ucuz olmayan ürünleri. Microsoft, web tasarımcıları için Visual Web Developer Express gibi ücretsiz bir çözüm sunuyor olsa da tüm ihtiyaçları karşılayan program paketleri dişe dokunur lisans ücretleriyle satılıyor. Yüksek lisans ücretleri kurumsal kullanıcılar tarafında elbette ki bu başarılı yazılımlar için makul görünebilir. Fakat web tasarımına farklı amaçlarla yönelen, örneğin işe bir hobi gözüyle bakan kullanıcılar için çok can sıkıcı olabiliyor. Şimdi tanıtacağımız yazılımın hem ücretsiz bir sürümü, hem de makul ücretli bir sürümü var. Yüksek ücretli bir sürümüyse yok! 🙂

Kanada’lı Skybound firmasının bir ürünü olan Stylizer, web tasarımıyla uğraşan herkesi ilk görüşte şaşkınlığa sevk edebilecek, etkileyici bir yazılım. Yazılım, HTML sayfalardaki öğelerin görünümlerinin yönetilmesinde CSS dosyaları kullanan tasarımcıların hayatını daha önce görülmemiş şekilde kolaylaştırıyor.

Yine aynı konuda çözüm sunan Adobe Dreamweaver’ın da CSS düzenleme özellikleri mevcut. Fakat bir karşılaştırma yapacak olursak, işi yalnızca CSS dosyalarını düzenlemek olan Stylizer, Dreamweaver’ın yanında “sihirbaz” gibi duruyor. Sözü daha fazla uzatmadan yazılımın nasıl kullanıldığına ve ne gibi etkileyici özellikler içerdiğine göz atalım.

Canlı yayında CSS düzenleme

Web sayfalarının stil dosyalarını düzenlemenizi sağlayan tüm yazılımlar, kodları yazarken size yardımcı olabiliyor. Fakat Stylizer işi farklı bir boyuta taşımış durumda. Programı çalıştırdığınızda Internet Explorer ve Firefox gibi web tarayıcılara benzeyen tanıdık bir görünümle karşılaşıyorsunuz. Zaten yazılım, bilgisayarınızda kurulu bulunan tarayıcıları kullanarak çalışıyor. Her zaman görmeye alışkın olduğunuz yerde bulunan adres çubuğuna bir web sayfasının adresini girdiğinizde, büyük ihtimalle ilk şaşkınlığınızı yaşayacaksınız. Stylizer, ekranın sol tarafında yazılan adresi bir tarayıcı gibi görüntülerken, sağ taraftaki panelde de o sayfada kullanılan CSS dosyalarını açıyor.

Sağ taraftaki panelde istediğiniz tanımlamayı değiştirme şansına sahipsiniz. En güzeli de bu değişiklikleri yaptığınız anda sonucun sayfaya yansıyor olması. Bu sayede yaptığınız değişikliğin sonucunu görmek için CSS belgesini kaydetmek, tarayıcıda sayfayı tekrar yüklemek gibi bir zorunluluğunuz olmuyor.

CSS dosyalarında yaptığınız değişikliklerin sonucunu anlık olarak görebilmek, sayfa tasarıma ayrıntılı şekilde müdahale ederken ciddi şekilde zaman kazandırıyor. Üstelik Stylizer’ın CSS düzenleme paneli çok fonksiyonel şekilde tasarlanmış. Burada neyi kastettiğimizi hemen küçük bir örnekle açıklayalım.

Diyelim ki, sayfanızda bulunan bir <DIV> elementinin boyutlarını CSS dosyanızda belirliyorsunuz ve bu DIV, sayfada görüntülenen bir kutuyu oluşturuyor. Kutunun enini ayarlamak için CSS dosyasındaki gerekli “width:” ifadesine tıklıyor ve istediğiniz değeri girebiliyorsunuz. Gelişmiş kontrollerin öne çıktığı nokta ise şu: DIV’inizin enini belirlerken rakamı elle yazabileceğiniz gibi, var olan rakamın üzerine fare ile gelerek CTRL tuşunu basılı tutup farenizin tekerleğiyle de boyutu ayarlayabiliyorsunuz. Bir taraftan boyutu değiştirirken diğer taraftan da sayfadaki sonucun nasıl olduğunu izlemek gerçekten çok etkileyici.

6 yorum

  1. semi

    şey acaba bu kodlara nasıl ulaşabiliriz

  2. ercan

    Harika bir program çok profösyönel sayılmam ama harika bir olay tam inceleyemedim daha eğer ücretsiz sürümünde kayıtla ilgili falan bir problem yok ise bence çok tutulur

  3. hasan525

    konuyu okudum programı beğendim ücretsiz sürümünü indiriyorum denicem

  4. asim

    arkadaşlar iyi güzel herşeyi anladıkta programı indirebileceğimiz link nerede acayip merak ettim sizce progam tanıtılan bir yerde link olmaması mantıklımı?

  5. Deniz

    Çok güzel. İndirme Linki nerde? yada biri verebilir mi?

Yorum yazın