13 887
editací
Manual pro editory webovych stranek UP: Porovnání verzí
Skočit na navigaci
Skočit na vyhledávání
→Struktura stránek a „rozbalovací“ obsah
značka: editace z Vizuálního editoru |
značka: editace z Vizuálního editoru |
||
| Řádek 10: | Řádek 10: | ||
<p style="text-align: center">'''obr. 2 - náhled pro tablety'''</p> | <p style="text-align: center">'''obr. 2 - náhled pro tablety'''</p> | ||
[[Soubor:Upoladmin 03.png|centre|frameless|800x800px]] | [[Soubor:Upoladmin 03.png|centre|frameless|800x800px]] | ||
<p style="text-align: center">'''obr. 3 - náhled pro počítače'''</p> | <p style="text-align: center">'''obr. 3 - náhled pro počítače'''</p> | ||
=== Struktura stránek a „rozbalovací“ obsah === | === Struktura stránek a „rozbalovací“ obsah === | ||
| Řádek 34: | Řádek 34: | ||
=== Příklad: stránka s několika prvky Expanding Content === | === Příklad: stránka s několika prvky Expanding Content === | ||
Pro delší obsah na stránce používáme prvky Expanding Content, které může čtenář „sbalovat“ a „rozbalovat“ přímo na stránce. | Pro delší obsah na stránce používáme prvky Expanding Content, které může čtenář „sbalovat“ a „rozbalovat“ přímo na stránce. | ||
[[Soubor:Upoladmin 04.png|centre|frameless|800x800px]] | |||
# Než začneme stránku plnit obsahem, promyslíme, jak bude text strukturován a členěn pomocí nadpisů. Pro každý Expanding Content použijeme v jeho horní části nadpis H2. Nadpis se pak automaticky zobrazí v pravém Scrollspy Menu. | |||
# Do první části Expanding Contentu umístíme krátký uvozující text. Měl by to být odtavec v délce max. 80 znaků. Po kliknutí na „Více…“ se čtenáři na webu odkryje obsahový prvek celý. | |||
# Ve druhé části Expanding Contentu vytvoříme další část obsahu, který můžeme dále členit pomocí nadpisů H3 a H4. Nadpis H3. Z nadpisů H3 u rozbalené části se automaticky vytváří nadpis v pravém Scrollspy Menu. '''(video 2)''' | |||
Pozn. Pro složitěji členěný obsah použijeme prvek Expanding Content Mixed ('''video 3''') | Pozn. Pro složitěji členěný obsah použijeme prvek Expanding Content Mixed ('''video 3''') | ||
[[Soubor:Upoladmin 05.png|centre|frameless|800x800px]] | |||
=== Obrázky === | === Obrázky === | ||
Pro vložení obrázků můžeme zvolit několik obsahových prvků: | Pro vložení obrázků můžeme zvolit několik obsahových prvků: | ||
* Images: používáme, pokud nepotřebujeme doprovodný text k obrázku. Obrázky zarovnáváme doleva. | |||
* Text & Images: nejsnadnější způsob vkládání obrázku a a textu. Text může být umístěn vedle obrázku nebo obrázek obtékat '''(video 1)''' | |||
* Text: obrázek můžeme vložit i dovnitř textového prvku (včetně Expanding Contentu). Upozornění: obtékání obrázku nenastavujeme u „Obtékat“, ale nahoře ve volbě „Styl“ | |||
Používáme formát JPG nebo PNG. Maximální velikost obrázku je 880 px na šířku. Protože zobrazení obrázku se přizpůsobuje velikosti obrazovky (mobil, tablet, monitor počítače…), texty zapracované přímo v obrázku nejsou vhodné - na menších zařízeních nemusejí být čitelné. Pokud má být obrázek obtékaný textem, musí mít menší velikost (obvykle 150-200px na šířku). Pokud potřebujeme obrázek větší, můžeme vytvořit malý náhled s možností otevřít jeho plnou velikost v tzv. lightboxu (funguje u obsahového prvku Text & Images). | Používáme formát JPG nebo PNG. Maximální velikost obrázku je 880 px na šířku. Protože zobrazení obrázku se přizpůsobuje velikosti obrazovky (mobil, tablet, monitor počítače…), texty zapracované přímo v obrázku nejsou vhodné - na menších zařízeních nemusejí být čitelné. Pokud má být obrázek obtékaný textem, musí mít menší velikost (obvykle 150-200px na šířku). Pokud potřebujeme obrázek větší, můžeme vytvořit malý náhled s možností otevřít jeho plnou velikost v tzv. lightboxu (funguje u obsahového prvku Text & Images). | ||