HaTMatiLka
Lekce 12
Lekce Rámečky

minulé lekci bylo popsáno, jak by měla být vymyšlena soustava stránek, aby návštěvník nezabloudil a aby rychle našel, po čem se pídí. Ve všech minulých lekcích je předpokládáno, že stránka vyplňuje veškerou dostupnou plochu prohlížeče a při přechodu jinam je nahrazena novým obsahem. Tomu je touto lekcí konec.

Předpokládejme, že potřebujeme vytvořit jakýsi katalog stránek. Na každé je nějaká zajímavá informace a my potřebujeme mezi nimi snadno a rychle přecházet.

Jednou z možností je na každé stránce vytvořit seznam všech ostatních (jako je tomu na těchto stránkách). Není pak nic jednoduššího, než zvolit tu, kam se potřebuji podívat… Ale co když všechny stránky již existují? To bude potřeba do všech zasahovat a přidávat navigaci? A když potřebuji ukazovat i takové, jejichž obsah měnit nemohu?

K tomu slouží rámečky (zvané též rámce).

Představme si obrazovku, rozdělenou na dvě části: v první je seznam stránek, v druhé, větší, pak zobrazena jedna z nich. (Co bychom si představovali — stačí se podívat na seznam příkladů.)

Rámečková stránka má několik částí. Tou první je samotná definice rámečků, tedy jejich velikost a umístění. Definicí je vlastně zvláštní stránka, obecně značně stručná, obsahující v hlavičce tagy <FrameSet><Frame>. Protože však stále nemálo uživatelů používá starší prohlížeče, které rámcům nerozumí, je dobré, aby stránka měla nějaké tělo, například s upozorněním, že toto je rámečková verse a ctěný čtenář ať

  1. si sežene vhodný prohlížeč
  2. přejde na versi bez rámečků
  3. jde jinam a už se nevrací
Poměrně dobrým nápadem je využít bezrámečkovou variantu jako zvláštní rozcestí, z nějž se dostanete na ostatní stránky. Nešťastníci se staršími browsery tak nebudou o mnoho ochuzeni.

                    
  <FrameSet cols="120,*">
    <Frame Name="Nav"  Src="Nav.Htm"
      scrolling="no"
      MarginHeight="0" MarginWidth="0">
    <Frame Name="Main" Src="Main.Htm"
      scrolling="auto"
      FrameBorder="0">
  </FrameSet>
  <NoFrames>

Tento text by byl uveden v hlavičce stránky. Obvykle následuje <Body> s upozorněním a odkazy pro nerámečkové prohlížeče.

Část <FrameSet> definuje buď řádky nebo sloupce. Uvnitř jsou jednotlivé rámečky, případně další množiny.

Hvězdička znamená „zbytek”. Pokud je použita několikrát, jde o dělení na stejně velké části.

Celá definice se skládá z tagů, takže starší prohlížeče se zachovají typicky: prostě ji ignorují. Protože je umístěna do hlavičky, nehrozí nebezpečí, že by byla vypsána na obrazovku.

Parametry <FrameSet>
cols="n,n"
šířky sloupců (body, procenta, „*”)
rows="n,n"
výšky řádků (body, procenta, „*”)
Parametry <Frame>
Name="Jméno"
Jméno rámečku
Src="URL"
Stránka uvnitř rámečku
scrolling="yes|no|auto"
posuvník (pravítko, „palec”)
MarginWidth="n"
šířka okraje
MarginHeight="n"
výška okraje
FrameBorder="0|1"
Viditelný okraj (ne/ano)
NoResize
Zakáže změnu velikosti
Navigace

Obvykle je jeden sloupec (či řádek) navigační, zatímco zbytek obrazovky vyplňuje hlavní stránka. V navigační části je množství odkazů, jejichž aktivace mění stránky hlavního okna. Aby tomu tak skutečně bylo, je tag <a> rozšířen o parametr Target="jméno_okna". Navigační stránka tedy osahuje odkazy typu: <a HRef="Hlavni.Htm" Target="Main">.

