Sådan opretter du en mobil hjemmeside med dreamweaver

Over 100 millioner forbrugere bruger deres smartphones til at gennemse internettet i henhold til com.Score Inc. Lær, hvordan du opretter en mobil hjemmeside specielt til mobil publikum. For denne vejledning skal du have brug for Dreamweaver CS5 og op. Denne artikel detaljer, hvordan man opretter en jQuery mobilwebsted.

Trin

  1. Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 1
1. Åben Dreamweaver og gå til fil > Ny. Du vil så se en "Nyt dokument" Vindue. På venstre side vil du vælge indstillingen "side fra prøve" Så i den næste kolonne skal du vælge "Mobile Stareters", derefter "jquery mobil (cdn)"
  • Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 2
    2. Opret siderne. Når du har åbnet JQuery Mobile (CDN) filen, vil du se en side, der ligner dette:
  • Selvom dette teknisk er et enkelt sidedokument, repræsenterer hver header en anden "side". For eksempel, "Side en" er hjemmesiden for mobilwebstedet, "Side to" kunne være den om os side, "Side tre" kunne være din tjenester side og så videre.
  • Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 3
    3. Kig på koden. Disse trin kan være ret vanskelige, hvis du ikke er bekendt med grundlæggende HTML. For at oprette indholdet, prøv at arbejde i "Split View" på Dreamweaver. Sådan kommer du til den tilstand er Hvis du ser på venstre hjørne af Dreamweaver, under menuen Filer, vil du se fire muligheder "kode, split, design og live" sådan her:
  • Vælg den fremhævede mulighed "dele", og du vil se en visning af kode og den faktiske side side om side. Tag et kig på koden.
  • 4. Rediger overskrifterne for hver side. Der er (div data-rolle ="side" ID ="side"), hvilket betyder, at det er begyndelsen på en ny side. Bemærk, at hver side er forbundet med et nummer `Div Data-Role ="side" ID ="Side2"`er den anden side,` div data-rolle ="side" ID ="side3"`er den tredje side og så videre

    `div data-rolle ="header"`er headerområdet, og du sætter dine headeroplysninger mellem de to "H1"og "/ H1" Tags.
  • Billedet med titlen Opret en mobil hjemmeside med Dreamweaver Trin 5
    5. Rediger indholdet og menupunkterne. `div data-rolle ="Indhold"`er begyndelsen af ​​indholdsafsnittet. Det er her, hvor du sætter det faktiske indhold på hver side. Bemærk, at der på den første side er:
  • Og hvis du ser på den faktiske webside, ser du, at den første side har en liste over links. `ul Data-rolle ="ListView"`betyder at du vil have en liste over links i indholdsområdet.Når du tilføjer menupunkter eller `Data-Role ="ListView"`, sørg for at linke den korrekte tekst med de rigtige sider. For eksempel hvis side to er "Om os", Side tre er "Vores service", og side fire er "Kontakt os" Så vil du sætte:Billede med titlen Opret en mobil hjemmeside med Dreamweaver trin 5Bullet1
  • Nu for at redigere indhold, skal du finde din tekst mellem `Div Data-Role ="indhold"`og` / div `tags. For eksempel:Billede med titlen Opret en mobil hjemmeside med Dreamweaver trin 5Bullet2
  • 6. Rediger footer. For at redigere footer, skal du blot sætte din tekst i stedet for "Page Footer" tekst.
  • Billedet med titlen Opret en mobil hjemmeside med Dreamweaver Trin 7
    7. Tag et kig på dit websted i "Live Mode". Husk, hvor du skiftede ind "Split-tilstand?" Lige i dette område er der en knap, der siger "Direkte". Klik på det, og du vil se, hvad dit websted vil se ud på en telefon!

    • Tips

    Del på sociale netværk :
    Lignende