HTML Frejmovi - Lekcija 2

Tag <FRAMESET> omogućava deljenje glavnog prozora u više prozorčića. Zapravo, to je gotovo sve što ovaj tag radi... deli prozore. Osim toga, on je zadužen i za nekoliko sitnica, koje se tiču toga kako podeliti prozor.
Neko će sigurno pitati : "Pa, dobro... Možemo li prozor podeliti i na više od dva prozorčića?" Ja odgovaram na to:"A, što ne bi moglo!?". Naravno, za svaki deo prozora mora da bude određen jedan HTML fajl koji će ga popuniti. U suprotnom, jadni, mali browser može da se vrlo zbuni.

<FRAMESET COLS="20%,20%,20%,20%,20%">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAME SRC="maja.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="slavica.html">
</FRAMESET>

VIDI!


Verujem da je već sada očigledno da je moguće pravljenje frejmova različitih dimenzija. Budite obazrivi: zbir dimenzija svih prozorčića mora biti 100% - inače će browser opet biti zbunjen!

<FRAMESET COLS="10%,20%,30%,15%,25%">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAME SRC="maja.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="slavica.html">
</FRAMESET>

VIDI!


Ukoliko, pak, želimo horizontalne redove (ROWS) umesto uspravnih (COLS), situacija će izgledati prilično drugačije.

<FRAMESET ROWS="10%,20%,30%,15%,25%">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAME SRC="maja.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="slavica.html">
</FRAMESET>

VIDI!


Vratimo se na dva frejma, podeljena na jednake kolone.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
</FRAMESET>

VIDI!


Umesto 50%, kolona može biti široka 50 piksela (tačaka). Takođe, možemo da koristimo i zvezdicu (*) umesto broja. Njeno značenje je "SVE ŠTO JE OSTALO".

<FRAMESET COLS="50,*">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
</FRAMESET>

VIDI!

Veoma važna napomena: Pretpostavimo da ste napravili tri prozorčića (frejma), i to takve da je levi frejm širok 100 piksela, desni takođe 100, a srednji zauzima ono što je preostalo. Kako je Vaš monitor podešen na rezoluciju 800×600 (npr.), to znači da je srednji frejm širok 600 piksela (tj. 800-100-100=600). Na prvi pogled sve izgleda odlično... Vama! Rezolucija mog monitora je, npr, 640×480. Oni frejmovi široki 100 piksela sada su kod mene široki 80 piksela. To znači da bi bilo više nego poželjno da u okviru svog FRAMESET taga koristite bar jednu zvezdicu (*), kao elastični frejm. Na taj način, svima će sve izgledati dobro (ili, barem, najbolje što je moguće).

Ovo je uzrok čestom problemu sa frejmovima. Popularni izgled web strane sa frejmovima izgleda ovako, tj. u levom uspravnom frejmu se nalazi čitav direktorijum jednog web sajta, a u desnom, glavnom prozoru prikazuje se sadržaj tih strana (ovo pomalo podseća na Windows Explorer). Evo problema... Ukoliko glavni prozor podelite pomoću relativnih brojeva, tj. procenata (na primer <FRAMESET COLS="15%,85%">), Vama će sve izgledati odlično. Međutim, nekom sa drugačijom rezolucijom, Vaš sajt ne bi izgledao baš sjajno, npr ovako.

Zašto se to dešava? Odgovor je jednostavan. Rekli ste da će levi frejm biti 15%. Međutim, pitanje je: 15% čega? 15% horizontalne rezolucije, kolka god da je ona. To znači da Vaš frejm ne mora (i neće) svima da izgleda baš isto. Pitate - Pa, kako to da prevaziđem? Drago mi je da ste pitali... Koristite apsolutne dimenzije za levi frejm, a desni učinite elastičnim (na primer <FRAMESET COLS="120,*">). Bingo. Problem rešen.

Nije loša ideja da malo povećate dovoljne apsolutne dimenzije. Dajte stvarima u levom frjmu prostor za život. Na primer, ako 100 piksela izgleda dobro, ali je ipak stešnjeno, povećajte taj frejm na 110 ili 120 piksela.

