Dreamweaver MX - Tutorijal

Macromedia - Dreamweaver MX

- 1 -

SADRAJ

Upoznavanje sa Dreamweaver MX-om ...................................................- 2 - 1.1 ta je Dreamweaver i njegova osnovna namena ................................................. - 2 - 1.2 Radna povrina i alati........................................................................................... - 3 -

Kreiranje Web sajta i Web strane ............................................................- 7 - 2.1 Kreiranje lokalnog Web sajta .............................................................................. - 7 - 2.2 Kreiranje nove Web strane.................................................................................. - 10 - 2.3 Zadavanje Web Browsera................................................................................... - 13 -

Rad sa tekstom......................................................................................- 15 - 3.1 Upisivanje i formatiranje teksta ............................................................................ - 15 - 3.2 Rad sa fontom................................................................................................... - 16 - 3.3 HTML i CSS stilovi ............................................................................................... - 17 - 3.4 Specijani znakovi, horizontalne linije, datum ....................................................... - 19 -

Rad sa grafikom.....................................................................................- 21 - 4.1 Postavljanje slike na stranu................................................................................. - 21 - 4.2 Menjanje veliine slike i njeno pozicioniranje...................................................... - 23 - 4.3 Davanje imena i HTML oznaka slikama...................................................... - 24 - 4.4 Panel Assets i Flash dugme................................................................................ - 25 -

Dizajniranje Web strana.........................................................................- 27 - 5.1 Kreiranje tabela u Layout i Standard prikazu ....................................................... - 27 - 5.2 Promena svojstava i elemenata tabele ............................................................... - 30 - 5.3. Ugnjedavanje tabela i pravljenje okvira............................................................ - 31 -

Hiperveze (linkovi) .................................................................................- 33 - 6.1 Pravljenje tekstualnih i grafikih hiperveza .......................................................... - 33 - 6.2 Umetanje sidara i povezivanje sa njima.............................................................. - 36 - 6.3 Mapirane slike ..................................................................................................... - 37 -

Izrada interaktivnih strana......................................................................- 39 - 7.1 Rollover Image .................................................................................................... - 39 - 7.2 Otvaranje novog prozora browsera...................................................................... - 42 - 7.3 Iskaui (Pop-Up) meni...................................................................................... - 43 -

Rad sa bibliotekom ................................................................................- 46 - 8.1 Pravljenje i postavljanje elemenata biblioteke ..................................................... - 46 - 8.2 Menjanje elemenata biblioteke........................................................................... - 48 - 8.3 Pravljenje i menjanje elemenata biblioteke koji sadre skriptove .................. - 49 -

Izrada okvira ..........................................................................................- 51 - 9.1 Skup okvira.......................................................................................................... - 51 - 9.2 Karakteristike okvira i skupa okvira..................................................................... - 53 - 9.3 Sadrina okvira i traka za navigaciju................................................................... - 54 -

Korienje ablona (Templates) ............................................................- 57 - 10.1 Pravljenje Template-a ........................................................................................ - 57 - 10.2 Auriranje sajta pomou Template-a ................................................................ - 61 -

Odravanje Web sajta ...........................................................................- 62 - 11.1 Odravanje sajta u Site prikazu ........................................................................ - 62 - 11.2 Mapa sajta......................................................................................................... - 65 - 11.3 Postavljanje sajta na server ............................................................................... - 67 -

Literatura ...............................................................................................- 70 -


- 2 -

Poglavlje 1

Upoznavanje sa Dreamweaver MX-om

U ovom poglavlju nauiete: 1. ta je Dreamweaver MX i koja je njegova osnovna namena 2. Osnovne karakteristike radne povrine i alata

1.1 ta je Dreamweaver i njegova osnovna namena Dreamweaver MX je program za izradu web strana, koji omogucava vizuelno projektovanje i ureivanje, kao i neposredno pisanje HTML koda. Takoe omoguava izradu dinamikih web aplikacija koristei serverske jezike kao to su ASP, ASP.NET, COLD FUZION, MARKUP LANGUAGE (CFML), JSP I PHP. Dreamweaver skracuje vreme izrade web prezentacije, a ima i alatke za njihovo menjanje i odravanje. Ovaj program je dosta fleksibilan jer i napredne tehnike ini pristupanim i olakava njihovo korienje. Objedinjavanjem velikih mogunosti projektovanja i programiranja prua mnotvo pogodnosti i poetnicima i iskusnijim korisnicima. Ovaj tekst je namenjen korisnicima koji imaju malo ili nimalo iskustva u korienju Dreamweavera i u njemu se nee govoriti o pravljenju sloenih aplikacija i dinamickih web prezentacija u kojima se koriste baze podataka, specifino ponaanje servera i Web aplikacija, jer je za njih neophodno poznavanje gore navedenih serverskih jezika. I pored svih korisnih stvari koje nudi (a videete da ih ima dosta) Dreamweaver, ne sme se zaboraviti i ona takoe veoma vazna stvar a to je detaljno planiranje sajta, jer sigurno ste se vec dosta puta susreli sa sajtovima iji je fokus usmeren na alate i tehnologije, natrpane Java Apletima, Java Script efektima, raznim animacijama i zvucima, ali naalost, bez pravog logikog sadraja.


- 3 -

1.2 Radna povrina i alati Pre nego to ponete da pravite Web strane, treba da se upoznate sa radnom povrinom programa i njegovim alatima. Prilikom prvog pokretanja Dreamweavera prikazae se prozor dobrodolice sa informacijama za nove korisnike, kao i niz novih mogunosti za one koji vec poznaju program. Ako vam nekad kasnije zatreba ovaj prozor do njega dolazite kada izaberete opciju Welcome iz Help menija.

Slika 1.2.1 Izgled Welcome prozora

Takoe Dreamweaver MX daje mogunost izbora (slika 1.2.2) jednog od dva ponuena izgleda radne povrine, novu, integrisanu povrinu u kojoj su svi prozori i paneli integrisani u jedan iri aplikacioni prozor, ili radno okruenje ve vieno u prethodnoj verziji programa (Dreamweaver 4). Po otvaranju Dreamweavera sa novim (MX) izgledom radne povrine susreemo se sa sledeim elementima (slika 1.2.3.):

- Insert Bar, sadri tastere za unos razliitih tipova objekata, kao to su slike, tabele, layer-i u dokument. Svaki objekat je predstavljen HTML kodom koji omoguava podeavanje razliitih atributa.

- Document Toolbar, sadri tastere i pop-up menije za podeavanje izgleda prozora dokumenta. Inae u Dreamweaveru postoje tri naina prikazivanja, to su Design View, Code View i Split Design and Code. Dugmad za menjanje tih prikaza nalaze se na levoj strani ovog toolbar-a.


- 4 -

Document toolbar sadri i neke osnovne operacije kao sto je preview u browseru.

Slika 1.2.2 Izbor radne povrine


- 5 -

Slika 1.2.3 Dreamweaver MX radna povrina

- Document Window, prikazuje tekui dokument i rad na njemu. U donjem levom uglu prozora dokumenta nalazi se bira HTML oznaka (Tag Selector), u njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Pocetna HTML oznaka je uvek .

- Property Inspector, omoguava menjanje osobina selektovanih objekata ili teksta. Svaki objekat posjeduje razliite osobine.

- Panel Group, je grupa panela sa desne strane: Design, Code Application, Files i Answeres. Da bi otvorili zeljeni panel kliknite na strelicu sa leve strane imena panela.

- Site Panel, omoguava upravljanje fajlovima i folderima koji ine va sajt. Takoe obezbeuje i pristup fajlovima na hard disku, slino kao kod Explorera (drvo).

Kratak opis menija:

- File i Edit meni, sadre standardne komande kao to su new, open, save, save as, copy, cut i paste. File meni sadri i razliite komande za prikaz i rad na tekuem dokumentu (Preview u Browseru, Print Code). Edit meni ukljuuje komande za selekciju i pretraivanje (Select Parent Tag, Find And Replace) i


- 6 -

omoguava pristup editoru za preice na tastaturi. Pristup preferencama je takoe iz Edit menija.

- View meni omoguava izbor razliitih prikaza dokumenta (Design View, Code View) i prikazivanje i skrivanje raznih elemenata strane i Dreamweaver alata.

- Insert meni predstavlja alternativu Insert Bara. Slui za dodavanje objekata u dokument.

- Modify meni daje mogunost promene karakteristika selektovanog elementa stranice. Koristei ovaj meni mogu se editovati tag atributi i menjati elementi tabela.

- Text meni obezbeuje lako formatiranje teksta. - Commands meni omoguava pristup razliitim komandama, ukljuujui i one za

optimizaciju slika sa Macromedia Fireworks-om. - Site meni prua komande za kreiranje, otvaranje i editovanje sajtova. - Window meni omoguava pristup svim panelima, inspektorima i prozorima u

Dreamweaveru. - Help, standardno ukljuuje Help sistem za korienje Dreamweavera.


Poglavlje 2

Kreiranje Web sajta i Web strane

U ovom poglavlju nauiete:

1. Da kreirate lokalni Web sajt 2. Da kreirate, imenujete i sauvate Web stranu 3. Da zadate Web Browser

2.1 Kreiranje lokalnog Web sajta Za poetak objasniemo pojam sajta. Re sajt ima vie znaenja:

- Website, skup strana na serveru kojima pristupa posetilac preko svog browsera. - Remote site, skup fajlova na serveru koji ine Web sajt, uglavnom gledano sa

pozicije autora samog sajta. - Local site, fajlovi na lokalnom raunaru identini onima na remote sajtu. Sa njima

se radi na raunaru, a potom se prebacuju na server. - Site definition, u Dreamweaveru oznaava karakteristike lokalnog sajta sa

informacijama o tome kako lokalni sajt komunicira sa remote sajtom. Najee korien nain kreiranja Web sajta je kreiranje i rad sa web stranama, na lokalnom rau web server kako bi one postale dostupne javno Sam postupak

1. Iz men kvir za dijalog Site definition, koji nudi mkreirannaru, a zatim prenos kopija tih strana nasti. Takav rad i ovde se podrazumeva.

kreiranja je sledei: ija Site izaberite New site. Pojavie se o- 7 -

ogunost izbora osnovnog (Basic) ili naprednog (Advanced) postupka ja sajta. Izaberite Basic i kliknite next. (slika 2.1.1)


- 8 -

Slika 2.1.1

2. Sada upiite ime vaeg sajta i preite na sledei korak. 3. Dreamveawer sada pita da li elite da radite sa serverskim tehnologijama (ASP,

ASP.NET, PHP, JSP...). Izaberite Ne, jer e ovde biti razmatrani samo statiki sajtovi. Definiciju samog sajta uvek moete izmeniti kada izaberete iz menija Site/Edit Sites...(slika 2.1.2)

Slika 2.1.2

4. Program vas pita kako elite da radite sa datotekama vaeg sajta. Pritisnite radio- dugme : 'Edit local copies on my machine, then upload to server when ready. (Recomended)'. (slika 2.1.3)


- 9 -

Slika 2.1.3

5. Sada treba da upisete gde zelite da smestite datoteke sajta, ili pritisnite folder ikonicu desno od polja za unos teksta ako ste ve prethodno odredili mesto za sajt. Taj izabrani folder se naziva lokalni korenski direkrorijum i pomou njega Dreamweaver odreuje putanje dokumenata, slika i hiperveza vaeg sajta. 6. Na sledeem koraku vas program pita 'how do you connect to your remote server'

S obzirom da se radi o lokalnom sajtu izaberite 'None'. (slika 2.1.4)

Slika 2.1.4


- 10 -

