Més de 100 milions de consumidors fan servir els seus telèfons intel·ligents per navegar per Internet segons com.score Inc. Apreneu a crear un lloc web per a mòbils específicament per al públic mòbil. Per a aquest tutorial, necessitareu dreamweaver CS5 i versions posteriors. En aquest article es detalla com crear un lloc web per a mòbils jquery.
Passos
Pas 1. Obriu Dreamweaver i aneu a fitxer> Nou
A continuació, veureu una finestra "Document nou". A la part esquerra, voleu escollir l'opció "pàgina de mostra" i, a la columna següent, trieu "Inici mòbil" i, a continuació, "jQuery Mobile (CDN)"
Pas 2. Creeu les pàgines
Un cop obriu el fitxer jQuery Mobile (CDN), veureu una pàgina que té un aspecte similar:
Tot i que tècnicament es tracta d’un document d’una pàgina, cada capçalera representa una "pàgina" diferent. Per exemple, "Primera pàgina" és la pàgina d'inici del lloc web per a mòbils, "La segona pàgina" pot ser la pàgina sobre nosaltres, "La pàgina tres" pot ser la vostra pàgina de serveis, etc
Pas 3. Mireu el codi
Aquests passos poden ser força complicats si no esteu familiaritzat amb l'HTML bàsic. Per crear el contingut, proveu de treballar a la "vista dividida" a Dreamweaver. Com arribar a aquest mode és si mireu a l'extrem esquerre de Dreamweaver, a sota del menú de fitxers, veureu quatre opcions "codi, divisió, disseny i publicació" com aquesta:
Trieu l'opció ressaltada "divideix" i veureu una visualització del codi i del lloc real de forma paral·lela. Mireu el codi
Pas 4. Editeu les capçaleres de cada pàgina
Hi ha (div data-role = "pàgina"), el que significa que és el començament d'una nova pàgina. Tingueu en compte que cada pàgina està associada a un número 'div data-role = "page"' és la segona pàgina, 'div data-role = "page"' és la tercera pàgina, etc.
'div data-role = "header"' és l'àrea de capçalera i col·loqueu la informació de capçalera entre les dues etiquetes "h1" i "/ h1".
Pas 5. Editeu els elements de contingut i de menú
'div data-role = "Contingut"' és el començament de la secció de contingut. Aquí és on es posa el contingut real de cada pàgina. Tingueu en compte que a la primera pàgina hi ha:
-
i si mireu la pàgina web real, veureu que la primera pàgina té una llista d’enllaços. 'ul data-role = "listview" significa que voleu una llista d'enllaços a l'àrea de contingut. Quan afegiu algun element del menú o' data-role = "listview" ', assegureu-vos que enllaceu el text correcte amb les pàgines correctes. Per exemple, si la pàgina dos és "Sobre nosaltres", la pàgina tres és "El nostre servei" i la pàgina quatre és "Contacteu amb nosaltres", llavors voleu posar:
Creeu un lloc web per a mòbils amb Dreamweaver Step 5 Bullet 1 -
Ara, per editar contingut, poseu el text entre les etiquetes 'div data-role = "content"' i '/ div'. Per exemple:
Creeu un lloc web per a mòbils amb Dreamweaver Step 5 Bullet 2
Pas 6. Editeu el peu de pàgina
Per editar el peu de pàgina, només cal que col·loqueu el text al lloc del text "Pàgina de peu de pàgina".
Pas 7. Feu una ullada al vostre lloc web en "Mode en directe"
Recordeu on heu canviat al "mode dividit?" just a aquesta zona, hi ha un botó que diu "en directe". Feu clic a sobre i veureu com serà el vostre lloc web en un telèfon.
