Sunteți pe pagina 1din 9

Curs – Programare WEB

Curs – 4

Cadre ( Frames )

Cadrele permit împărţirea unei ferestre în secţiuni independente între ele, în fiecare
dintre acestea fiind posibilă încărcarea unui document HTML. Astfel, utilizatorul
poate vizualiza simultan mai multe documente.
De exemplu, putem împărţi documentul în două cadre. În primul cadru va fi afişată o
bara de navigaţie. Selectarea unui meniu al barei de navigaţie va determina încărcarea
paginii corespunzătoare în cel de-al doilea cadru. Astfel, bara de meniuri va fi vizibilă
în orice moment al navigării site-ului.
Pentru structurarea unui document HTML în cadre sunt utilizate tagurile:

 <frameset>
 <frame>
 <noframe>
 <iframe>

Organizarea documentului în cadre - Tagul <frameset>

Un document cu cadre se realizează similar unui document HTML oarecare, în care


tagurile <body>, respectiv </body> sunt înlocuite cu tagurile <frameset>, respectiv
</frameset>:

<html>
<head>
</head>
<frameset>

</frameset>
</html>

Aşadar, tagul <frameset> permite structurarea documentului principal în cadre. În


interiorul perechii <frameset> </frameset> nu pot exista decât elemente <frameset>,
<frame>, <noframe>.
Tagul <frameset> acceptă următoarele atribute:

 rows – primeşte ca parametru o listă de valori, separate prin virgulă, ce


reprezintă înălţimea cadrelor orizontale ale documentului principal. Numărul
de cadre orizontale este dat de numărul de valori din listă. Valorile sunt
exprimate fie prin numere întregi pozitive (înălţime absolută exprimată în
pixeli), fie prin procente din înălţimea cadrului părinte (înăţime relativă), fie
prin caracterul de puncuaţie ‘*’, care semnifică o înălţime relativă.
Observaţii:

1. Nu se recomandă ca toate valorile să fie absolute, deoarece browserele


pot utiliza rezoluţii diferite, ceea ce poate duce la distorsiuni ale
afişării;
2. În cazul utilizării procentelor, suma acestora nu poate să depăşească
100%, în caz contrar, browserul va trunchia toate valorile până ce suma
va fi 100.

 cols – permite împărţirea cadrului curent în sectoare verticale. Parametrii


acceptaţi respectă aceleaşi reguli ca şi în cazul atributului rows, numai că se
referă la lungimea cadrului.

 border – primeşte o valoare întreagă nenegativă, reprezentând grosimea,


exprimată în pixeli, a chenarului cadrelor. Implicit, grosimea chenarului este
de 5 pixeli. Valoarea 0 a atributului border inhibă afişarea chenarelor tuturor
cadrelor.

 bordercolor – permite setarea culorii chenarelor cadrelor. Culoarea poate fi


specificată fie printr-un triplet hexa de forma #rrggbb, fie printr-un nume
predefinit de culoare.

 frameborder – controleaza afişarea/ascunderea chenarelor tuturor cadrelor.


Atributul poate primi valorile: yes sau 1 (se forţează afişarea chenarelor), no
sau 0 ( se forţează ascunderea chenarelor);

 framespacing – permite specificarea distanţei, în pixeli, de spaţiu liber în jurul


tuturor cadrelor.

Observaţie:

Ascunderea unui chenar, prin utilizarea perechii frameborder=”no” sau border=”0”,


face ca acesta să nu mai fie vizibil pentru utilizator. Totuşi, în Internet Explorer,
utilizatorul poate opta pentru redimensionarea cadrului, prin operaţia Drag and Drop
asupra marginii invizibile. Pentru a inhiba această posibilitate, ascunderea chenarului
trebuie însoţită de secvenţa: framespacing=”0”.

Definirea cadrelor - Tagul <frame>

Tagul <frame> permite definirea unui cadru în interiorul unui set de cadre. El are sens
numai atunci când apare în interiorul perechii <frameset> </frameset>.
Atribute acceptate:

 src – specifică adresa URL a documentului ce va fi încărcat în cadrul


respectiv;

 name – specifică numele cadrului, nume ce va fi utilizat pentru referirea


cadrului respectiv atunci când se va încărca în el un alt document HTML, prin
intermediul unei hiperlegături aflate în alt cadru. Numele este o combinaţie de
caractere alfanumerice;

 marginwidth, marginheight – controleaza distanţa, exprimată în pixeli, între


conţinutul cadrului şi chenarul său;

 scrolling – atributul controlează afişarea/ascunderea barelor de defilare


(orizontală sau verticală). Poate primi valorile:
o yes – se forţează afişarea barelor de defilare;
o no - se forţează ascunderea barelor de defilare;
o auto - barele de defilare vor fi afişate numai
atunci când este necesar (când conţinutul
cadrului depăşeşte lungimea şi/sau înălţimea
cadrului va fi afişată bara de defilare orizontală
şi/sau cea verticală);

 border – permite setarea grosimii chenarului cadrului curent. Valoarea


atributului border aflat în interiorul tagului frame este prioritară faţă de
valoarea aceluiaşi atribut aflat în tagul frameset.

 noresize – se inhibă utilizatorului posibilitatea de a redimensiona cadrele.


Altfel, el are această posibilitate, prin operaţia Drag and Drop asupra
marginilor cadrelor.

 frameborder – controleaza afişarea/ascunderea chenarului cadrului curent.


Atributul poate primi valorile: yes sau 1(se afişează chenarul), no sau 0 (se
ascunde chenarul);

 framespacing – permite specificarea distanţei, în pixeli, de spaţiu liber în jurul


cadrului.

 bordercolor – permite specificarea culorii chenarului cadrului respectiv.

Browserele vechi - Tagul <noframe>

Tagul <noframe> este utilizat în cazul în care se navighează cu un browser mai vechi,
care nu suportă cadrele. În această situaţie, browserul va afişa conţinutul inclus în
interiorul perechii <noframe> </noframe>. Dacă însă, browserul recunoaşte cadrele,
el va ignora conţinutul perechii <noframe> </noframe>.

De regulă, atunci când un browser nu recunoaşte un tag, nu îl interpretează. Acest


lucru se poate întâmpla şi în cazul tagurilor <frameset>, <frame>. Este evident că
dacă un browser nu recunoaşte tagurile <frameset> şi <frame> el nu va recunoaşte
nici <noframe>. Însă, va interpreta tagurile pe care le recunoaşte, adică, în acest caz,
cele cuprinse între <noframe> şi </noframe>. De fapt, efectul tagului <noframe> este,
în cazul browserelor care recunosc cadre, acela de a ignora conţinutul inclus în
interiorul perechii <noframe> </noframe>.
Cadre in-line - Tagul <iframe> (in-line frame)

Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea că se includ în


documente HTML obişnuite (nu în documente HTML cu cadre), adică în interiorul
perechii <body> </body>.
La ora actuală numai Internet Explorer acceptă cadre in-line. Dacă un browser nu
recunoaşte cadre, el va afişa conţinutul cuprins între <iframe> şi </iframe>.
Tagul <iframe> acceptă aceleaşi atribute ca şi tagul <frame>, în plus acceptă atribute
preluate de la tagul <img>, care controlează modul de afişare al cadrului în interiorul
documentului.
Atribute acceptate:

- preluate de la tagul <frame>:

 src
 name;
 scrolling;
 border,
 bordercolor;
 frameborder;
 framespacing;
 noresize;
 marginwidth, marginheight;

- preluate de la tagul <img>:

 align;
 width, height;
 vspace, hspace.

Toate atributele menţionate mai sus au semnificaţiile şi parametrii prezentaţi în


secţiunile anterioare ale cursului .

Exemple:

Realizarea cadrelor orizontale


<!--index.htm-->
<html>
<head>
<title>Grand Garage</title>
</head>

<frameset rows="150,*,20%">
<frame src="antet.htm">
<frame src="continut.htm">
<frame src="adresa.htm">
</frameset>

</html>
<!--antet.htm-->
<html>
<head>
</head>
<body>
<center>
<h3>GRAND GARAGE</h3>
<h3>Auto S.R.L.</h3>
<h3>Dealer DAEWOO</h3>
</center>
</body>

</html>
<!--continut.htm-->
<html>
<head>
</head>
<body>
<p>Noile preturi de la
DAEWOO sunt mai mici ca
niciodata. </p>
<p>Daca pana acum nu
credeai, vino sa vezi! </p>
</body>

</html>
<!--adresa.htm-->
<html>
<head>
</head>
<body>
<p
align="center"><b>Bucuresti,
Str. L. Negreanu 13,
Telefon:
051.144.178.</b></p>
</body>

</html>

Imbricarea cadrelor
<!--index.htm-->
<html>
<head>
<title>Grand
Garage</title>
</head>

<frameset
rows="120,*,20%">
<frame
src="antet.htm">
<frameset
cols="100,*">
<frame
src="meniu.htm">
<frame
src="desprenoi.htm">
</frameset>
<frame
src="adresa.htm">
</frameset>

</html>

Cadre imbricate cu chenare colorate de diverse grosimi

<html>
<head>
<title>Cadre imbricate</title>
</head>

<frameset rows="50,*,50%">
<frameset cols="25%,*"
border="30" bordercolor="red">
<frame src="Pagina1.htm">
<frame src="Pagina2.htm">
</frameset>
<frameset cols="*,2*,3*" >
<frame src="Pagina3.htm"
scrolling=”yes”>
<frame src="Pagina4.htm"
scrolling=”auto”>
<frame src="Pagina5.htm"
scrolling=”no”>
</frameset>
<frameset cols="*,100"
border="15">
<frame src="Pagina6.htm">
<frame src="Pagina7.htm"
bordercolor="maroon" noresize>
</frameset>
</frameset>

</html>

Chenare inactive
<!--index.htm-->
<html>
<head>
<title>Grand Garage</title>
</head>

<frameset rows="92,*,20%"
frameborder="no"
framespacing="0">
<frame src="antet.htm">
<frameset cols="100,*">
<frame src="meniu.htm">
<frame
src="desprenoi.htm">
</frameset>
<frame src="adresa.htm">
</frameset>

</html>

Browserele care nu accepta cadre

<!--index.htm-->
<html>
<head>
<title>Grand Garage</title>
</head>

<frameset rows="92,*,20%" border="0"


frameborder="0">
<frame src="antet.htm">
<frameset cols="100,*">
<frame src="meniu.htm">
<frame src="desprenoi.htm">
</frameset>
<frame src="adresa.htm">
<noframe>
<h3 align="center">GRAND GARAGE - Auto
S.R.L.</h3>
<h3 align="center">Dealer DAEWOO</h3>
<p align="center"><a href="meniu.htm">Bara
de navigatie</a></p>
</noframes>
</frameset>

</html>

Un exemplu complex

<!--index.htm--> <!--meniu.htm--> <!--antet.htm--> <!--adresa.htm-->


<html> <html> <html> <html>
<head> <body> <body> <body>
<title>Grand <p><a <h3 <p
Garage</title> href="desprenoi.htm" align="center">G align="center"><b
</head> target="continut">Des RAND GARAGE - >Bucuresti, Str.
pre Noi</a></p> Auto S.R.L.</h3> L. Negreanu 13,
<frameset <p><a <h3 Telefon:
rows="92,*,20%" href="vanzari.htm" align="center">D 051.144.178.</b><
border="0" target="continut">Van ealer /p>
frameborder="0"> zari</a></p> DAEWOO</h3> </body>
<frame <p><a </body> </html>
src="antet.htm"> href="preturi.htm" </html>
<frameset target="continut">Pre
cols="123,*"> turi</a></p>
<frame </body>
src="meniu.htm"> </html>
<frame
name="continut"
src="desprenoi.htm">
</frameset>
<frame
src="adresa.htm">
</frameset>

</html>

<!-- <!--vanzari.htm--> <!--preturi.htm-->


desprenoi.htm--> <html> <html>
<html> <body> <body>
<body>
<p>Leader pe <h4>Grand Garage - <table border="1" bgcolor="silver"
piata auto auto S.R.L. ofera bordercolor="black"
romaneasca, clientilor nostri cellpadding="10">
societatea trei modalitati de <caption><h4>Preturi autovehicule
noastra, Grand plata:</h4> Daewoo</h4></caption>
Garage-Auto <ul> <tr><th>Model</th><th>Pret (EURO,
S.R.L., <li>vanzare cu toate taxele incluse)</th></tr>
comercializeaza plata integrala la
autoturisme marca cumparare;</li> <tr><td>Tico</td><td>4990</td></tr>
DAEWOO. </p> <li>vanzare in <tr><td>Matiz</td><td>4990(E)-
<p>Preturile rate;</li> 6800(SE POWER)</td></tr>
noastre sunt mai <li>vanzare in <tr><td>Cielo</td><td>8290(GLE)-
mici ca sistem 9390(Exe.LPG)</td></tr>
niciodata. Daca leasing.</li> </table>
pana acum nu </ul>
credeai, vino sa </body>
vezi! </p> </body> </html>
</body> </html>
</html>

Cadre in-line
<html>
<head>
<title>Formate de
Imagini</title>
</head>
<body>

<iframe name="cadru"
src="Generalitati.htm"
width="200" height="100"
border="3"
align="right">Site realizat
cu cadre in-line. Browserul
dvs. nu suporta!</iframe>

<b>Formate de Imagini:
<ul>
<li><a href="bmp.htm"
target="cadru">BMP</a></li>
<li><a href="jpeg.htm"
target="cadru">JPEG</a></li>
<li><a href="tiff.htm"
target="cadru">TIFF</a></li>
</ul>
</b>

</body>
</html>