Tasarım yaparken hangi programları kullanıyorsun diye sorular alıyorum bazen. Fazladan bir program veya hizmet kullanmadığımı, klasik tasarım programları kullandığımı söylüyorum. Herkese tek tek bunları anlatmaktansa günce üzerinde yazmayı daha uygun buldum. Hatta iyi bir mim konusu olabileceğini düşünerek yazımın sonunda bazı arkadaşlarıma pasta atacağım. Belki böylesi daha iyi olur. İnşallah pas attığımız arkadaşlar güzel yorumlarıyla geri dönerler.

Şimdi, gelelim listemize. Herşeyden önce tasarımda kullandığım vazgeçilmez program Photoshop. Grafik tasarım işlerimi hatta işlerimin çoğuna başlangıcımı Photoshop ile yapıyorum. Yakın bir zamana kadar Photoshop’un 7.0 versiyonunu kullanıyordum. Şu sıralar Photoshop CS yani 8.0 kullanıyorum.

Tasarım editörü olarak Dreamweaver 8 kullanıyorum. Her ne kadar Dw sadece bazı noktalarda bana yardımcı olsa da hızlı yetiştirmem gereken işlerde hep kazanç sağlıyor. Bununla birlikte basit veritabanı ve Php işlemlerimi de sağolsun Dreamweaver hallediyor. Şayet ileri düzey bir veritabanına ihtiyacım varsa mutlaka veritabanı şemasını çıkarabilmek için EMS Mysql Manager kullanıyorum.

Animasyon ve basit navigasyon işlerimde Flash 8 kullanıyorum. İtiraf edeyim Flash bilgim o kadar iyi değil. Sadece kendime yetecek kadar biliyorum. (En azından bir top çizip havaya atıp yere indirebiliyorum :) Olsun ileride mutlaka kendimi bu alanda biraz daha fazla geliştireceğim.

Metin editör olarakta her zaman söylediğim gibi Notepad++ kullanıyorum. Bu harika editör 3 yıldır hayatımda ve bir daha kopamadım. Her format sonrası mutlaka ilk kurduğum programlardan birisi oluyor. Özellikle Css ve Xhtml kodlama yapan birisi olarak benim için büyük kolaylık sağlıyor. Unutmadan bir de Free Css Toolbox programı var. Css kod yazanlar için bire bir. Ancak ben kopyacılık olmasın hem de hazıra konmayayım diye bu programı pek tercih etmiyorum. Şayet işin acil teslim edilmesi gerekiyorsa belki kullanırım.

Tüm bunlarla birlikte Php/Mysql sunucu olarak Wampserver‘ı, FTP işlemlerim için FileZilla‘yı, Tarayıcı olarak (tabi ki) Firefox‘u kullanıyorum. Firefox’ta tasarımlarıma yardımcı olan en büyük yardımcımsa Aardvark eklentisi.

Tabi kod yazarken veya Photoshop’ta çalışırken mutlaka Winamp açıktır ve bir Trance parça eşliğinde önce tasarıma sonra uçmaya geçilir :) Bu da işin güzel tarafı ne diyeyim.

Evet tasarım yaparken başlıca kullandığım programlar bunlar. Şimdi gel gelelim paslarımıza;

Yakuter, Dmry, SiberKültür ve Oceangray… Hadi bakalım top sizde :)

(SON SÖZ: Kimi zaman gerçek bir tasarım ortaya koyabilmek için bir iki program yeterlidir. Ancak ilhamınız yoksa isterse onlarca yardımcı programınız olsun bunların hiçbiri bir işe yaramaz!

Güzel günlerde görüşmek dileğiyle…)

Merhabalar, daha önce de sitemizde Dreamweaver ile ilgili bir takım makaleler yazmıştık. Şimdi bunlardan bir başkasını da sizlerle paylaşıyoruz. Bu makalemizde Dreamweaver ile hali hazırda kullanmış olduğumuz bir local sunucu üzerinde barınan veritabanına nasıl ulaşabileceğimizi anlatacağız. Ancak makalemize başlamadan önce kullanmış olduğunuz local sunucu yazılımını açıp (Wampserver, Xampp, PhpTriad, EasyPhp gibi) Dreamweaver’da bir site tanımlamış olmanız gereklidir.

Şimdi uygulamamıza geçelim, öncelikle Dreamweaver üzerinde bir Php doküman açalım. Daha sonra Window menüsünden Database bölümüne tıklayalım. Dilerseniz Ctrl+Shift+F10 kısayol tuşuyla da bu bölümü görebilirsiniz. Yan menüde (şayet yan menünüz açıksa) Application başlığı altında bölümü görebilirsiniz.
Gönderinin Devamını Okuyun…

Daha öncesinde sitemizde Dreamweaver ile ilgili birkaç makale yazmıştık. Bu makalemizde de Dreamweaver ile çok basit bir iki adımla nasıl Hızlı Menüler (Jump Menu) oluşturacağımızı anlatacağız. Hızlı menüler birçok web sitesinde gördüğümüz bir uygulamadır. Sitenizin tüm alt bölümlerine verilen hızlı bağlantılar sayesinde ziyaretçileriniz menülerin ve navigasyonların içinde kaybolmadan gitmek istedikleri sayfaya ulaşabilirler. (Özellikle kurumsal web sitelerinde çokça kullanılan bir uygulama olduğunu görebilirsiniz)

Makalemize başlamadan belirtmek isterim ki bu uygulamayı ben Dreamweaver 8 üzerinde geliştiriyorum. CS3 kullanan arkadaşlar da yine aynı şekilde menülerini oluşturabilirler.
Gönderinin Devamını Okuyun…

Dreamweaver, piyasada bulunan benzerlerine göre birçok işlevi ve özelliği ile diğer web tasarım editörlerinden ayrılıyor. Belki de bu denli çok tercih edilmesinin ve profesyonellerce kullanılmasının sebebi budur. Geliştirilen özellikleri ve eklentileri ile Dreamweaver, MX serisinden bu yana birçok web tasarımcısının gözdesi.

Bu makalemizde sizlere kısaca Dreamweaver’ın bir başka özelliği olan “Site Defination” dan bahsedeceğim. Site Tanımlama olarak Türkçemize çevirebileceğimiz bu fonksiyon sayesinde Dreamweaver ile tasarım işlerimizi biraz daha kolaylaştıracağız ve hızlanacağız. Dilerseniz hemen konumuza geçelim.
Gönderinin Devamını Okuyun…

Tasarladığımız web sitelerinde sıklıkla açılır menüler ve buna benzer navigasyon araçları kullanırız. Belli bir alandaki resim ya da metin tabanlı link üzerine gelindiğinde açılır menü yardımıyla ilgili kategorinin alt dallarını ve menü başlıklarını görebiliriz. Çoğu zaman bu menüler doğru yerlerde kullanıldığında büyük bir navigasyon kolaylığı sağlarlar.

Bu yazımızda kısaca Adobe Dreamweaver ile resim ve metin tabanlı bağlantılarımızla açılır menülerin nasıl oluşturulacağını, özelleştirilmesini ve kullanımını anlatacağız.
Gönderinin Devamını Okuyun…

Tasarladığımız web sayfaları ve sitelerinde çoğunlukla resim değişim efektleri (image rollover) kullanırız. Bu efekti gerek Javascript yardımıyla gerekse de Xhtml ve Css bileşimiyle rahatlıkla web sayfalarımızda uygulayabiliriz. Bahsettiğimiz özellikte fare ile resmimizin üzerine gelindiğinde yine aynı boyutta başka bir resim ile resmimizin yer değiştirdiğini görürürüz. Bu yazımızda sizlere kısaca bu işi Adobe Dreamweaver ile nasıl yapacağımızı anlatacağız. Böylelikle çok kolay ve zahmetsiz bir biçimde sayfalarımıza image rollover efekti ekleyebileceğiz. Ayrıca bu teknik ile yapmış olduğumuz işlemde geçerli (valid) bir kod elde etmiş olacağız.

Bu işe başlamadan önce aynı boyutta 2 adet farklı resminiz olması gerekiyor. Ben küçük boyutlarda 2 adet resmi bu iş için tasarladım ve jpg formatında kaydettim. Bu resimleri bir klasöre attıktan sonra Adobe (daha doğrusu hala bizdeki formatıyla Macromedia) Dreamweaver’ı açıyoruz. Yeni bir HTML dosya açtıktan sonra yapacağımız işlem gayet kolay. Dreamweaver’ın yukarıda yer alan ana menüsünden Common bölümünde Image alanına geliyoruz, bu alanda yer alan Rollover Image bölümüne tıklıyoruz. Açılan pencerede bizden iki adet resim belirlememiz istenecektir. Bu alanda hemen birinci (üst) alana önce görünecek olan resmimizi belirtiyoruz. Ben iki resmimi klasör içine koydum ve resim1.jpg ve resim2.jpg olarak isimler verdim. Dolayısıyla hemen resim1.jpg dosyamı seçiyorum. Aşağıda yer alan bölümde ise resim2.jpg dosyamı seçereki açılan pencereye OK diyerek kapatıyorum. Artık rollover image efektim hazır. Hemen çalışmamızı kaydederek sonucu görebilir veya kısayol F12′ye basarak bir tarayıcı penceresinde sonucu görebiliriz.

Kaydettiğiniz sayfada rollover efektinin gayet güzel işlediğini göreceksiniz. Bu işlemi yapan bir dizi Js kodunu Dreamweaver sitenizin kaynak kodlarına (HEAD alanına) ekliyor. Daha sonra BODY etiketinde eklemiş olduğunuz resimler onload parametresi yardımıyla öncelikli olarak yükleniyor. Resim değişim özelliğinin görünmesi içinse a etiketinin onmouseover ve onmouseout parametreleri kullanılarak Javascript kodlarına atıfta bulunuluyor ve resim değişim efektimiz gösteriliyor. Bu özellikte resmin hem link olarak bağlanması hem de istenilen yerde kullanılabilmesi büyük bir avantaj. Böylelikle biraz Photoshop ve biraz da Dreamweaver bilgisi ile kendi istediğimiz tarzda Navigasyon menüler yapabilir ve bunları sitemizde kullanabiliriz. Ancak yazımızın başlarında belirttiğim gibi resimlerin aynı boyutta olması gerekli. Bununla birlikte yaptığımız çalışmanın geçerli bir uygulama olması için img etiketine alt=”" kodunun kesinlikle eklenmesi gerekiyor. Dreamweaver’da yeni bir HTML doküman açarken dosya tipininde Xhtml olmasına dikkat ediniz. Bu sayede programın ürettiği kodlar Xhtml ile uyumlu kodlar olacaktır.

Örnek çalışmam için lütfen buraya tıklayınız…