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: 7977 7977 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 2 3 »
comenteaza printeaza

Imginile folosite le puteti descarca de aici.

In el am adaugat cursor:pointer pentru a reaminti browserului IE ca se afla inca in interiorul unui link si trebuie sa redea cursorul corect. Daca te uiti cu atentie la codul html, vei vedea ca h1 nu are nici un atribut de stil si de aceea poti sa renunti la div-ul care il contine si poti aplica ID-ul direct pe h1, dupa cum urmeaza. Pur si simplu copiaza atributul ID in h1 si sterge tag-ul div.

HTML

<h1 id="tagline"><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>

Singura schimbare in CSS este sa scoti urmatorul cod care acum devine redunant:

CSS

#tagline h1{
margin:0;
}

Layout-ul realizat pana acum poate fi vazut


aici si ar trebui sa verifici daca este acelasi cu al tau. Figura 4 iti arata rezultatele muncii tale de pana acum:


Totul arata destul de bine, dar in acest punct ar fi indicat sa verifici pagina pe cat mai multe browsere, pentru a te asigura ca totul functioneaza corect. Ar trebui sa incerci si sa maresti textul pentru a vedea daca exista vreo suprapunere inacceptabila. E de asteptat sa existe mici probleme legate de redimensionarea textului, dar ar trebui sa incerci sa pastrezi intotdeauna pagina operationala in limite rezonabile.

Figura 5 arata textul cu o dimensiune mai mica sau mai mare in IE6:


Casuta Search si imaginea de fundal

Avansand catre urmatorul element compus din casuta search si imaginea principala din header, trebuie ca in primul rand sa te decizi asupra calitatii acestei imagini. E vorba de o imagine mare ce va genera un fisier cu o marime considerabila. Te sfatuiesc sa o micsorezi la 50k (desi si asa e mult), dar initial ar fi avut de 4 ori mai mult. Deoarece e vorba de un site de fotografie e recomandat sa folosesti imagini de o calitate buna; cel mai bine ar fi sa imparti imaginea si sa realizezi 2 versiuni, in cazul in care clientul va dori mai tarziu o calitatea mai buna a pozelor. Foloseste in site imaginea cu dimensiunea mai redusa, dar salveaza si o copie a acesteia la o calitate superioara.

Scoate casuta search din imagine si ajusteaz-o la dimensiunile potrivite. Daca iti arunci privirea in jos pe pagina, vei vedea ca elementele urmatoare au colturile rotunjite si marginile ingrosate, iar pentru a economisi timp poti include partea de sus a elementului urmator in imaginea casutei search. Rezultatul va fi cel din Figura6:


Avand in vedere ca acest element are dimensiuni fixe si nu va exista vreun text care sa iasa din limite cand va fi marit, poti pozitiona intreaga imagine ca fundal, avand o latime si inaltime fixe. Acest lucru simplifica lucrurile si iti permite sa asezi casuta search la locul potrivit, utilizand coordonate absolute. Pentru a folosi absolute:positioning in interiorul acestui element, trebuie sa te asiguri inca o data ca ai setat position:relative dupa cum urmeaza:

CSS

#search{
width:975px;
height:275px;
background:url(images/search-bg.jpg) no-repeat 0 0;
position:relative;
}

HTML

<div id="search"></div>

Acum layout-ul tau incepe sa capete proportii rezonabile, dupa cum se poate vedea in Figura7:


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