COMPUTERWORLD
 

profil kontakt CD-ROM CW100 předplatné

archiv anketa CO VY NA TO? CW kariéra seriály
 

IDG

IDG CZ homepage
COMPUTERWORLD
PC WORLD
INTERNET4U
MEGABYTE
TESTCENTRUM
ON-LINE






COMPUTERWORLD 03/98

Vytváříme si domovskou stránku

Jiří Kosek ml.

Rámy podruhé

Dnes se podíváme na ucelenější ukázku použití rámů. Zároveň si 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 3 čá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ů.

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ý browser.

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ž 2 nebo 3 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.

 

 

© IDG Czechoslovakia, a.s., Všechna práva vyhrazena
info@idg.cz, webmaster@idg.cz