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: 10129 10129 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:
1 234 »
comenteaza printeaza

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.

In momentul de fata ai ajuns aici:

Figura 14

Comparat cu PSD-ul original din figura 15, poti vedea ca mai ai destul de mult de lucru:

Figura 15

Elementele pe care le vom aborda in partea a III-a si a IV-a sunt urmatoarele:

  • Pozitionarea imaginii watermark la baza coloanelor din stanga si din dreapta
  • Adaugarea casutei de cautare deasupra imaginii din sectiunea header
  • Adaugarea de continut celor 3 coloane impreuna cu iconitele asociate
  • Adaugarea mesajului copywright in footer

Majoritatea lucrurilor de mai sus tin de cunostiinte CSS de baza, iar singurele 2 lucruri care ar putea pune probleme sunt imaginile watermark care stau la baza coloanelor din stanga si din dreapta. Restul continutului va fi abordat pas cu pas pentru a fi cat mai usor de inteles.

Watermark-ul

Prima cerinta va fi sa plasezi urmatoarea imagine la baza coloanelor externe:

Figura 16

Exista o serie de probleme care trebuiesc depasite si e mai bine sa le enumeram pentru a avea o idee cat mai clara de ceea ce trebuie sa obtii.
Intr-o ordine oarecare, trebuie:

  • Sa plasezi imaginea in partea de jos a coloanei astfel incat sa ramana mereu acolo, indiferent de lungimea coloanei
  • Sa te asiguri ca imaginea se afla in fundal si sub text
  • Sa te asiguri ca imaginea se afla deasupra fundalului existent, iar tranzitia dintre ele nu este vizibila.

Punctul 1 presupune abordarea problemei intr-o maniera creativa, deoarece coloanele nu au inaltime in realitate, ele fiind create printr-o imagine de fundal in container-ul parinte. Asadar, va trebui sa urmezi exemplul stabilit in prima parte a tutorialului, pozitionand watermark-ul relativ la un element aflat sub coloane, adica elementul footer.
Deoarece footer-ul are deja o imagine de fundal, deci nu ii putem adauga inca una. De aceea, imaginile vor fi pozitionate in mod absolut fata de footer, folosind o valoare negativa pentru top, pentru a le aduce la locul dorit.

Pentru cea de-a doua problema, va trebui sa te asiguri ca fiecare element are setat nivelul (level) z-index corespunzator pentru a putea controla nivelurile fondului initial, al imaginii watermark plasata absolut si al continutul textual, ceea ce inseamna ca trebuie sa ai in vedere 3 nivele in acest proces.
Pentru ca z-index-ul sa functioneze trebuie sa te asiguri ca elementele nepozitionate sunt setate pe position:relative, ceea ce iti permite sa asezi elementele ce au coordonate absolute.

Pentru punctul 3 va trebui sa faci mai multe incercari pentru a putea vizualizare care din ele arata cel mai bine. Una dintre metodele folosite consta in crearea unui gif cu un fond transparent. Acest fond va fi verde pentru a corespunde culorii de fundal, dar va fi setat drept culoare transparenta in speranta ca va ascunde imaginile "decupate" din gif-ul transparent.
Daca aceasta metoda esueaza, e posibil sa fie nevoie sa folosesti un PNG transparent si un filtru de incarcare a imaginii de tip alpha pentru IE,.

In abordarea punctului 3 am creat aceasta imagine pentru coloana din stanga si aceasta pentru coloana din dreapta prin taierea elementelor potrivite din PSD.

Pentru a pozitiona imaginea (punctul 1 si 2), mai intai, footer-ul trebuie sa contina atributul position:relative pentru a crea o stiva si pentru a-ti permite sa setezi un z-index corespunzator. Pentru a fi sigur ca imaginea ramane deasupra continutului de mai sus ii vei stabili continutului z-index-ul 1 si footer-ului un z-index 2.
Apoi, pentru coloanele ce vor fi inserate de-a lungul ecranului poti seta un z-index 3 pentru a mentine textul deasupra imaginii watermark. Inca nu exista imagini sau culori de fundal pe coloanele propriu-zise, deci nu trebuie sa iti faci probleme. Codul CSS necesar e urmatorul:

/* continutul principal */
    #main,#content{width:975px}
    #main{
    background:url(images/3col-bg.jpg) repeat-y 0 0;
    position:relative;
    z-index:1;
    }
    #content{
    background:url(images/3col-top.png) no-repeat 0 0;
    min-height:270px;
    }
    * html #content {height:270px}/* pentru ie6 si versiunile anterioare*/
    #col1{
    width:207px;
    margin:0 28px 0 18px;
    display:inline;/* remediaza bug-ul IE6 double margin */
    float:left;
    position:relative;
    z-index:3;
    }
    #maincol{
    width:444px;
    margin:0 48px 0 0;
    float:left;
    position:relative;
    z-index:3;
    }
    #col2{
    width:180px;
    float:left;
    margin:0 50px 0 0;
    display:inline;/* remediaza bug-ul IE6 double margin */
    position:relative;
    z-index:3;
    }
/* footer si copyright */
    #footer{
    width:975px;
    padding:20px 0 0 0;
    background:url(images/3col-base.jpg) no-repeat 0 0;
    clear:both;
    position:relative;
    z-index:2;
    }
    .watermark{
    background:url(images2/flame2.gif) no-repeat 0 0;
    position:absolute;
    width:186px;
    height:209px;
    clear:both
    }
    .w1{left:45px;top:-189px}
    .w2{
    right:45px;
    top:-170px;
    height:176px; 
    background:url(images2/flame3.gif) no-repeat 0 0;
    }

Codul CSS in plus a fost imbinat cu cel existent dupa cum se arata mai sus. Ceea ce trebuie sa observi e folosirea unei clase "watermark" ce defineste cateva proprietati consecvente pentru elemente si a claselor "w1" si "w2" pentru a implementa diferentele de pozitie. Aceste lucruri inlocuiesc aproximativ 4 linii de cod, dar merita aplicate deoarece orice lucru care reduce marimea codului sursa e bun, atat timp cat e usor de citit si functionalitatea nu a avut de suferit. Clasele sunt aplicate impreuna folosind un spatiu pentru a le separa. De exemplu:

e.g. class="watermark w1"

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