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: 8184 8184 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:
1 23 »
comenteaza printeaza

Bun venit in partea a 2-a a acestui ghid. In prima parte am creat structura elementara pe care vom construi site-ul de fotografie. 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.

In continuare lucram cu acelasi fisier PhotoShop ( PSD), iar in aceasta parte a tutorialului vei mai „slefui” layout-ul putin pana cand, in final, va arata ca design-ul pe care incerci sa-l redai. In prima parte a ghidului am creat partea de sus a meniului, in timp ce partea a 2a va incepe cu logo-ul si sloganul de sub meniu.

Logo-ul si Tagline-ul

Primul element grafic important este reprezentat de logo si slogan asa cum sunt ele reproduse in Figura2:


Ca in cazul oricarui element grafic, ar trebui sa gasesti metode prin care sa poti repeta anumite sectiuni pentru a reduce marimea fisierului. Din pacate, pentru acest element nu exista o sectiune uniforma care sa poata fi repetata deoarece exista un efect care acopera intreg layout-ul. De asemenea, exista colturi rotunjite si margini ingrosate de care trebuie sa tii cont, iar numarul de imagini folosite ar fi prea mare.

E timpul sa faci un compromis. Pentru a simplifica lucrurile, poti include majoritatea elementelor intr-o singura imagine. Vei scoate logo-ul din partea stanga, precum si textul „lorem ipsum” din partea dreapta, ramanand cu un fundal ca cel din Figura3:


In acest mod, poti plasa log-ul companiei pe partea dreapta si il poti transforma cu usurinta intr-un link catre home page. Textul „lorem ipsum” a fost scos din imagine pentru ca e posibil sa se schimbe de la o pagina la alta de-a lungul site-ului si e mai bine sa poata fi mai usor de inlocuit pe viitor. Textul e cu siguranta grafic si, pentru ca face parte din logo, il vei plasa drept imagine, dar vei folosi anumite tehnici de inlocuire a textului astfel incat continutul sa fie in continuare disponibil atat pentru motoarele de cautare cat si pentru vizitatorii site-ului. Imaginea va trebui aranjata pentru a se potrivi exact cu fundalul, dar asta nu ar trebui sa fie prea dificil pentru ca poti compara pozitiile cu cele pe care le-ai taiat din PSD.

Imaginea din figura 3 va fi incarcata ca fundal (background), iar logo-ul va fi amplasat deasupra ei. Dupa cum am mentionat, textul „lorem ipsum” va fi o imagine, dar va avea si o alternativa text pentru utilizatori.

Vei folosi un element numit #tagline (slogan) ce va contine logo-ul si sloganul, iar pentru asta trebuie sa creezi un element de dimensiunile corecte pentru a cuprinde intreaga imaginea de fundal. Ai nevoie si de un efect de suprapunere datorita graficii din partea dreapta a imaginii, care se ridica odata cu textul. Acest lucru se poate implementa printr-un margin top negativ al #tagline-ului, ce va deplasa imaginea in sus, pozitionand-o langa meniu. Pentru a evita anumite probleme de nivel, vei stabili position:relative pentru meniu si #tagline, apoi vei initializa z index-ul pentru fiecare parte, astfel incat meniul sa aiba un z-index mai mare, aflandu-se deasupra fundalului si elementului #tagline.:

CSS

ul#nav{
    position:relative;
    z-index:2
    }
    #tagline{
    width:975px;
    height:116px;
    margin:-40px 0 0 0;
    background:url(images/tagbg.jpg) no-repeat 0 0;
    position:relative;
    z-index:1
    }

Retine ca doar elementele pozitionate pot avea un z index aplicat, asa ca trebuie sa adaugi position:relative daca elementul nu este deja pozitionat.

Metoda de inlocuire a imaginii pe care o vei folosi consta in pozitionarea imaginii intr-un element intern, adus ulterior deasupra continutului text pentru a-l ascunde. Atat timp cat stabilesti o dimensiune potrivita cu inaltimea si latimea imaginii, poti initiliaza overflow cu hidden, iar orice text care "da pe afara" va fi ascuns. Acest lucru face ca textul sa fie disponibil chiar daca imaginile sau CSS-ul ar fi oprite. Dupa ce vei realiza acest lucru pentru logo si tagline, vei obtine urmatorul cod HTML si CSS:

HTML

<div id="tagline">
<h1><a href="#">Sanke Photography<em><img src="images/logo.jpg" title="Sanke Photography logo" alt="Sanke Photography" /></em></a><span>Sanke Photography simply the best for your photography tutorials<em></em></span></h1>
</div>

CSS

/* codul pentru slogan */
#tagline{
width:975px;
height:116px;
margin:-40px 0 0 0;
background:url(images/tagbg.jpg) no-repeat 0 0;
position:relative;
z-index:1
}
#tagline a,
#tagline a em{
position:absolute;
width:218px;
height:68px;
overflow:hidden;
left:27px;
top:39px;
}
#tagline a em{
cursor:pointer;
left:0;
top:0;
/*background:url(images/logo.jpg) no-repeat 0 0; foloseste asta ca o alternativa pentru o imagine in html*/
}
#tagline span,
#tagline span em{
position:absolute;
width:383px;
height:51px;
overflow:hidden;
left:408px;
top:51px;
}
#tagline span em{
left:0;
top:0;
background:url(images/tagline.jpg) no-repeat 0 0;
}
Pagina:
1 23 »
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
4800
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4735
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4610
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4545
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4405
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Word Gimp Ruby on Rails Action Script Sony Vegas Java Outlook SWF PSD JSON Verilog Flash Excel Javascript SEO Fotografie Photoshop RoR COREL DRAW StyleSheet Swift 3D MySQL Python Fireworks Dreamweaver XML Vista AJAX CSS Lightroom PHP HTML Illustrator Bridge Powerpoint XHTML
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