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: 5961 5961 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

Codul este foarte simplu si usor de inteles, producand urmatorul rezultat:

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 */
height:18px;/* ie6* */
}

Observa din ultimul height. 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

<!--[if lt IE 7]>
<link href="iecss.css" rel="stylesheet" media="screen,projection" type="text/css" />
<![endif]-->

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

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