Sekmeli Tab Menü Yapmayı Öğrenelim
02 Ekim 2008
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.
DAFT_PUNK DAFT_PUNK • 11 yıl önce
bunun genişliğini nasıl 800 600 değerlerine indirebiliriz. kullanımı kolay ve güzel bir özellik.
Desparado22 Desparado22 • 11 yıl önce
Ye$im Ye$im • 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...
OmerYEKDA OmerYEKDA • 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:
RaY RaY • 11 yıl önce
Sadece CS3 sürümünde var.
SaLvaDoRe Xx SaLvaDoRe Xx • 8 yıl önce
peki bunun rengini nasıl değiştirebilirm ??? yardımcı olrsanız sevinirim
Roxannefmassy Roxannefmassy • 6 yıl önce
ya hocam yaptım da php ekliyemiyorm ekliyince bozuluyor diger sekmelere gecmiyor
jQuery ile Cufon Font Kullanımı
Listbox1'deki Elemanları Combobox1'e Eklemek
Final ve Vize Notlarının Hesaplanması
HTML5: <nav> Kullanımı
Üyelik Sistemi Yapalım (2. Bölüm)
Flash'ta Maskeleme Tekniği
“Yüksek hızda tren yolu seyahati mümkün değildir. Çünkü yolcular nefes alamayacak ve boğularak ölecektir” (Prof. Dr. Dionysys Larder - 1830)