dwcc_13-4585214

Copyright © Link group

Rad sa CSS Designer panelom

U prethodnoj jedinici smo upoznali osnove novog CSS Designer panela. Sada ćemo nastaviti dalje i videti na koji način možemo podešavati vrednosti u tom panelu, i konkretno koje nas opcije, odnosno CSS svojstva očekuju u njemu. Takođe, upoznaćemo još neke moguće funkcije vezane za CSS.

Podešavanje svojstava – unos vrednosti Kada želimo da unesemo određenu vrednost, u zavisnosti od tipa polja, CSS designer panel se drugačije ponaša. Postoji nekoliko tipova polja. Određena polja zahtevaju brojčanu vrednost i mernu jedinicu. Ukoliko kliknemo levim tasterom miša na jedno takvo polje, otvoriće se padajući meni u kome prvo izaberemo mernu jedinicu (slika ispod – polja označena sa A) i zatim će kursor automatski biti postavljen za unos same vrednosti. Sa druge strane, možemo uraditi dvoklik mišem nad tim poljem. Tako ćemo preskočiti izbor jedinice i možemo odmah upisati vrednost. Ukoliko tom prilikom upišemo i mernu jedinicu (na primer “2 em”) Dreamweaver će nju prihvatiti i postaviti. Ukoliko upišemo samo broj, postaviće podrazumevanu jedinicu. Pre unosa bilo koje vrednosti, ispisana je default vrednost koja se primenjuje (obično auto, none i sl.). Neka druga polja su veoma slična, takođe zahtevaju brojčanu vrednost i mernu jedinicu, ali je ona izdvojena posebno (slika ispod – polja označena sa B). Klikom na brojčanu vrednost unosimo samu vrednost, a klikom na mernu jedinicu otvaramo padajući meni sa dostupnim jedinicama. I u slučaju ovih polja, dvoklik pokreće ručni unos.

slika 13.1 - vrednosti u CSS Designer panelu


Tu su i polja kojima je potrebna samo brojčana vrednost bez jedinice (slika ispod – polje

označeno sa E). Njima je dovoljno upisati samo vrednost.

Dalje, određeni tipovi polja imaju specifične, ograničene izbore i moguće je uneti samo

nekoliko vrednosti. Kod tih polja pojavljuju se padajući meniji za izbor nekih predefinisanih

vrednosti (polja označena sa C) ili su poređane ikonice (slika ispod – polja označena sa D).

Jedina razlika je što kod polja sa padajućim menijem možemo uraditi dvoklik i upisati

proizvoljnu vrednost. Iako je možda Dreamweaver ne poznaje, prihvatiće je na taj način.

slika 13.2 - vrednosti u CSS Designer panelu

Tu su i polja za izbor boja (slika iznad – polje označeno sa F). Klikom na kvadrat sa

dijagonalnom crvenom linijom, pozivamo dijalog za izbor boje. Klikom na polje pored,

možemo ručno upisati boju u hex, rgb ili drugom sistemu.

Ukoliko smo ipak kliknuli na kvadrat, pozivamo color picker dijalog za izbor boje (slika ispod). U gornjem delu dijaloga (deo dijaloga označen sa A na slici) se nalaze polja za skladištenje uzoraka boja, ispod (deo dijaloga označen sa B na slici) su klizači za definisanje boje. I na dnu (deo dijaloga označen sa C na slici) se nalaze opcije za izbor formata prikaza (Color model – RGB, Hex, HSL) numeričke vrednosti izabrane boje. Tu je i color picker alat za uzimanje uzoraka boja sa drugih površina


slika 13.3 - Izbor boje pomoću color pickera

Vredi napomenuti da od trenutka kada aktiviramo color picker, kursor miša menja ikonicu i možemo izbrati boju sa bilo kog mesta u Dreamweaveru. Tako možemo uzeti boju bilo kog dela stranice, ali i radnog okruženja. Esc taster poništava to.

Kategorije svojstava

