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 !te frame-uri sunt nece-sare !um se mpart paginile "poi luai o hrtie i un creion. Pe o foaie "# proiecta i n mare mprirea paginii. $iniile nu trebuie s fie poziio-nate la milimetru, dar aceast schi v a%ut s avei o imagine asupra structurii paginii. &chi ai n rame i coninutul -indicai bara de navigare i includei ima-ginile. 'u 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. &criei - eventual cu 'otepad - trei noi fiiere ()*$ cu urmtorul coninut: +html,+bod- bgcolor.red, cadru /+0bod-,+0html, n locul lui / scriei cifrele de la 1 la 1. &alva i aceste fiiere sub numele de cadrul.html pn la cadru1.html. 2ac dorii, putei schimba indicaia de culoare din al doilea i al treilea fiier, de e3emplu: +bod- bgcolor.-ello4, si +bod- bgcolor.green, "ceste pagini-schi v a%ut la con-struirea setului de frame-uri i permit verificarea mpririi. !oninutul pro-priu-zis va putea fi alctui ulterior. 5.mprirea setului de frame-uri )ag-ul html+frameset, este rspunztor pentru frame-uri. 2eter-minani sunt parametrii ro4s i cols: ro4s mparte fereastra orizontal pe rnduri, iar cols vertical pe coloane. "cestea vor mai obine pe parcurs alte cteva valori. 2e numrul de indicaii desprite prin vir-gul depinde numrul de coloane sau de rnduri. 6ndicaia +frameset.cols.7118, 118, 1187, mparte fereastra bro4serului n trei coloane de dimensiuni egale. !u +frameset ro4s.7198, :987, vei mpri fereastra n dou rnduri. Primul rnd ocup o zecime din nlimea ferestrei, iar cea de a doua :9 de pro-cente. n locul procenta%ului pute i indica -dimensiunile i cu valori n pi3eli. ; po-zi ie deosebit ocup caracterul <, anume acesta semnific: ocup restul ferestrei. 1.2rumul spre primul frameset !u a%utorul unei valori n pi3eli, pute i stabili n partea dreapt o coloan fi3 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. "ceste valori atribuie primei coloane 1=9 de pi3eli, iar restul r mne pentru coloa-na a doua. Pentru ncrcarea datelor n frame-uri rspunde +frame src...,.

6mportant: atribuii fiecrui frame un nume >name....?, deoarece astfel ve i simplifica organizarea ulterioar. n ca-drul primului test vei observa i avanta-%ul indicrii valorilor n pi3eli, atunci cnd dori i s mrii sau s micorai fereastra bro4serului: n timp ce cadrul din dreapta se modific odat cu dimen-siunea ferestrei bro4serului, cel din stn-ga rmne mereu la fel. #.ncastrarea frameset-urilor Pentru a submpri fereastra bro4se-rului att orizontal ct i vertical, trebuie s ncastrai dou frame-uri unul ntr-altul. &chia, pe care ai realizat-o iniial, va fi acum de folos. Pentru c aici putei esti-ma ct spaiu necesit fiecare cadru. n e3emplul de fa, coloana din stnga va avea o l ime de 1=9 de pi3eli, iar bara de navigare din partea de sus a ferestrei va avea o n lime de @9 de pi3eli. &alvai listing-u1 5 sub numele de frame l.html i verificai la-out-ul cu bro4serul. 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. &al-vai aceast definiie de frameset sub nu-mele de frame5.html. ;bservai diferen-ele pentru reprezentare fa de frame l. html mprirea arat acum cu totul altfel. A.Frame-uri fr rame inestetice 2up ce ai pus pe picioare structura, putei s v ocupai i de partea estetic. 6n ma%oritatea cazurilor, ramele sunt de-ran%ante i inestetice. "ceste borduri pot fi ndeprtate cu a%utorul parametrului suplimentar border.9: +fraBset ro4s.7@9, <7 bordez.9, 6mportant: 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. "mbele ver-siuni actuale de 'avigator i C3plorer recunosc fr probleme parametrul bor-der. Pentru a evita incompatibilitatea fa de versiunile mai vechi de bro4ser, este indicat s e3tindei tag-ul cu indicaii pentru versiuni mai vechi de 6nternet C3plorer: +frameset ro4s.7@9, <7 bor-der.;frameborder.9Dframe-spacing.9, framespacing stabile te n 6nternet C3-plorer distana dintre cadre, frameborder este analog cu border n bro4serele 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. =.2efinirea distanelor fa de margini n cazul unui la-out foarte e3act, sunt deran%ante distanele prea mari fa de margini. Ero4serele include automat ase-menea distan ri. Prin intermediul a doi parametri pentru tag-ul frame, avei posi-bilitatea de a stabili valoarea e3act a acestor margini: +frame src.7cadru1.html7 name.7continut7 margin-4idth.9 marginheight.9, margin4idth stabile te distana fa de marginile laterale. n cazul valorii 9, te3tul va ncepe de la marginea paginii. *argin-4idth este valabil att pentru marginea din dreapta ct i pentru cea din stnga: 'etscape 'avigator va include totui, n ciuda valorii 9, o distan de l pi3el. Pentru marginea de sus i cea de %os este nevoie de parametrul marginheight. Faloarea 9 nu va plasa coninutul lipit de marginea de sus a ferestrei - vor r mne A pi3eli n 'avigator i # n C3plorer.