7. Pritisnite next da biste presli na sledei korak. Pregledajte podatke koje ste do sada zadali i pritisnite dugme Done da bi zavrili kreiranje sajta. Novokreirani sajt mozete videti u sajt panelu. (slika 2.1.5)

Slika 2.1.5

2.2 Kreiranje nove Web strane Iako Dreamweaver otvara nov dokument ( stranu) bez naslova, esto ete sami morati da pravite nove strane, i to e te initi na sledei nain. Izaberite New iz opcije File. Otvorie se okvir za dijalog New document sa dve kategorije General i Templates. Na kartici General nudi vam se mogunost izbora neke od ponuenih predizajniranih strana, ali preporuujemo izbor 'prazne' HTML strane (kategorija Basic Page, opcija HTML). (slika 2.2.1)


- 11 -

Slika 2.2.1 Kreiranje nove strane

Novi dokument bez naslova (Untitled-1), koji se automatski otvara kada pokrenete Dreamweaver je HTML strana. Vrstu tog dokumenta moete promeniti kada pritisnete dugme Preferences u istoimenom prozoru. Na dnu okvira New Document nalazi se opcija Make Document XHTML Compliant, Koja je veoma korisna jer e vaa strana biti kompatibilna sa starijim i novijim verzijama HTML-a. Kreiranu stranu moete sauvati tako to izaberete opciju Save iz menija File.(slika 2.2.2) Naravno, daete joj ime i sauvati u lokalnom darektorijumu sajta. Preporuljivo je snimiti datoteku pre stavljanja bilo kakvog teksta ili slika, jer e tada sve putanje koje se odnose na te elemente biti propisno formirane. Napomene: Davanje imena stranama koje e se koristiti na Web serveru razlikuje se od imenovanja strana za korienje na lokalnom raunaru. U zavisnosti od operativnog sistema koji koristi server, struktura imena se razlikuje (Kod Unix-a razlikuju se mala i velika slova). Zato je preporuka koristiti samo slova (A-Z) i brojeve (0-9).U imenima datoteka takoe ne sme biti razmaka. Ako je neophodno razdvojiti rei upotrebite potcrtu ili crticu. Ne smete koristiti specijalne znakove kao to su: %,*,#,/.


- 12 -

Ne poinjite imena datoteka brojkom. Vodite rauna da ime strane ne bude suvie dugo, jer se ime strane postaje sastavni deo URL adrese koju korisnik mora otkucati da bi pristupio strani.

Slika 2.2.2 Novokreirana web strana

Postoji jo jedan nain kreiranja nove strane, a to je da uradite desni klik na sajt u sajt panelu i da izaberete opciju New, gde se opet susreete sa prozorom New Document. (slika 2.2.1) Davanje naslova Web strani Svaki HTML dokument mora imati naslov, koji prvenstveno slui za identifikaciju i vidi se na naslovnoj traci browsera. Taj naslov takoe postaje ime Bookmarka koji se prilae uz Web stranu. Zbog toga treba izabrati kratke izraze koji najbolje opisuju namenu same strane. Ako zaboravite da imenujete stranu Dreamweaver e je nazvati Untitled document. Najzad, strani dajemo ime upisujui ga u polje Title u Document Toolbar-u. Ukoliko Document Toolbar nije vidljiv moe se pronai u biranjem opcije Document iz Toolbars opcije menija View (slika 2.2.3).

Slika 2.2.3 Imenovanje Web strane

Davanje boje pozadine U Dreamweaveru se boja pozadine lako menja pomou specijalne palete boja za Web (Web safe Color Pallete). Na toj paleti ima 216 boja. Da bi promenili boju izaberite opciju Page Properties iz menija Modify. U ovom prozoru pritisnite polje sa bojom do opcije Background. Prikazae se paleta boja, a pokaziva mia e se pretvoriti u pipetu. Dovedite pipetu iznad eljene boje. Moete primetiti da se boja u HTML-u definie heksadecimalnim brojem, koji opisuje koliinu njene crvene, zelene i plave komponente. Sada oznaite boju i pritisnite dugme Apply. (slika 2.2.4) Slika na pozadini strane Na pozadinu se obino stavlja slika ijim se kopijama poploava cela strana. Strana moe imati definisanu i boju i sliku za pozadinu.U prozoru Page Properties pritisnite dugme Browse do polja Background image i izaberite eljenu sliku. Preporuljivo je staviti sve slike koje e se koristiti za izradu strane u jedan folder lokalnog korenskog direktorijuma. (slika 2.2.4)


- 13 -

Odreivanje boje fonta Kada ste izmenili boju pozadine, ili stavili sliku na nju, poeljno je da prilagodite boju slova teksta pozadini. Prilikom biranja boja za dokument izaberit one kombinacije koje se dobro slau i koje su dovoljno kontrastne. Odabir boje teksta se takoe vri u okviru Page properties prozora u polju za boju teksta. (slika 2.2.4)

Slika 2.2.4 Page properties

2.3 Zadavanje Web Browsera Tokom razvoja Web strana bie neophodno da stalno proveravate izgled vaeg rada u razliitim Web browserima, kao to su Netscape, Internet Explorer, Opera... Ono to vidite u prozoru Dreamweavera samo je priblizno jednako stvarnom izgledu prezentacije. Svaki browser prikazuje Web strane na manje vie razliit nain. S obzirom da svi posetioci nee koristiti isti ita za gledanje vaeg sajta bilo bi najbolje, ako je to mogue, prilagoditi strane sajta bar onim najee korienim browserima. Izaberite File Preview in Browser Edit Browser List. Otvorie se prozor za dijalog Preferences i prikazati itae izabrane za proveru. Dreamweaver e automatski prikazati


- 14 -

spisak itaa instaliranih u raunaru. Tu moete odrediti koji e browser biti primaran a koji sekundaran, i eventualno zadati peicu na tastaturi za pojedine browsere. Ako elite da dodate nov ita pritisnite dugme +. (slika 2.3.1)

Slika 2.3.1 Izbor Browsera


- 15 -

Poglavlje 3

Rad sa tekstom


1. Da pravilno upisujete i formatirate tekst u Web strani 2. Rad sa fontom 3. Definiete i primenite HTML i CSS stilove 4. Dodate specijalne znake, horizontalne linije i datum

3.1 Upisivanje i formatiranje teksta Tekst se naravno, upisuje neposredno u dokument. Ali, da bi sve izgledalo kako treba, preporuljivo je pridravati se nekih pravila. Kada napiete naslov, mogue je formatirati ga izborom jednog od ponuenih est formata za naslov (naslov prvog nivoa, Heading 1, ima najvea slova), koji se nalaze u panelu Properties (slika 3.1.1). Kada pasusu dodate HTML oznaku naslova, automatski se ispod njega dodaje odreen prazan prostor iju veliinu ne moete menjati. Preporuljivo je da prvi naslov na strani bude jednak nazivu same strane. Kada ste formatirali naslov pritisnite Enter. Tada dodajete novi red koji oznaava poetak novog pasusa, to moete i videti u Tag selectoru gde je dodata oznaka pasusa . Za obian tekst koristi se, po pravilu, format pasusa. Ne zaboravite da posle nekog vremena sauvate va rad.

Slika 3.1.1 Formatiranje teksta Ako hoete da preete u novi red a da pritom ne bude dodatnog razmaka izmeu prethodnog i novog reda pritisnite Shift + Enter. To znai da ste ostali u istom pasusu. Oznaavanjem bilo kog reda nekog pasusa i njegovim formatiranjem, formatirate celi pasus. Mogunosti za poravnanje teksta su standardne (levo, desno, centralno i obostrano).


- 16 -

Osim poravnanja, pasuse teksta, moete i da uvuete od margina. Za to se koriste dugmad Text Indent i Text Outdent u panelu Properties. (slika 3.1.1) U Dreamweaveru moete praviti dve vrste lista (spiskova), ureene liste (Ordered List) i neureene (Unordered List), liste nabrajanja. Da bi napravili (ne)ureenu listu, poterbno je selektovati eljeni deo teksta i pritisnuti dugme (Un)Ordered List na Property panou.(slika 3.1.1). emu numerisanja ureene liste (number, roman, alfabet) mogue je odabrati pomou List Item opcije na property panou. Ista opcija slui za modifikovanje neureene liste (bullet, square).esto je potrebno poslednje formatiranje ponoviti na sledeim pasusima ili drugom izabranom tekstu. To je najlake uraditi koristei naredbu Repeat, iz menija Edit, ili preicom sa tastature Ctrl + Y. Dodavanje teksta iz drugih dokumenata Tekst se strani moe dodati kopiranjem iz drugog dokumenta. Dreamweaver moe da otvori datoteke napravljene u programima za obradu teksta ukoliko su snimljene kao ist tekst (.txt). Te datoteke se uvek otvaraju u novom prozoru, i to uvek u prikazu Code View, tako da ih odatle moete kopirati na vau stranu.

3.2 Rad sa fontom Web strane e biti zanimljivije i lake e se itati ako promenite font kojim se prikazuje tekst. Morate voditi rauna o injenici da korisnici mogu da menjaju velicinu prozora i fonta kao i boju slova. Izgled teksta se menja od korisnika do korisnika. U HTML-u ne moete da utiete na prored teksta i meuslovna rastojanja. Font cele strane ili izabranog dela teksta se moe menjati na vie naina, direktno na panou Properties u padajuoj listi Font ili desnim klikom izabirajui opciju Font, Edit Font List. (slika 3.2.1) Da bi posetilac video stranu onako kako ste je napravili mora na svom raunaru imati instaliran font koji ste zadali. Kombinacije instaliranih fontova ine da ita prikazuje tekst u drugom fontu. Ako prvi font u spisku fontova nije instaliran, browser e pokuati da upotrebi drugi a na kraju trei. Ako ni jednog od tih fontova nema na korisnikovom raunaru, tekst se prikazuje u podrazumevanom fontu itaa. Kombinaciju fontova moete da promenite kad izaberete opciju Edit Font List. Izaberite kombinaciju fontova i zatim jednu od sledeih opcija:

- da biste dodali ili uklonili font, izaberite font i pritiskajte dugmad sa strelicama koje premetaju fontove izmeu spiskova chosen (izabrani) i available (dostupni).

- da biste dodali ili uklonili kombinaciju fontova pritiskajte dugmad sa znakovima + i - u gornjem levom uglu okvira.

- ako elite da dodate font koji nije instaliran u sistemu upiite ime fonta u polje ispod liste available fonts, i pritisnite dugme sa dvostrukom strelicom.

U HTML-u su mogunosti menjanja veliine fonta ograniene. U panelu Properties izaberite listu veliina fontova Size. Veliine su poslagane od +1 do +7 i od -1 do -7. Ako izaberete broj bez predznaka zadali ste apsolutnu veliinu fonta, a biranjem broja sa predznakom + ili- zadajete relativnu veliinu fonta, npr. broj +1 daje font za jedan broj vei od njegove osnovne veliine. Podrazumevana osnovna veliina fonta u browseru je 3.


- 17 -

Slika 3.2.1 Rad sa fontom

Takoe u Dreamweaveru se boja teksta lako menja. Na panelu Properties pritisnite dugme Text Color i izaberite eljenu boju. Sve boje koje upotrebite se uvaju u panelu Assets koji se nalazi u panelu File. Najee koriene boje snimite u direktorijum Favorites.

3.3 HTML i CSS stilovi Da bi Web strane bile zanimljivije ispisuju se raznim fontovima. Oblik, veliinu i boju slova moete lako menjati, ali ako hoete da upotrebite nekoliko kombinacija boja, oblika, veliina slova za celi sajt te kombinacije parametara morali bi ste da pamtite od strane do strane. HTML stilovi uvaju formatiranje slova i pasusa izabranog dela teksta, koje moete ponovo da upotrebite u drugim pasusima istog dokumenta i u drugim dokumentima. Primenom ovih stilova dokumenti e izgledati ujednaenije, a postupak formatiranja teksta e biti znatno ubrzan. Ako izmenite ili obriete neki stil to nee uticati na izgled teksta ve formatiranog tim stilom. U panelu Design nai e te karticu HTML stilovi (sluka 3.3.1). U donjem desnom uglu se nalazi dugme New Style ijim pritiskom otvarate prozor za definisani HTML stil. Izmene koje napravite u okviru ovog prozora utiu na tekst koji je bio izabran u trenutku kada ste ga otvorili. Vano je pomenuti da postoji mogunost izbora da li da se stil primeni na selekciju ili na celi pasus. Ako ste izabrali pasus (Paragraf) uz ime novog stila pojavljuje se ikonica u vidu obrnutog slova p. Kasnije selektovanjem bilo kog dela teksta i pritiskom na prethodno napravljeni eljeni stil, primenjujete taj stil na tekst.


- 18 -

Slika 3.3.1 HTML Stil

Za formatiranje koje aurira izgled celih strana koriste se kaskadni opisi stilova, CSS stilovi (Cascading Style Sheets). Za rad sa CSS stilovima koristi se kartica CSS Styles odmah do kartice HTML Styles u panelu Design. Da bi definisali novi CSS stil kliknite dugme New CSS Style u donjem desnom uglu ove kartice (slika 3.3.2). U prozoru New CSS Style oznaite Make Custom Style, polje Define in ostavite po default-u i kliknite OK. Zatim imenujte novi stil i sauvajte ga u folderu sajta u kome bi trebalo da se nau i slike koje kristi va sajt. Sad se pojavljuje prozor CSS Style definition na ijoj levoj strani moete videti 8 kategorija (slika 3.3.2). U kategoriji Type mogue je podesiti parametre vezane za font, kao to su tip, veliina, bojafonta. U kategoriji Background izabirate boju pozadine, sliku pozadine Razmak izmeu rei, poravnanje teksta, uvlaenje od margina, itd. Kada ste podesili parametre shodno vaim potrebama, kliknite OK i postupak definisanja novog CSS Styla je zavren. Da bi primenili stil na Web stranu treba samo da ga oznaite u CSS panelu i taknete dugme Attach Style Sheet (slika 3.3.2). Ako kasnije elite da promenite odreene parametre CSS stila tu je i dugme Edit Style Sheet.


- 19 -

Slika 3.3.2 CSS Stil

3.4 Specijani znakovi, horizontalne linije, datum

Prilikom rada u Dreamweaveru vrlo esto zatrebaju znakovi i ostale informacije kojima ne moete pristupiti direktno sa tastature. Ovi specijalni znakovi imaju specifine HTML kodove ili alternativne preice sa tastature koje je teko zapamtiti. U Insert Panelu na kartici Charactes se nalaze najee korieni znakovi (slika 3.4.1). Da bi ubacili odreeni znak oznaite mesto na strani, a zatim pritisnite znak i on e se pojaviti na tom mestu.

Slika 3.4.1 Specijalni znakovi

Ako znak koji vam treba nije na ovoj kartici, pritisnite dugme Other Character (poslednja ikonica desno) ili izaberite opciju menija Insert>Special Characters>Other. Kada se otvori okvir Insert Other Character izaberite znak koji zelite i kliknite OK. Horizontalna linija se prua preko cele strane i vizuelno odvaja delove dokumenta. Da bi ubacili horizontalnu liniju na eljeno mesto na kartici Common sa Insert panela pritisnite dugme Horizontal Rule (slika 3.4.2). Dok je oznaena horizontalna linija, u panelu Properties (slika 3.4.3) moete odrediti koliki deo strane e odvojiti horizontalna linija, bez obzira na irinu prozora browsera (u %). Ako elite da linija ne menja irinu kada korisnik


- 20 -

promeni veliinu prozora browsera, zadajte Apsolutnu irinu linije (u pikselima). Da bi ta linija bila puna treba iz pola Shading ukloniti znak potvrde. Debljina linije se bira unosom broja u polje H (height) (slika 3.4.3).

Slika 3.4.2

Slika 3.4.3

Automatsko dodavanje datuma. To nije dinamiki datum koji se menja kada korisnik pristupi strani, nego datum koji pokazuje kada ste poslednji put aurirali sadraj strane. Dreamweaver automtski aurira izmene svaki put kada snjimite dokument. Datum se obino stavlja na dno strane. Pritisnite dugme Date na kartici Common u panelu Insert (Slika 3.4.2). Tada se otvara prozor Insert Date i prua mogunost izbora rasporeda dana, datuma i vremena.


- 21 -

Poglavlje 4

Rad sa grafikom


1. Da postavite dra slike i sliku na Web stranu 2. Promenite veliinu slike i da je pozicionirate na strani 3. Date imena grafikim elementima i pridruite im HTML

oznake 4. Koristite panel Assets i napravite Flash dugme

4.1 Postavljanje slike na stranu Najrasprostranjeniji formati slika na Web-u jesu format za razmenu grafikih elemenata (Graphic Interchange Format, GIF), i format zdruene grupe fotografskih strunjaka (Joint Photographic Experts Group, JPEG). Po pravilu GIF se koristi kda slika ima velike jednobojne povrine bez teksture i malo ili nimalo prelivanja boja. Gif je dobar pri radu sa tekstom, vektorskom grafikom, slikama sa ogranienim brojem boja i slikama malih dimenzija. Slike u ovom formatu se mogu snjimiti sa maksimalno 256 boja (8 bita za opis boje svake take). Ove slike se bre uitavaju, i podravaju providnost i animaciju. JPEG se koristi za fotografije i druge slike s velikim opsegom boja. Odlino reprodukuje prelive boja i daje fotografije mnogo boljeg kvaliteta od onih u formatu GIF. Ovaj format opisuje svaku taku slike s 24 bita, uva sve njene boje. Da bi postavili sliku na stranu, pritisnite dugme Image na kartici Common Insert panela. Prikazae se prozor Select Image Source (slika 4.1.1). Do tog prozora moete doi i biranjem opcije Image iz menija Insert. Sada je potrebno (ako to ve nije sluaj) kod pitanja 'Select File Name From' oznaiti opciju 'File system'. Dugme Data Sources koristi se za dinamike prezentacije u kojima se dokument izvrava na serveru aplikacije. Sada pronaite eljenu sliku. Kada ste to uradili, potrebno je zadati kako e Dreamweaver referencirati grafiki element (sliku), u odnosu na stranu, ili na osnovni (korenski) direktorijum sajta. U referencama u odnosu na dokument Dreamweaver gradi putanju slike na osnovu relativnog poloaja HTML dokumenta u odnosu na grafiku datoteku. Kod referenci u odnosu na korenski direktorijum sajta, putanja slike gradi se na osnovu relativnog poloaja HTML dokumenta u onosu na osnovni direktorijum lokacije. Po pravilu treba koristiti referencve u odnosu na stranu. Obrnuto samo u sluaju velikog sajta ili kada nameravate da esto menjate strane. Vano je napomenuti da Dreamweaver ne moe da naprvi ovakve reference ako prethodno niste snimili stranu, ve pravi putanje na osnovu poloaja slike na hard disku,


- 22 -

to nisu valjane hiperveze i ne rade kada se sajt postavi na Web. Takoe je obavezno snimiti sliku negde unutar osnovnog korenskog foldera. Pritisnite dugme OK i slika je na strani. Ako trenutno nemate potrebnu sliku, moete da rezerviete mesto za nju. Tako ete otprilike moi da procenite kako e izgledati kombinacija slike, teksta, tabela i drugih elemenata strane. Pritisnite dugme Image Placeholder na kartici Common panela Insert. Otvorie se okvir za dijalog Image Placeholder (slika 4.1.2). U polje name upiite ime slike, to je tekst koji se pojavljuje samo u Dreamweaveru. Ako browser ne moe da prikae sliku, ili je posetilac iskljuio mogunost prikazivanja slika, na mestu gde treba da doe slika prikazuje mu se alternativni tekst koji upisujete u polje Alternate Text. Zadajte eljenu visinu i irinu u pikselima (standardna irina i visina rezervisanog mesta iznosi 32x32).

Slika 4.1.1 Izbor slike

Kada napravite potrebnu sliku treba da je stavite na mesto rezervisano za nju. Dva puta kliknite rezervisano mesto u prozoru dokumenta. Otvorie se prozor Select Image Source prethodno objanjen. Izaberite sliku, kliknite OK i slika e ispuniti mesto rezervisano za nju.


- 23 -

Slika 4.1.2 Definisanje draa slike

4.2 Menjanje veliine slike i njeno pozicioniranje Kada postavite sliku na stranu njena irina i visina pokazuju se na panelu Properties (slika 4.2.1), i automatski upisuju u HTML kod. Veliina slike bitno utie na brzinu njenog uitavanja. U Dreamweaveru moete da promenite te dimenzije jednostavnim unosom irine i visine u panelu Properties. Kada jednom promenite veliinu slike brojevi koji oznaavaju njene dimenzije su podebljani. Takavim nainom promene veliine ne menjate veliinu grafike datoteke. Jo jedan nain promene veliine slike je povlaenjem takozvanih ruica oko slike. Ako hoete da odnos irine i visine ostane nepromenjen drite taster Shift dok povlaite ruice. Vraanje slike na originalnu veliinu se vri pritiskom na dugme Reset Size. Kvalitet slike opada kada se slika poveava. Slike se u browserima prikazuju u rezoluciji ekrana, koja uobiajeno iznosi 72. take po inu. Ova rezolucija nije dovoljna za lepo prikazivanje uveanih slika. Da bi smanjili veliinu grafikih datoteka na najmanju moguu meru obavezno ih najpre prilagodite u programima za obradu slika, kao to je na primer Adobe Photoshop. Editivanje selektovanih slika vri se pritiskom na dugme Edit panela Properties. Odreivanje editora slike mogue je u kategoriji File types, opcije Preferences iz menija Edit (ctrl + U). Kada smestite sliku neposredno u stranu, nemate mnogo mogunosti da je premetate. Tu su standardne opcije za poravnanje, uz levu marginu, desnu ili na centar strane koje se nalaze u panelu properties. Ponekad treba istaknuti sliku u odnosu na pozadinu. Jedan od naina da se to postigne jeste i dodavanje okvira oko slike. Okvir moe da privue panju na slike i da doprinese ujednaenosti stila cele Web prezentacije, a takoe moe da poslui kao hiperveza. Debljina okvira se proizvoljno zadaje tako to u panelu Properties upiete eljeni broj u polje Border ( taj broj je broj piksela). Boja okvira je jednaka podrazumevanoj boji teksta zadatoj u prozoru Page Properties. Ako slici pridruite hipervezu (naredne lekcije), boja okvira te slike postae jednaka podrazumevanoj boji hiperveza. Ureenju rasporeda doprinosi i mogunost omotavanja teksta oko slike. Ako unesemo sliku na levu stranu dokumenta tekst e ii desno od nje na visini donje ivice slike do desne margine, zatimse u novom redu vraa i poinje od leve. Izbor atributa Left ili Right


- 24 -

opcije Align daje mogunost da pored slike upiete vie redova teksta, sa leve odnosno sa desne strane. Dok ostale opcije slue za smetanje samo jednog reda teksta do slike,a to su:

- Baseline, poravnava dno slike sa osnovnom linijom teksta (Default) - Top, poravnava sliku sa vrhom najvieg objekta u redu, gde taj objekat moe biti