slika 13.4 - kategorije u okviru properties panoa Svojstva u okviru properties panoa su grupisana u nekoliko kategorija:

• Layout • Text • Border • Background • Others

Ove kategorije su prikazane u vrhu properties panoa u obliku ikonica. Klikom na neku od njih prikazaće se svojstva u toj kategoriji. Tačnije, properties pano prikazuje jednu listu sa svim svojstvima, ali podeljenu u tih nekoliko kategorija. Klikom na ikonicu, skroluje do željenih podešavanja. I bez ikonica u vrhu, skrolovanjem možete doći do željene kategorije, ali je klikom možda lakše jer se automatski pojave podešavanja željene kategorije.


Layout kategorija (properties pano)

slika 13.5 - Layout kategorija, Properties pano, CSS Designer panel

U ovoj kategoriji, prikazane su vrednosti pobrojane u nastavku.

• width – određuje širinu elementa; zahteva izbor jedinice, osim ukoliko je reč o auto

(što je i default vrednost).

• height – istovetno kao prethodno svojstvo, ali, umesto širine, definiše visinu.

• min-width – minimalna širina elementa.


• min-height – minimalna visina elementa.

• max-width – maksimalna širina elementa.

• max-height – maksimalna visina elementa.

• display – definiše manifestaciju objekta, odnosno njegovo ponašanje na strain.

o inherit – nasleđuje vrednost od roditeljskog elementa.

o none – neće biti prikazan uopšte.

o block – prikazuje se kao block element (poput siv tagova, paragrafa i sl).

o list-item – prikazuje se kao stavka liste; ispred elementa se pojavljuje i tačka

(bullet).

o inline – prikazuje se kao inline element (poput span tagova, em, img i sl.).

o inline-block – postavljen u istom redu sa drugim elementima (kao inline), ali

se u ostalim osobinama ponaša kao block (box model svojstva).

o inline-table – prikazuje se kao inline tabela.

o table – prikazuje se kao tabela.

o table-caption – prikazuje se kao table caption (naslov tabele).

o table-cell i svi ostali sa table prefiksom – prikazuju element kao određeni deo

tabele; koristimo ga da div ili druge elemente pretvorimo u deo tabele;

veoma retko se koristi i preporučujem da izbegavate; radi objašnjenja, sledi

primer:

<div style="display: table;">

<div style="display: table-row;">

<div style="display: table-cell;">

Sadržaj ćelije tabele

</div>

</div>

</div>

o run-in – koristi se, uglavnom, za tekst, omogućuje da naslovi „utrče” u

tekst; ne funkcioniše u Firefoxu.

o compact i marker – vrednosti koje se više ne koriste.

• box-sizing – eksperimentalno CSS3 svojstvo za naprednu manipulaciju okvirima

elemenata, delimično ili potpuno podržano od strane nekih browsera; svojstvo box

sizing je detaljno obrađeno u kursu „Napredni HTML I CSS”.


• margin – definiše margin prostor, tj. spoljni razmak elementa. Može kolapsirati sa

drugom marginom iznad/ispod. Ukoliko želimo da se sve četiri vrednosti budu

istovetne i da ih unosimo istovremeno, kliknućemo levim tasterom miša na ikonicu

lanca u sredini margin polja. Ponovnim klikom, razvezujemo margine. Na slici ispod,

u levom delu vidimo zasebne, a u desnom vezane margine. Primećujemo ikonicu

razdvojenih i povezanih karika lanca, što simbolizuje zasebne/povezane vrednosti.

slika 13.6 - margin podešavanja u CSS Designer panelu

• padding – definiše padding prostor, tj. unutrašnji razmak elementa od sadržaja do

ivice. I ovde možemo povezati sve četiri strane kako bi se zajedno menjale. Veoma

slično kao kod margina.

• Position – određuje poziciju elementa. Može biti absolute, relative, fixed ili static.

Odmah zatim su top, right, bottom i left vrednosti, koje koristimo u sprezi sa

