Selamun Aleyküm, merhaba yeni bir derste görüÅŸmeyi Rabbim nasib etti hamdolsun. Bu dersimde Fireworks CS5 Türkçe kullanarak açılır menü yapmayı anlatacağım inÅŸaallah.

Açılır menüler, web sitelerinde büyük kolaylık ve estetik saÄŸlayan bir özelliktir. Ä°ÅŸte biz de web sitelerinde kullanmak için fireworks kullanarak açılır menü tasarlayacağız. Kod yazmadan basit bir ÅŸekilde açılır menü nasıl yapılır buyrun baÅŸlayalım.

Unutmamalıyız ki açılır menünün amacı internet tarayıcılarında çalıştırmak için yapmaktır. Aksi taktirde resim editörlerinde bir anlam ifade etmeyecektir.

Açılır Menü Yapımı:  Kaynak: http://www.mustafakarsli.com

Ä°lk olarak nasıl bir menü yapacağımıza karar verelim. Ben aÅŸağıda madde iÅŸaretleri ile belirttiÄŸim gibi bir menü yapmayı planlıyorum:

DERSLER

• GRAFÄ°K
  • Fireworks
  • Flash
• WEB

Evet yapmam gereken görünecek / açılır menü eklenecek menü elemanını tasarlamak. Yani yukarıdaki menüye göreDERSLER elemanını / butonunu tasarlıyorum.

1- Vektör araçlarından yuvarlak köÅŸeli dikdörtgen ekledim ve üzerine DERSLER yazısını yazdım. 

2- Sonra web araçlarından dikdörtgen sıcak nokta aracını seçtim ve hazırladığım resmi / DERSLER butonunu içine alacak ÅŸekilde dikdörtgen sıcak nokta çizdim.

3- Sıcak nokta seçili iken DeÄŸiÅŸtir menüsündeki Açılır Menü alt menüsü içindeki Açılır Menü Ekle seçeneÄŸine tıklayalım (DeÄŸiÅŸtir -> Açılır Menü -> Açılır Menü Ekle)  ya da sıcak nokta seçili iken ÅŸeklin ortasında yuvarlak bir tutamaç oluyor ona tıkladığımızda da açılan menüden Açılır Menü Ekle seçeneÄŸini tıklayarak Açılır Menü Düzenleyici Penceresini açalım.

4- Açılan pencere aÅŸağıdaki gibi olacak inceleyecek olursak;

5- Tüm menüleri sırasıyla yukarıdaki gibi ekleyelim. BaÄŸlarını ve hedeflerini verelim. GRAFÄ°K menüsü üst menü olacak diye bağına adres yazmadım. Kaynak: http://www.mustafakarsli.com

6- Fireworks ile Flash alt menü olacak bunun için öncelikle Fireworks menüsüne tıklayarak seçili konuma getirelim (yukarıdaki resimde 1 numaralı yer gibi). Sonra 2 numaralı yerdeki Menüyü Girintile aracına tıklayarak Fireworks menüsünü alt menüye çevirelim. Fireworks yazısı biraz saÄŸa gidecek aÅŸağıdaki resimdeki gibi olacak. Flash içinde aynısını yapalım. Alt menüleri tekrar üst menüye çevirmek istersek bu kez menüyü seçip 2 numaralı yerin solundaki Menüyü Çıkıntıla aracına tıklamamız gerekir.

7- Tüm menü elemanları hazırsa ileri butonuna basalım ve Menümüzün görünüm ayarlarına geçelim aÅŸağıdaki ekranı inceleyecek olursak;

Yukarıdaki ÅŸekli açıklayalım:

• 1 numaralı yer HTML, 8 ve 9 numaralı yerdeki metin ve hücre reklerini deÄŸiÅŸtirerek (hazır stiller olmadan) menü oluÅŸturmamızı saÄŸlar.
• 2 numaralı yer Görüntü, 8 ve 9 numaralı yerdeki metin, hücre rekleri ile hazır stillerde seçerek menü oluÅŸturmamızı saÄŸlar.
• 3 numaralı yer, menünün dikey mi yatay mı olacağını seçtiÄŸimiz yerdir.
• 4 numaralı yer Font, Menünün yazı tipini belirttiÄŸimiz yerdir.
• 5 numaralı yer Boyut, Menü yazısının büyüklüÄŸünü belirttiÄŸimiz yerdir.
• 6 numaralı yer, Yazıların Kalın (B) ve EÄŸik (I) olmasını seçtiÄŸimiz yerdir.
• 7 numaralı yer, yazıların hizalandığı yerdir. Sola yaslı, ortalı ve saÄŸa yaslı.
• 8 numaralı yer Yukarıda Durumu, Menünün görünen halidir. Metin yazan yer, yazı rengini, Hücre yazan yer Menü arkaplan rengini, Stil yazan yer ise hazır stilleri seçmemizi saÄŸlayan yerdir.
• 9 numaralı yer Üzerinde Durumu, Menünün üzerine fare gelince deÄŸiÅŸecek halidir.  Metin yazan yer, yazı rengini, Hücre yazan yer Menü arkaplan rengini, Stil yazan yer ise hazır stilleri seçmemizi saÄŸlayan yerdir.
• 10 numaralı yer, önizleme ekranıdır. Kaynak: http://www.mustafakarsli.com

