Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Curs Web Design

    Încărcat de

    eryk92
    12 vizualizări6 pagini
    cum sa creezi un site

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    cum sa creezi un site

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    12 vizualizări6 pagini

    Curs Web Design

    Încărcat de

    eryk92
    cum sa creezi un site

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 6

    www.tubefun4.

    com

    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 dorii s introducei frame-uri n homepage, trebuie s lmurii cteva lucruri: n ce scop utilizai frame-urile? Cte frame-uri sunt necesare? Cum se mpart paginile? Apoi luai o hrtie i un creion. Pe o foaie A4 proiectai n mare mprirea paginii. Liniile nu trebuie s fie poziionate la milimetru, dar aceast schi v ajut s avei o imagine asupra structurii paginii. Schiai n rame i coninutul indicai bara de navigare i includei imaginile. Nu facei economie de timp lucrai pn cnd suntei mulumii de proiect. Pentru c n momentul n care ncepei cu realizarea frameurilor, eventualele modificri vor duce la pierdere de vreme. ncepe apoi transpunerea n practic. 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. Salvai 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> . i <body.b.gcolor=green> Aceste pagini-schi v ajut la construirea setului de frame-uri i permit verificarea mpririi. Coninutul propriu-zis va putea fi alctui ulterior. 2.mprirea setului de frame-uri Tag-ul html<frameset> este rspunztor pentru frame-uri. Determinani 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 virgul 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 procente. n locul procentajului putei indica dimensiunile i cu valori n pixeli. O poziie deosebit ocup caracterul *, anume acesta semnific: ocup restul ferestrei. 3.Drumul spre primul frameset Cu ajutorul unei valori n pixeli, putei stabili n partea dreapt o coloan fix pentru bara de navigare, iar celei de a doua coloane i atribuii 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 rmne pentru coloana 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 cadrul primului test vei observa i avantajul indicrii valorilor n pixeli, atunci cnd dorii s mrii sau s micorai fereastra browserului: n timp ce cadrul din dreapta se modific odat cu dimensiunea ferestrei browserului, cel din stnga rmne mereu la fel. 4.ncastrarea frameset-urilor Pentru a submpri fereastra browserului att orizontal ct i vertical, trebuie s ncastrai dou frame-uri unul ntr-altul. Schia, pe care ai realizat-o iniial, va fi

    www.tubefun4.com acum de folos. Pentru c aici putei estima ct spaiu necesit fiecare cadru. n exemplul de fa, coloana din stnga va avea o lime de 160 de pixeli, iar bara de navigare din partea de sus a ferestrei va avea o nlime 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 frameurile invers i realizai iniial mprirea orizontal i doar apoi cea vertical. Salvai aceast definiie de frameset sub numele de frame2.html. Observai diferenele 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 deranjante i inestetice. Aceste borduri pot fi ndeprtate cu ajutorul parametrului suplimentar border=0: <fra~set rows="70, *" bordez=0> Important: acest parametru funcioneaz numai n cazul frameset-urilor ncastrate i numai n prima indicaie frameset. n toate celelalte tag-uri frameset, border nu are nici un efect. Ambele versiuni actuale de Navigator i Explorer recunosc fr probleme parametrul border. 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, *" border=Oframeborder=0'framespacing=0> framespacing stabilete n Internet Explorer distana dintre cadre, frameborder este analog cu border n browserele 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. 6.Definirea distanelor fa de margini n cazul unui layout foarte exact, sunt deranjante distanele prea mari fa de margini. Browserele include automat asemenea distanri. Prin intermediul a doi parametri pentru tag-ul frame, avei posibilitatea de a stabili valoarea exact a acestor margini: <frame src="cadru3.html" name="continut" marginwidth=0 marginheight=0> marginwidth stabilete distana fa de marginile laterale. n cazul valorii 0, textul va ncepe de la marginea paginii. Marginwidth 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 rmne 5 pixeli n Navigator i 4 n Explorer. Folosii aceste indicaii pentru margini 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 avantaj 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, stabilii 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 frameurile din partea de jos s poat fi deplasate, 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 ntotdeauna - chiar i atunci cnd coninutul ncape n frame. Opiunea presetat n browsere este scrolling=auto, ceea ce nseamn c barele de navigare apar numai atunci cnd sunt necesare.

    www.tubefun4.com 8.Link-uri spre frame-uri Urmeaz partea complicat: trimiterile. Acestea trebuie stabilite cu mare atenie. Astfel, pot fi plasate cteva linkuri n cadru l.html, care se vor rsfrnge 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 stabilete unde va fi ncrcat coninutul link-ului selectat. Aici intervin numele care au fost atribuite n definirea frameului. Dac acestea se grupeaz n parametrul target, documentul aferent linkului va aprea exact acolo unde trebuie. Pe lng numele stabilite de dumneavoastr pentru frameuri, exist i cteva valori speciale. _self ncarc fiierul din spatele link-ului n frameul de unde a fost apelat trimiterea. Documentul precedent dispare din acest cadru, fiind nlocuit 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 indicai un link spre un site web extern. _parent ncarc documentul n fereastra n care a fost definit anterior frameset-ul. Acesta prezint 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 documentul. 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 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 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. Construcia 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 conin 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 accesat ntotdeauna de pe orice alt pagin. Dac avei mai multe nivele subordonate, este necesar, n plus, un link pentru accesarea nivelului imediat superior. n cazul 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

    www.tubefun4.com

    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, poziionai elementele de navigare n partea de sus i n partea de jos a fiecrui document. 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, includei 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 homepage, la funcia de cutare sau la pagina de feed-back. n partea din stnga se vor afla linkurile 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 arta 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 documentului printr-o linie orizontal. Aici, aceasta este aliniat la stnga prin align=left, iar limea acesteia este limitat la 800 de pixeli prin width=800. 2. Butoane din creaia proprie Butoane fr umbr. Web-designerii cu pretenii la capitolul grafic i deseneaz singuri elementele de navigare. 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. dimensiuni 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 shareware 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 culori cu limea de I00 de pixeli i nlimea 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.

    www.tubefun4.com Selectai apoi Image - Effects - Buttonize. 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 folosii, stabilii pentru Height o valoare mai mic, ntre 5 i 10. Dup confirmarea cu OK, noul buton este gata. Salvai-1 ca fiier JPG. Apoi pentru ca timpul necesar ncrcrii acestei imagini s fie minim folosii un program pentru optimizare JPEG, cum ar fi JPEG Optimizer. n documentul HTML (WELCOME. HTML) legai grafica de hyperlink dup cum urmeaz: Cu ajutorul funciei Buttonize din Paintshop Pro putei desena rapid butoane pentru homepage-ul dumneavoastr. Pentru orice eventualitate salvai separat un buton neinscripionat. Parametrul border=0 evit afiarea marginii albastre inestetice, care sugereaz faptul c respectiva grafic reprezint un link. Butoane cu umbr. Rmn n continuare la mod umbrele poziionate n spatele butoanelor. Cu puin ndemnare 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 folosii albul ca i culoare de fundal i 16,7 milioane de culori. Desenai un dreptunghi n colul 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 simboluri ca o cutie de conserve stilizat. Activai apoi shortcut-ul [CTRL]+[D], pentru a elimina marcajul. Dai din nou un clic pe bagheta magic. De aceast dat Feather va obine valoarea 10. n momentul n care dai un clic pe dreptunghi, Paintshop Pro va desena un cadru de marcare. Apelai de cinci ori consecutiv punctul de meniu Image - Blur - Blur More. n acest fel finisai 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 inscripiona butonul, salvndu-1 de fiecare dat sub un alt nume. Nu tergei butonul gol (fr inscripionare), astfel nct s-1 putei 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 inscripionrile adecvate. Apoi mprii imaginea n componente i salvai-le. n documentul 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 spaiu ntre diferitele imagini.

    O variant alternativ este includerea imaginilor ntr-un tabel. Acest lucru are acelai efect optic, dar ofer mai multe posibiliti. Documentaie: Revista Chip

    www.tubefun4.com

    www.eReferate.ro -Cea mai buna inspiratie

    S-ar putea să vă placă și