Volgens com.score Inc. gebruiken meer dan 100 miljoen consumenten hun smartphone om op internet te surfen. Leer hoe u een mobiele website maakt die specifiek is afgestemd op het mobiele publiek. Voor deze tutorial heb je Dreamweaver CS5 en hoger nodig. In dit artikel wordt beschreven hoe u een mobiele jQuery-website maakt.
Stappen
Stap 1. Open Dreamweaver en ga naar bestand > Nieuw
U ziet dan een venster "Nieuw document". Aan de linkerkant wilt u de optie "pagina uit voorbeeld" kiezen en vervolgens in de volgende kolom "mobiele starters" kiezen en vervolgens "jQuery Mobile (CDN)"
Stap 2. Maak de pagina's
Zodra u het jQuery Mobile (CDN)-bestand opent, ziet u een pagina die er ongeveer zo uitziet:
Hoewel dit technisch gezien een document van één pagina is, vertegenwoordigt elke kop een andere "pagina". "Pagina één" is bijvoorbeeld de startpagina voor de mobiele website, "Pagina twee" kan de over ons-pagina zijn, "Pagina drie" kan uw servicespagina zijn, enzovoort
Stap 3. Bekijk de code
Deze stappen kunnen behoorlijk lastig zijn als u niet bekend bent met basis-HTML. Probeer in Dreamweaver in "gesplitste weergave" te werken om de inhoud te maken. Hoe je naar die modus gaat, is als je naar de linkerhoek van Dreamweaver kijkt, onder het bestandsmenu, je ziet vier opties "code, split, ontwerp en live" zoals deze:
Kies de gemarkeerde optie "splitsen", en u ziet een weergave van de code en de eigenlijke site naast elkaar. Kijk eens naar de code
Stap 4. Bewerk de kopteksten voor elke pagina
Er is (div data-role="page"), wat betekent dat dit het begin is 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 kopgedeelte en u plaatst uw koptekstinformatie tussen de twee "h1"- en "/h1"-tags.
Stap 5. Bewerk de inhoud en menu-items
'div data-role="Content"' is het begin van de inhoudssectie. Hier plaatst u de daadwerkelijke inhoud van elke pagina. Merk op dat er op de eerste pagina staat:
-
en als je naar de eigenlijke webpagina kijkt, zie je dat de eerste pagina een lijst met links bevat. 'ul data-role="listview"' betekent dat u een lijst met links in het inhoudsgebied wilt. Zorg er bij het toevoegen van menu-items of 'data-role="listview"' voor dat u de juiste tekst koppelt aan de juiste pagina's. Als pagina twee bijvoorbeeld 'Over ons' is, pagina drie 'Onze service' is en pagina vier 'Contact' is, wilt u het volgende plaatsen:
Maak een mobiele website met Dreamweaver Stap 5 Bullet 1 -
Om nu inhoud te bewerken, plaatst u eenvoudig uw tekst tussen de tags 'div data-role="content"' en '/div'. Bijvoorbeeld:
Maak een mobiele website met Dreamweaver Stap 5 Bullet 2
Stap 6. Bewerk de voettekst
Om de voettekst te bewerken, plaatst u eenvoudig uw tekst in plaats van de tekst "Paginavoettekst".
Stap 7. Bekijk je website in "live Mode"
Weet je nog waar je bent overgeschakeld naar de "split-modus?" precies in dat gebied is er een knop met de tekst "live". Klik daarop en je ziet hoe je website eruit zal zien op een telefoon!
