Poznámka:

Do aplikace Adobe Muse již nejsou přidávány žádné další funkce a 26. března 2020 bude její podpora ukončena. Podrobnější informace a možnosti asistence naleznete na stránce Ukončení životnosti aplikace Adobe Muse.

Práce s hierarchickými vzorovými stránkami

Aplikace Muse umožňuje vytvářet vzorové stránky, které lze používat i na jiné vzorové stránky. Hierarchické vzorové stránky fungují podobně jako použití vzorových stránek u stránky v náhledu Plán. U předchozích verzí aplikace Muse bylo možné vytvořit více vzorových stránek, u webové stránky jste však mohli najednou použít pouze jednu vzorovou stránku s jednou sadou prvků.

Pokud jste v minulosti chtěli vytvořit web se dvěma různými částmi, které jsou sice podobné, ale mají jedinečný vzhled, mohli jste zkopírovat vzorovou stránku, mírně ji změnit a použít ji u konkrétních stránek. Ve výsledku obě vzorové stránky často obsahovaly některé stejné prvky, pokud jste tedy web aktualizovali, bylo vždy nutné upravit obsah obou vzorových stránek, aby byly všechny prvky synchronizovány.

V aplikaci Muse 4.0 a vyšších verzích můžete vytvořit stránku A-vzorová obsahující sdílené prvky zobrazené na více vzorových stránkách (například přidání pozadí a zápatí, jak je popsáno v předchozích částech) a poté další vzorové stránky, které všechny prvky na stránce A-vzorová zdědí a navíc obsahují prvky, jež jsou jedinečné pro první část. Pokud jste vytvořili třetí vzorovou stránku, bylo možné použít prvky na stránce A-vzorová a prvky jedinečné pro druhou část.

Výhodou použití hierarchických vzorových stránek je, že umožňují omezení výskytu prvku u jednoho výskytu. Při změně návrhu webu je každý prvek třeba upravit pouze jednou a všechny jeho výskyty se na webu aktualizují automaticky.

Vzorové stránky se spravují a využívají v zobrazení Plán. Stejně jako lze kliknutím a přetažením miniatury vzorové stránky na miniaturu stránky použít vzorovou stránku, lze vytvořit více vzorových stránek a poté jednu vzorovou stránku přetáhnout na druhou. Nebo lze kliknout pravého tlačítka myši na kteroukoli vzorovou stránku nebo miniaturu stránky v zobrazení Plán a použitím možnosti Vzor v zobrazené kontextové nabídce nastavit vzor.

Všimněte si, že pokud nad název stránky nebo vzorové stránky najedete myší, bublinová nápověda zobrazí hierarchii použitých vzorů u dané stránky či vzorové stránky.

Teď jste vytvořili stránku A-vzorová s dlaždicovým pozadím vyplňujícím prohlížeč a s obsahem zápatí. V další části vytvoříte novou vzorovou stránku, která zdědí obsah stránky A-vzorová, a poté přidáte záhlaví, abyste je mohli použít u stránek webu. Postupujte takto:

  1. Při zobrazené mapě webu v zobrazení Plán najeďte kurzorem nad miniaturu stránky A-vzorová; zobrazíte tak tlačítko symbolu plus na obou stranách. Kliknutím na symbol plus vpravo od stránky A-vzorová vytvoříte zcela novou vzorovou stránku. Ve výchozím nastavení se nová vzorová stránka jmenuje B-Vzor.
  2. Dvojím kliknutím na textové pole B-Vzor pod miniaturou lze toto pole upravit. Zadejte popisnější název právě vytvořené nové vzorové stránky: Hlavní.
  3. Klikněte pravým tlačítkem myší na miniaturu vzorové stránky Hlavní a vyberte možnost Vzory > A-vzorová ze zobrazené kontextové nabídky.
V této výukové lekci se seznámíte s pracovní plochou aplikace Adobe Muse a uvidíte, jak vytvořit plně funkční web bez kódování. Naučíte se také vytvořit mapu webu, projdete si vzorové stránky a seznámíte se s volbami výplně prohlížeče v aplikaci Muse.
Volbou A-vzorová z nabídky tento vzor použijete u vzorové stránky Hlavní.

Všimněte si, že po použití stránky A-vzorová u vzorové stránky Hlavní se miniatura vzorové stránky Hlavní aktualizuje, aby vypadala stejně. Na modré popisce pod miniaturou vzorové stránky Hlavní je text [A-vzorová], protože jste tento vzor v kroku 3 použili u vzorové stránky Hlavní.

Důležité je vědět, že vzorová stránka Hlavní vlastně neobsahuje prvky stránky A-vzorová, nevytvořili jste totiž prostou kopii stránky A-vzorová. Místo toho jste vytvořili vzorovou stránku Hlavní odkazující na stránku A-vzorová, což znamená, že jakýkoli obsah přidaný na stránku A-vzorová se automaticky objeví také na vzorové stránce Hlavní.

Jak už bylo řečeno, na hierarchických vzorech je pěkné, že zápatí, nabídka a pozadí stále existují pouze na stránce A-vzorová. Pokud tedy bude klient později požadovat použití jiného dlaždicového pozadí, můžete aktualizovat stránku A-vzorová a vzorová stránka Hlavní se automaticky aktualizuje.

Později v této výukové lekci vytvoříte dva různé vzory pro různý vzhled na dvou různých částech webu. Nyní však můžete stránky aktualizovat v zobrazení Plán, a u všech využít vzorovou stránku Hlavní místo stránky A-vzorová.

  1. Přetáhněte vzorovou stránku Hlavní na miniaturu stránky o jídle v levém horním rohu. Všimněte si, že při přetažení miniatury vzorové stránky Hlavní na miniaturu stránky o jídle se modrý text pod miniaturou stránky o jídle aktualizuje z popisku [A-vzorová] na text [Hlavní].

Takto lze nejběžnějším způsobem využít vzorové stránky u jiných stránek v zobrazení Plán, můžete je však zkusit využít pomocí kontextové nabídky:

  1. Klikněte pravým tlačítkem myší na miniaturu stránky událostí a vyberte možnost Vzory > Hlavní v zobrazené kontextové nabídce.
V této výukové lekci se seznámíte s pracovní plochou aplikace Adobe Muse a uvidíte, jak vytvořit plně funkční web bez kódování. Naučíte se také vytvořit mapu webu, projdete si vzorové stránky a seznámíte se s volbami výplně prohlížeče v aplikaci Muse.
Pomocí kontextové nabídky nastavte stránku Hlavní jako vzorovou stránku pro stránku událostí.

  1. Pomocí své oblíbené metody (popsané v krocích 4 a 5) nastavte stránku Hlavní jako vzorovou stránku pro zbývající tři stránky: domovská, informace a návštěva.

Po této změně by ve všech modrých textových popiscích pod každou miniaturou stránky měl být text [Hlavní]. Pokud nad některou tuto modrou popisku najedete kurzorem, zobrazí se bublinová nápověda s hierarchií použitých vzorových stránek.

V této výukové lekci se seznámíte s pracovní plochou aplikace Adobe Muse a uvidíte, jak vytvořit plně funkční web bez kódování. Naučíte se také vytvořit mapu webu, projdete si vzorové stránky a seznámíte se s volbami výplně prohlížeče v aplikaci Muse.
Při přejížděním po popisce se zobrazí užitečná bublinová nápověda popisující hierarchii.

V tomto příkladu jde hierarchie jen o jednu úroveň níže. Jinými slovy vzorová stránka Hlavní dědí obsah stránky A-vzorová. V případě potřeby lze ovšem vytvořit i řetězec vzorových stránek. Můžete například vytvořit vzorovou stránku s názvem Záhlaví, jež zahrnuje pouze obsah záhlaví, a poté vytvořit další vzorovou stránku s názvem Zápatí, která zdědí obsah vzorové stránky Záhlaví, poté další vzorovou stránku s názvem Hlavní, která zdědí vše na vzorové stránce Zápatí (která zahrnuje také záhlaví). V závislosti na návrhu webu a vašem povědomí o tom, že některé prvky se mohou pravděpodobně změnit, lze vytvořit úrovně dědění, a nastavit tak několik úrovní. Takové rozdělení návrhu připomíná vytváření symbolů, protože lze izolovat konkrétní části návrhu a poté je později snadno najít a upravit podle potřeby.

V další výukové lekci, Použití aplikace Muse k vytvoření prvního webu, část 2, se naučíte pracovat s widgety (předem vestavěnými interaktivními funkcemi webu, které lze přetáhnout na stránky). Widgety umožňují rychlé přidání pokročilých funkcí na stránky bez nutnosti kódování. Uvidíte, jak upravit chování a vzhled widgetů či jejich zobrazení v rámci návrhu webu.

Přidání obsahu záhlaví do vzorové stránky Hlavní

Po dokončení zápatí přidáním widgetu Nabídka do vzorové stránky Hlavní přidáte navigaci nejvyšší úrovně. Podle následujících kroků přidáte obsah do oblasti záhlaví.

  1. V zobrazení Plán dvojím kliknutím na miniaturu vzorové stránky Hlavní otevřete stránku a začněte ji upravovat v zobrazení Návrh (pokud ještě není otevřené).
  2. Pomocí nástroje obdélníku nakreslete obdélník, který začíná v levém horním rohu viditelné oblasti prohlížeče a pokrývá celou šířku k pravému hornímu rohu. Pomocí nástroje pro výběr přetahujte táhla na horní, levé a pravé straně obdélníku, dokud se krátce nezobrazí červená hranice naznačující, že je obdélník nastaven na 100% šířku, stejně jako jste vytvořili zápatí.
fig_30_building
Nakreslete obdélník, který pokrývá celou horní část okna prohlížeče.

 

Po přetažení táhel by měla velikost obdélníku být přibližně 1 160 pixelů na šířku a 253 pixelů na výšku. Vodorovná hodnota X je -100, což znamená, že se levý horní roh obdélníku nachází 100 pixelů od levého horního rohu stránky. Hodnota Y je 0 (což znamená, že levý horní roh obdélníku svisle odpovídá levému hornímu rohu stránky). Chcete-li tyto hodnoty nastavit přesně, můžete pole zkontrolovat na panelu Transformace nebo na řídícím panelu při výběru obdélníku.

  1. Šířku tahu nastavte na hodnotu 0 a pomocí nabídky Výplň nastavte barvu výplně na hodnotu Žádná. Klikněte na složku vpravo od části Obraz a vyberte obrázek s názvem tile-header.png. V nabídce Přizpůsobení vyberte možnost Dlaždicově vodorovně.
fig_31_building
Pomocí nabídky Přizpůsobení použijete obrázek pozadí vodorovně jako dlaždice.

 

Třebaže záhlaví tvoří jeden obdélník, vodorovně dlaždicový obrázek pozadí vytváří dojem, že obdélník existuje nad černým obdélníkem.

  1. Vyberte možnost Soubor> Umístit, nebo pomocí klávesové zkratky: Command+D (Mac) nebo Control+D (Windows) otevřete dialogové okno Import.
  2. Vyberte soubor s názvem bg-ribbon.png umístěný ve složce vzorových souborů. Kliknutím na možnost Otevřít jej otevřete a zavřete dialogové okno Import.
  3. Jednou klikněte do středu obdélníku záhlaví u horní části stránky. Umístíte tak jednou soubor bg-ribbon.png v jeho původních rozměrech.
  4. Pomocí nástroje pro výběr zarovnejte grafiku oranžového pruhu tak, aby byl svisle vycentrován u horní části záhlaví a pokrýval šířku stránky.
fig_32_building
Grafika oranžového pruhu umístěná tak, že je v záhlaví vycentrována.

 

Grafika oranžového pruhu bude tvořit pozadí nabídky nejvyšší úrovně, kterou přidáte v další části.

Duplikování vzorové stránky

Obsah záhlaví na vzorové stránce Hlavní je hotov. I když lze vzorovou stránku Hlavní použít pro každou stránku na webu, tento návrh webu má dvě části. Návrh vzorové stránky se nakonec použije pro domovskou stránku a stránku Návštěva. Trochu odlišná vzorová stránka se použije pro stránky Jídlo, Události a Informace.

Vzorovou stránku Hlavní lze duplikovat následujícím způsobem:

  1. V zobrazení Plán klikněte pravým tlačítkem myši na miniaturu vzorové stránky Hlavní.
  2. V zobrazené kontextové nabídce vyberte možnost Duplikovat stránku.
fig_38_building
Pomocí nabídky duplikujte stávající vzorovou stránku Hlavní.

 

Nová vzorová stránka se zobrazí vpravo od vzorové stránky Hlavní s výchozím názvem: Hlavní kopie. Protože duplikujete vzorovou stránku Hlavní, nový vzor je již založen na stránce A-vzorová.

  1. Klikněte dvakrát na pole názvu pod právě vytvořenou vzorovou stránkou a přejmenujte ji: Popředí.

V další části se naučíte nastavit uspořádání prvků na vzorové stránce, aby se položky již nezobrazovaly pod prvky stránky, ale nad nimi. V tuto chvíli je vhodné, abyste svou práci uložili.

  1. Vyberte příkaz Soubor > Uložit web.

Jednou z výhod vytvoření duplikované vzorové stránky je, že můžete některý obsah nastavit tak, aby se zobrazoval nad jiným obsahem stránky, i když jste vybrali možnost Uspořádat > Zcela dopředu. Toto chování v popředí je žádoucí u stránek Jídlo a Události.

Možnost nastavit uspořádání prvků vzorové stránky je nová funkce, která je k dispozici v aplikaci Muse 4.0. Dříve bylo nutné umístit prvky záhlaví nebo zápatí spíše na každou stránku než na vzorovou stránku, pokud jste chtěli běžné prvky webu umístit nad jiný obsah v rozvržení stránky.

Nastavení elementů vzorové stránky pro zobrazení v popředí

