Lebih dari 100 juta konsumen menggunakan ponsel cerdas mereka untuk menjelajahi internet menurut com.score Inc. Pelajari cara membuat situs web seluler khusus untuk pemirsa seluler. Untuk tutorial ini, Anda membutuhkan dreamweaver CS5 dan lebih tinggi. Artikel ini menjelaskan cara membuat situs web seluler jquery.
Langkah
Langkah 1. Buka Dreamweaver dan buka file > New
Anda kemudian akan melihat Jendela "Dokumen Baru". Di sisi kiri, Anda ingin memilih opsi "halaman dari sampel" lalu di kolom berikutnya, pilih "Permulaan seluler", lalu "jQuery Mobile (CDN)"
Langkah 2. Buat Halaman
Setelah Anda membuka file jQuery Mobile (CDN), Anda akan melihat halaman yang terlihat seperti ini:
Meskipun secara teknis ini adalah dokumen satu halaman, setiap header mewakili "halaman" yang berbeda. Misalnya, "Halaman Satu" adalah halaman beranda untuk situs web seluler, "Halaman Dua" bisa menjadi halaman tentang kami, "Halaman Tiga" bisa menjadi halaman layanan Anda, dan seterusnya
Langkah 3. Lihat Kode
Langkah-langkah ini bisa sangat rumit jika Anda tidak terbiasa dengan HTML dasar. Untuk membuat konten, coba kerjakan "split view" di Dreamweaver. Cara masuk ke mode tersebut adalah jika anda melihat pada pojok kiri Dreamweaver, dibawah menu file, anda akan melihat empat pilihan "code, split, design, and live" seperti ini:
Pilih opsi yang disorot "split", dan Anda akan melihat tampilan kode dan situs sebenarnya secara berdampingan. Lihatlah kodenya
Langkah 4. Edit Header untuk Setiap Halaman
Ada (div data-role="page"), yang artinya ini adalah awal dari halaman baru. Perhatikan bahwa setiap halaman dikaitkan dengan nomor 'div data-role="page"' adalah halaman kedua, 'div data-role="page"' adalah halaman ketiga dan seterusnya
'div data-role="header"' adalah area header, dan Anda meletakkan informasi header di antara dua tag "h1" dan "/h1".
Langkah 5. Edit Konten dan Item Menu
'div data-role="Content"' adalah awal dari bagian konten. Di sinilah Anda meletakkan konten sebenarnya dari setiap halaman. Perhatikan bahwa di halaman pertama ada:
-
dan jika Anda melihat halaman web yang sebenarnya, Anda melihat bahwa halaman pertama memiliki daftar tautan. 'ul data-role="listview"' berarti Anda menginginkan daftar tautan di area konten. Saat menambahkan item menu atau 'data-role="listview"', pastikan Anda menautkan teks yang benar dengan halaman yang benar. Misalnya jika halaman dua adalah "Tentang Kami", halaman ketiga adalah "Layanan Kami", dan Halaman keempat adalah "Hubungi Kami" maka Anda ingin memasukkan:
Buat Website Seluler dengan Dreamweaver Langkah 5 Poin 1 -
Sekarang untuk mengedit konten, cukup letakkan teks Anda di antara tag 'div data-role="content"' dan '/div'. Sebagai contoh:
Buat Website Seluler dengan Dreamweaver Langkah 5 Peluru 2
Langkah 6. Edit Footer
Untuk mengedit footer, cukup letakkan teks Anda di tempat teks "Page Footer".
Langkah 7. Lihatlah situs web Anda dalam "Mode langsung"
Ingat di mana Anda beralih ke "mode split?" tepat di area itu, ada tombol yang bertuliskan "live". Klik itu, dan Anda akan melihat seperti apa tampilan situs web Anda di telepon!
