Izrada web stranice u Dreamweaveru

Ovaj članak je napisan za početnike, odnosno sve one koji se po prvi put susreću sa programom za izradu

i oblikovanje web stranica Dreamweaver. Iako je ovdje objašnjen osnovni rad sa aktualnom

inačicom Dreamweaver CS3 većina napomena i savjeta se može primjeniti i u prijašnjim 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. Veličina pisma

• 11. Boja pisma

• 12. Unos i oblikovanje slika

• 13. Uređivanje slika

• 14. Unos flash animacija

• 15. Ubacivanje Flash videa u web stranicu

• 16. Korištenje linkova na web stranici

• 17. Organiziranje mapa i dokumenata u Dreamweaveru

Alati

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 način rada. U nastavku ću nabrojati najbitnije opcije koje treba podesiti za ugodan rad.

1. Odaberite u izborniku Edit > Preferences (vidi sliku 1. – Dijaloški okvir Preferences) - otvorit će se dijaloški okvir koji u lijevom stupcu prikazuje listu svih kategorija i opcija podešavanja koje omogućavaju prilagođavanje programa osobnim zahtjevima i preferencijama

2. Kliknite u listi kategorija na General, a u desnom stupcu označite slijedeće: - kućicu kvačicom gdje piše “Use CSS instead of HTML tags ” - označite „Centering: Use <div> tag “ - u polje „ Maximum number of history steps “ upišite 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 označite kvačicom „Line Breaks“ 4. U listi kategorija odaberite File types/editors, i odaberite program kojim ćete otvarati i editirati

određeniu vrstu dokumenta izravno iz Dreamweavera (npr. uobičajeno je da sve slike u .gif ili .jpg formatu otvaramo i uređujemo u grafičkim programima kao što su Adobe Photoshop ili Fireworks)

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

6. U listi Preview in Browser odaberite internet preglednik i pripadajuću tipkovničku kraticu u kojem ćete lokalno pregledavati izgled web stranica (npr. tipkovnička kratica F12 će otvoriti trenutnu web stranicu u Internet Exploreru, a tipkovnička kratica Ctrl + F12 će otvoriti Firefox

slika 1. - Dijaloški okvir Preferences

Nadalje, otvorite slijedeće prozore i panele:

1. Standarnu traka alata i traku alata dokumenta pomoću izbornika View > Toolbars > Standard iView > Toolbars > Document

2. inspektor svojstava (Property inspector) i insertnu traku (Insert bar) pomoću izbornika Window >Properties i Window > Insert

3. Panelu stilskih listi (CSS styles) pomoću izbornika Window > CSS Styles, a panelu dokumenata (Files panel) pomoću izbornika Window > Files

Nakon definiranja web site-a (web projekta) možete započeti sa izradom web stranice.

Postoje dva načina otvaranja novog dokumenta:

1. Odaberite u izborniku File > New > Blank Page > HTML (Ctrl + N) i otvorit će se dijaloški okvir prikazan na slici 2. Dijaloški okvir novog dokumenta (New Document) a. Kategorija dokumenta određuje da li ćete odabrati novu (praznu) stranicu, prazan predložak,

stranicu iz gotovog predloška ili stranicu iz uzorka

b. Tip stranice određuje vrstu dokumenta (HTML za web dokumente, CSS za stilske liste, ...)

c. Izgled HTML dokumenta određuje preddefinirane formate web stranica (npr. 1-stupčani format stranice sa fiksnim dimenzijama u px, 2-stupčani 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 određeni tip dokumenta u zaglavlje HTML koda, ne trebate se brinuti o samom kodu i razlikama među 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 korištenih dokumenata, mogućnost odabira novog tipa stranice (HTML, ASP; PHP; CSS itd...) te mogućnost odabira preddefiniranih uzoraka dizajna (CSS, stranica sa okvirima (frameset) itd... U našem slučaju dovoljno je kliknuti na HTML link u srednjem stupcu i otvorit će se novi (prazni) dokument.

Slika 2. Dijaloški okvir novog dokumenta (New Document)

2) Spremanje HTML dokumenta 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“ označava 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

sadržavati slova (a-z), brojke (0-9), crticu (-) ili donju crticu (_) ,ali ne smije sadržavati razmake ili

specijalne simbole (&,%,/,?...) zato što neki web serveri i web preglednici ne podržavaju iste. Naravno,

ukoliko radite u programskim jezicima php, asp ili jsp tada će nazivi vaših 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 većina web servera podešena da takvu web stranicu otvara kao prvu web

stranicu. Ukoliko prvu web stranicu ne nazovete index.html ili index.htm web serveri neće otvoriti vašu 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 upišite naslov

HTML dokumenta. Naslov HTML dokumenta će se prkazati na naslovnoj traci Internet Explorera ili

Firefoxa i treba biti deskriptivan, jasan i jednoznačan – treba u nekoliko riječi opisati glavnu temu web stranice na kojoj se nalazite, npr. „Reference“ ili „O nama“.

4) Podešavanje 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 dijaloškom okviru Page properties moguće je odrediti osnovne karakteristike (svojstva) web stranice (vidi sliku 4. Dijaloški okvir osnovnih karakteristika stranice (Page Properties): 1. Izgled, veličina 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 može biti u nekoj drugoj boji osim bijele, npr. crvena. Žuta ili plava.

Također, pozadina web stranice može 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 između sadržaja stranice i stranica prozora preglednika potrebno je ukloniti taj odmak upisivanjem određenih dimenzija za lijevu, desnu, gornju i donju marginu

4. Veličina, boja i vrsta pisma za linkove - linkovi mogu biti prikazani u istom fontu kao što je i tekst na stranici (ista boja i veličina), ali mogu biti prikazani i u nekom drugom fontu. Linkovi mogu imati 4 vrste stanja: normalno stanje – stanje prije klika na link (regular), posjećeno stanje – stanje nakon klika na link (visited), aktivno stanje – stanje u trenutku klika na link (active) i rollover stanje – stanje prilikom prelaska pokazivača preko linka

5. Veličina, boja i vrsta pisma za tipove naslova, itd...

Slika 4. Dijaloški okvir osnovnih karakteristika stranice (Page Properties)

Na vrh

5) Unos teksta u HTML dokument Unos teksta u Dreamweaver je vrlo jednostavan i vrlo sličan 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, veličina 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 omogućava upisivanje teksta. (slika 5. Unos teksta u dokument) Unos teksta u HTML dokument počinje na vrhu stranice (header) i završava na dnu stranice (footer). Jednostavno počnite upisivati tekst koristeći tipkovnicu. Znači, ne možete početi dodavati tekst prvo na

sredini stranice, a zatim pri vrhu, jer to nije moguće (osim u posebnim slučajevima, 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 započinjete pisanje novog paragrafa u novom retku (slika). Ukoliko želite unutar paragrafa preći 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 pišete npr. Pismo u cilju da si pomognete organizirati misli u jasne,

jednostavne i vezane jedinice, na isti se način organizira sadržaj na web stranicama u blokovima podataka unutar HTML elemenata. Najosnovniji blok informacije je jednostavan paragraf, označen u

HTML-u elementom paragrafa, kao što je ovaj:

<p>Ovo je paragraf</p>

Kada u Dreamweaveru kreirate novi dokument i počnete tipkati tekst, tekst koji ste napisali nije uopće oblikovan, kako je naznačeno sa riječi None u Format izborniku na lijevoj strani, Property inspektora.

(slika 6.) (oznaka Nonenije HTML oznaka, to samo znači da Vaš tekst nije okružen 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, okružen elementom paragrafa > <p>, kao

što je prikazano ranije, ali vaš novonastali paragraf još nema primijenjen nikakav dizajn. Kada vaši

posjetitelji gledaju stranicu, stil fonta i veličine vašeg paragraf su određeni prema postavkama i preferencijama njihovog web preglednika. U tom slučaju izgled vašeg paragrafa neće možda biti prikazan

onako kako ste to i željeli.

Panela za formatiranje teksta (paragraf, naslov,lista) Nakon što ste označili tekst na stranici njegova svojstva možete oblikovati na paneli Property inspector (slika 7.)

Slika 7. Property inspector paragrafa

Napomena:

Odvajanje strukture sadržaja (HTML) od prezentacije (CSS) (slika 8.)

Oblikovanje teksta i elemenata na stranici nije isključivo stvar vizualnog dizajna i estetike. Mnoge opcije

formatiranja daju strukturu web stranici, pružajući vrijedan uvid u organizaciju sadržaja na stranici. Na

primjer,Heading 1 (<h1>) element označava naslov na najvišoj razini i, prema tome, ima najveću važnost na web

stranici; manji Heading 2 (<h2>) element predstavlja naslov neznatno niže važnosti – dakle podnaslov. Svaka

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

sadržaj u logičke i razumljive blokove informacija. Struktura stranice se u stvari odnosi na organiziranje sadržaja,

a ne na njegov izgled. Svrha HTMLa je dati strukturu dokumentu odnosno značenje sadržaju. U stvari, za neke

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

sadržaj i njegovo značenje. 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 omogućavaju naprednije tehnike oblikovanja vaših

web stranica, ali i jednostavne promjene i održavanje sadržaja.

Na vrh

7) Izrada i oblikovanje naslova (<h1>...<h6>)

Naslovi određuju važnost informacije i pomažu u organiziranju sadržaja. Elementi naslova postoje u različitim veličinama gdje <h1> označava najveći naslov, a <h6> najmanji. (slika 8. Naslovi - h1 do h6)

Slika 8. Naslovi - h1 do h6

Naslov se definira na isti način kao što se definira i paragraf – označite određeni dio teksta i u paneli Properties inspectora označite određenu veličinu 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 mogućnosti oblikovanja za osnovnih kategorija listi (slika 10.). Među njima, dvije najčešće upotrebljavane liste su one označene tzv. „točkom“ – 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 način da se prvo napravi struktura liste, označi se, a zatim se u Properties inspektoru

odabere određen 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>

Na vrh

9) Oblikovanje pisma (Font formatting) Oblikovanje pisma za Web je vrlo slično oblikovanju pisma u programima za obradu teksta kao što je npr.

Word. Nažalost, kao i u Wordu, Dreamweaver ima slične nedostatke u pogledu prikaza pisma na web

stranicama. Naime, ukoliko želite svoju web stranicu ukrasiti nekim posenim i neuobičajenim fontom (npr. Eurostile bold), postoji velika vjerojatnost da vaši prijatelji neće vidjeti stranicu prikazanu sa tim

pismom, jer ga nemaju instaliranog na njihovom računalu. 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 računalu.

Odabir pisma u Dreamweaveru Označite tekst čije pismo želite promijeniti. Kao u program za obradu teksta, možete kliknuti bilo gdje na

vašoj web stranici, a zatim izaberite pismo za tekst koji ste napisali. (Ako ste kopirali tekst iz drugog

programa, prvo ga kopirajte, a zatim označite tekst i odaberite pismo.) Ipak, izbornik pisma u Dreamweaveru nije baš sličan 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 možete odabrati samo jedno pismo, npr. Helvetica. To je zapravo vrlo korisno, iz razloga već navedenog – ukoliko želite da Internet preglednik posjetitelja

ispravno prikaže određeno pismo na web stranici, posjetitelj treba imati isto to pismo instalirano na

njegovom računalu. Ukoliko ga nema, Internet preglednik će jednostavno zamijeniti taj font sa nekim drugim preglednikovim preddefiniranim fontom.

Da biste imali određenu kontrolu u procesu odabira pisma, možete odrediti listu pisama koji izgledaju

slično kao prvi odabrani font (Arial, na primjer). Web preglednik vašeg posjetitelja provjerava da li je prvi font na listi instaliran na računalu. Ako je, to je ono što vaš posjetitelj vidi kada pregledava vaše web

stranice. Međutim, ako prvi font nije instaliran, web preglednik traži u popisu slijedeći font koji je

instaliran. Razni operacijski sustavi koriste različite fontove, pa ove liste uključuju jedan font, koji je uobičajen na Windows-ima i druge, sličnog izgleda fontove koji su zajednički za Macintosh računala. Arial,

na primjer, se nalazi na svim Windows računalima, dok je na Macovima sličan font – Helvetica.

Dreamweaver dolazi sa šest unaprijed definiranih listi fontova "prvi izbor, drugi izbor, treći izbor". Naravno, moguće je definirati vlastite fontove odnosno liste fontova koje želite koristiti na vašim web

stranicama i to na slijedeći način:

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) Veličina pisma Jedan od načina privlačenja korisnikove pažnje i fokusiranje na određene dijelove stranice je korištenje

različitih veličina pisma. Ukoliko ne definirate veličinu pisma, tekst će biti prikazan prema preddefiniranoj

veličini koju prikazuje posjetiteljev web preglednik: dakle, u većini današnjih web preglednika to je 16px. Međutim, ne samo da korisnici u svojem web pregledniku mogu mijenjati tu predefiniranu veličinu pisma

(npr. Internet Explorer: View>Text Size), već i različiti operativni sustavi prikazuju tekst u različitim

veličinama. Dakle, ne možete biti 100% sigurni da će tekst na vašoj web stranici biti prikazan upravo u

željenoj veličini.

Da biste promijenili veličinu teksta u Dreamweaveru, jednostavno ga označite i odaberite novu veličinu u paneli Property inspector (slika 12.). Ako ste odabrali broj tj. veličinu pisma u px (pixel je najmanja točka

na ekranu; skraćeno od „picture element“). možete upisati bilo koji broj u kućicu za unos (Size) ili

odabrati već postojeće veličine teksta. Dakle, za razliku od HTML-a, pomoću CSS-a možete definirati bilo koju veličinu vašeg fonta.

Slika 12. Odabir veličine pisma (font size)

Naravno, prilikom određivanja veličine pisma, niste ograničeni samo na vrijednosti u pikselima (px). Pop-up izbornik (na desnoj strani izbornika Size) omogućava vam odabir piksela, točaka, inča, centimetara,

