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

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Layout-uri (4)

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

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

Total vizualizari: 9541 9541 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  www.csshowto.com  
Autor:  www.csshowto.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 12 3 4 »
comenteaza printeaza

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}
Pagina:
« 12 3 4 »
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4180
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4000
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
MySQL JSON COREL DRAW Outlook AJAX XHTML Vista Flash Fireworks Excel Python Dreamweaver HTML SWF CSS Action Script PHP PSD Illustrator Javascript Lightroom Sony Vegas Ruby on Rails Java Verilog Gimp Photoshop SEO XML Powerpoint Bridge Fotografie StyleSheet Word Swift 3D RoR
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software