Styly

Stránka může začínat perexem – nadpis H3 (volí se ve wysiwygu)

Perex je odlišen od ostatního textu na stránce. Vyskytovat by se měl zpravidla na samotném počátku stránky. Je to jakýsi úvod, který by měl obsahovat nejpodstatnější informace. Při testování kontrolujete dle grafického návrhu a vlastního citu zejména font a ostatní atributy (velikost, barva, řádkování, odsazení od ostatního textu apod.).

Nadpisy

V článku redakčního systému inCMS web lze běžně používat nadpisy H3 (někde i H4), nadpisy H2 jsou zpravidla názvy modulů (článku, galerie, seznamu) – tyto názvy lze u modulu zobrazit. Při kontrole nadpisů dbáme nejen na to, aby jejich velikost odpovídala jejich hierarchii, ale také na horní odsazení (nadpis od předchozího textu) a dolní odsazení (nadpis od prvního odstavce). Platí pravidlo, odsazení nad nadpisem je větší než odsazení mezi nadpisem a prvním odstavcem. Právě tyto skutečnosti jsou důležité pro to, aby text na stránce působil přehledně a strukturovaně, a ne jednolitě. Nadpisy musí nejen informovat, ale také vizuálně text oddělovat. Nemělo by se stávat to, že editor bude pro větší přehlednost za nadpis či odstavec přidávat jeden volný řádek.

Obtékání obrázku

Při kontrole obtékání obrázku je třeba dbát zejména na to, aby vzdálenosti odsazení odpovídaly velikosti odsazení definované volitelnou šablonou či odsazení, které je při vložení obrázku do textu nastaveno uživatelem. Obrázek se dle umístění odsazuje zleva, zprava, zeshora a zdola. Určitě je dobré vyzkoušet si dvě základní pozice umístění obrázku – vlevo a vpravo. Dále je dobré zkontrolovat zobrazení obrázku s rámečkem či bez rámečku. V grafickém návrhu by mělo být vždy definováno, zdali se obrázek defaultně zobrazuje s rámečkem či bez.

Umístění obrázků v textu: preferovaná velikost obrázku (šířka) na velikost 1,2,3,4,5,6 sloupců, dle toho jak je stránka koncipována. Inexes pracuje standardně s 1,2 či 3 sloupcovým layoutem stránky. Pokud není možné jinak, volíme velikost obrázku tak, aby to bylo co nejvíce estetické.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.

Formátování textu – nadpis H3

V článku lze text různě upravovat, využívat různého formátování písma stejně jako celých souvislých částí textu – vět, odstavců (seznamy).

Nečíslovaný seznam – tučné normální písmo

Seznam by měl být vždy jako celek odsazen zleva.
I v nečíslovaném seznamu je dobré vyzkoušet si různé typy písma – zvýrazněné písmo, tučné písmo, kurzíva, podtržené písmo.
V seznamu dejte pozor také na zalamování textu u druhého a dalších řádků. Zarovnání musí odpovídat prvnímu řádku.
- Druhá úroveň seznamu musí mít oproti první úrovni odsazení a platí u ní stejná pravidla jako výše (zarovnání druhých a dalších řádků).
- Kontrolujeme také řádkování a odsazení od okolního textu (horní i dolní)
  - Seznam je dobré vyzkoušet pro tři úrovně.
Zkontrolovat by se také mělo kombinované využití normálního a číslovaného seznamu.
- A to opět pro tři úrovně.
  1. Třetí úroveň.
  2. Třetí úroveň kombinovaného seznamu, v níž zkoušíme, zdali se druhý a další řádek zarovnává.

Číslovaný seznam – tučná kurzíva

Číslovaný seznam. Platí zde obdobná pravidla jako u normálního seznamu (odsazení zleva aj.). Pozor na zarovnání druhého a dalších řádků.
Číslo dvě a zkouška písma – tučné, kurzíva, podtržené.
Číslo tři
1. Druhá úroveň číslovaného seznamu.
2. Druhá úroveň číslovaného seznamu.
  1. Třetí úroveň číslovaného seznamu.
  2. Třetí úroveň číslovaného seznamu. Třetí úroveň číslovaného seznamu. Třetí úroveň číslovaného seznamu.
  3. Třetí úroveň číslovaného seznamu.
3. Druhá úroveň číslovaného seznamu.
První úroveň číslovaného seznamu.
(……….)
(……….)
(……….)
(……….)
(……….)
Na desátou a vyšší položku číslovaného seznamu pozor – číslo se musí pěkně zarovnat. I proto je seznam odsazen zleva, aby bylo dost prostoru pro dvě číslice.

Odsazení textu od seznamů by mělo být větší než normální odsazení dvou odstavců běžného textu. Dejte na grafický návrh a vlastní cit, grafický návrh není vytesán do kamene.

Seznam odkazů a tabulka ze šablon – nadpis H3

Ze šablony lze vedle bloku textu s obrázkem vlevo/vpravo zvolit také seznam odkazů a tabulku. Opět je nutné zkontrolovat jejích shodu s grafickým návrhem (barva odkazu, over stav).

U tabulky zkontrolujte, zda stylově odpovídají řádky / buňky pro nadpis tabulky, dílčí nadpisy, hlavičku, patičku a zvýrazněný/alternativní řádek. Hlavička i patička tabulky by měly mít stejnou velikost (výška, šířka) jako ostatní řádky.

Nadpis tabulky
Nadpis 1	Nadpis 2	Nadpis 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3
Data 1	Data 2	Data 3

