Jak udržet Web graficky konzistentní

Jistě je jednoznačně jen na vás, zda navrhnete webové stránky se třemi různými barvami pozadí na osmi stránkách, s...


Jistě je jednoznačně jen na vás, zda navrhnete webové stránky se třemi různými
barvami pozadí na osmi stránkách, se záhlavím nejvyšší úrovně zobrazeným písmem
v rozsahu od 14 do 22 pixelů (typu sans serif), s dílčím záhlavím měnícím se od
lehce vyznačeného až po tučně zvýrazněné (typu bold italic) na takovém vzhledu
vaší stránky samozřejmě můžete trvat. Avšak výsadním právem uživatele je tuto
stránku vůbec nenavštívit. A stane-li se to, pak možná přece jen zauvažujete o
jiné variantě. Rozhodnete-li se, že by vaše stránky měly být graficky
konzistentní, potom popřemýšlejte o využití kaskádových stylů.
Úvod do CSS
Pokud si myslíte, že přizpůsobit se určitému stylu překáží tvůrčím možnostem v
navrhování webové stránky, pak jste ještě neobjevili možnosti kaskádových stylů
CSS (cascading style sheets) a jejich velkého bratra, souboru CSS. S jejich
pomocí si zajistíte, aby obsah celého vašeho Webu měl konzistentní úpravu,
zatímco vy se můžete zaměřit na dodání puncu elegance.
CSS je globální formát definovatelný pro stránku nebo skupinu stránek. Znáte-li
HTML, můžete vytvořit styl stránky ručně. Nejste-li zvyklí pracovat s HTML, pak
se můžete spolehnout na některý z dobrých editorů HTML nebo webových stránek,
které vytvoří styl stránky za vás. Styly jsou kompatibilní s různými verzemi:
starší prohlížeče jednoduše ignorují CSS kód a používají předem zadaný formát
pro elementy HTML. Pokud k tomu dojde, vaše stránky nebudou mít takový výsledný
vzhled, jaký jste si přáli, ale přesto se budou zobrazovat a veškerý obsah bude
s největší pravděpodobností velmi dobře čitelný.
Krása stylové definice spočívá v tom, že vkládáním jednoduchých instrukcí do
HTML dáváte svým stránkám kultivovanější formát. Skladba příkazu je podobná
příkazu, jakým byste definovali jednotlivé odstavce v obsahu stránky, ale
zadáním v CSS má příkaz globální účinnost.
Ve hře jsou kaskádové styly
Pomocí definovaného stylu můžete vytvořit jeden formát záhlaví a každé další
záhlaví umístěné na webové stránce již nebudete muset formátovat. Můžete určit
druh písma pro všechna dílčí záhlaví, zadat větší mezeru mezi jednotlivými
odstavci, zadat odrážku, která se okopíruje do každého bloku a vytvořit
propojení mezi bloky. V uvedených případech vytváříte formát jen jednou, každý
nový odstavec pak nemusíte definovat znovu. Bez nadbytečného kódu se webová
stránka rychleji načítá a zachovává si konzistentní úpravu.
Navíc, s externě připojeným souborem CSS si zajistíte, aby na celém vašem Webu
byly použity zadané formáty. V takovém případě se jednoduchá editace v jednom
textovém souboru projeví v celkové změně v celém výstupu vašeho webového
serveru. Tato vlastnost může být stejně nebezpečná jako užitečná, proto byste
měli globální implementaci provádět opatrně.
Stylem můžete určovat typ písma, velikost, barvu, pozadí, okraje, odsazení a
řadu dalších ještě zdobnějších atributů. Mnoho instrukcí HTML (tags) má vazbu
rodič-dítě a styly respektují tyto vazby. Jestliže zadáte podmínku, aby
normální text měl námořnickou modř, a potom zadáte instrukci <i> nebo <b> pro
vybraný text, pak písmo vyznačené kurzivou (italic) nebo tučně (bold) bude také
v modré barvě. Samozřejmě můžete definovat, aby text psaný kurzivou byl vždy
žlutý, nebo blikající, nebo oboje ale zrovna tohle byste asi neudělali, že ne?
Vždycky něco navíc
Specifikace CSS jde do takové hloubky a má tak složitou hierarchii, že může
rozplakat i statného muže. Podíváte-li se jen o jeden stupeň níž pod povrch
kaskádových stylů, najdete třídy instrukcí, které vám umožní vytvářet dílčí
formáty, jako je třída, která změní barvu písma v určitém odstavci.
Styly nejenže vám poskytují více kontroly nad řízením návrhu webové stránky,
ale nabízejí něco víc. Úpravy pozadí, které se nepřekrývá, obrazy rozprostřené
za textovými odstavci, kompletně řízené prokládání, odsazení odstavců zkrátka,
v CSS získáváte novou truhlu plnou hraček.
Lepší ovládání typů písma
Pozorní uživatelé se vysmějí utopické představě kybernetického vesmíru. Kde je
problém? Přestože vytvoříte svoji webovou stránku tak, aby se zobrazovala
například v písmu Eras Ultra, kolik uživatelů, kteří navštíví vaši stránku,
bude mít tyto fonty nainstalovány? Ti, kdo jej nemají, uvidí základní serif
standard. Přesto můžete maximalizovat šanci, že se vaše stránky návštěvníkům
zobrazí v takovém typu písma, které je podle vás vhodné. Můžete jich nabídnout
hned několik najednou.
Například můžete zvolit 6 typů písma zaručujících požadované zobrazení stránek.
Není-li žádný z uvedených typů instalován, můžete přistoupit na "jakýkoli typ
sans serif". Při aplikaci na konkrétní odstavec bude definice vypadat
následovně:
<font face="Verdana, Futura Md BT, Eras Book, Zurich BT, Tahoma, CastleT,
sans-serif"> sem přijde text...</font>
Na základě tohoto příkazu prohlížeč začne u prvního typu písma a bude
pokračovat v seznamu, dokud nenarazí na písmo, které se nachází v systému
návštěvníka webové stránky. Není-li žádný z uvedených typů písma k dispozici,
návštěvníkovi se vygeneruje obecný sans serif, pravděpodobně Arial.
Je to jedna z nejúčinnějších metod, kterou může tvůrce webové stránky uplatnit,
ale v případě metody zadání v HTML by musel být tímto způsobem definován každý
odstavec. A takové nafukování definice by bylo téměř hrdelním zločinem.
Řešením, samozřejmě, je použít definici stylu umožňující jednorázové zadání
formátu. Syntaxe příkazu se trochu změní:
p {font-family: Verdana, "Futura Md BT", "Eras Book", "Zurich BT", Tahoma,
CastleT; sans-serif}
Použití CSS představuje důmyslnou strategii, z níž bude mít užitek každý
odstavec textu na stránce a při jejímž použití nedojde k obávanému nafouknutí
definice formátu.
Metoda globálního přístupu
Většina lidí, kteří odhalí skryté bohatství stylů, udělají další krok a začnou
používat propojené styly. Jedna věc je ovládat formát prvků na stránce, úplně
něco jiného je ovládat je v rozsahu celého vašeho Webu.
K propojení vaší stránky s externím stylem vytvořte definice v obyčejném
textovém souboru místo v záhlaví webové stránky. Skladba definice je identická
při zadání první definice můžete použít metodu vystřihni a vlož
(cut-and-paste). Potom umístíte následující příkaz na každou stránku, kde se má
zvolený styl použít:
<link rel="stylesheet"
href="styles.css">
Sami se rozhodněte, jak soubor pojmenujete. Od této chvíle, kdykoli zadáte
nějakou změnu ve styles.css, se tato změna kaskádovitě promítne do všech
souborů ve vaší stránce.
Propojené styly vás přivedou na úplně nové hřiště, nabídnou vám dříve nevídaný
rozsah ovládání všech kritických prvků vašeho Webu. Neuvěřitelně snadno můžete
experimentovat s novými formáty a uplatnit změny jednoduše zadáním nového
souboru .css. Můžete také vytvářet paralelní .css a střídat jejich použití.
Můžete vytvořit jednoduchý zápis, který bude aktivovat jeden soubor .css každé
pondělí, druhý soubor .css každý pátek a třetí soubor každou neděli.
Nástrahy použití kaskádových stylů
Zatímco starší prohlížeče (předchůdci Internet Exploreru verze 3 a Navigator 4)
styly vůbec nepodporují, v současnosti je na pováženou, že modernější
prohlížeče podporují styly nevyváženě. Elementy stránek vypadají jinak v
prohlížečích Netscape a jinak v prohlížečích Internet Explorer a někdy jsou
tyto rozdíly nemalé. Prokázalo se to především při použití exotičtějších
formátů, které CSS nabízí jako je nastavení polohy, rozvrstvení, clipping a
efekty na pozadí tyto možnosti nejsou v určitých úrovních podporovány oběma
typy prohlížečů.
Jako obvykle budete muset vytvářet návrh podle společného standardu a od
počátku jej často prověřovat v náhledu. Zahrnete-li do návrhu prvky vyžadující
precizní zpracování, možná je budete muset vytvářet lokálně, raději než pomocí
instrukce stylu.
Přínosy používání stylů ve všech pohledech přesahují riziko. Uplatnění
globálních stylů pomáhá odděleně udržovat požadovaný formát a funkci webové
stránky. Design prováděný v HTML asi není lákavou představou pro nikoho a
specifikace musí urazit ještě dlouhou cestu, než ve vás vyvolá pocit, jako
byste pracovali v prostředí Adobe Photoshop nebo CorelDRAW. Ale styly
představují pomoc hlavně v tom směru, že umožňují zadat definici pro design a
dávají možnost vytvářet autorsky specifické komponenty webových stránek.
Skoro před třemi desítkami let prohlásila zpěvačka a herečka Julie Andrewsová:
"Disciplína je určitým druhem svázanosti, který mě osvobozuje." A to je případ
stylů. Máte-li jistotu, že je o vaše formáty postaráno, můžete soustředit svoji
tvůrčí sílu na zhotovení webové stránky, která sdělí vaši myšlenku co
nejúčinněji.
0 1771 / pen

