Sunteți pe pagina 1din 47

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. 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:

o 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.
o 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.
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/xhtml1-strict.dtd">
<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>
<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;
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:

<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" media="screen,projection"
type="text/css" />
<![endif]-->

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 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

#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 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.


Ghid HTML in pasi simpli - de la PSD la
CSS (Partea a II-a)

Bun venit in partea a 2-a a acestui ghid. In prima parte am creat structura elementara pe care vom
construi site-ul de fotografie. Acesta este cel de al 2-lea din seria de 4 tutoriale, ce te invata cum sa
transformi un fisier PSD intr-o pagina html cu ajutorul CSS. Acestea sunt primele dintr-o serie de
articole cu ajutorul carora vei putea construi un site complet operational in Xhtml si CSS.

In continuare lucram cu acelasi fisier PhotoShop ( PSD), iar in aceasta parte a tutorialului vei mai
„slefui” layout-ul putin pana cand, in final, va arata ca design-ul pe care incerci sa-l redai. In prima
parte a ghidului am creat partea de sus a meniului, in timp ce partea a 2a va incepe cu logo-ul si
sloganul de sub meniu.

Logo-ul si Tagline-ul

Primul element grafic important este reprezentat de logo si slogan asa cum sunt ele reproduse in
Figura2:

Ca in cazul oricarui element grafic, ar trebui sa gasesti metode prin care sa poti repeta anumite
sectiuni pentru a reduce marimea fisierului. Din pacate, pentru acest element nu exista o sectiune
uniforma care sa poata fi repetata deoarece exista un efect care acopera intreg layout-ul. De
asemenea, exista colturi rotunjite si margini ingrosate de care trebuie sa tii cont, iar numarul de
imagini folosite ar fi prea mare.

E timpul sa faci un compromis. Pentru a simplifica lucrurile, poti include majoritatea elementelor intr-o
singura imagine. Vei scoate logo-ul din partea stanga, precum si textul „lorem ipsum” din partea
dreapta, ramanand cu un fundal ca cel din Figura3:

In acest mod, poti plasa log-ul companiei pe partea dreapta si il poti transforma cu usurinta intr-un
link catre home page. Textul „lorem ipsum” a fost scos din imagine pentru ca e posibil sa se schimbe
de la o pagina la alta de-a lungul site-ului si e mai bine sa poata fi mai usor de inlocuit pe viitor. Textul
e cu siguranta grafic si, pentru ca face parte din logo, il vei plasa drept imagine, dar vei folosi anumite
tehnici de inlocuire a textului astfel incat continutul sa fie in continuare disponibil atat pentru
motoarele de cautare cat si pentru vizitatorii site-ului. Imaginea va trebui aranjata pentru a se potrivi
exact cu fundalul, dar asta nu ar trebui sa fie prea dificil pentru ca poti compara pozitiile cu cele pe
care le-ai taiat din PSD.

Imaginea din figura 3 va fi incarcata ca fundal (background), iar logo-ul va fi amplasat deasupra ei.
Dupa cum am mentionat, textul „lorem ipsum” va fi o imagine, dar va avea si o alternativa text pentru
utilizatori.

Vei folosi un element numit #tagline (slogan) ce va contine logo-ul si sloganul, iar pentru asta trebuie
sa creezi un element de dimensiunile corecte pentru a cuprinde intreaga imaginea de fundal. Ai nevoie
si de un efect de suprapunere datorita graficii din partea dreapta a imaginii, care se ridica odata cu
textul. Acest lucru se poate implementa printr-un margin top negativ al #tagline-ului, ce va deplasa
imaginea in sus, pozitionand-o langa meniu. Pentru a evita anumite probleme de nivel, vei stabili
position:relative pentru meniu si #tagline, apoi vei initializa z index-ul pentru fiecare parte, astfel incat
meniul sa aiba un z-index mai mare, aflandu-se deasupra fundalului si elementului #tagline.:

CSS

ul#nav{
position:relative;
z-index:2
}
#tagline{
width:975px;
height:116px;
margin:-40px 0 0 0;
background:url(images/tagbg.jpg) no-repeat 0 0;
position:relative;
z-index:1
}

Retine ca doar elementele pozitionate pot avea un z index aplicat, asa ca trebuie sa adaugi
position:relative daca elementul nu este deja pozitionat.

Metoda de inlocuire a imaginii pe care o vei folosi consta in pozitionarea imaginii intr-un element
intern, adus ulterior deasupra continutului text pentru a-l ascunde. Atat timp cat stabilesti o
dimensiune potrivita cu inaltimea si latimea imaginii, poti initiliaza overflow cu hidden, iar orice text
care „da pe afara” va fi ascuns. Acest lucru face ca textul sa fie disponibil chiar daca imaginile sau
CSS-ul ar fi oprite. Dupa ce vei realiza acest lucru pentru logo si tagline, vei obtine urmatorul cod
HTML si CSS:
HTML

<div id="tagline">
<h1><a href="#">Sanke Photography<em><img src="images/logo.jpg" title="Sanke
Photography logo" alt="Sanke Photography" /></em></a><span>Sanke Photography
simply the best for your photography tutorials<em></em></span></h1>
</div>

CSS

/* codul pentru slogan */


#tagline{
width:975px;
height:116px;
margin:-40px 0 0 0;
background:url(images/tagbg.jpg) no-repeat 0 0;
position:relative;
z-index:1
}
#tagline a,
#tagline a em{
position:absolute;
width:218px;
height:68px;
overflow:hidden;
left:27px;
top:39px;
}
#tagline a em{
cursor:pointer;
left:0;
top:0;
/*background:url(images/logo.jpg) no-repeat 0 0; foloseste asta ca o
alternativa pentru o imagine in html*/
}
#tagline span,
#tagline span em{
position:absolute;
width:383px;
height:51px;
overflow:hidden;
left:408px;
top:51px;
}
#tagline span em{
left:0;
top:0;
background:url(images/tagline.jpg) no-repeat 0 0;
}
In el am adaugat cursor:pointer pentru a reaminti browserului IE ca se afla inca in interiorul unui link
si trebuie sa redea cursorul corect. Daca te uiti cu atentie la codul html, vei vedea ca h1 nu are nici un
atribut de stil si de aceea poti sa renunti la div-ul care il contine si poti aplica ID-ul direct pe h1, dupa
cum urmeaza. Pur si simplu copiaza atributul ID in h1 si sterge tag-ul div.

HTML

<h1 id="tagline"><a href="#">Sanke Photography<em><img src="images/logo.jpg"


title="Sanke Photography logo" alt="Sanke Photography" /></em></a><span>Sanke
Photography simply the best for your photography tutorials<em></em></span>
</h1>

