Crearea unui site mobil cu Dreamweaver

Potrivit comScore Inc, peste 100 de milioane de consumatori folosesc telefoane mobile pentru a naviga pe internet. Aflați cum să creați un site special pentru acest public. Pentru acest tutorial, veți avea nevoie de Dreamweaver CS5 sau o versiune superioară. Vom învăța cum să creați un site jquery mobil.

pași

Imagine intitulată Crearea unui site mobil cu Dreamweaver Pasul 1

Deschideți Dreamweaver și mergeți la "File"> "New" - veți vedea fereastra "Document nou". În colțul din stânga, alegeți opțiunea "Mobile Starters". Apoi, în coloana următoare, alegeți "Starter-uri mobile", urmat de "jQuery Mobile (CDN)".

Imaginea intitulată Creați un site mobil cu Dreamweaver Pasul 2

Creați paginile. Când deschideți fișierul jQuery Mobile (CDN), veți vedea o pagină similară celei afișate în următoarea fotografie:

Deși acest lucru este tehnic un document cu o singură pagină, fiecare subiect reprezintă o altă pagină. De exemplu, "Pagina One" este pagina de pornire a site-ului mobil, "Page Two" ar putea fi câmpul "Despre site" și "Pagină a treia", pagina Servicii și așa mai departe.

Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 3

Uită-te la cod. Acești pași pot fi complexi dacă nu sunteți familiarizați cu codul de bază HTML. Pentru a crea conținut, îmi place să lucrez în vizualizarea Split Dreamweaver. Pentru ao găsi, accesați colțul din stânga al programului, sub meniul "Fișier", și veți găsi patru opțiuni "Cod", "Split", "Design" și "Live". :

Alegeți opțiunea "Split" și veți vedea un cod de lângă site. Să ne uităm la cod pentru o clipă.

Editați titlul fiecărei pagini. Codul (div data-role = "page" id = "page") reprezintă începutul unei noi pagini. Rețineți că același cod, atunci când este asociat cu o altă pagină, reprezintă o altă pagină a documentului, cum ar fi div date-role = "page" id = "page2" `sau "div data-role =" page "id = . Codul

`div data-role = "header" este titlul, care trebuie scris între etichetele "h1" și "/ h1".

Imaginea intitulată Creați un site mobil cu Dreamweaver Pasul 5

Editați conținutul și elementele de meniu. Codul "div data-role =" Conținut "este începutul secțiunii de conținut. Aici plasați conținutul fiecărei pagini. Iată ce veți găsi pe prima pagină:

Uită-te la pagina în sine pentru a găsi o listă de link-uri. Codul "ul data-role =" listview "înseamnă că doriți să inserați o listă de linkuri în zona de conținut. Când adăugați elemente din meniu sau "data-role =" listview "", asigurați-vă că introduceți textele în paginile corecte. De exemplu, dacă a doua pagină se referă la secțiunea "Despre companie", a treia este "Servicii" și a patra "Contactați-ne", puneți:
Pentru a edita conținutul, pur și simplu introduceți textul între etichetele "div data-role =" content "și" / div ". De exemplu:

Editați subsolul. Pentru ao edita, introduceți textul în câmpul "Subsol de pagină".

Imaginea intitulată Crearea unui site web mobil cu Dreamweaver Pasul 7

Uitați-vă la site-ul dvs. prin opțiunea "Live". Amintiți-vă de locația pe care ați schimbat-o la funcția "Split"? În ea este un buton care spune "Live". Faceți clic pe el și veți vedea cum va fi site-ul dvs. pe un telefon mobil!