BAZA ZNANJA

Kurs: --- Adobe Dreamweaver CS5.5

Modul: Osnove CSS-a

Autor: Vuk Ninić

Naziv jedinice: Rad sa CSS-om

Properties Inspector

Properties Inspector smo pominjali ranije, ali sada ćemo razmotriti njegove opcije vezane za CSS umesto HTML. Pomoću njega možemo lakše menjati CSS, bez potrebe da koristimo uvek CSS Styles panel.

Veoma je važno da budemo svesni šta ćemo tačno promeniti u kodu promenom neke od ovih opcija. Kod HTML formatiranja sve izmene se vrše direktno, dok kod CSS-a se mogu desiti u različitim klasama na različitim mestima. Na primer, bold formatiranje može doći iz jednog opisa, izbor fonta iz drugog i tako dalje.

Properties Inspector u CSS modu

A - U ovom delu panela možemo izabrati da li želimo opcije vezane za HTML ili za CSS. HTML delom smo se već pozabavili i sada ćemo ostaviti ili izabrati CSS.

B - Polje koje označava trenutno izabran opis. DW automatski bira onaj koji je najbliži izabranom elementu na strani. Iz padajućeg menija možemo izabrati jedan od primenjenih opisa (Cascade grupa), kreirati novi opis ili inline CSS (New Rule grupa) ili dodeliti neku od dostupnih klasa u dokumentu, kao i ukloniti klasu (Apply Class grupa)

Targeted Rule u okviru Properties inspectora

C - Putem Edit Rule tastera otvaramo dijalog za izmenu trenutnog opisa, a pomoću CSS Panel opcije možemo pozvati CSS Styles panel ukoliko nije aktivan.

D - Opcije za formatiranje su na prvi pogled iste kao kod HTML formatiranja, ali utiču na promenu CSS parametara. 

E - Putem ovog tastera možemo pristupiti podešavanjima strane. Ova funkcionalnost je ista kao kod HTML moda.

F - Prečice koje nude pozivanje Help dijaloga, kao i Quick tag Editora.

Code Navigator

Jedna od veoma korisnih opcija je i Code Navigator. Kada postavimo kursor u dizajn prikazu i sačekamo nekoliko sekundi, pojaviće se mala ikonica sa prikazom kormila, kao na slici.

Prikaz Code Navigator ikonice

Klikom na pomenutu ikonicu otvara se Code Navigator dijalog. U dijalogu se prikazuju selektori svih opisa na trenutnom elementu. Najniže naveden je najbliži. Prelaskom mišem preko nekog od njih, pojavljuje se tooltip sa primenjenim svojstvima. Klikom na neki od selektora nas vodi na mesto u Code prikazu gde se nalazi taj CSS, a u CSS styles panelu se fokusira takođe na izabrani CSS.

Ukoliko ne želimo da se stalno pojavljuje ikonica Code Navigatora dok radimo, možemo je isključiti tako što ćemo izabrati i potvrditi Disable opciju u donjem desnom uglu dijaloga. Neće se više sama pojavljivati, a možemo pozvati Code Navigator tastaturnom prečicom Alt + klik na element, odnosno Cmd + Opt + Klik na element za Mac.

CSS Disable/Enable

CS5 verziji dodate su nove opcije za Disable/Enable kojim možemo privremeno ugasiti/uključiti određeno CSS svojstvo u okviru opisa.

CSS styles sa isključenim (disable) svojstvom

Na slici vidimo da je u okviru trenutno izabranog p opisa isključeno svojstvo za font-size.

Bilo koje svojstvo možemo isključiti klikom na prostor levo od samog svojstva i potom se na tom mestu pojavljuje crvena ikonica, klikom na koju uključujemo nazad svojstvo. Svojstvo možemo isključiti i pomoću druge ikonice sa desne strane, u donjem desnom uglu panela.

Ono što se dešava "ispod haube", odnosno u CSS kodu, jeste to da DW postavlja specifičan komentar oko izabranog svojstva.

Isključeno (disable) CSS svojstvo u kodu

Komentari se, kao što Vam je možda poznato iz raznih drugih programskih jezika, mogu koristiti da unesemo bilo kakav tekst unutar koda, a koji se neće koristiti u renderu, prikazu strane. Drugim rečima, browseri taj deo preskaču kao da ne postoji.

DW prilikom Disable opcija postavlja specifičan komentar sa ključnom reči disable. Preporučujem da ove komentare koje DW sam kreira ne menjate jer, ukoliko promenite makar jedan karakter, to svojstvo se više neće pojavljivati u panelu CSS Styles (čak ni kao isključeno), a mogu se poremetiti i ostala svojstva i opisi.

