Adobe Dreamweaver CS3 - izrada stranice

7/29/2019 Adobe Dreamweaver CS3 - izrada stranice

1/30

Izrada web stranice u Dreamweaveru

Ovaj lanak je napisan za poetnike, odnosno sve one koji se po prvi put susreu sa programom za izradu

i oblikovanje web stranica Dreamweaver. Iako je ovdje objanjen osnovni rad sa aktualnom

inaicom Dreamweaver CS3 veina napomena i savjeta se moe primjeniti i u prijanjim verzijama

Dreamweavera. lanak je podijeljen u nekoliko glavnih cjelina kako bi se itatelj mogao jednostavnije

snalaziti na stranici.

1. Izrada web stranice u Dreamweaveru 2. Spremanje HTML dokumenta 3. Naslov HTML dokumenta 4. Osnovne karakteristike web stranice 5. Unos teksta u HTML dokument 6. Izrada i oblikovanje paragrafa 7. Izrada i oblikovanje naslova 8. Izrada i oblikovanje lista

9. Oblikovanje pisma 10.Veliina pisma 11. Boja pisma 12. Unos i oblikovanje slika 13. Ureivanje slika 14. Unos flash animacija 15. Ubacivanje Flash videa u web stranicu 16. Koritenje linkova na web stranici 17. Organiziranje mapa i dokumenata u Dreamweaveru


2/30

Alati

1) Izrada web stranice u DreamweaveruPrije no to krenemo sa izradom web stranice u Dreamweaveru, bitno je provjeriti da je sve spremno za

jednostavan, ispravan i brz nain rada. U nastavku u nabrojati najbitnije opcije koje treba podesiti zaugodan rad.

1. Odaberite u izborniku Edit > Preferences(vidi sliku 1. Dijaloki okvir Preferences)- otvorit e se dijaloki okvir koji u lijevom stupcu prikazuje listu svih kategorija i opcija podeavanjakoje omoguavaju prilagoavanje programa osobnim zahtjevima i preferencijama

2. Kliknite u listi kategorija na General, a u desnom stupcu oznaite slijedee:- kuicu kvaicom gdje pie Use CSS instead of HTML tags

- oznaite Centering: Use tag- u polje Maximum number of history steps upiite 50 ili 100(korisno za opciju undoukoliko se trebate vratiti nekoliko koraka unazad i ispraviti dokument)

3. U listi kategorija odaberite Invisible Elementsi tada oznaite kvaicom Line Breaks4. U listi kategorija odaberite File types/editors, i odaberite program kojim ete otvarati i editirati

odreeniu vrstu dokumenta izravno iz Dreamweavera (npr. uobiajeno je da sve slike u .gif ili .jpgformatu otvaramo i ureujemo u grafikim programima kao to su Adobe Photoshop ili Fireworks)

5. U listi New Document pod Default Document odaberite HTML, pod Default Extensionupiite .html,a pod Default Document Type(DTD) odaberite XHTML 1.0 Transitional

6. U listi Preview in Browserodaberite internet preglednik i pripadajuu tipkovniku kraticu u kojemete lokalno pregledavati izgled web stranica (npr. tipkovnika kratica F12 e otvoriti trenutnu webstranicu u Internet Exploreru, a tipkovnika kratica Ctrl + F12 e otvoriti Firefox

slika 1. - Dijaloki okvir Preferences

Nadalje, otvorite slijedee prozore i panele:

1. Standarnu traka alata i traku alata dokumenta pomouizbornika View > Toolbars > StandardiView > Toolbars > Document

2. inspektor svojstava (Property inspector) i insertnu traku (Insert bar) pomouizbornika Window >Properties i Window > Insert


3/30

3. Panelu stilskih listi (CSS styles) pomou izbornika Window > CSS Styles, a panelu dokumenata (Filespanel) pomou izbornika Window > Files

Nakon definiranja web site-a (web projekta) moete zapoeti sa izradom web stranice.

Postoje dva naina otvaranja novog dokumenta:

1. Odaberite u izborniku File > New > Blank Page > HTML(Ctrl + N) i otvorit e se dijaloki okvirprikazan na slici 2. Dijaloki okvir novog dokumenta (New Document)a. Kategorija dokumenta odreuje da li ete odabrati novu (praznu) stranicu, prazan predloak,

stranicu iz gotovog predloka ili stranicu iz uzorka

b. Tip stranice odreuje vrstu dokumenta (HTML za web dokumente, CSS za stilske liste, ...)c. Izgled HTML dokumenta odreuje preddefinirane formate web stranica (npr. 1-stupani format

stranice sa fiksnim dimenzijama u px, 2-stupani format sa rastezljivim formatom u % itd...

d. Tip HTML dokumenta je bitan radi standardnog i ispravnog prikazivanja web stranice u Internetpreglednicima (npr. Internet Exploreru ili Firefoxu), kao i radi ispravne provjere HTML i CSSkoda u posebnim programima koji provjeravaju ispravnost napisanog koda (sintaksu koda). Sobzirom da Dremaweaver automatski ubacuje ispravan kod za odreeni tip dokumenta uzaglavlje HTML koda, ne trebate se brinuti o samom kodu i razlikama meu tipovimadokumenata

2. Ukoliko ste tek otvorili Dreamweaver po prvi put primjetit ete tzv. Splashstranicu (preduvodnustranicu) koja s lijeva na desno prikazuje: popis zadnje koritenih dokumenata, mogunost odabiranovog tipa stranice (HTML, ASP; PHP; CSS itd...) te mogunost odabira preddefiniranih uzorakadizajna (CSS, stranica sa okvirima (frameset) itd... U naem sluaju dovoljno je kliknuti na HTML linku srednjem stupcu i otvorit e se novi (prazni) dokument.

Slika 2. Dijaloki okvir novog dokumenta (New Document)

2) Spremanje HTML dokumentaNakon otvaranja novog HTML dokumenta potrebno je taj dokument spremiti na hard disk (File > SaveAs) unutar mape koju smo definirali kao lokalnu korijesnku mapu (vidi uvod). Npr. ako se korijenskamapa nalazi na hard disku C:\moja-web-stranica\ (gdje C oznaava hard disk, a moja-web-stranicanaziv mape) onda je potrebno sve HTML dokumente i slike spremiti unutar mape moja-web-stranica.Bitno je napomenuti da naziv HTML dokumenta treba imati ekstenziju (nastavak) .htm, .html, smijesadravati slova (a-z), brojke (0-9), crticu (-) ili donju crticu (_) ,ali ne smije sadravati razmake ili


4/30

specijalne simbole (&,%,/,?...) zato to neki web serveri i web preglednici ne podravaju iste. Naravno,ukoliko radite u programskim jezicima php, asp ili jsp tada e nazivi vaih web dokumenata imati

ekstenziju .php, .asp ili .jsp.Nadalje, bitno je napomenuti da se glavni HTML dokument koji se prvi treba otvoriti u web preglednikunazove index.html jer je veina web servera podeena da takvu web stranicu otvara kao prvu webstranicu. Ukoliko prvu web stranicu ne nazovete index.html ili index.htm web serveri nee otvoriti vauweb stranicu ve e prikazati onaj poznati prozor The webpage cannot be found.

3) Naslov HTML dokumentaKliknite u polje za unos naslova (Title box) koji se nalazi na vrhu prozora dokumenta i upiite naslovHTML dokumenta. Naslov HTML dokumenta e se prkazati na naslovnoj traci Internet Explorera iliFirefoxa i treba biti deskriptivan, jasan i jednoznaan treba u nekoliko rijei opisati glavnu temu webstranice na kojoj se nalazite, npr. Reference ili O nama.

4) Podeavanje osnovnih karakteristika web straniceKliknite na Page Propertiesgumb koji se nalazi na paneli Ispektora svojstava (Property inspector)ili odaberite izbornikModify > Page Properties(vidi sliku 3. IzbornikModify > Page Properties).

Slika 3. IzbornikModify > Page Properties

U dijalokom okviru Page propertiesmogue je odrediti osnovne karakteristike (svojstva) web stranice(vidi sliku 4. Dijaloki okvir osnovnih karakteristika stranice (Page Properties):1. Izgled, veliina i boja pisma (Font)

- ovaj stil za pismo e Dreamweaver koristiti za sve tekstove na web stranici2. Boja pozadine stranice (Background color)

- ukoliko elite pozadina stranice moe biti u nekoj drugoj boji osim bijele, npr. crvena. uta ili plava.


5/30

Takoer, pozadina web stranice moe biti i u obliku slike ili uzorka koji e se prikazivati ispod ostalihelemenata web stranice

3. Margine stranice (Left, Top, Bottom i Right Margin)-s obzirom da internet preglednici (IE, Firefox i drugi) imaju mali odmak izmeu sadraja stranice istranica prozora preglednika potrebno je ukloniti taj odmak upisivanjem odreenih dimenzija zalijevu, desnu, gornju i donju marginu

4. Veliina, boja i vrsta pisma za linkove- linkovi mogu biti prikazani u istom fontu kao to je i tekst na stranici (ista boja i veliina), ali mogubiti prikazani i u nekom drugom fontu. Linkovi mogu imati 4 vrste stanja: normalno stanje stanjeprije klika na link (regular), posjeeno stanje stanje nakon klika na link (visited), aktivno stanje stanje u trenutku klika na link (active) i rolloverstanje stanje prilikom prelaska pokazivaa prekolinka

5. Veliina, boja i vrsta pisma za tipove naslova, itd...

Slika 4. Dijaloki okvir osnovnih karakteristika stranice (Page Properties)

Na vrh

5) Unos teksta u HTML dokumentUnos teksta u Dreamweaver je vrlo jednostavan i vrlo slian ostalim tekstualnim editorima kao to je npr.MS Word. Dreamweaver u paneli Property inspectornudi najosnovnije alate za oblikovanje teksta kao tosu: izbor pisma, veliina i boja pisma, izbor listi, poravnanja teksta i sl...Nakon to ste kreirali novi dokument (File > New, Ctrl + N), u praznom prostoru dokumenta pri vrhu e

se prikazati kursor koji vam omoguava upisivanje teksta. (slika 5. Unos teksta u dokument)Unos teksta u HTML dokument poinje na vrhu stranice (header) i zavrava na dnu stranice (footer).Jednostavno ponite upisivati tekst koristei tipkovnicu. Znai, ne moete poeti dodavati tekst prvo nasredini stranice, a zatim pri vrhu, jer to nije mogue (osim u posebnim sluajevima, npr. kada se koristeapsolutno pozicionirani elementi).Svaki paragraf koji elite napraviti u Dreamweaveru potrebno je odvojiti od drugog paragrafa klikom natipkuEnter itada zapoinjete pisanje novog paragrafa u novom retku (slika). Ukoliko elite unutarparagrafa prei u drugi red (ne u drugi paragraf) tada je potrebno kliknuti na tipke Shift + Enternatipkovnici ili na izborniku odabratiInsert > HTML > Special Characters > Line Break.


6/30

Slika 5. Unos teksta u dokument

Na vrh

6) Oblikovanje paragrafa

Kao to koristite paragrafe kada piete npr. Pismo u cilju da si pomognete organizirati misli u jasne,

jednostavne i vezane jedinice, na isti se nain organizira sadraj na web stranicama u blokovimapodataka unutar HTML elemenata. Najosnovniji blok informacije je jednostavan paragraf, oznaen uHTML-u elementom paragrafa, kao to je ovaj:

Ovo je paragraf

Kada u Dreamweaveru kreirate novi dokument i ponete tipkati tekst, tekst koji ste napisali nije uopeoblikovan, kako je naznaeno sa rijei Noneu Formatizborniku na lijevoj strani, Property inspektora.(slika 6.) (oznaka Nonenije HTML oznaka, to samo znai da Va tekst nije okruen bilo kojim elementom

paragrafa koji se koriste u ovom izborniku -

, , i tako dalje.)


7/30

Slika 6. Formati teksta, paragrafa i naslova

Kada pritisnete tipku Enterili Return, kreira se novi paragraf, okruen elementom paragrafa >

, kaoto je prikazano ranije, ali va novonastali paragraf jo nema primijenjen nikakav dizajn. Kada vaiposjetitelji gledaju stranicu, stil fonta i veliine vaeg paragraf su odreeni prema postavkama ipreferencijama njihovog web preglednika. U tom sluaju izgled vaeg paragrafa nee moda biti prikazanonako kako ste to i eljeli.

Panela za formatiranje teksta (paragraf, naslov,lista)Nakon to ste oznaili tekst na stranici njegova svojstva moete oblikovati na paneli Propertyinspector(slika 7.)


8/30

Slika 7. Property inspectorparagrafa

Napomena:Odvajanje strukture sadraja (HTML) od prezentacije (CSS) (slika 8.)

Oblikovanje teksta i elemenata na stranici nije iskljuivo stvar vizualnog dizajna i estetike. Mnoge opcije

formatiranja daju strukturu web stranici, pruajui vrijedan uvid u organizaciju sadraja na stranici. Na

primjer,Heading 1() element oznaava naslov na najvioj razini i, prema tome, ima najveu vanost na web

stranici; manji Heading 2 () element predstavlja naslov neznatno nie vanosti dakle podnaslov. Svaka

stranica ima svoj H1 element odnosno naslov, a zatim i ukljuuje ostale naslove odnosno podnaslove koji dijele

sadraj u logike i razumljive blokove informacija. Struktura stranice se u stvari odnosi na organiziranje sadraja,


9/30

a ne na njegov izgled. Svrha HTMLa je dati strukturu dokumentu odnosno znaenje sadraju. U stvari, za neke

vrste posjetitelja (npr., ljudi koji ne mogu vidjeti ili imaju slab vid) nije bitno kako izgleda Web stranica, ve

sadraj i njegovo znaenje. Dakle, prilikom izrade web stranice koristite HTML elemente za strukturu (npr.

za paragrafe, do za naslove i podnaslove, za liste itd...), a za vizualno oblikovanje stranica

koristite stilske liste (Cascadins Style Sheets CSS) koje vam omoguavaju naprednije tehnike oblikovanja vaih

web stranica, ali i jednostavne promjene i odravanje sadraja.

Na vrh

7) Izrada i oblikovanje naslova (...)

Naslovi odreuju vanost informacije i pomau u organiziranju sadraja. Elementi naslova postoje urazliitim veliinama gdje oznaava najvei naslov, a najmanji. (slika 8. Naslovi - h1 do h6)

Slika 8. Naslovi - h1 do h6

Naslov se definira na isti nain kao to se definira i paragraf oznaite odreeni dio teksta i upaneli Properties inspectoraoznaite odreenu veliinu naslova (slika 9.)


10/30

Slika 9. Definiranje naslova u paneli Properties

Na vrh

8) Izrada i oblikovanje lista (, )Na web stranicama, liste su neophodne za prezentiranje grupa elemenata/predmeta/lanaka kao to sulinkovi, usluge tvrtke ili pak niz uputa.HTML nudi mogunosti oblikovanja za osnovnih kategorija listi (slika 10.). Meu njima, dvije najeeupotrebljavane liste su one oznaene tzv. tokom eng. bullet(nepobrojane liste - unordered list) inumerirane (pobrojane liste - ordered list).

Slika 10. Nepobrojane i pobrojane liste (ordered i unordered)

Lista se kreira na nain da se prvo napravi struktura liste, oznai se, a zatim se u Propertiesinspektoruodabere odreen tip liste:Nepobrojana lista (unordered list) kreira se upotrebom i elemenata, npr.:


11/30

O nama

Reference

Ideje

Kontakti

Posao

Pobrojana lista (ordered list) kreira se upotrebom i elemenata, npr.:

O nama

Reference

Ideje

Kontakti

Posao

Na vrh

9) Oblikovanje pisma (Font formatting)Oblikovanje pisma za Web je vrlo slino oblikovanju pisma u programima za obradu teksta kao to je npr.Word. Naalost, kao i u Wordu, Dreamweaver ima sline nedostatke u pogledu prikaza pisma na webstranicama. Naime, ukoliko elite svoju web stranicu ukrasiti nekim posenim i neuobiajenim fontom(npr. Eurostile bold), postoji velika vjerojatnost da vai prijatelji nee vidjeti stranicu prikazanu sa timpismom, jer ga nemaju instaliranog na njihovom raunalu. Umjesto toga prikazat e im se stranica sa


12/30

nekim predefiniranim pismom npr. Times New Roman ili Arial. Pismo e se dakle prikazati samo ako jeisto instalirano na njihovom raunalu.

Odabir pisma u DreamweaveruOznaite tekst ije pismo elite promijeniti. Kao u program za obradu teksta, moete kliknuti bilo gdje navaoj web stranici, a zatim izaberite pismo za tekst koji ste napisali. (Ako ste kopirali tekst iz drugogprograma, prvo ga kopirajte, a zatim oznaite tekst i odaberite pismo.)Ipak, izbornik pisma u Dreamweaveru nije ba slian izbornicima za odabir pisma u drugim programimaza obradu teksta. Prilikom odabira pisma za neki tekst, morat e te odabrati popis pisama kao to je npr."Arial, Helvetica, sans-serif." Ne moete odabrati samo jedno pismo, npr. Helvetica.To je zapravo vrlo korisno, iz razloga ve navedenog ukoliko elite da Internet preglednik posjetiteljaispravno prikae odreeno pismo na web stranici, posjetitelj treba imati isto to pismo instalirano nanjegovom raunalu. Ukoliko ga nema, Internet preglednik e jednostavno zamijeniti taj font sa nekimdrugim preglednikovim preddefiniranim fontom.

Da biste imali odreenu kontrolu u procesu odabira pisma, moete odrediti listu pisama koji izgledajuslino kao prvi odabrani font (Arial, na primjer). Web preglednik vaeg posjetitelja provjerava da li je prvifont na listi instaliran na raunalu. Ako je, to je ono to va posjetitelj vidi kada pregledava vae webstranice. Meutim, ako prvi font nije instaliran, web preglednik trai u popisu slijedei font koji jeinstaliran. Razni operacijski sustavi koriste razliite fontove, pa ove liste ukljuuju jedan font, koji jeuobiajen na Windows-ima i druge, slinog izgleda fontove koji su zajedniki za Macintosh raunala. Arial,na primjer, se nalazi na svim Windows raunalima, dok je na Macovima slian font Helvetica.

Dreamweaver dolazi sa est unaprijed definiranih listi fontova "prvi izbor, drugi izbor, trei izbor".Naravno, mogue je definirati vlastite fontove odnosno liste fontova koje elite koristiti na vaim web

stranicama i to na slijedei nain:Odaberite u izborniku Text > Font > Edit Font List ili u izborniku pisama u Propertyinspectoruodaberite Edit Font List. (slika 11.)


13/30

Slika 11. Odabir pisma (font)

Na vrh

10) Veliina pismaJedan od naina privlaenja korisnikove panje i fokusiranje na odreene dijelove stranice je koritenjerazliitih veliina pisma. Ukoliko ne definirate veliinu pisma, tekst e biti prikazan prema preddefiniranojveliini koju prikazuje posjetiteljev web preglednik: dakle, u veini dananjih web preglednika to je 16px.Meutim, ne samo da korisnici u svojem web pregledniku mogu mijenjati tu predefiniranu veliinu pisma(npr. Internet Explorer: View>Text Size), ve i razliiti operativni sustavi prikazuju tekst u razliitim


14/30

veliinama. Dakle, ne moete biti 100% sigurni da e tekst na vaoj web stranici biti prikazan upravo ueljenoj veliini.

Da biste promijenili veliinu teksta u Dreamweaveru, jednostavno ga oznaite i odaberite novu veliinu upaneli Property inspector(slika 12.). Ako ste odabrali broj tj. veliinu pisma u px (pixel je najmanja tokana ekranu; skraeno od picture element). moete upisati bilo koji broj u kuicu za unos (Size) iliodabrati ve postojee veliine teksta. Dakle, za razliku od HTML-a, pomou CSS-a moete definirati bilokoju veliinu vaeg fonta.

Slika 12. Odabir veliine pisma (font size)

Naravno, prilikom odreivanja veliine pisma, niste ogranieni samo na vrijednosti u pikselima (px). Pop-up izbornik (na desnoj strani izbornika Size) omoguava vam odabir piksela, toaka, ina, centimetara,milimetara, ems-a ili postotka. Neki od ovih mjernih sustava nije namijenjena za prikaz na monitorima.

Najpopularnije mogunosti su:1. Pixeli se koriste kada elimo imati potpunu kontrolu nad izgledom web stranice odnosno kada

elimo da je veliina teksta prikazana jednako u svim web preglednicima i operativnim sustavima. Sdruge pak strane, Internet Explorer6 i ranije verzije najpopularnijeg web preglednika nedozvoljavaju korisnicima prilagoavanje veliine pisma koje je izraeno u pikselima. Na taj nainkorisnici koji ne vide dobro ili iji monitori su postavljeni na vrlo visoke rezolucije (npr. 1600 x1200px), nemaju mogunosti izmjene veliine pisma i prisiljeni su gledati tekstove u veliini koju stevi definirali. Npr. ako ste odabrali 9px za veliinu teksta, veina korisnika nee moi proitati taj teksti vaa stranica e biti potpuno neupotrebljiva za posjetitelje. Na sreu, u Internet Explorer 7 jemogue mijenjati veliinu pisma ija je veliina definirana u pikselima (tipka Ctrl + -/Ctrl ++ ili Ctrl +scroller na miu)

2. Emje relativna mjera, to znai da stvarna veliina moe varirati. Jedan emje jednak zadanojveliini pisma (zadana veliina pisma je definirana u Page Propertiesokviru). Npr. ako je


15/30

predefinirana veliina pisma 16 piksela, 1em znai da je tekst veliine 16px, 2ema je dvaput toliko,znai 32px itd... Prednost definiranja veliine pisma u em-ovima je u tome to tada omoguavateposjetiteljima da mogu mijenjati veliinu teksta.

Moete koristiti piksele i em-ove zajedno. Moete veliinu glavnog fonta postaviti na 16px, a zatimupotrijebiti ems za druge dijelove stranice, npr.: ako je veliina naslova 2em onda je to zapravo32px (base font 16px x 2em). Ako mislite da je veliina tekstova na stranici pre mala ili prevelika,moete jednostavno promijeniti veliinu osnovnog fonta na stranici, a svi ostali naslovi i tekst e seproporcionalno smanjiti ili poveati.

3. Postotak(%) je jo jedna relativna mjera veliine pisma. Ako ste odabrali veliinu fonta u postotkunpr. 15% onda e taj tekst u web pregledniku biti prikazan proporcionalno u odnosu na osnovnuveliinu fonta ili preddefiniranu veliinu fonta u web pregledniku. Npr. ako je osnovna veliina fonta16px, a naslov je definiran kao 120% tada e naslov zapravo biti prikazan u veliini od 19,2px.

Na vrh

11) Boja pisma

Veina opcija za odabir boje u Dreamweaveru, bilo da je rije o tekstu ili o pozadini elije u tablici koristitzv.Color boxkoji se nalazi u Property inspectoru (slika 13.). Npr. kada elite promijeniti boju -

jednostavno oznaite tekst, kliknite na kuicu za odabir boje (u paneli Property inspector) i zatimodaberite odreenu boju.

Slika 13. Odabir boje pisma (font color)

Savjet:

Dremaweaver nudi jo jednu vrlo korisnu opciju kada je u pitanju odabir boje: moete, npr. odabrati Color

pickeru Color box-u i zatim odabrati bilo koju boju sa cijele povrine vaeg ekrana. Na ovaj nain moete vrlo

brzo i precizno odreivati boju svim elementima na stranici.

Napomena:

Imajte uvijek u vidu da se boja pozadine i boja tekstova na stranici dovoljno razlikuje u pogledu kontarasta, radi


16/30

postizanja to bolje itljivosti i preglednosti stranice. Npr., neka boja pozadine stranice bude bijela, a boja teksta

crna.

Na vrh

12) Unos i oblikovanje slika

Svaki web dokument (dobro, veina web dokumenata) danas sadrava barem jednu sliku kojom se elisvratiti pozornost sa okolnih dijelova web stranice. Osim to se slika, u odnosu na ostale elemente, istiena stranici, ona zaista ponekad, govori vie od 1000 rijei. (slika 14.)

Slika 14. Da li trebam jo neto rei u vezi ove slike? (autor: Cock Robin)

Ubacivanje slike u DreamweaveruSlika se u HTML kodu prikazuje kao element iji je glavni atribut src (source), koji definiraputanju do slike na raunalu odnosno serveru. Npr. sli jedei HTML kod govori web pregledniku da prikaesliku koja se zove skola.jpg, a koja se nalazi u mapi slike i koja ima slijedee dimenzije: irina - 800pxi visina - 600px.

Napomena:

Dreamweaver e automatski napisati ovaj HTML kod kada ubacite sliku u va web dokument.

Ubacivanje slike u Dreamweaveru je vrlo jednostavno: odaberite izbornikInsert > Image(Ctrl+Alt+I) ilina insertnoj traci odaberite ikonicu slike (slika 15.). Slika se moe ubaciti u dokument i jednostavnom


17/30

povuci-ispusti tehnikom (drag-and-drop) odabirom slike u paneli Filesi odvlaenjem iste na povrinudokumenta.

Slika 15. Ubacivanje slike u dokument

Napomena:

Sve slike koje elimo prikazati na web stranici trebaju biti spremljene u jednom od slijedeih grafikih formata:

.gif, .jpg ili .png. Ukoliko ste ubacili sliku koja ima ekstenziju npr. .tiff ili .psd ona se nee prikazati u web

pregledniku.

Napomena:

Prije ubacivanja slike u dokument poeljno je spremiti web dokument unutar lokalne korijenske mape koja je

definirana u procesu kreiranja novog web projekta. Takoer, slika treba biti spremljena unutar lokalne korijenske

mape odnosno jedne od podmapa (u naem sluaju to je mapa koja se zove slike). Ako slika nije spremljena

unutar lokalne korijenske mape definirane u web projektu, Dreamweaver ne moe odrediti ispravnu putanju doslike i ista se zato nee prikazati unutar Dreamweavera. Nadalje, ukoliko ste naziv slike promijenili, a ista nije

spremljena unutar korijenske mape, Deamweaver nee ispravno povezati tu sliku sa dokumentom i ista se nee

prikazati u web dokumentu.

No, Dreamweaver ne bi bio Dreamweaver da nam ne pomae u svim fazama izrade web stranice: ukoliko se slika

koju ubacujemo u dokument ne nalazi unutar lokalne korijenske mape, Dreamweaver e nas pritom upitati da li

elimo kopirati sliku unutar nae korijenske mape. Naravno, odgovorit emo da elimo kopirati sliku i ista e se

tada prikazati u dokumentu.

Savjet:

Dremaweaver CS3 nam omoguava direktno kopiranje ili ubacivanje slika iz Fireworksa ili Photoshopa. Ako npr.


18/30

ubacujemo sliku koja ima .psd ekstenziju, Dreamweaver e otvoriti dijaloki okvir (Image Preview) i ponuditi nam

spremanje slike na odreenu lokaciju na disku i u jedan od moguih grafikih formata za prikaz na webu - .gif,

.jpg ili .png. Isto tako, moemo jednostavnim kopiranjem slike iz Fireworksa (odabirom Select>SelectAlliEdit>Copy) ubaciti sliku u Dreamweaver (odabirom Edit>Paste). Vrlo korisno!

Na vrh

13) Ureivanje slike u Dreamweaveru

Dreamweaver nudi nekoliko alata za brzo i jednostavno ureivanje slika direktno unutar web dokumentabez potrebe za otvaranjem programa za obradu slika kao to je npr. Photoshop ili Fireworks.

Napomena:

Fireworks je Dreamweaver-ov prvotni i originalni grafiki program za obradu i optimizaciju slika za prikaz na

webu. A zbog njihove dugogodinje tradicije i suradnje, Fireworks je vrlo dobro i blisko integriran sa

Dreamweaverom.

Btw., Fireworks je definitivno moj najomiljeniji i jedini grafiki program za obradu slika za web. Zato?


19/30

1. bzo i jednostavno ureivanje slika2. odlina integracija sa Dreamweaverom3. korisni i mnogobrojni stilovi i filteri4. mogunost snimanja odreenih naredbi i/ili akcija, te izvravanje istih5. i za kraj dugogodinji rad, a moda i subjektivni dojam takoer igraju ulogu u izboru omiljenog

grafikog alata

Uz pomo ugraenog alata Dreamweaver nam omoguava slijedee opcije ureivanja slike: (slika 17.)

1. Ureivanje slike u grafikom programu, npr. Fireworksu (Edit image).Dva puta klik na ikonu i otvorit e se va omiljeni program za obradu slike kao i sama slika. Odabirprograma za obradu slika se vri pomou izbornika Edit > Preferences - File types/Editors. Mogue

je odabrati vie grafikih programa za odreene grafike formate (npr. Fireworks za .png, aPhotoshop za .gif ili .jpg).

2. Mijenjanje teine slike odnosno optimiziranje slike za prikaz na webu (Optimize image)3. obrezivanje slike - rezanje odnosno odbacivanje dijelova slike koje nam nisu potrebne za prikaz(Crop image)

4. Resampleslike - mijenjanje veliine slike (Resample image)5. Namjetanje kontrasta i svjetline slike (Brightness and Contrast)6. Izotravanje slike (Sharpen image)

Slika 17. Ureivanje slike direktno u Dreamweaveru pomou dodatnih alata u Property inspectoru

Ukoliko elite brzo promijeniti karakteristike slike pomou nabrojanih opcija dovoljno je oznaiti sliku iodabrati odreeni alat za brzu promjenu karakteristika slike.

Npomena:

Ovi alati mijenjaju izvornu (originalnu) sliku u .gif, .jpg ili .png formatu unutar mape vaeg web projekta. Npr.

ukoliko smanjite sliku u Dreamweaveru, a zatim ju kasnije elite poveati slika e biti slabije kvalitete. Zato je


20/30

bitno napraviti kopiju slike, a zatim raditi sve promjene na slici. U tom e sluaju originalna slika ostati

nepromijenjena i zadrat e svoju prvotnu kvalitetu.

Sve promjene koje radite na slici pomou ovih alata mogu se povratiti pomou izbornika Edit > Undo (Ctrl+Z)svedok je dokument u kojem se nalazi slika otvoren.

Panela Property Inspectorza formatiranje slike

Nakon to ste ubacili sliku i oznaili je na stranici, njezina svojstva moete oblikovati na paneli Propertyinspector(slika 18.)

Slika 18. Ureivanje slike pomou Property inspectora

Optimiziranje slika za prikaz na webuOptimiziranje slika odnosno saimanje (komprimiranje) teine slike radi breg downloada na raunalo sevri na slijedei nain:1. kliknite na ikonu Optimizena Property Inspector-uili u izborniku Modify > Image > Optimize. Otvara

se dijaloki okvir Image preview2. odaberite odreeni grafiki format i stupanj kompresije3. nakon to ste podesili odreene parametre slike, kliknite na gumb OKi izmijenjena slika e se

prikazati u Dreamweaveru

Napomena:

Uvijek je bolje napraviti kopiju originalne slike, a tek onda raditi izmijene na slici. Na taj ete nain zadrati sve

karakteristike originalnu slike odnosno njezinu kvalitetu, jasnou i istou.

Na vrh


21/30

14) Unos i oblikovanje flash animacijaDreamweaver omoguava jednostavno i brzo umetanje animacija u web stranicu (npr. banner,

intro animacija, flash video i sl.). Flash animacije se najee rade u Adobe Flash programu programuza vektorsku grafiku i animacije. Flash dokumenti imaju najee ekstenziju .swf koja se koristi za web,ali mogu imati i druge nastavke kao to je: .fla (nativni flash dokument), .flv (flash video) itd. Flashtehnologija u konanici moe proizvesti visoko kvalitetne animacije ili slike relativno malih teina.

Prije nego to vam pokaem na koje se sve naine moe ubaciti flash u web stranicu, postoji nekolikovanih napomena u vezi koritenja flash animacija:

1. posjetitelji vaih web stranica trebaju imati na svom raunalu instaliran tzvplug-inprogram unaem sluaju je to Flash player(dakle program koji omoguava gledanje animacija u flashu)

2. flash animacije, a pogotovo web stranice koje su napravljene u cijelosti u Flash tehnologiji, sumnogo tee od obine web stranice i stoga se sporije uitavaju na posjetiteljevo raunalo. Iakoveina korisnika danas koristi brze veze na Internet (npr. ADSL, DSL, kablovska, satelitska itd...)

postoji mnogo korisnika koji imaju obian dial-uppristup Internetu i oni e zasigurno trebati mnogovie vremena za otvaranje web stranice koja ima flash animacije ili velike video zapise3. S obzirom da se u Flashu mogu napraviti vizualno vrlo atraktivne i napredne animacije i efekti, neki

flash dizajneri u tom smislu zloupotrebljavaju napredne i mnogobrojne mogunosti programa i praveuznemiravajue i oku neugodne svjetlucave i bljeskajue efekte koji korisnika u konanici smetaju

4. ukoliko niste flash dizajner ili nikada niste radili u Flashu, potrebno je imati ve gotovi i napravljeniflash dokument koji e se ubaciti na web stranicu.

Napomena:

Ukoliko ve nemate instaliran Flash Player na svom raunalu, moete ga skinuti sa web stranice

Adobe.com:http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveF

lash

Ubacivanje Flash dokumenta u web stranicuFlash dokument se ubacuje u web stranicu na sli jedei nain (slika 19.):1. odaberite na izborniku Insert > Media >Flash2. odaberite u dijalokom okviru Select Filedokument koji ima nastavak .swf3. kliknite na gumb OK


22/30

Slika 19. Unos flash dokumenta na stranicu

Dreamweaver e automatski ubaciti flash dokument, odrediti e dimenzije dokumenta (irinu i visinu) igenerirati e odgovarajui HTMl kod koji je potreban za ipravno prikazivanje flash animacije na webstranici.

Nakon ubacivanja Flash dokumenta u web stranicu, isti e biti prikazan kao pravokutnik sive boje. UDremaweaveru je mogue direktno gledati flash dokumente i to na ovaj nain (Slika 20. - broj 9):

1. oznaite flashdokument2. kliknite na gumb Playkoji se nalazi u Propertyinspectoru i animacija e se prikazati3. Na isti nain se animacija moe zaustaviti klikom na gumb Stopu Property inspektoru


23/30

Slika 20. Ureivanje flash dokumenta pomou Property inspectora

Na vrh

15) Ubacivanje Flash videa u web stranicuFlash playermoe osim animacija, bannera, igrica i sl. prikazivati i video prezentacije odnosno filmove(slika 21.). Flash video je postao izuzetno popularan video format za prikazivanje videa na webuzahvaljujui socijalnim mreama kao to je YouTube. Za razliku od drugih konkurentskih video formatakao to su Quick Timeili Windows Media Player, Flash videoe zasigurno moi gledati veina posjetiteljavaih web stranica bez potrebe za skidanjem i instaliranjem dodatnog programa za gledanje videodokumenata.Dreamweaver vrlo jednostavno moe ubaciti flash video dokument u web stranicu na slian nain kaoto ubacuje i flash animaciju (pomou izbornika Insert > Media > Flash Video). U nekoliko klikova miomDreamweaver ubacuje video sa svim potrebnim kontrolama za pokretanje i gledanje flash videa kao to

su npr.: start, stop, pauza i kontrola jaine zvuka.Napomena:Za izradu flash videa je potreban odreeni program i to: Flash 8 Pro, Flash CS3 Pro ili Adobe CreativeSuite 3. Ekstenzija za Flash video je .flvNapomena:Ukoliko elite prikazivati flash video na vaoj web stranici, potrebno je prebaciti na web server i dodatnatri dokumenta koje je Dreamweaver automatski kreirao. To su:1. JavaScriptdokument2. FLVPayer_progressive.swf(video)3. Flash skin .swfdokument (izgled flash playera sa kontrolama)


24/30

Na vrh

16) Koritenje linkova (poveznica) na web stranicamaLink ili poveznica je dio koda koji web pregledniku daje naredbu na koji nain doi od stranice A dostranice B. Ono to je bitno naglasiti je injenica da linkovi ne poznaju pojam ogranienja u virtualnomprostoru tj. mogue je povezati dvije stranice koje se fiziki nalaze na razliitim krajevima svijeta. Npr.vaa web stranica se nalazi na serveru koji je smjeten u Hrvatskoj i koja je povezana sa stranicom kojase nalazi na serveru koji je smjeten u Novom Zelandu. HTML oznaka koja je zasluna za ovakvuinteraktivnost zove se anchor tag(sidro) i u HTML-u se oznaava kao (slika 21.).

Slika 21. Anatomija link taga

Svaka web stranica ima svoju jedinstvenu web adresu koja se zove URL Uniform ResourceLocator(Jedinstveni lokator resursa). Npr., ako elite otvoriti stranicu on-line trgovine Algoritam utipkatete slijedeu web adresu u adresnu traku preglednika: http://www.algoritam.hr

Postoje tri vrste linkova:

1. absolutni (absolute)- link koji oznaava potpunu i jedinstvenu web adresu za odreenu web stranicu. Absolutni linkuvijek poinje sa oznakom http:// i koristi se za povezivanje sa stranicama koje nisu smjeteneunutar vae web stranice-primjer: http://www.algoritam.hr/katalog.html

2. relativni u odnosu na dokument (document-relative)-link daje naredbu web pregledniku gdje mora potraiti povezanu web stranicu u odnosu napostojeu, trenutnu stranicu. Ako se tranica nalazi u istoj mapi unutar web site-a, link na povezanustranicu je jednostavno naziv samog dokumenta na koji se linka: npr. katalog.html. Ovakav tiplinkova izbacuje cijeli URL naziv web dokumenta http://www.algoritam.hr , a ostavlja samo nazivdokumenta- primjer:katalog.html

3. relativni u odnosu na korijensku mapu (root-relative)- link daje naredbu pregledniku kako pristupiti odreenoj stranici unutar istog web site-a, slino kao ikod prethodno opisanog tipa linka. Meutim, u ovom sluaju putanja do stranice je relativna uodnosu na korijensku mapu mapu koja sadri naslovnicu (Home Page) i sve ostale stranice, mape idokumente koji se nalaze na stranicama. Ovaj tip linka ima ispred naziva web dokumenta oznaku /(forward-slash)- primjer: /katalog.html


25/30

Napomena:

Dijelovi URL-a:

Svaka web stranica ima svoju jedinstvenu web adresu ili URL adresu. URL adresa se sastoji od slijedeih dijelova:

1) http:// - HyperTextTransferProtocol -protokol kojim je definirana komunikacija izmeu web servera i web

preglednika u cilju povezivanja i prikazivanja web stranica

2) www.algoritam.hr - ovo je adresa web servera na kojem su smjetene web stranice. WWW je inae kratica

za World Wide Web, a odnosi se na stranicu unutar domene algoritam.hr

3) katalog.html

- ovo je HTML dokument odnosno web stranica koja se otvara u web pregledniku

Kreiranje linka (poveznice)Povezivanje dviju stranica u dokumentu Dreamweavera se vri na slijedee naine:1. oznaite tekst ili dio teksta koji elite povezati sa drugom stranicom (slika 22.), a zatim odaberite

jedan od naina (slika 23.):

1. pomou izbornika Modify >Make Link (Ctrl+L) iodabirom odreenog dokumenta u dijalokomokviru Select file

2. pomou ikone Point to file jednostavnim klikom na ikonu i odvlaenjemdo HTML dokumenta upaneli Files

3. pomou ikone Browse for file jednostavnim klikom na ikonu i odabirom odreenogdokumenta u dijalokom okviru Select file

4. klikom na ikonu Hyperlinku insertnoj traci

Slika 22. Povezivanje dviju stranica


26/30

Slika 23. Nain kreiranja linka

Kreiranje imenovanog linka (Named Anchor)Linkovi u veini sluajeva slue za povezivanje dviju stranica. Meutim, ponekad postoji i potreba zapovezivanjem tono odreenog dijela na samoj stranici. U tom sluaju koristimo poseban tip linka -named-anchorkoji slui za prebacivanje na tono odreeno mjesto na samoj stranici.Kreiranje named-anchorase vri u tri koraka (slika 24.):1. pozicionirati kursor na odredino mjesto2. dodati i imenovati link (named anchor) na stranici sa kojim se povezuje odnosnono odreuje

destinacija (npr. naslov)3. napraviti sam link koji e linkati na imenovani link (named anchor), na nain da se oznai tekst,a u

polje Linku Property Inspektoruupisati znak # zajedno sa nazivom imenovanog linka (naslov).


27/30

Slika 24. Nain kreiranja imenovanog linka (named-anchor)

Kreiranje E-mail linkaOsim regularnih linkova koji nam slue za povezivanje stranica ili za povezivanje odreenih mjesta nasamoj stranici, postoji jo i tip linkova koji nam slue za dopisivanje odnosno slanje email poruka. Kadanetko klikne na email link, program za pisanje poruka (npr., Outlook Express, Outlook, Thunderbird ili

Yahoo Mail) automatski otvara prazan dokument i u polje Toupisuje email adresu na koju se aljeporuka.


28/30

Email linku HTML kodu izgleda ovako: mailto:[email protected], gdje mailtodefinira tip linka,a [email protected] email adresu.

Kreiranje E-maillinka se radi na ovaj nain: (slika 25.):1. oznaiti tekst ili email adresu (npr. [email protected])1. u polje Linku Property inspectoruupisati mailto:email-adresa (mailto:[email protected]) i

pritisnuti tipku Enter2. kliknuti na ikonu Email Linku insertnoj traci i upisati tekst i email adresu

Slika 25. Nain kreiranja email linka (e-mail link)

17) Organiziranje mapa i dokumenata u DreamweaveruNakon to se definira web projekt (web site), Dreamweaver omoguava organiziranje i izradudokumenata (files), izradu novih mapa i podmapa (folders and subfolders) i dodavanje novih webstranica u paneli Fileskoja slui kao komandni centar isto kao i Windows Explorer u Windowsima.Akonije ve otvorena, Filespanelu moete otvoriti u izborniku Window>Files (ili Ctrl+F8).

Filespanela prikazuje dokumente koji se nalaze u lokalnoj korijenskoj mapi. (slika 26.). Takoerprikazuje i teinu svakog dokumenta (u KB ili MB), tip dokumenta (gif slika, jpg slika, HTML dokument iliCSS dokument), te podatak o tome kada je zadnji put odreeni dokument promijenjen.


29/30

Slika 26. Organizacija mapa i dokumenata u Filespaneli

Ukoliko elite vidjeti podmape ili dokumente unutar neke mape, dovoljno je kliknuti dvaput na naziv mapeili jedanput na znak +. Ako elite otvoriti neki HTML dokument kliknite dvaputa na njega i isti e seotvoriti u Dreamweaveru. Na isti nain se otvara npr. CSS, JS ili PHPdokument. Slike se ne mogu otvoritina ovaj nain ve se treba koristiti opcija povuci-i-ispusti (drag and drop)po principu odvlaenja

odreene slike iz panele Filesna povrinu HTMLdokumenta.

Napomena:

Ukoliko elite otvarati neke tipove dokumenata u odreenim programima, npr. slike u .gif ili .jpg formatu,

potrebno je u izborniku Edit>Preferences(Ctrl+U) u kategoriji File Types/Editorsodrediti program za odreeni tip

dokumenta (npr. Fireworks za sve slike u .jpg formatu). U Filespaneli se takoer mogu dodavati novi dokumenti

ili mape jednostavnim desnim klikom na miu i odabirom naredbe New File ili New Folder. Nakon toga se

u Filespaneli prikazuje predefinirani naziv novog dokumenta npr. untitled1.html. Dok je dokument jo oznaen

plavom bojom isti se moe preimenovati u neki drugi naziv npr. index.html(pazite da uvijek upiete ekstenziju

dokumentu - .html ili .htm)!


30/30

Documents

Adobe Dreamweaver CS3 - izrada stranice