Jak vytvářet www stránky - 19. díl
Rámy - pokračování
V předcházejícím díle jsme si vysvětlili základy vytváření stránek s rámy - umíte tedy vytvořit stránku, která se skládá z několika jiných stránek a umíte také určit jejich rozložení. Kouzlo rámů ale spočívá v něčem jiném, než pouze v tom, že načtete do prohlížeče více stránek současně. Jak jsme již naznačili, slouží rámy především ke snadnějšímu ovládání stránek - například budete chtít zobrazit v horní části stránky reklamní banner, po levé straně připravíte menu a zbytek stránky se bude měnit podle toho, jakou položku z menu uživatel zvolí. Pro tyto účely jsme si minule připravili následující stránku, kterou jsme nazvali ramy.html:
<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ý na stránce dva.html odkaz 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 target
V 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 NOFRAMES
Již 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 - IFRAME
V 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.
|