V aplikaci Muse rozhraní zobrazení Návrh umožňuje výběr prvku stránky a volbu možnosti Objekt > Zcela dopředu, Posunout dopředu nebo Posunout dozadu, aby se jedna položka zobrazovala nad či pod jinou položkou na stránce. (Uspořádání lze také nastavit kliknutím pravým tlačítkem myši na prvek a volbou Uspořádat > Zcela dopředu, Posunout dopředu nebo Posunout dozadu).

Při navrhování webu v předchozích verzích aplikace Muse se prvky na vzorové stránce ve výchozím nastavení chovaly tak, že se při vykreslení stránky vždy zobrazovaly za všemi prvky na stránce. Toto vrstvení do pozadí bylo někdy problematické (v závislosti na návrhu webu), protože uspořádání představovalo pouze kopírování a vkládání prvků, které byste obvykle umístili na vzorovou stránku, na všechny stránky webu, kde jste je chtěli zobrazit nahoře.

Aplikace Muse zahrnuje novou možnost ovládat uspořádání prvků na vzorových stránkách. Nyní se již všechno na vzorové stránce vždy nezobrazuje za prvky stránky, ale můžete prvky vybrat na vzorových stránkách a nastavit je tak, aby se zobrazovaly jako prvek v popředí. Položky na vzorových stránkách nastavené jako prvky v popředí se budou vždy zobrazovat nad všemi prvky stránky.

Tato nová volba je k dispozici při výběru možnost Objekt > Přesunout > Vzorové popředí. Navíc můžete kliknout pravým tlačítkem myši na kterýkoli prvek v zobrazení Návrh při úpravách vzorové stránky a vybrat volbu Přesunout > Vzorové popředí v zobrazené kontextové nabídce.

U tohoto vzorového projektu návrh vyžaduje, aby obsah na domovské stránce a na stránce Návštěva využíval výchozí uspořádání (prvky stránky se na vzorové stránce Hlavní zobrazují v horní části záhlaví), ovšem stránky Jídlo, Události a Informace nikoli.

U stránek Jídlo a Návštěva aktualizujte vzorovou stránku Popředí tak, aby se obsah záhlaví při procházení stránkami zobrazoval v popředí, na obsahem stránky. Postupujte takto:

  1. V zobrazení Plán dvojím kliknutím na miniaturu vzorové stránky Popředí otevřete stránku a začněte ji upravovat v zobrazení Návrh (pokud ještě není otevřené).
  2. Pomocí nástroje pro výběr klikněte a přetáhněte celý obsah záhlaví, včetně obdélníku s dlaždicovým pozadím, umístěného oranžového pruhu, widgetu Nabídka a animovaného loga GIF uprostřed.
  3. Vyberte celý obsah záhlaví, klikněte pravým tlačítkem myši a vyberte možnost Přesunout > Vzorové popředí. Všimněte si, že na rozdíl od obvyklé modré hranice u vybraných objektů jsou položky nastavené k zobrazení v popředí při výběru ohraničeny červeně.
fig_39_building
Obsah záhlaví přesuňte do popředí pomocí kontextové nabídky.

To zaručuje, že záhlaví se zobrazí v horní části prvků stránky na stránkách, kde je použita vzorová stránka Popředí.

  1. Při výběru celého záhlaví můžete záhlaví přichytit k horní části stránky tak, aby se při posunu stránky samo neposouvalo. O přichycování objektů se dozvíte v části 7, zatím záhlaví přichyťte na místě kliknutím na horní část uprostřed.
fig_40_building
Vybrané záhlaví přichyťte výběrem polohy nahoře uprostřed.

  1. Kliknutím a přetažením vzorové stránky Popředí na stránku Jídlo tuto stránku použijete. Tento krok opakujte ještě dvakrát, a vzorovou stránku Popředí použijte u stránek Události a Informace.

Po této změně modrý text popisu zobrazí slovo [Popředí] naznačující, že stránky Jídlo, Události a Informace nyní využívají vzorovou stránku Popředí. Pokud přejdete nad modrý popis [Popředí], bublinová nápověda naznačí, že je vzorová stránka Popředí použita u stránky A-vzorová.

Při navrhování vlastních webových projektů můžete experimentovat s novou funkcí Přesunout do popředí, a nastavit prvky na vzorových stránkách tak, aby se zobrazovaly nahoře. Později v tomto seriálu výukových lekcí dokončíte návrh stránek Jídlo a Události a uvidíte, jak nastavení popředí zaručuje, že se záhlaví zobrazí nad jiným obsahem stránky.

V další části této výukové lekce, Vytvoření prvního webu pomocí aplikace Muse 4. část, uvidíte, jak pracovat s vloženým HTML, a zobrazit kód zkopírovaný z jiných webových stránek. Dozvíte se také, jak přidat widget Kompozice světelného boxu, a vytvořit domovskou stránku.

Použití více vzorových stránek a začlenění animace

V této části se dozvíte další informace o práci se vzorovými stránkami a naučíte se zobrazovat obsah společný pro celý web na více stránkách za účelem dosažení konzistentního vzhledu při vytváření různých částí webu. Naučíte se také přesouvat prvky ze vzorových stránek, protože v některých návrzích webů může být užitečné vytvořit několik vzorových stránek a na každou z nich umístit specifickou grafiku (například web s oblastmi znázorněnými čtyřmi barvami). Naučíte se také přesouvat prvky, které se normálně nacházejí na vzorové stránce, na určité stránky, kde dojde k vytvoření efektů, jako je například postupné vrstvení položek.

Úprava obsahu vzorové stránky

Objekty umístěné na vzorové stránce se zobrazí jako vrstva pod obsahem umístěným na jednotlivé stránce. Například všechny objekty, které umístíte do záhlaví nebo zápatí domovské stránky, se zobrazí přes pozadí umístěná v záhlavích a zápatích vzorové stránky. Z tohoto důvodu se můžete setkat se situací, kdy budete potřebovat přesunout prvky ze vzorové stránky a umístit je na jednotlivé stránky, aby vypadaly, jako že jsou zobrazeny nad ostatními prvky na stránce.

Obsah přidaný do vzorových stránek lze později upravit otevřením příslušné vzorové stránky. Pokud otevřete stránku asociovanou se vzorovou stránkou a pokusíte se upravit záhlaví, zápatí nebo jiný obsah vzorové stránky, bude tento obsah vypadat jako uzamčený. Chcete-li změnit obsah na vzorové stránce, můžete použít dva různé postupy:

  1. Dvakrát klikněte na miniaturu vzorové stránky v zobrazení Plán a poté upravte obsah vzorové stránky v zobrazení Návrh.

  2. Dvojitým kliknutím na miniaturu vzorové stránky v zobrazení Plán ji otevřete v zobrazení Návrh. Vyberte prvky, které chcete upravit (ale potřebujete je dostat nad ostatní prvky umístěním na webovou stránku) a vyberte příkaz Úpravy > Vyjmout nebo použijte klávesovou zkratku Command-X (Mac) nebo Control-X (Windows).

  3. Vraťte se do zobrazení plánu a dvojitě klikněte na stránku, která bude obsahovat tento obsah (dříve obsah vzorové stránky). Zvolte Úpravy > Vložit na místo. Zajistíte tak, že prvky vyjmuté ze vzorové stránky budou umístěny na stejné místo na normální stránce. V případě potřeby můžete otevřít více stránek a pomocí příkazu nabídky Úpravy > Vložit na místo distribuovat obsah ze vzorové stránky do mnoha různých stránek ve vašem webu.

Podle potřeby můžete také duplikovat existující vzorovou stránku. Svůj web můžete nakonfigurovat tak, že většina stránek bude používat jednu vzorovou stránku, ale jedna speciální stránka bude používat duplicitní, podobnou verzi této vzorové stránky (specifické prvky budou zkopírovány z této duplicitní vzorové stránky do speciální stránky webu). Další informace o duplikování vzorových stránek najdete v následující části.

Jakmile se objekt nachází na jednotlivé stránce a nikoli na vzorové stránce, můžete jej podle potřeby upravit na každé stránce zvlášť a zajistit, aby se objekt zobrazoval nahoře.

V tomto ukázkovém projektu web nyní zobrazuje logo firmy Kevin's Koffee Kart (červené kolo s proužkem) přímo nad navigací webu v záhlaví. Obsah záhlaví a zápatí se zobrazuje automaticky na každé stránce, protože domovská stránka (a každá další stránka, kterou vytvoříte) je ve výchozím nastavení propojená se stránkou A-vzorová, na které se tento obsah nachází. V mnoha případech budete vytvářet weby používající stejnou vzorovou stránku pro všechny stránky webu, aby byl vzhled webu zcela konzistentní.

Tento web má ale jedinečné animované logo, které se zobrazuje pouze na domovské stránce. Když se podíváte na ukázku aktivního webu Kevin's Koffee Kart, uvidíte, že logo s červeným kolem je na domovské stránce animováno pouze jednou, a to když se stránka poprvé načte - vypadá to, jako by kolo přijelo na stránku z levé strany. Když se podíváte na další stránky, uvidíte, že tato animace probíhá pouze na domovské stránce - loga na všech ostatních stránkách jsou statická.

V následující podkapitole se naučíte vytvořit duplicitní vzorovou stránku a v zobrazení plánu přiřazovat stránky, aby používaly určitou vzorovou stránku.

Duplikování a odstranění vzorových stránek

  1. Kliknutím na odkaz Plán přejděte do zobrazení Plán. Ve spodní části rozhraní zobrazení plánu vyhledejte miniaturu stránky A-vzorová.

  2. Podržte kurzor nad miniaturou stránky A-vzorová a všimněte si, že když přes ni přejedete, zobrazí se stejná ikona se znakem plus (+) jako při přidávání nových stránek do mapy webu. Klikněte na znak plus (+) vpravo od miniatury stránky A-vzorová. Tento postup můžete použít kdykoli budete chtít vytvořit zcela novou vzorovou stránku. Všimněte si, že miniatura je prázdná, to znamená, že neobsahuje obsah, který jste přidali do stránky A-vzorová. Nová vzorová stránka je ve výchozím nastavení pojmenovaná B-vzorová, ale kliknutím na pole pod miniaturou ji můžete libovolně přejmenovat.

    V tomto případě místo vytvoření zcela nové, prázdné vzorové stránky vytvoříte duplikát existující stránky A-vzorová.

  3. Kliknutím na ikonu X v pravém horním rohu stránky B-vzorová ji odstraňte. (Pokud tímto způsobem omylem odstraníte existující vzorovou stránku, můžete ji obnovit pomocí příkazu nabídky Úpravy > Zpět odstranit vzorovou stránku.)

  4. Klikněte pravým tlačítkem na miniaturu stránky A-vzorová a vyberte příkaz Duplikovat stránku. Zobrazí se nová miniatura představující duplicitní vzorovou stránku a pojmenovaná A-vzorová - kopie.

    fig_59_getting
    Duplikát stránky A-vzorová v zobrazení Plán.

  5. Klikněte na pole pod miniaturou kopie stránky A-vzorová a přejmenujte ji na MasterFlash. Tuto stránku použijete k přidání multimediálního obsahu, který bude animován výhradně na domovské stránce, zatímco ostatní stránky budou i nadále odkazovat na stránku A-vzorová, která v záhlaví zobrazuje statickou verzi loga.

  6. Klikněte pravým tlačítkem na miniaturu domovské stránky. V místní nabídce vyberte Vzory > MasterFlash. Tím asociujete vzorovou stránku MasterFlash s domovskou stránkou.

    Poznámka:

    Případně můžete přetáhnout miniaturu stránky MasterFlash na miniaturu domovské stránky.

Po provedení této operace se název vzorové stránky MasterFlash v zobrazení plánu zobrazí v závorkách pod miniaturou domovské stránky.

Kliknete-li na tlačítko Náhled, neuvidíte na domovské stránce žádné změny. Jelikož je stránka MasterFlash duplicitní kopie souboru stránky A-vzorová, zobrazí se domovská stránka tak, jako předtím, včetně statického loga. Nicméně v další podkapitole upravíte obsah stránky MasterFlash a přidáte animaci, která bude probíhat pouze na domovské stránce.

Používání duplicitních, velice podobných (mírně odlišných) vzorových stránek je skvělý způsob, jak odlišit určitou část webu nebo vytvořit jedinečnou domovskou stránku tak, jak je požadováno v tomto projektu.

V této výukové lekci se naučíte používat vzorové stránky. Prozkoumáme a rozebereme tři rozvržení webů, a ukážeme si, jak lze dosáhnout zajímavých efektů a konzistentního vzhledu webu pomocí běžných prvků nacházejících se na vzorové stránce.

Ale začněme otázkou, co je to vlastně vzorová stránka? Vzorová stránka umožňuje používat běžné prvky, jako jsou záhlaví, zápatí, loga a prvky navigace na více stránkách webu. Ve svém webu můžete používat jednu vzorovou stránku nebo můžete nastavit několik vzorových stránek, které vám umožní rychle a konzistentně používat jedinečné styly v různých částech webu.

Ve výchozím nastavení vytvoří aplikace Muse při vytvoření nového webu prázdnou domovskou stránku a prázdnou vzorovou stránku. Tyto stránky představují výchozí bod každého webu. Web můžete rozvrhnout pomocí prázdných stránek, na které můžete později aplikovat vzorové stránky, nebo můžete zahájit vytváření webu vzorovou stránkou, kterou aplikujete na jednu (domovskou) stránku a později na základě tohoto návrhu vytvoříte další stránky.

Analýza rozvržení webů

Výborným způsobem, jak se učit nové postupy navrhování webů, je prozkoumávat různá rozvržení vzorových stránek. V tomto článku prozkoumáme tři různá rozvržení webů vytvořených v aplikaci Muse a zjistíme, jak byla původně vytvořena.

Chcete-li prakticky postupovat podle níže uvedených pokynů a otevřít si datové zdroje pro jednotlivé ukázkové weby, tak stáhněte ukázkové soubory, rozbalte soubor ZIP a dvojitým kliknutím na jednotlivé soubory .muse je otevřete v aplikaci Muse.

