Webdesign

Tutorialul asta se adreseaza mai ales incepatorilor in webdesign si zice concret ce NU ar trebui sa folosesti in site-ul tau si cateva recomandari (gusturile nu se discuta, asa ca am incercat sa fiu cat mai obiectiv).

Ce sa NU folosesti niciodata

Efecte tampite JavaScript:

-Chestii care se plimba dupa cursor
-Chestii care fac titlul sa se schimbe
-Chestii care fac un marquee in status bar
-In general chestii care misca alte chestii

JS are chichirezul lui pana la urma, il poti folosi pentru alte chestii: alertezi utilizatorul asupra elementelor invalide dintr-un form, niste rollovere mai smechere, ma rog, alte chestii decat prostioare.

Flash:

-Pentru butoane taranesti cu rama si background si tot dichisul
-Pentru animatii scurte
-Pentru chestii care ar putea fi gif-uri animate

Flash poate fi folosit la chestii mai elaborate, la animatii pe care ti-e cam greu sa le faci din gifuri si JS.

Evita

-Background-urile din imagini propriu zise (cum ar fi sa zicem... avatarul lui Qui-Gon Jinn, sau al meu, sau al lui netics, sau al lui adi cucu sau...)
-Sa folosesti Times New Roman in ORICE forma. Times New Roman e un font frumos si lizibil, dar scopul lui NU a fost cel de a fi folosit in webdesign, cel putin fara antialiasing.
-Sa faci fonturile mari si colorate.
-Sa ai un background de o culoare care deranjeaza (blue, red, green, exact cum sunt ele in varianta cea mai pura #0000FF, #FF0000, #00FF00)

Recomand

-Un font de body (principal) cum ar fi Arial de 10pt, Georgia de orice marime, Verdana de 8-9pt
-Sa refaci stilurile link-urilor. E recomandat ca linkurile vizitate sa pastreze atributele celor nevizitate, unless iti pasa in mod special. De asemeni recomand sa folosesti hover. Mai jos ai un pasaj de CSS care se pune intre tag-urile "head".

<style>

/* Asta o sa fie stilul pentru link-ul nostru nevizitat */

a:link {

color: darkred; /* culoarea textului sa fie rosu inchis */

text-decoration: none; /* sa nu aiba underline sau alte chestii */

}

/* ...iar pentru cel vizitat pastram atributele */

a:visited {

color: darkred;

text-decoration: none;

}

/* Asta o sa fie stilul pentru link-ul in stare de mouse-over */

a:hover {

background-color: darkred /* culoarea fondului: rosu inchis */

color: white; /* culoarea textului sa fie alb */

}

</style>

Acum tot ce trebuie sa faci e sa faci un link pe pagina si sa vezi cum arata.

-Daca ai vreun meniu din imagini, sau ai nevoie sa faci un effect de rollover, nu folosi javascript, pierdere de timp. M-a impresionat sa vad ca niciunde pe web (tutorial) nu am gasit solutia asta, super-simpla...

Intre tag-urile head:

<style>

/* Imaginea normala */

div.roll {

background-image: url(imagine.png);

}

div.roll:hover {

background-image: url(imagine-roll.png);

}

</style>

Dupa ce ai bagat asta intre tag-urile head, bagi in body:

<div class="roll"></div>

si ai terminat...

Sper ca a ajutat cu ceva...

Spor la lucru,