Kurs: --- Adobe Dreamweaver CS5.5 Materijali vezani uz ovu lekciju: - Test formatiranje slika - Formatiranje slika (PDF dokument) Formatiranje slika - HTMLKod mnogih elemenata prilikom rada u DW-u, možemo doći u nedoumicu da li da stilizujemo pomoću HTML-a ili putem CSS-a. To se posebno ističe kod rada sa slikama. HTML podešavanja slike se mogu naći u Properties panelu. Ukoliko Properties nije vidljiv, uključite ga ponovo. Pomenuli smo ranije da se Properties panel menja u zavisnosti od konteksta. Da bismo prikazali podešavanja slike potrebno je da označimo, selektujemo sliku na stranici.
A - Prikaz (thumbnail), veličina i identifikaciona vrednost (ID) slike. ID je bitan jer unikatno označava elemenat i koristimo ga za CSS i JavaScript itd. B - Vrednosti Width i Height, odnosno širina i visina slike. Iako ovde možemo promeniti vrednosti, to nikako nije preporučljivo. Sliku bi trebalo obraditi, pripremiti dimenzije i tek onda postaviti na stranicu. Postoji više razloga za to. Iako su drugačije dimenzije u Properties panelu, slika će sama ostati ista i verovatno će doći do deformacija itd. Ukoliko dimenzije ne odgovaraju originalnim, biće označene bold fontom i pojaviće se dugme Reset Size za vraćanje na originalne dimenzije.
D - Predstavlja putanju do fajla slike (izvora, source). Pošto je slika već uneta, putanja će biti prikazana. Možemo ručno uneti novu putanju ili koristiti iste ikonice kao kod malopre pomenutog linka, sa tom razlikom da sada nećemo linkovati ka fajlu, već ćemo na taj način izabrati fajl slike. E - Polje za unos Alt teksta F - Polje za izbor klase. Slično polju za unos ID i koristimo da radi CSS stilizacije. G - Dodatne ikonice za pomoć i pozivanje tag editora. H i I - Podešavanja mapiranih linkova slike. J - Vertikalni i horizontalni prostor oko slike. Ukoliko dodamo vertikalni prostor, isti razmak će se pojaviti iznad i ispod slike. Analogno tome, ukoliko dodamo horizontalni, isti razmak će se pojaviti levo i desno. Ove opcije se veoma retko danas koriste i trebalo bi koristiti CSS umesto toga. Podsetićemo se, ovo su HTML podešavanja, ne CSS koja ćemo u nastavku obraditi. K - Prikazuje putanju do originalnog fajla slike, ukoliko je dostupan (npr. PSD). L - Označava target atribut prilikom postavljanja linka (tada je i jedino dostupan). M - Vrednost okvira oko slike. Postoji mnogo praktičniji CSS ekvivalent, jer u ovom slučaju dodeljujemo default okvir koji zavisi od browsera. N - Ikonice kojima pozivamo editovanje slike. Izmena slike u Photoshopu, izmena kompresije i ostalih parametara slike i update slike, ukoliko je povezana sa originalnim fajlom. O - Dodatne ikonice za isecanje (Crop), smanjivanje na zadatu vrednost (Resample), osvetljenje i kontrast (Brightness and Contrast), kao i oštrina (Sharpen). Izmene koje se vrše pomoću ovih kontrola ostaju trajno na slici. Preporučuje se da sve izmene vršimo u Photoshopu ili sličnom programu, ali mogu biti korisne za neku brzu izmenu ili u nedostatku odgovarajućeg eksternog softvera. P - Opcija Align može biti dosta zbunjujuća u početku. Podsetićemo se da se slika po default podešavanjima ponaša kao jedan karakter teksta. Zbog toga se, iako je verovatno veća od jednog slova, postavlja pored jednog reda teksta. I u ovom slučaju može se koristiti CSS. Moguće vrednosti za Align su sledeće:
Formatiranje slika - CSSCSS stilizacija slika svakako pruža više mogućnosti u radu i preporučuje se pre nego HTML stilizacija. Jedna od najbitnijih, ako ne i najbitnija prednost jeste ta što možemo stilizovati putem CSS klase i onda tu klasu primeniti na više slika. Kasnije, promenom samo jedne klase, promenićemo formatiranje svih slika. Pogledaćemo na primeru. Na sledećoj slici vidimo sliku koja je uneta u okviru paragrafa, neposredno pre prvog karaktera. Uneta slika i tekst - default podešavanja
Prema ovim default podešavanjima, slika se nalazi pored jedne linije teksta. Mi želimo da slika bude levo od teksta koji se automatski prelama, da ima neki okvir i određeni razmak do teksta kako ne bi bio slepljen. Sve to možemo postići putem CSS-a. Izbaraćemo New CSS Rule (ukoliko već nismo kreirali klasu za sliku), kako je pomenuto u ranijim jednicama kursa. Pojaviće se dijalog poput ovog na slici: Vrednosti koje nudi Dw za novi CSS opis
Dreamweaver je ponudio kreiranje novog CSS opisa i to na osnovu složenog (compound) selektora. Mi ne želimo takav CSS, već da kreiramo posebnu klasu koju možemo koristiti više puta po potrebi. Želimo da ime klase bude dovoljan ciljni elemenat. Zato ćemo izabrati u padajućem meniju za tip selektora klasu (Class), a u polje sa imenom selektora ćemo upisati željeno ime nove klase koje sami određujemo. Na primer photo, jer ćemo tu klasu primenjivati na fotografije. Primetićemo tačku direktno ispred imena, što označava klasu. Vrednosti koje nudi Dw za novi CSS opis
Pošto potvrdimo ove vrednosti, pojavljuje nam se dijalog za izmenu CSS formatiranja, koji smo već pominjali. Uneli smo neke vrednosti koje se mogu videti na slikama ispod. Postavili smo marginu, padding, float, kao i border. Unete CSS vrednosti za novu klasu
Pošto i ovaj dijalog potvrdimo, videćemo da se ništa nije dogodilo. I dalje je slika ostala gde jeste, a to je zato što klasa nije primenjena na nju. Selektovaćemo sliku i u Properties Inspectoru postaviti novokreiranu klasu. Izbor klase u Properties Ins.
Sada ćemo na stranici imati nešto poput prikaza na sledećoj slici: Slika sa dodatom klasom i CSS formatiranjem
Sada korišćenu klasu u ovom primeru možemo ponovo koristiti na stranici za stilizovanje i ostalih slika.
Slike u pozadiniPraktično svaki elemenat na strani može imati pozadinu. Sama pozadina može biti boja ili slika, čak i kombinacija ta dva. Slike u pozadini se razlikuju od normalno unetih slika. U HTML-u se uopšte ne pojavljuju, već se putem CSS-a vezuju za određeni elemenat. Pogledaćemo na primeru. Normalno uneta slika putem img taga (levo) i pozadinska slika (desno)
Deo HTML strane prikazuje dve slike. Leva je postavljena putem normalnog img taga, dok je desna postavljena kao pozadina div-a. Na prvi pogleda nema nikakve razlike. Ipak, u levom primeru kreirali smo div i u njega uneli sliku. Ceo kod izgleda ovako: <div> <img src="images/galerija_spomenik.jpg" width="300" height="200" alt="Slika" /> </div>
Div nema širinu ni visinu, ali te vrednosti dobija od slike, tj. proširuje se kako bi obuhvatio sliku. Sa druge strane, kod pozadinske slike, div se ne prilagođava slici koja je u pozadini. Njeni atributi nemaju nikakav uticaj na div. U našem primeru, na desnoj slici, postavljen je sledeći kod: <div class="pozadinskaSlika"> </div> ali moramo dodati i CSS: .pozadinskaSlika { background:url(images/galerija_spomenik.jpg) left top no-repeat; width:300px; height:200px; }
Primetićemo da je u HTML kodu div prazan i nema nikakav sadržaj, dok samu sliku dodajemo kroz CSS (detaljima ćemo se pozabaviti odmah u nastavku). Pored toga, moramo upisati širinu i visinu, jer će dimenzije, u suprotnom, zavisiti od sadržaja diva. Slika u pozadini je isečena jer visina/širina diva zavisi samo od sadržaja (u ovom slučaju od teksta)
Postavljanje CSS pozadinske slikeKada želimo da postavimo sliku kao pozadinu, kreiraćemo novi ili otvoriti izmenu postojećeg CSS opisa. U grupi Background možemo izabrati fajl slike i još nekoliko podešavanja.
Podešavanje CSS detalja pozadinske slike
Iznad su prikazana pomenuta podešavanja kroz CSS Styles, dok CSS kod izgleda ovako: background-color: #FFFFFF; background-image: url(../images/galerija_spomenik.jpg); background-repeat: no-repeat; background-position: 0px 10px; background-attachment: scroll; a može se skratiti kao: background: url(../images/galerija_spomenik.jpg) 0px 10px no-repeat scroll #FFFFFF;
|