SanaL-PlatforM.Tr.Gg | Yeni CSS Tasarımımız İle Tekrar Karşınızdayız .. ||
  dw5
 
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.

http://img.sanalkurs.net/uploads/1_357.jpg

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

http://img.sanalkurs.net/uploads/resim2_6.jpg

İ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.

http://img.sanalkurs.net/uploads/3_244.jpg

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.

http://img.sanalkurs.net/uploads/4_204.jpg

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:

http://img.sanalkurs.net/uploads/5_166.jpg
 
  ۰۪۪۫۫●۪۫۰ Bugün 10 ziyaretçi (14 klik) Kişi Buradaydı ..! | Copyright © 2008-2009 ßy Sczhofr3n | ۰۪۪۫۫●۪۫۰  
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol