Över 100 miljoner konsumenter använder sina smartphones för att surfa på internet enligt com.score Inc. Lär dig hur du skapar en mobilwebbplats specifikt för mobilpubliken. För denna handledning behöver du dreamweaver CS5 och uppåt. Denna artikel beskriver hur du skapar en jquery -mobilwebbplats.
Steg
Steg 1. Öppna Dreamweaver och gå till fil> Ny
Du kommer då att se ett "Nytt dokument" -fönster. På vänster sida vill du välja alternativet "sida från prov" och sedan i nästa kolumn väljer du "mobilstartare" och sedan "jQuery Mobile (CDN)"
Steg 2. Skapa sidorna
När du har öppnat jQuery Mobile (CDN) -filen ser du en sida som liknar den här:
Även om detta tekniskt sett är ett dokument på en sida, representerar varje rubrik en annan "sida". Till exempel är "Sida ett" hemsidan för mobilwebbplatsen, "Sida två" kan vara sidan om oss, "Sida tre" kan vara din tjänstesida och så vidare
Steg 3. Titta på koden
Dessa steg kan vara ganska knepiga om du inte känner till grundläggande HTML. För att skapa innehållet, försök att arbeta i "delad vy" på Dreamweaver. Hur man kommer 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, dela, designa och leva" så här:
Välj det markerade alternativet "dela", så ser du koden och den faktiska webbplatsen sida vid sida. Ta en titt på koden
Steg 4. Redigera rubrikerna för varje sida
Det finns (div data-role = "page"), vilket betyder att det är början på en ny sida. Observera att varje sida är associerad med ett nummer 'div data-role = "page"' är den andra sidan, 'div data-role = "page"' är den tredje sidan och så vidare
'div data-role = "header"' är rubrikområdet, och du placerar din rubrikinformation mellan de två "h1" och "/h1" taggarna.
Steg 5. Redigera innehåll och menyalternativ
'div data-role = "Content"' är början på innehållssektionen. Det är här du lägger det faktiska innehållet på varje sida. Observera att på den första sidan finns:
-
och om du tittar på själva webbsidan ser du att den första sidan har en lista med länkar. 'ul data-role = "listview"' betyder att du vill ha en lista med länkar i innehållsområdet. När du lägger till några menyalternativ eller 'data-role = "listview"', se till att du länkar rätt text till rätt sidor. Till exempel om sida två är "Om oss", sida tre är "Vår tjänst" och sida fyra är "Kontakta oss" så vill du skriva:
Skapa en mobilwebbplats med Dreamweaver Steg 5 Bullet 1 -
Nu för att redigera innehåll, placera din text enkelt mellan taggarna 'div data-role = "content"' och '/div'. Till exempel:
Skapa en mobilwebbplats med Dreamweaver Steg 5 Bullet 2
Steg 6. Redigera sidfoten
För att redigera sidfoten, placera din text istället för texten "Sidfot".
Steg 7. Ta en titt på din webbplats i "live -läge"
Kommer du ihåg var du bytte till "delat läge?" precis i det området finns det en knapp som säger "live". Klicka på det så ser du hur din webbplats kommer att se ut på en telefon!
