Dreamweaver ile Açılır Menüler Oluşturmak
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. Öncelikle Dreamweaver üzerinde yeni bir HTML doküman oluşturun. Bu dokümanınızı ister bir dizin isterseniz de farklı bir alana isim vererek kaydedin.
Şimdi bilgisayarınızda hazırlamış olduğunuz bir buton tarzı resmi veya hazır olarak bulunan buton görünümlü bir resmi sayfanıza yerleştirin. Bunu yapabilmek için Common menüsünden Image alanına gelebilir ve burdan sayfaya eklemek istediğiniz resmi seçebilirsiniz. Ben aşağıda görmüş olduğunuz resmi sayfama ekliyor ve çalışmama devam ediyorum.
Bu resmi sayfaya ekledikten sonra sıra açılır menümüzü oluşturacağımız işlem aşamasına geliyor. Resme bir kere tıklayıp seçtikten sonra F9 tuşuna basarak Tag Inspector alanını aktif hale getiriyoruz. Yine resim seçiliyken burada Behaviors >> Show Pop-Up Menu sekmesine geliyoruz. Bu alana tıkladığımız zaman karşımıza bir pencere açılacak ve menü işlemlerimizi bu pencere altında devam ettireceğiz.
Açılan penceremizde açılır menümüze ait bölümleri tanımlayabilir ve bunlara link verebiliriz. İlk alanda bu işlemleri yapabilmemiz için bazı bölümler göreceksiniz. Buraya sırasıyla bir iki link eklemesi yapalım ve işlemi devam ettirelim.
Bu alanda menü birimlerimin görünecek metin bilgisini yukarıya Text olarak bildirilen alana yazıyorum. Onun hemen altındaki link alanına ise bu bağlantının ulaşacağı linki yazıyorum ve daha sonra bu bilgiyi girdikten sonra + tuşuna basarak yeni bir bağlantı eklemeye başlıyorum. Şayet siz yeterli sayıda bağlantı eklediğinizi düşünüyorsanız + tuşuna basmadan diğer sekmelere geçebilirsiniz.
Bundan sonraki sekmelerde sırasıyla Appearance, Advanced ve Position sekmelerinde bazı değişiklikler yaparak menümüzü şekillendireceğiz.
Şimdi Content sekmesinde menümüzün görünecek olan bağlantılarını yazdık ve linklerini verdik. Bundan sonra Appearance kısmına geçerek menümüzün renklerini ayarlayalım.
Appearance sekmesinde üst bölümde menümüzün ne “tipte” bir menü olduğunu belirliyoruz. Karşımıza iki seçenek sunuluyor; Vertical yani dikey ve Horizontal, yatay menü. Bu aşamada menü sisteminin tipini belirlemek size kalmış. Ben bu örnekte Vertical tipi seçtim ve işlemlerime böyle devam edeceğim.
Yine aynı bölümde menü bağlantımızın görüneceği font tipini, boyutunu ve hizasını seçebiliyoruz. Bu işlemlerden sonra aşağı alanda ise menü birimlerimizin fare hareketleri sırasında alacağı renk değerlerini girmemiz gerekiyor.
Up state alanı menümüzün açılır bölümünün kendi renk değerlerini gösterirken Over state alanı ise menü birimlerinin üzerine fare ile gelindiğinde alınacak olan renk değerlerini göstermekte. Bu alandaki renk belirlemelerini siz kendiniz deneyerek yapabilirsiniz. Ben aşağıda görmüş olduğunuz renk biçimlerinde ayarlamalar yaptım ve bunu örneğim üzerine yansıttım.
Bu aşamadan sonra aynı panelde Advanced sekmesine geliyoruz. Bu bölümde ise menü birimlerimizin sahip olacağı hüce boşluklarını ve kenarlık ayarlarını yapıyoruz. Cellpadding ve Cellspacing bölümlerine vereceğiniz farklı değerlerde değimlerin menü sisteminize nasıl yansıdığını anında görebilirsiniz. Bu alanda yukarıda söylediğim gibi menümüze kenarlık (border) ekleyebilir ve kenarlıklarınıza renkler verebilirsiniz. Aşağıda örnek çalışmanın değerlerini görebilirsiniz.
Bu alandaki değerlerimizi de verdikten sonra son sekmemiz olan Position bölümüne geliyoruz. Bu alanda menü birimlerimizin genel pozisyonlarını ayarlayacak ve bunlar hakkında ayarlamalar yapacağız.
Position sekmesinde ise menümüzün fare ile üzerine gelindiğinde alacağı pozisyonu ayarlıyoruz. Bu bölümde genellikle menümüzün ilgili resmin veya bağlantının altında çıkmasını istiyorsak ikinci resmi seçiyoruz. Bu bölümde hangi alanı seçerseniz seçin X ve Y koordinatlarına değerler verebilir ve menü pozisyonunuzu bu şekilde de ayarlayabilirsiniz. Ben yine aşağıda görmüş olduğunuz örnek çalışma için pozisyon bölümünün bir resmini göstermek istiyorum.
Bu aşamadan sonra açılır menümüz hazır vaziyette. Dosyanızı kaydederek F12 tuşuna basıp tarayıcınızda nasıl çalıştığını görebilirsiniz.
Bu makalemizde ben örneğimi tamamladım ve bu alanda örneğin son haline ulaşmanız mümkün. Makale üzerinde bahsettiğimiz gibi tüm işlemleri metin tabanlı bağlantılarınız için de kullanabilir ve menülerinizi oluşturabilirsiniz. Bir sayfa içinde farklı alanlarda ve farklı bölgelerde istediğiniz kadar açılır menü kullanabilir ve bunların tipini belirleyebilirsiniz.
Bu menü sisteminde dikkat etmeniz gereken tek nokta ise programın sizin için oluşturduğu mm_menu.js dosyasının sayfanız ile aynı dizinde olmasına dikkat etmek. Zaten kaydettiğiniz sayfa içinde de bu JS dosyasına ithafta bulunulduğunu ve yolunun yazıldığını göreceksiniz. Web sayfalarınızda veya farklı dizinler içinde bu menü sistemini kullanırken pathlerinizi buna göre ayarlamanız sizin için iyi olacaktır.
Umarım sizler için faydalı olur. Bir başka makalede görüşmek üzere.
Rastgele Yazılar
Dreamweaver ile Açılır Menüler Oluşturmak yazısı için 30 yorum yapılmış...
Yorumunuzu Yazın
Süpersin!
Teşekkürler
Ne demek efendim, inşallah yararlı olmuştur. :)
[...] Dreamweaver ile Açılır Menüler Oluşturmak [t’infection] [...]
emeğinize sağlık çok güzel ve faydalı bir paylaşımdevamını bekliyoruz bu siteyi sık kullanılar bölümüne ekledim…
Çok Teşekkürler.
bende show pop up menu sekmesi açılmıyor ben cs3 ü kullanıyorum orda ~deprecated sekmesi içinde yer alıyor ve show pop up sekmesi siyah renkte deil yani kapalı gözüküyor birşeyler engelliyor sanırım yardımınız için şimdididen teşekkürler
gerçekten emeğinize sağlık benim aradığım da tam da buydu işte bizim hoca bişey öğretmeden site tasarımını istiyo sonrada yapamıyoruz. çokk teşekkürler:)
güzel
aynı yöntemle fireworkste de yapılabilir
çok teşekkkürler… Bilgiler açık ve net. Ellerine sağlık…
saol güzel anlatmıssın arkadasım ama ben CS3 kullanıyorum ve show pop-up kullanılabilir durumda değil acaba bunun nedenini söyleyebilecek olan biri var mı??? yardımcı olursanız cok sevinirim…
çok yardımcı oldunuz
birde yaptığım menunun framın altında kalıp dıger frame tasamamasını nasıl cozebılırım…
sayfayı framele 2 e ayırıyorum eger menu en ustekı framedeyse acılmaya basladıgında 2 cı frame gelen kısımları onun altında kalıyor ve gorunmuyor ne ypmalıyım
çok güzel anlatmışsınız çok teşekkürler ama diğer sayfalara nasıl ekleyeceğiz bu menü onunla uğraşıyorum ssatlerdir
Ben bunu resim üzerinde değil de yazı üzerinde yapmak istiyorum ama show pop on menu aktif değil. Ne yapabilirim.
@Kerem, önce bir Html sayfa açın Dw üzerinde sonra bu sayfayı index.html olarak kaydedin. Sayfa içinde bir metin yazın ve bu metine link verin. Bu linki verirken a href=”#” şeklinde olmasına dikkat edin. Daha sonra verdiğiniz metin linki seçip Shift F4 tuşuna basarak Pop Up menüyü ekleyin.
CS3 kullanıyorum ve show pop-up aktif degil yardımcı olabilecek varmı ?
cok guzel olmus kardeşim emeğe saygı..!
Merhabalar güzel ve yaralı bir makale…
tesekkürler
diger dersin ‘Dreamweaver ile basit resim değişimi’ dersinin
çalışma resimleri ni göremiyorum X işareti var.
yoksa hata benim tarayıcımda mı?
merhaba..ben başka bir proğramla menü oluşturdum.bunu dreamweaverda nasıl çalıştıracağımı bilmiyorum.yardım edermisiniz lütfen
bizi aydınlattıgınız için teşekkurler ama aradığımız cevabı biz kendimiz bulduk bys
mükelmmelsiniz
Dreamweaver acemi tasarimcilar için bir nimet olmalı.
süper eklentileri de var.
anlatim için teşekkürler…
dreamwewer 8 kullanıom portable ,
http://img33.imageshack.us/i/rumkalesablon03.jpg/
böle bir şey cıkıo yani Show Pop-Up Menu yok napmam gerek yardım lütfen cemalettin-@hotmail.com msn adresine mail atın
image lar gitmiş.ilginene bile yok.iş yapmaz.imaheshac gibi bir sunucuya eklenen resimlerin sonu hep böyle olur.belki bunlar imageshack a eklenememişler ama işlevleri aynı.bi süre sonra sunucu resimleri siliyo…bilen de çıkmıyo..
ne zaman adam gibi bi paylaşım yaparsınız bilinmez ama ilk ve son gelişim olsun bu siteye..
Arkadaşlar tamamen dreamweawerin sürmüyle ilgili bişi dreamweawer 8 kurun yolunuza devam edin:)
Arkadaşlar cs4 kurun keyfinize bakın derim..
abcim benem dreamweaver türkce senin dedığın Show Pop-Up Menu ben de yok sana zahmet bi de türkçe anlatır mısın sımdıden tesekkürler
teşekkürler bilğiler için
yorum yazıyorum ya bu yorum yapma menüsünü nerden nasil ekleyebilirim yardımcı olurmusunuz rija etsem adresi veya sitesi varmı :(
evt ya bu yorum sitesi yapma çok güzelmiş arkdaşım
bende aynı durumdayım.
merhaba arkadaşlar bir sorunum var bi türlü çözemiyorum dreamvewaerda show pop-up menü yapabiliyorum ama açılan menüdeki yerlere link veriyorum tarayıcıda çalıştırıyorum o linkler çalışmıyor bunun nedeni ne olabilir sitem bunun yüzünden yarım kaldı lütfen yardımcı olur musunuz????