HTML Frejmovi - Lekcija 5
Hajde da vežbamo još malo. Napravićemo jednu finu stranu sa frejmovima, ali postupno.
Neće to biti ništa specijalno, već nešto ovako.
Opet imam jednu napomenicu... trudite se da Vaše delo bude što jednostavnije. Sajt sa gomilom frejmova i linkova koji usmeravaju svuda redom, može da bude komplikovan kako za izgradnju, tako i za navigaciju.
Prvo ćemo da smislimo izgled finalnog proizvoda. Po mom mišljenju, najbolje rešenje je veliki naslov gore, prozor za navigaciju levo i glavni prozor desno. Počnimo od Glavne strane.
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Sledeće što ćemo da uradimo je da dodamo podršku za srpski jezik. To se dobija dodavanjem jednog META taga u HEAD deo fajla.
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=WINDOWS-1250">
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
NAPOMENA: OVAJ RED ĆU UBUDUĆE IZOSTAVLJATI (TJ. PODRAZUMEVATI), A VI GA STAVLJAJTE GDE GOD žELITE DA PIŠETE NAŠIM SLOVIMA! INAČE, MOGUĆE JE KORISTITI I ĆIRILICU - SAMO ZAMENITE BROJ 1250 BROJEM 1251.
Napravite novi foder, pa u njega snimite ovo kao INDEX.HTML. Slika koja će predstavljati glavni naslov na strani nalazi se ovde ispod. Snimite je u radni folder kao FRAMZ1.GIF.
Podelite prozor horizontalno.
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
</FRAMESET>
</HTML>
Zašto ROWS="83,*"? Broj 83 smo dobili tako što smo dodali 8 na visinu slike (75), što je preporučeni metod određivanja visine frejmova. Primetite da, zbog korišćenja apsolutnih dimenzija, imamo jedan elastičan frejm.
Zatim, odredimo da BANNER.HTML ide u gornji frejm (taj fajl ćemo uskoro napraviti). Takođe, dodajmo i par <FRAMESET> tagova, jer ćemo taj donji frejm dodatno deliti.
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
VIDI!
Možete odmah proveriti šta smo uradili, ali verovatno ćete samo dobiti poruku o grešci, jer je ovo za sad nezavršeno.
Podelićemo donji frejm na dva dela. Neka levi frejm sadrži fajl NAVIGACIJA.HTML, a desni - HOME.HTML. Ponavljam, mi još uvek nismo napravili ta dva fajla, tako da ćete i dalje dobijati poruku o grešci (ili dve) (ili tri)
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="navigacija.html">
<FRAME SRC="home.html">
</FRAMESET>
</FRAMESET>
</HTML>
VIDI!
Kako će navigacioni frejm biti levo, a svi ostali fajlovi će se učitavati u desni prozor, to je potrebno dati ime desnom frejmu. Zapravo, jedino tom frejmu je i potrebno dati ime (jer će se, kao što je već rečeno, svi fajlovi učitavati upravo u taj frejm).
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html">
<FRAMESET COLS="20%,80%">
<FRAME SRC="navigacija.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>
</HTML>
VIDI!
Dobro. Ovaj deo je završen... za sada.
Hajde da napravimo i BANNER.HTML. Počnite ovako:
<HTML>
<HEAD>
<TITLE>Test strana - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
</BODY>
</HTML>
Snimite to, i primetite da je za pozadinu odabrana plava boja.
VIDI banner.html
VIDI Glavnu stranu
Ubacite sliku, pa je centrirajte...
<HTML>
<HEAD>
<TITLE>Test strana - Banner</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
<CENTER><IMG SRC="framz1.gif" WIDTH=500 HEIGHT=75></CENTER>
</BODY>
</HTML>
VIDI banner.html
VIDI Glavnu stranu
Dooobro... kao što vidite, imamo problem. Prvo, skrolobar smeta, i drugo, slika nije pozicionirana u prozoru baš onako idealno. Zbog toga... Otvorite Glavnu stranu. Uklonite skrolbarove i margine.
<HTML>
<HEAD>
<TITLE>Test strana</TITLE>
</HEAD>
<FRAMESET ROWS="83,*">
<FRAME SRC="banner.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAMESET COLS="20%,80%">
<FRAME SRC="navigacija.html">
<FRAME SRC="home.html" NAME="MAIN-WINDOW">
</FRAMESET>
</FRAMESET>
</HTML>
VIDI!
Vreme je da napravimo stranu za navigaciju, tj. NAVIGACIJA.HTML.
<HTML>
<HEAD>
<TITLE>Test strana - Navigacija</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
</BODY>
</HTML>
VIDI navigacija.html
VIDI Glavnu stranu
Napišite naslov i sav potreban tekst za linkove. Same linkove ćemo dodati ubrzo.
<HTML>
<HEAD>
<TITLE>Test strana - Navigacija</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3>Navigacija</H3>
Home<P>
Dođi Ovde<BR>
ili idi Tamo<P>
Poseti<BR>
Yahoo<BR>
Netscape<BR>
ZoNi.Lyrics!
</BODY>
</HTML>
NARAVNO, NEMOJTE ZABORAVITI DA DODATE RED KOJI SLUŽI KAO PODRŠKA ZA NAŠA SLOVA (POMOĆ). ILI, KORISTITE SAMO STRANA SLOVA - ŠTA VAM VIŠE ODGOVARA.
VIDI navigacija.html
VIDI Glavnu stranu
Linkujmo!
<HTML>
<HEAD>
<TITLE>Test strana - Navigacija</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3>Navigacija</H3>
<A HREF="home.html">Home</A><P>
Dođi <A HREF="ovde.html">Ovde</A><BR>
ili idi <A HREF="tamo.html">Tamo</A><P>
Poseti<BR>
<A HREF="http://www.yahoo.com/">Yahoo</A><BR>
<A HREF="http://home.netscape.com/">Netscape</A>
<A
HREF="http://