Användarhandbok Avbryt

Skapa webbprogram för mobila enheter med Dreamweaver

 

 

Dreamweavers integrering med jQuery Mobile hjälper dig att snabbt skapa ett webbprogram som fungerar på de flesta mobila enheter. Designen anpassas automatiskt till enhetens dimensioner.

Skapa ett webbprogram med jQuery Mobile

Öppna en startsida för jQuery Mobile eller skapa en HTML5-sida

Skapa programmet med hjälp av jQuery Mobile-startsidorna i Dreamweaver. Du kan också börja skapa webbprogrammet med en ny HTML5-sida.

jQuery Mobile-startsidor innehåller HTML-, CSS-, JavaScript-filer och bildfiler som hjälper dig att komma igång att skapa programmet. Du kan använda CSS- och JavaScript-filer i ett CDN eller på en egen server. Du kan också använda de filer som installerades med Dreamweaver.

Obs!

Koderna <link> och <script src> i kodvyn visar platsen för länkade filer.

Infoga jQuery Mobile-komponenter från panelen Infoga

Infoga jQuery Mobile-komponenter från panelen Infoga i HTML-sidan. jQuery Mobile CSS- och JavaScript-filer definierar komponenternas format och beteende.

Om CDN:er och lokala jQuery Mobile-filer

CDN:er

Ett CDN (innehållsleveransnät) är ett datornätverk som innehåller kopior av data på flera punkter i nätverket. När du skapar ett webbprogram med URL:en för ett CDN används de CSS- och JavaScript-filer som anges i URL:en för programmet. Som standard använder Dreamweaver jQuery Mobile CDN.

Du kan också använda URL:er för CDN:er från andra platser, till exempel Microsoft och Google. I kodvyn kan du redigera serverplatsen för de CSS- och JavaScript-filer som anges i koderna <link> och <script src>.

Filerna som hämtas från ett CDN är skrivskyddade.

Lokala jQuery Mobile-filer

När du installerar Dreamweaver kopieras en kopia av jQuery Mobile-filerna till datorn. HTML-sidan som öppnas när du väljer jQuery Mobile-startsidan (lokal) är länkad till lokala CSS-filer, JavaScript-filer och bildfiler.

Startsidor för jQuery Mobile

I Dreamweaver finns följande startsidor som hjälper dig att skapa ditt webbprogram:

jQuery Mobile (CDN)

Använd den här startsidan om du tänker ha jQuery Mobile-biblioteket på ett CDN.

 

jQuery Mobile (lokal)

Använd den här startsidan om du själv tänker fungera som värd för resurserna eller om programmet inte ska vara beroende av en Internetanslutning.

 

jQuery Mobile (PhoneGap)

Använd den här startsidan om webbprogrammet (som ska distribueras som ett mobilprogram) använder funktioner som är inbyggda i mobila enheter. Mer information finns i Paketera webbprogram.

 

 

Skapa ett program för mobila enheter med hjälp av startsidor

  1. Klicka på Arkiv > Nytt.

  2. Välj ett av följande alternativ beroende på dina behov:

    • Sida från exempel > Startsidor för mobila enheter > jQuery Mobile (CDN).

    • Sida från exempel > Startsidor för mobila enheter > jQuery Mobile (lokal).

     

  3. Klicka på Skapa.

    Aktivera Följ länkar kontinuerligt (Visa > Live-visningsalternativ) på sidan som visas och växla till Live-vyn. Testa hur programmet fungerar med hjälp av navigeringskomponenterna.

    Med alternativen på Flera skärmar-menyn kan du se hur designen ser ut på enheter med olika dimensioner. Inaktivera Live-vyn och växla tillbaka till designvyn.

  4. Välj jQuery Mobile på panelen Infoga (Fönster > Infoga). De komponenter som du kan lägga till i webbprogrammet visas.

  5. I designvyn placerar du markören på den plats där du vill infoga komponenten. Klicka sedan på komponenten på panelen Infoga. I dialogrutan som visas anpassar du komponenterna med alternativen.

  6. (jQuery Mobile – lokal) När du sparar HTML-filen kopieras jQuery Mobile-filerna, inklusive bildfilerna, till en mapp på HTML-filplatsen.

Förhandsgranska sidan i Live-vyn. Vissa CSS-klasser tillämpas bara i Live-vyn.

Skapa ett webbprogram för mobila enheter från en ny sida

Sidkomponenten fungerar som behållare åt alla andra jQuery Mobile-komponenter. Lägg först till sidkomponenten innan du infogar andra komponenter.

  1. Klicka på Arkiv > Nytt.

  2. Välj Tom sida > HTML.

    Vissa jQuery Mobile-komponenter använder HTML5-specifika attribut. Välj HTML5 som DocType så att HTML5-kompatibilitet säkerställs under valideringen.

  3. Välj jQuery Mobile från menyn på panelen Infoga (Fönster > Infoga). jQuery Mobile-komponenterna visas på panelen.

  4. Dra sidkomponenten från panelen Infoga till designvyn.

  5. Välj ett av följande alternativ i dialogrutan jQuery Mobile-filer:

    Fjärr (CDN)

    Om du vill ansluta till den CDN-fjärrserver där jQuery Mobile-filerna finns. Använd standardalternativet för jQuery-platsen om du inte har konfigurerat någon plats som innehåller jQuery Mobile-filer. Du kan också välja att använda andra CDN-servrar.

    Lokal

    De filer som är tillgängliga i Dreamweaver visas. Om du vill ange en annan mapp klickar du på Bläddra och navigerar till mappen med jQuery Mobile-filerna.

    CSS- och JavaScript-filerna kopieras till en lokal tillfällig katalog tills du sparar HTML-filen på datorn. När du sparar HTML-filen kopieras alla associerade jQuery Mobile- och bildfiler till platsens rotmapp.

  6. Ange sidkomponentens egenskaper.

  7. I designvyn placerar du markören på den plats där du vill infoga komponenten. Klicka sedan på komponenten på panelen Infoga. I dialogrutan som visas anpassar du komponenterna med alternativen.

Förhandgranska sidan i Live-vyn. Vissa CSS-klasser tillämpas bara i Live-vyn.

Använda egna filer och mappar

Du kan skapa egna CSS- och JS-filer för ditt program. Se till att döpa filerna till jquery.mobile.js, jquery.mobile.css och jquery.js

Gör följande om du använder egna mappar:

  1. Hämta den okomprimerade versionen av jQuery 1.5 Core-biblioteket från http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

  2. Spara filen i mappen core som innehåller de andra resurserna.

 

Få hjälp snabbare och enklare

Ny användare?