Açılır menü yapalım (Drop-Down Menü)

Bu derste bir çok sitede gördüğünüz ve sayfalara ayrı bir güzellik katan bir drop down menü (açılır menü, pop up menü) hazırlayacağız.

Fireworks'te yeni bir döküman açın: Boyutu 800 x 50 pixel olsun.

Yapacağınız ilk şey ızgraları (grid) açmak olacaktır. Bunun için aşağıdaki yolu izleyin:

View > Grid > Show Grid
View > Grid > Snap to Grid

Şimdi butonları yapma zamanı. Bir kutu çizin ve buton olarak üzerine yazınızı yazın.



Sırada diğer butonlar var. Bu butonu 4 kez çoğaltın ve üzerlerine istediğiniz yazıları girin.

Sonra Slice aracını seçin ve herbir butonun etrafında yapacağımız drop down menü için dilimler oluşturun. Ben burada sadece biri için yapacağım.

Aşağıda görüldüğü gibi olacaktır:



Şimdi drop down menü eklemek istediğiniz butonun üzerindeki dilimi seçin ve şu yolu izleyin: Modify > Pop-up Menu > Add Pop-up Menu.

Şu şekilde bir form gelecektir. İlgili alanları aşağıdaki şekilde olduğu üzere doldurun. Text kısmına menüde görünecek isimler, link kısmına da buna tıklayınca gideceği adresi yazın. Target kısmından eğer sayfanızın ayrı bir sayfa olarak açılmasını istiyorsanız onu ve diğer seçeneklerden birini belirleyin.



Bunu yaptıktan sonra "Next" tıklayın ve ve menünüzün görünmesini istediğiniz ayarları belirleyin. Ben aşağıda göreceğiniz üzere beyaz zemin ve yeşil yazı rengini seçiyorum.



Bunu da hallettikten sonra tekrar "Next" deyin. Şimdi menünün açılacağı yeri konumlandıracaksınız. (sağ, sol, aşağı, yukarı) Resimde zaten şekillerden anlayabiliyorsunuz. Ben "aşağı (down)" seçiyorum.



"DONE" deyin.

Çalışmanız hazır. Şimdiki yapacağımız iş şu olacak: Menüyü kopyalayıp yeni bir Fireworks dökümanına yapıştıracağız. Amacımız hiç boş yer kalmamasını sağlamak olacaktır. Bunun için önce Ctrl + A ile tümü seç yapın, sonra Ctrl + C kopyalayın ve File > New > Ok menüsüne giderek tam kopyaladığımız boyutlarda açılan dosyaya Ctrl+V ile yapıştırın.

Aşağıdaki gibi bir sonuç elde edeceksiniz.



Şimdi File > Export menüsüne gidin ve dosyanızı kaydedin, sonra Dreamweaver'ı açın ve sayfanıza ekleyin. Çalışmamızın son görünümü aşağıdaki gibi olacaktır:

  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

