Nakon upoznavanja sa linkovima i pseudoklasama prelazimo na kreiranje selektora, tj. stilova za linkove, i to u programu Dreamweaver. Prvi selektor koji ćemo kreirati je a:link, selektor za hiperlinkove koji još nisu posećeni od strane korisničkog browser-a:
- Otvorite u Dreamweaver-u bilo koji sajt, HTML stranicu, i kliknite desnim tasterom miša bilo gde na stranici.
- Iz kontekstnog menija izaberite opciju „CSS Styles> New Style“.
- U novom dijalogu izaberite opciju „Use CSS Selector“, pa onda iz liste „Selector“ izaberite „a:link“.
- U donjem delu dijaloga izaberite polje „Define In“, te iz liste izaberite opciju „New Style Sheet File“ radi kreiranja novog CSS fajla, u kome će se čuvati svi stilovi za sve selektore (videti sliku).
- Na kraju kliknite „OK“.
Na ovaj način ćemo naučiti ne samo o link klasama, već i o tome kako se kreiraju linkovane liste stilova (style sheet). Jedina osobina koju ćemo podesiti za naš izabrani selektor je boja (Color):
- Odmah po kliku na prethodno „OK“, otvoriće vam se dijalog „Save Style Sheet File As“. Proverite da se u polju „Save In“ nalazi folder, u kome je definisan i ceo sajt.
- U polje „File name“ unesite budući naziv za CSS fajl. Neka ekstenzija fajla bude .CSS. Kada unesete naziv fajla, Dreamweaver će automatski popuniti polje URL.
- Proverite i da li je u polju „Relative To“ odgovarajuće podešeno (najčešće je to Document)
- Kliknite dugme „Save“ i otvoriće vam se prozor za definiciju stila našeg selektora a:link – prozor „Style Definition for a:link in mojstil.css“. Sada imamo pravu linkovanu listu stilova. Ovakav CSS fajl može biti ulinkovan na bilo koju stranicu vašeg sajta, odnosno na osnovu njega može se definisati izgled na svim stranicama sajta. Ovo znači da kada želite da promenite izgled celog sajta, biće dovoljno da izmenite podešavanja u CSS fajlu.
- U polje „Color“ unesite #333333, što je heksadecimalna triplet oznaka za nijansu sive boje. Boju možete uneti i preko dugmeta „pipete“ sa leve strane polja.
- Nakon svega, kliknite „OK“.
Da biste dodali i stilove za ostale selektore (pseudoklase), kliknite dugme „New style“ u okviru palete „CSS Styles“. Nakon ovoga otvoriće vam se već poznati dijalog „New style“, gde ćete u polju Selector redom birati: a:visited, a:hover i a:active. Neka za sve selektore u polju „Define in“ stoji vaš prethodno kreirani CSS fajl. Za svaki selektor ćete u dijalogu „Style Definition“ odrediti potrebne osobine (uglavnom je reč o boji).
Pratite Krstaricu na www.krstarica.com