dwcc_17-4585214

Copyright © Link group

17. Slike Tipovi slika na internetu Pre nego što počnemo da koristimo slike na stranicama, moramo se podsetiti koje vrste slika možemo primeniti. Postoji tri tipa slika koje se danas koriste na netu: JPG, GIF i PNG. Mogli bismo detaljno i dugo pričati o svakom od ovih formata, ali to nije tema ovog kursa. Bitno je zapamtiti da aktuelni browseri prepoznaju ta tri formata. Možda ste navikli na rad i sa nekim drugim tipovima, kao što su PSD, AI, TIFF, EPS i tako dalje, ali se oni ne mogu prikazati u HTML stranicama, barem ne bez prethodne koverzije u JPG, GIF ili PNG. U tim formatima možemo čuvati radne i druge verzije, a onda ih konvertovane postaviti na naše stranice. Kada bismo u par reči trebali da opišemo ova tri tipa, možemo zapaziti sledeće:

● JPG format - najbolji je za fotografije i slike sa puno detalja. Ima odličnu kompresiju, tj. postiže dovoljan kvalitet fotografija uz relativno male fajlove. Ne podržava providnost. ● GIF format - dobar za ikonice i male sličice. Ima velikih problema sa providnošću, koju podržava, ali ne na prihvatljiv i realno upotrebljiv način. Može se reći da je na zalasku karijere i polako gubi bitku sa PNG i JPG. ● PNG format - najnoviji format od ova tri. Sličan GIF formatu, ali uz znatna poboljšanja. Odličan je za ilustracije i slike sa dosta jednobojnih površina. Podržava providnost u potpunosti. Loša strana je to što fajlovi mogu bit veći, pogotovo za fotografije, ali onda koristimo JPG. Uglavnom se koristi PNG24 i PNG8. Drugi je oslabljena varijanta koja je veoma slična GIF standardu, i preporučuje se njeno izbegavanje.

Na sledećoj slici vidimo detalj Photoshop CC dijaloga Save for web. Sliku koja je originalno 2.9Mgb, možemo snimiti kao PNG24 (gore desno), ali u tom slučaju fotografija će biti oko 900kb. Ta varijanta je zadržala sav kvalitet originalne fotografije. U donjem redu su dve JPG varijante, leva ima kvalitet 80%, a desna 10%. Kod leve se skoro ne vide nikakve deformacije, ali je veličina oko 200kb, što je mnogo bolje nego kod PNG varijante. U desnoj JPG varijanti, veličina je oko 40kb, ali je pad kvaliteta drastičan i vidljiv.


slika 17.1 - Photoshop - Save for web dijalog Ono što možemo zaključiti je da ukoliko pripremate fotografiju sa puno detalja, opredelite se za JPG i podesite kvalitet između 40-80. PNG koristimo za fotografije ukoliko veličina ne igra ulogu. Sa druge strane, možemo imati situaciju gde pripremamo ilustraciju koja sadrži dosta jednobojnih površina. Pogledajmo onda isti dijalog od malopre. Slika u originalu je i sada 2.9Mgb. PNG će sada biti oko 4Kb, dok će JPG u boljem kvalitetu (80%) biti oko 11Kb, a u manjem (10%) oko 10Kb. Ovaj jednostavan primer lepo pokazuje da se PNG bolje snalazi sa ilustracijama, dok JPG ne može da ih kompresuje na adekvatan način.


slika 17.2 - Photoshop - Save for web dijalog Iz ovoga možemo zaključiti da ukoliko pripremate ilustraciju sa relativno malo detalja, opredelite se za PNG, i to u verziji 24. Preporučujem da otvorite Photoshop i da sami testirate i isprobate kompresiju i snimanje fotografija. Dijalog koji smo pominjali se može naći u Photoshop padajućim menijima File > Save for Web.. (u starijim verzijama je Save for Web and Devices). Što se tiče Adobe Illustratora, on poseduje skoro identičan dijalog kao u Photoshopu. Ukoliko koristite neki drugi alat za crtanje i manipulaciju fotografijama (npr GIMP i sl.), svi oni imaju slične opcije u vezi sa snimanjem (format, kompresija itd.). Osnove slika na internetu Kada dodajemo slike i postavljamo ih na naše web stranice veoma je važno zapamtiti neka osnovna pravila: Dimenzije slike, tj. širina i visina (width/height) u pikselima moraju odgovarati širini i visini u prikazu na stranici. Drugim rečima, ukoliko imamo sliku 200x200px ne smemo je postaviti i prikazati u drugoj dimenziji. Mora biti prikazana u veličini 200x200px. Nikako ne postavljati tu sliku npr 150x150 u prikazu, ili još gore 300x300 i tako dalje. Ukoliko je fajl slike 200x200, takav će i biti preuzet sa servera od strane browsera, a zatim se prikazuje korisniku. Ukoliko se dimenzije ne poklapaju, browser će sabiti/proširiti sliku kako bi je uklopio. To nikako nije dobro, jer se time narušava izgled same slike. Čest pogrešan slučaj na webu je postavljanje slika direktno sa fotoaparata i tada imamo situaciju da browser preuzima sliku npr 4000x3000px, koja je pritom 10+ Mgb, a prikazuje je u dimenzijama 400x300px. Iako je prikazana u manjoj


varijanti, korisnik, odnosno njegov browser, mora da preuzme celu veliku sliku i onda je prikaže u manjoj dimenziji. Ispravan način je da se slika pre unosa na sajt, smanji u tačnu dimenziju, i zatim prikaže kao takva. Ne smemo deformisati slike Proporcije slika su veoma bitne. Već smo pomenuli da ne treba menjati dimenzija slikama kroz HTML i CSS, ali pogotovo ne treba deformisati proporcije. Ukoliko je odnos stranica 4:3 ili 1:1, trebao bi takav i ostati. Vodite računa o tome u HTML postavkama, ali i u Photoshopu i sličnom alatu. Nije svaka slika besplatna iako je na internetu Čak iako možda pronađete idealnu sliku kroz Google images, to ne znači da je možete i upotrebiti na svom sajtu. Svaka slika kao i svako drugo autorsko delo nosi određena prava i obaveze. Proverite pod kojom licencom je objavljena slika pre preuzimanja za svoj sajt. Rezolucija slike je bitna Uglavnom svi monitori prikazuju slike u rezoluciji od 72 dpi i tu rezoluciju treba i postavljati i kada se snimaju i pripremaju naše slike. Danas to donekle gubi na značaju jer različiti uređaji sve češće dobijaju ekrane koji imaju mnogo veći dpi od pomenutog (npr. Apple MacBook Pro sa retina ekranom, noviji iPhone, HTC One, Samsung Galaxy S serija, Sony Xperia Z, Nexus tablet itd), ali slobodno ostavite rezoluciju od 72dpi. Potrebno je pravilno organizovati strukturu fajlova Svaka slika koja se nalazi na sajtu, mora biti u okviru root foldera (eventualno linkovana sa drugog sajta). Ne smemo povezati sliku iz npr Documents foldera. Preporuka je da se kreira još u startu rada na sajtu, podfolder images (ili imgs, slike ili nešto drugo) u kome ćemo smeštati sve naše slike sajta. Dodavanje slika Slike možemo dodati u HTML dokument na više načina. Potrebno je da za početak postavimo kursor gde želimo našu sliku. Jedan od načina je da izaberemo iz padajućih menija Insert > Image > Image opciju. Tastaturna prečica je ctrl+alt+i što može biti korisno zapamtiti. Druge dve opcije u tom meniju ćemo obraditi na kraju ove jedinice.


