Sunteți pe pagina 1din 6

Web design Frame-urile reprezint elementul potrivit pentru designeri atunci cnd doresc ca homepage-ul s aib o structur corespunztoare,

iar navigarea s fie pe msur. 1.Planificare i pregtire n cazul n care dori i s introducei frame-uri n homepage, trebuie s lmurii cteva lucruri: n ce scop utiliza i frame-urile? Cte frame-uri sunt nece-sare? Cum se mpart paginile? Apoi luai o hrtie i un creion. Pe o foaie A4 proiecta i n mare mprirea paginii. Liniile nu trebuie s fie poziio-nate la milimetru, dar aceast schi v ajut s avei o imagine asupra structurii paginii. Schi ai n rame i coninutul -indicai bara de navigare i includei ima-ginile. Nu facei economie de timp -lucrai pn cnd suntei mulumii de proiect. Pentru c n momentul n care ncepei cu realizarea frame-urilor, even-tualele modificri vor duce la pierdere de vreme. ncepe apoi transpunerea n prac-tic. Scriei - eventual cu Notepad - trei noi fiiere HTML cu urmtorul coninut: <html><body bgcolor=red> cadru X</body></html> n locul lui X scriei cifrele de la 1 la 3. Salva i aceste fiiere sub numele de cadrul.html pn la cadru3.html. Dac dorii, putei schimba indicaia de culoare din al doilea i al treilea fiier, de exemplu: <body bgcolor=yellow> si <body bgcolor=green> Aceste pagini-schi v ajut la con-struirea setului de frame-uri i permit verificarea mpririi. Coninutul pro-priu-zis va putea fi alctui ulterior. 2.mprirea setului de frame-uri Tag-ul html<frameset> este rspunztor pentru frame-uri. Deter-minani sunt parametrii rows i cols: rows mparte fereastra orizontal pe rnduri, iar cols vertical pe coloane. Acestea vor mai obine pe parcurs alte cteva valori. De numrul de indicaii desprite prin vir-gul depinde numrul de coloane sau de rnduri. Indicaia <frameset.cols="33%, 33%, 33%"> mparte fereastra browserului n trei coloane de dimensiuni egale. Cu <frameset rows="10%, 90%"> vei mpri fereastra n dou rnduri. Primul rnd ocup o zecime din nlimea ferestrei, iar cea de a doua 90 de pro-cente. n locul procentajului pute i indica -dimensiunile i cu valori n pixeli. O po-zi ie deosebit ocup caracterul *, anume acesta semnific: ocup restul ferestrei. 3.Drumul spre primul frameset Cu ajutorul unei valori n pixeli, pute i stabili n partea dreapt o coloan fix pentru bara de navigare, iar celei de a doua coloane i atribui i restul spaiului ferestrei.Pentru un prim test introducei listing-ul 1 i salvai-l sub numele de frame.html. Aceste valori atribuie primei coloane 160 de pixeli, iar restul r mne pentru coloa-na a doua. Pentru ncrcarea datelor n frame-uri rspunde <frame src...>.

Important: atribuii fiecrui frame un nume (name=...), deoarece astfel vei simplifica organizarea ulterioar. n ca-drul primului test vei observa i avanta-jul indicrii valorilor n pixeli, atunci cnd dori i s mrii sau s micorai fereastra browserului: n timp ce cadrul din dreapta se modific odat cu dimen-siunea ferestrei browserului, cel din stn-ga rmne mereu la fel. 4.ncastrarea frameset-urilor Pentru a submpri fereastra browse-rului att orizontal ct i vertical, trebuie s ncastrai dou frame-uri unul ntr-altul. Schia, pe care ai realizat-o iniial, va fi acum de folos. Pentru c aici putei esti-ma ct spaiu necesit fiecare cadru. n exemplul de fa, coloana din stnga va avea o l ime de 160 de pixeli, iar bara de navigare din partea de sus a ferestrei va avea o n lime de 70 de pixeli. Salvai listing-u1 2 sub numele de frame l.html i verificai layout-ul cu browserul. n cazul n care dorii ca bara de navigare s ocupe toat limea ferestrei, ncastrai frame-urile invers i realizai iniial mprirea orizontal i doar apoi cea vertical. Sal-vai aceast definiie de frameset sub nu-mele de frame2.html. Observai diferen-ele pentru reprezentare fa de frame l. html mprirea arat acum cu totul altfel. 5.Frame-uri fr rame inestetice Dup ce ai pus pe picioare structura, putei s v ocupai i de partea estetic. In majoritatea cazurilor, ramele sunt de-ranjante i inestetice. Aceste borduri pot fi ndeprtate cu ajutorul parametrului suplimentar border=0: <fra~set rows="70, *" bordez=0> Important: acest parametru funcio-neaz numai n cazul frameseturilor n-castrate i numai n prima indicaie frame-set. n toate celelalte tag-uri frameset, border nu are nici un efect. Ambele ver-siuni actuale de Navigator i Explorer recunosc fr probleme parametrul bor-der. Pentru a evita incompatibilitatea fa de versiunile mai vechi de browser, este indicat s extindei tag-ul cu indicaii pentru versiuni mai vechi de Internet Explorer: <frameset rows="70, *" bor-der=Oframeborder=0'frame-spacing=0> framespacing stabile te n Internet Ex-plorer distana dintre cadre, frameborder este analog cu border n browserele mai vechi. n cazul n care n tag-ul frameset utiliza i ambii parametri, pentru a defini culoarea frame-urilor, trebuie s atribuii aceleai valori pentru aceste indicaii. 6.Definirea distanelor fa de margini n cazul unui layout foarte exact, sunt deranjante distanele prea mari fa de margini. Browserele include automat ase-menea distan ri. Prin intermediul a doi parametri pentru tag-ul frame, avei posi-bilitatea de a stabili valoarea exact a acestor margini: <frame src="cadru3.html" name="continut" margin-width=0 marginheight=0> marginwidth stabile te distana fa de marginile laterale. n cazul valorii 0, textul va ncepe de la marginea paginii. Margin-width este valabil att pentru marginea din dreapta ct i pentru cea din stnga: Netscape Navigator va include totui, n ciuda valorii 0, o distan de l pixel. Pentru marginea de sus i cea de jos este nevoie de parametrul marginheight. Valoarea 0 nu va plasa coninutul lipit de marginea de sus a ferestrei - vor r mne 5 pixeli n Navigator i 4 n Explorer.

Folosii aceste indicaii pentru mar-gini doar pentru layout-ul brut. n cazul n care dorii s poziionai exact texte sau imagini, este indicat s folosii tabele. Mai multe amnunte despre tabele vei afla din episodul al treilea al acestui serial. 7.Limitri raionale Bordurile prezint i un al doilea avan-taj n designul frame-urilor: ele pot fi deplasate. n acest fel se pot modifica dimensional ramele din pagin . Dac dorii s lucrai cu dimensiuni fixe ale cadrelor, stabili i un parametru noresize. Acest parametru poate fi utilizat pentru fiecare frame n parte. Bineneles, el va avea un efect numai n cazul n care nu apare bordex=0. Pentru ca numai frame-urile din partea de jos s poat fi depla-sate, modificai a doua linie.din frame2. html: <frame src="cadru2.html" name="navsite" noresize> n cazul n care coninutul este mai mare dect cadrul, va aprea n partea din dreapta o bar de navigare. Aceasta poate fi dezactivat cu scrolling=no. Astfel nu va aprea niciodat respectiva bar. Cu scrolling=yes, bara va aprea ntotdeau-na - chiar i atunci cnd coninutul n-cape n frame. Opiunea presetat n browsere este scrolling=auto, ceea ce nseamn c barele de navigare apar numai atunci cnd sunt necesare. 8.Link-uri spre frame-uri Urmeaz partea complicat: trimite-rile. Acestea trebuie stabilite cu mare atenie. Astfel, pot fi plasate cteva link-uri n cadru l.html, care se vor r sfrnge asupra navigrii prin site. Pentru aceasta, vom nlocui documentul-schi iniial cadru l.html cu listing-u13. Toate link-urile se afl aici ntr-un document. Determinant este parametrul target. El stabile te unde va fi ncrcat coninutul link-ului selectat. Aici intervin numele care au fost atribuite n definirea frame-ului. Dac acestea se grupeaz n para-metrul target, documentul aferent link-ului va aprea exact acolo unde trebuie. Pe lng numele stabilite de dumnea-voastr pentru frame-uri, exist i cteva valori speciale. _self ncarc fiierul din spatele link-ului n frame-ul de unde a fost apelat trimiterea. Documentul pre-cedent dispare din acest cadru, fiind nlo-cuit de cel apelat. Un bun mecanism de securitate este _top. El se ramific spre nivelul superior - surferul va ajunge din nou n fereastra browserului fr submpriri. _top este obligatoriu atunci cnd indica i un link spre un site web extern. _parent ncarc documentul n fereastra n care a fost definit anterior frameset-ul. Acesta prez-int interes n momentul n care sunt ncastrate mai multe frame-uri, dar designul va fi derutant. O alt valoare este _blank. Se leag de o nou fereastr. Browserul va deschide o nou instan, unde va reprezenta doc-umentul. Dar atenie! Cine deschide prea multe ferestre pe desktop-ul surferului; va avea parte numai de critici. Nu doar n web, ci i pe propriul homepage este important navigarea ct mai simpl. Homepage-urile cu mai mult de dou documente necesit o navi-gare bine pus la punct. Pentru c, dac cititorii se rtcesc prin paginile dumneavoastr,

nemaigsind cuprinsul sau homepage-ul, atunci ei vor apsa cu siguran butonul Home al browserului, iar pe viitor vor ocoli pagina dumneavoastr. Principii de baz nainte de a lansa pagini web n reea, trebuie s verificai structura acestora: Exist dou variante: o structur n form de stea pentru site-uri mici i o construcie ierarhic pentru ofertele ample. n cazul structurilor n form de stea plasai pagina de intrare n centrul ateniei, de la aceasta plecnd apoi toate celelalte pagini. Construc ia ierarhic amintete pe undeva de structura arborescent a directoarelor de pe harddisk. Din pagina principal pleac link-uri ctre nivelul urmtor - ca i spre subdirectoarele de pe harddisk. Fiecare nivel conine o tem proprie i se ramific n alte subrubrici. Acest tip de construcie este necesar, de exemplu, n momentul n care dorii s introducei n reea o arhiv de texte. Atenia principal trebuie acordat paginii de intrare. Aceasta trebuie s con-in link-uri ctre toate celelalte pagini; cnd se lucreaz cu site-uri cu mai multe nivele, este suficient s fie introduse link-uri ctre urmtorul nivel. i invers, pagina de intrare trebuie s poat fi acce-sat ntotdeauna de pe orice alt pagin. Dac avei mai multe nivele subordonate, este necesar, n plus, un link pentru accesarea nivelului imediat superior. n ca-zul site-urilor mai mici, aceast structur ierarhic poate fi modificat. n afar de link-ul spre homepage, pot fi introduse n conceptul de navigare trimiteri ctre fiecare pagin n parte. Poziionarea elementelor de navigare Elementele de navigare trebuie s fie foarte vizibile i s fie plasate ntotdeauna n aceeai zon a fiecrei pagini. Atunci cnd lucrai cu site-uri bazate pe frame-uri, grupai toate link-urile ntr-un frame individual. Dac ns nu utilizai frame-uri, po-ziionai elementele de navigare n partea de sus i n partea de jos a fiec rui docu-ment. Ele trebuie s fie evideniate din punct de vedere al aspectului fa de coninut. n acest sens, n funcie de gust i talent este suficient dac includei o linie orizontal , o culoare sau o grafic deosebit. Astfel se creeaz o bar de navigare, care va fi recunoscuta de surfer pe fiecare pagin n parte. Dac avei nevoie de mai multe link-uri, include i dou bare de navigare: una sus pe pagin i una n partea stng, lng document: Bara de sus va conine link--urile identice ce sunt incluse pe toate paginile, de exemplu trimiterea la home-page, la funcia de cutare sau la pagina de feed-back. n partea din stnga se vor afla link-urile spre celelalte documente sau subnivele ale site-ului. 1. Navigare simpl Dac v grbii sau apreciai mai mult un design modest, este ideal o bar

de navigare cu text. Hyperlink-urile vor ar -ta atunci aa cum au fost create n HTML. Doar parantezele ptrate evideniaz faptul c este vorba de un element de navigare (aici, pas1) Toate link-urile acestui exemplu sunt poziionate pe o singur linie. Ruperea rndurilor n codul surs asigur plasarea unui spaiu ntre link-uri. Ultimul link este deosebit de util, fapt pentru care nu ar trebui s lipseasc de pe nici un site. Tag-ul mailto apeleaz clientul de e-mail al surferului, unde este completat adresa dumneavoastr n cmpul adresantului. n acest fel, surferul are posibilitatea de a vi se adresa direct de pe pagin , fr s caute adresa dumneavoastr. Bara de navigare este separat de restul docu-mentului printr-o linie orizontal. Aici, aceasta este aliniat la stnga prin align=left, iar l imea acesteia este limi-tat la 800 de pixeli prin width=800. 2. Butoane din creaia proprie Butoane fr umbr. Web-design-erii cu pretenii la capitolul grafic i deseneaz singuri elementele de navi-gare. n general sunt preferate butoane cu o dimensiune de circa 100x40 de pixeli. Acestea au o suprafa destul de mare pentru a ncpea inscripionarea i sunt suficient de mici; pentru a nu ocupa prea mult spaiu din pagin: Aceste. dimen-siuni sunt avantajoase i din alt punct de vedere: butoanele mici pot fi i ncrcate mai uor. Calea cea mai simpl spre asemenea butoane este apelarea la programul share-ware Paintshop Pro, care deine funcia Buttonize. ns aceast funcie trebuie exploatat cu grij. Deschidei n Paintshop Pro un nou document grafic cu 16,7 milioane de cu-lori cu l imea de I00 de pixeli i nl-imea de 40 de pixeli. Fundalul rmne alb. Mrii imaginea cu ajutorul funciei de zoom pentru a poziiona mai uor textul.Dai un clic pe butonul de text i selectai un font oarecare, de 12 puncte, bold. Introducei textul Home, dai un clic pe OK i plasai scrisul n mijlocul noului buton. Deoarece textul este nc marcat, apsai combinaia de taste [CTRL]+[D] pentru a elimina marcajul. Selectai apoi Image - Effects - But-tonize. Pentru Height este indicat o valoare cuprins ntre 15 i 20, atunci cnd este activat funcia de Transparent Edge. Solid Edge nu arat la fel de bine. Dar dac totui dorii s o folosi i, stabi-li i pentru Height o valoare mai mic, ntre 5 i 10. Dup confirmarea cu OK, noul buton este gata. Salvai-1 ca fi ier JPG. Apoi pentru ca timpul necesar ncrcrii acestei imagini s fie minim folosi i un program pentru optimizare JPEG, cum ar fi JPEG Optimizer. n documentul HTML (WELCOME. HTML) legai grafica de hyperlink dup cum urmeaz: Cu ajutorul func-iei Buttonize din Paintshop Pro pu-tei desena rapid butoane pentru homepage-ul dumneavoastr. Pentru orice even-tualitate salva i separat un buton neinscripionat. Parametrul border=0 evit afiarea marginii albastre inestetice, care sugerea-z

faptul c respectiva grafic reprezint un link. Butoane cu umbr. Rmn n con-tinuare la mod umbrele poziionate n spatele butoanelor. Cu puin ndem-nare putei desena chiar dumneavoastr aceste elemente de navigare de efect. i de aceast dat putei apela la Paintshop Pro. Deschidei o imagine nou, avnd dimensiunea de 400x400 de pixeli. Pentru prima ncercare folosi i albul ca i cu-loare de fundal i 16,7 milioane de culori. Desenai un dreptunghi n col ul din stnga sus al ferestrei. Atenie ca funcia de fill s fie activat i s fie destul spaiu pentru un al doilea dreptunghi de aceleai dimensiuni. Marcai apoi dreptunghiul cu Magic Wand, care apare ca o baghet n bara de simboluri. Tolerance i Feather trebuie s aib valoarea 0. Cu [Ctrl]+[C] i [Ctrl]+[E] inserai o copie a dreptunghiului n spaiul liber al imaginii. Colorai noul dreptunghi cu gri deschis cu ajutorul funciei Flood-Fill. Aceasta este reprezentat n bara de sim-boluri ca o cutie de conserve stilizat . Activai apoi shortcut-ul [CTRL]+[D], pentru a elimina marcajul. Da i din nou un clic pe bagheta ma-gic. De aceast dat Feather va obine valoarea 10. n momentul n care dai un clic pe dreptunghi, Paintshop Pro va de-sena un cadru de marcare. Apela i de cinci ori consecutiv punctul de meniu Image - Blur - Blur More. n acest fel finisa i marginile umbrei. Marcai din nou primul dreptunghi cu bagheta magic . Feather are valoarea 0. Tragei acest dreptunghi peste umbra sa. Decupai butonul obinut i salvai-1 ca JPG. Bineneles c acum putei inscrip-iona butonul, salvndu-1 de fiecare dat sub un alt nume. Nu tergei butonul gol (fr inscripionare), astfel nct s-1 pu-tei apela pentru orice fel de modificare. 3. Bar de navigare dintr-o bucat Bara de navigare este compus din mai multe grafice individuale, care sunt plasate unul lng cellalt fr spaiu ntre ele. Pentru aceasta, desenai bara complet pe care includei inscripio-nrile adecvate. Apoi mprii imaginea n componente i salvai-le. n docu-mentul web integrai apoi graficele dup cum urmeaz: Rolul esenial l joac aici tag-ul nobr. Acesta mpiedic ruperea rndurilor, chiar i atunci cnd fereastra browserului este mai ngust dect bara cu butoane. n afar de aceasta, nu este voie s se rup rndul ntre hyperlink-uri n codul surs. n caz contrar, browserul include un spa-iu ntre diferitele imagini. O variant alternativ este includerea imaginilor ntr-un tabel. Acest lucru are acelai efect optic, dar ofer mai multe posibilit i.

Referat luat de pe www.e-referate.ro Webmaster : Dan Dodita