Diel 2 - CSS2 - TopStyle (CSS štýly a ako na ne)

Pre všetkých, ktorí sa hrajú s webstránkami. Skvelý soft na editáciu CSS štýlov, ktorý sa dodáva v zadarmo aj za prachy verzii.

Čo to je CSS?

CSS je skratka, ktorá v preklade znamená kaskádové štýly. Ide o relatívne nový spôsob, akým sa začína čoraz častejšie riešiť dizajn webstránok. Vytvoríte HTML stránky, ktoré nemajú žiadny dizajn, iba obsah. Dizajn určíte až pomocou štýlov CSS. Výhodou tejto technológie je, že vzhľad celého webu (farby, veľkosti písma, rámčeky, pozadia...) môžete neskôr úplne zmeniť úpravou jediného súboru, ktorý obsahuje definície CSS štýlov. Keďže na túto technológiu sa pýta čoraz viac ľudí, venujem jej krátky miniseriál. Dnes začínam programom, v ktorom sa CSS štýly – onen slávny jediný súbor, ktorý môže zmeniť váš web – pohodlne vytvárajú.

Ako na to?

Napísať CSS štýly zvládne človek aj v Notepade, najmä ak je profík. Laika však môže zaskočiť, že nevie, čo sa v CSS vlastne dá a čo to robí. Potom je takýto nástroj požehnaním!

Pre bežného smrteľníka je 50 dolárikov za takýto program dosť, a preto autori myslia aj na nás, čo si chceme napísať CSS pre svoju osobnú stránku, potom ešte raz a potom zas až o rok. Pre nás je určený TopStyle Lite – jednoduchá a od mnohých funkcií odľahčená verzia, s ktorou sa však dá slušne pracovať. Profesionál asi skôr siahne po plnej verzii, za ktorú síce zaplatí, ale získa mnoho užitočných vlastností. Stránka programu je tu: www.bradsoft.com/topstyle a stiahnuť si môžete demoverziu plnej, alebo Lite verziu, ktorá je zadarmo.

TopStyle Lite

Odľahčená verzia má jediný vážny problém – nezobrazuje priamo tú stránku, ktorú máte na webe, iba stránku, na ktorej je zoznam prvkov, s ktorými práve pracujete. V niektorých prípadoch je to celkom výhodné, inokedy to veľmi vadí. Ale darovaný kôň nemá čo chodiť k zubárovi. Ak chcete vidieť, otvorte si stránku v prehliadači. Na konci článku nájdete aj jeden trik.

Pohľad na Lite verziu. V ľavom hornom okne vidíte textovú verziu štýlov tak, ako by ste ju písali v Notepade. Vpravo hore je najdôležitejší nástroj pre začiatočníka – zoznam parametrov, ktoré sa dajú ovládať. Dolu vidíme náhľad, ako bude stránka nakoniec vyzerať. Na modrom pozadí sú zobrazené pripravené rámce, v ktorých budú bannery, text, menu a podobne.

Napríklad plánujete vytvoriť štýl, ktorý určí, ako má vyzerať hlavný nadpis. V reči HTML sa volá hlavička

. Ak sa v CSS nevyznáte, stačí, ak si budete prezerať pravý horný stĺpec s vlastnosťami (a je ich teda požehnane) a ak vás nejaká zaujme, kliknete na ňu.

Pohľad na možnosti výberu vlastností. Chcete napríklad vybrať farbu pozadia. Pretože farba #00263E málokomu niečo hovorí, program ponúkne základné farby alebo „Color...“, po zvolení ktorého vyskočí podrobná paletka farieb.

Takto hneď vidíte nielen to, aké vlastnosti sa vôbec štýlom dajú riadiť, ale aj ich možné hodnoty. Napríklad chcete, aby nadpis mal pásik vpravo, na zdôraznenie.

Nájdete si „pravý okraj“ a program vás už vedie, pretože vidíte, že treba určiť, aký má byť hrubý (thin = tenulinký), ako má vyzerať (vidíte vo vyskakovacom menu možnosti, ako bodkovaný, normálny, dvojitý...) a akej má byť farby.

S takouto pomocou samozrejme svoj prvý CSS štýl napíšete rýchlo, dokonca sa asi zaobídete aj bez podrobného štúdia hrubých manuálov, pretože hneď vidíte, ako to celé vyzerá. Kto nevie po anglicky, tých pár slov (ako napríklad „okraj“, „bodkovaný“, „pozadie“, či „čiara“) si ľahko nájde. Veľa ich nie je, netreba sa báť.

Rovnako dobrou správou je, že novšie prehliadače vidia web, tvorený pomocou CSS, prakticky rovnako. Rozdiely síce sú, ale malé, pre amatérske účely celkom zanedbateľné.

TopStyle Pro

Profesionálna a platená verzia programu obsahuje neporovnateľne viac možností. Predovšetkým si môžete vyberať, na ktorej stránke chcete vidieť účinky tvoreného štýlu. Môžete si preddefinovať mnoho vecí, napríklad akú verziu HTML má náhľad simulovať. Dokáže kontrolovať čistotu syntaxe, upozorňovať, že požadujete vlastnosť, ktorá sa nemusí korektne zobraziť v prehliadačoch, ktoré určíte. Umožní otvoriť viacero štýlov naraz a prepínať sa medzi nimi. Ak sa rozhodujete pre nejakú malú zmenu, dobre sa to porovnáva. Vie exportovať štýly do súboru CSS, či HTML stránky.

Koľko monitorov máš, toľko krát si...

...rýchlejší. TopStyle Pro je klasickou ukážkou programu, pri ktorom oceníte, ak na vašom stole trónia dva monitory a z počítača idú dva videovýstupy. Na jednom monitore totiž môžete riadiť parametre a na druhom okamžite sledovať, aké majú účinky.

V rovnakom režime sa dá pracovať aj v Lite verzii, avšak tu musí byť druhým oknom váš prehliadač.

Sľúbený trik na záver

Majitelia Lite verzie môžu s úspechom využiť parameter na automatické prekreslenie stránky. Na čas, kým editujete štýl, vložte do hlavičky stránky (okrem tých, čo v nej máte) tento tag:

<meta http-equiv="refresh" content="5">

Spôsobí to, že sa stránka automaticky každých 5 sekúnd znovu načíta. Po každej úprave štýlu, ktorú chcete vidieť na skutočnej stránke, stačí, aby ste štýl uložili a vzápätí uvidíte výsledok.
(Keď budú štýly hotové, nezabudnite znovunačítavanie z hlavičky odstrániť.)

a