Vytváříme si domovskou stránku

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 st...


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.
7 3384 / pah









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.