Naučte se přidávat a konfigurovat nabídky pro web Adobe Muse. Naučte se vytvářet mobilní nabídky a stavy efektu přechodu a upravit popisy nabídek.

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.

Navigace patří mezi nejdůležitější aspekty vytváření webu. Výběr typu a umístění navigace webu je kriticky významným krokem návrhu webu. Nabídky a navigace po webu mohou vylepšit nebo pokazit zkušenosti uživatelů s webem.

V aplikaci Adobe Muse můžete systém navigace ve webu rychle vytvořit pomocí widgetů nabídek. Ačkoli lze stránky ručně propojovat vytvářením odkazů, widgety nabídek nabízejí jednoduchý a flexibilní způsob přidání
navigace do webu. Podobně jako u widgetů lze i nabídky přidávat přetažením widgetu nabídky na stránku. Po jeho přetažení zjistíte, že dojde k automatickému vyplnění popisků nabídek, které jsou stejné jako názvy stránek. Pokud v zobrazení Plán změníte název stránky, popisky nabídek se automaticky aktualizují.

Můžete přidávat vodorovné i svislé nabídky. Aplikace Adobe Muse dále nabízí možnost vytváření sendvičových nabídek a stavů efektu přechodu pro položky nabídek. Používání všech těchto postupů v aplikaci Adobe Muse je popsáno v následujících částech.

 

Přidání widgetu nabídky

  1. Když je vzorová stránka otevřená pro úpravy v zobrazení Návrh, tak otevřete knihovnu widgetů. Pokud ještě není otevřená, vyberte možnost nabídky Okno > Knihovna widgetů.

  2. Kliknutím na položku Nabídky na panelu Knihovna widgetů rozbalte seznam widgetů nabídek. V závislosti na návrhu webu a na tom, kam chcete nabídku umístit, vyberte jednu z následujících možností:

    • Vodorovná pro přidání vodorovné nabídky.
    • Svislá pro přidání svislé nabídky.
    Výběr widgetu svislé nebo vodorovné nabídky v aplikaci Adobe Muse
    Výběr widgetu svislé nebo vodorovné nabídky
  3. Pomocí nástroje Výběr widget přetáhněte a umístěte do požadovaného umístění v rozvržení. Můžete například umístit widget vodorovné nabídky do záhlaví.

    Umístěte widget nabídky nad obraz pozadí představovaný hnědou stužkou v záhlaví.
    Umístěte widget nabídky nad obraz pozadí představovaný hnědou stužkou v záhlaví.

    Všimněte si, že nabídka automaticky zobrazí názvy vytvořených stránek ve stejném pořadí, v jakém se zobrazují na mapě webu. Popisky nabídek jsou automaticky provázány se stránkami a jsou dynamické. To znamená, že pokud se později rozhodnete stránky přejmenovat nebo přesunout, dojde k automatické aktualizaci nabídky. Odkazy budou i nadále fungovat podle očekávání.

  4. Na ovládacím panelu klikněte na výběr barvy a nastavte barvu nabídky. Poté pomocí pole Velikost textu nastavte velikost textu nabídky.

    Výběr velikosti a barvy textu
    Nastavením barvy písma a jeho velikosti v bodech můžete ovládat textová tlačítka ve widgetu Vodorovná nabídka.

Konfigurace a přizpůsobení widgetů nabídek

Po přidání widgetu nabídky do rozvržení můžete tento widget přizpůsobit tak, aby vyhovoval vašim požadavkům. Nabídky můžete konfigurovat pomocí panelu Volby.  Panel Volby je kontextuální panel, který umožňuje použití změn k aktualizaci konkrétních nastavení daného widgetu. Pomocí tohoto panelu můžete řídit chování widgetů a způsob zobrazení jejich obsahu.

  1. Vyberte widget nabídky a klikněte na modrou šipku v pravém horním rohu widgetu. Systém zobrazí panel Volby.

    Konfigurace widgetu nabídky na panelu Volby
    Konfigurace widgetu nabídky na panelu Volby
  2. Nakonfigurujte widget nabídky pomocí panelu Volby. Upravit můžete následující možnosti:

    • Typ nabídky: Určuje, které stránky budou součástí navigace webu. Chcete-li zahrnout pouze stránky první úrovně nebo nadřazené stránky, vyberte možnost Nejvyšší stránky. Chcete-li do navigace zahrnout i podstránky, vyberte možnost Všechny stránky. Podřízené stránky se zobrazí jako podnabídky. Chcete-li ručně vybrat stránky, které se zobrazí ve widgetu nabídky, vyberte možnost Ruční.
    • Směr: Určete, jestli chcete přidat nabídku svisle nebo vodorovně.
    • Upravit společně: Toto políčko zaškrtněte v případě, že chcete aktualizovat všechny položky nabídky společně. Toto políčko je ve výchozím nastavení zaškrtnuté. Pokud toto políčko nezaškrtnete, použijí se konfigurace pouze na vybranou položku nabídky.
    • Velikost položky: Určete, jestli mají být položky nabídky rovnoměrně rozloženy podle šířky nebo podle velikosti.
    • Zobrazit levou ikonu: Toto políčko není ve výchozím nastavení zaškrtnuté. Tuto volbu vyberte, chcete-li do levého rohu každé položky nabídky přidat ikonu.
    • Zobrazit popisek: Toto políčko je ve výchozím nastavení zaškrtnuté. Pokud zrušíte zaškrtnutí tohoto políčka, přestanou se popisky nabídek zobrazovat.
    • Zobrazit pravou ikonu: Chcete-li pravé ikony zakázat, vyberte možnost Vypnuto. Chcete-li nakonfigurovat ikony v pravém rohu položek nabídky, vyberte možnost Zapnuto. Pravá ikona představuje užitečnou volbu, když chcete přidávat šipky označující, že daná položka nabídky obsahuje podnabídky. Můžete rovněž vybrat možnost Pouze podnabídky a nakonfigurovat pravou ikonu pouze pro ty položky nabídky, které podnabídky obsahují.
    • Umístění částí: Určuje počáteční bod interních částí jednotlivých karet.
    Konfigurace widgetů nabídek pomocí panelu Volby
    Konfigurace widgetů nabídek pomocí panelu Volby

Úpravy a styl popisků nabídek

Následující postup demonstruje, jak lze aktualizovat textové popisky, které zobrazují názvy stránek v jednotlivých položkách nabídky. Představme si widget vodorovné nabídky s velice základním návrhem a s jednoduchými textovými odkazy. V rámci této ukázky předpokládejme, že se pro všechny stavy používá stejné formátování písma.

  1. Dvojitým kliknutím vyberte popisek nabídky, který chcete upravit.

  2. Chcete-li upravit text uvnitř položky nabídky, otevřete panel Text (Okno > Text). Při výběru popisku pomocí panelu Text naformátujte text výběrem požadovaných voleb:

    • Písmo: Vyberte požadované písmo, které chcete použít na popisek nabídky.
    • Styl písma: V případě potřeby můžete pro popisek nabídky vybrat možnost Kurzíva nebo Tučné.
    • Velikost: Vyberte velikost písma popisku nabídky.
    • Barva: V rozevíracím poli Barva zadejte hexadecimální kód barvy, kterou chcete použít. Nebo pomocí kapátka vyberte libovolnou barvu.
    Úpravy popisků nabídek ve widgetech nabídek
    Úpravy popisků nabídek ve widgetech nabídek
  3. Hodnoty okrajů pro popisek nabídky můžete nakonfigurovat pomocí panelu Text. Pokud již máte styl hypertextového odkazu, který chcete použít na popisek nabídky, vyberte tento styl z rozevíracího pole vedle položky abc.

    Chcete-li použít styl odstavce, vyberte tento styl z rozevíracího pole Styl odstavců na panelu Text.

  4. Chcete-li na popisky nabídek použít výplň a tah, tak dvakrát klikněte a vyberte popisek nabídky. Na panelu nástrojů v horní části stránky vyberte barvu výplně a tahu.

    Na panelu nástrojů můžete rovněž upravit tloušťku tahu a povolit poloměr rohů popisků nabídek.

    Použití nastavení výplně a tahu na popisky nabídky
    Použití nastavení výplně a tahu na popisky nabídky

Vytváření stavů přechodu myši pro položky nabídky

  1. Pomocí nástroje pro výběr vyberte popisek nabídky, pro který chcete vytvořit stav přechodu. Otevřete panel Stavy. Všimněte si, že výchozí stavy tohoto tlačítka jsou již nadefinovány. Kliknutím na miniaturu Stav přechodu na panelu Stavy můžete tento stav upravit.

  2. Dokud je stále vybraný popisek nabídky, tak v oblasti výběru barvy v části Výplň kliknutím na bílý vzorek barvy s červenou příčnou čárou vyberte možnost Žádná výplň (průhledná).

  3. Klikněte na textový nástroj a pomocí výběru barvy na ovládacím panelu vyberte pro stav přechodu jinou než bílou barvu.

  4. Na panelu Stavy vyberte stav Kliknutí myší. Dokud je vybraný textový nástroj, tak vybráním vzorku barvy ve výběru barvy ovládacího panelu nastavte text Kliknutí myší na tmavší barvu.

  5. Na panelu Stavy vyberte stav Aktivní. Kliknutím na odkaz Výplň na ovládacím panelu otevřete nabídku Výplň.

  6. V nabídce Výplň klikněte na výběr barvy a nastavte barvu výplně na Žádná. Klikněte na ikonu složky vedle části Obraz. V zobrazeném dialogu Importovat vyhledejte a vyberte soubor obrazu pozadí pojmenovaný top-nav-over.png. Kliknutím na tlačítko Vybrat jej vyberte. Dialog Importovat se automaticky zavře.

  7. Dokud jste stále ještě v nabídce Výplň, tak zkontrolujte, jestli je volba Přizpůsobení nastavená na Původní velikost. Poté v části Umístění klikněte na prostřední z devíti teček. Obraz výplně pozadí se zobrazí vystředěný, bez barvy výplně a v původní velikosti. Kliknutím někam jinam zavřete nabídku Výplň.

    Definování stavů tlačítek
    Definujte aktivní stav položky nabídky.

    Jelikož je ve widgetu vodorovné nabídky zapnuta výchozí volba Upravit společně, aplikují se všechny změny provedené v popisku nabídky také na všechna tlačítka v navigačním pruhu.

  8. Uložte svoji práci kliknutím na příkaz Soubor > Uložit. Kliknutím na znak X na kartě A-vzorová zavřete stránku v zobrazení Návrh a vraťte se do zobrazení Plán. Všimněte si, že se všechny miniatury stránek aktualizují tak, aby obsahovaly obsah přidaný do vzorové stránky.

    Poznámka:

    Vodítka v oblasti záhlaví a zápatí lze upravit pouze ve vzorových stránkách webu. Chcete-li upravit velikost záhlaví nebo zápatí svých stránek, můžete dvojitým kliknutím na vzorovou stránku tuto stránku kdykoli otevřít v zobrazení Návrh a přemístit vodítka.

Vytvoření mobilní nabídky

V aplikaci Adobe Muse můžete rovněž vytvořit sendvičovou neboli mobilní nabídku. U tohoto druhu nabídky se po podržení ukazatele na hlavní nabídce zobrazí rozevírací podnabídka. Chcete-li vytvořit tento typ nabídky, pročtěte si článek Vytváření podnabídek za použití widgetů Kompozice.

Vyloučení stránek z nabídky

Kdykoli vytvoříte v zobrazení Plán svého webu novou stránku nejvyšší úrovně, aplikace Adobe Muse automaticky přidá tuto stránku do nabídky. Může se ale stát, že chcete stránku nejprve otestovat, a teprve poté ji zpřístupnit návštěvníkům, nebo chcete určitou stránku skrýt. V takových případech umožňuje aplikace Adobe Muse vyloučit určité stránky z navigace a zajistit, že nebudou uvedeny jako položky ve widgetu nabídky.

Pomocí následujícího postupu můžete vyloučit stránky z widgetu nabídky:

  1. Předpokládejme, že jste již vytvořili mapu svého webu, takže nyní můžete v aplikaci Adobe Muse přejít do zobrazení Plán. Pro účely tohoto postupu předpokládejme, že máte mapu webu obsahující stránky Domovská stránka, Portfolio, Můj příběh, Kontakt a Produkty.

    Zobrazení mapy webu v zobrazení Plán
    Zobrazení mapy webu v zobrazení Plán

    Přejdete-li na vzorovou stránku a přetáhnete widget nabídky, uvidíte, že jsou v nabídce obsaženy všechny stránky.

  2. Chcete-li v zobrazení Plán vyloučit určitou stránku, klikněte na takovou stránku pravým tlačítkem. Klikněte na možnost Volby nabídky > Vyloučit stránku z nabídek.

    Chcete-li například vyloučit stránku Produkty, klikněte pravým tlačítkem na položku Produkty. Poté vyberte možnost Volby nabídky > Vyloučit stránku z nabídek.

    Vyloučení určitých stránek z widgetů nabídek
    Vyloučení určitých stránek z widgetů nabídek

    Když se nyní vrátíte na vzorovou stránku a nabídku si zobrazíte, uvidíte, že položka Produkty byla z widgetu nabídky odebrána.

    Poznámka:

    Chcete-li odstranit celou nabídku, přejděte na stránku, na které jste widget nabídky přidali. Vyberte widget a stiskněte klávesu Delete.

    V případě, že chcete zobrazit položku nabídky bez odkazu, klikněte v zobrazení Plán pravým tlačítkem na danou stránku. Vyberte možnost Volby nabídky > Vložit stránku bez hypertextového odkazu.

    Tato volba je užitečná v různých případech vytváření webových stránek. Využijete ji například v situaci, kdy máte stránku Produkty s efektem přechodu a chcete, aby návštěvníci webu mohli kliknout pouze na kategorie produktů a nikoli na hlavní popisek Produkty.

Práce s widgety Nabídka

Práce s widgety Nabídka
V tomto videu moderovaném Brianem Woodem se dozvíte, jak na stránku vložit widget Nabídka.
Adobe Press - Peachpit

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