Sekmeli Tab Menü Yapmayı Öğrenelim

Bu dersimizde Dreamweaver CS3 de Spry Tab Panel uygulaması yapacağız

Bu tip uygulumlar genellikle gelişmiş web sitelerinde birden fazla kategorilere göre link vermek bilgi vermek gibi Konularda çokça işimize yaramakta.Bunun en canlı örneğini sanal kurs.net ana sayfada Son Eklenen Dersler, En Çok Okunanlar, En Çok Yorumlananlar adlı bölümde görmek mümkün.Bizde dersimizde farklı bir web sitesi için En Son Kayıt olan Mezunlar, En Son Kayıt olan Kullanıcılar ve Ziyaretçi Defterinden son Mesajlar diye bir tab panel oluşturacağız.

Tab Panel uygulaması Dreamweaver üst menü de Spry sekmesinde bulunmaktadır.



Buradan Spry Tab Panel'e tıkladığımızda Tab Panelimiz otomatik olarak web sayfamızda istediğimiz yere yerleşecektir.



İlk eklediğimizde tab panel otomatik olarak seçili olacaktır. Seçili olduğunda Properties panelinde tablar arasında geçiş yapabilir. Varsayılan Paneli değiştirebilir. Paneldeki tab sayısını artırabilir yada azaltabilir, tabların sırasını değiştirebiliriz. Tablar arasında geçiş yapmak için sayfa üzerinde tabın sağ kısmının üzerien fareyi getirdiğimizde bir göz simgesi çıkıcaktır. Bu göze tıkladığımızda o tab ve içeriği değiştirilebilir duruma gelir. Properties panelinden Panels kısmında bulunan artı işaretine tıkladığınızda tab sayısının arttığını göreceksiniz.



Gelelim tabların isimlerini ve içeriklerini değiştirmeye. Mesela Tab 1 i değiştirelim. Bunun için Panel seçili durumda iken Properties panelinden Tab 1 i seçiyoruz. Hangi tab ı seçersek sayfada o tab ın başlığı ve içeriği değiştirilebilir durumda olacaktır.



Aynı şekilde Properties Panelinden diğer tabları seçerek, başlık ve içeriklerini değiştirelim ve kaydedelim. Sayfayı kaydederken gerekli css ve js dosyalarının oluşturulup kaydedildiğini gösteren bir uyarı ile karşılaşırız. Ok diyerek bunlarıda kaydediyoruz ve sayfamızı hotsumuza atarken bu dosyaları unutmuyoruz. Yoksa tab panelimiz çalışmaz. Tab panelin css kodlarına müdahale ederek görselliği zenginleştirebilir ve istediğimiz görünüme sokarız. İşte Panelimizin son hali:



Ayrıca buraya tıklayarak çalışmanın anasayfasından test edebilirsiniz. Umarım faydalı olur.

  • Etiketler;
Yorum Yaz

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

• 11 yıl önce
bunun genişliğini nasıl 800 600 değerlerine indirebiliriz. kullanımı kolay ve güzel bir özellik.
• 11 yıl önce
tşkkrler :kirp:
• 11 yıl önce
ilk önce teşekkürler... dreamweaver cs3 ile sekmeli panel yapıyorum, firefoxda sorunsuz çalışıyor fakat ie de sorun çıkıyor.ilk 2 sekme normal çalışıyor fakat 3., 4., 5., sekmelerin üzerine tıklanmıyor, tıklansa da içerik değişmiyor, sadece görüntü olarak duruyor yani. baya uğraştım fakat çözemedim, nedeni ne olabilir, fikri olan varsa yazarsanız sevinirim. şimdiden teşekkürler...
• 11 yıl önce
ilk önce teşekkürler... dreamweaver cs3 ile sekmeli panel yapıyorum, firefoxda sorunsuz çalışıyor fakat ie de sorun çıkıyor.ilk 2 sekme normal çalışıyor fakat 3., 4., 5., sekmelerin üzerine tıklanmıyor, tıklansa da içerik değişmiyor, sadece görüntü olarak duruyor yani. baya uğraştım fakat çözemedim, nedeni ne olabilir, fikri olan varsa yazarsanız sevinirim. şimdiden teşekkürler...
• 11 yıl önce
abi yaa ben dreamweaver 8 i kullanıyorum ama bende Spry Tab Panel paneli ekranda yok bunun kısa yol tuşu varmı varsa benm msn adresim:erhan@gulec.com eklersen sevinirim abii :uzul:
• 11 yıl önce
Sadece CS3 sürümünde var.
• 8 yıl önce
peki bunun rengini nasıl değiştirebilirm ??? yardımcı olrsanız sevinirim
• 6 yıl önce
ya hocam yaptım da php ekliyemiyorm ekliyince bozuluyor diger sekmelere gecmiyor

Yukarı Git