A patra lectie




Ok, daca nu sunteti cu Netscape in momentul asta puteti sa o lasati balta. Nu va cere nimeni sa va convertiti la Netscape. Puteti sa-l folositi doar temporar, cat va lamuriti ce si cum si dupa aia sa-l radeti. Aceasta lectie este mai mult teoretica. De altfel, nici nu o sa fie prea lunga. Cu toate astea, daca vreti sa realizati ceva serios, profesionist etc. etc. scriind HTML, trebuie sa intelegeti mecanismul din spatele povestii asteia.
Ce sunt layers? Niste elemente HTML, right? Right.
- Ce fel de elemente?
- Speciale, ca altfel ati fi aflat de ele mai din timp.
- Ok, cat de speciale?
- Foaaarte speciale.
- Bine, dar ce fac?
- Fac ce trebuie sa faca ...


Bine, nu mai trag de timp. Uite aicea un layer:


Ceva ciudat?
Chiar nu vi se pare nimic in neregula?

Doar browserul Netscape, incepand de la versiunea 4.0 in sus inghite asa ceva. IE pur si simplu ignora etichetele layerelor. Ok, suspansul a durat destul. Layerele sunt obiecte asemanatoare oarecum cu frames. Sunt niste containere pentru orice altceva ar putea intra intr-o pagina HTML. Asa cum poti incarca o pagina intr-un frame, asa o poti incarca si intr-un layer. Doar ca layerele permit mai mult decat cadrele. Iar in alt sens mai putin. Cel mai simplu e sa merg cu exemple: <LAYER NAME="test01" LEFT="80" TOP="680" WIDTH="300" HEIGHT="60" BGCOLOR="red"> <!-- aici vine continutul --> </LAYER> Sa vedem si rezultatul:



Cum vi se pare? Un lucru poate fi observat usor, de la bun inceput. In loc sa creez o pagina separata, pot integra codurile paginii respective in codul paginii care contine layere. Dar nu e obligatoriu, o sa vedeti mai incolo. Orice layer poate avea un nume (prin atributul NAME), cu ajutorul caruia e identificat, ca si elementele formularelor, din interiorul unor aplicatii care ruleaza in browser. Pozitia layer-ului e determinata cu ajutorul atributelor LEFT si TOP. In cazul de aici e vorba de pozitia absoluta, ca distanta in pixeli fata de marginea de sus si marginea din stanga a ferestrei (tineti mintea povestea cu sistemul de coordonate, nu?). Pot avea un layer in alt layer:

primul
layer
al doilea

In acest caz valorile atributelor LEFT si TOP ale layerului din interior vor indica pozitia acestuia relativa la marginea de sus si marginea din stanga a layerului care il cuprinde. Daca vreau neaparat sa ii dau pozitia doar fata de marginile ferestrei voi folosi alta pereche de atribute: PAGEX si PAGEY (chiar nu mai stiti desenul cu sistemul de coordonate?). Mai departe. WIDTH si HEIGHT, ca in cazul unei imagini dau dimensiunile layerului. BGCOLOR, ca si in cazul etichetei BODY, se foloseste pentru a stabili culoarea de fundal. Tot ca si in cazul etichetei BODY, pot defini o imagine de fundal pentru fiecare layer. Reiau exemplul de mai sus cu imagini in loc de culori:

primul
layer
al doilea

Sigur, pot sa nu folosesc nici o culoare de fundal si nici o imagine, iar atunci layer-ul este transparent - adica ma lasa sa vad ce e in spatele lui. Iata un exemplu cu doua layere suprapuse:

1 2 3 4 5 6 7 8 9 10 A B C D E F
G H I J K . . .

Daca doresc sa preiau continutul unui layer dintr-un fisier, pot da adresa fisierului (absoluta sau relativa) ca valoare a atributului SRC (ca si la imagini, sunete, frames s.a.m.d.). Iata un exemplu (linkurile functioneaza, BTW; daca le incercati, nu uitati sa folositi butonul "back" al browserului pentru a reveni aici):