tekst ili slika, - Middle, poravnava osnovnu liniju teksta sa sredinom slike, - Bottom, isto kao i Base line, - Text Top, najese daje iste rezultate kao i opcija Top, ali ne i uvek, - Absolute Middle, poravnava sredinu slike sa sredinom reda teksta ili sa najveim

objektom u redu, - Absolute Bottom, poravnava dno slike sa najniom takom reda teksta.

Slika 4.2.1 Panel svojstava slika

Kada omotate tekst oko slike mogue je prilagoditi prostor oko nje, da bi se tekst lake itao i da bi strana izgledala urednija. Moete dodati vertikalni i horizontalni prostor, tako to ete u panelu Properties (slika 4.2.1) upisati potreban broj u polje V ili H. (taj broj je u pikselima). Zapamtite da ne moete dodati prostor samo na jednu stranu slike.

4.3 Davanje imena i HTML oznaka slikama Imena i oznake su vane iako se uglavnom ne vide na Web strani. Po pravilu je dobro pridruiti slici ime i oznaku jer time pomaete i sebi i posetiocima sajta. Polje za ime slike na panelu properties nema posebnu oznaku a nalazi se u gornjem levom uglu, neposredno ispod podataka o veliini slike. Ime koje pridruite slici je interno i terbalo bi da svim slikama date imena (kratka i napisana malim slivima bez razmaka i specijalnih znakova). Tekst iz polja alt prikazuje se umesto slike ako je posetilac onemoguio prikazivanje slika u svom browseru, ako njegov browser uopte ne moe da prikazuje slike ili ako uitavanje odreene slike nije uspelo. Umesto slike tada se prikazuje tekst koji ste upisali u polje alt. Svim grafikim objektima koji su neophodni za navigaciju po lokaciji morate upisati tekst u polje alt.


- 25 -

4.4 Panel Assets i Flash dugme Da ne bi pamtili svojstva svih slika, naroito na velikim sajtovima pomae vam panel Assets (slika 4.4.1). On se nalazi u grupi panela Files pored Site panela. Na ovom panelu moete raditi na dva naina, uz izabranu opciju Site, to daje celokupan spisak svih slika u sajtu, ili uz izabranu opciju Favorites, kada imate spisak u koji dodajete slike po izboru. Ako sajtu dodate novu sliku ona se nee odmah pojaviti na panelu Assets, zato je potrebno pritisnuti dugme Refresh Site List u donjem desnom uglu panela.

Da bi ubacili sliku na oznaeno mesto u dokumentu, jednostavno je izaberite sa panela Assets i kliknite insert. Preporuljivo je slikama odmah zadati imena i oznake da bi utedeli vreme i olakali kasniji rad. Jo jedan nain za utedu vremena je smetanje onih slika sa kojima esto radite u spisak Favorites. U ovaj spisak moete smestiti bilo koju sliku sadranu unutar osnovnog direktorijuma sajta, tako to ete je oznaiti u opciji Site i kliknuti dugme Add to Favorites u donjem desnom uglu. Kada izaberete grafiki objekat u spisku Favorites dugme Add to Favorites se pretvara u dugme Remove from Favorites, pa tako moete i ukloniti eljenu sliku iz ovog spiska. Za organizaciju slika panela Favorites koristi mogunost dodavanja foldera u spisak Favorites (dugme New favorites Folder).

Slika 4.4.1 Panel Assets Dodavanjem Flash objekata moete da postignete specijalne efekte. Flash dugmad ima nekoliko stanja u zavisnosti od poloaja pointera mia. Prvo stanje je izgled dugmeta kada pointer nije na njemu. Drugo stanje je kada pokaziva jeste na dugmetu ali taster mia nije pritisnut. Tree stanje je kada je pokaziva na dugmetu a taster pritisnut. Da bi napravili Flash dugme u panelu insert izaberite karticu Media i pritisnite ikonicu Flash dugmeta (slika 4.4.2). Otvorie se prozor Insert Flash Button (slika 4.4.3).

Slika 4.4.2 Kartica Media i Flash dugme


- 26 -

Slika 4.4.3 Izbor Flash dugmeta

U spisku Style izaberite stil dugmeta, u listi Font font a u polju Size odgovarajuu veliinu. Naravno sve ove parametre i kasnije moete promeniti. Ovde moete odrediti i boju pozadine dugmeta (polje BG color). Tekst dugmeta upisujete u polje Button Text, a ime pod kojim e te ga zapamtiti u Save As. Da bi videli efekte novog dugmeta pritisnite dugme Play na panelu Properties. Tada se dugme 'ponaa' ba onako kao u browseru. Za prekid probe tu je dugme Stop.


- 27 -

Poglavlje 5

Dizajniranje Web strana

U ovom poglavlju ete nauiti:

1. Da kreirate tabele u Layout i Standard prikazu 2. Menjate svojstva i elemente tabele 3. Pravite okvire za tabele i ugnjedene tabele

5.1 Kreiranje tabela u Layout i Standard prikazu

Jednostavne Web strane se brzo prave smetanjem teksta i slika neposredno na stranu. Meutim, tabele pruaju vie mogunosti za razmetanje elemenata na strani. One omoguavaju predstavljanje informacija na organizovan nain, jer sadre redove i kolone elija u koje se smeta sadraj. Vie elija se moe objediniti u velike elije. Prikaz Layout je slian programu za pravljenje rasporeda elemenata na strani, gde se crtaju pravougaonici u koje zatim ubacujete tekst i slike. Veliinu i raspored tih pravougaonika mogue je proizvoljno menjati. Da bi doli u prikaz Layout na panelu Insert izaberite karticu Layout i pritisnite opciju Layout View (Slika 5.1.1). Prikazae vam se obavetenje pod naslovom 'Getting Started in Layout View', koje ukratko opisuje osnovne alatle ovog prikaza.

Slika 5.1.1 Layout View

Alatka Draw Layout Cell slui za crtanje elija tj. Pravougaonika bilo gde na strani. Sadraj tabele je podeljen na njene elije, jer sve tabele imaju jednu ili vie elija u preseku kolona i redova. Kada oznaite ovu altku pokaziva se dovoenjem u prozor dokumenta menja u znak plus (+). Crtanje elije je jednostavno: dovedete pokaziva do eljenog mesta, zatim pritisnete mia i vuete ga dok kontura elije ne bude odgovarajue veliine. Automatski se iscrtava tabela irine prozora dokumenta (njenu veliinu je mogue menjati), i u njoj elija koju ste sami nacrtali (slika 5.1.2). Tabela je oznaena zelenom bojom, elija plavom, a svi ostali delovi tabele (osim elije) sivom bojom. Tanke bele linije naznaavaju redove i kolone koje je Dreamweaver nacrtao oko elije. Na vrhu tabele prikazuje se traka koja olakava prepoznavanje tabele i ona sadri meru irine kolona tabele i njihove podmenije.


- 28 -

Podmeni dobijate pritiskom na strelicu nadole, desno od broja koji prikazuje irinu kolone. elija se bira pritiskanjem njene ivice (tako da se vide njene ruice), ane postavljanjem tastera u nju. Tasteri sa strelicama pomeraju eliju za po jedan piksel. Ako pri tom drite taster Shift, pomerae se po 10 piksela. Prilikom crtanja elija pojavljuju se bele voice koje olakavaju crtanje drugih elija. Ako hoete da nacrtate vie elija bez stalnog pritiskanja dugmeta Draw Layout Cell, drite taster Ctrl. Unosom nekog objekta, npr. slike u eliju ona e se (ako je manja) automatski prilagoditi veliini slike. Ako je slika manja trebalo bi da sami promenite veliinu elije korienjem ruica. Postoji nekoliko karakteristika elija koje moete menjati. Moete da obojite pozadinu svake elije zasebno ili cele tabele. Takoe moete da kontroliete horizontalno i vertikalno poravnanje objekata unutar svake elije. Sadraj elije se u HTML-u standardno horizontalno poravnava sa levom ivicom elije, a vertikalno sa sredinom elije.

Slika 5.1.2 Layout prikaz; tabela i elije

U prikazu Layout moete da kontroliete irinu tabele na dva naina, korienjem podrazumevane irine (Fixed) ili opcije Autostrech koja prouzrokuje da elije automatski menjaju irinu u zavisnosti od irine prozora browsera. Izbor ovih opcija se vri u panelu Properties. Ukljuivanje automatskog odravanja irine kolone mogue je i u podmeniju u zaglavlju kolone izborom opcije Make Column Autostrech. Ukoliko slika za odravanje razmaka nije pridruena sajtu pojavie se prozor Choose Spacer Image, gde moete izabrati ve postojeu sliku za razmak ili kreirati novu. Ako odluite da ne koristite slike za odravanje razmaka, kolone menjaju veliinu, pa ak i nestaju, ukoliko nemaju sadraj. Koristei standardni prikaz prilikom izrade tabela moraete sami sve da uradite, ali ovom prikazu ne nedostaju prednosti. Naime, ovde su preciznost i kontrola izrade tabele dosta poveani. Standardni prikaz izabirate na kartici Layout panela Insert (slika 5.1.1). Prva


- 29 -

ikonica sa leve strane slui za unos tabele (Insert Table). Za unos tabele moe posluiti i dugme Table na kartici Tables panela Insert. Otvorie se prozor Insert Table (slika 5.1.3).

Slika 5.1.3 Unos tabele

Prozor za unos tabele sadri sledee parametre:

- Rows, broj redova tabele. Podrazumevana vrednost u Dreamweaveru je 3. - Columns, broj kolona tabele. Podrazumevana vrednost u Dreamweaveru je 3. - Width, irina tabele u pikselima ili u procentima irine prozora browsera. Za

precizno odreivanje rasporeda objekata bolje je koristiti dimenzije u pikselima. - Border, debljina ivice tabele. Podrazumevana dabljina je 1 piksel. - Cell Padding, razmak izmeu sadraja elija tabele i njenih ivica. Ako neete

razmak upiite nulu, a ako ostavite prazno polje bie izabrana podrazumevana vrednost od jednog piksela.

- Cell Spacing, razmak izmeu elija tabele, ne raunajui ivice. Prazno polje znai da je izabrana podrazumevana vrednost a to je 1 piksel. Takoe moete upisati nulu ako neete razmak.

Kada ste napravili tabelu potrebno ju je popuniti. Za kretanje izmeu elija moete koristiti tastere sa strelicama ili taster Tab. Ako preete u eliju koja ve ima sadraj, on e biti izabran kada koristite Tab. Ako imate tekst utabeli unutar nekog drugog dokumenta npr. Microsoftovog Worda, moete ga lako prebaciti u Dreamweaver. Tu tekstualnu datoteku treba snimiti u Wordu ili je exportovati u formatu 'comma delimited file (.cfs)', jer e tako Dreamweaver moi da je proita. Ovaj format moete koristiti i npr. u Excelu. Da bi uneli tekstualnu datoteku izaberite opciju menija , Import Tabular Data ili pritisnite ikonicu Tabular Data na kartici Common panela Insert i popunite prozor Import Tabular Data. Dobiete tabelu prema vrednostima parametara koje ste izabrali, u koju su uvezeni podaci iz izabrane tekstualne datoteke. Moete istovremeno da kopirate i prenesete vie elija, ne gubei njihovo formatiranje, a moete i da kopirate i prenosite samo sadraj elija. Moete kopirati i preneti jednu eliju na mestu izabrane elije, ali ne moete kopirati dve elije i preneti ih tako da zamene jednu eliju. Broj i orijentacija elija koje kopirate mora da odgovara broju i orijentaciji elija koje nameravate da zamenite. Kopiranje vie elija odjednom je mogue jedino ako one ine pravougaonik. Da bi izabrali sve elije tabele pritisnite eliju u gornjem levom uglu i prevucite miem do elije u donjem desnom uglu. Izabrane elije imaju crne ivice. Ovim nainom izabrali ste sve elije tabele, ali ne i samu tabelu. Izbor tabele se vri na sledei nain: oznaite bilo koju eliju tabele i izaberite HTML oznaku u birau oznaka (Tag Selector) u donjem levom uglu prozora dokumenta. Takoe tabelu moete oznaiti pritiskom na njen gornji levi ili desni ugao ili na donju ili desnu ivicu. Kada izaberete tabelu oko nje se prikazuju ruice za promenu veliine.


