2.446 kez okundu

Dreamweaver Sekmeli Tab Menü

10 10 2.446 kez okundu incelendi

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://resim.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://resim.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://resim.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://resim.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://resim.sanalkurs.net/uploads/5_166.jpg

Gelen aramalar :

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
Flash AS3 de kaynayan baloncuk uygulaması

Bu dersimizde FLASH CS4 kullanarak Actionscript 3.0 ile kaynayan su baloncukları yapacağız. Yeni bir sayfa açıyoruz. Boyutları size kalmış. Ben...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter