Web design Frame-urile reprezintă elementul potrivit pentru designeri atunci când doresc ca homepage-ul să aibă o structură

corespunzătoare, iar navigarea să fie pe măsură. 1.Planificare şi pregătire În cazul în care dori ţi să introduceţi frame-uri în homepage, trebuie să lămuriţi câteva lucruri: În ce scop utiliza ţi frame-urile !âte frame-uri sunt nece-sare !um se împart paginile "poi luaţi o hârtie şi un creion. Pe o foaie "# proiecta ţi în mare împărţirea paginii. $iniile nu trebuie să fie poziţio-nate la milimetru, dar această schiţă vă a%ută să aveţi o imagine asupra structurii paginii. &chi ţaţi în rame şi conţinutul -indicaţi bara de navigare şi includeţi ima-ginile. 'u faceţi economie de timp -lucraţi până când sunteţi mulţumiţi de proiect. Pentru că în momentul în care începeţi cu realizarea frame-urilor, even-tualele modificări vor duce la pierdere de vreme. Începe apoi transpunerea în prac-tică. &crieţi - eventual cu 'otepad - trei noi fişiere ()*$ cu următorul conţinut: +html,+bod- bgcolor.red, cadru /+0bod-,+0html, În locul lui / scrieţi cifrele de la 1 la 1. &alva ţi aceste fişiere sub numele de cadrul.html până la cadru1.html. 2acă doriţi, puteţi schimba indicaţia de culoare din al doilea şi al treilea fişier, 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 împărţirii. !onţinutul pro-priu-zis va putea fi alcătui ulterior. 5.Împărţirea setului de frame-uri )ag-ul html+frameset, este răspunzător pentru frame-uri. 2eter-minanţi sunt parametrii ro4s şi cols: ro4s împarte fereastra orizontal pe rânduri, iar cols vertical pe coloane. "cestea vor mai obţine pe parcurs alte câteva valori. 2e numărul de indicaţii despărţite prin vir-gulă depinde numărul de coloane sau de rânduri. 6ndicaţia +frameset.cols.7118, 118, 1187, împarte fereastra bro4serului în trei coloane de dimensiuni egale. !u +frameset ro4s.7198, :987, veţi împărţi fereastra în două rânduri. Primul rând ocupă o zecime din înălţimea 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 spaţiului ferestrei.Pentru un prim test introduceţi listing-ul 1 şi salvaţi-l sub numele de frame.html. "ceste valori atribuie primei coloane 1=9 de pi3eli, iar restul r ămâne pentru coloa-na a doua. Pentru încărcarea datelor în frame-uri răspunde +frame src...,.

cel din stân-ga rămâne mereu la fel.9 marginheight. A. <7 bor-der. =. în ciuda valorii 9.Încastrarea frameset-urilor Pentru a subîmpărţi fereastra bro4se-rului atât orizontal cât şi vertical. #.Frame-uri fără rame inestetice 2upă ce aţi pus pe picioare structura.frameborder. . În ca-drul primului test veţi observa şi avanta-%ul indicării valorilor în pi3eli. Pentru marginea de sus şi cea de %os este nevoie de parametrul marginheight. puteţi să vă ocupaţi şi de partea estetică. trebuie să încastraţi două frame-uri unul într-altul. "ceste borduri pot fi îndepărtate cu a%utorul parametrului suplimentar border. framespacing stabile şte în 6nternet C3-plorer distanţa dintre cadre..?. ramele sunt de-ran%ante şi inestetice. În cazul valorii 9. va fi acum de folos. aveţi posi-bilitatea de a stabili valoarea e3act ă a acestor margini: +frame src. 6n ma%oritatea cazurilor.. *argin-4idth este valabil atât pentru marginea din dreapta cât şi pentru cea din stânga: 'etscape 'avigator va include totuşi. Pentru că aici puteţi esti-ma cât spaţiu necesită fiecare cadru.7cadru1. te3tul va începe de la marginea paginii. atunci când dori ţi să măriţi sau să micşoraţi fereastra bro4serului: în timp ce cadrul din dreapta se modific ă odată cu dimen-siunea ferestrei bro4serului. html împărţirea arată acum cu totul altfel.. încastraţi frame-urile invers şi realizaţi iniţial împărţirea orizontală şi doar apoi cea verticală.7@9. border nu are nici un efect. frameborder este analog cu border în bro4serele mai vechi.html şi verificaţi la-out-ul cu bro4serul. coloana din stânga va avea o l ăţime de 1=9 de pi3eli.html. În toate celelalte tag-uri frameset. În cazul în care în tag-ul frameset utiliza ţi ambii parametri. Ero4serele include automat ase-menea distan ţări.9.vor r ămâne A pi3eli în 'avigator şi # în C3plorer. <7 bordez. Prin intermediul a doi parametri pentru tag-ul frame. trebuie să atribuiţi aceleaşi valori pentru aceste indicaţii.html7 name.9.9: +fraBset ro4s. este indicat s ă e3tindeţi tag-ul cu indicaţii pentru versiuni mai vechi de 6nternet C3plorer: +frameset ro4s.6mportant: atribuiţi fiecărui frame un nume >name. Faloarea 9 nu va plasa conţinutul lipit de marginea de sus a ferestrei . &chiţa. Pentru a evita incompatibilitatea faţă de versiunile mai vechi de bro4ser. 6mportant: acest parametru funcţio-nează numai în cazul frameseturilor în-castrate şi numai în prima indicaţie frame-set. sunt deran%ante distanţele prea mari faţă de margini. &alvaţi listing-u1 5 sub numele de frame l. pentru a defini culoarea frame-urilor.7continut7 margin-4idth. o distanţă de l pi3el. &al-vaţi această definiţie de frameset sub nu-mele de frame5.7@9. deoarece astfel ve ţi simplifica organizarea ulterioară. "mbele ver-siuni actuale de 'avigator şi C3plorer recunosc fără probleme parametrul bor-der. . În cazul în care doriţi ca bara de navigare să ocupe toată lăţimea ferestrei..9Dframe-spacing.bservaţi diferen-ţele pentru reprezentare faţă de frame l.9. margin4idth stabile şte distanţa faţă de marginile laterale. iar bara de navigare din partea de sus a ferestrei va avea o în ălţime de @9 de pi3eli.2efinirea distanţelor faţă de margini În cazul unui la-out foarte e3act. În e3emplul de faţă. pe care aţi realizat-o iniţial.

