Alati za izradu web stranica - PVPRMpvprm.zesoi.fer.hr/2004-2005-web/studenti-rad/ghafner/Seminar/Alati... · - 4 - 3. Alati za izradu web stranica 3.1. Macromedia Dreamweaver (Program

- 1 -

Fakultet elektrotehnike i računarstva

Zavod za elektroničke sustave i obradbu informacija

Seminar iz predmeta

Podatkovni vušemedijski prijenos i računalne mreže

Tema :

Alati za izradu Internet stranica

Profesor: Branko Jeren, prif.dr.sc.

Predrag Pale, mr.sc.

Asistentica:

Katarina Pavlović, dipl.ing.

Student: Goran Hafner

0036380757

Zagreb, siječanj 2005.

- 2 -

Sadržaj:

Sažetak ................................................................................................................................3

1. Uvod .................................................................................................................................3

2. Opis područja i aktivnosti u svijetu ...........................................................................3

3. Alati za izradu web stranica ........................................................................................4 3.1. Macromedia Dreamweaver (Program za izradu Internet stranica)......................4

3.1.1. Objašnjenje osnovnih funkcija Dreamweaver-a .............................................5 3.1.1.1. View (padajući izbornik).............................................................................6 3.1.1.2. Page properties ..........................................................................................7 3.1.1.3. Common object panel ..............................................................................9 3.1.1.4. Obrada tablica ..........................................................................................11 3.1.1.5. Obrada slika..............................................................................................12 3.1.1.6. Media .........................................................................................................13 3.1.1.7. Layeri – slojevi ..........................................................................................14 3.1.1.8. Anchor Points – sidrišne točke................................................................15 3.1.1.9. Dodavalje zvuka na stranicu ...................................................................17 3.1.1.10. Postavljanje stranice na Internet ..........................................................19 3.1.1.11. 12 Web dizajn savijeta & trikova .........................................................22

3.2. Adobe Photoshop (program za crtanje i obradu slika) .......................................23 3.2.1. Otvaranje nove radne površine ..................................................................24 3.2.2. Traka s alatima, opcijska traka i izborna traka .........................................26 3.2.4. Primjer izrade Header-a Internet stranice .................................................30 3.2.4. Pimjer izrade Tipke......................................................................................34

3.3. Adobe ImmageReady (program za izradu animacija) ........................................37 3.3.1. Stvaranje animiranog natpisa.....................................................................38 3.3.2. Stvaranje animirane slike............................................................................42

3.4. Flash (program za izradu animacija) ....................................................................43

4. Zaključak .......................................................................................................................44

5. Literatura.......................................................................................................................45

- 3 -

Sažetak U daljnjem tekstu bit će riječi o alatima koji se koriste za izradu web stranica. Dreamweaver -

alat zadužen za izgled i strukturu same internet stranice; Adobe Photoshop – program za

crtanje i obradu slika; Adobe ImageReady i Flash – alati za izradu animacija.

1. Uvod Danas postoji mnoštvo programa koji se koriste za izradu web stranica, a među poznatijima

su Macromedia Dreamweaver te Microsoft FrontPage. Ovi programi omogučavaju

projektiranje internet stranice pisanjem koda (HTML), grafički (korištenjem već gotovih

funkcija) ili kombinacijom navedenih. Za izradu interaktivnih stranica koriste se skriptni

jezici kao npr. PHP, JavaScript, XML; koji podržavaju proceduralno i (ili) objektno

programiranje.

2. Opis područja i aktivnosti u svijetu Internet je postao neizbježan informacijski medij, koji nam je omogućio gotovo trenutan

odgovor na bilo koje od pitanja bilo da je ono vezano uz znanost, zabavu, sport ili neki drugi

pojam koji nas u datom trenutku zanima. Danas se dobar dio trgovine, tj. naručivanje i

plačanje robe, obavlja preko interneta (web stranica), s čine smo uštedjeli vrijeme i novac te

olakšali izbor prizvoda buduči da na jednom mjestu možemo pronači specifikacije sličnih

proizvoda i odlučiti koji je najbolji odnos cijene i kvalitete. Internet nam je omogućio brže

obrazovanje, dolazak do inforamcija i time ubrzao razvoj tehnologije u svim područjim, bilo

da se radio o gospodarstvu, auto industriji, medicini, turizmu, ili pak nekoj drugoj grani.

Znamo kad kad reči da smo spajanjem na Internet vezani sa cijelim svijetom, što nije nimalo

pogrešno budući da se radio o globalnom informacijskom sustavu, u koji su povezana sva

računala na našem planetu koja su u datom trenutku spojena na Internet.

- 4 -

3. Alati za izradu web stranica

3.1. Macromedia Dreamweaver (Program za izradu Internet stranica)

Za izradu Internet stranica potrebno je imati sljedeće:

� Plan (Planning)– Prije nego li smo počeli išta raditi potrebno je napraviti plan koji

će nam ogovoriti na pitanje Kakvu tj. kakvog sadržaja će biti naša internet stranica?

Npr. Želimo raditi Internet stranice: o mobitelima, o igricama, sa popisom lektira i

njihovim sadržajima; ili pak naša stranica može koristiti u poslovne svrhe za npr.

oglašavanje i internet prodaju (npr. automobila, kompjutera, igrački…)

� Dizajniranje (Design) – Nakon odabira Teme (odnosno razrade plana) moramo

poraditi na izgledu naše Internet stranice, a to se odnosi na sljedeće: u grubo skicirati

izgled stranice, a to znači npr. odabrati lokaciju i broj izbornik koji će navoditi

korisnika po stranici ili preusmjerivati na neku drugu stranicu (Hyperlink), odrediti

pozicije slika koje ćemo ubacivati, odabrati lokaciju teksta i popratnih sadržaja,

odrediti sadržaj padajućih izbornika…

- 5 -

� Razvoj (Development) – Sad kada znamo što ćemo i kao ćemo raditi potrebno je

pokrenuti program za izradu Internet stranica Dreamweaver te maštu i želje pretvoriti

u stvarnost. U dotičnom programu Internet stranicu možemo dizajnirati pomoću

grafičkog sučelja (nama puno pristupačnijeg) ili HTML jezikom (tj. programskim

kodom, koji nam pruža veće mogućnosti pri izradi stranice ali je složeniji za naučiti).

� Oglašavanje (Publishing) – Kad smo izradili željenu Internet stranicu, potrebno

ju je staviti na Internet (odnosno na WEB), kako bi našu stranicu mogli vidjeti ostali

korisnici interneta. Dreamweaver ima u sebi ugrađem program FTP (File Transfer

Protocol) sa kojim se spajamo na server (poslužitelj) na kojem će biti pohranjena naša

Internet stranica.

� Održavanje (Maintenance) – Nakon oglašavanje naše Internet stranice, moguće

je na njoj raditi određene korekcije i izmjena, tj. dodavati nove i skidati stare sadržaje

(npr. ubacivati nove slike, tekst, linkove, izbornike…)

3.1.1. Objašnjenje osnovnih funkcija Dreamweaver-a

1) View (padajući izbornik)

2) Page properties

3) Common object panel – glavna traka s alatima

4) Obrada tablica

5) Obrada slika

6) Media – animacije, filmići i zvuk

7) Layeri – slojevi

8) Anchor Points – sidrišne točke

9) Dodavalje zvuka na stranicu

10) Postavljanje stranice na Internet

11) 12 Web dizajn savijeta & trikova

- 6 -

3.1.1.1. View (padajući izbornik)

View →→→→ Code

Design →→→→

Layout view →→→→

Layout Cell

Layout Tables

Standard view

Code and Design

Code – izrada internet stranice HTML programskim kodom

Design – izrada internet stranice upotrebom grafičkog sučelja

Layout Cell ikona

Layout Table ikona

Layout View ikona

Standard View ikona

Design →→→→ Layout view – u ovom načinu rada možemo na našu stranicu

ubacivati slike, tekst i druge sadržaje kao npr. flash animacije.

Design →→→→ Layout view →→→→ Layout Cell –ikona za crtanje ćelija na praznim

dijelovima stranice ili unutar već postojeće tablice. Za crtanje

nekoliko čelija u jednom redu potrebno je držati tipku Ctrl.

Design →→→→ Layout view →→→→ Layout Tables – ikona za crtanje tablice na praznim

djelovima stranice ili unutar već postojeće tablice.

Design →→→→ Standard view – u ovom načinu rada možemo sve kao i u Layout

view, ali možemo i ubacivati layer-e, kreirati dokumente s

različitim okvirima (Frame izbornik), kreirati tablice, te raditi

izmjene na našoj stranici(npr. proširivanje tablica...)

Code and Designe – izrada internet stranice HTML programskim kodom i

upotrebom grafičkog sučelja

- 7 -

3.1.1.2. Page properties

Postavljanje postavki stranica:

Svakoj stranici možemo odrediti općenite postavke ( ime stranice, boju, pozadinu itd... ).

Kao što znamo, kada otvorimo dokument, otvori nam se bijeli nenaslovljeni "komad papira"...

Da bi pristupili postavkama stranice postoje tri načina:

I. Desni klik na prazan dio dokumenta i pri kraju odaberemo Page Properties,

II. Izaberemo Modify → Page Properties,

III. Ili shortcutom CTRL+J

U otvorenom okviru dijaloga ispunimo postavke:

Title →→→→ Ime stranice (index)

Background Image →→→→ Pozadinska slika... Ako imamo neku sliku koju smo npr. napravili u

Photoshopu možemo ju staviti kao pozadinu naše stranice. Kliknemo

na browse i dovedemo do te slike. Moramo samo paziti da slika ne

bude prevelika da se stranica ne bi dugo učitaval. Ili pod background

izaberemo boju za pozadinu stranice.

- 8 -

Text →→→→ Boja teksta (pazite na boju teksta, vrlo je bitno da na svijetllijoj pozadini imamo

tamni tekst, a na tamnoj pozadini svijetliji tekst).

Links →→→→ Boja linkova (kada napravimo link, kakve će boje biti).

