 |
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 FRAMESETPokud 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á pravidla 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 FRAMESETVelmi často se setkáváme se stránkami,
které mají v horní části jeden rám, po levé straně 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 FRAMEV 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, většina browserů mezi okna vloží 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
nastaveno 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 stránce 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 ji
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í.
Související články:
Zajímá-li
vás bližší pohled na tento článek, podívejte se na něj v
souvislostech.
 |
 |