Sa druge strane, možemo sami postavljati komentare između /* i */ . Sve što je između će biti izuzeto iz prikaza, odnosno pod komentarom. Kao i sve karaktere, komentar koji počnemo moramo završiti.

Dodavanje eksternog CSS fajla

U CSS Styles panelu, putem Attach Style Sheet možemo povezati eksterni CSS. Ova opcija otvara Attach External Style Sheet dijalog za izbor CSS fajla koji želimo da linkujemo ili importujemo u tekući dokument.

Dodavanje eksternog CSS fajla 

Media označava sredinu na koju će se primeniti izabrani CSS. Media polje možemo ostaviti prazno, jer će onda web čitači primeniti CSS fajl na sve sredine (medijume). Ukoliko izaberemo jedan ili više medijuma, na ostalima izabrani CSS neće biti primenjen. Takođe, možemo kreirati poseban fajl za različite svrhe, na primer za mobilne uređaje ili za print. Ako napravimo CSS fajl za print, izabraćemo opciju print iz padajućeg menija. Ovo je korisno ako, na primer, pomoću em vrednosti definišemo veličinu h1, ali želimo da u štampi taj h1 bude tačno određen pomoću pt ili drugih tipografskih vrednosti. Opcije koje ćemo najčešće koristiti su screen (za ekrane monitora/uređaja) i print (za štampu).

Postoje dve mogućnosti kod dodavanja CSS fajla. Link opcija, povezuje, linkuje CSS fajl sa html dokumentom. Import opcija je namenjena kako bi jedan CSS fajl importovali, uvezli u drugi CSS fajl. Tako možemo povezati na HTML strani samo jedan CSS fajl, a onda u njega importovati još nekoliko. Sada, sa modernim browserima, i import se može koristiti za html, tako da i jedan i drugi način nemaju nekih preteranih razlika, osim drugačije sintakse.

Prebacivanje (eksportovanje) internog u eksterni CSS

Pri kreiranju možemo izabrati da CSS opise smeštamo u HTML fajl direktno u okviru HEAD dela strane, gde bi izgledao ovako:

<style type="text/css">
#container {
     margin:0 auto;
     width:900px; }
#header {
     position:relative;
     float:left;
     width:900px;
     height:405px;
     background:url(../images/headerBack.gif) no-repeat top left; }
</style> 

Kako smo ranije pomenuli, ovo je interni CSS i sasvim korektan način kreiranja opisa. Ipak, te stilove ne možemo primeniti na bilo koji drugi HTML, već samo na taj u kome se nalaze. Možda ćemo želeti da isti CSS primenimo na nekoliko ili sve strane sajta i zato postoji mogućnost eksportovanja iz internog u eksterni CSS.

Interni opisi se u CSS Styles panelu nalaze u grupi označenoj sa <style>, dok su eksterni razvrstani po CSS fajlovima.

Uradićemo sledeće: označićemo u CSS Styles panelu jedan ili više opisa, uraditi desni klik mišem i izabrati Move CSS Rules… opciju. Označavanje više opisa možemo uraditi tako što ćemo držati pritisnut taster Ctrl na tastaturi i levim klikom miša izabrati željene, ili, ako su redom opisi koje želimo da izaberemo, označiti prvi, pritisnuti i držati Shift i označiti poslednji koji želimo.

Prebacivanje internog CSS opisa u eksterni 

Pošto smo izabrali Move CSS Rules opciju, otvoriće se drugi dijalog Move To External Style Sheet u kome možemo izabrati gde prebacujemo opise. Možemo prebaciti u postojeći CSS fajl (ako je dostupan) izborom opcije Style Sheet ili kreirati novi CSS fajl izborom A new style sheet… opcije. 

Izbor eksternog CSS fajla prilikom eksporta internog CSS-a

Ukoliko smo izabrali novi CSS fajl, otvoriće se sledeći dijalog u kome biramo gde želimo da kreiramo CSS fajl. Isti dijalog se otvara i ako pri kreiranju CSS opisa (rule) izaberemo novi CSS fajl.

Kreiranje novog eksternog CSS fajla

Drugi način da uradimo ovo je da jednostavno uhvatimo opis koji želimo i prevučemo ga na željeno mesto. Ukoliko ga prevučemo na eksterni CSS, Dreamweaver će ga tu prebaciti. Takođe, ovako možemo razvrstati redosled opisa u okviru jednog CSS fajla.

Premeštanje CSS opisa prevlačenjem

Inline CSS se ne može eksportovati u eksterni CSS jer je on ugnježden na samim HTML tagovima.