01 Dreamweaver

8/12/2019 01 Dreamweaver

1/35

CENTAR ZA RAZVOJ I PRIMENU NAUKE,TEHNOLOGIJE I INFORMATIKE

NOVI SAD

2008.

Dreamweaver

Seminar za profesore informatike osnovne i

srednjih kola Izrada prezentacija - Web

prezentacije kao podrka nastavim i kolskim

aktivnostima.

Predava: Jovan Sandi

C N T I


2/35

| 2

Dreamweaver

PRAVLJENJE PRVOG WEB SAJTA ........................................ 2

KREIRANJE LOKALNOG SAJTA.................................................. 3

UPRAVLJANJE FOLDERIMA I FAJLOVIMA..................................... 7

DEFINISANJE SVOJSTAVA DOKUMENTA...................................... 8

DREAMWEAVER I LINKOVI ................................................. 9RUNO KREIRANJE LINKOVA................................................... 9

POINTING TO A FILE........................................................... 10

BROWSING FOR A FILE....................................................... 10

HYPERLINK DIJALOG.......................................................... 11

IMENOVANA SIDRA (NAMED ANCHORS ) ................................ 12

LINK KA E-MAIL ADRESAMA................................................. 13

DODAVANJE SADRAJA SAJTU ......................................... 13DIZAJN UZ KORIENJE TABELA............................................. 14

UBACIVANJE TABELE.......................................................... 14

PODEAVANJA SVOJSTAVATABELE......................................... 15

KORIENJE LAYOUT VIEW-A............................................... 15UVOZ SADRAJA IZ TEKSTUALNOG DOKUMENTA........................ 16

DODAVANJE SPECIJALNIH KARAKTERA..................................... 17

UOBLIAVANJE TEKSTA....................................................... 17

RAD SA KASKADNIM STILOVIMA - CASCADING STYLE

SHEETS (CSS) .................................................................... 18

IZRADA KASKADNIH STILOVA................................................ 18

DEFINICIJA STILA............................................................... 19

PRIMENA STILOVA............................................................. 21

IZMENA STILOVA............................................................... 22

RAD SA SLIKAMA ............................................................. 23

UBACIVANJE SLIKA............................................................. 23

PROMENA SVOJSTAVA SLIKA................................................ 23MAPIRANJE SLIKA.............................................................. 24

RAD SA FLASH OBJEKTIMA ............................................... 24

KORIENJE SLOJEVA UDOKUMENTIMA ......................... 25ABLON (TEMPLATE) U DREAMWEAVER-U... ................... 27

PRAVLJENJE ABLONA......................................................... 27

PRIMENA ABLONA............................................................ 28

BIBLIOTEKA U DREAMWEAVER-U .................................... 29KREIRANJE STAVKE BIBLIOTEKE.............................................. 29

DODAVANJE STAVKE IZ BIBLIOTEKE NA STRANICU....................... 30

UPLOAD WEB STRANICE .................................................. 30

DIZAJN SA CSS-OM NASUPROT DIZAJNA BAZIRANOG NA

TABELAMA ....................................................................... 31

DODATAKDREAMWEAVER BEHAVIORS ........................ 32ROLLOVER IMAGE............................................................. 32

POPUP MESSAGE............................................................. 33

PORUKA NA STATUSNOJ TRACI.............................................. 34

ISKAUI (POP-UP)MENI................................................... 34

TRAKA ZA NAVIGACIJU........................................................ 35

Pravljenje prvog Web sajta

Da bismo krenuli dalje potrebno je da instalirate na svom raunaru Dreamweaver. Uvod u ovaj softveremo maksimalno skratiti jer se podrazumeva da profesori informatike upoznati sa osnovnim elementimaradnih okruenja razliitih softvera.

Dreamweaver je program za izradu web strana, koji omoguava vizuelno ureivanje, kao i direktnopisanje HTML koda. Ovaj program znatno skrauje vreme izrade menjanje i odravanje web sajtova.Program je vrlo upotrebljiv jer i napredne tehnike ini pristupanim i olakava njihovo korienje.

Napominjemo, ne smemo zaboraviti da je presudna stvar u odreivanju kvaliteta jednog sajta njegovsadraj, tako da se uvek isplati uloiti vreme u analizu potreba i detaljno planiranje sajta.

Prilikom prvog pokretanja Dreamweaver-a prikazae se prozor dobrodolice sa informacijama za novekorisnike, kao i niz novih mogunosti za one koji ve poznaju program. Takoe Dreamweaver daje

mogunost izbora jednog od dva ponuena izgleda radne povrine, u zavisnosti od toga da li steprogramer (koder) ili dizajner. Radna povrina Dreamweaver-a sadri sledee elemente

I nsert Bar, sadri tastere za unos razliitih tipova objekata, kao to su slike, tabele, layer-i udokument. Svaki objekat je predstavljen HTML kodom koji omoguava podeavanje razliitihatributa.

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

Document toolbar sadri i neke osnovne operacije kao sto je preview u browser-u.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 prikazujuHTML oznake koje pripadaju trenutno izabranom elementu. Najvia u hijerarhiji je HTML oznaka.

Property Inspector, omoguava menjanje osobina selektovanih objekata ili teksta. Svaki objekatposjeduje razliite osobine.


3/35

| 3Panel Group,je grupa panela sa desne strane: CSS, Tag Inspector, Application, Files. Files

omoguava upravljanje fajlovima i folderima koji ine va sajt. Takoe obezbeuje i pristupfajlovima na hard disku, slino kao kod Explorera (hijerarhijsko stablo).

Kratak opis menija:Fil e 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, FindAnd Replace) i omoguava pristup editoru za preice na tastaturi. Pristup preferencama je takoeiz Edit menija.

View meni omoguava izbor razliitih prikaza dokumenta (Design View, Code View) iprikazivanje 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. Koristeiovaj meni mogu se editovati tag atributi i menjati elementi tabela.

Text meni obezbeuje lako formatiranje teksta.Commands meni omoguava pristup razliitim komandama.Site meni prua komande za kreiranje, otvaranje i editovanje sajtova.Window meni omoguava pristup svim panelima, inspektorima i prozorima u Dreamweaver-u.Help, standardno ukljuuje Help sistem za korienje Dreamwear-a

Kreiranje lokalnog sajta

Novi Sajt definiemo koristei Site Definitionarobnjaka. Kada pravimo sajt, nije neophodno da odmahdamo informacije o serveru na kome e se nalaziti sajt; ipak, kada budemo eleli da publikujemo sajt oveinformacije e nam itekako trebati.Mi smo se odluili da fajlovi naeg sajta budu smeteni u fascikliwebseminarkoju smo kreirali u fascikli My Documents. Molimo Vas da i vi kreirate jednu takvu fasciklu

na istoj lokaciji.

1. O tvoriemo Sitemenu i selektovati Manage Sites, ili kliknuti Manage Siteslink na Filespanelu.


4/35

| 4

Otvara se Manage Sitesdijalog.

2. Kliknuemo na dugme Newi selektovati stavku Site iz menija koji se pojavljuje.

3. Otvara se Site Definitionarobnjak. Basickartica Vas vodi kroz proces kreiranja sajta korak pokorak. Advancedkartica Vam omoguava da zadate napredna podeavanja. Mi emo koristitikarticu Basic. Uneemo ime za sajt. Ovo ime se ne pojavljuje nigde u Web browser-u nakon to

