Så här skapar du en mobil webbplats med dreamweaver

Över 100 miljoner konsumenter använder sina smartphones för att bläddra i Internet enligt com.poäng inc. Lär dig hur du skapar en mobil webbplats specifikt för den mobila publiken. För den här handledningen behöver du Dreamweaver CS5 och uppåt. Den här artikeln beskriver hur du skapar en jquery mobil webbplats.

Steg

  1. Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 1
1. Öppna Dreamweaver och gå till filen > Ny. Du kommer då att se en "Nytt dokument" Fönster. På vänster sida vill du välja alternativet "Sida från prov" Sedan i nästa kolumn, välj "mobilstarter", sedan "jquery mobil (cdn)"
  • Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 2
    2. Skapa sidorna. När du väl öppnar filen JQuery Mobile (CDN) ser du en sida som liknar det här:
  • Även om detta tekniskt är ett ett siddokument, representerar varje rubrik en annan "sida". Till exempel, "Sida ett" är hemsidan för den mobila webbplatsen, "Sida två" kan vara den amerikanska sidan, "Sidan tre" kan vara din servicesida och så vidare.
  • Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 3
    3. Titta på koden. Dessa steg kan vara ganska knepiga om du är obekant med grundläggande HTML. För att skapa innehållet, försök att arbeta i "splitvy" På Dreamweaver. Så här kommer du till det läget är om du tittar på det vänstra hörnet av Dreamweaver, under filmenyn, kommer du att se fyra alternativ "Kod, Split, Design och Live" så här:
  • Välj det markerade alternativet "dela", och du kommer att se en vy av kod och den faktiska platsen sida vid sida. Ta en titt på koden.
  • 4. Redigera rubrikerna för varje sida. Det finns (DIV-data-roll ="sida" id ="sida"), vilket innebär att det är början på en ny sida. Observera att varje sida är associerad med ett nummer "DIV-data-roll ="sida" id ="sida 2"`Är den andra sidan,` div data-roll ="sida" id ="Page3""Är den tredje sidan och så vidare

    `div data-roll ="rubrik""Är rubriken, och du lägger din rubrikinformation mellan de två "h1"och "/ h1" märke.
  • Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 5
    5. Redigera innehållet och menyalternativen. `div data-roll ="Innehåll"`Är början på innehållsavsnittet. Här lägger du det faktiska innehållet på varje sida. Observera att i den första sidan finns det:
  • Och om du tittar på den faktiska webbsidan ser du att den första sidan har en lista över länkar. "ul data-roll ="Listvy": att du vill ha en lista med länkar i innehållsområdet.När du lägger till några menyalternativ eller "data-roll ="Listvy"", se till att du länkar rätt text med rätt sidor. Till exempel om sidan två är "Om oss", sidan tre är "Vår tjänst", och sidan fyra är "Kontakta oss" Då vill du sätta:Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 5Bullet1
  • Nu för att redigera innehåll, enkelt sätta din text mellan den "div-data-roll ="innehåll"`och` / div `Taggar. Till exempel:Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 5Bullet2
  • 6. Redigera sidfoten. För att redigera sidfoten, lägg helt enkelt din text i stället för "Sidfot" text.
  • Bild med titeln Skapa en mobil webbplats med Dreamweaver Steg 7
    7. Ta en titt på din webbplats i "live-läge". Kom ihåg var du bytte in "splitläge?" rätt i det området finns det en knapp som säger "leva". Klicka på det, och du kommer att se vad din webbplats kommer att se ut på en telefon!

    • Tips

    Dela på det sociala nätverket:
    Liknande