Jak vytvářet hypertextové odkazy pro weby Adobe Muse

V tomto článku se naučíte pracovat s hypertextovými odkazy v aplikaci Adobe Muse. Pomocí hypertextových odkazů můžete odkazovat na externí weby, soubory ke stažení, e-mailové adresy a další. Soubory ke stažení mohou být PDF, DOC, PPT, TXT, multimediální soubory nebo jiné typy souborů, které chcete sdílet s návštěvníky svého webu, ale u kterých není v současnosti podporováno vložení v rozhraní aplikace Muse. Můžete vytvářet odkazy na soubory, které jsou aktuálně načtené ve vašem hostitelském účtu Adobe Muse nebo na soubory hostované ve webech třetích stran.

V této části se naučíte propojit položky nabídky se dvěma prvky oblastí kotev, abyste k ruční nabídce přidali odkazy na kotvy. Postupujte takto:

1. Kliknutím někde na stránce tuto stránku vyberte (indikátor výběru musí zobrazovat slovo Stránka). Poté dvakrát klikněte na položku widgetu nabídky (kontejner widgetu). Prvním kliknutím vyberete celý ruční widget Nabídka a druhým kliknutím vyberete položku nabídky. Indikátor výběru zobrazí slova: Položka nabídky.
2. Kliknutím na nabídku Hypertextové odkazy si zobrazíte kompletní seznam stránek a tagů kotev pro váš web. V části Plocha vyhledejte tu správnou stránku a uvidíte, že vámi vytvořené čtyři tagy kotev jsou uvedeny přímo pod ní. Výběrem vhodného tagu kotvy jej propojíte s položkou nabídky.

3. Opakováním kroku 2 přidáte další odkazy na kotvy.
4. Zvolte Soubor > Vlastnosti webu. Na kartě Rozvržení zkontrolujte, jestli je zaškrtnuté políčko Povolit aktivní stav pro odkazy na kotvy. Tato volba je ve výchozím nastavení zapnutá pro všechny nové weby, ale pokud upravujete starší web, může být nutné toto políčko zaškrtnout.
5. Vyberte příkaz Soubor > Náhled stránky v prohlížeči.

Při klikání na odkazy zobrazující jednotlivé oblasti stránky si všimněte, že se v nabídce navigace zobrazuje odpovídající aktivní stav. Tato vlastnost webu pomáhá návštěvníkům orientovat se v tom, kterou část právě sledují. Ukončete prohlížeč a vraťte se do aplikace Adobe Muse.

Zkuste také posouvat stránkou nahoru a dolů a sledujte, jak kód stránky detekuje umístění jednotlivých tagů kotev a aktualizuje aktivní stav ruční nabídky při průchodu stránky jednotlivými svými částmi. Tato metoda funguje u stránek posouvajících se jak svisle, tak vodorovně.

Poznámka: Aby mohly tagy kotev přeskakovat do odpovídajících oblastí, musí být stránka dostatečně vysoká nebo široká. Pokud jsou oblasti stránky příliš blízko u sebe a veškerý obsah se vejde do okna prohlížeče bez posouvání, nebudou tagy kotev přeskakovat do následujících oblastí.

6. Ukončete prohlížeč a vraťte se do aplikace Adobe Muse.

V následující části se dozvíte, jak lze přidávat odkazy na soubory ke stažení, aby si návštěvníci mohli stahovat formáty souborů PDF, DOC, MP3, MOV, PSD a soubory JPEG ve vysokém rozlišení.

Tip: Pokud na projektu webu spolupracujete s dalšími návrháři, můžete vytvářet odkazy na zdrojové soubory .Muse, aby si je členové týmu mohli stahovat přímo z vašeho webu.

Vytvoření oblastí kotev na webové stránce snadno vizuálně oddělíte různé části na stránce. Přístup ke každé z těchto částí lze snadno získat prostřednictvím odkazů na kotvy, jež mají usnadňovat navigaci na stránce.

V dokončeném návrhu obsahuje webová stránka odkazy na kotvy umožňující návštěvníkům svisle přeskakovat na oblasti zobrazující příslušná menu. Při přidávání tagů kotev si představte, že někam na stránku připevňujete značku. Když návštěvník klikne na odkaz na tuto kotvu, dojde k posunutí delší stránky a k přeskočení do specifické oblasti, ve které se tato značka nachází.

1. Kliknutím na tlačítko Kotva v horní navigační oblasti otevřete nástroj Kotva.

2. Jednou klikněte zcela nahoře na stránce, nad navigací nejvyšší úrovně, v oblasti záhlaví. Pokud chcete, můžete dočasně přesunout obdélník záhlaví stranou. Pokud přesunete obsah záhlaví, nezapomeňte ji poté přesunout zpět.
3. Zobrazí se dialog Přejmenovat kotvu, ve kterém zadejte název kotvy.

4. Opakováním kroků 1 až 3 definujete oblasti kotev a přidáte odkazy na kotvy.

Až v následujícím kroku přidáte ruční widget Nabídka, propojíte tlačítka s jednotlivými tagy kotev a vytvoříte tak navigaci, která umožní návštěvníkům přeskakovat směrem dolů po stránce k jednotlivým menu pokrmů.

1. Při upravování stránky v zobrazení návrhu vytvořte pomocí nástroje Text nový textový rámeček nacházející se poblíž pravého horního rohu textového rámečku menu Snídaně. Zadejte slova: Stáhnout menu
2. Dokud je textový rámeček stále ještě vybraný, přiřaďte mu pomocí panelu Text následující nastavení:
   • Webové písmo: Skript Kaushan (nebo libovolný jiný skript)
   • Velikost písma: 14
   • Barva: #EEE5C4 (v části 3 jste toto políčko barvy přejmenovali na nabídka-krémová)
   • Proklad: 57%
   • Zarovnání: Na střed
3. Pomocí nabídky Výplň nastavte barvu výplně na Žádná. Klikněte na složku vedle části Obraz a procházením vyberte soubor ve složce s ukázkovými soubory pojmenovaný download-bg.png a nastavte jej jako obraz pozadí. Zkontrolujte, jestli je nabídka Přizpůsobit nastavena na Původní velikost a Pozice je vystředěná.

4. Kliknutím mimo nabídku Výplň ji zavřete. V případě potřeby pomocí nástroje pro výběr upravte velikost textového rámečku a umístěte jej tak, aby byl vystředěn v pravém horním rohu textového rámečku menu Snídaně.

5. Dokud je vybraný textový rámeček, můžete pomocí nabídky Odkazy na ovládacím panelu zvolit možnost Odkaz na soubor. V zobrazeném dialogu Importovat přejděte do složky s požadovaným souborem a kliknutím na tlačítko Otevřít jej vyberte.

Poznámka: Když vyberete soubor pomocí funkce Odkaz na soubor, stane se tento soubor součástí datových zdrojů webu, které budou odeslány při publikování webu nebo zahrnuty mezi soubory webu při exportu. Doporučeným postupem je nakopírovat všechny soubory, na které chcete odkazovat z webu, do lokální složky webu, podobně jako všechny ostatní soubory obrazů používané v rámci webu.

Došlo k přidání odkazu na soubor PDF. Když se podíváte na panel Datové zdroje, uvidíte, že soubor je nyní uveden jako jeden z datových zdrojů webu.

6. Pomocí nástroje pro výběr vyberte textový rámeček. Zkopírujte a vložte textový rámeček nabídky stažení a umístěte jej přes pravý horní roh menu Oběd. Ještě dvakrát tento krok zopakujte a vytvořte kopie umístěné přes pravé horní rohy menu Večeře a Zákusek.

V reálném projektu byste mohli vytvořit odkazy na čtyři nezávislé soubory menu, aby měli návštěvníci k dispozici čtyři různé soubory PDF ke stažení nebo k zobrazení menu. Ale pro účely této výukové lekce odkazuje tlačítko Stáhnout ve všech oblastech stránky na jeden soubor PDF.

7. Zvolte příkaz Soubor > Náhled stránky v prohlížeči. Kliknutím na jednu položku vodorovné nabídky přeskočte do tohoto menu na stránce. Všimněte si, že při posouvání za účelem zobrazení menu obědů a zákusků se záhlaví zobrazuje přes ostatní obsah stránky. Toto chování je způsobeno tím, že stránka pokrmů používá vzorovou stránku Popředí a obsah záhlaví této vzorové stránky byl přesunut do popředí.
8. Klikněte na odkaz Stáhnout menu a sledujte, jak se soubor PDF stáhne do vašeho počítače.

V závislosti na používaném prohlížeči a na nastavení předvoleb tohoto prohlížeče dojde k různému chování. Některé prohlížeče zobrazí soubor PDF v okně prohlížeče, zatímco jiné jej prostě stáhnou na plochu, kde jej můžete otevřít pomocí aplikace Acrobat Pro nebo Acrobat Reader.

Pokud používáte aplikaci Adobe Muse již nějakou dobu, mohli jste si všimnout, že nabídka Odkazy byla nedávno přeorganizována do oddílů, aby bylo snadnější vyhledávat názvy stránek a položky, na které je možné vytvořit odkazy. V této části se podrobněji podíváme na strukturu nabídky Odkazy a na to, jak lze filtrovat položky v seznamu nabídky. Uvidíte také, jak lze přidávat odkazy na e-mailové adresy.

1. Kliknutím na šipku dolů v nabídce Odkazy si zobrazíte kompletní seznam.

2. Nabídka odkazy je uspořádána do částí. Část Naposledy použité odkazy obsahuje všechny odkazy na externí weby, které byly do webu přidány. Chcete-li vytvořit odkaz na externí webové stránky, můžete přímo do pole Odkazy zadat libovolnou adresu URL.
3. Část Plocha obsahuje stránky v aktuálním webu. Všimněte si, že tagy kotev, které jste přidali do stránky s pokrmy, jsou uvedeny v abecedním pořadí pod touto stránkou. To znamená, že můžete vytvářet kotvy se stejnými názvy na různých stránkách webu, a přesto budete schopni je jednoduše identifikovat při nastavování odkazů. V tomto ukázkovém webu existuje pouze rozvržení na plochu, ale pokud web obsahuje alternativní rozvržení pro telefon nebo tablet, zobrazí se tyto části s odpovídajícími sadami stránek.
4. Část Soubory, nacházející se na konci, obsahuje prvek Odkaz na soubor a všechny soubory ke stažení přidané do aktuálního webu. Jelikož jste nedávno přidali odkaz na soubor KatiesCafeMenu.pdf, je zde uveden jeho název; je tedy snadné vytvářet odkazy na společný datový zdroj z různých stránek webu.
5. Pokud chcete přidat odkaz na e-mail (který, v případě kliknutí, otevře e-mailového klienta návštěvníka a zahájí vytváření nové zprávy, jejíž pole Komu je vyplněno touto e-mailovou adresou), zadejte do pole nabídky Odkaz e-mailovou adresu s předponou mailto:, například:
   
   mailto:email@adresa.cz
   
   
6. U větších webů by se mohlo stát, že seznam položek v nabídce Odkazy začne být dlouhý a nepřehledný. Pokud hledáte určitou stránku, soubor kotvy nebo externí adresu URL pro vytvoření odkazu, zadejte do pole nabídky Odkazy několik prvních písmen tohoto odkazu a dojde k zobrazení odpovídajících položek. Můžete tak rychle filtrovat celý seznam a vyhledávat položky pro vytváření odkazů.

Když jsou nyní umístěna tlačítka ikon sociálních médií, můžete přidat externí odkazy na weby těchto sociálních sítí.

1. Vyberte ikonu Facebook a do pole nabídky Odkaz zadejte (nebo zkopírujte a vložte) odkaz na facebookovou stránku kavárny Katie's Cafe, například: http://www.facebook.com/KatiesCafeSF
2. Vyberte ikonu Google+ a zadejte (nebo zkopírujte a vložte) následující odkaz na kavárnu Katie's Cafe v síti Google+: https://plus.google.com/u/1/117800212967830061444/posts
3. Vyberte ikonu Twitter a zadejte (nebo zkopírujte a vložte) následující odkaz na kavárnu Katie's Cafe v síti Twitter: http://twitter.com/katiescafesf
4. Opětovným kliknutím vyberte ikonu Facebook. Klikněte na modře podtržené slovo Odkazy, které se nachází vlevo od nabídky Odkazy. V zobrazeném dialogu zaškrtněte políčko označené Otevřít odkaz v novém okně nebo na nové kartě.
5. Opakováním kroku 4 nastavte odkazy na Google+ a Twitter také tak, aby se otevíraly v novém okně prohlížeče.

Jedná se o běžnou konvenci při návrhu webů - odkazy na stránky ve stejném webu se otevírají ve stejném okně prohlížeče (což je výchozí chování v aplikaci Adobe Muse) a odkazy na stránky v jiných, externích webech, se otevírají v novém okně nebo na nové kartě.

Abyste mohli přidat odkaz na stránku webu Adobe Muse, přejděte k tomuto aktivnímu, odeslanému souboru pomocí prohlížeče. Postupujte takto.

1. Spusťte libovolný prohlížeč.
2. Přejděte do svého webu nebo do webu třetí strany obsahujícího odeslaný závislý soubor. Můžete použít vyhledávač, jako je například Google, nebo zadat přímo do řádku s adresou prohlížeče název domény webu.

3. Po zobrazení domovské stránky požadovaného webu použijte navigaci tohoto webu nebo zadejte do řádku s adresou prohlížeče kompletní adresu URL pro přechod ke specifickému závislému souboru. Po dokončení tohoto kroku prohlížeč zobrazí, přehraje nebo stáhne příslušný soubor.
4. Když jste si jisti, že máte zobrazen správný odeslaný soubor, tak vyberte celý obsah řádku s adresou prohlížeče a vyberte příkaz nabídky Úpravy > Kopírovat. Nebo můžete použít klávesové zkratky Command+C (Mac) nebo Control+C (Windows).

Nyní je adresa URL odkazující na závislý soubor zkopírovaná do schránky. Dávejte pozor, abyste nezkopírovali žádné jiné položky, dokud nevložíte adresu URL závislého souboru do pole Hypertextový odkaz tak, jak je popsáno v následující části.

Poté, co jste úspěšně odeslali závislý soubor, zobrazili si jej pomocí prohlížeče a zkopírovali adresu URL tohoto souboru, zbývá vytvořit odkaz na stránce vašeho webu Adobe Muse. Postupujte takto:

1. Spusťte aplikaci Adobe Muse. Dvojitým kliknutím na miniaturu stránky ji otevřete v zobrazení Návrh.
2. Vyberte nějaký text, umístěný obraz nebo obdélníkový tvar, který bude sloužit jako „tlačítko“, na které návštěvníci kliknou, aby zahájili stahování nebo otevírání závislého souboru.
3. Když je vybrán text nebo prvek stránky, klikněte na rozbalovací nabídku pole Hypertextový odkaz a vložte dříve zkopírovanou adresu URL (absolutní cestu) odkazující na závislý soubor.

Pokud chcete, aby tento odkaz otevřel nové okno v prohlížeči, klikněte na popisek Hypertextový odkaz nacházející se vlevo od okna Hypertextový odkaz. V zobrazeném dialogu zaškrtněte políčko vedle volby Otevřít odkaz v novém okně nebo na nové kartě, viz níže.

Uložte stránku a publikujte změny provedené ve webu.

Navštivte stránku v prohlížeči. Kliknutím na text nebo tlačítko s odkazem ověřte, jestli odkaz funguje podle očekávání.

Pokud máte zájem o další tipy ohledně práce s aplikací Adobe Muse, určitě se podívejte na stránku nápovědy a výukových lekcí aplikace Adobe Muse nebo stránku událostí aplikace Adobe Muse, kde najdete živé i nahrané webové semináře.