publikujem sajt, tako da moe biti bilo ta. Dajte ime webseminar, zbog daljeg lakeg rada, akodoe do greaka lake emo ih otklanjati (ime sajta je radno, privremeno ime i nema nikakve vezesa lokacijom na kojoj e biti smeteni fajlovi. U naem sluaju se lokacija na koju se lokalnosmetaju fajlovi sajta i radno ime sajta poklapaju, to je namerno uraeno da bi se ilustrovalo da jetako neto mogue. Realno, postoji rizik ida e Vas to malo i zbunjivati dok ne razluite pojmove.

4. Kliknuemo Next.5. Dreamweaver moemo koristiti i za kreiranje kompleksnijih Web sajtova koji koriste napredne

serverske tehnologije kao to su ASP (Active Server Pages) i ColdFusion. Mi emo se ograniiti

na kreiranje sajtova pomou standardnog HTML-a. Selektujte No, I Do Not Want To Use AServer Technology, i kliknite Next.


5/35

| 5

6. Na sledeoj sceni, selektovaemo Edit local copies on my machine, then upload to server whenready (recommended), i specificiraemo lokaciju na hard disku svog raunara u kojoj emouvati nae fajlove. Lokaciju specificiramo tako to kliknemo na dugmence sa slikom fascikle i

pronaemo eljenu lokaciju. Poto smo se odluili da fajlovi naeg sajta budu smeteni u fascikliwebseminarkoju smo kreirali u fascikli My Documents kliknemo na dugmence sa slikom fascikle

i pronaeme i izaberemo ovu lokaciju klikom na Select.Savet:

Ova opcija je dobra pogotovo ako imate sporu internet konekciju.

7. Trebalo bi da se Vaa adresa razlikuje od ove na gornjoj slici u korisnikom imenu. Kod mene jeC:\Documents and Settings\Jovan\My Documents\webseminar\ dok kod Vas treba da budeC:\Documents and Settings\VaseKorisnickoIme\My Documents\webseminar. Kliknuemo Next.

8. Na zavrnoj sceni specificiramo kako emo se konektovati na udaljeni server na kojem e bitipostavljen Va sajt. Radiemo u lokalu a naknadno emo definisati gde e na web-u biti smetenVa sajt, zato emo izabrati None.


6/35

| 6

Napomena:Ako smo izabrali None, tne znai da udaljeni server ne postoji ve da trenutno nemamo teinformacije. Uvek moemo naknadno dati programu potrebne informacije o hostingu izborom ManageSiteskomande iz padajueg menija Filespanel-a. U Manage Sitesdijalog-u, kliknemo na Editdugme.Ponovo e se otvoriti Site Definitionarobnjak.

Imamo dve dodatne mogunosti da definiemo pristup udaljenom serveru koje su nama interesante:

ako se sajt nalazi u lokalu (WAMP na lokalnom raunaru, ili lokalnoj mrei) biramoLocal/Network

ako se sajt nalazi na udaljenom serveru (hosting na pravom web serveru koji je vidljiv naInternetu) definiemo parametre FTP konekcije tako to biramo FTP i unesemo potrebne podatke Za sada koristimo najjednostavniji sluaj (None) kada koristimo samo jednu fasc iklu (webseminar) nalokalnom raunaru u kojoj emo smetati nae Web stranice. Da bismo pregledali nae Web stranicetokom izrade koristiemo rutinu Dreamweaver-a koja poziva browser za pregled fajla u lokalu. Tek potozavrimo sajt uploadovaemo ga na "pravi" server nakon to konfiguriemo potrebne parametre.

Molim Vas da obratite panju na injenicu da ovakav redosled koraka koji emo mi ovde koristiti jekolski i spor i nije nuan u situaciji u kojoj ete realno praviti sajt. Mi emo raditi korak po korak da sesloe kockice i da lake razumete kako stvari funkcioniu u svetu Web dizajna. Naravno sve moe dosta

bre da se uradi. Recimo, vi moete raditi i direktno na fajlovima koji se nalaze na udaljenom serveru akotako elite da radite, ili ne morate uopte praviti lokalnu kopiju sajta ako koristite WAMP za internu

upotrebu u lokalu, moete da definiete da je lokalna kopija na istoj lokaciji na kojoj je i "udaljena", uroot-u Wamp-a,... Kombinacije i mogunosti su brojne, a koju ete izabrati zavisiod Vaeg znanja, rutinekoju ste stekli, stepena rizika gubitka podataka koji ste spremni da podnesete i drugih faktora.

9. Kliknete na Next.Pojavie se zbirne informacije o Vaem sajtu.

10.Kliknite Done.Filespanel sada prikazuje korensku fasciklu za sajt koji ste definisali.


7/35

| 7Upravljanje folderima i fajlovima

Kada je sajt definisan, koristei Filespanel moemo kreirati nove fascikle koje e sadrati fajlove naegsajta. Trebalo bi bar kreirati fasciklu za slike.

1. U Filespanelu, kliknite desnim klikom na korensku fasciklu i selektujte New Folder.

2. Imenujte folder imenom imagesi pritisnite Enter.Fascikla images e se pojaviti ispod korenske fascikle. Ovu fasciklu emo koristiti za smetanje slikakoje emo upotrebljavati u naem sajtu.

Kreiranje HTML Stranice

Da biste kreirali novu HTML stranicu potrebno je:

1. otvorite File meni i izaberete komandu New.Pojavie se New Document dijalog. General kartica sadri razliite tipove dokumenata izmeu kojihmoete izabrati koji elite da napravite, ukljuujui tu i HTML stranice, dinamike stranice, CSS stilove,

itd..

Templateskartica sadri ablone koje moete da kreirate za sajt.

2. NaGeneralkartici, selektujte Basic Pagekategoriju i onda selektujte HTML.


8/35

| 83. Kliknite na dugme Create.Nova HTML stranica se otvara u Documentprozoru.

4. 4. Da biste sauvali file, moete kliknuti na Savedugme u Documenttoolbar-u, ili otvorite Filemeni i kliknite na komandu Save.

U Save Asdijalogu, izabraemo lokaciju na kojoj emo snimiti na fajl ukoliko je potrebno, uneemo imeza njega i kliknuti na Save. KAo ime izabrali smo index.htmljer je uobiajeno da se korenski dokumenat. Korenski dokumenat je onaj koji podrazumevano browser otvara ako se navede u adresi samo putanja do

dokumenta ali ne ime. Na primer adresa http://www.cnti.info/moodle/ je ekvivalentna adresihttp://www.cnti.info/moodle/index.php. Dakle korenski dokumenat e uvek biti pronaen iako ga nenavodimo u adresi jer se zove index (ekstenzije kao to ste videli iz primera ne mora biti uvek html, moe

biti i php, htm,...) Vano je da postoji takav dokumenat u svakoj fascikli na Vaem sajtu. Ako ne postojidokumenat sa ovakvim imenom Server vrati greku ako pozovemo takvu adresu bez navoenja imenadokumenta. Za IIS platformu je uobiajeno da se koristi default umesto index.

Na dokumenat se pojavljuje u Filespanelu.

Definisanje svojstava dokumenta

Page Properties dijalog koristimo da promenimo svojstva dokumenta, kao to su naslov (koji sepojavljuje u naslovnoj liniji internet browser-a) pozadinsku boju i osnovni font. Sve to definiemo uovom dijalogu vaie na nivou cele stranice

1. Otvorite Modifymeni i izaberite Page Properties, ili kliknite na Page Propertiesdugme uokviru Property Inspector-a. Ekvivalentno ovome postoji dugme Propertiespanelu koje se zoveisto Page Properties.Ukoliko se ovo dugme ne vidi u donjem desnom uglu panela Properties

uoite jedan trougli vrhom usmeren na dole. Klikom na njega otvarate dodatni deoPropertiespanela na kom se vidi dugme Page Properties.

Pojavie sePage Propertiesdijalog.

2. Podrazumevano, selektovana je kategorija Appearance (Pojavljivanje). Ovde definiemo izgledteksta na stranici, njegovu veliinu i stil i boju. Takoe moemo izabrati pozadinsku sliku zastranicu ili pozadinsku boju, kao i postaviti margine dokumenta.
http://www.cnti.info/moodle/http://www.cnti.info/moodle/http://www.cnti.info/moodle/index.phphttp://www.cnti.info/moodle/index.phphttp://www.cnti.info/moodle/index.phphttp://www.cnti.info/moodle/


9/35

| 93. Kliknite na Linkskategoriju da definiemo podrazumevano pojavljivanje ili izgled zahiperlinkove.

4. Headingskategorija omoguava nam da definiemo razliite tipove ili izgled naslova u naemdokumentu. Kasnije kad budemo unosili tekst, ove stilove moemo koristiti.

5. Koristite Title/Encodingkategoriju da unesete ime za stranicu. Ovo je tekst koji se pojavljuje unaslovnoj liniji browser-a dok prikazuje stranicu. Ovde obavezno definiite da je encodingunicode, odnosno utf-8.

Savet:

Naslov za dokumenat moemo uneti direktno na u Titlepolju naDocumenttoolbar-u.

6. Kada zavrite sa izmenom svojstava dokumenta, kliknite na OK.Sada dodajemo sadraj naem dokumentu. Dodaemo isti sadraj koji je traen u Radionici broj 1. Kakoemo to uraditi? Moemo to da uradimo na vie naina, ovo je jedan od njih. Uoite da je DocumentWindow podeljen na dva dela, jedan u kojem unosimo HTML kod i drugi u kojem unosimo sam sadrajkao u recimo Word-u. Ukoliko to nije sluaj kliknite na dugme split u gornjem levom uglu DocumentWindow-a. im unesemo neto u donjem delu u gornjem se pojavi njegova HTML reprezentacija. Akoneto izmenimo u HTML kodu promena se odmah vidi u donjem prozoru (Ako malo kasni, treba

pritisnuti F5 taster za Refresh). Poto ve imate izraen dokumenat iskopirajte sav HTML kod u deoprozora koji je namenjen radu sa HTML-om. Naravno pre toga sav HTML kod koji jepostojao obriite pa

zalepite Va.

Kada dodate sadraj, ponovo snimite dokumenat. Da biste pogledali dokumenat u browseru pritisnitetaster F12 i pokrenue se Va default-ni browser sa uitanom Vaom stranicom.

Dreamweaver i linkovi

Pre nego to nastavimo dalje, podsetimo se da smo u proloj lekciji definisali da nam je podrazumevanafascikla koju emo koristiti za slike fascikla images. Takoe smo napravili i stranicu koja se zoveindex.htmlu koju smo dodali sav HTML kod iz Radionice 1. Sada e nam trebati jo jedna stranica, paemo istim postupkom napraviti jo jedan HTML dokumenat i nazvati ga kontakt.html, koji emosnimiti pored dokumenta index.html.Da bismo povezali ove dve stranice, trebaju nam linkovi.

U ovoj lekciji o linkovima emo obraditi:

Runo kreiranje linkovaPointing to a file

Browsing for a file

Hyperlink dialog

Named Anchors

Email links

Ova lekcija je namerno napravljena izjedna da bi se ilustrovala imenovana sidra i linkovi kao i njihova

upotreba. U celoj lekciji govori se o tekstualnim linkovima i pretvaranju teksta u link, ipak imajte

neprestano na umu da se link moe napraviti i od slike i drugih objekata koji nisu tekst a mogu daegzistiraju na web stranici na istovetan nain kao i od teksta. Samo iz potreb e pojednostavljenja smo seograniili na tekst kao nosioc linka.

Koristei Dreamweaver moete na nekoliko naina ubacivati hiperlinkove na svoje stranice:

Kucajui ih direktno u Property Inspector-u.Koristite Point to Filedugme u Property Inspector-u.

Koristite Browse for Filedugme u dugme Property Inspector-u.

Koristite Hyperlinkdugme na Insert bar-u.

Runo kreiranje linkovaKad linkujete dva dokumenta u istoj fascikli u okviru Vaeg sajta, najee je najjednostavnije dadirektno ukucate link u polje Linku okviru Property Inspector-a:

1. Na Vaoj web stranici, selektujte tekst koji hoete da konvertujete u hiperlink ka stranicikontakt.html.

2. ULinkpolju Property Inspector-a, ukucajte ime dokumenta na koji se linkujete, u naem
http://www.cnti.info/moodle/mod/lesson/view.php?id=228#rucno_kreiranje_linkovahttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#rucno_kreiranje_linkovahttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#pointing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#pointing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#browsing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#browsing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#hyperlink_dialoghttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#hyperlink_dialoghttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#imenovana_sidrahttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#email_linkhttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#email_linkhttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#imenovana_sidrahttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#hyperlink_dialoghttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#browsing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#pointing_to_a_filehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#rucno_kreiranje_linkova


10/35


11/35

| 11kliknuti na OK. Dobiemo sledeu poruku od Dreamweaver-a:

U prevodu:

Fajl koji pokuavate da linkujete nalazi se izvan korenske fascikle Vaeg sajta i moda nee biti dostupannakon publikovanja Vaeg sajta.

Vaa korenska fascikla je C:\Documents and Settings\Jovan\My Documents\webseminar\

elite li da sad kopirate tamo ovaj fajl?

Preporuujemo da ga posluate i da kliknete na Yes. Vremenom broj stranica raste i sve je tee ispratiti dali je neto publikovano, da li je iskopirano na potrebnu lokaciju, da li je upload -ovano,... Kad kliknete na

Yes, otvorie se dijalog Copy File Askoji e vam ponuditi izbor lokacije za smetanje fajla na koji selinkujete. Ako odmah kliknete na Savefajl Sunset.jpge biti iskopiran u root a u polju Linkpojavie setekst Sunset.jpg.

Molimo Vas da uoite na ovom primeru jo jednu stvar. Ov im postupkom smo linkovali sliku Sunset.jpg,to se razlikujeod ubacivanja/umetanja/insertovanja te slike na nau web stranicu. Kako se manifestujeova razlika? Ako ubacite sliku na stranicu, ona je vidljiva na stranici, ako je linkujete sa stranice, onda ese poseivanjem ovog linka otvoriti posebna stranica koja na sebi sadri samo sliku Sunset.jpg. Ovomoete i isprobati ako pritisnete F12 i kliknete na deo teksta koji ste konvertovali u link ka fajluSunset.jpg.

Ovako izgleda kada ubacimo sliku na stranicu:

a ovako izgleda ako je linkujemo tekstomSunset.jpg.Ovaj link otvorie se u zasebnom prozoru jer amoto definisali parametrom Targeti njegovom vrednou_blank.

Vrh stranice

Hyperlink Dijalog

Hyperlink dijalog nudi dodatne opcije kada kreiramo link. elimo da se linkujemo na stranicukontakt.html:

1. Na naoj stranici pozicioniramo kursor na mesto na kome elimo da se pojavi link.2. Na Insertbar-u, u okviru Commonkategorije kliknemo na Hyperlinkdugme. Otvara se
http://www.cnti.info/moodle/file.php/4/lesson_dreamweaver02/Sunset.jpghttp://www.cnti.info/moodle/file.php/4/lesson_dreamweaver02/Sunset.jpghttp://www.cnti.info/moodle/file.php/4/lesson_dreamweaver02/Sunset.jpghttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/file.php/4/lesson_dreamweaver02/Sunset.jpg


12/35

| 12Hyperlinkdijalog. popunimo ga kao na slici ispod.

3. U Textpolju unosimo tekst koji e se videti kao hiperlink na stranici kada je prikae browser.4. U Linkpolju unosimo putanju do fajla na koji se linkujemo kucajui direktno ili uz pomo

Browse to Filedugmeta.

5. Preostala polja su opciona:o Target specificira nain na koji se otvara nova stranica kada korisnik klikne na link.

Podrazumevano se otvara u istom prozoru browser-a (_self)ali moe i u praznom, novomprozoru(_blank)

o UTitlepolju se unosi tekst koji e se pojaviti kao tooltip kad korisnik nacilja na link. o Access keyje jednoznakovna preica sa tastature koja pokree link.o Tab index specificira kojim redosledom e se fokus kretati po elementima stranice dok

korisnik pritiska Tab taster na tastaturi.

6. Klikom na OK zavravamo sa kreiranjem link-a .Vrh stranice

Imenovana Sidra (Named Anchors )

Imenovana sidra su oznaena mesta na Web stranici. Njih kreirate na specifinim mestima na stranici nakojima postoji potreba da se brzo stigne do njih, to omoguava brzo kretanje korisniku krozdokumenta, odnosno skakanja po mestima gde su postavljena sidra.

Da biste kreirali sidro uradite sledee:

1. Pozicionirate kursor na mesto gde elite da postavite sidro. esto je to poetak naslova dela tekstana stranici, ili podnaslova.

2. U Insertbaru, kliknite na stavku Named Anchor. Otvorie se Named Anchor Dijalog.3. Ukucajte ime za sidro i kliknite na OK.

Napomena:Imena za sidra su case-sensitive, odnosno razlikuju se mala i velika slova.

Pojavie se sliica obliku sidra na mestu koje ste izabrali za imenovano sidro, odmah do Vaeg teksta.Sidro se nikada nepravi samo za sebe, ve iz potrebe da se referenciramo na taj deo teksta sa drugog delastranice ili potpuno druge stranice i na taj nain olakamo korisniku navigaciju.

Da biste kreirali link na malopre napravljeno sidro uradite sledee:

1. Pozicionirate kursor na mestu gde e biti link ka imenovanom sidru, i kliknete na Hyperlinkstavku u Insertbaru.

2. U Hyperlinkdijalog, unesite tekst za link.3. Selektujete ime imenovanog sidra iz liste iz Linkpadajue liste.
http://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranice


13/35

| 13

4. Kliknite na OK.Linkovi ka imenovanim sidrima na poetku imaju tarabu (pound sign(#))

Da biste kreirali link ka imenovanom sidru sa druge web stranice jednostavno ukljuite u ime straniceispred linka na imenovano sidro, kao u sledeem primeru: kontakt.html#imenovana_sidra .

Takoe moete koristiti i Point to File da se linkujete na imenovano sidro, kliknete na Point to Filedugme i prevuete ga na eljeno sidro u dokumentu.

Imenovana sidra su vrlo upotrebljiva stvar jer umnogome olakavaju navigaciju kroz dokumenat.Nemojte zaboraviti da napravite bar jedno imenovano sidro na vrhu stranice, i linkove ka njemu kako

biste olakali korisniku skok navrh stranicei pristup menijima.

I sami ste korisnici Web-a, pa realno procenite koliko Vam znai ovakva pomo u surfanju i koliko Vasnervira kad je stranica natrpana sadrajem a jedini nain kretanja kroz sadraj je skrolovanje tokiem...

Vrh stranice

Link ka E-mail Adresama

Linkove ka email adresama unosite slino kao i ostale linkove. Da biste uneli adresu direktno, kliknete upolje Links i ukucate mailto: i dokucate kompletnu e mail adresu u nastavku (na primer mailto:

[email protected]). Tada pritisnite Enterda kreirate link.

Takoe moete koristiti Email Linkstavku u Insertbar-u:

1. Pozicionirate kursor u dokumentu na kome elite link.2. Kliknite na Email Link stavku.

Otvara se Email Linkdijalog.

3. Unesite tekst za link, a potom i mail adresu. Ovde ne morate da dodajete mailto:pre adrese.

4. Kliknite na OK.Evo rezultata:Piite administratoru...

Dodavanje sadraja sajtuSadraj moemo uneti kucanjem u deluprozora namenjenog za unos sadraja. Poto smo napravilistranicu kontakt.html moramo joj dodati nekakv sadraj. Postojee stranice otvaramo dvoklikom ustablu koje vidimo u Files panelu. Dvokliknemo kontakt.html da bismo je otvorili za editovanje. Uoite

da Dreamweaver otvara posebnu karticu za svaki otvoreni dokumenat. Mi elimo da dodamo kontaktpodatke koristei tabele, pa emo morati da se upoznamo sa nainom na koji se u Dreamweaveru upravljatabelama.
http://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicemailto:[email protected]:[email protected]:[email protected]:[email protected]://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranicehttp://www.cnti.info/moodle/mod/lesson/view.php?id=228#vrh_stranice


14/35

| 14Dizajn uz korienje tabelaTabele nam omoguavaju preciznu kontrolu nad pozicioniranjem elemenata nae Web stranice. Primertabele koju emo napraviti:

Lini podaci

Ime Jovan

Prezime Sandi

Telefon 064 22 02 740

Institucija CNTI

JMBG 0411975810044

email [email protected]

www http://www.cnti.info

Prvo, naravno moramo ubaciti tabelu. Nakon ubacivanja treba tabelu prilagoditi eljenom izgledu. Tadamoemo u nju, u zasebne elije umetati slike, tekst ili druge elemente stranice.

Ubacivanje tabele

1. Na Insertbar-u, kliknite na Tabledugme.Insert Tabledijalog se otvara.

2. Uneti broj vrstarows i kolonacolumns koji elite u tabeli (8,2)3. Moete definisati i tanu irinu za tabelu u pixelima, ili u procentima u odnosu na stranicu. Ako

koristite fiksnu irinu, tabela se nee proirivati sa promenom dimenzija prozora Web browser-a.4. Ako elite da se vide ivice tabele unesite vrednost u polje border thickness. (Ako ne eite da se

vide ivice tabele, stavite vrednost nula, z a potrrebe primera stvite na 1, potom probjte da

promenite na 2,...5. Cell padding se odnosi na koliinu prostora izmeu sadraja elije i njenih ivica (u pixelima); cell

spacing se odnosi na meru praznog prostora izmeu samih elija. Unesite eljene vrednosti uodgovarajua polja.6. Koristite Headersekciju da specificirate sadraj zaglavlja i njegovo, odnosno njegovo

pozicioniranje. (u naem primeru nije definisna, sluaj kao na slici, None)7. Kliknite na OK.
mailto:[email protected]://www.cnti.info/http://www.cnti.info/http://www.cnti.info/mailto:[email protected]


15/35

| 15Podeavanja svojstava tabeleUnoenjem vrednosti u odgovarajua polja Property Inspector -a mogu se naknadno izvriti

podeavanja tabela. Redimenzioniranje se takoe moe izvriti povlaenjem ivica tabele.

Da biste ubacili novu vrstu ili kolonu, pozicionirajte kursor unutar eljene e lije i iz Modify menijeselektujte Table, pa Insert Rowda ubacite novu vrstu ili Insert Column da biste ubacili novu kolonu.

Da biste spojili dve ili vie elija uradite sledee:

Selektujte eljene elije(dve elije iz prve vrste), u Modifymeniju, izaberite Table, a onda Merge Cells.Iste opcije imate i u kontekstnom meniju (desni klik)

Savet:

Kada pozicionirate kursor u eliju, Dreamweaver prikazuje zaglavlje tabele u kojem se vidi irina svakekolone i sadri dugmad koja otvaraju padajue menije. Ovi menije sadre preice za selekciju i umetanjekolona sa obe strane, leve i desne) u odnosu na kolonu u kojoj je selektovana elija, ili elija u kojoj senalazi kursor, i za podeavanje irina svake kolone zasebno.

Ako menjate irinu tabele razvlaenjem njenih ivica, Dreamweaver menja brojeve koji prikazuju irinu uzaglavlju tabele, to je zgodno kada elite neku tano odreenu meru za irinu.

Korienje Layout View-a

Dreamweaver Vam omoguava takoe i da podesite tabele koristei Layout view:

1. Na Insertbar-u, selektujte Layoutkategoriju.

2. kliknite Layout dugme.3. Ako se pojavi Getting Started in Layout Viewdijalog kliknite OK.4. Na Insertbar-u, kliknite Layout Tabledugme.5. Moete pozicionirati tabelu u bilo kojoj otvorenoj oblasti na Vaoj stranici. Kada se pojavi

pokaziva mia u obliku niana (crosshair), kliknite i razvucite tabelu.6. Ako je potrebno, upotrebite Property Inspectorda definiete ostala svojstva tabele.

7. Dalje kliknite na Draw Layout Cellda dodate eliju tabeli.8. kliknite i razvucite eliju kakvu elite unutar tabele.9. Nastavite da crtate elije po potrebi.10.Moete premetati elije po tabeli razmetajui ih prevlaenjem. Takoe ih moete

redimenzionirati razvlaei im ivice.elije se ne mogu preklapati. Kada su dve elije susedne jedna drugoj, Dreamweaver Vam nee dozvoliti


16/35

| 16da im menjate dimenzije razvlaei njihovu zajedniku ivicu. Kako bilo, uvek moete menjati svojstvatabele, koristei Property Inspector.

Da se vratite u Standardpogled na tabele, kliknite Standard Viewdugme na Insertbar-u.

Kad nacrtate tabelu popunite je podacima. Jednostavno kliknete u eliju i kucate. Formatirajte tabelu poelji, probajte da postavite pozadinsku sliku za elliju, da promenite pozadinsku boju,... Kod selekcijemoe Vam pomoi i Tag Inspector.

Dakle imali smo index.html, sada smo napravili kontakt.html, a elimo da napravimo i jednu stranicu zasa podacima o koli skola.htm. Da ne bismo gubili vreme, sigurno imate negde bar jedan Word-ovdokumenat sa podacima o koli, nekim njenim kratkim opisom i slino. Da bismo izbegli kucanje iiskoristili ve postojee podatke moemo napraviti novu stranicu i u nju kopirati sadraj word-ovogdokumenta. Poto smo ovo ve probali, hajde da vidimo koje su nam jo opcije. Jedna od mogunosti jeda word-ov dokumenat snimimo kao web stranicu (U Word-u: File-> Save as Word HTML). Ono to

jeste i nije zgodno, jeste da takva web stranica ima posebnu fasciklu za slike koje se pozivaju u

dokumentu Kad snimite web stranicu obavezno se pojavi i istoimena fascikla sa nastavkom _files, zar ne?Tada morate voditi rauna i o ukljuivnju i te fascikle u sajt. Jo jedan nain koji emo malo detaljnijeobraditi je i direktan uvoz sadraja iz word dokumenta.

Napomena: U oba sluaja, kad snimite Word-ov dokumenat kao web stranicu i kada direktno izdreamweaver-a uvozite sadraj iz Word-ovog dokumenta dobiete, uslovno reeno, "prljav" HTML.

Uvoz sadraja iz tekstualnog dokumentaAko Vaa stranica sadri mnogo teksta, moete taj tekst ukucati u Wordu i onda ga uvesti u DreamweaverHTML stranicu:

1. U meniju Filekliknite na stavku Import, tada na Word Document.2.

U Opendijalogu, izaberite dokumenat i kliknite na Open.3. Dreamweaver uitava dokumenat na tekuu stranicu.

ienje Microsoft Word HTML oznaka

Microsoft Word dokumenti mogu sadrati nepotrebnih HTML oznaka neupotrebljivih u Dreamweaver-u,to moe uiniti HTML code nepreglednim to e oteati rad na stranici a i uticati na brzinu uitavanjaVae stranice. Dreamweaver moe za Vas to automatski da poisti ako se okoristite komandom CleanUp Word HTMLiz Commandmenija.

Dreamweaver e Vam otvoritiClean Up Word HTMLdijalog, koji e Vam pomoi da sve to Vam netreba eliminiete.


17/35

| 17Ako je Show log on completionoekiran, Dreamweaver e Vam i prikazati sumarno rezultate ienjato moete i videti na slici ispod.

Dodavanje specijalnih karaktera

Specijalni znaci kao to je copyright ili trademark simbol je mogue uneti iz Textkategorije u Insertbar-u.

Kliknite na Charactersstavku na toolbar-u da izaberete neki od specijalnih karaktera.

Dodatni karakteri su dostupni ako koristite Insertmeni:

1. Pozicionirajte kursor gde elite da ubacite specijalni znak.2. Otvorite Insertmeni i selektujte HTML, a onda i Special Characters.3. Iz Special Characterspodmenija, izaberite Other.

U Insert Other Characterdijalog, kliknite na karakter koji elite da ubacite i onda kliknite na OK.

Uobliavanje tekstaUobliavate tekst u Dreamweaver kao i u standardnom word procesoru. Property Inspectorsadri slinealate kojima odreujemo font, boju (color), veliinu (size), i stil pasusa (paragraph format) zaselektovani tekst. Selektujete tekst a zatim promenite mu format u oblik koji elite.


18/35

| 18

Na primer:

1. Na bilo kom praznom delu stranice index.html ukucajte Dobrodoli na moj prvi web sajt. Kadazavrite, selektujete ukucano.

2. U Property Inspector-u, selektujte Verdana, Arial, Helvetica, sans-serifiz padajue liste Font.Prvi font iz skupa (Verdana) je onaj koji e browser pokuati da prikae. Ako font ne postoji nakorisnikovom raunaru, za prikaz stranice koristie se sledei koji je u ovoj listi (Arial), i tako redom.Izbor skupa font-ova umesto jednog fonta pomae Vam i da osigurate slian izgled stranice u svimuslovima.

3. Selektujte veliinu 10iz padajue liste Size.4. kliknite na sivo polje uz Sizepolje. Otvorie se meni za boju fonta (color menu). Izaberite neku

boju.

5. Sad deselektujte reenicu. Selektujte re Dreamweaveri kliknite na B(Bold) dugme u PropertyInspector-u.

6.

Konano, smestite kursor na poetak reenice i pritisnite Enterda napravimo nov red. U novomredu ukucajte Dobrodoli!!!7. Selektujte re Dobrodoli!!!i u Property Inspector-u selektujte Heading 1iz padajue liste

Format.

Formatmeni sadri ve definisane stilove za tekst. Uoite da kako Vi formatirate tekst na stranici takoDreamweaver prikazuje HTML tagove na status bar-u.

AKo elite brzo da selektujete deo teksta koji pripada jednom tagu dovoljno je da izbaberete tag na statusbaru.

Sem skupa fontova koji se primenjuju ostala formatiranja teksta su ista ili slina kao i u tekst editorima pa

ima neemo poklanjati posebnu panju.

Rad sa kaskadnim stilovima - Cascading Style Sheets (CSS)

Ve smo videli da Cascading style sheets (CSS) nude mnogo vie kontrole na izgledom i pojavljivanjemelementa na Vaim Web stranicama tako to implementiraju niz pravila koji opisuju ove elemente.Korienjem stilova preventivno spreavate da se pojavljivanje teksta na Vaoj stranici odreuje

politikom preglednika (browser-a) koji prikazuje stranicu. Videli smo da moete da koristite stilove dadefiniete izgled teksta (boja, veliina i stil) za razliite naslove, podnaslove, napomene itd. ak i da

browser prikae tekst u drugom fontu, ostala podeavanja e ostati nepromenjena, odnosno onakva kakoste ih vi definisali.

Konano uz stilove moemo da kreiramo i svoje klase, koje nam praktino omoguavaju da stvaramosopstvene tagove.

Izrada kaskadnih stilova

CSS Stylespanel nalazi se u Design (CSS)panel grupi.

Da biste redefinisali izgled taga na stranici uradite sledee:

1. Na Vaoj stranici, Selektujte tekst koji menjate, odn. tag koji ga sadri.

2. Kliknite CSS Styleskarticu na Design (u novijim verzijama, CSS) panelu3. Na dnu CSS Stylespanela, kliknite na dugmence New CSS Style.


19/35

| 19

Otvara se New CSS Styledijalog.

4. Proverite da li je Tagopcija selektovana.5. Ako je potrebno, selektujte eljeni tag iz Tagpadajue liste.6. Moete da izmenite izgled celog sajta ili samo jedne stranice. Preporuljivo je da Va ceo sajt

prati jednu liniju dizajna; na taj nain postiete da se korisnici lake snalaze na Vaim stranicama.U polju Define in, izaberite (New Style Sheet File). Tako ete kreirati novi kaskadni stil koji e

biti smeten u zasebnom fajlu sa ekstenzijom .css i na taj nain primenljiv na svim stranicamaVaeg sajta.

7. Kliknite na OK.Pojavljuje se Save Style Sheet File Asdijalog.

8. Unesite ime mainza kaskadni stil, izaberite ekstenziju .css, i kliknite na Save.Definicija stila

CSS Style Definitiondijalog se otvara, sa tagom koji ste izabrali za definisanje stila u naslovnoj liniji.


20/35

| 20

9. Koristite razliite kategorije izlistane u okviru leve strane ovog dijaloga da izmenite izgled tekstakoji e vaiti za ovaj tag. Na primer:o Da izmenite tip, selektujte Typeiz Categoryliste i izaberite font, veliinu, boju i

dekoracije koje elite da primenite na tekst.o Koristite Blockkategoriju da definiete razmake i poravnanja.o Koristite Listkategoriju da definiete izgled buleta u listi. o PositioningVam omoguava da precizno definiete pozicioniranje slojeva na Vaoj

stranici.

10.Kad ste zavrili kliknite na OK.Tag se pojavljuje u CSS Stylespanelu.

Savet:

Uoite da Dreamweaver otvara kaskadni stil i u Documentprozoru. Moete da vidite kod kada kliknetena karticu dokumenta. Kada zavrite snimite dokumenat.

Kao to smo videli, css klase su uobiajeni stilovi koji se ne vezuju za odreeni HTML tag ve moemoda ih primenimo na bilo koji tag. Da kreiramo klasu, koristimo isti proces sa razlikom da umestokonkretnog taga biramo da pravimo klasu:

1. Na CSS Stylespanelu, kliknite na New CSSStyledugme.


21/35

| 21NoviNew CSS Styledijalog se otvara.

2. Selektujte Classopciono dugme.

3. Unesite ime za klasu u Namepolje. Imena klasa moraju poinjati takom, Dreamweaver ih samubacuje umesto Vas (.unnamed1).

4. Ako je potrebno kreirajte novi kaskadni stil kako je to objanjeno u prethodnim koracima, iliizaberite postojei iz padajue liste.

5. Kliknite na OK.6. Otvara se CSS Style Definitiondijalog.7. Izaberite elemente koje elite da koristite i kliknite OK.

Stil se pojavljuje u CSS Stylespanel-u.

Primena stilova

Da biste primenili napravljeni stil na tekst koji se nalazi na Vaoj stranici, uradite sledee:

1. Selektujte tekst.2. U CSS Stylespanel-u, kliknite desnim klikom na stil koji elite da primenite i kliknite na Apply.

Napomena:Applyje takoe dostupno i iz Optionsmenija u desnom gornjem uglu Design (CSS)panela.

Za sada, kreirali smo kaskadni stil za aktivnu stranicu, ali on jo uvek nije dostupan za ostale stranicesajta. Da bismo ga uinili dostupnim ostalim stranicam moraemo jo da zakaimo (attach) na kaskadnistil za ove stranice:

1. Otvorite drugu stranicu sajta.2. Na dnu CSS Stylespanela, kliknite na Attach Style Sheetdugme.


22/35

| 22

Otvara se Attach External Style Sheetdijalog.

3. Kliknite na Browsedugme.4. U Select Style Sheet Filedijalogu, pronaite eljeni snimljeni stil (u naem sluaju to je fajl

main.css) i kliknite na OK.

5. proverite da li je opciono dugme Linkselektovano.6. Kliknite na OK.

Napomena:Opcija import se esto koristi u svrhu modularnosti. Recimo, elimo da napravimo jedan cssfajl koji e definisati kako izgledaju tabele, drugi za naslove, a trei koji definie izgled svega ostalog. Nakraju, napravimo jedan main.css koji ih sve objedinjuje (importuje) u sebe.

Izmena stilovaDa biste izmenili stil, jednostavno ga dvokliknete:

1. U CSS Stylespanelu, dvokliknite stil koji elite da menjate.2. Otvara se Tag Inspectorsa mreom svih svojstava stila.


23/35

| 233. Dvokliknite u polje svojstva stila koje elite da menjate, zatim selektujte vrednost iz padajueliste.

Na primer, da biste izmenili veliinu teksta dvokliknite unutar polja koje prikazuje trenutnu veliinu fontai zatim selektujte eljenu veliinu iz padajue liste.

Izmene se automatski primenjuju na svim stranicama iji elementi koriste menjani stil.

Rad sa slikama

Dreamweaver Vam omoguava da ubacite na Vau stranicu slike GIF i JPEG formata, kao i slike PNG(Portable Network Graphic) formata.

Kada ubacite sliku na Web stranicu Dreamweaver kreira link ka slici. Ova slika mora biti takoe upload-ovana zajedno sa stranicama na Web server kako bi se stranica ispravno prikazala u Web browser-u.

Ubacivanje slika

Da biste ubacili sliku, iskoristite Imagesdugme na Insertbar-u:

1. Pozicionirajte kursor u dokument na mesto gde elite da se pojavi slika koju ubacujete.2. Na Inserttoolbar-u, kliknite na Images dugme i selektujte Image iz padajueg menija.

Select Image Sourcedijalog se otvara.

3. Pronaite sliku koju elite da ubacite i kliknite OK.Slika se pojavljuje na stranici..

Savet:

Moete takoe prevui i pustiti (drag and drop) sliku iz Filespanel-a.Generalno, kada premetate fajlove iz jedne u drugu fasciklu koristei Filespanel, Dreamweaver auriralinkove na stranicama. Kako bilo, Vi uvek moete runo promeniti putanju linka ka slici ako to elite nasledei nain:

1. Na vaoj stranici, kliknite na sliku, ili na njen kontejner ako je link izgubljen da biste selektovali. 2. Tekua putanja za link ka slici se vidi u Src(Source) polju na Property Inspector-u. Da biste

uneli ispravnu putanju moete upotrebiti bilo koji od do sada spominjanih naina za linkovanjedokumenata: kucanjem putanje linka direktno u polju, koristei Point to Filedugme, ili Browsefor Filedugme.

Promena svojstava slika

Koristite Property Inspector da definiete svojstva slike koju ubacujete, ukljuujui visinu (height) iirinu (width), poravnanje, razmak, kao i alternativni tekst koji e se prikazati na stranici u sluajuneuspenog uitavanja slike na stranicu. Selektujete sliku klikom na nju i menjate vrednosti u poljima naProperty Inspector-u:


24/35


25/35

| 25Select Filedijalog se otvara.

2. Izaberite film koji elite da ubacite na stranicu i kliknite na OK.Flash movie se pojavljuje u dokumentu i izgleda kao sivi pravougaonik sa Flash ikonicom na sredini. Da

biste videli flash Flash movie, morate mu pristupiti preko Property Inspector-a ili pregledom stranice u

browser-u.

3. Da biste videli Flash movie koristei Property Inspector, proverite da li je flash movieselektovan, i u Property Inspector-u, kliknite Playdugme.

Flash movie e se pokrenuti. Da ga stopirate, kliknite na Stop.Ubacivanje flash dugmadi (Flash buttons) na stranicu u Dreamweaver je takoe jednostavno kao i filma:

1. Na Insertbar-u, kliknite na Mediadugme i selektujte FlashButtoniz padajue liste.2. U okviru Sample videete Preview dugmeta. Izaberite stil u polju Style.3. Unestite tekst za dugme u polju Button Text4. Izaberite Font i veliinu fonta.5. Izaberite u polju Link na koju se stranicu prelazi nakon klika na dugme.6. Izaberite Target (_blank, _self,.. ).7. Izaberite pozadinsku boju.8. Unesite ime za dugme (trudite se da ime upuuje na funkciju ili metu dugmeta).

Uz pomo fle dugmadi moete lako i efektno definisati navigaciju.

Napomena: Fle dugmad na alost nisupodrana u poselednjoj verziji Dreamweaver-a: CS4.

Korienje slojeva u dokumentimaZa razliku od tabela, slojevi Vam dozvoljavaju da privrstite objekte, ak i ako se preklapaju bezrtvovanja preciznog pozicioniranja. Takoe moete kontrolisati i vidljivost slojeva, jednako dobro kao injihovo pozicioniranje na stranici, koristei kaskadne stilove. Ovakva fleksibilnost ini slojeve monomalatkom za ureenje i dizajn stranice.

Da biste dodali sloj nas stranicu:

1. Na Insertbar-u, proverite da li je selektovana Layout kategorija i kliknite na Draw Layerdugme.2. Kliknite i prevucite na stranici obast koja e postati sloj. Sloj se ponaa kao kontejner za elementekoje dodajemo na stranicu, kao to je tekst, dugme, slika ili Flash movie.

3. Ako je potrebno, Moete prevui miem sloj na drugu poziciju na stranici. Isto moete koristitipolja L (Left) i T (Top) na Property Inspector-u u koja se unose vrednosti za poziciju gornjeg


26/35

| 26levog ugla sloja.

Savet:

Ukljuivanje pomone mree (grid) moe Vam pomoi da pozicionirate slojeve tano na one pozicije udokumentu na kojima elite da se nalaze: Otvorite View meni i selektujte Grid, a zatim Show Grid.Pojavie se mrea preko cele stranice. U istom meniju izaberite Snap To Grid koja e Vam pomoi da sesloj lepi tano iz mreu. Kad priete liniji koja pripada mrei sam sloj e se lepiti uz nju.

4. Moete promeniti dimenzije sloja razvlaenjem ili unosom odreenih vrednosti u polja W(Width)i H(Height).

5. Koristite Property Inspectorda definiete dodatna svojstva sloja ukljuujui pozadinsku sliku(background image), pozadinsku boju (background color), vidljivost (visibility), clip, i overflow.

Clipspecificira vidljivu oblast u okviru sloja; tj, ovo je korisno ako elite da se samo deo sadrajasloja vidi, a definiete ga unosom leve (left), desne (right), gornje (top) i donje (bottom)

koordinate (u pixelima). Overflowdefinie kako e izgledati sloj ako njegov sadraj prelazinjegove dimenzije. Moete izabrati da se sadraj koji pretie sakrije ili da se u sloj ukljui kliza,koji bi omoguio prikaz nevidljivog sadraja.

6. Obavezno unesite smisleno ime u Layer IDpolje. Imenovanjem slojeva olakavate sebi kasnijeodravanje istih i lake upravljanje njima uz pomo Layerspanel-a.

7. Kada definiete svojstva sloja, unesite u njega sadraj koristei dugmad na Insertbar-u. U njihmoete ubaciti bilo ta, sliku, Flash movie pa ak i tabelu. Da biste uneli tekst u sloj jednostavnoga ukucajte i uobliite kako smo nauili.

Layerspanel omoguava Vam da upravljate vidljivou slojeva na Vaoj stranici, to omoguava i dasakrijete one slojeve na kojima trenutno ne radite:

1.

na Designpanelu, kliknite Layerskarticu.

2. Sliica oko predstavlja vidljivost sloja podrazumenano ovo je polje prazno, i sloj je vidljiv. Dasakrijete sloj, selektujte ga u Layerspanel-u i kliknite na prazan prostor u Visibilitykoloni koja je

levo od imena sloja (prazan prostor ispod sliice oka).Pojavie se zatvoreno oko, da oznai da je taj sloj sakriven.


27/35

| 273. Kada je sloj sakriven, ne pojavljuje se vie u dokumentu, ak ni kada pregledamo stranicu ubrowser-u.

4. Da uinite sloj ponovo vidljivim, kliknite na zatvoreno oko.Pojavljuje se otvoreno oko koje oznaava da je sloj opet vidljiv.

Redosled slojeva i njihovu vidljivost ako se slojevi preklapaju (overlap) definie njihov redosledpojavljivanja u Layerspanel-u. Sloj koji je na vrhu moe da pokrije one slojeve koji su ispod njega uLayerspanel-u. Na primer, Ako smestite sliku u jedan sloj, a onda iskoristite drugi sloj da biste smestili

tekst iznad slike, sloj koji sadri tekst trebao bi da se pojavljuje pre sloja sa slikom u Layerspanel-u.Da promenite redosled vidljivosti, jednostavno prevucite sloj na novu poziciju u Layerspanel-u.

ablon (Template) u Dreamweaver-u...ablonje obrazac iji se izgled (struktura) moe primeniti na vie stranica. U Dreamweaver-u, ablonisadre neizmenjive oblasti (non-editable regions) koji ostaju isti na svim stranicama koje su izraene

pomou ablona, a takoe sadre i izmenjljive oblasti (editable regions), u kojima e biti smetan tekst ilisadraj koji se razlikuje od stranice do stranice.

abloni Vam omoguavaju da kreirate izgled stranice jednom, i da ga koristite koliko god puta hoete nanovim stranicama. Kada neto izmenite na ablonu, Dreamweaver automatski aurira sve stranice koje su

napravljene na osnovu tog ablona.

Pravljenje ablonaDa kreirate ablon, moete poeti sa novim HTML dokumentom, ili sa ve postojeom Web stranicom:

1. Na otvorenoj stranici, kreirajte dizajn za upotrebu na drugim stranicama.2. Dodajte sadraj koji je isti za sve stranice. Na primer, Ako elite da se logo pojavljuje na vrhu

svake stranice vaeg sajta, dodajte ga.3. Kada zavrite, snimite dokumenta kao ablon: U Filemeniju, selektujte Save as Template.

Pojavljuje se Save as Templatedijalog.

4. Proverite da li se pojavljuje ispravna vrednost za sajt u padajuoj listi Site.5. Unesite ime u Save Aspolje.6. Kliknite na Save.

Napomena:

Dreamweaver abloni se uvaju sa .dwt ekstenzijom.


28/35

| 28Podrazumevano, Dreamweaver postavlja sav sadraj neizmenljivim. Vi morate da odredite koji delovistranica e biti izmenljivi na stranicama baziranim na ovom ablonu:

1. Pozicionirajte kursor na mesto gde treba da bude region koji e moi da se menja. Na primer,Kliknite na prazno u okviru stranice, ili selektujte odreeni sloj ili eliju tabele.

2. U Insertmeniju, selektujte Template Objects, a onda Editable Region.Pojavljuje se New Editable Regiondijalog.

3. Unesite ime za region i kliknite na OK.Pojavie se tanka plava ivina linija oko regiona.

4. Moete formatirati region uz pomo Property Inspector-a selektujui type style, size, color, ilineke druge atribute. Kad budete kreirali stranicu baziranu na ablonu, tekst koji unesete bieautomatski formatiran na isti ovaj nain.

5. Kada zavrite sa regionima koji su izmenljivi, sauvajte ablon. Ako je potrebno, kliknite na Yesda aurirate (update) linkove.

Primena ablona

Da kreirate stranicu baziranu na ablonu uradite sledee:

1. U Filemeniju selektujte New.2. U New Documentdijalogu, kliknite na Templateskarticu.3. Uverite se da je ispravan sajt selektovan, a onda selektujte ablon (template).4. Kliknite Create.

Da biste primenili ablon na ve postojeu Web stranicu uradite sledee:

1. Otvorite stranicu na koju elite da primenite ablon.2. U Filespanelu, kliknite na Assetskarticu.

3. Kliknite na Templatesdugme na levoj strani panela.Svi abloni koji su kreirani za sajt bie prikazani u listi

4. Izaberite ablon koji elite da primenite na tekuu stranicu i kliknite na Applydugme na dnupanela.


29/35

| 29Otvara se Inconsistent Region Namesdijalog.

5. Dreamweavernije siguran gde treba da smesti postojei sadraj stranice. Selektujte redom sveregione i iz Move Content to New Regionpadajue liste, selektujte izmenjivi region gde bi

sadraj stranice trebao da bude smeten.6. Kliknite OK.

Biblioteka u Dreamweaver-u

Dreamweaver-ova biblioteka skladiti elemente kao to su slike i animacije, kako bi taj materijal mogli daupotrebimo na vie stranice/sajtova. Ako izmenite stavku koja se nalazi u biblioteci, Dreamweaverautomatski aurira sadraj svih stranica na kojima se ta stavka pojavljuje.

Kreiranje stavke biblioteke

Moete da konvertujete jedan elemenat sa stranice u biblioteku na sledeinain:

1. Otvorite Assetspanel.2. Kliknite na Librarydugme na levoj strani Assetspanela.

3. U dokumentu, selektujte stavku koju elite da dodate u biblioteku.4. Kliknite New Library Itemdugme na dnu Assetspanela.Dodata stavka se pojavljuje u biblioteci pod imenom Untitled. Mali pregled stavke je prikazan na vrhu

panela.


30/35

| 305. Izmenite Untitledsa novim smislenim imenom i kliknite Enter.Savet:

takoe moete prevui elementa sa Web stranice na Assets panel.

Dodavanje stavke iz biblioteke na stranicu

Da biste dodali stavku iz biblioteke na stranicu uradite sledee:

1. Pozicionirajte kursor na mesto gde elite da se u dokumentu pojavi stavka koju ubacujemo izbiblioteke.

2. U Assetspanelu, selektujte stavku koju elite da ubacite.3. Kliknite na Insertdugme na dnu panela.

Stavka se pojavljuje na stranici

Savet:

Takoe moete prevui stavku iz biblioteke na stranicu.

Upload Web Stranice

Iskoristite Filespanel da biste upload-ovali (preneli na web server) web stranice koje ste izradili. Ukolikoniste definisali do sada informacije o udaljenoj (remote) lokaciji, tj., serveru (informacije koje su potrebne

Dreamweaver da bi pristupio Vaem web serveru), uinite to selektovanjem Manage Sites iz padajuegmenije u Filespanelu, izaberite Va sajt iz liste I kliknite na Editu Manage Sitesdijalogu.

U Site Definitionarobnjaku, kliknite na Advancedkarticu I izaberite Remote Infokako biste popunilipolja koja su potrebna da popunite. Najveim delom informacije koje su ovde potrebne obezbeuje VaInternet Service Provider koji host-uje Va sajt na ijem e serveru fiziki biti smeten Va sajt.

Obino su to sledee informacije: ime host-a (na primer www.cnti.info, www.eunet.yu ili

www.neobee.net), korisniko ime i lozinka koju Vam dostavlja Va provajder. S obzirom da je naasituacija specifina, potrebne informacije Vam mi dosatvljamo. Kao FTPhost unesite ftp.cnti.info, kaokorensku fasciklu (Host directory) unesite sledee /vase_korisnicko_ime_na_moodle_sistemu/, nezaboravite da unesete i na poetku i na kraju forward sle /. Kao Login ime unesite web0i, i1..9, kaolozinku unosite web000i, i1..9. Naravno, umesto iunosite broj grupe kojoj pripadate.
http://www.cnti.info/http://www.cnti.info/http://www.eunet.yu/http://www.eunet.yu/http://www.neobee.net/http://www.neobee.net/http://www.neobee.net/http://www.eunet.yu/http://www.cnti.info/


31/35

| 31Na primer, koleginica Aleksandra ima korisniko ime na sitemu caca, smetena je u grupu web03, takoda su njeni podaci sledei:

FTP host: ftp.cnti.info

Host directory /caca/

Login: web03

Password: web0003

Kada zavrite sa unosom, kliknite na OK, a potom na Doneu dijalogu Manage Sitesda zatvorite prozor.Vodite rauna da ove informacije moraju biti tano unete, pazite na mala i velika slova, itd.

Od ovog momenta, moete upload-ovati sve Vae dokumente na Web server:

1. U Filespanelu, izaberite dokumenat koji elite da upload-ujete..2. Kliknite na Put Files dugme.

Dreamweaver obino tada pita da li elite da upload-ujete i fajlova od kojih dotini fajl zavisi. To suobino slike koje se prikazuju na stranici ili kaskadni stilovi, upravo sve ono to je potrebno jednojstranici da bi se ispravno prikazala. Ukoliko jo uvek niste upload-ovali ove fajlova na server, ili ste ihmenjali u periodu od poslednjeg upload-a na server, kliknite naYes.

Dreamweaver upload-uje fajlove u istu strukturu fascikli na serveru kao to ste je vi organizovali ulokalnoj verziji sajta, a koja se vidi u Filespanel-u, kreira potrebne podfascikle kada je to potrebno. Da

biste videli strukturu fascikli i fajlova koji su upload-ovani na server jednostavno izaberite Remote viewiz padajueg menije u okviru Filespanel-a.

Moete upload-ovati i ceo sajt na istovetan nain, samo u tom sluaju je potrebno da selektujete korenskufasciklu Vaeg lokalnog sajta umesto pojedinaan fajl. Ukoliko ste prethodno ve upload-ovali sajt, ilisamo neke fajlova, Dreamweaver e Vas pitati da li elite da prepiete nove preko postojeih fajlova naserveru.

Poto je rezultat radionice 1 ve smeten na serveru, predlaem vam da prvo obavezno preuzmete(dugme download files) sve fajlove sa servera pa da ih nakon izmene uploadujete.

Dizajn sa CSS-om nasuprot dizajna baziranog na tabelama

Najnoviji trend u razvoju web-a je prelazak sa tabelarnog dizajna web stranica na isti CSS dizajn.Najkonzervativniji "tabelai" e Vam rei da su CSS bazirani web sajtovi nekompatibilni sa svimbrowser-ima i da zahtevaju vie vremena za izradu, to je donekle tano. Potrudiemo se da ipak damoneto malo precizniji prikaz razlika u ovim pristupima web dizajnu.

Kompleksnost izrade

Sajtovi kreirani na istom CSS-u esto zahtevaju prilino vremena za izradu zbog brojnih div tagova kojisu onova ovakvog jednog sajta. Ipak, to ne mora biti pravilo, ako dobro osmislite (i precizno nacrtate)

Va sajt, njegova izrada bazirana na CSS-u u najveem broju sluajeva je slaganje puzzle slagalice. Svakapuzzle ima odreeni broj delova - svaki deo moe biti razliite veliine u zavisnosti od ostalih sastavnihelemenata. Sa CSS-om je vrlo lako razlikovati sastavne delove sajta koristei se pozadinskom bojom bez

punjenja sajta sadrajem. Korienje CSS znai da ceo sajt moe biti izmenjen lako i jednostavnomenjajui CSS fajl bez izmena na svim web stranicama kao to bi to bio sluaj sa sajtom baziranim natabelama. Ovde govorimo o definisanju konstruktivnih elemenata stranice, ne o fontu, pozadinskoj boji i

ponaanju hyperlink-a.

Sajtovi bazirani na tabelama se generalno lake izrauju ali odravanje i eventualne izmene ovakvihsajtova je obrnuto srazmerno tee u odnosu na izmene i odravanje sajtova baziranih na CSS-u. Vrlo jenezgodno redizajnirati stranicu izraenu koristei tabele i esto je lake dizajnirati je od nule koristeiCSS pogotovo ako je stranica pretrpana sadrajem.

Brzina uitavanja

Kad su u pitanju sajtovi bazirani na tabelama browser-i pokuavaju vrlo esto da uitaju kompletansadraj ovakve stranice pre nego to je prikau korisniku (IE)- to vodi nezadovoljstvu korisnika koji enajverovatnije kliknuti na back dugme i posetiti sledei sajt u listi rezultata. Kad su u pit anju CSS


32/35

| 32bazirani sajtovi browser prikau sav tekst na sajtu pa tek onda skidaju i prikazuju slike i pozadine.Rezultat ovakvog ponaanja je da e korisnik moi da pone da ita sadraj dok se ne uitaju i prikaudodatni elementi stranice. Ovde moramo bit i vrlo rezervisani jer se razliiti browser-i vrlo razliito

ponaaju ak i sa istim sajtovima. Recimo, mozzila Firefox ne pravi toliki zastoj kao IE u prikazu sadrajani sa tabelarno baziranim sajtovima.

Indeksiranje od strane pretraivaa

Iako ne postoji dokaz da e CSS bazirani sajt biti bolje rangirani na pretraivaima od sadrajem

identinih sajtova baziranih na tabelama ipak je injenica su takve web stranice manje pretrpane kodom ivie sadraja e biti indeksirano kompletno od strane pretraivaa nego tabelarno bazirani web sajt nakojem robot-i moraju da "iscede" sadraj iz smee tabela, vrsta i kolona.

Kompatibilnost Browser-a

Tabelarni sajtovi generalno rade na svim verzijama svih browser-a i kako se koriste tabele prikaz u

razliitim browseri-ima je prilino ujednaen (iako nije stopostotan). Ali, realno zapitajmo se koji sebrowser-i koriste? Istraivanja su pokazala da se najvie koriste IE 6+ i Firefox, sa malim procentomSafari-ja i Opera-e. Tek odnedavno se pojavljuje i Google Chrome, ali kako je on jo uvek u alfa fazirazvoja u verziji 2.0 na njega moemo ozbiljnije raunati u blioj budunosti. Najvie dizajnera koristiCSS za sajtove koji su optimizovani za zadnje verzije Interenet Explorer-a i Firefox-a jer su

najzastupljeniji u korisnikoj populaciji. Minus za CSS iako to nije do samog CSS -a ve razliitihtumaenja browser-a, jeste da browseri sa izvesnim razlikama tumae CSS i prikazuju razliito sajtove

bazirane na CSS-u.

Upotrebljivost

Postoje i situacije u kojim je sigurno bolje koristiti tabele. Konkretno, kad prikazujete listu ili tabelarne

rezultate esto je jednostavnije i i lake uraditi to tabelom nego koristiti CSS. E -Commerce sajtovigeneralno koriste tabele kao korpu za kupovinu i na stranicama za proveru i prikaz podataka o narudbini.U ovakvim okolnostima potpuno je normalno koristiti tabele u dizajnu.

Zakljuak

Preuzmite i pogledajte u Dreamweaver-u jedan jednostavan primer (preuzmite ovde) koji donekleilustruje gornju analizu. U pitanju je arhiva koj sadri jednu stranicu ija je izrada b azirana na CSS-u i

jedan njoj pridruen CSS fajl (Primer.css) i jednu stranicu ija je izrada bazirana na tabelama. Sadrajovih stranica je identian. Nakon raspakivanja otvorite obe stranice u Dreamweaver-u i uporedite HTMLkodove ove dve stranice. Na kojoj stranici ima manje HTML koda a vie sadraja? Na kojoj stranici jelake odravati i menjati sadraj? Kako prikazuju sadraj razliiti browser-i, IE i Firefox?

Dakle, kom dizajnu treba teiti? Iako ne postoji jednostavan odgovor na ovo pitanje, jer je najboljekoristiti i tabele i CSS (u zavisnosti od potreba i situacije), usudiemo se da ipak prednost damo CSS -u.

Ne postoji nijedan dobar razlog da izbegavate CSS i da kreirate sajtove bazirane na tabelama, jer VamCSS nudi visoko adaptivnu, izmenjivu i istu web stranicu. Iako je CSS neto emu treba teiti zbog

fleksibilnosti i opte prihvaenosti, ne treba se odrei tabela u potpunosti. CSS stranice se uitavaju bre ipo naem skromnom miljenju bolje su indeksirane na pretraivaima. Postoji odreeni brojneusaglaenosti u prikazu stranica baziranih na CSS od strane razliitih browser-a to se moe eliminisati

proverom tokom izrade.

Dodatak Dreamweaver behaviors

Rollover Image

U ovoj lekciji upotrebiemo posebne skriptove, koji se u Dreamweaver-u zovu 'ponaanja', (behaviors),Da bi napravili rolover sliku na izabranom mestu na strani pritisnite dugme Rollover Image na traci

CommonpanelaInsert. Otvorie se prozorInsert Rollover Image

Daemo smislena imena koja ukazuju na namenu slika. U imenima ne sme biti razmaka i specijalnihkaraktera.

1. Prvo emo uneti koja e biti original, tj. sliku koja e biti na strani pre nego to posetilac dovede
http://www.cnti.info/moodle/file.php/4/lesson_cssvstablebasedwebdesign/TableAginstCSS.ziphttp://www.cnti.info/moodle/file.php/4/lesson_cssvstablebasedwebdesign/TableAginstCSS.ziphttp://www.cnti.info/moodle/file.php/4/lesson_cssvstablebasedwebdesign/TableAginstCSS.zip


33/35

| 33pokaziva mia iznad nje (dugmeBrowsedo polja Original Image).2. Zatim treba da unesete sliku koja e sepojaviti kada posetilac pree pokazivaem preko originalne

slike (dugmeBrowsedo poljaRollover Image).

Savet: Slika koja se pojavljuje na poetku i ona koja je zamenjuje treba da imaju iste dimenzije, inae edruga slika biti smanjena ili uveana u skladu s dimenzijama prve slike i zato izobliena. Takoe oveslike treba da budu jako sline a opet dovoljno razliite da korisnici uoe prelaz. Moemo i odmahdefinisati link unosei u polje 'When Click, Go To URL' URLadresu. Ako ne upiemo nita u ovo polje,

Dreamweaver e 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 kadakorisnik klikne na nju. Naravno mogue je i slici koja je ve na strani dodati prelaze i to pomou panela

Behaviors iz grupe panela Design (tag). Selektujemo sliku kojoj elimo dodati zamen, na panouBehaviorspritisnemo dugme sa znakom (+) i izaberemo opciju Swap Image.

3. Pojavie se prozor Swap Imagegde u spiskuImagestreba izabrati sliku koja e biti zamenjena(original). Izuzetno je vano slikama dati odgovarajua imena, u suprotnom kako emo izmeu

bezimenih slika izabrati onu koja nam treba?. Sada pritiskom na dugmeBrowsedo polja SetSource to: izabraemo sliku koja e zameniti originalnu. Uobiajeno je (radi lakeg snalaenja)imenu poetne (originalne slike) dodati sufiks _off ili _out, a imenu slike koja zamenjujeoriginalnu sufiks _on ili _down.

4. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj je pridruenskript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload ImageiRestore ImageonMouseOut obavezno potvrdite. OpcijomPreload Imageobezbeujemo da se slike uitaju bezobzira da li su prikazane na stranici i tako eliminiemo kanjenje koje bi uzrokovalo uitavanjezamenske slike tek kada posetilac pree preko originalne. Opcijom Restore Image onMouseOutobezbeujemo da se zamenska slika zameni poetnom kada se smakne pokaziva mia izvan slike.

5. Pritisnite OK.Kad selektujemo slike u panelu Behaviorsvidi se spisak akcija -Actionskoje izvrava Dreamweaver, uzavisnosti od odreenog dogaaja Events u browseru posetioca. Na primer, Swap Image je akcija, aonMouseOver dogaaj.

PopUp Message

Da bi dodali akciju iskaue poruke:

1. Izaberite sliku na stranica i potom pritisnite (+) na paneluBehaviors2. U padajuem meniju akcija izaberite akcijuPopup Message.3. Upiemo poruku u prozor koji se otvori.4. Pritisnite OK

Na paneluBehaviorsvidee se da je akcija (skript) Popup Messagepridruena odgovarajuem dogaaju.u naem primeru vezana je za dogaaj onMouseUp. Da bi eventualno promenili ovaj dogaaj oznaimoga i pritisnimo strelicu nadole desno od njega. Pojavie se lista moguih dogaaja.

Browser izvrava akcije po njihovom redosledu u spisku. Ovaj redosled moemo promeniti pomoustrelica gore-dole u gornjem desnom uglu panelaBehaviors.


34/35

| 34Savet:Nemojte dodavati previe poruka ni slika koje iskau, jer one brzo smore posetioca. Da bi e ljenuakciju-dogaaj izbrisali, oznaimo ih i pritisnimo znak (-) koji se nalazi odmah do znaka (+).

Poruka na statusnoj traci

Poruka na statusnoj traci je poruka koja se pojavljuje na statusnoj traci u dnu browsera.

1. Poruka na status baru daje posetiocu kratak opis sadrine na koju vodi hiperveza.2. Izabraemo sliku na strani.3. Pritisnimo dugme (+) na panelu Behaviors i izaberite akciju Set Text - Set Textof Status Bar.4. U prozoru ukucamo odgovarajuu poruku.5. Pritisnite OK

Sada emo izabrati dogaaj koji e pokrenuti akciju ispisa poruke na statusnoj traci. Obino je toonMouseOver dogaaj. Tekst koji je definisan u naem primeru je "Kliknuli ste dugme Play..."

Iskaui (Pop-Up) meniSkriptove za iskaue menije moete da ukljuite meu ostale navigacio ne elemente.Iskaui meni moemo pridruiti slikama ili aktivnim podrujima (hotspot-ovima) mapiranih slika.Recimo da elimo da ga pridruimo odreenom aktivnom podruju mapirane slike.

1. Selektujemo aktivni deo (hotspot)2. Pritisnemo znak (+) na panelu Behaviors i u meniju akcija izaberemo skript Show Pop-Up Menu.3. Pojavie se istoimeni prozor sa aktivnom karticom Contents4. Zadajemo opcije koje e sadrati na meni, tako to u polju Textupisujemo ime opcije, a u polju

Link, hipervezu za tu opciju.

5. Pritiskom na dugme (+) u polju Menu iznad polja Text, dodajete nove opcije meniju6.

Za promenu redosleda opcija oznaite opciju i pritiskajte dugmad gore -dole.

Savet: Ako hoete da uklonite opciju iz menija izaberite je i pritisnite dugme (-).

Savet: Moete da pravite i podmenije, izborom opcije koja treba da postane podmeni prethodne opcije umeniju i pritiskom na dugme sa sliicom smaknutog srednjeg pravougaonika. Ako hoete da premestiteopciju u podmeni vieg nivoa, pritisnite dugme sa sliicom poravnatih pravougaonika.

Na kartici Appearance biramo orijentaciju menija horizontalno-vertikalno, font, veliinu slova,poravnanje teksta. Moemo izabrati boju elije i teksta kada pokaziva mia nije na njoj i obrnuto.


35/35

| 35Na karticiAdvancedpodeavamo:

irinu i visinu elije (najea opcija jeAutomatic),udaljenost sadraja elije od ivica menija (CellPadding),razmak izmeu elija (CellSpacing),uvlaenje teksta od ivice menija (TextIndent),vreme potrebno za zatvaranje menija kada posetilac pomeri pokaziva van njega (MenuDelay),

pojavljivanje okvira i njegovu debljinu (Borderwidth),boju okvira i boju senke opcije (Shadow).

Na kartici i biramo poziciju menija u odnosu na objekat koji ga aktivira. Mogue varijante su prikazanena slici. Oznaite opciju HideMenu on onMouseOut tako da meni nestaje svaki put kada pomerimo

pokaziva mia sa njega.

Traka za navigaciju

Traka za navigaciju je niz slika linkovanih na stranice prezentacije. Trake za navigaciju su vrlo slinejednostavnim Rollover slikama. Svaka slika na traci moze imati do etri stanja u zavisnosti od akcijaposetioca. Prva dva stanja imaju obine Rollover slike.

Up Image -prikazuje se kada se strana tek uita.

Over Image -prikazuje se kada posetilac pree pokazivaem preko slike.Down Image - prikazuje se kada korisnik klikne na sliku

Over While Down Image -prikazuje se kada korisnik pree pokazivaem mia preko slike koju jeve kliknuo

Kako se ubacujeNavigation Bar:

1. Oznaimo mesto na stranici gde elite da unesete traku za navigaciju i izaberite opcijuInsert -Image objects - Navigation Bar

2. Otvara se prozorInsert Navigation Bar.3. U poljeElement Nameupiite ime elementa.4. U naredna etiri polja se smetaju slike za etiri razliita stanja dugmeta u zavisnosti od akcija

posetilaca.5. Zatim u polju When Clicked go to URLnapravimo link za to dugme do eljene strane. Dok birate

opcije u ovom prozoru, ime elementa (dugmeta) koje se menja prikazuje se u spiskuNav Bar

Elements na vrhu prozora. Dodavanje novih odnosno brisanje nepotrebnih dugmadi se vriznakovima (+) i (-). Redosled dugmadi birate strelicama gore-dole.

6. Pritisnite OK.

Savet: Ako hoete kasnije da je promenite izaberite Modify - Navigation Bar. Otvorie se prozorModifyN i i B k ji j k id ti I N i i B b ti bi j