Documente Academic
Documente Profesional
Documente Cultură
Ghid HTML in Pasi Simpli de La PSD Catre CSS
Ghid HTML in Pasi Simpli de La PSD Catre CSS
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)
latime variabila sau intr-unul em based. Pentru moment insa, vom ramane la pixeli pentru a ne fi mai usor. Reactia mea initiala cand am vazut PSD-ul a fost ca designer-ul a folosit mult gradient si efecte de umbra in locuri diferite, dar si ca a adaugat colturi rotunjite la cateva din elementele de design. De exemplu, backgroundul are un gradient vertical de la #282f27 la #000000, pe o portiune de 880 pixeli. Acest lucru nu reprezinta o problema propriu-zisa deoarece putem repeta o imagine pe axa x, iar in acelasi timp putem seta culoarea de fundal in tag-ul body la valoarea pe care o va avea fade-ul final (#000). Aceasta operatiune va permite layout-ului sa se extinda vertical oricat va fi nevoie. Complicatiile vor consta in faptul ca elementele header vor avea un fundal usor mai intunecat plasat in jurul lor, care va varia in functie de culoarea backgroundului. Avem 2 optiuni in acest moment:
Creeaza efectul de intunecare in jurul elementului folosind transparenta PNG, astfel incat fundalul intunecat din body sa se poata vedea prin imaginea PNG opaca. Cu toate ca acest lucru e posibil cu majoritatea browser-elor, exista probleme grave cu IE6, in sensul ca el nu va reda PNG-ul transparent in mod corespunzator. Ai putea folosi filtrul alpha-image loader pentru a compensa in IE5 si 5.5 daca nu ai de ales, dar si acest lucru aduce alte probleme, de aceea ar trebui utilizat numai daca nu exista alta
alternativa. Imparte elementele fundalului cu umbra gradientului la locul ei si potriveste-o cu fondul din body. Atat timp cat elementele din header au o inaltime fixa, atunci totul va merge bine. Desigur, daca textul va fi reorganizat si elementelor li se va permite sa se mareasca, atunci e posibil ca acestea sa nu se mai imbine corect. Totusi, cred ca acesta este un pret mic de platit pentru a lasa codul cat mai simplu. Asadar, vom alege aceasta metoda, iar daca aflam mai tarziu ca nu e indeajuns de buna, va trebui sa o regandim.
Structura paginii
Pentru a iti face o idee despre ce elemente ai nevoie pentru intreaga pagina, poti crea o schita a siteului 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 #tagline #search #main #col1 #maincol #col3 #footer Footer casuta de acesta este coloana coloana un logo cautare container si meniul si imaginea pentru cele din din de 3 principal slogan fundal coloane stanga centru dreapta
coloana
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 }
CSS doar pentru IE:
*/ */ */ */ */ */ ie5.+*/
rel="stylesheet"
media="screen,projection"
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 ati 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
la
stanga
datorita
rectificarii
pentru
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.
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.
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; 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; }
foloseste
asta
ca
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
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:
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
<div id="search"></div>
Acum layout-ul tau incepe sa capete proportii rezonabile, dupa cum se poate vedea in Figura7:
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, asigurate 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.
<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:
<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:
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) zindex 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 propriuzise, 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:
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:
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 Underline Photo of the month icon
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>»</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 textalign: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;
alt="Photo
of
the
month"
width="206"
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:
<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>¤</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="readmore"><a href="#">Visit Gallery <span>»</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.
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.
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>»</span> <li><a href="#"><span>»</span> <li><a href="#"><span>»</span> <li><a href="#"><span>»</span> <li><a href="#"><span>»</span> <li><a href="#"><span>»</span> </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.
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
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>
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
rel="stylesheet"
media="screen,projection"
"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.