slika 17.3 - Unos slike u HTML dokument Potom će se pojaviti prilično poznat dijalog za izbor fajla koji vidimo na slici iznad. Obratite pažnju da postoji i dugme Site Root koje nas vraća u root direktorijum sajta na kome radimo, a nalazi se pored OK i Cancel. Ukoliko unosimo sliku iz root direktorijuma pošto potvrdimo klikom na OK, pojaviće se naša slika na stranici. Ali, ukoliko slika nije već u root direktorijumu sajta (na primer, našli smo je na desktopu), Dreamweaver će nas upozoriti na to i upitati da li želimo da je iskopiramo u root folder. Ovo je dobra funkcionalnost, jer ukoliko slika ostane van root foldera, biće dostupna na našem računaru, na kome kreiramo sajt, ali kada budemo sajt prekopirali na server ili na neki drugi računar, ona će se izgubiti. Zbog toga, uvek izaberite opciju Yes. Pošto izaberemo tu opciju, pojaviće se novi dijalog Copy File As, kroz koji možemo snimiti tu sliku u naš root folder. pod imenom koje unesemo, kao i na mestu (podfolderu) koje želimo. Podsetićemo se, sam HTML fajl ne sadrži i ne uključuje druge materijale, poput slika. To znači da kada otvorimo HTML stranu koja prikazuje i slike, same slike nisu u .html fajlu, već ih on učitava iz posebnog jpg fajla ili fajlova (png, gif..). Analogno tome, ako je neka stranica kreirana za galeriju i sadrži deset slika, svih deset slika (fajlova) moraju biti u okviru sajta ili na dostupnoj putanji. Da pojasnimo na primeru – ako napravimo novi sajt u lokalu na putanji: D:/sites/DWsite i u Root folderu stranu index.html i ukoliko postavimo nekoliko slika, a sami fajlovi se nalaze u podfolderu images (D:/sites/DWsite/images), to bi značilo da su putanje do slika tipa: images/slika1.jpg. Kada bi takav Root postavili na server, slike bi se normalno prikazivale jer su na istoj putanji u odnosu na HTML. Sa druge strane, u istoj situaciji, ukoliko smo slike ostavili u MyDocuments ili nekom drugom folderu i pri tom ih linkovali preko putanja, npr. C:/users/admin/Documents/MojSajt/images/slika1.jpg, sajt će raditi normalno na lokalu (na našem računaru), ali pošto postavimo Root folder na net – neće. HTML će i dalje na istoj


putanji tražiti slike, a sa sigurnošću se može tvrditi da je na njoj neće naći jer na serveru ne postoji C disk, niti mydocuments.

slika 17.4 - Upozorenje ukoliko želimo da dodamo sliku koja je van root foldera Ukoliko ste prilikom kreiranja sajta u Site Setup dijalogu, definisali i podrazumevani folder za slike (Default images folder), Dreamweaver nas neće pitati gde da iskopira sliku već će sam, automatski iskopirati u podrazumevani folder i to sa originalnim imenom. U tom slučaju, opet će se odmah posle izbora fajla, pojaviti uneta slika na stranici. Obratite samo pažnju na Files panel. Slika će se pojaviti među našim fajlovima. Alt tekst Alt tekst, odnosno alt atribut na slici je detalj koji se često zaboravlja. On ima više upotreba, ali osnovno je da ponudi alternativu ukoliko se slika iz bilo kog razloga slika ne učita. U tom slučaju, prikazaće se pomenuti tekst u okviru predviđenim za sliku. Ipak, ne bi trebalo bukvalno opisivati sliku, već pružiti info o njenoj svrsi. Na primer, alt tekst slike upozorenja ne bi trebalo da bude Žuti trougao sa crnim okvirom i znakom uzvika, već Upozorenje! i slično. Alt tekst koriste i pretraživači poput Googla radi indeksiranja. Po standardima W3C, alt tekst je obavezan na slici, ali i pored toga, dobra je praksa uvek upisivati smislen alt tekst. Alt tekst možemo dodati i kasnije, ali preporuka je da se to čini u startu, odmah pošto dodamo sliku. Alt tekst jednostavno postavljamo tako što selektujemo sliku i upišemo tekst u Alt polju properties inspector panela. Takođe, možemo ga upisati kroz kod. Dw već u startu, kada kreira kod za sliku, postavlja prazan alt atribut. Drugi načini za dodavanje slika Osim malopre pomenutog načina za dodavanje slika, postoji, naravno, još mogućnosti.


Sliku možemo dodati i kroz Insert panel i grupu Common. U njoj se kao četvrta stavka nalazi opcija za unos slike. Obratite pažnju da se ovde kriju tri različite opcije u podmeniju. Klikom na ikonicu ili naziv, direktno pokrećemo poslednju korištenu, dok klikom na strelicu, otvaramo podmeni. To su tri iste opcije koje se nalaze u padajućim menijima Insert > Image.

slika 17.5 - Ubacivanje slike putem Insert panela Osim kroz padajuće menije i Insert panel, sliku možemo i prevući sa desktopa ili nekog drugog foldera i pustiti iznad stranice. Potom je proces unosa isti kao ranije. Takođe, možemo prevući i sliku iz Files ili Assets panela. Assets panel Ovaj panel nam omogućava lak način manipulisanja i pregleda svih materijala (Asseta) koje koristimo u našem sajtu. Uslov da se neki fajl pojavi u ovom panelu jeste taj da prethodno taj fajl iskopiramo u Root folder. Na primer, ukoliko neku sliku iskopiramo u Images folder u okviru sajta, automatski će se pojaviti u Assets panelu. Pomenuti panel najšeće i koristimo za manipulaciju slikama. Assets panel sortira elemente sajta u osam kategorija kojima se pristupa klikom na jednu od vertikalno poređanih ikonica na levoj strani panela. Na slici ispod, označene su te ikonice.