Poměrně zajímavý efekt přináší použití Target, pokud nejsou definovány rámečky: obvykle je otevřeno nové okno prohlížeče a stránky se mění v něm.

Kromě jména rámečku (mimochodem, musí být zapsáno přesně) lze použít speciální jména cíle:

_blank
nové, nepojmenované okno
_parent
nadřízené ono (zpravidla to, které definuje rámečky)
_self
právě aktivní okno
_top
celá obrazovka prohlížeče

Pokud není určeno cílové okno, mění se obsah právě aktivního okna. Z toho plyne, že „cizí” stránky, zobrazené v hlavním okně, považují toto okno za svůj životní prostor a případně si zde definují vlastní rámečky… Kdo se v tom pak má vyznat. Proto odkazy na rámečkové stránky je vhodné směrovat do _top nebo alespoň do _parent.

Tip

Pokud se chcete zbavit případných rámečků, zkuste zápis: <a href="#noframe" name="noframe" target="_top">zrušit rámečky</a>
zrušit rámečky

Navigační sloupec
sl.

Asi nejjednodušší případ. Jeden (užší) sloupec ukazuje seznam stránek, zatímco druhý, zabírající většinu plochy prohlížeče, právě tu jednu vybranou. Navigační sloupec můžeme chápat i jako víceúrovňovou nabídku: nejdříve se změní obsah tohoto sloupce  v podrobnější nabídce si poté můžeme vybrat konkrétní cíl. vokaž

Dobrým (a nečekaným) efektem je použití metapříkazu. Pokud je nabídka druhé úrovně nastavená tak, aby po čase (patnácti sekundách) provedla refresh na původní, základní nabídku, zůstává vlastně stále navigační sloupec na nejvyšší úrovni.

Tabulkový design
tbl.

Další obvyklá úprava spočívá v rozdělení pole na čtyři části: navigační sloupec, hlavní stránku, logo (s funkcí Home, tedy „na základní stránku”) a navigační řádek s odkazy všeobecnějšího významu. Navigační řádek může být nahoře či dole; dole obvykle zabírá celou šířku, nahoře začíná vedle loga. vokaž

Navigační řádek
ř.

Méně obvyklý, leč značně užitečný je samotný navigační řádek, nahoře či dole doplňující stránku. Nejvhodnější použití je tam, kde je potřeba přecházet mezi několika málo stránkami.

Do jediného řádku se však špatně rovnají popisy. Jakýkoliv text zabírá příliš velkou část řádku, proto je lépe používat zde různé značky a ikony. vokaž

Vložený rámeček
iframe

Vložený, alias nezávislý rámeček (independent frame) je svou podstatou něco zcela jiného, než klasické rámečky. Nepoužívá stejný zápis a není definován v hlavičce. Je součástí textu stránky, podobně, jako obrázek či tabulka. Ostatně, ne každý prohlížeč, podporující rámečky, umí i <iframe>.

Na místě, kde má být zobrazena stránka, stačí vložit dvojici tagů <iframe>…</iframe>. Veškerá definice stránky je přímo v tagu: <iframe Name="jméno" Src="URL" width="nn" height="nn" align="…"> Prostor do </iframe> slouží k tomu, aby browsery, které neumí <iframe> zpracovat, mohly zobrazit něco jiného (text, obrázek…). Jeden takový rámeček by měl být od tohoto textu vpravo, druhý zcela dole. vokaž


Obsah  
Lekce 1
Lekce 2
Lekce 3
Lekce 4
Lekce 5
Lekce 6
Lekce 7
Lekce 8
Lekce 9
Lekce 10
Lekce 11

rámy
navigace
tip
-sloupce
-tabulka
-nav. řádek
vložené


© Robert R. Šimek, 1997