Ghid HTML in pasi simplii - de la PSD către CSS (PARTEA II)

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

Cod:

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

Cod:

<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

Cod:

/* 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;
}

Imaginile folosite le puteti descrca 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

Cod:

<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

Cod:

#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

Cod:

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

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


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

Cod:

<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

Cod:

#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

Cod:

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

Cod:

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



Tutorial facut De [MOD]Anonym pentru WorldTuttorials.tk