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 IV-a)

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

Total vizualizari: 5997 5997 afisari   |   Comentarii  1   |   Rating   |   (5 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:
1 2 »
comenteaza printeaza

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>
Pagina:
1 2 »
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
Adi , Duminica, 02 August 2009
#1

Foarte buna seria de tutoriale. Va multumesc!

Raporteaza acest comentariu ca injurios!
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
4460
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4410
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4280
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4155
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Photoshop Excel Java Lightroom HTML Gimp Sony Vegas PHP Javascript COREL DRAW XML CSS Vista Word PSD Bridge Outlook Ruby on Rails Python Dreamweaver MySQL RoR Fotografie StyleSheet Flash SEO Action Script JSON Verilog Illustrator Powerpoint Fireworks SWF XHTML Swift 3D AJAX
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