Dobar i bezbolan način za proveru Vaše frejm-strane u nekoliko različitih rezolucija je pomoću Microsoft-ove igračke (PowerToy) Quickres, ili, još bolje, pomoću odličnog programa MultiRes, tajvanskog proizvođača EnTech Taiwan.


Moguće je odnose među frejmovima definisati i na sledeći način:

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAME SRC="maja.html">
</FRAMESET>

VIDI!
Prevedeno na govorni jezik, ovo znači: Napravi tri frejma. Neka prvi bude širok 50 piksela. Ostatak podeli na druga dva frejma, tako da treći frejm bude dva puta širi od drugog. Stavi Ivanu u prvi frejm, Draganu u drugi i Maju u treći.


Šta ako želimo da Majin frejm podelimo na pola horizontalno? Za svako deljenje koristi se <FRAMESET> tag. Prvo moramo da zamenimo Maju sa parom <FRAMESET> tagova.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAMESET>
  </FRAMESET>
</FRAMESET>

Ovim govorimo browseru: Napravi tri frejma. Neka prvi bude širok 50 piksela. Ostatak podeli između drugog i trećeg frejma, tako da treći frejm bude dva puta širi od drugog. Stavimo Ivanu u prvi frejm, Draganu u drugi, a treći frejm ćemo još da delimo. Sada nam ostaje da odredimo kako ćemo da podelimo treći frejm.


Podelimo ga horizontalno.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAMESET ROWS="50%,50%">
  </FRAMESET>
</FRAMESET>


Hajde da stavimo Maju u gornji deo, a Tinu u donji.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="ivana.html">
  <FRAME SRC="dragana.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="maja.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

VIDI!


Ovo je toliko zabavno, da možemo da nastavimo još malo. Hajde da Ivanino polje podelimo horizontalno na tri dela. Neka najviši frejm bude visok 50 piksela. Preostala dva mogu da budu jednaka. Takođe, stavićemo Ivanu u svaki od ta tri prozora. Evo kako izgledaju sve te promene.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="ivana.html">
    <FRAME SRC="ivana.html">
    <FRAME SRC="ivana.html">
  </FRAMESET>
  <FRAME SRC="dragana.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="maja.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

VIDI!
Znam da ovo ne izgleda baš najbolje. Zapravo, ako strana ima previše frejmova, to nikako ne može biti dobro. Nepisano pravilo je da ne bi trebalo da bude više od tri frejma na web strani. Ukoliko možete da potpuno izbegnete frejmove, to bi bilo najbolje.

Došlo je i vreme da razmislimo - šta da radimo sa onima čiji browseri ne podržavaju frejmove (npr. Netscape Navigator 1, ili Internet Explorer 3)? Iako će većina, a možda i svi Vaši posetioci moći će da vide frejmove, tamo negde, u Mrežnoj džungli, postoje i browseri koji ne vide frejmove (non frames capable browsers). Ukoliko i njima želite da omogućite da vide Vaših ruku delo, napravite i NON-FRAMES verziju Vaše web strane.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="ivana.html">
    <FRAME SRC="ivana.html">
    <FRAME SRC="ivana.html">
  </FRAMESET>
  <FRAME SRC="dragana.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="maja.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
Stavite ovde Vašu non-frames stranicu. Ukoliko neko koristi stari
browser, on će preskočiti sve gore napisano i doći će pravo
ovde. Noviji browseri će ignorisati sve između
<NOFRAMES> tagova. Evo nekoliko pitanja.
- Koliko ljudi će propustiti da vidi moju stranu, ako ne napišem NOFRAMES deo? Veoma malo.
- Misliš li da treba da se brinem zbog toga? Ne.
- Da li se ti brineš zbog toga? Ne.
- Pa, što si onda pisao ovaj deo? Zato što on spada u važnije delove HTMLa
i zato što nije loše znati i to.
- Da li si ti uvek tako fin i dobar? Naravno.
</BODY>
</NOFRAMES>

<--Lekcija 1        Lekcija 3-->

Sadržaj Lekcije
Uvod - 1 - 2 - 3 - 4 - 5 - 6 - 7
Templates "Barebones"
HTML vodič
Z o N i . W e b !