Web design Categoria: Referat Informatica
Descriere: |
|
||
|
|
|||
|
1 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ămu-riţi cāteva lucruri: Īn ce scop utilizaţi frame-urile? Cāte frame-uri sunt nece-sare? Cum se īmpart paginile? Apoi luaţi o hārtie şi un creion. Pe o foaie A4 proiectaţi īn mare īmpărţirea paginii. Liniile nu trebuie să fie poziţio-nate la milimetru, dar această schiţă vă ajută să aveţi o imagine asupra structurii paginii. Schiţaţi īn rame şi conţinutul -indicaţi bara de navigare şi includeţi ima-ginile. Nu 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ă. Scrieţi - eventual cu Notepad - trei noi fişiere HTML cu următorul conţinut: <html><body bgcolor=red> cadru X</body></html> Īn locul lui X scrieţi cifrele de la 1 la 3. Salvaţi aceste fişiere sub numele de cadrul.html pānă la cadru3.html. Dacă doriţi, puteţi schimba indicaţia de culoare din al doilea şi al treilea fişier, de exemplu: <body bgcolor=yellow> si <body bgcolor=green> Aceste pagini-schiţă vă ajută la con-struirea setului de frame-uri şi permit verificarea īmpărţirii. Conţinutul pro-priu-zis va putea fi alcătui ulterior. 2.Īmpărţirea setului de frame-uri Tag-ul html<frameset> este răspunzător pentru frame-uri. Deter-minanţi sunt parametrii rows şi cols: rows īmparte fereastra orizontal pe rānduri, iar cols vertical pe coloane. Acestea vor mai obţine pe parcurs alte cāteva valori. De numărul de indicaţii despărţite prin vir-gulă depinde numărul de coloane sau de rānduri. Indicaţia <frameset.cols="33%, 33%, 33%"> īmparte fereastra browserului īn trei coloane de dimensiuni egale. Cu <frameset rows="10%, 90%"> 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 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 spaţiului ferestrei.Pentru un prim test introduceţi listing-ul 1 şi salvaţi-l sub numele de frame.html. Aceste valori atribuie primei coloane 160 de pixeli, iar restul rămāne pentru coloa-na a doua. Pentru īncărcarea datelor īn frame-uri răspunde <frame src...>. Important: atribuiţi fiecărui frame un nume (name=...), deoarece astfel veţi simplifica organizarea ulterioară. Īn ca-drul primului test veţi observa şi avanta-jul indicării valorilor īn pixeli, atunci cānd doriţi să măriţi sau să micşoraţi fereastra browserului: īn timp ce cadrul din dreapta se modifică odată cu dimen-siunea ferestrei browserului, cel din stān-ga rămāne mereu la fel. 4.Īncastrarea frameset-urilor Pentru a subīmpărţi fereastra browse-rului atāt orizontal cāt şi vertical, trebuie să īncastraţi două frame-uri unul īntr-altul. Schiţa, pe care aţi realizat-o iniţial, va fi acum de folos. Pentru că aici puteţi esti-ma cāt spaţiu necesită fiecare cadru. Īn exemplul de faţă, coloana din stānga va avea o lăţime de 160 de pixeli, iar bara de navigare din partea de sus a ferestrei va avea o īnălţime de 70 de pixeli. Salvaţi listing-u1 2 sub numele de frame l.html şi verificaţi layout-ul cu browserul. Īn cazul īn care doriţi ca bara de navigare să ocupe toată lăţimea ferestrei, īncastraţi frame-urile invers şi realizaţi iniţial īmpărţirea orizontală şi doar apoi cea verticală. Sal-vaţi această definiţie de frameset sub nu-mele de frame2.html. Observaţi diferen-ţele pentru reprezentare faţă de frame l. html - īmpărţirea arată acum cu totul altfel. 5.Frame-uri fără rame inestetice După ce aţi pus pe picioare structura, puteţi să vă ocupaţi şi de partea estetică. In majoritatea cazurilor, ramele sunt de-ranjante şi inestetice. Aceste borduri pot fi īndepărtate cu ajutorul parametrului suplimentar border=0: <fra~set rows="70, *" bordez=0> Important: acest parametru funcţio-nează numai īn cazul frameset-urilor īn-castrate şi numai īn prima indicaţie frame-set. Īn toate celelalte tag-uri frameset, border nu are nici un efect. Ambele ver-siuni actuale de Navigator şi Explorer recunosc fără probleme parametrul bor-der. Pentru a evita incompatibilitatea faţă de versiunile mai vechi de browser, este indicat să extindeţi tag-ul cu indicaţii pentru versiuni mai vechi de Internet Explorer: <frameset rows="70, *" bor-der=Oframeborder=0'frame-spacing=0> framespacing stabileşte īn Internet Ex-plorer distanţa 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ă atribuiţi aceleaşi valori pentru aceste indicaţii. 6.Definirea distanţelor faţă de margini Īn cazul unui layout foarte exact, sunt deranjante distanţele prea mari faţă de margini. Browserele include automat ase-menea distanţări. Prin intermediul a doi parametri pentru tag-ul frame, aveţi posi-bilitatea de a stabili valoarea exactă a acestor margini: <frame src="cadru3.html" name="continut" margin-width=0 marginheight=0> marginwidth stabileşte distanţa faţă de marginile laterale. Īn cazul valorii 0, textul va īncepe de la marginea paginii. Margin-width este valabil atāt pentru marginea din dreapta cāt şi pentru cea din stānga: Netscape Navigator va include totuşi, ī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 conţinutul lipit de marginea de sus a ferestrei - vor rămāne 5 pixeli īn Navigator şi 4 īn Explorer. Folosiţi aceste indicaţii pentru mar-gini doar pentru layout-ul brut. Īn cazul īn care doriţi să poziţionaţi exact texte sau imagini, este indicat să folosiţi tabele. Mai multe amănunte despre tabele veţi afla din episodul al treilea al acestui serial. 7.Limitări raţionale 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ă doriţi să lucraţi cu dimensiuni fixe ale cadrelor, stabiliţi un parametru noresize. Acest parametru poate fi utilizat pentru fiecare frame īn parte. Bineīnţeles, 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, modificaţi a doua linie.din frame2. html: <frame src="cadru2.html" name="navsite" noresize> Īn cazul īn care conţinutul este mai mare decāt cadrul, va apărea īn partea din dreapta o bară de navigare. Aceasta poate fi dezactivată cu scrolling=no. Astfel nu va apărea niciodată respectiva bară. Cu scrolling=yes, bara va apărea īntotdeau-na - chiar şi atunci cānd conţinutul īn-cape īn frame. Opţiunea presetată īn browsere este scrolling=auto, ceea ce īnseamnă că barele de navigare apar nu-mai atunci cānd sunt necesare. 8.Link-uri spre frame-uri Urmează partea complicată: trimite-rile. Acestea trebuie stabilite cu mare atenţie. Astfel, pot fi plasate cāteva link-uri īn cadru l.html, care se vor răsfrānge asupra navigării prin site. Pentru aceasta, vom īnlocui documentul-schiţă iniţial ca-dru l.html cu listing-u13. Toate link-urile se află aici īntr-un document. Determinant este parametrul target. El stabileşte unde va fi īncărcat conţinutul 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 apărea exact acolo unde trebuie. Pe lāngă numele stabilite de dumnea-voastră pentru frame-uri, există şi cāteva valori speciale. _self īncarcă fişierul 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 fără subīmpărţiri. _top este obligatoriu atunci cānd 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 atenţie! 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 cāt mai simplă. Homepage-urile cu mai mult de două documente necesită o navi-gare bine pusă la punct. Pentru că, dacă cititorii se rătăcesc prin paginile dumneavoastră, nemaigăsind cuprinsul sau homepage-ul, atunci ei vor apăsa cu siguranţă butonul Home al browserului, iar pe viitor vor ocoli pagina dumneavoastră. Principii de bază Īnainte de a lansa pagini web īn reţea, trebuie să verificaţi structura acestora: Există două variante: o structură īn formă de stea pentru site-uri mici şi o construcţie ierarhică pentru ofertele ample. Īn cazul structurilor īn formă de stea plasaţi pagina de intrare īn centrul atenţiei, de la aceasta plecānd apoi toate celelalte pagini. Construcţia ierarhică aminteşte pe undeva de structura arborescentă a directoarelor de pe harddisk. Din pagina principală pleacă link-uri către nivelul următor - ca şi spre subdirectoarele de pe harddisk. Fiecare nivel conţine o temă proprie şi se ramifică īn alte subrubrici. Acest tip de construcţie este necesar, de exemplu, īn momentul īn care doriţi să introduceţi īn reţea o arhivă de texte. Atenţia principală trebuie acordată paginii de intrare. Aceasta trebuie să con-ţină link-uri către toate celelalte pagini; cānd se lucrează cu site-uri cu mai multe nivele, este suficient să fie introduse link-uri către următorul nivel. Şi invers, pagina de intrare trebuie să poată fi acce-sată īntotdeauna de pe orice altă pagină. Dacă aveţi 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 către fiecare pagină īn parte. 1 Poziţionarea elementelor de navigare Elementele de navigare trebuie să fie foarte vizibile şi să fie plasate īntot-deauna īn aceeaşi zonă a fiecărei pagini. Atunci cānd lucraţi cu site-uri bazate pe frame-uri, grupaţi toate link-urile īntr-un frame individual. Dacă īnsă nu utilizaţi frame-uri, po-ziţionaţi elementele de navigare īn partea de sus şi īn partea de jos a fiecărui docu-ment. Ele trebuie să fie evidenţiate din punct de vedere al aspectului faţă de conţinut. Īn acest sens, īn funcţie de gust şi talent este suficient dacă includeţi 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ă aveţi nevoie de mai multe link-uri, includeţi două bare de navigare: una sus pe pagină şi una īn partea stāngă, lāngă document: Bara de sus va conţine link--urile identice ce sunt incluse pe toate paginile, de exemplu trimiterea la home-page, la funcţia de căutare sau la pagina de feed-back. Īn partea din stānga se vor afla link-urile spre celelalte documente sau subnivele ale site-ului. 1. Navigare simplă Dacă vă grăbiţi sau apreciaţi mai mult un design modest, este ideală o bară de navigare cu text. Hyperlink-urile vor ară-ta atunci aşa cum au fost create īn HTML. Doar parantezele pătrate evidenţiază faptul că este vorba de un element de navigare (aici, pas1) Toate link-urile acestui exemplu sunt poziţionate pe o singură linie. Ruperea rāndurilor īn codul sursă asigură plasarea unui spaţiu ī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 cāmpul adresantului. Īn acest fel, surferul are posibilitatea de a vi se adresa direct de pe pagină, fără să caute adresa dumneavoastră. Bara de navigare este separată de restul docu-mentului printr-o linie orizontală. Aici, aceasta este aliniată la stānga prin align=left, iar lăţimea acesteia este limi-tată la 800 de pixeli prin width=800. 2. Butoane din creaţia proprie Butoane fără umbră. Web-design-erii cu pretenţii 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 īncăpea inscripţionarea şi sunt suficient de mici; pentru a nu ocupa prea mult spaţiu din pagină: Aceste. dimen-siuni sunt avantajoase şi din alt punct de vedere: butoanele mici pot fi şi īncărcate mai uşor. Calea cea mai simplă spre asemenea butoane este apelarea la programul share-ware Paintshop Pro, care deţine funcţia Buttonize. Īnsă această funcţie trebuie exploatată cu grijă. Deschideţi īn Paintshop Pro un nou document grafic cu 16,7 milioane de cu-lori cu lăţimea de I00 de pixeli şi īnăl-ţimea de 40 de pixeli. Fundalul rămāne alb. Măriţi imaginea cu ajutorul funcţiei de zoom pentru a poziţiona mai uşor textul.Daţi un clic pe butonul de text şi selectaţi un font oarecare, de 12 puncte, bold. Introduceţi textul Home, daţi un clic pe OK şi plasaţi scrisul īn mijlocul noului buton. Deoarece textul este īncă marcat, apăsaţi combinaţia de taste [CTRL]+[D] pentru a elimina marcajul. Selectaţi apoi Image - Effects - But-tonize. Pentru Height este indicată o valoare cuprinsă īntre 15 şi 20, atunci cānd este activată funcţia de Transparent Edge. Solid Edge nu arată la fel de bine. Dar dacă totuşi doriţi 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. Salvaţi-1 ca fişier JPG. Apoi pentru ca timpul necesar īncărcării acestei imagini să fie minim folosiţi un program pentru optimizare JPEG, cum ar fi JPEG Optimizer. Īn documentul HTML (WELCOME. HTML) legaţi grafica de hyperlink după cum urmează: Cu ajutorul func-ţiei Buttonize din Paintshop Pro pu-teţi desena rapid butoane pentru homepage-ul dumneavoastră. Pentru orice even-tualitate salvaţi separat un buton neinscripţionat. Parametrul border=0 evită afişarea marginii albastre inestetice, care sugerea-ză faptul că respectiva grafică reprezintă un link. Butoane cu umbră. Rămān īn con-tinuare la modă umbrele poziţionate īn spatele butoanelor. Cu puţină īndemā-nare puteţi desena chiar dumneavoastră aceste elemente de navigare de efect. Şi de această dată puteţi apela la Paintshop Pro. Deschideţi o imagine nouă, avānd dimensiunea de 400x400 de pixeli. Pentru prima īncercare folosiţi albul ca şi cu-loare de fundal şi 16,7 milioane de culori. Desenaţi un dreptunghi īn colţul din stānga sus al ferestrei. Atenţie ca funcţia de fill să fie activată şi să fie destul spaţiu pentru un al doilea dreptunghi de aceleaşi dimensiuni. Marcaţi 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] inseraţi o copie a dreptunghiului īn spaţiul liber al imaginii. Coloraţi noul dreptunghi cu gri deschis cu ajutorul funcţiei Flood-Fill. Aceasta este reprezentată īn bara de sim-boluri ca o cutie de conserve stilizată. Activaţi apoi shortcut-ul [CTRL]+[D], pentru a elimina marcajul. Daţi din nou un clic pe bagheta ma-gică. De această dată Feather va obţine valoarea 10. Īn momentul īn care daţi 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. Marcaţi din nou primul dreptunghi cu bagheta magică . Feather are valoarea 0. Trageţi acest dreptunghi peste umbra sa. Decupaţi butonul obţinut şi salvaţi-1 ca JPG. Bineīnţeles că acum puteţi inscrip-ţiona butonul, salvāndu-1 de fiecare dată sub un alt nume. Nu ştergeţi butonul gol (fără inscripţionare), astfel īncāt să-1 pu-teţi 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 lāngă celălalt fără spaţiu īntre ele. Pentru aceasta, desenaţi bara completă pe care includeţi inscripţio-nările adecvate. Apoi īmpărţiţi imaginea īn componente şi salvaţi-le. Īn docu-mentul web integraţi apoi graficele după cum urmează: Rolul esenţial īl joacă aici tag-ul nobr. Acesta īmpiedică ruperea rāndurilor, chiar şi atunci cānd fereastra browserului este mai īngustă decāt bara cu butoane. Īn afară de aceasta, nu este voie să se rupă rāndul ī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 acelaşi efect optic, dar oferă mai multe posibilităţi. |
|||
| Referat oferit de www.ReferateOk.ro | |||
Varianta Printabila 
Free Download Referat PDF
Free Download Referat Word |
Home : Despre Noi : Contact : Parteneri |  |