position. Iako vizuelno podseća na margin i padding podešavanja, ne možemo ih

povezati, jer postion vrednosti uvek idu posebno i ne koristimo istovremeno top i

bottom, odnosno left i right.

• float – postavlja float vrednost elementu. Sa leve strane, opcije su left, right i none.

• clear – resetuje normalni tok posle float vrednosti. Sa leve strane, opcije su left, right,

both i none.

• overflow-x – određuje šta se dešava sa sadržajem elementa ukoliko je širi od

okružujućeg elementa. Vrednosti su:

• visible – sadržaj nije isečen i može se desiti da prelazi van definisanih dimenzija;

• hidden – sadržaj je isečen i ne može se skrolovati;

• scroll – sadržaj je isečen i pojavljuje se horizontalni scroll;

• auto – prikazuje scroll ukoliko je potreban;

• no-display – ukoliko sadržaj ne staje u definisane dimenzije, kompletan element je

sakriven (nešto poput display:none);

• no-content – ukoliko sadržaj ne staje u definisane dimenzije, kompletan sadržaj je

sakriven.

• overflow-y – isto kao i prethodna stavka, samo se odnosi za vertikalu umesto na

horizontalu. Ono što je možda čudno je da Dreamweaver ovde ne poseduje opšte


overflow svojstvo (bez sufiksa x ili y). Ukoliko želimo njega da unesemo, možemo to

učiniti preko opcije Add CSS Property i ručnog unosa, što ćemo i videti nešto kasnije.

• visibility – određuje vidljivost elementa. Vrednosti su:

• inherit – nasleđuje vrednost parametra od roditeljskog elementa;

• visible – sadržaj elementa je vidljiv;

• hidden – sadržaj elementa je skriven, ali i dalje zauzima pripadajući proctor;

• collapse – sadržaj elementa je skriven i ne zauzima pripadajući prostor.

• z-index – ukoliko se element nalazi u steku, z-index određuje njegovu poziciju u

odnosu na druge elemente.

• opacity – određuje opacitet (providnost) elementa.

Text kategorija (properties pano)

slika 13.7 - Text kategorija, Properties pano, CSS Designer panel


• color – boja teksta.

• font-family – izbor font familije (fonta) za tekst. Klikom otvara predefinisane setove

fontova. Iz tog menija možemo i pozvati dijalog za podešavanje fontova (Manage

Fonts...).

• font-style – izbor stila fonta, odnosno Normal, Italic, ili Oblique. Poslednja dva su,

praktično, ista, ali je preporuka koristiti italic, jer, ukoliko ne postoji italic varijanta

fonta, browser će izabrati oblique. U nekim slučajevima, oblique može biti na silu

iskrivljen normal tekst.

• font-variant – možemo izabrati small caps varijantu pored standardne normal.

Retko se koristi jer font mora podržavati tu varijantu, ali i browser. Internet Explorer

do verzije 7 ne podržava ovu opciju.

• font-weight – definiše težinu teksta. Najčešće vrednosti su normal i bold, koje i

preporučujem da koristite. Tu su i brojčane vrednosti, ali budite oprezni sa njima jer i

font i browser moraju podržavati opciju.

• font-size – definiše veličinu teksta. Možemo postaviti fiksnu (px, pt, pc), relativnu

(%, em, rem, ex, ch) ili opisnu veličinu. Preporuka je da izbegavate opisne, jer ih

različiti browseri mogu različito protumačiti.

• line-height – definiše visinu reda, ili ono što se u štampi naziva leading.

• text-align – definiše horizontalnu poziciju teksta i drugih inline elemenata. Može

biti:

o left – poravnava tekst po levoj ivici, default vrednost;

o right – poravnava po desnoj ivici;

o center – centrira tekst;

o justify – poravnava tekst i po levoj i desnoj ivici, na uštrb promene razmaka

među rečima.

