E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Layout-uri (4)

Ghid HTML in pasi simpli - de la PSD catre CSS (Partea I)

05.11.2008
Ghid HTML in pasi simpli - de la PSD catre CSS (Partea I)

Acesta e primul din seria de 4 tutoriale ce te vor invata cum sa transformi un fisier PSD intr-o pagina html cu ajutorul CSS.

Total vizualizari: 14027 14027 afisari   |   Comentarii  7   |   Rating   |   (6 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  www.csshowto.com  
Autor:  www.csshowto.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1 2 »
comenteaza printeaza

Acesta e primul din seria de 4 tutoriale ce te vor invata cum sa transformi un fisier PSD intr-o pagina html cu ajutorul CSS. In continuare vom construi un site Photography complet operational in Xhtml si CSS. Toate codurile, fisierele si template-urile iti stau la dispozitie pentru a te juca cu ele si chiar te incurajez sa o faci.

Acum sa ne concentram asupra tutorialului.

Unul din cele mai grele lucruri in a transforma un design PSD intr-un layout CSS/HTML bine structurat consta in a sti de unde sa incepi. Desi ar putea suna simplist si chiar evident, conteaza foarte mult felul cum incepi si fundatia pe care vei construi. In aceasta serie de articole te voi invata pas cu pas etapele acestui proces de converse si vom analiza deciziile pe care trebuie sa le iei, precum si modul in care aceste decizii se vor adapta pe masura ce lucrurile progreseaza. Articolul nu va aborda tehnici grafice anume ( ex: taierea imaginilor si optimizare) deoarece acestea variaza de la un program la altul si nu reprezinta scopul acestui tutorial. In mod evident, va trebui sa stii cum sa faci aceste lucruri si presupun ca deja ai aceste cunostiinte elementare.

Pentru inceput ne vom inchipui ca doar ce ai primit un PSD de la un designer si ai fost rugat sa-l transformi intr-o pagina CSS/HTML valida si functionala. Iata o imagine a layout-ului pe care il vom obtine la final:


PASUL 1

La prima vedere pare destul de usor, dar inainte sa incepem hai sa ne uitam mai indeaproape la elemente si sa identificam eventualele zone problema. E posibil sa fii nevoit sa iei unele decizii importante in ceea ce priveste design-ul in aceasta etapa incipienta, asa ca inca de la inceput trebuie sa ai o idee clara despre cum poate fi realizat design-ul. Daca gasesti zone imposibil de creat pe o pagina web adevarata sau care ar crea prea multe probleme cu browser-ul, atunci e mai bine sa le localizezi acum si sa anunti designerul inainte sa incepi.

Daca lucrezi pentru cineva, e important sa mentionez ca pana in acest moment ar fi trebuit sa stabilesti cu clientul volumul tau de munca, precum si suma cu care te va plati. Daca nu fixezi parametrii exacti ai job-ului el va putea sa se foloseasca de asta pentru a te obliga sa adaugi orice doreste, ori de cate ori doreste, fara ca tu sa ai vreo scapare. ( Nu toti clientii sunt asa, dar se mai gasesc si unii de genul acesta)

Fix, fluid sau em based

Acum ca am stabilit aceste lucruri, hai sa trecem la fapte si sa vedem cu ce ne confruntam; imparte layout-ul in sectiuni mai usor de manevrat. Prima intrebare pe care trebuie sa ti-o pui este daca avem de a face cu un layout cu o latime fixa sau unul cu o latime variabila in care dimensiunea fiecarei coloane poate varia in functie de rezolutia ecranului. Bineinteles ca te poti consulta cu clientul in aceste privinte, dar , pentru acest prim tutorial, sa presupunem ca e vorba de un layout cu o latime fixa. In tutorialele viitoare vom analiza felul in care se poate transforma exemplul intr-un layout cu latime variabila sau intr-unul em based. Pentru moment insa, vom ramane la pixeli pentru a ne fi mai usor.

Reactia mea initiala cand am vazut PSD-ul a fost ca designer-ul a folosit mult gradient si efecte de umbra in locuri diferite, dar si ca a adaugat colturi rotunjite la cateva din elementele de design. De exemplu, backgroundul are un gradient vertical de la #282f27 la #000000, pe o portiune de 880 pixeli. Acest lucru nu reprezinta o problema propriu-zisa deoarece putem repeta o imagine pe axa x, iar in acelasi timp putem seta culoarea de fundal in tag-ul body la valoarea pe care o va avea fade-ul final (#000). Aceasta operatiune va permite layout-ului sa se extinda vertical oricat va fi nevoie. Complicatiile vor consta in faptul ca elementele header vor avea un fundal usor mai intunecat plasat in jurul lor, care va varia in functie de culoarea backgroundului.

Avem 2 optiuni in acest moment:

    • Creeaza efectul de intunecare in jurul elementului folosind transparenta PNG, astfel incat fundalul intunecat din body sa se poata vedea prin imaginea PNG opaca. Cu toate ca acest lucru e posibil cu majoritatea browser-elor, exista probleme grave cu IE6, in sensul ca el nu va reda PNG-ul transparent in mod corespunzator. Ai putea folosi filtrul alpha-image loader pentru a compensa in IE5 si 5.5 daca nu ai de ales, dar si acest lucru aduce alte probleme, de aceea ar trebui utilizat numai daca nu exista alta alternativa.
    • Imparte elementele fundalului cu umbra gradientului la locul ei si potriveste-o cu fondul din body. Atat timp cat elementele din header au o inaltime fixa, atunci totul va merge bine. Desigur, daca textul va fi reorganizat si elementelor li se va permite sa se mareasca, atunci e posibil ca acestea sa nu se mai imbine corect. Totusi, cred ca acesta este un pret mic de platit pentru a lasa codul cat mai simplu. Asadar, vom alege aceasta metoda, iar daca aflam mai tarziu ca nu e indeajuns de buna, va trebui sa o regandim.

Structura paginii

Pentru a iti face o idee despre ce elemente ai nevoie pentru intreaga pagina, poti crea o schita a site-ului tau (fie in mintea ta, fie pe hartie). Iata o macheta a paginii noastre:


Chiar daca in realitate nu vom folosi exact aceasta structura, aceasta poza iti ofera un punct de reper vizual legat de ceea ce trebuie realizat si furnizeaza o ordine logica a pasilor urmatori. Unele persoane vor respecta aceasta versiune wire-frame, dar in unele cazuri ea te poate incurca, asa ca este de preferat sa te concentrezi asupra elementelor unul cate unul, de la primul la ultimul.

Fiecare zona va pune anumite probleme, dar structura esentiala e urmatoarea: un layout centrat cu 3 sectiuni orizontale statice urmate de 3 coloane care vor fi inserate de-a lungul ecranului. Partea principala a site-ului va consta in cele 3 coloane, iar problemele importante ce vor trebui rezolvate sunt legate tot de cele 3 coloane aparent egale. Acest lucru poate fi reglat destul de usor in layout-ul cu latime fixa prin folosirea unei imagini de fundal care se repeta si care creeaza cele 3 coloane automat.

Vor exista si probleme legate de sectiunea principala deoarece trebuiesc luate in considerare gradientele verticale si imaginile aliniate in partea de jos, iar design-ul ar putea fi modificat pe masura ce avansam. Dar, pentru moment e bine ca am realizat acest lucru si ca am luat aminte de optiunile pe care le avem. Daca in acest moment consideri ca un anumit lucru e imposibil, intrucat nu toate desenele pot fi transpuse pe web, ar trebui sa il contactezi pe client si sa cauti strategii alternative daca design-ul trebuie schimbat.

Dupa ce am identificat problemele principale si am ratificat posibilele modificari de design, e timpul sa incepem adevarata munca, sa scriem codul si sa taiem imaginile. Sa le luam pe rand.

  1. Alege marimea font-ului, tipul font-ului si culorile principale din PSD si stabileste-le clasele CSS default. De asemenea, defineste marimea default a fontului, ce va permite redimensionarea textului in IE6 sau in versiunile mai vechi ale IE. De fapt, acest proces este atat de uzual, incat ar trebui sa ai deja un template setat pentru a incepe munca imediat si pentru a iti permite sa modifici tipul fontului si culorile.
  2. Masoara layout-ul astfel incat sa creezi un container pentru continut, deoarece intreg continutul poate fi centrat cu ajutorul containerului. Unii designeri folosesc atributul width in tag-ul body, in locul unui container intern, dar aceasta abordare poate crea probleme pe versiunile anterioare ale IE, si eu recomand sa lasi body-ul in pace. Totusi, daca vrei sa fii minimalist poti lua in vedere si aceasta optiune.

De multe ori vei primi PSD-uri cu latimea de 800px deoarece designerului i s-a spus ca site-ul trebuie sa fie vizibil la rezolutia de 800x600, iar el nu si-a dat seama ca dimensiunea de 800px este prea mare pentru 800x600 datorita marginilor browserului si a barei de scroll. Latimea maxima in acest caz este de aproximativ 760px (in functie de browser), pentru a evita aparitia barei de scroll orizontal. Acesta este un exemplu de lucruri pe care trebuie sa le iei in considerare la masurarea layout-ului si crearea unui container pentru intreg continutul paginii.

  1. Incepe de sus in jos. Lucrand logic iti poti imparti munca in sectiuni astfel incat poti lua fiecare lucru pe rand si face planuri in functie de necesitati. Intotdeauna trebuie sa fii atent la ce va urma, dar daca te concentrezi asupra fiecarui lucru pe rand, eforturile tale vor fi canalizate catre acel lucru, iar cand fiecare element va fi terminat si nu vei avea doar lucruri pe jumatate facute te vei simti implinit.

In PSD-ul nostru avem meniul in partea de sus, urmat de logo si de slogan. Apoi urmeaza o imagine header cu un casuta de cautare si in final,3 coloane si un mic footer cu un mesaj de copyright.

Imi place sa folosesc nume logice pentru sectiuni. Daca de exemplu,coloana din stanga se numeste #leftcol si mai tarziu o vei schimba folosind CSS pentru a deveni cea din dreapta, totul va deveni confuz. E mai bine sa folosesti nume generice, dar functionale, cum ar fi #sidebar1 pentru coloana din stanga si #sidebar2 pentru coloana din dreapta, sau chiar #col1 si #col2. Totusi, in cazul in care te decizi sa schimbi ceva, gandeste-te cu atentie la numele pe care le vei alege, dar nici nu exagera ajungand in punctul in care nu mai stii ce reprezinta fiecare.Pentru layout-ul nostru vom folosi urmatoarele denumiri:

#outer - retine intreg continutul paginii
#header - contine meniul si alte elemente din header cum ar fi logo-ul si casuta de cautare.
#nav - meniul principal
#tagline - logo si slogan
#search - casuta de cautare si imaginea de fundal
#main - acesta este un container pentru cele 3 coloane
#col1 - coloana stanga
#maincol - coloana din centru
#col3 - coloana din dreapta
#footer - Footer

Pentru alte elemente interne vom folosi clase. Tine minte ca denumirile trebuie sa fie unice si ca nu pot fi folosite decat o data pe pagina.

Pagina:
1 2 »
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(6 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (7) spune-ti parerea
ioan489 ioan489 , Duminica, 05 Mai 2013, ora 10:08
#7

Foarte bun tutorialu,dar iti recomand ca in alte tutoriale sa fii mai explicit, sa inteleaga tot romanul.(Oricum pt. tutorial nota 10)

Raporteaza acest comentariu ca injurios!
Pustiu Pustiu , Luni, 21 Mai 2012, ora 04:45
#6

@teodorradu22: Ar fi fost poate util sa specifici ce anume nu ai inteles. Te rog observa ca acest tutorial se adreseaza unui public cu un nivel de experienta si cunoastere mediu in ceea ce priveste domeniul: respectiv web design - html. Neavand aceste cunostinte, este posibil ca informatiile prezentate sa para mai dificile. Iti recomand sa pornesti cu sectiunea HTML / Bazele HTML pentru a intelege intai notiunile discutate. Spor!

Raporteaza acest comentariu ca injurios!
teodorradu22 , Duminica, 20 Mai 2012, ora 09:57
#5

sa mor de'am inteles ceva :|

Raporteaza acest comentariu ca injurios!
flavy flavy , Sambata, 19 Septembrie 2009, ora 10:15
#4

Cred ca este cel mai bun tutorial de codare din cate am gasit.Multumesc

Raporteaza acest comentariu ca injurios!
xdinna xdinna , Marti, 15 Septembrie 2009, ora 16:12
#3

Foartte Bun tutorialu. Niciodata n-am stiut cum sa transform din psd in HTML, gasisem niste prostii cu dreamweaver

Raporteaza acest comentariu ca injurios!
mihaict , Sambata, 27 Iunie 2009
#2

VORBA LU FOARTE UTIL!!! VAI DOAMNE CE UTIL E TOT CONTZINUTU ASTA! II MULTUMESC DEPLIN CELUI CARE L-A PUS AICI DEJA PAGINA ASTA AM PUS-O LA FAVORITES :))) BRAVOO TOT ASA :D

Raporteaza acest comentariu ca injurios!
Tj , Joi, 06 Noiembrie 2008
#1

foarte util .. 10x

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5045
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5005
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4845
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4825
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4620
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
RoR Action Script Vista Excel Bridge XML Verilog Fotografie XHTML CSS JSON Photoshop PSD Ruby on Rails AJAX PHP Sony Vegas Gimp Swift 3D Powerpoint MySQL HTML Javascript Word COREL DRAW Dreamweaver Python Lightroom Java Illustrator SEO StyleSheet Flash Fireworks SWF Outlook
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software