no. 2ar atenţieK !ine deschide prea multe ferestre pe desHtop-ul surferuluiL va avea parte numai de critici. modificaţi a doua linie. În cazul în care conţinutul este mai mare decât cadrul.pţiunea presetată în bro4sere este scrolling.html cu listing-u11. Jparent încarcă documentul în fereastra în care a fost definit anterior frameset-ul. pot fi plasate câteva linH-uri în cadru l. "stfel. *ai multe amănunte despre tabele veţi afla din episodul al treilea al acestui serial.-es.chiar şi atunci când conţinutul în-cape în frame. Cl stabile şte unde va fi încărcat conţinutul linH-ului selectat. el va avea un efect numai în cazul în care nu apare borde3.Folosiţi aceste indicaţii pentru mar-gini doar pentru la-out-ul brut. Pe lângă numele stabilite de dumnea-voastră pentru frame-uri. 2acă doriţi să lucraţi cu dimensiuni fi3e ale cadrelor. În acest fel se pot modifica dimensional ramele din pagin ă. fiind înlo-cuit de cel apelat. . Cl se ramific ă spre nivelul superior . Ero4serul va deschide o nouă instanţă. In bun mecanism de securitate este Jtop. ci şi pe propriul homepage este importantă navigarea cât mai simplă.html7 name. Jself încarcă fişierul din spatele linH-ului în frame-ul de unde a fost apelat ă trimiterea. e3istă şi câteva valori speciale. Pentru că. (omepage-urile cu mai mult de două documente necesită o navi-gare bine pusă la punct. Pentru aceasta. "cestea trebuie stabilite cu mare atenţie. atunci ei vor apăsa cu siguranţă butonul . nemaigăsind cuprinsul sau homepage-ul. dar designul va fi derutant. &e leagă de o nouă fereastră.9. . vom înlocui documentul-schi ţă iniţial cadru l. unde va reprezenta doc-umentul. 2ocumentul pre-cedent dispare din acest cadru. Pentru ca numai frame-urile din partea de %os să poată fi depla-sate. 2acă acestea se grupează în para-metrul target. 2eterminant este parametrul target. altă valoare este JblanH. "stfel nu va apărea niciodată respectiva bară. care se vor r ăsfrânge asupra navigării prin site.$imitări raţionale Eordurile prezintă şi un al doilea avan-ta% în designul frame-urilor: ele pot fi deplasate. "ceasta poate fi dezactivată cu scrolling.din frame5. 'u doar în 4eb.html.7cadru5.$inH-uri spre frame-uri Irmează partea complicată: trimite-rile. G. ceea ce înseamnă că barele de navigare apar numai atunci când sunt necesare. bara va apărea întotdeau-na . "cesta prez-intă interes în momentul în care sunt încastrate mai multe frame-uri. !u scrolling. va apărea în partea din dreapta o bară de navigare. html: +frame src. Eineînţeles. stabili ţi un parametru noresize.7navsite7 noresize. )oate linH-urile se afl ă aici într-un document. În cazul în care doriţi să poziţionaţi e3act te3te sau imagini. @. documentul aferent linH-ului va apărea e3act acolo unde trebuie. Jtop este obligatoriu atunci când indica ţi un linH spre un site 4eb e3tern. "ici intervin numele care au fost atribuite în definirea frame-ului.auto. dacă cititorii se rătăcesc prin paginile dumneavoastră. "cest parametru poate fi utilizat pentru fiecare frame în parte. este indicat să folosiţi tabele.surferul va a%unge din nou în fereastra bro4serului fără subîmpărţiri.

