Wysiwyg editor

Ovládání editoru

Úprava zpět a vpřed

Pomocí ikon šipek se můžeme posouvat v jednotlivých krocích úprav v editoru. Je důležité počítat s tím, že krok zpět si editor pamatuje jen do určitého rozsahu a krok vpřed v moment, kdy do textu nějak zasáhneme. Vše ostatní nenávratně zmizí.

Náhled

V náhledu si můžeme zobrazit, jak bude stránka reálně vypadat. 

Zdrojový kód

Zdrojový kód zobrazuje celý aktuální obsah v HTML kódu. Může sloužit k editaci pro zkušenějšího uživatele.

Výběr šablony

Nejjednodušší rozložení obsahu vytvoříme právě pomocí šablon. Jsou to přednastavené vizuálně se lišící obsahové stránky pro náš konkrétní web, které si jednoduše vložíme a následně dle požadavků poupravíme pomocí editoru.

Stylování textů

Stylování textů používáme pro zviditelnění důležitých částí textu. Se stylováním je však potřeba pracovat s citem, jelikož při nevhodném a přeplácaném stylování může textu spíše ublížit. Styly lze také kombinovat dohromady.

Tučné (1)

Text bude silnější a na první pohled více výrazný. Zvýrazňujeme většinou nejdůležitější části textu. 

Příklad

Kurzíva (2)

Kurzíva, neboli sklon písma, písmo jemně nakloní a tím opticky zjemní. Nejčastěji se používá pro poznámky.

Příklad

Spodní podtržení (3)

Spodní podtržení vede automatickou linku pod textem. Může návštěvníka stránky zmást podobným vzhledem jako odkazové tlačítko.

Příklad

Přeškrtnuté (4)

Přeškrtnutí vede automatickou linku přes psaný text. Můžeme jej použít například k uvedené špatné odpovědi, nepravdivé informace a podobně.

Příklad

Indexy (5+6)

Horní a spodní index není příliš obvyklý. Práce s těmito tlačítky je jednoduchá: označím si část textu, kterou chci proměnit v index a kliknu na zvolený typ. 

Příklad ^horní

Barva textů

Pro zvýraznění určité části textu můžeme použít také barvy. Ty je možné si libovolně navolit z celé RGB palety. Barvu je vždy vhodné volit tak, aby ladila se vzhledem celé stránky.

Barva písmena

Pomocí tohoto výběru si zvolíme libovolnou barvu písma. Při najetí na šipku se nám zobrazí poslední použité barvy. Přeškrtnutá šipka znamená vyrušení barev a vrácení zpět na základní (většinou černou) a díky paletě si můžete navolit vlastní libovolnou barvu.

Příklad

Barva pozadí za písmem

Barva pozadí u písma simuluje zvýrazňovač. Použití barev je naprosto stejné jako v předcházejícím případě. 

Příklad

Formátování

Zarovnávání

Zarovnávání se chová stejně jako v každém textovém editoru. Vybereme zvolený odstavec a vybereme žádoucí zarovnání: doleva, na střed, doprava nebo do bloku.

Odsazení

Tyto tlačítka používáme k odsazení textu od levého okraje. Nikdy neodsazujeme pomocí mezer, jelikož by nám to při responzivním řešení mohlo v textu udělat velké problémy. Tlačítky můžeme odsazení zvětšit nebo naopak zmenšit.

Odrážky a číselné seznamy

Tyto tlačítka nám z jednotlivých odstavců udělají pomocí bodů nebo čísel samostatné seznamové odrážky. Nejčastěji se používají při výčtu (např. ceník, služby, základní informace a další). Vzhled odrážek je předem navolený tak, aby ladil se vzhledem každé stránky.

Sloupce

Volbu sloupců zvolíme ikonou v základní liště, následně nám vyskočí okénko s výběrem (viz obrázek). Zde si navolíme, zda chceme mezi sloupci mezeru (doporučená volba) nebo sloupce bez mezer. Rozložení sloupců vybereme pomocí obrázků a poslední volba "vlastnosti", nejlépe ponecháme na responzivní.

Tabulka

Tabulku si jednoduše navolím v horní liště v okně "Tabulka" po pravé straně. Pro vytvoření základní tabulky si najedu myší na Tabulka a ve vyskakovacím okně zvolím počer sloupců a řádků.

U posledních dvou tlačítek se mění vlastnosti celé tabulky najednou nebo se smaže celá tabulka najednou. V jednotlivých vyskakovacích oknech pak upravujeme jednotlivé části tabulky.

Buňka

Jednotlivé buňky mohu upravovat ve vyskakovacím okně buňka, kde mohu měnit vlastnosti jednotlivých buněk, slučovat je, rozdělovat a podobně. 

Řádek 

Pomocí výběru řádek je možné měnit vlastnosti řádku a různě s ním pracovat - vyjímat, vkládat, přesouvat a podobně.

Sloupec

Poslední vyskakovací okno patří úpravě sloupců. Měníme zde jejich vlastnosti a pracujeme s nimi.

Styly

Styly volíme pro jednotlivé části, nejčastěji odstavce nebo nadpisy. Styly máme přednastavené dle grafické úpravy stránky a volíme z již předem připravených.

Nadpisy

Při výběru záložky "Nadpisy" nám vyskočí okno s výběrem nadpisů několika úrovní, které na stránce používáme. Udržujeme jednotný styl, proto na sebe nadpisy graficky navazují a neměli bychom je dále editorem příliš upravovat. Nepsaným pravidlem je používání úrovní postupně za sebou dle důležitosti nadpisů (od 1. úrovně dál).

Odkazy

Pomocí stylování odkazů si vybereme z předem připravených vzhledů odkazových textů nebo přímo tlačítek. Tvorbu samotných odkazů si vysvětlíme v části Tvorba odkazů. 

* U každého webu je vzhled tlačítek jiný.

Obrázky

U výběru obrázků je možnost použít "lightbox", který lze použít pouze u obrázků s URL odkazem. Tato funkce umožní na webu kliknutí na obrázek a jeho následné zvětšení přes celou obrazovku. Více o vložení odkazu najdeme zde. Konkrétní odkaz zvolíme tak, že klikneme na výběr URL, na levé straně zvolíme správce souborů a dohledáme stejný obrázek, na který odkaz přidáváme (volíme tím vlastně obraz, který při kliknutí vyskočí). Následně můžeme ve výběru kliknou na Lightbox a uložit.

Bloky

Pomocí bloků vybíráme předvolený vzhled označeného bloku. 

Odsazení

Pro vytváření mezer mezi jednotlivými odstavci nepoužíváme klávesu Enter, jelikož uměle vytvořené mezery následně rozbíjejí web při změnách velikostí responzivu (např. u mobilní verze). Používáme proto odsazení, které nám jasně určuje velikost této mezery v jakémkoliv rozlišení. Mezery můžeme použít pod i nad blokem. 

Vkládání odkazů a kotev

Pomocí odkazů a kotev můžeme z jednotlivých částí webu (obrázků, částí textů, tlačítek a dalších) odkazovat na jiné části webu, nebo i úplně mimo. Pomocí kotev naopak určujeme, kam odkazy budou směřovat.

Odkazy 

Odkazy můžeme aplikovat na text i na obrázky, je však důležité, aby byly pro návštěvníka webu logické a intuitivní. Odkaz z obrázku se používá spíše u grafických prvků, u obrázků je výjimečný, ale není nemožný. Jako příklad jej používáme např. u lightboxu. 

Odkaz vkládáme buď přímo ve formě https://www.... a nebo jej pomocí vyhledávání vkládáme přímo z naší stránky (viz rámeček).

Kotvy používáme tehdy, pokud chceme odkázat na konkrétní část na naší stránce (aktuální i jiné URL). Nejprve na zvolené místo vložíme kotvu a následně ji zde podle názvu vybereme.  Pokud chceme použít kotvu z jiné stránky (článku, obsahu a podobně) musíme ve výběru URL nejprve pomocí vyhledávání dohledat danou stránku a následně za vepsaný text ještě vložit "#nazevdanekotvy".

Kliknutím na "Otevřít odkaz v..." volíme, zda při kliknutí na odkaz vyskočí nová stránka v aktuálním nebo v novém okně. 

Aktuální okno volíme v případě, že odkazujeme na stránku na našem webu nebo e-shopu.

Nové okno volíme, pokud uživatele odkazujeme na cizí stránku či například na souboe PDF, Word a jiné. Zabráníme tak uživateli, aby odešel z našich stránek.

Pomocí vyhledávání v URL můžeme vyhledávát na celém našem webu, což znamená ve správci souborů i v jednotlivých obsahových stránkách (článcích, obsazích a dalších). Tento výběr měníme v levé liště. Dále zvolíme typ obsahu, a pak už jen dohledáme zvolený obsah. 

Textový odkaz je vždy vzhledově odlišný (přizpůsobený celé grafice konkrétní stránky) a můžeme je upravovat i jako tlačítka. 

Kotvy 

Kotva slouží k následnému odkazování stránky přímo ke konkrétní části (většinou ke konkrétnímu nadpisu), do jehož úrovně po kliknutí na tlačítko kurzor sjede. 

Pro vložení kotvy označíme část vybraného textu nebo stačí i pouhé kliknutí kurzorem před text, klikneme na ikonu kotvy a vložíme její název. 

Je vhodné vkládat krátké a vystižné názvy, jelikož se při větším počtu na stránce lehce pletou. 

Znak kotvy se znaménkem # vkládáme do URL adresy za kód vybrané stránky.

Více o používání kotvy nejdete v předchozím sloupci Odkazy, kde kotvy následně používáme. 

Obrázky

Obrázky jsou neodmyslitelnou částí obsahu stránek, které můžeme libovolně přidávat do obsahu.

Obrázek vkládáme stejně jako odkazy těmito způsoby:

• Výběrem ze souboru správců přes vyhledávání (nejčastější).
• Výběrem přímo z PC.
• Vložením URL adresy na zcela cizí stránky (tato funkce je vhodná v případě, že máte například dvě vlastní stránky, ale pozor, můžete odkazovat pouze na jeden web a zároveň, pokud obrázek smažeme, poruší se tak i cesta k němu a ten se z vašeho webu smaže).

Vyplníme popis obrázku. 

Rozměry obrázků vždy vyplňujeme v % kvůli responzivnímu zobrazení. Procenta píšeme vždy do levého sloupečku, pole výšky necháváme prázdné.

Pokud obrázek vkládáme přes správce souborů, je dobré složky již od začátku smysluplně tvořit. Pokud byste chtěli správce souborů ovládat přes FTP, doporučujeme složky i soubory vkládat bez diakritiky kvůli zobrazení znaků.

Videa

Video vkládáme stejně jako obrázek, buď přes správce souborů (musí být povolen limit – to určuje programátor) nebo přímo odkazem z Youtube kanálu nebo jiných platforem.