Otevřete aplikaci Adobe Muse a klikněte na možnost Soubor > Nový web.
Přečtěte si tento článek, abyste zjistili, jak vytvářet weby pro mobilní zařízení nebo smartphony.
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:
Otevřete aplikaci Adobe Muse a klikněte na možnost Soubor > Nový web.
Vyberte možnost Pevná šířka a poté ve stejném dialogu klikněte na položku Rozšířené nastavení.
Zadejte hodnotu do pole Max. šířka stránky nebo určete maximální šířku stránky.
Určete odpovídající šířku prohlížeče pro mobilní telefony a zadejte hodnotu.
Zadejte hodnoty Okraj a Odsazení odpovídající mobilnímu webu. Zadejte následující údaje:
Klikněte na tlačítko OK.
Můžete začít navrhovat rozvržení pro mobilní web.
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.
Otevřete existující soubor .Muse, do kterého chcete přidat alternativní rozvržení pro telefon.
Otevírejte jednotlivé stránky projektu a pokaždé klikněte na možnost Stránka > Přidat alternativní rozvržení > Telefon.
Existující rozvržení můžete vybrat a zkopírovat z nabídky. Pro účely tohoto článku zvolte možnost Stolní počítač, čímž rozvržení pro stolní počítač zkopírujete do rozvržení pro telefon.
Budete mít možnost kopírovat Plán webu, Atributy stránky a Výplň prohlížeče. Ponechte výchozí nastavení, aby se do rozvržení pro telefon zkopírovaly informace existujícího webu pro stolní počítače.
Kliknutím na tlačítko OK dialogové okno zavřete a přidáte rozvržení pro telefon.
Muse vytvoří plán webu pro rozvržení Telefon. Zkopírují se názvy stránek, struktura webu a atributy vzorové stránky. U tlačítka rozvržení Telefon se již nebude vedle názvu zobrazovat znaménko plus (+), jelikož do projektu Muse již bylo přidáno rozvržení pro telefon.
Do miniatury stránky v rozvržení pro telefon nebude záměrně přidán aktuální obsah stránky. Je to proto, abyste mohli zkopírovat pouze obsah, který na jednotlivých stránkách v mobilním rozvržení skutečně chcete zobrazovat. U obsahu, který chcete přidat na novou stránku, můžete změnit velikost, aby se vešel do menších rozměrů mobilní obrazovky.
Nové stránky můžete přidat kliknutím na znaménko plus po pravé straně domovské stránky. Po nastavení mapy webu můžete zahájit navrhování mobilního prostředí.
V následující části se dozvíte, jak nastavit vzorové stránky pro telefonní rozvržení.
V zobrazení Plán dvojitým kliknutím na stránku A-vzorová telefon otevřete tuto stránku v zobrazení Návrh.
Otevřením rozhraní Výplň prohlížeče nastavíte obrázek pozadí.
V části Obraz klikněte na možnost Přidat obraz. Vyhledejte a vyberte soubor, který chcete nastavit jako obraz pozadí.
Nastavte volbu Přizpůsobení na možnost Zaplnit prostor, oříznout a klikněte na středovou pozici.
Rozhraní Výplň prohlížeče zavřete kliknutím na šedou oblast mimo stránku nebo kamkoliv na Ovládací panel.
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.
Začnete dokončením domovské stránky.
V dalším kroku přidáte obsah stránky pro stránku Část 01.
Úč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ě:
Tento formát mobilní prohlížeče rozeznají jako odkaz na telefonní číslo.
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.
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.
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.
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
V dalším kroku přidáte obsah stránky pro stránku Část 03.
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:
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í.
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ů.
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.
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í.
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.
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í.
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.
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í.
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.
Pole na webu vyhledá všechny odpovídající názvy stránek a zobrazí je v níže uvedeném seznamu.
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:
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.
Přihlaste se ke svému účtu.