Cadre (FRAMESET, FRAME şi IFRAME)

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

• 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. Dacă framespacing=0, cadrele nu pot fi redimensionate cu drag and drop (adică prin tragere cu mouse-ul).

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:
• yes – se forţează afişarea barelor de defilare;
• no - se forţează ascunderea barelor de defilare;
• 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.

Exemple:

Aplicaţia 1

1. Descărcaţi arhiva Cats&Dogs.rar.
2. Dezarhivaţi folderul Cats&Dogs descărcat la pasul 1.
3. Realizaţi o pagină html numită index.html care să fie împărţită în 2 cadre verticale.
4. În cadrul din stânga al paginii index.html să fie afişată pagina meniu.html, iar în cadrul din dreapta afişaţi pagina home.html.
5. Acţionarea butoanelor meniului din cadrul stâng al paginii, vor determina afişarea paginilor corespunzătoare în cadrul din dreapta al paginii index.html.

Rezolvare:

Fişierul index.html va avea următorul conţinut:

<html>
<head><title>Cats&Dogs</title></head>
<frameset cols="20%,80%">
<frame src="meniu.html">
<frame src="home.html" name="mainFrame">
</frameset>
</html>

Atenţie: Fişierul index.html trebuie să se găsească în folderul Cats&Dogs !!!

Aplicaţia 2
Realizaţi împărţirea ferestrei navigatorului în 6 cadre, aşa cum se observă în figura următoare:

În fiecare din cadrele 2, 4, 5 şi 6, fişierele corespunzătoare vor conţine câte o imagine. Cadrul 1 va conţine o listă cu hyperlegături către fişierele încărcate în cadrele 2, 4, 5, 6. La activarea unei hiperlegături, fişierul ţintă va fi încărcat în cadrul 3.

Rezolvare:

Descărcaţi arhiva cadre_apl2.rar.

Aplicaţia 3

Realizaţi o pagina html care să conţină un tabel ca în figura următoare:

• Tabelul are 5 coloane şi 5 rânduri.
• Imaginile cu drapelele statelor din Uniunea Europeana au fost redimensionate online pe site-ul http://www.resizenow.com. Dimensiunea reală a fiecărui steag este de 650x450 pixeli, dar în celulele tabelului steagurile sunt redimensionate la 150x100 pixeli.
• În centrul tabelului se află o celulă mare care se întinde pe 3 coloane şi pe 3 rânduri. Această celulă conţine un iframe în care este afişat iniţial steagul Uniunii Europene.
• Iframe este prescurtarea de la inline frame, acest element HTML făcând posibilă introducerea unui frame într-un bloc text. Informaţia care se inserează este specificată prin atributul SRC (source), iar conţinutul unui element IFRAME va fi afişat doar dacă browser-ul nu suportă frame-uri.

<td colspan=3 rowspan=3 align=center valign=middle>
<iframe src="europa.png" name="centru" frameborder=0 scrolling=no width=650 height=450 align=center></iframe>

• Atunci când mouse-ul se află deasupra unui steag, se va afişa denumirea ţării respective, iar când se dă click pe miniatura unui steag imaginea mărită a acestuia va fi încărcată în cadrul din celula centrală denumit "centru".
• Site-ul final îl puteţi vizualiza aici.

Aplicaţia 4

Pentru a pune în practică cele prezentate în acest capitol, vom realiza o structură combinată, cu trei cadre, dintre care unul pe orizontală şi două pe verticală. Astfel, cadrul orizontal va fi alocat titlului (antetului), cel din stânga va fi alocat unui meniu, iar cel din dreapta va prezenta conţinutul corespunzător meniului.

Pentru detalii, daţi click aici.

Aplicaţia 5

Realizaţi un site despre artistul vostru preferat, sub formă de cadre. Definiţi trei cadre după schema din figura alăturată. Cadrul superior va avea înălţimea de 160 de pixeli, iar cele două din partea inferioară se vor extinde până la limitele ferestrei. Cadrul din stânga jos va ocupa 20% din lăţimea ferestrei, iar cel din dreapta jos va ocupa restul ferestrei.

Rezolvare:

index.html

banner.html

cuprins.html

home.html

poze.html

contact.html

site