dwcc_12-4585214

Copyright © Link group

Upoznavanje sa CSS Designer panelom

U ovoj jedinici ćemo se upoznati sa novim CSS Designer panelom, koji je možda najbitnija izmena u odnosu na ranije verzije Dreamweavera. CSS Designer panel je centralno mesto za kreiranje i manipulaciju CSS opisima i zbog toga je veoma bitno da ga dobro upoznamo jer se konstantno koristi tokom rada u Dw.

CSS Designer panel Centralno mesto za manipulisanje, kontrolu i kreiranje CSS opisa je CSS Designer panel. Ako panel nije vidljiv, otvorićemo ga preko padajućeg menija tako što ćemo izabrati Window > CSS Designer, ili prečicom Shift + F11. Ukoliko ste radili u ranijim verzijama Dreamweavera, pomenućemo da je CSS Designer panel zamenio dosadašnji CSS Styles panel. To Vam može delovati kao problem, ali novi panel je mnogo logičniji i neke funkcije koje su nedostajale su po prvi put našle svoje mesto u njemu.

slika 12.1 - CSS Designer panel


CSS Designer panel sastoji se od četiri celine (panoa) koje su međusobno zavisne. Obratite pažnju na to da se ovde prvi put srećemo sa pojmovima panoa u okviru panela. Pano je deo panela. U CSS Designer panelu, panoi su Sources, @Media, Selectors i Properties.

Sources pano Pruža pregled svih lokacija na kojima se nalaze CSS opisi povezani sa dokumentom na kome radimo tako da ih možemo filtrirati. Prikazuje imena eksternih CSS fajlova kao i interni CSS. Kod eksternih fajlova je upisano ime fajla u kome se opisi nalaze, dok se za interni CSS pojavljuje samo kao grupa <style>. Ukoliko je podešena selektivna primena eksternog fajla, na primer samo za štampu dokumenta, vrednost njegovog media atributa se pojavljuje u uglastim zagradama pored imena (pogledajte sliku ispod). U ovom panou, ali i ostalim, stavke nisu sortirane po abecedi (niti ih možemo sortirati), već po redosledu pojavljivanja u dokumentu, što može biti značajno kod preklapanja stilova, jer znamo da ukoliko su selektori istovetni, kasniji će biti primenjen. U zavisnosti šta je selektovano u ovom panou, menja se prikaz ostalih delova CSS designer panela. Zato je i pomenuto ranije da su ovi panoi međusobno zavisni. Ukoliko izaberemo određeni fajl, ili interni CSS, drugi delovi panela će prikazati samo opise iz izabranog, dok će svi ostali biti sakriveni. Sa druge strane, ukoliko izaberemo ALL SOURCES opciju, u drugim delovima dobijamo stilove iz svih izvora. Iz ovog panoa, možemo pozvati dodatni Add CSS Source padajući meni klikom na + znak. U ovom meniju možemo kreirati novi eksterni CSS fajl koji će automatski biti povezan sa dokumentom (Create A New CSS File), povezati postojeći CSS fajl sa našim HTML dokumentom (Attach Existing CSS File) ili izabrati interni CSS (Define in Page). Izborom treće opcije, ukoliko već postoji interni CSS, Dw će samo prebaciti selekciju na <style>, u suprotnom će kreirati novi <style> odeljak.

slika 12.2- Add CSS Source meni u okviru Sources panoa CSS Designer panela Ukoliko izaberemo da kreiramo novi CSS fajl, dobijamo sledeći dijalog:


slika 12.3- Kreiranje novog CSS fajla Klikom na Browse dugme pojavljuje se dodatni dijalog za snimanje novog fajla. U njemu biramo lokaciju (naravno, u okviru root foldera) i ime fajla. Tu je i opcija Add as kojom možemo odrediti da li će CSS fajl biti povezan link ili import metodom. Danas to više ne igra značajnu ulogu, a uglavnom se koristi link, što ćemo i ostaviti. Na dnu se nalazi Conditional Usage (Optional) sekcija koju otvaramo klikom na strelicu sa leve strane. U ovom delu se nalaze Media Query opcije kojima se trenutno nećemo baviti. Na kraju ostaje samo da potvrdimo izborom opcije ok. Ukoliko smo iz menija izabrali povezivanje postojećeg CSS fajla, ovaj dijalog će biti skoro u potpunosti isti, sa razlikom da ćemo putem browse dugmeta ukazati na postojeći fajl, umesto što kreiramo novi. Možemo i ukloniti određeni izvor CSS opisa tako što ćemo ga selektovati i izabrati Remove CSS Source (ikonica sa znakom minus).

@Media pano Drugi pano u okviru CSS Designer panela je @Media. On prikazuje listu media query unosa iz svih izvora koji su označeni u sources delu iznad. Izborom određene media query, filtriramo samo opise vezane za nju. Ukoliko ne označimo nijednu stavku, u Selectors delu ispod će biti prikazani svi opisi. GLOBAL stavka filtrira opise koji ne spadaju u nijednu media query grupu. Dakle, pomenuti GLOBAL ne prikazuje sve, već samo globalne opise koji ne spadaju ni u jedan media query. Desno od naslova panoa se nalazi opcija Add Media Query (ikonica + ) kojom možemo definisati novi media query odeljak. Neće biti dostupna ukoliko u Sources delu nije selektovan jedan od izvora jer Dw ne zna gde treba da je kreira. Pored nje je i opcija za uklanjanje (ikonica sa znakom minus).


Selectors pano U ovom delu su prikazani svi selektori ili samo deo, u zavisnosti od opcija postavljenih u prethodna dva panoa. Ukoliko ništa nismo selektovali u njima, ovaj deo će prikazati sve opise koje se tiču trenutne stranice ili ukoliko je nešto selektovano na stranici (bilo code ili design prikaz), samo selektore koji se tiču tog označenog elementa. I ovde redosled nije po abecedi, već po redosledu u kodu. Radi lakšeg pronalaženja željenog unosa, možemo iskoristiti pretragu u vrhu panoa. Dovoljno je da upišemo selektor ili njegov deo. Bez obzira na to da li smo uneli početni ili neki drugi deo selektora, Dreamweaver će prikazati sve selektore koji sadrže te karaktere.

slika 12.4 - pretraga u okviru Selector panoa Ukoliko želimo da dodamo novi selektor, odnosno novi opis za novi selektor, možemo izabrati opciju Add Selector (ikonica +). Dovoljno je da zatim upišemo selektor koji želimo i potvrdimo. Ukoliko je selektovan neki objekat na stranici, umesto praznog polja, Dreamweaver će uneti predlog na osnovu trenutne selekcije.

Properties pano Klikom na određeni selektor u Selectors delu, njegova svojstva i vrednosti će biti prikazani u properties delu. Autori Dreamweavera su se potrudili da svojstva vizuelno približe autorima, kao što su na primer margine. Ono što je za početak bitno napomenuti je da Properties deo prikazuje sva moguća svojstva za izabrani selektor bez obzira da li se ona koriste ili ne. To može otežati nalaženje određenog svojstva i zato je tu opcija Show set u gornjem desnom delu Properties panoa. Ukoliko nju štikliramo, prikazaće se samo primenjena svojstva za konkretan selektor.


slika 12.5- Show set opcija Na slici iznad vidimo da je u desnom delu štiklirana opcija Show Set i zbog toga se u properties panou prikazuju samo uneta svojstva.

Computed kategorija Ukoliko selektujemo, označimo određeni element, bilo u design ili code prikazu, u okviru CSS Designer panela, u panou Selectors, pojaviće se kao prva, kategorija COMPUTED. Ispod nje, u nastavku, biće prikazani samo selektori koji se tiču tog elementa. To je zbog toga što pri selektovanju elemenata, CSS Designer menja ulogu i prikazuje samo relevatne opise za dati element. Na taj način smo suzili izbor selektora i lakše ćemo otvoriti određeni. Ukoliko izaberemo COMPUTED kategoriju, Properties pano prikazuje sva svojstva koja se tiču tog označenog elementa. Ta svojstva mogu poticati iz jednog opisa ili iz više njih (kao što vidimo na slici ispod). U ovom prikazu nije moguće uključiti Show set opciju. Imajte na umu da ukoliko promenimo neku vrednost dok je označen COMPUTED, ta vrednost će se promeniti u svojstvu odakle je potekla. Ukoliko želimo da to svojstvo unesemo u drugom opisu, moramo ga označiti u Selectors panou.


slika 12.6- Computed opcija Na slici iznad vidimo da je u Selectors panou izabrana opcija COMPUTED, i zbog toga desno u Properties panou vidimo sva svojstva za taj element, bez obzira iz kog opisa oni potiču. Praktično, skuplja svu stilizaciju na jedno mesto. Ukoliko sada izaberemo neki drugi selektor iz Selectors panoa, prikazuju se svojstva koja potiču od njega za označeni element u dokumentu, čak i ako se ona možda ne koriste zbog preklapanja. Na primer, neki tekst je možda dobio, od više različitih opisa, crvenu i plavu boju. Pošto neće biti istovremeno plav i crven, koristiće se jedna boja po pravilima CSS jezika. U COMPUTED kategoriji ćemo videti samo vrednost koja je pobedila (na primer crvena), ali izborom pojedinačnih selektora, možemo videti tačno koju boju i ostala svojstva oni dodeljuju. Tako možemo videti koji selektor pokušava da oboji tekst u plavo i sl. Na slici ispod su prikazana svojstva za određeni selektor i među njima vidimo da su dva precrtana. To znači da se ta dva ne primenjuju na izabranom elementu jer se sukobljavaju sa nekim drugim opisom (ili opisima). Možda nećete u startu primetiti jer su precrtana svojstva, a ne i njegova vrednost. Ukoliko zadržimo kursor miša iznad precrtanog svojstva, u pop-up dijalogu će nas Dreamweaver obavestiti zašto je precrtano i iz kog se to drugog opisa primenjuje svojstvo.


slika 12.7- precrtana (overridden) svojstva Sve ovo sa precrtanim svojstvima se odnosi na situaciju u kojoj je označen određeni element na stranici. Ukoliko ništa nije označeno, sva svojstva će biti prikazana normalno, iako se možda nigde ne primenjuju. Ukoliko želimo da resetujemo panel kako bi prikazao sve selektore, a ne konkretno samo one koji se tiču označenog elementa, dovoljno je da u Sources delu izaberemo ALL SOURCES ili nešto drugo.

Povezivanje eksternog fajla Ranije u ovoj jedinici smo videli kako možemo kreirati novi eksterni CSS fajl ili povezati postojeći kada smo govorili o CSS Designer panelu. Još jedan način za povezivanje eksternog CSS fajla je putem padajućih menija i to opcijom Format > CSS Styles > Attach Style Sheet...


slika 12.8- dodavanje postojećeg eksternog CSS fajla Bilo da smo koristili link iz CSS Designer panela ili padajući meni, dobijamo isti dijalog. Pitanje: Kroz CSS Designer panel, možemo menjati CSS opise:

● bilo iz eksternog ili internog CSS-a ● samo iz eksternog CSS-a ● samo iz internog CSS-a

Sažetak Centralno mesto za manipulisanje, kontrolu i kreiranje CSS opisa je CSS Designer panel. CSS Designer panel se sastoji od četiri celine (panoa) koje su međusobno zavisne: Sources, @Media, Selectors i Properties. Sources pano služi za podešavanje lokacija gde se CSS opisi nalaze, Selectors da postavimo selektore za opise, dok u properties panou podešavamo sama svojstva i vrednosti. Kroz CSS Designer panel možemo povezivati i eksterne fajlove.

dwcc_12-4585214

Documents