Secondo com.score Inc., oltre 100 milioni di consumatori utilizzano i propri smartphone per navigare in Internet. Scopri come creare un sito Web mobile specifico per il pubblico mobile. Per questo tutorial, avrai bisogno di dreamweaver CS5 e versioni successive. Questo articolo spiega come creare un sito web mobile jquery.
Passi
Passaggio 1. Aprire Dreamweaver e andare su file > Nuovo
Vedrai quindi una finestra "Nuovo documento". Sul lato sinistro, si desidera selezionare l'opzione "pagina da campione", quindi nella colonna successiva selezionare "Mobile Starters", quindi "jQuery Mobile (CDN)"
Passaggio 2. Crea le pagine
Una volta aperto il file jQuery Mobile (CDN), vedrai una pagina simile a questa:
Sebbene questo sia tecnicamente un documento di una pagina, ogni intestazione rappresenta una "pagina" diversa. Ad esempio, "Pagina uno" è la home page del sito Web mobile, "Pagina due" potrebbe essere la pagina su di noi, "Pagina tre" potrebbe essere la pagina dei servizi e così via
Passaggio 3. Guarda il codice
Questi passaggi possono essere piuttosto complicati se non hai familiarità con l'HTML di base. Per creare il contenuto, prova a lavorare in "vista divisa" su Dreamweaver. Come arrivare a quella modalità è se guardi nell'angolo sinistro di Dreamweaver, sotto il menu file, vedrai quattro opzioni "codice, dividi, design e live" come questo:
Scegli l'opzione evidenziata "dividi" e vedrai una vista del codice e il sito effettivo fianco a fianco. Dai un'occhiata al codice
Passaggio 4. Modifica le intestazioni per ogni pagina
C'è (div data-role="page"), che significa che è l'inizio di una nuova pagina. Nota che ogni pagina è associata a un numero 'div data-role="page"' è la seconda pagina, 'div data-role="page"' è la terza pagina e così via
'div data-role="header"' è l'area dell'intestazione e inserisci le informazioni dell'intestazione tra i due tag "h1" e "/h1".
Passaggio 5. Modifica il contenuto e le voci di menu
'div data-role="Content"' è l'inizio della sezione del contenuto. Qui è dove inserisci il contenuto effettivo di ogni pagina. Nota che nella prima pagina c'è:
-
e se guardi la pagina web attuale, vedi che la prima pagina ha un elenco di link. 'ul data-role="listview"' significa che desideri un elenco di collegamenti nell'area del contenuto. Quando aggiungi voci di menu o 'data-role="listview"', assicurati di collegare il testo corretto con le pagine corrette. Ad esempio, se la pagina due è "Chi siamo", la pagina tre è "Il nostro servizio" e la pagina quattro è "Contattaci", allora vuoi inserire:
Crea un sito web mobile con Dreamweaver Passaggio 5 Punto 1 -
Ora per modificare il contenuto, inserisci semplicemente il tuo testo tra i tag 'div data-role="content"' e '/div'. Per esempio:
Crea un sito web mobile con Dreamweaver Step 5 Bullet 2
Passaggio 6. Modifica il piè di pagina
Per modificare il piè di pagina, metti semplicemente il tuo testo al posto del testo "Piè di pagina".
Passaggio 7. Dai un'occhiata al tuo sito web in "modalità live"
Ricordi dove sei passato alla "modalità divisa?" proprio in quell'area, c'è un pulsante che dice "live". Cliccaci sopra e vedrai come apparirà il tuo sito web su un telefono!