Singura schimbare in CSS este sa scoti urmatorul cod care acum devine redunant:

CSS

#tagline h1{
margin:0;
}

Layout-ul realizat pana acum poate fi vazut

aici si ar trebui sa verifici daca este acelasi cu al tau. Figura 4 iti arata rezultatele muncii tale de pana
acum:
Totul arata destul de bine, dar in acest punct ar fi indicat sa verifici pagina pe cat mai multe browsere,
pentru a te asigura ca totul functioneaza corect. Ar trebui sa incerci si sa maresti textul pentru a
vedea daca exista vreo suprapunere inacceptabila. E de asteptat sa existe mici probleme legate de
redimensionarea textului, dar ar trebui sa incerci sa pastrezi intotdeauna pagina operationala in limite
rezonabile.

Figura 5 arata textul cu o dimensiune mai mica sau mai mare in IE6:

Casuta Search si imaginea de fundal

Avansand catre urmatorul element compus din casuta search si imaginea principala din header,
trebuie ca in primul rand sa te decizi asupra calitatii acestei imagini. E vorba de o imagine mare ce va
genera un fisier cu o marime considerabila. Te sfatuiesc sa o micsorezi la 50k (desi si asa e mult), dar
initial ar fi avut de 4 ori mai mult. Deoarece e vorba de un site de fotografie e recomandat sa folosesti
imagini de o calitate buna; cel mai bine ar fi sa imparti imaginea si sa realizezi 2 versiuni, in cazul in
care clientul va dori mai tarziu o calitatea mai buna a pozelor. Foloseste in site imaginea cu
dimensiunea mai redusa, dar salveaza si o copie a acesteia la o calitate superioara.

Scoate casuta search din imagine si ajusteaz-o la dimensiunile potrivite. Daca iti arunci privirea in jos
pe pagina, vei vedea ca elementele urmatoare au colturile rotunjite si marginile ingrosate, iar pentru a
economisi timp poti include partea de sus a elementului urmator in imaginea casutei search.
Rezultatul va fi cel din Figura6:
Avand in vedere ca acest element are dimensiuni fixe si nu va exista vreun text care sa iasa din limite
cand va fi marit, poti pozitiona intreaga imagine ca fundal, avand o latime si inaltime fixe. Acest lucru
simplifica lucrurile si iti permite sa asezi casuta search la locul potrivit, utilizand coordonate absolute.
Pentru a folosi absolute:positioning in interiorul acestui element, trebuie sa te asiguri inca o data ca ai
setat position:relative dupa cum urmeaza:

CSS

#search{
width:975px;
height:275px;
background:url(images/search-bg.jpg) no-repeat 0 0;
position:relative;
}

HTML

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

Acum layout-ul tau incepe sa capete proportii rezonabile, dupa cum se poate vedea in Figura7:
Cele 3 coloane principale

Putem trece la lucruri mai complicate si anume, la partea principala a site-ului ce contine 3 coloane
de-a lungul ecranului. Va trebui sa iei in considerare urmatoarele 3 lucruri importante.

Fiecare coloana contine un gradientul vertical care se estompeaza


Cele 3 coloane vor avea acceasi inaltime
Coloana din dreapta are un colt rotunjit din partea de jos

Pentru punctul 1, poti alege una dintre urmatoarele variante: din fiecare coloana poti taia o sectiune
verticala de apx. 5px pe 250px ce va contine intreg gradientul. Apoi va trebui sa repeti aceasta
imagine in fiecare din cele 3 coloane inserate. Singura problema cu aceasta metoda e faptul ca PSD-ul
arata de asemenea si un mic gradient orizontal, precum si colturi ingrosate care se decoloreaza. Daca
ai continua cu aceste mici bucati, vei avea nevoie de cel putin inca 4 imagini pentru fiecare colt si va
trebui sa renunti la gradientul orizontal.

A doua solutie consta in realizarea unor imagini cu intreg fundalul unei coloane. Cu toate ca la prima
vedere aceasta metoda ar putea parea oarecum brutala si neoptimizata, in realitate poti taia o
imagine destul de mare de 975px x 270px, micsorandu-i in schimb calitatea pana obtii un fisier de
aproximativ 3k. Desi imaginea originala va pierde putin din culoare, vei salva multiple imagini de
fundal si te vei apropia mai mult de design-ul original. Rezultatele acestei metode le poti vedea in
Figura 8. Ca si pana acum, imaginea contine si o portiune din fundalul paginii, pentru a reda efectul de
intunecare din background.

Punctul 2 poate fi rezolvat prin crearea unei bucati orizontale cu toate culorile celor 3 coloane,
repetand-o ca imagine de fundal pentru sectiunea ce le contine. Pentru a crea aceasta „felie”, asigura-
te ca ea include culoarea finala a gradientului vertical. Vei avea urmatoarea imagine ca rezultat:

Aceasta imagine va fi repetata pe axa y si va umple intreaga inaltime a coloanelor, ce vor ramane
mereu egale una cu cealalta. Apoi, in partea de sus a acestei sectiuni poti incarca imaginea cu
gradientul din Figura8, obtinand astfel efectul pe care l-ai dorit. Desigur, pentru cea de-a doua
imagine de fundal va trebui sa introduci un nou element, dar compromisul este unul mic raportat la
efectul obtinut.

Pe masura ce pagina se mareste, bucata care se repeta in background isi intra in rol, iar daca ai taiat
imaginile corect ar trebui ca trecerea dintre cele doua imagini sa nu se observe.
Asadar, codul html este urmatorul:

HTML

<div id="main">
<div id="content" class="clearfix">
<div id="col1"></div>
<div id="maincol"></div>
<div id="col2"></div>
</div>
</div>

Elementul nou numit #content a fost adaugat pentru a incarca imaginea mare cu gradientul, in timp
ce #main va include bucata ce se repeta. #content va contine de asemenea si cele 3 coloane. Codul
CSS folosit va fi urmatorul:

CSS

#main,#content{width:975px}
#main{background:url(images/3col-bg.jpg) repeat-y 0 0}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
html #content {height:270px}/* pentru ie6 si mai putin*/

Am introdus o rectificare pentru IE6 si versiunile mai vechi deoarece acesta nu recunoaste atributul
min-height, dar, din fericire, intepreteaza height intr-un mod asemanator cu min-height. In acest caz
ai nevoie de min-height din cauza gradientului vertical si daca nu vei aloca o inaltime suficienta,
imaginea de fundal se va repeta dintr-o sectiune care nu corespunde. Rezultatele codului de mai sus
pot fi vazute in Figura 10:
Pentru a permite continutului sa fie introdus in aceste coloane trebuie sa le masori si sa aplici
marginile necesare float-urilor pentru a le alinia acolo unde doresti:

CSS

#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* cure IE6 double margin bug*/
float:left;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* cure IE6 double margin bug*/
}

Trebuie sa te asiguri ca toate aceste dimensiuni incap in containerul tau, in caz contrar, diferitele
sectiuni vor fi pozitionate gresit. Ai 975px la dispozitie, iar daca adunam marginile si latimile div-urilor,
obtinem tot 975 px. De asemenea, exista si o rectificare in codul pentru IE6, care va dubla marginile
div-urilor in locul in care partile laterale intalnesc containerul parinte. Aceasta rectificare consta in
adaugarea optiunii display:inline. Div-urile sunt de tipul display:block si nu pot fi transformate in
display:inline, ceea ce inseamna ca reparatia e de fapt absurda si nu va avea nici un efect, dar din
fericire va „vindeca” bug-ul. Alte browsere nu vor lua in considerare display:inline.

Tot ce a ramas (grafic vorbind) pentru aceasta sectiune este adaugarea unui colt rotunjit in partea de
jos a coloanei din dreapta, dupa cum se vede in design-ul original. In plus, trebuie sa observi ca
intreaga pagina mai cuprinde inca 2 colturi. Nu exista nici o cale prin care sa gasesti partea de jos a
coloanei din dreapta pentru a plasa o imagine rotunjita acolo, deoarece continutul acestei coloane este
doar un div cu inaltime. Asadar, va trebui sa abordezi altfel problema si sa folosesti o imagine de
fundal in elementul footer.
Footer-ul

Vei taia baza celor 3 coloane intr-o singura imagine, ca cea din Figura 11:

Codul CSS e usor de inteles:

#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
}

HTML:

<div id="footer"></div>

Poti arunca o privire la layout-ul realizat pana acum; cele 3 coloane sunt colorate in rosu pentru a
verifica daca pozitiile sunt corecte:
Totul arata bine, deci poti inlatura culoarea rosie.

Ce a mai ramas de facut

Cu acest tutorial am dus la bun sfarsit structura principala a site-ului. In urmatoarea parte a articolului
vom adauga continut fiecarei coloane, impreuna cu partea de search pe care momentan am lasat-o
deoparte. In plus, va trebui sa gasesti o cale prin care sa plasezi imaginea watermark din figura 13 in
partea de jos a coloanelor externe.
Ghid HTML in pasi simpli – de la PSD catre
CSS (Partea a III-a)

Bun venit la cel de al 3 tutorial din seria de 4 care te invata cum sa transformi un psd in css/html. In
prima si a doua parte a acestui articol ai creat o parte din elementele esentiale care te vor ajuta in
aranjarea continutului. Acest tutorial se va axa pe coloana din stanga care este mai dificila si pe intreg
continutul ei.

In momentul de fata ai ajuns aici:

Figura 14

Comparat cu PSD-ul original din figura 15, poti vedea ca mai ai destul de mult de lucru:
Figura 15

Elementele pe care le vom aborda in partea a III-a si a IV-a sunt urmatoarele:

Pozitionarea imaginii watermark la baza coloanelor din stanga si din dreapta


Adaugarea casutei de cautare deasupra imaginii din sectiunea header
Adaugarea de continut celor 3 coloane impreuna cu iconitele asociate
Adaugarea mesajului copywright in footer

Majoritatea lucrurilor de mai sus tin de cunostiinte CSS de baza, iar singurele 2 lucruri care ar putea
pune probleme sunt imaginile watermark care stau la baza coloanelor din stanga si din dreapta. Restul
continutului va fi abordat pas cu pas pentru a fi cat mai usor de inteles.

Watermark-ul

Prima cerinta va fi sa plasezi urmatoarea imagine la baza coloanelor externe:


Figura 16

Exista o serie de probleme care trebuiesc depasite si e mai bine sa le enumeram pentru a avea o idee
cat mai clara de ceea ce trebuie sa obtii.
Intr-o ordine oarecare, trebuie:

Sa plasezi imaginea in partea de jos a coloanei astfel incat sa ramana mereu acolo, indiferent
de lungimea coloanei
Sa te asiguri ca imaginea se afla in fundal si sub text
Sa te asiguri ca imaginea se afla deasupra fundalului existent, iar tranzitia dintre ele nu este
vizibila.

Punctul 1 presupune abordarea problemei intr-o maniera creativa, deoarece coloanele nu au inaltime
in realitate, ele fiind create printr-o imagine de fundal in container-ul parinte. Asadar, va trebui sa
urmezi exemplul stabilit in prima parte a tutorialului, pozitionand watermark-ul relativ la un element
aflat sub coloane, adica elementul footer.
Deoarece footer-ul are deja o imagine de fundal, deci nu ii putem adauga inca una. De aceea,
imaginile vor fi pozitionate in mod absolut fata de footer, folosind o valoare negativa pentru top,
pentru a le aduce la locul dorit.

Pentru cea de-a doua problema, va trebui sa te asiguri ca fiecare element are setat nivelul (level) z-
index corespunzator pentru a putea controla nivelurile fondului initial, al imaginii watermark plasata
absolut si al continutul textual, ceea ce inseamna ca trebuie sa ai in vedere 3 nivele in acest proces.
Pentru ca z-index-ul sa functioneze trebuie sa te asiguri ca elementele nepozitionate sunt setate pe
position:relative, ceea ce iti permite sa asezi elementele ce au coordonate absolute.

Pentru punctul 3 va trebui sa faci mai multe incercari pentru a putea vizualizare care din ele arata cel
mai bine. Una dintre metodele folosite consta in crearea unui gif cu un fond transparent. Acest fond va
fi verde pentru a corespunde culorii de fundal, dar va fi setat drept culoare transparenta in speranta ca
va ascunde imaginile „decupate” din gif-ul transparent.
Daca aceasta metoda esueaza, e posibil sa fie nevoie sa folosesti un PNG transparent si un filtru de
incarcare a imaginii de tip alpha pentru IE,.
In abordarea punctului 3 am creat aceasta imagine pentru coloana din stanga si aceasta pentru coloana
din dreapta prin taierea elementelor potrivite din PSD.

Pentru a pozitiona imaginea (punctul 1 si 2), mai intai, footer-ul trebuie sa contina atributul
position:relative pentru a crea o stiva si pentru a-ti permite sa setezi un z-index corespunzator. Pentru
a fi sigur ca imaginea ramane deasupra continutului de mai sus ii vei stabili continutului z-index-ul 1 si
footer-ului un z-index 2.
Apoi, pentru coloanele ce vor fi inserate de-a lungul ecranului poti seta un z-index 3 pentru a mentine
textul deasupra imaginii watermark. Inca nu exista imagini sau culori de fundal pe coloanele propriu-
zise, deci nu trebuie sa iti faci probleme. Codul CSS necesar e urmatorul:

