Řežba webu V
Už máme většinu základních kamenů našeho designu za sebou, ale naformátování textu se vynechat nedá.
Typo. Při formátování využijeme alternativní text
Lorem Ipsum, které se dá v latině stáhnout z lipsum.com a pokud už vás latina nudí, tak
je na webu generátor
i v jiných jazycích. Já jsem tentokrát použil Esperanto. Podívejme
se na strukturu textu – k dispozici budeme mít nadpisy h2 (na
začátku každé stránky) a h3 (v textu), odstavec
p a nakonec se vrhneme na odkazy. Defaultní font celého webu je
Trebuchet MS, což musíme nadefinovat v tagu body (použijeme Pixyho definice
písem). html, body {background: #E30947 url(images/pozadi.jpg)
repeat-x;padding: 0;margin: 0;text-align: center;height:
100%;font-family: „Trebuchet MS“, „Geneva CE“, lucida,
sans-serif;font-size: 100%;color: #282728} Základní velikost
písma je zatím
příliš velká, takže ji o něco zmenšíme, naformátujeme nadpis
h2 a upravíme polohu menu tak, aby nadpis i menu začínali
stejně. div#main {font-size: 0.75em;line-height:1.5;} #telo {margin:0
14px 0 178px} /*zvýšíme pravý okraj těla dokumetu*/ h2
{color: #832B4F;padding: 0;margin: 0 0 0.25em
0;font-size:1.6em;font-weight:normal} div#menicko {margin: 8px
0 0 14px;_margin: 8px 0 0 7px;} V příkladu
9 vidíme, že další formátování se bude týkat odstavců (a navíc do
textu přihodíme nadpis h3). Odstavce zarovnáme do bloku a
upravíme jejich okraje h3 {color: #832B4F;padding: 0;margin: 0 0 1em
0;font-size:1.2em;font-weight:bold} p {margin: 0;padding: 0 0 1em 0;text-align:
justify} Takže nám vznikne příklad 10. Nyní
už nám dnes zbývá jen CSS definice odkazů. Odkazy budou podtrhané
(přikláním se k dogmatu
W4D – uživatel odkaz na první pohled nepozná, pokud není podtržený)
a modré barvě. a, a:link {text-decoration: underline;color: #2B6983}
a:visited {color: #1E495C} a:hover, a:link:hover, a:visited:hover {color:
#3C832B} Pokud nemáte barevnou inspiraci, tak použijte Pixyho
generátor barevných schémat (jako
já). Výsledek je v příkladu 11.
V příštím díle budeme dolaďovat detaily a s největší
pravděpodobností seriál zakončíme.
Komentáře
Pěkný a názorný seriál, ale k uvedenému postupu bych měl pár připomínek:
1. navigace je s vypnutými obrázky a zapnutými styly nepřístupná;
2. nevhodně zvolené formáty obrázků – použitím adekvátních formátů (formáty gif a jpg mají odlišný styl komprese a každý se hodí na jiný typ grafiky) by se datová velikost obrázků dala bez problémů srazit na méně než polovinu – přes 50kb na takto jednoduchou grafiku je opravdu dost;
3. použití obrázků i tam, kde lze totéž bez problémů řešit pomocí CSS (pozadí telo.jpg).
vs – Ano, všechny tyto možnosti jsem zmiňoval v jendnom z dílů, o menu vím, uvidíme co přinese další díl.. :-)
Když se podívám na ten webík v „příkladu 11,“ tak se mi líbí, jak je udělaný, až na ten přechod v levé a pravé části stránky. Ta barva je příšerná a řvoucí, skoro se nemůžu soustředit na text obsahu…