Ghid HTML+Css 1

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

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.

7835 afisari 6 Rating (5 voturi) 30 min

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:

E-learn.ro http://www.e-learn.ro/printare-tutorial/html/ghid-html-in-pasi-simpli-de-l...

1 of 9 2/16/2013 9:55 AM

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:


2 of 9 2/16/2013 9:55 AM

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.

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.

1.

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.

2.

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


3 of 9 2/16/2013 9:55 AM

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.

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.

1.

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.

Structura de baza

Acum avem destule cunostiinte cat sa putem crea o structura html elementara si sa setam cateva clase css default:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/x

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Sanke Photography</title>

<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css

<link href="print.css" rel="stylesheet" media="print" type="text/css" />

<!-[if IE ]>

<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css

<![endif]->

</head>

<body id="home">

<div id="outer">

<div id="header">

<ul id="nav">

<li><a href="#">About Us</a></li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Contact Us</a></li>


4 of 9 2/16/2013 9:55 AM

<li><a href="#">Events</a></li>

<li><a href="#">News</a></li>

</ul>

<div id="tagline"></div>

<div id="search"></div>

</div>

<div id="main">

<div id="col1"></div>

<div id="maincol"></div>

<div id="col2"></div>

</div>

</div>

</body>

</html>

CSS Principal

/* documentul principal CSS */

/* prima data clasele generale */

/* reseteaza stilurile css individual in locul selectorului universal.*/

html, body{

margin: 0;

padding: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

border-left:0;

}

div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

body {

line-height: 1;

color: black;

background: white;

font-family: Verdana,Arial, Helvetica, sans-serif;

}

ol, ul {list-style: none;}

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;


5 of 9 2/16/2013 9:55 AM

font-weight: normal;

}

/* opreste resetarea stilurilor */

/* tehnica clearing */

.clearfix:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix {display:inline-block;}

/* ascunde mac */

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* sfarsitul optiunii hide */

/*........... nu schimba sau amesteca stilurile clearfix de mai sus ......

p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}

a img,img{border:none;display:block;}

a{

text-decoration:none;

color:#252e1c;

}

h1,h2,h3,h4,h5,h6{

font-weight:bold;

}

h1{font-size:197%}/* 26px */

h2{font-size:182%}/* 24px */

h3{font-size:167%}/* 22px */

h4{font-size:152%}/* 20px */

h5{font-size:136%}/* 18px */

h6{font-size:122%}/* 16px */

body{

font-size: 13px;

text-align:center; /* for ie5.+*/

}

CSS doar pentru IE:

/* IE CSS Document */

body {font-size:x-small;font-size:small}/*ie5 si 5.5. */

body table{font-size:x-small;font-size:small}

Acest cod va fi imbricat dupa cum urmeaza:

HTML:



Am folosit metoda Reset CSS a lui Eric Meyers pentru a crea clase default uniforme pentru toate elementele, apoi

am introdus o metoda de redimensionare a textului, asemanatoare celei folosite pe Yahoo YUI. Toate aceste lucruri

vor oferi o baza consistenta de la care sa pornesti, dar si un template bun pentru orice pagina. Acum ca am stabilit


6 of 9 2/16/2013 9:55 AM

toate aceste lucruri poti incepe sa transformi PSD-ul.

PASUL 2

Presupunand ca ai stabilit deja cateva clase default pentru text, culorile link-urilor, stilurile font-ului, etc., putem sa

incep constructia. Am setat fontul principal "verdana" pentru ca cea mai mare parte a paginii are acest font, iar asta

ne va scuti sa specificam de fiecare data acest lucru.

Cand construiesc un site pentru prima data, includ intotdeauna clasele CSS in head pentru ca sunt mult mai usor de

revizuit si editat pe masura ce lucrez la pagina. Odata ce pagina e functionala si testata, codul CSS poate fi mutat in

fisierul principal extern CSS. E important sa deprinzi obiceiul de a-ti verifica munca la fiecare pas in browserele pe

care trebuie sa mearga pagina ta. Eu stiu mai mult sau mai putin ce merge si ce nu, dar prin verificarea a 3 sau 4

browsere la fiecare etapa ma asigur ca nu exista discrepante si ca lucrurile pot fi reparate usor in acest stadiu,

decat daca ar trebui sa astept pana la final cand totul e terminat si chiar ca ar fi imposibil sa mai remediez ceva.

Prin aceasta tehnica iti poti valida si HTML-ul si CSS-ul foarte rapid, astfel incat sa nu existe greseli in cod. Nu voi

reveni asupra acestui lucru deoarece este de la sine inteles ca la fiecare etapa vor avea loc testarile de mai sus.

De sus in jos

Lucrand de sus in jos vom incepe cu elementul body si vom aplica gradientul fondului ca o portiune repetata pe

fundalul paginii de-a lungul axei x. Culoarea de fundal a body-ului va fi setata in functie de culoarea gradientului

final, care in acest caz, e negru. In acest mod, trecerea de la imaginea cu gradientul la culoarea fundalului va fi

imposibil de detecta

Portiunea pe care este aplicat gradientul are inaltimea de 800px si de aceea nu avem alta optiune decat decuparea

unei imagini cu aceeasi inaltime. S-ar putea sa fii tentat in acest moment sa faci imaginea de 1px pe 880px, dar nu

e o idee buna deoarece asta inseamna ca browser-ul va trebui sa repete aceasta imagine de 1024 ori pe o pagina

cu latimea de 1024px. Eu as folosi o "felie" lata de cel putin 5px sau chiar 10px pentru a face ca browser-ul sa

munceasca mai putin si pagina sa fie desenata mai rapid. Daca bucata e lata de 10 pixeli, atunci browser-ul va

trebui sa repete imaginea doar de 102.4 ori, fata de 1024 de ori, ceea ce reprezinta o diferenta considerabila.

Exista intotdeauna un compromis intre marimea fisierului imagine si timpul necesar repetarii sale pe ecran, asa ca

nu folosi peste tot imagini de 1px pentru ca pagina ta va incepe sa mearga greu.

Imparte fundalul PSD-ului pentru a crea o imagine care sa fie 5px x 880px si salveaza-o drept bodybg.jpg. Asta ne

va da urmatorul cod CSS ce va trebui adaugat in tag-ul head ( imbricat in tag-ul style, bineinteles).

CSS

body{

background:#000 url(images/bodybg.jpg) repeat-x 0 0;

}

Acum ne vom concentra asupra continutului principal si va trebui sa cream un container pentru el. Masoara pagina

si apoi centreaz-o. Am adaugat deja o rectificare pentru ie5 in clasele CSS default pe care le-am setat mai devreme

si am aplicat text-align:center pentru body. Nu uita sa setezi text-align ca left pentru #outer, in caz contrar si textul

va fi centrat.

Iata codul care rezulta din masurarea paginii si centrarea ei folosind margini auto:

CSS


7 of 9 2/16/2013 9:55 AM

#outer{

width:975px;

margin:auto;/* centreaza pagina*/

text-align:left;/* aliniaza textul la stanga datorita rectificarii pentru ie5.x

}

Header-ul si meniul

Vom da o latime header-ului pentru a se evita problemele in IE si pentru a ne asigura ca nu vom avea parte de

bug-urile asociate.

CSS

#header{

width:975px;

}

Meniul poate fi realizata orizontal daca se seteaza elementele din lista pentru a genera "inline boxes" in loc de

"block boxes", permitandu-le astfel sa se alinieze orizontal. Folosirea listelor pentru meniurile CSS care se repeta

reprezinta o modalitate unanim acceptata de a coda aceste. Daca adaugi un padding listei ul cu meniul, acesta se

va alinia corect fata de marginea din dreapta a layout-ului, lasand astfel loc pentru imaginea cu frunza.

Ce font folosim pentru meniu ?

Ne-am lovit de prima problema: designer-ul a folosit in meniu un font care nu este browser-friendly, cu alte cuvinte

fontul respectiv nu este recunoscut de browser. Asadar, trebuie sa iei o decizie in legatura cu ce vei face mai

departe.

Daca design-ul in format html trebuie sa contina acelasi font ca in fisierul PSD, atunci nu ai alta alternativa decat sa

compui meniul din imagini, deoarece e posibil ca font-ul in cauza sa nu fie instalat pe 99.9% din calculatoarele care

vor accesa pagina. Folosirea imaginilor pentru navigare poate dauna optimizarii pentru motoarele de cautare (SEO

- Search Engine Optimisation) in unele cazuri, asa ca e mai bine sa faci acest lucru doar daca e absolut necesar.

Font-ul principal folosit in continutul paginii este Verdana, deci acesta ar fi primul font pe care ar trebui sa-l incerci si

sa vezi cat de mult se aseamana cu cel folosit in meniu. Din pacate, pentru acest caz potrivirea nu este una buna,

dar la o alta testare reiese ca Arial este mai apropiat, mai ales cand e setat pe italic si ajustat ca marime.

Iata o imagine a meniului original luata din PSD, comparata cu layout-ul nostru din Firefox 2 si folosind Arial:

Randul de sus este cel original si din punctul meu de vedere cele doua se aseamana foarte mult. Oricum, niciodata

html-ul nu va putea oferi anti-aliasing-ul si bold-ul partial pe care le furnizeaza Photoshop-ul. Daca clientul tau vrea

ca totul sa arate identic, atunci va trebui sa substitui textul cu imagini.

Privind fisierul PSD, putem presupune urmatorul lucru: cuvantul colorat in verde reprezinta pagina curenta si putem


8 of 9 2/16/2013 9:55 AM

sa presupunem in continuare ca fiecare cuvant va fi colorat in verde daca mouse-ul se afla deasupra lui. Asadar,

vom introduce acest lucru in nav inca de la inceput. Vom aplica o clasa structurii lista curente, astfel incat sa putem

introduce o schimbare la hover.

CSS

ul#nav{

font-size:92%;

padding:18px 115px 5px 0;

text-align:right;

}

ul#nav li{

display:inline;

padding:0 13px 0 0;

text-transform:uppercase;

font-style: italic;

font-weight:bold;

font-family: Arial, Verdana, Helvetica, sans-serif;

}

ul#nav li a{

color:#fff;

}

ul#nav li a:hover,

ul#nav li.current a{color:#8bbd25}

HTML

<ul id="nav">

<li><a href="#">About Us</a></li>

<li class="current"><a href="#">Gallery</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Events</a></li>

<li><a href="#">News</a></li>

</ul>

Retine ca am folosit text-transform:uppercase pentru a transforma linkurile din meniu in majuscule, in loc sa scriu

direct cu majuscule. Exista o serie de motive pentru care am facut acest lucru. In primul rand, NU E FRUMOS SA

TIPI, in al doilea rand acesta este un efect de decorare care ar trebui realizat prin CSS si nu html, iar in al treilea

rand, face ca HTML-ul sa arate mai curat.

Meniul este cat de cat terminata, dar e posibil sa fie nevoie sa o schimbam mai tarziu. Deocamdata o lasam asa

cum e si ne vom intoarce asupra ei daca va fi nevoie sa o mutam.

Cu asta se incheie partea 1 din tutorial, in curand urmeaza si cea de a doua.

Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.


9 of 9 2/16/2013 9:55 AM

Ghid HTML+Css 1

Documents

Transcript of Ghid HTML+Css 1