9. Ferestre in HTML

9. Ferestre in HTML

Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre in care sa fie incarcate documente HTML diferite.
Ferestrele sunt definite intr-un fisier HTML special , in care blocul <body>...</body> este inlocuit de blocul <frameset>...</frameset>.
In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.

Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare adresa URL a documentului HTML care va fi incarcat in acel frame. Definirea cadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii si coloane:

impartirea unei ferstre intr-un numar de subferestre de tip coloana se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastra;
impartirae unei ferestre intr-un numar de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;
valoare atributelor cols si rows este o lista de elmente separate prin virgula , care descriu modul in care se face impartirea.

Elementele listei pot fi:

un numar intreg de pixeli;
procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu %);
n^* care inseamna n parti din spatiul ramas;

Exemplu 1: cols=200,*,50%,* inseamna o impartire in 4 subferestre , dintre care prima are 200 pixeli , a treia ocupa jumatate din spatiul total disponibil ,iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil.

Exemplu 2: cols=200,1*,50%,2* inseamna o impartire in 4 subferestre , dintre care prima are 200 pixeli , a treia ocupa jumatate din spatiul total disponibil iar a doua si a patra ocupa in mod egal restul de spatiu ramas disponibil, care se imparte in trei parti egale , a doua fereastra ocupand o parte , iar a patra ocupand 2 parti.

Observatii:

: - daca mai multe elemente din lista sun configurate cu * , atunci spatiul disponibil ramas pentru ele se va imparti in mod egal.; - o subfereastra poate fi un cadru (folosind <frame>)in care se va incarca un document HTML sau poate fi impartita la randul ei la alte subfereste (folosind <frameset>).

<html> <head><title>ferex_1</title></head> <frameset cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> </frameset> </html>

vezi acest exemplu

In exemplul urmator este creata o pagina Web cu trei cadre orizontale.Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini.

<html> <head><title>ferex_2</title></head> <frameset rows="100,*,10%"> <frame src="p1.html"> <frame src="tiled.gif"> <frame src="p3.html"> </frameset> </html>

vezi acest exemplu

In exemplul urmator este creata o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele doua atribute cols si rows.

<html> <head><title>ferex_3</title></head> <frameset rows="*,*" cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> <frame src="p3.html"> <frame src="p4.html"> </frameset> </html>

vezi acest exemplu

In exemplul urmator este creata o pagina Web cu trei cadre mixte.Pentru a o crea se procedeaza din aproape in aproape. Mai intai, pagina este impartita in doua subferestre de tip coloana, dupa care a doua subfereastra este impartita in doua subferestre de tip linie.

<html> <head><title>ferex_4</title></head> <frameset cols="20%,*"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html"> </frameset> </frameset> </html>

vezi acest exemplu

Culori pentru chenarele cadrelor si dimensionarea chenarului unui cadru

Pentru a stabili culoarea chenarului unui cadru se utilizeaza atributul bordercolor. Acest atribut primeste ca valoare un nume de culoare sau o culoare definita in conformitate cu modelul de culoare RGB.Atributul bordercolor poate fi atasat atat etichetei <frameset> pentru a stabili culoarea tuturor chenarelor cadrelor incluse,cat si etichetei <frame> pentru a stabili culoarea chenarului pentru un cadru individual.
Atributul border al etichetei <frameset> permite configurarea latimii chenarelor tuturor cadrelor la un numar dorit de pixeli. Valoarea prestabilita a atributului border este de 5 pixeli.
O valoare de 0 pixeli va defini un cadru fara chenar.

<html> <head><title>ferex_5</title></head> <frameset cols="20%,*" bordercolor="green" border="15"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html" bordercolor="blue"> <frame src="p3.html"> </frameset> </html>

vezi acest exemplu

Pentru a obtine cadre fara chenar se utilizeaza border="0".
In mod prestabilit, chenarul unui cadru este afisat si are aspect tridimensional.Afisarea chenarului unui cadru se poate dezactivata daca se utilizeaza atributul frameborder cu valoare "no".
Acest atribut poate fi atasat atat etichetei <frameset> (dezactivarea fiind valabila pentru toate cadrele incluse) cat si etichetei <frame> (dezactivarea fiind valabila numai pentru un singur cadru).
Valorile posibile ale atributului frameborder sunt:
"yes" -echivalent cu 1;
"no" -echivalent cu 0;

<html> <head><title>ferex_5_1</title></head> <frameset cols="20%,*" border="0"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html"> </frameset> </html>

vezi acest exemplu

<html> <head><title>ferex_5_2</title></head> <frameset cols="20%,*" frameborder="no"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html"> </frameset> </html>

vezi acest exemplu

Bare de defilare

Atributul scrolling al etichetei <frame> este utilizat pentru a adauga unui cadru o bara de derulare care permite navigarea in interiorul documentului afisat in interiorul cadrului.
Valorile posibile sunt:

"yes" - barele de derulare sunt adaugate intotdeauna;
"no" - barele de derulare nu sunt utilizabile;
"auto" - barele de derulare sunt vizibile atunci cand este necesar

<html> <head><title>ferex_6</title></head> <frameset cols="*,*,*"> <frame src="p.html" scrolling="yes" noresize> <frame src="p.html" scrolling="no" noresize> <frame src="p.html" scrolling="auto" noresize> </frameset> </html>

