Jak vložit logo aneb upravujeme záhlaví
Pokud chceme, aby stránky byly osobité, je dobré doplnit záhlaví o grafické prvky.
Obrázek do záhlaví
Nejprve si na modelové stránce ukážeme, jak nahradit titulek obrázkovým záhlavím. Předpokladem je, že si takový obrázek umíme pomocí grafického editoru na svém počítači zhotovit. K tomu musíme znát šířku zobrazovací plochy své stránky (v pixelech – obrazovkových bodech). Ta může být u každé vzhledové šablony jiná, obvykle bývá kolem 900px. Pokud si neumíme šířku změřit, můžeme postupovat metodou pokus – omyl. Důležité ale je velikost trefit, protože pokud uděláme obrázek větší nebo menší a umístíme do něj nějaké texty, při následné změně velikost ztratí ostrost.
Pokud obrázky obsahují spíše pravidelné tvary a text, doporučujeme je ukládat do formátu .png. Naopak, pokud jsou součástí obrázku fotografie a pestré složité obrazce, doporučujeme formát .jpg.
Pozn.: Formát .png umožňuje uložit průhledné pozadí. To se hodí především pokud chceme do stránek umístit třeba samotné logo přímo na pozadí stránek.
logo_zahlavi_1.png
Pro tento příklad zhotovíme obrázek kombinací výřezu z fotografie (pro pozadí) a na popředí umístíme logo fiktivní společnosti.
01_02d.png
Přihlásíme se do administrace Webgarden stránek a v sekci Obsah > Struktura webu > Záhlaví smažeme titulek (a případně další obsah).
logo_zahlavi_2.png
Poté na místo titulku vložíme nový prvek Obrázek.
logo_zahlavi_3.png
Do prvku nahrajeme předtím vytvořený soubor s obrázkem a na záložce rozšířené přepneme Styl zobrazení na „Původní velikost“. Tím docílíme toho, že se obrázek nebude v případě menší šířky roztahovat a tím pádem deformovat.
logo_zahlavi_4.png
Obrázek se nám pravděpodobně zobrazí jen přes jednu dlaždici a proto ho táhnutím za chlopeň, která edituje šířku, roztáhneme přes celé záhlaví.
logo_zahlavi_5.png
Stránky rázem získají svůj nosný prvek, podle kterého si je návštěvníci mohou zapamatovat.
logo_zahlavi_6.png
Bývá zvykem, že logo proklikává na domovskou stránku a proto se vrátíme do administrace, rozklikneme editační okno obrázku a na kartě Rozšířené vyplníme do kolonky Odkaz symbol /, který odkazuje na domovskou stránku.
logo_zahlavi_7.png
Úspornější varianta
Prvky, které umístíme do záhlaví stránky jsou vidět stále, nezávisle na tom, kam návštěvník klikne. Při větším množství prvků nebo velkém obrázku záhlaví je ale takto pokryta velká část obrazovky a návštěvník je pak nucen po každém kliku posouvat stránku dolů. Elegantním řešením je přesunutí grafiky ze záhlaví do výchozí rubriky.
Ze záhlaví vše vymažeme a umístíme zde pouze prvek Menu s horizontálním uspořádáním. Také tento prvek Menu roztáhneme přes celou šířku.
logo_zahlavi_8.png
logo_zahlavi_9.png
Pak smažeme Menu z levého sloupce (a případně další prvky, pokud zde jsou). Pokud bude levý sloupec prázdný, zobrazí Webgarden střední část po celé šířce.
logo_zahlavi_10.png
logo_zahlavi_11.png
Rozbalíme si domovskou rubriku a před první prvek vložíme nový prvek Obrázek. Do prvku nahrajeme dříve zhotovený soubor s obrázkem a roztáhneme po celé šířce. Obrázku nezapomeneme nastavit zobrazení v Originální velikosti.
logo_zahlavi_12.png
logo_zahlavi_13.png
Pokud nám nad obrázkem zůstal nevzhledný titulek s navigační lištou. V sekci administrace Nastavení > Zobrazení vypneme zobrazování "Záhlaví rubriky + Navigace".
logo_zahlavi_14.png
logo_zahlavi_13.png
Při tomto řešení uvidí návštěvník logo pouze při vstupu na stránky, ale při klikání již bude mít celou plochu stránky k dispozici pro obsah. Ukážeme si ještě kompromisní variantu. Logo umístíme zvlášť tak, že bude vidět stále, ale větší grafiku ponecháme v rubrice.
Nejprve rozklikneme domovskou rubriku a na první místo nahrajeme nový obrázek. Obrázek nebude obsahovat logo, ale místo toho jej doplníme hesly, grafikou nebo firemními texty, které se na homepage hodí a stránky budou charakterizovat. Ohlídáme si správnou šířku obrázku v pixelech a zobrazení v originální velikosti a také datovou velikost obrázku, ideální je vejít se do 150 KB.
logo_zahlavi_16.png
Proklikneme opět do levého sloupce a vrátíme sem prvek Menu ve vertikální podobě.
logo_zahlavi_17.png
Před menu pak umístíme nový obrázek, do kterého nahrajeme samostatný soubor s logem. Opět nezapomeneme na originální velikost, správnou šířku a nastavení prokliku na homepage.
Tip: Pokud váháme, jak vlastně rubriku s homepage pojmenovat, můžeme ji v obsahu umístit do zcela zvláštní sekce rubrik a nazvat ji stejně jako společnosti, nebo např. „Vítejte“. Tato rubrika pak nebude v menu mezi ostatními, ale půjde na ni prokliknout právě skrze logo.
logo_zahlavi_18.png
Při nastavení zobrazení v originální velikosti se nám bude zdát obrázek vůči menu úzký, ale na samotné stránce pak bude mít velikost správnou.
logo_zahlavi_19.png
logo_zahlavi_20.png
Při klikání stránkami vidíme logo stále, zobrazovací plochu ale máme volnou pro obsah odshora dolů.
logo_zahlavi_21.png
Finální úpravy
V záhlaví pak můžeme menu přepnout do formy „Odkazy“. Tato forma je subtilnější a na horní okraj webu se obvykle hodí lépe. Nezapomínejme, že můžeme mít pro různá menu různé sady rubrik.
logo_zahlavi_22.png
logo_zahlavi_23.png
19.08.2016 13:31:02
Name
Email
Comment
Or visit this link or this one