Rámy podruhé

Jiří Kosek ml.

Dnes si ukážeme ucelenější ukázku použití rámů. Zároveň na ní ukážeme, jak vytvářet stránky s rámy tak, aby byly přístupné i pro starší prohlížeče bez podpory rámů.

Jelikož je stránka obsahující definici rozložení rámů prázdná (obsahuje pouze záhlaví a element FRAMESET), v prohlížečích bez podpory rámů se nic nezobrazí. Tomuto jistě nežádoucímu efektu lze zabránit použitím části BODY. V ní bychom měli uvést odkaz na dokument, který uživateli zpřístupní všechny stránky, které jsou jinak zobrazeny v jednotlivých rámech. Prakticky to může vypadat například takto:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
  <TITLE>Občanský občasník</TITLE>
</HEAD>
<FRAMESET ROWS="100, *">
  <FRAME SRC="banner.gif" MARGINWIDTH=0 MARGINHEIGHT=0
         NORESIZE SCROLLING=NO FRAMEBORDER=0>
  <FRAMESET COLS="30%, 70%">
    <FRAME SRC="rubriky.html" FRAMEBORDER=0>
    <FRAME SRC="uvodnik.html" NAME=Rubrika FRAMEBORDER=0>
  </FRAMESET>
</FRAMESET>
<BODY>
Váš prohlížeč nepodporuje rámy. To je velká škoda, protože
s nimi by se vám náš občasník četl mnohem lépe. I přesto si
však můžete přečíst <A HREF=rubriky.html>seznam rubrik</A>
odkud se dostanete k jednotlivým zajímavým článkům.
</BODY>
</HTML>

Vidíme, že stránka rozdělí okno prohlížeče na tři části. V horní je úzký proužek s logem, nalevo je seznam rubrik fiktivního časopisu a napravo obsah jednotlivých rubrik (viz obr. 1). Díky tomu, že jsme použili element BODY, je stránka použitelná i v prohlížečích bez podpory rámů. Na obrázku 2 se můžeme podívat, jak stránka dopadne v prohlížečích bez podpory rámů.

Obr. 1: Zobrazení stránky s rámy v prohlížeči

Obr. 2: Zobrazení stránky s rámy v prohlížeči bez podpory rámů

Nyní je ta pravá chvíle na to, abychom si uvedli zdrojový kód stránky rubriky.html.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
  <TITLE>Přehled rubrik</TITLE>
  <BASE TARGET=Rubrika>
  <LINK REL=StyleSheet TYPE="text/css" HREF=oo.css>
  <STYLE><!--
  H1    { color: yellow;
          font-size: 80%;
          font-family: Arial, sans-serif;
          text-align: center }
  --></STYLE>
</HEAD>
<BODY>
<H1>OOO aneb "Obsah Občanského občasníku"</H1>
<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>

Normálně se tato stránka zobrazí v jednom z rámů. Pokud prohlížeč nepodporuje rámy a uživatel zvolil odkaz na úvodní stránce, zobrazí se přehled rubrik také. Tentokráte však v celém okně prohlížeče. Na obrázku 3 vidíme, že všechny informace jsou dostupné i uživatelům se staršími prohlížeči. Při tvorbě stránek bychom měli vždy myslet na to, aby je šlo prohlížet ve všech prohlížečích a ne jen v nejčerstvějších verzích. Ne každý uživatel si totiž chce každý měsíc instalovat nový prohlížeč.

HTML nám nabízí ještě jednu možnost, jak stránky více přizpůsobit pro starší prohlížeče. V libovolném dokumentu můžeme použít element NOFRAMES. Jeho obsah se zobrazí pouze v prohlížečích, které rámy nepodporují -- ty totiž budou ignorovat neznámé tagy <NOFRAMES> a </NOFRAMES>. Prohlížeče, které rámy podporují, obsah elementu NOFRAMES nezobrazí. My můžeme NOFRAMES použít na začátku každé rubriky a uvést zde odkazy na ostatní rubriky. Tím usnadníme čtení uživatelům, kteří nemají přehled rubrik zobrazen v rámu (viz obrázek 4). Soubor rubriky.html:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Draft//EN">
<HTML>
<HEAD>
  <TITLE>Občanský občasník: Úvodník</TITLE>
  <LINK REL=StyleSheet TYPE="text/css" HREF=oo.css>
</HEAD>
<BODY>
<NOFRAMES>
  Další rubriky:
  <A HREF=domov.html>Zprávy z domova</A> |
  <A HREF=zahranici.html>Zprávy ze sousedství</A> |
  <A HREF=inzerce.html>Inzerce fšeho drugu</A>
</NOFRAMES>
<H1>Úvodník</H1>
Právě čtete první číslo jedinečného a exkluzivně
elektronického Občanského občasníku...
</BODY>
</HTML>

Abychom si zopakovali použití stylů, je ke každé stránce, která obsahuje nějaký text, připojen styl mo.css. Tím zaručíme jednotný vzhled všech stránek. Styl je velmi jednoduchý, v praxi bychom si s ním pohráli mnohem více a mohli tak vytvořit atraktivně graficky zpracované stránky.

BODY { background-color: navy;
       color: red }
:link, :visited { color: fuchsia }

TIP: Při tvorbě stránek s rámy bychom měli mít na paměti, že důležité je informace zpřístupnit v přehledné formě. Většinou tedy nemá smysl dělit stránku na více než dva nebo tři rámy. Jednotlivé rámy jsou jednak malé (zvláště na obrazovkách s rozlišením 640 x 480) a jednak se uživatel ve velkém počtu rámů špatně orientuje.

Obr. 3: Zobrazení přehledu rubrik v prohlížeči bez podpory rámů

Obr. 4: Zobrazení rubriky i s odkazy na další rubriky v prohlížeči bez podpory rámů