Specializovan² t²denφk o v²poΦetnφ technice
o Internetu
(CW 35/97)
WWW dφlna
╚ßry mßry -- rßmy bez rßm∙
Ji°φ Kosek ml.
Mnoho strßnek na Internetu mß grafickou ·pravu podobnΘ tΘ na obrßzku 1. Na prvnφ pohled by se mohlo zdßt, ₧e v²sledn² efekt -- navigaΦnφ odkazy v levΘ Φßsti a informace v pravΘ -- je dosa₧en pou₧itφm rßm∙. Ve skuteΦnosti tomu tak nenφ. GrafickΘ rozd∞lenφ strßnky na dv∞ Φßsti bylo dosa₧eno pou₧itφm vhodnΘho obrßzku na pozadφ. Jednalo se o ·zk² prou₧ek, kter² byl v levΘ Φßsti Φerven² a v pravΘ bφl² (obr. 1). Tento podklad se opakuje pod sebou podle pot°eby, tak₧e vyplnφ tolik mφsta, kolik je pot°eba.
Abychom mohli obsah strßnky umφstit p°esn∞ nad Φervenou a bφlou Φßst strßnky, pou₧ili jsme tabulku. Celß strßnka je vlastn∞ tvo°ena jednou tabulkou, kterß mß dva sloupce. U obou sloupc∙ je Üφ°ka pomocφ atributu WIDTH nastavena tak, aby jejich obsah vyÜel nad Φervenou, resp. bφlou Φßst strßnky. NaÜφ ukßzkovΘ strßnce tedy odpovφdß nßsledujφcφ zßpis v HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD><TITLE>
Ukßzka pou₧itφ vhodn∞ zvolenΘho pozadφ
</TITLE></HEAD>
<BODY BACKGROUND="zade
k.gif">
<TABLE WIDTH=600>
<TR>
<!-- PRVN═ SLOUPEC -- NA ╚ERVEN╔M -->
<TD WIDTH=200 VALIGN=TOP>
<DIV ALIGN=CENTER>
<IMG SRC="logo.gif">
<P><A HREF="xxx">Nabφdka produkt∙</A>
<P><A HREF="xxx">Cenφk</A>
<P><A HREF="xxx">Kontakt</A>
<P><A HREF="xxx">Objednßvky</A>
<P><A HREF="xxx">Seznam zam∞stnanc∙</A>
</DIV>
<!-- DRUH▌ SLOUPEC -- NA B═L╔M -->
<TD WIDTH=400 VALIGN=TOP>
<H1>Elektromix s.r.o.</H1>
Vφtejte na WWW-serveru nejlepÜφ osv∞tlovacφ firmy na sv∞t∞...
</TABLE>
</BODY>
</HTML>
Jak jste jist∞ vytuÜili, je obrßzek s prou₧kem, kter² vytvß°φ pozadφ, ulo₧en v souboru zadek.gif. Prvnφ sloupeΦek naÜφ tabulky mß Üφ°ku 200 pixel∙ a ten druh² 400. Z toho nßm logicky vyjde, ₧e Üφ°ka obrßzku pro podklad by m∞la b²t 600 pixel∙. V praxi je vÜak pot°eba prou₧ek ud∞lat ÜirÜφ (asi 640 bod∙), proto₧e tabulka je v₧dy posunuta kousek vpravo od levΘho okraje a Üφ°ka celΘ strßnky pak zabere vφce ne₧ 600 pixel∙. To by mohlo zp∙sobit, ₧e se prou₧ek podkladu bude opakovat i vedle sebe a na pravΘm okraji strßnky se objevφ ·zk² Φerven² prou₧ek.
Mo₧nß vßs te∩ napadne, proΦ po₧adovanΘho efektu dosahovat takto slo₧it∞ -- staΦφ p°ece pou₧φt rßmy. D∙vody pro zde popsanΘ °eÜenφ jsou dva. Za prvΘ elementy a atributy pro prßci s rßmy nejsou zatφm p°ijaty jako ₧ßdn² standard. Druh²m d∙vodem m∙₧e b²t to, ₧e p°i troÜe prßce a kouzlenφ s bu≥kami tabulky lze dosßhnout toho, ₧e n∞jak² obrßzek p°esahuje do obou Φßstφ strßnky (ΦervenΘ i bφlΘ). Vypadß to mnohdy velmi efektn∞ a p°i pou₧itφ rßm∙ si o takovΘm v²sledku m∙₧ete nechat jen zdßt.
Seznamy s grafick²mi odrß₧kami
Mnoha autor∙m webov²ch strßnek nestaΦφ puntφky a koleΦka, kterΘ se pou₧φvajφ jako odrß₧ky v neΦφslovan²ch seznamech. Mφsto nich pou₧φvajφ malΘ obrßzky, kterΘ majφ strßnce dodat osobitost a Üvih. Dejme tomu, ₧e jako odrß₧ku chceme pou₧φvat Üipku, kterou mßme ulo₧enu v souboru arrow.gif. V∞tÜina autor∙ pak seznam vytvo°φ zhruba takto:
<P><IMG SRC=arrow.gif> Prvnφ polo₧ka seznamu.
<P><IMG SRC=arrow.gif> Druhou polo₧ku u₧ ud∞lßme
delÜφ. M∞lo by b²t vid∞t, jak oÜkliv∞ to vypadß,
kdy₧ se text zalomφ do vφce °ßdek.
<P><IMG SRC=arrow.gif> T°etφ a poslednφ polo₧ka seznamu.
Na obrßzku 3 vidφme, ₧e druhß polo₧ka seznamu je p°φliÜ dlouhß a musela se rozd∞lit do dvou °ßdek. Druhß °ßdka polo₧ky pak nenφ odsazena, ale nep∞kn∞ zasahuje pod obrßzek odrß₧ky. Pomocφ tabulek m∙₧eme dosßhnout mnohem lepÜφho v²sledku. Vytvo°φme tabulku se dv∞ma sloupci. V prvnφm bude obrßzek Üipky a ve druhΘm vlastnφ text polo₧ky seznamu. Tφmto zp∙sobem zabrßnφme tomu, aby se text p°elil pod obrßzek Üipky. Nesmφme zapomenout na nastavenφ vhodnΘho zp∙sobu zarovnßnφ bun∞k tabulky. V ukßzce jeÜt∞ u obrßzku explicitn∞ urΦφme jeho velikost, aby se tabulka mohla vykreslit rovnou. Upraven² seznam zapφÜeme tedy jako (viz Obrßzek 4):
<TABLE WIDTH="100%">
<TR VALIGN=TOP ALIGN=LEFT>
<TD><IMG SRC=arrow.gif WIDTH=15 HEIGHT=13>
<TD>Prvnφ polo₧ka seznamu.
<TR VALIGN=TOP ALIGN=LEFT>
<TD><IMG SRC=arrow.gif WIDTH=15 HEIGHT=13>
<TD>Druhou polo₧ku u₧ ud∞lßme delÜφ. M∞lo by b²t vid∞t,
jak oÜkliv∞ to vypadß, kdy₧ se text zalomφ do vφce °ßdek.
<TR VALIGN=TOP ALIGN=LEFT>
<TD><IMG SRC=arrow.gif WIDTH=15 HEIGHT=13>
<TD>T°etφ a poslednφ polo₧ka seznamu.
</TABLE>
|