Vzhled stylování obsahu (Styleguide)
Nadpisy
Nastylované nadpisy pro základní použití v šabloně. Nadpisy jsou v kombinaci se základním odstavcem. V základním stylování jsou pouze textové nadpisy v rozšířené nastylované šabloně jsou nadpisy i s obrázkem před textem, případně grafickým efektem.
Nadpis H1
Nadpis H2
Nadpis H3
Nadpis H4
Nadpis H5
Nadpis H6
Nadpis + základní odstavec
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Nadpis H2
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Nadpis H3
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Nadpis H4
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Nadpis H5
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Nadpis H6
Lorem ipsum dolor sit amet consectetuer quis tellus Vivamus natoque Donec. Nam faucibus sagittis et et velit Duis fringilla sed sem ut. Eget ut at nibh condimentum id neque dictumst Morbi porttitor eget. Justo id amet consequat natoque commodo fringilla libero orci id Phasellus.
Odstavce
Nastylované odstavce se základními prvky - zvýraznění text, odkaz, kurzíva. V základním stylování pouze odstavce zarovnané vlevo, vpravo a na střed, v rozšířeném barevné nastylované varianty odstavců - poznámka, důležitý text, chyba (záporný odstavec), potvrzení (kladný odstavec).
Normální odstavec - zarovnaný vlevo
Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.
Normální odstavec - zarovnaný vpravo
Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.
Normální odstavec - zarovnaný soumerne
Normální odstavec textu s aktivním odkazem v textu. Písmem zvýrazněným pomocí strongu. Výrazným písmem, případně kurzívou. Je možné použít i nevýrazný text (poznámku) v odstavci. Lorem ipsum dolor sit amet consectetuer sem enim condimentum Curabitur sed. Justo In Morbi leo libero non Suspendisse pharetra diam vel massa. Neque Quisque ac pellentesque eu sodales egestas purus pellentesque Phasellus Nullam.
Zvýrazněné odstavce podbarvením - velikost flexibilní
Zachovej:
Tučně, kurzíva - nastyluj dle stylu odstavce - tučné písmo stejnou barvou jako barva ohraničující rámečku.
Odkaz, výrazně, nevýrazně - stejné styly v jakémkoliv místě webu, pokud to nebrání použitelnosti webu (kontrast písma s podkladem).
Zvýrazněné odstavce bez obrázku podbarvením
Úvodník, tučně, kurzíva, odkaz, výrazně, nevýrazně
Úvodník
Výstraha, tučně, kurzíva, odkaz, výrazně, nevýrazně
Výstraha
Potvrzení, tučně, kurzíva, odkaz, výrazně, nevýrazně
Potvrzení
Poznámka, tučně, kurzíva, odkaz, výrazně, nevýrazně
Poznámka
Rada, tučně, kurzíva, odkaz, výrazně, nevýrazně
Rada
Dulezite, tučně, kurzíva, odkaz, výrazně, nevýrazně
Dulezite
"Citace, tučně, kurzíva, odkaz, výrazně, nevýrazně
Citace"
Obrázkové odstavce Malé
Výstraha
Výstraha
Potvrzení
Potvrzení
Poznámka
Poznámka
Rada
Rada
Dulezite
Dulezite
"Citace
Citace"
Obrázkové odstavce Střední
Výstraha
Výstraha
Výstraha
Výstraha
Potvrzení
Potvrzení
Potvrzení
Potvrzení
Poznámka
Poznámka
Poznámka
Poznámka
Rada
Rada
Rada
Rada
Dulezite
Dulezite
Dulezite
Dulezite
"Citace
Citace
Citace
Citace"
Obrázkové odstavce Velké
Výstraha
Výstraha
Výstraha
Výstraha
Výstraha
Výstraha
Potvrzení
Potvrzení
Potvrzení
Potvrzení
Potvrzení
Potvrzení
Poznámka
Poznámka
Poznámka
Poznámka
Poznámka
Poznámka
Rada
Rada
Rada
Rada
Rada
Rada
Dulezite
Dulezite
Důležité
Důležité
Dulezite
Dulezite
"Citace
Citace
Citace
Citace
Citace
Citace"
Výhody - nevýhody
- Consectetuer quis tellus Vivamus natoque Donec
- Lorem ipsum dolor sit amet
- consectetuer quis tellus Vivamus natoque Donec
- Lorem ipsum dolor sit amet
- consectetuer quis tellus Vivamus natoque Donec
- Justo id amet consequat natoque commodo fringilla
- Consectetuer quis tellus Vivamus natoque Donec
- Lorem ipsum dolor sit amet
- consectetuer quis tellus Vivamus natoque Donec
- Lorem ipsum dolor sit amet
- consectetuer quis tellus Vivamus natoque Donec
- Justo id amet consequat natoque commodo fringilla
Seznamy
Nastylované základní seznamy - jemnný, číselný, definiční, bez odrážky. V rozšířené variantě šablony i obrázkový, číselný obrázkový. Nastylované prvky použité uvnitř v seznamech - tučné písmo, kurzíva, strong, odkaz.
Jmenný seznam - čtvercové odrážky
- odrazka
- odrazka s odkazem
- odrazka strong
- odrazka tučně - výrazně
- odrážka kurzíva
Jmenný seznam - obrázkové odrážky
- hlavní obrázková odrážka webu
- hlavní obrázková odrážka webu s odkazem
- hlavní obrázková odrážka webu strong
- hlavní obrázková odrážka webu kurzíva
Jmenný seznam - bez odrážek
- odrazka
- odrazka s odkazem
- odrazka strong
- odrazka tučně - výrazně
- odrážka kurzíva
Číselný seznam
- odrazka
- odrazka s odkazem
- odrazka strong
- odrazka tučně - výrazně
- odrážka kurzíva
Podbarvený číselný seznam
- jedna, tučně, kurzíva, výrazně, nevýrazně, odkaz
- dva
- tři
- čtyři
- pět
- šest
- sedm
- osm
- devět
- deset
Definiční seznam
- Termín 1
- Vysvětlení termínu 1
- Termín 2
- Vysvětlení termínu 2
- Termín 3
- Vysvětlení termínu 3
Obrázky
V rozšířené šabloně obrázková galerie. Zvětšení obrázku pomocí javascriptového efektu do pop-up okna.
Toto zarovnání se používá přímo v textech, nikoliv v blocích (např. úvodníky).
Obrázky volně na stránce bez možnosti zvětšení
Zarovnání doleva
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Zarovnání doprava
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Obrázek bez rámečku
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Zarovnání na střed
Obrázky volně na stránce s možností zvětšení
Zarovnání doleva
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Zarovnání doprava
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Lorem ipsum dolor sit amet consectetuer nec Vivamus sit wisi accumsan. Dolor hac condimentum pede quam In magna tellus semper id consectetuer. Consequat eu justo porta dui Nunc justo ut condimentum nibh diam. Habitasse fermentum et accumsan et non mattis ligula mauris neque pulvinar. Vestibulum tristique ultrices leo ligula hendrerit nulla id habitasse.
Obrázky ve fotogalerii
Fotogalerie se 3 obrázky:
Fotogalerie se 6 obrázky:
Fotogalerie s 9 obrázky:
Tabulky
Tabulka základního stylu.
| Kontaktní údaje | |
|---|---|
| firma: | WebPrezent |
| ulice: | Turkova 1346, I.patro |
| město: | 504 01, Nový Bydžov |
| mapa: | orientačně - v ČR podrobně - Nový Bydžov |
| GPS: | Loc: 50°14'42.804"N, 15°29'47.535"E |
Tabulky se záhlávím, barevné liché a sudé řádky. Tabulky různých velikostí, zarovnaných vlevo, vpravo nebo na střed.
| Kontaktní údaje | |
|---|---|
| firma: | WebPrezent |
| ulice: | Turkova 1346, I.patro |
| město: | 504 01, Nový Bydžov |
| mapa: | orientačně - v ČR podrobně - Nový Bydžov |
| GPS: | Loc: 50°14'42.804"N, 15°29'47.535"E |
| Kanceláře společnosti a korespondenční adresa: |
WebStudio WebPrezent |
| Turkova 1341 | |
| 504 01 Nový Bydžov |
| Mobil: | +420 777 279 355 |
| E-mail: | info@webprezent.cz |
| Www: | www.webprezent.cz |
| IČ: | 728 83 022 |
| DIČ: | CZ7908023178 |
Pracovní doba
| Pondělí | 8.00 - 16.00 |
| Úterý: | 8.00 - 16.00 |
| Středa | 8.00 - 16.00 |
| Čtvrtek: | 8.00 - 16.00 |
| Pátek: | 8.00 - 14.00 |