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