COMPUTERWORLD
Specializovaný týdeník o výpočetní technice
o Internetu
(CW 39/97)

Vytváříme si domovskou stránku

Jiří Kosek ml.

Jak vyzrát na perfektní grafický layout?

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.

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).

Podíváme-li se na zdrojový kód stránky, neobsahuje nic až tak 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>
<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>
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>
<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>

TIP: Ponaučení, které plyne z naší 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.


| <<< | CW o Internetu | COMPUTERWORLD | IDG CZ homepage |