com.score Inc.'e göre 100 milyondan fazla tüketici akıllı telefonlarını internette gezinmek için kullanıyor. Özellikle mobil hedef kitle için bir mobil web sitesi oluşturmayı öğrenin. Bu eğitim için dreamweaver CS5 ve sonraki sürümlere ihtiyacınız olacak. Bu makale, jquery mobil web sitesinin nasıl oluşturulacağını ayrıntılarıyla anlatmaktadır.
adımlar
Adım 1. Dreamweaver'ı açın ve dosya > Yeni'ye gidin
Daha sonra bir "Yeni Belge" Penceresi göreceksiniz. Sol tarafta, "page from sample" seçeneğini seçin, ardından bir sonraki sütunda "mobile Starters", ardından "jQuery Mobile (CDN)" seçeneğini seçin.
Adım 2. Sayfaları oluşturun
jQuery Mobile (CDN) dosyasını açtığınızda şuna benzer bir sayfa göreceksiniz:
Bu teknik olarak tek sayfalık bir belge olmasına rağmen, her başlık farklı bir "sayfayı" temsil eder. Örneğin, "Birinci Sayfa" mobil web sitesinin ana sayfasıdır, "İkinci Sayfa" hakkımızda sayfası, "Üçüncü Sayfa" hizmetler sayfanız vb. olabilir
Adım 3. Koda bakın
Temel HTML'ye aşina değilseniz, bu adımlar oldukça zor olabilir. İçeriği oluşturmak için Dreamweaver'da "bölünmüş görünümde" çalışmayı deneyin. Bu moda nasıl ulaşılır, Dreamweaver'ın sol köşesine, dosya menüsünün altına bakarsanız, bunun gibi dört "kod, bölme, tasarım ve canlı" seçeneği göreceksiniz:
Vurgulanan "böl" seçeneğini seçin, kod görünümünü ve gerçek siteyi yan yana göreceksiniz. Koda bir göz atın
Adım 4. Her Sayfanın Başlıklarını Düzenleyin
(div data-role="page") vardır, bu da yeni bir sayfanın başlangıcı olduğu anlamına gelir. Her sayfanın bir sayı ile ilişkili olduğunu unutmayın 'div data-role="page"' ikinci sayfadır, 'div data-role="page"' üçüncü sayfadır vb.
'div data-role="header"' başlık alanıdır ve başlık bilgilerinizi iki "h1" ve "/h1" etiketi arasına koyarsınız.
Adım 5. İçeriği ve Menü Öğelerini Düzenleyin
'div data-role="Content"', içerik bölümünün başlangıcıdır. Burası, her sayfanın gerçek içeriğini koyduğunuz yerdir. İlk sayfada olduğunu unutmayın:
-
ve asıl web sayfasına bakarsanız, ilk sayfada bir bağlantı listesi olduğunu görürsünüz. 'ul data-role="listview"', içerik alanında bir bağlantı listesi istediğiniz anlamına gelir. Herhangi bir menü öğesi veya 'data-role="listview"' eklerken, doğru metni doğru sayfalara bağladığınızdan emin olun.. Örneğin, ikinci sayfa "Hakkımızda", üçüncü sayfa "Hizmetimiz" ve dördüncü Sayfa "Bize Ulaşın" ise, şunu eklemek istersiniz:
Dreamweaver ile Mobil Web Sitesi Oluşturun Adım 5 Madde 1 -
Şimdi içeriği düzenlemek için, metninizi 'div data-role="content"' ve '/div' etiketleri arasına yerleştirmeniz yeterlidir. Örneğin:
Dreamweaver Adım 5 Madde Bullet 2 ile Mobil Web Sitesi Oluşturun
Adım 6. Altbilgiyi Düzenleyin
Altbilgiyi düzenlemek için metninizi "Sayfa Altbilgisi" metninin yerine koymanız yeterlidir.
Adım 7. Web sitenize "canlı Mod"da bir göz atın
"Bölünmüş moda" geçtiğin yeri hatırlıyor musun? tam o alanda "canlı" yazan bir düğme var. Buna tıklayın ve web sitenizin bir telefonda nasıl görüneceğini göreceksiniz!
