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 poziionate 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 imaginile. 'u facei economie de timp -lucrai pn cnd suntei mulumii de proiect. Pentru c n momentul n care ncepei cu realizarea frame-urilor, eventualele modific ri vor duce la pierdere de vreme. ncepe apoi transpunerea n practic. &criei - eventual cu 'otepad - trei noi fi iere ()*$ 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 construirea setului de frame-uri i permit verificarea mpririi. !oninutul propriu-zis va putea fi alctui ulterior. 5.mprirea setului de frame-uri )ag-ul html+frameset, este rspunztor pentru frame-uri. 2eterminani 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 virgul 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. ; pozi 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 coloana 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 dimensiunea ferestrei bro4serului, cel din stnga rmne mereu la fel. #.ncastrarea frameset-urilor Pentru a submpri fereastra bro4serului 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 estima 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. &alvai aceast definiie de frameset sub nu-mele de frame5.html. ;bservai diferenele 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 deran%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 funcioneaz numai n cazul frameseturilor n-castrate i numai n prima indica ie frameset. n toate celelalte tag-uri frameset, border nu are nici un efect. "mbele versiuni actuale de 'avigator i C3plorer recunosc fr probleme parametrul border. Pentru a evita incompatibilitatea fa de versiunile mai vechi de bro4ser, este indicat s e3tindei tag-ul cu indica ii pentru versiuni mai vechi de 6nternet C3plorer: +frameset ro4s.7@9, <7 border.;frameborder.9Dframe-spacing.9, framespacing stabilete n 6nternet C3plorer distana dintre cadre, frameborder este analog cu border n bro4serele mai vechi. n cazul n care n tag-ul frameset utilizai 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 posibilitatea 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 margini 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 avanta% 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 deplasate, 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 ntotdeauna - 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 cadrul .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 dumneavoastr 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 precedent dispare din acest cadru, fiind nlocuit 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 prezint 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 documentul. 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 navigare 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 accesat ntotdeauna de pe orice alt pagin. 2ac avei mai multe nivele subordonate, este necesar, n plus, un linH pentru accesarea nivelului imediat superior. n cazul 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, poziionai elementele de navigare n partea de sus i n partea de %os a fiecrui document. 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 documentului printr-o linie orizontal. "ici, aceasta este aliniat la stnga prin align.left, iar l imea acesteia este limitat la G99 de pi3eli prin 4idth.G99. 5. Eutoane din creaia proprie Eutoane fr umbr. Neb-designerii cu pretenii la capitolul grafic i deseneaz singuri elementele de navigare. 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. dimensiuni 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 share4are 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 limea de 699 de pi3eli i nlimea 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 - Eutonize. 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 funciei Euttonize din Paintshop Pro putei desena rapid butoane pentru homepageul dumneavoastr. Pentru orice eventualitate salva i separat un buton neinscripionat. Parametrul border.9 evit afiarea marginii albastre inestetice, care sugereaz

faptul c respectiva grafic reprezint un linH. Eutoane cu umbr. Mmn n continuare la mod umbrele poziionate n spatele butoanelor. !u puin ndemnare 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 culoare 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 simboluri 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 magic. 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 inscripiona butonul, salvndu-1 de fiecare dat sub un alt nume. 'u tergei butonul gol >fr inscripionare?, astfel nct s-l putei 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 documentul 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 spaiu ntre diferitele imagini. ; variant alternativ este includerea imaginilor ntr-un tabel. "cest lucru are acelai efect optic, dar ofer mai multe posibilit i.