Prima lectie




     Nu voi mai merge la viteza melcului, asa ca e bine sa fiti tot timpul atenti. Ferestra de navigatie a browserului cuprinde, de obicei, pagina creata (e vorba de spatiul care cuprinde, de pilda, acest text). Acest spatiu poate fi compartimentat. Rezultatul? E ca si cand am avea mai multe browsere deschise in acelasi timp.
Exemple:
Fereastra obisnuita arata astfel:
 ________________________________
|                                |
|                                |
|            PAGINA              |
|                                |
|                                |
|________________________________|

Dupa compartimentare (pe verticala):

 ________________________________
|           |                    |
|           |                    |
| PAGINA1   |     PAGINA2        |
|           |                    |
|           |                    |
|___________|____________________|

Dupa compartimentare (pe orizontala):

 ________________________________
|                                |
|                                |
|            PAGINA1             |
|________________________________|
|            PAGINA2             |
|________________________________|

Dupa compartimentare multipla:
 ________________________________
|            PAGINA1             |
|________________________________|
|           |                    |
| PAGINA2   |     PAGINA3        |
|           |                    |
|___________|____________________|

etc.
Pentru a imparti fereastra in mai multe cadre (frames) sau subferestre in care sa fie incarcate pagini diferite se procedeaza in felul urmator. In primul rand, se cree(cu cati de 'e' se scrie?)aza fisierele pentru paginile cu pricina. Dupa aceea se scrie o pagina speciala care face toata treaba: imparte fereastra si cheama, in fiecare cadru, pagina corespunzatoare.
Ordinea nu e foarte importanta. Puteti scrie mai intai codul paginii speciale si apoi sa faceti (sub)paginile care se incarca in subferestre. Cum arata pagina speciala? In primul rand, in corpul paginii (BODY) nu exista nimic. Cel mult, poate fi introdus un mesaj pe care il vor vedea doar cei ale caror browsere sunt atat de vechi incat nu pot afisa frames. In al doilea rand, in antetul paginii vor fi adaugate etichetele prin care sunt definite cadrele. Modelul este cel al listelor si tabelelor - etichete impaturite unele intr-altele, in mod restrictiv: <FRAMESET ROWS="," COLS=","> <FRAME SRC="" NAME=""> <FRAME SRC="" NAME=""> </FRAMESET> Fiecare cadru este creat cu ajutorul unei etichete FRAME (sorry, am renuntat la culori), care functioneaza, in parte, la fel ca IMAGE. Atributul SRC ia ca valoare adresa (relativa sau absoluta a) paginii care va fi incarcata in cadrul respectiv. Atributul NAME e folosit ca si atributul omonim al etichetei ancora (A), adica primeste ca valoare un nume oarecare dat de noi (sir alfanumeric de caractere). De ce trebuie sa dam un nume fiecarui cadru veti afla mai incolo. Mai multe etichete FRAME vor fi incapsulate intr-o eticheta dubla FRAMESET. Cu ajutorul acesteia se precizeaza cum vor fi introduse cadrele in pagina. Atentie! Acum apare ceva nou. Anumite atribute pot primi valori multiple. Ce inseamna asta? Inchipuiti-va, de pilda, ca in loc de cele doua atribute ale etichetei IMG, HEIGHT si WIDTH am fi folosit unul singur, sa zicem SIZE, dar valorile pentru acesta ar fi fost de forma: "inaltime,latime". Cu alte cuvinte, am fi avut o valoare complexa, compusa din valoarea pentru inaltimea imaginii si cea pentru latimea ei (in pixeli sau procente). Pentru a fi clar despre ce e vorba, cele doua valori ar fi fost despartite de virgula. Ok, la fel stau lucrurile si aici. Sa presupunem ca vrem sa impartim fereastra in doua cadre (subferestre): unul sus si unul jos. Primul ocupa jumatatea de sus a ferestrei iar al doilea jumatatea de jos. Vom scrie ceva de felul urmator: <FRAMESET ROWS="50%,50%"> <!-- Nu folosim decat unul dintre cele doua atribute (ROWS si COLS) pentru ca fereastra e impartita fie pe orizontala (pe randuri), fie pe verticala (pe coloane), nu in ambele feluri deodata. --> <FRAME SRC="pagina1.html" NAME="pag_sus"> <FRAME SRC="pagina2.html" NAME="pag_jos"> </FRAMESET> Rezultatul va arata astfel: 
 ________________________________
|                                |
|                                |
|         pagina1.html           |
|________________________________|
|                                |
|         pagina2.html           |
|                                |
|________________________________|
E clar?
Cum va arata pagina cu ajutorul careia creem subferestrele si incarcam cele doua pagini? Asa:
<HTML> <HEAD> <TITLE>Aici e titlul de pe bara ferestrei (cele doua pagini din cadre nu mai au nevoie de ac. eticheta)</TITLE> <FRAMESET ROWS="50%,50%"> <FRAME SRC="pagina1.html" NAME="pag_sus"> <FRAME SRC="pagina2.html" NAME="pag_jos"> </FRAMESET> </HEAD> <BODY> Mesajul pentru cei cu browsere vechi: "Instaleaza un browser adevarat, fraiere!" </BODY> </HTML> Daca vreau ca primul cadru sa ocupe doar un sfert din partea de sus a ferestrei iar celalalt sa ocupe restul, pot scrie asa: <FRAMESET ROWS="25%,75%"> Daca vreau ca primul cadru sa ocupe 200 de pixeli (200 de randuri de 1 pixel)? Nimic mai simplu. Dar ce dimensiune sa aiba al doilea cadru? Dupa cum tineti minte (din povestea cu tabele etc.), fereastra browserului nu se deschide la o dimensiune fixa. Cel mai simplu e sa spun (exact ca mai sus): restul. Iar asta se scrie asa: <FRAMESET ROWS="200,*"> Daca as fi vrut ca lucrurile sa stea invers? :-) Scriam invers (nu, nu asa: >"*,002"=SWOR TESEMARF<): <FRAMESET ROWS="*,200"> Iar acum cadrul de jos ocupa 200 de pixeli, iar cel de sus ocupa cat incape. Ce se intampla daca vreau sa impart fereastra in mai mult de doua cadre (toate pe orizontala)? E simplu. Atributul ROWS nu e restrictionat la un sir de doar doua valori. Pot avea mai multe dimensiuni, pentru primul cadru, al doilea, al treilea etc. Numar subferestrele de sus in jos, asta e important de tinut minte (cand e vorba de subferestre aliniate pe verticala, le numar de la stanga la dreapta, ca oamenii normali). Iaca: <FRAMESET ROWS="30%,50%,*"> <FRAME SRC="pagina1.html" NAME="pag_sus"> <FRAME SRC="pagina2.html" NAME="pag_mijloc"> <FRAME SRC="pagina3.html" NAME="pag_jos"> </FRAMESET> Dupa cum se observa, prin eticheta FRAMESET am promis ca vor fi 3 cadre, asa ca trebuie sa definesc trei pagini atunci cand scriu etichetele FRAME.

Observatii: (1) nu e indicat sa folosesc acelasi nume pentru doua cadre diferite; (2) mai bine nu incercati sa combinati valori in procente cu valori in pixeli; folositi fie o varianta, fie pe cealalta, in functie de imprejurari; (3) se poate observa ca lectia inca nu s-a incheiat :-(

Exercitiu:
Reproduceti "pe viu" exemplul de mai sus, dar cu subferestrele pozitionate pe verticala (adica asa: |pagina1.html|pagina2.html|pagina3.html|), fiecare din ele ocupand o treime din corpul ferestrei. Veti folosi celalalt atribut al etichetei FRAMESET, atributul COLS. Numiti pagina speciala care este incarcata la inceput "frames.html". Sau altfel :-)

Cum reusim sa impartim fereastra principala intr-un mod mai sofisticat? Ochii mari! Incapsulam etichete FRAMESET unele in altele. Sa luam un exemplu simplu. Pornim de la fereastra impartita in doua jumatati orizontale:
<FRAMESET ROWS="50%,50%"> <FRAME SRC="pagina1.html" NAME="pag_sus"> <FRAME SRC="pagina2.html" NAME="pag_jos"> <!-- fiti atenti aici --> </FRAMESET> Acum, in loc ca in jumatatea de jos sa fie afisata pagina "pagina2.html", vom imparti (inegal) aceasta subfereastra pe verticala in doua alte subferestre, in care vom incarca doua pagini diferite. Codul pentru partea de jos este: <FRAMESET COLS="30%,70%"> <FRAME SRC="pagina3.html" NAME="pag_jos_stanga"> <FRAME SRC="pagina4.html" NAME="pag_jos_dreapta"> </FRAMESET> Iar acum vom scrie acest cod in locul codului prin care introduceam pagina simpla de jos ("pagina2.html"). Rezultatul final (ok, ok, se vede mai bine daca scriu colorat): 
<FRAMESET ROWS="50%,50%">
    <FRAME SRC="pagina1.html" NAME="pag_sus">
    <FRAMESET COLS="30%,70%">
        <FRAME SRC="pagina3.html" NAME="pag_jos_stanga">
        <FRAME SRC="pagina4.html" NAME="pag_jos_dreapta">
    </FRAMESET>
</FRAMESET>
Adica: 
 ________________________________
|                                |
|                                |
|         pagina1.html           |
|________________________________|
|             |                  |
|pagina3.html |   pagina4.html   |
|             |                  |
|_____________|__________________|
Acum vine un exercitiu ceva mai dificil:
Incercati sa reproduceti urmatoarea structura de 6 frame-uri (numiti paginile, in ordine, "pagina1.html", "pagina2.html" etc.): 
 ________________________________
|     |                 |        |
|-----|                 |        |
|     |                 |        |
|     |_________________|        |
|     |        |        |        |
|     |        |        |        |
|     |        |        |        |
|_____|________|________|________|
Ok, aveti rezolvarea in sursa acestei pagini.

Exista cateva atribute suplimentare. Ca de obicei. Aici as putea face o paranteza -> (
Gata, am facut-o. Acum sa trecem mai departe. In mod normal, subferestrele sunt despartite de o bara subtire. Daca doriti ca aceasta sa fie invizibila, e suficient sa adaugati in interiorul etichetei FRAMESET urmatorul sir de atribute: BORDER="0" FRAMEBORDER="0" FRAMESPACING="0" (de fapt, FRAMESPACING nu e necesar). Lucrurile stau prost cu ele, fiindca efectul folosirii lor e diferit in Netscape si Internet Explorer. FRAMESPACING nu face nimic in Netscape. FRAMEBORDER la fel, atata timp cat valoarea pentru BORDER este "0". Atunci cand valoarea nu este "0", dand o valoare diferita de "0" atributului FRAMEBORDER ii spunem browserului Netscape sa afiseze dunga despartitoare dintre frames cu gri si nu cu alb. In schimb, valorile luate de BORDER seteaza grosimea dungii despartitoare (tot in Netscape, fiindca in IE nu ajuta la nimic; exact acelasi lucru este realizat in IE folosind FRAMESPACING, atunci cand FRAMEBORDER are o valoare diferita de "0").

Exercitiu:
Experimentati singuri folosirea acestor atribute si invatati ce si cum. Eu m-am plictisit sa explic :-)

