Dreamweaver ve jQuery Mobil Entegrasyonu

• Mayıs Ayı 18, 2024

Son birkaç yıldır, Dreamweaver^R, mobil web içeriği ve mobil uygulamalar oluşturmak için artan sayıda özellik verilmiştir. CS6'ya yapılan bu yeni yükseltme bir istisna değildir. Dreamweaver CS6, jQuery Mobile özellikleri ile geliştirilmiş bir iş akışına sahiptir.

Yeni Belge iletişim kutusundaki yeni Sayfadan Örnek seçeneği ile yeni bir mobil proje başlatmak basittir. Mobil Başlatıcılar klasöründen bir jQuery Mobile örneği seçebilirsiniz. Bu örnek sayfa, önceden oluşturulmuş bazı grafik, css ve JavaScript dosyalarıyla birlikte gelir.

Bu örnek sayfadan, sayfaya öğeler ekleyerek projemizi oluşturmaya başlayabiliriz.

1. Ekle panelinde, kategori menüsünden jQuery Mobile'ı seçeceğiz. Bu, önceden oluşturulmuş bileşenleri görüntüler.
   
   
2. Yeni bir bileşen eklemek için imlecimizi yeni tasarım öğesinin ekleneceği yere yerleştireceğiz ve listedeki bileşenlerden birini tıklayacağız. Örneğimiz için bir Slider seçelim.
   
   Dreamweaver, kaydırıcı kodunu otomatik olarak sayfamıza ekleyecektir. Canlı görüntüde, yeni kaydırma kontrolümüzü görebiliriz.
   
   

Ancak bu sayfa biraz genel bir görünüm. Yeni jQuery Mobil Renk Örnekleri paneliyle sayfamızı stilize etmenin hızlı ve kolay bir yoluna sahibiz.

1. Menü çubuğundan Pencere - jQuery Mobil Renk Örnekleri'ni tıklayın. Destekleyici grafiği, css ve JavaScript dosyalarını henüz yüklemediyseniz, bir açılır iletişim kutusu görürsünüz. Dosyaları yüklemek için Kopyala'yı tıklayın.
   
   
2. Yeni jQuery Mobil Renk Örnekleri paneli, örnek sayfanızda bir öğe seçinceye kadar boştur. Bir öğe seçtiğinizde panel, o öğe için kullanılabilir karşılık gelen renk örneklerini görüntüler. Başlık öğesini seçersek, birkaç başlık teması göreceğiz.
   
   
3. Canlı görünüme geçersek, nasıl görüneceklerinin bir önizlemesini görmek için her tema örneğini tıklayabiliriz.
   
   

Bunu sayfamızdaki tüm tasarım öğeleri için tekrarlayabiliriz. Bunu yaparken, jQuery Mobil Renk Örnekleri paneli, kullanılabilir ilgili renk örneklerini görüntüler. Ayrıca, masaüstü ve tablet çözünürlüklerinde görüneceği için tasarımı önizlemek için Çözünürlük Değiştiriciyi de kullanabiliriz.

Panelin altındaki Daha Fazla Tema Al bağlantısını kullanırsak, jQuery Mobile web sitesi için ThemeRoller'a bir tarayıcı açılır.

* Adobe, inceleme amacıyla bu yazılımın bir kopyasını bana verdi.

Telif Hakkı 2018 Adobe Systems Incorporated. Tüm hakları Saklıdır. Adobe ürün ekran görüntüleri, Adobe Systems Incorporated'ın izniyle kullanılmıştır. Adobe, Photoshop, Photoshop Albümü, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Köprü, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Havai Fişek, Contribute, Captivate, Flash Catalyst ve Flash Paper Amerika Birleşik Devletleri ve / veya diğer ülkelerde Adobe Systems Incorporated'in [a] tescilli ticari markaları veya ticari markalarıdır.

Video Talimatları: How to Make a Website in 10 mins & Simple and Easy (Mayıs Ayı 2024).