maturski rad iz web dizajna

8/13/2019 Maturski rad iz web dizajna

1/17

Tehnoloka kolaPilanska bbBanja Luka

MATURSKI RADGRAFIKI INTERFEJS PROGRAMA ADOBE DREAMWEAVER

Mentor: Uenik:Dijana Ljubii Dragan Pratalo

Banja Luka, maj 2013.


2/17

2

SADRAJ:

Uvod u HTML...............................................................................................................3

1. Grafiki interfejs Dreamweaver-a...........................................................................5

1.1 Pregled funkcija......................................................................................................9

1.2 Prikaz Live.......................................................................................................11

1.3 Ugraeni FTP.................................................................................................12

1.4 Navigator koda...............................................................................................12

2.Pravila o razlikovanju malih i velikih slova i belinama.......................................133.Sistemski zahtjevi za Adobe Dreamweaver...........................................................16


3/17

3

UVOD

Veb funkcionie zahvaljujui HTML-u;veb strane se prave pomou HTMLkodakojiva veb ita koristi za rasporeivanje elemenata nastrani iformatiranje teksta, slika

i video-zapisa. Dok dizajnirate strane i rasporeujete elemente na njima u prikazuDesign, Dreamweaver iza scene pie kd koji je neophodan za prikazivanje iformatiranjestraane uveb itau.

Iako je tosuprotno onome to ste moda pomislili, HTML nije programski jezikve jednostavan jezik za oznaavanje teksta. HTML se ne vezuje samo za Dreamweaver

HTML kd moete pisati i ureivati u bilo kom programu za obradu teksta, ak i ujednostavnim aplikacijama kao to su Notepad u Windowsu i TextEdit u verziji Xoperativnog sistema na Macu. Dreamweaver je zaduen da vam omogui vizuelnodizajniranje

veb strana a dapritom nemorate runopisati kd.Meutim, ako volite da radite s kodom,Dreamweaverov prikaz Code, okome je ranije bilo rei, potpunoje funkcionalan editorteksta sa alatkama za formatiranje i prikazom elemenata koda u razliitim bojama,zahvaljujui emu je umnogome olakano pisanje i itanje HTM L-a i ostalihjezika.

Struktura HTML dokumentaIakose za formatiranje teksta koristi veliki broj HTMLoznaka, odreene oznakeslue zadefinisanje strukture teksta, kao tosu liste i tabele, kao i za definisanje samog HTMLdokumenta, to je i najvanije. HTML oznaka je osnovna oznaka. Njome se definie

poetak ikraj HTMLkoda udokumentu:

Unutarglavnih HTMLoznaka nalaze se dveoznake kojima se definiu kljunamestanaveb strani: zaglavlje i telostrane. Zaglavlje sadri stavke koje posetilac strane nevidi,ali su ipak vane. To su kljune rei koje koriste maine za pretraivanje, opisi strane iveze ka spoljanjim skriptovima ili opisima stilova. Zaglavlje dokumenta unutar HTMLoznaka pravi se pomou oznake < hea d > :

U teluse nalaze svi vidljivi elementi strane. Tuse postavljaju iformatiraju tekst,slike iostali multimedijalni sadraji. Telostrane definie se pomou oznake < bod y> :

Ovde stavljamtekst i slike...


4/17

4

Ovakav kostur veb strane automatski se generie kad god napravite nov HTMLdokument u Dreamweaveru, pre nego to dodate neto na stranu. Za sve vizuelneelemente koje postavite na stranu umee se odgovarajui HTML kd unutar oznaka

< bod y> .ta je Dreamweaver?Dreamweaver je izvrstan program za pisanje koda iprojektovanje veb lokacija name-njenkako novim, tako i iskusnim korisnicima. Zahvaljujui svom kreativnom okrue- nju,

brzoje postao popularna alatka za izradu iodravanje veb lokacija. Bez obrzira na to da liste veb dizajner, projektantsadraja za mobilne telefone ili programer sloenihaplikacijana strani servera, Dreamweaver e vam svakakobiti od koristi.

Alatke za dizajn i rasporeivanje elemenata na strani

Dreamweaverovi brojni m eniji sa ikonicama i panoi s mnotvom detalja olakavajuumetanje iformatiranje teksta, slika imultimedijalnog sadraja( kao tosu video-zapisi iFlash filmovi).To znai damoete napraviti dopadljive i funkcionalne veb strane a da

pritom nemorate napisati nijedan redkodaDreamweaver se umesto vasbrine opisanjukoda iza scene. U Dreamweaveru slike ne morate praviti od poetka; budui da je

potpuno kompatibilan sa Adobe Photoshopom CS5, slike moete uvoziti iz togprogram a iobraivati ih u njemu.

Dreamweaver ima sve tovam jepotrebnoza potpunoupravljanje lokacijom, ukljuujuiugraen protokolza prenos datoteka (engl. f i le trans fer p r o to c o l,FTP) izmeu servera ivaeglokalnog raunara, elemente koji se esto koriste (kao to su abloni za vebstrane i stavke izbiblioteke) i nekoliko bezbednosnih mehanizama (recimo, funkcije za

proveruispravnosti veza i pravljenje izvetaja o lokaciji) kakobiste bili sigurni da vaalokacija funkcionie iizgleda dobro. Ukolikodizajnirate strane pomou kaskadnih opisas tilova (engl. Cascad ing S ty l e Shee t s , CSS) , funkcije Browser Compatibility Check i CSSAdvisor pomoi e vam dapronaete i otklonitepotencijalne greke u prikazu koje semogujaviti urazliitim veb itaima.

Ko koristi Dreamweaver?Dreamweaverova popularnost proistie iz raznovrsnosti njegove namene. Zahvaljujuimogunosti realizacije svih faza izrade veb lokacije odsamog koncepta doputanja u radkao i mogunosti njenog kasnijeg odravanje Dreamweaver je omiljena alatka

profesionalaca, dizajnera izraznih komercijalnih firmi i obrazovnih ustanova. Meutim,pristupaan je idizajnerima bez iskustva koji vrlo brzosavladaju njegove osnove. esto gaza line projekte koriste ipojedinci, temala preduzea iprofesionalci iz obla- stimedija,kao to su fotografi islikari, za sopstvene vebprezentacije.


5/17

1. GRAFIKI

Interfejs Dreamweamogunostima ovog progra

(1) (2) (3) (4) (5) (6)

1. Title bar i drop down m

File meni (1) - sadre stan

Close i Print. File meni sdokumentu (Preview in Bro

Edit meni(2) - sadri komselekciju i pretraivanje (Selza preice sa tastature (Keyrei se pristupa takoe iz ov

View meni (3) - omoguavView) i prikazivanje i skriva

5

INTERFEJS ADOBE DREAMWE

era omoguava lako snalaenjea, i tematski je podeljen na nekoliko c

(7) (8) (9) (10)

ni - koji sadri sve komande i opcije

ardne komande kao to su New, O

adri i razliite komande za prikazser, Print Code).

nde kao to su Copy, Cut i Paste,ect All, Find and Replace), te komand

board Shortcuts). Preferencama, o kog menija.

izbor razliitih prikaza dokumenta (je raznih elemenata strane i Dreamw

VER-A

u mnogobrojnim elina:

vog programa

en, Save, Save as,

i rad na tekuem

kao i komande za e za pristup editoru

ima e kasnije biti

esign View, Code aver alata.


6/17

Insert meni (4) -predstavljdokument. Iz ovog menijafajlove i sve ostale sadraje

Modify meni (5) - daje mstranice. Koristei ovaj menJedna od bitnih komandi izatributa same HTML strane.

Text meni (6) - obezbeujkomande za izbor fontova,

poravnanje teksta.

Commands meni (7) - omooptimizaciju slika sa Adobeakciju korisnika kako bi se,koje se ponavljaju.

Site meni (8) -prua koman

Window meni (9) - omoguDreamweaveru. Takoe, moizborima za dizajnera ili kod

Help meni (10) - standardno

Takoe, ovde se nalaze i opc2. Insert Bar - sadri buttonsu slike, tabele, layer-i. Mokomandama iz nekoliko obla

6

a alternativu Insert Bara. Slui za da stranu je mogue dodati slike, taTML strane.

gunost promene karakteristika selei mogu se editovati tag atributi i menjvog menija je i Page properties koja

e lako formatiranje teksta. U okvistil teksta (bold, italic, underline),

uava pristup razliitim komandama,hotoshop-om. Takoe, iz ovog menijasnijem pozivanjem te akcije, ubrzao

de za kreiranje, otvaranje i editovanje

ava pristup svim panelima, inspektoriue je menjati radnu povrinu po pre

era.

ukljuuje Help sistem za korienje D

ije za registraciju kopije Adobe Drea e za unos razliitih tipova objekata u d

se izabrati tematska kategorija sa najsti.

davanje objekata u ele, linkove, Flash

ktovanog elementa ati elementi tabela.

omoguava izmenu

u ovog menija su kao i komande za

ukljuujui i one za je mogue snimiti

ad na aktivnostima

ajtova.

a i prozorima u efinisanim

reamweavera.

weavera. okument, kao to

ee korienim


7/17

7

Common bar - Prikazuje najee koriene mogunosti kao to su linkovi, tabele islike.

Layout bar - Prikazuje lejere i opcije za tabele koje omoguavaju kreiranje dizajna pospecifinim zahtevima.

Forms bar - Prikazuje najee koriene komande vezane za forme kao to su radiobutton-i i check box-ovi.

Data bar - Opcije iz ove grupe se koriste pri kreiranju dinamikih web strana kojeimaju pristup bazi podataka.

Spry bar - Opcije iz ove grupe se odnose na novi tip gotovog koda .

Text bar - Prikazuje najee komande za formatiranje teksta, kao to su pasusi, pagebreaks i liste.

Favourites bar - ovaj bar slui za prilagoavanje Insert bara korisniku. Desnimklikom na bar se prikazuju dodatne opcije.

3. Document window - zauzima najvei deo ekrana i predstavlja radni prostor.

Postoji tri moda: Code view, Design view i Split view.

Na ovaj nain u zavisnosti od potrebe prilagoavamo prikaz radne povrine. Ukolikone poznajemo programski jezik HTML, najbolji izbor je Design view, jer nam daje

pun vizuelni prikaz HTML strane. Ukoliko elimo da uimo kod strane dok kreiramostranu, najbolji izbor bi bio Split view. Code view je najbolje reenje ako elimo dakreiramo stranu direktnim kucanjem koda.Ubacivanjem elemenata na stranu u delu Design, moemo pratiti promene u kodu.

Na vrhu ovog prozora nalazi se prostor za upisivanje Naslova strane (Page title).

4. Properties inspector - Daje nam mogunost izmene parametara elemenata na

strani. Skoro svaki element na HTML strani, bilo da je to tabela, slika ili tekst moe semenjati promenom parametara u ovom delu radnog prostora. Naravno, opcije uProperies inspectoru se menjaju u zavisnosti od toga da li je trenutno selektovanaslika, tabela, tekst ili neto drugo.


8/17

5. Docking panels - klikomogunost dodavanja novih

CSS panel - Ima dva dela,strani, menjati same CSS-ostilova znaajno ubrzava pro

Tag panel - Postoje dva dsvakog HTML taga) i Behastrane, o emu e biti vie re

8

na Title bar svakog panela on sei editovanja postojeih elemenata na s

SS Styles i Layers gde je mogue de i dodavati i menjati layere na stra

ces vizuelnog ureenja i kasnije izmen

ela, Attributes (u kojem je mogueiours (u kojem je mogue dodavanji u narednim nastavnim jedinicama).

razvija i daje nam rani.

davati CSS fajlove ni. Korienje CSS e HTML strane.

editovanje atributa akcija elementima


9/17

Files panel - Panel koji se sfajlovima koje koristimo pr

pretraivati fajlove po lokaldeo Snipets sadri ve naprubrzao rad. Klikom na "Ma

briemo sajtove na kojima tsituacijama kada simultano r

Novi dokument na kojemnarednom dialog boxu e nau zavisnosti od potrebe izvrSnimanje izmena na doku

birati izmeu razliitih tipponuditi preporueni format

1.1. Pregled funkcija

Dokureujete dokument,od triprikaza: Design, Splitgraditi lokaciju igledati rezuveb dizajneri i oni koji podirektno u prikazu Code.razliitim bojama, a na raspol

Onima kojivole neto izmvide i oknos a HTML kodo

prebac ivati p ritiskom na odgo

9

astoji iz tri dela i koji slui za upravli izradi sajta. U okviru Files i Assetsom raunaru ili po folderu koji smo oavljene HTML kodove koji se moguage sites" dobijamo mogunost da dorenutno radimo. Korienje ove opcijadimo na vie projekata.

emo raditi moemo otvoriti klikom biti ponueno nekoliko kategorija iiemo selekciju vrste dokumenta.

entima moemo izvriti klikom naova dokumenata, a Dreamweaver novog dokumenta.

reamweaver vam omoguava dasvoj rli Code. U jednostavnomprikazu Desiltate svog rada tokomsamog procesa iznaju HTML mogu ureivati kd i sznake i skriptovi su lako prepoznatljganju su iostala vizuelnapomagala.

eu, naraspolaganju je prikaz Split ukoiprikaz Design. Izjednog prikaza u dr

varajue dugme napaleti Document.

anje i koordinaciju delova mogue je

redili za na sajt, a koristiti kako bi se

ajemo, editujemo i e je vrlo korisno u

na File>New. U vrsta dokumenata i

ile>Save. Moemo

e nam automatski

dgledate ujednomn, moete v izuelno

ade strana. Iskusniji

riptove dokumentaivi jer su prikazani

e se istovremenougilako semoete


10/17

P r ika z Sp lit o m ogu a va da is to vr

1.2 Prikaz Live

Iziskustva se zna daprograitai veba koje simuliraju.

sve popularnija, potreba za

(ukljuujui menije, panoe

prikaza Des ign uDreamweavU reimu rada Live View

(koja je i osnova za veb itastrane, najee isti kaoiuve

Kada izaberete Live Codevideti kako se vizuelne pro

pregledati i dok dodajete isadraj pomou Spry objekat

10

e me n o v iz ue lno ure uje te s t ranu ig l e da t e gene

i za vizuelni veb dizajn esto neprikazudui da interaktivnost zasnovana nas

precizn im dizajniranjem razliitih stanj

i elemente okruenja) sve je izraenijaeru moda vie ne zadovoljava zahtevnij, Dreamweaver koristi mainu za vizue

Safari i Adobe AIR) kakobiste dobilitau.okradite ureimu Live View, urealnoene na strani odraavaju na kd izauklanjate klase pomou JavaScripta,

i na mnoge druge naine.

r i san j e koda iza sce ne .

uju strane isto kaoriptovima postaje

a neke veb strane. Statika prirodakorisnike.

lizovanje WebKitprecizniji izgled

m vremenu moetecene. Kd moetemeete dinamiki


11/17

PrikazLiv

Ipak, jedno je posmatratiokruenju. DugmeFreeze Jstanju (recimo, sa zakljuani

interaktivno prikazane elemepritom ne morate koristiti fu

1.3 Ugraeni FTP

Datoteke moete lako sokruenju panoa Files koje

raspolaganju i dugme Get/PNema potrebe da koristiteprijavljivanje i odjavljivanjenizovanje datoteka radi lake

Povezane datotekeProjekti na vebu svakim dano

elemenata. U njih se ubrajaju akiserverski umeci. Dreamw

11

eView omogua va in terakci ju s veb s tra n a m a .

epromene aneto sasvim drugoefikasvaScript (ili taster F6) zamrzava vau st

otvorenimmenijem iaktivnim efektonte moete menjati direktno uDreamwekciju Preview inBrowser (F12) isvoj o

lati na veb server i preuzimati ih sradi na principu prevuci i pusti.

t pomou koga aljete strane nakojiposeban softver. Dreamweaver takoedatoteka s lokacije (Check In/Checkupravljanja lokacijom.

postaju sve sloeniji tese esto jedna straskadni opisi stilova (CSS), spoljanje Ja

eaver CS5 sadri funkciju koja omogua

no raditi u takvomranu u odreenom

prelaza). Tada teaveru a dailjeni ita veba.

njega zahvaljujuiUvek vam je na

a trenutno radite.ima funkciju zaut) te za sinhro-

ana sastoji odraznihaScript datoteke pa

amnogo efikasnije


12/17

dizajniranje i odravanje lokaciTraka RelatedFiles nalazi se nTrakprikazuje sve datoteke sadatoteke u drugu preko trake

roditeljske strane.Uprikazu Design (odnosno pr imenjati povezane datoteke u

.

1.4 Navigator koda

Pomou navigatora koda lak

i konkretna CSS pravila u elementa.Nemorate pregledDovoljno je da uDreamweazadrite pokaziva mia iznadzadata svojstva ivrednosti to

prilikom rada s povezanim d koji je veoma vaan za izra

N a v ig a to r ko da o m og

Photoshopovi pametni objDreamweaver CS5 podrava

prevu i PSD datoteku na vebjoj promeniti veli inu. UkoliDreamweaveru prikazuje se c

promenjena. Tada treba pritis(Property Inspector) idobie

12

a i aplikacija s raznovrsnim elementima.a vrhu prozora dokumenta, odmah ispo drane na gotovoj veb strani. Moete seelatedFiles a da pritom neizgubite viz

ikazu Live) uvek se vidi roditeljska datotistovremeni prkaz njihovog vanog v

moete prei nabilo kojupovezanu dautar datoteke) sadranu u konanomati brojne opise stilova dabiste pronalieru pritisnete odreenu stavku konteknekog CSS pravila, pomou navigatorapravila , akada ihpritisnete prelazite ntotekama, naekranu je uvek prikazau interaktivnih sadraja.

uava lako p r ebac ivan j e na odr eenu povezanu

ektihotoshopove pametne objekte, to zna

stranu uDreamweaveru, optimizovati slokasnije aurirate originalnu PSD dato

rvena strelica to ukazuje na to daje izvonuti dugme Update from Original napae novuverziju slike.

naslovne trake.prebacivati izjedneuelniprikaz njihove

eka, ali sada moete zuelnog konteksta

toteku (ukljuujui prikazu izabranog

konkretno pravilo.tnog menija. Kadakodamoete videti

traeni kd.Kao ivizuelni kontekst

da to teku.

i da moeteiku za veb i akeku, na toj slici urna datotekanou Properties


13/17

2.PRAVILA O R

HTML je fleksibilan jezik skoliko strogo hoete da pieoznake velikim, odnosno ma

se n s iti v i ty ). Dabiste videli kak1 Izaberite File > Open.K a

dw01lessons. Izaberite dat2 Ako vam nije aktivan po

kakobiste gledali i kd iispod reda 9 u kodu:

Sve ove ozn ake va e

13

ZLIKOVANJU MALIH I VELIKII BELINAMA

rlomalim brojem pravila o izgledu kote kd, HTMLmoe biti ili vrlo detaljlim slovima (tzv. razlikovanje m alih ive

HTMLprikazuje beline,pratite sledeea se otvori okvirza dijalog Open,prei

oteku Whitespace.html, a zatim pritisniteljeni prikaz, pritisnite dugme Split ndizajn strane. Obratitepanju naizgle

iako im aju razl i i tu s trukturu upogledu vel ik i

SLOVA

a. Zavisno od togaan takoda ispisujelikih slova, engl ca se

korake:te u direktorijume Open.

paleti Documentidentine oznake

im alihslo va.


14/17

Iako su sve tri oznake

Pogledajte redteksta na kodu se vidi veliki razmrazmaka. To je zato toizmeudva segmenta teks

Uprkos ve l i kom p ros toru

3 Dabiste preli u noviNa dnuprikaza Design, pShift+Enter (Windows), o

videete da je svaki noPrilikom prikazivanja stramada se, tehniki gledano,

14

razliito napisane, sve su ispravne i

s ledeoj s l ic i koji glasi T h is i s one s en tenk izmeu dva reda, ali u prikazu Desnisu prepoznati ni prelazak u novi r

ta ili HTML oznake.

i zmeu dve r een ice ,uprikazu D es ign one su

redili novipasus, treba da unesete potreostavite kursor nakrajprvereenice, zanosno Shift+Return (Mac OS). Takou

vi red u kodu predstavljen oznakom dodaje prazanreenice nalaze uistompasusu.

daju iste rezultate.

e . T his i s ano the r . Uign nema nikakvogd ni prazni redovi

j edna poredd ruge.

ne HTML oznake.tim dvaputpritisniteeete dvanova redar> (od engl. b r e a k ).ed izmeu reenica,


15/17

K ad hoe te da um e tn e te p ra za

4 Dabiste napravili novpas Enter (Windows), odnosredom ispred i iza njega,

pasus).

D re a m w ea ver p ra vi n

15

n red , drei pr i t isnut tas ter Shi f t pr i t isn i te E

us, postavite kursorispred reenice Th is o Return (Mac OS). Taj tekst j e s a di nalazi se izmeu para oznaka < p > (

v pa sus kad god pr i t isnete tas ter Ente r,o d n o s

te r,o d n o s n o Return.

i s another ipritisnitea odvojen praznimd engl. p aragra ph

o Return.


16/17

16

3.SISTEMSKI ZAHTEVI ZA ADOBE DREAMWEAVER

Windows: Intel Pentium 4 ili AMD Athlon 64 procesor Microsoft Windows XP SP2, Windows Vista Home Premium-Ultimate ili

Enterprise SP1, ili Windows 7 512 MB RAM-a 1 GB dostupnog prostora na hard disku za instalaciju; tokom instalacije

potreban je dodatni slobodni prostor (instalacija na prenosivim fle ureajima za

skladitenje nije mogua) 1280x800 ekran sa 16-bitnom grafikom karticom DVD-ROM jedinica Potrebna je internet veza irokog propusnog opsega za usluge na mrei

Mac OS: Intel procesor sa vie jezgara Mac OS X v.10.5.7 ili 10.6 512 MB RAM-a 1.8 GB dostupnog prostora na hard disku za instalaciju; tokom instalacije

potreban je dodatni slobodni prostor (nije mogua instalacija na volumenu kojikoristi sistem datoteka koji razlikuje mala i velika slova ili na prenosivim fleureajima za skladitenje nije mog)

1280x800 ekran sa 16-bitnom grafikom karticom DVD-ROM jedinica Potrebna je internet veza irokog propusnog opsega za usluge na mrei


17/17

17

maturski rad iz web dizajna

Documents