it´s too late to be late again

Články



Úprava e-pohlednice pomocí kaskádových stylů


Vytvořit si elektronickou pohlednici podle vlastních představ není nijak složité. Článek ukazuje jednoduché řešení.

Internetové pohlednice jsou velmi oblíbené, což je celkem pochopitelné. Na webu jich najdeme hodně, často s velmi pěkným designovým provedením. Naprogramovat si takovou e-pohlednici není vůbec těžké – stačí mít vhodný obrázek, nejčastěji ve formě fotografie, trochu znalostí o kaskádových stylech a výsledek je na světě. Tedy na webu.
Při přípravě tohoto čánku jsem vycházel z mé oblíbené publikace Eric Meyer o CSS - ovládněte kaskádové styly!, kterou doporučuji každému uživateli CSS (přiblížení knihy najdete v sekci Recenze).

Design celé elektronické pohlednice byl postupně upravován v těchto krocích:
1. Výběr fotografie, která byla lehce připravena úpravou v editoru Zoner ME 6.
2. Definice stylu dokumentu. Kaskádové styly jsem vkládal přímo do vlastní stránky v části <head>, což normálně nedělám, ale zde to je účelové.
<style type="text/css" media="screen">
body {text-align: center; font-family: verdana, helvetica, sans-serif; font-weight: bold;}
div#pohlednice {width: 600px; margin-left: auto; margin-right: auto; position: relative;}
div#pohlednice img {border: 1px solid navy;}
div#pozdrav {position: absolute; top: 15px; left: 0; width: 600px; font-size: 18px; color: #000099; padding: 5px 5px 5px -2px;}
div#podpis {font-weight: bold; font-size: 16px; border: 1px solid black; background: #ffffee; width: 290px; margin: 0 auto; padding: 0.25em; position: absolute; top: 415px; left: 150px; right: 150px;}
div#autor {font-size: 12px; text-align: right; font-weight: normal; position: absolute; top: 1px; left: 0; right: 1; width: 100%; color: #999999;}
</style>
3. Do části <body> jsem již vkládal potřebné údaje umístěné do identifikátorů.
<div id="pohlednice">
<img src="images/stene2.jpg" alt="Letní žízeň" width="600" id="image" />
<div id="pozdrav">
...šílené horko způsobuje psí kousky...
</div>
<div id="podpis">
Pozdrav horkého léta 2004
</div>
<div id="autor">
Foto: Letní žízeň, Petr Chlebek
</div>
</div>
A to je všechno. Je to docela dobré cvičení na zvládnutí kaskádových stylů v jednoduché stránce. Nyní mi stačí jen měnit např. umístění textu. V případě, že bych chtěl mít takových pohlednic více, je vhodnější připravit si externí soubor s kaskádovými styly, a potom pouze upravovat výsledný obrázek výběrem vhodných atributů. Náhled uvedené pohlednice je uveden v odkazu pod článkem.
>>>>>

15-09-2005

Na Timovi
Ve světě