vezi acest exemplu

Atributul noresize al etichetei <frame> (fara nici o valoare suplimentara) daca este prezent, inhiba posibilitatea prestabilita a utilizatorului de a redimensiona cadrul cu ajutorul mouse-ului.

Pozitionarea documentului intr-un cadru

Atributele marginheight si marginwidth ale etichetei <frame> permit stabilirea distantei in pixeli dintre continutul unui cadru si marginile verticale, respectiv orizontale ale cadrului.
Valori posibile:

-numar de pixeli;
-procent din latimea, respectiv din inaltimea cadrului;

<html> <head><title>ferex_7</title></head> <frameset cols="*,*,*"> <frame src="p.html"> <frame src="p.html" marginheight=20> <frame src="p.html" marginwidth=20> </frameset> </html>

vezi acest exemplu

Exista browsere care nu suporta cadre pentru aceasta se utilizeaza in interiorul blocului <frameset> eticheta <noframes>.
Daca programul de navigare stie sa interpreteze cadre, va ignora ce se gaseste in aceasta portiune, iar daca nu, materialul cuprins in zona <noframes>...</noframes> va fi singurul care va fi inteles si afisat.
De precizat este faptul ca intre <noframes> ... </noframes> se pot introduce orice alte tag-uri HTML (inclusiv imagini, hiperlink-uri, tabele).

Cadre interne

Un cadru intern este specificat prin intermediul blocului <iframe>...</iframe>. Un cadru intern se insereaza intr-o pagina Web in mod asemanator cu o imagine sau in modul in care se specifica marcajul <frame>, asa cum rezulta din urmatorul exemplu:

<iframe src="ferex_8.html" height=40% width=50%> </iframe>

In acest caz, am specificat ca doresc o fereastra de cadru intern care are 40%din inaltimea si 50% din latimea paginii curente.

Atributele aceptate de eticheta <iframe> sunt in parte preluate de la etichetele <frame> si <frameset>,cum ar fi: src,border,frameborder,bordercolor,marginheight, marginwidth,scrolling,name,noresize;
sau de la eticheta <img> vspace,hspace,align,width,height;

<html> <head><title>ferex_8</title> </head> <body> <a href="p1.html" target="icad">
Fisierul1</a><br> <a href="p2.html" target="icad">
Fisierul2</a><br> <a href="p3.html" target="icad">
Fisierul3</a><br> <a href="p.html" target="icad">
Home</a><br> <center><iframe width="60%" height="50%" border=2 bordercolor=red name="icad" src="p.html">Daca vedeti acest text inseamna ca browserul dumnevoastranu suporta cadre interne. Ar fi preferabil sa reveniti, folosind Netscape Navigator versiune 4.0 (/ulterioara) sau I.Explorer 4.0. (/ulterioara)
<a href="p0.html">Pagina fara cadre interne</a> </iframe></center> </body> </html>

vezi acest exemplu

Tinte pentru legaturi

In mod prestabilit, la efectuarea unui clic pe o legatura noua pagina (catre care indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi acdru). Acest comportament se poate schimba in doua moduri:

prin plasarea in blocul <head>...</head> a unui element <base> care precizeaza,prin atributul target numele ferestrei (cadrului) in care se vor incarca toate paginile noi referite de legaturile din pagina curenta conform sintaxei:
<base target="nume_ferastra/frame_de_baza">
prin plasarea in eticheta <a> a atributului target, care precizeaza numele ferestrei (cadrului) in care se va incarca pagina nou referita de legatura, conform sintaxei:
<a href="legatura" target="nume_fereastra/frame">...</a>

Observatie:

: - daca este prezent atat un atribut target in <base> cat si un atribut target in <a>, atunci cele precizate de atributul target din <a> sunt prioritare.

Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform sintaxei: <farme name="nume_frame">

In exemplul urmator este prezentata o pagina Web cu doua cadre.Toate legaturile din cadrul 1 incarca paginile in cadrul 2.

<html> <head><title>ferex_9_frames</title></head> <frameset cols="20%,*"> <frame src="left.html" name="left"> <frame src="p.html" name="main"> </frameset> </html>

<html> <head><title>ferex_9_left</title> </head> <body> <a href="p1.html" target="main">
Fisierul1</a><br> <a href="p2.html" target="main">
Fisierul2</a><br> <a href="p3.html" target="main">
Fisierul3</a><br><br> <a href="p1.html" target="_blank">
Fis1 intr-o fereastra noua</a><br><br> <a href="p1.html" target="_self">
Fis1 in fereastra curenta</a><br><br> <a href="p.html" target="main">
Home</a><br> </body> </html>

vezi acest exemplu

Valori pentru atributul target

Atributul target al etichetei<frame> accepta anumite valori predefinite de o valoare deosebita pentru creatorii de pagini Web.aceste valori sunt:

"_self" (incarcarea noii pagini are loc in cadrul curent);
"_blank" (incarcarea noii pagini are loc intr-o fereastra noua anonima);
"_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curent daca acesta exista, altfel are loc in fereastra browserului curent);
"_top" (incarcarea noii pagini are loc in fereastra browserului ce contine cadrul curent);