● Images - U ovoj kategoriji se nalaze svi jpg, png i gif fajlovi i prikazane su njihove dimenzije, veličina i putanja do njihovog mesta na računaru u donjem delu, dok je umanjeni prikaz slike prikazan iznad pošto se slika selektuje. ● Colors - Ova kategorija prikazuje sve boje koje su specificirane na sajtu, uključujući i pozadinske boje, boju teksta i linkova. ● URLs- Ovde su prikazani svi linkovi, ne samo eksterni apsolutni http://, nego i email linkovi, FTP adrese i JavaScript linkovi. Relativni linkovi u okviru sajta se ne prikazuju (npr. linkovi između stranica, fajlova i sl.). ● SWF i Movies - Obe kategorije prikazuju fajlove sa odgovarajućom ekstenzijom, flash, odnosno video fajlove, poput kategorije slika.


● Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajlove ka kojima web stranica ima linkove. U ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnježdeni u web stranicu. ● Templates i Library - Poslednje dve kategorije se koriste za elemente koji se više puta koriste

slika 17.6 - Assets panel

Kao što je već rečeno, u Assets panelu možemo videti sve slike koje su u okviru sajta. Važno je pomenuti da se tu prikazuju sve slike, pa i one koje nisu u okviru Images foldera. Zbog prikaza svih fajlova, iz svih foldera u jednoj jedinoj listi, može se desiti da nastane "gužva". Ukolliko jednim klikom levim tasterom miša izaberemo neku od slika, njen umanjeni prikaz (engl. Preview) će se pojaviti u gornjem delu panela. Ova opcija je vrlo zgodna radi lakog i brzog pronalaženja slika. Iz samog dijaloga možemo pozvati Default editor i izmenu neke od slika tako što ćemo uraditi dvoklik nad slikom. Verovatno će Vam se i desiti da slučajno pozovete Fireworks ili Photoshop u početku, jer ćete uraditi dvoklik umesto jednog. Osim dvoklika, možemo koristiti dugme Edit u donjem desnom uglu panela. U svakom trenutku možemo sortirati prikaz po kolonama kao što bismo to uradili u folderima operativnog sistema.


Favorites u Assets panelu Jedna od zgodnih opcija kojima raspolaže DW jeste mogućnost da neke slike izdvojimo u omiljene (engl. Favorites). Primetićemo da se u gornjem delu panela, na sredini, nalaze dva radio dugmeta: Site i Favorites. Site opcija, koja je i izabrana u startu, prikazuje sve fajlove u okviru sajta. Opcija Favorites prikazuje samo one koji su označeni kao omiljeni. Naravno, Favorites lista je u startu prazna.

slika 17.7 - Prikaz svih ili omiljenih Asseta

Bilo koji od fajlova može se označiti kao Favorite tako što ćemo uraditi desni klik nad željenom slikom i u meniju izabrati Add to Favorites ili označiti sliku levim klikom, a potom izabrati dugme Add to Favorites iz donjeg desnog ugla panela (ikonica je predstavljena kao znak + i traka). Takođe, u Files panelu, može se označiti jedna ili više slika i uz izbor Add to Image Favorites opcije iz desnog klik menija, dodati slika u omiljene. U svakom slučaju, pojaviće nam se dijalog koji nas obaveštava da je fajl dodat u omiljene. Na istom dijalogu postoji sheck box kojim možemo isključiti njegovo buduće pojavljivanje, ali budite oprezni jer se može desiti da više puta dodamo isti fajl u omiljene, jer ćemo time isključiti povratnu informaciju.

slika 17.8 - Dijalog dodavanja u omiljene Važno je zapamtiti da prilikom dodavanja favorita Dreamweaver ne kopira niti radi bilo šta drugo nad samim slikama, tj. fajlovima. On samo filtrira prikaz i izdvaja označene omiljene fajlove. U tom prikazu možemo promeniti nadimak slike (Nickname). Opet, samo ime fajla neće se promeniti. Klikom na ikonicu u donjem desnom uglu New Favorites Folder ili izborom istoimene prečice iz menija koji se pojavljuje desnim klikom, možemo kreirati nove foldere u okviru omiljenih. Potom prevlačenjem fajlova, možemo ih razvrstavati u foldere, što olakšava organizaciju.


