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 la CSS (Partea a II-a)

11.11.2008
Ghid HTML in pasi simpli - de la PSD la CSS (Partea a II-a)

Acesta este cel de al 2-lea din seria de 4 tutoriale, ce te invata cum sa transformi un fisier PSD intr-o pagina html cu ajutorul CSS. Acestea sunt primele dintr-o serie de articole cu ajutorul carora vei putea construi un site complet operational in Xhtml si CSS.

Total vizualizari: 8253 8253 afisari   |   Comentarii  4   |   Rating   |   (3 voturi)   |   Timp necesar: 60 min 60 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

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

Cele 3 coloane principale

Putem trece la lucruri mai complicate si anume, la partea principala a site-ului ce contine 3 coloane de-a lungul ecranului. Va trebui sa iei in considerare urmatoarele 3 lucruri importante.

  • Fiecare coloana contine un gradientul vertical care se estompeaza
  • Cele 3 coloane vor avea acceasi inaltime
  • Coloana din dreapta are un colt rotunjit din partea de jos

Pentru punctul 1, poti alege una dintre urmatoarele variante: din fiecare coloana poti taia o sectiune verticala de apx. 5px pe 250px ce va contine intreg gradientul. Apoi va trebui sa repeti aceasta imagine in fiecare din cele 3 coloane inserate. Singura problema cu aceasta metoda e faptul ca PSD-ul arata de asemenea si un mic gradient orizontal, precum si colturi ingrosate care se decoloreaza. Daca ai continua cu aceste mici bucati, vei avea nevoie de cel putin inca 4 imagini pentru fiecare colt si va trebui sa renunti la gradientul orizontal.

A doua solutie consta in realizarea unor imagini cu intreg fundalul unei coloane. Cu toate ca la prima vedere aceasta metoda ar putea parea oarecum brutala si neoptimizata, in realitate poti taia o imagine destul de mare de 975px x 270px, micsorandu-i in schimb calitatea pana obtii un fisier de aproximativ 3k. Desi imaginea originala va pierde putin din culoare, vei salva multiple imagini de fundal si te vei apropia mai mult de design-ul original. Rezultatele acestei metode le poti vedea in Figura 8. Ca si pana acum, imaginea contine si o portiune din fundalul paginii, pentru a reda efectul de intunecare din background.


Punctul 2 poate fi rezolvat prin crearea unei bucati orizontale cu toate culorile celor 3 coloane, repetand-o ca imagine de fundal pentru sectiunea ce le contine. Pentru a crea aceasta "felie", asigura-te ca ea include culoarea finala a gradientului vertical. Vei avea urmatoarea imagine ca rezultat:


Aceasta imagine va fi repetata pe axa y si va umple intreaga inaltime a coloanelor, ce vor ramane mereu egale una cu cealalta. Apoi, in partea de sus a acestei sectiuni poti incarca imaginea cu gradientul din Figura8, obtinand astfel efectul pe care l-ai dorit. Desigur, pentru cea de-a doua imagine de fundal va trebui sa introduci un nou element, dar compromisul este unul mic raportat la efectul obtinut.

Pe masura ce pagina se mareste, bucata care se repeta in background isi intra in rol, iar daca ai taiat imaginile corect ar trebui ca trecerea dintre cele doua imagini sa nu se observe.

Asadar, codul html este urmatorul:

HTML

<div id="main">
<div id="content" class="clearfix">
<div id="col1"></div>
<div id="maincol"></div>
<div id="col2"></div>
</div>
</div>

Elementul nou numit #content a fost adaugat pentru a incarca imaginea mare cu gradientul, in timp ce #main va include bucata ce se repeta. #content va contine de asemenea si cele 3 coloane. Codul CSS folosit va fi urmatorul:

CSS

#main,#content{width:975px}
#main{background:url(images/3col-bg.jpg) repeat-y 0 0}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
html #content {height:270px}/* pentru ie6 si mai putin*/

