HodTari.com

Oprettelse af et mobilt websted med Dreamweaver

Ifølge comScore Inc bruger mere end 100 millioner forbrugere mobiltelefoner til at surfe på internettet. Lær, hvordan du opretter en hjemmeside specifikt til dette publikum. Til denne vejledning skal du bruge Dreamweaver CS5 eller højere. Vi lærer at oprette et mobilt jquery-websted.

trin

Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 1
1

Video: Dynamicweb CMS

Åbn Dreamweaver og gå til "File"> "New" - du vil se vinduet "New Document". I venstre hjørne skal du vælge indstillingen "Mobile Starters". Vælg derefter "Mobile Starters" i den næste kolonne, efterfulgt af "jQuery Mobile (CDN)".

  • Video: Create an EU Cookie Consent Javascript Website Pop Up

    Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 2
    2
    Opret siderne. Når du åbner filen jQuery Mobile (CDN), vil du se en side, der ligner den, der vises på følgende billede:
    • Selv om dette er teknisk et enkelt-sidedokument, repræsenterer hvert emne en anden "side". For eksempel er "Side One" hjemmesiden på det mobile websted, "Side To" kan være feltet Om "Området" og "Side Tre", siden Tjenester, og så videre.
  • Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 3
    3
    Kig på koden. Disse trin kan være komplekse, hvis du ikke er bekendt med grundlæggende HTML. For at oprette indhold kan jeg godt lide at arbejde i Dreamweaver`s Split-visning. For at finde det, gå til venstre hjørne af programmet under menuen "Fil", og du vil finde fire "Kode", "Split", "Design" og "Live" indstillinger. :
    • Vælg indstillingen "Split", og du vil se en kode ved siden af ​​webstedet. Lad os se koden et øjeblik.
  • 4


    Rediger titlen på hver side. Koden (div data-roll = "side" id = "side") repræsenterer starten på en ny side. Bemærk, at den samme kode, når den er tilknyttet en anden side, repræsenterer et andet ark i dokumentet, f.eks. Div data-roll = "side" id = "page2" eller "div data-role =" side "id =" page3 " . Koden

    `div data-role = "header" er titlen, som skal skrives mellem "h1" og "/ h1" tags.
  • Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 5
    5
    Rediger indholdet og menupunkterne. Koden `div data-role = "Indhold" er begyndelsen på indholdsafsnittet. Det er her du lægger indholdet på hver side. Her er hvad du finder på den første side:
    • Se på selve siden for at finde en liste over links. Koden `ul data-roll = "listevisning` `betyder at du vil indsætte en liste over links i indholdsområdet. Når du tilføjer elementer i menuen, eller `data-role = "listview"`, skal du sørge for at indtaste teksterne på de rigtige sider. For eksempel, hvis den anden side henviser til afsnittet "Om virksomheden", er den tredje "Services" og den fjerde, "Kontakt os", sat:

      Video: Design vertical menu with CSS

      Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 5Bullet1
    • For at redigere indhold skal du blot indsætte teksten mellem tags `div data-role = "indhold" og "/ div". For eksempel:

      Video: PHP Tutorials | PHP For Beginners

      Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 5Bullet2
  • 6
    Rediger footer. Hvis du vil redigere det, skal du indtaste teksten i feltet "Sidefodbold".
  • Billede med titlen Opret en mobil hjemmeside med Dreamweaver Trin 7
    7
    Tag et kig på dit websted gennem "Live" indstillingen. Husk den placering du ændrede til "Split" -funktionen? I den er der en knap, der siger "Live". Klik på det, og du vil se, hvordan dit websted vil være på en mobiltelefon!
    • Del på sociale netværk:

    Relaterede
    © 2024 HodTari.com