Hoe maak je een mobiele website met dreamweaver

Meer dan 100 miljoen consumenten gebruiken hun smartphones om op internet te bladeren volgens COM.score inc. Leer hoe u een mobiele website specifiek voor het mobiele publiek kunt maken. Voor deze tutorial heeft u Dreamweaver CS5 en hoger nodig. Dit artikel details over het maken van een jQuery mobiele website.

Stappen

  1. Titel afbeelding Maak een mobiele website met Dreamweaver Stap 1
1. Open Dreamweaver en ga naar het bestand > Nieuw. Je ziet dan een "Nieuw document" Venster. Aan de linkerkant wil je de optie kiezen "pagina van monster" Kies vervolgens in de volgende kolom "mobiele starters", dan "JQuery Mobile (CDN)"
  • Titel afbeelding Maak een mobiele website met Dreamweaver Stap 2
    2. Maak de pagina`s. Zodra u het JQuery Mobile (CDN) -bestand opent, ziet u een pagina die op dit lijkt:
  • Hoewel deze technisch een document van één pagina is, vertegenwoordigt elke koptekst een ander "bladzijde". Bijvoorbeeld, "Pagina een" is de startpagina voor de mobiele website, "Pagina twee" kan de pagina over ons zijn, "Pagina drie" kan uw servicepagina zijn enzovoort.
  • Titel afbeelding Maak een mobiele website met Dreamweaver Stap 3
    3. Kijk naar de code. Deze stappen kunnen behoorlijk lastig zijn als u onbekend bent met Basic HTML. Om de inhoud te maken, probeer dan te werken "splitweergave" op Dreamweaver. Hoe u bij die modus kunt komen, is als u naar de linkerhoek van Dreamweaver kijkt, onder het menu Bestand, ziet u vier opties "Code, Split, Design en Live" soortgelijk:
  • Kies de gemarkeerde optie "splitsen", en je ziet een weergave van code en de daadwerkelijke site naast elkaar. Bekijk de code.
  • 4. Bewerk de kopteksten voor elke pagina. Er is (div-gegevens-rol ="bladzijde" id ="bladzijde"), wat betekent dat het het begin is van een nieuwe pagina. Merk op dat elke pagina is gekoppeld aan een nummer `div-data-rol ="bladzijde" id ="pagina 2"`is de tweede pagina,` div-data-rol ="bladzijde" id ="Pagina 3"`is de derde pagina enzovoort

    `div-gegevens-rol ="koper"`is het koptekstgebied en u legt uw header-informatie tussen de twee "H1"en "/ H1" tags.
  • Titel afbeelding Maak een mobiele website met Dreamweaver Stap 5
    5. Bewerk de inhoud en menu-items. `div-gegevens-rol ="Inhoud"`is het begin van het gedeelte van de inhoud. Dit is waar u de daadwerkelijke inhoud van elke pagina plaatst. Merk op dat er op de eerste pagina is:
  • En als u op de werkelijke webpagina kijkt, ziet u dat de eerste pagina een lijst met koppelingen heeft. `UL Data-Rol ="lijstweergave"betekent dat u een lijst met koppelingen in het inhoudsgebied wilt.Bij het toevoegen van menu-items of `data-rol ="lijstweergave"`, zorg ervoor dat u de juiste tekst met de juiste pagina`s koppelt. Bijvoorbeeld als pagina twee is "Over ons", Pagina drie is "Onze service", en pagina vier is "Neem contact op" Dan wil je:Titel afbeelding Maak een mobiele website met Dreamweaver Stap 5Bullet1
  • Nu de inhoud bewerken, zet eenvoudig uw tekst tussen de `div-data-rol ="inhoud"`en` / div`-tags. Bijvoorbeeld:Titel afbeelding Maak een mobiele website met Dreamweaver Stap 5Bullet2
  • 6. Bewerk de voettekst. Om de voettekst te bewerken, zet u eenvoudig uw tekst in plaats van de "Pagina ondertekst" tekst.
  • Titel afbeelding Maak een mobiele website met Dreamweaver Stap 7
    7. Bekijk uw website in "live-modus". Vergeet niet waar je naar schakelde "Split-modus?" Rechts in dat gebied is er een knop die zegt "leven". Klik daarop en u zult zien hoe uw website eruit zal zien op een telefoon!

    • Tips

    Deel in het sociale netwerk:
    Vergelijkbaar