Visited links →→→→ Posjećeni linkovi ( ako navedemo boju, linkovi koji su bili posjećeni, na koje

smo kliknuli, promjenit će boju u onu koju smo naveli.

Active links →→→→ Aktivni linkovi (boja koja će se pojaviti automatski kada kliknemo na link)

Margins →→→→ Rubovi dokumenta. Najbolje je ovo ostaviti u večini slučajeva prazno zbog toga

što ne podržavaju svi browseri vrijednost koju ovdje unesemo.

Document Encoding →→→→ Ovdje specifiramo kodiranje fontova našeg jezika. Da bi

Dreamweaver prepoznao naša slova č, ć, š, đ, i ž koristimo Central

Europian (Windows 1250) šifriranje.

- 9 -

3.1.1.3. Common object panel

Glavna traka s alatima

Hyperlink – (ili skraceno samo Link) je najvažniji pojam kada govorimo o izradi

Web stranica. Hyperlink je veza koja povezuje stranicu s ostalim

stranicama na Web-u. (To je ono na što nas kada kliknemo na nesto

zeljenoga odvede do mjesta koje je Webmaster predvidio)

Insert e-mail link – ubacivanje linka koji otvara okvir dijaloga za pisanje na željenu

e-mail adresu

Named Anchor Points – sidrišne točke koje se koriste za pozicioniranje unutar stranice

Insert Table – ubacivanje tablica, točno željenih dimenzija (tj. Broja redaka i stupaca)

Draw Layer – crtanje prozora proizvoljnih dimenzija, unutar kojeg je

moguće pisati tekst, kojeg kasnije možemo pozicionirati na bilo koje

mjesto na našoj Internet stranici

Insert Image – ubacivanje slike, sa željene lokacije

Insert Image Placeholder – ubacivanje tekstualne slikovne poruke kojoj se mogu

mjenjati dimenzije, a kasnije ju možemo linkati

Insert Fireworks HTML – ubacivanje fireworks HTML datoteka

Insert Flash – umetanje flash animacije

Insert Rollover Image – slika na slici koja se mijenja pri pozicioniranju pokazivača

miša iznad slike

Insert Navigation Bar - ubacivanje izbornika

Insert Horizontal Rule – ubacivanje horizontalne crte

- 10 -

Insert Date – ubacivanje datuma

Insert Tabular Data – umetanje tabličnih podataka

Insert Comment – ubacivanje komentara

Insert Tab Chooser – umetanje gotovih naredbi kada pišemo HTML kod

- 11 -

3.1.1.4. Obrada tablica

Properties traka: (P.S. moramo biti u Standard View)

Clear Row Heights – brisanje praznog prostora ispod i iznad slike ili teksta unutar

svake čelije označene tablice

Clear Column Widths – brisanje praznog prostora ljevo i desno od slike ili teksta

unutar svake čelije označene tablice

Convert Table Widths To Pixels – prikaz širine tablice izražen u pikselima

Convert Table Widths To Percent – prikaz širine tablice izražen u postocima

Background Color – boja pozadine čelije ili tablice

Border Color – promjena boje okvira čelije i tablice

Backgorund Image –

ubacivanje slike u pozadinu tablice

Cell Pad – udaljenost teksta unutar čelije od samog ruba čelije

Cell Space – razmak među čelijama te između čelija i tablice

Align – poravnavanje tablice unutar stranice

Border – debljina okvira (tablice ili čelije)

- 12 -

3.1.1.5. Obrada slika Properties traka:

W i H →→→→ rezervira prostor za sliku u koji će se ona učitati u internet pretraživaču.

Dreamweaver automatski rezervira ovaj prostor prema originalnoj veličini slike u

pikselima.

Ako upišemo vrijednosti za visinu i širinu slike koje ne odgovaraju originalnim vrijednostima

visine i širine slike, naša slika se možda neće ispravno prikazati u Internet pretraživaču. Ako

smo smanjili sliku ne znači da će se naša slika brže učitavati jer pretraživač prvo učitava sliku

a naknadno ju skalira na predviđenu veličinu. Da bismo smanjili vrijeme učitavanja slike

koristimo vanjske aplikacije (npr. Adobe Photoshop) kako bismo smanjili stvarnu veličinu

slike te samim time i vrijeme njezinog učitavanja.

Src →→→→ specificira gdje se nalazi datoteka sa slikom.

Link →→→→ specificira kamo pokazuje eventualno dodijeljeni hiperlink slike, odnosno kamo će

nas pretraživač odvesti nakon što kliknemo na sliku

Align →→→→ poravnava sliku i tekst unutar okvira (frame) u kojem radimo

Alt →→→→ specificira alternativni tekst koji će se pojaviti na mjestu slike u pretraživačima koji ne

podržavaju tekstualno sučelje ili u pretraživačima koji su podešeni za skidanje slika

ručno. Treba misliti i na slijepe osobe koje se koriste alatima koji čitaju tekst na

stranicama i koji ne mogu interpretirati slike i slične stvari. Njima puno znači ako ima

samim nazivom damo naslutiti što se na slici nalazi radi lakšeg snalaženja na

stranicama.

Map Name Field →→→→ definira mape s klijentske strane

V Space i H Space →→→→ definira vertikalni i horizontalni prostor oko slike koji ostaje

rezerviran.

- 13 -

3.1.1.6. Media Ubacivanje animacija, animiranih tipki, animiranog teksta te zvuka na

Internet stranicu

Insert Flash - ubacivanje animacija napravljenih u programu FLASH (program za

izradu animacija)

Inset Flash Botton – umetanje animiranih tipki prema Flash predlošcima

Insert Flash Text – ubacivanje animiranog (pokretnog) teksta

Insert Shockwave – umetanje Shockwave (filmovi koji su vrlo pogodni za explorer i

netscape)

Insert Applet – ubacivanje Java aplikacija

Insert Param – ubacivanje različitih parametara u HTML obliku (npr. datuma, audio

file-ova, slika) – ovo je kao neka vrsta objektnog programiranje.

Insert ActiveX – ubacivanje ActiveX kontrola

Insert Plugin – ubacivanje zvuka na Internet stranicu

- 14 -

3.1.1.7. Layeri – slojevi

Properties traka:

Layer ID →→→→ naziv layera. Ne stavljati brojke, naše znakove (č,ć,ž,š,đ) i slično zbog njihovog

kodiranj u kodu. Svaki layer mora imati svoje jedinstveno ime.

L i T (left and top) →→→→ specifira položaj layera ovisno o gornjem lijevom kutu stranice.

W i H →→→→ specifira širinu i visinu layera.

Z-Index →→→→ specificiramo kako će nam layeri biti postavljeni na stranici ako ih imamo

mnogo. Oni koji imaju veći z-index, biti će iznad onih koji imaju manji (lakše je kontrolirati

izgled layera u samom dokumentu). Vrijednosti mogu biti pozitivne i negativne.

VIS →→→→ ovdje specifiramo hoće li vam layer biti vidljiv ili skriven.

BG Image →→→→ specifira pozadinu layera, koja može biti slika.

BG Color →→→→ specificira boju pozadine layera.

Tag →→→→ specifira «oznaku» koja će biti korišten u HTML kodu. Div i Span su preporučljivi.

Overflow →→→→ objašnjava što će se dogoditi s sadržajem layera ako bude veći od samog layera.

Clip →→→→ koristi se samo za layer i layer tagove.

- 15 -

3.1.1.8. Anchor Points – sidrišne točke ⇒ linkanje do određenog elementa na stranici

Properties traka:

Anchor points, ili na Hrv. sidrišne točke su mjesta na našoj stranici koja su povezana linkom

na posebno mjesto na istoj stranici. U prijevodu, kada imamo jako dugačak tekst i ne želimo

da posjetioc mora scroolati skroz do kraja dokumenta da bi ga pročitao, možemo jednu riječ,

npr. riječ KRAJ linkati do kraja dokumenta.

Primjer:

Prvo što trebamo je u dokumentu (bilo sa cells ili tables, ili na praznom dokumentu) na

početku napisati početak, sredina i kraj jedno pored drugoga (jer će to biti kao navigacija ako

posjetioc želi ići odmah na kraj dokumenta, kliknuti će kraj). Zatim napravimo par redaka

razmaka i napišemo «početak». Možemo se malo i poigrati, npr. napravimo u Photoshopu

sliku za početak, nešto ovakvo . Zatim sa enterom, idemo prema sredini

dokumenta (otprilike 15-ak puta pritiska s enterom biti će sasvim dovoljno!), i ovdje

napišemo «sredina» (umjesto teksta možemo dodati neku sliku).

Nakon toga opet idemo s enterom prema dolje (enterom pritišćemo samo iz razloga što želimo

napraviti dovoljno dugačak dokument, da se odjednom na ekranu ne vidi cijeli sadržaj

stranice) isto negdje 15-20-ak puta te ovdje napišemo «kraj».

Kada smo gotovi, vratimo se na početak (gdje smo napisali slova početak, ili umetnuli sliku) i

označimo slova/sliku ili kliknemo pored njih. Idemo na Insert→Invisible Tags→ i odaberemo

Named Anchor, ili pak odaberemo na objekt paleti kategoriju pod nazivom invisibles i

kliknite na ikonu Anchora (shortcut Ctrl+Alt+A). U otvorenom okviru dijaloga unesemo

ime sidrišne točke.

Napomena: moramo zapamtiti kako smo nazvali sidrišnu točku, jer nam je njeno ime

potrebno kako bi smo do nje linkali neki objekt, tekst ili ostalo na stranici. Ime nesmije

sadržavati znakove č,ć,š,đ,ž te svaka sidrišna točka mora imati jedinstveno ime. Ne smiju biti

- 16 -

dvije iste sidrišne točke jer nam link onda neće raditi. Ne stavljajmo ih unutar layera, i neka

ne sadrže prazna polja u imenu.

- Najjednostavnije je sidrišnu točku, recimo za početak nazvati "pocetak", lako se zapamti,

nema praznih polja, znakova, velikih slova i sl. Kada smo dodjelili ime, kliknemo «ok».

Pored naše slike, ili teksta, trebali bi vidjeti malu žutu ikonu sidra. Kada kliknemo na nju u

properties traci, vidjet ćemo i njeno ime.

Sada isto ponovimo pored naše «sredine», i «kraja». To su mjesta do kojih želimo linkati one

tri riječi pri vrhu dokumenta (početak, sredina i kraj).

Vratimo se do vrha stranice i označimo tekst početak. Da bi povezali objekt do našeg

stvorenog anchora u polje gdje inače upisujemo link, nećemo upisivati link, nego ćemo u

polje upisati znak i nakon toga ime naše sidrišne točke do koje želimo da naš link vodi, ako

dakle želimo da nas klik na riječ početak odvede na početak, u polje linka napisat ćemo :

#pocetak ("pocetak" je ime nase anchor točke).

Zatim označimo tekst «sredina», i postupak ponovimo, samo će ovaj put u mjestu linka pisati

#sredina, naravno ako smo anchor točku nazvali sredina. Isti korak ponovimo za «kraj»... To

je to!!!

Želimo li pak iz nekog drugog dokumenta, linkati do naše «sredine» ili «kraja» u drugom

dokumentu ali istoj mapi, u polju linka mora pisati ime dokumenta u kojoj se nalazi anchor

točka, i onda njezino ime zajedno sa znakom #. Npr. ako se anchor točke nalaze u dokumentu

pod nazivom stranice prva (ako ovdje imamo sredinu, kraj…), a mi želimo iz indexa kliknuti

na riječ sredina i pritom otvoriti to mjesto sredine na toj prvoj stranici link će izgledati ovako:

prva.html#sredina (ili prva.htm#sredina, ovisno koju smo ekstenziju upotrebljavali kada smo

spremali stranice)