merhabalar öncelikle böyle bir site tasarlayıp bizlere destekci oldugunuz için teşekkürler.benim sorum fireworks ta açılır menü yapıyorum(pop-up menü) güzelce tasarlıyorum dreamweara aktarıyorum ama bir türlü çalıştıramıyorum dfeamwer kısmını anlatırsanız sevinirin teşşekkürler
Süperrrrrrrrrrrrrrrrrrrrrrrrrrrr.Hocam bu kadar çok güzel ya.herkese yapmayı tavsiye ederim.arkadaşım hocamlarımı dikkatli dinlersen öğrenirsin.ben yaptım.çok süper oldu.hepinizin eline sağlık .vay be.:gul:
tskler sayın hocam pekı bu calısmayı yaptıktan sonra flash a aktarabılırmıyız ? ben fıreworks te yapıp flash a atmak ıstıyorumda her 2 programda macromedıanın oldugu ıcın programdan programam gecıs olması lazım bunu acıklarsanız sevınırım
Bu çalışmayı Flash'ta kullanamazsın. Flash'ın kendine özgü menü yapma stili var.
sirecel abi sağolasın. fireworks kullanmıyordum ki nedeni photoshop gibi grafik üzerine odaklı olmasıydı. Ama gel görki yeniden tasarıma başlamış gibiyim... Sağol
Hocam merhaba acaba bu açılır menüyü joomla da çalıştırabilir miyiz?
cok güzel bir calisma tessekürler.
:sasir: valla bişiler yaptım ama hiç bi şeye benzetemedim yaptığım şeyi
Joomla'da çalışır. Ama yine de Forum bölümünden Joomla kısmına bir danış. DReamweaver'a aktaramayan arkadaşa: HTML olarak çalışmanı kaydet, Sonra DW'de aç, tabloyu olduğu gibi kopyala kendi sayfana yapıştır ama resimler klasörünüde birlikte aynı dizine kaydetmeyi unutma. Resimleri görmezse çalışmaz.
Merhabalar hocam.Ellerinize, dillerinize sağlık.Sayenizde birşeyler öğreniyoruz, ve gelecekte daha iyi şeyler yapabilme adına umutlanıyoruz. Allah Razı Olsun.
Add pop-up menu'ye tıkladığımda pop-up menu penceresi açılmıyor.Bir çözümünüz var mı?
Afedersiniz slice tool u yeni fark ettim
İyi akşamlar siracel bu uygulamayı bitirdim ama web ortamına nasıl aktarılıyor. Yardımlarınız şimdiden teşekkür ederim
Sayfanızı slice tool ile dilimleyerek HTML olarak kaydetmeniz gerekiyor. Daha sonra kaydettiğiniz HTML dosyasını Dreamweave'da açarak düzenleyebilirsiniz.
merhaba, fireworks de pop-up menü hazırlanıyo çok güzel vede kolay yapılıyo da efekt verilemiyomu acaba.bu konu da beni bilgilendirirseniz sevinirim.
Güzel bir çalışma bende yeni yeni bişeyler öğreniyorum
PEKİ NASIL YAYINLANACAK BU
teşekkürler .çok faydası olacak
hocam çalılmayı export ettik ama dw ye ekleyemiyoruz resimleri klasöre koyduğumuz halde gözük müyor yardım ederseniz sevinirim
Resimleri elle koymayacaksın. Böyle yaparsan HTML dosyası içinden yollarını da düzeltmen gerekir.
meraba hocam elinize kolunuza saglık Allah razi olsun çok yardımcı oluyorsunuz teşekkürler:D
slm ben edit pop-up hazırladım fakat hoca mousela uzerıne geldıgımızde ayyrıca resimlerin acılmasını ıstıyo onu nasıl yapabilirim acilllllll
Mouse üzerine geldiğinde ayrı resimlerin açılması: Bunu ayrı bir ders olarak işleriz bir ara.
swf olarak kaydedince neden çalışmıyor?
Bu çalışma Flash için yapılmış bir çalışma değil, Javascript'le açılır menü yapımı bir nevi. Fireworks bunun için kolaylıklar sağlamış. Çalışmayı Export deyip HTML olarak kaydetmeniz gerekiyor.
mrb hocam supersiniz çok ta ihtiyacım vardı bu özelliğeee:gul:
hocam merhaba dediğiniz gibi yaptım güzelde oldu çalışmasında hiç bir problen yok tek hata linkleri açmıyor explorer'da mause butonun üstüne getirdiğimde altta gideceği linki gösteriyo fakat tıklandığında gitmiyo yardımcı olursan sevinirim .
yha hocam biz link veriyoruz ama açılmıyo nerde hata war bizde çözemedik. yardımınızı bekliyorum...
teşekkürler:kirp:
hocam bunu nasıl dreamra ekliyoruz lütfen onuda gösterirmisin
örnek çalışmanızı yaptım dediğiniz gibi bağlatılarda sorun yaşıyorum o link e tıkladıgımda sayfayı açmıyor hepsi tek bir klosörde farklı biryerden almıyor bağlantıyı bu kısmı açıklarmısınız
teşşekür ederim çok güzel bir örnek ama ben butonlara tıkladıgımda o sayfaya gidemiyorum lilnkleride söyledikleriniz dogrultusunda verdim dremweaver da bağladım ama olmadı lutfen yardımcı bulun en kısa zamanda bekliyrum teşekkürler
Güzel çalışma tşkler.
hocam güzzel bir ders olmuş tesekkürler.ben kendi istediğim gibi bir menü tasarladım dw ye de aktardım ama acılır menünün seffaflık gibi bi ayarı oldugunu göremedim.acılır münün üstüne geldigimde arkadaki yazıresim vb. görünmüyor.bunu nasıl halledebilirim
hocam bunun cs3 de anlatımı olrusa çok iyi olcak her zmn işime yarıcak :) lütfen
Merhaba. Ben böyle bir menü çalışması yaptım. Html olarak export edip onu dreamweaver'da açtım ve sonra asp olarak bunu include ile sayfa içerisine çağırdım lakin menüm çalışmadı-açılmadı. Nedendir acaba? Çözüm yolu nedir?
emeğine sağlık
Öncelile çok teşekkür ediyorum Siraceddin El'e. Burada havada kalan soruları haddim olmayarak yanıtlamaya çalışayım. * Bu çalışma bire bir CS3 te de yapılabilmektedir zira teorik olarak "Filtreler" haricinde herşeyin eksiği değil fazlası vardır CS3'de.
* Bu çalışmayı Dreamweaver'a aktarmak gibi birşey söz konusu olamaz çünkü zaten Fireworks size bunu "Export" edişiniz doğrultusunda herhangi bir HTML sayfası olarak verir. Diğer HTML sayfalarından tek eksiği, içerisinde sadece yaptığımız menünün olmasıdır. :D Bu menüyü hazırlamakta olduğunuz sayfalara entegre etmek bir miktar HTML bilgisi gerektirmektedir fakat gözünüz korkmasın, öyle çok zor birşey değildir. Bir miktar araştırmanız ve okumanız kâfi gelecektir.
hocam teşekkürler.
teşekkürler. açılır menlere dreamweaver de nasıl link ekleyeceğiz nu konuyu çözemedim.yardımcı olacak olur mu.
çok teşekkürler
yha herşey ii hoş yapabiliorum. dreamweawer a ekliorum. ama çalışmıo. yani link verirken hatamı yapıorum acaba:-dusun::sasir:
saolun hocam çok yardımcı oluosunuz ama ben fıreworksda kar ağdıramıyorum yardımcı olursanız çok sevinirim ...
çoqq teşekürLerrr...çoq işime yarıcak bu açılır menüler....emeğiniz için saolun ellerinize sağlık :gul::kirp:
çok güzel anlatmışsınız ama bunu dreamweaver a atığımızda onlara nasıl link vericezz:-dusun::sasir:
sagolasin cok güzel dersleriniz var devami gelir ins.
macromedia flash 8 bilen vrsa bna yardm edebilr mi lütfenn ! :( yapamıorum olmuo işte uufff yha :agla:
eyvallah allah razı olsun valla böyle insanlarda olmasa billmediklerimizi nereden öğrenecez bilmiyorum 'ZEKAT SADECE PARA İLE YAPILAN BİR İBADET DEÐİLDİR ALLAH HEPİMİZİ İLMİYLE ZEKAT VERENLERDEN EYLESİN
Çok güzel, anlaşılır şekilde göstermişsiniz ama, altta açılan butonlar programın standart koyduğu butonlar gibi çıkıyor. Açıldığı zaman ana menüdeki butonların aynısından olması için ne yapmak lazım?

Yukarı Git