Több mint 100 millió fogyasztó használja okostelefonját az internet böngészéséhez a com.score Inc. szerint. Ismerje meg, hogyan hozhat létre mobil webhelyet kifejezetten a mobil közönség számára. Ehhez az oktatóanyaghoz szüksége lesz a dreamweaver CS5 és újabb verzióira. Ez a cikk részletezi, hogyan hozhat létre jquery mobilwebhelyet.
Lépések
1. lépés: Nyissa meg a Dreamweaver alkalmazást, és lépjen a fájl> Új elemre
Ekkor megjelenik az "Új dokumentum" ablak. A bal oldalon válassza az "oldal a mintából" lehetőséget, majd a következő oszlopban válassza a "Mobil indítók", majd a "jQuery Mobile (CDN)" lehetőséget
2. lépés. Hozza létre az oldalakat
Miután megnyitotta a jQuery Mobile (CDN) fájlt, egy ehhez hasonló oldalt fog látni:
Bár ez technikailag egy oldalas dokumentum, minden fejléc más "oldalt" jelent. Például az „Első oldal” a mobilwebhely kezdőlapja, a „Második oldal” lehet a rólunk szóló oldal, a „Harmadik oldal” lehet a szolgáltatások oldala stb
Lépés 3. Nézze meg a kódot
Ezek a lépések meglehetősen bonyolultak lehetnek, ha nem ismeri az alapvető HTML -t. A tartalom létrehozásához próbálja meg megosztott nézetben használni a Dreamweaver alkalmazást. Hogyan lehet elérni ezt a módot, ha megnézi a Dreamweaver bal oldali sarkát, a fájlmenü alatt, akkor négy lehetőséget lát: "kód, felosztás, tervezés és élő":
Válassza ki a "felosztás" kiemelt opciót, és egymás mellett látja a kód és a tényleges webhely nézetét. Nézze meg a kódot
4. lépés. Szerkessze az egyes oldalak fejléceit
Van (div data-role = "page"), ami azt jelenti, hogy ez egy új oldal kezdete. Ne feledje, hogy minden oldalhoz egy szám tartozik 'div data-role = "page"' a második oldal, a 'div data-role = "page"' a harmadik oldal és így tovább
A 'div data-role = "header"' a fejlécterület, és a fejlécadatokat a két "h1" és "/h1" címke közé helyezi.
5. lépés: Szerkessze a tartalmat és a menüelemeket
'div data-role = "Content"' a tartalom szakasz eleje. Ide helyezi az egyes oldalak tényleges tartalmát. Ne feledje, hogy az első oldalon ez található:
-
és ha megnézi a tényleges weboldalt, látja, hogy az első oldalon linkek vannak. Az 'ul data-role = "listview"' azt jelenti, hogy hivatkozási listát szeretne a tartalomterületre. Bármilyen menüelem vagy "data-role =" listview "'hozzáadásakor ügyeljen arra, hogy a megfelelő szöveget a megfelelő oldalakkal kapcsolja össze. Például, ha a második oldal "Rólunk", a harmadik oldal a "Szolgáltatásunk", a negyedik oldal "Kapcsolatfelvétel", akkor a következőt kell tennie:
Mobil weboldal létrehozása a Dreamweaver segítségével 5. lépés Bullet 1 -
A tartalom szerkesztéséhez egyszerűen helyezze be a szöveget a 'div data-role = "content"' és a//div címkék közé. Például:
Hozzon létre mobilwebhelyet a Dreamweaver segítségével 5. lépés Bullet 2
6. lépés. Lábléc szerkesztése
A lábléc szerkesztéséhez egyszerűen tegye a szöveget az "Oldal lábléce" szöveg helyére.
Lépés 7. Vessen egy pillantást webhelyére „élő módban”
Emlékszel, hol kapcsoltál "osztott üzemmódra"? Ezen a területen van egy gomb, amely azt mondja: "élő". Kattintson erre, és látni fogja, hogyan fog kinézni a webhelye telefonon!
