 |
<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>
Jak se sami můžete přesvědčit, po načtení se zobrazí stránka, která
bude mít v horní části dokument jedna.html vysoký 20 % výšky okna
prohlížeče, po levé straně bude 100 pixelů zabírat dokument
dva.html a zbytek zabere stránka tri.html. Aby byl náš
příklad výstižný, vytvořte si dokument jedna.html s vloženým
reklamním proužkem a do dokumentu dva.html vytvořte následující
menu:
<HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> </BODY> <UL> <LI><A
href="tri.html"
target="vlastnistranka">Index</A> <LI><A
href="ctyri.html"
target="vlastnistranka">Software</A> <LI><A
href="pet.html"
target="vlastnistranka">Hardware</A> <LI><A
href="sest.html"
target="vlastnistranka">Ovladače</A> </UL> </BODY>
Dokumenty tri.html, ctyri.html, pet.html a
sest.html se pak budou zobrazovat ve zbývající části stránky podle
toho, na který odkaz na stránce dva.html uživatel klikne. Možná vás
napadla otázka, jak prohlížeč pozná, že má stránku načíst zrovna do okna,
kde byla předtím stránka tri.html? Podívejte se ještě jednou na
strukturu jednotlivých odkazů – najdete zde parametr
target="vlastnistranka", který prohlížeči říká "načti odkazovanou
stránku do okna, které je pojmenováno vlastnistranka". To, o které okno se
jedná, se prohlížeč dozvěděl z tagu <FRAME src="tri.html"
name="vlastnistranka" frameborder=0 marginwidth=0 marginheight=0
noresize scrolling=auto>, kde parametr name určuje jméno toho
kterého rámu, jež je pak použito při odkazování.
Tag BASE a parametr targetV předcházejícím příkladě vedly všechny
odkazy ze stránky dva.html do rámu nazvaného vlastnistranka,
takže všechny opakovaly pořád dokola jeden a tem samý parametr
target. Nešlo by to nějak zjednodušit? Ale jistě že šlo! Stačí
použít tag BASE, který specifikuje jméno cílového rámu pro celou stránku
(v tomto případě pro naše menu). S tímto elementem by naše stránka
vypadala následovně:
<HTML> <HEAD> <TITLE>Menu</TITLE> <BASE
target="vlastnistranka"> </HEAD> </BODY> <UL> <LI><A
href="tri.html">Index</A> <LI><A
href="ctyri.html">Software</A> <LI><A
href="pet.html">Hardware</A> <LI><A
href="sest.html">Ovladače</A> </UL> </BODY>
Tím jsme stránku zkrátili o celých 66 bajtů, aniž bychom změnili její
funkčnost. Pokud budete potřebovat, aby se některý z odkazů načetl do
jiného rámu, než vlastnistranka, stačí u elementu A použít parametr
target, který má přednost před tagem BASE.
Pro práci s elementem BASE a parametrem target je dobré si
pamatovat následující pravidla:
- Jestliže parametr target v odkazu ukazuje na existující rám, bude
stránka, na níž je odkazováno, zobrazena v rámu, který má název
odpovídající hodnotě parametru target.
- Jestliže stránka obsahuje element BASE a odkaz neobsahuje parametr
target, bude odkazovaná stránka načtena do rámu určeného parametrem
BASE.
- Jestliže stránka obsahuje element BASE a odkaz obsahuje parametr
target odkazující do jiného rámu, bude odkazovaná stránka načtená do
okna, na něž je odkazováno v parametru target.
- Jestliže stránka neobsahuje element BASE a odkaz neobsahuje parametr
target, bude odkazovaná stránka načtena do stejného okna, jako je
stránka s odkazem.
Parametr target nemusí obsahovat jen
jméno okna, do kterého má být stránka načtena, může totiž mít i
následující čtyři hodnoty:
- target="_self" – dokument se načte do stejného okna.
- target="_parent" – dokument se načte do okna definovaného
nejbližším nadřazeným tagem FRAMESET.
- target="_top" – dokument se načte do celého okna prohlížeče,
čímž se zruší všechny rámy.
- target="_blank" – dojde k otevření nového okna prohlížeče a
dokument se načte do tohoto okna. Stejného účinku dosáhnete u většiny
prohlížečů tak, že jako hodnotu parametru target dosadíte název
nedefinovaného rámu.
Tag NOFRAMESJiž v minulém díle jsme se zmínili o tom, že ne
všechny prohlížeče podporují rámy. Ani na tyto prohlížeče, respektive
jejich uživatele, bychom neměli při vytváření stránek zapomínat a měli
bychom jim nabídnout jinou cestu, jak získat informace uložené na našem
webu. K tomu slouží párový tag NOFRAMES, jež bývá umístěn zpravidla před
posledním uzavíracím tagem FRAMESET. Mezi tagy <NOFRAMES> a
</NOFRAMES> můžete vložit prakticky cokoli, co bude zobrazeno v
případě, že prohlížeč nepodporuje rámy. Obvykle zde najdete pouze
upozornění ve stylu "váš prohlížeč nepodporuje rámy", což návštěvníka
vašich stránek jistě nepřesvědčí o tom, že by si měl stáhnout browser,
který rámy umí, a máte téměř stoprocentní jistotu, že již nikdy na váš web
nezavítá. Připravte tedy takový alternativní obsah, aby i tito uživatelé
měli možnost získat všechny informace stejně, jako kdyby používali
prohlížeč s podporou rámů. Vrátíme-li se k našemu příkladu ze začátku této
lekce, postačí, když nabídneme stránku s odkazy, jež je v "rámové" verzi
zobrazena jako menu po levé straně.
<HTML> <HEAD> <TITLE>Naše ukázková
stránka</TITLE> </HEAD> <FRAMESET rows="20%,
*"> ... <FRAMESET cols="100,
*"> ... ... </FRAMESET> <NOFRAMES> Váš
prohlížeč nepodporuje rámy. Můžete se tedy alespoň podívat na <A
href="dva.html">obsah těchto
stránek</A>. </NOFRAMES> </FRAMESET> </HTML>
Vidíte, ani to moc nebolelo a s Vašimi stránkami budou spokojení nejen
návštěvníci s Internet Explorerem či Netscape Navigatorem, ale i uživatelé
historických nebo textových prohlížečů.
Rámy uvnitř stránky – IFRAMEV aktuální verzi HTML 4.0 se objevil
nový tag IFRAME, který dovoluje definovat rámečky "uvnitř" stránky. Ukázku
jeho praktické využití najdete například na Živě v diskuzních fórech u
článků – v rámečku je zobrazen vlastní článek, takže k němu máte kdykoli
přístup, a zbytek stránky je věnován reakcím čtenářů. Využití je
samozřejmě mnoho a jistě vás napadne řada dalších způsobů, jak s "inline
rámečkem" naložit. Abychom vám to poněkud usnadnili, podívám se na
parametry tohoto tagu:
- name – stejně jako u klasických rámů určuje tento parametr
jméno, na něž je odkazováno.
- src – adresa dokumentu, který bude v rámečku zobrazen.
- frameborder – určuje, zda bude rámeček ohraničen (1 =
ano, 0 = ne).
- marginwidth – vzdálenost obsahu rámečku od horního a dolního
okraje. Určuje se v pixelech.
- marginheight – vzdálenost obsahu rámečku od levé a pravé
strany. Stejně jako v předcházejícím případě se určuje v pixelech.
- scrolling – určuje, zda bude možné obsah rámečku posouvat.
Tento parametr může nabývat tří hodnot: yes (po okrajích rámečku
bude zobrazen posuvník bez ohledu na to, je li jeho přítomnost nutná),
no (posuvník nebude zobrazen a stránkou v rámečku nebude možné
posouvat ani v případě, že její obsah přesahuje rozměry rámečku) a
auto (tato hodnota je doporučená – posuvník bude zobrazen pouze
tehdy, přesahuje-li obsah stránky velikost rámečku).
- align – zarovnání rámečku. Použití tohoto parametru je zcela
shodné jako u tagu IMG.
- height – výška rámečku. Opět se nabízí paralela s tagem IMG.
- width – šířka rámečku.
Pro názornost si zkuste
vytvořit následující stránku:
<HTML> <HEAD> <TITLE>Ukázka stránky s
inline
rámečkem</TITLE> </HEAD> <BODY> ... vlastní
obsah stránky ... A tady uvidíte vložený
rámeček:<BR> <IFRAME src="inline.html" width="400"
height="500" scrolling="auto" frameborder="1"> Váš prohlížeč
nepodporuje inline rámy. Chcete-li vidět obsah vloženého rámečku, stačí
<A
HREF="inline.html">sem</A> </IFRAME> </BODY> </HTML>
Jak jste si jistě všimli, nepoužívá se tentokrát pro zobrazení
alternativního obsahu tag NOFRAMES, ale obsah se vkládá přímo mezi
otevírací a uzavírací tag IFRAME.
Nevýhody rámůVysvětlili jsme si vše, co potřebujete k tomu,
abyste mohli vytvářet stránky s použitím rámů. Je ale nutné si uvědomit,
že rámy přinášejí řadu nevýhod a je vždy velmi dobré zvážit, zda tuto
technologii použijete pro své stránky. Obecně se dá říci, že stránky bez
rámů jsou pro uživatele lepší, ovšem existují případy, kdy rámy velmi
podstatně usnadní práci s dokumenty HTML (dobrým příkladem je rozhraní
cédéčka časopisu Computer).
- Problémy s ukládáním stránek
Pokud uživatel zvolí
standardní postup, tedy v MS Internet Exploreru zvolí položku
Soubor-Uložit jako, uloží se mu pouze stránka s informacemi o
rozložení rámů, ovšem nikoli samotný obsah jednotlivých oken.
- Problémy s tiskem
Pokud chce uživatel vytisknout pouze
obsah jednoho rámu, nenabízí mu Internet Explorer žádnou jinou možnost,
než kliknutí pravým tlačítkem myši do příslušné části. Řada uživatelů
ale o této možnosti neví a tiskne tak zbytečně i obsah rámů, který je
nezajímá.
- Obtížné přidávání stránek s rámy k oblíbeným
položkám
Pokud se dostanete na nějakou konkrétní stránku a
zvolíte přidání k oblíbeným položkám, načte se příště opět pouze úvodní
stránka, takže budete muset pokaždé klikat na odkazy, abyste se dostali
tam, kam potřebujete.
- Vyšší náročnost na zpracování
K zobrazení stránek s rámy
potřebujete vyšší výkon počítače, než k zobrazení standardních stránek.
To je způsobeno tím, že každý rám je vlastně novým oknem prohlížeče a
tudíž více zatěžuje systém.
- Nižší rychlost načítání
Uvědomte si, že čím více rámů k
vytvoření svých stránek použijete, tím více stránek se bude muset ke
koncovému uživateli přenášet. Při prohlížení na lokálním disku tuto
skutečnost nezaznamenáte, avšak pokud si zkusíte stejné stránky načíst
přes modem s rychlostí 33,6 kbps, budete se možná divit jak výrazně se
přenos prodlouží. Kromě zmíněných nevýhod existuje pochopitelně
i řada důvodů, proč rámy používat. Jestliže se tedy rozhodnete své stránky
vytvořit s pomocí rámů, dejte si velmi záležet na tom, aby byly maximálně
optimalizované a aby neobsahovaly zbytečnosti a nadbytek grafiky.
Těším se opět za týden u "kulatého" dvacátého dílu našeho seriálu.
Související články:
Zajímá-li vás
bližší pohled na tento článek, podívejte se na něj v
souvislostech.
 |
 |