Hoe om `n mobiele webwerf met Dreamweaver te skep

Meer as 100 miljoen verbruikers gebruik hul slimfone om op die internet te navigeer, volgens `n opname deur "comScore Inc." Leer hoe om `n webwerf te skep wat spesifiek ontwerp is vir jou mobiele gehoor. Vir hierdie gids sal jy `Dreamweaver CS5` of `n nuwer weergawe nodig hê. Lees lees om te leer hoe om `n mobiele jQuery webwerf te skep.

stappe

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 1

Open Dreamweaver en gaan na "File> New". U sal die venster "Nuwe dokument" sien. Kies die opsie `Voorbeeldbladsy` in die volgende kolom aan die linkerkant van die skerm, kies `Mobile Starters` en dan `jQuery Mobile (CDN)`.

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 2

Skep die bladsye. Sodra jy die "jQuery Mobile (CDN)" -lêer oopgemaak het, sal jy `n bladsy soortgelyk aan hierdie een sien:

Hoewel tegnies `n enkel-bladsy dokument, elke opskrif verteenwoordig verskillende "bladsye". Byvoorbeeld, "bladsy een" is die tuisblad van die mobiele webwerf, "bladsy twee," mag die bladsy "Meer oor", die "Page Drie" kan word om die bladsy "dienste", ens wees

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 3

Hou die kode in ag. Hierdie stappe kan `n bietjie moeilik wees as jy nie basiese kennis van HTML het nie. Om die inhoud persoonlik te skep, om my, ek hou daarvan om saam met die "Split" opsie om die kode te sien en `n voorbeeld van hoe die bladsy sou doen. Om hierdie modus in die linkerhoek van Dreamweaver kies, onder die menu "File" sal jy sien vier opsies "Kode", "Split", "Design" en "Live View" soos in die prentjie:

Kies die opsie wat sê "Verdeel" en jy sal die kode en die huidige webwerf sien. Kom ons fokus eers op die kode.

Wysig die opskrifte vir elke bladsy. Die kode (div data-role = "page") stel die begin van `n nuwe bladsy vas. Let daarop dat elke bladsy geassosieer word met `n nommer `div data-role = "bladsy"` is die tweede bladsy, `div data-role = "page"` is die derde bladsy en so aan.

`div data-role = "header"` is die koptekst area en jy moet al die inligting tussen die "h1" en "/ h1" etikette plaas.

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 5

Wysig die inhoud en kieslysitems. `div data-role = "Inhoud"` is die begin van die inhoudsafdeling. Hier sit jy die huidige inhoud van elke bladsy. Hou in gedagte dat dit op die eerste bladsy verskyn:

En as jy na die huidige bladsy kyk, sal jy sien dat die eerste bladsy `n lys skakels het. `ul data-role = "listview"` beteken dat jy `n lys skakels wil hê wat in die inhoudsgebied verskyn. Wanneer jy kieslysitems of `data-roll =` listview `voeg, moet jy die regte teks met die korrekte bladsye koppel. Byvoorbeeld, as bladsy twee `About` is, is bladsy drie `Ons dienste` en bladsy vier is `Kontak`, en dan moet dit op die volgende manier gestel word:

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 5Bullet1

Om nou die inhoud te wysig, plaas die teks tussen die div data-role = "inhoud" en "/ div" van die tags. Byvoorbeeld:

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 5Bullet2

Wysig die voetskrif Om die voetskrif te wysig, plaas jou teks in plaas van die "Footer" teks.

Prent getiteld Skep `n mobiele webwerf met Dreamweaver Stap 7

Gaan jou webwerf in die "Live View" af. Onthou jy waar jy die "verdeel" aansig aktiveer? Regs in daardie area is daar `n knoppie wat sê "Live view". Klik daar en jy sal sien hoe jou webwerf op `n foon sal kyk.

Deel op sosiale netwerke:

Verwante