Naučte se v aplikaci Adobe Muse přidávat widgety Kompozice. Konfigurujte widgety Kompozice a vytvářejte interaktivní stránky.

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.

Widgety Kompozice v aplikaci Adobe Muse umožňují přidat na vaše weby komplexní interaktivitu. Je jedno, zda jde o web zabývající se fotografiemi nebo web nějaké restaurace, widgety Kompozice mohou být prakticky nepostradatelné pro jakýkoli web, kde zobrazují mnoho různého obsahu. Můžete je použít k dosažení jedinečných možností navigace a procházení, aniž byste napsali jediný řádek kódu.

Aplikace Adobe Muse nabízí několik typů widgetů Kompozice, které umožňují přidávat a navrhovat různé druhy obsahu pro web. Například jako uživatel vytvářející web o fotografování můžete zvolit widget Zobrazení světelného boxu, díky němuž budete mít na webu galerii fotografií. Tento widget dočasně ztmaví zbytek stránky, takže zajistí, aby se pozornost návštěvníka soustředila na aktivní zobrazenou oblast.

Rovněž je možné vytvářet zajímavé návrhy webů pomocí vnořování widgetů do widgetu Kompozice. Pokud například navrhujete katalog, můžete použít widget Prázdná kompozice k vytvoření nabídky hamburgerů a vnořit widget Prezentace do cílové oblasti widgetu Prázdná kompozice. Tyto návrhy poskytují pro návštěvníky vašeho webu jedinečné uživatelské prostředí.

Zde najdete informace o typech widgetů Kompozice, které jsou dostupné v aplikaci Adobe Muse.

Typy widgetů Kompozice

Widget Kompozice obsahuje dva kontejnery: spouštěcí oblast a cíl. Spouštěcí oblast je místo, kam návštěvník webu kliká, zatímco cílová oblast je odpovídající oblast, která se zobrazí. Spouštěcí a cílovou oblast můžete propojit, čímž svému webu přidáte na komplexnosti a interaktivitě.

Aplikace Adobe Muse nabízí následující typy widgetů Kompozice. Na základě svých požadavků návrhu můžete použít buď jeden z těchto widgetů, nebo kombinaci těchto widgetů prostřednictvím vnořování.

Prázdný

Widget Prázdná kompozice v aplikaci Adobe Muse
Widget Prázdná kompozice v aplikaci Adobe Muse

Widget s miniaturami. Ve výchozím nastavení tento widget nemá žádný obsah. Tento widget lze manuálně propojit s cílovým kontejnerem.

Vybrané novinky

Widget Kompozice Vybrané novinky v aplikaci Adobe Muse
Widget Kompozice Vybrané novinky v aplikaci Adobe Muse

Widget, který se chová podobně jako skládací widget. Do jeho oblasti kontejneru lze přidávat text a obrázky.

Zobrazení světelného boxu

Widget Kompozice Zobrazení světelného boxu v aplikaci Adobe Muse
Widget Kompozice Zobrazení světelného boxu v aplikaci Adobe Muse

Widget, u kterého se cíl aktivuje kliknutím na spouštěcí oblast. Po zobrazení cíle je zbytek stránky ztmavený.

Prezentace

Widget Kompozice Prezentace v aplikaci Adobe Muse
Widget Kompozice Prezentace v aplikaci Adobe Muse

Tento widget obsahuje miniatury propojené s prezentační oblastí cíle. Snímky se v tomto widgetu standardně přesouvají horizontálně.

Popisek

Widget Kompozice Popisek nástroje v aplikaci Adobe Muse
Widget Kompozice Popisek nástroje v aplikaci Adobe Muse

Tento widget obsahuje text s popisem. Popis se zobrazí okamžitě po najetí kurzoru nad spouštěcí oblast.

Přidání a konfigurace widgetů Kompozice

Widget Kompozice v aplikaci Adobe Muse přidáte a použijete tak, že si vyberete widget, který chcete přidat, a přetáhnete jej do zobrazení Návrh. Jelikož jsou tyto widgety standardně responzivní, uvidíte, že se bude widget pohybovat napříč různými zarážkami. Pokud chcete změnit umístění nebo obsah widgetu Kompozice, můžete jednotlivé prvky widgetu upravovat, měnit jejich velikost a připínat je ve vztahu k určité zarážce.

Pomocí následujícího postupu můžete přidat widget Kompozice do svého rozvržení.

  1. Otevřete aplikaci Adobe Muse. Na uvítací obrazovce buď kliknutím na tlačítko Vytvořit nový vytvořte nový web, nebo otevřete existující web aplikace Adobe Muse, kam chcete přidat widget Kompozice.

  2. V zobrazení Plán dvakrát klikněte a otevřete stránku, kam chcete přidat widget.

  3. Otevřete Knihovnu widgetů (Okno > Knihovna widgetů) a kliknutím na možnost Kompozice rozbalte volbu. Na základě požadavků svého návrhu vyberte jeden z widgetů Kompozice.

    Například vyberte z knihovny widgetů volbu Zobrazení světelného boxu.

    Poznámka:

    Veškerý výchozí obsah ve widgetu odstraníte kliknutím pravým tlačítkem myši na widget a výběrem možnosti Vymazat obsah ovládacích prvků.

    Přetáhněte widget Kompozice z knihovny widgetů do aplikace Adobe Muse.
    Přetáhněte widget Kompozice z knihovny widgetů.

    Výchozí verze widgetu Zobrazení světelného boxu obsahuje tři menší šedé boxy spouštěcích oblastí nad větším, světle šedým kontejnerem cílové oblasti.

    Když návštěvníci kliknou na kontejner spouštěcí oblasti, zobrazí se widget Zobrazení světelného boxu. Jako cíl můžete vložit obrázky, text a videa včetně videí z YouTube.

  4. Ve widgetu Kompozice vyberte kontejner nebo spouštěcí oblast. Výběrem widgetu vyberete celý widget. V indikátoru výběru v levém horním rohu aplikace se zobrazí slovo Kompozice.

    Spouštěcí oblast vyberete dvojitým kliknutím na menší boxy ve widgetu a jejich výběrem. V indikátoru výběru se zobrazí výraz Spouštěcí oblast. Menší boxy jsou spouštěcími oblastmi tohoto widgetu. Jsou to tlačítka reagující na interakci uživatele.

    Viz indikátor výběru v levém horním rohu stránky Adobe Muse
    Viz indikátor výběru v levém horním rohu stránky

    Pokud indikátor výběru v levém horním rohu zobrazuje slovo Stránka, můžete si být jistí, že nejsou vybrané žádné jiné prvky.

  5. Pomocí příkazu nabídky Soubor > Umístit otevřete dialogové okno Importovat. Najděte v něm soubory, které chcete umístit do tohoto widgetu. Kliknutím na tlačítko Otevřít tento soubor vyberte a zavřete dialog Importovat.

    Jedním kliknutím kdekoli na stránce na ni umístěte obrázek v plné velikosti.

  6. Zatímco je obrázek stále vybrán, klikněte pravým tlačítkem myši a v zobrazené kontextové nabídce vyberte možnost Vyjmout.

    K vyjmutí obrázku můžete použít také klávesovou zkratku, která tento obrázek odebere ze stránky a zkopíruje jej do schránky.

  7. Klikněte pravým tlačítkem uvnitř tlačítka spouštěcí oblasti a vyberte příkaz Vložit. Obrázek můžete do spouštěcí oblasti vložit i pomocí klávesové zkratky. Všimněte si, že se kontejner spouštěcí oblasti automaticky zvětší na velikost rozměrů obrázku.

    Vložení obsahu do kontejneru nemusí být zcela jednoduché. Někdy se můžete domnívat, že se obsah vložil dovnitř, ale ve skutečnosti se obsah možná vložil na stránku.

    Pokud potřebujete ověřit, jestli se obrázek nachází uvnitř kontejneru spouštěcí oblasti, stiskněte jednou klávesu Escape a podívejte se na indikátor výběru. Pokud zobrazuje výraz Spouštěcí oblast, potom víte, že se obrázek nachází uvnitř spouštěcí oblasti. Pokud indikátor výběru zobrazuje slovo Stránka, budete muset obraz znovu vyjmout a vložit do kontejneru spouštěcí oblasti.

    Místo vložení obrázku můžete ověřit také pomocí panelu Vrstvy (Okno > Vrstvy). V panelu Vrstvy se zobrazuje hierarchie prvků na stránce.

  8. Další miniatury přidáte kliknutím na znaménko „+“ vedle kontejnerů spouštěcí oblasti.

    Kliknutím na „+“ můžete přidat miniatury do Zobrazení světelného boxu
    Kliknutím na „+“ můžete přidat miniatury
  9. Po umístění widgetu do zobrazení Návrh můžete pokračovat a nakonfigurovat widget. Možnosti widgetu Kompozice nakonfigurujete výběrem widgetu a kliknutím na modrou šipku v jeho pravém horním rohu.

    Nakonfigurujte widgety Kompozice pomocí nabídky Volby
    Nakonfigurujte widgety Kompozice pomocí panelu Volby

    V panelu Možnosti můžete nakonfigurovat následující nastavení:

    • Pozice: Určuje, kde je cílová oblast umístěná na stránce. Vyberte možnost Vrstvená, pokud chcete, aby se cíle překrývaly. Pokud naopak budete chtít cíle umístit na různé pozice, zvolte možnost Rozptýlená. Pokud chcete zbytek stránky ztmavil, vyberte volbu Světelný box.
    • Zobrazit cíl: Určuje chování cíle po kliknutí na spouštěcí oblast. 
    • Skrýt cíl: Nastaví skrývání cíle. Pokud uživatel neklikne na spouštěcí oblast, zůstane cílová oblast skrytá.
    • Přechod: Určuje, jak se obsah v cílové oblasti změní, když uživatel na spouštěcí oblast klikne nebo přes ni přejede myší. Vyberte Zeslabování pro postupné zobrazení nového cíle, Vodorovný pro přisunutí cíle ve vodorovném směru a Svislý pro přisunutí cíle ve svislém směru.
    • Rychlost přechodu: Určuje rychlost přechodu pro widget Kompozice. Pokud chcete, aby přechod proběhl okamžitě, vyberte Žádný.
    • Přehrát automaticky: Konfigurací této volby si na svých stránkách vytvoříte prezentaci. Pokud vyberete tuto možnost, přehrávají se snímky automaticky bez jakéhokoli zásahu uživatele.
    • Přemístit: Výběrem této možnosti se budou cíle zobrazovat v náhodném pořadí.
    • Spouštěcí oblasti nahoře: Tuto možnost vyberte, pokud chcete Spouštěcí oblast umístit nad Cílový kontejner. Stejná hierarchie může být zobrazena také na panelu Vrstvy.
    • Zapnout posouvání: Výběrem této možnosti povolíte pro dotyková zařízení posouvání prstem na další cíl.
    • Na začátku skrýt vše: Výběrem této možnosti skryjete po počátečním načtení stránek všechny možnosti cíle. Uživatelé musejí pro zobrazení cíle kliknout na příslušnou spouštěcí oblast.
    • Automatický světelný box: Výběrem této možnosti se bude světelný box automaticky zobrazovat po načtení stránek.
    • Části: Výběrem tlačítek Předchozí, Další nebo Zavřít bude váš widget interaktivnější. Uživatelé mohou na webu kliknout na volby Předchozí, Další a Zavřít.
    • Úpravy: Výběrem možnosti Při úpravách zobrazit části světelného boxu se vám při upravování widgetu v zobrazení Návrh ukáže cílová oblast. Výběrem možnosti V režimu návrhu zobrazit vše se vám v zobrazení Návrh ukáží všechny kontejnery cílů zároveň.
    Konfigurace nastavení widgetů Kompozice v aplikaci Adobe Muse
    Konfigurace nastavení widgetů Kompozice

    Poznámka:

    Volba Při úpravách zobrazit části světelného boxu je vypnutá, pokud jste v rozevíracím seznamu Pozice vybrali možnost Rozptýlená nebo Vrstvená.

    Volba Na začátku skrýt vše je vypnutá, pokud vyberete možnost Automatický světelný box.

  10. Spouštěcí oblasti, které chcete odstranit, vyberte dvojitým kliknutím na zvolenou spouštěcí oblast. Stisknutím klávesy Delete (Mac) nebo Backspace (Windows) odstraňte vybranou spouštěcí oblast.

  11. Kliknutím na obrázek úvodní obrazovky v kontejneru spouštěcí obrazovky vyvolejte efekt světelného boxu.

    Kliknutím na obrázek vlevo (spouštěcí oblast) zobrazte Zobrazení světelného boxu
    Kliknutím na obrázek vlevo (spouštěcí oblast) zobrazte Zobrazení světelného boxu (jak je znázorněno vpravo)

    Stisknutím klávesy Escape zavřete okno světelného boxu a vraťte se do zobrazení návrh, abyste mohli pokračovat v úpravě stránky Adobe Muse.

  12. Po nakonfigurování a umístění widgetu Kompozice do návrhu jej otestujte v zobrazení Náhled.

Pokud používáte widget Kompozice v responzivním rozvržení, přečtěte si následující část. Otestujte a zobrazte náhled widgetu ve všech zarážkách.

Použití widgetu Kompozice v responzivním rozvržení

Widgety kompozice jsou ve výchozím nastavení proměnlivé či responzivní. Chcete-li přidat a používat widgety Kompozice v responzivním rozvržení, proveďte jeden z následujících kroků:

  • Pokud vytváříte nový responzivní web pomocí nejnovější verze aplikace Adobe Muse, z panelu Knihovna widgetů přetáhněte widget Kompozice a umístěte jej do zobrazení Návrh.
  • Pokud jste používali aplikaci Adobe Muse 2017.0.3 nebo starší, není widget Kompozice responzivní. V tom případě otevřete soubor .muse pomocí nejnovější verze aplikace Adobe Muse. Vyberte prvky uvnitř widgetu a zvolte možnost Změnit velikost jako Responzivní šířka či Responzivní výška a šířka (podle toho, co platí).
Převod neresponzivních widgetů Kompozice na responzivní
Převod neresponzivních widgetů Kompozice na responzivní

Poznámka:

Nemůžete vybrat celý widget a změnit vlastnosti změny velikosti. Prvky uvnitř widgetu je třeba převádět na responzivní po jednom.

Nakonfigurujte widget podle následujících kroků, které jsou uvedeny v části Přidání a konfigurace widgetů Kompozice. Po nakonfigurování a úpravě stylu widgetu můžete buď zobrazit náhled widgetu v prohlížeči, nebo využít posuvník a změnit pomocí něj velikost widgetu. Zjistíte, že se velikost widgetů automaticky mění v závislosti na velikosti obrazovky.

Responzivní widget Kompozice v aplikaci Adobe Muse
Responzivní widget Kompozice v aplikaci Adobe Muse

Poznámka:

Při přidání widgetů Kompozice v responzivním rozvržení doporučujeme rozvrhnout návrh nejprve pro největší zarážku. Po dokončení umisťování a konfigurace widgetu pro největší zarážku přidejte další zarážky, kdekoli je to potřeba.

Další informace o navrhování webu pro responzivní rozvržení si přečtěte téma Rozvržení objektů v responzivním návrhu.

Kombinování widgetu Kompozice s ostatními widgety

Jeden z nejjedinečnějších aspektů widgetu Kompozice je podpora pro widgety vnořené do widgetu Kompozice. To znamená, že uvnitř widgetu Kompozice můžete přidávat widgety, jako jsou například formuláře a prezentace, nebo položky nabídky.

Například můžete přidat widget prezentace dovnitř cílového kontejneru widgetu Vybrané novinky na webu o vaření. Pokud návštěvník webu klikne na popisek nabídky (widget Vybrané novinky), cílová oblast obsahující galerii se zobrazí jako prezentace.

Jako cíl také můžete přidat kontaktní formulář, aby byl uživatel kliknutím na položku Kontakt ihned přesměrován na kontaktní formulář.

Existuje mnoho dalších kombinací a možností návrhů, kterých lze pomocí vnořování dosáhnout. Při navrhování vnořených widgetů v responzivním rozvržení však mějte na paměti následující aspekty:

  • Pro responzivní prvky, které jsou vnořeny v neresponzivním kontejneru, není k dispozici možnost připnutí. 
  • Objekty nebudou responzivní, když je umístíte do neresponzivního kontejneru.

Poznámka:

Při vnořování widgetů do widgetu Kompozice se nedoporučuje používat více než tři úrovně vnoření.

V následující části je ukázáno, jak vytvořit podnabídku pomocí widgetu Kompozice. Dále se v tomto ukázkovém scénáři dozvíte, jak vytvářet skryté podnabídky pro navigaci webu.

Vytváření podnabídek za použití widgetů Kompozice

Nakonfigurováním widgetů Kompozice lze vytvářet navigaci webu pomocí podnabídek. Můžete vytvořit položku nabídky, která zobrazí podnabídku v okamžiku, kdy uživatel najede kurzorem na aktivní oblast, a skryje tuto podnabídku v okamžiku, kdy uživatel odsune kurzor z aktivní oblasti, která předtím vyvolala otevření této podnabídky. Widget lze také nakonfigurovat jako podnabídku, která se skryje v případě, že návštěvník neklikne na žádný z odkazů v podnabídce a jednoduše z ní odsune kurzor. Možnost vytvářet tyto typy interaktivních dílčích nabídek se hodí, když vytváříte navigační pruh pro web s mnoha dílčími částmi. 

Nabídky Zobrazit cíl a Skrýt cíl jsou užitečné při replikaci běžného chování nabídky pro vaše stránky. Návštěvník může kliknout na odkazy nebo může odsunout kurzor mimo oblast okna a tak okno skrýt. Pokud je tato volba zapnutá, není nutné pro skrytí dílčí nabídky kliknout na tlačítko Zavřít.

Tato funkce je dostupná, pracujete-li s následujícími widgety Kompozice:

  • Prázdný
  • Vybrané novinky
  • Popisek

Panel Volby obsahuje dvě nastavení týkající se zobrazení cílového kontejneru:

  • Při kliknutí: Cíl se zobrazí, když uživatel klikne
  • Při přechodu myší: Cíl se zobrazí, když uživatel přejde myší na spouštěcí oblast

Také můžete zvolit skrytí cílového kontejneru ve widgetu Kompozice. Níže jsou uvedeny čtyři volby pro skrytí cílového kontejneru:

  • Žádné
  • Při kliknutí
  • Při odsunutí myši
  • Při odsunutí myši ze spouštěcí oblasti a cíle

V následující části se dozvíte, jak používat chování možnosti Při přechodu myší k zobrazení cílového kontejneru a jak při odsunutí myši ze spouštěcího i cílového kontejneru skrýt cílový kontejner.

