Jak vyzrát na perfektní grafický layout?

Jiří Kosek ml.

Pokud chceme vytvořit stránku, která má speciální požadavky na rozmístění jednotlivých grafických prvků, mohou nám v tom pomoci tabulky, kterým jsme již věnovali dva díly našeho seriálu. Na toto téma nelze hovořit příliš teoreticky, vše si tedy ukážeme na příkladě. Dejme tomu, že chceme vytvořit domovskou stránku fiktivního serveru zaměřeného na sport. Vzhled stránky, kterou chceme vytvořit si můžeme prohlédnout na obrázku 1.

Obr. 1: Stránka s náročným layoutem

Rozmístění jednotlivých obrázků a odkazů je dosaženo šikovně použitou tabulkou. Celá stránka (kromě nadpisu) je tabulka s vhodně sloučenými buňkami (viz obr. 2).

Obr. 2: Umístění objektů v buňkách tabulky

Podíváme-li se na zdrojový kód stránky, neobsahuje až tak nic speciálního:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Sportovní super-server</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>Vítejte na sportovním super-serveru</H1>

<TABLE WIDTH="100%" ALIGN=CENTER BORDER>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD ROWSPAN=4><IMG SRC="sportlogo.gif">
    <TD WIDTH=150><A HREF="beh.html"><IMG
        SRC="beh.gif" ALT="Běh" BORDER=0></A>
    <TD WIDTH=150><A HREF="baseball.html"><IMG
     SRC="baseball.gif" ALT="Baseball" BORDER=0></A>
    <TD WIDTH=150><A HREF="kopana.html"><IMG
     SRC="kopana.gif" ALT="Kopaná -- fotbal" BORDER=0></A>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD HEIGHT=40><A HREF="beh.html">Běh</A>
    <TD><A HREF="baseball.html">Baseball</A>
    <TD><A HREF="kopana.html">Kopaná -- fotbal</A>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD COLSPAN=2><A HREF="sjezd.html"><IMG
        SRC="sjezd.gif" ALT="Sjezd na lyžích" BORDER=0></A>
    <TD><A HREF="skok.html"><IMG
         SRC="skok.gif" ALT="Skok do výšky" BORDER=0></A>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD COLSPAN=2><A HREF="sjezd.html">Sjezd na lyžích</A>
    <TD><A HREF="skok.html">Skok do výšky</A>
</TABLE>

</BODY>
</HTML>

Obr. 3: Naše stránka v Lynxu nedopadla moc dobře

Pomocí tabulky jsme informace velice přehledně uspořádali na obrazovce. Co se však stane v prohlížeči, který tabulkám nerozumí? Můžeme se na to podívat na obrázku 3. Tam je výsledek naší stránky zobrazen ve znakovém prohlížeči Lynx. Obrázky zmizely, tabulky jakbysmet a přehledné formátování je fuč. Přesto situace není zcela ztracená. Vše by v Lynxu vypadalo mnohem lépe, kdyby odkazy byly uspořádány pod sebou. To lze zařídit celkem snadno. Na konec obsahu každé buňky přidáme tag <BR>. Ten způsobí v Lynxu, který ignoruje tabulky, přechod na nový řádek. Grafické prohlížeče tento tag vůbec neovlivní, protože v buňce není za <BR> nic, co by se mělo zobrazit. Zápis stránky upravíme a výsledek si prohlédneme na obrázku 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Sportovní super-server</TITLE>
</HEAD>

<BODY>
<H1 ALIGN=CENTER>Vítejte na sportovním super-serveru</H1>

<TABLE WIDTH="100%" ALIGN=CENTER BORDER>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD ROWSPAN=4><IMG SRC="sportlogo.gif">
    <TD WIDTH=150><A HREF="beh.html"><IMG
        SRC="beh.gif" ALT="Běh" BORDER=0></A><BR>
    <TD WIDTH=150><A HREF="baseball.html"><IMG
        SRC="baseball.gif" ALT="Baseball" BORDER=0></A><BR>
    <TD WIDTH=150><A HREF="kopana.html"><IMG
     SRC="kopana.gif" ALT="Kopaná -- fotbal"
BORDER=0></A><BR>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD HEIGHT=40><A HREF="beh.html">Běh</A><BR>
    <TD><A HREF="baseball.html">Baseball</A><BR>
    <TD><A HREF="kopana.html">Kopaná -- fotbal</A><BR>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD COLSPAN=2><A HREF="sjezd.html"><IMG
        SRC="sjezd.gif" ALT="Sjezd na lyžích"
BORDER=0></A><BR>
    <TD><A HREF="skok.html"><IMG
        SRC="skok.gif" ALT="Skok do výšky"
BORDER=0></A><BR>
<TR ALIGN=CENTER VALIGN=TOP>
    <TD COLSPAN=2><A HREF="sjezd.html">Sjezd na
lyžích</A><BR>
    <TD><A HREF="skok.html">Skok do výšky</A><BR>
</TABLE>

</BODY>
</HTML>

Obr. 4: Po úpravě je naše stránka již použitelná i v Lynxu

TIP: Ponaučení, které plyne z ukázky je jednoznačné. Než pustíme naše stránky do světa, měli bychom si je prohlédnout alespoň v těch nejpoužívanějších prohlížečích a zkontrolovat, zda je výsledné zobrazení podle našich představ. Dnes jsou asi nejpoužívanějšími prohlížeči Internet Explorer, Netscape Navigator a znakový prohlížeč Lynx.