- 30 -

Osim HTML oznake , u birau oznaka prikazuju se i oznake i . Oznaka predstavlja red, a podatke (eliju tabele). Izabrane elije ili celu tabelu moete obrisati tasterom Backspace.

5.2 Promena svojstava i elemenata tabele Veliinu tabele je lako promeniti i lako joj je dodati nekoliko kolona ili redova. Da biste proirili tabelu dovedite pokaziva mia na desnu ivicu tabele i kad se on pretvori u dvostranu strelicu povucite ivicu kolone u desno. Da bi dodali novi red pritisnite taster Tab ako je pokaziva u poslednjoj eliji tabele. Kada oznaite dve ili vie susednih elija istog reda ili kolone moete da ih pretvorite u jednu eliju pritiskom na dugme Merge cells (slika 5.2.1). Na isti nain moete da podelite eliju na vie manjih, pomou dugmeta Split cell. Ne moete objedinjavati elije u obliku slova 'L'. Izborom opcije menija Modify > Table > Insert Rows or Columns mogue je uneti proizvoljan broj redova ili kolona u tabelu. Mogu se izabrati i nesusedne elije, dranjem tastera Ctrl. Samo kopiranje i prenoenje nesusednih elija nije mogue. Promena boje pozadine pojedinih elija , vie elija ili cele tabele, u zavisnosti od opsega elija koji je izabran, je mogu na panelu Properties (slika 5.2.1). Isto tako i dodavanje ili promena pozadinske slike. Podrazumevano horizontalno poravnjanje je Left (poravnata je leva ivica sadraja elije) a podrazumevano vertikalno pravnanje je Middle (sadraj elije poravnava se po visini sa sredinom svake elije).

Poravnanje po horizontali

Poravnanje po vertikali

Bez prelamanja teksta

Pozadinska slika

Merge (objedinjavanje elija)

irina i visina

Split (delenje)

Slika 5.2.1. Karakteristike elije tabele

Boja ivice elije

Boja pozadine Zaglavlje

Inae u donjoj polovini panoa Properties nalaze se polja za zadavanje sledeih karakteristika elije:

- Merge, objedinjuje dve ili vie elija u jednu, - Split, deli eliju na vie elija


- 31 -

- Horz, sadraj elije poravnava po horizontali (opcija default za obine elije poravnanje u levo, a za elije prvog reda centriranje)

- Vert, sadraj elije poravnava po vertikali (default poravnanje po sredini) - W i H, zadaje visinu i irinu izabranih elija u pikselima. Ako hoete da zadate

dimenzije u procentima upiite znak procenta posle numerike vrednosti. - No Wrap, spreava prelamanje teksta elije; irina elije se prilagoava koliini

teksta koji u nju upiete. Obono se elije proiruju horizontalno, tako da stane najdua re, a zatim vertikalno kako dodajete tekst.

- Header, formatira svaku eliju kao da je u zaglavlju tabele (bold i centrirano), - BG (gornje), zadaje pozadinsku sliku izabranog opsega elija, - BG (donje), zadaje boju pozadine izabranog opsega elija, - Brdr, zadaje boju ivice elije.

Sortiranje tabele se postie sortiranjem sadraje njenih kolona. Ne mogu se sortirati tabele koje nemaju jednak broj elija u svakoj koloni. Oznaite tabelu koju elite da sortirate. Iz menija Commands izaberite Sort Table. Da bi sortirali tabelu morate da zadate sledee parametre:

- Sort By, izaberite kolone koje treba sortirati, - Order, zadajte abecedno ili numeriko sortiranje i izaberite rastui (Ascending) ili

opadajui (Descending). - Then By, ovo polje slui za zadavanje sekundarnog sortiranja po nekoj drugoj

koloni, - Sort Includes First Row, daje mogunost sortiranja i prvog reda (ako nije

zaglavlje), - Keep TR attributes with sorted Row, ova opcija omoguava zadravanje

odgovarajuih atributa (boja, pozadinska slika...) odreenog reda tabele i na svom novom mestu u tabeli.

U prikazu standard moete da pravite i tabele sa slikama. Tabele se esto koriste za rasporeivanje vie slika na strani ili za sklapanje slike koja je bila iseena na delove. Slika se deli na vie manjih delova da bi se optimizovale za Web (smanjuje se veliina datoteke uz zadravanje najveeg mogueg kvaliteta slike). Kada u Dreamweaveru umetnete slike u elije tabele, prazne elije se toliko smanje da izgleda kao da ih nema. U tom sluaju koristite tastere sa strelicama za dolazak do tih elija. Kada dovedete pokaziva u skupljenu eliju ona e poeti da se iri im upiete malo teksta u nju. Vano je da uklonite suvine znakove i tekst iz tabela u koje ubacujete sliku, jer oni mogu uzrokovati razne probleme naroito ako je veliina tabele proraunata tano za odreene slike.

5.3. Ugnjedavanje tabela i pravljenje okvira Ugnjedena tabela je smetena u eliju druge tabele. Ugnjrdavanje tabela omoguava izradu sloenijih strana, iako je svaka od tih tabela pojedinano veoma jednostavna. Preporuljivo je praviti tabelu koju treba da ugnjezdite izvan tabele u koju je ugnjedavate, jer joj se tako jasno vide ivice dok umeete potrebne slike i ostalu sadrinu. Takoe treba voditi rauna o tome da isprekidane linije u Dreamweaveru zauzimaju po jedan piksel irine i da samim tim tabela izgleda vee nego to jeste, jer se ti dodatni pikseli ne vide u


- 32 -

browserima. Sam postupak ugnjedavanja se obavlja funkcijama Copy i Paste, menija Edit (moete koristiti i Cut ako elite da istovremeno kopirate i uklonite malu tabelu). Nemojte koristiti ugnjedavanje tabela dublje od etri-pet nivoa, jer jednostavniji raspored strane znai i da e HTML kod biti jednostavniji, pa e se strana bre uitavati i lake ete otkriti i otkloniti greke u kodu. Tabelu moete uokviriti zadavanjem debljine okvira (ivice) u polju Border na panelu Properties. Meutim, tako dobijeni okviri se nejednako prikazuju u razliitim browserima, stoga je preporuljivo koristiti ugnjedene tabele za pravljenje okvira. Dakle, treba napraviti tabelu (recimo sa jednim redom i jednom kolonom) kod koje e udaljenost sadraja od ivica elija biti minimum jedan i u nju uneti novu tabelu irine 100% (tako se i upie). Ova tehnika omoguava bolju kontrolu izgleda okvira tabele. Ako zadate veu udaljenost sadraja elija od njihovih ivica (Cell Padding) kod spoljne tabele, dobiete deblji okvir tabele.


- 33 -

Poglavlje 6

Hiperveze (linkovi)

U ovom poglavlju nauiete: 1. Da napravite tekstualne i grafike hiperveze i hiperveze za slanje elektronske pote 2. Upotrebite sidra za prelaenje na razliite delove strane 3. Napravite mapirane slike koje imaju po nekoliko hiperveza

6.1 Pravljenje tekstualnih i grafikih hiperveza

Mo HTML-a potie od njegove ugraene mogunosti da povee tekstualna i grafika podruja sa drugim dokumentima. Browser obino istie ta podruja (bojom ili podvlaenjem) kako bi ukazao korisniku da su to hipertekstualne veze. Hiperveza u HTML-u ima dva dela: ime (ili URL adresu) datoteke s kojom se povezuje i tekst ili grafiku koja slui kao podruje koje se moe kliknuti i naziva se aktivno podruje (hotspot) na strani. Kada posetilac klikne na aktivno podruje, browser koristi putanju hiperveze za skok do povezanog dokumenta. Da bi zadali boje pojedinih vrsta hiperveza izaberite opciju menija Modify Page Properties (slika 6.1.1):

- Hiperveze (links), poetna boja koju korisnik vidi pre nego to pritisne hipervezu. Podrazumevana boja u browserima je plava.

- Poseene hiperveze (visited links), boja u koju hiperveza pree kada je korisnik pritisne. Standardna u browseru je ljubiasta,

- Aktivne hiperveze (active links), boja u koju hiperveza pree kada je korisnik pritisne i zadri taster mia pritisnut. Podrazumevana boja je crvena.

Pritisnite OK kada ste odredili boje hiperveza i sauvajte stranu.

Slika 6.1.1 Definisanje boja hiperveza

Kako je ve reeno, hiperveze vode posetioca do drugih dokumenata unutar tekue Web strane ili do strana na drugim lokacijama. Postoje dva opta pristupa kreiranja hiperveza (linkova): napraviti set praznih strana, zatim ih povezati, i na kraju stavljti sadraj u njih; ili kreirati link na stranu koja jo ne postoji, pa je tek kasnije formirati i dati joj ime koje ste ve


- 34 -

naveli pri kreiranju linka. Napraviti hipertekstualnu vezu je veoma jednostavno (slika 6.1.2). Treba oznaiti odreen deo teksta (1), na panou Properties pritisnuti drugu ikonicu desno od polja link (2). Otvorie se prozor Select File u kome treba izabrati stranu sa kojom elimo da napravimo vezu (3). Pritisnite OK (4) i ime te strane pojavie se u polju Link, a tekst koji ste izabrali bie oznaen kao hiperveza (5) i imae boju koju ste mu odredili u Page Properties-u.

Slika 6.1.2 Pravljenje hipertekstualne veze

Postoji jo jedan, jednostavniji, nain za kreiranje linka (slika 6.1.3). Kao i pre oznaite eljeni tekst (1), a zatim na panelu Properties pritisnite prvu ikonicu (2) do polja Link (Point to File), zadrati taster mia pritisnut i prevui pokaziva do Site Panela (3). Pustite taster tano iznad strane sa kojom elite da napravite link (4). I link je napravljen (5).

Slika 6.1.3 Drugi nain kreiranja linka


- 35 -

Ako znate imena strana sa kojima se povezujete, moete ih upisati neposredno u polje link. Ukoliko iste hiperveze koristite vie puta, utedeete vreme ako u padajuoj listi desno od polja linka (pano Properties) izaberete neku od nedavno korienih hiperveza. Kada ste napravili hipervezu(e) obavezno je proverite (da li vodi do eljene strane) u vaem browseru (F12). Ovako napravljen link je primer relativne putanje (u prozoru Select File, izaberite Document za opciju Relative Tool) to je najbolja varijanta za lokalne hiperveze na veini sajtova. Relativna putanja izostavlja deo apsolutne URL adrese koji je isti za tekuu stranu i za stranu povezanu sa njom, a ostavlja onaj deo koji se razlikuje. Link do strane u istom direktorijumu, npr. bio bi druga.htm. Za povezivanje sa stranama unutar sajta, kao i sa drugim Web lokacijama, moete da upotrebite i slike. Postupak kreiranja grafike hiperveze je isti kao i postupak kreiranja tekstualne veze. Jedina razlika je u tome to sada biramo odreenu sliku a ne tekst. Da bi napravili link koji e biti apsolutna putanja (koji e sadrati celokupnu URL adresu povezanog dokumenta), potrebno je selektovati neku sliku ili tekst i u polju Link na panelu Properties upisati celokupnu URL adresu, npr. http://www.fon.bg.ac.yu/ . Kada u browseru pokazivaem preete iznad slike, on se pretvara u aku koja pokazuje da je slika povezana hipervezom. Ako slika ima okvir, boja okvira e biti jednaka podrazumevanoj boji hiperveze, koju ste zadali u panelu Page Properties-u. Kada posetilac pomou linka ode na odreenu Web stranu, ona obino zameni tekuu stranu njegovog browsera. Meutim, ponekad je pogodnije da se nova strana prikae u drugom prozoru, jer ako ste, npr. link usmerili prema dokumentu van vae lokacije, posetioca ete izvesti van vaih strana. Pa ukoliko on nije zapamtio URL adresu vaeg sajta, moda nee znati da se vrati na nju. Ako se spoljna hiperveza otvori u novom prozoru browsera, originalna strana ostaje prikazana na prvom prozoru. U Dreamweaveru se mesto prikazivanja strane na koju dospevate pritiskom na hiprvezu, zadaje usmeravanjem ka cilju (target), a to se vri u polju Target, odmah ispod polja Link na panelu Properties. Osim opcije _blank, ostali ciljevi se korise uz okvire (frames) o kojima e biti govora kasnije. Ciljevi mogu biti:

- _blank, uitava povezanu stranu u nov prozor, - _parent, uitava povezanu stranu u roditeljski skup okvira, ili prozor onog okvira

koji sadri hipervezu, - _self, uitava povezanu stranu u isti okvir ili prozor koji sadri hipervezu (ovo je

podrazumevani cilj), - _top, uitava povezanu stranu i njime ispunjava prozor browsera, ime uklanja sve

okvire sa ekrana. Pravljenje hiperveza za slanje elektronske pote je veoma znaajno, jer na taj nain olakavate posetiocima da se poveu sa vama. Oznaite mesto na strani gde elite da umetnete hipervezu za slanje Emaila. Na panelu Insert, kartici Common pritisnite dugme za hipervezu sa slanje poruka (Email Link). Pojavie se prozor Email Link (slika 6.1.4), gde unosite tekst (koji e se prikazati na strani kao hiper veza) i Email adresu. Ako prethodno izaberete tekst koji se ve nalazi na strani i zatim otvorite prozor Email Link izabrani tekst e se pojaviti u polju tekst.


- 36 -

Slika 6.1.4 Prozor za formiranje Email linka

U polje Link na panou Properties upiite mailto: i zatim bez razmaka Email adresu (slika 6.1.5). Tako ste 'runo' napravil vezu sa slanje Email pote.

Slika 6.1.5 Unos linka za Email

6.2 Umetanje sidara i povezivanje sa njima Kada je dokument dugaak ili ima mnogo odeljaka, obino se pravi niz hiperveza koje odvode posetioca na odreeno mesto u dokumentu. Sidro (named anchor) oznaava mesto na strani na koje dovodi hiperveza. Na slici 6.2.1 je ukratko prikazan nain kreiranja sidra i veze sa njim. Postavite kursor na neki deo strane (gde elite da umetnete sidro, obino pri kraju strane). Pritisnite dugme Named Anchor (1) na kartici Common na panelu Insert. Otvara se prozor gde treba da unesete ime sidra (2). Ime sidra ne sme da sadri razmake, znakove interpunkcije i specijalne znake. Svako sidro na strani mora imati jedinstveno ime, inae browser nee znati na koje od istoimenih sidara da ode. Na strani, sidro je predstavljeno utom ikonicom (3) koja se inae ne vidi u browseru. Jo jedan nain za unos sidra je opcija Insert > Named Anchor. Sada na strani (obino na vrhu) izaberite tekst (4) koji e odvesti posetioca na odgovarajui odeljak strane (do odgovarajueg sidra). Da bi pretvorili taj tekst u hipervezu koja referencira sidro u panelu Properties, u polje Link upiite #imesidra (7) i kliknite Enter. Znak # govori browseru da je ovaj link unutranji, tj. da se zadrava na originalnoj strani. Ime koje ste upisali posle znaka # mora biti identino imenu sidra. Ako sidro umetnete na pogreno mesto, moete ga premestiti prevlaenjem. Drugi nain za izradu linka sa sidrom je da oznaite eljeni tekst (4), kliknete ikonicu Point to File (5) (prva ikonica do polja Link u panelu Properties) i prevuete ikonicu (6) do sidra koje ste prethodno napravili (1,2,3) (pustite taster mia tano iznad sidra). Ovaj nain je sigurniji jer korienje ikonice Point to File smanjuje verovatnou da ete pogreno otkucati ime sidra.


- 37 -

Slika 6.2.1 Kreiranje sidra i veze sa njim

Na dugakim stranama uobiajeno je da se na kraj svakog odeljka stavi link do sidra na vrhu strane ili do navigacionog sadraja. Ovo sidro obino se zove #top. U ovom sluaju korisnici ne moraju da premotavaju stranu do vrha kako bi doli do linkova za prelazak na druge odeljke. Broj linkova na jednoj strani koji referenciraju isto sidro je neogranien.

6.3 Mapirane slike U ovoj lekciji nastavljamo da radimo sa sidrima. Kroz izradu mapiranih slika videete kako se pravi link sa odreenim odeljkom drugog dokumenta. Sliku na strani moete da podelite na nekoliko hiperveza pomou mapirane slike (image map), to je naziv za sliku sa vie aktivnih podruja. Ta aktivna podruja mogu imati razne oblike (pavougaona, kruna, oblik poligona). Izaberite sliku na strani na kojoj elite da napravite aktivna podruja. U polje Map na panelu Properties upiite eljeno ime ove slike (sada mape). Ono ne sme da sadri razmake i specijalne znake. Svaka mapirana slika na strani mora imati drukije ime. Ako zaboravite da mapiranim slikama date ime, Dreamweaver e to uraditi umesto vas (Map1, Map2, Map3,...). Sada izaberite jednu od alatki za crtanje aktivnih podruja (Slika 6.3.1). Oko odreenog dela slike (dela koji elite da postane aktivno podruje) nacrtajte aktivno podruje (providno plavozeleno) drei pokaziva mia (slika 6.3.2). Pomou alatke za pokazivaka aktivna podruja (Pointer Hotspot) moete koristei ruice tog podruja fino da ga podesite oko nekog dela slike, ili da ga pomerate (drei taster iznad tog podruja). Ako hoete da uklonite aktivno podruje, izaberite ga i pritisnite Backspace.


- 38 -

Slika 6.3.1 Alatke za mapirane slike

Slika 6.3.2 Mapirana slika

Da bi napravili link za aktivno podruje, treba ga oznaiti i u polje Link na panelu Properties upisati adresu strane ili Web sajta na koju elimo da dovedemo posetioca kada klikne na deo slike sa tim aktivnim podrujem (prethodno treba obrisati znak # koga Dreamweaver automatski upisuje u polje link kada napravite aktivno podruje). Da bi, npr. napravili link do sidra na drugoj strani naeg sajta treba upisati npr: imedrugestrane.htm#imesidra (ako je druga strana u istom direktorijumu kao i ona u kojoj pravimo mapiranu sliku; a ako je u drugom direktorijumu bilo bi imedirektorijuma/drugastrana#imesidra). Sidra koja omoguavaju povezivanje sa razliitim delovima drugih strana, poveavaju funkcionalnost sajta, odmah usmeravaju posetioce na ono to trae i skrauju vreme potrebno za premotavanje velikih strana. Ako mapiranu sliku kopirate na drugu stranu , Dreamweaver e u kopiji zadrati sve linkove i aktivna podruja.


- 39 -

Poglavlje 7

Izrada interaktivnih strana

U ovom poglavlju ete nauiti: 1. Da napravite sliku s prelazom (Rollover Image) 2. Da otvorite nov prozor browsera 3. Napravite iskaui meni

7.1 Rollover Image U ovoj lekciji upotrebiete posebne skriptove, koji se u Dreamweaveru zovu 'ponaanja', (behaviors), za pravljenje slika sa prelazima, novih prozora browsera i iskauih menija. Skript kombinuje odreeni dogaaj koji je izazvao korisnik (npr. dovoenje pokazivaa mia iznad nekog dugmeta u itau) sa jednom ili vie akcija koje su posledica tog dogaaja. U pozadini 'ponaanja' lei gotov JavaScript kod. JavaScript se na Web stranama esto koristi za pravljenje slika sa prelazom slika koje se menjaju kada posetilac dovede pokaziva mia iznad njih. U Dreamweaveru moete napraviti ovakve slike a da pritom ne bacite nijedan pogled u HTML i JavaScript kod. Da bi napravili sliku s prelazom na izabranom mestu na strani pritisnite dugme Rollover Image na traci Common panela Insert. Otvorie se prozor Insert Rollover Image (slika 7.1.1).

Slika 7.1.1 Prozor za formiranje slike sa prelazom


- 40 -

Poeljno je da date ime slici (ako to ne uradite Dreamweaver automatski dodaje svoja imena npr. Image1, Image2, ...). Ta imena moraju biti smislena i ukazivati na namenu slika. U imenima ne sme biti razmaka i specijalnih znaka. Prvo treba da unesete sliku koja e biti original, tj. Sliku koja e biti na strani pre nego to posetilac dovede pokaziva mia iznad nje (dugme Browse do polja Original Image). Zatim treba da unesete sliku koja e se pojaviti kada posetilac pree pokazivaem preko originalne slike (dugme Browse do polja Rollover Image). Slika sa prelazom koja se pojavljuje na poetku i ona koja je zamenjuje treba da imaju iste dimenzije, ine e druga slika biti smanjena ili uveana u skladu s dimenzijama prve slike i zato izobliena. Takoe odmah moete napraviti grafiku hipervezu unosei u polje 'When Click, Go To URL' URL adresu ili putanju do povezane strane. Ako ne upiete nita u ovo polje, Dreamweaver upisati znak #, u polje link na panelu Properties. Taj znak saoptava browseru da pokaziva mia pretvori u aku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani kada klikne na nju. Ovdje moete zameniti ovaj znak proizvoljnom hipervezom ka drugoj strani istog sajta ili bilo kakvom URL adresom, ali ne smete ovo polje ostaviti prazno jer ete tako ukloniti JavaScript kod koji izvrava prelaz sa jedne slike na drugu. Ova metoda je dobra ako prethodno niste uneli sliku, jer omoguava da istovremeno unesete sliku i da je definiete kao sliku s prelazom. Naravno mogue je i slici koja je ve na strani dodati prelaze i to pomou panela Behaviors iz grupe panela Design. Sliku kojoj zelite dodati prelaz oznaite, na panou Behaviors pritisnite dugme sa znakom (+) i izaberite opciju Swap Image (engl. swap zamena).

Slika 7.1.2 Formiranje prelaza za postojeu sliku

Pojavie se prozor Swap Image gde u spisku Images treba izabrati sliku koja e biti zamenjena (original). Ako slikama niste dali imena one se ovde navode kao 'unnamed '. Zato je vano slikama dati odgovarajua imena (kako ete izmeu bezimenih slika izabrati onu koja vam treba?). Sada pritiskom na dugme Browse do polja Set Source to: izaberite sliku koja e zameniti originalnu. Uobiajeno je (radi lakeg snalaenja) imenu poetne (originalne slike) dodati sufiks _off, a imenu slike koja zamenjuje originalnu sufiks


- 41 -

_on. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj je pridruen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload Image i Restore Image onMouseOut obavezno potvrdite. Opcijom Preload Image izbegavate kanjenje koje bi uzrokovalo uitavanje zamenske slike tek kada posetilac pree preko poetne slike, a opcijom Restore Image onMouseOut obezbeujete da se zamenska slika zameni poetnom kada kada posetilac pomeri pokaziva mia izvan nje. Pritisnite ok i formirali ste prelaz za postojeu sliku, to se vidi i u panelu Behaviors kada oznaite sliku (vidite spisak akcija - Actions koje izvrava Dreamweaver, u zavisnosti od odreenog dogaaja Events u browseru posetioca). Moete da zamenite vie slika istovremeno kao posledicu istog dogaaja. Npr. kada posetilac dovede pokaziva mia iznad jedne slike, dve slike mogu da budu zamenjene, odnosno da preu iz svojih poetnih stanja u zamenska stanja. Za to je potrebno da napravite jednu Rollover sliku. Zatim da na panelu Behaviors dva puta kliknete na akciju Swap Image. Otvorie se prozor Swap Image, dakle isti onaj koji smo koristili za izradu te Rollover slike. Sada u spisku Images izaberite tu drugu sliku strane koja e se zameniti svojom zamenom. Kada odredite zamensku sliku za tu drugu sliku (u polju Set Source to:) pritisnite OK i 'isprobajte' stranu u browseru. Kada preete pokazivaem mia preko prve slike, i ona, i druga slika se menjaju svojim zamenskim slikama koje ste zadali. Imajte u vidu da mnogo ovakvih efekata prelaza moe prilino da uspori rad korisnikovog browsera. Ponekad je potrebno da se prelazak odigra samo kada postilac klikne na odreeni deo slike. To bi to napravili prvo mapirajte sliku (napravite na njoj jedno ili vie aktivnih prostora), oznaite aktivni prostor koji treba da izazove zamenu mapirane slike (dakle, samo klikom na taj deo slike vri se njena zamena), pritisnite dugme (+) na panelu Behaviors i u podmeniju izaberite akciju Swap Image....(dalji postupak je identian izradi obine Rollover slike). Akcije i dogaeaje moete da menjate na nekoliko naina. Moete da promenite dogaaj na akciji koja odgovara, da pridruite vie akcija istom dogaaju i da menjate redosled izvravanja tih akcija. Na primer, Swap Image je akcija, a onMouseOver dogaaj koji odgovaraju skriptu za sliku sa prelazom. Da bi dodali akciju poruke koja iskae izaberite sliku na strani pritisnite (+) na panelu Behaviors i u padajuem meniju akcija izaberite akciju Popup Message. Otvorie se prozor u koji treba da upiete poruku. Pritisnite OK i na panelu Behaviors ete videti da je akcija (skript) Popup Message pridruena odgovarajuem dogaaju. Da bi promenili taj dogaaj oznaite ga i pritisnite strelicu nadole desno od njega. Pojavljuje se lista moguih dogaaja (slika 7.1.3). Na dnu ove liste nalazi se opcija Show Events For u kome birate tip itaa za prikazivanje dogaaja. U zavisnosti od akcije i itaa koje ste izabrali menjaju se i dogaaji u meniju. U zagradama se prikazuju dogaaji za koje je potrebno sidro smeteno oko objekta. Ako pravite sliku sa prelazom Dreamweaver e automatski napraviti potrebno sidro tako to e uneti znak # u polje Link panela Properties, a ako ne, morate sami da unesete ovaj znak ili aktivnu hipervezu u ovo polje. Browser izvrava akcije po njihovom redosledu u spisku. Taj redosled moete promeniti pomou strelica gore-dole u gornjem desnom uglu panela Behaviors. Nemojte dodavati previe poruka ni slika koje iskau, jer one brzo dosade posetiocu. Da bi eljenu akciju-dogaaj izbrisli, oznaite ih i pritisnite znak (-) koji se nalazi odmah do znaka (+).


- 42 -

Slika 7.1.3 Izbor dogaaja

. Poruka na statusnoj traci je poruka koja se pojavljuje na statusnoj traci u dnu browsera, zamenjuje podrazumevano prikazivanje URL adrese ili putanje do povezane strane, i daje posetiocu kratak opis sadrine na koju vodi hiperveza (pomae mu pri kretanju po sajtu). Da bi je uneli, izaberite sliku na strani, pritisnite dugme (+) na panelu Behaviors i izaberite akciju Set Text > Set Text of Status Bar. Otvara se prozor u koji unosite poruku. Pritisnite OK i sada moete izabrati dogaaj koji e pokrenuti tu akciju (ispis poruke na statusnoj traci). Obino je to (onMouseOver).

7.2 Otvaranje novog prozora browsera Ova lekcija pokazuje kako se otvara nov prozor browsera kada se strana uita, to se koristi za reklame i mnotvo drugih informacija. Ranije je reeno da nov prozor otvara i standardna hiperveza kojoj zadate cilj _blank, ali tako ne moete da kontroliete atribute tog prozora. Nasuprot toj opciji skript Open Browser Window omoguava kontrolisanje veliine i mnogih drugih atributa novog prozora, kao to su trake za pomeranje i trake s menijima. Oznaite deo teksta od koga elite da napravite link ka strani koja e se otvoriti u novom prozoru. Zatim u polje Link panela Properties unesite znak #. Ovaj znak omoguava da mu dodelite skript Open Browser Window. Pritisnite znak (+) na panelu Behaviors i izaberite akciju Open Browser Window. Otvorie se istoimeni prozor (slika 7.2.1). Pritiskom na dugme izabirate stranu koja e se uitati u nov prozor (ili unesite URL adresu strane). U poljima Window Width i Window Height unosite irinu i visinu prozora, respektivno. Ako prikazujete reklamu zadajte veliinu novog prozora prema irini i visini reklamne slike. Sledei atributi koje moete zadati su:


- 43 -

- Navigation Toolbar, red dugmadi za navigaciju, meu kojima su Back, Forward, Home i Reload,

Slika 7.2.1 Definisanje novog prozora browsera

- Location Toolbar, red opcija meu kojima je i polje za adresu, - Status Bar, podruje na dnu prozora browsera u kome se prikazuju poruke (URL

adresa, preostalo vreme za uitavanje,...), - Menu Bar, podruje prozora browsera u kome se prikazuju meniji File, Edit, View,

Go i Help. Ako elite da posetioci mogu da krstare iz ovog prozora potvrdite ovo polje, u protivnom e oni samo moi da ga minimiziraju ili zatvore,

- Scrollbars as Needed, prikazuje trake za pomeranje ako je sadrina strane vea od vidljive povrine novog prozora. Ako je iskljuena i sledea opcija, Resize Handles (prikazivanje ruica za promenu veliine prozora), posetioci uopte nee moi da vide ostatak sadrine koji nije stao u prvobitnu veliinu novig prozora. U tom sluaju zadajte veliinu novog prozora tako da odgovara celokupnoj sadrini strane.

- Resize Handles, daje mogunost posetiocu da promeni veliinu prozora, bilo povlaenjem ruica, bilo pritiskom na dugme Maximize,

- Window Name, ime novog prozora, ako hoete da usmeravate linkove na ovaj prozor ili da ga kontroliete JavaScript kodom.

7.3 Iskaui (Pop-Up) meni Skriptove za iskaue menije moete da ukljuite meu ostale elemente za kretanje po prezentaciji, kako biste posetiocima pruili spisak mogunosti iz kog e birati. Iskaui meni moemo pridruiti slikama ili aktivnim podrujima mapiranih slika. Recimo da elimo da ga pridruimo odreenom aktivnom podruju mapirane slike. Za to je potrebno da oznaite taj aktivni deo, pritisnete znak (+) na panelu Behaviors i u meniju akcija izaberite skript Show Pop-Up Menu. Pokazae se istimeni prozor sa aktivnom karticom Contents (slika 7.3.1). Tu zadajete opcije koje e sadrati va meni, tako to u polju Text upisujete ime opcije (podrazumevani tekst New Item briete), a u polju Link, hipervezu za tu opciju. Pritiskom na dugme (+) u polju Menu iznad polja Text, dodajete nove opcije


- 44 -

vaem meniju (naravno, ponovo im morate dati ime i link). Za promenu redosleda opcija oznaite opciju i pritiskajte dugmad gore-dole.

Slika 7.3.1 Prikaz Pop-Up menija

Ako hoete da uklonite opciju iz menija izaberite je i pritisnite dugme (-). Moete da pravite i podmenije, izborom opcije koja treba da postane podmeni prethodne opcije u meniju i pritiskom na dugme sa sliicom smaknutog srednjeg pravougaonika. Ako hoete da premestite opciju u podmeni vieg nivoa, pritisnite dugme sa sliicom poravnatih pravougaonika. Na kartici Appearance (slika 7.3.2) izabirate orijentaciju menija horizontalno-vertikalno, font, veliinu slova, poravnanje teksta. Takoe moete odrediti boju elije i teksta kada pokaziva mia nije na njoj i obrnuto.

Slika 7.3.2 Definisanje izgleda Pop-up menija

Na kartici Advanced, birate irinu i visinu elije (najea opcija je Automatic), udaljenost sadraja elije od ivica menija (Cell Padding), razmak elija (Cell Spacing), uvlaenje


- 45 -

teksta od ivice menija (Text Indent), vreme potrebno za zatvaranje menija kada posetilac pomeri pokaziva van njega (Menu Delay), pojavljivanje okvira i njegovu debljinu (Border width), boju okvira i boju senke opcije (Shadow). Na kartici Position birate poziciju menija u odnosu na objekat koji ga aktivira. Mogue varijante su prikazane na slici 7.3.2. Obavezno oznaite opciju Hide Menu on onMouseOut (da bi meni nestao kada pomerite pokaziva mia sa njega). U poljima X i Y se nalaze udaljenosti menija od objekta koje su unapred date u zavisnosti od izabrane pozicije, a moete ih i promeniti.

Slika 7.3.2 Mogui poloaj menija


Poglavlje 8

Rad sa bibliotekom


1. Da napravite elemente biblioteke i da ih postavite na stranu 2. Promenite elemente biblioteke 3. Napravite i promenite elemente biblioteke koji sadre skriptove

8.1 Pravljenje i postavljanje elemenata biblioteke Ima mnogo elemenata i grupa elemenata koji se ponavljaju na vie strana sajta (elementi za kretanje po sajtu, informacije o autorskim pravima, zaglavlja, podnoja...). Dreamweaver omoguava da se ovi, esto korieni elementi snime u biblioteku elemenata. Biblioteka elemenata omoguava da izmenite pojedine elemente i da potom jednom naredbom aurirate sve strane koje sadre taj element. Da ne postoje biblioteke elemenata morali biste runo da menjate elemente i njihove parametre na svim stranama pojedinano. Element biblioteke pravite tako to izaberete jedan ili vie elemenata strane (sve ono to se nalazi izmeu oznaka i ) i ukljuite ga u biblioteku. Takav element, dakle, postaje sadrina biblioteke i sada ga ne moete menjati na strani. Element koji je sadran u CSS stilu zadrava parametre koje je dobio od tog stila, ali kada ga unesete na stranu kojoj niste dodelili stil, on se na njoj prikazuje bez parametara stila. Da bi naprav oraju da ine kontinualno po etvorite u vie elemenata bibl Element biblio im stranama ili slikama) moeu stranu direkautomatski utv Da bi doli do(slika 8.1.1). elemenat biblinaina za pravAssets i izbor ikonica Untitleili element biblioteke od vie elemenata strane, ono mdruje strane. Nesusedne elemente strane morate da pr

ioteke.

teke koji sadri relativne putanje (kao to su linkovi ka drug- 46 -

biti unet na bilo koji nivo u strukturi direktorijuma sajta (ako je element unet torijuma u kome nije strana sa koje je formiran ovaj element, Dreamweaver ruje ispravnu putanju).

biblioteke na panelu Assets grupe panela Files pritisnite ikonicu Library Da bi dodali izabrane objekte sa strane u biblioteku (napravili od njih oteke) jednostavno ih prevucite u donju polovinu panela Library. Jo dva ljenje novog elementa biblioteke su dugme New Library Item na dnu panela opcije menija Modify > Library > Add Object to Library. Pojavie se nova d u donjem delu panelu Library, a u gornjem novi element biblioteke


- 47 -

napravljen od elemenata koje ste izabrali na strani. Sada imenujte taj novi element, promenom imena Untitled i pritiskom na Enter. Ova imena slue samo vama i ne vide se u prozoru browsera. Kada od nekog objekta napravite element biblioteke on dobija bledoutu pozadinu, to oznaava i da se ne moe menjati neposredno na strani. Sada se ovaj objekat smatra celinom pa e se pritiskanjem bilo kog njegovog dela izabrati ceo element biblioteke. Kada napravite element biblioteke Dreamweaver pravi direktorijum Library na najviem nivou lokalnog korenskog direktorijuma i u njega smeta sve elemente biblioteke sa nastavkom .lbi.Taj direktorijum sa elementima biblioteke ne treba slati na server, on nam slui samo lokalno, za laki razvoj i odravanje sajta.

Brisanje elementa

Promena elementa biblioteke

Pravljenje novog elementa

Osveavanje sajta

Unos elemenata biblioteke

Ikonica biblioteke (Library)

Slika 8.1.1 Panel Library

Za unos elementa biblioteke na stranu potrebno je oznaiti eljeno mesto unosa i iz panela Library prevui eljeni element na to mesto, ili pritisnuti dugme Insert u donjem levom uglu panela. Unosom elementa biblioteke na stranu, unosite sadrinu njegove datoteke i njegovu referencu. Za odravanje elementa biblioteke, izabranog na strani, upotrebite karakteristike elemenata biblioteke prikazane na panelu Properties (slika 8.1.2)

Slika 8.1.2 Karakteristike elemenata biblioteke

- Src, prikazuje ime i lokaciju izvorne datoteke izabranog elementa, - Open, slui za otvaranje datoteku elementa biblioteke radi izmena, da biste

sauvali izmene snimite datoteku,


- 48 -

- Detach from Original, raskida vezu izmeu izabranog elementa i njegove izvorne datoteke. Sadrina elementa moe se , nakon raskida veze, menjati neposredno na strani, ali se ne moe aurirati funkcijama biblioteke,

- Recreate, slui za ponovno pravljenje elemenata biblioteke, koji su obrisani, promenjeni ili im je promenjeno ime.

Da bi uneli element na stranu i u isto vreme raskinuli vezu sa izvornom datotekom u biblioteci, drite taster Ctrl dok prevlaite element biblioteke iz panela library na stranu. Ako element biblioteke sluajno obriete u panely Library, a jo imate stranu s tim elementom, moete ponovo da ga snimite u biblioteku tako to ete ga izabrati i pritisnuti dugme Recreate na panelu Properties. Kada pritisnete element biblioteke na strani desnim tasterom, otvorie se kontekstni meni koji sadri opciju Recreate i sve druge opcije koje se odnose na izabrani element.

8.2 Menjanje elemenata biblioteke Sve izmene elemenata biblioteke moraju se obaviti na panelu Library (slika 8.1.1). Ako hoete da menjate element biblioteke neposredno na strani morate raskinuti njegovu vezu sa datotekom u biblioteci (Detach from Original). Otvaranje datoteke elementa biblioteke radi menjanja mogue je na tri naina: dva puta kliknite na ikonicu elementa u panelu library, ili je samo oznaite i pritisnite dugme Edit sa dna panela, ili izaberite ugraeni element biblioteke na strani i pritisnite dugme Open na panelu Properties (slika 8.1.1). Dreamweaver tada otvara novu stranu koja sadri samo taj element, ali koji sada nema onu bledoutu pozadinu i koga moete neposredno promeniti. Kada zavrite sa izmenama i sauvate ih otvara se prozor Update Library Items (slika 8.2.1) kojim vas program pita da li elite da aurirate sve strane koje sadre taj element (jer je on za sada promenjen samo u biblioteci).

Slika 8.2.1 Auriranje elemenata biblioteke na svim stranama

Kada poritisnete Update pojavljuje se prozor Update Pages koji pokazuje koje su sve strane bile aurirane (slika 8.2.2).


- 49 -

Slika 8.2.2 Prozor Update Pages

Ako ste izabrali da odloite auriranje strana u vreme kada ste zavrili menjanje elemenata biblioteke, Dreamweaver omoguava da to kasnije uradite jednom naredbom. Izaberite opciju menija Modify > Library > Update Pages. Otvara se prozor Update Pages slika 8.2.2, na kojem moete da izaberete opciju Entire Site u polju Look in, a sa desne strane ime vaeg sajta i pritisnite dugme Start. 8.3 Pravljenje i menjanje elemenata biblioteke koji sadre skriptove

Poto se elementi biblioteke na strani moraju nalaziti unutar oznaka i ne smeju sadrati (referencirati) objekte izvan tih oznaka, JavaScript se ne moe koristiti u elementima biblioteke ukoliko skript zahteva kod strane izmeu oznaka i , jer te oznake dolaze pre oznake . Meutim postoji vaan izuzetak. Skript je gotov element ije JavaScript funkcije Dreamweaver umee unutar oznaka , pa u elementima biblioteke moete koristiti Dreamweaverove skriptove, premda zahtevaju kod koji treba umetnuti u dokument unutar oznaka i . Element biblioteke ne sadri kod koji treba da se nalazi unutar oznaka i , ali, Dreamweaver automatski umee potreban kod unutar tih oznaka, kad god u dokument ubacite odgovarajui element biblioteke. Dakle, potrebno je samo da oznaite eljeni element sa strane koji sadri skript (Rollover sliku, iskaui meni), da pritisnete ikonicu New Library Item na dnu panela Library, i da upiete ime novog elementa biblioteke koga ste upravo napravili. Na kraju pritisnite Enter.


- 50 -

Ovaj element biblioteke sadri odreene delove koda potrebne za skript, a to su dogaaji i akcija koju treba pozvati kada do tog dogaaja doe. On ne sadri JavaScript funkcije koje se moraju ubaciti izmeu oznaka i . Rekli smo da Dreamweaver te funkcije automatski dodaje strani kada u nju unesete taj element biblioteke (jer prepoznaje odreene delove koda u elementima biblioteke kao skriptove - akcije i dogaaji). Elementi biblioteke koji sadre skriptove tee se menjaju od onih koji ih ne sadre. Ako hoete da menjate sam skript elementa biblioteke prethodno morate da raskinete vezu izmeu biblioteke i primerka njenog elementa na strani (dugme Detach From Original). Kada ste promenili skript elementa sa strane, iz biblioteke obriite originalan element (ali prethodno zapamtite njegovo ime), zatim oznaite promenjeni element na strani i ponovo od njega napravite novi element sa istim imenom. Sve ovo je zbog toga to skriptove nije mogue menjati neposredno u elementu biblioteke, pa morate da uklonite originalni element i da ga zamenite ispravljenom verzijom. Sada moete i aurirati sve strane sa ovim promenjenim elementom, izborom opcije Modify > Library > Update Pages.


Poglavlje 9

Izrada okvira


1. Da napravite i snimite skup okvira i ugnjedene okvire 2. Da promenite karakteristike okvira i skupa okvira 3. Napravite dokument unutar okvira i traku za navigaciju

9.1 Skup okvira Okviri dele prozor browsera na pravougaone oblasti koje se nezavisno pounjavaju HTML sadrinom. Okviri obino dele stranu na oblast za navigaciju po Web sajtu i oblast sadrine. Oblast za navigaciju se najee ne menja, a oblast sadrine menja, i to svaki put kad se pritisne hiperveza u oblasti za navigaciju. Za prikazivanje Web strane sa dva okvira browser koristi tri datoteke: jednu koja definie skup okvira i dve sa sadrinom svakog okvira. Skup okvira je HTML datoteka nevidljiva korisniku koja definie strukturu Web strane sa okvirima. Skup uva podatke o veliini i poloaju svakog okvira i imena datoteke sa njihovom sadrinom. Svaki okvir je posebna HTML datoteka. Okviri imaju ivice ije se prikazivanje moe iskljuiti, tako da ih korisnik ne vidi, ili ukljuiti da bi prozor bio jasno izdeljen na okna. Okviri mogu imati trake za pomeranje sadraja i posetiocu moe biti dozvoljeno da im menja veliinu povlaenjem ivica. Postoje dva naina da se napravi skup okvira u Dreamweaveru, moete ih unositi runo, ili izabrati neki od gotovih skupa okvira. Ovaj drugi nain je bri jer se tada i skup okvira i svi njegovi okvir > Visual Aids > Frame Borders pojav ta. Ako hoete runo da unesete okvir okumenta. Strana e se podeliti horizo lno (ako odvuete desnu ili levu ivicu). ostavniji; dovoljno je da pritisnete npr. slika 9.1.1). Lef

(okstrai automatski definiu.Kada izaberete opciju View ie se debela ivica oko strane u prozoru dokumene, odvucite ivicu koja opkoljava stranu u prozor dntalno (ako odvuete gornju ili donju ivicu) ili vertika Automatski unos okvira je kao to smo rekli jedn ikonicu Top Frame na kartici Frames panela Insert (- 51 -

t frame vir na levoj ni)

Top Frame (okvir na vrhu strane)

Kartica Frames

Slika 9.1.1 Kartica Frames


- 52 -

Strana je sada podeljena na dva okvira, kratki na vrhu i dui ispod njega, na dnu. Podelu obeleava tanka siva linija. Da bi, na primer, u donji okvir dodali jo jedan skup okvira (Ugnjeden), postavite kursor u donji okvir i pritisnite ikonicu Left Frame na kartici Frames. Donji okvir e sada biti podeljen na dva okvira: uski okvir levo i iri desno. Umesto ovog naina izrade ugnjedenih skupova okvira, Dremweaver ih ve ima ponuene, takoe na kartici Frames. Strana e sada izgledati kao na slici 9.1.2:

Slika 9.1.2 Izgled strane sa ugnjedenim okvirima

Kada stavite potreban skup okvira na stranu, treba da ga snimite. Da biste videli stranu u browseru, i skup i datoteke sadrine svakog okvira moraju biti snimljeni. Da bi snimili skup okvira treba da ga oznaite. To se radi pritiskom na ivicu prozora dokumenta s unutranje strane, kada ivice svih okvira postaju isprekidane, i kada se na birau HTML oznaka na dnu prozora prikazuje . Skup okvira moe se izabrati i na panelu Frames (slika 9.1.3) koji se dobija naredbom Window > Others > Frames, tako to ete pritisnuti spoljnu ivicu koja opkoljava sve okvire. Na ovom panelu prikazuje se pojednostavljena verzija strukture okvira na strani. Poto ste izabrali (oznaili) skup okvira snimite ga izborom opcije File > Save Frameset As. Dok je skup okvira jo izabran moete ga imenovati (polje Title na Document Toolbaru). Ako skup okvira nije izabran prilikom davanja naslova strani, naslov e biti dodeljen jednoj od strana u skupu, a ne datoteci skupa okvira. Da ne biste greili i radili na objektu na kome ne elite da radite, pogledajte esto na panel Frames gde se jasno vidi ta je izabrano.


- 53 -

Ivica skupa okvira

Okviri

Slika 9.1.3. Panel Frames pojednostavljena struktura okvira

9.2 Karakteristike okvira i skupa okvira Karakteristike okvira moete kon

Dreamweaver MX - Tutorijal

Documents

Transcript of Dreamweaver MX - Tutorijal