Yli 100 miljoonaa kuluttajaa käyttää älypuhelimiaan internetin selaamiseen com.score Inc: n mukaan. Opi luomaan mobiilisivusto erityisesti mobiiliyleisölle. Tässä opetusohjelmassa tarvitset Dreamweaver CS5: n tai uudemman. Tässä artikkelissa kerrotaan, kuinka voit luoda jquery -mobiilisivuston.
Askeleet
Vaihe 1. Avaa Dreamweaver ja siirry tiedostoon> Uusi
Näet "Uusi asiakirja" -ikkunan. Vasemmasta reunasta haluat valita vaihtoehdon "sivu näytteestä" ja valitse seuraavassa sarakkeessa "Mobile Starters" ja sitten "jQuery Mobile (CDN)"
Vaihe 2. Luo sivut
Kun avaat jQuery Mobile (CDN) -tiedoston, näet sivun, joka näyttää tältä:
Vaikka tämä teknisesti on yksisivuinen asiakirja, jokainen otsikko edustaa erilaista "sivua". Esimerkiksi "Sivu yksi" on mobiilisivuston kotisivu, "Sivu kaksi" voisi olla tietoja meistä, "Sivu kolme" voisi olla palvelusivusi ja niin edelleen
Vaihe 3. Katso koodi
Nämä vaiheet voivat olla melko hankalia, jos et tunne perus -HTML -koodia. Sisällön luomiseksi kokeile Dreamweaverin jaettua näkymää. Pääset tähän tilaan, jos katsot Dreamweaverin vasenta kulmaa, tiedostovalikon alapuolella, näet neljä vaihtoehtoa "koodi, jako, suunnittelu ja live":
Valitse korostettu vaihtoehto "split", niin näet koodinäkymän ja todellisen sivuston vierekkäin. Katsokaa koodia
Vaihe 4. Muokkaa kunkin sivun otsikoita
On (div data-role = "page"), mikä tarkoittaa, että se on uuden sivun alku. Huomaa, että jokainen sivu liittyy numeroon 'div data-role = "page"' on toinen sivu, 'div data-role = "page"' on kolmas sivu ja niin edelleen
'div data-role = "header"' on otsikkoalue, ja asetat otsikkotietosi kahden "h1"-ja "/h1" -tunnisteen väliin.
Vaihe 5. Muokkaa sisältöä ja valikkokohteita
'div data-role = "Content"' on sisältöosion alku. Tähän voit laittaa jokaisen sivun todellisen sisällön. Huomaa, että ensimmäisellä sivulla on:
-
ja jos katsot varsinaista verkkosivua, näet, että ensimmäisellä sivulla on luettelo linkeistä. 'ul data-role = "listview"' tarkoittaa, että haluat luettelon linkkejä sisältöalueelle. Kun lisäät valikkokohteita tai 'data-role = "listview"', varmista, että linkität oikean tekstin oikeille sivuille. Jos esimerkiksi sivu kaksi on "Tietoja meistä", sivu kolme on "Palvelumme" ja sivu neljä on "Ota yhteyttä", haluat lisätä:
Luo mobiilisivusto Dreamweaverilla Vaihe 5 Luettelo 1 -
Jos haluat muokata sisältöä, laita tekstisi "div data-role =" content "" ja "/div" -tunnisteiden väliin. Esimerkiksi:
Luo mobiilisivusto Dreamweaverilla Vaihe 5 Luettelo 2
Vaihe 6. Muokkaa alatunnistetta
Voit muokata alatunnistetta asettamalla tekstisi "Sivun alatunniste" -tekstin tilalle.
Vaihe 7. Katso verkkosivustoasi "live -tilassa"
Muistatko missä vaihdoit "split -tilaan"? Aivan tällä alueella on painike, joka sanoo "live". Napsauta sitä ja näet, miltä verkkosivustosi näyttää puhelimessa!
