HTML a definit iniţial o serie de atribute pentru taguri (align = center, spre exemplu), dar care au limitările lor. Odată cu ieşirea WWWului din mediul academic şi cu intrarea lui în mediul comercial, a apărut o nevoie crescută să ai un control vizual mai strict asupra ce şi cum se afişează în fereastra browserului. Astfel a apărut CSS.
Post-ul ăsta nu este însă despre istoria CSS-ului, despre vremurile vechi când browserele aveau tag-uri specifice, şi site-urile erau hackuite laolaltă în 2 sau mai multe versiuni (eh, pentru IE şi acum mai facem asta ...). Postul ăsta este despre cum poţi pune pe picioare un site ca http://www.interfete-web-beton.eu în câteva ore.
Pentru început, câteva avantaje distinctive ale CSS-ului. Un fişier CSS este o înşiruire de reguli de afişare, care se pot aplica la 3 categorii distincte de elemente:
- tag-uri - redefineşte modul cum un browser afişează un anumit tag html
- clase - defineşte clase, care se pot aplica mai multor elemente
- definiţii pentru un anume element din pagină (ids). Se referă concret la afişarea unui singur element din pagină.
Fişierul se încarcă în secţiunea head a html-ului, şi poate fi un fişier extern (ca scripturile javascript externe, spre exemplu). Acelaşi fişier de reguli CSS poate fi încărcat în mai multe (toate) paginile unui site, şi astfel oferă un control centralizat a cum arată vizual un site.
Exemplu:
Avem un site care are 3 pagini, şi toate titlurile trebuie să fie roşii (#FF0000). Avem mai multe posibilităţi. Prima ar fi să scriem în fiecare tag <h1> ceva de genul <h1 style="color: '#FF0000';">. O grămadă de muncă, pentru că trebuie să facem asta în fiecare document. Dacă nu aveam 10 documente ci aveam 1000. Mai rău, dacă conţinutul era stocat într-o bază de date sau generat dinamic.
O soluţie mai eficientă este să definim o regulă într-un fişier CSS pentru toate titlurile, şi apoi să legăm CSS-ul la toate paginile.
O definiţie pentru aşa ceva arată cam aşa:
h1 {
color:#FF0000;
}
Dacă vrem să modificăm modul în care titlurile sunt afişate în cele n documente ale site-ului nostru, sau în conţinutul dinamic, e suficient să modificam o dată, în acest fişier atributul color.
Ok, trecem mai departe. Design-ul de bază - layere. La început, paginile web erau o simplă pagină, încărcată în browser odată, cu textul scris de mână de cineva. Pe măsură ce web-ul a devenit WW (world wide), au apărut şi alte nevoi.
Cred că apoi a urmat frame-based design-ul. Browserul accepta să defineşti mai multe regiuni pe ecran (frame-uri) şi să deschizi o pagină nouă în fiecare regiune. Regiunile (frame-urile) erau practic independente, singurul control care exista între ele era definirea unui atribut target pentru un link sau JavaScript.
Mai târziu s-a renunţat la frame-uri şi s-a trecut la table-based designs, care se folosesc şi azi, mai ales pentru site-urile cu o grafică pretenţioasă. Practic, table-based design presupune că tot site-ul se împare într-un tabel, si apoi se aranjează tabelul ăla să semene cu ce se doreşte.
Apoi CSS-based designs au devenit foarte populare, mai ales pentru că au puţine limitări, mai ales în zilele IE7. Practic, CSS-based design se referă la definirea de atribute pentru toate elementele într-un fişier de reguli CSS. Design-ul se referă la culori, la modul în care sunt aranjate elementele în pagină, fundale, font-uri ...
Cele mai comun folosite în internet azi sunt soluţii hibride, cu CSS şi tabele.
Ok, deci, începuturile pentur un CSS-based design încep cu ... un pix şi o foaie. Trebuie să plecăm de la o idee iniţială. Ştim cum vrea să arate site-ul nostru, sau poate că graficianul ne-a facut deja un desen pentru cum ar trebui să arate.
Primul pas: proiectarea layer-elor. Practic, în funcţie de experienţă şi de cunoştiinţe, definim pe foaie care sunt layerele de care avem nevoie (fie pentru conţinut sau pentru structură), şi cum sunt ele organizate în pagină. (fişierele HTML sunt parsate de sus în jos, o singură dată, deci un element care apare mai sus este afişat default deasupra celorlalte elemente).
Pasul al doilea: resetarea atributelor default. Browserele au un CSS intern (sau alte moduri de a specifica reguli) care definesc regulile default pentru afişarea diferitelor elemente. Din păcate, aceste reguli diferă de la browser la browser, aşa că pentru a nu avea surprize, se setează de obicei padding-ul şi margin-ul la 0. O idee bună e să definiţi font-family-ul şi font-size-ul aici.
Pasul al treilea: scrierea definiţiilor layerelor. Pentru început, e important să vedem cum potrivim layerele cu design-un iniţial. Nu sunt secrete, cele mai utile atribute aici sunt width, care stabileşte lăţimea, height care stabileşte înălţimea (pentru conţinut e bine să fie lăsată pentru auto, pentru chestii de dimensiune fixa, gen poze, se setează de mână).
O practică bună pentru a face lucrurile mai clare e să definiţi un background-color pentru fiecare layer. Şi dacă vă asiguraţi că e o culoare ţipătoare, sunteţi siguri că nu o să aveţi colţuri şi nealinieri pe care să nu le vedeţi.
Pentru a defini coloane (elemente unul lângă altul, nu unul sub altul), în CSS se foloseşte atributul float. Citiţi documentaţia pentru mai multe info, dar atenţie la cum îl folosiţi, IE nu e foarte fericit cu float-uri. Tot legat de float e atributul clear, ar fi util să citiţi şi despre el.
Pasul patru: eye candy. Avem acum un set de dreptunghiuri colorate ţipător, dar în forma site-ului nostru. Acum tot ce avem de făcut e să venim cu grafica. Se definesc stilurile pentru text, fundalele şi bannere-ele. Câteodată pentru partea grafică apare nevoia de a despărţi un layer în mai multe layere componente, pentru a permite alinierea corectă a elementelor grafice.
Un fişier CSS pentru un site ca interfete-web-beton.eu are cateva zeci de definiţii, şi cam 1k. Revin cu informaţii mai detaliate despre cum să faci un meniu în CSS, şi site-uri interesante în care nu se foloseşte altceva decât CSS.
No comments:
Post a Comment