Psdtuts.com acemi ama bir o kadar da öğrenme heveslisi insanlar için en güzel 50 Photoshop anlatımını bir araya getirmiş.

Photoshop’u ister web tasarımı amaçlı isterseniz de fotoğraf manipülasyonu için kullanın yine de bir şekilde yolunuz Pen Tool (P) ile kesişmiştir. Pen aracı aslında Photoshop‘un olmazsa olmazlarından olan ve birçok grafik tasarımcının vazgeçemeyeceği bir araçtır.

Pen tool sayesinde belli bir alanı kesip çıkarma, Shape (şekil) elde etme gibi işlemler yapabiliriz. Bunlarla birlikte Pen Tool ile oluşturduğumuz şekillere belli efektler verebiliriz. Biz bu makalemizde Photoshop’un Pen aracını kullanarak eğik şekillere hakim olmayı öğrenecek ve bunu Glow (Ateşlendirme, Kızartma diye Türkçemize çevirebiliriz) şeklinde nasıl detaylandırabileceğimizi öğreneceğiz. Bu sayede Pen Tool’u nasıl kullanabileceğimizi de sizlerle paylaşacağız. Basit bir iki adımdan oluşan bu uygulama için hemen Photoshop’umuzu açalım :)
Gönderinin Devamını Okuyun…

Rss beslemeler ve Rss beslemelere ait ikonlarımız neredeyse blog sitelerimizin vazgeçilmezlerindendir. İnternette hazır olarak bulunan birçok çeşit ve görünümde Rss ikonu bulunmaktadır. Ama kendi Rss ikonunuzu kendiniz yapmaya ne dersiniz?

Bu makalemizde Photoshop kullanarak çok basit bir iki adımda kendi Rss ikonumuzu yapacağız. Bunun ihtiyacımız olan tek şey Photoshop. Hadi başlayalım!

(NOT: Sitemizde elimizden geldiğince Photoshop makaleleri yayınlıyoruz ama bir Photoshop kategorimiz bile yokmuş, ben de bir tane oluşturuverdim. Photoshop isimli kategorimizin ilk yazısı bu oluyor böylelikle :)
Gönderinin Devamını Okuyun…

Yeniden merhabalar. t’infection.com’da birkaç kez Xhtml/Css bileşimine sahip menüler yapmış ve sizlerle de nasıl yapılacağını paylaşmıştık. Bu makalemizde yine bir menü tasarımını birlikte oluşturacağız. Ancak bu sefer ki menümüz diğerlerinden biraz daha profesyonel olacak. Zira bu menümüzde Xhtml/Css’den daha iyi faydalanacak, menümüzü ikonlarla destekleyecek ve W3C standartlarına uygun bir kod yazımı elde edeceğiz.

Menümüzün yapısal tasarımını hazırlarken Html’de çokça kullandığımız Ul ve Li etiketlerinden faydalanacağız. Bu etiketlerin yazılımını düzgün bir şekilde yaptıktan sonra Stil dosyamızla bu etiketlerin değerlerini düzenleyeceğiz. Her zaman olduğu gibi Xhtml kodumuz gayet basit olacak, görünümümüzü de Css kodlarımızla şekillendireceğiz. Menümüzü oluşturmak için klasik olarak yine ihtiyacımız olan şey boş bir editör sayfası. Ben yine sizlere Notepad++ tavsiye edeceğim. Tabi klasik alışkanlarımızdan vazgeçemiyoruz, siz yine de kendi editörünüzü kullanmaya devam edin. :) Sözü fazla uzatmadan hemen menümüzü yapmaya başlayalım.

Gönderinin Devamını Okuyun…

Yeniden merhabalar. İnternette rutin gezintilerimi yaparken bir sitede kısa bir makale gördüm. Wordpress’te yazılan tüm yazıların sayısını ve alınan tüm yorumların sayısını gösteriyordu.

Hemen kodu alıp test ettim yerel bilgisayarda gayet güzel çalıştı. t’infection.com’a da sağ alanda Rss besleme bağlantısının altına koydum. Aslında bu uzun yöntem. Bu işi yapan birçok eklenti var. Ancak eklenti kurma yükleme gibi dertlerle uğraşmadan bunu yapabilmek sanırım işin kısa yolu. Dilerseniz aşağıya kullandığımız kodu ve kaynağımızı yazalım.
Gönderinin Devamını Okuyun…

Horizontal Menü Örneği

Tekrar merhabalar t’infection okurları. Uzun süre önce sitemizde sizlere Xhtml/Css bir menü yapımını anlatmıştık. Bu menümüz Dikey (vertical) diye niteleyebileceğimiz bir menü tipindeydi. Bu makalemizde de çok fazla kod yığını olmadan basitçe bir menü yapımını anlatacağız. Yalnız bu sefer farklı şekilde horizontal yani yatay diyebileceğimiz bir menü olacak ve menümüzü iki adet küçük gif resimle destekleyeceğiz.

Gönderimizin üst tarafında görünen menüyü oluşturmak için gerekli olan şey sadece boş bir not defteri sayfası. Dilerseniz şimdi menümüzün kodlarını yazmaya başlayalım.
Gönderinin Devamını Okuyun…

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…

Merhabalar, başlığın oldukça itici olduğunun farkındayım. Ancak yazmak istediğim makale ve uygulamaya başka bir isim bulamadım inanın. (Web’de yaptığım araştırmada bu tarz uygulamalara Glossy Text deniyor ancak tam olarak sizlere Glossy Text’i anlatmayacağım, ismini bilen bir dostumuz yazarsa çok sevinirim :)

Yazımızın giriş kısmında örneğini gördüğünüz üzere bu tür metin efektleri Web 2.0′ın bir tasarım özelliği olan “gradient” kullanımıyla mümkün. Kullanacağımız metinlere Photoshop’ta vereceğiniz “Gradient Overlay” efekti ile bu tarz yazı stillerine sahip olabiliriz. Kaldı ki yeni nesil web sitelerinde bu tarz yazıları sıkça görmekteyiz. O halde sözü fazla uzatmadan uygulamamıza geçelim.
Gönderinin Devamını Okuyun…

Web tasarımı söz konusu olduğunda mutlaka Form’lardan bahsedilir ve kullanılır. Çünkü web formları (her türlü formdan bahsediyorum) ziyaretçiden bilgi alma, bilgi aktarma, sonuç döndürme, bilgi girişini sağlama gibi görevler üstlenirler. En basit haliyle bir “İletişim Formu” bile sitenizdeki ziyaretçinin size ulaşmasını ve düşündüğü konuda yazmasını sağlar.

Bu yazımızda sizlere bir iki küçük Css taktiği ile Web Formlarımızı nasıl daha güzel hale getireceğimizi anlatacağız. Tabi önce işin mutfak kısmından başlıyoruz ve Xhtml ile formumuzu yazıyoruz…
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…

İnternet üzerinde görmüş olduğumuz birçok web sitesi ve kaynak üzerinde onlarca bağlantı görürüz ve bunları kullanırız. Bu bağlantıların gelişen web akımlarına ve özellikle de Web 2.0 tasarım özelliklerine göre şekillendirildiğini biliyoruz. Zira özelleştirilmiş bağlantılar sayesinde tıklayacağımız bağlantı sonucunda bir harici sayfaya mı gideceğimizi yoksa bir dosyayı mı indireceğimizi bilir hale geliyoruz. Bunu bizlere bildiren elbette bağlantımız başında kullandığımız küçük ikon ve resimler oluyor.

Şüphesiz uygulamanın yapılmasında en büyük pay Css’nin. Xhtml ile de bu özelleştirilen bağlantıları kullanarak site ziyaretçilerimize değişik bağlantı profilleri sunmuş oluyoruz. Bu makalemizde en basit yöntemiyle gönderilerimizde ve hazırlamış olduğumuz websitelerinde kullanılan bağlantılara nasıl resim ekleyeceğimizi anlatacağız.
Gönderinin Devamını Okuyun…

Herkese selamlar, Photoshop Uygulamalarına elimizden geldiğince sitemizde yer vermeye çalışıyoruz. Bu makalemizde de bunlardan birine yer vereceğiz. Basit Photoshop uygulamalarıyla sitelerimiz için rahatlıkla birkaç adımda oluşturulabilecek butonlar ve navigasyonlar yapabiliriz. Aslına bakılırsa yukarıdaki navigasyonu 1-2 dakika içinde oluşturmak hiçte zor değil. Şimdi dilerseniz hemen nasıl adımlar izleyeceğimizi ve navigasyonumuzu nasıl şekillendireceğimizi anlatalım.
Gönderinin Devamını Okuyun…

Sitemizi takip eden arkadaşlar üst alanda yer alan Tavsiye Dizin’i görmüşlerdir. Bu sayfada sitemizin Blogroll diye tabir edilen Bağlantılar alanında yer alan tüm bağlantılarını görebiliyorsunuz. Bu yazımızda kısaca bu işi yapan Wordpress eklentisinden ve nasıl kurulup kullanılacağından bahsedeceğiz.

Wordpress esnek yapısı ve plugin’lerle kolayca geliştirilebilmesi sayesinde birçok kişi tarafından kullanılmakta ve sevilmekte. Daha önce birçok kez yaptığım gibi kullanmış olduğum basit Wordpress eklentilerinden birisini daha sizlerle paylaşmak istiyorum. Eklentimizin adı: Blogroll Page Plugin. Bu eklenti sayesinde Wordpress sisteminizin Bağlantılar (blogroll) alanında bulunan tüm linkleri ister bir Wordpress sayfası ister bir gönderi içinde yayınlayabiliyorsunuz. Açıkçası Bağlantılar alanımı uzun süredir elden geçirmeyi düşünüyordum ve bu konuda Blogroll Page Eklentisi hemen imdadıma yetişti.
Gönderinin Devamını Okuyun…

Şayet siz de benim gibi Rss Okuyucu olarak Google Reader kullanıyorsanız bu servisin birçok özelliğini bilirsiniz. Web tabanlı olması ve kolay kullanımı sayesinde internet bağlantısı bulabildiğiniz tüm yerlerde Rss ile takip ettiğiniz web sitelerinin durumlarını görebilir, son yayınlanan gönderileri okuyabilirsiniz.

Servisin bir başka güzel özelliği ise beğenmiş olduğunuz beslemeleri “Paylaşabilmek”. Paylaşım işini bir beslemenin sonunda yer alan “Share” bağlantısından yapabiliyoruz. Sevdiğiniz yazı ve makaleleri Share bağlantısına tıklayıp paylaşıma aldıktan sonra Google Reader üst menüsünde “Your Shared Items” bağlantısını izleyerek paylaşmış olduğunuz yazıları görebiliyorsunuz.

Google Reader bu paylaşılan alanların sitemizde gösterimini sağlamak için bir opsiyon oluşturmuş. Bu yazımda kısaca bir iki kolay adımda sayfalarımızda Paylaşılan beslemelerimizi nasıl yayınlayabileceğimizi anlatacağım.
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…

Efendim yeniden merhabalar. Aşağıda birazdan okuyacağınız makaleyi ben yazmadım. Perfectgate.net sitesinden C-Nem yazmış. Sitede okuyunca hoşuma gitti. Yayınlamak için izin istedim ve sağolsun iznini aldım.

Bu yazımızda bir resme yağmur efekti uygulayacağız. Kaynak bir resmin üzerinde yapacağımız bir iki basit Photoshop efekti ile yağmur yağıyormuş izlenimi uyandıracağız. Dilerseniz hemen makalenin devamına geçelim.
Gönderinin Devamını Okuyun…

Wordpress tabanlı sitelerimizin Yönetim paneline girdiğimiz zaman Başlangıç sayfasında bizi Wordpress Blog ve Wordpress Planet’e ait son haberler karşılar. Bu haber kaynakları çoğu zaman birçoğumuzun işine yaramaz. Ancak Wordpress ile yakından ilgili olan kişilerin siteleri üzerinden bu tür haberleri takip etmesi için düşünülmüş hoş bir uygulamadır. Bu yazımızda size kısaca bu alandaki haberleri kaldırarak daha temiz bir Başlangıç sayfasını nasıl yapacağımızı anlatacağım. Yapacağımız şeyler gerçekten çok basit… Lütfen adımları takip ediniz.

- Öncelikle site klasörlerinizin bulunduğu alanda wp-admin dizinine girin ve buradan index.php dosyasını indirin.
- index.php dosyasını herhangi bir metin editör programından açın.
134 ve 136. satırlarda bulunan <div id=”devnews”></div> ve <div id=”planetnews”></div> kodlarını bulun ve bunları silin. (Wordpress eski sürümlerinde bu satır numarası 137 ve 139 olarak değişmekte, bilgilerinize)
- index.php dosyanızı kaydederek FTP ile sunucunuza geri gönderin.

Bu işlemlerden sonra Yönetim panelinize girdiğinizde Başlangıç sayfanız Wordpress Blog ve Planet haberleri olmadan görüntülenecektir.

Bugece yerel bilgisayar üzerinde bir uygulama yaparken aniden karşıma bir Wordpress hatası geldi. Ne yaptıysam düzeltemedim. Sonunda pes ederek Wordpress forumlarında konuyu aradım. Wordpress.org Forumlarında şurada kısa bir biçimde bu hatayı nasıl temizleyeceğimiz anlatılmış.

Uygulamayı yapınca hata giderildi ve bir daha böyle bir hata meydana gelmedi. Belki işinize yarar diye düşünerek buraya hatanın nasıl giderileceğini yazıyorum. Aşağıda bulunan kodu belli dosyalara kaydederek sorunu çözebilirsiniz.

<?php ini_set(”memory_limit”,”12M”); ?>

Bu kodu Wordpress dosyalarınızın bulunduğu alanda;

• wp-includes >> class_snoopy.php

• wp-includes >> plugin.php

• wp-admin >> admin_functions.php

dosyalarında ilk satıra ekleyin. Böylece dosyalarınızı kaydedin. Hata giderilmiş olacaktır. Şayet aksi olursa kod üzerinde bulunan 12M alanını 20M yaparak yeniden deneyin. Umarım işinize yaramaz. :) Hayırlı geceler…

Web tasarımı yaparken en büyük yardımcımız olan Photoshop’ta çokça fırça ve dolgu (brush, pattern) kullanırız. Bu dolgu ve fırçalar özellikle yaratıcı web sitelerinde oldukça karşımıza çıkarlar. Kaldı ki artık Web 2.0 tasarım konseptinin iyice yaygınlaştığı günümüz anlayışında birçok sitede bu tarz dolgu ve fırça işlemlerini görebiliriz. Bu yazımızda sizlere kısaca kendi dolgu ve fırçalarınızı nasıl yapacağımızı anlatacağız ve küçük uygulamalar ile örnekler çıkaracağız.

Bahsettiğimiz işlemleri yapmak için Photoshop versiyonunuz çok önemli değil, 6, 7, CS veya CS2 versiyon olabilir. Ben uygulamalarımı 7 ve CS sürümlerinde yapıyorum. Bu kısa ön bilgilendirmeden sonra hemen uygulamalarımıza geçelim.

KENDİ FIRÇALARIMIZI OLUŞTURALIM
Yazımızın giriş bölümünde belirttiğimiz gibi Fırçalar (Brushes) Photoshop uygulamalarında ve özellikte web tasarımında çokça kullandığımız araçlardır. Bizlerde kendi yapmış olduğumuz şekilleri ve simgeleri fırça haline getirerek sonraki uygulamalarımızda kullanabiliriz. Öncelikle kendi istediğiniz boyutta bir Photoshop dokümanı açın ve sevdiğiniz bir şekli yeni bir layer (katman) üzerinde çizin. Ben aşağıda örnek olması bakımından şu şekli çizdim.

Şimdi çizmiş olduğumuz bu şekli en küçük boyuta getirin. Çiziminizi bir kareye sığabilecek şekilde kesin. Bu iş için Crop aracını kullanabilirsiniz. Çiziminizi kestikten sonra yukarı menüden Edit >> Define Brush bölümünü seçiyoruz. Burada karşımıza gelen küçük pencerede fırça numaramız yazıyor ve bu alanda fırçamıza kendi ismini verebiliyoruz. Bu şekilde kayıt yaptıktan sonra boş bir doküman üzerinde yeni katman oluşturup B tuşuna basarak fırçalara girip kendi oluşturduğumuz fırçayı seçebiliriz. Gördüğünüz üzere kendi fırçalarımızı yapmak gayet kolay. Tek yapmamız gereken şey kendimize özgü ve nerede kullanılacağını bileceğimiz fırçalar yaparak işlerimizi daha da kolaylaştırmak.

ŞİMDİ DE KENDİ DOLGUMUZU OLUŞTURALIM
Photoshop’ta sıkça dolgu aracını kullanıyoruz. Kullandığımız dolguların karakterleri Web 2.0 ile büyük bir değişiklik geçirdi. Eskiden dolgulara verilen önem daha azken şimdi kullanılan değişik dolgu birimleriyle bu konuda da büyük bir adım atıldığını görüyoruz. Web 2.0 konseptli tasarımlara bakarsanız farklı dolgu modellerinin farklı alanlarda kullanıldığını görebilirsiniz. Yazımızın bu bölümünde ise kısaca kendi dolgularımızı nasıl yapacağımızı göreceğiz. Bu iş için bir dolgu modeli belirleyelim ve onu uygulamaya geçelim.

Photoshop’ta birçok dolgu yöntemi vardır. Aslına bakılırsa böyle bir ayrıma gitmek tasarım ufku açısından yanlıştır ancak konuyu daha iyi anlatabilmek ve daha iyi kavrayabilmek için böyle bir ayrıma gitmede bir sakınca görmüyorum.

Dolgu yaparken ilk örneğimizde küçük bir doküman açarak “renk bazlı” bir dolgu yöntemi uygulayacağız. Photoshop’ta 12*12px boyutlarında beyaz arkaplana sahip bir doküman açın. Bu dokümanı en yüksek oranda büyütün. (%1600) Şimdi bu alanda Shift+B tuşuna basarak Pencil Brush aracını seçin. Bu araca 2px değer verin ve renk alanında A8A8A8 rengini ayarlayın. 12 piksellik dokümanımızın ilk 2 pixelini bu dolgu ile doldurun. Daha sonra renk alanında C0C0C0 renk dolgusunu seçin ve kaldığınız noktadan başlayarak yeniden alanı doldurun. Bu şekilde sıralı bir biçimde doküman sonuna kadar ilerleyin. İşleminiz bittikten sonra yine fırçalarda olduğu gibi Edit menüsünden Edit >> Define Pattern alanına gelin. Burada dolgunuza isim vererek dolguyu kullanabilirsiniz. İsterseniz dolgunuzun vermiş olduğu efekti vermek için 400*400px bir boş doküman açın ister yeni bir katman oluşturarak ister oluşturmadan G tuşuna basın. Dolgu aracından Pattern dolguları seçerek kendi yapmış olduğunuz dolguyla çalışmanızı doldurun. Dolgunuzun nasıl göründüğü ortada. Bu işlem gayet kolay ve yapması da fazla çaba gerektirmeyen bir uygulamadır.

Şimdi bir başka dolgu modeline geçelim. Bu dolgu modelinde daha çok resimlerle uğraşacağız. Resim kullanırak yapılan dolgularda dikkat edilmesi gereken nokta ise; dolgunun uygulandığı yüzeyde sürekli tekrarlayacağı için kullanılan ögelerin doğru yerleşimine özen göstermemiz gerektiği. Ancak bu durum her zaman geçerli değil, çünkü sadece tekrarlı çalışmalar yapmayacağız. Dilerseniz kısaca bu yöntemden de bahsedelim.

Şimdi Photoshop’ta 100*100px ve beyaz arkaplana sahip bir doküman açalım. Bu doküman üzerinde bir dolgu oluşturmak için ben Shape alanından bir şekli tercih ettim. Siz de kendi belirlediğiniz küçük bir şekil veya resmi doküman üzerinde kullanabilirsiniz. Resim ögemizi seçtikten sonra bu ögeyi sayfa üzerine belli aralıklarla diziyoruz. Burada sizi yönlendirmek istemiyorum çünkü bu sizin dolgunuz olacak. Ben aşağıda gördüğünüz şekilde dolgumu yaptım ve bunu Edit >> Define Pattern alanından MyPattern adını vererek kaydettim. Dolgumu yaparken dolgunun kendini tekrarlayacağını düşünerek yerleşimi dokümanın ortasına göre yaptım ve daha sonra bunu dolgu olarak başka bir alanda deneyerek sonucu gördüm.

Sadece bu yöntemle sizlerde kendinize farklı dolgu örnekleri hazırlayabilirsiniz. Yukarıda az çok belirtmeye çalıştığım gibi resim bazlı ve farklı dolgu modelleri sayfamızın görünümüne daha fazla renk katacaktır. Özellikle kararlı ve tasarımın gidişini olumlu yönde etkileyecek dolgular Web 2.0 konseptine çok uygun tasarım klişeleri arasında sayılmaktadır.

Umarım bu kısa makale sizlere kendi dolgu ve fırçalarızı hazırlamak için yararlı olur.

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…