“Adobe Dreamweaver CS4 - Sanatsal Çalışmalar Yapın” başlıklı yazımda web tasarım dünyasına nasıl girdiğimden bahsetmiştim. Tabi o zamanlar Dreamweaver arkaplanda -kod olarak- tüm yükü üstleniyordu. Fakat görsel olarak birşeyler sunmak gerektiğinde derdime derman olan uygulama tabi ki Fireworks idi.

İlk başlarda sadece web sayfalarına görsel arayüz sunabilmek için kullandım. Fakat ilerleyen zamanlarda, özelliklerini daha doğrusu yapabildiklerini keşfettikçe artık görsel işlerimin hepsine vazgeçilmez uygulama olmuştu. Çoğu kişi Photoshop’u savunsa da bence Fireworks ile aralarında çok fark var. Neden bilmiyorum -alışmışlığın eseri olsa gerek- Fireworks’un daha yetenekli olduğu kanaatindeyim. Can kurtaran, zaman kazandıran yeteneği “slice” sayesinde amatör ruhumla birçok web sayfası tasarladım.

Kaybolmayan bu amatör ruhumla zaman içerisinde ki tecrübelerimden faydanalarak CS4 sürümünde neler değiştini görsel olarak aktaracağım. Hadi başlayalım.

Adobe tarafından resmi açıklama ne zaman yapıldı bilmesem de 1-2 haftadır CS4′ün kullanıcılara sunulduğunu duymaktayız. Buradan resmi sitesine bakabilir ve isterseniz yazılımı bilgisayarınıza yükleyebilirsiniz. (üye olmanız gerekmektedir. davetiye olmadığı için üyelik sonunda indirmenize izin verecektir.)

Kurulum Ekranı - Heyecan Başlıyor

Kurulum ekranı neredeyse Adobe’un çıkan tüm yeni sürümlerinde aynı. Sadece başlık kısımları -header- değişiyor ve içeriğe göre seçenekler sunuluyor.

Kurulum Ekranı - Yükleme Devam Ediyor

Önümüzdeki birkaç sene Adobe ürünlerinde bu kalıbı göreceğimizi umuyorum. Güven veren maviside cabası.

Uygulama - Karşılama Ekranı, Hoşgeldiniz

Karşılama ekranında değişen pek birşey yok. Sadece renkler değişmiş. Dreamweaver CS4 sürümünde ki hava burada yok.

Uygulama - Heyecan Verici Yeni Arayüz

Kalıp olarak Dreamweaver CS4 ile aynı. Sanırım Adobe’un stratejisi her yeni CS sürümünde kalıpsal değişikliklere gitmek. Bunu ilk CS3 serisinde görmüştük. Katkısına gelince, kullanıcılar yeni sürümlere geçiş yaparken adaptasyon konusunda çok sıkıntı yaşamayacaklardır. Sunulan bu yeni arayüz nefes kesici. İlerledikçe bize ne gibi yenilikler sunduğunu göreceğiz.

Uygulama - Farklı Tasarımcılar İçin Farklı Çalışma Alanları

Bir üst kısımda bulunan resmi ve buradakini büyültüp bakarsanız, arayüz içerisinde araçların yer değiştirdiğini göreceksiniz. Fireworks CS4 ile gelen hazır çalışma alanları farklı tasarım gruplarında ki kullanıcılar için kolaylık sağlıyor. Ayrıca isterseniz kendi çalışma alanınızı oluşturup, kaydedebilirsiniz.

Uygulama - Merkeze Kilitlenin

Bir önceki sürümlerde olmayan veya benim görmediğim bir özellik. Arayüz içerisinde resmi taşırken tam merkeze kilitlenebilmek için kılavuz çizgiler çıkıyor ve size bu konuda yardımcı oluyor. Ayrıca yine tasarım içerisinde farklı objelerimizi de birbirine hizalarken bize kılavuzluk ediyor.

Uygulama - Yeni Özelliklerini Keşfedin

Gördüğünüz gibi birçok yeni işlem var. Bunlar arasında AIR öne çıkıyor.

Uygulama - CSS Yapısına Uygun Tasarım Yapma ve Çıktı Alma

Resimde gördüğümüz üzere “STYLES” menüsünden CSS etiketimizi oluşturuyoruz. Burada seçili olan kısımlar CSS içerisinde ki biçimlendirmelerde geçiyor. Seçtiğimiz ve uyguladığımız stillerin hepsi CSS dosyasına aktarılıyor. Önceki sürümlerde yazıyı editörde düzenleyip -yazı üzerine sağ tuş yapınca editörü görebiliyorduk- birebir sonucu ekranda görüyorduk. Fakat bu sürümde -sanırım, varsa da çok aradım bulamadım- kaldırmışlar. Artık sadece alt kısımda bulunan “PROPERTIES” bölümünden yapabiliyoruz.