Rezumat: atunci cand FRAMEBORDER are valoarea "1" avem o bara despartitoare de culoare gri intre frame-uri, atat in Netscape cat si in IE, iar grosimea acesteia este data, pentru Netscape, de valoarea atributului BORDER, iar pentru IE de valoarea atributului FRAMESPACING. Ok, atunci cand o avem, vizitatorul paginii poate, by default, redimensiona frame-urile (cursorul mouse-ului, plimbat deasupra barei despartitoare arata cam ca atunci cand redimensionam o fereastra - procedura e identica). Daca nu vrem ca asta sa se intample, putem introduce un atribut special inauntrul etichetei FRAME cu ajutorul careia am creat subfereastra respectiva. Este atributul NORESIZE, care, in mod curios, nu primeste nici o valoare. Pur si simplu il scriem asa, singur. In fine, atunci cand pagina afisata in subfereastra este mai lunga/lata, putem folosi barele de navigatie, pentru fiecare subfereastra in parte, la fel cu faceam inainte cu fereastra unica. Dar in unele cazuri am dori ca barele de navigatie sa nu apara, indiferent de dimensiunile paginii. Pentru asa ceva folosim atributul SCROLLING al etichetei FRAME. Valorile pe care le poate lua acesta sunt "yes" (= pune bare de navigatie indiferent de dimensiunile paginii), "no" (= omite barele de navigatie indiferent de dimensiunile paginii) si "auto" (valoarea implicita).

Exercitiu:
Incercati sa va reprezentati, fara a experimenta (mai intai) ce anume face urmatorul cod: <FRAMESET ROWS="*,40" BORDER="1" FRAMEBORDER="1" FRAMESPACING="0"> <FRAME SRC="top.html" NAME="main" SCROLLING="auto" NORESIZE> <FRAME SRC="bottom.html" NAME="menu" SCROLLING="no"> </FRAMESET> Dupa ce ati facut asta, verificati rezultatul creand doua fisiere goale, "top.html" si "bottom.html", plus "frames.html", care va cuprinde in antet codul de mai sus.

Cu asta am terminat toata povestea cadrelor (sau a frame-urilor, sau a subferestrelor). Cum se folosesc insa? In mod normal, fiecare pagina din fiecare cadru este autonoma. Link-urile din ea incarca noi pagini in cadrul respectiv. Dar daca vrem ceva diferit? Codul de mai sus, de pilda, ar putea fi folosit in urmatoarea situatie: am creat un site cu mai multe pagini; am cateva pagini de intrare catre sectiuni diferite ale site-ului meu.; vreau ca fiecare pagina vizitata sa contina link-uri catre paginile de intrare ale acestor sectiuni (grupate intr-un soi de meniu, eventual); in loc sa scriu codul pentru meniul meu in fiecare pagina in parte, lucrez cu frame-uri - pagina cu link-uri pentru sectiuni va fi incarcata in subfereastra de jos (in exemplul de sus, e cea numita "menu"); link-urile din aceasta pagina vor chema in subfereastra de sus paginile sectiunilor respective. N-ar fi frumos? Pentru a preciza ca doresc ca link-ul sa incarce pagina in alta subfereastra decat cea a paginii care contine link-ul, adaug un atribut suplimentar la eticheta ancora: TARGET. Valoarea atributului este numele cadrului in care vreau sa fie incarcata pagina la care se face trimitere (HREF). Daca vreau, de pilda, ca link-ul din cadrul de jos ("menu") sa cheme o pagina in cadrul de sus ("main"), scriu asa: <A HREF="paginadeincarcat.html" TARGET="main">Text pt. Click</A> Exista un nume special, "_top". Un link de forma: <A HREF="altapagina.html" TARGET="_top">Alt text pt. Click</A> ma va scoate din frames. Pagina chemata va fi incarcata in fereastra principala, cea care continea subferestrele. Aveti aici un exemplu pentru tot ceea ce am explicat. In rest, toate bune si frumoase, iar acum eu voi apuca, probabil, sa dorm un pic.

Cuprins  Urmatoarea lectie















Dupa cum se poate intui, exista o distinctie intre atribute obligatorii si atribute
suplimentare. Atributele obligatorii sunt cele in lipsa carora eticheta isi pierde
sensul (de pilda, SRC pentru eticheta IMG). Atributele suplimentare sunt cele
care pot lipsi (de pilda, ALT pentru eticheta IMG).       Inapoi