Kolayca-Spry-Menü-Yapımı_emresupcinİyi akşamlar sevgili okurlar,

Dreamweaver’da spry menü yapımını çoğu web tasarım ile uğraşan veya yeni başlayan arkadaşlarımız yapmakta güçlük çekmekte. Bende bu dersimizde sizlere kolay bir şekilde SPRY Mününün nasıl yapıldığını anlatacağım. Ancak Kolay SPRY menü yapmak ve düzenlemek için ipuçlarını aşağıda anlatacağım ders açıklamasında görebilirsiniz.

 

Yeni açılan veya var olan HTML sayfasında istenen yere spry menü çubuğundan yatay veya dikey olarak seçilen menü eklenir.  Ana menü ve alt menüler düzenlendikten sonra;

 

Öncelikle image olarak kullanılacak 2 adet resim veya butonlar hazırlanmalıdır.

Dreamweaver de açılan bir html sayfası kaydedilir ve üst menülerden spry menüsünden spry menü çubuğu seçilir, menünün yatay veya dikey olarak kararlaştırılmasından sonra menünün seçenekleri ve alt seçenekleri düzenlenir.

 

 

1- Alt elemansız menü başlığı için image: ulMenuBarHorizontal a stil özelliğinden background image kısmından

————————————————–

2- Alt elemanlı menü başlığı için image: ulMenuBarHorizontal a.MenuBarItemSubMenu stil özelliğinden background image kısmından resim seçilip repeat özelliği uygulanır. ve X ve Y pozisyonları sıfırlanmalıdır.

————————————————–

3- Alt elemanlı menünün alt elemanları için image: ulMenuBarHorizontal a.MenuBarSubItemMenuHover stil özelliğinden background image kısmından resim seçilip repeat özelliği uygulanır ve X ve Y pozisyonları sıfırlanmalıdır.

————————————————–

4- Alt elemanlı menünün 1. alt elemnı için image: ulMenuBarHorizontal a.MenuBarSubItemMenu stil özelliğinden background image kısmından resim seçilip repeat özelliği uygulanır ve X ve Y pozisyonları sıfırlanmalıdır.

————————————————–

5- Fare üzerine gelince image değişmesi için hover özelliği olan stil özelliklerinin background image’sine image eklemek gerekiyor ekleme sırasında repeat özelliği açılıp X ve Y pozisyonları sıfırlanmalıdır.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Hafıza Kartları Türleri ve Açıklamaları Nelerdir?

Sonraki Yazı:Nitro PDF Programı!

BENZER YAZILAR
YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.