Utilizand cadrele (frames) puteti afisa mai multe pagini HTML intr-o singura fereastra a navigatorului.
E.1. Cadrele (frames).
Asa cum am afirmat mai sus pentru a putea afisa mai multe documente HTML intr-o singura fereastra a unui navigator (browser) va trebui sa utilizam cadrele. Fiecare document este afisat intr-un cadru separat si independent unul fata de celalalt.
Dezavantajele utilizarii cadrelor sunt:
- dezvoltatorul de pagini Web trebuie sa urmareasca mai multe documente HTML;
- este dificil sa tiparim intraga pagina care contine cadrele.
E.2. Marcajul <frameset>.
Marcajul <frameset> defineste modul de divizare (impartire) a ferestrei navigatorului in cadre.
Fiecare marcaj <frameset> defineste un set de randuri sau coloane. Valorile pentru randuri si coloane indica suprafata din fereastra navigatorului pe care randurile sau coloanele o vor ocupa.
E.3. Marcajul <frame>.
Marcajul <frame> defineste documentul HTML ce va fi afisat in fiecare cadru.
Marcajul <frame> are trei atribute importante:
- "name", atribut care stabileste numele cadrului. Este util atunci cand folosim atributul "target" in marcajul <a>;
- "frameborder", atribut care stabileste daca va fi afisata sau nu marginea (bordura) cadrului, si poate avea valorile 0 (nu afiseaza) si 1(afiseaza);
- "scrolling", atribut care stabileste daca vor fi afisate sau nu barele de derulare (scrollbars). Acest atribut poate avea una din urmatoarele valori: "no" (nu sunt afisate niciodata barele de derulare), "yes" (barele de derulare sunt afisate intotdeauna) si "auto" (barele de derulare sunt afisate doar atunci cand este necesar);
- "noresize", atribut care specifica daca cadrul poate fi modificat (marit sau micsorat) de catre persoana care navigheaza (client).
In urmatorul fragment de cod sursa vom diviza fereastra in doua coloane utilizand marcajul <frameset>.
Prima coloana va ocupa 25% din latimea ferestrei navigatorului. A doua coloana va ocupa 75% din latimea ferestrei navigatorului.
In prima coloana (primul cadru) va fi afisat documentul HTML "pagina1.html", iar in a doua coloana (al doilea cadru) va fi afisat documentul HTML "pagina2.html".
In continuare este oferit fragmentul de cod sursa discutat:
<frameset cols="25%, 75%"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset>
E.4. Exemple.
In acest exemplu dorim sa impartim fereastra navigatorului in doua coloane, iar a doua coloana sa o divizam in doua randuri.
Prima coloana va ocupa 50% din latimea ferestrei navigatorului. A doua coloana va ocupa 50% din latimea ferestrei navigatorului.
Primul rand din a doua coloana va ocupa 50% din inaltimea coloanei. Al doilea rand din a doua coloana va ocupa 50% din inaltimea coloanei.
In prima coloana va fi afisat documentul HTML "e1a.html".
In primul rand din cea de a doua coloana va fi afisat documentul HTML "e1b.html".
In al doilea rand din cea de a doua coloana va fi afisat documentul HTML "e1c.html".
Dupa cum se poate remarca cadrele au o margine (bordura) vizibila, ceea ce ar permite ca utilizatorul sa modifice marimea acestor cadre cu ajutorul mouse-ului. Pentru a elimina aceasta posibilitate de modificare a marimi cadrelor putem adauga atributul "noresize" marcajului <frame>.
In cazul in care un navigator nu suporta utilizarea cadrelor este indicat sa adaugam marcajul <noframes>, marcaj care va afisa informatia din interiorul sau (doar daca navigatorul nu suporta utilizarea cadrelor).
Documentul care va contine setarea cadrelor se va numi "e1.html" si va avea urmatorul continut:
<html>
<frameset cols="50%,50%">
<frame src="e1a.html">
<frameset rows="50%,50%">
<frame src="e1b.html">
<frame src="e1c.html">
</frameset>
</frameset>
</html>
In codul sursa anterior se poate observa ca nu am mai utilizat elementul "body", deoarece atunci cand utilizam cadre nu trebuie utilizat elementul "body".
Continutul documentului HTML "e1a.html":
<html>
<body bgcolor="orange">
<b>Acesta este cadrul 1!</b>
</body>
</html>
Continutul documentului HTML "e1b.html":
<html>
<body bgcolor="orange">
<b>Acesta este cadrul 2!</b>
</body>
</html>
Continutul documentului HTML "e1c.html":
<html>
<body bgcolor="orange">
<b>Acesta este cadrul 3!</b>
</body>
</html>
In urmatorul exemplu vom imparti fereastra navigatorului in doua cadre (cols="40%,*"). In primul cadrul (stanga) vom afisa documentul "e2a.html", iar cadrul se va numi "stanga" (name="stanga"). In cel de al doilea cadru vom afisa initial fisierul "e2b.html", iar cadrul se va numi "dreapta".
Continutul fisierului HTML care realizeaza impartirea in cadre ("e2.html") este oferit in continuare:
<html>
<frameset cols="40%,*">
<frame src="e2a.html" name="stanga" frameborder="0" scrolling="auto">
<frame src="e2b.html" name="dreapta" frameborder="0" scrolling="auto">
</frameset>
</html>
Continutul fisierului "e2a.html":
<html>
<body bgcolor="orange">
<p><a href="e2a1.html" target="dreapta">Pagina1</a></p>
<p><a href="e2a2.html" target="dreapta">Pagina2</a></p>
<p><a href="e2b.html" target="dreapta">Pagina de start</a></p>
</body>
</html>
Dupa cum se poate observa am utilizat atributul "target" pentru a stabili in ce cadru va fi afisat documentul specificat in legatura. Cea de atreia legatura (<p><a href="e2b.html" target="dreapta">Pagina de start</a></p>) ne permite reantoarcerea la pagina initiala, pagina afisata initial in cadrul din dreapta.
Continutul fisierului "e2b.html":
<html>
<body bgcolor="orange">
<h2>Pagina de start</h2>
</body>
</html>
Continutul fisierului "e2a1.html":
<html>
<body bgcolor="orange">
<b>Pagina 1!</b>
</body>
</html>
Continutul fisierului "e2a2.html":
<html>
<body bgcolor="orange">
<b>Pagina 2!</b>
</body>
</html> |
BluePink 
