Image
15.6.2016 0 Comments

Vytvárame WWW stránky / 9. časť

Späť na úvod >> Späť na seriál

Tentoraz si povieme niečo o rámoch (frames), o ich výhodách i nevýhodách a základoch práce s nimi.
Rámy prinášajú veľa výhod, na druhej strane však môžu spôsobovať problémy. Do jazyka HTML však rozhodne patria, a preto im je venovaná táto časť seriálu. Rámy umožňujú rozdeliť WWW stránku do niekoľkých navzájom nezávislých okien. V jednej časti tak môže byť napríklad navigačný panel, v druhej reklama a v tretej samotný obsah. Všetko si vysvetlíme na nasledujúcom príklade:

<HTML>
<HEAD>
<TITLE>Dokument s rámami</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="prvy_ram.htm">
<FRAME src="druhy_ram.htm">
</FRAMESET>
<FRAME src="treti_ram.htm">
<NOFRAMES>
<P>Váš prehliadač nepodporuje rámce. Ich obsah si však môžete prezrieť pomocou nasledujúcich odkazov:
<UL>
<LI><A href="prvy_ram.htm">Odkaz na 1. stránku</A>
<LI><A href="druhy_ramy.htm">Odkaz na 2. stránku</A>
<LI><A href="treti_ram.htm">Odkaz na 3. stránku</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>

Výsledok bude potom takýto:
Ak sa vám nezobrazilo nič, bude to tým, že váš prehliadač rámy nepodporuje. Preto sme si pripravili sekciu medzi tagmi <NOFRAMES> a </NOFRAMES>. Táto sekcia zobrazuje alternatívny obsah, pretože inak by sa nezobrazilo nič. Ak sa rozhodnete vytvárať svoje stránky pomocou rámov, nezabúdajte na užívateľov, ktorých prehliadače rámy nepodporujú.

Tag Frameset
Ak ste si pozorne prezreli zdrojový kód nášho príkladu, určite ste zbadali tag, ktorým je nahradený tag Body. Tento tag je Frameset, ktorý definuje rozloženie stránok v okne prehliadača. Jeho základné atribúty sú:
cols  – definuje počet stĺpcov (vertikálnych stránok) a ich rozmery. Rozmery môžeme určovať dvoma spôsobmi: absolútne počtom pixelov alebo relatívne v percentách veľkosti plochy okna. Element <FRAMESET cols="20%, 80%"> napríklad znamená, že stránka sa rozdelí na dva stĺpce a prvý bude zaberať 20 % šírky obrazovky a druhý 80 %. Okrem toho môžete použiť aj symbol hviezdičky *. Príklad:

<FRAMESET cols="15%,150,*">
definícia jednotlivých rámov
</FRAMESET>

V tomto príklade vznikne stránka zložená z troch stĺpcov, pričom prvý bude zaberať 15 % obrazovky, druhý bude široký 150 pixelov a tretí zvyšok stránky.

<FRAMESET cols="1*,250,3*">
definícia jednotlivých rámov
</FRAMESET>

Tentoraz bude prostredný stĺpec široký 250 pixelov, ľavý zaberie štvrtinu zostávajúceho priestoru a pravý potom tri štvrtiny. (Ľavý stĺpec má šírku 1*, pravý 3*, a teda ľavý bude trikrát menší ako pravý.)
rows – definuje počet riadkov (horizontálnych stránok) a ich rozmery. Pri tomto atribúte platia rovnaké pravidlá ako pri atribúte cols.

Ak chcete, aby sa stránka skladala napríklad z dvoch riadkov a dvoch stĺpcov, bude zápis nasledujúci:

<FRAMESET rows="30%,70%" cols="33%,67%">
definícia jednotlivých rámov
</FRAMESET>

