"Machetarea siturilor web 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 formatare precisa 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 ca dimensiunile 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 : https://www.webhelp.org/tables/ https://www.killersites.com/tutorial/ https://www.bagism.com/tablemaker/ https://www.pagetutor.com/pagetutor/tables/index.html https://www.botany.hawaii.edu/tables/ https://www.december.com/html/demo/tablehi.html https://www.pageresource.com/html/table3.htm https://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 continutul sitului 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 : https://www.builder.cnet.com/Authoring/Frames/index.htm https://www.pagetutor.com/pagetutor/frames/index.html https://www.manda.com/frames/ https://www.home.netscape.com/assist/net_sites/frames.html https://www.sharkysoft.com/tutorials/frames/ https://www.htmlhelp.com/design/frames/ Exemplu de sit web În machetarea sitului web https://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.
"Machetarea siturilor web 5". Fundal
In timp
ce navigati pe Internet probabil ca ati vazut
multe pagini web a caror citire este greoaie si obositoare. Acest lucru este posibil in cazul in care a fost ales un fundal necorespunzator. Ca sa nu mai vorbim de faptul ca unele pagini sunt inestetice datorita folosirii ca fundal a unor imagini pretentioase si total neinspirate. Alegerea fundalului Atunci cand cautati un fundal pentru paginile web, este recomandat sa tineti cont de urmatoarele: -alegeti cu grija culorile fundalului, pentru a nu interfera cu culoarea textului -folositi pentru text si fundal culori contrastante, care sa permita citirea usoara a continutului ( cea mai buna optiune, din punct de vedere al lizibilitatii, ramane folosirea unui fundal alb si text negru). Din pacate, aceasta alegere nu este si cea mai atractiva. Puteti sa alegeti si alte combinatii de culori, care vi se par deosebite -daca folositi imagini pentru fundal, folositi fisiere GIF sau JPEG de dimensiuni mici, pentru a reduce la minimum timpul de incarcare a paginii -imaginea folosita pentru fundal trebuie sa fie in concordanta, din punct de vedere cromatic, cu aspectul paginii web si restul imaginilor -nu este recomandabila folosirea imaginilor animate pentru fundal datorita dimensiunilor mari si lizibilitatii reduse a textului Culori si imagini folosite pentru fundal Culoarea standard pe care un browser o afiseaza pentru fundal este gri. Bineinteles ca puteti selecta orice culoare doriti pentru fundal, folosind atributul BGCOLOR. DE RETINUT: Puteti alege o imagine ( format GIF sau JPEG ) pe care sa o folositi ca fundal, pentru a da un aspect mai deosebit paginilor web. Indiferent de dimensiunea imaginii folosite, browserul va completa fundalul paginii web cu copii ale imaginii respective, asezate una langa alta si/sau una peste alta. In acest caz, trebuie sa specificati neaparat si culoarea folosita pentru fundal. Culoarea respectiva va fi folosita de browserele care lucreaza in format text sau de utilizatorii care au dezactivata optiunea referitoare la incarcarea imaginilor. Este recomandabil ca aceasta culoare sa fie apropiata de culoarea de baza a imaginii folosite. Animatii Imaginile animate, ca de altfel toate imaginile, se
folosesc pentru a sublinia un mesaj sau pentru a da un impact deosebit unei pagini web. Cu toate ca unele animatii sunt ingenios realizate si atrag cititorii, nu trebuie uitat ca motivul principal pentru care se navigheaza pe Internet este cautarea de informatii dintr-un domeniu sau altul. Pagina web pe care ati realizat-o trebuie sa atraga cititorii prin continutul ei intrinsec si nu prin folosirea unor imagini animate viu colorate. Restrictii impuse în folosirea imaginilor animate Daca va hotarati totusi sa folositi unele animatii, trebuiesc luate in calcul cateva aspecte: a ) - dimensiunea fisierului folosit b ) - utilitatea lor c ) - browserele folosite a ) - Sa presupunem ca atunci cand creati o imagine animata folositi 10 cadre avand fiecare 10 Kb, rezultand deci un fisier de 100 Kb. De asemenea, sa presupunem ca vizitatorii folosesc modemuri de 56 Kb/s iar rata de transfer efectiva este de 3.6 KB/s ( in realitate, aceasta poate fi mult mai scazuta ). Aceasta inseamna ca numai fisierul respectiv se incarca în aproximativ 30 de secunde. Daca se ia in calcul si faptul ca trebuiesc incarcate si celelalte elemente componente ale paginii, se observa ca timpul de incarcare este destul de ridicat. Asa cum am mai spus, acest lucru este total contraindicat. DE RETINUT: Trebuie verificat cu atentie dimensiunea fisierului folosit si este recomandabila evitarea imaginilor animate de mari dimensiuni in prima pagina. b )- Pe de alta parte folosirea unor imagini animate poate duce la cresterea atractivitatii sitului Bineinteles ca aceste animatii nu trebuie sa intrerupa brutal concentrarea cititorului asupra textului paginii Ele trebuiesc folosite cu masura si , pe cat posibil, sa fie folositoare si sa adauge ceva instructiv continutului paginii . c ) - In plus , nu toate browserele suporta imaginile animate . Browserele care nu suporta animatiile vor afisa numai primul cadru . Acesta va fi intotdeauna ales cu maximum de atentie . Exemple de folosire a imaginilor animate Se poate folosi o imagine animata pentru a ilustra un concept sau o tehnica descrisa in textul principal . Pentru a nu intrerupe firul expunerii, animatia respectiva poate sa apara si intr-o noua fereastra. Dupa ce vede animatia respectiva, vizitatorul poate inchide fereastra si poate continua citirea textului . Unde se pot gasi imagini animate ? In functie de imaginatia proprie , fiecare webmaster poate sa realizeze animatii pe care sa le includa in paginile web. Pentru acest lucru este nevoie de un software specializat si de anumite cunostinte de grafica pe web. Daca nu dispuneti de aptitudinile necesare crearii unor imagini grafice adecvate, le puteti incarca direct de pe Internet. Exista o multime de librarii online interesante, care contin fiecare cateva mii de imagini animate. Exemplu de sit web Pentru a reduce la minimum timpul
de incarcare al
paginilor web, am cautat sa folosesc cat mai putin imagini animate. Este adevarat, unele dintre ele pot fi foarte atractive dar fisierele corespunzatoare au in general dimensiuni mari. De asemenea, trebuie avuta in vedere utilitatea lor. Acest sit este bazat in principal pe oferirea unui continut bogat. Daca as fi inclus o multime de imagini animate, ar fi crescut fara indoiala spectaculozitatea paginilor respective In schimb, cititorii ar fi fost derutati si, probabil, ar fi citit textul cu o mai mare dificultate. Asta presupunand ca nu au dezactivata optiunea de incarcare a imaginilor din browser In logo am inclus o mica imagine animata, alcatuita din sase cadre (in globul care se invarteste). Am cautat, in schimb, sa reduc la maximum dimensiunea acestui logo. Am ales sa folosesc in coloana din stanga o imagine pentru fundal in nuante de albastru deschis. Pentru aceasta imagine am asigurat o compresie maxima a fisierului JPG (2KB). De asemenea, am folosit atributul BGCOLOR="blue" pentru coloana din stanga unde am folosit fundalul. Aceasta inseamna ca pentru vizitatorii sitului care au dezactivata optiunea de vizualizare a imaginilor va apare un fundal de culoare albastru deschis in coloana respectiva. In partea stanga, acolo unde este inserat continutul propriu-zis al paginii web, am ales un fundal alb pentru a asigura o lizibilitate maxima a textului. Bineinteles ca fiecare isi poate alege, in functie de preferintele proprii si de stilul general al paginii web, culoarea sau imaginea folosite pentru fundal. Important este ca aceste elemente sa nu fie prea stridente si sa asigure o buna imagine pentru pagina respectiva.