Pomocí následujícího postupu se můžete naučit zapnout nastavení Skrýt při odsunutí myši pro widgety Kompozice, a vytvořit tak panel nabídek skrývající a zobrazující odkazy dílčích nabídek na základě interakcí návštěvníka:

  1. V zobrazení Návrh přidejte do stránky widget Kompozice světelného boxu přetažením z knihovny widgetů.

  2. Vyberte kontejnery spouštěcích oblastí. Pomocí nástroje pro výběr přesuňte všechny tři kontejnery spouštěcích oblastí zcela nahoru, nad větší kontejner spouštěcí oblasti, a rovnoměrně je rozmístěte.

    Rozmístění kontejnerů spouštěcích oblastí
    Rozmístěte kontejnery spouštěcích oblastí nad větší obraz úvodní obrazovky.

  3. Pomocí nástroje pro výběr přetáhněte boční rukojeti všech kontejnerů spouštěcích oblastí. Jejich rozšířením vytvořte podél horního okraje tři „záložky“, podobné, jako se používají ve widgetu Panel se záložkami.

    Pomocí nástroje pro výběr přetáhněte táhla
    Přetažením ohraničujících rámečků zvětšete šířku tří spouštěcích tlačítek.

  4. Do každé z těchto tří spouštěcích oblastí přidejte požadovaný obsah. Obsah spouštěcí oblasti může zahrnovat text, odkazy, obrázky, obdélníky, vložený kód HTML atd. Pomocí nástroje Text můžete například do každé spouštěcí oblasti vložit text: Odkaz jedna, Odkaz dvě a Odkaz tři.

    Nyní vytvořte odkaz uvnitř druhé cílové oblasti obsahu.

  5. Klikněte na nějakou spouštěcí oblast, a poté vyberte větší kontejner cíle, který jí odpovídá. Do druhé cílové oblasti obsahu přidejte odkaz. Poté na pravé straně ovládacího panelu klikněte na rozbalovací seznam vedle nápisu Hypertextové odkazy. Přidejte odkaz na webovou adresu, na kterou chcete odkazovat.

  6. Výběrem možnosti nabídky Soubor > Náhled stránky v prohlížeči vyzkoušejte, jak se widget Kompozice zobrazí.
    Vyzkoušejte widget kliknutím do kontejnerů spouštěcích oblastí označených Odkaz jedna, Odkaz dvě a Odkaz tři.

    Všimněte si, že ve výchozím nastavení je cílový kontejner neustále zobrazen a nikdy nedochází k jeho skrytí. Kliknutím mezi tato tři spouštěcí tlačítka zobrazíte odpovídající cílový kontejner, ale jeden ze tří cílových kontejnerů se zobrazuje neustále.

  7. Nastavení Skrýt při odsunutí myši nakonfigurujete vybráním widgetu Kompozice. Kliknutím na modrou šipku otevřete panel Volby a upravte konfigurační volby widgetu.

    Zkontrolujte, jestli jsou aktivovaná následující nastavení:

    • Pozice: Vrstvená (výchozí)
    • Zobrazit cíl: Při přechodu myší
    • Skrýt cíl: Při odsunutí myši ze spouštěcí oblasti a cíle
    • Přechod: Zeslabování (výchozí)
    • Rychlost přechodu: 0,5 s (výchozí)
    • Přehrát automaticky: Vypnuto (výchozí)
    • Přemístit: Zakázáno (výchozí)
    • Na začátku skrýt vše: Zapnuto
    Panel voleb kompozice
    Aktualizujte nastavení v panelu Volby ovlivňující chování widgetu.

    Klíčová nastavení řídicí funkci skrývání/zobrazování jsou nabídka Zobrazit cíl, nabídka Skrýt cíl a povolení volby: Na začátku skrýt vše.

  8. Výběrem možnosti nabídky Soubor > Náhled stránky v prohlížeči opět vyzkoušejte naposledy provedené změny ve widgetu.

    Když se nyní widget Kompozice načte, budou všechny tři cílové oblasti ve výchozím nastavení skryté.

    Znovu widget vyzkoušejte. Všimněte si, že když nasunete kurzor na spouštěcí oblast, zobrazí se odpovídající cílová oblast. Když kurzor zůstane v oblasti widgetu, můžete pracovat s obsahem nacházejícím se uvnitř cílových oblastí (například kliknout na odkaz na webové stránky v prostředním kontejneru cíle).

    Pokud ale odsunete kurzor ze spouštěcí nebo cílové oblasti, dojde ke skrytí cílových oblastí až do doby, než kurzorem znovu najedete na jinou spouštěcí oblast.

    Tato funkce umožňuje nastavit mnohem propracovanější interaktivní procházení stránek reagující na pohyby myši návštěvníka.

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