slika 17.9 - Prikaz omiljenih Asseta

Bez obzira na to da li je aktivan prikaz svih fajlova ili samo omiljenih, možemo lako dodati sliku na stranicu. Jedan način je da postavimo kursor na stranici gde želimo sliku, a potom selektujemo željenu u Asset panelu i izaberemo Insert dugme u donjem levom uglu. Drugi način je da prevučemo sliku držeći levi taster miša iz Asset panela direktno na stranicu. Podešavanje eksternih editora Kako je pomenuto ranije, može se direktno pozvati Photoshop, Fireworks ili neki treći program za izmenu slika, direktno iz Dreamweavera. Postoji više načina, ali je najlakši dvoklikom na samu sliku u Files, odnosno Assets panelu. Podešavanje koji program otvara koji format možemo izvršiti u Preferences dijalogu, u kategoriji FileTypes/Editors. U levoj listi se nalaze ekstenzije fajlova, a u desnoj dodeljene eksterne aplikacije. U startu su za slike podešeni Photoshop i Fireworks, pod uslovom da su instalirani na računaru. Možemo selektovati aplikaciju iz liste i izabrati opciju Make Primary. Tako podešavamo da se ta aplikacija otvara posle dvoklika za tu ekstenziju. Takođe, ukoliko aplikacija nije na listi (npr. Gimp), možemo je dodati preko + ikonice i ukazivanjem na njen .exe fajl.


slika 17.10 - Podešavanje default editora Integracija sa Photoshopom Iako smo pomenuli da možemo samo koristiti JPG, PNG i GIF slike na našim sajtovima, Dreamweaver može učitati i koristiti PSD fajlove koje smo kreirali u Photoshopu. U tom slučaju se ipak ne prikazuje PSD fajl već Dw učitava PSD, a onda od njega kreira JPG (ili drugi kompatibilan format koji izaberemo). Tako da za jednu sliku dobijamo dva fajla koja su povezana. Ostaje PSD radni fajl i stvara se novi za prikaz. Ukoliko kasnije promenimo radni, PSD fajl može se odmah izmeniti i prikazana slika koja se prikazuje na stranici, odnosno svuda na sajtu (pod uslovom da nismo obrisali ili pomerili PSD). Ovakve fajlove uvozimo kao i ranije pomenute slike, pomoću Insert > Image iz padajućeg menija ili iz Insert panela. Ipak, ukoliko izaberemo PSD fajl umesto obične jpg/gif/png slike, što smo ranije činili, pojaviće se dijalog poput ovog koji vidimo na sledećoj slici:


slika 17.11 - Podešavanje PSD slike prilikom unosa Ovde se nalaze podešavanja za izbor tipa fajla (Format padajući meni), dok se ispod nalaze opcije vezane za taj format. Na primer, ukoliko izaberemo JPEG u format meniju, ispod će se pojaviti samo podešavanje za kvalitet, dok ukoliko izaberemo PNG ili GIF imaćemo mnogo više opcija vezanih za taj format. Na vrhu dijaloga je opcija Preset u kojoj možemo izabrati predefinisana podešavanja ukoliko želimo.

Upozorenje u vezi sa PNG označavanjem: primetićete da se u Dreamweaveru pojavljuju oznake PNG8, PNG24 i PNG32, dok se u Photoshopu mogu naći samo PNG8 i PNG24. Pritom ono što Dw smatra za PNG32, Photoshop smatra za PNG24. O čemu se tu u stvari radi? Ovaj problem, tj. razlika vuče korene iz perioda kada su Dw i Fw bili deo Macromedia familije, dok je Ps bio deo Adobe porodice, pre spajanja kompanija. Dreamweaver je nasledio označavanje Fireworksa po pitanju PNG fajlova. Po njemu PNG24 ne podržava providnost (transparency), dok je PNG32 podržava. Photoshop sa druge strane i jednu i drugu varijantu vodi kao PNG24 (sa i bez podrške za providnost). Odatle se pojavljuje ova zabuna. Dakle, ono što je PNG24 u Ps, to je PNG24 i PNG32 u Dw, samo zapamtite da 24 u Dw nema providnost.

Pošto potvrdimo, DW će upitati gde da sačuva novu sliku. Svakako ćemo izabrati poziciju unutar root foldera, preporučeno unutar Images podfoldera. Slika će dobiti malu ikonicu u levom gornjem uglu, a na Properties panelu dok je selektovana slika na strani videćemo putanju do slike (Src polje) ali i putanju do originalnog, radnog psd fajla (Original polje) jer su ta dva fajla sada povezana.


slika 17.12 - Properties za unetu psd sliku Ukoliko pomerimo psd fajl, promenimo mu ime ili na bilo koji drugi način narušimo sinhronizaciju sa njim, ikonica će dobiti znak upozorenja. U Properties panelu postoji dugme Edit (sa ikonicom Photoshopa) kojim možemo izmeniti sliku u Photoshopu. Ukoliko u bilo kom trenutku izmenimo originalni psd fajl, ikonica na slici sa dve zelene strelice će se promeniti u ikonicu sa jednom zelenom i jednom crvenom, što označava da je potreban update. Tada možemo izabrati Update from Original bilo iz Properties panela ili iz menija koji pozivamo desnim klikom na sliku. Update se potom vrši na svim instancama te slike svuda na sajtu. Ove ikonice se ne vide na prikazu stranice u browseru.

slika 17.13 - Info u levom gornjem uglu slike Kopiranje direktno iz Photoshop dokumenta Umesto da importujemo kompletan PSD fajl, možemo kopirati ceo ili deo dokumenta iz Photoshopa i u Dreamweaveru nalepiti direktno na stranicu (Edit > Paste ili Ctrl+V). U tom slučaju, sva podešavanja će biti ista kao da smo uvezli fajl, ali sa jednom bitnom razlikom. Sama slika neće biti sinhronizovana sa originalnim PSD fajlom. Neće se pojaviti ikonica na slici i Dw nas neće upozoriti da li se originalna promenila i sl. Ipak, u Properties panelu će postojati informacija o lokaciji originala. Ukoliko želimo da zamenimo sliku na strani, u ovom slučaju možemo kopirati ponovo iz Photoshopa i uraditi Paste dok je slika na strani selektovana. Samo će doći do zamene. Rollover image i Fireworks HTML Ranije smo pomenuli dve opcije - Rollover image i Fireworks HTML koje se nalaze pored opcije za klasičan unos slike u Insert > Image padajućem meniju i u insert panelu. Rollover image opciju koristimo kada želimo da postavimo sliku koja će se menjati kada se miš pozicionira iznad nje (rollover stanje). Pre nego što izaberemo ovu opciju, moramo pripremiti dve slike, poželjno istih dimenzija. Jedna slika će biti u startu prikazana, dok će se druga prikazivati u trenutku kada postavimo miš iznad nje.


Pošto pokrenemo Rollover image opciju pojaviće se dijalog na sledećoj slici.

slika 17.14 - Insert rollover image dijalog Potrebno je da unesemo ime slike (Image name). To polje će postati ID vrednost. Drugo i treće polje su najbitnija, jer u njima postavljamo sliku koja se u startu prikazuje (Original image) i sliku koja će se pojaviti na rollover stanje (Rollover image). Checkbox Preload rollover image možemo štiklirati ukoliko želimo da se druga slika učitava zajedno sa stranicom kako kasnije ne bi bilo kašnjenja prilikom prikaza, pogotovo ako je slika veća. Alternate text polje služi da upišemo alternativni tekst slike (alt tag). U poslednjem polju možemo postaviti link, ukoliko želimo da slika bude linkovana ka nekoj stranici, fajlu i sl. Pošto izaberemo ok, Dreamweaver će keirati potrebne img i ostale tagove, ali će dodati i interni JavaScript kod, koji služi da zameni sliku kada je to potrebno. Ovaj efekat zamene slika je moguć i kroz čist CSS i HTML, bez dodavanja JS koda, ali to onda moramo uneti ručno, sami. Fireworks HTML opciju koristimo ukoliko koristimo Adobe Fireworks i iz njega smo direktno eksportovali HTML. U tom slučaju možemo ubaciti ceo taj HTML u Dreamweaver. Ova opcija se retko kad više koristi. Dreamweaver podržava unos PSD fajlova

● da ● ne


Sažetak Postoji tri tipa slika koje se danas koriste na netu: JPG, GIF i PNG. Svaki format ima svoje prednosti i mane. Slike možemo dodavati kroz padajuće menije, kroz files panel, kroz assets panel i tako dalje. Assets panel koristimo za lakše manipulisanje materijalima koje koristimo. Dreamweaver ima odličnu integraciju sa Photoshop alatom i direktno prihvata PSD fajlove.