Yukarıdaki bilgiler ışığında menümüzün görüntüsünü belirleyip ileri butonuna tıklayalım.

8- Açılır menü geliÅŸmiÅŸ özellikleri açılacak aÅŸağıdaki geliÅŸmiÅŸ özellikleri inceleyecek olursak;

Yukarıdaki resmi açıklayalım:

• 1 numaralı yer, hücrenin (menü elemanı) geniÅŸliÄŸini belirttiÄŸimiz yerdir.
• 2 numaralı yer, hücrenin yüksekliÄŸini belirttiÄŸimiz yerdir.
• 3 numaralı yer, metnin hücre kenarına olan mesafesini belirtir. (Html deki cellpadding) 
• 4 numaralı yer, Metnin sol kenardan olan uzaklığını belirtir.
• 5 numaralı yer, Hücrelerin birbirine olan uzaklığını belirtir. (Html deki cellspacing)
• 6 numaralı yer, menünün ekranda gecikme süresini belirtir. 1000ms 1 saniye demektir.
• 7 numaralı yer, Menü kenarlıklarının görünüp görünmeyeceÄŸini belirtmemizi saÄŸlar.
• 8 numaralı yer, kenarlık kalınlığını belirtir.
• 9 numaralı yer, menülerin altındaki gölge rengidir.
• 10 numaralı yer, kenarlık rengidir. Kaynak: http://www.mustafakarsli.com
• 11 numaralı yer, menü kenarlığının (sadece üst ve sol kenarlığın) gölge rengidir.

Burada dikkat edilmesi gereken birÅŸeyde hazır stil kullanıldıysa 8,10 ve 11 numaralı alanlar pasif görünecektir.

Yukarıdaki bilgilere göre deÄŸiÅŸiklik yapıldıktan sonra ileri butonuna tıklayalım ve konum ayarlarına geçelim.

9- Açılır menü konum ayarları penceresi açılacak aÅŸağıdaki resmi inceleyecek olursak;

Yukarıdaki görüntüyü açıklayalım:

• 1 numaralı alan, üst menünün konum ayarlarının bulunduÄŸu yerdir.
• 2 numaralı alan, açılacak menünün konumunun seçildiÄŸi yerdir. Burada gri boyalı ana menü elemanını mavi boyalı yer ise açılacak menüyü belirtir. Konumu isterseniz bu ÅŸekillerin altındaki X ve S deÄŸerlerini girerek de belirtebilirsiniz.
• 3 numaralı alan, alt menünün konum ayarlarının bulunduÄŸu yerdir.
• 4 numaralı alan,  açılacak alt menünün konumunun seçildiÄŸi yerdir. Burada gri boyalı üst menü elemanını mavi boyalı yer ise alt menüyü belirtir. Konumu isterseniz bu ÅŸekillerin altındaki X ve S deÄŸerlerini girerek de belirtebilirsiniz.
• 5 numaralı alan, Alt menünün üst menü ile aynı konuma yerleÅŸmesini saÄŸlar.

Yukarıdaki bilgilere göre menünün konumunu da seçelim ve Bitti butonuna tıklayarak menümüzü oluÅŸturalım.

Açılır menümüz hazır. Kaynak: http://www.mustafakarsli.com

F12 ile tarayıcıda önizleyip kullanabilirz.

Ya da Dosya menüsünden Dışa Aktarı seçip kaydederek kullanabiliriz.

Açılır menüyü tekrar düzenlemek isterseniz DeÄŸiÅŸtir menüsünden Açılır Menü alt menüsünden Açılır Menüyü Düzenle seçeneÄŸine tıklayarak ya da sıcak nokta seçili iken ortadaki yuvarlak tutamaça tıklayarak da aynı menüye eriÅŸebilirsiniz.

Açılır menüyü silmek isterseniz DeÄŸiÅŸtir menüsünden Açılır Menü alt menüsünden Açılır Menüyü Sil seçeneÄŸine tıklayarak silebilirsiniz.

Derslerle ilgili görüÅŸ ve sorularınızı aÅŸağıdaki yorum ekle bölümünden yazabilirsiniz.

Ä°lerleyen günlerde tekrar görüÅŸmek üzere saÄŸlıcakla kalınız...

Mustafa KARSLI   Kaynak: http://www.mustafakarsli.com