Frame-urile reprezinta elementul potrivit pentru designeri atunci cand
doresc ca homepage-ul sa aiba o structura corespunzatoare, iar navigarea sa
fie pe masura. v4s19sf
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:
<html><body bgcolor=red> cadru X</body></html>
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:
<body bgcolor=yellow> si
<body bgcolor=green>
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<frameset> 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 <frameset.cols="33%, 33%, 33%">
imparte fereastra browserului in trei coloane de dimensiuni egale.
Cu <frameset rows="10%, 90%"> 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 <frame src...>.
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: <fraIset
rows="70, *" bordez=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: <frameset rows="70, *" bor-der=Oframeborder=0'frame-spacing=0>
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: <frame src="cadru3.html" name="continut"
margin-width=0 marginheight=0> 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:
<frame src="cadru2.html" name="navsite" noresize>
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.
O alta valoare este _blank. Se leaga de o noua fereastra. Browserul va deschide
o noua instanta, unde va reprezenta doc-umentul. Dar atentie! Cine deschide
prea multe ferestre pe desktop-ul surferului; va avea parte numai de critici.
Nu doar in web, ci si pe propriul homepage este importanta navigarea
cat mai simpla.
Homepage-urile cu mai mult de doua documente necesita o navi-gare bine pusa
la punct. Pentru ca, daca cititorii se ratacesc prin paginile dumneavoastra,
nemaigasind cuprinsul sau homepage-ul, atunci ei vor apasa cu siguranta butonul
Home al browserului, iar pe viitor vor ocoli pagina dumneavoastra.
Principii de baza
Inainte de a lansa pagini web in retea, trebuie sa verificati structura
acestora: Exista doua variante: o structura in forma de stea pentru site-uri
mici si o constructie ierarhica pentru ofertele ample.
In cazul structurilor in forma de stea plasati pagina de intrare
in centrul atentiei, de la aceasta plecand apoi toate celelalte
pagini. Constructia ierarhica aminteste pe undeva de structura arborescenta
a directoarelor de pe harddisk. Din pagina principala pleaca link-uri catre
nivelul urmator - ca si spre subdirectoarele de pe harddisk. Fiecare nivel contine
o tema proprie si se ramifica in alte subrubrici. Acest tip de constructie
este necesar, de exemplu, in momentul in care doriti sa introduceti
in retea o arhiva de texte.
Atentia principala trebuie acordata paginii de intrare. Aceasta trebuie sa con-tina
link-uri catre toate celelalte pagini; cand se lucreaza cu site-uri cu
mai multe nivele, este suficient sa fie introduse link-uri catre urmatorul nivel.
Si invers, pagina de intrare trebuie sa poata fi acce-sata intotdeauna
de pe orice alta pagina. Daca aveti mai multe nivele subordonate, este necesar,
in plus, un link pentru accesarea nivelului imediat superior. In
ca-zul site-urilor mai mici, aceasta structura ierarhica poate fi modificata.
In afara de link-ul spre homepage, pot fi introduse in conceptul
de navigare trimiteri catre fiecare pagina in parte.
Pozitionarea elementelor de navigare
Elementele de navigare trebuie sa fie foarte vizibile si sa fie plasate intot-deauna
in aceeasi zona a fiecarei pagini. Atunci cand lucrati cu site-uri
bazate pe frame-uri, grupati toate link-urile intr-un frame individual.
Daca insa nu utilizati frame-uri, po-zitionati elementele de navigare
in partea de sus si in partea de jos a fiecarui docu-ment. Ele trebuie
sa fie evidentiate din punct de vedere al aspectului fata de continut. In
acest sens, in functie de gust si talent este suficient daca includeti
o linie orizontala, o culoare sau o grafica deosebita. Astfel se creeaza o bara
de navigare, care va fi recunoscuta de surfer pe fiecare pagina in parte.
Daca aveti nevoie de mai multe link-uri, includeti doua bare de navigare: una
sus pe pagina si una in partea stanga, langa document: Bara
de sus va contine link--urile identice ce sunt incluse pe toate paginile, de
exemplu trimiterea la home-page, la functia de cautare sau la pagina de feed-back.
In partea din stanga se vor afla link-urile spre celelalte documente
sau subnivele ale site-ului.
1. Navigare simpla
Daca va grabiti sau apreciati mai mult un design modest, este ideala o bara
de navigare cu text. Hyperlink-urile vor ara-ta atunci asa cum au fost create
in HTML. Doar parantezele patrate evidentiaza faptul ca este vorba de
un element de navigare (aici, pas1)
Toate link-urile acestui exemplu sunt pozitionate pe o singura linie. Ruperea
randurilor in codul sursa asigura plasarea unui spatiu intre
link-uri. Ultimul link este deosebit de util, fapt pentru care nu ar trebui
sa lipseasca de pe nici un site. Tag-ul mailto apeleaza clientul de e-mail al
surferului, unde este completata adresa dumneavoastra in campul
adresantului. In acest fel, surferul are posibilitatea de a vi se adresa
direct de pe pagina, fara sa caute adresa dumneavoastra. Bara de navigare este
separata de restul docu-mentului printr-o linie orizontala. Aici, aceasta este
aliniata la stanga prin align=left, iar latimea acesteia este limi-tata
la 800 de pixeli prin width=800.
2. Butoane din creatia proprie
Butoane fara umbra. Web-design-erii cu pretentii la capitolul grafica isi
deseneaza singuri elementele de navi-gare. In general sunt preferate butoane
cu o dimensiune de circa 100x40 de pixeli. Acestea au o suprafata destul de
mare pentru a incapea inscriptionarea si sunt suficient de mici; pentru
a nu ocupa prea mult spatiu din pagina: Aceste. dimen-siuni sunt avantajoase
si din alt punct de vedere: butoanele mici pot fi si incarcate mai usor.
Calea cea mai simpla spre asemenea butoane este apelarea la programul share-ware
Paintshop Pro, care detine functia Buttonize. Insa aceasta functie trebuie
exploatata cu grija.
Deschideti in Paintshop Pro un nou document grafic cu 16,7 milioane de
cu-lori cu latimea de I00 de pixeli si inal-timea de 40 de pixeli. Fundalul
ramane alb. Mariti imaginea cu ajutorul functiei de zoom pentru a pozitiona
mai usor textul.Dati un clic pe butonul de text si selectati un font oarecare,
de 12 puncte, bold. Introduceti textul Home, dati un clic pe OK si plasati scrisul
in mijlocul noului buton. Deoarece textul este inca marcat, apasati
combinatia de taste aCTRLi+aDi pentru a elimina marcajul.
Selectati apoi Image - Effects - But-tonize. Pentru Height este indicata o valoare
cuprinsa intre 15 si 20, atunci cand este activata functia de Transparent
Edge. Solid Edge nu arata la fel de bine. Dar daca totusi doriti sa o folositi,
stabi-liti pentru Height o valoare mai mica, intre 5 si 10. Dupa confirmarea
cu OK, noul buton este gata. Salvati-1 ca fisier JPG. Apoi pentru ca timpul
necesar incarcarii acestei imagini sa fie minim folositi un program pentru
optimizare JPEG, cum ar fi JPEG Optimizer.
In documentul HTML (WELCOME. HTML) legati grafica de hyperlink dupa cum
urmeaza:
Cu ajutorul func-tiei Buttonize din Paintshop Pro pu-teti desena rapid butoane
pentru homepage-ul dumneavoastra. Pentru orice even-tualitate salvati separat
un buton neinscriptionat.
Parametrul border=0 evita afisarea marginii albastre inestetice, care sugerea-za
faptul ca respectiva grafica reprezinta un link.
Butoane cu umbra.
Raman in con-tinuare la moda umbrele pozitionate in spatele
butoanelor. Cu putina indema-nare puteti desena chiar dumneavoastra
aceste elemente de navigare de efect. Si de aceasta data puteti apela la Paintshop
Pro.
Deschideti o imagine noua, avand dimensiunea de 400x400 de pixeli. Pentru
prima incercare folositi albul ca si cu-loare de fundal si 16,7 milioane
de culori. Desenati un dreptunghi in coltul din stanga sus al ferestrei.
Atentie ca functia de fill sa fie activata si sa fie destul spatiu pentru un
al doilea dreptunghi de aceleasi dimensiuni. Marcati apoi dreptunghiul cu Magic
Wand, care apare ca o bagheta in bara de simboluri. Tolerance si Feather
trebuie sa aiba valoarea 0. Cu aCtrli+aCi si aCtrli+aEi inserati o copie a dreptunghiului
in spatiul liber al imaginii. Colorati noul dreptunghi cu gri deschis
cu ajutorul functiei Flood-Fill. Aceasta este reprezentata in bara de
sim-boluri ca o cutie de conserve stilizata. Activati apoi shortcut-ul aCTRLi+aDi,
pentru a elimina marcajul. Dati din nou un clic pe bagheta ma-gica. De aceasta
data Feather va obtine valoarea 10. In momentul in care dati un
clic pe dreptunghi, Paintshop Pro va de-sena un cadru de marcare. Apelati de
cinci ori consecutiv punctul de meniu Image - Blur - Blur More. In acest
fel finisati marginile umbrei. Marcati din nou primul dreptunghi cu bagheta
magica . Feather are valoarea 0. Trageti acest dreptunghi peste umbra sa. Decupati
butonul obtinut si salvati-1 ca JPG. Bineinteles ca acum puteti inscrip-tiona
butonul, salvandu-1 de fiecare data sub un alt nume. Nu stergeti butonul
gol (fara inscriptionare), astfel incat sa-1 pu-teti apela pentru
orice fel de modificare.
3. Bara de navigare dintr-o bucata
Bara de navigare este compusa din mai multe grafice individuale, care sunt
plasate unul langa celalalt fara spatiu intre ele. Pentru aceasta,
desenati bara completa pe care includeti inscriptio-narile adecvate. Apoi impartiti
imaginea in componente si salvati-le. In docu-mentul web integrati
apoi graficele dupa cum urmeaza:
Rolul esential il joaca aici tag-ul nobr. Acesta impiedica ruperea
randurilor, chiar si atunci cand fereastra browserului este mai
ingusta decat bara cu butoane. In afara de aceasta, nu este
voie sa se rupa randul intre hyperlink-uri in codul sursa.
In caz contrar, browserul include un spa-tiu intre diferitele imagini.
O varianta alternativa este includerea imaginilor intr-un tabel. Acest
lucru are acelasi efect optic, dar ofera mai multe posibilitati.
