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:

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:

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:

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:

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:

cadre

Î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:

apl3

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

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.

cadre

Rezolvare:

index.html

banner.html

cuprins.html

home.html

poze.html

contact.html



site