Jak vytvářet www stránky - 18. díl
Rámy
Rámy milované i nenáviděné. Na jednu stranu přinášejí řadu výhod, na druhou mohou způsobovat problémy. Ať tak nebo tak, do HTML patří a proto jim věnujeme dva díly našeho seriálu.
K čemu tedy rámy jsou? Stručně řečeno umožňují rozdělit stránku do několika navzájem nezávislých oken. V jedné části stránky tak můžete mít reklamní proužek, v druhé navigační menu, které je shodné pro celou webovou prezentaci, další část lze pak použít pro dokumenty, které si návštěvník vyvolá pomocí zmíněného menu.
Tentokrát začneme ukázkovým příkladem, který si níže vysvětlíme:
<HTML>
<HEAD>
<TITLE>Ukázkový dokument s rámy</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="stranka_zobrazena_v_prvnim_ramu.html">
<FRAME src="stranka_zobrazena_ve_druhem_ramu.html">
</FRAMESET>
<FRAME src="stranka_zobrazena_ve_tretim_ramu.html">
<NOFRAMES>
<P>Váš prohlížeč nepodporuje rámy, chcete-li si prohlédnout jednotlivé stránky, máte možnost pomocí následujících odkazů:
<UL>
<LI><A href="stranka_zobrazena_v_prvnim_ramu.html">Odkaz na 1. stranku</A>
<LI><A href="stranka_zobrazena_ve_druhem_ramu.html">Odkaz na 2. stranku</A>
<LI><A href="stranka_zobrazena_ve_tretim_ramu.html">Odkaz na 3. stranku</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
Pokud si připravíte odkazované stránky, zobrazí se vám v prohlížeči zhruba následující struktura:
Pokud se vám zobrazilo něco jiného, bude to nejspíše tím, že váš prohlížeč nepodporuje rámy. Právě proto jsme připravili sekci uzavřenou mezi tagy <NOFRAMES> a </NOFRAMES> poskytující alternativní obsah, protože jinak by se nezobrazilo vůbec nic. Rozhodnete-li se vytvářet své stránky pomocí rámu, neměli byste zapomínat na uživatele, jejichž browsery rámy nepodporují.
Tag FRAMESET
Pokud jste si prohlédli zdrojový kód naší ukázkové stránky pozorně, možná vám neuniklo, že chybí jeden důležitý tag a sice BODY. Ve stránkách s rámy je tento tag nahrazen novým elementem FRAMESET, který definuje rozložení stránek v okně prohlížeče.
FRAMESET má dva hlavní atributy:
- cols - definuje počet sloupců (resp. vertikálních stránek) a jejich rozměry. Rozměry lze určovat dvěma způsoby: absolutně (počtem pixelů) nebo relativně (v procentech velikosti plochy prohlížeče).
Element <FRAMESET cols="20%, 80%"> například znamená, že stránka bude složena ze dvou sloupců, přičemž první bude zabírat 20% šířky obrazovky a druhý 80%.
Jistou zvláštností je znak hvězdičky *, jehož význam si vysvětlíme nejlépe na několika příkladech:
<FRAMESET cols="10%,250,*">
definice jednotlivých rámů
</FRAMESET>
V tomto případě vznikne stránka složená ze tří sloupců, přičemž první sloupec bude zabírat 10% obrazovky, druhý bude široký 250 pixelů a třetí zabere zbytek stránky.
<FRAMESET cols="1*,250,3*">
definice jednotlivých rámů
</FRAMESET>
Tentokrát bude rozložení sloupců následující: prostřední sloupec bude široký 250 pixelů, levý zabere čtvrtinu zbývajícího prostoru a pravý pak tři čtvrtiny (levý sloupec má šířku 1*, pravý pak 3*, čili bude třikrát větší než levý).
- rows - definuje počet řádků (resp. horizontálních stránek) a jejich rozměry. U tohoto atributu platí stejná pravilda jako u atributu cols.
Chceme-li vytvořit stránku skládající se ze dvou řádků a tří sloupců, provedeme to následovně:
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
definice jednotlivých rámů
</FRAMESET>
Vnořování tagu FRAMESET
Velmi často se setkáváme se stránkami, které mají v horní části jeden rám, po levé druhý a zbytek stránky je vyhrazen vlastnímu obsahu. Jak toho dosáhnout? Jednoduše - stačí se naučit vnořovat tag FRAMESET. Nutno podotknout, že k vytvoření takových stránek potřebujete jistou představivost, nebo můžete zkusit metodu pokus - omyl.
Čili, jak si takovou stránku představit. V první řadě se skládá ze dvou řádek - horní obsahuje například reklamní proužek, dolní se pak dále dělí na dvě svislé části, přičemž levá obsahuje navigační menu a pravá vlastní stránku. Budeme tedy muset rozdělit stránku na dvě vodorovné části (<FRAMESET rows="20%, *">) a druhou část pak svisle rozdělit dalším rámem (<FRAMESET cols="100,*">). Opět bude nejlepší si to vysvětlit na komentovaném příkladu
<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>
<FRAMESET rows="20%, *"> - tady prohlížeči sdělujeme, že stránka bude rozdělena vodorovně na dvě části
<FRAME src="jedna.html"> - definujeme obsah horní části stránky
<FRAMESET cols="100, *"> - dolní část dělíme svisle na dva sloupce
<FRAME src="dva.html"> - definujeme obsah levého sloupce
<FRAME src="tri.html"> - definujeme obsah pravého sloupce
</FRAMESET> - uzavíráme svislé rozdělení stránky
</FRAMESET> - uzavíráme vodorovné rozdělení stránky
</HTML>
Tag FRAME
V předchozích příkladech jsme několikrát použili tag FRAME, jehož význam vám byl až do této chvíle utajen. Jeho účel je jednoduchý - v tagu FRAME definujeme obsah a vlastnosti jednotlivých rámů. Parametrů opět není mnoho a jejich význam je celkem jasný:
- src - definuje stránku, která bude načtena do příslušného rámu. Zadává se stejně jako adresa v hyperlinkovém odkazu, tedy relativně nebo absolutně.
- name - jméno rámu. To je velice důležité pro správnou funkci stránek. Pokud například v navigačním menu zvolíte nějakou položku, musí prohlížeč vědět, do kterého rámu má načíst odkazovanou stránku. Právě parametr name přiřazuje jednotlivým rámům jména, na která se odkazuje, proto na něj nikdy nezapomínejte.
- frameborder - určuje, zda bude okno odděleno od ostatních rámečkem. K dispozici jsou pouze dvě hodnoty: 0 (okno nebude odděleno rámečkem) a 1 (okno bude odděleno rámečkem). Pokud hodnotu tagu neurčíte, bude většinou browserů mezi okna vložen rámeček, což nemusí působit zrovna esteticky.
- marginwidth - velmi vhodný parametr určující vzdálenost obsahu rámečku od horního a dolního okraje. Udává se v pixelech.
- marginheight - obdoba parametru marginwidth. Tentokrát definuje vzdálenost obsahu rámečku od levého a pravého okraje. Pochopitelně i v tomto případě se udává v pixelech.
- noresize - pokud uvedete tento parametr, nebude mít uživatel možnost měnit velikost příslušného rámu.
- scrolling - tento parametr určuje, zda bude možné rolovat obsahem rámu (tj. zda bude po straně zobrazena rolovací lišta, která umožní posouvat stránku). K dispozici jsou tři hodnoty: yes (obsah rámu je možné posouvat, lišta bude zobrazena i v případě, že není nezbytně nutná), no (obsah rámu není možné posouvat. Toto nastavení nedoporučujeme, neboť návštěvníci vašich stránek mohou mít nastavené různé rozlišení a obsah rámu se nemusí vejít do stanovených rozměrů) a auto (obsahem rámu je možné posouvat, lišta bude zobrazena pouze v případě, že se obsah nevejde do rámu. Tato hodnota je patrně nejvhodnější). Pokud parametr scrolling neuvedete, dosadí si většina prohlížečů jako jeho hodnotu auto.
Pokud si tedy budeme chtít vytvořit skutečně dobrou stránku podobnou té z předcházejícího příkladu, mohl by kód vypadat například následovně:
<HTML>
<HEAD>
<TITLE>Naše ukázková stránka</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
<FRAME src="jedna.html" name="reklamnibanner" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAMESET cols="100, *">
<FRAME src="dva.html" name="ovladacimenu" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAME src="tri.html" name="vlastnistranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
</FRAMESET>
<NOFRAMES>
obsah pro uživatele, jejichž prohlížeč nepodporuje rámy
</NOFRAMES>
</FRAMESET>
</HTML>
Do příští lekce si můžete připravit tuto stránku (nazvěte si jí například ramy.html) a stránky jedna.html, dva.html a tri.html, do kterých zatím vložte pouze základní tagy. Příště si právě na tomto příkladu ukážeme, jaká kouzla můžete s rámy provádět, ale také si povíme o tom, jaké nevýhody přinášejí.
|
