Pomocí responzivního návrhu můžete v aplikaci Adobe Muse vytvářet a navrhovat weby pro mobilní telefony. Pomocí responzivního návrhu můžete pomocí jediného souboru aplikace Muse vytvořit weby pro všechna zařízení, včetně mobilních telefonů.

Nejprve určete šířku prohlížeče, pro kterou chcete web navrhnout. Poté můžete pokračovat v návrhu webu. Další informace o vytváření mobilních webů pomocí responzivního rozvržení naleznete v tématu Vytváření responzivních webů.

Chcete-li navrhnout alternativní rozvržení pouze pro mobilní weby, přečtěte si následující článek.

Pomocí aplikace Adobe Muse lze vytvářet rozvržení webů pro webový obsah, který se bude zobrazovat ve stolních počítačích, smartphonech a tabletech. Pomocí funkcí návrhu pro mobilní zařízení lze vytvářet alternativní rozvržení pro telefony a tablety a pro stolní počítače.

Aplikace Adobe Muse obsahuje nastavení, například přepínání 100% šířky a funkci Zápatí vždy dole, která zajišťují, že se vaše návrhy budou správně zobrazovat na obrazovkách řady zařízení dostupných v současné době na trhu. Aplikace Adobe Muse vám umožní používat známé pracovní postupy k tvorbě působivých návrhů pro každý myslitelný rozměr obrazovky.

Postup vytvoření alternativního rozvržení pro mobilní telefony:

Přidání rozvržení pro telefon pro existující web Adobe Muse

Pokud vytvoříte nový projekt, můžete nejprve navrhnout jakékoliv rozvržení a poté vytvořit další rozvržení. To vše ve stejném souboru .Muse.  Při publikování nebo exportu webu aplikace Adobe Muse automaticky vygeneruje soubor s názvem sitemap.xml, který obsahuje seznam všech stránek pro všechna rozvržení. Soubor sitemap.xml se nahraje spolu s ostatním materiálem webu. Vylepšuje optimalizaci pro vyhledávače (SEO) tím, že vyhledávačům pomáhá web indexovat, a stránky jsou tak ve výsledcích vyhledávání hodnoceny přesně.

Chcete-li vytvořit nové mobilní rozvržení pro telefon, je nejdříve nutné zkontrolovat obsah na existujícím webu a určit, které položky jsou potřebné pro uživatelské prostředí ve smartphonu. Jelikož uživatelé smartphonů často zobrazují obsah na menší obrazovce, je důležité vzhled zjednodušit a zobrazit pouze obsah, který je užitečný a snadno se s ním pracuje na dotykové obrazovce.

Nastavení vzorové stránky a přidání běžných prvků webové stránky

Přidání hypertextových odkazů pro navigaci ve webu

Pomocí hypertextových odkazů můžete v aplikaci Adobe Muse snadno vytvářet odkazy na externí stránky, stahovatelné soubory, části webových stránek a další. Nastavením vhodné navigace ve webu zajistíte, že se návštěvníci budou schopni po stránkách vašeho webu snadno pohybovat. Dobře vytvořená navigace ve webu také pomáhá optimalizovat váš web pro vyhledávací moduly. Další informace najdete v části Vytváření hypertextových odkazů.

V rozbalovacím seznamu Hypertextové odkazy najdete seznam stránek nebo kotev obsažených v mapě vašeho webu. Správné odkazy můžete začít vyhledávat zahájením psaní názvu stránky nebo kotvy. Stačí zadat několik prvních písmen a nabídka Hypertextové odkazy výsledky vyfiltruje a zobrazí je v rozbalovacím seznamu. To usnadňuje přístup k odkazům, které chcete rychle aktualizovat.

Přidání obsahu stránky na stránky rozvržení pro telefon

Začnete dokončením domovské stránky.

1. Klikněte na kartu Interiér (Telefon). Zkopírujte celou skupinu očíslovaných tlačítek.
2. Pomocí funkce Přejít na stránku přejděte na stránku Domovská (telefon) a skupinu vložte. Odkazy přidané v předchozí části zůstaly zachovány, a domovská stránka i vzorová stránka Interiér tak sdílí stejnou navigaci.
3. Pomocí nástroje pro Výběr umístěte skupinu na střed domovské stránky, blízko spodní částí zápatí.
4. Kliknutím na kartu Scratch (Stolní počítač) se vraťte na stránku Scratch. Zkopírujte textový rámeček v levé skupině, ve kterém je napsáno: There's more than one way to solve a problem (Problémy lze řešit více než jedním způsobem).
5. Klikněte na kartu Domovská (Telefon) a vložte textový rámeček. Textový rámeček umístěte pomocí nástroje pro Výběr tak, aby byl zarovnán ve středu nad skupinou tlačítek.

V dalším kroku přidáte obsah stránky pro stránku Část 01.

1. Kliknutím na kartu Scratch (Stolní počítač) se vraťte na stránku Scratch. Zvolte bílý zaoblený obdélník na pozadí a tři textové rámečky v druhé skupině zleva. Tři textové rámečky obsahují kroužek 01, zástupný text části 01 a oranžové tlačítko Phone (Telefon). Vybrané položky zkopírujte.
2. Stiskněte klávesy Command+J (Mac) nebo Control+J (Windows) a zadejte první tři písmena slova Část 01. Stisknutím šipky dolů vyberte stránku telefonu Část 01 a poté ji stisknutím klávesy Return/Enter otevřete v zobrazení Návrh.
3. Prvky vložte na stránku Část 01 v rozložení pro telefon. Zarovnejte prvky na střed pomocí dočasně zobrazených vodítek v nástroji pro Výběr.

Účelem stránky Část 01 je krátce představit firmu a usnadnit mobilním návštěvníkům do firmy zavolat. Při navrhování mobilních webových stránek můžete přidat nový typ odkazu, který návštěvníkům umožňuje vyvolat klepnutím na obrazovku smartphonu obrazovku vytáčení a zavolat na číslo. Je to skvělá funkce pro mobilní weby, protože potenciálním zákazníkům umožňuje do firmy zavolat velmi snadno.

Chcete-li v mobilním rozložení přidat odkaz pro vytáčení telefonních čísel, postupujte následovně:

1. Pomocí nástroje pro Výběr zvolte tlačítko Phone (Telefon).
2. V poli nabídky Odkazy zadejte tel:+1 a poté telefonní číslo, například:
   tel:+14155551234

Tento formát mobilní prohlížeče rozeznají jako odkaz na telefonní číslo.

3. Klávesou Return nebo Enter odkaz uložte.

Poznámka: Chcete-li spíše vytvořit odkaz pro odeslání e-mailu, zadejte do pole nabídky Hypertextový odkaz adresu v následujícím formátu:
mailto:designers@design-is-fun.com

Po přidání odkazu k tlačítku Phone (Telefon) je návrh stránky Část 01 dokončen.

1. Kliknutím na kartu Scratch (Stolní počítač) se vraťte na stránku Scratch. Vyberte bílý zaoblený obdélník na pozadí, zelený kroužek 02, textový rámeček Section 02 (Část 02), vloženou mapu a zelené tlačítko Map (Mapa). Vybrané položky zkopírujte.
2. Stiskněte Klávesy Command+J (Mac) nebo Control+J (Windows) a zadejte první tři písmena slova Část 02. Stisknutím šipky dolů vyberte stránku telefonu Část 02 a poté ji stisknutím klávesy Return/Enter otevřete v zobrazení Návrh.
3. Prvky zkopírované v kroku 1 vložte na stránku Část 02 v rozvržení pro telefon. Pomocí zarovnávacích vodítek v nástroji pro Výběr prvky zarovnejte na střed stránky.

Stránka Část 02 obsahuje vložený kód HTML, který vygenerovaly webové stránky Mapy Google za účelem vytvoření interaktivní mapy.

Pokud jste prošli výukovou lekci s názvem Začínáme s aplikací Muse, nejspíš si pamatujete, že jste z webových stránek Google zkopírovali zdrojový kód Map Google a vložili jej na stránku pomocí funkce vloženého kódu HTML v aplikaci Muse.

Kód v Mapách Google naštěstí již obsahuje podporu pro ovládání dotykové obrazovky prsty. Návštěvníci s mobilními zařízeními tak mohou s mapou snadno pracovat. Pro tento ukázkový projekt již byly rozměry mapy upraveny.

Pokud však budete potřebovat rozměry vloženého obsahu HTML ve svých projektech změnit, můžete na obsah kliknout pravým tlačítkem a vybrat možnost HTML, čímž kód zobrazíte v okně HTML. V kódu lze úpravou hodnot výšky a šířky změnit velikost mapy tak, aby se vešla na menší obrazovku.

Pokud jste otevřeli okno Upravit HTML, zavřete jej tlačítkem OK, aniž byste provedli nějaké změny.

4. Vyberte tlačítko Map (Mapa).

Tentokrát budete přidávat odkaz na externí webové stránky (Mapy Google), aby mobilní návštěvníci mohli snadno přejít na plnou verzi mapy v novém okně prohlížeče.

5. Zkopírujte níže uvedený odkaz a vložte jej do pole nabídky Odkazy:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

6. Klikněte na slovo Odkazy po levé straně nabídky Odkazy. V zobrazeném dialogovém okně zaškrtněte políčko: Otevřít odkaz v novém okně nebo na nové kartě. V poli Popisek nástroje zadejte následující text: Map to Adobe Fremont (Mapovat na Adobe Fremont).

7. Dialogové okno Odkazy zavřete tím, že kliknete mimo něj.

V dalším kroku přidáte obsah stránky pro stránku Část 03.

1. Kliknutím na kartu Scratch (Stolní počítač) se vraťte na stránku Scratch. Vyberte bílý zaoblený obdélník na pozadí, červený kroužek 03, textový rámeček Section 03 (Část 03), kontaktní formulář a tlačítko Odeslat. Vybrané položky zkopírujte.
2. Stiskněte Klávesy Command+J (Mac) nebo Control+J (Windows) a zadejte první tři písmena slova Část 03. Stisknutím šipky dolů vyberte stránku telefonu Část 03 a poté ji stisknutím klávesy Return/Enter otevřete v zobrazení Návrh.
3. Prvky zkopírované v kroku 1 vložte na stránku Část 03 v rozvržení pro telefon. Pomocí zarovnávacích vodítek v nástroji pro Výběr prvky zarovnejte na střed stránky. Styly použité ve widgetu Formulář pro stolní počítače zůstanou při kopírování do rozvržení pro telefon zachovány. Jediná změna provedená za účelem přípravy formuláře pro mobilní rozvržení spočívá ve změně velikost formuláře a jeho prvků, aby se formulář vešel na menší obrazovku.

Stránka Část 03 obsahuje widget Formulář, který ke zpracování dat odeslaných prostřednictvím formuláře používá skripty a databázi na serveru systému Business Catalyst. Po kliknutí na tlačítko Publikovat a nahrání souborů webu z aplikace Muse bude formulář fungovat automaticky.

Poznámka: Svůj web dokončený v aplikaci Muse můžete hostovat i prostřednictvím jiných poskytovatelů služeb. Pokud však kontaktní formuláře nebudou hostovány na serverech systému Business Catalyst, bude nutné vytvořit další kódování, aby fungovaly.

V tomto ukázkovém projektu nemá kontaktní formulář aktivován test CAPTCHA. Test CAPTCHA je typ nastavení v nabídce Možnosti pro widgety Formulář, které můžete přidat, pokud potřebujete potvrdit, že byl formulář odeslán člověkem, a nikoliv skriptem nebo spambotem – rozhraní CAPTCHA zobrazuje obrázek s řadou znaků, které musí návštěvník zadat do odpovídajícího řádku, aby mohl prostřednictvím formuláře úspěšně odeslat zprávu. Ačkoliv mohou být formuláře odeslané spambotem obtěžující, je důležité zvážit použitelnost webu v mobilním telefonu. Pokud se bude formulář příliš obtížně vyplňovat, může se návštěvník rozhodnout zprávu neodeslat.

Stránka Část 03 je nyní dokončena. Odkaz není třeba přidávat k tlačítku Odeslat, jelikož je toto tlačítko již nastaveno jako součást widgetu Formulář.

Poslední stránka rozvržení pro telefon Část 04 obsahuje widget Prezentace. Widgety jsou v aplikaci Muse navrženy a testovány tak, aby fungovaly ve všech moderních počítačových i mobilních prohlížečích. Prezentace tak bude na dotykové obrazovce fungovat, aniž byste museli cokoliv měnit.

Postupujte podle následujících pokynů a zkopírujte obsah ze stránky Scratch v rozvržení pro stolní počítače na stránku Část 04 v rozvržení pro telefony:

1. Kliknutím na kartu Scratch (Stolní počítač) se vraťte na stránku Scratch. Vyberte bílý dlouhý obdélník na pozadí, červený kroužek 04, widget Prezentace a textový rámeček Section 04 (Část 04). Prvky můžete přetáhnout a vybrat všechny najednou pomocí nástroje pro Výběr. Vybrané položky zkopírujte.
2. Stiskněte Klávesy Command+J (Mac) nebo Control+J (Windows) a zadejte první tři písmena slova Část 04. Stisknutím šipky dolů vyberte stránku telefonu Část 04 a poté ji stisknutím klávesy Return/Enter otevřete v zobrazení Návrh.
3. Prvky zkopírované v kroku 1 vložte na stránku Část 03 v rozvržení pro telefon. Pomocí zarovnávacích vodítek v nástroji pro Výběr prvky zarovnejte na střed stránky. Styly použité ve widgetu Formulář pro stolní počítače zůstanou při kopírování do rozvržení pro telefon zachovány. Jediná změna provedená za účelem přípravy formuláře pro mobilní rozvržení spočívá ve změně velikost formuláře a jeho prvků, aby se formulář vešel na menší obrazovku. Během přidávání widgetů s interaktivními funkcemi (např. widgetů Prezentace) do mobilních rozvržení vytvářených v aplikaci Muse si můžete povšimnout, že panel Možnosti obsahuje možnost: Zapnout posouvání. Možnost je ve výchozím nastavení aktivní. Widgety přidávané do mobilních návrhů jsou tedy automaticky nastaveny tak, aby návštěvníkům umožnily na ně klepnout a používat gesta na dotykové obrazovce. Stránka Část 04 obsahuje widget Prezentace, ve kterém se po klepnutí na miniaturu zobrazí odpovídající obrázek. Prezentace je nastavena na vodorovné přecházení mezi obrázky v galerii. Tento příklad vyžaduje k zobrazení fotografií interakci uživatele. Widget Prezentace lze však také nastavit na automatické spuštění, aby se v něm obrázky po načtení stránky střídaly automaticky.

Poznámka: Pokud ve widgetech Prezentace nastavíte Zeslabení, Vodorovný nebo Svislý přechod, kód aplikace Muse automaticky aktivuje gesto Posunutí prstem, aby návštěvníci mohli dotykovou obrazovku posunovat a procházet tak obrázky prezentace.

V další části Tvorba návrhů mobilního rozvržení, se naučíte jednoduše aktualizovat materiál v rámci všech mobilních platforem a publikovat web Muse pro jednotlivá mobilní rozvržení.

Aktualizace a optimalizace datových zdrojů pro mobilní web

Ve srovnání se stolními počítači mají tablety a smartphony méně výkonné procesory, pomalejší rychlost připojení a menší kapacitu úložiště. V důsledku toho je nutné věnovat navrhování a realizaci webů do mobilních zařízení zvláštní pozornost.

Aplikace Muse obsahuje funkce, které pomáhají optimalizovat grafické prvky zobrazené v mobilních rozvrženích, a zajišťují tak rychlé načítání a přijatelné fungování webů.

1. Stisknutím kláves Command/Control+7 zobrazte rozvržení pro počítače a poté dvojitým kliknutím otevřete soubor A-vzorová pro počítače v zobrazení Návrh.
2. Otevřete a aktivujte panel Datové zdroje kliknutím na jeho kartu ve skupině panelů. Pokud je skupina panelů zavřená, vyberte položky Okno > Datové zdroje.
3. Vyberte velký obrázek na pozadí se zelenými kopci. Datový zdroj se zvýrazní na panelu Datové zdroje.
4. Kliknutím na název datového zdroje (background.jpg) rozbalíte seznam všech výskytů použitých na webu. Všimněte si, že je soubor obrázku na pozadí uveden třikrát – se dvěma různými ikonami, které označují, že se používá v rozvrženích pro telefon i stolní počítač.

Na tomto malém ukázkovém webu je seznam datových zdrojů celkem dobře ovladatelný, pokud však budete vytvářet větší weby, seznam datových zdrojů bude delší a bude se v něm vyhledávat obtížněji.

Chcete-li se v seznamu datových zdrojů orientovat snáze, vyberte u jednotlivých datových zdrojů první položku a poté kliknutím na šipku po levé straně skupinu sbalte. Až budete chtít úplný seznam výskytů datového zdroje v projektu webu rozbalit, klikněte na šipku znovu.

Pokud chcete vyhledat datové zdroje použité pro konkrétní rozvržení, klikněte do horní části sloupce po pravé straně panelu Datové zdroje, ve kterém jsou zobrazeny ikony pro Stolní počítač, Tablet nebo Telefon. Tím se seznam datových zdrojů uspořádá po skupinách pro jednotlivá rozvržení.

Pokud chcete provést změnu grafického prvku, která aktualizuje veškeré jeho výskyty (ve všech rozvrženích), stačí na název datového zdroje kliknout pravým tlačítkem a ze zobrazené nabídky vybrat možnost Upravit originál.

Originální soubor se otevře v aplikacích Photoshop, Fireworks nebo v programu na úpravu obrázků, pomocí kterého jste soubor vytvořili, a vy tak můžete rychle provést své změny.

Jakmile upravený originální soubor uložíte a vrátíte se do aplikace Muse, u položky na panelu Datové zdroje se zobrazí ikona Mimo synchronizaci, která znamená, že verze grafického prvku na webu již neodpovídá zdrojovému souboru. Znovu klikněte na soubor pravým tlačítkem, zvolte možnost Aktualizovat a aktualizujte všechny opakované výskyty grafického prvku tak, aby používaly novou verzi.

Zobrazení náhledu mobilních rozvržení

Návrhy webů, které vytváříte, můžete zobrazit v náhledu několika způsoby:

V zobrazení Návrh v rozvržení Stolní počítač klikněte na tlačítko Náhled a zobrazí se integrovaný emulátor založený na jádře Webkit, který bude vykreslovat HTML, CSS a JavaScript. Náhled vám před publikováním webu a kontrolou online pomocí zařízení umožní zjistit, jak se budou rozvržení zobrazovat v prohlížeči.

V zobrazení Návrh pro rozvržení Telefon klikněte na tlačítko Náhled a zobrazí se rozvržení pro telefon. V nabídce Velikost náhledu vyberte možnost iPhone 4, iPhone 5, Samsung Galaxy S III nebo Nokia Lumia 920, abyste zjistili, jak se bude rozvržení zobrazovat na obrazovkách různých velikostí.

Kliknutím na ikonu po pravé straně okna Velikost náhledu můžete přepínat mezi zobrazením rozvržení v režimu na výšku nebo na šířku.

Nabídka Velikost náhledu obsahuje předem definované poměry výšky a šířky, které pokrývají většinu běžných velikostí obrazovek mobilních telefonů.

Některé obrazovky smartphonů jsou širší, např. Motorola Droid. Pokud má návštěvník širší obrazovku, funkce Viewport (Výřez) aplikace Muse automaticky změní šířku rozvržení pro telefon tak, aby se vešla na dostupnou velikost obrazovky.

V režimu náhledu můžete klikat na odkazy a procházet web. Posouváním obrazovky lze simulovat posun pomocí pohybů prstů. Abyste však tuto funkci skutečně vyzkoušeli, je třeba ji otestovat v mobilním zařízení.