Sa vedem cum arata codul pe care l-am folosit.
<ILAYER WIDTH="420" HEIGHT="240" SRC="exemplu01/noframes.html" CLIP="120,0,420,220"> </ILAYER> Atributul SRC e folosit asa cum stiti. Nu e nimic nou de explicat. A mai aparut insa un atribut nou, CLIP. Acesta primeste un sir de valori, prin care e definit, ca intr-un harta, un dreptunghi in interiorul layer-ului. Cu ajutorul lui pot face in asa fel incat doar portiunea layer-ului din dreptunghiul respectiv sa fie vizibila (mai exista un atribut, VISIBILITY, care suporta valori precum HIDE si SHOW - valoarea by default; cu ajutorul lui pot face ca intregul layer sa fie invizibil). Alt lucru pe care il puteti observa este ca eticheta folosita aici e putin diferita. in loc de <LAYER> </LAYER> am folosit <ILAYER> </ILAYER>. "I" vine de la "inline" sau "inflow" sau probabil de la ambele. E vorba de un layer care se apare in functie de locul din cod unde am introdus eticheta, cam ca o imagine, spre deosebire de layerele obisnuite care apar acolo unde le spunem sa apara, indiferent unde am scris codul. Atunci cand sunt folosite, atributele LEFT si TOP ale unui inline layer precizeaza pozitia acestuia fata de cele mai apropiate elemente HTML din pagina (toate layerele din aceasta pagina sunt facute folosind inline layers - vezi codul pt. explicatie). De asemenea, celalalte elemente HTML care urmeaza dupa inline layer "tin cont" de existenta lui, ordonandu-se si in functie de el, dar nu tin cont de un layer obisnuit - pagina curge ca si cand layerul nu ar exista. O alta deosebire intre layers si frames este ca link-urile din interiorul layerelor nu cheama pagini tot in interiorul layerelor, ci direct in fereastra. Totusi, putem realiza destul de usor si de simplu tot ceea ce realizam cu frames folosind layers (vezi acest exemplu).
In fine, spre deosebire de cadre (sau subferestre), layerele se pot suprapune (ca si regiunile unei harti). In acest caz se foloseste un atribut special pentru a decide care layer apare deasupra. E vorba de atributul Z-INDEX, care primeste ca valori numere. Dintre doua layere, cel care are ca valoare a acestui atribut un numar mai mare va sta deasupra. Iata un nou exemplu:

primul al doilea
primul al doilea

Iar codul arata astfel: <ILAYER LEFT="120" WIDTH="200" HEIGHT="80"> <LAYER LEFT="40" TOP="30" WIDTH="80" HEIGHT="40" BGCOLOR="red" z-index="1"><br><b>primul</b></LAYER> <LAYER LEFT="20" TOP="10" WIDTH="80" HEIGHT="40" BGCOLOR="blue" z-index="2"><b>al doilea</b></LAYER> </ILAYER> <br> <ILAYER LEFT="120" WIDTH="200" HEIGHT="80"> <LAYER LEFT="40" TOP="30" WIDTH="80" HEIGHT="40" BGCOLOR="red" z-index="2"><b>primul</b></LAYER> <LAYER LEFT="20" TOP="10" WIDTH="80" HEIGHT="40" BGCOLOR="blue" z-index="1"><b>al doilea</b></LAYER> </ILAYER> Atunci cand atributul nu este specificat fiecare layer nou creat (in cod) se asaza peste cele anterioare. Iar acum ma apropii de incheiere.

Pentru a intelege importanta layerelor ganditi-va la un singur lucru. Oricare valoare a unui atribut prin care definesc proprietatile unui layer poate fi modificata dinamic. Adica un programas care ruleaza in interiorul paginii poate avea acces la pozitia unui layer in pagina, poate sa il faca vizibil sau invizibil etc. etc. Va puteti uita la un exemplu simplu si veti intelege de ce layerele sunt atat de speciale. Daca v-a placut, uitati-va si la acest exemplu, construit prin interpolarea dinamica a valorilor atributului CLIP.
Cum spuneam, aceasta lectie nu e prea lunga. Nu aveti exercitii, fiindca nu e neaparat nevoie sa internalizati folosirea etichetelor pentru layers. Daca ati urmarit insa cu atentie lectiile de pana acum ati inteles cam cum stau lucrurile cu layerele. Iar daca ati inteles asta si in plus ati inteles si faptul ca acestea sunt obiectele pe care le puteti folosi pentru a crea elemente dinamice ale unei pagini HTML, acest lucru e suficient. Mie mi-e oricum prea somn sa mai continui cu aceasta lectie. Bye!

Cuprins  Lectia anterioara   Lectia urmatoare