Při prohlížení těchto ukázkových webů si všimněte několika prvků použitých při vytváření návrhů webů, které pomáhají návštěvníkům v procházení a v orientaci při objevování obsahu webu:

  • Nakonfigurováním vlastností webu definujte rozměry všech stránek
  • Pomocí vodítek definujte oblasti záhlaví a zápatí na vzorové stránce
  • Objekty, které chcete umístit vně rozvržení stránky, připněte k oknu prohlížeče
  • Nastavením pevné pozice nebo posouvání výplní ve formě obrazů pozadí můžete vytvářet zajímavé efekty
  • Roztáhněte obdélníky na 100% šířky tak, aby zabíraly celou šířku prohlížeče
  • Přidáním widgetů Skládačka a Prezentace můžete zobrazit interaktivní obsah stránky
  • Přizpůsobením a upravením stylů widgetů nabídek můžete vytvořit navigaci webu
  • Vytvořením odkazů na kotvy můžete přeskakovat svisle nebo vodorovně do určitých oblastí stránky
  • Vložením kódu z webů třetích stran (vloženého HTML) můžete přidávat do stránek různé prvky

Po zobrazení jednotlivých ukázkových webů zkuste okno prohlížeče posouvat a měnit jeho velikost, abyste viděli, jak tyto aktivní weby fungují. Poté otevřete jednotlivé soubory .muse, abyste viděli, jak lze používat vzorové stránky ke standardizaci rozvržení webů a k vytváření jednotnějšího chování online.

Příklad č.1: Happy Valley Adventure

fig01.master.b720

V první ukázce je grafika zápatí připnutá ve spodní části okna prohlížeče. Pozadí zápatí je dále nastaveno na 100% šířky, aby horizontálně zabíralo celou spodní část prohlížeče. Delší obsah stránky se posouvá za popředím zápatí a vytváří efekt přechodu oblohy. Při kliknutí na odkazy na kotvy na levé straně se stránka přesune ve svislém směru do odpovídající části. Částečně průsvitné grafické prvky a strategické pořadí překrývání napomáhají vytvářet dojem letu v balónu.

Zobrazte si soubor .muse tohoto webu a všimněte si následujícího:

Řada obdélníků s přechodovou výplní na vzorové stránce vytváří pozadí pro delší obsah stránky.

  • Domovská stránka obsahuje grafiku zápatí s obrazem pozadí vodorovně uspořádaným do dlaždic, nastaveným na 100% šířky a připnutým ke spodnímu okraji okna prohlížeče. Druhá grafika zápatí (horský vrchol) je vystředěná a také připnutá ke spodní části prohlížeče a je pomocí volby Uspořádat > Zcela dopředu umístěna tak, aby se zobrazovala nad ostatními dlaždicovými grafickými prvky zápatí. Tato strategie funguje na všech velikostech monitorů.
  • Navigační odkazy na levé straně přeskakují na značky kotev přidané na dlouhé, svisle orientované stránce. Když návštěvník na takový odkaz klikne, posune se stránka tak, aby se zobrazil odpovídající obsah. Návrh vypadá při zobrazování nových částí vyváženě a jednotně.
  • Kontaktní část domovské stránky obsahuje vložený HTML, který zobrazuje prvky kontaktního formuláře zajišťujícího komunikaci s návštěvníky a plánování nadcházejících akcí.

Příklad č. 2: Kevin's Koffee Kart

fig02.master.b720
Tento web s více vrstvami používá widget Nabídka a prvky s vloženým HTML.

Domovská stránka webu Kevin's Koffee Kart obsahuje v záhlaví animaci Flash a připnuté obrazy oblaků. Při posouvání stránky pomocí posuvníků si všimněte, že obraz pozadí je pevný a neposouvá se, zatímco obsah stránky se posouvá nad ním. Dochází k automatickému přehrávání prezentace, jejíž obrazy se cyklicky zobrazují pod vloženým HTML kanálem služby Twitter.

Pruh nabídek v záhlaví byl vytvořen pomocí widgetu Vodorovná nabídka a vytváří trvalá tlačítka navigace webu, která se automaticky aktualizují při přidávání nových stránek. V této ukázce je widget Nabídka nakonfigurován tak, aby zobrazoval jak stránky nejvyšší úrovně, tak stránky nižší úrovně.

Vyzkoušejte nabídku a podívejte se, jak se při klikání na tlačítka zobrazují jednotlivé stránky. Záhlaví a zápatí jsou standardní na všech stránkách, ale výška stránek se liší v závislosti na obsahu. Hnědé zápatí se skládá ze dvou obdélníků nastavených na 100% šířku tak, aby zabíraly celou šířku okna prohlížeče a zajišťovaly tak shodný vzhled každé stránky.

