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.