• text-decoration – definiše dekoraciju teksta, odnosno možemo izabrati sledeće

vrednosti:

o none – default vrednost za normalan tekst; linkovi u startu imaju underline i

možemo ukloniti donju liniju ukoliko kreiramo novu klasu na linku i dodelimo

none vrednost;

o underline – postavlja liniju ispod teksta;

o overline – postavlja liniju iznad teksta;


o line-through – postavlja liniju preko teksta, kroz sredinu.

• text-indent – definiše uvlačenje reda teksta. Može biti negativno, ali prikaz zavisi od

browsera.

• text-shadow – grupa opcija vezanih za kreiranje senke koju objekat stvara. Odnosi

se na CSS3 svojstva:

o h-shadow – horizontalna razdaljina senke od objekta koji je stvara;

o v-shadow – vertikalna razdaljina senke od objekta koji je stvara; imajte na

umu da se u Photoshopu drugačije podešava senka, gde se podešava ugao i

razdaljina, dok u CSS-u imamo samo x i y razdaljine, ali postižemo isti

efekat;

o blur – zamućenje senke;

o color – boja senke.

• text-transform – transformiše tekst prilikom ispisa, u tom pogledu slično stavci

font-variant. Izbor je između:

o none – isto kao i default vrednost;

o capitalize – postavlja veliko prvo slovo svake reči;

o uppercase – postavlja sva slova (karaktere) na velika slova;

o lowercase – postavlja sva slova (karaktere) na mala slova.

• letter-spacing – definiše razmak između slova (karaktera). Možemo uneti i

negativnu vrednost, ali opet prikaz zavisi od browsera.

• word-spacing – definiše razmak između reči.

• white-space – definiše ponašanje preloma redova (br), razmaka, tabova i sličnih

karaktera:

o normal – više uzastopnih razmaka kolapsiraju u jedan, redovi se prelamaju po

potrebi; ovo je Default vrednost;

o nowrap – više uzastopnih razmaka kolapsiraju u jedan, redovi se ne

prelamaju po potrebi, već samo na <br> tagu;

o pre – višestruki razmaci ne kolapsiraju, redovi se ne prelamaju sami, već

samo na <br> tagu; ponaša se kao tekst u <pre> tagu;

o pre-line – više uzastopnih razmaka kolapsiraju u jedan, redovi se prelamaju

po potrebi, ali i eksplicitno na <br> tagu, slično normal vrednosti;


o pre-wrap – višestruki razmaci ne kolapsiraju, redovi se prelamaju po potrebi,

ali i eksplicitno na <br> tagu.

• vertical-align – definiše vertikalnu poziciju teksta. Može biti brojčana vrednost

(relativna ili apsolutna jedinica). U tom slučaju, pozitivne vrednosti pomeraju označeni

tekst nagore u odnosu na ostatak, i obrnuto, za negativne vrednosti. Može biti

definisana i opisnom vrednošću:

o baseline – poravnava osnovnu liniju (baseline) elementa sa osnovnom linijom

parent elementa;

o sub – postavlja element kao subscript;

o super – postavlja element kao superscript;

o top – gornji deo elementa je poravnat sa gornjim delom reda, odnosno najvišim

elementom na liniji (u redu);

o text-top – gornji deo elementa je poravnat sa visinom fonta parent elementa;

ako je samo tekst u redu, onda je istovetno kao prethodna stavka;

o middle – tekst je postavljen vertikalno u središte parent elementa;

o bottom i text-bottom – isto kao top i text-top, samo poravnato po donjoj ivici.

• list-style-position – definiše poziciju buleta u odnosu na tekst. Može biti unutar

elementa (inside) ili van njega (outside). Default vrednost je outside.

• list-style-image – postavlja link do slike za bulete. Možemo ručno uneti u polje ili

pronaći sliku putem opcije browse.

• list-style-type – definiše tip liste, odnosno njenih buleta.


slika 13.8 – Tipovi neuređenih listi

Border kategorija (properties pano)

slika 13.9 - Border kategorija, Properties pano, CSS Designer panel

A. Podešavanja u ovom delu panoa će se odnositi na sve ivice.

B. U ovom delu je moguće podešavati parametre za svaku ivicu

pojedinačno (Top, Right, Bottom, Left).


• width – definiše debljinu, odnosno širinu ivice (border) elementa. Može biti upisana

brojčana vrednost sa relativnom ili apsolutnom brojčanom jedinicom, kao i opisna

vrednost (thin, medium, thick), što bi trebalo izbegavati.

• border-style – definiše tip linije za ivicu elementa. Solid je oznaka za običnu liniju.

Tipovi linija su prikazani na slici ispod.

slika 13.10 - dostupni tipovi ivica (border-style)

• color – definiše boju ivice (border) elementa. Ukoliko u ovom polju podesimo boju,

promeniće se automatski i sva četiri polja ispod, koja definišu boju posebno za

stranice elementa.

• border-radius – definiše zaobljenje uglova elementa. Možemo koristiti četiri, odnosno

osam tačaka zakrivljenja (izbor vršimo tasterima označenim na slici ispod – 4r i 8r).

Preporuka je korišćenje opcije sa četiri tačke (barem još neko vreme) zbog podrške u

browserima, odnosno nedostatka iste. U sredini je opcija kojom možemo povezati sve

vrednosti kako bi bile istovetne, slično kao kod margin/pading svojstava.

• border-collapse – određuje da li ivice (border) kolapsiraju ili ne:

o collapse – gde god je moguće, borderi se spajaju, kolapsiraju;

o separate – borderi se nigde ne spajaju; ovo je default podešavanje.

• border-spacing – ukoliko je podešeno da ivice ne kolapsiraju, ovim svojstvom

podešavamo razmak između bordera. Prva vrednost je horizontalni, a druga

vertikalni razmak.


slika 13.11 - border-radius svojstvo

Background kategorija (properties pano)

slika 13.12 - Background kategorija, Properties pano, CSS Designer panel U ovoj kategoriji, samo je prvo svojstvo (background-color) postavljeno direktno. Ostala su smeštena u okviru dve podgrupe - background-image i box-shadow. U nastavku će biti izlistane redom:

• background-color - Određuje boju pozadine. Možemo upisati vrednost ili izabrati pomoću color pickera, kao kod boje teksta iznad.


• url - Putanja do slike u pozadini. Možemo upisati relativnu/apsolutnu putanju ručno ili izabrati fajl pomoću browse opcije desno (ikonica foldera).

• gradient - definiše grafient (ferlauf) u pozadini elementa. Klikom na kvadrat pozivamo dodatni dijalog sa podešavanjima koji vidimo na slici ispod.

o A - prikaz gradienta sa trenutnim podešavanjima. o B - tačke (color stop) koje određuju boje koje čine gradient. Možemo ih

pomerati duž gradienta držeći levi taster miša. Klikom na prazno mesto pored gradienta dodajemo novu tačku. Levim klikom na tačku njena podešavanja postaju aktivna u celom desnom delu dijaloga.

o C - Opcija za određivanje ugla gradienta. o D - Ukoliko označimo ovo polje, gradient će se ponavljati. o E - Klikom na dugme + možemo sačuvati trenutna podešavanja gradienta. U

kvadratima iznad se pojavljuju prikazi poslednjih pet sačuvanih gradienata. Klikom na određeni kvadrat učitavaju se ta podešavanja.

o F - Prikaz boje koja se nalazi u tačci levo (B na slici). Ukoliko promenimo boju, levi deo je nova, a desni, stara boja.

o G - Polje i klizači za izbor boje. Sa leva na desno: Saturation and brightness (polje), Hue, Lightness i Alpha.

o H - Izbor zapisa boje u RGBa, HEX ili HSL sistemu. Levo se prikazuje zapis trenutne boje u izabranom sistemu.

o I - Klikom na dugme + snimamo trenutnu boju u kvadratima pored.

slika 13.13- podešavanje gradient pozadine

• background-position - definiše poziciju pozadinske slike u odnosu na element. Ukoliko nije definisano, default vrednost je gore-levo, odnosno 0px 0px. Prva vrednost određuje horizontalnu poziciju, dok druga određuje vertikalnu. Možemo uneti brojčanu vrednost, a dozvoljene su i negativne vrednosti. Ukoliko kliknemo levim tasterom miša


na jedinicu mere, možemo izabrati relativne i apsolutne jedinice (kao i kod nekih drugih svojstava), ali pored toga, možemo izabrati i left, right, center za prvu, odnosno top, bottom, center za drugu vrednost. Time izbegavamo unos brojčane vrednosti.

• background-size - definiše veličinu pozadinske slike ukoliko je potrebno korigovati. Ukoliko nisu unete vrednosti, ostaje slika kakva jeste u originalu. Prva vrednost određuje horizontalnu, a druga vertikalnu veličinu. Ukoliko druga nije uneta (auto), biće automatski izračunata na osnovu slike. Apsolutna vrednost određuje tačnu dimenziju, dok procentualna određuje veličinu u odnosu na objekat čija je ta slika pozadina. Pored toga, možemo postaviti cover (slika će biti skalirana bez narušavanja proporcija tako da pokrije ceo element, a ukoliko nisu istih proporcija, jedan deo slike će neminovno biti višak i samim time sakriven) ili contain (slika će biti skalirana bez narušavanja proporcija tako da se cela prikaže unutar elementa, a ukoliko nisu istih proporcija, jedan deo elementa će ostati bez pozadine).

• background-clip - Određuje koji deo elementa će imati vidljivu pozadinu. Moguće vrednosti su:

o border-box - Pozadina je postavljena (vidi se) iza sadržaja, padding dela i ispod bordera. Ovo je i default vrednost

o padding-box - Pozadina je postavljena iza sadržaja i padding dela. o content-box - Pozadina je postavljena samo iza sadržaja.

• background-repeat - Definiše da li će slika u pozadini biti ponovljena i na koji način. Moguće vrednosti (sa leva na desno) su:

o repeat – ponavlja sliku po x i y osama, odnosno i horizontalno i vertikalno. o repeat-x – ponavlja sliku po x osi. o repeat-y – ponavlja sliku po y osi. o no-repeat – ne ponavlja sliku

• background-origin - Određuje početnu poziciju pozadinske slike (koju možemo naknadno pomeriti pomoću background-position). Nema efekta ukoliko je sledeće svojstvo, background-attachment postavljeno na fixed. Vrednosti mogu biti:

o padding-box - Početna pozicija pozadinske slike je relativna u odnosu na padding-box. Ovo je default vrednost.

o border-box - Početna pozicija pozadinske slike je relativna u odnosu na border-box.

o content-box - Početna pozicija pozadinske slike je relativna u odnosu na content-box.

• background-attachment – Fiksira poziciju pozadinske slike (fixed) ili ostavlja da se skroluje, odnosno pomera sa stranom (scroll). Scroll je default.

Custom kategorija (properties pano)

13.14 - Layout kategorija, Custom pano, CSS Designer panel


U Custom kategoriji je moguće definisati nova svojstva koja nisu predefinisana. Kao što je i

ranije već pomenuto, donekle je neobično da je u Dreamweaveru izostavljena opcija za unos

overflow svojstva (postoje overflow-x i overflow-y, ali ne i overflow). Pored njega, postoje i

druga svojstva koja nisu našla svoje mesto CSS Designer panelu. Ona se, svakako, manje

koriste, ali su nam ponekad potrebna. I njih možemo dodati pomoću CSS Designer panela,

bez otvaranja koda i ručnog unosa, ako to želimo. Potrebno je samo u polju za unos novog

svojstva (add property) početi sa unosom naziva novog svojstva i Dreamweaver će da

prepozna tekst koji se unosi i da ponudi sve opcije koje u svom nazivu sadrže i taj tekst, kao

što se vidi na slici ispod.

13.15 - Rucni unos novog svojstva

Na slici vidimo da je uneto „ over” i Dreamweaver je već ponudio sva dostupna svojstva koja

sadrže unete karaktere. U ponuđenim se pojavljuju ne samo svojstva koja počinju tim

karakterima već i sva koja ih sadrže bilo gde u nazivu.

Ukoliko je neko svojstvo već postavljeno, neće se prikazati u sugestijama, tako da, ukoliko

ne možete da pronađete ono što želite, proverite da li je već uneto.

Disable/Delete svojstva Iz CSS Designer panela možemo lako obrisati, odnosno privremeno ukloniti određeno svojstvo i njegovu vrednost. Svakako da možemo levi tasterom miša kliknuti na vrednost, selektovati je i obrisati ručno, ali postoji lakši način. Kada pređemo mišem preko određenog svojstva, pojavljuju se dve nove ikonice pored kao što vidimo na slikama ispod.


slika 13.16 - brisanje / isključivanje svojstva

slika 13.17 - brisanje / isključivanje svojstva Ikonica sa kantom (Remove CSS Property) briše to svojstvo iz koda. Imajte na umu da će Dreamweaver obrisati CSS svojstvo iz eksternog fajla (ili gde god da se ono nalazilo). Zbog toga, ukoliko taj eksterni fajl nije otvoren, neće raditi ni undo funkcija, ukoliko možda želite da vratite obrisano. Na primer, otvoren je samo index.html, a u layout.css povezanom eksternom fajlu je definisana širina nekog elementa na njemu. Iako je otvoren samo index.html, primenjeni su povezani opisi. U CSS Designer panelu možemo ukloniti širinu i biće obrisana iz layout.css. Ukoliko pokušamo da izaberemo Edit > Undo iz padajućeg menija, videćemo da ta opcija nije dostupna. Da bi mogli da koristimo Undo opciju, moramo ili posebno otvoriti layout.css ili otvoriti njegovu karticu povezanog fajla.


Svojstvo možemo obrisati i iz gornjeg desnog ugla properties panoa, izborom opcije Remove CSS Property (ikonica označena znakom minus). Druga ikonica koja se pojavljuje je ikonica precrtanog kruga (Disable CSS Property). Izborom ove funkcije, konkretno CSS svojstvo se ne briše iz koda, već se privremeno uklanja. Ovo je veoma korisna funkcija jer možemo videti i testirati promenu bez brisanja samog svojstva, a i kasnije ga lako možemo vratiti ako je to potrebno.

slika 13.18 - Isključeno (disabled) svojstvo u panelu i u CSS dokumentu

Kada izaberemo disable opciju, Dreamweaver u CSS kodu, oko konkretnog svojstva postavlja komentar koji sadrži ključnu reč [disabled]. Ukoliko na bilo koji način izmenimo ovaj komentar ručno u kodu, Dreamweaver će ga ubuduće posmatrati kao običan, ručno uneti komentar i to svojstvo će se u potpunosti izgubiti iz CSS Designer panela.

Promena redosleda i premeštanje selektora Promena redosleda opisa Vratićemo se na kratko u Selectors pano kako bi pojasnili na koji način možemo premeštati selektore i menjati im redosled. Da bi promenili redosled selektoru (i sa njime celom opisu), dovoljno je da uhvatimo određeni selektor tako što držimo levi taster miša, prevučemo ga do željene nove pozicije i pustimo levi taster miša (slika ispod).


