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

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

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

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.

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

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

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

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