1

VIII. Construirea paginii de start cu HTML

Urmtorul pas implic s transformm macheta ntr-o pagin web funcional. Vom face
acest lucru n mai multe etape:
-vom decide modul de structurare a documentului care va conine coninutul
- vom construi scheletul documentului HTML, definind diferitele regiuni din pagin
folosind un marcaj simplu, bine structurat
- vom aplica un stil de baz, pentru a crea un layout pentru coninut folosind Cascading
Style Sheets (CSS)
- vom aplica de asemenea culori, stiluri de font i imagini.
O pagin web nu este o pnz de desen fix precum documentul Photoshop, deci s-ar
putea s nu putemface translaia exact. Spre deosebire de o brour tiprit sau un afi, o pagin
web nu are o dimensiune fix. Zona de vizualizare a unui browser web se va modifica n funcie
de dimensiunea ecranului sau de dimensiunea ferestrei stabilite de ctre utilizator. De exemplu,
utilizatorul poate vizualiza site-ul printr-o fereastr mic sau prin una care umple toat limea i
nlimea ecranului. Aproape ntotdeauna este nevoie s facemunele ajustri pe parcurs. n final,
pagina real nu va arta exact la fel ca macheta, dar ele vor fi asemntoare, astfe nct
majoritatea oamenilor nu vor fi n msur s fac diferena. Nu trebuie insistat foarte mult pentru
a ne asigurac fiecare pixel este exact in locul potrivit.

Standardele web

Separarea preocuprilor este ceva de care dezvoltatorii cu experien in seama tot timpul.
Cnd dezvoltai o aplicaie web care are modele, controlere i view-uri, este indicat s separai
logica afirii de logica afacerii. Un site web conceput care ine seama de standardele web va
avea coninutul separat de design si de comportament. Proiectarea care ine seama de standardele
web se refer la utilizarea celor mai bune practici i filozofii standardizate. Organismele de
standardizare, cum ar fi World Wide Web Consortium (W3C) stabilesc multe din aceste
standarde. Alte standarde sunt pur i simplu cele mai bune practici stabilite de pionierii
comunitii de web design.
Un site web sau pagin web care este n conformitate cu standardele web are urmtoarele
atribute:
coninutul i structura sunt marcate folosind HTML valid sau XHTML. Aceasta include
utilizarea unui doctype i a unui set de caractere adecvate.
prezentarea este redat folosind CSS valid. Acest lucru nseamn c CSS reglementeaz
aspectul site-ului, culorile de font, stilurile de font, culorile paginii i alte aspecte ale prezentrii
nelegate de coninut.
paginaweb ar trebui s fie accesibil tuturor, indiferent de browser-ul web, platform,
sau de invaliditate.
site-ul este n conformitate cu ghidurile de utilizare de baz pentru navigare, link-uri, i
structur.
comportamentul este separat de coninut i prezentarea acestuia.
Cum implementai ceva de genul acesta? Putei ncepe prin construirea unui document
HTML valid care conine coninutul i definete structura.

Structura paginii de start

2
ncercai s vizualizai paginile ca regiuni de coninut, nu ca rnduri i coloane i va fi
mult mai uor s dezvoltai pagini care nu numai c sunt conforme cu standardele web, dar sunt i
mult mai flexibile (pentru a putea schimba foilede stil i aspectul paginii).
Pentru Foodcenter, dorim ca tot coninutul pentru bara lateral s fie n regiunea proprie i
tot coninutul pentru zona principal s fie n regiunea proprie. Pentru aceasta vom face acelai
lucru pe care l-am fcut cnd am creat macheta: vom mpri pagina n seciuni.
Putei mpri macheta n patru regiuni de baz:
Antet
Bara lateral
Zonaprincipal
Subsol
Aceste patru regiuni sunt uor de identificat. Putemconstrui o structur flexibil pe care o
putemmanipula cu uurin dac vom mpri n continuare pagina n subseciuni. Pentru a
realiza acest lucru trebuie s cutm grupri logice de coninut.
De exemplu, putem prezenta regiunile machetei sub form de schi:
Page
- Header
- Middle
* Sidebar
Search Recipes
Browse Recipes
Popular Ingredients
* Main
- Footer
n acest exemplu, avem o regiune de ansamblu numit Page. Am mprit aceast regiune
n 3 regiuni: antet (Header), mijloc (Middle), subsol (Footer). Regiunea extern, sau printe,
acioneaz ca un punct de referin pe care l putem folosi pentru poziionare; putem de asemenea
controla limea total a paginii prin schimbarea limii regiunii externe.
Bara lateral i zona principal sunt cuprinse n regiunea numit Middle. Ca i regiune
extern Page, regiunea Middleacioneaz ca un punct de referin, dar ofer i flexibilitate. Este
posibil s nu dorim o regiune Sidebar pentru unele dintre pagini (de exemplu am putea dori ca
regiunea Main s aib limea maxim pentru afiarea coninutului). Pe acele pagini putem omite
regiunile Sidebar i Middle i plasa coninutul chiar n regiunea Main, folosind CSS pentru a-l
redimensiona.
Aceast structur este des folosit. Este structura pentru layoutul standard pe dou
coloanecu un antet i un subsol, unul dintre cele mai frecvente tipuri de site-uri web. Designul
bazat pe standarde are avantajul c putem reutiliza acest schelet pentru un alt proiect, pentru c
foilede stil vor defini limile coloanelor, culorilei alte elemente vizuale. Aceast abordare este
util pentru site-urile web care implic teme proprii pentru utilizatori. Vizitai
http://www.csszengarden.com pentru a vedea un exemplu de document unic afiat n mai multe
moduri.

Marcajul semantic

Marcajul semantic face ca documentul s fie structurat astfel nct s poat fi interpretat
de maini, dispozitive sau oameni. De exemplu, crawlerul web Google utilizeaz tag-uri precum
h1 i atributele href din link-uri pentru a determina importana paginilor web i coninutului lor.
3
Folosirea CSS i standardelor web nepermite s definim aspectul unui site web folosind
fiiere pe care utilizatorii finali le descarc o singur dat, dar care exist pe toate paginile pe care
le oferii. Acest lucru mbuntete performana i economisete bani.
Putem utiliza CSS pentru a rezolva problemele vizuale destul de uor, dac nelegem
cum funcioneaz totul. De exemplu, am putea utiliza CSS pentru a modifica modul n arat toate
titlurile sau pentru a modifica aspectul unui singur titlu pe o singur pagin. Cel mai important
lucru este c un fiier CSS poate fi aplicat la mai multe pagini, astfel nct n loc s modificm
fiecare titlu pe 100 de pagini, putemaduga cteva linii la foaia de stil.

Scheletul paginii de start

Vom deschide un editor de text (ex. Notepad sau Adobe Dreamweaver CS4) i vom crea
un nou fiier. Vom salva acest fiier ca index.html. Pagina index.html va fi pagina de start pentru
site. Serverele web vor oferi pagina index ori de cte ori vine o cerere pentru o cale i pagina nu
este specificat.

Doctype
Fiecare pagina HTML trebuie s aib un doctype pentru ca un instrument de validare s
poat verifica dac marcajul este codificat corect. Este foarte important s v asigurai c avei o
pagin valid nainte de a aplica foi de stil sau JavaScript. Marcajul invalid poate duce la
aplicarea incorect a stilurilor sau cauza probleme cu codul JavaScript. Browser-ul web se
bazeaz pe un document bine format pentru a aplica corect stiluri i comportamente, astfel nct
omiterea nchiderii unei etichete ar putea genera probleme browser-ului unui utilizator.
Doctype-urile foreaz anumite browsere s interpreteze o pagin diferit. De exemplu,
Internet Explorer 6 are un mod quirks care trece peste marcajul invalid, dar pagina nu va
funciona n alte browsere care sunt mai stricte cu privire la ceea ce redau. Putem utiliza o
declaraie doctype care foreaz IE 6 n modul standards. Putem alege ntre doctype-uri diferite.
Doctype-ul utilizat dicteaz ce tag-uri putemutiliza n document, i regulile de validare care vor
fi folosite pentru a verifica marcajul. Cel mai frecvent utilizate doctype-uri sunt XHTML 1.0
Transitional i HTML 4.01 Strict.

XHTML 1.0 Transitional
Pentru o lung perioad de timp, XHTML Transitional a fost considerat cea mai bun
modalitate de a construi pagini web. Motivul principal pentru utilizarea sa a fost c a forat
browserele web n modul standard. Dei aceasta nu mai este o prioblem actual, XHTML
continu s aib unele avantaje fa de HTML. Marcajul XHTML este mai strict, ceea ce foreaz
dezvoltatorii s se gndeasc mai mult la structura unei pagini. Impune de asemenea utilizarea
literelor mici n momentul definirii etichetelor i atributelor, ceea ce poate fi util la procesarea
documentelor. n cele din urm, impune ca fiecare tag s aib o etichet de nchidere.
Din pcate, anumite browsere se lovesc de problemele care nltur beneficiile utilizrii
XHTML-ului. Internet Explorer nu tie cum s interpreteze XHTML exceptnd cazul n care este
oferit ca HTML folosind tipul de coninut text/html n loc de aplication/xhtml +xml. Oferind
XHTML ca HTML browserele sunt forate s trateze problema tag soup (etichetarea care nu
implic o sintax i o structur a documentului HTML corect); browser-ul ateapt tag-uri
HTML, dar obine XHTML n schimb, din acest motiv reinterpretnd documentul
(http://xhtml.com/en/xhtml/serving-xhtml-as-html/). Pe lng faptul c pierdem o serie de
beneficii ale XHTML-ului, aceste probleme ale browser-elor pot contribui la apariia altora n
paginile afiate. De exemplu, etichetele care se auto-nchid div i span, care sunt perfect valide n
XHTML vor suferi modificri n anumite browsere cnd sunt oferite ca text/html (prin eliminarea
4
slash-ului de final) lsndu-le nenchise, ceea ce afecteaz toate elementele care urmeaz
(http://www.webdevout.net/articles/beware-of-xhtml#myths).
Aceste probleme au determinat anumii designeri i dezvoltatori s revin la HTML clasic
n formatul HTML 4.01 Strict (http://mezzoblue.com/archives/2009/04/20/switched/) sau la
specificaiile HTML 5.

HTML 4.01 Strict
Cu HTML 4.01 Strict, elementele trebuie s adere la o ierarhie, nu se ine cont de
majuscule/minuscule, unele etichete nu trebuie s fie nchise i tag-uri cu auto-nchidere nu
exist. Acestea sunt doar aspecte de limbaj, i ele nu fac sintaxa HTML mai bun sau mai rea
dect sintaxa XHTML. Att timp ct validm documentele, nu vom avea probleme cu
compatibilitatea browser-ului, experiena utilizatorului, accesibilitate, CSS, sau JavaScript.
Vom folosi HTML 4.01 Strict n aceste exemple, dar ne vom asigura c avem un marcaj
semantic bine-format, valid. Acest lucru va pstra o tranziie viitoare la XHTML 1.0 Strict sau
HTML 5 simplu. Indiferent de ce doctype alegei s utilizai, trebuie s realizai c aproape
ntotdeauna, oferii ambele doctype-ri browserelor ca HTML, deci singura diferen real ntre
cele dou doctype-uri este sintactic.

Adugarea Doctype
Plasai aceast declaraie doctype n document. Orice altceva n document va fi dup
doctype.

Majoritatea editoarelor de pagini web au un ablon pe care l putem utiliza, sau putem
scrie ntr-un motor de cutare HTML 4.01 Strict doctype pentru a gsi un exemplu.

Eticheta HTML
O pagin web este o ierarhie de elemente, la fel ca un document XML. Elementul html
este elementul rdcin al documentului. Toate celelalte elemente din document se vor gsi n
acest element. Aproape toate elementele dintr-o pagin web au o etichet de deschidere i o
etichet de nchidere.
Adugai eticheta html la document imediat dup doctypei asigurai-v c adugai tag-
ul de nchidere. Este bine s adugai tag-ul elementului, apoi imediat eticheta de nchidere i s
repoziionai cursorul ntre tag-urile de deschidere i nchidere. Dac uitai o etichet de nchidere
marcajul va fi nevalid, ceea ce face ca browserele s aplice stilurile n moduri neadecvate.

Decizia W3C de a opri lucrul la urmtoarea versiune de XHTML pentru a focaliza mai
multe resurse pe HTML 5 nu a dat la o parte XHTML 1.0, dar demonstreaz c HTML 5 este cel
care trebuie folosit atunci cnd vine vorba de marcaj web. Principalul motiv pentru care muli
programatori prefer XHTML n locul HTML este sintaxa sa strict. Toate etichetele trebuie s
aib etichete de nchidere, toate etichetele i atributele trebuie s fie cu litere mici, valorile
5
atributelor trebuie s fie ntre ghilimele i elementele de sine stttoare cum ar fi br, img, meta i
hr au nevoie de un slash la final. Cu excepia elementelor cu auto-nchidere, toate acestea sunt
perfect legale cu HTML 4.01 Strict, i se pot utiliza fiecare dintre aceste practici de codificare n
HTML 5.

Atributele
Fiecare etichet suport diferite atribute pe care le putei specifica n declaraia tag-ului.
Atributele ajut la descrierea mai detaliat a tag-ului. Tag-ul html pe care l-am folosit are un
atribut care descrie limba pe care o folosim n acest document.

Head i Body
Exist ntotdeauna dou elemente n interiorul elementului html: head i body. Elementul
head conine toate metadatele despre pagin, inclusiv titlul paginii care apare n link-ul de
bookmark i n bara de titlu a browser-ului precum si link-uri pentru a ncrca fiiere JavaScript,
fiiere de foi de stil i alte elemente. Elementul body conine coninutul vizibil al paginii web.
Adugai tag-ul head i eticheta sa de nchidere la document, imediat sub tag-ul html pe
care l-ai definit:


Este indicat s indentm tag-urile, la fel cum indentm codul din declaraia if..else.
Realizarea acestui lucru ne va ajuta s mai trziu, cnd documentul devine mai mare.
Adugai aceste dou linii la elementul head:


Tag-uri fr tag-uri de nchidere
Unele tag-uri din HTML nu au un anumit scop, deoarece nu acoper un anumit coninut
sau nu realizeaz o transformare asupra coninutului. Exemple de astfel de etichete sunt eticheta
img, care introduce o imagine n document; tag-ul br, care adaug o rupere de rnd i eticheta hr
care creeaz o linieorizontal.
Eticheta meta este un exemplu de element de coninut, permind descrierea documentului
folosind metadate. n cazul nostru utilizm eticheta meta pentru a spune browser-ului sau
interpretorului ce set de caractere va utiliza coninutul.
Putem folosi tag-uri meta pentru a oferi mai multe informaii pentru browsere, motoare de
cutare i ali consumatori ai paginii noastre.

Titlul paginii
Textul plasat n tag-ul title va fi afiat n bara de titlu din browser-ul web. Acesta este
utilizat i ca text implicit cnd o persoan plaseaz un bookmark pe pagin, el fiind afiat i n
rezultatele oferite de majoritatea motoarelor de cutare. n cazul nostru numele site-ului este
destul de bun, dar paginile derivate trebuie s aib un text suplimentar n acest element, cum ar fi
6
About this site | Foodcenter sau Top Recipes | Foodcenter. Titlul este afiat n bookmark-ul site-
ului i n bara de titlu, i din acest motiv vom plasa numele site-ului n toate titlurile; vom afia
nti titlul specific paginii (exemplu Latest Recipes | Foodcenter).
Seciunea head a paginii va conine mai multe elemente pe msur ce vom finaliza site-ul,
dar putem ncepe construirea prii vizibile a paginii n acest moment.

Elementul Body
Tot coninutul vizibil din pagin se afl n tag-ul body. Adugai tag-urile body i lsai
un anumit spaiu ntre tag-uri. n acest moment am construit un template standard HTML 4.0
Strict (vezi codul). {n DW CS4 File >New>Blank Page >DocType HTML 4.01 Strict}

Am vzut cum separm elementele paginii n seciuni, dar trebuie s marcm aceste
seciuni prin intermediul codului. Pentru a mpri pagina n seciuni vom utiliza tag-ul div. Tag-
urile div sunt elemente invizibile, ele nu vor fi afiate pe spaiul vizibil din pagin. Ele sunt
elemente block.
Aproape toate elementele care apar n etichetele body din pagin sunt elemente block sau
inline. Dac nelegem diferena dintre aceste dou tipuri de elemente, putem economisi timp
cnd vom stiliza paginile cu CSS. n mod implicit, elementele tip block ncep pe o linie nou
(exemple: div, h1, h2, h3, p, ul, li, table, form).
Elementele inline sunt incluse implicit pe aceeai linie cu alte elemente (exemple: a, b, i,
span, em, strong, label, select, input, textarea, u, i br).
Deci elementele block pot conine alte elemente block sau elemente inline. Elementele
inline pot s conin numai text i alte elemente inline; acestea nu pot conine elemente block (ele
pot fi afiate n browser dar pagina nu va fi valid i vom avea probleme la aplicarea stilurilor sau
n JavaScript).

Page wrapper
Putem constrnge tot coninutul din pagina creat la o lime dorit de 900px, prin crearea
unei regiuni top-level. Vom plasa toate celelalte regiuni ale paginii (sidebar, header i footer) n
aceast nou regiune. Ulterior putem utiliza aceast regiune extern ca punct de referin pentru
toate celelalte elemente. Programatorii documenteaz codul scris i din acest motiv vom aduga
comentarii imediat dup tag-urile de deschidere:

7

Trebuie s oferim browser-ului o modalitate de a identifica regiunile din pagin pentru a
putea aplica stiluri i diverse comportamente. Atributul id este unic pentru document, ceea ce
nseamn c nu putem avea mai mult de un identificator de pagin pe o singur pagin. n caz
contrar pagina nu va validat i vor apare lucruri ciudate cnd aplicm stilurile.

Cele patru regiuni de coninut
Putem utiliza elementele div pentru a afia regiunile paginii (header, footer, sidebar i
main): {n DW CS4 - Window >Insert >Common >Insert Div Tag}:



Acest exemplu include un div suplimentar numit middle. n cazul n care avem dou
regiuni pe care vrem s le afiam una lng alta trebuie s includem aceste dou regiuni ntr-o
alt regiune. Aceasta nu necesit o marcare suplimentar a documentului i face designul mai
flexibil. De exemplu dac este necesar eliminarea zonei sidebar sau a unei pagini din site putem
omite cele dou regiuni interioare i realiza un stil pentru regiunea exterioar. n cazul nostru
vom afia regiunile sidebar i main n acelai mod n care afim ntreaga pagin.
n acest moment am finalizat ntr-o anumit msur structura, urmnd s adugm
coninut.

Regiunea header

Coninutul regiunii header const n logo-ul Foodcenter, pe care l vom include n tag-ul
img, care are un atribut src care specific calea ctre imagine. Aceast cale este similar
atributului href a tag-ului a; poate fi un URL sau o cale relativ ctre un fiier.
Cnd plasm o imagine pe pagina web este indicat s specificm nlimea i limea
imaginii, pe care nu le cunoatem n acest moment. Pentru moment, vom specifica sursa imaginii
8
i atributul alt pentru text care va fi afiat dac imaginea nu va fi ncrcat; este extrem de util
utilizatorilor care folosesc software pentru citirea ecranului.
Plasai cursorul n regiunea definit de div id="header" i introducei codul urmtor {n
DW CS4 - Window >Insert >Images:Image >Select Image Source >Alternate text}:



Text alternativ
Atributul alt pentru imagini ofer o modalitate simpl de a mbunti uurina n folosire
i accesibilitatea site-ului. Textul alternativ este afiat atunci cnd imaginile nu pot fi afiate.
Utilizatorii care sunt orbi depind de textul alternativ care le descrie imaginile; este ideal s
realizm descrierile descriptive.
Textul alternativ este util i pentru browserele bazate pe text i pentru utilizatorii de
telefoane mobile cu conexiuni neperformante. Motoarele de cutare nu pot citi imaginile i din
acest motiv descrierea din textul alternativ devine extrem de important.

Regiunea Sidebar

Regiunea Sidebar este dedicat zonei de cutare, norului de tag-uri pentru reete i norului
de tag-uri pentru ingrediente. Vom include diferite seciuni n propriile lor containere pentru
realiza o poziionare mai uoar cnd ajungem la aceast etap.

Formularul de cutare
Formularul de cutare din site-ul Foodcenter are doar dou elemente: cmpul keyword i
butonul submit. O problem mai greu de rezolvat este c formularele HTML trebuie s-i trimit
rezultatele ctre un URL. Pentru a crea formularul trebuie s tim URL-ul de care formularul are
nevoie s-i trimit datele, dar i codul server-side pe care l va apela cmpul din formular, astfel
nct s afieze datele.
<form method="get" action="/recipes/">
<input type="text" name="keywords">
<input type="submit" value="search">
</form>
Acest cod ne spune c formularul utilizeaz o cerere get pentru a trimite datele ctre
URL-ul recipes. De asemenea, acesta ne spune c numele formularului este keywords. Tag-urile
input nu au tag-uri de nchidere. Tag-urile form i cele dou input trebuie s aib un atribut id.
Acest lucru ne ajut s stilizm ceea ce facem. Din macheta realizat rezult c avem nevoie de o
imagine cu o lup n locul butonului. n afar de formularul n sine, seciunea de cutare are
nevoie de un titlu numit Search Results.
9
Vom aduga acest cod n regiunea sidebar pentru a construi seciunea de cutare {n DW
CS4 pentru a introduce formulare - Window >Insert >Forms >Formi Window >Insert >
Forms >Text Field i Window >Insert >Forms >Image Field }:




10


Seciunea de cutare a regiunii sidebar este inclus n propria sa regiune i are propriul
su ID; aceasta ne ofer o flexibilitate suplimentar cnd vom aduga stiluri n document.
Formularul de cutare are un ID care va fi util cnd adugm elemente de stil i comportament
JavaScript.
Vom include n tag-ul div cmpurile input ale formularului pentru a realiza o bun
validare. Cnd utilizm HTML 4.01 Strict, tag-urile input trebuie plasate ntr-un div sau ntr-un
element de tip block, cum ar fi un titlu sau paragraf.
Formularul nu are un buton submit, el fiind nlocuit cu un buton tip imagine.
Un buton de imagine funcioneaz ca un buton submit obinuit; cnd utilizatorul face clic
pe butonul imagine, datele formularului sunt trimise ctre URL-ul specificat de formular.
Diferena este c un buton imagine nlocuiete butonul submit implicit, plictisitor i specific
sistemului de operare.
Un buton tip imagine poate fi greu de realizat dac dorim s facem un formular mult mai
atractiv. O alternativ poate fi utilizarea CSS pentru a transforma butonul n ceva care seamn
cu o legtur.

Utilizarea legturilor n locul unui buton de tip submit
Nu este indicat s utilizm legturi n locul butonului submit deoarece legturile sunt
folosite s extrag informaia n timp ce butoanele sunt folosite s trimit informaia, aceasta
11
putnd cauza probleme de uurin n folosire. Trebuie s utilizm o funcie JavaScript pentru
realiza o legtur de tip submit ntr-un formular.

Titluri
HTML ofer diferite tag-uri pentru marcarea textului, dintre care ase tag-uri sunt utilizate
pentru titluri: h1, h2, h3, h4, h5, i h6. Cu ct este mai mic numrul titlului cu att este mai
important. Fiecare pagin web trebuie s aib cel puin un titlu principal care utilizeaz tag-ul h1.
Motoarele de cutare utilizeaz aceasta ca parte a metodelor folosite pentru determinarea
importanei coninutului. Vom folosi titlul principal pentru regiunea de coninut main i vom
utiliza tag-ul h2 pentru seciunile cu titluri.

Norul de tag-uri Recipes
n mod normal norul de tag-uri se implementeaz pe server folosind un mecanism care
interogheaz baza de date pentru cele mai populare tag-uri ordonate n funcie de frecvena lor de
utilizare. Aceste rezultate sunt prelucrate i este afiat codul HTML cu tag-uri. O abordare
frecvent implic utilizarea stilurilor CSS pentru a controla aspectul tag-urilor n funcie de
frecvena acestora. Deocamdat ne vom concentra pe machetarea norului de tag-uri prin aplicarea
stilurilor.
Tag-urile din nor sunt stilizate n mod diferit n funcie de popularitate; dac un tag are
asociate mai multe reete l vom face s apar mai mare dect celelalte. Pentru a simplifica acest
lucru vom limita numrul de nivele din norul de tag-uri la 5, utiliznd nivelul 1 pentru tag-urile
cele mai utilizate i nivelul 5 pentru cele mai puin utilizate.
Fiecare intrare din norul de tag-uri este un link ctre o pagin care afieaz reetele pentru
acel tag; vom aplica stilul prin reutilizarea stilurilor asociate norului folosind atributul class. La
fel ca un atribut ID, un atribut class poate fi aplicat oricrui element dintr-un document HTML.
O legtur poate fi definit prin utilizarea tag-ului a (anchor). Putem realiza legturi ctre
alte documente pe acelai server, pe alte servere sau chiar regiuni de pe aceeai pagin. Pentru a
realiza o legtur, vom defini un tag ancor i vom folosi atributul href pentru a specifica URL-ul
spre care va puncta legtura. Textul dintre tag-urile de deschidere i nchidere devine hyperlink.

Legturi absolute
O legtur absolut conine calea complet ctre o resurs, incluznd protocolul, numele
serverului i locaia resursei de pe server:
<a href="http://www.google.com/">Google</a>

Legturi relative
O legtur relativ se refer la calea curent i creaz legturi ctre documente din
interiorul site-ului; putem utiliza ci relative pentru a apela o resurs dintr-un folder aflat n
acelai director cu fiierul curent:
<a href="about/index.html">About Us</a>
Putem apela o resurs dintr-un director aflat deasupra fiierului curent:
<a href="../index.html">Back to the home page</a>
Legturile relative pot fi relative la rdcina site-ului:
<a href="/index.html">Back to the home page</a>

Ancore
Putem defini o ancor pentru a crea legturi la anumite zone din pagin folosind tag-ul a
astfel:
<a name="ingredients"></a>
<h1>Ingredients</h1>
12
....
]]>
Putem crea o legtur pe aceeai pagin care sare la acea parte a paginii cnd facem
clic:
<a href="#ingredients">Ingredients</a>
]]>
Putemaduga ancora la orice adres URL absolut sau relativ, direciona utilizatorii
ctre o anumita parte a paginii:
<a href="http://www.foodcenter.com/recipes/55#ingredients">Ingredients</a>
Ancorele sunt extrem de utile pe paginile cu mult coninut, fiind indicat construirea unui
tabel de coninut pentru pagin, care s permit utilizatorilor s sar direct ctre zona de interes.
Este indicat plasarea unei legturi care s permit ntoarcerea la tabelul de coninut la sfritul
fiecrei seciuni, astfel nct cititorul s nu foloseasc scrolling-ul.
Putem a macheta acest nor de tag-uri prin specificarea URL-urilor pe fiecare legtur
realizat, este nevoie de mult timp (putem nlocui aceste legturi cu un cod care va genera aceste
legturi). n acest moment vom crea legturile la modul nefuncional folosind caracterul (#) n
locul irului care puncteaz ctre un fiier sau o adres web. n acest mod putem vedea cum vor
arta legturile, fr a fi nevoii s facem link-uri funcionale. Vom crea o seciune n regiunea
sidebar pentru primul nor de tag-uri:



Fiecare hyperlink are o clas asociat acestuia; n acest sens vom atribui dimensiuni
diferite ale fontului pentru aceste clase atunci cnd vom construi foaia de stil. Vom ncadra
aceast seciune ntr-un tag div i vom ncepe afiarea lor printr-un tag titlu h2, la fel ca n
seciunea de cutare.


Norul de tag-uri Ingredients
Structura celui de-al doilea nor de tag-uri va fi identic cu primul; vom schimba ID-ul,
titlul i coninutul tag-ului. Codul pentru aceast seciune este urmtorul:
13


La fel ca n norul de tag-uri Recipes, titlul i legturile sunt n interiorul propriilor regiuni.

Semnificaia semnului diez
Semnul diez (#) se refer la o locaie dintr-un document HTML. n cazul norului de tag-
uri am folosit un singur semn diez pentru URL care determin broser-ul s-l interpreteze ca du-
te ctre partea superioar a paginii.

Coninutul din main

Regiunea main este compus dintr-o imagine orizontal, o coloan de text, butoanele Sign
Up i Log In i seciunea Latest Recipes. Trei dintre aceste elemente sunt imagini pe care le vom
extrage din macheta noastr.

Imaginea Pasta
Vom adug o referint ctre imaginea pasta utiliznd tag-ul IMG, aa cum am fcut
pentru banner. Plasai acest cod n regiunea main:


Vom presupune c dispunem de un folder images n directorul care conine aceast pagin
i un fiier pasta.jpg n interiorul acestui folder. Textul alternativ folosit pentru imagine trebuie s
descrie coninutul acesteia.

Textul principal
Zona cu textul principal include textul de tip titlu Get cookin i cele dou paragrafe text.
Vom folosi CSS pentru a nlocui titlul cu o imagine (aa cum am fcut pentru celelalte titluri) i
vom include textul din coninut ntre tag-urile <p>. Similar cu elementele sidebar (search i norul
de tag-uri) vom plasa titlul i paragrafele n propriile lor regiuni:

n machet seciunea Create an account este distinct de restul textului, fiind dou
paragrafe distincte. Suntem tentai s utilizm tag-ul <br /> pentru a fora o rupere de rnd, dar
trebuie s avem n vedere coninutul pe care l vom reprezenta.
14

Butoanele Sign Up i Log In
Vom folosi tag-ul img pentru a plasa butoanele pe care utilizatorul le va folosi pentru sign
up sau log in. Vom trata aceast zon ca o alt regiune a documentului prin crearea unui nou div
cu un ID corespunztor i vom aduga o imagine pentru buton. Dorim ca pe acest buton s se
execute clic, i n acest sens vom utiliza imaginea ca hyperlink; vom include tag-ul IMG ntr-un
tag a:


Observm c imaginile au atributele ALT pentru utilizatorii cu deficiene i au un chenar
n jur pentru a indica faptul c se poate da clic pe ele (vom elimina acest chenar folosind CSS).

Seciunea Latest Recipes
Pentru a macheta o serie de reete putem scrie un anumit cod care s extrag ultimele n
reete din baza de date i apoi s le afieze ntr-o anumit ordine. Stilizarea acestei seciuni este
mai complex comparativ cu celelalte; titlul reetei este un titlu normal dar paragrafele care
conin descrierea au o uoar indentare. Pentru a uura acest lucru putem aduga etichete de
descriere a paragrafului printr-un atribut class. Atributul class faciliteaz aplicarea unui stil la un
grup de elemente sau la copii acestuia. Cnd aplicm stilul, vom preciza faptul c doar
paragrafele care sunt copiii elementului div cu ID-ul latest_recipes vor fi indentate:


Fiecare dintre aceste reete are propriul atribut class setat la latest_recipe. Spre deosebire
de atributele ID, un atribut class poate fi repetat de cte ori dorim.

Regiunea Footer

Regiunea footer a paginii conine zona privind drepturile de autor i hyperlink-urile ctre
politica de confidenialitate i termenii serviciului. Caracterele speciale cum sunt simbolul pentru
copyright, ghilimelele stnga i dreapta trebuie specificate utiliznd coduri entitate. Codul entitate
&nbsp; (non-breaking blank space) ne poate oferi un spaiu suplimentar ntr-un paragraf, fornd
browser-ul s afieze un caracter blank.
15
n cadrul regiunii footer, introducei:


Paragrafele incluse au un ID unic n locul unor noi tag-uri div, deoarece aceste elemente
ocup doar o linie de text i nu are sens s adugm o marcare suplimentar.
n acest moment am finisat pagina astfel:



16



Validarea marcajului

Motivele pentru care am construit HTML-ul manual este pentru a obine un document
valid. W3C, organizaia care definete specificaiile pentru HTML, XHTML, i CSS, ofer un
instrument online de validare pe care l putei utiliza pentru a verifica orice pagin, fie prin
furnizarea unui URL fie prin inserarea codului surs (vezi
http://validator.w3.org/#validate_by_input ).
Pentru a arta utilizatorilor site-ului c ai avut n vedere crearea unei pagini web
interoperabile, putem s afim iconia de validare pe orice pagin validat. Codul HTML care
poate fi folosit pentru a aduga aceast pictogram n pagina web este:
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>


17
Unele editoare de text care suport editarea HTML realizeaz procesul de validare a
fiierelor locale destul de uor, dar este de preferat utilizarea browser-ului web Firefox i
instrumentului Web Developer Toolbar. Aceast combinaie ruleaz pe toate platformele.

Configurarea Firefox pentru dezvoltarea de pagini web
Firefox este un browser web popular, dar i un instrument excelent pentru dezvoltarea
site-urilor web. Putem extinde Firefox prin plug-in-uri sau extensii care adug noi faciliti
browser-ului, dintre care unele sunt utile pentru dezvoltarea i testarea site-urilor i aplicaiilor
web. Instalai versiunea portabil de Firefox de pe site-ul http://portableappz.blogspot.com.

Web Developer Toolbar
Web Developer Toolbar transform browser-ul ntr-un puternic mediu de dezvoltare
pentru dezvoltatorii de aplicaii web i designerii web. Instrumentul permite o validare uoar a
paginilor n vederea validrii W3C i dispune de un editor CSS pe care l vom utiliza ulterior.
Instalai Web Developer Toolbar accesnd Firefox la https://addons.mozilla.org/en-
US/firefox/addon/60/ i selectnd legtura Add to Firefox i clic pe butonul Install. Este necesar
repornirea browser-ului Firefox dup ce instalai toate extensiile; Web Developer Toolbar se
regsete n meniul View>Toolbars.

Extensia Firebug
Extensia Firebug (http://getfirebug.com/) permite debugging-ul i inspectarea HTML,
CSS i JavaScript. Firebug v va afia toate definiiile de stil CSS, limi i nlimi, precum i
alte atribute ale elementelor. Este n esen un program de depanare pentru dezvoltatori web.
Firebug Lite (http://getfirebug.com/firebuglite) este o versiune cross-browser care v
poate ajuta depii problemeleatunci cnd lucrai cu Internet Explorer.


Validarea documentului
Validarea se face rapid, i dac nu am scris un cod cu erori vom primi un mesaj care ne
spune c pagina este valid. Dac primim un mesaj care ne spune c avem erori, raportul de
validare v va arta locurile cu probleme din cod. Erorile trebuie tratate pe rnd, ncepnd din
partea de sus, deoarece o singur eroare n partea de sus a documentului poate declana altele.
Remediai prima problem i apoi revalidai.
Validatorul va surprinde i situaiile n care amfolosit unele simboluri necorespunztor,
cum ar fi caracterul ampersand. Muli dezvoltatori de aplicaii utilizeaz iruri de interogare
pentru a trimite parametrii la server, aa cum se observ aici:
http://www.example.com/search?first_name=homer&last_name=simpson.
18
Cu toate c URL-ul va funciona, nu va fi considerat valid dac validatorul l ntlnete n
cod. Pentru a trece de validare, trebuie s codificm toate caracterele ampersand din surs ca
&amp;.

HTML 5

HTML 5 nu este suportat nc de fiecare browser, dar este complet compatibil cu vechile
browsere. Doctype-ul HTML 5 foreaz Internet Explorer 6 n modul standard, ceea ce face mai
uor de utilizat CSS pentru a construi site-uri web atractive. Galeria HTML5
(http://html5gallery.com/) afieaz site-urile web care au adoptat HTML 5.
HTML 5 pune mai mult accent pe marcajul coninutului. n acest capitol, am folosit
elemente div pentru a marca regiunile heading, sidebar, main i footer. Dac am fi folosit HTML
5, marcajul ar fi artat astfel:



19



Acest cod este mult mai descriptiv dect cel din HTML 4.01 Strict. Cu toate acestea,
HTML 5 rmne un obiectiv important, acesta fiind motivul pentru care am ales HTML 4.01
strict. Putem ncerca s implementm ce vom discuta n continuare folosind ablonul HTML 5.
Browserele mai vechi nu vor recunoate elemente noi, cum ar fi aside, ele neputnd fi stilizate,
dar putem folosi metoda document.createElement() din Javascript pentru a face browserele s
recunoasc elementele noi. Pentru aceasta este necesar ca utilizatorii s aib JavaScript activat.
Am vzut cum construim un document cu coninut structurat care este valid i gata de a fi
stilizat.
Putem utiliza structura folosit pentru proiectele viitoaredeoarece conine doar coninut i
elemente structurale. Principalul lucru care trebuie reinut este c documentul trebuie s fie
structurat flexibil, dar marcat semantic i valid. Am separat fiecare grup de elemente logice prin
marcaj i apoi am introdus tag-urile de marcare disponibile n HTML n restul coninutului.
Acum putem transforma documentul folosind CSS.

IX. Crearea articolelor pornind de la machet

Dup ce am realizat scheletul pentru pagina de start, avem nevoie de logo i alte imagini
pentru a le utiliza pe web. Putem folosi pri din machet n pagina web final. Vom discuta
despre diversele formate de fiiere grafice pe care le putem folosi ntr-un site web, cum tiem
documentul Photoshop i cumexportm seciuni n fiiere individuale pe care le putem apoi
meniona n documentul HTML sau n foile de stil.

Optimizarea graficii

20
Optimizare graficii este procesul de reducere a dimensiunii fiierelor cu imagini utilizate
in paginile web, pstrnd n acelai timp calitatea i claritatea acelor imagini. Acest proces ofer
cteva beneficii cheie:
Imaginile mai mici sunt mai prietenoase pentru utilizatorii finali. Dac ai optimizat
imaginile, site-ul va apare mai rapid i utilizatorii vor putea descrca pagina web ntr-un timp mai
scurt.
Imaginile mai mici sunt mai avantajoase datorit limitrii limii de band. Serviciile de
gzduire web limiteaz de obicei date cantitatea de date deservit de site pe lun, unii furnizori
percepnd chiar taxe atunci cnd depii limita. Dac imaginile sunt mici, nu vei atinge limita
rapid. i organizaiile comerciale care gzduiesc propriile site-uri pltesc o tax de lime de
band.
Imaginile mai mici ocup mai puin spaiu pe disc. Pstrnd dimensiunile imaginilor
reduse, vom plti mai puin pentru stocarea i transferul de date.

Timpii de download
Un JPEG de 100KB ar putea prea mic, dar dac adugai biblioteca Prototype JavaScript
de 122KB, cteva fiiere CSS i alte articole poate dura cteva secunde sau mai mult pentru a
descrca acele imagini. Utilizatorii tind s fie incredibil de nerbdtori, deci trebuie s facem tot
ce putempentru a ncrca paginile ct mai repede posibil.
Putemutiliza diferite metode pentru a calcula mrimea total a unei pagini. O modalitate
este s adunm folosind un calculator dimensiunea fiierelor paginii, scripturilor, foilor de stil i
imaginilor. Un alt mod este de a folosi un editor precum Dreamweaver (care v poate da un raport
privind dimensiunea paginii i timpii de descrcare estimai) sau un serviciu extern dac pagina
este disponibil pe Internet (vizitai http://www.websiteoptimization.com/services/analyze/ i
introducei adresa site-ului dvs. pentru a vedea un raport detaliat).

Formate grafice

Optimizarea imaginilor poate fi dificil deoarece trebuie luat n considerare tipul de
imagine. De exemplu, fotografiiletrebuie s fie optimizate diferit fa de diagrame sau logo-uri.
ntr-un browser web se lucreaz n principal cu trei formate grafice: GIF, PNG i JPEG. Vom
folosi fiecare dintre aceste formate n site-ul nostru.

GIF
GIF-ul (Graphics Interchange Format) este un format grafic care utilizeaz o palet de
pn la 256 de culori distincte din spaiul de culoare RGB de 24 bii. Nu-l vom utiliza pentru
fotografii, din cauza acestui spaiu limitat de culori, dar este excelent pentru logo-uri. Formatul
GIF suport i animaii.
GIF-urile au fost deseori folosite pentru logo-uri i butoane pentru c suport transparena
(adic putem plasa o imagineGIF pe pagin i vedea fundalul prin pri ale logo-ului). n ultimul
timp dezvoltatorii au adoptat din ce n ce mai mult PNG-urile din cauza faptului suporta mai bine
transparena.

Optimizarea GIF-urilor
Imaginile GIF permit un maxim de doar 256 de culori n imagine. Putem optimiza GIF-
urileprin reducerea numrului de culori care vor fi stocate n fiier. Dac avem n total doar 16
culori n logo, setm software-ul grafic s-i limiteze output-ul la 16 culori. Reducerea numrului
de culori reduce dimensiunea fiierului, dar ar putea sfri prin a face imaginea s arate groaznic.
21
Cu ct o imagine este mai complex, cu att mai multe culori vor trebui stocate. Photoshop v
permite s previzualizai imaginea n timp ce o optimizai, deci vei avea o idee despre modul n
care va arata sub fiecare setare.
Numrul de culori acceptabile dintr-un GIF poate fi 16, 32, 64, 128, i 256. Nu vei
observa modificri reale n dimensiune dac utilizai alte valori, iar dac folosii mai puin de 16
culori pot apare unele probleme.
Opiunea Photoshop Save for Web & Devices are cteva setri prestabilite pentru GIF-uri
care aleg automat culorile necesare n imagine (vezi figura).


PNG
PNG (Portable Network Graphics) este un format de imagine bitmap care utilizeaz
compresia fr pierderi i a fost proiectat pentru a nlocui formatul GIF. Suport doar culori RGB
i este proiectat pentru utilizarea pe web. Suport destul de bine transparena. Din pcate, aceast
transparen este suportat doar de browserele mai noi.

Optimizarea PNG
Cnd optimizai un PNG selectai o adncime n bii a imaginii. Cu ct este mai
complicat imaginea, cu att mai mare este dimensiunea fiierului. Spre deosebire de JPEG-uri,
fiierele PNG folosesc o compresie fr pierderi, deci PNG este un format potrivit pentru logo-
uri, iconie, i butoane cu umbre sau lucioase. Urmrii dimensiunile fiierului cnd utilizai
PNG-uri, un PNG 24-bit cu transparen poate fi destul de mare.

JPEG
JPEG este un format de compresie pentru imagini fotografice. Este recunoscut pe scar
larg, dar folosete o compresie cu pierderi, astfel nct pot apare artefacte dac sunt comprimate
prea mult sau recomprimate de mai multe ori.
22
JPEG-urile nu suport transparena i ar trebui utilizate doar pentru fotografii. Nu sunt
adecvate pentru logo-uri, capturi de ecran i gradieni.

Optimizarea JPEG
Pentru a optimiza un JPEG, pur i simplu comprimai imaginea pentru a o face mai mic.
Compresia poate reduce dramatic dimensiunea fiierului, dar poate reduce i calitatea imaginii,
de aceea trebuie gsit un echilibru ntre dimensiunea fiierului i calitatea imaginii.
JPEG-urilesunt comprimate atunci cnd salvai fiierul. De exemplu, n Photoshop salvai
fiierul ca JPEG i alegei nivelul de compresie, aa cum arat figura de mai jos. Toate
programele grafice funcioneaz n acelai mod atunci cnd comprim JPEG: v cer s specificai
nivelul de compresie n termeni de calitate a imaginii. Mai mult compresie nseamn mai puin
calitate.
Dac imaginea este nc prea mare dup ce am optimizat-o, singura opiune rmas este
de a reduce nlimea i limea imaginii pentru micora dimensiunea fiierului.


Trebuie s evitai recompresarea unui JPEG ori de cte ori este posibil. Dac ai
comprimat imaginea iniial cu 20% i nc nu ai ajuns la dimensiunea dorit a fiierului, nu
comprimai noua imagine n continuare ci comprimai fiierul original din nou. Este important s
pstrai fiiere originale necomprimate.

Aparatele de fotografiat digitale
Unele camere digitale stocheaz fotografiile ca JPEG-uri. Dac aparatul de fotografiat
salveaz imagini n acest format, vei dori n mod sigur s verificai productorul pentru a afla ct
de mult sunt comprimate imaginile. Dac este posibil, imaginile originale ar trebui s fie
necomprimate. Unele camere au o opiune de a modifica modul n care este stocat imaginea.
Este recomandat stocarea imaginilor n format brut (RAW) i folosirea Photoshop pentru a le
converti la JPEG.
Dac cumprai fotografiile de la fotografi, cerei fiiere RAW sau n format Digital
Negative (DNG) nainte ca fotograful s fac pozele!

Tierea documentului

23
Deschidei fiierul machet. Vom prelua cteva imagini din acest fiier folosind
instrumentele Slicei Slice Select, iar Photoshop va face toate optimizrile.
Trebuie s ne asigurm c toate elementele se afl n grile. Vom utiliza grilele ca ghiduri
pentru a crea slice-uri, i nu vrem s tiem accidental o parte a unui cuvnt sau imagine. Mrii
imaginea la circa 300%, i apoi inei apsat tasta spaiu pentru a activa instrumentul Hand.
Facei clic i tragei cu indicatorul mouse-ului pentru a v mica panoramic n jurul canvas-ului i
asigurai-v c logo-ul, titlurile i imaginile sunt toate cuprinse n grile. Evitai ca marginile
fonturilor sau imaginilor s se suprapun peste grile (vezi figura).

Dac ceva ncrucieaz o linie a grilei, selectai instrumentul Move i facei clic-dreapta
pe seciunea din canvas care se suprapune peste linie. Va apare un meniu contextual care arat
layer-ele de sub cursor. Selectai layer-ul pentru elementul respectiv, apoi utilizai tastele sgei
pentru a-i modifica poziia dup cum este necesar.

Crearea slice-urilor

REDIMENSIONAI canvas-ul la 1008x756 alegnd opiunea Canvas Size din meniul
Image.
Vom crea cteva slice-uri din acest document i le vom salva n diferite formatede fiiere.
S ncepem prin transformarea logo-ului Foodcenter ntr-un slice.
Selectai instrumentul Slice din paleta de instrumente (situat sub instrumentul Crop), apoi
utilizai-l pentru a trasa o caset n jurul logo-ului Foodcenter folosind grilele care nconjoar
logo-ul. Partea din stnga sus ar trebui s fie la 72px orizontal i 18px vertical, iar dreapta jos - la
720px orizontal i 108px vertical. Asigurai-v c opiunea Snap to Grid din meniul View este
activat pentru ca acest proces s decurg mai rapid.
Selectai instrumentul Slice Select, pe care l gsii n palet sub instrumentul Slice (facei
clic i inei apsat pentru a extinde seciunea din palet) i facei dublu-clic pe slice-ul logo-ului.
Specificai numele banner; numele setat aici va fi utilizat ca nume de fiier pentru slice cnd
exportm fiierul. Fiecare slice pe care vrems-l exportm trebuie denumit, altfel nct s nu ne
fie mult mai dificil s organizm lucrurile ulterior.

Slices from Guides
Putemevita tierea manual dac am plasat bine ghidurile cnd amalctuit macheta.
Cnd selectai instrumentul Slice avemopiunea Slices from Guides. Dac facem acest lucru,
vom crea slice-uri suplimentare pe care va trebui s le ignorm mai trziu i va trebui s ne
asigurm c am plasat ghidurilecorespunztor. n funcie de numrul de slice-uri de care avem
nevoie, cu aceast metod s-ar putea economisi timp, chiar dac va trebui s facemunele ajustri
24
manuale ulterior. Aceasta este abordarea multora dintre plug-in-urile utilizate de GIMP pentru a
tia imagini.

mprirea restului imaginii
Creai slice-uri pentru restul elementelor folosind tehnica utilizat pentru banner, denumii
fiecare slice dup ce l creai. Dup ce am terminat, ar trebui s avem slice-uri pentru
urmtoarele elemente:
Antetul Search Recipes (search_recipes) ->72, 126, 252, 162
Formularul de cutare (search_form) >72, 162, 324, 180
Butonul de cutare (search) >324, 162, 342, 180
Antetul Browse Recipes (browse_recipes) >72, 216, 252, 252
Antetul Popular Ingredients (popular_ingredients) >72, 378, 252, 414
Imaginea cu paste (pasta) >360, 108, 954, 252
Antetul Get cookin '(get_cookin) >378, 252, 576, 306
Antetul Latest Recipes (latest_recipes) >378, 486, 576, 540
Butonul Sign Up (btn_signup) >702, 288, 918, 360
Butonul Log In (btn_login) >702, 378, 918, 450
Asigurai-v c ntotdeauna mprii pe grile. Dac o parte a imaginii traverseaz o gril,
mergei la grila urmtoare. Slice-urile create ar trebui s fie divizibile cu nlimea liniei de 18px,
astfel nct acestea s nu ajung n afara grilei de baz (vezi figura). Putei face slice-urile de
orice dimensiune dorii, dar adugai margini i padding la elementul imagine folosind CSS astfel
nct s adere n continuare la gril.
Pentru a face lucrurile mai uoare cnd nlocuim imaginea n CSS pentru titlurile barei
laterale, facei toate slice-urile de aceeai nlime i lime, aproximativ 180/36. Facei imaginile
Get cookin i Latest Recipes de 198px/54px.

25
Putei verifica dimensiunile unui slice citind informaiile despre slice afiate cnd setai
numele slice-ului. De exemplu, dac selectai instrumentul Slice Select i facei dublu-clic pe
slice-ul Get cookin', coordonatele X i Y ne indic punctul de plecare al slice-ului; nlimea i
limea sunt legate de punctul de start. Slice-ul Get cookin' ar trebui s fie la 378X i 252Y;
limea ar trebui s fie 198px, iar nlimea 54px.
Salvai documentul. Setrile slice-urilor realizate se salveaz mpreun cu documentul,
deci nu trebuie s crem slice-urile cnd vom dori s lucrm cu documentul.

Extragerea banner-ului ca un PNG transparent

Putem exporta logo-ul n orice format de fiier, dar vom folosi PNG pentru acest site.
PNG este fr pierderi i poate suporta mai multe culori. Logo-ul nostru are o reflexie stins, care
d o complexitate mai mare dect un GIF standard, n timp ce un JPEG ar putea comprima logo-
ul prea mult, putnd s apar distorsionat.
Nu trebuie s facem aceast imagine transparent (ar putea sta pe un fundal galben i nu
s-ar observa diferena) dar o vom face pentru a vedea cum se pot realiza PNG-uri transparente.
Cnd am creat acest fiier am setat fundalul la alb. Pentru ca Photoshop s exporte un PNG
transparent, trebuie s eliminm toate layer-urile de sub el, adic trebuie s transformm layerul
fundal ntr-un layer real. Layerul fundal l gasim n paleta Layers i vom face dublu-clic pe el
pentru a afia caseta Layer Properties. Numii-l background_layer, i facei clic pe butonul OK.

Ascunderea layer-elor
Pentru a exporta banner-ul ca un PNG transparent, trebuie s ascundem orice alte layere
de sub banner. Vom ascunde layerul fundal i layerul antetului galben fcnd clic pe simbolul
ochiului de lng fiecare layer. Photoshop afieaz un model haurat pentru a indica o zon
transparent. Banner-ul ar trebui s arate ca n figur.


Salvarea slice-ului
Photoshop folosete elementul de meniu Save for Web & Devices, n loc de comanda
Save as pentru a crea imagini optimizate pentru web. Selectai aceast comand i va apare o
previzualizare a documentului mprit n slice-uri.
Selectai slice-ul pentru logo. Ori de cte ori ai selectat un slice, proprietile din panoul
din partea dreapta sunt reactualizate pentru a afia proprietile pentru acel slice. Fiecare slice
poate avea setri de ieire diferite, deci putem exporta PNG-uri, JPEG-uri, GIF-uri, fiecare cu
propriile setri.
Setai tipul la PNG-24 i asigurai-v c opiunea Transparency este selectat. Cnd
selectai opiunea Transparency, fundalul din spatele logo-ului se modific de la alb la acelai
tipar haurat din canvas (vezi figura).


26
Facei clic pe butonul Save pentru a afia caseta de dialog Save Optimized As.
Setai locaia Save In n folderul proiect Foodcenter. Photoshop va crea automat un folder
images. Trecei peste numele fiierelor; schimbai tipul la Images only i modificai opiunea
Slices la Selected Slices. Numele fiierelor vor fi generate automat din numele slice-ului
specificat. Verificai dac fiierul banner.png exist n folderul images din folderul de lucru.

Exportarea restului de elemente

Facei vizibile layerul fundal i layerul titlu i alegei opiunea Save for Web & Devices
din nou. Selectai slice-ul imaginii cu paste i stabilii tipul de fiier la JPEG. Mutai cursorul
pentru calitate la 80 (cu ct este mai mare calitatea, cu att este mai mare dimensiunea fiierului).
Selectai slice-ul butonului Log In i alegei PNG 8. Nu selectai opiunea de transparen.
Facei acelai lucru pentru slice-ul butonului Sign Up i pictograma de cutare. Nu avem nevoie
de informaiile suplimentare pe care un PNG 24-bit le-ar oferi, deoarece aceste pictograme au
culori puine.
Imaginile din antet ar trebui s funcioneze bine ca GIF-uri (se pot folosi i PNG 8-bit).
Selectai slice-ul Get cookin, inei apsat tasta Shift i facei clic pe alte titluri. Avnd toate
slice-uri selectate, putem schimba tipul la GIF i setarea se va aplica la toate slice-urile.
inei apsat tasta Shift i facei clic pe slice-urile pentru imaginea cu paste, butonul de
cutare, butonul Log In i butonul Sign Up. Facei clic pe butonul Save pentru a salva n folderul
images toate slice-urile selectate. Folosii aceleai setri n caseta de dialog Save Optimized As i
imaginile se vor exportactre locaia corect. Dup ce ai exportat imaginilesalvai documentul
Photoshop. Photoshop menine informaiile despre slice-uri i setri n acest document, astfel
nct putei exporta grafica cu uurin.

Am vzut cum funcioneaz diferite tipuri de imagini ntr-o pagin de web i modul de a
realiza aceste elemente grafice prin mprirea machetei. Utilizarea slice-urilor n Photoshop
pentru a gestiona optimizarea imaginilor nefaciliteaz modificarea aspectului site-ului la o dat
ulterioar. Pur i simplu vom modifica macheta de baz i vom reexporta slice-urile pentru a crea
un alt site.