Muperea .(ome al bro4serului. În acest sens. 2in pagina principală pleacă linH-uri către nivelul următor . pas1? )oate linH-urile acestui e3emplu sunt poziţionate pe o singură linie. este ideal ă o bară de navigare cu te3t. pagina de intrare trebuie să poată fi acce-sată întotdeauna de pe orice alt ă pagină. În ca-zul site-urilor mai mici. este necesar. o culoare sau o grafică deosebită. În cazul structurilor în formă de stea plasaţi pagina de intrare în centrul atenţiei. care va fi recunoscuta de surfer pe fiecare pagină în parte. 2oar parantezele pătrate evidenţiază faptul că este vorba de un element de navigare >aici. este suficient să fie introduse linH-uri către următorul nivel. În partea din stânga se vor afla linH-urile spre celelalte documente sau subnivele ale site-ului. "cest tip de construcţie este necesar. un linH pentru accesarea nivelului imediat superior. "stfel se creează o bară de navigare. Şi invers. (-perlinH-urile vor ar ă-ta atunci aşa cum au fost create în ()*$. iar pe viitor vor ocoli pagina dumneavoastră. 2acă însă nu utilizaţi frame-uri. de e3emplu trimiterea la home-page. po-ziţionaţi elementele de navigare în partea de sus şi în partea de %os a fiec ărui docu-ment. include ţi două bare de navigare: una sus pe pagină şi una în partea stângă. Poziţionarea elementelor de navigare Clementele de navigare trebuie să fie foarte vizibile şi să fie plasate întotdeauna în aceeaşi zonă a fiecărei pagini. "tunci când lucraţi cu site-uri bazate pe frame-uri. aceast ă structură ierarhică poate fi modificată. 2acă aveţi nevoie de mai multe linH-uri. la funcţia de căutare sau la pagina de feed-bacH. În afară de linH-ul spre homepage. Cle trebuie să fie evidenţiate din punct de vedere al aspectului faţă de conţinut. în plus. de la aceasta plecând apoi toate celelalte pagini. Fiecare nivel conţine o temă proprie şi se ramifică în alte subrubrici. Principii de bază Înainte de a lansa pagini 4eb în reţea. "tenţia principală trebuie acordată paginii de intrare.ca şi spre subdirectoarele de pe harddisH. !onstruc ţia ierarhică aminteşte pe undeva de structura arborescentă a directoarelor de pe harddisH. "ceasta trebuie s ă con-ţină linH-uri către toate celelalte paginiL când se lucrează cu site-uri cu mai multe nivele. pot fi introduse în conceptul de navigare trimiteri către fiecare pagină în parte. 2acă aveţi mai multe nivele subordonate. grupaţi toate linH-urile într-un frame individual. 'avigare simplă 2acă vă grăbiţi sau apreciaţi mai mult un design modest. lângă document: Eara de sus va conţine linH--urile identice ce sunt incluse pe toate paginile. de e3emplu. în funcţie de gust şi talent este suficient dacă includeţi o linie orizontal ă. 1. în momentul în care doriţi să introduceţi în reţea o arhivă de te3te. trebuie să verificaţi structura acestora: C3istă două variante: o structură în formă de stea pentru site-uri mici şi o construcţie ierarhică pentru ofertele ample.

Eutoane cu umbră.2aţi un clic pe butonul de te3t şi selectaţi un font oarecare.left. Fundalul rămâne alb. În documentul ()*$ >NC$!. În acest fel. Şi de această dată puteţi apela la Paintshop Pro. Eara de navigare este separată de restul docu-mentului printr-o linie orizontală.@ milioane de cu-lori cu l ăţimea de 699 de pi3eli şi înăl-ţimea de #9 de pi3eli. bold. *ăriţi imaginea cu a%utorul funcţiei de zoom pentru a poziţiona mai uşor te3tul. "ici. Pentru (eight este indicat ă o valoare cuprinsă între 1A şi 59.*C. 5. care sugerea-ză faptul că respectiva grafică reprezintă un linH. apăsaţi combinaţia de taste P!)M$QRP2Q pentru a elimina marca%ul. Iltimul linH este deosebit de util. "poi pentru ca timpul necesar înc ărcării acestei imagini să fie minim folosi ţi un program pentru optimizare SPCT. Neb-design-erii cu pretenţii la capitolul grafică îşi desenează singuri elementele de navi-gare. stabi-li ţi pentru (eight o valoare mai mică. ()*$? lega ţi grafica de h-perlinH după cum urmează: !u a%utorul func-ţiei Euttonize din Paintshop Pro pu-teţi desena rapid butoane pentru homepage-ul dumneavoastră. "cestea au o suprafa ţă destul de mare pentru a încăpea inscripţionarea şi sunt suficient de miciL pentru a nu ocupa prea mult spaţiu din pagină: "ceste. 2upă confirmarea cu . Mămân în con-tinuare la modă umbrele poziţionate în spatele butoanelor. Însă această funcţie trebuie e3ploatată cu gri% ă. Parametrul border. 6ntroduceţi te3tul (ome. 2ar dacă totuşi doriţi să o folosi ţi. cum ar fi SPCT . surferul are posibilitatea de a vi se adresa direct de pe pagin ă. fără să caute adresa dumneavoastră.9 evită afişarea marginii albastre inestetice.G99.Eut-tonize. 2eschideţi în Paintshop Pro un nou document grafic cu 1=. aceasta este aliniat ă la stânga prin align. !alea cea mai simplă spre asemenea butoane este apelarea la programul share-4are Paintshop Pro.Cffects . . fapt pentru care nu ar trebui s ă lipsească de pe nici un site. unde este completat ă adresa dumneavoastră în câmpul adresantului. Pentru orice even-tualitate salva ţi separat un buton neinscripţionat. care deţine funcţia Euttonize. &alvaţi-1 ca fi şier SPT. noul buton este gata.O. &electaţi apoi 6mage . de 15 puncte. Eutoane din creaţia proprie Eutoane fără umbră. daţi un clic pe . &olid Cdge nu arată la fel de bine. )ag-ul mailto apelează clientul de e-mail al surferului. 2eoarece te3tul este încă marcat. între A şi 19. !u puţină îndemâ-nare puteţi desena chiar dumneavoastră aceste elemente de navigare de efect.rândurilor în codul sursă asigură plasarea unui spaţiu între linH-uri.O şi plasaţi scrisul în mi%locul noului buton. În general sunt preferate butoane cu o dimensiune de circa 1993#9 de pi3eli.ptimizer. iar l ăţimea acesteia este limi-tată la G99 de pi3eli prin 4idth. dimen-siuni sunt avanta%oase şi din alt punct de vedere: butoanele mici pot fi şi încărcate mai uşor. atunci când este activat ă funcţia de )ransparent Cdge.

Paintshop Pro va de-sena un cadru de marcare. desenaţi bara completă pe care includeţi inscripţio-nările adecvate. 2e această dată Feather va obţine valoarea 19. Feather are valoarea 9. variantă alternativă este includerea imaginilor într-un tabel. salvându-1 de fiecare dată sub un alt nume. !u P!trlQRP!Q şi P!trlQRPCQ inseraţi o copie a dreptunghiului în spaţiul liber al imaginii. 2esenaţi un dreptunghi în col ţul din stânga sus al ferestrei.2eschideţi o imagine nouă. *arcaţi din nou primul dreptunghi cu bagheta magic ă . astfel încât să-1 pu-teţi apela pentru orice fel de modificare. nu este voie să se rupă rândul între h-perlinH-uri în codul sursă. "ceasta este reprezentată în bara de sim-boluri ca o cutie de conserve stilizat ă. . În caz contrar. "cesta împiedic ă ruperea rândurilor. Pentru prima încercare folosi ţi albul ca şi cu-loare de fundal şi 1=. pentru a elimina marca%ul. 2a ţi din nou un clic pe bagheta ma-gică. "tenţie ca funcţia de fill să fie activată şi să fie destul spaţiu pentru un al doilea dreptunghi de aceleaşi dimensiuni. având dimensiunea de #993#99 de pi3eli. "poi împărţiţi imaginea în componente şi salvaţi-le. . 'u ştergeţi butonul gol >fără inscripţionare?. Eară de navigare dintr-o bucată Eara de navigare este compusă din mai multe grafice individuale. "ctivaţi apoi shortcut-ul P!)M$QRP2Q. "cest lucru are acelaşi efect optic. Pentru aceasta. "pela ţi de cinci ori consecutiv punctul de meniu 6mage . dar oferă mai multe posibilit ăţi. În acest fel finisa ţi marginile umbrei. În momentul în care daţi un clic pe dreptunghi.Elur *ore. )olerance şi Feather trebuie să aibă valoarea 9. chiar şi atunci când fereastra bro4serului este mai îngustă decât bara cu butoane.@ milioane de culori. !oloraţi noul dreptunghi cu gri deschis cu a%utorul funcţiei Flood-Fill. )rageţi acest dreptunghi peste umbra sa. *arcaţi apoi dreptunghiul cu *agic Nand. Eineînţeles că acum puteţi inscrip-ţiona butonul. bro4serul include un spa-ţiu între diferitele imagini. În docu-mentul 4eb integraţi apoi graficele după cum urmează: Molul esenţial îl %oacă aici tag-ul nobr. 2ecupaţi butonul obţinut şi salvaţi-1 ca SPT. care apare ca o baghetă în bara de simboluri. 1. În afară de aceasta.Elur . care sunt plasate unul lângă celălalt fără spaţiu între ele.