ALLAH (cc)'IN EN GÜZEL İSİMLERİ (ESMA-ÜL HÜSNA)
el - METİN

Çok sağlam, pek kuvvetli, güçlü

     ANASAYFA    |   BEN KİMİM?   |   GALERİ   |   ZİYARETÇİ DEFTERİ   |   İLETİŞİM      Şüphesiz iman edip salih ameller işleyen, namazı dosdoğru kılan ve zekatı verenlerin mükafatları Rableri katındadır. Onlara korku yoktur. Onlar mahzun da olmayacaklardır. - Bakara-277

Fireworks ile Açılır Menü Yapımı

Fireworks ile Açılır Menü Yapımı
 + Yazıyı Büyüt    - Yazıyı Küçült           

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. Dersler Butonu

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;

Açılır menü oluşturma 1

Yukarıdaki pencerede metin yazan yer menü isimlerini belirtir. Bağ yazan yer, menüye tıklanıldığında gidilecek sayfa adresini belirtir. Hedef yazan yer ise sayfanın nerede açılacağını belirtir. _blank: yeni sayfada, _self: aynı sayfada açılacak demektir.

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.

Açılır menü oluşturma 2

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;

Açılır Menü Görünüm

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;

Açılır menü gelişmiş ayarlar

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;

menü konumu

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ü

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

( 4039 ) kez okundu     -     03.01.2015    Tweetle     
Fireworks ile Açılır Menü Yapımı, açılır menü, fireworks, menü, fireworks menü, fireworks açılır menü, açılır menü hazırlama, mustafa karslı, grafik animasyon dersi, drop-down menu
Ziyaretçi Yorumları
( 1 ) Yorum
Tümünü Göster
MERVE KAYA - OSMANİYE - 27.12.2015 15.56
     HEPSİNİ ÇOK GÜZEL ANLATMIŞSINIZ AMA VİDEO İLE DE ANLATIM OLSAYDI

Yorum Ekle
Güvenliğiniz için iP adresiniz kaydedilmektedir. Herhangi bir Hukuki Dava ile karşılaşmamak için hakaret içeren sözler ve argo kelimeler kullanmayınız.
İsim
:
Yorum
:
En fazla 400 karakter
Şehir
:
E-Posta
:
E-Posta adresi Yayınlanmaz
(Güvenliğiniz için ip adresiniz (54.90.92.204) kaydedilecektir)
  Yeni Dersleri Takip etmek İstiyorum. Adresime E-Posta Gelmesini Onaylıyorum.
BENZER YAZILAR
Android
Bilgisayar Ağları
Bilişim Teknolojileri
C Sharp
Çalışmalar
Donanım
Fireworks
Flash - Action Script 3
HTML
JavaScript
Kişisel Gelişim
Okul Öncesi Etkinlik
PHP
Silverlight
Şanlı Tarihimiz
  Zamanlanmış Duyuru/Ödev Bulunmamaktadır...  
Kişisel resim ve yazıları kullanmak yasaktır. Bunun dışındaki dersleri İsim ve Kaynak göstermek şartıyla kullanmak serbesttir.
 Aktif ziyaretçi : 5
 Bugün : 1009
 Toplam : 1324155
Mustafa KARSLI - Bilişim Teknolojileri Öğretmeni © 2008 - 2017  
Site Haritası

 

5