V aplikaci Adobe Muse můžete definovat oblasti záhlaví a zápatí webu pro přidání nabídek, log, upozornění na autorská práva a další.

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.

V aplikaci Adobe Muse můžete jednoduchým způsobem vytvářet záhlaví a zápatí webové stránky. Jelikož je vhodné zachovávat konzistentní vzhled webu, měl by být vzhled prvků záhlaví a zápatí neustále stejný. V aplikaci Adobe Muse toho dosáhnete nadefinováním prvků záhlaví a zápatí na vzorové stránce. Aktualizováním vzorové stránky zajistíte, že se provedené změny projeví na všech stránkách webu.

Při tvorbě webů pomocí HTML a CSS se u jednotlivých stránek často mění výška podle jedinečného obsahu zobrazeného na každé stránce. Aplikace Muse zahrnuje funkce, které umožňují zobrazení různých délek jednotlivých stránek podle jedinečného obsahu zobrazeného na každé stránce. Oblasti lze nastavit tak, aby záhlaví vždy zůstalo v horní části a obsah zápatí se vždy zobrazoval přímo pod obsahem stránky bez ohledu na její výšku.

Přidání záhlaví a zápatí stránky

Před zahájením definování oblastí záhlaví a zápatí zkontrolujte, jestli máte zobrazená vodítka záhlaví a zápatí. Pokud ne, vyberte možnost Zobrazit > Zobrazit záhlaví a zápatí.

K zapnutí vodítek záhlaví a zápatí lze také použít nabídku Zobrazit na Řídícím panelu.

Ověřte, zda jsou povolena vodítka záhlaví a zápatí.
Ověřte, zda jsou povolena vodítka záhlaví a zápatí.

Pokud chcete, můžete také kliknout pravým tlačítkem myši na levou část pracovní plochy mimo oblast okna prohlížeče. Povolte možnost Zobrazit záhlaví a zápatí v zobrazené kontextové nabídce.

Práce s vodítky a pravítky

Pro změnu polohy vodítek záhlaví a zápatí je třeba vždy povolit pravítko. Pravítko umožňuje nastavení vodítek na přesnou pixelovou polohu. Ve výchozím nastavení jsou také zobrazena pravidelná vodítka (zobrazující počet sloupců při vytvoření nového webu).

Po celé šířce stránky je rozloženo pět modrých vodorovných vodítek. Směrem shora se těchto pět vodítek používá k definování horní části stránky, nejnižšího okraje záhlaví, horního okraje zápatí, spodní části webové stránky a spodní části okna prohlížeče. Při přetahování vodítek za účelem definování těchto oblastí popisuje každé vodítko a jeho aktuální polohu bublinová nápověda. Může být užitečné zvýšit zvětšení stránky, abyste mohli přesně přiblížit polohu vodítek.

Tři vodítka uprostřed definují obsah, který se zobrazí v oblasti záhlaví a zápatí. Zbývající centrální oblast je oblast, kam přidáte jedinečný obsah stránky; tato centrální oblast se rozšíří, aby odpovídala výšce prvků umístěných na každé stránce.

Lze také vybrat obdélníky a prvky na stránce. Užitečné je použití omezujících oken vybraných prvků, jež vám umožní zarovnat vodítka a zároveň nastavit oblasti záhlaví a zápatí.

Poznámka:

Spodní část okna prohlížeče určuje nejnižší část oblasti zobrazení, pokud návštěvník zobrazuje web v prohlížeči; v závislosti na návrhu lze nastavit barvu nebo obrázek pozadí pro samotný prohlížeč a vodítko pro spodní část stránky nad spodní částí vodítka prohlížeče, a umožnit tak zobrazení barvy nebo obrázku pozadí pod obsahem stránky.

Definování prvků záhlaví a zápatí

Postup definování prvků záhlaví a zápatí:

  1. Přetáhněte vodítko Spodní části stránky a Spodní části prohlížeče do téhož umístění ve spodní části stránky hned pod obdélník zápatí, jak je vidět na níže uvedeném obrázku.
Definujte prvky záhlaví a zápatí v aplikaci Adobe Muse
Definujte prvky záhlaví a zápatí v aplikaci Adobe Muse

  1. Vyberte obdélník v zápatí, který obsahuje dlaždicový obrázek pozadí. Přetahujte vodítko Zápatí, dokud není zarovnáno s horní částí obdélníku zápatí.
  2. Vodítko Horní části stránky úplně nahoře (u osy Y: umístění 0 px). Vodítko Záhlaví přetáhněte na požadovanou úroveň.

Obsah záhlaví se zobrazí v oblasti mezi horní částí stránky a vodítkem Záhlaví.

Přetažením vodítka Záhlaví nastavte oblast záhlaví
Přetažením vodítka Záhlaví nastavte oblast záhlaví

Kdykoli během procesu návrhu se můžete vrátit ke stránce A-vzorová, pokud je nutné upravit vodítka tak, aby odpovídala obsahu záhlaví a zápatí.

Kliknutím na odkaz Plán nebo na kartu označenou katiesCafe se vrátíte do zobrazení Plán.

Všimněte si, že všechny miniatury stránky na webu nyní zobrazují prvky návrhu přidané k odkazované stránce A-vzorová.

Všimněte si záhlaví a zápatí určeného na všech stránkách propojených se stránkou A-vzorová
Návrh stránky A-vzorová se zobrazí na všech miniaturách odkazované stránky v náhledu Plán.

Při návrhu webu změny provedené u vzorové stránky automaticky aktualizují odkazované stránky. Vzorové stránky usnadňují aktualizaci nebo údržbu webu, protože změnou jedné vzorové stránky lze aktualizovat vzhled webu.

Umístění obrazu pro vyplnění obsahu záhlaví

Jelikož se logo webu bude zobrazovat na každé stránce webu, je vynikajícím kandidátem pro umístění do záhlaví na vzorové stránce.

  1. Zvolte Soubor > Umístit. Nebo můžete obraz umístit pomocí klávesové zkratky Control+D (Windows) nebo Command+D (Mac).

  2. V zobrazeném dialogu Importovat vyberte ve složce Kevins_Koffee_Kart soubor pojmenovaný Logo.png. Klikněte na tlačítko Vybrat.

  3. Pomocí nástroje pro výběr přetáhněte logo nahoru k hornímu okraji oblasti záhlaví, kterou jste definovali výše.

Nyní umístíte další obraz, který bude sloužit jako grafika pozadí widgetu Pruh nabídek, který přidáte v další části.

  1. Vyberte příkaz Soubor > Umístit nebo použijte klávesovou zkratku vašeho operačního systému Control+D (Windows) nebo Command+D (Mac).

  2. Přejděte do složky Kevins_Koffee_Kart a vyberte soubor pojmenovaný top-nav.png.

  3. Jednou klikněte v horní části stránky do oblasti, kterou jste dříve definovali jako záhlaví. Nezapomeňte obraz umístit nad značku záhlaví, aby se na každé stránce zobrazil na stejném místě, tj. nad obsahem hlavní stránky.

  4. Pomocí nástroje pro výběr přetáhněte grafiku hnědé stužky, kterou jste právě umístili, tak, aby se pneumatiky červeného kola dotýkaly horní části hnědé stužky. Tímto umístěním docílíte dojmu, že kolo jede po hnědé stužce.

  5. Znovu klikněte na Soubor > Umístit. Vyhledejte a vyberte soubor pojmenovaný thedrip.png. Jedním kliknutím v blízkosti pravé spodní části hnědé stužky umístěte obraz v jeho originální velikosti.

  6. Pomocí nástroje pro výběr přesuňte obraz kapky tak, aby byl zarovnán s hnědou stužkou a aby to vypadalo, jako že z pravé strany skapává káva.

    Obsah záhlaví tak, jak vypadá po přidání loga a pozadí pro navigaci webu.
    Obsah záhlaví tak, jak vypadá po přidání loga a pozadí pro navigaci webu.

    Prohlédněte si výsledek v aktivním webu, a zkontrolujte správné umístění loga a horní navigace.

    V následující části se naučíte přidávat widgety, ale nejprve si stručně popíšeme práci s kontejnery widgetů.

Používání volby Zápatí vždy dole

Volba Zápatí vždy dole umožňuje přichycení prvku Zápatí na webovou stránku. Volba Zápatí vždy dole byla navržena především pro návštěvníky s velkými monitory pro stolní počítač. Povolení volby Zápatí vždy dole způsobuje, že zápatí zůstane v požadované poloze, i když je okno prohlížeče významně větší než návrh webové stránky.

Volba Zápatí vždy dole je umístěna v dialogovém okně Nový web (Soubor > Nový web) při vytváření webu v aplikaci Muse. Zápatí vždy dole lze také zobrazit v nabídce Vlastnosti stránky (Stránka> Vlastnosti stránky) a v dialogových oknech Vlastnosti webu (Soubor > Vlastnosti webu)

Možnost Zápatí vždy dole je ve výchozím nastavení povolena. Obecně lze říci, že je nejlepší funkci Zápatí vždy dole při navrhování webů používat. Pokud však zjistíte, že se stránky zobrazují mnohem delší, než vyžadujete (protože web obsahuje méně obsahu na stránce a stránky jsou krátké), můžete tuto funkci kdykoliv vypnout zrušením zaškrtnutím políčka v dialogovém okně Vlastnosti stránky.

Pokud je však chcete vypnout pro celé webové stránky, zrušte výběr volby v dialogovém okně Vlastnosti 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