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

  1. odrazka
  2. odrazka s odkazem
  3. odrazka strong
  4. odrazka tučně - výrazně
  5. odrážka kurzíva

Podbarvený číselný seznam

  1. jedna, tučně, kurzíva, výrazně, nevýrazně, odkaz
  2. dva
  3. tři
  4. čtyři
  5. pět
  6. šest
  7. sedm
  8. osm
  9. devět
  10. 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

thumb-120x120

 

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

thumb-170x130

 

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

thumb-120x120

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

thumb-190x140

Obrázky volně na stránce s možností zvětšení

Zarovnání doleva

thumb-130x170

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

thumb-170x130

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:

thumb-170x130thumb-170x130thumb-170x130

Fotogalerie se 6 obrázky:

thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130

Fotogalerie s 9 obrázky:

thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130thumb-170x130

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

Odkazy

interní odkaz

externí odkaz

Webdesign 2014 · WebPrezent Tvorba webových stránek