Rámy

Jiří Kosek ml.

Dnes poněkud překročíme hranice HTML 3.2. Povíme si něco o rámech. Rámy umožňují rozdělit okno prohlížeče na několik částí; v každé části pak může být zobrazena jiná stránka. Navíc lze vše udělat tak, aby zvolení odkazu v jednom rámu, vyvolalo načtení stránky do jiného rámu. Tak můžeme naše stránky obohatit například o pro uživatele pohodlné navigační menu. Rámy dnes podporuje valná většina prohlížečů, nejsou však součástí standardu HTML 3.2. Jejich popis je až ve verzi 4.0. I přesto nám dnes nic v používání rámů nebrání. V příštím díle seriálu si navíc povíme, jak zařídit, aby stránka s rámy byla čitelná i ve starších prohlížečích bez podpory rámů.

Definice rozložení rámů na stránce

Již jsme řekli, že rámy umožňují rozdělit stránku na několik částí. Každá část pak zobrazuje zcela běžnou HTML stránku. Pro vytvoření rámů tedy stačí pomocí jednoho HTML dokumentu popsat rozložení rámů na stránce a každému rámu určit, která stránka se v něm má zobrazit. Z toho vyplývá, že stránka definující rozložení rámů bude mít poněkud jinou strukturu než obyčejný HTML dokument.

Stránka definující rozložení rámů musí obsahovat záhlaví (HEAD) a definici rozložení rámů (FRAMESET). Samotné tělo dokumentu (BODY) nemusí být uvedeno -- zobrazuje se pouze v těch prohlížečích, které rámy nepodporují. Je to tedy to pravé místo, pro uvedení odkazu na alternativní verzi dokumentu, která neobsahuje rámy.

Samotnou definici rozložení rámů na stránce můžeme provést pomocí elementu FRAMESET. U něj lze použít dva atributy ROWSa COLS. Atributy obsahují čárkami oddělený seznam velikostí jednotlivých vodorovných či svislých rámů. Počet položek v seznamu určuje počet rámů, které se na stránce vytvoří. Obvykle se najednou používá pouze jeden z atributů. Pokud použijeme oba dva najednou, vytvoří se mřížka -- počet rámů pak odpovídá součinu počtu vodorovných a svislých částí.

Jednotlivé prvky seznamu vymezující velikost jednotlivých rámů, mohou být zadány třemi způsoby. Asi nejjednodušší způsob je zadat příslušný rozměr napevno v pixelech. Můžeme použít i procentní hodnotu, která se bude vztahovat k šířce resp. výšce okna prohlížeče. Při třetím způsobu zápisu se velikost udává jako celé číslo doplněné o hvězdičku ('*'). Při rozdělování volné plochy se nejprve přiřadí prostor rámům, jejichž velikost je určena v pixelech nebo jako procento. Zbylé místo se pak rozdělí mezi rámy s velikostí určenou pomocí hvězdičky. Místo se přidělí proporcionálně podle čísel uvedených před hvězdičkou. Zápis '*' odpovídá zápisu '1*'. Na obrázku 1 si můžeme prohlédnout několik ukázek rozdělení okna prohlížeče na rámy.

Obr. 1: Jak lze pomocí FRAMESET rozdělit stránku na rámy

Vidíme, že případy komplikovanějšího rozložení rámů můžeme elegantně vyřešit pomocí vzájemného vnoření FRAMESET.

Definice obsahu rámu

Již umíme definovat rozložení rámů na stránce. Zbývá tedy určit stránky, které se v jednotlivých rámech objeví. K tomuto účelu slouží element FRAME a jeho atribut SRC. Naši poslední ukázku rozložení rámů doplníme o definici obsahu rámů. Získáme tak naši první stránku s rámy:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
    <TITLE>První stránka s rámy</TITLE>
</HEAD>
<FRAMESET ROWS="100, *">
    <FRAME SRC="banner.html">
    <FRAMESET COLS="30%, 70%">
        <FRAME SRC="menu.html">
        <FRAME SRC="uvodni.html">
    </FRAMESET>
</FRAMESET>
</HTML>

Na skutečných stránkách s rámy většinou tag

<FRAME>

obohatíme ještě o další atributy.

Pokud chceme, aby velikost rámu nemohl uživatel měnit, použijeme atribut NORESIZE. Hodí se většinou v případech, kdy je obsah rámu tvořen obrázkem -- u obrázku známe přesný rozměr a rám můžeme nastavit tak, aby se do něj obrázek vešel celý. V ostatních případech bychom měli uživateli ponechat jistou volnost, aby si mohl velikost rámů přizpůsobit svým individuálním potřebám a velikosti své obrazovky.

Další atribut, který můžeme u FRAME použít, je SCROLLING. Tento atribut rozhoduje o tom, zda bude rám doplněn posuvníkem, který umožní uživateli pohyb po delších stránkách zobrazených v rámu. Atribut může nabývat tří hodnot: YES, NO a AUTO. Použitím SCROLLING=YES si u rámu přítomnost posuvníku vynutíme. S hodnotou SCROLLING=NOmusíme zacházet opatrně -- může se stát, že na obrazovce s nižším rozlišením by si uživatel nemohl přečíst celý obsah stránky. Standardně má atribut hodnotu AUTO, která automaticky doplní posuvník v případech, kdy je stránka větší než příslušný rám.

