Naučte se pracovat s textem v aplikaci Adobe Muse. Pomocí panelu Text můžete upravit vzhled textu, přidat odsazení, nastavit hodnoty odsazení atd.

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ři navrhování webu v aplikaci Adobe Muse můžete přidávat text následujícími způsoby:

  • Přidáte textové pole a napíšete obsah dovnitř tohoto textového pole.
  • Uložíte text do textového souboru a importujete tento soubor do stránky aplikace Adobe Muse.
  • Použijete aplikaci (například InDesign) k rozvržení textu. Zkopírujete tento předem naformátovaný text do schránky a vložíte jej do aplikace Adobe Muse.

V responzivním rozvržení můžete také text naformátovat podle zařízení, ve kterém si budou uživatelé váš web prohlížet. Text pro smartphony můžete například udělat větší a s větším odsazením než text pro stolní počítače. Návrh responzivního webu aplikace Adobe Muse také umožňuje naformátovat text pro každou zarážku. Pro každou zarážku můžete změnit styl, barvu, proklad, odsazení a velikost textu. Další informace o formátování textu při vytváření webu pro různá zařízení v jednom souboru naleznete v tématu Formátování textu v návrhu responzivního webu.

Vytváření a úpravy stylů textových rámečků

Do nabídek přidáte položky tak, že zkopírujete text nabídky z externích textových souborů a vložíte jej do textových rámečků. K textu můžete také přidat styl vytvořením a použitím stylů odstavce. Postupujte takto:

  1. Při úpravách stránky v zobrazení návrhu můžete pomocí nástroje Text vytvořit textový rámeček. Pokud chcete zkopírovat text z jiného zdrojového souboru, zkopírujte text a v aplikaci Adobe Muse klikněte pomocí nástroje Text do textového rámečku. Vložte zkopírovaný textový obsah do textového rámečku.

  2. Pomocí nástroje Text vyberte libovolný řádek textu.

  3. Na panelu Text použijte některé z následujících nastavení pro formátování textu:

    • Písmo: Droid Serif Bold (nebo jakékoli jiné písmo serif)
    • Velikost písma: 14 bodů
    • Styl: BoldFont
    • Barva: #A6342A (červená)
    • Zarovnání: Vlevo
    • Proklad: 120 %
  4. Pomocí následujících voleb formátovaní textu můžete text dále formátovat:

    • Horní index
    • Dolní index
    • Velká písmena
    • Malá písmena
  5. Při vybraném textu klikněte na tlačítko Nový styl v dolní části panelu Odstavcové styly (Okno > Odstavcové styly). Dvakrát klikněte na nový styl odstavce a pojmenujte jej: jídlo-záhlaví.

    Tím usnadníte použití stejného formátování na jiné záhlaví textu v nabídkách.

  6. Vyberte další položku snídaně pomocí nástroje Text: Croissants $3

  7. Kliknutím na styl odstavce s názvem jídlo-záhlaví použijte stejné formátování na druhou položku snídaně.

  8. Zopakováním kroků 7 a 8 vyberte a použijte styl odstavce jídlo-záhlaví na každou položku snídaně v textovém rámečku (všechny řádky zahrnují znak dolaru).

  9. Začněte od začátku a pomocí nástroje Text vyberte popis první položky snídaně: mandarin oranges, red delicious apples, mixed berry cup.

  10. Kliknutím na styl odstavce Tělo uvedený na panelu Styly odstavců použijte formátování na první řádek textu.

  11. Po jednom vybírejte všechny zbývající popisy položek snídaně a použijte u nich styl odstavce Tělo.

fig_66_building
Stylové formátování nabídky pomocí stylů odstavce

Může být užitečné navštívit aktivní verzi ukázkového webu a použít jeho návrh jako referenci.

Další informace o práci s textem najdete v článku s názvem Typografie v aplikaci Adobe Muse.

Použití vestavěného nástroje pro kontrolu pravopisu

Aplikace Adobe Muse obsahuje nástroj pro kontrolu pravopisu, který usnadňuje vyhledávání a opravy typografických chyb v textových rámečcích. Nástroj pro kontrolu pravopisu je vždy zapnutý. Zobrazí červené podtržení u všech slov, které nenajde ve slovníku.

fig_67_building
Slova s nesprávným pravopisem jsou červeně podtržena.

fig_68_building

Pokud je jedno z navrhovaných slov správné, vyberte navrhované slovo, které chcete použít, stisknutím šipky dolů nebo pomocí myši a pak je použijte stisknutím klávesy Return/Enter. Pokud chybně vyberete nesprávné slovo, jednoduše vraťte změnu (Úpravy > Zpět) a pak zvolte jiné navrhované slovo nebo je upravte pomocí nástroje Text.

Pokud je označené slovo použité pouze jedenkrát (například jméno osoby nebo místa a víte, že je napsáno správně), není potřeba je opravovat. Červené podtržení zobrazené v pohledu návrhu se nezobrazí při zobrazení náhledu, publikování nebo exportování webu.

Při práci s běžně používanými slovy, například názvy nebo adresami firem, můžete přidat tato slova do slovníku nástroje pro kontrolu pravopisu, takže se již nebudou zobrazovat jako chyby.

Pomocí nástroje Text klikněte pravým tlačítkem na slovo, které chcete přidat do slovníku, a pak ze zobrazené kontextové nabídky vyberte volbu Přidat do slovníku.

Požadovaný jazyk (který poté nastaví jazyk nástroje pro kontrolu pravopisu a slovníku) můžete nastavit pro celý web a pro jednotlivé textové rámečky.

Chcete-li nastavit slovník nástroje pro kontrolu pravopisu pro celý web, klikněte na Soubor > Vlastnosti. Klikněte na kartu Text, vyberte požadovaný jazyk v nabídce Jazyk a pak klikněte na tlačítko OK.

fig_69_building
Nastavte jazyk pro celý web v dialogovém okně Vlastnosti.

Někdy webové projekty vyžadují zadání textu ve více jazycích. V takovém případě můžete nastavit výchozí jazyk (používaný nejčastěji) ve vlastnostech webu a pak nastavit jazyk nástroje pro kontrolu pravopisu pro konkrétní textové rámečky obsahující text v jiných jazycích.

Chcete-li nastavit slovník nástroje pro kontrolu pravopisu pro textový rámeček, vyberte textový rámeček pomocí nástroje Výběr. Klikněte pravým tlačítkem myši a v zobrazené kontextové nabídce klikněte na položky Jazyk > (zvolte vybraný jazyk).

fig_70_building
Nastavte jazyk pro vybraný textový rámeček v kontextové nabídce.

Dále aktualizujete vzhled textového rámečku. Podobně jako u obdélníků a rámečků obrazů můžete nastavit styl textových rámečků pomocí tahu, výplně a obrazu na pozadí.

Aktualizace vzhledu textových rámečků

V této části aktualizujete atributy textového rámečku, aby byl zvýrazněný v grafice na pozadí stránky.

  1. Pomocí nástroje Výběr vyberte textový rámeček obsahující nabídku snídaně.

  2. Na ovládacím panelu nastavte šířku tahu na hodnotu 5 a barvu tahu na černou.

  3. Pomocí nabídky Výplň nastavte barvu výplně na barvu, kterou jste pojmenovali krémová-nabídka (nebo zadejte šestnáctkovou hodnotu barvy: č. E9916F). Klikněte na ikonu složky vedle oblasti Obraz a vyhledejte a vyberte složku ukázkových souborů s názvem bg-texture.png. Kliknutím na tlačítko OK zavřete dialogové okno Import. Nastavte nabídku Přizpůsobení na možnost Dlaždicově a pak kliknutím na jakékoli místo na stránce zavřete nabídku Výplň.

  4. V případě potřeby pomocí nástroje Výběr přetáhněte úchyty textového rámečku tak, aby odpovídal textu. Rozměry nabídky snídaně na aktivním ukázkovém webu jsou přibližně 800 pixelů na šířku a 440 pixelů na výšku.

    Dlaždicový obraz na pozadí s krémovou barvou výplně přidá textovému rámečku pergamenový efekt a tmavý tah jej zvýrazní.

    Nyní přidáte dlaždici do horní části nabídky snídaně, aby ji návštěvníci rozpoznali.

  5. Pomocí nástroje Text vytvořte textový rámeček přímo pod nabídkou Breakfast tak, aby byl zarovnán k levému hornímu okraji.

  6. Zadejte slovo: Breakfast.

  7. Na panelu Text vyberte následující nastavení pro formátování textu:

    • Webové písmo: Kaushan Script (nebo jakékoli písmo script, které vyberete)
    • Velikost písma: 32Color: #70909D (V části 3 jste tuto barvu nazvali modrá-nabídka)
    • Proklad: 120 %
    • Zarovnání: Na střed
  8. Při vybraném textu vytvořte nový styl kliknutím na tlačítko Nový styl v dolní části panelu Odstavcové styly. Dvakrát klikněte na nový styl odstavce a pojmenujte jej: nabídka-popisek.

Popisek nad nabídkou snídaně pomáhá uživatelům v orientaci a znázorňuje, kterou nabídku právě čtou. Po provedení těchto změn vypadá dokončená nabídka podobně jako na následujícím obrázku.

fig_71_building
Nabídka snídaně je upravená a textový obsah je formátovaný.

V další části duplikujete nabídku snídaně a pak aktualizujete textový obsah v duplikovaných textových rámečcích a vytvoříte nabídky pro oběd, večeři, a dezert.

Duplikování textových rámečků

V předchozích částech jste vytvořili textový rámeček nabídky snídaně, naplnili jej textem z externího textového souboru, pomocí stylů odstavce použili konzistentní formátování textu a pak aktualizovali textový rámeček přidáním dlaždicového obrazu pozadí, barvy výplně a tahu. Také jste přidali druhý textový rámeček nad textový rámeček nabídky, a vytvořili záhlaví, které identifikuje nabídku snídaně. Další krok zahrnuje duplikování této sady elementů třikrát, abyste vytvořili celkem čtyři nabídky.

  1. Pomocí nástroje Výběr vyberte textový rámeček se slovem Breakfast a textový rámeček obsahující nabídku snídaně.

  2. Stiskněte a podržte klávesu Option (Mac) nebo Alt (Windows) a pak přetáhněte sadu těchto dvou textových rámečků dolů na stránku, čímž vytvoříte duplicitní kopii. Přetáhnete kopii dolů a zarovnejte ji svisle s originálem (automatická vodítka, která se dočasně zobrazí, označují, kdy jsou strany a střed zarovnány). Duplicitní sada textových rámečků by měla být přibližně 430 pixelů pod původní sadou.

    fig_72_building
    Přetáhněte duplikát nabídky snídaně dolů na stránku.

  3. Pomocí nástroje Text vyberte popisek duplikovaného textového políčka. Nahraďte slovo Breakfast slovem Lunch.

  4. 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-food-lunch.txt. Dvojitým kliknutím otevřete tento soubor v textovém editoru. Zkopírujte první řádek textu: The JR $9.

  5. Vraťte se do aplikace Adobe Muse. Pomocí nástroje Text klikněte do textového rámečku nabídky oběda. Vložte zkopírovaný textový obsah do textového rámečku, nahraďte existující první uvedenou položku jídel: Croissants $3.

  6. Zopakováním kroků 4 a 5 zkopírujte jednotlivé řádky se znaky dolaru ze souboru text-food-lunch.txt a nahraďte položky v nabídce oběda.

  7. Pokračujte ve vkládání obsahu do nabídky obsahu zkopírováním jednotlivých popisů v souboru text-food-lunch.txt a vložením popisů jednoho za druhým nad existující popisy v duplikované nabídce oběda. Tento postup zajistí, že styly použité u textového obsahu zůstanou zachovány.

  8. Zopakováním kroků 1 až 7 vyberte dva textové rámečky oběda, duplikujte je, přetáhněte je do vzdálenosti přibližně 430 pixelů pod existující nabídku oběda, přejmenujte popisek na Dinner a pak zkopírujte položky v souboru text-food-lunch.txt do nabídky večeře.

  9. Znovu zopakujte krok 8. Tentokrát přejmenujte duplikovaný popisek na: Dessert. Zkopírováním řádků textu ze souboru text-food-lunch.txt dokončete nabídku dezertů.

  10. Pomocí nástroje výběru přesuňte jednotlivé textové rámečky podle potřeby tak, aby byly všechny čtyři textové rámečky zarovnány svisle s přibližně 120 pixely mezi jednotlivými oblastmi.

    fig_73_building
    Zarovnejte všechny čtyři nabídky (snídaně, oběd, večeře a dezert) svisle na stránce s jídly.

Asi jste si všimli, že při přetahování jednotlivých duplicitních kopií směrem dolů se oblast zápatí definovaná v Části 1 automaticky posune, aby vytvořila více prostoru ve svislém směru na stránce. Proto je stránka s jídly delší na výšku než ostatní stránky na tomto ukázkovém webu.

Nad jednotlivé nabídky musíte přidat kotvy pro vytvoření navigačního systému, který návštěvníkům umožní rychle přejít na jednotlivé nabídky. Protože je stránka s jídly delší, bude se obsah posunovat svisle, aby se zobrazila odpovídající nabídka, na základě položky nabídky, na kterou návštěvník klikne. Zjistíte také , jak pracovat s nabídkou Odkazy a vytvořit různé typy odkazů – včetně odkazů na stažení, které návštěvníkům umožní stáhnout soubor PDF.

Vložení symbolů a speciálních znaků

Panel Glyfy umožňuje vkládat symboly, například © nebo speciální znaky, například Beta (ᵝ), které nejsou k dispozici na standardní klávesnici. Z panelu Glyfy můžete vkládat také znaky Unicode.

Typy symbolů a znaků, které můžete vložit, závisí na vybraném písmu. Některá písma mohou například obsahovat mezinárodní znaky (Ç, ë) a mezinárodní finanční symboly (£, ¥). Vestavěné písmo Symbol obsahuje šipky, odrážky a vědecké symboly.

Znaky můžete pomocí panelu Glyfy vkládat následujícím způsobem:

  1. Pokud jste tak ještě neučinili, nakreslete na webovou stránku textový rámeček, do kterého chcete vložit znak.

  2. Příkazem nabídky Okno > Glyfy otevřete panel Glyfy.

  3. Pomocí rozbalovací nabídky vyberte kategorii znaku, který chcete vložit.

  4. Panel Glyfy zobrazuje všechny znaky vybrané kategorie. Klikněte na znak, který chcete vložit.

Úprava vzhledu textových rámečků

Ať už na text použijete písma webová, webová bezpečná nebo systémová, můžete daný textový obsah vždy upravit při práci v zobrazení náhledu. Stejně tak můžete aktualizovat vzhled samotného textového rámečku a změnit vzhled bloku textu.

Textové rámečky si můžete představit jako kontejnery, které obklopují každý úsek textu. Existuje řada způsobů, jimiž můžete ovlivnit způsob jejich zobrazení na aktivním webu.

Pokud chcete textové rámečky naformátovat a přiřadit jim určitý styl, vyberte daný textový rámeček pomocí nástroje text a pak použijte změny, které mají vliv na vzhled textového obsahu.

Poznámka: Pokud text vyberete pomocí nástroje text, můžete textu přiřadit určitý styl nastavením voleb formátování na panelu Text nebo Řídící.

Tažením za táhla můžete textový rámeček roztahovat a zase zmenšovat, a tím měnit jeho velikost. Můžete také změnit pozici celého textového rámečku a přetáhnout ho kamkoli na stránku. Pokud změníte velikost textového rámečku, zobrazí se popisek nástroje s informacemi o rozměrech.

fig_15_type
Tažením za táhla kolem textového rámečku měníte jeho velikost

Textový rámeček můžete také natočit. Pamatujte ale na to, že pokud textový rámeček natočíte (bez ohledu na použitá písma), bude text importován jako soubor obrazu. Z tohoto důvodu takto postupujte jen zřídka a natočený text doplňte o titulek.

Chcete-li vzhled kontejneru s textovým rámečkem aktualizovat, můžete použít stejné volby formátování jako při úpravách obdélníků. Můžete nastavit barvu výplně a dokonce i přidat obraz pozadí. Také můžete nastavit tah a používat stejná nastavení k určení šířky, barvy a zarovnání tahu. Pomocí nabídek Rohy a Efekty na panelu Řídící můžete nastavit poloměr rohů textového rámečku nebo použít vržené stíny, úkosy nebo záře.

Pokud chcete do textového rámečku přidat průhlednost, změňte pomocí posuvníku Krytí hodnotu krytí.

Pomocí nabídky Hypertextový odkaz a pole Hypertextový odkaz můžete do textu přidat titulky a zároveň přidávat odkazy nebo definovat, zda se odkaz otevře v novém okně prohlížeče.

Kontrola zarovnání textu a obtékání textu kolem obrázku

Textové rámečky se skvěle hodí na vytváření obsahu stránek. Jak jste se dozvěděli v předchozí části, textové rámečky mohou kromě textového obsahu obsahovat i grafické prvky a efekty.

V této části se naučíme, jak nastavením odsazení získáte více místa, a tím můžete v rámci textového rámečku nastavovat příslušný textový obsah. Také se naučíme vytvářet textové sloupce obtékající obrazy ve stylu rozvržení z časopisů.

Přidání odsazení do textu

Ve výchozím nastavení platí, že text, který napíšete, umístíte nebo vložíte do textového rámečku, se zarovná doleva. Pokud se na příslušná nastavení podíváte na panel Rozestup, mají všechna hodnotu 0.

PaddingZero
Výchozí odsazení použitá na text v textovém rámečku

Pokud chcete do rámečku přidat vlevo, vpravo, nahoře nebo dole více místa, zadejte požadovanou hodnotu (v pixelech) nebo vedle jednotlivých polí zvyšujte nebo snižujte číselnou hodnotu kliknutím na šipku nahoru nebo dolů.

Odsazení textu a nastavení hodnot prokladu a prostrkání

Formátování textu můžete v aplikaci Adobe Muse ovládat stejně, jako lze aktualizovat textový obsah v programech pro práci s textem nebo řadě dalších nástrojů pro úpravu obrazů. Panel Text obsahuje řadu dalších nastavení, přičemž některá z těchto nastavení se nezobrazí, když na panelu Řídící vyberete text.

Pokud chcete v odstavci odsadit první řádek textu, postupujte takto:

  1. Pomocí nástroje Text vyberte určitý text.

  2. Změňte v nástroji Text hodnotu Odsazení na požadovanou hodnotu v pixelech.

TypeToolIndent
Změňte hodnotu zadáním čísla do příslušného pole nebo kliknutím na šipku nahoru nebo dolů

Velikost mezery mezi jednotlivými znaky můžete definovat pomocí volby Mezery znaků na panelu Text. Tato možnost se zvláště hodí pro textové efekty. Zajistí na webu lepší čitelnost zdobných nebo stylizovaných písem.

Mezery znaků můžete na vybraný text použít tak, že zadáte do pole Mezery znaků příslušné číslo v pixelech. Další možností je klikat na šipku nahoru nebo dolů a hodnotu zvyšovat nebo snižovat, dokud nedosáhnete požadovaného účinku.

TypeToolAddSpace
Změňte hodnotu zadáním čísla do pole Mezery znaků nebo kliknutím na šipku nahoru nebo dolů

Další praktickou funkcí, kterou můžete k nastavení formátu textu odstavců použít, je proklad. Pomocí prokladu nastavujete mezeru mezi řádky textu. Funkce Proklad je k dispozici na panelu Řídící i na panelu Text.

TypeToolLeading
Zvětšení nebo zmenšení mezery mezi řádky aktualizací hodnoty Proklad

Na panelu Text jsou k dispozici další čtyři ovládací prvky pro typografii:

Levý okraj a Pravý okraj

Jak by se dalo očekávat, tyto prvky nastavují mezeru mezi znaky na obou stranách textového rámečku a okrajem textového rámečku. Tato nastavení se velice podobají nastavení hodnot Odsazení na panelu Rozestupy. Liší se ale v tom, že když chcete upravit hodnoty odsazení, nevybíráte pomocí nástroje text textový obsah, ale pomocí nástroje pro výběr textový rámeček.

Mezera za a Mezera před

Tato nastavení slouží k nastavení velikosti mezery (udávané v pixelech), která se zobrazuje před tvrdým koncem odstavce a po něm. Pomocí těchto nastavení můžete mezi několika odstavci v jednom textovém rámečku zobrazit více nebo méně prázdného místa.

Používání všech těchto nastavení na panelu Text si určitě vyzkoušejte. Naučíte se tak nastavovat zobrazení textového obsahu na vámi navrhovaných stránkách.

Umístění textu z textového souboru na stránku

Zdrojové soubory obsahující tělo textu pro tento ukázkový projekt se nacházejí ve složce Kevins_Koffee_Kart. Tento text je uložen v souborech TXT. V aplikaci Adobe Muse můžete přidat text na stránku přidáním celého textového souboru. Není potřeba otevírat textové soubory v textovém editoru, kopírovat řádky textu a vkládat je na stránky.

  1. Umístění můžete provést pomocí příkazu nabídky Soubor > Umístit nebo pomocí klávesové zkratky pro příkaz Umístit Command+D (Mac) nebo Control+D (Windows®). Jedná se o stejný proces jako při umisťování souborů obrazů do stránky.

  2. V zobrazeném dialogu Importovat přejděte do složky Kevins_Koffee_Kart a vyberte textový soubor pojmenovaný TextThreeSpeed.txt.

  3. Kliknutím do světle šedého většího kontejneru ve widgetu Skládačka, pod záhlavím TASTING NOTES, umístěte obsah textového souboru do horního panelu Skládačka.

  4. Po umístění nového textového rámečku jej pomocí nástroje pro výběr přemístěte pod záhlaví TASTING NOTES, a přetažením táhel nahoře, dole a na stranách textového rámečku upravte velikost světle šedého kontejneru tak, aby odpovídal jak záhlaví, tak textu pod ním. Při přetahování právě umístěného textu poznáte, že je tento text zarovnaný k levé straně textu záhlaví podle toho, že se v okamžiku zarovnání těchto dvou položek dočasně zobrazí modré vodítko. Všimněte si, že kromě změny velikosti umístěného textu přetažením táhel můžete také kliknout na šedý kontejner a přetažením spodních táhel zvětšit výšku tohoto kontejneru.

  5. Když je vybraný světle šedý kontejner, můžete kliknutím na výběr barvy pozadí nastavit barvu pozadí panelu na Bez výplně.

    fig_40
    Přidáním textu do horní šedé karty a do odpovídajícího většího kontejneru vyplňte tento kontejner obsahem.

Práce se synchronizovaným textem

Informace o práci se synchronizovaným textem najdete v tématu Práce se synchronizovaným textem.

Práce s textem v responzivním rozvržení

Informace o formátování textu v responzivním rozvržení naleznete v tématu Formátování textu v návrhu responzivního webu.

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