- 17 -

3.1.1.9. Dodavalje zvuka na stranicu Properties traka:

⇒ Često na stranicama možemo ćuti muziku kako počinje svirati u pozadini automatski čim

se stranica učita. To se postiže umetanjem plug-ina na stranicu, no moramo voditi računa o

tome da neki naših posjetioca neće imati potreban plugin za slušanje muzike, ali to je riješivo

jer si gost može sam downloadati potreban plugin s interneta...

Primjer:

⇒ Kada smo otvorili novi dokument u Dreamweaveru, kliknemo u dokument da bi vidjeli

kursor na stranici.

- Zatim pod Insert→Media→ kliknemo Plugin ili u Media paleti kliknemo malu ikonu

koja označava plugin, te u otvorenom okviru dijaloga dovedemo do pjesme koju želimo da

svira i kliknemo «Ok».

- U properties traci plugina, pod W i H unesemo broj 2 (za širinu i visinu), onda kliknemo

Parameters u donjem desnom kutu trake properties, pri ćemu se na ekranu pojavi okvir

dijaloga prikazan na slici 1.. Ispunimo ga kako je prikazano na slici:

Slika 1. Podešavanje parametara plugin-a

- 18 -

Napomena: da bi dobili polje za ispunjavanje opcija hidden, true, autostart i ostalo, kliknemo

na mali znak plus u gornjem lijevom kutu prozora (P.S. moramo ručno pisati parametre).

hidden-true ⇒ označava da je element, tj. plugin na stranici nevidljiv,

autostart-true ⇒ znači da će glazba početi svirati čim se stranica učita, te

loop-true ⇒ označava da će glazba svirati neprekidno (ako želimo da odsvira samo jednom,

umjesto opcije true, napišemo broj koliko želimo da nam glazba puta svira).

Ukoliko želimo da posjetioc naše stranice može sam poslušati glazbu koju želi, zaustaviti je,

pojačati i ostalo; tada napravimo sve isto kao prije, no ovaj put ne podešavamo parametre

nego samo u polja W i H unesemo veličinu player-a koju želimo (npr.W=144, H=60)

Napomena: imajmo na umu da posjetioc može biti spojen modeskom vezom pa stoga treba

voditi računa o veličini i formatu plugina.

- 19 -

3.1.1.10. Postavljanje stranice na Internet Odaberemo u padajućem izborniku Site →Edit Sites… te u otvorenom okviru dijaloga

odaberemo našu mapu i pritsnemo Edit… . Na ekranu će se pojaviti okvir dijaloga kao što je

prikazano na slici 2.

Slika 2. Definiranje parametara stranice → Local Info

U padajućem izborniku Advanced potrebno je je odabrati opciju Remote Info pri ćemu se na

ekranu pojavi okvir dijaloga prikazan na slici 3.

- 20 -

Slika 3. Podešavanje parametara za povezivanje sa udaljenim serverom → Remote Info

U otvorenom okviru dijaloga potrebno je popuniti sljedeće rubrike:

Access: biramo vrstu pristupa «našem» serveru (npr. FTP);

FTP Host: u ovu rubriku upisujemo ime Internet providera za naš site. On naj češće počinje

sa ftp. predznakom ispred naziva;

Host Directory: ovdje upisujemo lokaciju na koju će biti pohranjeni naši podaci na serveru;

Login i Password: to je naše korisničko ime i šifra koju dobivamo od strane našeg

poslužitelja (providera).

- 21 -

Napomena: dobro je još uljučiti i opciju Use Passive FTP jer nekad bez nje konekcija ne radi.

Sada kad smo sve podesili, potvrdimo sve otvorene okvire dijaloga sa «Ok», te u izbormiku

File → Site odaberemo ikonu Conects to remote host označenu crvenom bojom (desno) na

slici 4.

Slika 4. Spajanje sa serverom (Conects to remote host)

- 22 -

3.1.1.11. 12 Web dizajn savijeta & trikova

1. Stavljajte važnije informacije bliže vrhu stranice Organizirajte svoje stranice od vrha prema dolje. Važnije informacije trebaju biti pristupačnije i lakše ih se treba naći.

2. Ograničite duljinu stranica Dva ili tri ekrana treba biti maksimalna duljina stranica.

3. Napravite jednostavnu navigaciju Budite nepromjenjivi u stavljanju vaše navigacije na stranicu. Menija, gumbi, linkova itd. (posjetioci će se lakše snalaziti u dobro organiziranoj stranici). Nemojte koristiti plavu boju teksta, ili podvlačiti tekst jer je to općenito znak za link.

4. Slike neka budu što manje moguće Smanjujete fizičku veličinu slika u grafičkom programu prije nego što ih stavljamo na web (brže će se učitati, i stranice će biti preglednije).

5. Svaka grafika na webu treba biti potrebna Tj. svaka slika treba biti u vezi s tekstom. Pazite na sadržaj.

6. Koristite GIF i JPEG ispravno Koristite JPEG za fotografije, a GIF za sve ostalo.

7. Izbjegavajte šarene ili tzv. "busy" pozadine Tekst treba biti čitljiv. Budite sigurni da imamo dosta kontrasta između teksta i pozadine.

8. Izbjegavajte pretjerane animacije Ne animirajte slike osim ako imamo dobar razlog.

9. Koristite tablice za formiranje teksta i slika To je najbolji način kontroliranja vašeg rasporeda, izgleda stranice.

10. Koristite obične fontove Fontove koje ima većina posjetioca na svojim računalima. To omogućava svima da vide vašu stranicu onako kako ste ju vi zamislili.

11. Uvijek imajte kontakt informacije Stavite svoju e-mail adresu, ili telefon ako je potrebno da vas posjetioci mogu kontaktirati, javiti vam ako neki link ne radi ili jednostavno da vam jave da nema neke informacije koja bi koristila na stranici.

12. Pogledajte druge siteove Gledajući razne siteove možete dobiti neku ideju za vlastiti site. Dobar dizajn, navigaciju i ostalo. No NIKADA nemojte kopirati nečiji stil. Jer bit svega je biti originalan, biti prepoznatljiv.

- 23 -

3.2. Adobe Photoshop (program za crtanje i obradu slika)

Adobe Photoshop jedan je od naj močnijih programa za obradu slika i fotografija, pa ću u kratko opisati kako se on koristi i pokazati samo mikron njegovih mogučnosti.

1) Otvaranje nove radne površine

2) Traka s alatima, opcijska traka i izborna traka

3) Primjer izrade Header-a Internet stranice

4) Pimjer izrade Tipke

- 24 -

3.2.1. Otvaranje nove radne površine izbornik File → New, objašnjenje: width, height, mode postavka

Odaberemo padajući izbornik File – New (shortcut Ctrl+N).

Slika 5. Izbornik File → New

U otvorenoj dialognoj kućici Sika 5. moramo specifirati sljedeće:

NAME - ime dokumenta,

IMAGE SIZE – veličina slike koju stvara sam Photoshop po veličinama koje mi zadajemo, a

veličine su width i height.

WIDTH – širina slike koja može biti izražena u pikselima, centimetrima, milimetrima, itd

HEIGHT – visina slike također je izražena u cm. mm, itd.

RESOLUTION – rezolucija slike koju određujemo po pikselima po inchu ili pikselima po

centimetru. Preporučuje se rezolucija od 72 piksela po inču.

MODE – tonalitet, ili način slike. Najčešće se koristi RGB color Mode (Red Green Blue),

što je oznaka za prirodne boje, tj. sve boje vidljivog spektra. Bitmap Mode se

koristi kada se koriste samo bijela i crna boja te tonaliteti sive između.

Grayscale Mode koristi 256 tonova sive boje, točnije od bijele pa sve do crne boje,

vrlo slično kao bitmap mode.

CMYK color Mode koristi boje od koje svaka ima manji postotak od prirodnih

boja. Jednostavnije, npr. Crvena neće biti jako crvena nego više pastelna

jer u njoj neće biti 100% crvene nego između 2% - 90% stoga dobivamo

dojam pastelnih boja.

- 25 -

LAB Mode se sastoji od tri komponente L luminance or lightness što znači sjajnost

dakle od bijele do crne boje, zatim A koja se sastoji od dvije

komponetnte spectra, tj. dvije boje spectra od zelene do crvene boje i

boja među njima, te B sa također dvije boje spectra a to su plava i žuta te

boje između njih.

L*a*b* model:

A. Luminance, svijetlost =100 (bijela)

B. Zelena do crvena komponenta

C. Plava do žuta komponenta

D. Luminance, svijetlost = 0 (crna)

Ovaj Mode se može koristiti npr. za izradu omota za Cd-e.

Napomena: naj bolje se zadržati na RGB Modu zbog toga što su svi gore navedeni modovi

sadržani u njemu. S njime se mogu postiči naj veće i naj bolje mogućnosti jer se u njemu

nalaze sve boje vidljivog spectra.

CONTENT – sadržaj naše početne slike točnije pozadina:

White ili bijela pozadina;

Background color, tj boja pozadine koja nam je označena u polju boje u

Photoshop traci s alatima kao što je prikazano na slici 6.. Npr. ako nam je

pozadinska boja crvena, a izaberemo pod Content → Background color ,

pozadina će nam biti crvena.

Polje Boja u photoshop traci s alatima.

Slika 6. Foreground i Background boja

TRANSPARENT – (prozirnost) Na pozadini neće biti ničega osim prozora sa šahovskom

pozadinom.

Napomena: ukoliko želimo sačuvati svoj dokument iza njega će se

automatski pojaviti bijela pozadinska boja.

- 26 -

3.2.2. Traka s alatima, opcijska traka i izborna traka

Radna površina sastoji se od: Toolbox – traka s alatima →→→→ sadrži alate s kojima se obrađuju ili rade nove slike.

Options bar – opcijska traka →→→→ koristi se za postavljanje opcija raznim alatima, npr. u

koliko želimo da nam olovka crta debele linije ili pak želimo veliku gumicu i sl.

Menu bar – izborna traka →→→→ sadrži izbornike za izvođenje raznih zadataka. Izbornici su

organizirani po temama, npr. izbornik za slojeve (layers) sadrži komande za rad sa slojevima

itd...

I naravno naša Pozornica tj. dokument na kojem ćemo raditi novu ili obrađivati neku

postoječu sliku.

TOOLBOX – TRAKA S ALATIMA

1. Dio Alata:

Marquee tool →→→→ ili alat za označavanje. Njime možemo napraviti ovalne ili pravokutne selekcije. Kada dulje držimo tipku pritisnutom, možemo birati između pravokutnika ili kruga.

Moove tool →→→→ alat za pomicanje. Ovim alatom pomičemo razne selekcije ili slike na radnoj površini.

Lasso tool →→→→ laso alat. Njime vlastitom rukom, tj. potezom miša označavamo slike ili predmete na slici

Magic Wand tool →→→→ alat "čarobni štapić". Njime označavamo slično obojena područja.

Crop tool →→→→ alat za odsjecanje. Njime sječemo sliku. Izaberemo koji dio slike želimo a ostalo "kropamo"! (maknemo)

Slice tool →→→→ alat za rezanje. Njime režemo kriške dokumenta.

Healing brush tool →→→→ alat koji liječi. Ovaj alat boja sa uzorkom ili primjerom, nedostatke na slici.

Clone Stamp tool →→→→ alat za "kloniranje". On boja uzorkom slike.

Brush & pen tool →→→→ alat četka i olovka. Četkom crtamo mekane poteze a olovkom grube.

