Podle com.score Inc. používá své smartphony k procházení internetu více než 100 milionů spotřebitelů. Zjistěte, jak vytvořit mobilní web speciálně pro mobilní publikum. Pro tento tutoriál budete potřebovat Dreamweaver CS5 a vyšší. Tento článek podrobně popisuje, jak vytvořit mobilní web jquery.
Kroky
Krok 1. Otevřete Dreamweaver a přejděte do souboru> Nový
Poté se zobrazí okno „Nový dokument“. Na levé straně chcete vybrat možnost „stránka ze vzorku“, poté v dalším sloupci zvolit „mobilní předkrmy“a poté „jQuery Mobile (CDN)“
Krok 2. Vytvořte stránky
Jakmile otevřete soubor jQuery Mobile (CDN), zobrazí se stránka, která vypadá podobně jako tato:
Ačkoli se jedná technicky o jednostránkový dokument, každé záhlaví představuje jinou „stránku“. Například „Page One“je domovská stránka mobilního webu, „Page Two“může být stránka o nás, „Page Three“může být stránka vašich služeb a podobně
Krok 3. Podívejte se na kód
Tyto kroky mohou být docela ošidné, pokud neznáte základní HTML. Chcete -li obsah vytvořit, zkuste na Dreamweaveru pracovat v „rozděleném zobrazení“. Jak se dostat do tohoto režimu je, když se podíváte do levého rohu Dreamweaveru, pod nabídkou souborů uvidíte čtyři možnosti „kód, rozdělení, design a živé“takto:
Vyberte zvýrazněnou možnost „rozdělit“a uvidíte zobrazení kódu a skutečného webu vedle sebe. Podívejte se na kód
Krok 4. Upravte záhlaví pro každou stránku
Existuje (div data-role = "stránka"), což znamená, že je to začátek nové stránky. Každá stránka je spojena s číslem „div data-role =" page "'je druhá stránka,' div data-role =" page "'je třetí stránka atd.
'div data-role = "header"' je oblast záhlaví a mezi dvě značky "h1" a "/h1" vložíte informace o záhlaví.
Krok 5. Upravte obsah a položky nabídky
'div data-role = "Content"' je začátek části obsahu. Zde vkládáte skutečný obsah každé stránky. Všimněte si, že na první stránce je:
-
a když se podíváte na skutečnou webovou stránku, uvidíte, že první stránka obsahuje seznam odkazů. 'ul data-role = "listview"' znamená, že chcete v oblasti obsahu seznam odkazů. Při přidávání libovolných položek nabídky nebo 'data-role = "listview"' zajistěte propojení správného textu se správnými stránkami. Pokud je například druhá stránka „O nás“, třetí stránka je „Naše služba“a čtvrtá stránka je „Kontaktujte nás“, pak chcete zadat:
Vytvořte mobilní web s aplikací Dreamweaver, krok 5, odrážka 1 -
Chcete-li nyní upravovat obsah, jednoduše vložte text mezi značky 'div data-role = "content"' a '/div'. Například:
Vytvořte si mobilní web s aplikací Dreamweaver Krok 5 Bullet 2
Krok 6. Upravte zápatí
Chcete -li upravit zápatí, jednoduše vložte text na místo textu „Zápatí stránky“.
Krok 7. Podívejte se na svůj web v „živém režimu“
Pamatujete si, kde jste přešli do „rozděleného režimu?“přímo v této oblasti je tlačítko s nápisem „live“. Klikněte na to a uvidíte, jak bude váš web vypadat na telefonu!
