Layout stránky pod palcem

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. Dejme tomu, že chceme vytvořit webovou stránku fiktivní firmy. Vzhled stránky, kterou chceme vytvořit, si můžeme prohlédnout na obrázku 26 – „Stránka s náročným layoutem“.

Obrázek 26. Stránka s náročným layoutem

Stránka s náročným layoutem

Na stránce jsou nejzajímavější oblé rohy rámečků, ve kterých je umístěno navigační menu a samotný text stránky. Kdybychom se bez oblých rámečků obešli, je vytvoření stránky s použitím tabulek velice snadné. Pokud však chceme mít rohy oblé, musíme je vytvořit jako obrázky, které právě pomocí tabulky usadíme na správné místo stránky. Přitom se vždy musíme snažit, aby použitých obrázků bylo co nejméně a měly co nejmenší velikost – jen tak se bude stránka rychle přenášet a zobrazovat.

Pro dosažení potřebnéoh efektu stačí vytvořit malé obrázky, které obsahují malé kruhové výseče v potřebné barvě.

Malé obrázky umístíme do tabulky, ve které nastavíme barvu pozadí jednotlivých buněk tak, abychom společně s obrázky dosáhli požadovaný efekt. Obrázek 27 – „Rozdělení obsahu stránky do buněk tabulky“ ukazuje, jak je tabulka rozdělená do řádků a sloupců; šipky znázorňují buňky, ve kterých je použit obrázek.

Obrázek 27. Rozdělení obsahu stránky do buněk tabulky

Rozdělení obsahu stránky do buněk tabulky

Pokud si v nějakém grafickém editoru vytvoříme malé růžky, je již vytvoření stránky poměrně snadné.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Super str�nka</title>
 </head>
 <body bgcolor="white">
  
  <table border="0" cellspacing="0" cellpadding="0" align="center">
   <tbody>
    <tr>
     <td width="11" height="11">
      <img src="lto.png" alt="/" height="11" width="11"></td>
     <td colspan="4" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td width="11" height="11">
      <img src="rto.png" alt="\" height="11" width="11"></td>
    </tr>
    <tr>
     <td colspan="3" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td align="center" valign="top" bgcolor="#1c09ef" height="35">
      <img src="super-stranka.png" alt="SUPER STR�NKA" height="25"
       width="263">
     </td>
     <td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
    </tr>
    <tr>
     <td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td width="10" height="10">
      <img src="lti.png" alt="/" height="10" width="10"></td>
     <td bgcolor="white"><img src="null.gif" alt=""></td>
     <td width="10" height="10">
      <img src="rti.png" alt="\" height="10" width="10"></td>
     <td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
    </tr>
    <tr>
     <td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td align="center" bgcolor="#1c09ef" width="200">
      <font color="white" 
       face="Verdana, Arial CE, Arial, Helvetica CE, Helvetica, sans-serif">
       O FIRM�<br><br>
       PRODUKTY<br><br>
       CEN�K<br><br>
       KONTAKT<br><br>
       <br><br><br><br><br><br>
       <small>&copy; 2001 Firma, s.r.o.</small>
      </font>
     </td>
     <td bgcolor="white"><img src="null.gif" alt=""></td>
     <td width="400">
      <h1 align="center">Uk�zkov� text</h1>
      <p align="justify">Zat�m jsme tabulky pou��vali k&nbsp;zobrazen�
       dat, kter� logicky do tabulky pat��. Tabulky n�m v�ak poskytnou
       v�bornou slu�bu i&nbsp;v&nbsp;jin�ch p��padech. Rozm�st�n�m
       r�zn�ch grafick�ch prvk� do tabulky m��eme vytvo�it zaj�mav�
       efekty. Tato oblast pou�it� se t�ko vysv�tluje n�jak p��li�
       teoreticky. Uk�eme si tedy n�kolik praktick�ch
       p��klad�. V�en�mu �ten��i mohou b�t n�vodem a&nbsp;inspirac�
       p�i vytv��en� vlastn�ch grafick�ch kreac�.</p>
      <p align="justify">P�edt�m, ne� n�kter� z&nbsp;n�sleduj�c�ch
       �e�en� pou�ijeme, bychom si m�li rozmyslet, zda je to nezbytn�
       nutn�. Na�e str�nky sice mohou nab�t na atraktivnosti pro
       �ten��e, na druhou stranu poru�ujeme z�kladn� my�lenku
       HTML&nbsp;&mdash; vyzna�ov�n� textu podle jeho v�znamu
       a&nbsp;ne podle po�adovan�ho grafick�ho vzhledu.</p>
     </td>
     <td bgcolor="white"><img src="null.gif" alt=""></td>
     <td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
    </tr>
    <tr>
     <td colspan="2" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td width="10" height="10">
      <img src="lbi.png" alt="\" height="10" width="10"></td>
     <td bgcolor="white"><img src="null.gif" alt=""></td>
     <td width="10" height="10">
      <img src="rbi.png" alt="/" height="10" width="10"></td>
     <td bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
    </tr>
    <tr>
     <td width="11" height="11">
      <img src="lbo.png" alt="\" height="11" width="11"></td>
     <td colspan="4" bgcolor="#1c09ef"><img src="null.gif" alt=""></td>
     <td width="11" height="11">
      <img src="rbo.png" alt="/" height="11" width="11"></td>
    </tr>
   </tbody>
  </table>
  
 </body>
</html>

Nesmíme zapomenout na několik důležitých věcí. Jednak měnit barvu pozadá buněk tak, abychom dostali souvislou modrou plochu. K dosažení tohoto efektu musíme nastavit atributy cellspacing, cellpadding a border u tabulky na nulu. Do buněk, které jsou prázdné, pouze vytvářejí modrou nebo bílou plochu musíme něco umístit, jinak by se v některých prohlížečích nezobrazila barva pozadí (viz ???). Nedělitelná mezera může být někdy moc velká a proto se v těchto případech obvykle vkládá obrázek, který má velikost 1×1 pixel. Buňka tabulky pak už není prázdná a vybarví se pozadím. Pokud použijeme obrázek, který je průhledný (transparentní), můžeme jej použít v buňkách s libovolnou barvou pozadí (voz obrázek null.gif).

Pokud sami začnete vytvářet stránky, které obsahují složité tabulky, musíte být zvláště opatrní. Při zobrazování tabulek se prohlížeče chovají drobně odlišně – je dobré stránku vyzkoušet v co nejširším spektru prohlížečů. Rovněž je dobré podívat se na to, jak stránka vypadá v nějakém textovém prohlížeči. V našem případě je výsledek v textovém prohlížeči skvělý (obrázek ???), ale mnoho dnešních stránek v textových prohlížečích dopadne otřesně.

Poznámka

Z poslední ukázky si můžeme odnést zajímavý poznatek. Všechny prohlížeče jsou naprogramovány tak, aby neznámé tagy a atributy ignorovaly. Proto nám také Lynx stránku zobrazil tak, jako by tam žádná tabulka nebyla.

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus