9.7 Utilizarea cadrelor n documentele HTML

Dei brower-ul Netscape Navigator (ncepnd cu versiunea 2.0), precum i Microsoft Internet Explorer (ncepnd cu versiunea 3.0) ofereau posibilitatea de a vizualiza cadre( frames), aceste nu au fost incluse n specificaiile limbajului HTML pn la versiune 4.0. Prin utilizarea cadrelor, utilizatorul are posibilitatea de a mprii fereastra browser-ului n mai multe zone dreptunghiulare (o astfel de zon fiind denumit cadru sau frame). Prin urmare, asemenea tabelelor, frame-urile ofer posibilitatea de a structura n pagin informaii diverse, dar ofer i avantaje suplimentare, prin faptul c n cadre se pot vizualiza documente HTML diferite. Cu alte cuvinte , prin utilizarea frame-urilor, exist posibilitatea de a vizualiza simultan n fereastra browser-ului mai multe pagini Web. Un mod frecvent ntlnit de utilizare a cadrelor este preyentat n imaginea urmtoare:

n exemplu, fereastra browser-ului este mparit n cinci cadre, fiecare coninnd cte un document HTML, ce reprezint:I. Titlul Manualul HTML online (un gif animat), permanent viyibilII. Un meniu, fomat din trei link-uri: Prin activarea primului link (Index) se va deschide n zona III pagina care conine cuprinsul manualului Prin activarea celui de al doilea link ( Cap. 6) se va deschide n zona III documentul HTML care conine capitolul 6 al manualului Prin activarea celui de al treilea link( Cap. 5) se va deschide n zona III documentul HTML care conine capitolui 5 al manualului (capitolul precedent).III. Zona n care este vizualizat documentul corespunztor opiunii selectate de utilizatorIV. Zona n care pot fi vizualizate exemplele din manual V. Un link plasat pe o imagine (un gif animat), prin activarea cruia se ncarc n zona III capitolul urmtor.Pentru a utiliza cadre, trebuie creat un document special( denumit document FRAMESET), care s defineasc mprirea n cadre a ferestrei browser-ului, dimensiunea, poziia i rolul fiecrui cadru. Structura acestui document este :

... ... ...

Observai c acest document nu conine elementul BODY, ci elementul FRAMESET, care permitea definirea structurii cadrelor din document. ntre eticheta de la nceput i cea de sfrit sunt descrise cadrele din document , prin intermediul elementului FRAME.Atributele elementului FRAMESET sunt:1. ROWS=list- dimensiuni specific dimensiunile cadrelor orizontale, separate prin virgul. Dimensiunile pot fi specificate absolut (n numrul de pixeli) sau relativ la dimensine ferestrei (n procente).Una din dimensiunile cadrelor orizontale, separate prin virgul, fiind nlocuit de caracterul*, ceea ce semnific spaiul rmas disponibil n fereast.2. COLS= list dimensiuni specific dimensiunile cadrelor verticale, n mod similar.a) Descriem trei cadre orizontale. Primul (cel mai de sus ) va avea dimensiunea de 100 pixeli, al doilea 10% din nlimea ferestrei, iar ultimul ocup spaiul rmas.

Descriere< FRAMESET ROWS = 100,10%,*> ...

Efect b) ntr-un mod similar, descriem trei cadre verticale de aceeai dimensiune:Descriere< FRAMESET COLS=100,100,100>...

Efect

c) Dac utilizm att atributul ROWS, ct i atributul COLS pentru a descrie structura cadrelor, vom obine o reea:Descriere

...

Efect

n acest exemplu am definit o reea cu dou cadre orizontale, mprite n cte trei cadre verticale (deci, 2*3=6 cadre).d) Pentru a mpri un cadru n mai multe cadre, se pot utiliza elemente FRAMESET imbricate:Descriere

...

...

Efect

Observai c ecranul este mprit n trei cadre: un cadru vertical de 70 pixeli (cel mai din stnga); al doilea cadru vertical (care ocup restul spaiului disponibil n fereastr) este mprit n dou cadre orizontale de dimensiuni egale.

Prin intermediul elementului FRAMESET an definit numrul de cadre, dimensiunea i poziia fiecrui cadru. Prin intermediul elementului FRAME, vom specifica pentru fiecare cadru n parte coninutul i aspectul. Atributele elementului FRAME sunt:1) NAME = ir-de-caractereasociaz un nume cadrului respectiv. Acest nume poate fi utilizat ca int (target) pentru legturi din alte cadre.2) SRC = URLspecific adresa documentului HTML care va fi iniial deschis n cadru.3) LONGDESC = URLspecific adresa la care se gsete o descriere detaliat a acestui cadru, util pentru browser-ele care nu pot vizualiza cadre.4) NORESIZEdimensunea cadrului respectiv nu poate fi modificat de ctre utilizator prin drag-and-drop. n mod implicit, trgnd cu mousse-ul de marginile unui cadru vizualizat n fereastra browser-ului, utilizatorul poate redimensiona cadrul respectiv dup dorin.5) SCROLLING = AUTO I YES I NOspecific modul de defilare a informaiilor n cadru. Valorile posibile pentru atribut sunt AUTO barele sunt vizualizate numai dac este necesar ( valoare implicit); YES barele de defilare sunt permanent vizibile; NO nu sunt vizualizate bare de defilare.6) FRAMEBORDER = 1 I 0specific dac frame-ul este sau nu separat de cadrele adiacente prin linii de contur.Dac asociem acestui atribut valoarea 0, cadrul nu va fi separat de cadrele adiacente prin linii. Valoarea implicit este 1.7) MARGINWIDTH = numr de- pixelispecific spaiul dintre coninutul cadrului i marginile stnga dreapta. Valoarea asociat trebuie s fie cel puin 1, valoarea implicit depinznd de browser-ul utilizat.8) MARGINHEIGHT = numr de- pixelispecific spaiul dintre coninutul cadrului i marginile de sus jos ale cadrului. Valoare asociat trebuie s fie cel puin 1, valoarea implicit depinznd browser-ul utilizat.Exemplul 1Pentru a preciza coninutul iniial al unui cadru se utilizeaza atributul SRC.

Descriere

Cap 1 Cap 2 Cap 3 Cap 4 Cap 5 Cap 6

ema@liis.sorosis.ro

Observai c fiecare link din documentul menu.htm utilizeaz atributul TARGET, cu valoarea STANGA. Ca urmare, prin activarea link-ului respectiv, documentul HTML asociat va fi deschis n cadrul denumit STANGA. n exemplul de mai sus toate link-urile aveau ca int acelai cadru: STANGA. O astfel de situaie ( cnd majoritatea link-urilor au aceeai valoare pentru atributul TARGET) este frecvent ntlnit, n astfel de situaii este mai simplu s utilizai n antetul documentului elementului BASE. Prin intermediul acestui element putei specifica un URL absolut, care va fi utilizat drept cale de plecare pentru rezolvarea URL-urilor relative din document: HREF = URL De asemenea, putei da ca valoare atributului TARGET numele cadrului n care vor fi deschise majoritatea documentelor asociate link-urilor. Astfel nu va fi necesar s specificai acest atribut pentru link-urilor respective.Putem prin urmare modifica antetul documentului menu.html astfel:Descriere

Cuprins

n acest mod, nu mai este necesar s specificm pentru fiecare din cele 7 link-uri din document int STANGA, deoarece la activarea unui link se procedeaz astfel: dac n descrierea link-ului este specificat TARGET numele unui cadru existent, documentul este deschis n cadrul respectiv; dac n descrierea link-ului nu este specificat nici o valoare pentru atributul TARGET, dar n antetul documentului apare elementul BASE i este specificat ca valoare pentru atributul TARGET numele unui cadru existent, documentul destinaie va fi deschis n acel cadru; dac nu este specificat o valoare pentru atributul TARGET n descrierea link-ului, sau n cadrul elementului BASE, atunci documentul va fi deschis n acelai cadru.Observai, de asemenea, c n documentul menu.htm pentru delimitarea indexului de capitole i a capitolelor de adresa e-mail, am ztilizat o linie orizontal, deschis prin intermediul elementului HTML HR (Horizontal Ruler). Acest element admite urmtoarele atribute:ALIGN = LEFT I CENTER I RIGHTspecific modul de aliniere (implicit CENTER).NOSHADElinia trasat este simpl, fr umbr.SIZE = numr-de-pixelispecific grosimea liniei.WIDTH = valoarespecific lungimea liniei (implicit 100% din limea zonei de vizualizare).n exemplul prezentat, cadrul denumit STANGA i cel de sus au bare de defilare vertical, deoarece coninutul documentelor HTML vizualizat n aceste cadre nu ncape n zona corespunztoere cadrului. Pentru cadrul de sus, care conine titlul, acesta este un inconvenient, care ar putea fi remediat prin dimensionarea exact a cadrului i utilizarea atributului NORESIZE.Exemplul 2 Ce se ntmpla cu un browser care nu suport cadre? n cadrul descrierii structurii cadrelor putem utiliza elementul NOFRAMES: Coninutul acestui element va fi vizualizat de ctre browser-ele care nu suport cadre.Descriere

< FRAME SRC = dreapta.htm> Aici Putei vizualiza varainta fara cadre.

Utilizarea cadrelor inline Cadrele inline sunt asemntoare celulelor de tabel. Ele pot fi inserate n cadrul unui bloc , dar spre deosebire de celulele unui tabel nu conin text, imagini sau alte informaii , ci un ntreg document HTML (asemenea cadrelor obinuite). Inserarea unui cadru inline se realizeaz cu ajutorul elementului IFRAME. Atributele acestui element sunt: SRC, NAME, FRAMEBORDER, LONGESC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, cu aceeai semnificaie ca n cazul elementeului FRAME. n plus, sunt admise i atribuite ALIGN (care specific modul de aliniere a cadrului), WIDTH (care specific limea cadrului) i HEIGHT (care specific nlimea cadrului) De exemplu, inserm un cadru inline care conine documentul initial.htm. n acelai document exist dou link-uri care au ca int acelai cadru:DescriereInseram un cadru in-line

Acest cadru contine initial prima strofa dintr-o poezie.Doriti sa o cititi si pe a doua ? Sau pe a treia ?

ToamnaRainer Maria RilkeCad frunzele, cad de departe parcaS-ar vesteji in ceruri gradini indeparatateCu gesturi de negare cad mereu.Efect

Inseram un cadru in-line

Acest cadru contine initial prima strofa dintr-o poezie . Doii sa o cititi si pe a doua? Sau pe treia?Activnd printr-un clic unul dintre cele dou link-uri, documentul destinaie asociat link-ului activat va fi ncarcat n cadrul inline.1. Descriei o structur dea frame-uri astfel nct ecranul browser-ului s conin cinci cadre, ca n figura prezentat la nceputul paragrafului despre utilizarea cadrelor.2. Concepei o structur de frame-uri pentru un manual HTML on-line. Titlul manualului va fi permanent prezent pe ecran, de asemenea link-urile necesare pentru o navigare rapi, plasate pe o imagine mapat. Ar fi indicat ca fiecare lecie s fie nsoit de exeple, de o zon de viualizare a expemplelor, precum i de teste de evalaure.3. Concepei o stuctur de frame-uri pentru pagina liceului vostru!