|
Incepand cu
Netscape Navigator 2, autorii paginilor HTML au posibilitatea de a imparti
fereastra browserului in cadre, fiecare cadru afisand un document HTML
diferit. Foarte rapid, cadrele au castigat
popularitate, fiind adoptate de Internet Explorer, iar mai tarziu incluse in
specificatiile HTML 4.
Cadrele ofera
autorilor de pagini HTML posibilitatea de a pastra vizibila o parte a
informatiei, in timp ce o alta parte a informatiei este derulata (scroll) sau
inlocuita.
Avantaje:
- dimensiunea (KB) mai mica a fiecarui cadru
in parte, comparativ cu cazul in care ar fi existat o singura pagina,
determina un timp de incarcare mai redus.
Dezavantaje:
- unele motoare de cautare nu indexeaza
siturile realizate cu cadre
- autorul trebuie sa tina evidenta unui numar
mare de pagini HTML
- exista unele browsere care nu pot afisa
pagini realizate cu cadre
- este dificil de printat intreaga pagina
Cadrele sunt introduse prin perechea
de marcaje <frameset></frameset>, respectiv marcajul <frame>.
Frameset defineste modul de
impartire al ferestrei (spatiul alocat fiecarui cadru in parte).
|
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'
'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset cols='30%, 70%'>
<frameset rows='200, 200'>
<frame src='continut_cadru1.html'>
<frame src='continut_cadru2.html'>
</frameset>
<frame src='continut_cadru3.html'>
<noframes>
<p>Acest document contine:
<ul>
<li><a href='continut_cadru1.html'>continut</a>
<li><img src='continut_cadru2.html' alt='imagine'>
<li><a href='continut_cadru3.html'>continut</a>
</ul>
</noframes>
</frameset>
</html>
|
|
|
Asa cum se vede
mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc
marcaje frameset imbricate.
|
<frameset [border=n] [bordercolor=#rrggbb]
[cols=x,y,..] [rows=x,y,..]
</frameset>
|
|
|
Dupa cum se poate observa mai sus, marcajul <frameset> are
urmatoarele atribute:
- border - defineste
latimea chenarului; numai frameset-ul exterior va raspunde la valoarea
acestui atribut. Este o extensie Microsoft/Netscape.
- bordercolor -
specifica culoarea chenarului, in format RGB. Este o extensie
Microsoft/Netscape.
- cols -
defineste (pe verticala) dimensiunile sau proportiile cadrelor in cadrul
unui <frameset>. Dimensiunile pot fi precizate ca:
- valoare
absoluta (in pixeli)
- valoare
relativa (in procente)
- * -
semnifica spatiul ramas disponibil dupa afisarea cadrelor anterior
definite
- rows -
defineste (pe orizontala) dimensiunile sau proportiile cadrelor in
cadrul unui <frameset>. Dimensiunile pot fi precizate ca:
- valoare
absoluta (in pixeli)
- valoare relativa
(in procente)
- * - semnifica
spatiul ramas disponibil dupa afisarea cadrelor anterior definite
Cadrele
propriu-zise sunt introduse prin marcajul <frame>.
|
<frame [frameborder=yes|no] [longdesc=URL]
[src=URL] [name=identificator] [noresize]
[scrolling = auto|yes|no] [marginwidth=x]
[marginheight=y]
</frame>
|
|
|
Marcajul <frame> are
urmatoarele atribute:
- frameborder - specifica daca
un cadru va afisa sau nu chenar. In cazul in care un cadru are setat frameborder=no,
iar cadrele adiacente au specificata afisarea chenarului, acest atribut
nu va avea efect pentru cadrul cu frameborder=no.
- longdesc -
specifica un link catre o descriere 'lunga' a cadrului
respectiv. Scopul acestei descrieri este de a completa descrierea
realizata prin atributul title.
- src -
specifica linkul catre continutul initial care va fi incarcat in
elementul <frame>. Linkul poate fi o cale absoluta (http://www.domeniu.ro/pagina.html)
sau relativa (pagina.html).
- name - atribuie
un nume cadrului curent. Acest nume poate fi folosit in combinatie cu
marcajul a (<a href='pagina.html'
target='RightFrame'></a>) pentru a incarca o
pagina intr-un anumit cadru.
- noresize - cadrele
pot fi redimensionate de catre utilizatori. Prin folosirea atributului noresize
browserul va bloca redimensionarea cadrelor de catre utilizator.
- scrolling -
specifica browserului afisarea/ascunderea barei de scroll (derulare)
dintr-un cadru. Poate lua urmatoarele atribute:
- auto -
afisarea barei de scroll se face atunci cand este necesar (continutul
depaseste spatiul afisabil)
- yes - bara
de scroll este permanent afisata
- no - bara
de scroll nu va fi afisata, chiar si in eventualitatea in care este
necesara.
- marginwidth, marginheight -
specifica distanta dintre marginea interioara a cadrului si continutul
afisabil. Atributul marginheight stabileste distanta pentru
marginea superioara/inferioara a cadrului. Atributul marginwidth
stabileste distanta pentru marginea stanga/dreapta a cadrului.
Exemplul
de mai jos defineste un <frameset> cu doua coloane:
|
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'
'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset cols='30%, 70%'>
<frame src='continut_cadru1.html'>
<frame src='continut_cadru2.html'>
<noframes>
<p>Acest document contine:
<ul>
<li><a href='continut_cadru1.html'>continut</a>
<li><img src='continut_cadru2.html' alt='imagine'>
</ul>
</noframes>
</frameset>
</html>
|
|
|
Marcajul <noframes>
reprezinta alternativa (codul HTML) care va fi afisata in browserele care nu
suporta cadre. Browserele care pot afisate cadre vor ignora acest marcaj.
Exemplul de mai jos
defineste un <frameset> cu doua randuri:
|
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'
'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset rows='30%, 70%'>
<frame src='continut_cadru1.html'>
<frame src='continut_cadru2.html'>
<noframes>
<p>Acest document contine:
<ul>
<li><a href='continut_cadru1.html'>continut</a>
<li><img src='continut_cadru2.html' alt='imagine'>
</ul>
</noframes>
</frameset>
</html>
|
|
|
Exemplul de mai jos
defineste un <frameset> cu doua cadre orizontale, primul cadru
avand alocat 25% din spatiul disponibil pe verticala, iar cel de al doilea
cadru 75%:
|
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'
'http://www.w3.org/TR/html4/frameset.dtd'>
<html>
<head>
<title>Un document cu cadre</title>
</head>
<frameset rows='*,3*'>
<frame name='navigare' src='navigare.html'>
<frame name='continut' src='continut.html'>
<noframes>
text
</noframes>
</frameset>
</html>
|
|
|
TEMA!
|
- Realizeaza o
pagina HTML (folosind NotePad), care sa contina 2 cadre verticale.
Primul cadru (stanga) trebuie sa contina 3 meniuri (linkuri),
fiecare facand trimitere catre o pagina HTML diferita, care se va
incarca in cadrul 2 (dreapta). Toate paginile din cadrul 2 vor
avea bara de scroll; schema de culori va fi diferita de la pagina
la pagina (font + fundal).
|
|
|
|
