Použití panelů se záložkami a skládaček v aplikaci Adobe Muse

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.

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.

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.

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.

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.

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
  

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 %.

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.

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.

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
  

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.

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í.

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

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.

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ý.

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.

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.

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.

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.

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.

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 %
  

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.

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

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

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ě.

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

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).

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.

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.

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.

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í.

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á.

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

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í.

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.)

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.

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.

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.

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.

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.

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“.

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

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.

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

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

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.

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í.

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.

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í.

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

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

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.

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í.

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.

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.

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.

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).

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.

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.

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

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.

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

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.