Web design

Frame-urile reprezinta elementul potrivit pentru designeri atunci cand doresc ca homepage-ul sa aiba o structura corespunzatoare, iar navigarea sa fie pe masura.

1.Planificare si pregatire
In cazul in care doriti sa introduceti frame-uri in homepage, trebuie sa lamu-riti cateva lucruri: In ce scop utilizati frame-urile? Cate frame-uri sunt nece-sare? Cum se impart paginile?
Apoi luati o hartie si un creion. Pe o foaie A4 proiectati in mare impartirea paginii. Liniile nu trebuie sa fie pozitio-nate la milimetru, dar aceasta schita va ajuta sa aveti o imagine asupra structurii paginii. Schitati in rame si continutul -indicati bara de navigare si includeti ima-ginile. Nu faceti economie de timp -lucrati pana cand sunteti multumiti de proiect. Pentru ca in momentul in care incepeti cu realizarea frame-urilor, even-tualele modificari vor duce la pierdere de vreme. Incepe apoi transpunerea in prac-tica. Scrieti - eventual cu Notepad - trei noi fisiere HTML cu urmatorul continut:
cadru X
In locul lui X scrieti cifrele de la 1 la 3. Salvati aceste fisiere sub numele de cadrul.html pana la cadru3.html. Daca doriti, puteti schimba indicatia de culoare din al doilea si al treilea fisier, de exemplu:
si

Aceste pagini-schita va ajuta la con-struirea setului de frame-uri si permit verificarea impartirii. Continutul pro-priu-zis va putea fi alcatui ulterior.
2.Impartirea setului de frame-uri
Tag-ul html este raspunzator pentru frame-uri. Deter-minanti sunt parametrii rows si cols: rows imparte fereastra orizontal pe randuri, iar cols vertical pe coloane. Acestea vor mai obtine pe parcurs alte cateva valori. De numarul de indicatii despartite prin vir-gula depinde numarul de coloane sau de randuri. Indicatia imparte fereastra browserului in trei coloane de dimensiuni egale. Cu veti imparti fereastra in doua randuri. Primul rand ocupa o zecime din inaltimea ferestrei, iar cea de a doua 90 de pro-cente. In locul procentajului puteti indica -dimensiunile si cu valori in pixeli. O po-zitie deosebita ocupa caracterul *, anume acesta semnifica: ocupa restul ferestrei.
3.Drumul spre primul frameset
Cu ajutorul unei valori in pixeli, puteti stabili in partea dreapta o coloana fixa pentru bara de navigare, iar celei de a doua coloane ii atribuiti restul spatiului ferestrei.Pentru un prim test introduceti listing-ul 1 si salvati-l sub numele de frame.html. Aceste valori atribuie primei coloane 160 de pixeli, iar restul ramane pentru coloa-na a doua. Pentru incarcarea datelor in frame-uri raspunde .
Important: atribuiti fiecarui frame un nume (name= ), deoarece astfel veti simplifica organizarea ulterioara. In ca-drul primului test veti observa si avanta-jul indicarii valorilor in pixeli, atunci cand doriti sa mariti sau sa micsorati fereastra browserului: in timp ce cadrul din dreapta se modifica odata cu dimen-siunea ferestrei browserului, cel din stan-ga ramane mereu la fel.
4.Incastrarea frameset-urilor
Pentru a subimparti fereastra browse-rului atat orizontal cat si vertical, trebuie sa incastrati doua frame-uri unul intr-altul. Schita, pe care ati realizat-o initial, va fi acum de folos. Pentru ca aici puteti esti-ma cat spatiu necesita fiecare cadru. In exemplul de fata, coloana din stanga va avea o latime de 160 de pixeli, iar bara de navigare din partea de sus a ferestrei va avea o inaltime de 70 de pixeli. Salvati listing-u1 2 sub numele de frame l.html si verificati layout-ul cu browserul. In cazul in care doriti ca bara de navigare sa ocupe toata latimea ferestrei, incastrati frame-urile invers si realizati initial impartirea orizontala si doar apoi cea verticala. Sal-vati aceasta definitie de frameset sub nu-mele de frame2.html. Observati diferen-tele pentru reprezentare fata de frame l. html - impartirea arata acum cu totul altfel.
5.Frame-uri fara rame inestetice
Dupa ce ati pus pe picioare structura, puteti sa va ocupati si de partea estetica. In majoritatea cazurilor, ramele sunt de-ranjante si inestetice. Aceste borduri pot fi indepartate cu ajutorul parametrului suplimentar border=0: Important: acest parametru functio-neaza numai in cazul frameset-urilor in-castrate si numai in prima indicatie frame-set. In toate celelalte tag-uri frameset, border nu are nici un efect. Ambele ver-siuni actuale de Navigator si Explorer recunosc fara probleme parametrul bor-der. Pentru a evita incompatibilitatea fata de versiunile mai vechi de browser, este indicat sa extindeti tag-ul cu indicatii pentru versiuni mai vechi de Internet Explorer: framespacing stabileste in Internet Ex-plorer distanta dintre cadre, frameborder este analog cu border in browserele mai vechi. In cazul in care in tag-ul frameset utilizati ambii parametri, pentru a defini culoarea frame-urilor, trebuie sa atribuiti aceleasi valori pentru aceste indicatii.