Tasarım içerisinde oluşturduğumuz stilleri burada yazılarımıza uygulayabiliyoruz. Her yazı için yeni bir stil oluşturup kullanmak en güzeli.

Tasarımın CSS çıktısını almak için “Export” işlemini uyguluyoruz ve resimdeki gibi “CSS and Images” çıktısını seçiyoruz.

Resimdeki gibi bir uyarı alırsanız telaşlanmayın. Uyarının sebebi, kullandığımız fontların Web için adaptasyonunda sıkıntı çıkarabileceğini bildirmek amaçlı.

Uygulama - Dreamweaver CS4 ile Tasarıma Devam Edelim

Şimdi Dreamweaver CS4 ile kaldığımız yerden devam ediyoruz. Çıktısını aldığımız HTML dosyanın editörde görüntüsü resimdeki gibidir. Farkettiyseniz Fireworks CS4 tarafında yaptığımız font şekilleri aynı şekilde buraya aktarılmamış.

Aslında CSS dosyamız tasarımımızda oluşturduğumuz stillere göre başarılı bir şekilde oluşturuluyor. Fakat Fireworks CS4, “Export” işlemini yaparken uyarı verdiği için CSS dosyasında seçtiğimiz stilde ki fontlara alternatif olarak tüm işletim sistemlerinde olabilecek fontları ilave ediyor ve onların kullanımını aktifleştiriyor. Tek yapmamız gereken resimde belirttiğim gibi o kısımları silmek.

Gördüğünüz gibi alternatif olarak eklenen kısımları kaldırdıktan sonra istediğimiz gibi şekilleniyor. Unutmayın! Burada CSS’e hakim olabilmek için Fireworks CS4′de oluşturduğumuz stillerde nelerin kullanılacağını iyi seçmeliyiz.

Tasarımımızın son hali. Tarayıcımızda aynen tasarladığımız gibi gözüküyor ve bunların hepsini kendisi ayarlıyor.

Yazımda ki amacım programı tanıtmak idi fakat sonlara doğru biraz “how to” mantığına büründü. CSS sorununu aşabilmek için baya uğraştığım ve çözümü sizlerle paylaşayım istedim. Sonuç olarak, Fireworks CS4 ile hayallerimiz gerçek oluyor. Web & Grafik tasarımı yapabiliriz, Programlarımız için arayüz tasarlayabiliriz ve daha fazlası. Komple çözüm arayanlara birebir uygulama olmuş. İnanıyorum ki CS5 -tabi böyle bir sürüm olursa- sürümünde özellikle CSS konusunda eksiklerini gidererek bizler için vazgeçilmez bir uygulama olacak. Şu an Adobe’un kendi ürünleri arasında ki adaptasyonu alkışlamak gerekir.

Değerli görüşlerinizi ve yorumlarını esirgemez iseniz çok mutlu olacağım. Keşfetmeye devam ediyorum ve yeni şeyler buldukça paylaşacağım.

(Not: Bu arada WP’de farkettim ki günler arası geçiş sorunu var. Yani 28 Mayıs - 23:00′de yazınıza başladınız, saatler ilerledi ve 29 Mayıs - 01:10 oldu. Tam bu sırada Galeri’den resim eklemeniz gerekti fakat yüklediğiniz resimler görünmüyor. Sebebi arkaplanda taslak olarak sadece yazı bilgileri kaydediliyor. Bu yüzden yüklediğiniz dosyalar gün bazında arşivlendiği için sistem yazıyı ilk oluşturduğu güne bakıyor. Sorun nasıl çözülecek? Sadece “Kaydet” deyin. Sizi tekrar editöre yönlendirecektir. Artık Galeri’den dosyalarınızı ekleyebilirsiniz. )

Etkileyici bir başlık olmasa da içeriğin sizi memnun edeceği kanaatindeyim. Amatör veya Profesyonel hiç farketmez. Web tasarımı ile uzun süredir uğraşanların ilk dönemlerde hayallerini süsleyen yazılım büyük ihtimal Dreamweaver olmuştur. Macromedia ile başlayan bu serüven Adobe geçmesi ile güç kazandı ve yazılımın internete bakış açısı değişti.

Son çıkan sürümlerinde görüyoruz ki, Adobe, ürünlerine entegrasyonu dışında çıkan son teknolojilere uyumluğu ile gönüllerimize taht kurdu ve bizleri büyük yüklerden kurtardı. Geliştirmek istediğimiz uygulamalarımızda bize sunduğu kuş bakışı dışında tabi ki sayılacak yüzlerce özelliği ve popülerliğinin getirdiği destek sayesinde ulaşabilirliğin kolay olduğu makaleler, örnekler de bizlere kolaylıklar sağlamaktadır.

Frontpage’den kurtulup Dreamweaver ile tanışmam Lise dönemlerime gelmektedir. Frontpage’de istediklerimi yapamadığımı görünce bir arayışa girdim ve bulduğum günden itibaren, sürekli keşfederek kullanmaktayım. Belirtmek isterim ki profesyonel bir tasarımcı veya webmaster değilim. Sadece insanlara muhtaç olmadan daha doğrusu rahatsız etmeden kendi çabalarım ile fikirlerimi sunmak adına kullanmaktayım. İnternette Adobe Dreamweaver CS4 üzerine Türkçe bir yazı, makale aradım fakat bulduklarımla memnun kalmayınca kendi gördüklerimi aktarmak en azından merakları gidermek istedim.

Adobe tarafından resmi açıklama ne zaman yapıldı bilmesem de 1-2 haftadır CS4′ün kullanıcılara sunulduğunu duymaktayız. Buradan resmi sitesine bakabilir ve isterseniz yazılımı bilgisayarınıza yükleyebilirsiniz. (üye olmanız gerekmektedir. davetiye olmadığı için üyelik sonunda indirmenize izin verecektir.)

Kurulum Ekranı - Lisans

Kurulum ekranı bile ayrı güzel. Lisans seçenekleri arasında Türkçe mevcut. Ben birazını okudum, sıkıntı oluşturacak bir durum yok. -sanırım- (eee yazı yazacağız dedik, kurmak zorundayız.)

Kurulum Ekranı - Kurulum Başladı ve İlerliyor

Sanki gücü hisseder gibiyim. Tatlı mavilikten midir? İnsana bir güven geliyor.

Uygulama - Karşılama Ekranı, Hoşgeldiniz

CS3′e göre karşılama ekranı biraz değişmiş. Fakat farkettiyseniz Windows’un pencere olaylarından kurtarmış kendisini. Ekranın hepsi benim diye söyleniyor sanki.

Uygulama - Komple Tasarım Ekranı ve Yeni Arayüz

Heyecan giderek artıyor. Sunduğu yeni arayüz etkilemek için fazlasını veriyor. MAC tarzında bir havası olmuş sanki. Kısayolların yerleri değişmiş ve kutucuklara yeni özellikler kazandırılmış.

Uygulama - Öntanımlı Çalışma Alanları

Bu arada söylemeyi unuttum. Resimleri büyütmek için üzerlerine tıklamanız yeterli. Resmin büyük boyutunda göreceksiniz ki sağ kısımda önceden ayarlanmış çalışma alanları var. “Dual Screen” yanlış bilmiyorsam ben ilk bu sürümde farkettim. CS4 ile esneknik ön planda. Tutun, sürükleyin, bırakın. Araçlar nereye çekerseniz oraya geliyor.

Uygulama - Ekli Dosyalarda Gezinin

Yazılım içerisinde “Indicator” olarak geçiyor. Kelime anlamına baktığımızda “Gösterge, İbare, İşaret eden şey” olarak çevriliyor. Yaptığı işe gelince görüntülediğimiz dosya eğer başka bir dosya bağlı çalışıyor ise onu da görmemizi ve üzerinde yaptığımız değişiklikleri uygulamamızı sağlıyor. Bir nevi bağlı olan dosyalara link atıyor ve sonuçları yansıtıyor.

Uygulama - CSS Uygula & Gör

Bir üst kısımda bahsettiğim mantık üzerine kurulu sistemde, CSS dosyasında yaptığımız değişiklikleri anında tasarım ekranımıza yansıtıyor. Tasarımdan kaçık yok. CSS dosyasını kaydetmeden yaptığımız değişiklikler karşımızda.

Ekran görüntüsü olarak sunacaklarım bu kadar. Diğer özelliklerine gelecek olursak;

Subversion entegrasyonu, Adobe Air desteği, Ajax ve Javascript kütüphanesi ve şahane Photoshop olayları. Bir sonraki yazım Adobe CS4 Fireworks hakkında olacak. Videolar aşağıda, izlemenizi tavsiye ederim.

Adobe TV’den Videolar

Inside The Dreamlabs - Dreamweaver CS4 Related Files

Inside The Dreamlabs - Dreamweaver CS4 Web Widgets

Inside The Dreamlabs - Dreamweaver CS4 Dataset Wizard

Inside The Dreamlabs - Dreamweaver CS4 Javascript

Inside The Dreamlabs - Dreamweaver CS4 Live Preview

Inside The Dreamlabs - Dreamweaver CS4 Code Navigator