Normálně jsou od sebe jednotlivé rámy odděleny úzkým rámečkem. Pokud nechceme mít okolo rámu rámeček, stačí použít atribut FRAMEBORDER=0. Nesmíme však zapomenout na uvedení atributu u všech rámů, které s rámečkem sousedí.

Pomocí atributů MARGINWIDTH a MARGINHEIGHT můžeme ovlivňovat vzdálenost obsahu rámu od okrajů. Jako hodnota atributů se uvádí počet pixelů. MARGINWIDTH určuje okraj nalevo a napravo, MARGINHEIGHT nahoře a dole.

Nakonec jsme si nechali jeden z velmi důležitých atributů -- NAME. NAME slouží k určení jména rámu. Na toto jméno se pak můžeme odvolávat v odkazech. Dosáhneme tak efektu, kdy aktivace odkazu v jednom rámu, vyvolá načtení stránky v jiném rámu. Rám můžeme pojmenovat v podstatě libovolně, jméno by však mělo začínat písmenem anglické abecedy (A--Z).

Určení cílového rámu pro odkaz

Pokud při definici rámů definujeme jejich jména pomocí atributu NAME, můžeme se pak v odkazech odvolávat na jednotlivé rámy pomocí atributu TARGET. Jemu přiřadíme jméno rámu, ve kterém chceme zobrazit stránku, která se skrývá za odkazem. Atribut TARGET můžeme používat kromě odkazů (element A) i u elementů LINK, AREA a FORM, protože také mohou vyvolat načtení nové stránky.

Praktické použití si ukážeme na jednoduchém příkladu. Dejme tomu, že chceme na Web umístit elektronickou podobu časopisu. Budeme chtít, aby v levé části obrazovky byl přehled všech rubrik časopisu a v pravé vždy obsah jedné rubriky. Zvolení rubriky v levé části by mělo způsobit zobrazení příslušné rubriky v pravém rámu. Nejprve tedy vytvoříme dokument, který rozdělí okno na rámy a načte úvodní stránky. Rám pro obsah rubrik nesmíme zapomenout pojmenovat:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
    <TITLE>Občanský občasník</TITLE>
</HEAD>
<FRAMESET COLS="30%, 70%">
    <FRAME SRC="rubriky.html">
    <FRAME SRC="uvodnik.html" NAME=Rubrika>
</FRAMESET>
</HTML>

Nás hlavně zajímá, jak bude vypadat stránka s přehledem všech rubrik -- rubriky.html:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
    <TITLE>Přehled rubrik</TITLE>
</HEAD>
<BODY>
OOO aneb "Obsah Občanského občasníku":
<UL>
    <LI><A HREF=uvodnik.html TARGET=Rubrika>Úvodník</A>
    <LI><A HREF=domov.html TARGET=Rubrika>Zprávy
         z domova</A>
    <LI><A HREF=zahranici.html TARGET=Rubrika>Zprávy ze
         sousedství</A>
    <LI><A HREF=inzerce.html TARGET=Rubrika>Inzerce fšeho
         drugu</A>
</UL>
</BODY>
</HTML>

Použití atributu TARGET zajistí, že obsahy jednotlivých rubrik (uložené v souborech uvodnik.html, domov.html, zahranici.html a inzerce.html) se zobrazí v pravém rámu.

Pokud stránka -- jako v našem příkladě -- slouží jako jakési menu, je výhodné specifikovat jméno cílového rámu společné pro všechny odkazy na stránce. Ušetříme si tak psaní. Standardní jméno cílového rámu nastavíme pomocí tagu <BASE TARGET=jméno_rámu>. Nesmíme zapomenout, že element BASE musí být uveden v záhlaví dokumentu. Menu uložené v souboru rubriky.html tedy můžeme zapsat zkráceně jako:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
    <TITLE>Přehled rubrik</TITLE>
    <BASE TARGET=Rubrika>
</HEAD>
<BODY>
OOO aneb "Obsah Občanského občasníku":
<UL>
    <LI><A HREF=uvodnik.html>Úvodník</A>
    <LI><A HREF=domov.html>Zprávy z domova</A>
    <LI><A HREF=zahranici.html>Zprávy ze sousedství</A>
    <LI><A HREF=inzerce.html>Inzerce fšeho drugu</A>
</UL>
</BODY>
</HTML>

Pokud použijeme atribut TARGET přímo u odkazu, má větší váhu než cílové okno určené elementem BASE. Pokud cílové okno nespecifikujeme žádným způsobem, stránka se nahraje do rámu, který odkaz obsahuje. Pokud omylem zadáme neexistující cílový rám, prohlížeč otevře nové okno a přiřadí mu toto jméno. Jako jména cílových rámů můžeme používat i čtyři předdefinované hodnoty, jež jsou popsány v tabulce 1.

Tab. 1: Speciální jména rámů
`_blank`	Dokument se zobrazí v novém nepojmenovaném okně.
`_self`	Dokument se zobrazí ve stejném okně. Tato vlastnost se může hodit v případech, kdy v dokumentu použijeme `<BASE TARGET=`jméno_rámu`>`.
`_parent`	Dokument se zobrazí v rámu nebo okně, které obsahuje nejbližší nadřazený element `FRAMESET`.
`_top`	Dokument se nahraje do celého okna prohlížeče a všechny rámy se zruší.

Příště si ukážeme praktickou ukázku rámů a řekneme si, jak stránky s rámy upravit tak, aby byly přístupné i pro starší prohlížeče bez podpory rámů.