milimetara, ems-a ili postotka. Neki od ovih mjernih sustava nije namijenjena za prikaz na monitorima.

Najpopularnije mogućnosti su: 1. Pixeli se koriste kada želimo imati potpunu kontrolu nad izgledom web stranice odnosno kada

želimo da je veličina 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 prilagođavanje veličine pisma koje je izraženo u pikselima. Na taj način korisnici koji ne vide dobro ili čiji monitori su postavljeni na vrlo visoke rezolucije (npr. 1600 x 1200px), nemaju mogućnosti izmjene veličine pisma i prisiljeni su gledati tekstove u veličini koju ste vi definirali. Npr. ako ste odabrali 9px za veličinu teksta, većina korisnika neće moći pročitati taj tekst i vaša stranica će biti potpuno neupotrebljiva za posjetitelje. Na sreću, u Internet Explorer 7 je moguće mijenjati veličinu pisma čija je veličina definirana u pikselima (tipka Ctrl + -/Ctrl ++ ili Ctrl + scroller na mišu)

2. Em je relativna mjera, što znači da stvarna veličina može varirati. Jedan em je jednak zadanoj veličini pisma (zadana veličina pisma je definirana u Page Properties okviru). Npr. ako je

predefinirana veličina pisma 16 piksela, 1em znači da je tekst veličine 16px, 2ema je dvaput toliko, znači 32px itd... Prednost definiranja veličine pisma u em-ovima je u tome što tada omogućavate posjetiteljima da mogu mijenjati veličinu teksta. Možete koristiti piksele i em-ove zajedno. Možete veličinu glavnog fonta postaviti na 16px, a zatim upotrijebiti ems za druge dijelove stranice, npr.: ako je veličina naslova 2em onda je to zapravo 32px (base font 16px x 2em). Ako mislite da je veličina tekstova na stranici pre mala ili prevelika, možete jednostavno promijeniti veličinu osnovnog fonta na stranici, a svi ostali naslovi i tekst će se proporcionalno smanjiti ili povećati.

3. Postotak (%) je još jedna relativna mjera veličine pisma. Ako ste odabrali veličinu fonta u postotku npr. 15% onda će taj tekst u web pregledniku biti prikazan proporcionalno u odnosu na osnovnu veličinu fonta ili preddefiniranu veličinu fonta u web pregledniku. Npr. ako je osnovna veličina fonta 16px, a naslov je definiran kao 120% tada će naslov zapravo biti prikazan u veličini od 19,2px.

Na vrh

11) Boja pisma Većina 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 označite tekst, kliknite na kućicu za odabir boje (u paneli Property inspector) i zatim

odaberite određenu boju.

Slika 13. Odabir boje pisma (font color)

Savjet:

Dremaweaver nudi još jednu vrlo korisnu opciju kada je u pitanju odabir boje: možete, npr. odabrati Color

pickeru Color box-u i zatim odabrati bilo koju boju sa cijele površine vašeg ekrana. Na ovaj način možete vrlo

brzo i precizno određivati 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, većina web dokumenata) danas sadržava barem jednu sliku kojom se želi

svratiti pozornost sa okolnih dijelova web stranice. Osim što se slika, u odnosu na ostale elemente, ističe na stranici, ona zaista ponekad, govori više od 1000 riječi. (slika 14.)

Slika 14. Da li trebam još nešto reći 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 računalu odnosno serveru. Npr. slijedeći HTML kod govori web pregledniku da prikaže

sliku koja se zove „skola.jpg“, a koja se nalazi u mapi „slike“ i koja ima slijedeće 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 može ubaciti u dokument i jednostavnom

„ povuci-ispusti“ tehnikom (drag-and-drop) odabirom slike u paneli Files i odvlačenjem iste na površinu

dokumenta.

Slika 15. Ubacivanje slike u dokument

Napomena:

Sve slike koje želimo prikazati na web stranici trebaju biti spremljene u jednom od slijedećih grafičkih formata:

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

pregledniku.

Napomena:

Prije ubacivanja slike u dokument poželjno je spremiti web dokument unutar lokalne korijenske mape koja je

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

mape odnosno jedne od podmapa (u našem slučaju to je mapa koja se zove „slike“). Ako slika nije spremljena

unutar lokalne korijenske mape definirane u web projektu, Dreamweaver ne može odrediti ispravnu putanju do

slike i ista se zato neće prikazati unutar Dreamweavera. Nadalje, ukoliko ste naziv slike promijenili, a ista nije

spremljena unutar korijenske mape, Deamweaver neće ispravno povezati tu sliku sa dokumentom i ista se neće

prikazati u web dokumentu.

No, Dreamweaver ne bi bio Dreamweaver da nam ne pomaže 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 naše korijenske mape. Naravno, odgovorit ćemo da želimo kopirati sliku i ista će se

tada prikazati u dokumentu.

Savjet:

Dremaweaver CS3 nam omogućava direktno kopiranje ili ubacivanje slika iz Fireworksa ili Photoshopa. Ako npr.

ubacujemo sliku koja ima .psd ekstenziju, Dreamweaver će otvoriti dijaloški okvir (Image Preview) i ponuditi nam

spremanje slike na određenu lokaciju na disku i u jedan od mogućih grafičkih formata za prikaz na webu - .gif,

.jpg ili .png. Isto tako, možemo jednostavnim kopiranjem slike iz Fireworksa (odabirom Select>Select

All iEdit>Copy) ubaciti sliku u Dreamweaver (odabirom Edit>Paste). Vrlo korisno!

Na vrh

13) Uređivanje slike u Dreamweaveru

Dreamweaver nudi nekoliko alata za brzo i jednostavno uređivanje 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 grafički program za obradu i optimizaciju slika za prikaz na

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

Dreamweaverom.

Btw., Fireworks je definitivno moj najomiljeniji i jedini grafički program za obradu slika za web. Zašto?

1. bzo i jednostavno uređivanje slika

2. odlična integracija sa Dreamweaverom

3. korisni i mnogobrojni stilovi i filteri

4. mogućnost snimanja određenih naredbi i/ili akcija, te izvršavanje istih

5. i za kraj – dugogodišnji rad, a možda i subjektivni dojam također igraju ulogu u izboru omiljenog grafičkog alata

Uz pomoć ugrađenog alata Dreamweaver nam omogućava slijedeće opcije uređivanja slike: (slika 17.)

1. Uređivanje slike u grafičkom 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 vrši pomoću izbornika Edit > Preferences - File types/Editors. Moguće je odabrati više grafičkih programa za određene grafičke formate (npr. Fireworks za .png, a Photoshop za .gif ili .jpg).

2. Mijenjanje težine 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 veličine slike (Resample image) 5. Namještanje kontrasta i svjetline slike (Brightness and Contrast) 6. Izoštravanje slike (Sharpen image)

Slika 17. Uređivanje slike direktno u Dreamweaveru pomoću dodatnih alata u Property inspectoru

Ukoliko želite brzo promijeniti karakteristike slike pomoću nabrojanih opcija dovoljno je označiti sliku i

odabrati određeni alat za brzu promjenu karakteristika slike.

Npomena:

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

ukoliko smanjite sliku u Dreamweaveru, a zatim ju kasnije želite povećati slika će biti slabije kvalitete. Zato je

bitno napraviti kopiju slike, a zatim raditi sve promjene na slici. U tom će slučaju originalna slika ostati

nepromijenjena i zadržat će svoju prvotnu kvalitetu.

Sve promjene koje radite na slici pomoću ovih alata mogu se povratiti pomoću 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 označili je na stranici, njezina svojstva možete oblikovati na paneli Property inspector(slika 18.)

Slika 18. Uređivanje slike pomoću Property inspectora

Optimiziranje slika za prikaz na webu

Optimiziranje slika odnosno sažimanje (komprimiranje) težine slike radi bržeg downloada na računalo se vrši na slijedeći način: 1. kliknite na ikonu Optimize na Property Inspector-u ili u izborniku Modify > Image > Optimize. Otvara

se dijaloški okvir Image preview 2. odaberite određeni grafički format i stupanj kompresije

3. nakon što ste podesili određene 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 način zadržati sve

karakteristike originalnu slike odnosno njezinu kvalitetu, jasnoću i čistoću.

Na vrh

14) Unos i oblikovanje flash animacija Dreamweaver omogućava jednostavno i brzo umetanje animacija u web stranicu (npr. banner, intro animacija, flash video i sl.). Flash animacije se najčešće rade u Adobe Flash programu – programu

za vektorsku grafiku i animacije. Flash dokumenti imaju najčešće 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 konačnici može proizvesti visoko kvalitetne animacije ili slike relativno malih težina.

Prije nego što vam pokažem na koje se sve načine može ubaciti flash u web stranicu, postoji nekoliko

važnih napomena u vezi korištenja flash animacija:

1. posjetitelji vaših web stranica trebaju imati na svom računalu instaliran tzv plug-in program – u našem slučaju je to Flash player (dakle program koji omogućava gledanje animacija u flashu)

2. flash animacije, a pogotovo web stranice koje su napravljene u cijelosti u Flash tehnologiji, su mnogo teže od obične web stranice i stoga se sporije učitavaju na posjetiteljevo računalo. Iako većina korisnika danas koristi brze veze na Internet (npr. ADSL, DSL, kablovska, satelitska itd...) postoji mnogo korisnika koji imaju običan dial-up pristup Internetu i oni će zasigurno trebati mnogo više 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 mogućnosti programa i prave uznemiravajuće i oku neugodne svjetlucave i bljeskajuće efekte koji korisnika u konačnici 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 računalu, možete 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 slijedeći način (slika 19.): 1. odaberite na izborniku Insert > Media >Flash 2. odaberite u dijaloškom 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 odgovarajući 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 moguće direktno gledati flash dokumente i to na ovaj način (Slika 20. - broj 9):

1. označite flash dokument 2. kliknite na gumb Play koji se nalazi u Property inspectoru i animacija će se prikazati 3. Na isti način se animacija može zaustaviti – klikom na gumb Stop u Property inspektoru

Slika 20. Uređivanje flash dokumenta pomoću Property inspectora

Na vrh

15) Ubacivanje Flash videa u web stranicu Flash player može 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

zahvaljujući socijalnim mrežama kao što je YouTube. Za razliku od drugih konkurentskih video formata kao što su Quick Time ili Windows Media Player, Flash video će zasigurno moći gledati većina posjetitelja

vaših web stranica bez potrebe za skidanjem i instaliranjem dodatnog programa za gledanje video

dokumenata. Dreamweaver vrlo jednostavno može ubaciti flash video dokument u web stranicu – na sličan način kao

što ubacuje i flash animaciju (pomoću izbornika Insert > Media > Flash Video). U nekoliko klikova mišom

Dreamweaver ubacuje video sa svim potrebnim kontrolama za pokretanje i gledanje flash videa kao što su npr.: start, stop, pauza i kontrola jačine zvuka.

Napomena:

Za izradu flash videa je potreban određeni 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 vašoj 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) Korištenje linkova (poveznica) na web stranicama Link ili poveznica je dio koda koji web pregledniku daje naredbu na koji način doći od stranice A do

stranice B. Ono što je bitno naglasiti je činjenica da linkovi ne poznaju pojam ograničenja u virtualnom prostoru tj. moguće je povezati dvije stranice koje se fizički nalaze na različitim krajevima svijeta. Npr.

vaša web stranica se nalazi na serveru koji je smješten u Hrvatskoj i koja je povezana sa stranicom koja

se nalazi na serveru koji je smješten u Novom Zelandu. HTML oznaka koja je zaslužna za ovakvu interaktivnost zove se anchor tag („sidro“) i u HTML-u se označava 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 slijedeću web adresu u adresnu traku preglednika: http://www.algoritam.hr

Postoje tri vrste linkova:

1. absolutni (absolute) - link koji označava potpunu i jedinstvenu web adresu za određenu web stranicu. Absolutni link uvijek počinje sa oznakom http:// i koristi se za povezivanje sa stranicama koje nisu smještene unutar vaše web stranice - primjer: http://www.algoritam.hr/katalog.html

2. relativni u odnosu na dokument (document-relative) -link daje naredbu web pregledniku gdje mora potražiti povezanu web stranicu u odnosu na postojeću, 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 određenoj stranici unutar istog web site-a, slično kao i kod prethodno opisanog tipa linka. Međutim, u ovom slučaju putanja do stranice je relativna u odnosu na korijensku mapu – mapu koja sadrži 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 slijedećih dijelova:

1) http:// - HyperTextTransferProtocol - protokol kojim je definirana komunikacija između web servera i web

preglednika u cilju povezivanja i prikazivanja web stranica

2) www.algoritam.hr - ovo je adresa web servera na kojem su smještene web stranice. WWW je inače 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 vrši na slijedeće načine: 1. označite tekst ili dio teksta koji želite povezati sa drugom stranicom (slika 22.), a zatim odaberite

jedan od načina (slika 23.):

1. pomoću izbornika Modify >Make Link (Ctrl+L) i odabirom određenog dokumenta u dijaloškom okviru Select file

2. pomoću ikone Point to file – jednostavnim klikom na ikonu i odvlačenjemdo HTML dokumenta u paneli Files

3. pomoću ikone Browse for file – jednostavnim klikom na ikonu i odabirom određenog dokumenta u dijaloškom okviru Select file

4. klikom na ikonu Hyperlink u insertnoj traci

Slika 22. Povezivanje dviju stranica

Slika 23. Način kreiranja linka

Kreiranje „imenovanog linka“ (Named Anchor) Linkovi u većini slučajeva služe za povezivanje dviju stranica. Međutim, ponekad postoji i potreba za

povezivanjem točno određenog dijela na samoj stranici. U tom slučaju koristimo poseban tip linka -

named-anchor koji služi za prebacivanje na točno određeno mjesto na samoj stranici. Kreiranje named-anchora se vrši u tri koraka (slika 24.): 1. pozicionirati kursor na odredišno mjesto

2. dodati i imenovati link (named anchor) na stranici sa kojim se povezuje odnosnono određuje destinacija (npr. naslov)

3. napraviti sam link koji će linkati na imenovani link (named anchor), na način da se označi tekst,a u polje Link u Property Inspektoru upisati znak # zajedno sa nazivom imenovanog linka (naslov).

Slika 24. Način kreiranja imenovanog linka (named-anchor)

Kreiranje E-mail linka

Osim regularnih linkova koji nam služe za povezivanje stranica ili za povezivanje određenih mjesta na

samoj stranici, postoji još i tip linkova koji nam služe 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.hrodređuje email adresu.

Kreiranje E-mail linka se radi na ovaj način: (slika 25.): 1. označiti 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

Slika 25. Način kreiranja email linka (e-mail link)

17) Organiziranje mapa i dokumenata u Dreamweaveru Nakon što se definira web projekt (web site), Dreamweaver omogućava organiziranje i izradu

dokumenata (files), izradu novih mapa i podmapa (folders and subfolders) i dodavanje novih web

stranica u paneli Files koja služi kao komandni centar – isto kao i Windows Explorer u Windowsima. Ako nije već otvorena, Files panelu možete otvoriti u izborniku Window>Files (ili Ctrl+F8). Files panela prikazuje dokumente koji se nalaze u lokalnoj korijenskoj mapi. (slika 26.). Također

prikazuje i težinu 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 određšeni 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 način se otvara npr. CSS, JS ili PHP dokument. Slike se ne mogu otvoriti na ovaj način – već se treba koristiti opcija „povuci-i-ispusti“ (drag and drop) po principu odvlačenja

određene slike iz panele Filesna površinu HTML dokumenta.

Napomena:

Ukoliko želite otvarati neke tipove dokumenata u određenim programima, npr. slike u .gif ili .jpg formatu,

potrebno je u izborniku Edit>Preferences (Ctrl+U) u kategoriji File Types/Editors odrediti program za određeni tip

dokumenta (npr. Fireworks za sve slike u .jpg formatu). U Files paneli se također mogu dodavati novi dokumenti

ili mape jednostavnim desnim klikom na mišu 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š označen

plavom bojom isti se može preimenovati u neki drugi naziv npr. index.html (pazite da uvijek upišete ekstenziju

dokumentu - .html ili .htm)!