Pokud v režimu Náhledu kliknete na tlačítko vedle nabídky Velikost náhledu, zobrazí se poznámka s odkazem, který popisuje nástroj Adobe s názvem Edge Inspect. Nástroj Edge Inspect umožňuje používat rozšíření prohlížeče Chrome, s jehož pomocí lze mobilní zařízení připojit k počítači a poté je synchronizovat s obsahem zobrazeným v prohlížeči Chrome pro počítače.

Pomocí nástroje Edge Inspect lze prostřednictvím prohlížeče Chrome a možnosti Zobrazit náhled v prohlížeči aplikace Adobe Muse zobrazit web ve stolním počítači a stejná stránka se také automaticky zobrazí v připojených zařízeních. (Zkontrolujte, zda je Chrome nastaven jako výchozí prohlížeč).

V případě potřeby si také můžete zakoupit nástroj třetí strany s názvem Reflection, který vám umožní simulovat zobrazení zařízení (které je připojeno pomocí stejného síťového připojení) na ploše obrazovky počítače. Při navigaci na webu pomocí smartphonu nebo tabletu emulátor zrcadlí dotykovou obrazovku zařízení.

Další funkce související s mobilním rozvržením

Zápatí vždy dole

Stejně jako v předchozích verzích aplikace Muse můžete přetažením vodítek definovat oblast pod stránkou a nastavit oblast zápatí. Jakýkoliv prvek obsahu lze také nastavit jako Položku zápatí, což způsobí, že se zobrazí pod minimální výškou stránky nastavenou ve Vlastnostech webu nebo pod obsahem na existující stránce (podle toho, co je delší).

Definování obsahu zápatí je velmi užitečné zejména v případě, že web obsahuje stránky různých délek. Umístění zápatí se totiž upraví svisle tak, aby se zobrazovalo souvisle podél dolní části stránky a nepřekrývalo se s obsahem stránky.

Ve výchozím nastavení je možnost Zápatí vždy dole aktivní. Jedná se o funkci, která byla speciálně navržena pro návštěvníky s většími počítačovými monitory. Ve většině případů budete chtít ponechat funkci Zápatí vždy dole pro webové stránky aktivní, jelikož díky ní zůstane zápatí v požadované oblasti, i když bude okno prohlížeče výrazně větší, než je návrh webové stránky (například v zobrazení Apple cinema).

Chcete-li se podívat, jak to funguje, můžete web Muse zobrazit v náhledu v prohlížeči a stránku přiblížit. Poznámka: Pokud bude obsah stránky vzhledem k oknu prohlížeče příliš malý, zobrazí se v oblasti pod zápatím okno prohlížeče, místo aby zápatí zůstalo zarovnáno ve spodní části.

Při vytváření nových webů v aplikaci Muse bude možnost Zápatí vždy dole v dialogovém okně Nový web aktivní.

Obecně lze říci, že je nejlepší funkci Zápatí vždy dole při navrhování webů používat. Pokud však zjistíte, že se stránky zobrazují mnohem delší, než vyžadujete (protože web obsahuje nepatrné množství obsahu na stránce a stránky jsou krátké), můžete tuto funkci kdykoliv vypnout zrušením zaškrtnutím políčka v dialogovém okně Vlastnosti stránky.

Připnuté prvky

Kód generovaný aplikací Muse je testován a je tak zajištěno, že se v rámci všech moderních webových prohlížečů a platforem bude zobrazovat a chovat dle očekávání.

Jeden z webových standardů, který se mezi počítačovými a mobilními prohlížeči liší, je podpora připnutých prvků na stránce. Při navrhování webů pro prohlížeče ve stolních počítačích lze vybrat prvek a pomocí možnosti na Ovládacím panelu jej připnout k oknu prohlížeče. Připínání je užitečné pro vytvoření konzistentní navigace. Je užitečné také v případě, že chcete na delší stránce ponechat prvek ve stejné oblasti bez ohledu na to, jak moc dolů návštěvník stránky přejde.

V současné době nemají mobilní prohlížeče pro připnuté objekty stejnou podporu. Z tohoto důvodu je nutné při vytváření rozvržení pro telefon nebo tablet pracovat s alternativními strategiemi pro připnuté objekty.

Při navrhování rozvržení pro telefon nebo tablet budou možnosti Připnout zašedlé a neaktivní.

