Peste 100 de milioane de consumatori își folosesc smartphone-urile pentru a naviga pe internet conform com.score Inc. Aflați cum să creați un site web special pentru publicul mobil. Pentru acest tutorial, veți avea nevoie de dreamweaver CS5 și versiuni ulterioare. Acest articol detaliază cum să creați un site web jquery mobil.
Pași
Pasul 1. Deschide Dreamweaver și mergi la fișier> Nou
Veți vedea apoi o fereastră „Document nou”. În partea stângă, doriți să alegeți opțiunea „pagina din eșantion”, apoi în coloana următoare, alegeți „Startere mobile”, apoi „jQuery Mobile (CDN)”
Pasul 2. Creați paginile
După ce deschideți fișierul jQuery Mobile (CDN), veți vedea o pagină care arată similar cu aceasta:
Deși acest punct de vedere tehnic este un document de o pagină, fiecare antet reprezintă o „pagină” diferită. De exemplu, „Prima pagină” este pagina de pornire pentru site-ul mobil, „Pagina a doua” ar putea fi pagina despre noi, „Pagina a treia” ar putea fi pagina serviciilor dvs. și așa mai departe
Pasul 3. Uită-te la cod
Acești pași pot fi destul de dificili dacă nu sunteți familiarizați cu HTML de bază. Pentru a crea conținut, încercați să lucrați în „vizualizare divizată” pe Dreamweaver. Cum să ajungeți la acest mod este dacă vă uitați la colțul din stânga al Dreamweaver, sub meniul fișierului, veți vedea patru opțiuni „cod, împărțit, proiectat și live” astfel:
Alegeți opțiunea evidențiată „împărțiți” și veți vedea o vizualizare a codului și a site-ului real unul lângă altul. Uită-te la cod
Pasul 4. Editați anteturile pentru fiecare pagină
Există (div data-role = "pagina"), ceea ce înseamnă că este începutul unei noi pagini. Rețineți că fiecare pagină este asociată cu un număr 'div data-role = "page"' este a doua pagină, 'div data-role = "page"' este a treia pagină și așa mai departe
'div data-role = "header"' este zona headerului și puneți informațiile despre antet între cele două etichete "h1" și "/ h1".
Pasul 5. Editați elementele de conținut și meniu
'div data-role = "Conținut"' este începutul secțiunii de conținut. Aici puneți conținutul real al fiecărei pagini. Rețineți că în prima pagină există:
-
iar dacă vă uitați la pagina web actuală, vedeți că prima pagină are o listă de linkuri. 'ul data-role = "listview" înseamnă că doriți o listă de linkuri în zona de conținut. Când adăugați orice element de meniu sau' data-role = "listview" ', asigurați-vă că legați textul corect cu paginile corecte. De exemplu, dacă pagina a doua este „Despre noi”, pagina a treia este „Serviciul nostru”, iar pagina a patra este „Contactați-ne”, atunci doriți să puneți:
Creați un site web mobil cu Dreamweaver Pasul 5 Bullet 1 -
Acum, pentru a edita conținut, puneți-vă textul între etichetele 'div data-role = "content"' și '/ div'. De exemplu:
Creați un site web mobil cu Dreamweaver Pasul 5 Bullet 2
Pasul 6. Editați subsolul
Pentru a edita subsolul, pur și simplu puneți textul în locul textului „subsol de pagină”.
Pasul 7. Aruncați o privire asupra site-ului dvs. web în „Mod live”
Vă amintiți unde ați trecut la „modul split?” chiar în acea zonă, există un buton care scrie „live”. Faceți clic pe acesta și veți vedea cum va arăta site-ul dvs. pe un telefon!