Am introdus o rectificare pentru IE6 si versiunile mai vechi deoarece acesta nu recunoaste atributul min-height, dar, din fericire, intepreteaza height intr-un mod asemanator cu min-height. In acest caz ai nevoie de min-height din cauza gradientului vertical si daca nu vei aloca o inaltime suficienta, imaginea de fundal se va repeta dintr-o sectiune care nu corespunde. Rezultatele codului de mai sus pot fi vazute in Figura 10:


Pentru a permite continutului sa fie introdus in aceste coloane trebuie sa le masori si sa aplici marginile necesare float-urilor pentru a le alinia acolo unde doresti:

CSS

#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* cure IE6 double margin bug*/
float:left;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* cure IE6 double margin bug*/
}

Trebuie sa te asiguri ca toate aceste dimensiuni incap in containerul tau, in caz contrar, diferitele sectiuni vor fi pozitionate gresit. Ai 975px la dispozitie, iar daca adunam marginile si latimile div-urilor, obtinem tot 975 px. De asemenea, exista si o rectificare in codul pentru IE6, care va dubla marginile div-urilor in locul in care partile laterale intalnesc containerul parinte. Aceasta rectificare consta in adaugarea optiunii display:inline. Div-urile sunt de tipul display:block si nu pot fi transformate in display:inline, ceea ce inseamna ca reparatia e de fapt absurda si nu va avea nici un efect, dar din fericire va "vindeca" bug-ul. Alte browsere nu vor lua in considerare display:inline.

Tot ce a ramas (grafic vorbind) pentru aceasta sectiune este adaugarea unui colt rotunjit in partea de jos a coloanei din dreapta, dupa cum se vede in design-ul original. In plus, trebuie sa observi ca intreaga pagina mai cuprinde inca 2 colturi. Nu exista nici o cale prin care sa gasesti partea de jos a coloanei din dreapta pentru a plasa o imagine rotunjita acolo, deoarece continutul acestei coloane este doar un div cu inaltime. Asadar, va trebui sa abordezi altfel problema si sa folosesti o imagine de fundal in elementul footer.

Footer-ul

Vei taia baza celor 3 coloane intr-o singura imagine, ca cea din Figura 11:


Codul CSS e usor de inteles:

#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
}

HTML:

<div id="footer"></div>

Poti arunca o privire la layout-ul realizat pana acum; cele 3 coloane sunt colorate in rosu pentru a verifica daca pozitiile sunt corecte:


Totul arata bine, deci poti inlatura culoarea rosie.


Ce a mai ramas de facut

Cu acest tutorial am dus la bun sfarsit structura principala a site-ului. In urmatoarea parte a articolului vom adauga continut fiecarei coloane, impreuna cu partea de search pe care momentan am lasat-o deoparte. In plus, va trebui sa gasesti o cale prin care sa plasezi imaginea watermark din figura 13 in partea de jos a coloanelor externe.


Toate acestea si multe alte lucruri vor urma in partea a3a.

Pagina:
« 12 3
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (4) spune-ti parerea
adytzul89 , Miercuri, 22 August 2012, ora 17:01
#4

Voi relua tutorialul, dar psd-ul nu este la download, nici imaginile urcate nu sunt toate

Raporteaza acest comentariu ca injurios!
Pustiu Pustiu , Miercuri, 22 August 2012, ora 02:02
#3

@adytzul89: poate s-a strecurat vreo greseala in codul html sau css. Incearca sa reiei pasii din momentul in care rezultatul nu mai este cel dorit.

Raporteaza acest comentariu ca injurios!
adytzul89 , Marti, 21 August 2012, ora 16:01
#2

am uitat sa va arat si poza .. -> http://uploadimage.ro/images/15326294119494824035.png

Raporteaza acest comentariu ca injurios!
adytzul89 , Marti, 21 August 2012, ora 15:59
#1

Din pacate nu mi-a iesit faza cu contentu .. si aici m-am blocat :( din pacate

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