/* continutul principal */
#main,#content{width:975px}
#main{
background:url(images/3col-bg.jpg) repeat-y 0 0;
position:relative;
z-index:1;
}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
* html #content {height:270px}/* pentru ie6 si versiunile anterioare*/
#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* remediaza bug-ul IE6 double margin */
float:left;
position:relative;
z-index:3;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
position:relative;
z-index:3;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* remediaza bug-ul IE6 double margin */
position:relative;
z-index:3;
}
/* footer si copyright */
#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
position:relative;
z-index:2;
}
.watermark{
background:url(images2/flame2.gif) no-repeat 0 0;
position:absolute;
width:186px;
height:209px;
clear:both
}
.w1{left:45px;top:-189px}
.w2{
right:45px;
top:-170px;
height:176px;
background:url(images2/flame3.gif) no-repeat 0 0;
}

Codul CSS in plus a fost imbinat cu cel existent dupa cum se arata mai sus. Ceea ce trebuie sa observi
e folosirea unei clase "watermark" ce defineste cateva proprietati consecvente pentru elemente si a
claselor "w1" si "w2" pentru a implementa diferentele de pozitie. Aceste lucruri inlocuiesc aproximativ
4 linii de cod, dar merita aplicate deoarece orice lucru care reduce marimea codului sursa e bun, atat
timp cat e usor de citit si functionalitatea nu a avut de suferit. Clasele sunt aplicate impreuna folosind
un spatiu pentru a le separa. De exemplu:

e.g. class="watermark w1"

Poti folosi oricate clase doresti in aceasta maniera, daca le separi printr-un spatiu, tinand cont ca
prioritate vor avea cele de la sfarsitul listei.

Nu avem elemente fara continut ce ar putea fi folosite pentru watermark, deci va trebui sa adaugi 2
div-uri goale, pe care le vei pozitiona ulterior. Codul html e urmatorul:

<div id="footer">
<div class="watermark w1"></div>
<div class="watermark w2"></div>
</div>

Rezultatele din Firefox sunt aratate si in Figura 17:

Chiar daca atunci cand sunt privite individual imaginile arata iesite din context, sau ca si cum ar fi in
zig-zag, se poate vedea ca in momentul in care sunt plasate in fundal, marginile par netede si se
imbina cu fondul.
Daca doresti imagini mai pronuntate, le poti folosi pe cele tip PNG, avand in vedere si codul
suplimentar pentru IE6 mentionat mai devreme.

Cei care folosesc IE6 sau o versiune anterioare vor observa o problema. Partea de jos a layout-ului
(care inainte era buna) s-a strambat dupa cum se poate vedea in figura 18 si are nevoie de retusuri:

Figura18

Modul cel mai usor prin care poti vedea ce anume cauzeaza problema este sa iti refaci pasii si sa
retragi cate un element pe rand, pana cand afli ce a declansat eroarea. De aceea trebuie sa iti verifici
munca la fiecare stadiu in diferite browsere sau ai putea sa construiesti o intreaga pagina fara a
observa aceasta neregularitate. Pentru a afla unde ai gresit trebuie sa faci cateva teste.

Primul pas consta in stergerea celor 2 div-uri cu watermark din HTML, deoarece cel mai probabil ele
sunt vinovate. Prin retragerea lor si prin verificarea in IE se arata ca totul a revenit la normal. Acum ca
stii care este problema trebuie sa gasesti o metoda prin care sa faci ceea ce vrei fara sa umbli la
setarile IE6.
Pentru a testa faptul ca exista o anumita portiune de cod care declanseaza eroarea, trebuie sa pui la
loc codul HTML pentru cele 2 div-uri, apoi sa stergi pe rand stilurile aferente lor. In curand, vei vedea
ca poti sa stergi toate stilurile care fac referinta la watermark, dar eroarea nu va disparea.

Acest lucru duce la concluzia ca problema este HTML-ul adaugat. Deja stii ca prin scoaterea HTML-ului
layout-ul va reveni la pozitia corecta. Problema este ca IE6 nu admite faptul ca ai plasat div-uri goale
in footer, avand in vedere toare clasele aplicate momentan. Solutia este simpla si tot ceea ce ai de
facut este sa te asiguri ca footer-ul are un continut si imaginea va reveni. Daca adaugi un rand de text
care va deveni intr-un final mesajul copyright, vei vedea ca totul revine la normal.

<p>This is a copyright message</p>


<div class="watermark w1"></div>
<div class="watermark w2"></div>
</div>

Acum in IE6 arata totul corect; poti continua cu testarea prin adaugarea de continut celor trei coloane,
prin a verifica daca distributia nivelurilor este corecta si ca totul se suprapune asa cum trebuie.
Preluand continutul text din PSD si introducandu-l in HTML (nearanjat si neformatat momentan) poti
testa layout-ul de pana acum. Din pacate, codul de pana acum contine ceva gresit deoarece layout-ul
s-a suprapus incorect, dupa cum se poate vedea in imaginea urmatoare:
Figura 19

