Sunteți pe pagina 1din 8

Lecia 5: Cadre

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.

Poti vizualiza exemplul de mai sus in browserul tau, aici.

<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.

Poti vizualiza exemplul de mai sus in browserul tau, aici.

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>

Poti vizualiza exemplul de mai sus in browserul tau, aici.

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>