Cum se creează un site mobil cu dreamweaver

Peste 100 de milioane de consumatori folosesc smartphone-urile lor pentru a naviga pe Internet în conformitate cu com.Score Inc. Aflați cum să creați un site mobil special pentru publicul mobil. Pentru acest tutorial, veți avea nevoie de Dreamweaver CS5 și în sus. Acest articol detaliază cum să creați un site mobil JQuery Mobile.

Pași

  1. Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 1
1. Deschideți Dreamweaver și mergeți la fișier > Nou. Veți vedea apoi a "Un nou document" Fereastră. În partea stângă, doriți să alegeți opțiunea "Pagina din eșantion" Apoi, în coloana următoare, alegeți "Startere mobile", atunci "JQuery Mobile (CDN)"
  • Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 2
    2. Creați paginile. Odată ce deschideți fișierul JQuery Mobile (CDN), veți vedea o pagină care arată similară cu aceasta:
  • Deși acest lucru este din punct de vedere tehnic un document de pagină, fiecare antet reprezintă un altul "pagină". De exemplu, "Pagina unu" este pagina de pornire pentru site-ul mobil, "Pagina a doua" ar putea fi pagina Despre noi, "Pagina a treia" ar putea fi pagina dvs. de servicii și așa mai departe.
  • Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 3
    3. Uită-te la cod. Acești pași pot fi destul de complicați dacă nu sunteți familiarizați cu HTML de bază. Pentru a crea conținutul, încercați să lucrați "View Split" pe Dreamweaver. Cum să ajungeți la acel mod este dacă vă uitați la colțul din stânga al Dreamweaver, sub meniul Fișier, veți vedea patru opțiuni "cod, împărțire, design și live" ca aceasta:
  • Alegeți opțiunea evidențiată "Despică", și veți vedea o viziune a codului și a site-ului real unul lângă altul. Aruncați o privire la codul.
  • 4. Editați anteturile pentru fiecare pagină. Există (DIV-rolul DIV ="pagină" id ="pagină"), ceea ce înseamnă că este începutul unei noi pagini. Rețineți că fiecare pagină este asociată cu un număr "Date-rol-rol ="pagină" id ="pagina 2"`este cea de-a doua pagină, "DIV DATE-ROL ="pagină" id ="Pagina 3"`este a treia pagină și așa mai departe

    "DIV DATE-ROL ="antet"`Este zona antetului și puneți informațiile despre antet între cele două "H1"și "/ H1" Etichete.
  • Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 5
    5. Editați conținutul și elementele de meniu. "DIV DATE-ROL ="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ă:
  • Și dacă vă uitați la pagina web reală, vedeți că prima pagină are o listă de linkuri. "rolul de date UL ="Listview""înseamnă că doriți o listă de linkuri în zona de conținut.Când adăugați orice elemente de meniu sau "Date-rol ="Listview"", asigurați-vă că conectați textul corect cu paginile corecte. De exemplu, dacă pagina a doua este "Despre noi", Pagina trei este "Serviciul nostru", și pagina patru este "Contactează-ne" Apoi doriți să puneți:Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 5Bullet1
  • Acum, pentru a edita conținut, simplificați-vă textul între "DIV-rolul Date ="conţinut""și" / div ". De exemplu:Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 5Bullet2
  • 6. Editați subsolul. Pentru a edita subsolul, pur și simplu puneți textul în locul "Pagina subsolului" text.
  • Imagine intitulată Creați un site mobil cu Dreamweaver Pasul 7
    7. Uitați-vă la site-ul dvs. în "modul live". Amintiți-vă unde ați trecut "Modul Split?" Chiar în acea zonă, există un buton care spune "Trăi". Faceți clic pe acest lucru și veți vedea ce va arăta site-ul dvs. pe un telefon!

    • sfaturi

    Partajați pe rețeaua socială:
    Similar