Scribd Logo
Upload

Welcome to Scribd!

  • Web DesignWeb DesignWeb DesignWeb DesignWeb Design

    Uploaded by

    Emilushauoiu
    50 views6 pages
    Web DesignWeb DesignWeb DesignWeb DesignWeb Design

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web DesignWeb DesignWeb DesignWeb DesignWeb Design

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    50 views6 pages

    Web DesignWeb DesignWeb DesignWeb DesignWeb Design

    Uploaded by

    Emilushauoiu
    Web DesignWeb DesignWeb DesignWeb DesignWeb Design

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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

    You might also like