Naučte se zobrazit a nastavit styl clusteru souvisejícího obsahu pomocí panelu se záložkami a skládačky v aplikaci Adobe Muse.

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.

Přidání widgetu Panel se záložkami

  1. Otevřete panel Knihovna widgetů (Okno > Knihovna widgetů). Otevřete nabídku Panely a vyberte widget Panel se záložkami. Widget přetáhněte z Knihovny widgetů na panel Návrh.

    Widget Panel se záložkami zobrazí po přetažení na stránku výchozí formátování.
    Widget Panel se záložkami zobrazí po přetažení na stránku výchozí formátování.

  2. Třikrát klikněte na horní záložku vpravo. Prvním kliknutím vyberete celý Panel se záložkami, druhým kliknutím vyberete kontejner záložky a třetím kliknutím vyberete záložku vpravo.

    Indikátor výběru zobrazí informace o tom, který podřízený element widgetu je aktuálně vybrán. Stisknutím klávesy Delete (Mac) nebo Backspace (Windows) odstraňte třetí záložku. Po provedení této změny zůstanou zobrazeny pouze dvě záložky. Klikněte kamkoli jinam na stránku.

  3. Dalším kliknutím na widget vyberte celý Panel se záložkami. Přetažením úchytů nastavte velikost celého widgetu na hodnotu 840 pro šířku a 645 pro výšku. Při přetahování úchytů můžete sledovat hodnoty, které se během přetahování zobrazí.

    Hodnoty v polích W (šířka) a H (výška) můžete zkontrolovat také na panelu Transformace.

    V polích šířky a výšky zkontrolujte rozměry změněného widgetu.
    V polích šířky a výšky zkontrolujte rozměry změněného widgetu.

  4. Pomocí nástroje Výběr umístěte Panel se záložkami na stránku svisle na střed k hornímu okraji.

  5. Kliknutím na pozici rozhraní pro přichycení nahoře uprostřed připněte widget Panel se záložkami na místo. Další informace o připnutí objektů, jež se nemají posouvat, najdete na tomto odkazu.

  6. Ve vybraném widgetu Panel se záložkami kliknutím na levou záložku vyberte Kontejner záložky (element obsahující obě horní záložky). Pomocí nástroje Výběr přetáhněte centrální úchyt směrem dolů, aby výška byla přibližně 98 pixelů.

    Na panelu Rozestup nastavte následující hodnoty zobrazené na následujícím obrázku:

    • Vlevo: 220
    • Vpravo: 220
    • Dole: 2
    • Výška mezery mezi sloupci: 10
    Nastavte hodnoty mezer pro kontejner záložky na panelu Rozestup.
    Nastavte hodnoty mezer pro kontejner záložky na panelu Rozestup.

  7. Po provedení těchto změn přetáhněte pomocí nástroje Rozestup celý widget Panel se záložkami zcela k hornímu okraji stránky, aby byl Panel se záložkami těsně u dolního okraje obdélníku záhlaví bez svislé mezery mezi těmito dvěma objekty.

    V případě potřeby můžete zobrazení přiblížit, abyste lépe viděli, jak jsou tyto elementy zarovnány. Po dokončení nastavte zvětšení zpět na 100 %.

Nastavení stylu widgetu Panel se záložkami

Po přidání widgetu Panel se záložkami nyní následující část zahrnuje postup aktualizace stylů pro vytvoření návrhu těchto dvou záložek.

  1. Třikrát klikněte na levou záložku, abyste vybrali levou záložku. Otevřete panel Stavy a vyberte stav Normální. Pomocí nabídky Výplň nastavte barvu výplně. Nastavte šířku tahu na 0.

  2. Vyberte stav Myš nad na panelu Stavy. Nastavte barvu výplně stavu záložky Přechod na 571E00. Všimněte si, že když nastavíte barvu výplně pro stav Myš nad, stav Kliknutí myší se také automaticky aktualizuje.

    Vyberte stav Aktivní a také použijte stejnou barvu výplně pro záložku ve stavu Aktivní. Nyní je Normální stav vyplněn barvou výplně zvolenou v předchozím kroku a zbývající tři stavy jsou vyplněny barvou 571E00.

  3. Dalším kliknutím na záložku vlevo vyberte možnost Popis. Indikátor výběru zobrazí po výběru slovo Popis. Na panelu Stavy vyberte stav Normální a pak pomocí panelu Text nastavte následující atributy zobrazené na níže uvedeném obrázku:

    • Webové písmo: Kaushan Script (nebo jakékoli písmo script, které vyberete)
    • Velikost pásma: 26Color: č. 70909D (tuto barvu můžete pojmenovat. Například blue-menu
    • Proklad: 120 %
    • Zarovnání: Na střed
    Styl textu popisu nastavíte aktualizací hodnot v panelu Text.
    Styl textu popisu nastavíte aktualizací hodnot v panelu Text.

  4. Dokud je Popis stále vybrán, klikněte na tlačítko Nový styl v dolní části panelu Odstavcové styly. Chcete-li toto formátování jedním kliknutím znovu použít nový styl odstavců přejmenujte. Například head-tabs.

  5. Když se podíváte na panel Stavy, vidíte, že formátování použité pro Popis ve stavu Normální bylo použito také pro stavy Myš nad a Kliknutí myší. Vyberte stav Aktivní a znovu klikněte na styl odstavce záhlaví-záložky, abyste použili formátování pro stav Aktivní. Nyní je u všech stavů na obou kartách nastaven styl.

    Znovu vyberte stav Normální.

  6. Pomocí nástroje Text zvolte text popisy všech karet a zadejte jejich odpovídající názvy.

  7. Pokud vyberete levou záložku a podíváte se na panel Stavy, uvidíte, že konečné formátování bylo použito u každé záložky a popisu. Klikněte na pravou záložku a všimněte si, že stavy vypadají stejně s výjimkou textového obsahu na jednotlivých záložkách.

    Zkontrolujte formátování jednotlivých záložek na panelu Stavy aplikace Adobe Muse.
    Zkontrolujte formátování jednotlivých záložek na panelu Stavy.

Přidání textového rámečku do oblasti obsahu widgetu Panel se záložkami

  1. Klikněte sem a tam mezi dvěma různými záložkami a zkontrolujte, zda mají různé popisy. Zástupný text obou záložek je jiný, proto lze vidět, že je jeden kontejner znázorněn a druhý skrytý.

  2. Klikněte na pravou záložku widgetu. Po výběru pravé záložky se pod záložkou zobrazí odpovídající oblast obsahu. Toto je stejné chování, ke kterému dochází v pohledu návrhu při úpravách stránky a na aktivním webu. Proto jsou Panely se záložkami velmi užitečné, neboť můžete efektivně zobrazit mnohem více obsahu na jedné stránce.

  3. Vyberte oblast obsahu pro své záložky. Indikátor výběru zobrazí po výběru slova Oblast obsahu. Vyberte soubor zástupného obrázku a stisknutím klávesy Delete (Mac) nebo Backspace (Windows) jej odstraňte.

  4. Pomocí nástroje Text vyberte záhlaví existujícího zástupného textu. Vyberte tučný text záhlaví, Mauris sit amet, a odstraňte jej.

  5. Dočasně přepněte z aplikace Adobe Muse na plochu. Otevřete složku s ukázkovými soubory a vyhledejte soubor s názvem text-about-ourstory.txt. Dvojitým kliknutím otevřete tento soubor v textovém editoru. Zkopírujte první část stránky až do řádku: ... vytvořeného na základě mnoha let pečení pro přátele a rodinu.

  6. Vraťte se do aplikace Muse. Pomocí nástroje Text vyberte existující zástupný text. Vložte zkopírovaný textový obsah do textového rámečku. Nechte jeden volný řádek a vraťte se do horní části textového rámečku.

  7. Ve vybraném textovém rámečku zvolte pomocí panelu Text nastavení pro formátování textu. Vybrat můžete například následující nastavení:

    • Písmo: Droid Serif
    • Velikost písma: 14
    • Barva: č. 222222
    • Zarovnání: Vlevo
    • Proklad: 120 %
  8. Dokud je text stále vybrán, klikněte na tlačítko Nový styl v dolní části panelu Styly odstavců. Dvakrát klikněte na nový styl odstavce a přejmenujte jej. Například body. Tím usnadníte použití stejného formátování na jiný textový obsah.

  9. Na panelu Vzorky barev dvakrát klikněte na hodnotu barvy č. 222222 a přejmenujte ji. Například katieblack.

  10. Na ovládacím panelu nastavte barvu tahu textového pole na hodnotu č. 222222 (katieblack) a šířku tahu na 5 pixelů.

  11. Pomocí nabídky Výplň nastavte barvu výplně textového pole na světle béžovou (č. F8F3E2). Klikněte na složku vedle oblasti Obrázek a vyhledejte a vyberte složku ukázkových souborů s názvem bg-texture.png. V nabídce Přizpůsobení nastavte hodnotu: Dlaždicově.

  12. Na panelu Rozestup nastavte Levý a Pravý rozestup. Můžete například nastavit Levý rozestup na hodnotu 24 a Pravý na 15.

    Nastavte hodnoty rozestupů tak, abyste vytvořili viditelnou mezeru okolo kopie vloženého textu.
    Nastavte hodnoty rozestupů tak, abyste vytvořili viditelnou mezeru okolo kopie vloženého textu.

  13. Dále přidáte obsah do jednotlivých kontejnerů odpovídajících jednotlivým záložkám.

    Pomocí nástroje Výběr změňte velikost textového pole. Přetáhněte je na levou stranu kontejneru a pak pomocí úchytů zvětšete jeho šířku na přibližně polovinu dostupného místa v oblasti obsahu (asi 390 pixelů na šířku na 381 pixelů na výšku).

Duplikování textových rámečků na Panelu se záložkami

Dále duplikujte existující textový rámeček, abyste vytvořili druhý textový rámeček, který vyplní pravou stranu oblasti obsahu.

  1. Pomocí nástroje Výběr tento textový rámeček vyberte. Při přetahování duplikované kopie textového rámečku na pravou stranu oblasti obsahu stiskněte a podržte klávesu Option (Mac) nebo Alt (Windows) – viz následující obrázek.

    Pomocí zobrazených vodítek zarovnání zajistěte, aby byl pravý textový rámeček vodorovně zarovnán s levým textovým rámečkem.

    Zkopírováním existujícího textového rámečku vytvořte druhý sloupec na pravé straně.
    Zkopírováním existujícího textového rámečku vytvořte druhý sloupec na pravé straně.

  2. Dočasně přepněte z aplikace Muse do editovacího programu, který obsahuje obsah pro Panel se záložkami. Zkopírujte obsah, který chcete vložit na duplikovanou záložku.

  3. Přepněte zpět do aplikace Muse. Odstraňte veškerý stávající text v pravém duplikovaném textovém rámečku. Vložte nový zkopírovaný textový obsah ze schránky.

  4. V případě potřeby pomocí nástroje Výběr umístěte oba textové rámečky tak, aby byly zarovnány a umístěny na střed v rámci oblasti obsahu v požadovaném umístění.

  5. Při vybraném textovém rámečku vyberte jedním stisknutím klávesy Escape oblast obsahu pro duplikovanou záložku. Nastavte šířku tahu na hodnotu 0 a barvu výplně na hodnotu Žádná.

Kopírování textových rámečků je téměř hotovo. Poslední část zahrnuje přidání malého obrázku, který bude obtékat levý textový rámeček.

Práce s panely skládačka

Widget Panel skládačka se používá, když chcete umístit velké množství obsahu na menší plochu obrazovky. Sbalování a rozbalování tohoto widgetu umožňuje návštěvníkům kliknout na panel popisku a zobrazit si tak oblast s odpovídajícím obsahem. Widgety Panel skládačka se používají na obrazovkách stolních počítačů a často také k zobrazování obsahu v rozvrženích pro mobilní zařízení.

V této části se naučíte přidávat obsah do jednotlivých stránek webu. Budete pracovat s dalším typem widgetu, pojmenovaným Skládačka. Widgety Panel (jak widget Skládačka, tak widget Panel se záložkami) umožňují zobrazit více obsahu na stránce na menší ploše obrazovky.

  1. Otevřete svůj projekt v zobrazení Návrh a začněte s jeho úpravami.

  2. Zvolte Soubor > Umístit. V dialogovém okně Import přejděte ke složce s datovými zdroji a vyberte potřebný obrazový soubor. Klikněte na tlačítko Vybrat a poté jedním kliknutím v horní části stránky umístěte tento obraz v jeho původní velikosti na stránku jako text záhlaví. Widget Skládačka přidáte pod toto záhlaví.

Přidání skládačky na webovou stránku

  1. Otevřete knihovnu widgetů. (Otevřete ji pomocí nabídky Okno > Knihovna widgetů. Nebo pokud je již otevřená, tak kliknutím na horní kartu knihovnu widgetů v rámci ukotvených panelů aktivujte.)

  2. Kliknutím na položku Panely rozbalte seznam widgetů Panel. Vyberte widget Skládačka. Přetáhněte na stránku widget Skládačka a umístěte jej do levé horní části oblasti s obsahem stránky.

    Přetáhněte a umístěte na stránku aplikace Adobe Muse widget Skládačka.
    Přetáhněte a umístěte na stránku widget Skládačka.

  3. Pomocí nástroje pro výběr vyberte různé komponenty widgetu. Když vyberete celý widget, zobrazí indikátor výběru v levém horním rohu ovládacího panelu slovo „Widget“. Znovu klikněte a všimněte si, jak se indikátor výběru změní, aby vám oznámil, že jste vybrali kontejner nebo textový rámeček. Indikátor výběru vám říká, která část widgetu je aktuálně vybraná.

    Chcete-li zrušit výběr daného prvku widgetu, můžete se buď stisknutím klávesy Esc vrátit o jednu úroveň výběru zpět nebo se opakovaným stisknutím této klávesy vracet zpět z vnořených prvků. Případně můžete kliknout mimo widget na nějakou jinou část stránky.

    Widget Skládačka obsahuje ve výchozím nastavení dva panely. Horní panel zobrazuje zástupný název karty Lorem 1 a spodní panel zobrazuje zástupný název karty Ipsum 2.

  4. Kliknutím na kulatou ikonu s modrou šipkou otevřete dialog Volby widgetu. Zkontrolujte, jestli je zaškrtnutá volba Upravit společně. Tato volba zaručuje, že všechny změny, které provedete v názvu jedné karty ve skládačce, se projeví ve všech kartách.

    Zkontrolujte, jestli je na panelu Volby widgetů skládaček zaškrtnutá možnost Upravit společně.
    Zkontrolujte, jestli je na panelu Volba widgetů skládaček zaškrtnutá možnost Upravit společně.

  5. Pomocí nástroje pro výběr jedním kliknutím vyberte widget, a poté přetažením pravého úchytu vpravo zvětšete šířku widgetu, aby zabíral dva sloupce tak, jak vidíte na následujícím obrázku.

    Přetažením rukojeti widgetu rozbalte widget na dva sloupce.
    Přetažením pravého úchytu vybraného widgetu jej rozšiřte tak, aby zabíral dva sloupce.

  6. Kliknutím na znak plus (+) ve spodní části widgetu, pod nápisem Ipsum 2, přidejte třetí panel. Na třetím panelu je uveden zástupný název karty Ipsum 3.

V následující části se naučíte vyplnit panel widgetu Skládačka přidáním textového obsahu. Ale nejprve aktualizujte název horní karty zobrazený nad prvním panelem ve widgetu Skládačka.

Přidání textu na Panel skládačka

  1. Pomocí nástroje pro výběr vyberte textový rámeček horní karty, aktuálně nazvaný Lorem 1. Jedním kliknutím na text „Lorem 1“ vyberte celý widget a rozbalte kontejner odpovídající horní kartě a poté kliknutím do textu „Lorem 1“ vyberte textový rámeček. Když je vybrán textový rámeček, zobrazí se v indikátoru výběru slova „Textový rámeček“.

  2. Dvakrát klikněte na zástupný text „Lorem 1“, abyste jej mohli upravit, a poté zadejte požadovaný text.

  3. Vyberte světle šedý větší kontejner pod první kartou. Pomocí textového nástroje přetažením otevřete textový rámeček ve větším kontejneru.

  4. Do nového textového rámečku zadejte text záhlaví.

Vyplnění horních záložek skládačky obrázky pozadí

  1. Vyberte horní záložku widgetu Skládačka zobrazující záhlaví.

  2. Kliknutím na kulaté tlačítko modré šipky otevřete nabídku Volby. Zrušte zaškrtnutí volby Upravit společně. Kliknutím mimo nabídku Volby ji zavřete.

  3. Dvakrát klikněte na horní kartu, dokud nebude indikátor výběru zobrazovat slova „Textový rámeček“. Když je vybraný textový rámeček horní karty, tak kliknutím na odkaz Výplň na ovládacím panelu otevřete nabídku Výplň. Klikněte na výběr barvy a nahraďte výchozí tmavě šedou barvu výplně pozadí žádnou barvou pozadí.

  4. Kliknutím na ikonu složky v části Obraz otevřete dialog Importovat. Přejděte do složky s datovými zdroji a vyberte obrázek, který chcete přidat.

  5. Otevřete panel Rozestup. Stisknutím a podržením šipky nahoru v části Odsazení: P (Pravé) zvětšete místo před textem tak, aby byl v rámci karty vystředěn na obrázku pozadí.

    Konfigurace rozestupu pro skládačku widgety v aplikaci Adobe Muse
    Na panelu Rozestupy můžete zvětšit odsazení vlevo a vystředit text ve skládačce.

První karta widgetu Skládačka je dokončena.

Po zrušení nastavení Upravit společně při úpravách první záložky se u ostatních záložek změny neprojeví. Styl ostatních záložek je nutné nastavit samostatně na panelu Záložka.

Otáčení widgetů Záložka

Ve výchozím nastavení jsou widgety Panel skládačka nastaveny tak, aby zobrazovaly panely popisů nahoře a oblasti s obsahem dole, a to při svislé orientaci.

Widgety skládaček se ve výchozím nastavení aplikace Adobe Muse zobrazují svisle.
Když přidáte widget Panel skládačka na stránku, zobrazí se svisle.

Chcete-li pomocí widgetu Skládačka vytvořit vodorovně orientovaný posuvník, postupujte následovně:

  1. V pohledu Návrh otevřete knihovnu widgetů a rozbalte část Panely.

  2. V části Panely vyberte volbu Skládačka a přetáhněte ji na stránku.

  3. Pomocí nástroje pro výběr jedním kliknutím vyberte celý widget. Indikátor výběru v levém horním rohu ovládacího panelu zobrazí slovo: Skládačka.

  4. Podržením klávesy Shift v průběhu otáčení omezíte proporce, takže můžete přesouvat widget po krocích 45 stupňů. V průběhu otáčení widgetem se zobrazí popisek nástroje zobrazující aktuální hodnotu otočení.

    Podle potřeby otočte skládačkou o −90° nebo +90°.
    Podle potřeby otočte skládačkou o −90° nebo +90°.

  5. Po otočení widgetu se kliknutím na odkaz Náhled nebo vytvořením náhledu stránky v prohlížeči podívejte, jestli Skládačka stále rozbaluje a sbaluje panely podle očekávání. Kontejnery popisů nastavte tak, aby při kliknutí zobrazily odpovídající oblast obsahu.

    Nyní již zbývá jen vyplnit popisky a kontejnery oblastí obsahu obsahem orientovaným „nahoru“ a nikoli natočeně.

    Pomocí následujícího postupu můžete v oblastech obsahu zobrazit textový obsah. Použijete postup popsaný výše a otočíte textové pole v kontejneru oblasti obsahu.

     

  6. Dvakrát klikněte na výchozí text v oblasti obsahu. Prvním vyberete celý widget Skládačka a druhým vyberete kontejner oblasti obsahu. Když je oblast obsahu vybraná, zvětšete její velikost pomocí nástroje pro výběr a to kliknutím a přetažením jejích táhel pro změnu velikosti.

  7. Když je oblast obsahu stále vybraná, tak dalším kliknutím vyberte textový rámeček nacházející se uvnitř oblasti obsahu. Podržte kurzor poblíž jednoho z rohů textového rámečku, dokud se nezobrazí kurzor natočení. Stiskněte a podržte klávesu Shift a textový rámeček otočte o 90 stupňů stejně jako vnější widget.

    Chcete-li zobrazit text v oblasti obsahu, natočte existující zástupný text.
    Chcete-li zobrazit text v oblasti obsahu, natočte existující zástupný text.

  8. Po natočení textového rámečku jej pomocí nástroje pro výběr přesuňte v rámci oblasti obsahu. Pomocí nástroje Text nahraďte zástupný text skutečným textem, který chcete zobrazit, a poté pomocí voleb formátování textu na ovládacím panelu a v panelu Text upravte styl textu (nebo použijte styly odstavců, chcete-li jeho vzhled aktualizovat).

  9. Vyplňte kontejnery oblastí obsahu obrázky, nakreslenými obdélníky nebo vloženým kódem HTML. Tento obsah již nemusíte otáčet, protože bude automaticky umístěn svisle v natočeném kontejneru.

Aktualizace textu v kontejnerech popisů

Chcete-li aktualizovat text v kontejneru popisku, máte několik možností.

Pokud jsou popisky krátké a chcete, aby zůstaly „natočené“ (například při simulování knih v knihovně), můžete pomocí nástroje Text vybrat stávající zástupný text a napsat požadované popisky (viz následující obrázek).

Úprava textu popisků widgetů skládaček pomocí nástroje Text.
Úprava textu popisků widgetů skládaček pomocí nástroje Text.

Pokud nechcete použít textové popisky, můžete existující zástupný text v kontejnerech popisků jednoduše odstranit a poté pomocí voleb formátování na ovládacím panelu nebo panelu Výplň (společně s panelem Stavy) použít odlišnou barvu v každém popisku (viz následující obrázek). Chcete-li aktualizovat vzhled jednotlivých kontejnerů popisků, otevřete si kliknutím na tlačítko modré šipky nabídku Volby a vypněte volbu Upravit společně.

Pomocí nabídky Výplň a voleb formátování textu vybarvěte kontejnery popisků a odpovídající textový obsah.
Pomocí nabídky Výplň a voleb formátování textu vybarvěte kontejnery popisků a odpovídající textový obsah.

Nebo můžete pomocí programu pro úpravy obrázků vytvořit obrázky, které následně vložíte do panelů popisků. Umístěte obrázky na stránku, vyjměte je, pomocí nástroje Text vyberte text popisku a vložte obrázky do kontejnerů popisků. Obrázky mohou také obsahovat svisle orientovaný text (viz následující obrázek).

Vložte obrázky se svisle orientovaným textem do kontejnerů popisků.
Vložte obrázky se svisle orientovaným textem do kontejnerů popisků.

Přidání odkazů na kotvy v panelech skládaček

Jakýkoli prvek stránky můžete propojit s widgety skládaček přidáním odkazů na kotvu do panelu skládačky. Přečtěte si, jak přidat odkazy na kotvy do widgetů skládaček:

  1. Vyberte widget Skládačka, do kterého chcete přidat odkaz na kotvu. Klikněte na kartu, do které chcete přidat odkaz na kotvu.

  2. Kliknutím na nástroj Kotva načtěte odkaz na kotvu do umísťovacího kurzoru.

    Vyberte nástroj Kotva v panelu Nástroje.
    Vyberte nástroj Kotva v panelu Nástroje.

  3. Umístěte odkaz na kotvu do widgetu skládačky.

    Zobrazí se překryvné okno pro přejmenování kotvy. Zadejte vhodný název kotvy a klikněte na tlačítko OK.

    Umístění odkazu na kotvu do widgetu skládačky
    Umístění odkazu na kotvu do widgetu skládačky

    Nyní můžete propojit tuto kotvu k libovolnému prvku stránky v libovolné stránce webu.

  4. Chcete-li propojit prvek stránky a kotvu, vyberte požadovaný prvek. V rozvíracím seznamu Hypertextové odkazy nahoře zvolte vytvořenou kotvu.

    Ve vašem živém webu se při každém kliknutí na prvek stránky ve stránce zobrazí ta karta skládačky, kde je umístěn odkaz na kotvu.

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