Obrßzky

Grafika  je asi ta nejd∙le₧it∞jÜφ Φßst webovΘ prezentace, kterß krom∞ obsahu strßnky p°itßhne nebo odpudφ jejφ nßvÜt∞vnφky.

Ji₧ z minulΘho dφlu snad vφte, jak²m zp∙sobem p°idat obrßzek na pozadφ strßnky. Je to pomocφ vlastnosti BACKGROUND p°φkazu <BODY>. Pokud ale na pozadφ pou₧φvßte grafiku, m∞jte na pam∞ti dobrou Φitelnost. Pokud budete pou₧φvat jinΘ ne₧ jednobarevnΘ pozadφ, pou₧φvejte spφÜe tmavÜφ barvy a obrßzky, ze kter²ch se dajφ vysklßdat dla₧dice.

Obrßzek m∙₧eme vlo₧it i do textu. K tomu slou₧φ znaΦka <IMG>. Povinn∞ musφte definovat vlastnost SRC, kterß udßvß cestu k souboru. I v tomto p°φpad∞ je vhodnΘ pou₧φvat relativnφ cestu p°ed absolutnφ. Dßle byste m∞li dodr₧et pravidlo, ₧e nepou₧φvßte grafickΘ soubory z jinΘho serveru. Navφc by m∞ly b²t grafickΘ soubory v jednΘ slo₧ce, kterß by m∞la mφt jmΘno images nebo grafika. Zde je mal² p°φklad: <IMG SRC="images/logo.gif">.

DalÜφ vlastnost, kterou je vhodnΘ doplnit, je alternativnφ text k obrßzku. Toto se ud∞lß pomocφ vlastnosti ALT, tedy nap°φklad takto: <IMG SRC="images/logo.gif" ALT="Logo naÜφ firmy">. Mo₧nß, ₧e se ptßte, k Φemu je tento text, kdy₧ se nßm zobrazφ grafika. Text je zde kv∙li nßsledujφcφm situacφm:

  • zobrazφ se v bublinovΘ nßpov∞d∞, pokud u₧ivatel najede nad grafick² prvek myÜφ
  • pokud u₧ivatel nemß zapnuto zobrazovßnφ grafiky
  • pokud u₧ivatel pou₧φvß textov² prohlφ₧eΦ / p°evod strßnek do °eΦi pro nevidomΘ

Alternativnφ text byste ale nem∞li dopl≥ovat u r∙zn²ch grafick²ch dopl≥k∙, ale v₧dy, kdy₧ jej pou₧ijete, sna₧te se, aby text dob°e vystihoval grafick² prvek a byl dob°e srozumiteln².

Pokud budete p°i tvorb∞ strßnek myslet na nßvÜt∞vnφky, m∞li byste doplnit tΘ₧ informace o v²Üce a Üφ°ce grafickΘho prvku. Prohlφ₧eΦ toti₧ ve strßnce vyhradφ mφsto pro zobrazenφ a nemusφ tak nßvÜt∞vnφk Φekat na naΦtenφ celΘho obrßzku. èφ°ku napiÜte do atributu WIDTH a v²Üku do HEIGHT. UrΦit jφ m∙₧ete v obrazov²ch bodech (nap°. WIDTH="100") nebo v procentech Üφ°ky/v²Üky okna prohlφ₧eΦe (nap°. WIDTH="50%").

Grafice, kterß nenφ v samostatnΘm odstavci (mezi dv∞ma odstavci), m∙₧ete chtφt urΦit zarovnßnφ oproti textu (ALIGN). Zde mßte vypsßny vÜechny mo₧nosti:

Na webov²ch strßnkßch byste m∞li pou₧φvat pouze rozÜφ°enΘ formßty: GIF, JPEG, PNG. Pokud budete namφtat, ₧e BMP je takΘ rozÜφ°en² formßt, mßte pravdu, ale proto₧e je nekomprimovan², nenφ pro web v∙bec vhodn². Pokud chcete na web umφstit velkou fotografii, vytvo°te nßhled, kter² na strßnce pou₧ijete jako odkaz na velk² soubor (ne ka₧dΘho to bude zajφmat a tak dßte dotyΦnΘmu mo₧nost v²b∞ru). V popisu odkazu je vhodnΘ podotknout velikost souboru. K tvorb∞ nßhled∙ se hodφ programy IrfanView nebo XnView (viz. Chip CD 9/01).

Obrßzek vlo₧φte klßvesovou zkratkou CTRL+I. V Tag inspektoru m∙₧ete tlaΦφtkem se slo₧kou vybrat p°φsluÜn² obrßzek.
Obrßzek m∙₧e b²t pou₧it jako klikacφ mapa. Tu vytvo°φte pomocφ Kouzelnφka, kterΘho spustφte Φtvrt²m tlaΦφtkem zprava na spodnφm panelu. Vyberte obrßzek a zadejte jmΘno mapy (libovolnΘ, ale musφ b²t v rßmci dokumentu jedineΦnΘ). PotΘ se otev°e druhΘ okno. V n∞m tlaΦφtkem novß oblast vytvo°te novou polo₧ku, zadejte jmΘno, vyberte tvar oblasti nakreslete a zadejte do pole HREF odkaz. Oblasti m∙₧ete p°ejmenovßvat, mazat, kopφrovat atd.