emkiset.ru

Een mobiele website maken met Dreamweaver

Meer dan 100 miljoen consumenten gebruiken hun smartphones om op het internet te surfen, volgens een onderzoek uitgevoerd door "comScore Inc." Leer hoe u een website kunt maken die speciaal is ontworpen voor uw mobiele doelgroep. Voor deze handleiding hebt u "Dreamweaver CS5" of een nieuwere versie nodig. Blijf lezen voor meer informatie over het maken van een mobiele jQuery-website.

stappen

Titel afbeelding Create a Mobile Website with Dreamweaver Step 1
1
Open Dreamweaver en ga naar "Bestand> Nieuw". U zult het venster "Nieuw document" zien. Selecteer links in het scherm de optie "Voorbeeldpagina" in de volgende kolom, selecteer "Mobile Starters" en vervolgens "jQuery Mobile (CDN)".
  • Titel afbeelding Create a Mobile Website with Dreamweaver Step 2
    2
    Maak de pagina`s. Zodra u het bestand "jQuery Mobile (CDN)" opent, ziet u een pagina die lijkt op deze:
  • Hoewel het technisch gezien een document van één pagina is, vertegenwoordigt elke kop verschillende "pagina`s". Bijvoorbeeld, "pagina een" is de homepage van de mobiele website, "pagina twee," kan de pagina "About", de "Pagina Drie" kan de pagina "diensten", enz. Zijn


  • Titel afbeelding Create a Mobile Website with Dreamweaver Step 3
    3
    Let op de code. Deze stappen kunnen een beetje moeilijk zijn als je geen basiskennis van HTML hebt. Voor het maken van de inhoud, voor mij persoonlijk, werk ik graag met de optie "Delen" om de code te zien en een voorbeeld te bekijken van hoe de pagina eruit zou zien. Om deze modus in de linkerhoek van Dreamweaver te selecteren in het menu "Bestand" zie je vier opties "Code", "Split", "Design" en "Live View" zoals weergegeven in de afbeelding:
  • Selecteer de optie "Delen" en u ziet de code en de huidige site. Laten we ons eerst concentreren op de code.
  • 4



    Bewerk de headers voor elke pagina. De code (div data-role = "page"), bepaalt het begin van een nieuwe pagina. Merk op dat elke pagina is gekoppeld aan een nummer `div data-role =` page `` is de tweede pagina, `div-data-role =` page `` is de derde pagina, enzovoort.

    `div data-role =` header `` is het header-gebied en u moet alle informatie tussen de tags `h1` en `/ h1` plaatsen.
  • Titel afbeelding Create a Mobile Website with Dreamweaver Step 5
    5
    Bewerk de inhoud en menu-items. `div data-role = "Content"` is het begin van de content-sectie. Hier plaatst u de huidige inhoud van elke pagina. Houd er rekening mee dat op de eerste pagina het verschijnt:
  • En als u naar de huidige pagina kijkt, ziet u dat de eerste pagina een lijst met koppelingen bevat. `ul data-role = "listview"` betekent dat je een lijst met links wilt laten verschijnen in het inhoudsgebied. Wanneer u menu-items of `data-role = "listview"` toevoegt, zorg er dan voor dat u de juiste tekst aan de juiste pagina`s koppelt. Als pagina twee bijvoorbeeld "Over" is, is pagina drie "Onze diensten" en pagina vier is "Contact", dan moet deze op de volgende manier worden geplaatst:
    Titel afbeelding Create a Mobile Website with Dreamweaver Step 5Bullet1
  • Om de inhoud nu te bewerken, plaatst u eenvoudig de tekst tussen de tags `div data-role =` content `` en `/ div`. Bijvoorbeeld:
    Titel afbeelding Create a Mobile Website with Dreamweaver Step 5Bullet2
  • 6
    Bewerk de voettekst Als je de voettekst wilt bewerken, plaats je je tekst in plaats van de tekst `Voettekst`.
  • Titel afbeelding Create a Mobile Website with Dreamweaver Step 7
    7
    Controleer uw website in de "Live View" -modus. Weet je nog waar je de weergave "Verdelen" activeert? In dat gebied is er een knop met de tekst `Live view`. Klik daar en u zult zien hoe uw website eruit zal zien op een telefoon.
  • Delen op sociale netwerken:

    Verwant
    Hoe een nieuw Excel-bestand op een Windows 7-telefoon te makenHoe een nieuw Excel-bestand op een Windows 7-telefoon te maken
    Hoe Web Guard te deactiverenHoe Web Guard te deactiveren
    Hoe beltonen per e-mail naar uw mobiele telefoon kunnen worden verzondenHoe beltonen per e-mail naar uw mobiele telefoon kunnen worden verzonden
    Hoe te taggen op Facebook mobielHoe te taggen op Facebook mobiel
    Hoe u uw website geschikt maakt voor mobielHoe u uw website geschikt maakt voor mobiel
    Een accordeonmenu maken in jQueryEen accordeonmenu maken in jQuery
    Hoe te printen op een MacHoe te printen op een Mac
    Hoe een Word-document af te drukkenHoe een Word-document af te drukken
    Photoshop gebruiken om een ​​webpagina te ontwerpenPhotoshop gebruiken om een ​​webpagina te ontwerpen
    Hoe gebruik ik Skype mobileHoe gebruik ik Skype mobile
    » » Een mobiele website maken met Dreamweaver
    © 2021 emkiset.ru