Handboek Annuleren

Webapps maken voor mobiele apparaten met behulp van Dreamweaver

 

 

Dankzij de integratie van Dreamweaver met jQuery Mobile kunt u snel een webtoepassing ontwerpen die geschikt is voor de meeste apparaten en automatisch wordt aangepast aan de schermafmetingen van het apparaat.

Een webtoepassing maken met jQuery Mobile

Open een jQuery Mobile-startpagina of maak een HTML5-pagina

Gebruik de jQuery Mobile-startpagina's in Dreamweaver om uw toepassing te maken. U kunt uw webpagina ook maken met een nieuwe HTML5-pagina.

De jQuery Mobile-startpagina's bevatten HTML-, CSS-, JavaScript- en afbeeldingsbestanden waarmee u aan de slag kunt gaan met het ontwerpen van uw toepassing. U kunt CSS- en JavaScript-bestanden gebruiken die worden gehost op een CDN of uw eigen server of de bestanden die worden geïnstalleerd met Dreamweaver.

Opmerking:

controleer de tags <link> en <script src> in de codeweergave om de locatie van de gekoppelde bestanden te achterhalen.

jQuery Mobile-componenten invoegen via het deelvenster Invoegen

Via het deelvenster Invoegen kunt u jQuery Mobile-onderdelen invoegen in de HTML-pagina. De CSS- en JavaScript-bestanden van jQuery Mobile bepalen de stijl en het gedrag van de onderdelen.

Over CDN's en lokale jQuery Mobile-bestanden

CDN's

Een CDN (content delivery network; netwerk voor aflevering van inhoud) is een computernetwerk met gegevenskopieën die op verschillende punten in het netwerk zijn geplaatst. Als u een webtoepassing maakt met een URL voor een CDN, worden voor uw toepassing de CSS- en JavaScript-bestanden gebruikt die zijn opgegeven in de URL. Standaard gebruikt Dreamweaver de CDN van jQuery Mobile.

Eventueel kunt u URL's voor CDN's van andere sites gebruiken, zoals Microsoft en Google. Bewerk in de codeweergave de serverlocatie van de CSS- en JavaScript-bestanden die is opgegeven in de tags <link> en <script src>.

De bestanden die worden gedownload van een CDN, zijn alleen-lezen.

Lokale jQuery Mobile-bestanden

Wanneer u Dreamweaver installeert, worden de jQuery Mobile-bestanden naar uw computer gekopieerd. De HTML-pagina die wordt geopend als u de (lokale) jQuery Mobile-startpagina selecteert, is gekoppeld aan lokale CSS-, JavaScript- en afbeeldingsbestanden.

Startpagina's voor jQuery Mobile

Dreamweaver biedt u de volgende startpagina's waarmee u uw webtoepassing kunt maken:

jQuery Mobile (CDN)

Gebruik deze startpagina als u van plan bent de jQuery Mobile-bibliotheek op een CDN te hosten.

 

jQuery Mobile (lokaal)

Gebruik deze startpagina als u de middelen zelf wilt hosten of als uw toepassing geen internetverbinding nodig heeft.

 

jQuery Mobile (PhoneGap)

Gebruik deze startpagina als uw webtoepassing systeemeigen functies van mobiele apparaten gebruikt wanneer de toepassing wordt gedistribueerd. Zie Webtoepassingen verpakken voor meer informatie.

 

 

Startpagina's gebruiken om een toepassing voor mobiele apparaten te maken

  1. Selecteer Bestand > Nieuw.

  2. Selecteer een van de volgende opties op basis van uw vereiste:

    • Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (CDN).

    • Pagina uit voorbeeld > Mobiele startpagina's > jQuery Mobile (lokaal).

     

  3. Klik op Maken.

    Schakel op de pagina die wordt weergegeven, de optie Koppelingen continu volgen (Weergave > Live View-opties) in en schakel over naar Live View. Gebruik de navigatieonderdelen om de werking van de toepassing te testen.

    Gebruik de opties in het menu Meerdere schermen om na te gaan hoe het ontwerp eruit ziet op apparaten met verschillende schermafmetingen. Schakel Live View uit en ga terug naar de ontwerpweergave.

  4. Selecteer jQuery Mobile in het deelvenster Invoegen (Venster > Invoegen). De onderdelen die u kunt toevoegen aan de webtoepassing, worden weergegeven.

  5. Plaats de cursor in de ontwerpweergave op de plaats waar u het onderdeel wilt invoegen en klik op het onderdeel in het deelvenster Invoegen. Pas de onderdelen aan met de opties in het dialoogvenster dat verschijnt.

  6. (jQuery Mobile - lokaal) Nadat u het HTML-bestand hebt opgeslagen, worden de jQuery Mobile-bestanden, inclusief de afbeeldingsbestanden, gekopieerd naar een map op de locatie van het HTML-bestand.

Geef een voorvertoning van de pagina weer in Live View. Bepaalde CSS-klassen worden alleen toegepast in Live View.

Een webtoepassing voor mobiele apparaten maken met een nieuwe pagina

Het onderdeel Pagina fungeert als container voor alle andere component van jQuery Mobile. U moet het onderdeel Pagina toevoegen voor u de overige onderdelen invoegt.

  1. Selecteer Bestand > Nieuw.

  2. Selecteer Lege pagina > HTML.

    Sommige jQuery Mobile-onderdelen gebruiken HTML5-kenmerken. Selecteer HTML5 als documenttype om ervoor te zorgen dat de pagina voldoet aan de HTML5-compatibiliteit tijdens de validatie.

  3. Selecteer jQuery Mobile in het menu in het deelvenster Invoegen (Venster > Invoegen). De onderdelen van jQuery Mobile verschijnen in het deelvenster.

  4. Sleep het onderdeel Pagina vanuit het deelvenster Invoegen naar de ontwerpweergave.

  5. Selecteer een van de volgende opties in het dialoogvenster jQuery Mobile-bestanden:

    Extern (CDN)

    Selecteer deze optie als u verbinding wilt maken met een externe CDN-server waarop de jQuery Mobile-bestanden worden gehost. Gebruik de standaardoptie voor de jQuery-site als u nog geen site met jQuery Mobile-bestanden hebt geconfigureerd. U kunt ook ervoor kiezen andere CDN-servers te gebruiken.

    Lokaal

    Met deze optie worden de beschikbare bestanden in Dreamweaver weergegeven. Als u een andere map wilt opgeven, klikt u op Bladeren en gaat u naar de map met de jQuery Mobile-bestanden.

    De CSS- en JavaScript-bestanden worden gekopieerd naar een lokale tijdelijke map totdat u het HTML-bestand opslaat op uw computer. Nadat u het HTML-bestand hebt opgeslagen, worden alle gekoppelde jQuery Mobile-bestanden en afbeeldingsbestanden gekopieerd naar een map in de hoofdmap van de site.

  6. Geef de eigenschappen voor het onderdeel Pagina op.

  7. Plaats de cursor in de ontwerpweergave op de plaats waar u het onderdeel wilt invoegen en klik op het onderdeel in het deelvenster Invoegen. Pas de onderdelen aan met de opties in het dialoogvenster dat verschijnt.

Geef een voorvertoning van de pagina weer in Live View. Bepaalde CSS-klassen worden alleen toegepast in Live View.

Aangepaste bestanden en mappen gebruiken

U kunt aangepaste CSS- en JavaScript-bestanden voor uw toepassing maken. Zorg dat u de bestanden de namen jquery.mobile.js, jquery.mobile.css en jquery.js geeft.

Ga als volgt te werk als u aangepaste mappen gebruikt:

  1. Download de niet-gecomprimeerde versie van de jQuery 1.5-kernbibliotheek vanaf http://docs.jquery.com/Downloading_jQuery#Download_jQuery.

  2. Sla het bestand op in de kernmap die de overige bronnen bevat.

 

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?