Publikování webu s mobilním rozvržením

V aplikaci Muse lze weby s několika rozvrženími publikovat stejnou metodou jako weby pro stolní počítače. Je užitečné publikovat zkušební weby a poté pomocí mobilních zařízení zobrazit aktivní verzi a otestovat weby na menších obrazovkách.

Klikněte na tlačítko Publikovat nebo zvolte možnost Soubor > Odeslat do hostitele FTP a nahrajte soubory webu na hostitelský server.

Při publikování webu Muse s několika rozvrženími se web aktivuje pomocí jedné adresy URL. Je tedy třeba si zaregistrovat pouze jeden název domény, např.:

http://www.mujweb.cz

Pokud publikujete web se dvěma nebo více různými rozvrženími, vygeneruje aplikace Muse pro daný web kód zahrnující skript pro rozpoznávání, který identifikuje typ počítače nebo zařízení a typ prohlížeče použitý návštěvníkem k přístupu na stránku.

Kód rozpoznávání určí verzi platformy nebo prohlížeče a poté automaticky zobrazí správné rozložení. Návštěvníkům s tabletem se zobrazí web pro tablet a návštěvníkům se smartphonem web pro telefon, aniž byste museli provádět nějakou akci. To vše se děje na pozadí.

Nové funkce pro mobilní rozvržení v aplikaci Muse umožňují optimalizovat mobilní rozvržení tak, aby uživatelé zařízení nemuseli nezbytně stahovat větší soubory. Funkce alternativního rozvržení zobrazuje pouze menší, upravené soubory obrázků, aby web fungoval správně v rámci všech platforem a prohlížečů.

Další informace o práci v aplikaci Muse naleznete v našich článcích a výukových lekcích na  stránce Výukové programy pro Adobe Muse.

Kopírování obsahu webu mezi rozvrženími pomocí funkce Přejít na stránku

Kliknutím na kartu Vzor (Stolní počítač) aktivujete vzorovou stránku pro počítač v zobrazení Návrh.

Aplikace Muse přepínání mezi vrstvami usnadňuje pomocí integrovaného nástroje: Přejít na stránku. Tlačítko se v zobrazení Návrh zobrazí v jakémkoliv projektu, který obsahuje více rozvržení.

1. Klikněte na tlačítko Přejít na stránku.

Při práci s několika rozvrženími je užitečné mít možnost rychle přecházet mezi dvěma a více stránkami tam a zpět, a snadno tak kopírovat a vkládat obsah.

Poznámka: Kromě kliknutí na tlačítko Přejít na stránku lze také použít klávesovou zkratku: Command+J (Mac) nebo Control+J (Windows).

Zobrazí se dialogové okno Přejít na stránku. Obsahuje textové pole, do kterého lze zadat několik prvních písmen názvu stránky na webu a snadno tak na ni přejít bez nutnosti se opětovně vracet do zobrazení Plán.

2. Zadejte první tři písmena názvu stránky, kterou chcete najít. V tomto případě zadejte první písmena slova Vzor: vzo.

Pole na webu vyhledá všechny odpovídající názvy stránek a zobrazí je v níže uvedeném seznamu.

3. Dvojitým stisknutím klávesy se šipkou dolů vyberete stránku A-vzorová (telefon) a stisknutím klávesy Return/Enter ji otevřete.

Vzorová stránka (telefon) se otevře v zobrazení Návrh a je připravena k úpravě.

Další skvělý způsob, jak přecházet mezi různými rozvrženími na webu, jsou klávesové zkratky:

• Command/Control+7 zobrazí rozvržení pro počítače
• Command/Control+8 zobrazí rozvržení pro tablet
• Command/Control+9 zobrazí rozvržení pro telefon

Tyto zkratky jsou aktivní pouze při úpravě webu, který obsahuje odpovídající vrstvu. S novými klávesovými zkratkami můžete experimentovat, abyste si vytvořili pracovní postup, který vám bude pro přepínání mezi rozvrženími a konkrétními stránkami vyhovovat.

Dále vytvoříte druhou vzorovou stránku pro telefon a přidáte prvky návrhu.