Učebnica

per aspera ad astra

Nástroje používateľa

Nástoje správy stránok


html:ramce

Rámce

Rámce

Pomocou rámcov môžete vytvárať jednoduchú štruktúru webovej stránky, kde v jednom momente máte zobrazené viac HTML súbory v dokumente, rozdelené pomocou rámcov. Na rozdeľovanie dokumentu do rámcov potrebujeme viac značiek, ako by sa na prví pohľad mohlo zdať. V prvom rade potrebujeme rozdeliť dokument buď na riadky alebo na stĺpce v požadovanom počte a rozmere. Na toto slúži párová značka <FRAMESET> a atribút COLS alebo ROWS podľa toho, či chceme deliť stĺpce, alebo riadky. Následne zaradom podľa počtu polí (riadkov / stĺpcov) vložíme značku FRAME.

Jednoduchý dokument s dvoma riadkami:

<frameset rows="30%,70%">
  <frame src="horny.html" name="horny">
  <frame src="dolny.html" name="dolny">
</frameset>

Dva riadky 30% + 70%

Jednoduchý dokument s dvoma stĺpcami:

<frameset cols="40%,60%">
  <frame src="lavy.html" name="lavy">
  <frame src="pravy.html" name="pravy">
</frameset>

Dva stĺpce 30% + 70%

COLS alebo ROWS fungujú rovnako, počet údajov oddelených čiarkou značí o počte riadkov alebo stĺpcov. Hodnota môže byť buď bezrozmerná - číselná, percento (%), zobrazovacie body (px) alebo *. Hviezdička znamená zvyšok, ktorý ostal nerozdelený do natiahnutia tabuľky na celú šírku, alebo výšku dokumentu. Jednoduchú konverznú tabuľku nájdete na adrese: http://sureshjain.wordpress.com/2007/07/06/53/

Jednoduchý dokument s troma stĺpcami:

<frameset cols="30%,*,30%">
  <frame src="lavy.html" name="lavy">
  <frame src="stred.html" name="stred">
  <frame src="pravy.html" name="pravy">
</frameset>

Tri stĺpce 30% + * + 30%

Kombinovanie vertikálneho a horizontálneho rozdelenia

Kombináciou dvoch a viacerých značiek FRAMESET môžete dosiahnuť aj rozmanitejšiu štruktúru dokumentu, ako sú iba riadky, alebo iba stĺpce. V následujúcom príklade si ukážeme ich kombináciu.

<frameset cols="30%,*">
  <frame src="menu.html" name="menu">
  <frameset rows="30%,*">
    <frame src="hlavicka.html" name="hlavicka">
    <frame src="obsah.html" name="obsah">
  </frameset>
</frameset>

Tento príklad nieje najvhodnejší na domovskú stránku, hlavička by bola lepšia, keby bola cez celú dĺžku a pod ňou sa delil obsah na menu a obsah. Ako toho docielime si vyskúšajte sami.

Odkazy

Odkazy môžeme smerovať do konkrétneho rámca pomocou atribútu TARGET. Zoberme si, že máme 2 rámce lavy a pravy ako v jednom predchádzajúcom príklade. V ľavom bude umiestnené menu s odkazmi, ktoré odkazujú do pravého rámca. Keďže pravý rámec sa vola pravy, cez atribút name=pravy, v odkazoch použijeme atribút target=pravy.

súbor lavy.html bude obsahovať napríklad túto pasáž:

<a href="omne.html" target="pravy">O mne</a><br>
<a href="skola.html" target="pravy">Moje štúdium</a><br>
<a href="zaluby.html" target="pravy">Moje záľuby</a><br>
<a href="codokazem.html" target="pravy">Čo dokážem ?</a><br>

NOFRAMES

Ak Vaša webstránka obsahuje rámce ale návštevník vašej webstránky nemá webový prehliadač podporujúci rámce, môžete ho na to upozorniť párovou značkou NOFRAMES Do ktorej vložíte text, ktorý sa zobrazí namiesto rámcov.

<frameset cols="40%,60%">
  <frame src="lavy.html" name="lavy">
  <frame src="pravy.html" name="pravy">
  <noframes>
    Prepacte, vas prehliadac nepodporuje ramce !
  </noframes>
</frameset>

iframe

Značka IFRAME slúži na vkladanie webstránky, do už existujúcej webstránky. V princípe ma podobné použitie a atribúty ako napríklad značka IMG.

<iframe src="subor.html" width="300" height="100">
</iframe>

V predchádzajúcom príklade sme použili súbor subor.html, ktorý sa vloží do okna o rozmere 300×200.

Atribúty:

  • frameborder - Medzi ďalšie atribúty tejto značky patrí napríklad frameborder, ktorým nastavujeme veľkosť rámčeka. Ak nechceme žiaden ramček, nastavíme na 0.
  • scrolling - Pokiaľ nechceme zobraziť rolovacie lišty, scrolling nastavíme na no.
  • name - pomenujeme tento prvok tak, aby sme mohli meniť jeho obsah pomocou odkazov (a target=)

Úloha

  1. Pri spracovaní úlohy využite už napísane texty z predchádzajúcich úloh.
  2. Najprv si rozdelte stránku vodorovne a to tak, že horný rámec bude hlavička a spodný rámec sa rozdeli zvisle. V ľavo bude menu a v pravo sa bude objavovať obsah zvolený z menu.
  3. Ľavé menu bude obsahovať nečíslovaný zoznam s odkazmi podľa doterajších úloh: „Životopis“, „Článok“, „Zoznam jedál a štátov EU“, „Odkazy“, „Kalendár“, „Multimédia“.
  4. Odkaz „Multimédia“ bude ako jediný meniť rámec so zoznamom a to tak, že bude obsahovať číslovaný zoznam odkazov „Obrázky“, „Hudba“, „Video“ a odkaz „Späť“.
  5. Úlohu odovzdajte najneskôr do 12:00 formou odoslaného zabaleného súboru v formáte ZIP s menom v tvare: ramce-vasepriezvisko.zip na ftp://server/incoming
  6. :!: Nezabúdajte dodržiavať štruktúru HTML súboru.
html/ramce.txt · Posledná úprava: 2016/07/28 16:07 (externá úprava)