6.Definirea distantelor fata de margini
In cazul unui layout foarte exact, sunt deranjante distantele prea mari fata de margini. Browserele include automat ase-menea distantari. Prin intermediul a doi parametri pentru tag-ul frame, aveti posi-bilitatea de a stabili valoarea exacta a acestor margini: marginwidth stabileste distanta fata de marginile laterale. In cazul valorii 0, textul va incepe de la marginea paginii. Margin-width este valabil atat pentru marginea din dreapta cat si pentru cea din stanga: Netscape Navigator va include totusi, in ciuda valorii 0, o distanta de l pixel. Pentru marginea de sus si cea de jos este nevoie de parametrul marginheight. Valoarea 0 nu va plasa continutul lipit de marginea de sus a ferestrei - vor ramane 5 pixeli in Navigator si 4 in Explorer.
Folositi aceste indicatii pentru mar-gini doar pentru layout-ul brut. In cazul in care doriti sa pozitionati exact texte sau imagini, este indicat sa folositi tabele. Mai multe amanunte despre tabele veti afla din episodul al treilea al acestui serial.
7.Limitari rationale
Bordurile prezinta si un al doilea avan-taj in designul frame-urilor: ele pot fi deplasate. In acest fel se pot modifica dimensional ramele din pagina. Daca doriti sa lucrati cu dimensiuni fixe ale cadrelor, stabiliti un parametru noresize. Acest parametru poate fi utilizat pentru fiecare frame in parte. Bineinteles, el va avea un efect numai in cazul in care nu apare bordex=0. Pentru ca numai frame-urile din partea de jos sa poata fi depla-sate, modificati a doua linie.din frame2. html:

In cazul in care continutul este mai mare decat cadrul, va aparea in partea din dreapta o bara de navigare. Aceasta poate fi dezactivata cu scrolling=no. Astfel nu va aparea niciodata respectiva bara. Cu scrolling=yes, bara va aparea intotdeau-na - chiar si atunci cand continutul in-cape in frame. Optiunea presetata in browsere este scrolling=auto, ceea ce inseamna ca barele de navigare apar nu-mai atunci cand sunt necesare.
8.Link-uri spre frame-uri
Urmeaza partea complicata: trimite-rile. Acestea trebuie stabilite cu mare atentie. Astfel, pot fi plasate cateva link-uri in cadru l.html, care se vor rasfrange asupra navigarii prin site. Pentru aceasta, vom inlocui documentul-schita initial ca-dru l.html cu listing-u13. Toate link-urile se afla aici intr-un document.
Determinant este parametrul target. El stabileste unde va fi incarcat continutul link-ului selectat. Aici intervin numele care au fost atribuite in definirea frame-ului. Daca acestea se grupeaza in para-metrul target, documentul aferent link-ului va aparea exact acolo unde trebuie. Pe langa numele stabilite de dumnea-voastra pentru frame-uri, exista si cateva valori speciale. _self incarca fisierul din spatele link-ului in frame-ul de unde a fost apelata trimiterea. Documentul pre-cedent dispare din acest cadru, fiind inlo-cuit de cel apelat.
Un bun mecanism de securitate este _top. El se ramifica spre nivelul superior - surferul va ajunge din nou in fereastra browserului fara subimpartiri. _top este obligatoriu atunci cand indicati un link spre un site web extern. _parent incarca documentul in fereastra in care a fost definit anterior frameset-ul. Acesta prez-inta interes in momentul in care sunt incastrate mai multe frame-uri, dar designul va fi derutant.