Dreamweaver'da jQuery ile Katlanabilir Paneller Nasıl Oluşturulur - mankenler

Dreamweaver'daki jQuery UI abonelik widgeti, site ziyaretçilerinin web sayfasını yenilemeden açıp kapatabildiği katlanabilir paneller eklemeyi kolaylaştırır. Bu jQuery özelliği, tarayıcı penceresinde daha az alana daha fazla bilgi görüntüleyerek bir sayfadaki alanı daha iyi kullanmanıza olanak tanır.

Akordeon katlanabilir panellerin, bu doğa web sitesinde her bir şarkının kuşların adını, fotoğrafını ve yaşam alanını nasıl içerdiğini görebilirsiniz. Sonuç, tüm kuşların adlarını bir sayfada kolayca görebilmenizdir. Herhangi bir kuşun açıklamasını görüntülemek için, kullanıcının panelin üst kısmındaki (kuş adının göründüğü) sekmeyi tıklaması yeterlidir ve panel anında açılır.

Turuncu renkli kurbanlar için fotoğraf ve açıklama sayfadaki diğerleri kapalı iken açıktır. JQuery'nın güzelliği, sayfaların panellerin açılıp kapanması için yeniden yüklenmesi gerekmez. Bir sekmeyi bir kez tıklarsanız anında bir panel açılır. Başka bir sekmeyi tıklayın ve daha önce açılmış olan panel kapanırken bu panel açılır.

Katlanabilir paneller metin, resim ve ses, video ve Flash dosyaları gibi multimedya dosyalarını görüntülemek için kullanılabilir.

Bir akordeon panelini (veya Dreamweaver'daki birçok gelişmiş özelliği) bir web tarayıcısında görüntüleneceği şekilde görüntülemek için Dreamweaver çalışma alanının sol üst kısmındaki Canlı görüntüleme düğmesini tıklatmanız gerekir.

Dreamweaver'da jQuery UI menüsü ile bir dizi akordeon paneli oluşturduktan sonra, takip eden talimatlarda gösterildiği gibi Özellik denetçisini kullanarak bir dizi panel ayarını değiştirebilirsiniz.

Bir akordeon panel seti oluşturmak için aşağıdaki adımları izleyin:

1. İmlecinizi, akordeon panellerinin görünmesini istediğiniz bir sayfaya yerleştirin.

2. Ekle → jQuery UI → Akordeonum'u seçin veya jQuery UI Ekleme panelinde Akordeon öğesini tıklayın.

   Sayfada üç panelli bir jQuery UI daraltılabilir akordeon panel grubu görünür.

   

3. Her bir panelin üst kısmındaki Bölüm sözcüğünü seçin ve panelin Sekme alanında görünmesini istediğiniz metne dönüştürün.

   Varsayılan olarak, Sekme alanında bulunan metin düz metindir, ancak ilgili CSS kuralını değiştirerek veya metni başlık etiketleri gibi HTML etiketleri kullanarak biçimlendirebilirsiniz.

4. Her panelin ana alanındaki İçerik sözcüğünü seçin ve görüntülemek istediğiniz herhangi bir metin veya resim girin.

   Metni bir sayfada, sayfadaki herhangi bir yerde yapıştırdığınız gibi yapıştırabilirsiniz. Benzer şekilde, bir sayfadaki başka yerlerde olduğu gibi panellere görüntü yerleştirirsiniz: İmlecinizi panele yerleştirin, Ekle → Görüntü → Resim'i seçin ve görüntülemek istediğiniz GIF, JPEG veya PNG dosyasını seçin.Dreamweaver'ı görüntüleri optimize etmek için kullanmak istiyorsanız bir Photoshop dosyası da seçebilirsiniz.

   Metni bir panele yapıştırdığınızda, Dreamweaver uygulamasına yapıştırdığınız metinde korumak istediğiniz biçimlendirme miktarını seçmek için Düzenle → Özel Yapıştır'ı seçin. Korunan biçimlendirme miktarını sınırlamak, olası stil uyuşmazlıklarını azaltabilir.

5. Panel ayarlarını değiştirmek için, tasarım alanında panellerin üstündeki mavi jQuery Akordeon sekmesini tıklayın.

   Mavi sekmeyi tıklattığınızda, panel ayarları, Özellik denetçisinde görünür. (Mavi sekmeyi düzgün tıklamak zor olabilir, bu nedenle mavi bölgeyi tıkladığınızdan emin olun.) Sayfadaki herhangi bir yeri tıklatırsanız, müfettiş varsayılan ayarlarına döner.

   

6. Özellik denetçisindeki Paneller alanını kullanarak panel ekleyin veya kaldırın.

   Panel eklemek için Paneller alanının sağındaki artı işaretini (+) tıklayın. Bir panoyu bir akordeon grubundan çıkarmak için, önce Özellik denetçisindeki Paneller açılır listesinden panel adını seçin ve eksi işaretini (@@ dakika) tıklayın.

   Artı işaretini tıklayarak başka bir panel ekleyebilirsiniz.

7. Etkinlik açılır menüsünü kullanarak panellerin nasıl açılacağını değiştirin.

   Etkinlik ayarları, bir kullanıcı bir panel sekmesini tıkladığında (tıklayın) veya bir imleci panel sekmesinin üzerine getirdiğinde panellerin açılıp açılmayacağını kontrol eder (Fareyle üzerine gelin).

8. İstediğiniz diğer panel seçeneklerini ayarlayın.

   Özellik denetçisindeki akordeon seçenekleri isteğe bağlıdır ve panellerin herhangi birini veya tümünü devre dışı bırakma (Devre Dışı Bırakma) ve panellerin açılma ve kapanma şeklini animasyon yapma (Animate açılır liste) özelliklerini içerir.

9. Sayfayı kaydetmek için Dosya → Kaydet'i seçin; Bağımlı Dosyaları Kopyala iletişim kutusu görüntülendiğinde ilgili tüm dosyaları oluşturmak için Tamam'ı tıklatın.

   Spry özelliklerinin çalışabilmesi için, web sayfasını yüklediğinizde bu dosyaları web sunucunuza yüklemeniz gerekir.

10. Yazı tipi yüzü veya metin rengi gibi panelin görünümünü değiştirmek için, ilgili CSS kuralı düzenleyin.

    Not: Sayfalar kaydedilene ve Dreamweaver ilgili CSS ve JavaScript dosyalarını oluşturana kadar bir akordeon paneli için ilgili stilleri düzenleyemezsiniz.

11. Panellerin bir web tarayıcısında nasıl görüneceğini görmek için çalışma alanının üst kısmındaki dünya simgesini tıklayın ve sayfayı önizlemek için kullanmak istediğiniz tarayıcıyı seçin.

    Bilgisayarınızı JavaScript veya başka bir programlama gerektiren etkileşimli bir özelliğe sahip bir sayfayı önizlemek için kullanıyorsanız, Internet Explorer da dahil olmak üzere bazı web tarayıcıları, sayfayı görüntülemek için ActiveX denetimlerine izin vermeniz gerektiğini belirten bir uyarı görüntüler.

    Bu, yalnızca sayfanın kaydedildiği bilgisayarda açıldığında görünen bir güvenlik uyarısıdır. Sayfayı bir web sunucusuna yayımlar ve daha sonra bir İnternet bağlantısı üzerinden görüntülediğinizde bu hata sizin veya site ziyaretçileriniz için görünmez.