History Brush tool →→→→ povijesna četka. Njome možemo vratiti sliku u prvotni položaj. Položaj u kojem je bila prije nego što smo napravili promjenu.

Eraser tool →→→→ Gumica. Njome brišemo kao na normlnom papiru.

Paint Bucket tool →→→→ kanta s bojom. Njome bojamo selekcije, pozadinu i sl. Gradient tool →→→→ alat za stupnjevitu ispunu, tj. njime možemo lako mješati boje za pozadinu ili slično.

Smudge tool →→→→ alat za muljanje. Alat kojim "packamo" po slici. The blur tool →→→→ alat za zamagljenje. Alat kojim zamagljujemo sliku. The sharpen tool →→→→ alat za izoštravanje. Ovim alatom " izoštravamo " sliku.

Dodge tool →→→→ Alat za posvjetljavanje. Njime posvijetlimo sliku u dokumentu. Burn tool →→→→ Alat za tamnjenje. Njime potamnimo područja u slici. Sponge tool →→→→ Spužva alat. Njome mjenjamo boju zasićenoti elementa na slici.

- 27 -

2. Dio Alata:

Path Selection tool →→→→ Alat za selektiranje pathova (putanja, staza) koji radi oblik ili dio selekcije pokazujući sidrične točke, smjerne linije i smjerne točke. Njime pomičemo i mjenjamo položaj "stazi" koju smo napravili sa pen alatom.

Type tool →→→→ Alat za pisanje. Koristi se za pisanje teksta na dokumentu. Type Mask tool →→→→ Alat za pisanje selekcije. Njime stvaramo selekcija u obliku texta.

Pen tool →→→→ Alat "pisače pero". Njime stvaram glatko obrubljene putanje.

Custom Shape tool →→→→ Alat za izradu uobičajenih (gotovih) oblika.

Annotation tool →→→→ Alat za bilješke. Stvara audio bilješke koje se mogu pričvrstiti na dokument.

Eyedropper tool →→→→ Alat "kapaljka". Uzima uzorak boje iz slike.

Hand tool →→→→ Alat ruka. Njome mičemo sliku u njenom vlastitom prozoru.

Zoom tool →→→→ povećalo. Njime povećavamo ili smanjujete pogled na sliku. Blizina-daljina.

Foreground color →→→→ Boja lica slike. Gornja boja. Backgound color →→→→ Boja naličja slike. Boja poleđine. Donja boja.

Standard Mode → normalan RGB pogled na sliku.

Quick Mask mode →→→→ pogled za dodavanje ili oduzimanje selekcije. Koristi se kada želimo prepraviti neku selekciju.

Standardna postava boja.

Normalan pogled na dokument.

Pogled sa sivom pozadinom.

Pogled sa crnom pozadinom.

Ukoliko želimo sakriti radne trake pritisnemo tipku TAB!

OPTIONS BAR - OPCIJSKA TRAKA

Ova traka služi za postavljanje raznih postavki alata. Svaki alat možete postaviti po našoj mjeri. Ovdje u kratko objašnjavamo opcije, tj. izbore za alat brush →→→→četka alat.

Postavljanje oblika četke. Opacity: jakost četke. Flow: Jakost boje četke. Izbor za veličinu i grubost četke. Mode: razni modovi četke. Napomena: Za svaki alat su drukčije postavljene postavke.

Služi za prelezak u IMAGE

READY!

- 28 -

MENU BAR – IZBORNA TRAKA

Njome se ćesto koristimo u Photoshopu iz razloga što sadrži vrlo važne izbornike s kojima

moramo raditi da bi izveli određene operacije nad slikom. Organizirane su po temama.

Ovdje nam je prikazan Navigator. On nam prikazuje dio slike koji se trenutno vidi na ekranu. S njime možemo uvećavati ili smanjivati pogled na sliku.

History - ovdje Photoshop pohranjuje naše promjene na slici unatrag 20-ak koraka. Stoga, ako negdje pogriješimo, bez problema se vratimo na prijašnje stanje dokumenta.

Color – ovdje biramo boju, Styles - stilove, i Brush - četke.

Ovdje je prikazano kako pritiskom na malu strelicu na jednoj od paleta

otvaramo padajući izbornik za rad sa

slojevima (layer-im). Ovdje možemo stvoriti novi sloj (layer), izbrisati sloj i još mnogo toga.

- 29 -

Objašnjenje radnog prostoru u trenutku kada otvorimo prazan dokument:

Untitled – naziv dokumenta. 100 % je zumiran dokument. RGB (kao što smo prije rekli) objašnjava mod u kojem je dokument. Da je bio u CMYK modu u zagradi bi pisalo CMYK.

- 30 -

3.2.4. Primjer izrade Header-a Internet stranice Krajnji cilj:

1) Izrada Staze (″Path″) - Otvorite Photoshop 7.0, te u njemu novi dokument dimenzija 800x600.

- Odaberite Freeform Pen Tool , te napravite selekciju otprilike kako je prikazano na sljedećoj slici: (Provjerite da li imamo označenu «Paths» ikonu u

gornjem lijevom dijelu ekrana ).

- Kliknite CTRL+KLIK na liniju kako bismo ju označili. - Držeći tipku CTRL, kliknite na pojedinu kockicu i razmjestite ih tako da naša

staza (path) bude obla i da liči na stazu gore na slici. - NAPOMENA: Ukoliko na nekom dijelu staze (path) ne postoji kockica,

možemo ju stvoriti tako da samo (bez držanja tipke CTRL) kliknemo na stazu. Ukoliko smo držali tipku CTRL pojavit će vam se dva grba, koji vam omogućavaju da mijenjamo nagib zavoja na već postojećim kockicama.

- 31 -

2) Dodavanje oblaka (eng. Clouds) i ostalih efekata

- Dok je Freeform Pen Tool aktivan, kliknite desnim klikom miša na stazu te odaberite opciju Make Selection.

- Napravite novi Layer na kojem se nalazi naša selekcija (pritisnite CTRL+C, te CTRL+V). Nazovite ga «Staza».

- Odaberite Foreground Colour svijetlo zelenom, te pozadinsku boju Background Colour tamno zelenom.

- Kliknite Filter > Render > Clouds i vaše područje bit će popunjeno mješavinom svijetlo zelene i tamno zelene boje.

- U paleti sa Layer-ima dvostrukim klikom kliknite na Layer «Staza», te će nam se pojaviti sljedeći ekran:

- 32 -

Treba namjestiti sljedeće:

• Drop Shadow • Bevel and Emboss (Style: Inner Bevel. Technique: Chisel Hard. Size: 2. Angle

131°, 39°. Global Light: Off. Gloss Contour: Ring – Double, Anti-aliased: Off.) • Gradient Overlay (Blend Mode: Color Burn. Opacity 29%. Gradient: Black -

White - Black - White. [NAPOMENA: Dva puta kliknite na ponuđeni gradient, te kada vam se otvori prozor odaberite sljedeće: Gradient

Type: Solid. - Kliknite na donji rub trake sa bojom kako bi vam se

pojavila nova kućica, te dvostrukim klikom na kućicu promijenite njenu

boju u crnu ili bijelu. Zatim razmjestite kućice po gore navedenom

redoslijedu .]) • Stroke (Size: 3. Colour: #D8D8D8 [svijetlo siva].)

- 33 -

3) Dodavanje svijetlih mrlja

- Napravite novi Layer i nazovite ga «Elipsa 1»

- Odaberite Eliptični alat za selekciju (kratica SHIFT+M), te nacrtajte u gornjem desnom uglu elipsu (sada radimo ovaj dio slike).

- Namjestite boju te ostale parametre gradienta kako je prikazano na slici:

- Ispunite unutrašnjost elipse od gornjeg do donjeg ruba. - Pritisnite CTRL+D (Deselect). - Odaberite Filter > Blur > Gaussian Blur, te namjestite Radius na 5.0 pixela. - Promijenite mod layer-a «Elipsa1» iz Normal u "Overlay". - NAPOMENA: sa Move Tool-om možemo pomicati layer na bilo koje mjesto

na slici. - Isto ponovite na ostalim dijelovima slike!

4) Kreiranje neodređenog oblika kako je prikazano na sljedećoj slici

- Pozicionirajte se na Layer1

- Odaberite Freeform Pen Tool , te napravite selekciju otprilike kako je prikazano na gornjoj slici.

- Držeći tipku CTRL kliknite na rub staze. Zatim pritisnite desnim klikom miša na stazu te odaberite opciju Make Selection.

- Pozicionirajte se na Background layer, te napravite novi Layer (pritisnite CTRL+C, te CTRL+V). Nazovite ga «Nedefinirani oblik»

- Pritisnite CTRL+Klik na Layer «Nedefinirani oblik» kako bismo označili selekciju.

- Odaberite narančasto-žutu boju te uzmite Paint Bucket Tool i ofarbajte površinu.

- 34 -

3.2.4. Pimjer izrade Tipke Krajnji cilj:

5) Izrada oblika tipke (gumba):

- Pokrenite photoshop, te u njemu otvorite novi dokument dimenzija 400x100.

- Na novom layer-u ( Create a New Layer). Odaberite Elliptical Marquee

Tool , te držeći tipku Shift nacrtajte kružnu selekciju na «desnoj» strani radne površine.

- Ofarbajte selekciju u «crnu» boju sa Paint Bucket Tool . Ovo će biti desni zavinuti rub našeg gumba.

- Pritisnite CTRL + D (ili Select ⇒ Deselect)

6) Označavanje kolone za rastezanje:

- Odaberite sljedeći alat za selektiranje: , te njime označite polovicu kruga.

- Pritisnite CTRL + T (ili Edit ⇒ Free Transform), kako bismo transformirali selekciju, te vucite selekciju u «lijevo» do ruba radne površine. Slika bi trebala izgledati ovako:

7) Bojanje tipke i dodavanje efekata:

- Pritisnite CTRL + klik na «Layer 1» (kako bismo ga selektirali), zatim: CTRL + U da dođemo do Hue/Saturation izbornika u kojem je potrebno odabrati opciju Colorize, te namjestiti Hue, Saturation i Lightness tako da dobijemo žućkastu boju (npr. 42,100,32).

- 35 -

- Da bismo dodali efekte dvostruko kliknite na «Layer 1» i u otvorenom okviru dijaloga odaberite: Drop Shadow, te Bevel and Emboss. Pritisnite OK i slika bi trebala izgledati otprilike ovako:

8) Oblikovanje površine tipke i dodavanje nepravilno obojenih površina:

- Kliknite: Filter ⇒ Texture ⇒ Texturizer. Odaberite u rubrici Texture:

Sandstone.

- Napravite novi Layer ( Create a New Layer). Pritisnite CTRL+klik na «Layer 1» (kako bismo napravili selekciju oko tipke). Za pozadinsku boju (Background Color) odaberite «Bijelu», a za prednju boju (Foregrund Color) «Crnu».

- Odaberite Filter ⇒ Render ⇒ Clouds, zatim u padajućem izborniku: Image

⇒ Adjustments ⇒ Brightness/Contrast, podesite Contrast: 100

- Promijenite mod «Layer-a 2» iz Normal u Soft Light - Slika bi trebala izgledati otprilike ovako:

9) Dodavanje svjetline na tipku:

- Napravite novi Layer ( Create a New Layer); odaberite Gradient Tool , te u njemu podesite vizualnu reprezentaciju gradienta na Copper.

- Primijenite gradient s lijeva na desno, te prebacite mod «Layer-a 3» iz Normal

u Overlay. Ovime smo dobili svjetlija i tamnija područja na tipki.

10) Dodavanje teksta i svjetlosnih efekata na njemu:

- Odaberite Type Tool . Upišite proizvoljan tekst od dvije riječi, ali štampanim slovima (veličine 30 pt).

- Ofarbajte početna slova pojedine riječi u crvenu boju, i neka budu većeg fonta

(npr. 48 pt) - Označite cijeli tekst i povećajte razmak među slovima kliknuvši na ikonu u

gornjem desnom dijelu ekrana:

- 36 -

, te u otvorenom okviru dijaloga podesiti rubriku na 100. - Dvostruko kliknite na tekstualni layer i u otvorenom okviru dijaloga podesite

sljedeće efekte: Bevel and Emboss; u rubrici Outer Glow namjestite «bijelu» boju, kako bi nam rubovi teksta bili bijeli. Sada ponovno kliknite na Bevel and

Emboss te u rubrici Deepth pomičite klizač u desno i promatrajte što se dešava sa tekstom. Pritisnite OK.

- 37 -

3.3. Adobe ImmageReady (program za izradu animacija)

Image Ready i Photoshop su vrlo slično organizirani. Image Ready je program koji se više

koristi za izradu slika za Web, tj editiranje fotografija i slika. U Image Ready-u možemo

stvarati animacije, rollovere, optimizirati slike za web i još mnogo toga.

Mi ćemo se sada fokusirati na izradu kratke i jednostavne animacije, Animiranog GIF-a u

Image Ready-u!

Za izradu aniamcija potrebno je znanje Photoshop-a i ImmageReady-a, pa sam iz tog razloga

naj prije objasnio photoshop.

1) Stvaranje animiranog natpisa

2) Stvaranje animirane slike

- 38 -

3.3.1. Stvaranje animiranog natpisa

Otvorimo Photoshop ( Photoshop otvaramo zato da prikažemo vrlo jednostavan način

suradnje Photoshopa i Image Ready-a ). Naime, ako radimo nešto u Photoshopu, jednostavno

se možemo prebaciti iz njega u Image Ready pritiskom na jednu ikonu u toolboxu, tj. traci s

alatima!

Tipka za pralazak u Image Ready!

Kada to kliknemo, Photoshop automatski prelazi u Image Ready zajedno sa crtežom koji

želimo promjeniti! Ako imamo više layera, bit će ih i u Image Ready-u. To je vrlo dobro zbog

toga što ne trebamo sačuvati svoj rad i onda otvarati Image Ready te opet otvarati rad, ali koji

više neće imati sve postavke koje smo željeli.

Ali ako u kojem slučaju ta tipka ne radi, trebat ćemo svoj rad koji smo napravili u Photoshopu

spremiti kao psd ekstenziju te kada sliku otvorimo u Image Ready-u nećemo izgubiti layere

ako smo ih imali. Image Ready ima istu takvu tipku za prelazak natrag u Photoshop.

Dakle, otvorimo Photoshop i kliknimo na tu tipku da vidimo kako nas automatski Photoshop

prebacuje u Image Ready. Kada smo u Image Ready-u otvorimo novi dokument ( u

padajućem izborniku File→New, ili CTRL+N ).

Podesimo postavke:

- 39 -

Širina i dužina neka nam budu 250 piksela, a pod Contents Of First Layer ( Pozadina Prvog

Layera, sloja ) neka nam bude bijela, te potvrdimo sa «ok».

Zatim sa alatom za pisanje napišimo neki dugačak tekst ali da nam bude dugačak ne u širinu

nego u visinu, zbog toga što trebamo dojam da tekst stvarno putuje i nestaje na stranici.

Npr.

Zatim napišimo

neki dugačak

tekst ali da nam

bude dugačak ne u širinu

nego u

visinu.

Sada je potrebno odvući tekst skroz dolje (Move Tool-om), tako da nam se vidi samo početni

red :

- 40 -

Akcijska paleta: Window → Action

Dupliciramo okvir u animacijskoj paleti pritiskom na ikonu Duplicates current frame i

pomaknemo slova prema gore da se vidi drugi red.

Zatim ponovno dupliciramo okvir i pomaknemo slova da se vidi treći red.

Pomičemo tekst sve do vrha stranice dok ne nestane ( pritom držimo pritisnutu tipku Shift da

nam tekst bude poravnan, tj. ne šeće lijevo i desno u toku aminacije ).

Izgled akcijske paleta:

Kliknimo play i pogledajmo kako nam izgleda animacija. Slova će vjerojatno biti brza no

podesimo vrijeme trajanja svakog okvira i izgledati će bolje.

- 41 -

Pomoću opcije Tween moguće je automatizirati izradu animacija tako da stavimo u jedan

okvir (u Animation traci) početnu poziciju slike ili teksta, a u drugi okvir njegov krajnji

položaj te odaberemo opciju Tween (koja se pojavi kada kliknemo na strelicu u gornjem

desnom uglu animacijske trake) kako je prikazano na sljedećoj slici. U otvorenom okviru

dijaloga upišemo koliko sličica želimo ubaciti između početnog i krajnjeg položaja i

animacija je gotova.

- 42 -

3.3.2. Stvaranje animirane slike Na webu možemo vidjeti razne zanimljive animacije koje je vrlo jednostavno napraviti ako

imamo malo znanja o Photoshopu i Image Readyu.

Osnova svega je da imamo dvije ili više sličice. Npr. želimo li prikazati psa u trku, treba nam

sličica psa u raznim djelovima pokreta i jedino što trebamo je posložiti te sličice po redu tako

da izgleda kao da pas trči.

Oči koje se otvaraju i sklapaju:

1.okvir 2. okvir

U Photoshopu učitamo obje sličice.

Na jednoj sličici napravimo novi Layer i iskopiramo drugu sličicu u taj Layer.

Prebacimo se u Image Ready pritiskom na tipku .

U prvom okviru vide se otvorene, a u drugom zatvorene oči ( to ćemo napraviti tako da u

prvom okviru animacijske palete budu otvorene oči, tj. prvi layer vidljiv drugi ne. U drugom

okviru biti će vidljiv drugi layer, a prvi ne).

Sada je potrebno podesiti trajanje pojedinog okvira: prvi traje 1.5sec, a drugi 0.15sec.

Naša animacija je spremna; pritsnimo play na akcijskoj paleti.

Bitno je da što god želino animirati, moramo imati više stanja te animacije.

Npr. ako želimo prikazati čovjeka koji maše rukom, moramo imati sličicu gdje mu je ruka na

ljevoj i na desnoj strani, a može i u sredini.

- 43 -

3.4. Flash (program za izradu animacija)

Jednom davno, davno, u dalekoj galaksiji postajao je Internet koji je sadržavao samo obični,

dosadan, neformatiran tekst. Tada je došao Web i sa sobom donio formatirani text i grafiku.

Tada je web malo narastao pa je i grafika postala zanimljivija i ljepša. Počeli su se pojavljivati

detalji poput pokretnih sličica u zaglavljima koje su ljudi nazvali animacijama. No, ljudima

je trebalo više. Gledali su filmove, crtiće i poželjeli su još više animacije, još više

interaktivnosti, zabave na Web stranicama, i tek tada počinje naša priča... tada je došao

Flash... Flash je općenito program za animaciju. Pruža mnoge mogućnosti izrade vrlo

zanimljivih pokretnih sličica, zanimljivih gumba koje posjetitelje mogu odvesti gdje žele a

pritom mjenjati boju, oblik, pokrenuti animaciju i još mnogo toga. U njemu možemo izraditi

cijelu Web stranicu ili pak samo malu animaciju koju ćemo ubaciti na našu gotovu stranicu

napravljenu u Dreamweaveru.

- 44 -

4. Zaključak S obzirom na brzi razvoj danšnjih aplikacija (programa) te mrežne opreme, koja nam omogućava brži prijenos podataka, proširili su se pogledi i mogučnosti koje nam pruža Web i Web Aplikacije. Omogućen je prijenos videa, slike i zvuka, zanosnim brzinama, pa je stoga danas moguće na naše stranice stavljati glazbu i filmove te slike veće kvalitete, na opće zadovoljstvo posjetioca naše stranice. Olakšana je izrada Web aplikacija, korištenjem grafičkog sučelja progama kao što je npr. Macromedia Dreamweaver. Za složenije stranice koje su npr. povezane sa bazama podataka potrebno je baratati s programskim jezicima, kao što su: HTML, PHP… itd.

- 45 -

5. Literatura www.macromedia.com www.adobe.com www.pegaweb.com vlastite bilješke