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 I)

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

Total vizualizari: 14026 14026 afisari   |   Comentarii  7   |   Rating   |   (6 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

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.

Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(6 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (7) spune-ti parerea
ioan489 ioan489 , Duminica, 05 Mai 2013, ora 10:08
#7

Foarte bun tutorialu,dar iti recomand ca in alte tutoriale sa fii mai explicit, sa inteleaga tot romanul.(Oricum pt. tutorial nota 10)

Raporteaza acest comentariu ca injurios!
Pustiu Pustiu , Luni, 21 Mai 2012, ora 04:45
#6

@teodorradu22: Ar fi fost poate util sa specifici ce anume nu ai inteles. Te rog observa ca acest tutorial se adreseaza unui public cu un nivel de experienta si cunoastere mediu in ceea ce priveste domeniul: respectiv web design - html. Neavand aceste cunostinte, este posibil ca informatiile prezentate sa para mai dificile. Iti recomand sa pornesti cu sectiunea HTML / Bazele HTML pentru a intelege intai notiunile discutate. Spor!

Raporteaza acest comentariu ca injurios!
teodorradu22 , Duminica, 20 Mai 2012, ora 09:57
#5

sa mor de'am inteles ceva :|

Raporteaza acest comentariu ca injurios!
flavy flavy , Sambata, 19 Septembrie 2009, ora 10:15
#4

Cred ca este cel mai bun tutorial de codare din cate am gasit.Multumesc

Raporteaza acest comentariu ca injurios!
xdinna xdinna , Marti, 15 Septembrie 2009, ora 16:12
#3

Foartte Bun tutorialu. Niciodata n-am stiut cum sa transform din psd in HTML, gasisem niste prostii cu dreamweaver

Raporteaza acest comentariu ca injurios!
mihaict , Sambata, 27 Iunie 2009
#2

VORBA LU FOARTE UTIL!!! VAI DOAMNE CE UTIL E TOT CONTZINUTU ASTA! II MULTUMESC DEPLIN CELUI CARE L-A PUS AICI DEJA PAGINA ASTA AM PUS-O LA FAVORITES :))) BRAVOO TOT ASA :D

Raporteaza acest comentariu ca injurios!
Tj , Joi, 06 Noiembrie 2008
#1

foarte util .. 10x

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