Folosii aceste indicaii pentru mar-gini doar pentru la-out-ul brut. n cazul n care dorii s poziionai e3act te3te sau imagini, este indicat s folosii tabele. *ai multe amnunte despre tabele vei afla din episodul al treilea al acestui serial. @.$imitri raionale Eordurile prezint i un al doilea avan-ta% n designul frame-urilor: ele pot fi deplasate. n acest fel se pot modifica dimensional ramele din pagin . 2ac dorii s lucrai cu dimensiuni fi3e ale cadrelor, stabili i un parametru noresize. "cest parametru poate fi utilizat pentru fiecare frame n parte. Eineneles, el va avea un efect numai n cazul n care nu apare borde3.9. Pentru ca numai frame-urile din partea de %os s poat fi depla-sate, modificai a doua linie.din frame5. html: +frame src.7cadru5.html7 name.7navsite7 noresize, n cazul n care coninutul este mai mare dect cadrul, va aprea n partea din dreapta o bar de navigare. "ceasta poate fi dezactivat cu scrolling.no. "stfel nu va aprea niciodat respectiva bar. !u scrolling.-es, bara va aprea ntotdeau-na - chiar i atunci cnd coninutul n-cape n frame. ;piunea presetat n bro4sere este scrolling.auto, ceea ce nseamn c barele de navigare apar numai atunci cnd sunt necesare. G.$inH-uri spre frame-uri Irmeaz partea complicat: trimite-rile. "cestea trebuie stabilite cu mare atenie. "stfel, pot fi plasate cteva linH-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-u11. )oate linH-urile se afl aici ntr-un document. 2eterminant este parametrul target. Cl stabile te unde va fi ncrcat coninutul linH-ului selectat. "ici intervin numele care au fost atribuite n definirea frame-ului. 2ac acestea se grupeaz n para-metrul target, documentul aferent linH-ului va aprea e3act acolo unde trebuie. Pe lng numele stabilite de dumnea-voastr pentru frame-uri, e3ist i cteva valori speciale. Jself ncarc fiierul din spatele linH-ului n frame-ul de unde a fost apelat trimiterea. 2ocumentul pre-cedent dispare din acest cadru, fiind nlo-cuit de cel apelat. In bun mecanism de securitate este Jtop. Cl se ramific spre nivelul superior - surferul va a%unge din nou n fereastra bro4serului fr submpriri. Jtop este obligatoriu atunci cnd indica i un linH spre un site 4eb e3tern. Jparent ncarc documentul n fereastra n care a fost definit anterior frameset-ul. "cesta prez-int interes n momentul n care sunt ncastrate mai multe frame-uri, dar designul va fi derutant. ; alt valoare este JblanH. &e leag de o nou fereastr. Ero4serul va deschide o nou instan, unde va reprezenta doc-umentul. 2ar atenieK !ine deschide prea multe ferestre pe desHtop-ul surferuluiL va avea parte numai de critici. 'u doar n 4eb, ci i pe propriul homepage este important navigarea ct mai simpl. (omepage-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

(ome al bro4serului, iar pe viitor vor ocoli pagina dumneavoastr. Principii de baz nainte de a lansa pagini 4eb n reea, trebuie s verificai structura acestora: C3ist 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. !onstruc ia ierarhic amintete pe undeva de structura arborescent a directoarelor de pe harddisH. 2in pagina principal pleac linH-uri ctre nivelul urmtor - ca i spre subdirectoarele de pe harddisH. Fiecare nivel conine o tem proprie i se ramific n alte subrubrici. "cest tip de construcie este necesar, de e3emplu, n momentul n care dorii s introducei n reea o arhiv de te3te. "tenia principal trebuie acordat paginii de intrare. "ceasta trebuie s con-in linH-uri ctre toate celelalte paginiL cnd se lucreaz cu site-uri cu mai multe nivele, este suficient s fie introduse linH-uri ctre urmtorul nivel. i invers, pagina de intrare trebuie s poat fi acce-sat ntotdeauna de pe orice alt pagin. 2ac avei mai multe nivele subordonate, este necesar, n plus, un linH pentru accesarea nivelului imediat superior. n ca-zul site-urilor mai mici, aceast structur ierarhic poate fi modificat. n afar de linH-ul spre homepage, pot fi introduse n conceptul de navigare trimiteri ctre fiecare pagin n parte. Poziionarea elementelor de navigare Clementele de navigare trebuie s fie foarte vizibile i s fie plasate ntotdeauna n aceeai zon a fiecrei pagini. "tunci cnd lucrai cu site-uri bazate pe frame-uri, grupai toate linH-urile ntr-un frame individual. 2ac ns nu utilizai frame-uri, po-ziionai elementele de navigare n partea de sus i n partea de %os a fiec rui docu-ment. Cle 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. "stfel se creeaz o bar de navigare, care va fi recunoscuta de surfer pe fiecare pagin n parte. 2ac avei nevoie de mai multe linH-uri, include i dou bare de navigare: una sus pe pagin i una n partea stng, lng document: Eara de sus va conine linH--urile identice ce sunt incluse pe toate paginile, de e3emplu trimiterea la home-page, la funcia de cutare sau la pagina de feed-bacH. n partea din stnga se vor afla linH-urile spre celelalte documente sau subnivele ale site-ului. 1. 'avigare simpl 2ac v grbii sau apreciai mai mult un design modest, este ideal o bar de navigare cu te3t. (-perlinH-urile vor ar -ta atunci aa cum au fost create n ()*$. 2oar parantezele ptrate evideniaz faptul c este vorba de un element de navigare >aici, pas1? )oate linH-urile acestui e3emplu sunt poziionate pe o singur linie. Muperea

rndurilor n codul surs asigur plasarea unui spaiu ntre linH-uri. Iltimul linH este deosebit de util, fapt pentru care nu ar trebui s lipseasc de pe nici un site. )ag-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. Eara de navigare este separat de restul docu-mentului printr-o linie orizontal. "ici, aceasta este aliniat la stnga prin align.left, iar l imea acesteia este limi-tat la G99 de pi3eli prin 4idth.G99. 5. Eutoane din creaia proprie Eutoane fr umbr. Neb-design-erii cu pretenii la capitolul grafic i deseneaz singuri elementele de navi-gare. n general sunt preferate butoane cu o dimensiune de circa 1993#9 de pi3eli. "cestea au o suprafa destul de mare pentru a ncpea inscripionarea i sunt suficient de miciL pentru a nu ocupa prea mult spaiu din pagin: "ceste. dimen-siuni sunt avanta%oase i din alt punct de vedere: butoanele mici pot fi i ncrcate mai uor. !alea cea mai simpl spre asemenea butoane este apelarea la programul share-4are Paintshop Pro, care deine funcia Euttonize. ns aceast funcie trebuie e3ploatat cu gri% . 2eschidei n Paintshop Pro un nou document grafic cu 1=,@ milioane de cu-lori cu l imea de 699 de pi3eli i nl-imea de #9 de pi3eli. Fundalul rmne alb. *rii imaginea cu a%utorul funciei de zoom pentru a poziiona mai uor te3tul.2ai un clic pe butonul de te3t i selectai un font oarecare, de 15 puncte, bold. 6ntroducei te3tul (ome, dai un clic pe ;O i plasai scrisul n mi%locul noului buton. 2eoarece te3tul este nc marcat, apsai combinaia de taste P!)M$QRP2Q pentru a elimina marca%ul. &electai apoi 6mage - Cffects - Eut-tonize. Pentru (eight este indicat o valoare cuprins ntre 1A i 59, atunci cnd este activat funcia de )ransparent Cdge. &olid Cdge nu arat la fel de bine. 2ar dac totui dorii s o folosi i, stabi-li i pentru (eight o valoare mai mic, ntre A i 19. 2up confirmarea cu ;O, noul buton este gata. &alvai-1 ca fi ier SPT. "poi pentru ca timpul necesar nc rcrii acestei imagini s fie minim folosi i un program pentru optimizare SPCT, cum ar fi SPCT ;ptimizer. n documentul ()*$ >NC$!;*C. ()*$? lega i grafica de h-perlinH dup cum urmeaz: !u a%utorul func-iei Euttonize din Paintshop Pro pu-tei desena rapid butoane pentru homepage-ul dumneavoastr. Pentru orice even-tualitate salva i separat un buton neinscripionat. Parametrul border.9 evit afiarea marginii albastre inestetice, care sugerea-z faptul c respectiva grafic reprezint un linH. Eutoane cu umbr. Mmn n con-tinuare la mod umbrele poziionate n spatele butoanelor. !u puin ndem-nare putei desena chiar dumneavoastr aceste elemente de navigare de efect. i de aceast dat putei apela la Paintshop Pro.

