Sunteți pe pagina 1din 8

Prof.

Negrilescu Nicolae
Colegiul National Vlaicu Voda
Curtea de arges
Cadre ( Frames )
Cadrele permit mprirea unei ferestre n seciuni independente ntre ele, n fiecare
dintre acestea fiind posibil ncrcarea unui document HTML. Astfel, utilizatorul
poate vizualiza simultan mai multe documente.
De exemplu, putem mpri documentul n dou cadre. n primul cadru va fi afiat o
bara de navigaie. Selectarea unui meniu al barei de navigaie va determina ncrcarea
paginii corespunztoare n cel de-al doilea cadru. Astfel, bara de meniuri va fi vizibil
n orice moment al navigrii 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>
Aadar, tagul <frameset> permite structurarea documentului principal n cadre. n
interiorul perechii <frameset> </frameset> nu pot exista dect elemente <frameset>,
<frame>, <noframe>.
Tagul <frameset> accept urmtoarele atribute:

rows primete ca parametru o list de valori, separate prin virgul, ce


reprezint nlimea cadrelor orizontale ale documentului principal. Numrul
de cadre orizontale este dat de numrul de valori din list. Valorile sunt
exprimate fie prin numere ntregi pozitive (nlime absolut exprimat n
pixeli), fie prin procente din nlimea cadrului printe (nime relativ), fie
prin caracterul de puncuaie *, care semnific o nlime relativ.

Observaii:
1. Nu se recomand ca toate valorile s fie absolute, deoarece browserele
pot utiliza rezoluii diferite, ceea ce poate duce la distorsiuni ale
afirii;
2. n cazul utilizrii procentelor, suma acestora nu poate s depeasc
100%, n caz contrar, browserul va trunchia toate valorile pn ce suma
va fi 100.

cols permite mprirea cadrului curent n sectoare verticale. Parametrii


acceptai respect aceleai reguli ca i n cazul atributului rows, numai c se
refer la lungimea cadrului.

border primete o valoare ntreag nenegativ, reprezentnd grosimea,


exprimat n pixeli, a chenarului cadrelor. Implicit, grosimea chenarului este
de 5 pixeli. Valoarea 0 a atributului border inhib afiarea 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 afiarea/ascunderea chenarelor tuturor cadrelor.


Atributul poate primi valorile: yes sau 1 (se foreaz afiarea chenarelor), no
sau 0 ( se foreaz ascunderea chenarelor);

framespacing permite specificarea distanei, n pixeli, de spaiu liber n jurul


tuturor cadrelor.

Observaie:
Ascunderea unui chenar, prin utilizarea perechii frameborder=no sau border=0,
face ca acesta s nu mai fie vizibil pentru utilizator. Totui, n Internet Explorer,
utilizatorul poate opta pentru redimensionarea cadrului, prin operaia Drag and Drop
asupra marginii invizibile. Pentru a inhiba aceast posibilitate, ascunderea chenarului
trebuie nsoit de secvena: framespacing=0.
Definirea cadrelor - Tagul <frame>
Tagul <frame> permite definirea unui cadru n interiorul unui set de cadre. El are sens
numai atunci cnd apare n interiorul perechii <frameset> </frameset>.
Atribute acceptate:

src specific adresa URL a documentului ce va fi ncrcat n cadrul


respectiv;

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


cadrului respectiv atunci cnd se va ncrca n el un alt document HTML, prin

intermediul unei hiperlegturi aflate n alt cadru. Numele este o combinaie de


caractere alfanumerice;

marginwidth, marginheight controleaza distana, exprimat n pixeli, ntre


coninutul cadrului i chenarul su;

scrolling atributul controleaz afiarea/ascunderea barelor de defilare


(orizontal sau vertical). Poate primi valorile:
o yes se foreaz afiarea barelor de defilare;
o no - se foreaz ascunderea barelor de defilare;
o auto - barele de defilare vor fi afiate numai
atunci cnd este necesar (cnd coninutul
cadrului depete lungimea i/sau nlimea
cadrului va fi afiat 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 aceluiai atribut aflat n tagul frameset.

noresize se inhib utilizatorului posibilitatea de a redimensiona cadrele.


Altfel, el are aceast posibilitate, prin operaia Drag and Drop asupra
marginilor cadrelor.

frameborder controleaza afiarea/ascunderea chenarului cadrului curent.


Atributul poate primi valorile: yes sau 1(se afieaz chenarul), no sau 0 (se
ascunde chenarul);

framespacing permite specificarea distanei, n pixeli, de spaiu 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 situaie, browserul va afia coninutul inclus n
interiorul perechii <noframe> </noframe>. Dac ns, browserul recunoate cadrele,
el va ignora coninutul perechii <noframe> </noframe>.
De regul, atunci cnd un browser nu recunoate un tag, nu l interpreteaz. Acest
lucru se poate ntmpla i n cazul tagurilor <frameset>, <frame>. Este evident c
dac un browser nu recunoate tagurile <frameset> i <frame> el nu va recunoate
nici <noframe>. ns, va interpreta tagurile pe care le recunoate, 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 coninutul 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 obinuite (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
recunoate cadre, el va afia coninutul cuprins ntre <iframe> i </iframe>.
Tagul <iframe> accept aceleai atribute ca i tagul <frame>, n plus accept atribute
preluate de la tagul <img>, care controleaz modul de afiare 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 menionate mai sus au semnificaiile i parametrii prezentai n


seciunile 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-->
<html>
<head>
<title>Grand
Garage</title>
</head>
<frameset
rows="92,*,20%"
border="0"
frameborder="0">
<frame
src="antet.htm">
<frameset
cols="123,*">
<frame
src="meniu.htm">

<!--meniu.htm-->
<html>
<body>
<p><a
href="desprenoi.htm"
target="continut">Des
pre Noi</a></p>
<p><a
href="vanzari.htm"
target="continut">Van
zari</a></p>
<p><a
href="preturi.htm"
target="continut">Pre
turi</a></p>
</body>
</html>

<!--antet.htm-->
<html>
<body>
<h3
align="center">G
RAND GARAGE Auto S.R.L.</h3>
<h3
align="center">D
ealer
DAEWOO</h3>
</body>
</html>

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

<frame
name="continut"
src="desprenoi.htm">
</frameset>
<frame
src="adresa.htm">
</frameset>
</html>

<!-desprenoi.htm-->
<html>
<body>
<p>Leader pe
piata auto
romaneasca,
societatea
noastra, Grand
Garage-Auto
S.R.L.,
comercializeaza
autoturisme marca
DAEWOO. </p>
<p>Preturile
noastre sunt mai
mici ca
niciodata. Daca
pana acum nu
credeai, vino sa
vezi! </p>
</body>
</html>

<!--vanzari.htm-->
<html>
<body>

<!--preturi.htm-->
<html>
<body>

<h4>Grand Garage auto S.R.L. ofera


clientilor nostri
trei modalitati de
plata:</h4>
<ul>
<li>vanzare cu
plata integrala la
cumparare;</li>
<li>vanzare in
rate;</li>
<li>vanzare in
sistem
leasing.</li>
</ul>

<table border="1" bgcolor="silver"


bordercolor="black"
cellpadding="10">
<caption><h4>Preturi autovehicule
Daewoo</h4></caption>
<tr><th>Model</th><th>Pret (EURO,
toate taxele incluse)</th></tr>

</body>
</html>

<tr><td>Tico</td><td>4990</td></tr>
<tr><td>Matiz</td><td>4990(E)6800(SE POWER)</td></tr>
<tr><td>Cielo</td><td>8290(GLE)9390(Exe.LPG)</td></tr>
</table>
</body>
</html>