Při vytváření webu Kevin's Koffee Kart byly použity následující zásady návrhu:

  • Tento web obsahuje dvě podobné vzorové stránky: vzorová stránka bez multimediálního obsahu Flash je použita na většinu stránek webu a druhá vzorová stránka, s filmem Flash, je použita pouze na domovskou stránku. Obě vzorové stránky mají zápatí o 100% šířce s průhlednými okraji návrhu a z důvodu zajištění konzistence používají stejný widget Nabídka. Po vytvoření první vzorové stránky byly prvky zkopírovány a vloženy na místo v druhé vzorové stránce - tímto způsobem bylo zajištěno, že všechny prvky budou dokonale zarovnány.
  • Stránky jsou zorganizovány v zobrazení Plán tak, aby vytvářely nejvyšší a nižší úrovně webu - tato skutečnost se odráží v položkách rozbalovací nabídky widgetu.
  • Mapa obrazu pozadí, použitá jako výplň prohlížeče, je nastavena tak, aby se zobrazila v původní velikosti a nikoli jako dlaždice. Je vystředěná a nastavená tak, aby se neposouvala pod obsahem stránky.
  • Výplň pozadí stránky je plně bílá s mírnou průhledností, takže obraz mapy pozadí prosvítá skrz.
  • Domovská stránka obsahuje dva částečně průhledné obrazy oblaků připnuté k prohlížeči. Zkuste stránku svisle posouvat a uvidíte, že se připnuté prvky neposouvají a při změně velikosti okna prohlížeče zůstávají na stejném místě.
  • Domovská stránka zobrazuje pomocí vloženého HTML živý obsah kanálu služby Twitter.
  • Na stránce Koffee se nachází widget Skládačka, který při kliknutí rozbaluje a sbaluje panely a zobrazuje tak více obsahu na malé ploše stránky.
  • Stránka Origins obsahuje widget Prezentace miniatur zobrazující interaktivní fotogalerii. Stránka Preparation používá navigaci založenou na značkách kotev k přeskakování do jednotlivých částí stránky a stránka Kart Map obsahuje vložený HTML, který zobrazuje živou mapu Google Latitude, založenou na aktuální poloze mobilního telefonu použitého pro daný účet.

Příklad č. 3: More than Square

fig03.master.b720
Obsah posouvající se stránky je ohraničen výraznou překrývající připnutou grafikou.

Na této poslední ukázce si všimněte, že grafické prvky budov jsou připnuty v pravém horním a v levém spodním rohu a vytvářejí tak rám obsahu stránky. Budova v pravém horním rohu je uspořádána vpředu tak, aby překrývala obsah stránky, zatímco budova vlevo dole se zobrazuje pod stránkou.

Obsah stránky je vystředěn, poloprůsvitný a odsazený od architektonických prvků se zakulacenými rohy. Obsah stránky se posouvá svisle a výšky jednotlivých stránek se liší. Odkazy na sociální sítě (Twitter, Facebook a YouTube) jsou trvale uchyceny na levé straně stránky, aby usnadňovaly vzájemné propojování pomocí odkazů, a dotvářejí konzistentně asymetrický vzhled celého webu.

Domovská stránka obsahuje fotogalerii ovládanou tlačítky Další a Předchozí, která je navíc nakonfigurovaná na pomalé přehrávání v případě, že návštěvník na žádné tlačítko neklikne. Stránka How to Get Here obsahuje interaktivní mapu vytvořenou pomocí vloženého kódu HTML zkopírovaného z webu Google Maps.

Zobrazte si soubor .muse této ukázky a všimněte si následujícího:

V této ukázce se skoro všechny běžné prvky stránky nacházejí na vzorové stránce. Tato strategie usnadňuje aktualizování webu a provádění změn v obsahu jednotlivých stránek.

Vzorová stránka obsahuje neposouvající se grafiku pozadí pro obraz zápatí, který je připnut k levé spodní straně prohlížeče. Návrh vzorové stránky také obsahuje zakulacené rohy a poloprůsvitné prvky, včetně navigace webu.

Všechny stránky webu obsahují v pravém horním rohu připnutou grafiku, která je uspořádána tak, aby se zobrazovala před obsahem stránky a vytvářela tak dojem perspektivy přenášené přes úhly obrazů budov.

Aplikace Muse představuje intuitivní návrhářský nástroj umožňující přenášet vaše návrhy na web. Kreativní umisťování prvků na vzorové stránky a zobrazování jedinečného obsahu na jednotlivých stránkách umožňují vytvářet působivá rozvržení. Při vytváření inovativních webů pro své klienty jste omezeni pouze vlastní fantazií.

Pokud máte zájem o další tipy ohledně práce s aplikací Muse, určitě se podívejte na stránku nápovědy a výukových lekcí aplikace Muse nebo stránku akcí aplikace Muse, kde najdete živé i nahrané webové semináře.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online