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: 9698 9698 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:
« 123 4
comenteaza printeaza

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.

Pagina:
« 123 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
4550
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4445
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4395
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4265
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4150
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Outlook Vista Lightroom MySQL Bridge HTML PSD Swift 3D Excel SEO XHTML Word Fotografie AJAX Fireworks Java Ruby on Rails Powerpoint Photoshop COREL DRAW Gimp Javascript Action Script XML JSON Illustrator Dreamweaver Flash SWF RoR Python Sony Vegas Verilog CSS StyleSheet PHP
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