|
Nagradna igra - 5 hosting paketa s domenama - jos
traje, ukljucite
se kako biste osvojili dodatne bodove.
Uljepsajte svoje formulare pomocu CSS-a
Napisao: Leo Bevanda © 2001
- 2002
Web dizajn je dosta uznapredovao i mnogima vise ne odgovara
dosadni default izgled web formi. Sive buttone i bijela text
polja sada mozete totalno promijeniti koristeci CSS.
Ako ste ovladali vjestinom pravljenja formi, sigurno cete htjeti
prilagoditi njihov izgled svojim potrebama, ili govoreci racunalnim
rjecnikom - customizirati ih.
Koristit cemo CSS i <STYLE> tag pomocu kojeg ubacujemo CSS
definiciju u dokument.
Otvorite dokument koji sadrzi dosadnu formu. U njega ce trebati ubaciti
<STYLE> tag koji se u HTML dokument umece izmedju <HEAD>
tagova. Kliknite unutar head tagova vaseg dokumenta i utipkajte:
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
Primijetite HTML tagove za oznacavanje komentara
('<!--' i '-->'). Sadrzaj <STYLE> tagova trebao
bi se umetati kao komentar kako bi stariji browseri koji ne
razumiju CSS mogli jednostavno ignorirati cijelu CSS definiciju
- inace bi mogli praviti probleme.
Sad unutar spomenutih tagova kreiramo varijable sa znacajkama koje
zelimo primijeniti na nasu formu. Pod pojmom 'forma' mislim na pojedine
dijelove iz kojih je ta forma sastavljena (mjesta za unos teksta, dugmad,
selekcijske liste i sl.), a ne na puki form handler koji je oznaka
za mjesto gdje se nalaze svi elementi neke forme. Form handler (ili
carrier) se ne prikazuje u web browseru, a u Dreamweaveru cete ga vidjeti
kao prostor izmedju dvije vodoravne (crvene) linije.
Po defaultu su svi objekti neke forme bijeli sa crnim tekstom. Recimo
da zelimo promijeniti izgled forme i to ovako:
- promijeniti font teksta u boldanu Verdanu,
- tekst narancaste boje,
- polja za unos teksta (text box) u plavu boju,
- odrediti poravnanje po sredini,
- obrub u svijetlo zutu.
 U
tom cemo slucaju unutar <STYLE> tagova kreirati varijablu koja
izgleda ovako:
<STYLE TYPE="text/css">
<!--
.MOJAFORMA
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF9900;
background-color: #006699;
text-align: center;
border: 2px inset #FFFF66;
}
-->
</STYLE>
Ispred varijable unutar <STYLE> tagova obavezno stoji tocka
kojoj slijedi proizvoljan naziv te varijable (MOJAFORMA) iza kojeg
dolaze znacajke (properties) te varijable smjestene unutar viticastih
zagrada.
MOJAFORMA je ustvari proizvoljan naziv varijable, a vjerujem da su
vam parametri u zagradi jasni:
- font-family - font teksta
- font-weight - vrsta slova (normal, bold ili italic)
- color - boja fonta
- background-color - boja pozadine
- text-align - poravnanje teksta(left, right ili center)
- border - obrub
Vrijednosti boja su proizvoljne (odredite ih kako vama odgovara),
ali moraju biti u hexadecimalnom formatu. '2px inset' kod vrijednosti
border oznacava debljinu obruba izrazenu u pixelima i njegov izgled
(moguce vrijednosti su inset ili outset). Ove dvije vrijednosti zapravo
odredjuju hoce li neki element vase forme izgledati 'izbacen' (poput
dugmadi) ili 'urezan' (poput text boxova).
Nakon sto smo varijabli MOJAFORMA odredili znacajke koje ce utjecati
na izgled nekog odredjenog elementa nase forme, vrijeme je da taj izgled
'prikacimo' na taj element. To cemo uciniti argumentom 'CLASS'.
Naci cemo dio koda kojim je odredjen taj element (u mom su primjeru
to text boxovi koji se odredjuju tagom <INPUT>). Tada unutar tog
taga dodamo argument CLASS koji cemo povezati sa nasom varijablom definiranom
u <STYLE> tagu (u nasem primjeru je to CLASS="MOJAFORMA").
Sljedeci moj primjer ima formu sastavljenu od jednog text boxa ciji
je izgled definiran varijablom MOJAFORMA:
<FORM METHOD="%" ACTION="%">
<INPUT TYPE="%" NAME="%" CLASS="MOJAFORMA">
</FORM>
U ovom primjeru '%' oznacava vase proizvoljne postavke vezane za
formu. Primijetite argument CLASS i navodnike koji su obavezni uz naziv
vase varijable. Ako tako uredjene elemente neke forme pregledate u vasem
browseru, vidjet cete promjenu na izgledu vase forme. Ako niste zadovoljni,
eksperimentirajte sa vrijednostima boja, fontovima itd. dok ne dobijete
povoljan rezultat.
Korisnici Dreamweavera ne moraju argument CLASS dodavati manualno
na elemente forme. U vizualnom modu mogu jednostavno kliknuti na neki
element, izabrati Text-->CSS Styles i tu izabrati varijablu koju
su kreirali unutar style taga. Dreamweaver ce uciniti ostatak za vas.
To je sve u ovome clanku. Ovakve efekte mozete raditi na svim elementima
neke forme, medjutim utjecaj <STYLE> taga tu ne prestaje. S njim
mozete kreirati jednostavne rollover efekte na obicnom tekstu, ukrasavati
izgled tabela, naslova itd.
Ako zelite saznati jos o CSS-u i vidjeti ostale korisne primjere,
pogledajte
detaljni CSS vodic koji je vec objavljen na siteu.
O autoru:
Leo Bevanda - nazalost, podaci
jos uvijek nisu stigli :)
|
Vi pitate, mi odgovaramo
> Svidjela mi se glazba koja je svirala u pozadini
na jednom > site-u. Postoji li nacin da je skinem
na kompjuter?
Treba otici u 'temporary internet files' folder, postaviti
pregled direktorija na detailed i odabrati sortiranje
prema url-u. Medju njima naci url tog sitea i osim pohranjenih
stranica s te domene, tu su nalaze i .mid-ovi, .wav-ovi,
.swf-ovi ili neki drugi format, ovisno o tome iz cega
je ta glazba bila svirana.
Na pitanje odgovorio:
Marko Radelic
|
|
Pretplatnika: 2933