Lebih 100 juta pengguna menggunakan telefon pintar mereka untuk melayari internet menurut com.score Inc. Pelajari cara membuat laman web mudah alih khusus untuk khalayak bergerak. Untuk tutorial ini, anda memerlukan dreamweaver CS5 ke atas. Artikel ini memperincikan cara membuat laman web mudah alih jquery.
Langkah-langkah
Langkah 1. Buka Dreamweaver dan pergi ke fail> Baru
Anda kemudian akan melihat Tetingkap "Dokumen Baru". Di sebelah kiri, anda ingin memilih "halaman dari contoh" kemudian di lajur seterusnya, pilih "Permulaan mudah alih", kemudian "jQuery Mobile (CDN)"
Langkah 2. Buat Halaman
Sebaik sahaja anda membuka fail jQuery Mobile (CDN), anda akan melihat halaman yang kelihatan serupa dengan ini:
Walaupun secara teknikal ini adalah dokumen satu halaman, setiap tajuk mewakili "halaman" yang berbeza. Sebagai contoh, "Halaman Satu" adalah halaman utama untuk laman web mudah alih, "Halaman Kedua" dapat menjadi halaman tentang kami, "Halaman Tiga" dapat menjadi halaman perkhidmatan anda dan sebagainya
Langkah 3. Lihat Kodnya
Langkah-langkah ini boleh menjadi sangat sukar jika anda tidak biasa dengan HTML asas. Untuk membuat kandungan, cuba buat "split view" di Dreamweaver. Cara menuju ke mod itu adalah jika anda melihat di sudut kiri Dreamweaver, di bawah menu fail, anda akan melihat empat pilihan "kod, perpecahan, reka bentuk, dan siaran langsung" seperti ini:
Pilih pilihan "split" yang diserlahkan, dan anda akan melihat paparan kod dan laman web yang sebenarnya bersebelahan. Lihat kodnya
Langkah 4. Edit Tajuk untuk Setiap Halaman
Ada (div data-role = "page"), yang bermaksud bahawa ini adalah permulaan halaman baru. Perhatikan bahawa setiap halaman dikaitkan dengan angka 'div data-role = "page"' adalah halaman kedua, 'div data-role = "page"' adalah halaman ketiga dan seterusnya
'div data-role = "header"' adalah kawasan header, dan anda meletakkan maklumat header antara dua tag "h1" dan "/ h1".
Langkah 5. Edit Kandungan dan Item Menu
'div data-role = "Content"' adalah permulaan bahagian kandungan. Di sinilah anda meletakkan kandungan sebenar setiap halaman. Perhatikan bahawa di halaman pertama terdapat:
-
dan jika anda melihat halaman web yang sebenarnya, anda melihat bahawa halaman pertama mempunyai senarai pautan. 'ul data-role = "listview"' bermaksud bahawa anda mahukan senarai pautan di kawasan kandungan. Semasa menambahkan item menu atau 'data-role = "listview"', pastikan anda menghubungkan teks yang betul dengan halaman yang betul. Sebagai contoh jika halaman dua adalah "Tentang Kami", halaman tiga adalah "Perkhidmatan Kami", dan Halaman empat adalah "Hubungi Kami", maka anda ingin meletakkan:
Buat Laman Web Mudah Alih dengan Bullet Dreamweaver Langkah 5 1 -
Sekarang untuk mengedit kandungan, masukkan teks anda di antara tag 'div data-role = "content"' dan '/ div'. Sebagai contoh:
Buat Laman Web Mudah Alih dengan Bullet Dreamweaver Langkah 5
Langkah 6. Edit Footer
Untuk mengedit footer, letakkan teks anda di tempat teks "Page Footer".
Langkah 7. Lihatlah laman web anda dalam "live mode"
Ingat di mana anda beralih ke "mod split?" betul-betul di kawasan itu, ada butang yang bertuliskan "live". Klik pada itu, dan anda akan melihat seperti apa laman web anda di telefon!
