referat, referate , referat romana, referat istorie, referat geografie, referat fizica, referat engleza, referat chimie, referat franceza, referat biologie
 
Informatica Educatie Fizica Mecanica Spaniola
Arte Plastice Romana Religie Psihologie
Medicina Matematica Marketing Istorie
Astronomie Germana Geografie Franceza
Fizica Filozofie Engleza Economie
Drept Diverse Chimie Biologie
 

Web design

Categoria: Referat Informatica

Descriere:

Apoi luati o hartie si un creion. Pe o foaie A4 proiectati in mare impartirea paginii. Liniile nu trebuie sa fie pozitionate la milimetru, dar aceasta schita va ajuta sa aveti o imagine asupra structurii paginii. Schitati in rame si continutul indicati bara de navigare si includeti imaginile...

Varianta Printabila 


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 cu­loare din al doilea şi al treilea fişier, de exemplu:
<body bgcolor=yellow> . Şi
<body.b.gcolor=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.

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.

Documentaţie: Revista Chip

Referat oferit de www.ReferateOk.ro
Home : Despre Noi : Contact : Parteneri  
Horoscop
Copyright(c) 2008 - 2012 Referate Ok
referate, referat, referate romana, referate istorie, referate franceza, referat romana, referate engleza, fizica