Izrada web stranice u Dreamweaveru

lanak objavljen: 20. 01. 2009.

Napomena: 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. Brzi linkovi na odreeni dio sadraja stranice 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

Alati

Ispii lanak

1) Izrada web stranice u Dreamweaveru

Prije 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 za ugodan 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 podeavanja koje 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 <div> tag - u polje Maximum number of history steps upiite 50 ili 100 (korisno za opciju undo ukoliko se trebate vratiti nekoliko koraka unazad i ispraviti dokument) 3. U listi kategorija odaberite Invisible Elements i tada oznaite kvaicom Line Breaks 4. 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 .jpg formatu 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 Extension upiite .html, a pod Default Document Type (DTD) odaberite XHTML 1.0 Transitional 6. U listi Preview in Browser odaberite internet preglednik i pripadajuu tipkovniku kraticu u kojem ete lokalno pregledavati izgled web stranica (npr. tipkovnika kratica F12 e otvoriti trenutnu web stranicu 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 pomou izbornika View > Toolbars > Standard iView > Toolbars > Document 2. inspektor svojstava (Property inspector) i insertnu traku (Insert bar) pomou izbornika Window >Properties i Window > Insert 3. Panelu stilskih listi (CSS styles) pomou izbornika Window > CSS Styles, a panelu dokumenata (Files panel) 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 okvir prikazan 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 Internet preglednicima (npr. Internet Exploreru ili Firefoxu), kao i radi ispravne provjere HTML i CSS koda u posebnim programima koji provjeravaju ispravnost napisanog koda (sintaksu koda). S obzirom da Dremaweaver automatski ubacuje ispravan kod za odreeni tip dokumenta u zaglavlje HTML koda, ne trebate se brinuti o samom kodu i razlikama meu tipovima dokumenata 2. Ukoliko ste tek otvorili Dreamweaver po prvi put primjetit ete tzv. Splash stranicu (preduvodnu stranicu) koja s lijeva na desno prikazuje: popis zadnje koritenih dokumenata, mogunost odabira novog tipa stranice (HTML, ASP; PHP; CSS itd...) te mogunost odabira preddefiniranih uzoraka dizajna (CSS, stranica sa okvirima (frameset) itd... U naem sluaju dovoljno je kliknuti na HTML link u srednjem stupcu i otvorit e se novi (prazni) dokument.

2) Spremanje HTML dokumenta

Slika 2. Dijaloki okvir novog dokumenta (New Document)

Nakon otvaranja novog HTML dokumenta potrebno je taj dokument spremiti na hard disk ( File > Save

As) unutar mape koju smo definirali kao lokalnu korijesnku mapu (vidi uvod). Npr. ako se korijenska
mapa nalazi na hard disku C:\moja-web-stranica\ (gdje C oznaava hard disk, a moja-web-stranica naziv 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, smije sadravati slova (a-z), brojke (0-9), crticu (-) ili donju crticu (_) ,ali ne smije sadravati razmake ili 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 pregledniku

nazove index.html jer je veina web servera podeena da takvu web stranicu otvara kao prvu web stranicu. Ukoliko prvu web stranicu ne nazovete index.html ili index.htm web serveri nee otvoriti vau web stranicu ve e prikazati onaj poznati prozor The webpage cannot be found.

3) Naslov HTML dokumenta

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

4) Podeavanje osnovnih karakteristika web stranice

Kliknite na Page Properties gumb koji se nalazi na paneli Ispektora svojstava (Property inspector) ili odaberite izbornik Modify > Page Properties (vidi sliku 3. Izbornik Modify > Page Properties).

Slika 3. Izbornik Modify > Page Properties U dijalokom okviru Page properties mogue 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 stranici 2. Boja pozadine stranice (Background color) - ukoliko elite pozadina stranice moe biti u nekoj drugoj boji osim bijele, npr. crvena. uta ili plava. Takoer, pozadina web stranice moe biti i u obliku slike ili uzorka koji e se prikazivati ispod ostalih elemenata 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 i stranica prozora preglednika potrebno je ukloniti taj odmak upisivanjem odreenih dimenzija za lijevu, 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 mogu biti prikazani i u nekom drugom fontu. Linkovi mogu imati 4 vrste stanja: normalno stanje stanje prije klika na link (regular), posjeeno stanje stanje nakon klika na link (visited), aktivno stanje stanje u trenutku klika na link (active) i rollover stanje stanje prilikom prelaska pokazivaa preko linka 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 dokument

Unos teksta u Dreamweaver je vrlo jednostavan i vrlo slian ostalim tekstualnim editorima kao to je npr. MS Word. Dreamweaver u paneli Property inspector nudi najosnovnije alate za oblikovanje teksta kao to su: 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 na sredini stranice, a zatim pri vrhu, jer to nije mogue (osim u posebnim sluajevima, npr. kada se koriste apsolutno pozicionirani <div>elementi). Svaki paragraf koji elite napraviti u Dreamweaveru potrebno je odvojiti od drugog paragrafa klikom na tipkuEnter i tada zapoinjete pisanje novog paragrafa u novom retku (slika). Ukoliko elite unutar paragrafa prei u drugi red (ne u drugi paragraf) tada je potrebno kliknuti na tipke Shift + Enter na tipkovnici ili na izborniku odabratiInsert > HTML > Special Characters > Line Break.

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 blokovima podataka unutar HTML elemenata. Najosnovniji blok informacije je jednostavan paragraf, oznaen u HTML-u elementom paragrafa, kao to je ovaj: <p>Ovo je paragraf</p>

Kada u Dreamweaveru kreirate novi dokument i ponete tipkati tekst, tekst koji ste napisali nije uope oblikovan, kako je naznaeno sa rijei None u Format izborniku 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 - <p>, <h1>, i tako dalje.)

Slika 6. Formati teksta, paragrafa i naslova Kada pritisnete tipku Enter ili Return, kreira se novi paragraf, okruen elementom paragrafa > <p>, kao to je prikazano ranije, ali va novonastali paragraf jo nema primijenjen nikakav dizajn. Kada vai posjetitelji gledaju stranicu, stil fonta i veliine vaeg paragraf su odreeni prema postavkama i preferencijama njihovog web preglednika. U tom sluaju izgled vaeg paragrafa nee moda biti prikazan onako 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 Property

inspector (slika 7.)

Slika 7. Property inspector paragrafa

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 (<h1>) element oznaava naslov na najvioj razini i, prema tome, ima najveu vanost na web stranici; manji Heading 2 (<h2>) 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,

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. <p> za paragrafe, <h1> do <h6> za naslove i podnaslove, <ul> 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 (<h1>...<h6>)

Naslovi odreuju vanost informacije i pomau u organiziranju sadraja. Elementi naslova postoje u razliitim veliinama gdje <h1> oznaava najvei naslov, a <h6> 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 u paneli Properties inspectora oznaite odreenu veliinu naslova (slika 9.)

Slika 9. Definiranje naslova u paneli Properties Na vrh

8) Izrada i oblikovanje lista (<ul>, <li>)

Na web stranicama, liste su neophodne za prezentiranje grupa elemenata/predmeta/lanaka kao to su linkovi, usluge tvrtke ili pak niz uputa. HTML nudi mogunosti oblikovanja za osnovnih kategorija listi (slika 10.). Meu njima, dvije najee upotrebljavane liste su one oznaene tzv. tokom eng. bullet (nepobrojane liste - unordered list) i numerirane (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 Properties inspektoru odabere odreen tip liste: Nepobrojana lista (unordered list) kreira se upotrebom <ul> i <li> elemenata, npr.: <ul> <li>O nama</li> <li>Reference</li> <li>Ideje</li> <li>Kontakti</li> <li>Posao </li> </ul>

Pobrojana lista (ordered list) kreira se upotrebom <ol> i <li> elemenata, npr.: <ol> <li>O nama</li> <li>Reference</li> <li>Ideje</li> <li>Kontakti</li> <li>Posao </li> </ol>

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 web stranicama. 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 tim pismom, jer ga nemaju instaliranog na njihovom raunalu. Umjesto toga prikazat e im se stranica sa nekim predefiniranim pismom npr. Times New Roman ili Arial. Pismo e se dakle prikazati samo ako je isto instalirano na njihovom raunalu. Odabir pisma u Dreamweaveru Oznaite tekst ije pismo elite promijeniti. Kao u program za obradu teksta, moete kliknuti bilo gdje na vaoj web stranici, a zatim izaberite pismo za tekst koji ste napisali. (Ako ste kopirali tekst iz drugog programa, prvo ga kopirajte, a zatim oznaite tekst i odaberite pismo.) Ipak, izbornik pisma u Dreamweaveru nije ba slian izbornicima za odabir pisma u drugim programima za 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 posjetitelja ispravno prikae odreeno pismo na web stranici, posjetitelj treba imati isto to pismo instalirano na njegovom raunalu. Ukoliko ga nema, Internet preglednik e jednostavno zamijeniti taj font sa nekim drugim preglednikovim preddefiniranim fontom. Da biste imali odreenu kontrolu u procesu odabira pisma, moete odrediti listu pisama koji izgledaju slino kao prvi odabrani font (Arial, na primjer). Web preglednik vaeg posjetitelja provjerava da li je prvi font na listi instaliran na raunalu. Ako je, to je ono to va posjetitelj vidi kada pregledava vae web

Na vrh

stranice. Meutim, ako prvi font nije instaliran, web preglednik trai u popisu slijedei font koji je instaliran. Razni operacijski sustavi koriste razliite fontove, pa ove liste ukljuuju jedan font, koji je uobiajen 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 Property

inspectoru odaberite Edit Font List. (slika 11.)

Slika 11. Odabir pisma (font) Na vrh

10) Veliina pisma

Jedan od naina privlaenja korisnikove panje i fokusiranje na odreene dijelove stranice je koritenje razliitih veliina pisma. Ukoliko ne definirate veliinu pisma, tekst e biti prikazan prema preddefiniranoj veliini 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 veliinama. Dakle, ne moete biti 100% sigurni da e tekst na vaoj web stranici biti prikazan upravo u eljenoj veliini. Da biste promijenili veliinu teksta u Dreamweaveru, jednostavno ga oznaite i odaberite novu veliinu u paneli Property inspector (slika 12.). Ako ste odabrali broj tj. veliinu pisma u px (pixel je najmanja toka na ekranu; skraeno od picture element). moete upisati bilo koji broj u kuicu za unos ( Size) ili odabrati ve postojee veliine teksta. Dakle, za razliku od HTML-a, pomou CSS-a moete definirati bilo koju veliinu vaeg fonta.

Slika 12. Odabir veliine pisma (font size) Naravno, prilikom odreivanja veliine pisma, niste ogranieni samo na vrijednosti u pikselima (px). Popup 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. S

druge pak strane, Internet Explorer 6 i ranije verzije najpopularnijeg web preglednika ne dozvoljavaju korisnicima prilagoavanje veliine pisma koje je izraeno u pikselima. Na taj nain korisnici koji ne vide dobro ili iji monitori su postavljeni na vrlo visoke rezolucije (npr. 1600 x 1200px), nemaju mogunosti izmjene veliine pisma i prisiljeni su gledati tekstove u veliini koju ste vi definirali. Npr. ako ste odabrali 9px za veliinu teksta, veina korisnika nee moi proitati taj tekst i vaa stranica e biti potpuno neupotrebljiva za posjetitelje. Na sreu, u Internet Explorer 7 je mogue mijenjati veliinu pisma ija je veliina definirana u pikselima (tipka Ctrl + -/Ctrl ++ ili Ctrl + scroller na miu) 2. Em je relativna mjera, to znai da stvarna veliina moe varirati. Jedan em je jednak zadanoj veliini pisma (zadana veliina pisma je definirana u Page Properties okviru). Npr. ako je 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 omoguavate posjetiteljima da mogu mijenjati veliinu teksta. Moete koristiti piksele i em-ove zajedno. Moete veliinu glavnog fonta postaviti na 16px, a zatim upotrijebiti ems za druge dijelove stranice, npr.: ako je veliina naslova 2em onda je to zapravo 32px (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 se proporcionalno smanjiti ili poveati. 3. Postotak (%) je jo jedna relativna mjera veliine pisma. Ako ste odabrali veliinu fonta u postotku npr. 15% onda e taj tekst u web pregledniku biti prikazan proporcionalno u odnosu na osnovnu veliinu fonta ili preddefiniranu veliinu fonta u web pregledniku. Npr. ako je osnovna veliina fonta 16px, 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 koristi tzv.Color box koji 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 zatim odaberite 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 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 eli svratiti pozornost sa okolnih dijelova web stranice. Osim to se slika, u odnosu na ostale elemente, istie na 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 Dreamweaveru Slika se u HTML kodu prikazuje kao element <img> iji je glavni atribut src (source), koji definira putanju do slike na raunalu odnosno serveru. Npr. slijedei HTML kod govori web pregledniku da prikae sliku koja se zove skola.jpg, a koja se nalazi u mapi slike i koja ima slijedee dimenzije: irina - 800px i visina - 600px. <img src="slike/skola.jpg" width="800" height="600" />

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

Ubacivanje slike u Dreamweaveru je vrlo jednostavno: odaberite izbornik Insert > Image (Ctrl+Alt+I) ili na insertnoj traci odaberite ikonicu slike (slika 15.). Slika se moe ubaciti u dokument i jednostavnom povuci-ispusti tehnikom (drag-and-drop) odabirom slike u paneli Files i odvlaenjem iste na povrinu dokumenta.

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 do slike 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. 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>Select

All iEdit>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 dokumenta bez 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? 1. bzo i jednostavno ureivanje slika 2. odlina integracija sa Dreamweaverom 3. korisni i mnogobrojni stilovi i filteri 4. mogunost snimanja odreenih naredbi i/ili akcija, te izvravanje istih 5. 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. Odabir programa 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, a Photoshop 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. Resample slike - 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 i odabrati 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 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)sve dok je dokument u kojem se nalazi slika otvoren.

Panela Property Inspector za formatiranje slike Nakon to ste ubacili sliku i oznaili je na stranici, njezina svojstva moete oblikovati na paneli Property

inspector(slika 18.)

Slika 18. Ureivanje slike pomou Property inspectora Optimiziranje slika za prikaz na webu Optimiziranje slika odnosno saimanje (komprimiranje) teine slike radi breg downloada na raunalo se vri na slijedei nain: 1. kliknite na ikonu Optimize na Property Inspector-u ili u izborniku Modify > Image > Optimize. Otvara se dijaloki okvir Image preview 2. odaberite odreeni grafiki format i stupanj kompresije 3. nakon to ste podesili odreene parametre slike, kliknite na gumb OK i 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

14) Unos i oblikovanje flash animacija

Dreamweaver 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 programu za 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. Flash tehnologija 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 nekoliko vanih napomena u vezi koritenja flash animacija: 1. posjetitelji vaih web stranica trebaju imati na svom raunalu instaliran tzv plug-in program u naem 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, su mnogo tee od obine web stranice i stoga se sporije uitavaju na posjetiteljevo raunalo. Iako veina korisnika danas koristi brze veze na Internet (npr. ADSL, DSL, kablovska, satelitska itd...) postoji mnogo korisnika koji imaju obian dial-up pristup Internetu i oni e zasigurno trebati mnogo vie vremena za otvaranje web stranice koja ima flash animacije ili velike video zapise 3. 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 prave uznemiravajue 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 napravljeni flash 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 stranicu Flash dokument se ubacuje u web stranicu na slijedei nain (slika 19.): 1. odaberite na izborniku Insert > Media >Flash 2. odaberite u dijalokom okviru Select File dokument koji ima nastavak .swf 3. kliknite na gumb OK

Slika 19. Unos flash dokumenta na stranicu Dreamweaver e automatski ubaciti flash dokument, odrediti e dimenzije dokumenta (irinu i visinu) i generirati e odgovarajui HTMl kod koji je potreban za ipravno prikazivanje flash animacije na web stranici. Nakon ubacivanja Flash dokumenta u web stranicu, isti e biti prikazan kao pravokutnik sive boje. U Dremaweaveru je mogue direktno gledati flash dokumente i to na ovaj nain (Slika 20. - broj 9): 1. oznaite flash dokument 2. kliknite na gumb Play koji se nalazi u Property inspectoru i animacija e se prikazati 3. Na isti nain se animacija moe zaustaviti klikom na gumb Stop u Property inspektoru

Slika 20. Ureivanje flash dokumenta pomou Property inspectora Na vrh

15) Ubacivanje Flash videa u web stranicu

Flash player moe 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 webu zahvaljujui socijalnim mreama kao to je YouTube. Za razliku od drugih konkurentskih video formata kao to su Quick Time ili Windows Media Player, Flash video e zasigurno moi gledati veina posjetitelja vaih web stranica bez potrebe za skidanjem i instaliranjem dodatnog programa za gledanje video dokumenata. Dreamweaver vrlo jednostavno moe ubaciti flash video dokument u web stranicu na slian nain kao to ubacuje i flash animaciju (pomou izbornika Insert > Media > Flash Video). U nekoliko klikova miom Dreamweaver 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 Creative Suite 3. Ekstenzija za Flash video je .flv Napomena: Ukoliko elite prikazivati flash video na vaoj web stranici, potrebno je prebaciti na web server i dodatna tri dokumenta koje je Dreamweaver automatski kreirao. To su: 1. JavaScript dokument 2. FLVPayer_progressive.swf (video) 3. Flash skin .swf dokument (izgled flash playera sa kontrolama) Na vrh

16) Koritenje linkova (poveznica) na web stranicama

Link ili poveznica je dio koda koji web pregledniku daje naredbu na koji nain doi od stranice A do stranice B. Ono to je bitno naglasiti je injenica da linkovi ne poznaju pojam ogranienja u virtualnom prostoru 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 koja se nalazi na serveru koji je smjeten u Novom Zelandu. HTML oznaka koja je zasluna za ovakvu interaktivnost zove se anchor tag (sidro) i u HTML-u se oznaava kao <a> (slika 21.).

Slika 21. Anatomija link taga Svaka web stranica ima svoju jedinstvenu web adresu koja se zove URL Uniform Resource

Locator (Jedinstveni lokator resursa). Npr., ako elite otvoriti stranicu on-line trgovine Algoritam utipkat
ete 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 link uvijek poinje sa oznakom http:// i koristi se za povezivanje sa stranicama koje nisu smjetene unutar 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 na postojeu, trenutnu stranicu. Ako se tranica nalazi u istoj mapi unutar web site-a, link na povezanu stranicu je jednostavno naziv samog dokumenta na koji se linka: npr. katalog.html . Ovakav tip linkova izbacuje cijeli URL naziv web dokumenta http://www.algoritam.hr , a ostavlja samo naziv dokumenta - 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 i kod prethodno opisanog tipa linka. Meutim, u ovom sluaju putanja do stranice je relativna u odnosu na korijensku mapu mapu koja sadri naslovnicu (Home Page) i sve ostale stranice, mape i dokumente koji se nalaze na stranicama. Ovaj tip linka ima ispred naziva web dokumenta oznaku / (forward-slash) - primjer: /katalog.html

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) i odabirom odreenog dokumenta u dijalokom okviru Select file 2. pomou ikone Point to file jednostavnim klikom na ikonu i odvlaenjemdo HTML dokumenta u paneli Files 3. pomou ikone Browse for file jednostavnim klikom na ikonu i odabirom odreenog dokumenta u dijalokom okviru Select file 4. klikom na ikonu Hyperlink u insertnoj traci

Slika 22. Povezivanje dviju stranica

Slika 23. Nain kreiranja linka Kreiranje imenovanog linka (Named Anchor) Linkovi u veini sluajeva slue za povezivanje dviju stranica. Meutim, ponekad postoji i potreba za povezivanjem tono odreenog dijela na samoj stranici. U tom sluaju koristimo poseban tip linka -

named-anchor koji slui za prebacivanje na tono odreeno mjesto na samoj stranici. Kreiranje named-anchora se vri u tri koraka (slika 24.):
1. pozicionirati kursor na odredino mjesto 2. 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 Link u Property Inspektoru upisati znak # zajedno sa nazivom imenovanog linka (naslov).

Slika 24. Nain kreiranja imenovanog linka (named-anchor) Kreiranje E-mail linka Osim regularnih linkova koji nam slue za povezivanje stranica ili za povezivanje odreenih mjesta na samoj stranici, postoji jo i tip linkova koji nam slue za dopisivanje odnosno slanje email poruka. Kada netko klikne na email link, program za pisanje poruka (npr., Outlook Express, Outlook, Thunderbird ili Yahoo Mail) automatski otvara prazan dokument i u polje To upisuje email adresu na koju se alje poruka.

Email link u HTML kodu izgleda ovako: mailto:info@stedas.hr, gdje mailto definira tip linka, a info@stedas.hrodreuje email adresu. Kreiranje E-mail linka se radi na ovaj nain: (slika 25.): 1. oznaiti tekst ili email adresu (npr. info@stedas.hr) 1. u polje Link u Property inspectoru upisati mailto:email-adresa (mailto:info@stedas.hr) i pritisnuti tipku Enter 2. kliknuti na ikonu Email Link u insertnoj traci i upisati tekst i email adresu

17) Organiziranje mapa i dokumenata u Dreamweaveru

Nakon to se definira web projekt (web site), Dreamweaver omoguava organiziranje i izradu dokumenata (files), izradu novih mapa i podmapa (folders and subfolders) i dodavanje novih web stranica u paneli Files koja slui kao komandni centar isto kao i Windows Explorer u Windowsima. Ako nije ve otvorena, Files panelu moete otvoriti u izborniku Window>Files (ili Ctrl+F8).

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

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

Slika 26. Organizacija mapa i dokumenata u Files paneli Ukoliko elite vidjeti podmape ili dokumente unutar neke mape, dovoljno je kliknuti dvaput na naziv mape ili jedanput na znak +. Ako elite otvoriti neki HTML dokument kliknite dvaputa na njega i isti e se otvoriti u Dreamweaveru. Na isti nain se otvara npr. CSS, JS ili PHP dokument. Slike se ne mogu otvoriti na ovaj nain ve se treba koristiti opcija povuci-i-ispusti (drag and drop) po principu odvlaenja odreene slike iz panele Filesna povrinu HTML dokumenta.
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/Editors odrediti program za odreeni tip dokumenta (npr. Fireworks za sve slike u .jpg formatu). U Files paneli 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 Files paneli 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)!

Autorska prava