slika 13.19 - Premeštanje selektora Ukoliko želimo da premestimo više selektora odjednom, možemo pritisnuti i držati taster Ctrl na tastaturi i zatim označiti više pojedinačnih selektora levim klikom na svaki od njih. Pošto ih označimo sve, pustimo Ctrl, i prevlačimo kao pojedinačan, koji smo pomenuli ranije. Možemo umesto Ctrl, koristiti taster Shift, i tada kliknemo na jedan, prvi u nizu koji želimo da selektujemo, pa zatim na poslednji. Svi između će biti selektovani. Možemo koristiti i kombinaciju Ctrl/Shift. Ovaj način selekcije Vam je verovatno poznat i kod rada sa fajlovima, jer se koristi u operativnom sistemu. U video materijalu je ovo detaljnije pojašnjeno.

Prebacivanje u eksterni fajl Možemo prebacivati opise čak iz jednog u drugi eksterni fajl, ili iz internog CSS-a (pod <style> tagom) u eksterni CSS fajl. Na isti način, kao malopre, izabraćemo željeni selektor, ili više njih, samo što ih nećemo samo prevući na novo mesto u selectors panou, već ćemo ih prevući i pustiti iznad naziva fajla u Sources panou (slika ispod).


slika 13.20 - Premeštanje selektora iz jednog sourcea u drugi U primeru na slici ostao je jedan selektor (p - za paragrafe) u okviru internog CSS-a. Prevukli smo ga i pustili iznad layout.css oznake u Sources panou. Dreamweaver će prebaciti ceo opis u eksterni fajl i smestiti ga na njegovom kraju. Zatim možemo, ako želimo promeniti redosled u tom fajlu, kao što smo pomenuli ranije. Sa druge strane, pošto je <style> ostao prazan, možemo ga ukloniti ako više nije potreban, tako što ćemo ga selektovati u Sources delu i izabrati ikonicu Remove CSS Source (označena znakom minus).

Kopiranje stilova selektora

Ukoliko uradimo desni klik nad određenim selektorom u panou Selectors, pojaviće se dodatni

meni koji sadrži stavke - Go To Code, Copy All Styles, Copy Styles, Paste Styles i Duplicate,

kao što vidimo na slici ispod.

Opcija Go To Code prebacuje prikaz u Code (ukoliko već nije on aktiviran) i prikazuje

konkretan opis na koji smo kliknuli. Na taj način možemo lako i brzo doći do opisa ukoliko

želimo da sami menjamo kod. Ova opcija možda deluje nepotrebno i trivijalno, ali u CSS

dokumentima sa više hiljada redova koda, ponekad je teško naći ono što nam je potrebno.

Pomoću Copy All Styles, Copy Styles podmenija i Paste Styles opcija po copy/paste

principu je moguće kopirati sva ili pojedinačna svojstva između selektora. Na taj način je

jednostavno stilizovati jedan element na isti ili sličan način isto kao što je stilizovan neki drugi.

Možemo napraviti paralelu između kopiranja stila sloja (copy layer style) u Photoshopu i

kopiranja stilova u Dreamweaveru.

Duplicate opcija radi ono što joj i samo ime kaže. Izborom ove opcije dupliraćemo izabrani selektor, odnosno ceo njegov opis. Ne zaboravite da ne dupliramo samo selektor, već i sva svojstva i vrednosti koje su u njemu unete. Pošto aktiviramo ovu opciju, Dreamweaver će duplirati opis i čekati da unesemo izmenjen selektor, jer nema svrhe ostaviti isti.


slika 13.21 - Padajući meni sa opcijama za kopiranje svojstava selektora

Pitanje: Disable određenog svojstva i vrednosti:

● ne briše kod, već privremeno isključuje specijalnim komentarom briše kod, ali ga čuva u svojoj memoriji

Sažetak Kada želimo da unesemo određenu vrednost, u zavisnosti od tipa polja, CSS designer panel se drugačije ponaša. Svojstva u okviru properties panoa su grupisana u nekoliko kategorija: Layout, Text, Border, Background i Others. Kroz CSS Designer panel možemo premeštati opise, prebacivati ih u eksterni fajl, brisati, ali i privremeno isključivati.

dwcc_13-4585214

Documents