Reálná tabulka – nadpis H3

Uživatel nemusí vybírat tabulku jen ze šablony, ale může si vytvořit libovolnou tabulku s vlastním formátováním. Tester kontroluje hlavně to, aby styly a formátování písma užitá v tabulce byla shodná jako písma v běžném textu (zvýrazněné, tučné, kurzíva, podtržené).

Tabulka č. 4 – nadpis H3
	Údaje
Tučné písmo	Level	Never	Some	Most	Every
(a) Zvýrazněný text	Kurzíva je kurzíva	0 4	20 22	47 22	33 52
(b) Běžné písmo s odkazem	Kurzíva je kurzíva	7 17	68 57	21 26	4 0
(c)Podtržené písmo	Kurzíva je kurzíva	13 9	37 27	40 50	10 14
(d) Přeškrtnuté písmo	Kurzíva je kurzíva	54 36	46 59	0 5	0 0

Různé typy zarovnání v tabulce – tabulka bez ohraničení s obrázkem

Zarovnání textu s obrázkem. Toto je horizontální zarovnání vlevo, vertikální zarovnání doprostřed.

V tabulce je nutné vyzkoušet různá zarovnání textu v buňce (řádku). Mohlo by to v případě, že je v tabulce obrázek, zlobit. Zarovnání v buňce / řádku je vertikální (nahoru, doprostřed, dolů) a horizontální (vlevo, doprostřed, vpravo).

Toto je horizontální zarovnání na střed a vertikální zarovnání nahoru.

Toto je horizontální zarovnání vlevo a vertikální nahoru. Toto je horizontální zarovnání vlevo a vertikální nahoru. Toto je horizontální zarovnání vlevo a vertikální dolů.

Wysiwyg versus prezentační část webu

Kontrolujeme také, zdali odpovídá zobrazení textu ve wysiwygu se zobrazením textu na webu. Wysiwyg by měl mít stejné pozadí jako webové stránka, stejný font písma, barvu apod. Důležité také je, aby si odpovídaly konce řádků. To nejlépe otestujete tak, že text ve wysiwygu zarovnáte „justify“ a porovnáte text v editoru a text na stránce. Pokud se konce řádků shodují, máte vyhráno. Nezapomeňte toto zkontrolovat i u seznamů (běžný, číslovaný) a v tabulkách.

V tomto článku je zarovnání do bloku užito z testovacích důvodů.Obecné pravidlo říká, že

Pokud není určeno jinak, text do bloku nezarovnáváme.

Zarovnání do bloku totiž způsobuje tzv. „optické řeky“, které znesnadňují čtení. Rovněž pokud řádek obsahuje jen několik slov, mezery mezi nimi se nepřirozeně rozestoupí.

Nečíslovaný seznam s využitím fotek za odrážkou

Klotik a těsro bidiclošt skátřo diněd o tradiď nidip těst prs
I vlemoužrůvo blízrm vleč kustpe grý nědiňpeble
Chétěznidi vést v nědět bíplu
Mýsk bláme

Formátování

Zlokře chahlí a chramijodě distůsk, klíc měske něj pe srádrev diskum frýž, a banible suzlydě pobaž jouti didrati flač bryja přop pech. Fremréti skask z blýřou flíp. Kryděnist sý děflý lažleč i bliš těšlů tkav. S zrávří blaží dryh štu frůhlý křouprah nim dinou po drobů miklap. K hlyn štubí skýť dišly noplápépr dišlázky blac. Chluplo.

Odsazení odstavů 1. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Odsazení odstavců 2. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea.

E-mail: vyzkoušíme funkčnost e-mailu (over stav) info@inexes.cz

Adresa: pro formátování adresy lze využít definovaný styl

Inexes s. r. o.

Liborova 11

163 00 Praha 6

Obrázek přes celou šířku stránky

Vlikty pledgloň vuněvak mloťuvěs ptoz z tousniděvu čar guř mětě, bechré a drétřou. Sráď úfu cro héť tlifry a titě, tisk krymoď kly tižlůzly půtic s něj? Trpěšt žrýzkabame hletkapvěž cluchysk dřá din ništčlé kryťtiklýš chliř cly píbý. Toch tlor lkalyča i plesty dizkouti těp ktechletěv útko. S ťáp úmrédi ústů fruh, syrošku.

Testovací obrázek

Omo a půšly v omou nigur z mar. Zlfrů nivře hlít, zévěnělkul ditrud žlost vypřo tifry, i dobynězro sy stoslu plůží s fls fretin divaflalél lůžlor. A glefouď pište joutěni břáni bě, titkah sremlumlic, chlužub brur myské mačlyř děchlyzrýr. člourů s trepdi miprůskou chyk cheš utiššluh cralpru cíj.

Využití vodorovného oddělovače

Vodorovný oddělovač by měl vždy mít styl v souladu s grafickým návrhem – není to jen čára, ale nastylovaná čára :-). Před ním a za ním by mělo být určité odsazení.

Zkežli vyř lutivryž digla. A břotěl mřikreď k cru větiř rodivra tkak chapi dluvtě. Bomitě hlihlatěni řutě.

Horní a dolní index

Zkontrolujte horní a dolní index, zdali je text odsazen nahoru/dolů a zmenšen na odpovídající proporce.

Nejen čísla typu m₂₃ či m²⁴ nebo třeba km₍₂₃₎ a ha⁽³⁴⁾, ale i písmo by mělo ^vypadat v indexech _esteticky.