Greseala consta in atribuirea gresita a z-index-ului elementelor, iar watermark-ul se afla acum
deasupra continutului textual. Revenind la planul original, ai setat continutul (#main) la un z-index 1
si footer-ul la un z-index 2, dand coloanelor un z-index 3. Desi suna logic, acest lucru este gresit
deoarece coloanele sunt incluse in #main, care are z-index 1. In concluzie, z-index-ul parinte este cel
care determina nivelul tuturor copiilor sai in relatie cu alte elemente din afara. Ai fi putut sa aloci
coloanelor un z-index de 100.000, dar ar fi fost in zadar. Deoarece footer-ul are z-index:2 si se afla in
afara #main, el va fi intotdeauna deasupra acestuia si a tuturor copiilor sai.

O solutie la aceasta problema este stergerea atributului z-index din #main si modificarea tuturor
copiilor astfel incat sa aiba acelasi parinte (#outer). Acest lucru va rezolva problema in majoritatea
browser-elor dupa cum se arata in imaginea Firefox de mai jos:

Figura 20
Inca odata ai problema in IE care este valabila pana la IE7. Watermark-ul inca apare deasupra
textului, chiar daca ai scos z-index-ul din #main. Problema este ca IE aloca incorect un z-index 0 in
momentul in care un element este pozitionat, in loc sa ii aplice o valoare „auto”, dupa cum este
mentionat in speficatiile CSS. Asta inseamna ca IE va crea mereu un o stiva locala pentru diferitele
elemente copii, ceea ce cauzeaza problemele pe care le-ai intalnit.
Pentru a combate acest comportament trebuie sa scoti position:relative din #main. Asta va corecta
afisarea pe IE si abia acum vei vedea rezultatul din figura 20.
Singurul dezavantaj al acestui lucru e faptul ca acum nu mai poti plasa elemente avand coordonate
absolute in raport cu #main. Cum momentan nu este nevoie sa faci asta, vei ramane la acest cu cod
final, pe care ar trebui sa il compari cu al tau.

Coloana 1

Acum ca am definit watermark-ul si problemele de stratificare, ne vom axa asupra activitatii de rutina,
respectiv, stilizarii continutului din coloane. Deja ai un html functional, trebuie sa il formatezi si
stilizezi corect. Pentru a vedea rezultatul la care trebuie sa ajungi, arunca o privire pe figura 21:
Lucrurile pe care tebuie sa ti le insusesti in aceasta sectiune sunt urmatoarele:

Crearea unui heading la nivelul corespunzator si cu un font cat mai apropiat, pentru a
corespunde cu PSD-ul (sau folosirea unei imagini, daca nu gasesti un font potrivit);
Taierea componentelor grafice din PSD. (de exemplu: iconite diferite, linia de dedesubt,
fotografia);
Pozitionarea elementelor respectand spatierea si marginile pentru a corespunde design-ului.

Singura sarcina ce ar putea parea complicata, va fi plasarea icon-ului care apare inaintea textului
lorem ipsum. Ai putea folosi o imagine de fundal pentru aceasta la inceputul randului, dar ar trebui sa
te asiguri ca randul este destul de inalt pentru a arata imaginea iar continutul nu apare deasupra
acesteia . Chiar daca ai putea face acest lucru cu padding, ar insemna ca toate randurile vor avea
aceeasi inaltime cu imaginea, ceea ce nu este o idee atat de buna.

O a doua abordare ar fi inserarea imaginii in fundalul unui element cu dimensiuni corespunzatoare,


ceea ce ar permite textului sa se desfasoare. Va fi nevoie sa introduci un span si sa-i aplici stilurile
corespunzatoare. Singurul dezavantaj ar fi ca toate dimensiunile vor trebui sa fie specificate si
adresate corect pentru ca imaginea sa se incadreze corect.

O a treia varianta ar fi simpla folosire a unei imagini in html. E mult mai usor sa folosesti o imagine in
HTML, deoarece nu necesita cod aditional sau un mark-up pentru a o plasa corect. Atat timp cat
imaginea este „inline”, ii poti controla alinierea pe verticala si , daca este nevoie, poate fi transformata
cu usurinta intr-un link. De asemenea, faciliteaza accesibilitatea in sensul ca poti folosi atribute „alt”
care nu sunt disponibile pentru o imagine de fundal.

Heading-uri

Primul lucru care trebuie observat este faptul ca designerul a folosit din nou un font care nu este
browser-friendly, iar tu trebuie sa gasesti un inlocuitor cat mai apropiat sau sa folosesti o imagine.
Este mult mai bine sa ai heading-ul ca text in HTML, deoarece se lucreaza mult mai usor cu el. Poti
folosi Arial intr-un heading H3, pentru ca se poate dovedi a fi un nivel corect pentru aceasta coloana.
Se pare ca acest stil este consecvent, asa ca voi stiliza h3 direct fara nevoia unei clase. Se poate
observa ca coloana 1 (#col1), este usor plasata gresit si va trebui sa o aliniezi printr-o mica modificare
a marginilor. Codul CSS revizuit este urmatorul:

#col1{
width:207px;
margin:0 21px 0 25px;
display:inline;/* remediaza bug-ul IE6 double margin */
float:left;
position:relative;
z-index:3;

Urmeaza clasa extra pentru elementul H3:

h3{
color:#fff;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:131%;
margin:6px 0 10px 0;
letter-spacing:-.04em;
}

Folosind spatierea dintre litere pentru a scurta putin latimea textului se ajunge la o versiune care este
asemanatoare PSD-ului. Figura 22 contine o comparatie intre versiunea HTML a ta (cea de sus) si
heading-ul original PSD de mai jos:

Desi exista unele diferente, este mai bine sa folosesti un text normal decat imagini si tehnici de
inlocuire a imaginii.

Daca te uiti la cele 3 elemente de sub heading-ul „Latest News”, poti observa ca ele au o structura
asemanatoare cu a unei liste structurate. Iconitele si underline-ul vor trebui sa fie decupate ca GIF-uri
transparente pentru ca sunt folosite pe fonduri diferite. Te vei intalni din nou cu problema imaginii
pixelate, dar daca iti alegi culorile transparente cu atentie nu vei avea probleme. Poti gasi trei imagini
de care vei avea nevoie pentru sectiunea urmatoare aici.
Page icon
Underline
Photo of the month

Randurile de text sunt spatiate, asa ca vei folosi line-height (inaltimea liniei) pentru a le spatia corect
si margini si padding pentru a crea spatiu in jurul lor. Va trebui sa pui underline-ul ca fundal in
elementul p, sa-l plasezi central si in partea de jos, ceea ce inseamna ca vei avea nevoie de padding
bottom pe elementul p pentru ca aceasta imagine sa aiba spatiu de afisare. Codul html pentru
sectiunea de sus arata acum astfel:

<div class="news">
<h3>Latest News</h3>
<p><a href="#"><img src="images2/page-icon.gif" alt="Page Icon" width="14"
height="16" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.</p>
<p><a href="#"><img src="images2/page-icon.gif" alt="Page Icon" width="14"
height="16" /></a> Nam magna lectus, dapibus ut, ultrices at, fermentum eget,
ligula.</p>
<p class="last"><a href="#"><img src="images2/page-icon.gif" alt="Page Icon"
width="14" height="16" /></a> Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</p>
<p class="readmore"><a href="#">Read All News <span>&raquo;</span></a> </p>
</div>
Sectiunea de sus se afla in interiorul unui div, iar imaginea icon este in html. Linia este o imagine
plasata in fundalul elementului p, dupa cum a fost mentionat mai sus. Sageata dubla a fost pusa in
interiorul unui span pentru ca ea va avea culoarea alba in comparatie cu restul textului care este
negru. Pentru a implementa aceasta, am definit o clasa span prin intermediul clasei parinte, fara a fi
nevoie sa mai adaugam o alta denumire de clasa. Acest lucru este posibil deoarece nu avem mai
multe clase span in interiorul containerului .news.
Altfel, ar fi trebui sa folosesti o alta denumire pentru acest span. In cazul nostru nu este nevoie de
asta, asa ca poti utiliza urmatorul cod CSS:

.news span{color:#fff}

Pentru ultima linie din aceasta sectiune am adaugat o clasa „readmore” pentru ultima linie care este
aliniata la dreapta si ingrosata. Aceasta clasa a fost creata separat deoarece e posibil ca ea sa fie
folosita si in alte sectiuni.

Daca te uiti cu atentie la codul html de mai sus, vei vedea ca s-a aplicat o clasa numita „last” ultimului
paragraf din acea sectiune deoarece el nu este subliniat, asadar trebuie sa scoti imaginea din ultimul.
Nu poti folosi selectorul css3 :last:child deoarece nu e compatibil cu IE si va trebui sa adaugi o alta
clasa elementului in cauza. Pentru a muta textul catre dreapta trebuie sa aplici elementului p text-
align:right si astfel se completeaza mai mult sau mai putin sectiunea de sus. Codul CSS complet
pentru aceasta sectiune este:

.news{
width:207px;
color:#252e1c;
}
.news p{
font-size:85%;
background:url(images2/underline.gif) no-repeat center bottom;
padding:0 7px 8px 0;
line-height:1.4em
}
.news p.last{
background:none;
padding-bottom:1px;
margin:0 0 .4em 0;
}
.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}
.news span{color:#fff}
p.readmore{
font-weight:bold;
text-align:right;
margin:0 0 1.4em 0;
background:none;
}
p.readmore a{
text-decoration:none;
color:#252e1c;
}
p.readmore a:hover{
text-decoration:underline;
}

Observa ca imaginea „page-icon” a fost declarata ca inline si se comporta ca text. Pozitia pe verticala
a fost setata la mijloc astfel incat este pozitionata corect in raport cu textul.

.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}

Desi imaginile sunt declarate ca inline, in stylesheet-ul global ai setat toate imaginile ca fiind implicit
block, ceea ce inseamna ca trebuie sa le readuci la optiunea „inline” aici.

Urmatoarea activitate tine de sectiunea „Photo of the Month” care foloseste acelasi stil de heading si
text ca si cea precedenta. Astfel, poti refolosi clasa „news” in aceasta portiune, dar trebuie sa si
adaugi o alta clasa (separata de spatiu) pentru a rescrie cateva diferente de programare in aceasta
sectiune.

Daca studiezi figura 21 de mai sus, vei vedea ca sectiunea „Photo of the Month” este deplasata catre
stanga cu aproximativ 7 px in comparatie cu sectiunea news de mai sus. Pentru aceasta, poti folosi
pozitionarea relativa in loc de margini. Iata cum se poate folosi pozitionarea fara a modifica layout-ul:

.photo{
position:relative;
left:-6px;
}

Acest cod va muta elementul cu 6px la stanga fata de pozitia sa initiala, fara a modifica structura
documentului. Totusi, daca ai fi mutat elementul in josul paginii folosind pozitionarea relativa, ai fi
observat ca s-ar fi suprapus peste alte elemente. Position:relative muta elementele doar vizual, nu si
fizic. Ele isi ocupa mereu locul original in pagina, doar par sa fie in alta parte. In ceea ce priveste alte
elemente, acesta nu s-a mutat deloc.
De aceea trebuie sa fii atent daca folosesti atributul position:relative, intrucat nu e potrivit pentru
structurarea unui layout, ci doar pentru efecte mai subtile .

Daca vrei sa muti un element, de cele mai multe ori vei folosi marginile pentru ca astfel se vor
mentine alte elemente la departare prin distanta specificata, iar alte elemente vor „curge” din nou in
mod corespunzator.

In aceasta sectiune „photo” vei intalni un alt heading identic cu cel din sectiunea news, deci vei folosi
din nou h3, care e deja stilizat corect. Imaginea care urmeaza face parte din continut si nu ar trebui
implementata ca background. Asa ca va trebui sa incluzi imaginea intr-un element p si sa o inserezi in
pagina, dupa cum se arata mai jos:

<h3>Photo of the month</h3>


<p><img src="images2/month1.jpg" alt="Photo of the month" width="206"
height="113" /></p>

Criteriile prin care poti determina daca o imagine ar trebui folosita in fundal sau in prim-plan se
rezuma la o simpla intrebare: este aceasta imagine doar de decor?

Daca raspunsul e da si nu are legatura cu continutul, atunci ar trebui sa fie o imagine de fundal.
Insa, daca imaginea e importanta pentru continut, atunci ar trebui sa fie in HTML si nu in fundal.
Trebuie sa anulezi cateva stiluri care au fost aplicate prin intermediul clasei „news” deoarece aceasta
sectiune nu are nici o linie in partea de jos , iar spatierea pentru H3 e usor diferita. Astfel, vei folosi
clasa „photo” si vei rescrie cateva atribute, dupa cum urmeaza:

.photo h3{margin-bottom:8px}
.photo p {background:none}

Tot acum ti se ofera sansa de a refolosi clasa „readmore” pe care o poti aplica textului ” Visit Gallery”.
De asemenea, poti utiliza clasa „last” pentru a seta marginea corecta pentru partea de jos. Codul html
complet pentru aceasta sectiune este:

<div class="news photo">


<h3>Photo of the month</h3>
<p><img src="images2/month1.jpg" alt="Photo of the month" width="206"
height="113" /></p>
<p class="last"><span>&curren;</span> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
<p class="readmore"><a href="#">Visit Gallery <span>&raquo;</span></a></p>
</div>

Acum poti compara versiunile PSD si HTML pentru aceasta sectiune:


Figura 23

Exista cateva diferente de spatiere, dar chiar si asa, e destul de greu sa iti dai seama care e imaginea
PSD originala....( e cea din stanga)

Acum ar fi momentul sa verifici pagina in cat mai multe browsere, pentru a fi sigur ca totul
functioneaza corect.

Se poate observa in imaginea de mai sus ca ultimul paragraf al PSD-ului e usor mai indentat decat cel
din versiunea ta, asa ca poti localiza paragraful care are deja clasa „last” aplicata si il poti corecta.

.photo p.last{padding-left:5px}

Cu asta am terminat si partea a 3-a din aceasta serie de tutoriale. In ultima parte vei putea citi
indicatiile necesare pentru a implementa coloana din dreapta din fisierul original PSD.
Ghid HTML in pasi simpli – de la PSD catre
CSS (Partea a IV-a)

Acesta este ultimul tutorial din seria de 4 care te invata cum sa transformi un design PSD intr-o
pagina de web complet operationala. In tutorialul precedent ai terminat lucrul la coloana din stanga,
iar acum te vei concentra pe: coloana din dreapta si centru paginii, casuta search si repararea catorva
bug-uri pentru IE.

Coloana din dreapta

Figura 24 iti arata ce trebuie sa realizezi in coloana din dreapta.

Figura 24

Va fi destul de usor, deoarece ai un heading (titlu) unde poti folosi stilul global H3, apoi o lista simpla,
neordonata, cu sageti. Poti folosi >> pentru sageti pe care le vei incadra intr-un span ca si mai
inainte, astfel incat sa le poti colora in alb. Tot ce mai ramane de facut este sa aranjezi elementele
conform cu PSD-ul, ceea ce va fi destul de usor de realizat folosind marginile si padding-ul
corespunzator. Dupa ce stergi scoti continutul de test din coloana din dreapta, poti scrie codul html
astfel:
<h3>Gallery Links</h3>
<ul class="gallery">
<li><a href="#"><span>&raquo;</span> Reviews</a></li>
<li><a href="#"><span>&raquo;</span> Equipment</a></li>
<li><a href="#"><span>&raquo;</span> Consultation</a></li>
<li><a href="#"><span>&raquo;</span> Freelancing</a></li>
<li><a href="#"><span>&raquo;</span> Tutorials</a></li>
<li><a href="#"><span>&raquo;</span> Digital tips</a></li>
</ul>
</p>

Observa ca pentru UL s-a folosit clasa „gallery”. Acest lucru nu era neaparat necesar deoarece am fi
putut adresa lista folosind ID-ul coloanei, dar e foarte probabil ca acest tip de lista sa fie folosita si in
alte pagini ale site-ului. In concluzie, este mai bine sa o definesti ca o clasa separata pe care sa o poti
reutiliza. Restul codului CSS tine doar de pozitionare, codul complet fiind urmatorul:

ul.gallery{margin:1em 0 1em 0}
ul.gallery li {
text-transform:uppercase;
margin:0 0 1em 0;
font-size:77%;
}
ul.gallery li,
ul.gallery li a{
color:#252e1c;
font-weight:bold;
}
ul.gallery li a span{color:#fff}
ul.gallery li a:hover{text-decoration:underline}

Nu vei gasi nimic nou aici, in afara de faptul ca trebuie sa iti amintesti ca ai resetat toate marginile si
padding-urile elementelor si de aceea nu trebuie sa iti faci griji in legatura cu faptul ca unele browsere
aplica un padding implicit in partea stanga pentru bullet, iar altele folosesc un padding implicit pe
partea dreapta.
De asemenea, pentru a inlatura bullets ai specificat list-style:none, ce se aplica tuturor listelor. A mai
fost introdus un efect de subliniere pe hover, care functioneaza drept un bun indiciu vizual si
atentioneaza utilizatorul ca textul respectiv este de fapt un link. Daca verifici layout-ul in Firefox, el
arata ca in figura 25:
Figura 25

Totusi atunci cand se verifica in IE6 se poate vedea ca ceva nu a mers deloc bine.

Figura 26

Dupa cum se poate vedea in figura de mai sus, IE6 a pozitionat continutul coloanei din dreapta in
centru. Care ar putea fi cauza acestei erori, avand in vedere ca mai devreme era totul in regula ?

Primul lucrul pe care il poti incerca este scoaterea intregului cod HTML din coloana din dreapta si
inserarea unui text oarecare pentru a verifica daca ceea ce a cauzat problemele a fost stilizarea
coloanei din dreapta.
Dupa verificare se pare ca nu exista nimic in codul coloanei din drepta care ar fi putut sa provoace
aceasta neregularitate. Asadar, trebuie sa fi fost ceva ce s-a facut in coloana din stanga mai devreme.
Aminteste-ti ca trebuia sa iti validezi codul si sa verifici in diferite browsere. Ai fi putut uita sa verifici
IE6. Daca stergi treptat cate un rand din codul coloanei din stanga, afli ca atunci cand stergi urmatorul
rand, totul revine la locul sau.

<p><img src="images2/month1.jpg" alt="Photo of the month"


</p>
</p>
Daca verifici codul, devine clar faptul ca ai aplicat un padding elementului P care sustine imaginea si ai
adaugat o margine in dreapta de 2 pixeli tuturor imaginilor din aceea sectiune. Spatiul disponibil este
de 207px, iar imaginea are o latime de 206px la care se adauga o margine in dreapta de 2px. Nu uita
ca ai aplicat un padding de 7px elementului P, ceea ce inseamna ca elementul are acum 8px si este
prea mare pentru a se incadra in spatiul alocat. IE6 incearca sa compenseze acest lucru prin largirea
parintelui (#col1), ceea ce demonstreaza ca nu exista destul de mult spatiu pe pagina pentru toate
coloanele.
Poti fi sigur ca atunci cand o coloana s-a modificat in IE, fie un element este prea mare pentru a fi
incadrat, fie exista un bug. Pentru a rezolva aceasta problema este nevoie sa adaugi o clasa
elementului p care contine imaginea si sa miscorezi padding-ul elementului P si marginea imaginii
imbricate.

CSS

.photo p.month {padding-right:0}


.photo p.month img{margin:0}

Acum IE6 va afisa corect. Inca odata poti compara codul tau cu acesta , inainte sa treci mai departe la
urmatoarele puncte.

Coloana din centru

Arunca o privire la figura 15 din partea de sus a paginii pentru a-ti aminti cum este afisata coloana din
centru (#maincol). Primul lucru de care trebuie sa te ocupi este heading-ul din aceasta sectiune, care
pare sa fie aproape identic cu cele pe care le-am folosit in celelalte coloane. Acest lucru ne va ajuta sa
economisim cateva linii de cod pentru ca poti sa adaugi un selector separat prin virgula stilurilor h3
deja existente, astfel:

CSS

h2, h3{
color:#fff;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:131%;
margin:6px 0 10px 0;
letter-spacing:-.04em;
}
h2 {color:#120c0e;}

Culoarea este apoi inlocuita imediat cu cea corecta si heading-ul devine automat stilizat. Trebuie sa
creezi intotdeauna o structura logica in ceea ce priveste heading-urile tale, avand doar cate un
heading H1 pe pagina si continuand apoi cu celelalte tipuri de heading-uri.

Tot ceea ce a mai ramas de facut in coloana din mijloc este sa aranjezi textul. Cu cateva incercari si
erori intalnite si remediate poti sa afli dimensiunile corecte. Ia aminte faptul ca inaltimea randului
joaca un rol important aici, deoarece spatiaza randurile si ofera un aspect de pagina aerisita. Sa nu fi
tentat sa folosesti padding-ul, intrucat nu iti va spatia randurile individual, ci se va aplica intregului
paragraf, la fel cum o fac marginile. Pentru a spatia fiecare rand trebuie sa te ocupi de inaltimea
randurilor. Iata codurile ce trebuiesc folosite:

CSS:

h2 {color:#120c0e;}
#maincol p{
font-size:85%;
margin:0 0 1.9em 0;
line-height:1.6em;
padding:0 5px 0 0;
}
#maincol a{
color:#120c0e;
font-weight:bold;
}
#maincol a:hover{
color:#8bbd25;
text-decoration:underline;
}

Html

<h2>Sanke Photography Tutorials</h2>


<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit.
Pellentesque laoreet diam quis ante. Aliquam imperdiet urna quis nulla.
Integer vulputate. Nam magna lectus, dapibus ut, ultrices at, fermentum eget,
ligula. In enim quam, varius a, porta elementum, <a href="#">facilisis
quis</a>, velit. Proin nec nisi. Curabitur tempus, pede id luctus suscipit,
enim erat molestie leo, ultricies volutpat libero diam sit amet urna. Ut nec
massa. Duis eget justo placerat augue imperdiet imperdiet. Vestibulum
gravida. Fusce vitae nisl. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Etiam semper adipiscing leo.</p>
<p>Mauris feugiat metus a lectus lacinia eleifend. Aliquam aliquam eros a
nulla. Sed orci elit, semper eu, <a href="#">pharetra</a> auctor, fringilla
accumsan, ligula. Proin vestibulum fringilla mauris. Curabitur ac justo non
felis tincidunt varius. Etiam interdum egestas libero. Donec a mauris sit
amet dolor ultrices dictum. In viverra aliquam risus. <a href="#">Curabitur
arcu elit</a>, blandit a, ultrices et, semper at, neque. </p>
<p>Cras sit amet felis nec eros condimentum lobortis. Aenean purus. Vivamus
ultrices.</p>
<p><a href="#">Sanke Photography</a></p>

Codul este foarte simplu si usor de inteles, producand urmatorul rezultat:


Figura 27

Aceasta poza se aproprie foarte mult de original, asa ca o vom lasa exact cum este. Iti poti compara
codul cu acesta , pentru a te asigura ca esti pe calea cea buna, inainte sa treci mai departe la ultimul
punct.

Casuta de cautare

Trebuie sa adaugi o casuta cu text si un buton aferent, la fel ca in figura 28:

Figura 28

Input-ul text are colturi rotunjite, de aceea va trebui sa il tai din PSD ca o singura imagine si sa
modifici marimea campului pentru a corespunde cu dimensiunile acesteia. Apoi poti seta aceasta
imagine ca fundalul input-ului. Si butonul Go va trebui sa fie o imagine, iar pentru a realiza acest lucru
poti folosi un input type="image". Aici se gaseste imaginea text input , acesta este imaginea cu butonul Go.

Ambele input-uri vor fi pozitionate perfect pentru ca trebuie sa corespunda cu fundalul imaginii mari
care se gaseste deja la locul ei. Pentru a face acest lucru trebuie sa te asiguri ca atributul
position:relative este aplicat elementului parinte, astfel incat sa poti sa pozitionezi adecvat in cadrul
acelui element.

Tot ceea ce a mai ramas de facut este sa scoti marginile din input si sa aplici imaginea de fundal.
Aceasta va fi setata la pozitia corecta a inputului datorita unui bug din IE care face ca backgroundul sa
aiba scroll atunci cand este adaugat mai mult text. Pozitiile exacte pot fi aflate din PSD, iar codul final
va fi urmatorul:

Tot ceea ce a mai ramas de facut este sa scoti marginile din input si sa aplici imaginea de fundal.
Aceasta va fi setata la pozitia corecta a inputului din cauza unui bug din IE atunci cand este adaugat
mai mult text. Pozitiile exacte pot fi aflate din PSD, iar codul final va fi urmatorul:

CSS

#search{
width:975px;
height:275px;
background:url(images/search-bg2.jpg) no-repeat 0 0;
position:relative;
}
#search input{
vertical-align:middle;
position:absolute;
top:216px;
left:724px;
}
#search input.go{left:885px}
input.search-site{
background:#171b16 url(images2/inputbg.gif) no-repeat right top;
border:none;
color:#494b49;
width:149px;
height:18px;
padding:4px 5px 0;
font-size:85%;
}
<div id="search">
<form id="form1" method="post" action="">
<div>
<input class="search-site" name="search-site" type="text" value="Search the
site.." />
<input class="go" type="image" src="images2/go.gif" name="go" alt="go" />
</div>
</form>
</div>

Daca te uiti cu atentie la figura 29 de mai jos, se poate observa ca e similara cu originalul din figura
28.
Figura 29

Te poti asigura ca ai codul corect intrand aici si verificand codul intreg. Te sfatuiesc sa verifici layout-ul
in cat mai multe browsere posibile.

Poti observa ca in IE5.x marimea input-ului este incorecta. Acest lucru se poate repara usor prin
folosirea unui box ca mai jos:

CSS

* html input.search-site{
width:159px;/* ie5.x */
width:149px;/* ie6* */
height:22px;/* ie5.x */
he\ight:18px;/* ie6* */
}

Observa \ din ultimul he\ight. In final codul se va aplica doar pentru IE si de aceea poti schimba
comentariile conditionale pentru a se referi doar la IE6 sau variantele predecesoare acestuia, astfel:

HTML

<!--[if lt IE 7]>
<link href="iecss.css" rel="stylesheet" media="screen,projection"
type="text/css" />
<![endif]-->

"if lt IE 7" inseamna "pentru versiunile anterioare IE7".

In mare ai terminat, dar layout-ul poate fi imbunatatit asigurandu-te ca pozitiile tuturor elementelor
sunt corecte, modelandu-le pentru a corespunde mai bine cu PSD-ul. Exista si cateva diferente de
nuanta care pot fi rezolvate printr-o mai buna aranjare si decupare a imaginilor.

In afara de ultimul cod adaugat, restul codului este complet curat si usor de folosit. Este important sa
iti construiesti layout-ul pe baze solide, iar atunci cand vei ajunge la finalul design-ului nu vei avea
multe testari de facut.

Din moment ce ai terminat cu layout-ul, CSS-ul poate fi transferat intr-un fisier extern CSS, iar CSS-ul
si HTML-ul trebuiesc validate. Versiunea finala poate fi gasita aici . Mai ai un singur lucru de facut si
anume, sa stilizezi si pozitionezi textul copyright al footer-ului, deoarece acum lipseste. Speram ca
aceasta serie de tutoriale te-a ajutat sa intelegi mai bine acest gen de proiecte si ca iti va usura
munca de acum incolo.