2eschidei o imagine nou, avnd dimensiunea de #993#99 de pi3eli. Pentru prima ncercare folosi i albul ca i cu-loare de fundal i 1=,@ milioane de culori. 2esenai un dreptunghi n col ul din stnga sus al ferestrei. "tenie ca funcia de fill s fie activat i s fie destul spaiu pentru un al doilea dreptunghi de aceleai dimensiuni. *arcai apoi dreptunghiul cu *agic Nand, care apare ca o baghet n bara de simboluri. )olerance i Feather trebuie s aib valoarea 9. !u P!trlQRP!Q i P!trlQRPCQ inserai o copie a dreptunghiului n spaiul liber al imaginii. !olorai noul dreptunghi cu gri deschis cu a%utorul funciei Flood-Fill. "ceasta este reprezentat n bara de sim-boluri ca o cutie de conserve stilizat . "ctivai apoi shortcut-ul P!)M$QRP2Q, pentru a elimina marca%ul. 2a i din nou un clic pe bagheta ma-gic. 2e aceast dat Feather va obine valoarea 19. n momentul n care dai un clic pe dreptunghi, Paintshop Pro va de-sena un cadru de marcare. "pela i de cinci ori consecutiv punctul de meniu 6mage - Elur - Elur *ore. n acest fel finisa i marginile umbrei. *arcai din nou primul dreptunghi cu bagheta magic . Feather are valoarea 9. )ragei acest dreptunghi peste umbra sa. 2ecupai butonul obinut i salvai-1 ca SPT. Eineneles c acum putei inscrip-iona butonul, salvndu-1 de fiecare dat sub un alt nume. 'u tergei butonul gol >fr inscripionare?, astfel nct s-1 pu-tei apela pentru orice fel de modificare. 1. Ear de navigare dintr-o bucat Eara 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. "poi mprii imaginea n componente i salvai-le. n docu-mentul 4eb integrai apoi graficele dup cum urmeaz: Molul esenial l %oac aici tag-ul nobr. "cesta mpiedic ruperea rndurilor, chiar i atunci cnd fereastra bro4serului este mai ngust dect bara cu butoane. n afar de aceasta, nu este voie s se rup rndul ntre h-perlinH-uri n codul surs. n caz contrar, bro4serul include un spa-iu ntre diferitele imagini. ; variant alternativ este includerea imaginilor ntr-un tabel. "cest lucru are acelai efect optic, dar ofer mai multe posibilit i.