Suport curs WebDesign Nivel II Acest suport de curs isi propune sa abordeze urmatoarele subiecte: I. Moduri de aplicare a css-ului 1. CSS extern 2. CSS intern 3. CSS inline II. Sintaxa CSS II.A. Tipuri de selectori 1. Selectorul direct 2. Selectorul ID 3. Selectorul class 4. Pseudo-clase 5. Pseudo-elemente 6. Atribute ca selectori 7. Grupare de selectori 8. Nesting II.B. Proprietati CSS 1. Pentru formatare de text; 2. Pentru formatare de liste; 3. Pentru link-uri; 4. Pentru fundal (background); 5. Pentru pozitionare; III. Layout pentru diverse device-uri IV. JavaScript V. Implementarea unui layout din Photoshop VI. Gazduire (hosting) VII. Serach Engine Optimization 1. SEO on page 2. SEO off page
Transcript
Suport curs WebDesign Nivel II
Acest suport de curs isi propune sa abordeze urmatoarele subiecte:
I. Moduri de aplicare a css-ului1. CSS extern2. CSS intern3. CSS inline
II. Sintaxa CSSII.A. Tipuri de selectori
1. Selectorul direct2. Selectorul ID3. Selectorul class4. Pseudo-clase5. Pseudo-elemente6. Atribute ca selectori7. Grupare de selectori8. Nesting
II.B. Proprietati CSS1. Pentru formatare de text;2. Pentru formatare de liste;3. Pentru link-uri;4. Pentru fundal (background); 5. Pentru pozitionare;
III. Layout pentru diverse device-uriIV. JavaScriptV. Implementarea unui layout din PhotoshopVI. Gazduire (hosting)VII. Serach Engine Optimization
1. SEO on page2. SEO off page
CSS – Cascading Style SheetsCSS – ul este un limbaj prin care se pot atribui proprietati de formatare, pozitionare si accesibilitate limbajelor web bazate pe XML (XML, HTML, XHTML). Cel mai des este intalnit in cazul formatarii paginilor web. CSS-ul este format dintr-un set de instructiuni catre browser pentru a aplicaproprietati pentru formatare de text, fundaluri, contururi sau pozitionare de diviziuni ale paginii (<div></div>).Poate fi folosit si pentru alte medii in afara afisarii pe ecran. Poate stabili formatarea pentru listare, sau poate introduce proprietati de recitare a continutului in cazul browserelor cu suport vocal. Similar limbajului HTML, CSS-ul nu necesita o platforma pe care sa poata rula. Este un limbaj independent ce poate fi creeat sau editat folosind orice editor simplu de text.
Sintaxa CSS selector {proprietate: valoare;}
I. Moduri de aplicareCodul de tip CSS poate fi introdus in trei moduri:1. CSS extern2. CSS intern3. CSS inline
1. CSS externAcet mod de aplicare a css-ului presupune doi pasi:
- creearea fisierului extern .css (style.css) care va contine codul css pentru intreg-ul site- realizarea legaturii intre pagina html si fisierul .css (folosind tag-ul <link />)
In broswser-ele moderne atributul type="text/css" poate fi omis. Astfel tag-ul <link /> va arata asa:
<link rel=”stylesheet” href=”style.css” />
Un fisier css extern poate fi legat de oricate pagini html si formateaza toate paginile html de care este legat. De asemenea, css-ul extern este modul ideal de a adauga css pentru un site, avand in vedere ca poate formata oricate pagini html in acelasi timp (nu suntem nevoiti sa scriem codul css pentru fiecare pagina in parte) si ca nu ingreauneaza codul html (oricat de mult cod css am avea, in fisierul html ar fi doar tag-ul <link />)
2. CSS internSe introduce in sectiunea de <head> a documentului folosind tag-ul <style></style> <head><style type=”text/css”>h1 {color: #ffffff;background: #000000;
font-style: italic;}</style></head>
Ca si in cazul tag-ului <link /> si pentru tag-ul style se poate omite atributul type. Astfel, pentru a insera css intern putem folosi doar tag-ul <style></style>
Css-ul intern formateaza intreaga pagina in care este introdus. Totusi, nu este solutia cea mai buna pentru formatarea unui site pentru ca presupune scrierea codului css pentru fiecare pagina (chiar daca este comun). Totodata, un cod amplu, in css intern, ingreuneaza pagina html.
Prin urmare, modul css intern poate fi folosit pe exemple, layout-uri de o singura pagina...
3. CSS inlineSe aplica direct pe tag-ul dorit cu ajutorul atributului style
<p style=”color: #ffffff; font-weight: bold;”> Lorem ipsum </p>
Atributul style poate fi aplicat pe toate tagurile din sectiunea <body>.
Acest mod de aplicare nu este foarte indicat pentru ca ingreuneaza foarte mult codul html si nu permite utilizarea selectorilor. Totusi, in cazul in care este folosit, el va avea prioritate fata de css intern si css extern.
- css inline este prioritar- intre css extern si intern prioritatea este in functie de ordinea de scriere (ultimul introdus va avea prioritate)- browser - orice ce mod de aplicare a css-ului are prioritate fata de regulile default ale browser-ului (ex: link-urile: subliniate, colorate, heading-urile: diverse dimensiuni, bold si margin, etc.)
Astfel, in cazul aplicarii acelorasi proprietati pentru un element, regulile de prioritate se vor respecta. II. Sintaxa CSS
selector {proprietate:valoare;}
II.A. Tipuri de selectori
1. Selector directOrice tag poate reprezenta un selector direct. (in exemplul de mai jos avem <p>).Denumirea selectorului este dat de numele tag-ului fara "<" si ">" (<p> tag -> p selector direct).
p {color: #999999;text-align: justify;}
Selectorul direct formateaza toate tag-urile cu acelasi nume din pagina (exemplul de mai sus formateaza toate <p>)
<body><p id="abc">paragraf formatat de #abc</p><p>paragraf neformatat</p><p>paragraf neformatat</p></body>
In exemplul de mai sus #abc este selectorul ID. Cateva caracteristici despre acest tip de selector:- numele selectorului poate fi orice text precedat de"#" cu 2 reguli / exceptii:
-> poate contine doar : litere, cifre, - si _-> trebuie sa inceapa cu litera
- formateaza doar tag-urile care au id="abc" (valoarea atributului id este data de numele selectorului fara "#")- orice tag html accepta atributul id;- un selector id (ex #abc) poate fi apelat o singura data per pagina html;- un tag html poate fi formatat de un singur selector id- se foloseste pentru formatarea elementelor unice in pagina3.1. Selectorul de tip clasa (class)<head><style type=”text/css”>
<p> <span class=”text-albastru”>Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. In tempor, mi et viverra mollis, augue arcu porta orci, in tempor leo lorem at mauris. Mauris a urna id velit volutpat auctor. Curabitur fringilla. Vestibulum fermentum auctor leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada.</p><p><span class=”text-albastru”>Aenean vehicular</span> fringilla tortor. Nulla porta rutrum lorem. Phasellus pellentesque nulla a nisl. Fusce at est vitae nisl lobortis vulputate. Donec sem ante, posuere et,venenatis at, sagittis vitae, turpis. Phasellus eu lectus. Maecenas est neque, euismod id, gravida vitae, lobortis vel, est. Mauris fermentum sodales lorem. </p></body>
In exemplul de mai sus .text-albastru este selectorul class. Cateva caracteristici despre acest tip de selector:- numele selectorului poate fi orice text precedat de"." cu 2 reguli / exceptii:
-> poate contine doar : litere, cifre, - si _-> trebuie sa inceapa cu litera
- formateaza doar tag-urile care au class="text-albastru" (valoarea atributului id este data de numele selectorului fara ".")- orice tag html accepta atributul class;- un selector class (ex . text-albastru) poate fi apelat de oricate ori in aceeasi pagina html;- un tag html poate fi formatat de oricati selectori class;- se foloseste cand sunt mai multe elemente care vor fi formatate la fel
<p class="text-albastru text-subliniat">Un paragraf ca oricare altul</p></body>
In exemplul de mai sus observam ca pentru a aplica ambele clase pe tag-ul nostru, trebuie sa folosim un singur atribut class care sa aiba valoarea formata din ambele clase separate prin spatiu. In felul acesta, textul va fi si colorat si subliniat.
3.2. Sub-clasa.Sunt clase cu nivel limitat de folosire asupra tagurilor. De regula se folosesc impreuna cu un selector direct. Selectorul li.lista-rosu este format din selectorul direct lice va afecta toate elementele de lista din pagina, dar nu direct, ci prin aplicarea sub-clasei .lista-rosu.
Sub-clasele li.lista-rosu-numeric si li.lista-rosu-alfabetic pot fi folosite numai pentru elemente de lista, deci pentru tagul <li>. Aplicate pe alt tag html nu vor functiona.
In cazul in care doi selectori vor formata acelasi element ca in exemplul de mai jos <head><style type=”text/css”>p {font-family: Georgia, "Times New Roman", Times, serif;font-size: 14px;text-align: right;}#introducere {color: #006699;text-align: justify;font-style: italic;}</style>
</head>
<body><p id=”introducere”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor, mi et viverramollis, augue arcu porta orci, in tempor leo lorem at mauris. Mauris a urna id velit volutpat auctor.Curabitur fringilla. Vestibulum fermentum auctor leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse malesuada. Aenean vehicula fringilla tortor. Nulla porta rutrum lorem. Phasellus pellentesque nulla a nisl. Fusce at est vitae nisl lobortis vulputate. Donec sem ante, posuere et, venenatis at, sagittis vitae, turpis. Phasellus eu lectus. Maecenas est neque, euismod id, gravida vitae, lobortis vel, est. Mauris fermentum sodales lorem. </p>
<p>Phasellus viverra, tortor non eleifend vehicula, leo leo pellentesque velit, accumsan porttitor tortortortor non eros. Aenean et purus. Fusce sed diam quis odio egestas fermentum. In dui. Maecenas lectus.Aliquam erat volutpat. Nulla vitae lorem ac neque tincidunt varius. Nulla facilisi. In hac habitasse platea dictumst. Pellentesque malesuada enim ut ligula. Etiam massa. Suspendisse consectetur pellentesque enim. Phasellus ut arcu sit amet arcu iaculis fermentum. Sed lobortis bibendum augue. Fusce sit amet nibh.</p></body>
In exemplul de mai sus este afisat codul pentru un document html ce contine text formatat cu ajutorul a doua stiluri. Exista un selector direct aplicat pe toate paragrafele din pagina in care au fost stabilite fontul, dimensiunea textului si alinierea. Mai departe a fost folosit un alt selector de tip id care se aplica separat numai pe primul paragraf de text. Primul paragraf a primit atat fontul si dimensiuneaprimului stil, cat si culoarea, alinierea si inclinatia din al doilea stil legat prin ID.In concluzie ambele paragrafe sunt afisate cu acelasi font si dimensiune,in schimb primul beneficiaza de culoare, aliniament si inclinatiedintr-un stil suplimentar. (slectorul de tip id este prioritar fata de selectorul direct) .
In general, cu cat selectorul este mai strict cu atat este mai important.
4. Pseudo-clasele:Pseudo-clasele se introduc in continuarea selectorului, precedate de caracterul “:”.
*doar primele doua pseudo-clase sunt aplicabile exclusiv pentru link-uri (a:link{…} si a:visited{…})
:link – link-ul afisat in starea initiala, link nevizitat;.:visited – link-ul a fost deja vizitat, deci se afla in istoricul browserului;:hover – cursorul se afla peste suprafata elementului;:active – elementul este apasat;
Limbajul HTML are o structura de tip parent-child (un tag contine alte tag-uri) si in consecinta ne putem referi la elementele html (tag-uri) in functie de pozitia lor. Astfel:
:first-child – formateaza elementul din pozitia first-child (atunci cand elementul este primul din tag-ul parinte);:last-child – formateaza elementul din pozitia last-child (atunci cand elementul este ultimul din tag-ul parinte);:nth-child() - formateaza elementul in functie de pozitia lui in tag-ul parinte;
:nth-child(3) - formateaza al 3-lea element din tag-ul parinte;:nth-child(even) - formateaza toate elementele pare din interiorul tag-ului parinte;:nth-child(3n) - formateaza fiecare al 3lea element incepand cu 3
Pseudo-clasele pot fi aplicate pe orice tip de selector ( inclusiv pe clase sau id-uri)
p:first-child {…} - acest selector formateaza toate tag-urile <p> din pozitia first-child. Ceea ce in exemplul nostru va insemna editarea primului paragraph din div (fara a folosi clasa/id si fara sa formateze celelalte tag-uri <p>)
5. Pseudo-elementeDin punctul de vedere al sintaxei sunt foarte asemanatoare cu pseudo-clasele.
::first-line {proprietate: valoare;} formateaza prima linie (primul rand) a elementului::first-letter {proprietate: valoare;} formateaza prima litera a elementului::after {content: url(imagine.png);} Insereaza continut dupa element::before {content: url(imagine.png);} Insereaza continut inainte de element
<body><p id="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed libero ipsum. Mauris dictum porta ante sit amet aliquam. Aenean faucibus tempus semper. Vivamus mi orci, euismod quis posuere a, pulvinar a ante. Donec nec enim vel dui dictum sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sit amet tellus dui, ac blandit massa. Fusce vitae libero est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed libero ipsum. Mauris dictum porta ante sit amet aliquam. Aenean faucibus tempus semper. Vivamus mi orci, euismod quis posuere a, pulvinar a ante. Donec nec enim vel dui dictum sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sit amet tellus dui, ac blandit massa. Fusce vitae libero est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3 align="center">TITLU</h3>
</body></html>
6. Atribute ca selectoriAvem si posibilitatea de a formata doar elementele (tag-urile) care au anumite attribute
[alt] {proprietate:valoare;} - va formata doar toate tag-urile care au atributul alt[alt=”text”] {proprietate:valoare;} – va formata doar tag-urile care au atributul alt=”text”[alt*=”text”]{proprietate:valoare;} – va formata tag-urile care au “text” continut in valoarea atributului alt
7. Grupare de selectoriSe poate defini un stil pentru mai multi selectori simultan. Se noteaza toti selectorii doriti separate prin caracterul “,”.
Este echivalenta cu expresia:h1, h2, h3 {font-family: verdana;}In amble cazuri cele trei tipuri de heading-uri vor folosi acelas tip de font, dar este preferata a doua varianta.
Pentru a reduce spatiul ocupat de catre un fisier se poate reduce numarul caracterelor prezente in interior. A doua varianta este mult mai restransa ca numar de caractere si in final ca spatiu ocupat, mai ales in cazul in care intreg documentul ar folosi aceasta solutie simpla de grupare a selectorilor. 8. NestingTot datorita structurii de tip parent-child a html-ului putem sa ne referim la elementele html prin prisma pozitionarii lor in interiorul altor elemente
Sintaxa selector selector {proprietate: valoare;}<html><head><style type="text/css">div {border:5px solid green;}div p { color: #FF0000;}</style> </head><body><div><p> un paragraf </p><p> alt paragraf </p><p> alt paragraf </p><p> alt paragraf </p></div>
<p> alt paragraf </p><p> alt paragraf </p></body></html>
Putem observa ca selectorul div p va formata doar paragrafele din interiorul div-ului. In exemplul de mai sus au fost folositi doi selectori directi (div p) dar in acelasi fel se pot folosi orice selectori separati prin spatiu.
O alta forma de nesting este selector > selector {proprietate: valoare}<html><head><style type="text/css">div {border:5px solid green;}#abc >p { color: #FF0000;}</style></head><body><div id="abc">
In situatia de mai sus vor fi formatate doar <p> care stau direct in #abc . Prin urmare:
selector1 selector2{...} formateaza selectorul 2 care se afla in interiorul selectorului 1 (direct sau indirect) selector1 > selector2{...} formateaza doar selectorul 2 care se afla direct in interiorul selectorului 1
II.B. Proprietati CSS
selector {proprietate: valoare;}
1. Pentru formatare de text;2. Pentru formatare de liste;3.. Pentru link-uri;4 . Pentru fundal (background); 5. Pentru pozitionare;
1. Proprietati css pentru formatare de textfont-family: permite definirea tipului fontului. Atributul primeste o lista de valori, separate prin ';' (punct si virgula). Browser-ul va afisa caracterele cu primul font pe care il gaseste in lista. Daca, insa, nici unul dintre fonturile dorite nu este instalat pe calculatorul client, browser-ul va utiliza fontul sau implicit. De aceea, se recomanda ca ultimul font din lista sa fie un font generic.
font-size: permite definirea marimii fontului. Proprietatea poate primi ca valoare: o marime absoluta, sub forma unui numar intreg urmat de o unitate de masura. Unitati de masura: px-pixeli (unitate de masura fixa)em (unitate de masura relativa –default 1em=16px dar in general 1em = dimensiunea fontului tag-ului parinte)% (unitate de masura relativa)
font-style: permite definirea stilului fontului. Proprietatea poate primi valorile:normal (valoare implicita);italic;oblique. (nu este suportat in majoritatea browserelor)
font-weight: permite definirea grosimii fontului. Proprietatea poate primi valorile:o valoare cuprinsa intre 100 si 900. Valoarea 100 corespunde celui mai subtire font, iar valoarea 900,celui mai gros font;normal (valoare implicita): caractere normale, corespund marimii 400;bold: caractere aldine, corespund marimii 700;bolderlighterDin cauza suportului limitat in browser-e, se vor folosi doar valorile normal si bold
color: permite setarea culorii textului. valorile pot fi denumirile ulorilor in engleza, codul hexazecimal #ff00ff, codul hexazecimal presucrtat #f0f (acolo unde este posibil), rgb(255,0,0) unde prima valoare este pentru rosu, a doua pentru verde si ultima valoare pentru albastru (valori intre 0 si 255) si rgba(255,0,0,0.5) care adauga pe langa valorile rgb, valoare pentru alpha (opacitate) care poate fi intre 0 si 1 si care defineste opacitatea culorii.
text-align: seteaza alinierea pe orizontala a textului. Proprietatea poate primi valorile:left: valoare implicita;center;right;justify.
text-decoration: permite decorarea textului. Proprietatea poate primi valorile:none: este valoarea implicita;underline : text subliniat;overline: este afisata o linie deasupra textului;line-throught: text taiat.
text-transform: efectueaza diferite transformari asupra caracterelor blocului de text. Proprietatea poate primi valorile:capitalize: converteste prima litera a fiecarui cuvant in litera mare;uppercase: converteste toate literele textului in litere mari;lowercase: converteste toate literele textului in litere mici;none: inhiba orice transformare de aceasta natura mostenita de la un alt stil.
text-indent: seteaza valoarea cu care este indentata prima linie a blocului de text. Atributul poate primi o valoare pozitiva (indentare la dreapta) sau negativa (indentare la stanga). Valorile primite de proprietatea text-indent sunt exprimate in numere intregi pozitive sau negative, urmate de o unitate de masura. (px sau %)
line-height: seteaza distanta intre randuri (intre liniile de baza a doua randuri consecutive). Proprietateapoate primi valori numerice, urmata de o unitate de masura.(px sau %)word-spacing: seteaza distanta intre cunvinte. Proprietatea poate primi valorile:normal: valoare implicita;un numar pozitiv sau negativ, urmat de o unitate de masura.
letter-spacing: seteaza distanta intre caractere. Proprietatea poate primi valorilenormal: valoare implicita (browserele pot modifica distanta intre caractere, in cazul utilizarii valoriinormal, pentru a alinia justify un bloc de text). Utilizarea unei valori explicite pentru distanta intrecaractere va inhiba aceasta posibilitate.un numar pozitiv sau negativ, urmat de o unitate de masura.
text-shadow: creeaza umbra pentru text. text-shadow: 2px 3px 5px #00ff00; astfel primele doua valori reprezinta pozitia umbrei pe orizontala si verticala, a treia valoare reprezinta dimensiunea umbrei iar ultima valoare este culoarea umbrei.
2. Proprietati CSS pentru formatarea de listelist-style-type: permite definirea tipului listei prin modificarea caracterelor ce stau in fata fiecarui element al listei. Proprietatea poate primi valorile:disc – valoare implicita;circle;square;
decimal – 1, 2, 3 ...;lower-roman – i, ii, iii ...;upper-roman – I, II, III ...;lower-alpha – a, b, c ...;upper-alpha – A, B, C ...si altele.
list-style-image: permite inlocuirea caracterelor din fata elementelor de lista cu o imagine. Proprietatea poate primi valoarea: url (calea catre imagine);Aceste doua proprietati pot fi folosite atat pentru lista cat si pentru elementele de lista (in cazul in care se doreste ca fiecare element sa aiba un caracter/o imagine diferita).
list-style-position: permite asezare unei liste mai in interiorul paginii. Proprietatea poate primi valorile:outside (valoarea implicita) ;inside pozitioneaza lista mai in interiorul paginii (la o distanta mai mare fata de marginea din stanga in comparative cu o lista outside)
list-style: este proprietatea care poate ingloba mai multe valori. De exemplu list-style: circle outside; accepta valori si pentru list-style-type dar si pentru list-style-positionlist-style: url(...) inside; accepta valori pentru list-style-image si pentru list-style-position
3.Proprietati CSS pentru linkuriAici vom folosi pseudo-clasele :link, :visited, :hover, :active. Este important ca ordinea sa fie respectata. Este indicat ca pseudo-clase enumerate mai sus sa fie folosite pentru a evita situatiile in care browser-ul foloseste reguli predefinite pentru formatarea link-urilor.
Sintaxa: a:pseudo-clasa {proprietate: valoare;} va formata toate link-urile din pagina (de evitat)Cu cat scrierea stilurilor css este mai stricta cu atat mai bine, astfel:a.clasa:pseudo-clasa {} va fi un exemplu de sintaxa pe care o vom folosi
4. Proprietati CSS pentru fundal.background-color: permite stabilirea unei culori de fond. Proprietatea poate primi valorile:un nume predefinit de culoare (in limba engleza),un triplet hexa de forma #rrggbb,background-image: permite stabilirea unei imagini de fundal. Implicit, are valoarea none. Primeste caparametru adresa URL a imaginii.background-repeat: controleaza modalitatea de repetare a imaginii de fundal, care poate fi:repeat: este valoarea implicita si semnifica faptul ca imaginea va fi repetata si pe orizontala si peverticala;repeat-x: imaginea este repetata numai pe orizontala;repeat-y: imaginea este repetata numai pe verticala;no-repeat: imaginea este afisata o singura data.
background-position: permite stabilirea pozitiei imaginii pe fundal. Proprietatea poate primi valori:top, center, bottom: valorile specifica pozitia relativa a imaginii, pe verticala;left, center, right: valorile specifica pozitia relativa a imaginii, pe orizontala.Pentru o mai buna pozitionare se pot folosi si valori numerice in px sau %:
background-position: 100px 200px; (prima valoare este pentru left iar adoua pentru top - imaginea va cobori din coltul stanga sus cu 200px si se va departa de stanga cu 100px)background-position: 20% 40%; In cazul in care folosim % acestea vor fi calculate relativ fata de dimensiunile elementului pe care este pusa imaginea de fundal;Valorile nominale si cele numerice pot fi combinate intre ele: background-position: left 20px;
background-attachment: stabileste daca imaginea de fundal ramane fixa sau se misca odata cu scroll-ul din pagina. Proprietatea poate primi valorile:scroll: (valoare implicita) imaginea de fundal se misca la scroll odata cu continutul paginiifixed: imaginea ramane fixata in aceeasi pozitie indiferent de scroll
background: cu ajutorul acesteia putem stabili toate proprietatile intr-o singura linie. De exemplu:background: #ff0000 url(imagine.gif) repeat-x fixed top (anumite valori pot lipsi).
Avand in vedere ca exista optiunea de a pune mai multe imagini pe acelasi fundal background-image: url(img1.jpg), url(img2.jpg);, proprietatea background se va schimba in felul urmator:
background: url(imagine.gif) repeat-x fixed 200px top , url(imagine1.gif) no-repeat fixed 20% center #f00Important: culoarea trebuie sa se afle printre valorile de dupa ultima virgula. De asemenea, in cazul unei suprapuneri, prima imagine va sta deasupra.
5. Proprietati CSS pentru pozitionare:width, height : controleaza dimensiunile (lungimea si inaltimea) div-ului. Proprietatile pot primi valorile:o marime absoluta: un numar intreg pozitiv urmat de o unitate de masura (px sau % - procentul va fi calculat in functie de elementul parinte);
min-width, max-width, min-height, max-height: sunt proprietati ajutatoare. Se utilizeaza mai ales in cazul in care folosim % ca unitate de masura la width si height. Scopul lor este sa limiteze dimensiunile relative ale div-ului auto: se va intinde in functie de continutul lui.
padding: permite setarea distantei dintre continutul div-ului si chenarul sau. Proprietatea poate primi de la una la patru valori (corespondente fiecarei laturi a div-ului: sus, dreapta, jos, stanga):valori intregi nenegative, urmate de o unitate de masura.padding-top; padding-right; padding-bottom; padding-left vom folosi aceste proprietati cand vrem sa stabilim padding-ul doar pentru o singura parte.padding: 10px 20px 15px 6px; se foloseste atunci cand vrem ca in fiecare parte sa fie un padding distinct. (ordinea valorilor este sus, dreapta, jos , stanga)padding:10px 20px; se foloseste pentru cazurile in care vrem ca padding-right sa fie egal cu padding-left si ca padding-top sa fie egal cu padding-bottom. (astfel prima valoare este pentru top si bottom iar a doua este pentru left si right)padding:30px; va face ca padding-ul sa fie acelasi in toate partile
border: permite setarea mai multor valori referitoare la grosimea, tipul si culoarea chenarului. Astfelpropietatea border: 4px solid blue; (ordine stricta) va genera un contur gros de 4px de tipul solid (o linie
continua, neintrerupta) si de culoare albastra. In cazul in care se doreste setarea chenarului doar intr-o parte a div-ului se pot folosi urmatoarele proprietati: border-top; border-right; border-bottom; border-left.
margin: permite setarea distantei dintre div si alte elemente din vecinatatea sa. Proprietatea margin poate primi de la una la patru valori (corespondente fiecarei laturi a div-ului: sus, dreapta, jos, stanga):valoari intregi, urmate de o unitate de masura;auto. Centreaza div-ul pe orizontala (fata de tag-ul parinte)La definirea distantelor pentru fiecare latura in parte, se pot utiliza: margin-top; margin-right; margin-bottom; margin-left. Putem de asemenea sa folosim si proprietatea margin cu 1, 2 sau 4 valori similar cu padding.margin: 10px 20px 15px 6px; se foloseste atunci cand vrem ca in fiecare parte sa fie un margin distinct. (ordinea valorilor este sus, dreapta, jos , stanga)margin:10px 20px; se foloseste pentru cazurile in care vrem ca margin-right sa fie egal cu margin-left si ca margin-top sa fie egal cu margin-bottom. (astfel prima valoare este pentru top si bottom iar a doua este pentru left si right)margin:30px; va face ca margin-ul sa fie acelasi in toate partilemargin:auto; (margin:0px auto) centreaza pe orizontala elemental;
float: schimba pozitionarea succesiva a divurilor dintr-una verticala (implicita) intr-una orizontala. Poate primi urmatoarele valori:left: primul div scris va aparea in partea stanga;right: primul div scris va aparea in partea dreapta;clear: este o proprietate care se folosete pentru a anula (ignora) float-ul unor elemente. Are urmatoarele valori posibile:left: anuleaza float: left;right: anuleaza float: right;both: anuleaza atat float: left cat si float: right;
position: permite modificarea pozitiei divurilor. Proprietatea poatea avea valorile:absolute; modifica pozitia fata de fereastra browser-uluirelative; modifica pozitia fata de pozitia initiala a div-uluifixed; modifica pozitia fata de fereastra browser-ului si il fixeaza (ramane fix indiferent de scroll)static; valoarea implicita, toate elementele sunt statice daca nu aplicam position;
Pentru a modifica pozitia unui div ne vom ajuta si de urmatoarele proprietati: top; left; bottom; right.care seteaza distanta fata de elementele de deasupra, din stanga, de dedesubt respectiv din dreapta. Acestea accepta valori numerice in pixeli sau %.z-index – proprietate cu ajutorul careia putem stabili ordinea de suprapunere a elementelor (div-urilor). Astfel: z-index: 0; (valoare adimensionala) este valoarea implicita a elementelor, z-index cu valori < 0 reprezinta planuri mai indepartate (in spatele planului paginii) iar valorile > 0 reprezinta planuri mai apropiate. Z-index poate fi folosit doar pe elemente care au position non static
overflow: este o proprietate cu ajutorul careia putem gestiona textul (sau orice continut) atunci cand acesta depaseste suprafata div-ului in care este introdus. Poate avea urmatoarele valori:visible; (valoarea implicita, textul continua sa fie afisat chiar si dupa ce a depasit suprafata div-ului)hidden; (textul care iese din div nu este afisat)
scroll; (creeaza scroll atat pe vertical cat si pe orizontala)auto; (browser-ul este cel care decide daca este nevoie de scroll)
III. Layout pentru diverse device-uri
Avand in vedere ca site-urile nu se mai vizualizeaza exclusiv de pe laptop sau desktop si cum existenta unei versiuni de mobil pentru site inseamna normalitate, vom aborda in continuare cateva metode pentru a crea / modifica un layout care sa arate optim si pe alte device-uri folosite pentru a vizualiza site-ul.
Astfel, pentru a crea o versiune de mobil, avem la dispozitie urmatoarele variante:1. Redirectionarea catre un site specific de mobil2. Modificarea layout-ului in functie de device folosind css media queries
1. Redirectionarea catre un site specific de mobilAceasta metoda presupune creearea a 2 site-uri distincte (cu acelasi continut): unul pentru desktop si unul pentru mobil. La accesarea site-ului, in functie de browser-ul folosit de vizitator (browser de mobil sau de desktop) se face redirectionarea (din .htaccess, cu php...) catre versiunea de site dorita.Astfel, cand un utilizator de mobil acceseaza site-ul www.site.ro, va fi redirectionat catre o alta adresa, de exemplu m.site.ro care va fi creata doar pentru mobil.
Cand alegeti sa folositi o astfel de metoda, trebuie sa tineti cont de faptul ca ambele site-uri au acelasi continut si prin urmare trebuie sa ii spuneti google-ului (sau oricarui motor de cautare) ca ele reprezinta 2 versiuni ale aceluiasi site. Prin urmare, pe site-ul de desktop trebuie sa folositi (pentru fiecare pagina):
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.ro" />pentru pagina principala si pentru paginile interne, de exemplu:<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.ro/news.html" />
Iar pe site-ul de mobil, tot pentru fiecare pagina:<link rel="canonical" href="http://www.site.ro" >pentru pagina principala si pentru paginile interne, de exemplu:<link rel=" canonical " href="http://www.site.ro/news.html" />
2. Modificarea layout-ului in functie de device folosind css media queriesAici exista doua abordari destul de asemanatoare: adaptive design si resoponsive design. Ambele folosind acelasi "selector" css @media
2.A. Adaptive designPresupune creearea mai multor layout-uri (fixe - dimensionate in px) pentru rezolutii diferite si atunci cand un layout este prea mare pentru rezolutia ecranului, se face redirectionarea catre un alt layout mai mic.
2.B. Responsive designPresupune creearea unui singur layout flexibil (dimensiuni in %) care sa se redimensioneze in functie de dimensiunea ecranului. In felul acesta nu mai este nevoie sa creeam mai multe layout-uri intermediare.
Totusi, si pentru aceasta metoda trebuie sa existe un layout diferit pentru dimensiunile foarte mici de ecran unde redimensionarea face continutul foarte greu de citit / navigat. Chiar si pentru acest extra layout se lucreaza cu dimensiuni in % pentru ca el sa se muleze usor pe orice latime de mobil.
@media@media screen {cod css cu tot cu selectori} este folosit pentru desktop / laptop@media print {...} se foloseste atunci cand se doreste optimizarea layout-ului la printare@media projection {...} pentru vizualizarea site-urilor prin intermediul unui proiector@media TV {...} pentru navigarea de pe televizoare@media aural {...} pentru navigarea cu device-uri de tip reader-e utile mai ales pentru nevazatori@media handheld {...} conceput initial pentru device-uri mobile si care nu se mai foloseste in zilele noastre avand in vedere ca el a fost conceput pentru device-uri de generatie mai veche (non smart)
In consecinta, browser-ul care ruleaza pe mobil / tableta nu considera ca functioneaza pe un device de tip handheld ci pe unul de tip screen (laptop, desktop). Fapt care nu este foarte surprinzator considerand faptul ca performantele (display, capacitate de procesare, viteza de internet...) device-urilor mobile sunt comparabile cu cele ale pc-urilor.
Totusi, pentru a putea diferentia mobilele de pc-uri, putem adauga la @media screen si o limitare de rezolutie (de latime). De exemplu:
@media screen and (max-width: 480px) {...} - cod css pentru device-urile cu latimea maxima de 480px;
Chiar si asa, insa, cum rezolutia hd (sau mai mare) nu mai este o noutate pentru mobile, acel max-width: 480px nu se va aplica pentru ca latimea rezolutiei este mai mare de atat. Totusi, exista o diferenta intre ecranul de mobil si cel de desktop - si anume, latimea fizica (sau densitatea de pixeli). Astfel, pentru ca acel max-width: 480px sa se refere la mobile trebuie sa specificam referinta la viewport (latimea fizica) si nu la rezolutie. In acest sens, vom folosi, in toate paginilie, tag-ul:
Este un limbaj de programare client-side. Realizeaza conexiunea intre utilizator si browser si este dependent de sistemul de operare si de browser-ul folosit.
Moduri de aplicare:Extern. Se introduce folosind tag-ul: <script type=”text/javascript” src=”file.js”></script> . Legatura se realizeaza in sectiunea de head a documentului html. Codul javascript se afla in fisierul ”file.js”.
Intern . Se insereaza folosind tag-ul: <script type=”text/javascript”>cod js</script>. Acest tag se poate insera atat in <head> cat si in <body>.
Librariile javascript sunt fisiere externe cu extensia .js care contin mai multe functii predefinite. Ele se folosesc pentru a simplifica codul introdus. (se folosesc functii deja existente in loc sa se creeze unele noi)
Librarii javascript cunoscute ar fi: jQuery.js, scriptaculous.js, prototype.js, angular.js,node.js, etc.
V. Implementarea unui layout din Photoshop
Integrarea unui layout din Photoshop reprezinta o parte importanta din job description-ul unui web designer. In general, presupune decupare unor imagini din layout pe care sa le folosim ulterior in layout-ul din css.
Pentru ca implementarea sa fie una corecta, trebuie sa tinem cont de cateva principii:- imaginile decupate nu trebuie sa contina text pentru ca text-ul din imagine nu este indexat de motorul de cautare ca text si pentru ca un astfel de text ar fi greu de editat- imaginile decupate trebuie sa fie optimizate pentru web (dimensiunea trebuie sa fie cat mai mica)- orice element pe care il putem reface din css / html, nu il vom decupa din photoshop (numarul imaginilor trebuie sa fie cat mai mic)
In general, folosind o mica parte dintre instrumentele Photoshopului putem decupa cam orice tip de layout.
VI. Gazduire
Pentru a pune site-ul online dupa ce il realizam, trebuie sa tinem cont de cateva aspecte:
In primul rand, sa ne rezervam un domeniu (ex www.abc.ro). Domeniile pot avea extensia.ro (pe de-o parte) sau .com, .net... etc. (pe de alta parte) Cele cu .ro sunt gestionate de ROTLD.ro de unde puteti sa le si inchiriam si sa platim o taxa approx 50 euro sau anual o suma mai mica (ceea ce se intampla si la domeniile cu alte extensii).
Domeniul poate avea maxim 63 de caracter dar nu este indicat sa ne folosim de toate pentru ca denumirea unui domeniu trebuie sa fie succinta, usor de retinut si totodata sa fie sugestiva pentru continutul site-ului.
Urmatorul pas este sa apelam la un serviciu de gazduire (putem opta pentru inchirierea domeniul in acelasi timp cu serviciul de gazduire). Acest serviciu de gazduire presupune inchirierea unui spatiu pe un server. (locul unde va sta site-ul).
Apoi, cei de la gazduire ne vor pune la dispozitie un user si o parola cu ajutorul carora vom putea accesa o interfata de gestiune (ex: cpanel sau direct admin). Din aceasta interfata vom putea modifica urmatoarele:1. Putem crea un cont de FTP cu ajutorul caruia sa putem incarca site-ul pe server prin intermediul unui client FTP (ex FileZilla) 2. Putem crea adrese de e-mail, sa cream o adresa default sau sa stabilim o adresa de forwarding.3. Putem adauga mai multe domenii sau subdomenii in cazul in care ne permite gazduirea.4. Putem crea si gestiona baze de date
Cateva criterii dupa care trebuie sa ne ghidam cand alegem un serviciu de gazduire ar fi: spatiul oferit, traficul lunar, numarul de domenii gazduite, numarul de adrese de e-mail si bineinteles costul. Suportul si calitatea serviciului cu clientii au, de asemenea, un rol important.
VII Search Engine optimization
In acest capitol vom aborda cateva metode pe care le putem aplica astfel incat sa ajungem pe o pozitie cat mai buna in rezultatele cautarii pe google sau pe orice alt motor de cautare.
In continuare ne vom axa pe Google pentru ca este motorul de cautare cel mai popular, de departe. Totusi o parte dintre metode sunt aplicabile si pentru alte motoare de cautare (Bing, Yahoo, Ask...)
1. SEO on page 2. SEO off page
1. SEO on pageUtilizarea corecta a tag-urilor precum si organizarea buna a continutului ne pot ajuta sa obtinem o pozitie mai buna in rezultatele cautarii.
Cateva tag-uri importante pentru SEO:- <title>...</title> - poate reprezenta link-ul de pe care se acceseaza site-ul din rezultatele cautarii- <meta name="description" content="" /> - poate reprezenta snippet-ul din rezultatele cautarii (cele 2 randuri descriptive care ar trebui sa atraga accesari)- <h1> .. <h6> - este foarte important sa avem un continut organizat si sa avem titluri si subtitluri- <img src="" alt="" /> - pentru imaginile relevante din pagina este obligatoriu sa folosim alt- alte tag-uri precum <a href="">..</a>, <strong></strong>, <em></em> dar si tag-urile semantice introduse in html 5, cum ar fi <header></header>, <nav></nav>, <main></main> sau <footer></footer>, sunt, de asemenea, foarte importante pentru ca motorul de cautare sa poata analiza cat mai corect continutul paginii.
Totodata, optimizarea imaginilor, codului css sau javascript ajuta la incarcarea mai rapida a paginii ceea ce este important pentru indexare.
2. SEO off pageSunt cateva lucruri pe care le putem face si in afara codului care no vor ajuta pentru a obtine un loc mai bun in rezultatele cautarii. Din fericire Google ne pune la dispozitie o serie de instrumente care sa ne ajute in acest sens. (Google Analytics, Google Webmaster Tools...)
