Slike

Dragan Filipović Drugi deo - Skripta, Kurs Comments (0)

Sve slike koje koristite u web dizajnu treba da budu rezolucije 72 dpi (px/inch), što je rezolucija monitora. Nema svrhe stavljati veću rezoluciju slike (to je odmah veći fajl, pa se duže učitava na internetu, loading…) ako monitor može da prikaže maksimalno 72dpi. Dimenzije slika unapred pripremite da odgovaraju željenim dimenzijama na sajtu. U Dreamweaveru možete smanjiti veličinu slike, ali opet, radi bržeg ućitavanja bolje je pripremiti sliku koja je iste stvarne dimenzije kao ona koju želimo da prikažemo na sajtu. U Photoshop-u postoji opcija Save for web, gde fotošop smanjuje veličinu fajla, bez velikog uticaja na kvalitet. Odnosno nudi vam 4 opcije za snimanje (save optimized as…), Prva opcija je originalna slika, druga je malo smanjen kvalitet (neprimetno za web dizajn) uz dosta smanjenu veličinu fajla, treća je još više smanjen kvalitet uz još više smanjenu veličinu fajla itd. Uvek izaberite drugu opciju. U okviru ove komande fotošop prikazuje i vreme koje je potrebno da se slika ušita u zavisnosti od brzine interneta.

Photoshop

Dimenzije slika menjate u Images — Image size, izaberite konstantne proporcije i izrazite dimenzije u pikselima, promenite dimenzije, doterajte rezoluciju na 72dpi, i snimite.

Za potrebe kursa, sve slike su već spremne, potrebno ih je ubaciti u vaš images folder (copy/paste iz foldera slike_za_kurs).

Kod

<img src="../images/assets.jpg" alt="Alternativni tekst " width="296" height="418" />

Assets panel

Najjednostavniji način za ubacivanje slika u Dreamweaver (ako pretpostavimo da je slika unutar vašeg sajta) jeste da prevučete sliku ili iz Files panela ili iz Assets panela. Da biste koristili Assets panel, morate smestiti sve optimizovane slike za Web sajt u Images folder koji se nalazi u Root folderu vašeg sajta. Assets panel sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednu od ikonica na levoj strani panela.

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. Colors – Ova kategorija prikazuje sve boje koje su specificirane na vašem sajtu uključujući i pozadinske boje, boju teksta i linkova. Links - Ovde su prikazani svi linkovi, ne samo eksterni http:// nego i email linkovi, FTP adrese i JavaScript linkovi. Multimedia – Flash, Shockwave i Movies – svaka kategorija prikazuje movie fajl sa odgovarajućom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mpg ili .mov (Quick Time i MPEG)

Kada kliknete na neku sliku, u gornjem delu panela se prikazuje Tumbnail slike, zatim dimenzije slike, veličina, tip i cela putanja do slike. Ako se odlučite da editujete sliku pre nego što je ubacite na sajt, možete kliknuti na Edit dugme u donjem desnom uglu panela da bi vam se otvorila difoltna grafička aplikacija. Sliku možete ubaciti na Web stranicu iz Assets panela tako što postavite kursor na stranici gde želite da ubacite sliku, zatim obeležite sliku i kliknete na dugme Insert.

asets

Postavljanje slika na Web stranicu, izmena svojstva slike

Image fajlovi se ubacuju u HTML pomoću <img> taga sa atributima koji opisuju izvor tog fajla, širinu i visinu fajla i alternativni tekst za čitače koji ne prikazuju slike. Kada ubacujete sliku u Design ili Code prikazu, Dreamweaver generiše neophodan kod za vas. Postoji nekoliko načina za ubacivanje slika. Prvi način koji smo već opisali u prošloj nastavnoj jedinici je preko Assets i Files panela. Drugi način za ubacivanje slika u Dreamweaver je preko Insert – - Image komande.

image

Pre nego što „ubacite“ sliku na Web stranicu, Dreamweaver će otvoriti Image Tag Accessibility Attributes dijalog boks koji zahteva od vas da unesete alternativni tekst kao opis slike. Ovaj tekst se ubacuje u <img> Tag Attribute Alt. Ovaj tekst služi korisnicima koji su slepi i koriste pomoćne tehnologije za čitanje Web stranica, kao i za one koji preferiraju da isključe prikazivanje slika ili koriste tekst čitače.

alt

Umetanje placeholder-a / ’’lažne slike’’

Ponekad dok pravite Layout stranice, nemate na raspolaganju sliku, u tom slučaju koristi se Image Placeholder. Kada kliknete na Insert->Image Objects->Image Placeholder, otvoriće vam se Image Placeholder dijalog boks.

placeholder

Kada ste spremni da zamenite Placeholder pravom slikom, kliknite na Placeholder u dizajn prikazu da bi se pokazale opcije u Property Inspector-u. Ukucajte putanju u Src polje Property Inspector-a.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.