Definice souboru CSS a odpovídající stránka v HTML
Komentáře jednotlivých částí zdrojového textu jsou uvozeny dvěma lomítky, v
textu HTML je podtržítkem označeno nastavení tříd v jednotlivých tazích.
// definice parametrů pro tag BODY
{BODY
BACKGROUND-COLOR: #4455ac; MARGIN: 0px
}
// definice písem pro tag TD, class topnavi
{TD.topnavi
FONT-FAMILY: cursive; FONT-SIZE: small; FONT-WEIGHT: bold; PADDING-BOTTOM: 1px;
PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px
}
// definice barev a fontů pro tag A, class navi
{A.navi
BACKGROUND-COLOR: transparent; COLOR: white; FONT-FAMILY: cursive; FONT-SIZE:
x-small; FONT-WEIGHT: bold; TEXT-DECORATION: none
}
// definice barev a fontů pro tag TABLE, class main
{TABLE.main
BACKGROUND-COLOR: white; BORDER-BOTTOM: silver thin outset; BORDER-LEFT: silver
thin outset; BORDER-RIGHT: silver thin outset; BORDER-TOP: silver thin outset
}
// definice barev a fontů pro tag A, class linky; hover znamená, že se tato
definice použije pro stav, kdy je nad linkem ukazatel myši
{A.linky:hover
BACKGROUND-COLOR: transparent; COLOR: black; FONT-FAMILY: "Arial CE",
"Helvetica CE", "Arial", "Helvetica"; FONT-SIZE: small; TEXT-DECORATION:
underline
}
Fragmenty stránky HTML, která soubor CSS využívá
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
...
<BODY>
//definici v souboru CSS lze "přebít" definicí v HTML souboru a tu zase
definicí přímo na místě použití tagu
<TABLE bgColor="#212387" cellPadding="0" cellSpacing="0" class="top"
width="100%">
<TR>
<TD align="middle" width="14%"><A class="navi" href= "http://www.xxxxxx.cz/"
...
<TABLE cellPadding=6 class=main height="100%" width="100%" valign="top">
<A class=linky href="http://www.xxxxxx.cz/xx.html">

Zdroje informací o css
Neoficiální domácí stránka CSS: Průvodce, reference, články, linky
www.w3.org/Style/CSS
Tabulka kompatibility prohlížečů: Podrobný seznam všeho, co kde funguje a co ne
http://webreview.com/pub/Style_Sheets
CSS Pointers Group: internetová stránka Potpourri s řadou užitečných informací
http://css.nu
Webmonkey: průvodce práce se styly (Style sheets tutorial)
http://hotwired.lycos.com/webmonkey/98/15/indexOa.html
Web Workshop: příručka uživatele pro práci se styly
http://msdn.microsoft.com/workshop/author/css/css.asp
WebReference.com: Webmasters reference site
www.webreference.com/dev/style









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.