Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
Mereu va exista noul care va inlocui o tehnica veche. Desi exista de ceva vreme, CSS-ul abia a reusit, nu de mult, sa castige destula apreciere in randul profesionistilor incat sa fie considerat noul varf de lance in design implementation. Totusi, acest tutorial isi are rostul sau. Abordeaza probleme de bun simt la care incepatorii cauta raspunsuri cat mai usor de inteles. Totodata, daca e cineva intarziat, care nu a facut trecerea de la tabele la CSS in layouting, va gasi acest articol lamuritor. Sper.
Vom incerca sa trecem in revista cateva reguli de scriere a codului, pentru ca apoi sa ne aplecam asupra problemei spinoase a layoutului general. Vom renunta pe rand la tabele, la spanuri si chiar si la divuri pentru a crea un homepage de site.
Scris pentru:
implementeri HTML care vor sa faca trecerea spre CSS
incepatori in HTML/CSS
Cunostinte presupuse:
HTML si CSS de baza
Pentru inceput...
Exista cateva reguli de care trebuie sa tinem cont ori de cate ori incepem un design in CSS. Presupun ca toata lumea isi aduce aminte de cod de genul:
<style>
...
</style>
<td><p></p></td>
Este cod destul de bine scris. Am vazut si mult mai rau. De exemplu, maestrul Jeffrey Zeldman ofera in cartea lui despre CSS layouting un exemplu luat de pe site-ul Yahoo de acum 3-4 ani.
Imi e greu sa cred ca un astfel de cod poate fi “folosit" la ceva. Ma intreb cine edita asa ceva. Trebuie insa sa recunoastem ca, pentru un site serios ca Yahoo! trebuie ceva markup. Nu insa si daca esti un designer cu minte si folosesti CSS. Acum, m-ar tenta sa reproduc identic layoutul Yahoo! folosind CSS, insa as vrea intai sa arunc o privire asupra codului actual (2006). Incepem bine:
<style>
body{font:13px arial,helvetica,clean,sans-serif;*font-size:small;*font -small;}
table{font-size:inherit;font:100%;}
…
Si CSS-ul inline se continua pe vreo douazeci de ecrane. Acum, nu spun ca aceasta practica este gresita. Insa de acest CSS nu beneficiaza decat homepageul. Sunt sigur ca celelalte pagini au cate un CSS propriu de cel putin 10 ecrane. Dar nu stam acum sa numaram sursele Yahoo! Codul CSS inline mareste cu mult dimensiunea fisierelor ce trebuie downloadate. In loc sa facem asta, am putea scrie toate declaratiile intr-un singur fisier CSS(sau doua sau trei), pe care sa-l atasam fiecarei pagini. Fisierul .css se va incarca o data si apoi va fi pastrat in cache: rezulta mult spatiu economisit. Ganditi-va ca pentru un site supervizitat ca Yahoo, fiecare bit conteaza. Nu numai la timpul de download al siteului, ci si la traficul pierdut degeaba.
Yahoo! ne mai da cateva lectii. Inainte de CSS-ul lung de douazeci de ecrane (nu credeti? verificati), avem inca pe-atatea linii de cod JS. Acum, nu zic ca JS-ul e gresit. Dar, caragialeste vorbind, asta-i comedie mare, domle. Auzi tu, sa pui atata JS…Desigur, au si cateva .js-uri separate, dar eu tot nu-i iert.
Vom vedea de ce este necesara separarea CSS-ului si a JS-ului de HTML intr-un articol viitor. Acum, sa ne concentram pe ce ne intereseaza: markupul. In ce masura s-a schimbat Yahoo! in 3 ani, din punctul de vedere al markupului?
E adevarat, diferente exista. A se observa totusi ce “frumos" se impleteste HTML-ul cu JS-ul inline, precum si numarul mare de elemente div. Este de laudat insa efortul de a realiza majoritatea layoutului renuntand la tabele. Sper ca dupa ce parcurgeti acest articol, sa va puteti da seama singuri daca toate divurile Yahoo! sunt necesare.
Deja ne-am lungit mult si nu am invatat decat trei lucruri, foarte importante de altfel:
renuntam la tabele pentru layout si folosim doar containere div
renuntam la declaratii de stiluri inline si la atribute depasite ca colspan, align, color, bgcolor si etichete ca font, center, br
este ideal sa folosim stiluri externe: de exemplu, o foaie pentru stilul general al siteului, si alta pentru stilul specific paginii (de obicei, vom folosi o singura foaie)
Totul va fi posibil datorita claselor CSS. Tabelele se afiseaza mai greu de catre browsere. In plus, sunt aducatoare de markup in plus, ticsit de td si tr si de cele mai multe ori, de alte tabele incastrate. Markup nefolositor vor constitui de acum incolo si etichetele enumerate mai sus. Totul se va realiza din CSS si va fi perfect reaplicabil. Pentru a ne asigura de acest lucru, vom scrie fiecare declaratie CSS intr-un fisier separat, pe care in vom include, in head, cu:
<head>
[...]
<link>
[...]
</head>
Aproape orice layout este realizat dintr-un header, un footer si la mijloc una sau mai multe coloane. Tinta noastra este un layout pe 3 coloane. Veti vedea insa ca putem extinde foarte usor la mai multe sau mai putine. Dupa cum ne-am obisnuit, vom incepe cu markupul, pentru ca apoi sa avem cu ce lucra.
<div>
<p>header</p>
</div>
<div>
<p>Asta ii coloana prima. Va rog sa fiti atenti ce misto se indind.</p>
<p>coloanele adica. ca au aceeasi lungime.Cool ha? Not.</p>
</div>
<div>
<h5>Cele mai noi articole</h5>
<p>aici vine coloana 3</p>
</div>
<div>
<h6>In primul rand destinul si apoi norocul</h6>
<p>aici vine coloana 2fd</p>
<p>xcvvcxvzxc </p>
<p>zxcvzxcv</p>
</div>
<div>
<p>Aista-i footerul</p>
</div>
Vom face ca layoutul nostru sa se intinda pe toata pagina, oricat de mare ar fi ea, atat pe orizontala, cat si pe verticala. Ideea este sa nu declaram nici o latime pentru header sau footer, iar ele se vor intinde pe toata latimea paginii.
#header{
background-color:#cff123;
color:white;
margin-bottom:30px;
padding:50px;
font-style:garamond, serif;
font-size:2em;
font-weight:bold;
text-align:center;
}
#footer{
border-top:1px solid #cbcbcb;
margin-top:10px;
padding-top:1px;
text-align:center;
clear:both;
}
Nu arata prea bine, dar cu cateva imagini si putin gust, ar putea. Principala problema sunt coloanele. Dupa cum am spus, vom avea trei. In general, prima si a treia vor avea o latime stabilita, pe cand cea din mijloc se va extinde pe cat este posibil, pentru a avea cat mai mult loc de content, adica partea importanta a unui site.
Markupul incepe prin coloanele 1 si 3. Exista avantaje: putem astfel usor include server-side coloanele auxiliare, dar si dezavantaje: motoarele de cautare si screen-readerele vor vedea intai coloanele auxiliare si abia apoi coloana principala. Pentru a putea scrie coloana de content la inceputul markupului, sunt necesare cateva modificari majore tratate pe intr-un articol renumit de pe alistapart.com
Sa stabilim latimea coloanelor 1 si 3 la 170, respectiv 200 de pixeli.
#col1{
float:left;
width:170px;
border:1px solid black;
}
#col3{
float:right;
width:200px;
border:1px solid black;
}
Am folosit float pentru a aduce coloanele la locul lor. De remarcat ca floaturile se fac in functie de obiectul non-float care urmeaza, in cazul nostru, coloana 2. De aceea este necesara plasarea ei la sfarsitul layoutului. Cat despre coloana de content, o vom lasa cu width-ul default, de 100%. Pentru a o decala fata de coloanele 1 si 3 ii vom atribui margini.
#col2{
margin-left:180px;
margin-right:210px;
border:1px solid black;
}
Marginea din stanga este compusa din latimea coloanei din stanga plus 10 pixeli spatiul dintre coloane. La fel si pentru cea din dreapta. Acestea fiind spuse si scrise in sursele voastre, avem un layout minimalistic perfect pentru orice site. Ramane insa o problema: lungimea coloanelor. Cred ca ati observat ca nu este la fel, ceea ce s-ar putea sa cauzeze probleme unora dintre designeri. Pentru a repara acest lucru, vom inchide tot contentul intr-un div de tip container caruia ii vom atribui overflow:hidden.
<div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>
#container{
overflow:hidden;
}
Cautati overflow-ul pe care il ascundem mai sus. Iata-l:
#col1,#col2,#col3{
padding-bottom:2000px;
margin-bottom:-2000px;
}
Aceste reguli se asigura ca fiecare coloana va avea aceeasi inaltime. Apar anumite sacrificii: am pierdut borderul de jos. Daca cineva gaseste o solutie...va rog. Desigur, pe IE nu merge. Exista o solutie totusi:
#container{
overflow:hidden;
height:1%;
}
Nu intrebati de ce. Doar luati codul si jucati-va cuminti. In articolele urmatoare voi incerca sa arat importanta separarii tipurilor de coduri si sa creez mai multe layouturi: centrate, fixed-width si fara divuri, asa cum am promis.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
