Podľa com.score Inc. používa svoje smartfóny na surfovanie po internete viac ako 100 miliónov spotrebiteľov. Naučte sa vytvárať webové stránky pre mobilné zariadenia špeciálne pre mobilné publikum. Na tento tutoriál budete potrebovať dreamweaver CS5 a novší. Tento článok podrobne popisuje, ako vytvoriť webovú stránku jquery pre mobily.
Kroky
Krok 1. Otvorte Dreamweaver a prejdite na súbor> Nový
Potom sa zobrazí okno „Nový dokument“. Na ľavej strane chcete vybrať možnosť „stránka zo vzorky“, potom v nasledujúcom stĺpci vyberte „Mobilné štartéry“a potom „jQuery Mobile (CDN)“
Krok 2. Vytvorte stránky
Akonáhle otvoríte súbor jQuery Mobile (CDN), zobrazí sa stránka, ktorá vyzerá podobne ako táto:
Aj keď je to technicky jednostranový dokument, každá hlavička predstavuje inú „stránku“. „Stránka One“je napríklad domovská stránka mobilného webu, stránka „Two“môže byť o nás, stránka „Three“môže byť stránka vašich služieb a podobne
Krok 3. Pozrite sa na kód
Ak nie ste oboznámení so základným jazykom HTML, môžu byť tieto kroky veľmi náročné. Ak chcete vytvoriť obsah, skúste v Dreamweaveri pracovať v „rozdelenom zobrazení“. Do tohto režimu sa dostanete tak, že sa pozriete do ľavého rohu Dreamweaveru a pod ponukou súborov sa vám zobrazia štyri možnosti „kód, rozdelenie, dizajn a živé“takto:
Vyberte zvýraznenú možnosť „rozdeliť“a vedľa seba sa zobrazí zobrazenie kódu a skutočného webu. Pozrite sa na kód
Krok 4. Upravte hlavičky pre každú stránku
Existuje (div data-role = "stránka"), čo znamená, že je to začiatok novej stránky. Každá stránka je priradená číslu „div data-role =" page "'je druhá stránka,' div data-role =" page "'je tretia stránka a podobne
'div data-role = "header"' je oblasť hlavičky a informácie o hlavičke vložíte medzi dve značky „h1“a „/h1“.
Krok 5. Upravte obsah a položky ponuky
'div data-role = "Content"' je začiatok sekcie obsahu. Tu umiestnite skutočný obsah každej stránky. Všimnite si, že na prvej stránke je:
-
a keď sa pozriete na skutočnú webovú stránku, uvidíte, že prvá stránka obsahuje zoznam odkazov. 'ul data-role = "listview" "znamená, že chcete zoznam odkazov v oblasti obsahu. Pri pridávaní akýchkoľvek položiek ponuky alebo' data-role =" listview "'zaistite prepojenie správneho textu so správnymi stránkami. Ak je napríklad strana dva „O nás“, strana tri „Naša služba“a strana štyri „Kontaktujte nás“, potom chcete uviesť:
Vytvorte si mobilnú webovú stránku s Dreamweaverom, krok 5, odrážka 1 -
Teraz, keď chcete upravovať obsah, jednoducho vložte text medzi značky „div data-role =" content "a tag//div. Napríklad:
Vytvorte si mobilnú webovú stránku s Dreamweaverom, krok 5, odrážka 2
Krok 6. Upravte pätu
Ak chcete upraviť pätu, jednoducho vložte text namiesto textu „Päta stránky“.
Krok 7. Pozrite sa na svoj web v „živom režime“
Pamätáte si, kde ste prešli do „rozdeleného režimu?“priamo v tejto oblasti je tlačidlo s nápisom „naživo“. Kliknite na to a uvidíte, ako bude váš web vyzerať v telefóne!
