Utisci korisnika

Pre svega želim da vam se zahvalim na veoma brzom i profesionalnom pristupu. Jovan Knežević - Hong Kong

Pre nepunih mesec dana kupila sam paket kurseva: PRIPREME ZA POLAGANJE CAMBRIDGE INTERNATIONAL DIPLOMA IN BUSINESS. Obično neki opšti utisak formiramo na kraju, ali ja u ovom trenutku želim sa…


Kompletna lista utisaka

Testiranje online

Arhitektura računara

Za one koji žele da znaju više.

Windows OS

Ovo bi svakako trebalo da probate.

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Newsletter

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Ime:

Prezime:

Email:


Anketa

Arhiva anketa

BAZA ZNANJA


Kurs: Adobe Dreamweaver CS5.5

Modul: Slike

Autor: Vuk Ninić

Naziv jedinice: Formatiranje slika


Materijali vezani uz ovu lekciju:

- Test formatiranje slika
- Formatiranje slika (PDF dokument)



Formatiranje slika - HTML

Kod 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.

 
Properties panel za sliku

  

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.
 


C -
Ovo polje predstavlja link koji vodi sa slike ka drugoj stranici, adresi, fajlu etc. Možemo ručno uneti putanju ili koristiti dve ikonice sa desne strane. Klikom na folder ikonicu otvara se dijalog za izbor fajla u okviru sajta ukoliko želimo da linkujemo ka fajlu. Ukoliko kliknemo levim tasterom i zadržimo ga pritisnutog nad ikonicom point to file, možemo prevući do fajla i na taj način linkovati neki od fajlova. U svakom slučaju, pojaviće se putanja u polju levo, a slika će postati link.

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:

  • Default - Osnovno podešavanje. Zavisi od browsera. 
  • Baseline and Bottom - Poravnava osnovnu liniju teksta sa donjom ivicom slike. Može bitii drugi elemenat umesto teksta.
  • Top - Poravnava vrh slike sa vrhom najvišeg elementa (slika ili tekst) u tekućem redu.
  • Middle - Poravnava sredinu slike sa osnovnom linijom u tekućem redu.
  • Text Top - Poravnava vrh slike sa vrhom najvišeg dela teksta u tekućem redu.
  • Absolute Middle - Poravnava sredinu slike sa sredinom slike u tekućem redu.
  • Absolute Bottom - Poravnava donju ivicu slike sa donjom ivicom tekućeg reda teksta (uključujući i descendere na slovima).
  • Left - Postavlja sliku na levu marginu i dopušta da se tekst prelama desno.
  • Right - Postavlja sliku na desnu marginu i dopušta da se tekst prelama levo.

 


 
Dostupne Align vrednosti

 

Formatiranje slika - CSS

CSS 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 pozadini

Praktič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 slike

Kada ž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.

  • Background-color - Dodaje boju pozadine elementu. Ukoliko ne unesemo sliku, ova boja će biti u pozadini. Takođe, ukoliko je slika manja od elementa a ne ponavlja se, ili ukoliko poseduje providne detalje, ova boja će se videti. Zamislite da pozadinu bojimo ovom bojom, a pozadinsku sliku lepimo preko nje.
  • Background-image - Putanja do slike. Kao i ranije, fajl bi trebalo da bude unutar sajta.
  • Background-repeat - Ovo je korisna opcija koja nam omogućava beskonačno ponavljanje po x, po y ili po obe ose, kao i bez ponavljanja. Ukoliko ne postavimo drugačije, default vrednost je ponavljanje i po x i po y. Često se koristi za postavljanje pattern elemenata za pozadinu.
  • Background-attachment - Određuje da li se slika u pozadini skroluje, pomera zajedno sa sadržajem ili ostaje fiksirana na originalnoj poziciji. Preporučujem da u početku ne unosite ovu opciju ili da je postavite na scroll vrednost (što daje isti rezultat).
  • Background-position - Određuje početnu poziciju pozadinske slike u odnosu na element. Posebno podešavanje je za x, posebno za y osu. Ukoliko je attachment postavljen na fixed, odnosi se na dokument, ne na elemenat. Mogu se izabrati razni tipovi jedinica (default je px),  ali i upisati left, center, right, bottom i top umesto vrednosti.

 

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;

Smatrate da je ova lekcija korisna?  Preporučite je. Broj preporuka:0


Molimo Vas unesite svoje podatke i dobićete pristup besplatnim lekcijama.

Ime: 
Prezime: 
Email: