Kako dodati slike na svoju web stranicu u Dreamweaveru

Dodavanje slike vašoj web stranici može se u početku činiti gotovo čarobnim jer je proces s Dreamweaverom tako jednostavan. Izazov s web grafikom nije njihovo dodavanje na vaše stranice, već stvaranje lijepih slika koje se brzo učitavaju u pregledniku vašeg gledatelja.

Potreban vam je drugi program, kao što je Photoshop, Photoshop Elements ili Fireworks, za stvaranje, pretvaranje, uređivanje i optimizaciju slika. Optimiziranje slika smanjuje veličinu datoteka pa se vaše slike preuzimaju brže. Dreamweaver nudi neke osnovne alate za uređivanje slika, ali uglavnom koristite Dreamweaver za umetanje i postavljanje slika na svoju stranicu.

Dreamweaver olakšava postavljanje slika na vaše web stranice i nudi više načina za to:

• Kliknite ikonu Slike na ploči Common Insert, a zatim odaberite sliku pomoću dijaloškog okvira Umetanje slike.

• Na ploči Datoteke kliknite i povucite naziv slike na stranicu na kojoj želite da se slika pojavi.

• Koristite izbornik Umetanje.

Ako nemate pri ruci JPEG, GIF ili PNG sliku optimiziranu za web, možete preuzeti besplatne slike koje su već optimizirane.

Za postavljanje slike na web stranicu pomoću izbornika Umetanje, slijedite ove upute:

Otvorite postojeću stranicu ili stvorite i spremite novu stranicu.

Postavite pokazivač na mjesto gdje želite umetnuti sliku na stranici.

Slike možete umetnuti u gornji lijevi dio nove prazne datoteke, a možete umetnuti slike

oznake i elemente na web-stranici, ali ne možete jednostavno postaviti sliku u sredinu stranice bez korištenja dodatnih HTML oznaka ili CSS formatiranja da biste je pozicionirali.

Odaberite Umetanje→Slika→Slika.

Pojavljuje se dijaloški okvir Odabir izvora slike.

Pregledajte da biste pronašli sliku koju želite umetnuti.

Ovisno o vašem računalnom sustavu, možete pregledavati slike dok ih umetate na različite načine. Evo tri uobičajene opcije:

• Na računalu sa sustavom Windows XP, odaberite Thumbnails s padajućeg popisa izbornika Prikaz desno od polja Look In da biste prikazali inačice minijatura svih slika u bilo kojoj otvorenoj mapi. Također možete vidjeti jedan pregled bilo koje odabrane slike u krajnjem desnom dijelu dijaloškog okvira.

• Na računalu sa sustavom Windows Vista ili Windows 7 , odaberite opciju ikone (male ikone, srednje ikone, velike ikone ili ekstra velike ikone) s padajućeg popisa izbornika Prikaz desno od polja Look In da biste prikazali minijaturne verzije sve slike u bilo kojoj otvorenoj mapi. Također možete vidjeti jedan pregled bilo koje odabrane slike krajnje desno od dijaloškog okvira.

• Na Macu odaberite opciju Prikaži kao stupce u gornjem lijevom kutu dijaloškog okvira. Možete vidjeti jedan pregled bilo koje odabrane slike u krajnjem desnom dijelu dijaloškog okvira.

  

  Zasluge: Fotografije Casey Stoll

Da biste umetnuli sliku, dvaput kliknite naziv slike ili kliknite jednom, a zatim kliknite U redu.

Ako umetnete sliku na stranicu, a slika nije spremljena u vašu lokalnu mapu web-mjesta, Dreamweaver će od vas zatražiti dijaloški okvir upozorenja i ponuditi da kopirate sliku u mapu vaše lokalne stranice. Mnogi dizajneri stvaraju podmapu pod nazivom slike unutar mape lokalnog web-mjesta u koju pohranjuju sve slike na svojoj web-lokaciji, ali možete organizirati slike u više podmapa ako želite.

Odaberite sliku na svojoj web stranici za pregled i uređivanje svojstava slike.

Opcije slike automatski se prikazuju u Inspektoru svojstava na dnu stranice kada je slika odabrana.

Zasluge: Fotografija Caseyja Stolla

Kada umetnete slikovnu datoteku na stranicu, zapravo ne dodajete kopiju slike na stranicu; stvarate referencu na sliku. Osnovni kod izgleda kao kod za vezu s jedne stranice na drugu.

I reference na slike i veze uključuju naziv datoteke i put od stranice do te datoteke. U suštini, stvarate uputu za web preglednik da pronađe sliku kada prikaže stranicu.

Da biste prikazali sliku na svojoj web stranici, morate prenijeti i stranicu i sliku kada objavite svoju web stranicu. Ako vaše slikovne datoteke i stranice koje se odnose na te datoteke nisu na istom relativnom mjestu na vašem tvrdom disku kao na vašem web-poslužitelju, prekinut ćete referencu na svoje slike i na vašoj će se stranici pojaviti ružna ikona Broken Image .

Najbolji način da osigurate da vaše slike i datoteke ostanu na mjestu gdje bi trebale biti jedna u odnosu na drugu jest dopustiti Dreamweaveru da ih prati umjesto vas. Zato je toliko važno dovršiti postupak postavljanja web-mjesta i paziti da nikada ne premještate ili preimenujete sliku, osim na ploči Datoteke.