Autor: Dan Paunescu
Web site: http://www.afaceri.net
Email: [email protected] , [email protected]


Machetarea siturilor web

Lectia nr.7 - Tabele


Tabelele sunt folosite atat pentru o machetare eficienta cat si pentru a face mai atractive diversele elemente componente ale unei pagini web. Tabelele permit o �mpartire a paginii �n sectiuni si o pozitionare precisa a textului sau imaginilor in interiorul paginii.

Sa presupunem ca vreti sa realizati o pagina web care sa contina un meniu de navigare in partea stanga si continutul (text, imagini,etc.) in partea dreapta. Aceasta machetare se poate realiza si cu ajutorul cadrelor, dar folosirea unui tabel este mai indicata deoarece aveti mai mult control asupra elementelor.

Astfel, puteti imparti pagina �n doua coloane, cu meniul de navigare �n stanga si continutul propriu-zis �n dreapta, textul fiind aliniat la stanga. Puteti crea margini sau borduri de diferite dimensiuni si culori. De asemenea, se poate �ncapsula continutul �n celulele tabelului pentru a permite alinierea textului si a limita lungimea liniilor.

Deoarece bordura tabelelor nu este totdeauna necesara si uneori poate avea un aspect neplacut, se poate renunta la ea prin folosirea atributului "BORDER = 0". Atunci cand folositi tabele, puteti sa setati o latime fixa, in pixeli, sau o latime relativa la dimensiunea ecranului, �n procente. De exemplu, daca folositi atributul WIDTH=80%, continutul va fi afisat pe 80% din latimea ecranului. In acest caz, afisarea continutului se adapteaza mai usor la diferitele tipuri de monitoare sau rezolutii ale acestora.Setarea latimii �n procente se face mai ales la paginile unde exista mult text si unde nu este necesara o formatareprecisa.

Pe de alta parte, tabelele definite cu o latime fixa in pixeli vor ramane neschimbate.

In acest caz, daca se foloseste o rezolutie marita va apare un spatiu alb, �n afara tabelului care va da uneori o imagine neplacuta. In schimb, setarea unei latimi fixe va permite un control ridicat al printarii, realizand o tiparire fara �ntreruperi laterale ale paginii web respective.

Folosirea imaginilor in tabele

Cand intr-una din celulele tabelului aveti inserata o imagine, �nscrierea dimensiunilor acesteia are o mare importanta (atributele "WIDTH" si "HEIGHT"). Aceasta deoarece exista posibilitatea ca browserul, dupa ce construieste structura tabelului, sa constate cadimensiunile imaginii sunt prea mari pentru a completa o celula. �n acest caz, browserul va reface pagina pe care o incarca, iar cititorul va vedea o pagina care apare si apoi dispare.

Mai trebuie luat in considerare si faptul ca atunci cand exista un tabel intr-o pagina web, browserul asteapta sa incarce tot continutul tabelului si abia dupa aceea �l afiseaza cititorului. Folosirea uneia sau mai multor imagini de dimensiuni mari intr-un tabel poate duce la cresterea exagerata a timpului de incarcare (uneori peste 1 minut).De aceea, este recomandat sa puneti aceste imagini in afara tabelului principal sau in tabele separate, pentru ca browserul sa le �ncarce concomitent.

Atunci cand proiectati o pagina web cu tabele, este bine sa evitati pe cat posibil folosirea de tabele imbricate (un tabel in interiorul altuia). �n afara aspectului neatragator, pot apare si erori care sunt greu de depistat. Pentru a obtine o punere in pagina eficienta, �ncercati sa experimentati mai multe tipuri de tabele cu latimi, margini si borduri diferite. In final, alegeti solutia care ofera o flexibilitate maxima si creeaza efectul pe care l-ati dorit.

Mai multe informatii interesante despre tabele puteti gasi vizitand urmatoarele situri:

http://www.webhelp.org/tables/
http://www.bagism.com/tablemaker/
http://www.botany.hawaii.edu/tables/
http://www.pagetutor.com/pagetutor/tables/index.html
http://www.december.com/html/demo/tablehi.html
http://www.pageresource.com/html/table3.htm
http://www.htmlgoodies.com/tutors/tbl.html

In final, ceea ce conteaza este mesajul pe care reusiti sa-l transmiteti. Acest lucru puteti sa-l faceti folosind o pagina simpla, cadre, tabele sau combinatii ale acestora.
Important este sa realizati un sit web atragator, indiferent de modul de aranjare in pagina.

Cadre (frames)

Cadrele va permit sa afisati doua sau mai multe pagini web, in acelasi timp, prin impartirea ecranului in mai multe sectiuni independente. Initial, cadrele au fost o inovatie a firmei Netscape. Pe parcurs, ele au fost folosite din ce in ce mai mult si in prezent sunt acceptate de majoritatea browserelor.
Ele reprezinta o metoda controversata de machetare a unei pagini web. In randul webdesignerilor exista sustinatori si adversari ai folosirii cadrelor, ca o solutie eficienta de aranjare in pagina.

De aceea, inainte de a va hotara, analizati modul cum doriti sa organizati si sa structurati paginile web.
Folosirea cadrelor prezinta atat avantaje cat si dezavantaje.

Avantajele folosirii cadrelor

Cadrele se pot folosi cu succes atunci cand continutulsitului se modifica frecvent.
In acest caz, un cadru va fi folosit pentru meniul de navigare iar in celalalt cadru va apare continutul propriu-zis. Cand doriti modificarea sau actualizarea continutului, este suficient sa modificati numai un fisier.
Nu este nevoie sa schimbati fiecare pagina a sitului pentru a actualiza legaturile. Pentru cititori navigarea va fi usoara, deoarece ei vor sti �n orice moment unde se afla legaturile si cum este structurat situl.
Folosirea cadrelor permite utilizatorilor sa aleaga ce vor sa vada.

De exemplu, sa presupunem ca vreti sa prezentati un film in pagina web. �n loc sa folositi o singura pagina, care se va incarca foarte greu din cauza dimensiunii mari a fisierului, puteti sa folositi numai o legatura �n pagina principala.
Daca urmeaza aceasta legatura, vizitatorul va fi trimis intr-un alt cadru unde va putea urmari filmul, bineinteles dupa �ncarcarea fisierului respectiv.

Dezavantajele folosirii cadrelor

Multi webmasteri nu recomanda folosirea cadrelor datorita urmatoarelor dezavantaje:

• flexibilitate limitata si posibila confuzie a cititorilor


• aparitia bordurilor care reduc spatiul afisat pe ecran


• browserele mai vechi ( NN 1.0 , IE 1.0 , IE 2.0 ) nu recunosc siturile care contin cadre


• timpul de incarcare al paginilor este mai mare


• uneori se pot obtine rezultate neasteptate. Astfel, daca folositi butonul "Back" veti reveni in interiorul cadrului in loc sa vedeti pagina precedenta.


• puteti intampina dificultati atunci cand vreti sa salvati sau sa tipariti o pagina care contine cadre. Cand salvati o pagina web care v-a interesat aveti doua optiuni:

     - sa salvati toata pagina
     - sa salvati numai un anumit cadru folosind comanda "Save frame as".

• cand vreti sa faceti un semn de carte (bookmark) la o pagina care contine cadre, veti vedea ca veti face semn numai pe pagina index (cea care contine setarile - frameset si nu pe pagina cu continutul propriu-zis

Daca totusi va hotarati sa realizati machetarea paginii cu ajutorul cadrelor, pentru evitarea acestor neplaceri, puteti sa realizati si o versiune alternativa a sitului, fara cadre. Pentru aceasta folositi marcajul NOFRAMES. Pe pagina principala veti pune o legatura explicita catre aceasta versiune.

Alte informatii referitoare la folosirea cadrelor in machetarea paginilor web le puteti obtine daca accesati urmatoarele pagini web:

http://www.manda.com/frames/
http://www.sharkysoft.com/tutorials/frames/
http://www.htmlhelp.com/design/frames/

Exemplu de sit web

�n machetarea sitului web http://www.afaceri.net am optat pentru folosirea tabelelor. Astfel, am impartit spatiul paginii in doua tabele principale, a caror latime am stabilit-o �n procente (100%). Acest lucru conduce la vizualizarea paginii pe intreaga latime a ecranului, indiferent de rezolutia acestuia.
�n tabelul superior am inserat logo-ul, harta grafica si o imagine.
Tabelul inferior, l-am �mpartit �n alte doua tabele. �n partea stanga a acestuia am inclus sistemul de navigare, chestionarul, lista cu produse oferite gratuit si contoarele de trafic (Trafic si Sitemeter).

Tabelul din partea dreapta l-am impartit, la randul lui, �n alte trei randuri. Randul de sus l-am folosit pentru inserarea continutului propriu-zis al paginii web, �n randul din mijloc am introdus sagetile de navigare (�nainte-�napoi) iar �n ultimul rand am introdus legaturile text catre paginile de nivel 1 ale sitului si informatiile legate de copyright.

Pentru titluri si subtitluri am folosit randuri separate, setate la o latime de 100%. Fundalul randurilor si culoarea textului am stabilit-o ulterior.

Pentru ca textul sa nu inceapa direct din marginea celulei tabelului, am folosit acolo unde a fost cazul, atributul CELLPADDING = "5", care introduce un spatiu de 5 pixeli in interiorul celulei. Pentru ca marginea tabelelor sa nu poata fi vizualizata, bordura am setat-o la valoarea zero folosind atributul BORDER = "0".

O machetare similara se poate realiza si cu ajutorul cadrelor. Dupa parerea mea, folosirea unui tabel este mult mai eficienta deoarece puteti avea mai mult control asupra elementelor paginii web.

Nota: Aceasta lectie reprezinta un capitol din cartea "Proiectarea paginilor web"
(http://www.afaceri.net/ebooks/E-books.htm)