Web upotrebljivost - Logo

Tražilica

Nalazite se ovdje: Naslovnica >> Savjeti >> Dreamweaver >> Izrada web stranice u Dreamweaveru

Danas je:

Izrada web stranice u Dreamweaveru

članak objavljen: 20. 01. 2009.


Napomena:
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 Adobe Dreamweaver. Iako je ovdje objašnjen osnovni rad sa aktualnom inačicom Dreamweaver CS3/CS4 većina napomena i savjeta se može primjeniti i u prijašnjim/kasnijim verzijama Dreamweavera.

1) Izrada web stranice u Dreamweaveru


Prije no što krenemo sa izradom web stranice u Adobe 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

Dreamweaver - Dijaloški okvir Preferences

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 i View > 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)
    1. Kategorija dokumenta određuje da li ćete odabrati novu (praznu) stranicu, prazan predložak, stranicu iz gotovog predloška ili stranicu iz uzorka
    2. Tip stranice određuje vrstu dokumenta (HTML za web dokumente, CSS za stilske liste, ...)
    3. 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...
    4. 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.

Dreamweaver - Dijaloški okvir novog dokumenta

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).

Dreamweaver - 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...

Dreamweaver - Dijaloški okvir osnovnih karakteristika stranice

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

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 tipku Enter 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 odabrati Insert > HTML > Special Characters > Line Break.

Dreamweaver - unos teksta u dokument

Slika 5. Unos teksta u dokument

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 None nije 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.)

Dreamweaver - Formati teksta, paragrafa i naslova

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.)

 

Dreamweaver - Property inspector paragrafa

Slika 7. Property inspector paragrafa

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

Dreamweaver - odvajanje sadržaja od prezentacije
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.  

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)

Dreamweaver - naslovi

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.)

Dreamweaver - Definiranje naslova u paneli Properties

Slika 9. Definiranje naslova u paneli Properties

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).

Dreamweaver - Nepobrojane i pobrojane liste

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>
                 

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.)

Dreamweaver - Odabir pisma

Slika 11. Odabir pisma (font)

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.

Dreamweaver - Odabir veličine pisma

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.

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.

Dreamweaver - Odabir boje pisma

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 picker u 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.

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.)

Dreamweaver - Odabir boje pisma

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.

Dreamweaver - Ubacivanje slike u dokument

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 i Edit>Copy) ubaciti sliku u Dreamweaver (odabirom Edit>Paste). Vrlo korisno!

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)

Dreamweaver - Uređivanje slike direktno u Dreamweaverupomoću alata

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.)

Dreamweaver - Ubacivanje slike u dokument

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.

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=ShockwaveFlash

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

Dreamweaver - Ubacivanje slike u dokument

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

Dreamweaver - uređivanje flash dokumenta

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

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)

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.).

Dreamweaver - anatomija linka

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

Dreamweaver - anatomija linka

Slika 22. Povezivanje dviju stranica

Dreamweaver - kreiranje linka

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).

Dreamweaver - named anchor link

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.hr određ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

Dreamweaver - email link

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.

Dreamweaver - email link

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 Files na 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)!

Vezani članak:

Uvod u Dreamweaver

 

Autorska prava

Svi članci objavljeni na web stranicama www.web-upotrebljivost.com, uključujući tekstualne, grafičke, programske i ostale materijale, zaštićeni su Zakonom o autorskim pravima.

Distribucija odnosno korištenje članka je dozvoljena samo pod slijedećim uvjetima:

  • Sadržaj članka ne smije se mijenjati ili nadopunjavati
  • Potrebno je navesti izvor prema orginalnom sadržaju na ovim stranicama sa direktnim linkom koji se nalazi ispod kopiranog sadržaja i to: www.web-upotrebljivost.com, Dario Šuveljak, Zagreb

blog comments powered by Disqus