Vnáranie tagov Frameset
Často sa stretávame so stránkami, ktoré majú v hornej časti jeden rám na reklamu, ďalší je vľavo na navigáciu a zvyšok stránky je vpravo. Ako to dosiahnuť? Jednoducho. Stačí sa naučiť vnárať tag Frameset. Na to potrebujete aj trochu predstavivosti. V našom prípade sa stránka skladá z dvoch riadkov – horný tvorí reklamný rám a dolný je rozdelený do dvoch stĺpcov. Budeme teda musieť stránku najprv rozdeliť vodorovne  (<FRAMESET rows="20%, *">) a druhú časť zase zvisle (<FRAMESET cols="100,*">). Tu je okomentovaný príklad:

<HTML>
<HEAD>
<TITLE>Naša ukážková stránka</TITLE>
</HEAD>

<FRAMESET rows="20%, *"> – stránku najprv rozdelíme vodorovne na dve časti
<FRAME src="jedna.htm"> – definujeme obsah hornej časti stránky
<FRAMESET cols="100, *"> – dolnú časť delíme zvisle na dva stĺpce
<FRAME src="dva.htm"> – definujeme obsah ľavého stĺpca
<FRAME src="tri.htm"> – definujeme obsah pravého stĺpca
</FRAMESET> – uzatvárame zvislé rozdelenie stránky
</FRAMESET> – uzatvárame vodorovné rozdelenie stránky

</HTML>


Tag Frame
Vo všetkých príkladoch sme použili tag frame, ale ešte sme nevysvetlili jeho význam. Jeho význam je jednoduchý – definuje obsah a vlastnosti jednotlivých rámov. Tu sú jeho parametre:
src – definuje stránku, ktorá bude zobrazená v danom ráme. Zadáva sa ako adresa k hypertextovému odkazu, a to buď relatívne, alebo absolútne.
name – meno rámu. Tento parameter je dosť dôležitý. Ak napríklad v navigačnom menu zvolíte nejakú položku, musí prehliadač vedieť, v ktorom ráme ju zobraziť.
frameborder – určuje, či bude okno oddelené od ostatných rámov. Tento parameter má iba dve hodnoty, a to 0 (okno nebude oddelené rámčekom) a 1 (okno bude oddelené rámčekom). Ak na tento parameter zabudnete, väčšina prehliadačov medzi oknami rámček zobrazí a to môže kaziť výsledný dojem.
marginwidth – parameter určujúci vzdialenosť obsahu rámčeka od horného a dolného okraja. Udáva sa v pixeloch.
marginheight – obdoba parametra marginwidth s tým rozdielom, že definuje vzdialenosť rámčeka od ľavého a pravého okraja. Takisto sa udáva v pixeloch
noresize – pri uvedení tohto parametra nebude mať používateľ možnosť meniť veľkosť rámov.
scrolling – parameter určujúci možnosti rolovania obsahu rámu (či bude naboku rolovacia lišta, ktorá umožní posúvať stránku). Má tri možné hodnoty:
yes – obsah rámu je možné posúvať, lišta bude zobrazená i v prípade, že nie je potrebná;
no – obsah rámu nie je možné posúvať, lišta nebude zobrazená vôbec. Toto nastavenie sa však neodporúča, pretože naši návštevníci môžu používať rôzne rozlíšenia;
auto – obsah rámu je možné posúvať, lišta bude zobrazená iba v prípade, že je potrebná. Táto voľba je najideálnejšia.

Ak parameter scrolling neuvediete, väčšina prehliadačov ho berie ako auto.

Príklad:

<HTML>
<HEAD>
<TITLE>Stránka s rámami</TITLE>
</HEAD>
<FRAMESET rows="20%, *">
<FRAME src="jedna.htm" name="reklamnybanner" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAMESET cols="100, *">
<FRAME src="dva.htm" name="menu" target="stranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
<FRAME src="tri.htm" name="stranka" frameborder=0 marginwidth=0 marginheight=0 noresize scrolling=auto>
</FRAMESET>
<NOFRAMES>

obsah pre používateľov s prehliadačom nepodporujúcim rámce

</NOFRAMES>
</FRAMESET>
</HTML>

Túto stránku si teraz môžete pripraviť. Pomenovať ju môžete napríklad rámy.htm a stránky jedna.htm, dva.htm a tri.htm. To týchto stránok vložte zatiaľ iba základné tagy. Teraz už ovládame základy práce s rámami. Kúzlo rámov je však v niečom inom, nie iba v načítaní viacerých stránok do okna prehliadača. Už sme si povedali, že slúžia najmä na jednoduchšie ovládanie stránok. Do stránky tri.htm pridajte nejaký banner a do stránky dva.htm vytvorte nasledujúce menu:

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
</HEAD>
</BODY>
<UL>
<LI><A href="tri.htm" target="stranka">Úvod</A>
<LI><A href="styri.htm" target="stranka">Software</A>
<LI><A href="pat.htm" target="stranka">Hardware</A>
<LI><A href="sest.htm" target="stranka">Ovládače</A>
</UL>
</BODY>

Dokumenty tri.htm, styri.htm, pat.htm a sest.htm sa budú zobrazovať v zostávajúcej časti stránky podľa toho, na ktorý odkaz užívateľ na stránke dva.htm klikne. Ak sa pozornejšie zadívame do zdrojového kódu, uvidíme parameter target="stranka", ktorý prehliadaču hovorí, aby danú stránku načítal do rámu pomenovaného stránka. 

Tag Base a parameter target
V predchádzajúcom príklade viedli všetky odkazy zo stránky dva.htm do rámu s názvom stránka, takže všetky opakovali ten istý parameter target. Dá sa to však zjednodušiť. Stačí použiť tag Base, ktorý špecifikuje meno cieľového rámu pre celú stránku. S týmto elementom bude naša stránka vyzerať takto:

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<BASE target="stranka">
</HEAD>
</BODY>
<UL>
<LI><A href="tri.htm">Úvod</A>
<LI><A href="styri.htm">Software</A>
<LI><A href="pet.htm">Hardware</A>
<LI><A href="sest.htm">Ovládače</A>
</UL>
</BODY>

Tým sme stránku skrátili asi o 60 bajtov bez toho, aby sme zmenili jej funkčnosť. Ak budeme chcieť, aby niektorý z odkazov viedol do iného rámu, ako je stránka, stačí pri elemente A použiť parameter target, ktorému sa dá prednosť pred tagom Base. Pre prácu s elementom Base a parametrom target je dobré pamätať si niekoľko pravidiel:

1. Ak parameter target odkazuje na existujúci rám, bude stránka, na ktorú sa odkazuje, zobrazená v ráme, ktorý má názov zodpovedajúci hodnote parametra target.
2. Ak stránka obsahuje element Base a odkaz neobsahuje parameter target, bude odkazovaná stránka načítaná do rámu s parametrom Base.
3. Ak stránka neobsahuje element Base a odkaz neobsahuje parameter target, bude odkazovaná stránka načítaná do rovnakého rámu, ako je stránka s odkazom.

Parameter target nemusí obsahovať len meno okna, do ktorého má byť stránka načítaná, môže mať namiesto toho jednu z týchto hodnôt:

target="_self" – dokument sa načíta do rovnakého okna
taget="_parent" – dokument sa načíta do okna definovaného najbližším nadriadeným tagom Frameset
target="_top" – dokument sa načíta do celého okna prehliadača, čím zruší všetky rámy
target="_blank" – dôjde k otvoreniu nového okna prehliadača a dokument sa načíta do tohto okna. Rovnaký efekt dosiahnete vo väčšine prehliadačov tak, že ako hodnotu uvediete meno nedefinovaného rámu.

Záver
Tak to je na tento mesiac všetko. Nabudúce budeme s rámami pokračovať, povieme si ešte niečo o tagoch Noframes a Iframe a začneme sa venovať multimediálnemu rozširovaniu stránok. 

 

Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá