Dreamweaver MX

. Za običan tekst koristi se, po pravilu, format pasusa. Ne zaboravite da posle nekog vremena sačuvate vaš rad.

Slika 3.1.1 Formatiranje teksta Ako hoćete da pređete u novi red a da pritom ne bude dodatnog razmaka između prethodnog i novog reda pritisnite Shift + Enter. To znači da ste ostali u istom pasusu. Označavanjem bilo kog reda nekog pasusa i njegovim formatiranjem, formatirate celi pasus. Mogućnosti za poravnanje teksta su standardne (levo, desno, centralno i obostrano).

- 15 -

Macromedia -

Dreamweaver MX

Osim poravnanja, pasuse teksta, možete i da uvučete od margina. Za to se koriste dugmad Text Indent i Text Outdent u panelu Properties. (slika 3.1.1) U Dreamweaveru možete praviti dve vrste lista (spiskova), uređene liste (Ordered List) i neuređene (Unordered List), liste nabrajanja. Da bi napravili (ne)uređenu listu, poterbno je selektovati željeni deo teksta i pritisnuti dugme (Un)Ordered List na Property panou.(slika 3.1.1). Šemu numerisanja uređene liste (number, roman, alfabet) moguće je odabrati pomoću List Item opcije na property panou. Ista opcija služi za modifikovanje neuređene liste (bullet, square).Često je potrebno poslednje formatiranje ponoviti na sledećim pasusima ili drugom izabranom tekstu. To je najlakše uraditi koristeći naredbu Repeat, iz menija Edit, ili prečicom sa tastature Ctrl + Y. Dodavanje teksta iz drugih dokumenata Tekst se strani može dodati kopiranjem iz drugog dokumenta. Dreamweaver može 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 možete kopirati na vašu stranu.

3.2

Rad sa fontom

Web strane će biti zanimljivije i lakše će se čitati ako promenite font kojim se prikazuje tekst. Morate voditi računa 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 možete da utičete na prored teksta i međuslovna rastojanja. Font cele strane ili izabranog dela teksta se može menjati na više načina, direktno na panou Properties u padajućoj listi Font ili desnim klikom izabirajući opciju Font, Edit Font List. (slika 3.2.1) Da bi posetilac video stranu onako kako ste je napravili mora na svom računaru 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 pokušati da upotrebi drugi a na kraju treći. Ako ni jednog od tih fontova nema na korisnikovom računaru, tekst se prikazuje u podrazumevanom fontu čitača. Kombinaciju fontova možete da promenite kad izaberete opciju Edit Font List. Izaberite kombinaciju fontova i zatim jednu od sledećih opcija: - da biste dodali ili uklonili font, izaberite font i pritiskajte dugmad sa strelicama koje premeštaju fontove između 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 upišite ime fonta u polje ispod liste available fonts, i pritisnite dugme sa dvostrukom strelicom. U HTML-u su mogućnosti menjanja veličine fonta ograničene. U panelu Properties izaberite listu veličina fontova Size. Veličine su poslagane od +1 do +7 i od -1 do -7. Ako izaberete broj bez predznaka zadali ste apsolutnu veličinu fonta, a biranjem broja sa predznakom + ili- zadajete relativnu veličinu fonta, npr. broj +1 daje font za jedan broj veći od njegove osnovne veličine. Podrazumevana osnovna veličina fonta u browseru je 3.

- 16 -

Macromedia -

Dreamweaver MX

Slika 3.2.1 Rad sa fontom Takođe 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. Najčešće korišćene boje snimite u direktorijum Favorites.

3.3 HTML i CSS stilovi Da bi Web strane bile zanimljivije ispisuju se raznim fontovima. Oblik, veličinu i boju slova možete lako menjati, ali ako hoćete da upotrebite nekoliko kombinacija boja, oblika, veličina 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 možete ponovo da upotrebite u drugim pasusima istog dokumenta i u drugim dokumentima. Primenom ovih stilova dokumenti će izgledati ujednačenije, a postupak formatiranja teksta će biti znatno ubrzan. Ako izmenite ili obrišete neki stil to neće uticati na izgled teksta već formatiranog tim stilom. U panelu Design naći ć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 utiču na tekst koji je bio izabran u trenutku kada ste ga otvorili. Važno je pomenuti da postoji mogućnost 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.

- 17 -

Macromedia -

Dreamweaver MX

Slika 3.3.1 HTML Stil Za formatiranje koje ažurira 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 označite Make Custom Style, polje Define in ostavite po default-u i kliknite OK. Zatim imenujte novi stil i sačuvajte ga u folderu sajta u kome bi trebalo da se nađu i slike koje kristi vaš sajt. Sad se pojavljuje prozor CSS Style definition na čijoj levoj strani možete videti 8 kategorija (slika 3.3.2). U kategoriji Type moguče je podesiti parametre vezane za font, kao što su tip, veličina, boja…fonta. U kategoriji Background izabirate boju pozadine, sliku pozadine… Razmak između reči, poravnanje teksta, uvlačenje od margina, itd. Kada ste podesili parametre shodno vašim potrebama, kliknite OK i postupak definisanja novog CSS Styla je završen. Da bi primenili stil na Web stranu treba samo da ga označite u CSS panelu i ‘taknete’ dugme Attach Style Sheet (slika 3.3.2). Ako kasnije želite da promenite određene parametre CSS stila tu je i dugme Edit Style Sheet.

- 18 -

Macromedia -

Dreamweaver MX

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 možete pristupiti direktno sa tastature. Ovi specijalni znakovi imaju specifične HTML kodove ili alternativne prečice sa tastature koje je teško zapamtiti. U Insert Panelu na kartici Charactes se nalaze najčešće korišćeni znakovi (slika 3.4.1). Da bi ubacili određeni znak označite 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 pruža 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 označena horizontalna linija, u panelu Properties (slika 3.4.3) možete odrediti koliki deo strane će odvojiti horizontalna linija, bez obzira na širinu prozora browsera (u %). Ako želite da linija ne menja širinu kada korisnik

- 19 -

Macromedia -

Dreamweaver MX

promeni veličinu 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 dinamički datum koji se menja kada korisnik pristupi strani, nego datum koji pokazuje kada ste poslednji put ažurirali sadržaj strane. Dreamweaver automtski ažurira izmene svaki put kada snjimite dokument. Datum se obično stavlja na dno strane. Pritisnite dugme Date na kartici Common u panelu Insert (Slika 3.4.2). Tada se otvara prozor Insert Date i pruža mogučnost izbora rasporeda dana, datuma i vremena.

- 20 -

Macromedia -

Dreamweaver MX

Poglavlje 4

Rad sa grafikom U ovom poglavlju naučićete: 1. Da postavite držač slike i sliku na Web stranu 2. Promenite veličinu slike i da je pozicionirate na strani 3. Date imena grafičkim elementima i pridružite 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 grafičkih elemenata (Graphic Interchange Format, GIF), i format združene grupe fotografskih strućnjaka (Joint Photographic Experts Group, JPEG). Po pravilu GIF se koristi kda slika ima velike jednobojne površine bez teksture i malo ili nimalo prelivanja boja. Gif je dobar pri radu sa tekstom, vektorskom grafikom, slikama sa ograničenim brojem boja i slikama malih dimenzija. Slike u ovom formatu se mogu snjimiti sa maksimalno 256 boja (8 bita za opis boje svake tačke). Ove slike se brže učitavaju, i podržavaju providnost i animaciju. JPEG se koristi za fotografije i druge slike s velikim opsegom boja. Odlično reprodukuje prelive boja i daje fotografije mnogo boljeg kvaliteta od onih u formatu GIF. Ovaj format opisuje svaku tačku slike s 24 bita, čuva sve njene boje. Da bi postavili sliku na stranu, pritisnite dugme Image na kartici Common Insert panela. Prikazaće se prozor Select Image Source (slika 4.1.1). Do tog prozora možete doći i biranjem opcije Image iz menija Insert. Sada je potrebno (ako to već nije slučaj) kod pitanja 'Select File Name From' označiti opciju 'File system'. Dugme Data Sources koristi se za dinamičke prezentacije u kojima se dokument izvršava na serveru aplikacije. Sada pronađite željenu sliku. Kada ste to uradili, potrebno je zadati kako će Dreamweaver referencirati grafički 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 položaja HTML dokumenta u odnosu na grafičku datoteku. Kod referenci u odnosu na korenski direktorijum sajta, putanja slike gradi se na osnovu relativnog položaja HTML dokumenta u onosu na osnovni direktorijum lokacije. Po pravilu treba koristiti referencve u odnosu na stranu. Obrnuto samo u slučaju velikog sajta ili kada nameravate da često menjate strane. Važno je napomenuti da Dreamweaver ne može da naprvi ovakve reference ako prethodno niste snimili stranu, već pravi putanje na osnovu položaja slike na hard disku,

- 21 -

Macromedia -

Dreamweaver MX

što nisu valjane hiperveze i ne rade kada se sajt postavi na Web. Takođe je obavezno snimiti sliku negde unutar osnovnog korenskog foldera. Pritisnite dugme OK i slika je na strani. Ako trenutno nemate potrebnu sliku, možete da rezervišete mesto za nju. Tako ćete otprilike moći da procenite kako će izgledati kombinacija slike, teksta, tabela i drugih elemenata strane. Pritisnite dugme Image Placeholder na kartici Common panela Insert. Otvoriće se okvir za dijalog Image Placeholder (slika 4.1.2). U polje name upišite ime slike, to je tekst koji se pojavljuje samo u Dreamweaveru. Ako browser ne može da prikaže sliku, ili je posetilac isključio mogućnost prikazivanja slika, na mestu gde treba da dođe 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. Otvoriće se prozor Select Image Source prethodno objašnjen. Izaberite sliku, kliknite OK i slika će ispuniti mesto rezervisano za nju.

- 22 -

Macromedia -

Dreamweaver MX

Slika 4.1.2 Definisanje držača slike

4.2 Menjanje veličine 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. Veličina slike bitno utiče na brzinu njenog učitavanja. U Dreamweaveru možete da promenite te dimenzije jednostavnim unosom širine i visine u panelu Properties. Kada jednom promenite veličinu slike brojevi koji označavaju njene dimenzije su podebljani. Takavim načinom promene veličine ne menjate veličinu grafičke datoteke. Još jedan način promene veličine slike je povlačenjem takozvanih ručica oko slike. Ako hoćete da odnos širine i visine ostane nepromenjen držite taster Shift dok povlačite ručice. Vraćanje slike na originalnu veličinu se vrši pritiskom na dugme Reset Size. Kvalitet slike opada kada se slika povećava. Slike se u browserima prikazuju u rezoluciji ekrana, koja uobičajeno iznosi 72. tačke po inču. Ova rezolucija nije dovoljna za lepo prikazivanje uvećanih slika. Da bi smanjili veličinu grafičkih datoteka na najmanju moguću meru obavezno ih najpre prilagodite u programima za obradu slika, kao što je na primer Adobe Photoshop. Editivanje selektovanih slika vrši se pritiskom na dugme Edit panela Properties. Određivanje editora slike moguće je u kategoriji File types, opcije Preferences iz menija Edit (ctrl + U). Kada smestite sliku neposredno u stranu, nemate mnogo mogućnosti da je premeštate. 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 načina da se to postigne jeste i dodavanje okvira oko slike. Okvir može da privuče pažnju na slike i da doprinese ujednačenosti stila cele Web prezentacije, a takođe može da posluži kao hiperveza. Debljina okvira se proizvoljno zadaje tako što u panelu Properties upišete željeni broj u polje Border ( taj broj je broj piksela). Boja okvira je jednaka podrazumevanoj boji teksta zadatoj u prozoru Page Properties. Ako slici pridružite hipervezu (naredne lekcije), boja okvira te slike postaće jednaka podrazumevanoj boji hiperveza. Uređenju rasporeda doprinosi i mogućnost omotavanja teksta oko slike. Ako unesemo sliku na levu stranu dokumenta tekst će ići desno od nje na visini donje ivice slike do desne margine, zatimse u novom redu vraća i počinje od leve. Izbor atributa Left ili Right

- 23 -

Macromedia -

Dreamweaver MX

opcije Align daje mogućnost da pored slike upišete više redova teksta, sa leve odnosno sa desne strane. Dok ostale opcije služe za smeštanje samo jednog reda teksta do slike,a to su: - Baseline, poravnava dno slike sa osnovnom linijom teksta (Default) - Top, poravnava sliku sa vrhom najvišeg objekta u redu, gde taj objekat može biti tekst ili slika, - Middle, poravnava osnovnu liniju teksta sa sredinom slike, - Bottom, isto kao i Base line, - Text Top, najčesće daje iste rezultate kao i opcija Top, ali ne i uvek, - Absolute Middle, poravnava sredinu slike sa sredinom reda teksta ili sa najvećim objektom u redu, - Absolute Bottom, poravnava dno slike sa najnižom tačkom reda teksta.

Slika 4.2.1 Panel svojstava slika Kada omotate tekst oko slike moguće je prilagoditi prostor oko nje, da bi se tekst lakše čitao i da bi strana izgledala urednija. Možete 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 možete dodati prostor samo na jednu stranu slike.

4.3 Davanje imena i HTML oznaka slikama Imena i oznake su važne iako se uglavnom ne vide na Web strani. Po pravilu je dobro pridružiti slici ime i oznaku jer time pomažete 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 veličini slike. Ime koje pridružite 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 onemogućio prikazivanje slika u svom browseru, ako njegov browser uopšte ne može da prikazuje slike ili ako učitavanje određene slike nije uspelo. Umesto slike tada se prikazuje tekst koji ste upisali u polje alt. Svim grafičkim objektima koji su neophodni za navigaciju po lokaciji morate upisati tekst u polje alt.

- 24 -

Macromedia -

Dreamweaver MX

4.4 Panel Assets i Flash dugme Da ne bi pamtili svojstva svih slika, naročito na velikim sajtovima pomaže vam panel Assets (slika 4.4.1). On se nalazi u grupi panela Files pored Site panela. Na ovom panelu možete raditi na dva načina, 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 neće odmah pojaviti na panelu Assets, zato je potrebno pritisnuti dugme Refresh Site List u donjem desnom uglu panela. Da bi ubacili sliku na označeno mesto u dokumentu, jednostavno je izaberite sa panela Assets i kliknite insert. Preporučljivo je slikama odmah zadati imena i oznake da bi uštedeli vreme i olakšali kasniji rad. Još jedan način za uštedu vremena je smeštanje onih slika sa kojima često radite u spisak Favorites. U ovaj spisak možete smestiti bilo koju sliku sadržanu unutar osnovnog direktorijuma sajta, tako što ćete je označiti u opciji Site i kliknuti dugme Add to Favorites u donjem desnom uglu. Kada izaberete grafički objekat u spisku Favorites dugme Add to Favorites se pretvara u dugme Remove from Favorites, pa tako možete i ukloniti željenu sliku iz ovog spiska. Za organizaciju slika panela Favorites koristi mogućnost dodavanja foldera u spisak Favorites (dugme New favorites Folder).

Slika 4.4.1 Panel Assets Dodavanjem Flash objekata možete da postignete specijalne efekte. Flash dugmad ima nekoliko stanja u zavisnosti od položaja pointera miša. Prvo stanje je izgled dugmeta kada pointer nije na njemu. Drugo stanje je kada pokazivač jeste na dugmetu ali taster miša nije pritisnut. Treće 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). Otvoriće se prozor Insert Flash Button (slika 4.4.3).

Slika 4.4.2 Kartica Media i Flash dugme

- 25 -

Macromedia -

Dreamweaver MX

Slika 4.4.3 Izbor Flash dugmeta U spisku Style izaberite stil dugmeta, u listi Font font a u polju Size odgovarajuću veličinu. Naravno sve ove parametre i kasnije možete promeniti. Ovde možete 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 'ponaša' baš onako kao u browseru. Za prekid probe tu je dugme Stop.

- 26 -

Macromedia -

Dreamweaver MX

Poglavlje 5

Dizajniranje Web strana

U ovom poglavlju ćete naučiti: 1. Da kreirate tabele u Layout i Standard prikazu 2. Menjate svojstva i elemente tabele 3. Pravite okvire za tabele i ugnježdene tabele

5.1 Kreiranje tabela u Layout i Standard prikazu Jednostavne Web strane se brzo prave smeštanjem teksta i slika neposredno na stranu. Međutim, tabele pružaju više mogućnosti za razmeštanje elemenata na strani. One omogućavaju predstavljanje informacija na organizovan način, jer sadrže redove i kolone ćelija u koje se smešta sadržaj. Više ćelija se može objediniti u velike ćelije. Prikaz Layout je sličan programu za pravljenje rasporeda elemenata na strani, gde se crtaju pravougaonici u koje zatim ubacujete tekst i slike. Veličinu i raspored tih pravougaonika moguće je proizvoljno menjati. Da bi došli u prikaz Layout na panelu Insert izaberite karticu Layout i pritisnite opciju Layout View (Slika 5.1.1). Prikazaće vam se obaveštenje pod naslovom 'Getting Started in Layout View', koje ukratko opisuje osnovne alatle ovog prikaza.

Slika 5.1.1 Layout View Alatka Draw Layout Cell služi za crtanje ćelija tj. Pravougaonika bilo gde na strani. Sadržaj tabele je podeljen na njene ćelije, jer sve tabele imaju jednu ili više ćelija u preseku kolona i redova. Kada označite ovu altku pokazivač se dovođenjem u prozor dokumenta menja u znak plus (+). Crtanje ćelije je jednostavno: dovedete pokazivač do željenog mesta, zatim pritisnete miša i vučete ga dok kontura ćelije ne bude odgovarajuće veličine. Automatski se iscrtava tabela širine prozora dokumenta (njenu veličinu je moguće menjati), i u njoj ćelija koju ste sami nacrtali (slika 5.1.2). Tabela je označena zelenom bojom, ćelija plavom, a svi ostali delovi tabele (osim ćelije) sivom bojom. Tanke bele linije naznačavaju redove i kolone koje je Dreamweaver nacrtao oko ćelije. Na vrhu tabele prikazuje se traka koja olakšava prepoznavanje tabele i ona sadrži meru širine kolona tabele i njihove podmenije.

- 27 -

Macromedia -

Dreamweaver MX

Podmeni dobijate pritiskom na strelicu – nadole, desno od broja koji prikazuje širinu kolone. Ćelija se bira pritiskanjem njene ivice (tako da se vide njene ručice), ane postavljanjem tastera u nju. Tasteri sa strelicama pomeraju ćeliju za po jedan piksel. Ako pri tom držite taster Shift, pomeraće se po 10 piksela. Prilikom crtanja ćelija pojavljuju se bele vođice koje olakšavaju crtanje drugih ćelija. Ako hoćete da nacrtate više ćelija bez stalnog pritiskanja dugmeta Draw Layout Cell, držite taster Ctrl. Unosom nekog objekta, npr. slike u ćeliju ona će se (ako je manja) automatski prilagoditi veličini slike. Ako je slika manja trebalo bi da sami promenite veličinu ćelije korišćenjem ručica. Postoji nekoliko karakteristika ćelija koje možete menjati. Možete da obojite pozadinu svake ćelije zasebno ili cele tabele. Takođe možete da kontrolišete horizontalno i vertikalno poravnanje objekata unutar svake ćelije. Sadržaj ć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 možete da kontrolišete širinu tabele na dva načina, korišćenjem podrazumevane širine (Fixed) ili opcije Autostrech koja prouzrokuje da ćelije automatski menjaju širinu u zavisnosti od širine prozora browsera. Izbor ovih opcija se vrši u panelu Properties. Uključivanje automatskog održavanja širine kolone moguće je i u podmeniju u zaglavlju kolone izborom opcije Make Column Autostrech. Ukoliko slika za održavanje razmaka nije pridružena sajtu pojaviće se prozor Choose Spacer Image, gde možete izabrati već postojeću sliku za razmak ili kreirati novu. Ako odlučite da ne koristite slike za održavanje razmaka, kolone menjaju veličinu, pa čak i nestaju, ukoliko nemaju sadržaj. Koristeći standardni prikaz prilikom izrade tabela moraćete sami sve da uradite, ali ovom prikazu ne nedostaju prednosti. Naime, ovde su preciznost i kontrola izrade tabele dosta povećani. Standardni prikaz izabirate na kartici Layout panela Insert (slika 5.1.1). Prva

- 28 -

Macromedia -

Dreamweaver MX

ikonica sa leve strane služi za unos tabele (Insert Table). Za unos tabele može poslužiti i dugme Table na kartici Tables panela Insert. Otvoriće se prozor Insert Table (slika 5.1.3).

Slika 5.1.3 Unos tabele Prozor za unos tabele sadrži sledeće 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 određivanje rasporeda objekata bolje je koristiti dimenzije u pikselima. - Border, debljina ivice tabele. Podrazumevana dabljina je 1 piksel. - Cell Padding, razmak između sadržaja ćelija tabele i njenih ivica. Ako nećete razmak upišite nulu, a ako ostavite prazno polje biće izabrana podrazumevana vrednost od jednog piksela. - Cell Spacing, razmak između ćelija tabele, ne računajući ivice. Prazno polje znači da je izabrana podrazumevana vrednost a to je 1 piksel. Takođe možete upisati nulu ako nećete razmak. Kada ste napravili tabelu potrebno ju je popuniti. Za kretanje između ćelija možete koristiti tastere sa strelicama ili taster Tab. Ako pređete u ćeliju koja već ima sadržaj, on će biti izabran kada koristite Tab. Ako imate tekst utabeli unutar nekog drugog dokumenta npr. Microsoftovog Worda, možete 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 moći da je pročita. Ovaj format možete 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. Dobićete tabelu prema vrednostima parametara koje ste izabrali, u koju su uvezeni podaci iz izabrane tekstualne datoteke. Možete istovremeno da kopirate i prenesete više ćelija, ne gubeći njihovo formatiranje, a možete i da kopirate i prenosite samo sadržaj ćelija. Možete kopirati i preneti jednu ćeliju na mestu izabrane ćelije, ali ne možete 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 više ćelija odjednom je moguće jedino ako one čine pravougaonik. Da bi izabrali sve ćelije tabele pritisnite ćeliju u gornjem levom uglu i prevucite mišem do ćelije u donjem desnom uglu. Izabrane ćelije imaju crne ivice. Ovim načinom izabrali ste sve ćelije tabele, ali ne i samu tabelu. Izbor tabele se vrši na sledeći način: označite bilo koju ćeliju tabele i izaberite HTML oznaku

. Oznaka

podatke (ćeliju tabele). Izabrane ćelije ili celu tabelu možete obrisati tasterom Backspace. 5.2 Promena svojstava i elemenata tabele Veličinu tabele je lako promeniti i lako joj je dodati nekoliko kolona ili redova. Da biste proširili tabelu dovedite pokazivač miša 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 označite dve ili više susednih ćelija istog reda ili kolone možete da ih pretvorite u jednu ćeliju pritiskom na dugme Merge cells (slika 5.2.1). Na isti način možete da podelite ćeliju na više manjih, pomoću dugmeta Split cell. Ne možete objedinjavati ćelije u obliku slova 'L'. Izborom opcije menija Modify > Table > Insert Rows or Columns moguće je uneti proizvoljan broj redova ili kolona u tabelu. Mogu se izabrati i nesusedne ćelije, držanjem tastera Ctrl. Samo kopiranje i prenošenje nesusednih ćelija nije moguće. Promena boje pozadine pojedinih ćelija , više ć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 sadržaja ćelije) a podrazumevano vertikalno pravnanje je Middle (sadržaj ćelije poravnava se po visini sa sredinom svake ćelije). Poravnanje po horizontali Merge (objedinjavanj e ćelija) Poravnanje po vertikali Split (delenje) Širina i visina Bez prelamanja teksta Zaglavlje Pozadinska slika Boja pozadine Boja ivice ćelije Slika 5.2.1. Karakteristike ćelije tabele Inače u donjoj polovini panoa Properties nalaze se polja za zadavanje sledećih karakteristika ćelije: - Merge, objedinjuje dve ili više ćelija u jednu, - Split, deli ćeliju na više ćelija - 30 - Macromedia - - Dreamweaver MX Horz, sadržaj ćelije poravnava po horizontali (opcija default – za obične ćelije poravnanje u levo, a za ćelije prvog reda centriranje) Vert, sadržaj ćelije poravnava po vertikali (default – poravnanje po sredini) W i H, zadaje visinu i širinu izabranih ćelija u pikselima. Ako hoćete da zadate dimenzije u procentima upišite znak procenta posle numeričke vrednosti. No Wrap, sprečava prelamanje teksta ćelije; širina ćelije se prilagođava količini teksta koji u nju upišete. Obočno se ćelije proširuju horizontalno, tako da stane najduža 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 postiže sortiranjem sadržaje njenih kolona. Ne mogu se sortirati tabele koje nemaju jednak broj ćelija u svakoj koloni. Označite tabelu koju želite da sortirate. Iz menija Commands izaberite Sort Table. Da bi sortirali tabelu morate da zadate sledeće parametre: - Sort By, izaberite kolone koje treba sortirati, - Order, zadajte abecedno ili numeričko sortiranje i izaberite rastući (Ascending) ili opadajući (Descending). - Then By, ovo polje služi za zadavanje sekundarnog sortiranja po nekoj drugoj koloni, - Sort Includes First Row, daje mogućnost sortiranja i prvog reda (ako nije zaglavlje), - Keep TR attributes with sorted Row, ova opcija omogućava zadržavanje odgovarajućih atributa (boja, pozadinska slika...) određenog reda tabele i na svom novom mestu u tabeli. U prikazu standard možete da pravite i tabele sa slikama. Tabele se često koriste za raspoređivanje više slika na strani ili za sklapanje slike koja je bila isečena na delove. Slika se deli na više manjih delova da bi se optimizovale za Web (smanjuje se veličina datoteke uz zadržavanje najvećeg mogućeg kvaliteta slike). Kada u Dreamweaveru umetnete slike u ćelije tabele, prazne ćelije se toliko smanje da izgleda kao da ih nema. U tom slučaju koristite tastere sa strelicama za dolazak do tih ćelija. Kada dovedete pokazivač u skupljenu ćeliju ona će početi da se širi čim upišete malo teksta u nju. Važno je da uklonite suvišne znakove i tekst iz tabela u koje ubacujete sliku, jer oni mogu uzrokovati razne probleme naročito ako je veličina tabele proračunata tačno za određene slike. 5.3. Ugnježdavanje tabela i pravljenje okvira Ugnježdena tabela je smeštena u ćeliju druge tabele. Ugnjrždavanje tabela omogućava izradu složenijih strana, iako je svaka od tih tabela pojedinačno veoma jednostavna. Preporučljivo je praviti tabelu koju treba da ugnjezdite izvan tabele u koju je ugnježdavate, jer joj se tako jasno vide ivice dok umećete potrebne slike i ostalu sadržinu. Takođe treba voditi računa o tome da isprekidane linije u Dreamweaveru zauzimaju po jedan piksel širine i da samim tim tabela izgleda veće nego što jeste, jer se ti dodatni pikseli ne vide u - 31 - Macromedia - Dreamweaver MX browserima. Sam postupak ugnježdavanja se obavlja funkcijama Copy i Paste, menija Edit (možete koristiti i Cut ako želite da istovremeno kopirate i uklonite malu tabelu). Nemojte koristiti ugnježdavanje tabela dublje od četri-pet nivoa, jer jednostavniji raspored strane znači i da će HTML kod biti jednostavniji, pa će se strana brže učitavati i lakše ćete otkriti i otkloniti greške u kodu. Tabelu možete uokviriti zadavanjem debljine okvira (ivice) u polju Border na panelu Properties. Međutim, tako dobijeni okviri se nejednako prikazuju u različitim browserima, stoga je preporučljivo koristiti ugnježdene tabele za pravljenje okvira. Dakle, treba napraviti tabelu (recimo sa jednim redom i jednom kolonom) kod koje će udaljenost sadržaja od ivica ćelija biti minimum jedan i u nju uneti novu tabelu širine 100% (tako se i upiše). Ova tehnika omogućava bolju kontrolu izgleda okvira tabele. Ako zadate veću udaljenost sadržaja ćelija od njihovih ivica (Cell Padding) kod spoljne tabele, dobićete deblji okvir tabele. - 32 - Macromedia - Dreamweaver MX Poglavlje 6 Hiperveze (linkovi) U ovom poglavlju naučićete: 1. Da napravite tekstualne i grafičke hiperveze i hiperveze za slanje elektronske pošte 2. Upotrebite sidra za prelaženje na različite delove strane 3. Napravite mapirane slike koje imaju po nekoliko hiperveza 6.1 Pravljenje tekstualnih i grafičkih hiperveza Moć HTML-a potiče od njegove ugrađene mogućnosti da poveže tekstualna i grafička područja sa drugim dokumentima. Browser obično ističe ta područja (bojom ili podvlačenjem) 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 služi kao područje koje se može kliknuti i naziva se aktivno područje (hotspot) na strani. Kada posetilac klikne na aktivno područje, 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), početna boja koju korisnik vidi pre nego što pritisne hipervezu. Podrazumevana boja u browserima je plava. - Posećene hiperveze (visited links), boja u koju hiperveza pređe kada je korisnik pritisne. Standardna u browseru je ljubičasta, - Aktivne hiperveze (active links), boja u koju hiperveza pređe kada je korisnik pritisne i zadrži taster miša pritisnut. Podrazumevana boja je crvena. Pritisnite OK kada ste odredili boje hiperveza i sačuvajte stranu. Slika 6.1.1 Definisanje boja hiperveza Kako je već rečeno, hiperveze vode posetioca do drugih dokumenata unutar tekuće Web strane ili do strana na drugim lokacijama. Postoje dva opšta pristupa kreiranja hiperveza (linkova): napraviti set praznih strana, zatim ih povezati, i na kraju stavljti sadržaj u njih; ili kreirati link na stranu koja još ne postoji, pa je tek kasnije formirati i dati joj ime koje ste već - 33 - Macromedia - Dreamweaver MX naveli pri kreiranju linka. Napraviti hipertekstualnu vezu je veoma jednostavno (slika 6.1.2). Treba označiti određen deo teksta (1), na panou Properties pritisnuti drugu ikonicu desno od polja link (2). Otvoriće se prozor Select File u kome treba izabrati stranu sa kojom želimo da napravimo vezu (3). Pritisnite OK (4) i ime te strane pojaviće se u polju Link, a tekst koji ste izabrali biće označen kao hiperveza (5) i imaće boju koju ste mu odredili u Page Properties-u. Slika 6.1.2 Pravljenje hipertekstualne veze Postoji još jedan, jednostavniji, način za kreiranje linka (slika 6.1.3). Kao i pre označite željeni tekst (1), a zatim na panelu Properties pritisnite prvu ikonicu (2) do polja Link (Point to File), zadržati taster miša pritisnut i prevući pokazivač do Site Panela (3). Pustite taster tačno iznad strane sa kojom želite da napravite link (4). I link je napravljen (5). Slika 6.1.3 Drugi način kreiranja linka - 34 - Macromedia - Dreamweaver MX Ako znate imena strana sa kojima se povezujete, možete ih upisati neposredno u polje link. Ukoliko iste hiperveze koristite više puta, uštedećete vreme ako u padajućoj listi desno od polja linka (pano Properties) izaberete neku od nedavno korišćenih hiperveza. Kada ste napravili hipervezu(e) obavezno je proverite (da li vodi do željene strane) u vašem 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 većini sajtova. Relativna putanja izostavlja deo apsolutne URL adrese koji je isti za tekuću 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, možete da upotrebite i slike. Postupak kreiranja grafičke hiperveze je isti kao i postupak kreiranja tekstualne veze. Jedina razlika je u tome što sada biramo određenu sliku a ne tekst. Da bi napravili link koji će biti apsolutna putanja (koji će sadržati 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 pokazivačem pređete 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 pomoću linka ode na određenu Web stranu, ona obično zameni tekuću stranu njegovog browsera. Međutim, ponekad je pogodnije da se nova strana prikaže u drugom prozoru, jer ako ste, npr. link usmerili prema dokumentu van vaše lokacije, posetioca ćete izvesti van vaših strana. Pa ukoliko on nije zapamtio URL adresu vašeg sajta, možda neće 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 vrši 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, učitava povezanu stranu u nov prozor, - _parent, učitava povezanu stranu u roditeljski skup okvira, ili prozor onog okvira koji sadrži hipervezu, - _self, učitava povezanu stranu u isti okvir ili prozor koji sadrži hipervezu (ovo je podrazumevani cilj), - _top, učitava povezanu stranu i njime ispunjava prozor browsera, čime uklanja sve okvire sa ekrana. Pravljenje hiperveza za slanje elektronske pošte je veoma značajno, jer na taj način olakšavate posetiocima da se povežu sa vama. Označite 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). Pojaviće 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. - 35 - Macromedia - Dreamweaver MX Slika 6.1.4 Prozor za formiranje Email linka U polje Link na panou Properties upišite mailto: i zatim bez razmaka Email adresu (slika 6.1.5). Tako ste 'ručno' napravil vezu sa slanje Email pošte. Slika 6.1.5 Unos linka za Email 6.2 Umetanje sidara i povezivanje sa njima Kada je dokument dugačak ili ima mnogo odeljaka, obično se pravi niz hiperveza koje odvode posetioca na određeno mesto u dokumentu. Sidro (named anchor) označava mesto na strani na koje dovodi hiperveza. Na slici 6.2.1 je ukratko prikazan način kreiranja sidra i veze sa njim. Postavite kursor na neki deo strane (gde želite da umetnete sidro, obično 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 sadrži razmake, znakove interpunkcije i specijalne znake. Svako sidro na strani mora imati jedinstveno ime, inače browser neće znati na koje od istoimenih sidara da ode. Na strani, sidro je predstavljeno žutom ikonicom (3) koja se inače ne vidi u browseru. Još jedan način za unos sidra je opcija Insert > Named Anchor. Sada na strani (obično na vrhu) izaberite tekst (4) koji će odvesti posetioca na odgovarajući odeljak strane (do odgovarajućeg sidra). Da bi pretvorili taj tekst u hipervezu koja referencira sidro u panelu Properties, u polje Link upišite #imesidra (7) i kliknite Enter. Znak # govori browseru da je ovaj link unutrašnji, tj. da se zadržava na originalnoj strani. Ime koje ste upisali posle znaka # mora biti identično imenu sidra. Ako sidro umetnete na pogrešno mesto, možete ga premestiti prevlačenjem. Drugi način za izradu linka sa sidrom je da označite željeni tekst (4), kliknete ikonicu Point to File (5) (prva ikonica do polja Link u panelu Properties) i prevučete ikonicu (6) do sidra koje ste prethodno napravili (1,2,3) (pustite taster miša tačno iznad sidra). Ovaj način je sigurniji jer korišćenje ikonice Point to File smanjuje verovatnoću da ćete pogrešno otkucati ime sidra. - 36 - Macromedia - Dreamweaver MX Slika 6.2.1 Kreiranje sidra i veze sa njim Na dugačkim stranama uobičajeno je da se na kraj svakog odeljka stavi link do sidra na vrhu strane ili do navigacionog sadržaja. Ovo sidro obično se zove #top. U ovom slučaju korisnici ne moraju da premotavaju stranu do vrha kako bi došli do linkova za prelazak na druge odeljke. Broj linkova na jednoj strani koji referenciraju isto sidro je neograničen. 6.3 Mapirane slike U ovoj lekciji nastavljamo da radimo sa sidrima. Kroz izradu mapiranih slika videćete kako se pravi link sa određenim odeljkom drugog dokumenta. Sliku na strani možete da podelite na nekoliko hiperveza pomoću mapirane slike (image map), što je naziv za sliku sa više aktivnih područja. Ta aktivna područja mogu imati razne oblike (pavougaona, kružna, oblik poligona). Izaberite sliku na strani na kojoj želite da napravite aktivna područja. U polje Map na panelu Properties upišite željeno ime ove slike (sada mape). Ono ne sme da sadrži razmake i specijalne znake. Svaka mapirana slika na strani mora imati drukčije 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 područja (Slika 6.3.1). Oko određenog dela slike (dela koji želite da postane aktivno područje) nacrtajte aktivno područje (providno plavozeleno) držeći pokazivač miša (slika 6.3.2). Pomoću alatke za pokazivačka aktivna područja (Pointer Hotspot) možete koristeći ručice tog područja fino da ga podesite oko nekog dela slike, ili da ga pomerate (držeći taster iznad tog područja). Ako hoćete da uklonite aktivno područje, izaberite ga i pritisnite Backspace. - 37 - Macromedia - Dreamweaver MX Slika 6.3.1 Alatke za mapirane slike Slika 6.3.2 Mapirana slika Da bi napravili link za aktivno područje, treba ga označiti 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 područjem (prethodno treba obrisati znak # koga Dreamweaver automatski upisuje u polje link kada napravite aktivno područje). Da bi, npr. napravili link do sidra na drugoj strani našeg 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 omogućavaju povezivanje sa različitim delovima drugih strana, povećavaju funkcionalnost sajta, odmah usmeravaju posetioce na ono što traže i skraćuju vreme potrebno za premotavanje velikih strana. Ako mapiranu sliku kopirate na drugu stranu , Dreamweaver će u kopiji zadržati sve linkove i aktivna područja. - 38 - Macromedia - Dreamweaver MX Poglavlje 7 Izrada interaktivnih strana U ovom poglavlju ćete naučiti: 1. Da napravite sliku s prelazom (Rollover Image) 2. Da otvorite nov prozor browsera 3. Napravite iskačući meni 7.1 Rollover Image U ovoj lekciji upotrebićete posebne skriptove, koji se u Dreamweaveru zovu 'ponašanja', (behaviors), za pravljenje slika sa prelazima, novih prozora browsera i iskačućih menija. Skript kombinuje određeni događaj koji je izazvao korisnik (npr. dovođenje pokazivača miša iznad nekog dugmeta u čitaču) sa jednom ili više akcija koje su posledica tog događaja. U pozadini 'ponašanja' leži gotov JavaScript kod. JavaScript se na Web stranama često koristi za pravljenje slika sa prelazom –slika koje se menjaju kada posetilac dovede pokazivač miša iznad njih. U Dreamweaveru možete 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. Otvoriće se prozor Insert Rollover Image (slika 7.1.1). Slika 7.1.1 Prozor za formiranje slike sa prelazom - 39 - Macromedia - Dreamweaver MX Poželjno 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č miša iznad nje (dugme Browse do polja Original Image). Zatim treba da unesete sliku koja će se pojaviti kada posetilac pređe pokazivačem preko originalne slike (dugme Browse do polja Rollover Image). Slika sa prelazom koja se pojavljuje na početku i ona koja je zamenjuje treba da imaju iste dimenzije, inče će druga slika biti smanjena ili uvećana u skladu s dimenzijama prve slike i zato izobličena. Takođe odmah možete napraviti grafičku hipervezu unoseći u polje 'When Click, Go To URL' URL adresu ili putanju do povezane strane. Ako ne upišete ništa u ovo polje, Dreamweaver upisati znak #, u polje link na panelu Properties. Taj znak saopštava browseru da pokazivač miša pretvori u šaku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani kada klikne na nju. Ovdje možete 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 izvršava prelaz sa jedne slike na drugu. Ova metoda je dobra ako prethodno niste uneli sliku, jer omogućava da istovremeno unesete sliku i da je definišete kao sliku s prelazom. Naravno moguće je i slici koja je već na strani dodati prelaze i to pomoću panela Behaviors iz grupe panela Design. Sliku kojoj zelite dodati prelaz označite, na panou Behaviors pritisnite dugme sa znakom (+) i izaberite opciju Swap Image (engl. swap – zamena). Slika 7.1.2 Formiranje prelaza za postojeću sliku Pojaviće 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 važno slikama dati odgovarajuća imena (kako ćete između bezimenih slika izabrati onu koja vam treba?). Sada pritiskom na dugme Browse do polja Set Source to: izaberite sliku koja će zameniti originalnu. Uobičajeno je (radi lakšeg snalaženja) imenu početne (originalne slike) dodati sufiks _off, a imenu slike koja zamenjuje originalnu sufiks - 40 - Macromedia - Dreamweaver MX _on. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj je pridružen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload Image i Restore Image onMouseOut obavezno potvrdite. Opcijom Preload Image izbegavate kašnjenje koje bi uzrokovalo učitavanje zamenske slike tek kada posetilac pređe preko početne slike, a opcijom Restore Image onMouseOut obezbeđujete da se zamenska slika zameni početnom kada kada posetilac pomeri pokazivač miša izvan nje. Pritisnite ok i formirali ste prelaz za postojeću sliku, što se vidi i u panelu Behaviors kada označite sliku (vidite spisak akcija - Actions koje izvršava Dreamweaver, u zavisnosti od određenog događaja – Events u browseru posetioca). Možete da zamenite više slika istovremeno kao posledicu istog događaja. Npr. kada posetilac dovede pokazivač miša iznad jedne slike, dve slike mogu da budu zamenjene, odnosno da pređu iz svojih početnih 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. Otvoriće 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 pređete pokazivačem miša preko prve slike, i ona, i druga slika se menjaju svojim zamenskim slikama koje ste zadali. Imajte u vidu da mnogo ovakvih efekata prelaza može prilično da uspori rad korisnikovog browsera. Ponekad je potrebno da se prelazak odigra samo kada postilac klikne na određeni deo slike. To bi to napravili prvo mapirajte sliku (napravite na njoj jedno ili više aktivnih prostora), označite aktivni prostor koji treba da izazove zamenu mapirane slike (dakle, samo klikom na taj deo slike vrši se njena zamena), pritisnite dugme (+) na panelu Behaviors i u podmeniju izaberite akciju Swap Image....(dalji postupak je identičan izradi obične Rollover slike). Akcije i događeaje možete da menjate na nekoliko načina. Možete da promenite događaj na akciji koja odgovara, da pridružite više akcija istom događaju i da menjate redosled izvršavanja tih akcija. Na primer, Swap Image je akcija, a onMouseOver događaj koji odgovaraju skriptu za sliku sa prelazom. Da bi dodali akciju poruke koja iskače izaberite sliku na strani pritisnite (+) na panelu Behaviors i u padajućem meniju akcija izaberite akciju Popup Message. Otvoriće se prozor u koji treba da upišete poruku. Pritisnite OK i na panelu Behaviors ćete videti da je akcija (skript) Popup Message pridružena odgovarajućem događaju. Da bi promenili taj događaj označite ga i pritisnite strelicu nadole desno od njega. Pojavljuje se lista mogućih događaja (slika 7.1.3). Na dnu ove liste nalazi se opcija Show Events For u kome birate tip čitača za prikazivanje događaja. U zavisnosti od akcije i čitača koje ste izabrali menjaju se i događaji u meniju. U zagradama se prikazuju događaji za koje je potrebno sidro smešteno 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 izvršava akcije po njihovom redosledu u spisku. Taj redosled možete promeniti pomoću strelica gore-dole u gornjem desnom uglu panela Behaviors. Nemojte dodavati previše poruka ni slika koje iskaču, jer one brzo dosade posetiocu. Da bi željenu akciju-događaj izbrisli, označite ih i pritisnite znak (-) koji se nalazi odmah do znaka (+). - 41 - Macromedia - Dreamweaver MX Slika 7.1.3 Izbor događaja . 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 sadržine na koju vodi hiperveza (pomaže 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 možete izabrati događaj koji će pokrenuti tu akciju (ispis poruke na statusnoj traci). Obično je to (onMouseOver). 7.2 Otvaranje novog prozora browsera Ova lekcija pokazuje kako se otvara nov prozor browsera kada se strana učita, što se koristi za reklame i mnoštvo drugih informacija. Ranije je rečeno da nov prozor otvara i standardna hiperveza kojoj zadate cilj _blank, ali tako ne možete da kontrolišete atribute tog prozora. Nasuprot toj opciji skript Open Browser Window omogućava kontrolisanje veličine i mnogih drugih atributa novog prozora, kao što su trake za pomeranje i trake s menijima. Označite 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 omogućava da mu dodelite skript Open Browser Window. Pritisnite znak (+) na panelu Behaviors i izaberite akciju Open Browser Window. Otvoriće se istoimeni prozor (slika 7.2.1). Pritiskom na dugme izabirate stranu koja će se učitati 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 veličinu novog prozora prema širini i visini reklamne slike. Sledeći atributi koje možete zadati su: - 42 - Macromedia - - Dreamweaver MX Navigation Toolbar, red dugmadi za navigaciju, među kojima su Back, Forward, Home i Reload, Slika 7.2.1 Definisanje novog prozora browsera - - Location Toolbar, red opcija među kojima je i polje za adresu, Status Bar, područje na dnu prozora browsera u kome se prikazuju poruke (URL adresa, preostalo vreme za učitavanje,...), Menu Bar, područje 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 moći da ga minimiziraju ili zatvore, Scrollbars as Needed, prikazuje trake za pomeranje ako je sadržina strane veća od vidljive površine novog prozora. Ako je isključena i sledeća opcija, Resize Handles (prikazivanje ručica za promenu veličine prozora), posetioci uopšte neće moći da vide ostatak sadržine koji nije stao u prvobitnu veličinu novig prozora. U tom slučaju zadajte veličinu novog prozora tako da odgovara celokupnoj sadržini strane. Resize Handles, daje mogućnost posetiocu da promeni veličinu prozora, bilo povlačenjem ručica, bilo pritiskom na dugme Maximize, Window Name, ime novog prozora, ako hoćete da usmeravate linkove na ovaj prozor ili da ga kontrolišete JavaScript kodom. 7.3 Iskačući (Pop-Up) meni Skriptove za iskačuće menije možete da uključite među ostale elemente za kretanje po prezentaciji, kako biste posetiocima pružili spisak mogućnosti iz kog će birati. Iskačući meni možemo pridružiti slikama ili aktivnim područjima mapiranih slika. Recimo da želimo da ga pridružimo određenom aktivnom području mapirane slike. Za to je potrebno da označite taj aktivni deo, pritisnete znak (+) na panelu Behaviors i u meniju akcija izaberite skript Show Pop-Up Menu. Pokazaće se istimeni prozor sa aktivnom karticom Contents (slika 7.3.1). Tu zadajete opcije koje će sadržati vaš meni, tako što u polju Text upisujete ime opcije (podrazumevani tekst New Item brišete), a u polju Link, hipervezu za tu opciju. Pritiskom na dugme (+) u polju Menu iznad polja Text, dodajete nove opcije - 43 - Macromedia - Dreamweaver MX vašem meniju (naravno, ponovo im morate dati ime i link). Za promenu redosleda opcija označite opciju i pritiskajte dugmad gore-dole. Slika 7.3.1 Prikaz Pop-Up menija Ako hoćete da uklonite opciju iz menija izaberite je i pritisnite dugme (-). Možete da pravite i podmenije, izborom opcije koja treba da postane podmeni prethodne opcije u meniju i pritiskom na dugme sa sličicom smaknutog srednjeg pravougaonika. Ako hoćete da premestite opciju u podmeni višeg nivoa, pritisnite dugme sa sličicom poravnatih pravougaonika. Na kartici Appearance (slika 7.3.2) izabirate orijentaciju menija horizontalno-vertikalno, font, veličinu slova, poravnanje teksta. Takođe možete odrediti boju ćelije i teksta kada pokazivač miša nije na njoj i obrnuto. Slika 7.3.2 Definisanje izgleda Pop-up menija Na kartici Advanced, birate širinu i visinu ćelije (najčešća opcija je Automatic), udaljenost sadržaja ćelije od ivica menija (Cell Padding), razmak ćelija (Cell Spacing), uvlačenje - 44 - Macromedia - Dreamweaver MX 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. Moguće varijante su prikazane na slici 7.3.2. Obavezno označite opciju Hide Menu on onMouseOut (da bi meni nestao kada pomerite pokazivač miša sa njega). U poljima X i Y se nalaze udaljenosti menija od objekta koje su unapred date u zavisnosti od izabrane pozicije, a možete ih i promeniti. Slika 7.3.2 Mogući položaj menija - 45 - Macromedia - Dreamweaver MX Poglavlje 8 Rad sa bibliotekom U ovom poglavlju ćete naučiti: 1. Da napravite elemente biblioteke i da ih postavite na stranu 2. Promenite elemente biblioteke 3. Napravite i promenite elemente biblioteke koji sadrže skriptove 8.1 Pravljenje i postavljanje elemenata biblioteke Ima mnogo elemenata i grupa elemenata koji se ponavljaju na više strana sajta (elementi za kretanje po sajtu, informacije o autorskim pravima, zaglavlja, podnožja...). Dreamweaver omogućava da se ovi, često korišćeni elementi snime u biblioteku elemenata. Biblioteka elemenata omogućava da izmenite pojedine elemente i da potom jednom naredbom ažurirate sve strane koje sadrže taj element. Da ne postoje biblioteke elemenata morali biste ručno da menjate elemente i njihove parametre na svim stranama pojedinačno. Element biblioteke pravite tako što izaberete jedan ili više elemenata strane (sve ono što se nalazi između oznaka i ) i uključite ga u biblioteku. Takav element, dakle, postaje sadržina biblioteke i sada ga ne možete menjati na strani. Element koji je sadržan u CSS stilu zadržava 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 napravili element biblioteke od više elemenata strane, ono moraju da čine kontinualno područje strane. Nesusedne elemente strane morate da pretvorite u više elemenata biblioteke. Element biblioteke koji sadrži relativne putanje (kao što su linkovi ka drugim stranama ili slikama) može biti unet na bilo koji nivo u strukturi direktorijuma sajta (ako je element unet u stranu direktorijuma u kome nije strana sa koje je formiran ovaj element, Dreamweaver automatski utvrđuje ispravnu putanju). Da bi došli do biblioteke na panelu Assets grupe panela Files pritisnite ikonicu Library (slika 8.1.1). Da bi dodali izabrane objekte sa strane u biblioteku (napravili od njih elemenat biblioteke) jednostavno ih prevucite u donju polovinu panela Library. Još dva načina za pravljenje novog elementa biblioteke su dugme New Library Item na dnu panela Assets i izbor opcije menija Modify > Library > Add Object to Library. Pojaviće se nova ikonica Untitled u donjem delu panelu Library, a u gornjem novi element biblioteke - 46 - Macromedia - Dreamweaver MX napravljen od elemenata koje ste izabrali na strani. Sada imenujte taj novi element, promenom imena Untitled i pritiskom na Enter. Ova imena služe samo vama i ne vide se u prozoru browsera. Kada od nekog objekta napravite element biblioteke on dobija bledožutu pozadinu, što označava i da se ne može 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 najvišem nivou lokalnog korenskog direktorijuma i u njega smešta sve elemente biblioteke sa nastavkom .lbi.Taj direktorijum sa elementima biblioteke ne treba slati na server, on nam služi samo lokalno, za lakši razvoj i održavanje sajta. Osvežavanje sajta Ikonica biblioteke (Library) Pravljenje novog elementa Promena elementa biblioteke Unos elemenata biblioteke Brisanje elementa Slika 8.1.1 Panel Library Za unos elementa biblioteke na stranu potrebno je označiti željeno mesto unosa i iz panela Library prevući željeni element na to mesto, ili pritisnuti dugme Insert u donjem levom uglu panela. Unosom elementa biblioteke na stranu, unosite sadržinu njegove datoteke i njegovu referencu. Za održavanje 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, služi za otvaranje datoteku elementa biblioteke radi izmena, da biste sačuvali izmene snimite datoteku, - 47 - Macromedia - - Dreamweaver MX Detach from Original, raskida vezu između izabranog elementa i njegove izvorne datoteke. Sadržina elementa može se , nakon raskida veze, menjati neposredno na strani, ali se ne može ažurirati funkcijama biblioteke, Recreate, služi 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, držite taster Ctrl dok prevlačite element biblioteke iz panela library na stranu. Ako element biblioteke slučajno obrišete u panely Library, a još imate stranu s tim elementom, možete 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, otvoriće se kontekstni meni koji sadrži 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 hoćete da menjate element biblioteke neposredno na strani morate raskinuti njegovu vezu sa datotekom u biblioteci (Detach from Original). Otvaranje datoteke elementa biblioteke radi menjanja moguće je na tri načina: dva puta kliknite na ikonicu elementa u panelu library, ili je samo označite i pritisnite dugme Edit sa dna panela, ili izaberite ugrađeni element biblioteke na strani i pritisnite dugme Open na panelu Properties (slika 8.1.1). Dreamweaver tada otvara novu stranu koja sadrži samo taj element, ali koji sada nema onu bledožutu pozadinu i koga možete neposredno promeniti. Kada završite sa izmenama i sačuvate ih otvara se prozor Update Library Items (slika 8.2.1) kojim vas program pita da li želite da ažurirate sve strane koje sadrže taj element (jer je on za sada promenjen samo u biblioteci). Slika 8.2.1 Ažuriranje elemenata biblioteke na svim stranama Kada poritisnete Update pojavljuje se prozor Update Pages koji pokazuje koje su sve strane bile ažurirane (slika 8.2.2). - 48 - Macromedia - Dreamweaver MX Slika 8.2.2 Prozor Update Pages Ako ste izabrali da odložite ažuriranje strana u vreme kada ste završili menjanje elemenata biblioteke, Dreamweaver omogućava da to kasnije uradite jednom naredbom. Izaberite opciju menija Modify > Library > Update Pages. Otvara se prozor Update Pages slika 8.2.2, na kojem možete da izaberete opciju Entire Site u polju Look in, a sa desne strane ime vašeg sajta i pritisnite dugme Start. 8.3 Pravljenje i menjanje elemenata biblioteke koji sadrže skriptove Pošto se elementi biblioteke na strani moraju nalaziti unutar oznaka i ne smeju sadržati (referencirati) objekte izvan tih oznaka, JavaScript se ne može koristiti u elementima biblioteke ukoliko skript zahteva kod strane između oznaka i , jer te oznake dolaze pre oznake . Međutim postoji važan izuzetak. Skript je gotov element čije JavaScript funkcije Dreamweaver umeće unutar oznaka , pa u elementima biblioteke možete koristiti Dreamweaverove skriptove, premda zahtevaju kod koji treba umetnuti u dokument unutar oznaka i . Element biblioteke ne sadrži kod koji treba da se nalazi unutar oznaka i , ali, Dreamweaver automatski umeće potreban kod unutar tih oznaka, kad god u dokument ubacite odgovarajući element biblioteke. Dakle, potrebno je samo da označite željeni element sa strane koji sadrži skript (Rollover sliku, iskačući meni…), da pritisnete ikonicu New Library Item na dnu panela Library, i da upišete ime novog elementa biblioteke koga ste upravo napravili. Na kraju pritisnite Enter. - 49 - Macromedia - Dreamweaver MX Ovaj element biblioteke sadrži određene delove koda potrebne za skript, a to su događaji i akcija koju treba pozvati kada do tog događaja dođe. On ne sadrži JavaScript funkcije koje se moraju ubaciti između oznaka i . Rekli smo da Dreamweaver te funkcije automatski dodaje strani kada u nju unesete taj element biblioteke (jer prepoznaje određene delove koda u elementima biblioteke kao skriptove - akcije i događaji). Elementi biblioteke koji sadrže skriptove teže se menjaju od onih koji ih ne sadrže. Ako hoćete da menjate sam skript elementa biblioteke prethodno morate da raskinete vezu između biblioteke i primerka njenog elementa na strani (dugme Detach From Original). Kada ste promenili skript elementa sa strane, iz biblioteke obrišite originalan element (ali prethodno zapamtite njegovo ime), zatim označite promenjeni element na strani i ponovo od njega napravite novi element sa istim imenom. Sve ovo je zbog toga što skriptove nije moguće menjati neposredno u elementu biblioteke, pa morate da uklonite originalni element i da ga zamenite ispravljenom verzijom. Sada možete i ažurirati sve strane sa ovim promenjenim elementom, izborom opcije Modify > Library > Update Pages. - 50 - Macromedia - Dreamweaver MX Poglavlje 9 Izrada okvira U ovom poglavlju ćete naučiti: 1. Da napravite i snimite skup okvira i ugnježdene 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 sadržinom. Okviri obično dele stranu na oblast za navigaciju po Web sajtu i oblast sadržine. Oblast za navigaciju se najčešće ne menja, a oblast sadržine 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 definiše skup okvira i dve sa sadržinom svakog okvira. Skup okvira je HTML datoteka nevidljiva korisniku koja definiše strukturu Web strane sa okvirima. Skup čuva podatke o veličini i položaju svakog okvira i imena datoteke sa njihovom sadržinom. Svaki okvir je posebna HTML datoteka. Okviri imaju ivice čije se prikazivanje može isključiti, tako da ih korisnik ne vidi, ili uključiti da bi prozor bio jasno izdeljen na okna. Okviri mogu imati trake za pomeranje sadržaja i posetiocu može biti dozvoljeno da im menja veličinu povlačenjem ivica. Postoje dva načina da se napravi skup okvira u Dreamweaveru, možete ih unositi ručno, ili izabrati neki od gotovih skupa okvira. Ovaj drugi način je brži jer se tada i skup okvira i svi njegovi okviri automatski definišu.Kada izaberete opciju View > Visual Aids > Frame Borders pojaviće se debela ivica oko strane u prozoru dokumenta. Ako hoćete ručno da unesete okvire, odvucite ivicu koja opkoljava stranu u prozor dokumenta. Strana će se podeliti horizontalno (ako odvučete gornju ili donju ivicu) ili vertikalno (ako odvučete desnu ili levu ivicu). Automatski unos okvira je kao što smo rekli jednostavniji; dovoljno je da pritisnete npr. ikonicu Top Frame na kartici Frames panela Insert (slika 9.1.1). Left frame Top Frame Kartica (okvir na levoj (okvir na vrhu Frames strani) strane) Slika 9.1.1 Kartica Frames - 51 - Macromedia - Dreamweaver MX Strana je sada podeljena na dva okvira, kratki na vrhu i duži ispod njega, na dnu. Podelu obeležava tanka siva linija. Da bi, na primer, u donji okvir dodali još jedan skup okvira (Ugnježden), 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 načina izrade ugnježdenih skupova okvira, Dremweaver ih već ima ponuđene, takođe na kartici Frames. Strana će sada izgledati kao na slici 9.1.2: Slika 9.1.2 Izgled strane sa ugnježdenim okvirima Kada stavite potreban skup okvira na stranu, treba da ga snimite. Da biste videli stranu u browseru, i skup i datoteke sadržine svakog okvira moraju biti snimljeni. Da bi snimili skup okvira treba da ga označite. To se radi pritiskom na ivicu prozora dokumenta s unutrašnje strane, kada ivice svih okvira postaju isprekidane, i kada se na biraču HTML oznaka na dnu prozora prikazuje . Skup okvira može 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. Pošto ste izabrali (označili) skup okvira snimite ga izborom opcije File > Save Frameset As. Dok je skup okvira još izabran možete 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 grešili i radili na objektu na kome ne želite da radite, pogledajte često na panel Frames gde se jasno vidi šta je izabrano. - 52 - Macromedia - Dreamweaver MX Ivica skupa okvira Okviri Slika 9.1.3. Panel Frames – pojednostavljena struktura okvira 9.2 Karakteristike okvira i skupa okvira Karakteristike okvira možete kontrolisati na panelu Properties (slika 9.2.1). U zavisnosti od toga da li ste selektovali skup okvira ili sam okvir, opcije panela se menjaju. Ako hoćete da menjate veličine okvira treba da izaberete odgovarajući skup okvira. Veličinu okvira možete zadati na panelu Properties unosom odgovarajućih dimenzija redova odnosno kolona u polje Value, a možete i ručno da vučete ivice okvira dok ne dobijete potrebnu veličinu okvira. Dok menjate veličinu okvira morate voditi računa i o sledećim opcijama (meni Units do polja Value): - Pixels, ovom opcijom zadajete apsolutnu veličinu uspravnog ili položenog okvira, jednako upisanom broju piksela. Za okvire koji ne treba da menjaju veličinu ovo je najbolja opcija. Ako ostalim okvirima zadate veličinu pomoću drugih jedinica mere, njima će se dodeljivati prostor tek pošto okviri čija je veličina zadata u pikselima dobiju odgovarajuće vrednosti. - Percent, ova opcija zadaje procentualni deo skupa okvira koji tekuči okvir treba da zauzme. Uspravni i položeni okviri čija je veličina zadata u procentima, dobijaju prostor posle okvira čija je veličina zadata apsolutno, a pre okvira čija je velilina zadata relativno, - Relative, ova opcija zadaje da će tekući okvir dobijati prostor relativno u odnosu na ostale okvire i da će zadržati tekuće proporcije. Okviri čija je veličina relativna dobijaju prostor poslednji, posle onih čija je veličina zadata u pikselima ili procentima, ali zauzimaju sav preostali prostor. Ako donjem ili desnom okviru zadate relativnu veličinu on će ispuniti preostalu visinu, odnosno širinu prozora browsera. Slika 9.2.1 Svojstva skupa okvira - 53 - Macromedia - Dreamweaver MX Posle izbora veličine okvira snimite skup okvira (Save Frameset). Poželjno je svakom okviru u skupu odmah zadati ime. To nije ime datoteke sadržine koja će se u okviru prikazivati, nego uokvirine površine u dokumentu, a važno je kada se prave linkovi za prikazivanje strane na toj površini. Poželjno je da imena okvira odražavaju buduću sadržinu okvira (navigacija, naslov, sadržaj...). Da bi zadali ime okviru treba ga prvo označiti istovremenim pritiskom tastera Alt i klikom miša na željeni okvir. To je moguće uraditi i samim izborom (bez tastera Alt) tog okvira na panelu Frames. Imajte u vidu da biranje okvira nije isto što i postavljanje kursora u njega. Kada ste izabrali okvir (a ne skup okvira) panel Properties sada pokazuje njegove karakteristike (slika 9.2.2). U polje Frame Name upišite željeno ime umesto podrazumevanog, i pritisnite Enter. U imenu okvira ne sme biti razmaka, crtica, tačaka i specijalnoh znakova. Opcijom Scroll zadajete prikazivanje traka za pomeranje , i to vertikalne i horizontalne. Parametar Auto prikazuje trake za pomeranje kada u okviru nema dovoljno prostora za prokazivanje sadržine strane. Parametar Default prihvata podrazumevani parametar browsera koji je najčešće baš Auto. Na panelu Properties (slika 9.2.2) u polju Borders možete izabrati, ili ne prikazivanje ivica okvira u Browseru. Ako izaberete vrednost Default okvir će preuzeti taj parametar od roditeljskog skupa okvira (polje Borders na Panelu Properties skupa okvira – slika 9.2.1), a ako je izabrana neka druga vrednost (Yes ili No) ona ima prioritet na isti parametar roditeljskog skupa okvira. Ukoliko koristite gotove skupove okvira, polja Margin Width i Margin Height ostaju prazna i koriste se podrazumevane vrednosti ovih parametara u browseru koje se menjaju u zavisnosti od verzije i vrste browsera. Margin Width definiše širinu leve i desne margine okvira u pikselima, a polje Margin Height visinu gornje i donje margine. Slika 9.2.2 Svojstva okvira Kada menjate svojstva okvira ne zaboravite da ih sačuvate (Save Frameset). 9.3 Sadržina okvira i traka za navigaciju Sadržina okvira je zasebna HTML datoteka. Stranu možete da pravite odvojeno ili unutar granica okvira. Poželjno je upotrebljavati skup okvira za projektovanje strana, jer tako strane neće biti preširoke ili preuske za svoj okvir. Ako posetioci budu morali da pomeraju sadržinu okvira u raznim smerovima da bi sve videli, to im se neće baš svideti. Kada 'popunite' okvir, tj. stranu treba da je snimite opcijom File < Save Frame. Poželjno je da se svakoj strani da ime (polje Title). Naslov zapravo i nije neophodan pošto če browser - 54 - Macromedia - Dreamweaver MX koristiti naslov skupa okvira u svom prozoru. Pa ipak dobro je uvek davati naslove dokumentima, jer će tako strana imati naslov i u slučaju da bude iz bilo kog razloga otvorena u zasebnom prozoru. Naredbom Save Frame snimate samo trenutno izabranu stranu ali ne i skup okvira. I skup okvira treba snimiti. Traka za navigaciju je niz slika povezanih sa stranama prezentacije. Po lakoći korišćenja trake za navigaciju su slične jednostavnim slikama sa prelazom (Rollover Image). Svaka slika na traci moze imati do četri stanja u zavisnosti od akcija posetioca. Prvo stanje Up Image prikazuje se kada se strana tek učita. Drugo stanje Over Image prikazuje se kada posetilac pređe pokazivačem preko slike. Ista stanja imaju obične slike sa prelazom. Na traci za navigaciju možete upotrebiti još dva stanja. Kada posetilac pritisne sliku prikazuje se trće stanje, Down Image. Četvrto stanje slike Over While Down Image prikazuje se kada posetilac pređe preko slike koju je već pritisnuo. Traka za navigaciju služi za prikazivanje trenutnih i prethodnih akcija posetilaca. Treće stanje obično izgleda kao pritisnuto dugme, što posetiocu ukazuje nato da je pritisnuo sliku. Po pritisnutom dugmetu posetilac zna koju stranu gleda. Označite mesto na strani (u okviru za navigaciju) gde želite da unesete traku za navigaciju i izaberite opciju Insert > Interactive Images > Navigation Bar. Otvara se prozor Inset Navigation Bar (slika 9.3.1). U polje Element Name upišite ime prve slike na traci na navigaciju umesto imena Unnamed1. U naredna četiri polja se smeštaju slike za četiri različita stanja (polje browse) dugmeta u zavisnosti od akcija posetilaca. Zatim u polju When Clicked go to URL napravite link za to dugme do željene strane. Ta strana će se otvoriti u onom okviru koji navedete u polju posle reči In. Imate takođe mogućnost izbora horizontalne ili vertikalne orijentacije dugmadi trake za navigaciju u polju Insert. Dok birate opcije u ovom prozoru, ime elementa (dugmeta) koje se menja prikazuje se u spisku Nav Bar Elements na vrhu prozora. Dodavanje novih odnosno brisanje nepotrebnih dugmadi se vrši znakovima (+) i (-). Redosled dugmadi birate strelicama gore-dole. Pritisnite OK i uneli ste traku za navigaciju. Ako hoćete kasnije da je promenite izaberite Modify < Navigation Bar. Otvoriće se prozor Modify Navigation Bar gotovo identičan prozoru Insert Navigation Bar, samo bez mogućnosti biranja vertikalnog ili horizontalnog položaja trake za navigaciju. Hiperveze se podrazumevano usmeravaju ka okviru ili prozoru u kome se nalaze. Ako želimo da se link otvara u nekom drugom okviru na Panelu Properties u polju Target izaberite željeni okvir. Kad god napravite nov okvir njegovo ime se automatski dodaje padajućoj listi Target. U ovoj listi ima i drugih opcija. Opcija _Blank učitava povezanu stranu u nov neimenovan prozor browsera. Opcija _Parent učitava povezanu stranu u skup okvira koji je roditelj okvira sa hipervezom. Ako okvir koji sadrži hipervezu nije ugnježden, povezana strana se učitava u ceo prozor browsera. Opcija _Self učitava povezanu stranu u isti okvir ili prozor koji sadrži link. Ovo se podrazumeva, pa to obično ne morate da zadajete. Opcija _Top učitava povezanu stranu u ceo prozor browsera i time uklanja sve okvire. - 55 - Macromedia - Slika 9.3.1 Definisanje trake za navigaciju - 56 - Dreamweaver MX Macromedia - Dreamweaver MX Poglavlje 10 Korišćenje šablona (Templates) U ovom poglavlju ćete naučiti: 1. Da napravite i koristite Template 2. Ažurirate sajt pomoću Template-a 10.1 Pravljenje Template-a Bez obzira na to da li pravite veliku prezentaciju sa više odeljaka ili sa više strana koje slično izgledaju, ubrzaćete rad ako radite sa šablonima. Pomoću njih možete da promenite više strana ili ažurirate izgled sajta za samo nekoliko minuta. Naime, šabloni daju stane identičnog izgleda, za razliku od Assets-a (biblioteke) koji omogućava da se neki elementi i grupe elemenata ponavljaju na stranama i tako daje veće mogućnosti menjanja rasporeda elemenata na pojedinim stranama. Zato ako želite strane identičnog izgleda koristite šablone. Template definiše izgled i raspored strana koje ćete pomoću njega napraviti. Kada pravite Template obično najpre definišete izgled strane i snimite je kao šablon. Takođe, možete koristiti i postojeću HTML stranu i da je snimite kao šablon. Iz menija File izaberite Save As Template. Otvoriće se prozor Save As Template (slika 10.1.1), u kome birate sajt u kome ćete snimiti Template. Dreamweaver šablonu automatski daje ime u polju Save As, što je ustvari ime datoteke iz koje je nastao. Slika 10.1.1 Prozor za snimanje Templates-a - 57 - Macromedia - Dreamweaver MX Prozor zatvorite pritiskom na dugme Save. Šablon je dodat sajtu i snimljen u direktorijum Templates (na panelu Assets) sa nastavkom .dwt. Ako takav direktorijum ne postoji Dreamweaver će ga automatski napraviti. Svi šabloni koje budete pravili u okviru izabranog sajta će se pojaviti u ovom direktorijumu. Takođe, umesto da snimate postojeću stranu kao Template, možete da napravite nov, prazan šablon, pomoću opcije menija Window > Assets. Zatim pritisnite ikonicu Templates na panelu Assets. Kada pritisnete dugme New Template, na dnu tog panoa, spisku šablona u njemu biće dodat nov šablon bez imena. Upišite ime dok je još označen (slika 10.1.2) Templates New Template Slika 10.1.2 Pravljenje novog šablona Kao što je već rečeno, sve oblasti šablona su nepromenjive. Ako hoćete da menjate informacije na stranama morate definisati oblasti na strani koje se mogu menjati. Te oblasti po pravilu sadrže tekst i moraju biti strogo definisani kao promenjivi. Takođe, prilikom rada na šablonu možete da menjate i oblasti koje će biti promenjive i one koje to neće biti, dok na strani napravljenoj pomoću šablona možete da menjate samo oblasti definisane kao promenjive. Da bi otvorili napravljeni šablon, dvaput kliknite na ime tog šablona na panelu Assets. Na šablonu označite objekat (tabela, celija tabele, držač slike, dugme...) koji želite da bude - 58 - Macromedia - Dreamweaver MX promenljiv. Zatim, na panelu Insert izaberite karticu Templates i pritisnite ikonicu Editable Region. Otvoriće se prozor New Editable Region (nova promenjiva oblast). U polje Name upišite ime promenjive oblasti šablona i pritisnite OK. Imena oblasti ne smeju da sadrže specijalne znakove (znakove navoda, zagrade..) i naravno svaka oblast šablona mora imati drugačije ime. Ako npr. izaberete ćeliju tabele kao promenjivu oblast, ista će biti istaknuta okvirom u prikazuje ime promenjive oblasti. Ukoliko se plavoj boji, na čijem vrhu jezičak ne vide konture i imena oblasti izaberite opciju menija View > Visual Aids > Invisible Elements. Važno je napomenuti da ne možete definisati više ćelija tabele kao promenjivu oblast, već ukoliko to želite, podesite da cela tabela bude promenjiva. Imena svih promenjivih oblasti prikazuju se na dnu menija Modify, opcija Templates. Možete unutar same ćelije napraviti promenjivu oblast. Sve oko te ćelije će biti nepromenljivo. Sve što se menja mora biti u promenjivoj oblasti, uključujući i hiperveze. Ako pravite hiperveze u datoteci šablona, za pronalaženje hiperveze upotrebite ikonicu direktorijuma ili alatku Point to File koje se nalaze na panelu Properties. Hipervezu ne smete upisivati neposredno u odgovarajuće polje na panelu Properties, jer tada hiperveze neće raditi. Dreamweaver automatski formira putanje kada koristite jednu od ove dve metode. Na kraju snimite datoteku. Menjanje promenjivih oblasti šablona možete kasnije da onemogućite. Iz menija Modify izaberite Templates, a zatim Remove Template Markup. Nestaće kontura koja označava oblast kao promenjivu i sada je taj deo šablona zaključan i ne može se menjati u stranama napravljenim pomoću ovog šablona. Takođe možete da birate da li će se sadržina neke oblasti prikazivati na stranama napravljenim pomoću šablona u zavisnosti od vrednosti izraza koji se izračunava ili od parametra koji zadajete. Na šablonu (ne na strani napravljenoj pomoću šablona) označite objekat (oblast) koji će biti opciona oblast. U panelu Insert, na kartici Templates izabrati ikonicu Optional Region. Otvoriće se prozor New Optional Region na kojoj izaberite Basic (slika 10.1.3) Slika 10.1.3 Pravljenje opcione oblasti - 59 - Macromedia - Dreamweaver MX U polje Name unesite ime željene oblasti. Ako nameravate da koristite opcionu oblast šablona na većini strana sajta (koje ćete praviti pomoću ovog šablona), ostavite polje Show by Default potvrđeno. Ako ovo polje ostavite nepotvrđeno a želite da ta opciona oblast bude vidljiva na strani napravljenoj pomoću ovog šablona, dok je ta strana otvorena izaberite Modify > Template Properties. Pojaviće se prozor Template Properties u kome izaberete željenu opcionu oblast, potvrdite polje Show Ime vaše opcione oblasti i sačuvate stranu. Isto tako, ako ste na strani napravili neku opcionu oblast, pomoću kartice Advanced, možete da je povežete sa novom opcionom oblašću. Na istoj kartici definišete i izraze (Template Expressions) koji određuju kada se oblast prikazuje. Oblast koja se ponavlja (repeating region) jeste područje strane koje se ponavlja više puta. Ove oblasti su naročito pogodne za objekte koji se ponavljaju promenjiv broj puta na stranama i za kontrolisanje izgleda tabela koje imaju veliki broj redova i kolona. Da bi napravili oblast koja se ponavlja, označite je na šablonu (npr. zadnji red tabele), zatim na panelu Insert, na kartici Templates pritisnite Repeating Region. Otvoriće se prozor New Repeating Region (slika 10.1.4). Slika 10.1.4 Pravljenje oblasti koje se ponavljaju Upišite ime željene oblasti i pritisnite OK. Boja za isticanje oblasti koje se ponavljaju je ista kao i za opcione oblasti, ali je svetlija od boje promenjivih oblasti. Da biste mogli da menjate sadržinu oblasti koje se ponavljaju u stranama koje će te napraviti pomoću šablona, ubacite u njih potreban broj promenljivih oblasti ( npr. označite jednu po jednu ćeliju zadnjeg reda i pritisnite dugme Editable Region). Dodavanje stavki koje se ponavljaju, na strani napravljenoj pomoću ovog šablona) vrši se pritiskom na dugme (+) na , a redosled stavki određujete strelicama gorejezičku Repeat dole. Boju za isticanje oblasti možete da menjate i prilagodite je bojama strane, izborom Edit >Preferences > Highlighting. Pritisnite polje palete boja željene oblasti i izaberite boju za isticanje ili upišite njen heksadecimalni kod u pripadajuće polje. Sledeći korak je pravljenje strana na osnovu originalnog šablona. Iz menija File izaberite New i u prozoru New Document pritisnite karticu Templates. Na ovoj kartici prikazuje spisak definisanih sajtova i spisak svih šablona pridruženih izabranom sajtu. Izaberite željeni šablon, ostavite polje Update Page when Template changes (ažuriraj strane kad se izmeni šablon) potvrđeno i pritisnite dugme Create. Tako ste napravili novu stranu na osnovu tog šablona. Iako nova strana prikazuje svu sadržinu šablona, vi je ipak sačuvajte. Na novoj strani vidite boju za isticanje zaključanih oblasti (podrazumevana boja je svetložuta). Kada dovedete pokazivač miša iznad oblasti (ili pokušate da je pritisnete), on će se pretvoriti u precrtan krug, što pokazuje da se te oblasti ne mogu menjati. - 60 - Macromedia - Dreamweaver MX Tekstove ćete najčešće postavljati unutar promenjive oblasti. Ukoliko ubačeni tekst izazove prekomerno širenje prostora za tekst, morate zatvoriti dokument i ponovo ga otvoriti da bi se veličina oblasti prilagodila njenoj sadržini. 10.2 Ažuriranje sajta pomoću Template-a Videli ste da pomoću šablona možete lako da napravite više strana jednakih originalnom šablonu, a zatim da ih popunite. Međutim, do prave uštede vremena dolazi tek kada treba da izmenite sve strane. Bez šablona biste morali da menjate svaku stranu pojedinačno. Koristeći šablon menjate samo datoteku originalnog šablona i potom ažurirate sve strane napravljene pomoću njega. To ćete uraditi tako što dvaput pritisnete željeni šablon u kategoriji Templates, na panelu Assets. Otvoriće se originalni šablon. Kada napravite željene izmene sačuvajte ga i automatski će se otvoriti prozor Update Template Files koji pokazuje spisak svih strana napravljenih pomoću ovog šablona (slika 10.2.1). Da bi ažurirali sve ove strane pritisnite dugme Update. Ako hoćete da odložite ažuriranje pritisnite dugme Don't Update. Naknadno ćete ih ažurirati biranjem opcije menija Modify > Templates > Update Pages. Slika 10.2.1 Ažuriranje strana Takođe vezu strane i njenog šablona možete da prekinete biranjem opcije menija Modify > Templates > Detach from Template. Stranu čija je veza prekinuta možete da menjate kako god hoćete ali se ona više ne ažurira kada se izmeni šablon. - 61 - Macromedia - Dreamweaver MX Poglavlje 11 Održavanje Web sajta U ovom poglavlju ćete naučiti: 1. Da koristite funkcije za održavanje Web sajta u prikazu Site 2. Napravite mapu sajta 3. Shvatite razlike između lokalnih i udaljenih Web lokacija (sajtova) i uspostavite vezu sa udaljenom lokacijom 11.1 Održavanje sajta u Site prikazu Održavanje Web sajta je suštinski deo razvoja projekata za Web. Prikaz Site nudi mnoštvo alatki za održavanje koje omogućavaju lako ažuriranje i kontrolu Web lokacije. Prikaz Site se koristi za održavanje i lokalnih i udaljenih lokacija. U njemu se sajt vidi kao spisak datoteka, ali i kao mapa koja grafički prikazuje hijerarhiju sajta. Održavanje sajta obuhvata premeštanje, dodavanje i brisanje datoteka i direktorijuma i najbolje se izvodi u prikazu Site. Ako celokupno održavanje sajta i rad sa njegovim datotekama obavljate iz prikaza Site, obezbedili ste ispravnost putanja koje upućuju Dreamweaver i browser na hiperveze, slike i ostale elemente sajta. Putanje su ispravne zato što Dreamweaver može da prati vaše izmene i da na osnovu toga ažurira datoteke. U protivnom, ako izmenite datoteke ili direktorijume u prozoru My Computer ili u Windows Explorer Dreamweaver ne zna za te izmene i ne može da održi ispravnost putanja. Do prikaza Site dolazite u grupi panela Files pritiskom na karticu Site izborom željenog sajta u padajućoj listi na levoj strani i pritiskom na dugme Expand, a to je krajnja desna alatka na paleti alatki Site (slika 11.1.1). - 62 - Macromedia - Dreamweaver MX Preuzmi i zaključaj datoteke Preuzmi datoteke Dugme za proširivanje i sažimanje (expand) Povezivanje /prekidanje veze Pošalji i otključaj datoteke Osveži Lokalni korenski direktorijum Meni prikaza Meni sajtova Pošalji datoteke Slika 11.1.1 Panel Site (pre proširenja) Prikaz Site otvara nov prozor koji sadrži paletu alatki sa funkcijama za održavanje sajta (slika 11.1.2). U daljem tekstu se podrazumeva da radimo u ovom proširenom prikazu Site. Pomoću menija sajtova lako se prebacujete na bilo koji sajt, a desni meni na vrhu panoa služi za prebacivanje u prikaze Local, Remote, Testing Server i Map. Okno lokalnih sajtova (Local Site) Mapa sajta Testiranje servera Datoteke sajta Okno sajtova na serveru (Remote Site) Slika 11.1.2 Prošireni prikaz Site - 63 - Macromedia - Dreamweaver MX Lokalne datoteke se prikazuju u desnom okviru prozora Site. One obuhvataju celokupnu sadržinu korenskog direktorijuma izabranog sajta. U levom okviru (sajtovi na serveru) prozora Site prikazuje se pomoćni tekst 'To see the files on your web server, you must define a remote site', koji objašnjava da morate da definišete sajt na serveru da bi se u tom okviru prikazale datoteke smeštene na vašem web serveru. Glavne alatke prozora Site smeštene su na paletu alatki: - tri dugmeta na levom kraju služe za biranje načina prikaza sadržine udaljenog sajta: datoteke lokacije (Site Files), testiranje servera (Testing Server) i mapa lokacije (Site Map). Podrazumeva se prikazivanje datoteka lokacije. - Meni sajtova prikazuje sve definisane sajtove - Dugme za povezivanje/prekidanje veze uspostavlja vezu sa udaljenim sajtovima. Ako još niste definisali udaljeni sajt, otvara se odgovarajući prozor Site Definition. - Dugme Osveži (Refresh) nanovo ispituje i prikazuje sadržinu lokalnog i udaljenog direktorijuma - Dugme Get Files kopira izabrane datoteke sa udaljenog sajta na lokalni, pri čemu se zatečene kopije brišu. Ako još niste definisali udaljeni sajt ovo dugme nećete moći koristiti. - Dugme Put Files kopira izabrane datoteke sa lokalnog sajta na udaljeni. Ni ovo dugme nećete moći koristiti ako niste definisali udaljeni sajt. - Dugme Check Out Files (preuzmi i zaključaj datoteke), prenosi kopiju datoteka sa udaljenog servera na lokalni sajt, pri čemu se zatečene kopije brišu. Originali datoteka na serveru zaključavaju se. Ovo olakšava timski rad na sajtu. Vi i vaše kolege možete slobodno preuzimati datoteke sa servera, menjati ih i vraćati nazad na server. Automatsko zaključavanje i otključavanje datoteka čini da svi mogu da vide koje datoteke su preuzete radi izmena, zbog čega ih drugi koji rade na razvoju sajta ne mogu istovremeno menjati. - Dugme Check In Files (pošalji i odključaj), prenosi kopiju datoteka sa lokalnog sajta na server, pri čemu se prenesene datoteke na serveru otključavaju i čine dostupnim za menjanje. Napomena: Opcije Check In i Check Out za pojedine sajtove možete omogućiti ili zabraniti prilikom njihovog definisanja (u prozoru Site Definition opcija Enable file Check In and Check Out). Dreamweaver poseduje i ugrađeni program za rad sa datotekama koji dosta olakšava pristup datotekama koje mogu biti smeštene i izvan lokalnog korenskog direktorijuma (direktorijum sajta). U desnom okviru prozora Site (Local View) postoji ikonica Desktop koja omogućava direktan pristup svim direktorijumima i datotekama na računaru i njihovo prevlačenje (kopiranje) u lokalni korenski direktorijum i obrnuto. Prevlačenje datoteka sajta (iz lokalnog korenskog direktorijuma) na ikonicu Desktop, i obrnuto, mora biti obavljeno u Dreamweaverovom prozoru Site, a nikako u Windows Exploreru ili prozoru My Computer. Kada dva puta kliknete na datoteke u prozoru Site otvara ih program koji je njihovom tipu pridružen u Dreamweaveru. Promenu programa pridruženog određenom tipu datoteka vršite izborom opcije Preferences menija Edit u kategoriji File Types/Editors. Nove direktorijume i strane možete direktno da pravite u prozoru Site.Tako možete brzo da napravite celokupnu strukturu strana i direktorijuma sajta, tako što ćete napraviti prazne strane koje će rezervisati mesto u strukturi, a kasnije ćete se vratiti i dodati im sadržinu. - 64 - Macromedia - Dreamweaver MX Kada u desnom okviru prozora Site kliknete desnim tasterom na neki objekat lokalnog korenskog direktorijuma otvarate kontekstni meni sa brojnim Dreamweaverovim funkcijama (ove opcije se menjaju u zavisnosti od izabranog objekta; strana, direktorijum...). Tako možete napraviti novu stranu izborom opcije New File. Pojaviće se nova, bezimena datoteka (strana) kojoj treba dati ime (npr. strana3.htm) i pritisnuti Enter (slika 11.1.3). Kontekstni Desni Nova meni ( izbor (bezimena) 'klik' opcije New strana File) Slika 11.1.3 Izrada nove strane u Site prikazu 11.2 Mapa sajta Mapa sajta vizuelno predstavlja izabrani deo sajta. Na njoj se ne prikazuju svi dokumenti sajta, već ona počinje od strane koja je definisana kao početna strana sajta (Home Page) i prikazuje sve ostale strane s kojima je početna strana povezana linkovima. Prikazuju se sve strane u hijerarhiji linkova dok se ne dođe do 'slepe ulice', tj. strane koja ne sadrži linkove. Ako na sajtu imate 'siročiće', tj. strane do kojih se ne može doći direktnim putem od početne strane, one se neće videti na mapi sajta. Pre pravljenja mape sajta neophodno je da napravite početnu stranu (Home Page) sajta da bi mapa imala početnu tačku. U okviru lokalnih datoteka (desna strana prikaza Site) izaberite stranu koja će vam biti početna (Home Page), pritisnite desni taster i u kontekstnom meniju izaberite opciju Set As Home Page. Ova strana je sada Home Page. Početne strane se obično nazivaju Index.html, jer browseri podrazumevano prikazuju tako nazvanu stranu ako im nije zadato drukčije. Da bi formirali (videli) mapu pritisnite dugme mape sajta (Site map) na paleti alatki prozora Site i u podmeniju izaberite opciju Map Only (opcija Map and Files daje mapu sa leve i lokalni korenski direktorijum sa desne strane). Mapa sajta (slika 11.2.1) vizuelno predstavlja sajt; početna strana se prikazuje na vrhu hijerarhije mape. Linkovi od jedne do drugih strana prikazuju se linijom koja počinje na strani koja sadrži link, a strelice na kraju pokazuju na svaku povezanu stranu. Kad se pritisne znak (+) prikazuju se strane na koje link pokazuje. I te strane imaju znak plus ukoliko i one poseduju link. Neispravni linkovi (koji pokazuju na nepostojeće strane) prikazuju se crvenom bojom. Spoljni linkovi, kao što su adrese za slanje Email-a i URL adrese, prikazuju se plavom bojom i s malom kuglom s desne strane. - 65 - Macromedia - Dreamweaver MX Traka za kretanje po strukturi sajta Slika 11.2.1 Mapa sajta Mapa se podrazumevano prikazuje horizontalno. Ako početna strana ima mnogo linkova, možda u prozoru Site neće biti dovoljno masta za prikazivanje svih tih strana istovremeno. Omogućeno je menjanje broja kolona i širine kolona kako bi sve strane sajta stale u jedan prozor; isto tako možete promeniti način prikazivanja mape na vertikalni. Te promene se vrše u prozoru Site Definition u kategoriji Site Map Layout (u prozoru Site izaberite View > Layout). Mapu sajta možete snimiti kao sliku (formati BMP ili PNG) opcijom File > Save Site Map. Kako sajt bude rastao i postajao sve složeniji, njegova mapa može postati prevelika za prikazivanje u prozoru Site. Tada možete promeniti mapu tako da ona prikazuje samo željenu stranu i strane na koje pokazuju njeni linkovi. To se radi tako što označite tu stranu i izaberete opciju View As Root menija View. Ispod paleti alatki prozora Site, prikazuje se siva traka sa hijerarhijom sajta (slika 11.2.1). Hijerarhija počinje stranom koju ste odredili za početnu (Home Page) a završava se stranom koju ste zadali za korensku. Ako ste npr. kao korensku izabrali stranu mapa.html (slika 11.2.1) onda će traka izgledati ovako: Ako želite da mapa ponovo prikazuje Home Page na prvom nivou, jednostavno kliknite na nju u traci. Možete takđe da kontrolišete koje će se strane prikazivati na mapi sajta i da sakrijete određene strane. Strane su sakrivene samo na mapi, a vide se u spisku lokalnih datoteka u koloni Local Files (kada je izabrana opcija Map and Files). Da bi sakrili stranu pritisnite - 66 - Macromedia - Dreamweaver MX desni taster miša na nju i izaberite opciju Show/Hide Link. Ona nestaje sa mape. Ako želite kasnije da vidite skrivene strane izaberite Show Files Marked As Hidden u meniju View. Sada se one prikazuju kosim slovima (Italic). Sada možete isključiti sakrivanje strana ponovnim izborom opcije Show/Hide Link. Korišćenjem mape možete da dodajete, brišete i menjate linkove. Kad selektujete neku stranu na mapi pored nje se pokazuje ikonica Point to File. Nju možete da prevučete do strane sa kojom želite da napravite link, a koja se nalazi u koloni Local Files. Kada pustite taster miša link je napravljen. Dok premeštate pokazivač po stranama (preko imena, a ne preko ikonice) na mapi sajta na statusnoj traci prozora Site pikazuje se naslov, veličina i datum kada je strana napravljena. Ako ste zaboravili da date naslov strani, ili hoćete da ga promenite, to možete uraditi tako što u meniju View izaberete opciju Show Page Titles, da bi se na mapi sajta prikazala imena strana umesto imena njihovih datoteka. Stranu kojoj želite da promenite ime pritisnite jednom, a posle nekoliko trenutaka još jednom, zatim upišite novo ime i pritisnite Enter. Ponovnim izborom opcije Show Page Titles menija View opet se na mapi pokazuju imena datoteka strana a ne samih strana. Prilikom promene imena datoteke strane otvara se prozor Update Files u kome će se prikazati sve strane na koje utiče ova promena, i pritiskom na dugme Update ažurirate sve ove strane. Ovo je najbolji način promene imena datoteka strana jer Dreamweaver tada automatski menja sve linkove ka toj strani. 11.3 Postavljanje sajta na server Da bi posetioci mogli da vide vaš sajt morate ga kopirati na udaljenu lokaciju, tj. na Web server. Konfigurisanje za to slanje se obavlja u prozoru Site Definition do koga dolazite izborom opcije Edit Sites menija Site (u prozoru Edit Sites označite željeni sajt i kliknete Edit). U prozoru Site Definition treba izabrati karticu Advanced, a u kategoriji Remote info u polju Access Local/Network jer ćemo simulirati udaljenu FTP (File Transfer Protocol), lokaciju. Tako ćete moći da eksperimentišete sa funkcijama Get i Put, kao i drugim funkcijama za održavanje sajta, a da ne morate zaista da se povezujete sa serverom. Napomena: FTP je uobičajeni protokol za slanje i preuzimanje datoteka sajta sa servera. Ako bi u polju Access izabrali FTP, pojavljuju se parametri za čije pravilno definisanje treba da se posavetujete sa davaocem usluge servera na kojem će biti vaš sajt: - FTP Host, ime web servera na kome će se izvršavati sajt (npr. ftp://mojsajt.com), - Host Directory, direktorijum na serveru u kome se čuvaju dokumenti sajtova, - Login and Password, vaše korisničko ime i lozinka na serveru, - Use Passive FTP, koristi se kada postoji barijera između vašeg računara i servera (ova opcija je podrazumevano nepotvrđena), - Use Firewall (in Preferences), koristi se ako pri izlasku iz lokalne mreže na putu do servera prolazite kroz Firewall (ova opcija je podrazumevano nepotvrđena). Pritisnite ikonicu desno od polja Remote Folder i u prozoru Choose Remote Folder izaberite folder koji će biti korenski direktorijum vašeg sajta i koji će služiti kao zamena za - 67 - Macromedia - Dreamweaver MX server. Ovaj direktorijum mora biti izvan lokalnog korenskog direktorijuma. Pritisnite OK i Done da bi zatvorili prozor Edit Sites. Pomoću Dreamweavera možete da proverite koje su datoteke lokalnog sajta novije od odgovarajućih datoteka na serveru. Tako možete da ažurirate samo one koje su bile izmenjene. U meniju Site prozora Site izaberite opciju Synchronize. Otvoriće se prozor Synchronize Files, gde u polju Synchronize izabirate da li želite da uporedite i ažurirate samo određene (selektovane) datoteke lokalnog sajta ili celi sajt, a u polju Direction da li želite da novije datoteke postavite na server ili da ih preuzmete sa servera (slika 11.3.1). Slika 11.3.1 Poređenje i ažuriranje datoteka sajta Kada pritisnete dugme Preview... Dreamweaver će uporediti sve datoteke (ili samo izabrane) direktorijuma lokalnog sajta (desna strana prozora Site) sa onima u direktorijumu na serveru. Ako oba direktorijuma sadrže datoteke istih imena, Dreamweaver će uporediti datume njihovih poslednjih izmena. Ako ste, na primer, zadali akciju Put newer Files to remote, u direktorijum na serveru se prenose sve datoteke lokalnog direktorijuma kojih nema na serveru ili su novijeg datuma od tamo zatečenih. Kada program završi pretraživanje lokalnog i direktorijuma na serveru, prikazaće se spisak datoteka za koje je utvrdio da ih treba poslati na server. U ovom prozoru (slika 11.3.2) se inače prikazuju akcije koje će biti preduzete, imena datoteka i njihov status. Za svaku datoteku možete da uklonite potvrdu iz polja akcije i tako naznačite Dreamweaveru da je preskoči. I ako je potvrđena opcija Check In / Out funkcija sinhronizacije neće moći ni da otključa ni da zaključa datoteke. Slika 11.3.2 - 68 - Macromedia - Dreamweaver MX Pritisnite OK, sinhronizacija će se završiti, i prikazaće se izveštaj o ukupnom broju ažuriranih datoteka. Mozete zatvoriti ovaj izveštaj, ili ga sačuvati pritiskom na dugme Save Log. Promenjene datoteke lokalnog sajta možete pronaći opcijom Select Newer Local menija Edit u prozoru Site. Dreamweaver poredi datume izmena svih lokalnih datoteka sa odgovarajućim podacima sa servera i bira samo novije lokalne datoteke. Da bi poslali te novije (promenjene) datoteke na server pritisnite dugme Put Files na paleti alatki prozora Site. Otvoriće se prozor Dependent Files koji pita da li želite da pošaljete i zavisne datoteke (slike...). Yes šalje na server sve slike na izabranim stranama i HTML kod tih strana. Opcija No šalje samo HTML kod. Ako ste izmenili samo HTML stranu, a slike su već na serveru, nema razloga da ih tamo ponovo šaljete, pa izaberite opciju No. Ako ste izmenili neku sliku na strani ili dodali novu, izaberite Yes. Možete da sakrijete određene direktorijume ili tipove datoteka i tako ih isključite iz dosega funkcija Synchronize, Get, Put i Check In/Out. Skriveni direktorijumi i tipovi datoteka isključeni su i iz operacija koje pokrivaju celi sajt, kao što su biranje novih lokalnih i dokumenata sa servera, provera linkova, pretraživanje i zamena, izveštaji i ažuriranje biblioteka i šablona. Skriveni direktorijumi i tipovi datoteka ne prikazuju se u spiskovima panela Assets. Sakrivanje i otkrivanje pojedinih direktorijuma i datoteka vršite tako što ih označite i izaberete opciju Site > Cloacking > (Un)cloak. Ako izaberete Site Cloaking Settings otvara se kartica Advanced prozora Site Definition sa izabranom kategorijom Cloaking gde možete onemogućiti skrivanje za celi sajt tako što ćete ukloniti znak potvrde iz polja Enable Cloaking. U polje Cloak Files Ending With možete upisati ekstenzije za tipove datoteka koje želite da sakrijete na celom sajtu (npr: .pdf . fla.). Skriveni direktorijumi i datoteke su precrtani crvenom linijom. - 69 - Macromedia - Dreamweaver MX Literatura Dreamweaver MX Tutorial, http://www.macromedia.com/software/dreamweaver/, Macromedia Dreamweaver MX iz prve ruke, Khristine Annwn Page, Mikro Knjiga 2002. - 70 - OSNOVNA [KOLA VUK KARADZI] K R U [ E V A C IZRADA WEB PREZENTACIJA DREAMWEAVER KRU[EVAC, novembar 2001.godine INTERNET - neotkrivene mogu}nosti 2 INTERNET - neotkrivene mogu}nosti WWW World Wide Web World Wide Web jeste sistem Internet servera koji podr`ava hipertekst za pristup jednom broju Internet protokola. World Wide Web ~esto se skra}uje u Web, WWW ili W3. World Wide Web napravio je 1989. god. Tim Berners-Lee koji radi u Evropskoj laboratoriji za fiziku (CERN) u Švajcarskoj. Prva namena Weba bila je da omogu}i ~lanovima laboratorije širom sveta da komuniciraju koriste}i mre`ni hipertekst. Ubrzo je vest procurela izvan CERN-a, pa se pove}avao i broj onih koji su razvijali Web i koristili ga. Uz hipertekst u Web su polako ulazile slike, te video i zvu~ni zapisi. Poslednjih godina upotreba Weba raširena je po celom svetu. Internet je globalna ra~unarska mre`a sastavljena od hiljada mre`a po celom svetu. Niko ne zna koliko je ra~unara povezeno na Internet, iako su procene u toku. Sigurno je, me|utim, da se ovaj milionski broj pove}ava neverovatnom brzinom. Niko ne kontroliše Internet. Postoje organizacije koje razvijaju tehni~ke aspekte ove mre`e, ali je nijedna vladaju}a aparutura ne kontroliše. Klju~nu magistralu Interneta (okosnicu, engl. backbone), kroz koju te~e saobra}aj preko Interneta, poseduju privatna preduze}a. Svi ra~unari na Internetu me|usobno komuniciraju koriste}i Transmission Control Protokol/Internet Protocol (protokol za kontrolu prenosa/Internet protokol), skra}eno TCP/IP. Ra~unari na Internetu koriste klijent/server arhitekturu. To zna~i da udaljena server mašina obezbe|uje datoteke i servise lokalnoj klijent mašini korisnika. Softver se mo`e instalirati na klijent ra~unar kako bi se iskoristila najnovija tehnologija pristupa. Skoro svaki tip protokola koji je dostupan na Internetu dostupan je i na Webu. Internet protokoli jesu skupovi pravila koji omogu}uju komunikaciju izme|u ra~unara na Internetu. Sledi lista glavnih protokola na Webu: • E-mail (Simple Mail Transport Protocol (SMTP)) - Elektronska pošta ili e-pošta (engl. e-mail) omogu}uje korisnicima ra~unara širom sveta da razmenjuju poruke. Svaki korisnik elektronske pošte ima sopstvenu adresu poštanskog sandu~eta na koju se poruke šalju. Poruke i datoteke poslate preko elektronske pošte mogu sti}i u roku od nekoliko sekundi. Na primer, dokument koji je napravljen u Microsoft Wordu mo`e se prilo`iti uz elektronsku 3 INTERNET - neotkrivene mogu}nosti • • • • poruku, a drugi korisnik mo`e je primiti ako ima odgovaraju}i program za elektronsku poštu. Mnogi takvi programi, npr Netscape Messenger i Microsoft Outlook Express, omogu}avaju ~itanje datoteka pisanih u HTML-u koje su, u stvari, MIME tipa. Telnet (Telnet Protocol) - Telnet je program koji omogu}uje povezivanje sa ra~unarima na Internetu i upotrebu mre`nih baza podataka, kataloga, servisa za }askanje itd. Da biste to uradili morate znati adresu. Ona mo`e sadr`ati re~i (npr. Locis.loc.gov) ili brojeve (npr. 140.147.254.3). Neki servisi zahtevaju da se pove`ete sa odre|enim portom na udaljenom ra~unaru. U tom slu~aju upišite broj porta nakon Internet adrese. FTP (File Transfer Protocol) - FTP je skra}enica za File Transfer Protocol. Ovo je i program i metod kojim se prenose datoteke izme|u ra~unara. Anonimni FTP jeste opcija koja omogu}ava korisnicima da prenose datoteke sa mnogo hiljada mati~nih ra~unara na Internetu na svoj ra~unar. FTP lokacije sadr`e knjige, ~lanke, programe, igrice, ikone, muziku, multimediju, kurseve, podatke itd. Usenet (Network News Transfer Protocol (NNTP)) - Usenet News je mre`a u kojoj milioni korisnika ra~unara razmenjuju informacije o raznim temama. Glavnu razliku izme|u Usenet News i e-pošte diskusionih grupa ~ini to što se Usenet poruke nalaze na centralnim ra~unarima i korisnici se moraju povezati sa tim ra~unarima da bi pro~itali poruke poslate odre|enoj grupi. To se jasno razlikuje od distribucije e-pošte, gde poruke sti`u u elektronsko sandu~e svakog ~lana liste.Usenet je skup mašina koje razmenjuju poruke ili ~lanke iz Usenet diskusionih foruma koji se nazivaju elektronske konferencije. Administratori Useneta kontrolišu svoje lokacije i odlu~uju da li }e i koju konferenciju sponzorisati, a kojoj }e dozvoliti pristup sistemu. HTTP (HyperText Transfer Protocol) - Protokol za slanje hiperteksta. Šalje hipertekst preko mre`e. Ovo je protokol World Wide Weba. Na Webu su dostupni i mnogi drugi protokoli. Na primer, Voice over Internet Protocol (VoIP) ili Net2Phone omogu}uje korisnicima Interneta da preko Weba razgovaraju telefonom. Pristup svim ovim protokolima World Wide Web omogu}uje preko samo jednog interfejsa - modema. Više nije nu`no poznati sve ove protokole. Njih Web objedinjuje u jedan sistem. Zbog ovog svojstva, a i zbog sposobnosti Weba za rad sa multimedijom i naprednim programskim jezicima, World Wide Web predstavlja komponentu Interneta koja se najbr`e razvija. Instalacija TCP/IP Povezivanje miliona ra~unarskih mre`a na Internet ne bi bilo mogu}e bez standardnog skupa protokola. TCP/IP je protokol koji se koristi na Internetu. On kombinuje mnoge protokole, što omogu}ava komunikaciju kroz me|usobno spojene mre`e sa razli~itim hardverom i operativnim sistemima. Za povezivanje na Internet mora da se instalira TCP/IP. Windows 98 automatski povezuje TCP/IP da radi sa mre`nim adapterom ili sa Microsoft Dial-Up adapterom. TCP/IP mo`e da se instalira i naknadno, koriš}enjem opcije Network u Control Panelu. Da biste instalirali TCP/IP treba da preduzmete slede}e korake: Instalacija Dial-up adaptera i TCP/IP protokola za Windows 95/97/98 4 INTERNET - neotkrivene mogu}nosti 1. U Control Panel-u (Start -> Settings -> Control Panel) izaberite ikonu Network. 2. Ukoliko se u prozoru koji ste otvorili (Network) ne nalaze Dial-up adapter i TCP/IP, moraju se dodatno instalirati na slede}i na~in: Instalacija Dial-Up adapter-a Pritisnite Add, odaberite Adapter duplim klikom na levi taster miša. Nakon toga selektujte Microsoft u levom meniju, a u desnom Dial-up Adapter. Pritiskom na OK procedura instalacije se završava. Instalacija TCP/IP protokola Pritisnite Add, izaberite Protocol (dupli klik levim tasterom miša). U levom meniju izaberite Microsoft, a u levom TCP/IP. Potvrdite instaliranje pritiskom na OK. Nakon izvršenja gore-pomenutih instalacija, pored drugih komponenti koje se nalaze u Network-u, pojavice se i Dial-up adapter i TCP/IP protokol. Sasvim je izvesno da }e Windows posle ovog koraka zatra`i instalacioni disk. Ukoliko isti nemate, morate ga nabaviti jer bez instaliranog Dial-up adapter-a i TCP/IP protokola ne mo`ete pristupiti internet-u. Ako se vaš racunar ne nalazi u lokalnoj mre`i i ne koristi neke druge protokole, ostale komponente Network-a mo`ete (a ne morate) ukloniti procedurom Remove. Nakon instalacije, Windows ce zasigurno, zatra`iti da re-startujete ra~unar. Instalacija i podešavanje Dial-up networking-a 1. Otvorite ikonu My computer (sa desktop-a). 2. Otvorite ikonu Dial-up networking. Ako se ikona Dial-up networking ne nalazi u prozoru ili ne mo`ete da je aktivirate, morate da instalirate Dial-up networking na slede}i na~in: U Control Panel-u startujte Add/Remove software. Odaberite Windows setup stranicu i selektujte Communications (ukoliko isti nije vec odabran). Pritisnite Details i ozna~ite Dial-up networking. Pritiskom na OK tastere privodite instalaciju kraju. I za ovaj korak }e vam biti neophodni instalacioni disk ili diskete, kao i neizbe`no re-startovanje Windows-a, nakon ~ega mo`ete pristupiti slede}im fazama podešavanja. 5 INTERNET - neotkrivene mogu}nosti 3. Startujte ikonu Make new connection u Dial-Up networking-u. Windows }e vas provesti kroz tri koraka, gde treba upisati naziv konekcije (npr. neobee.net) i telefonski broj Dial-In servisa kojim se povezujete na internet (489-1111). Po završetku prethodnog koraka, pojavi}e se ikona neobee.net u prozoru Dial-up networking-a. Kliknite desnim tasterom miša na nju i izaberite opciju Properties. Ukoliko zovete iz Novog Sada ili okoline (podrucje 021), isklju~ite opciju Use country code and area code. Kliknite na Configure i isklju~ite opcije Only connect at this speed i Wait for dial tone before dialing. Kliknite na Advanced i ako je opcija dostupna, u extra settings napisite ATX3. Pritisnite OK. Ukoliko zovete sa starijih centrala, spustite brzinu konekcije na 33600 bps (v.34bis). Kontaktirajte svog prodavca modema za informacije. Pritiskom na OK vratite se do po~etnih opcija Configure i Server Type. Kliknite na Server Type i podesite parametre kao na slici: 6 INTERNET - neotkrivene mogu}nosti Kliknite na TCP/IP Settings i podesite parametre kao na slici: Kada se instalira Dial-Up Networking ili drugi mre`ni adapter, Windows 98 automatski vezuje TCP/IP za adaptere, ako je TCP/IP instaliran ranije. Ako na ra~unaru postoji više mre`nih adaptera, kod svakog je unet TCP/IP. Svaki adapter treba posebno konfigurisati vlastitim TCP/IP parametrima. Sada je sve podešeno i mo`ete da se konektujete na internet. HYPERTEXT: Kretanje po Webu Rad Weba prvenstveno se oslanja na hipertekst kao sredstvo za pretra`ivanje informacija. HyperText je dokument koji sadr`i re~i povezane sa drugim dokumentima. Ove re~i se nazivaju linkovi (veze) i korisnik ih mo`e izabrati. Hipertekstualni dokument mo`e sadr`ati veze sa mnogim dokumentima. Re~i ili slike mogu poslu`iti kao veze do drugih dokumenata, slika, video i zvu~nih zapisa. Veze moga, ali ne moraju slediti logi~an put, jer je svaku vezu programirao autor izvornog dokumenta. Najzad, WWW sadr`i kompleks virtuelnih mre`a veza izme|u mnogih dokumenata, slika, video i zvu~nih zapisa. Hipertekst za Web pravi se pomo}u HyperText Markup Language, tj. HTML?a. U tom jeziku kontrolnim kodovima postavljenim unutar teksta formatira se dokument, bira se veli~ina i oblik fonta i prave se hipertekstualne veze. Slike tako|e mogu biti deo HTML dokumenta. HTML je jezik u razvoju i svakoj novoj verziji dodaju se novi kontrolni kodovi. Standardizovanjem HTML-a upravlja World Wide Web konzorcijum predvo|en Tim Berners-Leejem. Web stranice World Wide Web sastoji se od datoteka koje se nazivaju stranice ili Web stranice, a one sadr`e podatke i veze do izvora na Internetu. Web stranice se mogu praviti aktivnoš}u korisnika. Na primer, ako posetite 7 INTERNET - neotkrivene mogu}nosti softversku mašinu za pretra`ivanje Weba (engl. Web search engine) i unesete neku klju~nu re~, napravi}e se stranica koja sadr`i rezultate vašeg upita. U stvari, rastu}i broj informacija dostupnih na Webu dobija se iz baza podataka stvaranjem privremene Web stranice kao odziva na zahtev korisnika. 8 INTERNET - neotkrivene mogu}nosti Web stranicama mo`ete pristupiti na nekoliko na~ina: 1. Unošenjem Internet adrese (direktno sti`ete na stranicu). 2. Kretanjem po stranicama uz pomo} veza (pomerate se sa jedne na drugu stranicu). 3. Kretanjem po direktorijumu teme koji je povezan sa organizovanom kolekcijom Web stranica. 4. Pomo}u pretra`iva~a (ako unesete klju~nu re~). Pretra`ivanje dokumenata na Webu: URL URL je skra}enica od Uniform Resource Locator (jedinstvena lokacija izvora). URL odre|uje Internet adresu datoteke koja se nalazi na mati~nom ra~unaru povezanom na Internet. Svaka datoteka na Internetu, bez obzira na svoj protokol, ima jedinstveni URL. Web programi koriste URL da bi dobili datoteku od mati~nog ra~unara i direktorijuma u kojem se ona nalazi. Potom se ova datoteka prikazuje na ekranu korisnika. Pomo}u Internet Domain Name Systema (DNS) URL-ovi se prevode u numeri~ke adrese. Numeri~ka adresa je pravi URL. Zbog toga što je korisnicima teško da koriste isklju~ivo numeri~ke adrese, koriste se adrese sastavljene iz brojeva i slova. Nakon prevo|enja Web server mo`e da pošalje zahtevanu stranicu Web pretra`iva~u korisnika. Anatomija URL-a Ovo je format URL-a: protokol://ra~unar/putanja/ime_datoteke Na primer, URL mati~ne stranice O["Vuk Karadzic" iz Kru{evca glasi: http://www.geocities.com/skolavuk/index.htm Struktura ovog URL-a je slede}a: 1. 2. 3. 4. 5. 6. Protokol: http Ime mati~nog ra~unara: www Ime drugog nivoa domena: geocities Ime završnog nivoa domena: com Ime direktorijuma: skolavuk Ime datoteke: index.htm Sledi spisak uobi~ajenih završnih nivoa domena: • • • • • • com edu gov mil net org - komercijalno preduze}e obrazovna institucija vladina ustanova vojna ustanova snabdeva~ mre`nim uslugama naj~eš}e neprofitabilna organizacija Osim toga, mnoga imena domena dodeljena su kako bi se prepoznale i pronašle datoteke koje se nalaze na mati~nim ra~unarima u zemljama širom sveta. Ovo se odnosi na Internet kodove zemalja koji sadr`e dva broja i koje je strandardizovala Internacionalna organizacija za standarde, kao što je standard ISO 3166. Na primer: • • • • • ch de jp uk yu - Švajcarska Nema~ka Japan Engleska Jugoslavija 9 INTERNET - neotkrivene mogu}nosti Predlo`eno je da se novi završni domeni dodaju postoje}im imenima domena. Ameri~ka vlada oformila je instituciju za dodelu imena i brojeva na Internetu (Internet Coorporation for Assigned Names and Numbers (ICANN)) koja se bavi pitanjima vezanim za imena domena. 10 INTERNET - neotkrivene mogu}nosti KAKO PRISTUPITI WORLD WIDE WEBU Web pretra`iva~i Da biste pristupili World Wode Webu morate koristiti Web pretra`iva~. Pretra`iva~ je program koji omogu}uje korisnicima da koriste World Wide Web i da se kre}u po njemu. Postoje dve vrste pretra`iva~a: 1. Grafi~ki: Tekst, slike, zvu~ni i video zapisi mogu se dobiti pomo}u programa sa grafi~kim korisni~kim interfejsom, kao što su Netscape Navigator i Internet Explorer. Ovi pretra`iva~i dostupni su i na Windows i na Mac ra~unarima. Kretanje se posti`e ukazivanjem i pritiskom mišem na osvetljene re~i i slike.Grafi~ke pretra`iva~e mo`ete besplatno preuzeti sa odgovaraju}ih Web lokacija, Netscape sa lokacije http://home.netscape.com/, a Microsoft Internet Explorer sa lokacije: http://www.microsoft.com/. Da biste koristili ove programe za pristup Webu treba da imate mre`nu vezu ili komutiranu vezu poznatiju kao SLIP ili PPP. Ova poslednja mo`e se dobiti od dobavlja~a Internet usluga. Netscape pretra`iva~ Windows pretra`iva~ 2. Tekstualni: Lynx je pretra`iva~ koji omogu}uje pristup Webu samo u tekstualnom obliku. Kretanje se vrši osvetljavanjem klju~nih re~i na ekranu tasterima sa strelicom nagore ili nadole, a zatim pritiskom na strelicu za kretanje unapred (ili na taster Enter). Ovaj pretra`iva~ dostupan je na VAX ili UNIX ra~unarima. Proširivanje pretra`iva~a: dopunski moduli (Plug-Ins) Dopunski moduli mogu se uklju~iti u Web pretra`iva~ da bi se pretra`iva~u proširile sposobnosti. Kada pretra`iva~ nai|e na sliku, zvu~ni ili video zapis, on podatke šalje drugim programima - dopunskim modulima, koji }e pokrenuti ili prikazati datoteku. Rade}i u zajednici sa dopunskim modulima pretra`iva~i omogu}uju bogato multimedijalno iskustvo. Mnoge dodatne module mo`ete dobiti besplatno. Formati datoteke koji zahtevaju dodatne module jesu MIME formati. MIME je skra}enica za Multimedia Internet Mail Extension (multimedijalni skup kodova za Internet poštu) i poma`e softveru za elektronsku poštu za rad sa binarnim (non-ASCII) datotekama-prilozima. Upotreba MIME formata proširila se na Webu. Na primer, osnovni MIME format koji upotrebljavaju Web pretra`iva~i jeste text/html sa oznakom tipa .html. Uobi~ajeni dodatni modul koji se koristi na Webu jeste Adobe Acrobat Reader. On vam omogu}uje da vidite dokumente koji su napravljeni u tzv. PDF formatu (Adobe Portable Document Format). Ovi dokumenti predstavljaju 11 INTERNET - neotkrivene mogu}nosti aplikacije u MIME formatu i oznaka tipa im je .pdf. Kada uklju~ite Acrobat Reader u pretra`iva~, on }e se pokrenuti i prikazati `eljenu datoteku ako pritisnete mišem na hyperlink sa imenom datoteke sa sufiksom .pdf. Poslednja verzija Acrobat Readera omogu}uje prikaz dokumenata u okviru pretra`iva~a. Web pretra`iva~i ~esto su standardno snabdeveni sa nekoliko dodatnih modula, posebno za prikaz multimedijalnog sadr`aja. Više dodatnih modula mo`ete na}i na Web lokacijama proizvo|a~a pretra`iva~a, na specijalnim lokacijama za preuzimanje sadr`aja sa Weba ili na Web lokacijama kompanija koje su napravile te dopunske module. Broj dodatnih modula rapidno raste. Kada ugradite dodatni modul u pretra`iva~, on }e se automatski pokrenuti kada ho}ete da pristupite tipu datoteke koji koristi. 12 INTERNET - neotkrivene mogu}nosti Više od dodatnih modula: ActiveX ActiveX je tehnologija koju je razvio Microsoft. Uz nju su vam dodatni moduli manje potrebni. ActiveX omogu}uje ugra|ivanje animiranih objekata, podataka i ra~unarskih kodova na Web stranice. Web pretra`iva~ koji podr`ava ActiveX mo`e da prika`e ve}inu podataka na Web stranici. Na primer, ActiveX omogu}uje korisnicima da vide trodimenzionalni VRML svet u Web pretra`iva~u bez upotrebe dodatnih modula za VRML. Ova tehnologija vam tako|e mo`e omogu}iti prikaz i promenu PowerPoint prezentacija unutar Web pretra`iva~a. ActiveX najbolje radi sa Microsoft Internet Explorerom. MULTIMEDIJALNI DO@IVLJA WEBA Današnji World Wide Web predstavlja kombinaciju multimedije, programskih jezika i `ive komunikacije. Pravi je izazov pratiti njegov razvoj. Sledi mali prikaz stvari na koje treba posebno obratiti pa`nju. Multimedija Web je postao medijum za emitovanje. Mo`ete da slušate zvu~ne i gledate video zapise preko Weba i u`ivo i prethodno snimljene. Na primer, mo`ete da posetite lokaciju neke organizacije za vesti i gledate isti program koji oni emituju svake ve~eri na televiziji. Nekoliko dodatnih modula vam omogu}uje to. Na primer, Appleov Quick Time Player snima datoteke sa oznakom tipa .mov i prikazuje ih kao "filmove" u malom okviru na ekranu. Quick Time datoteke mogu biti veoma velikei treba mnogo vremena da snimite ceo film pre prikaza. Problem sporog snimanja je rešen revolucionarnim razvojem sposobnosti multimedije: striming medija. U ovom slu~aju se zvu~ni i video zapisi prikazuju u toku snimanja ili striminga na vaš ra~unar. Samo malo morate da sa~ekate pre prikaza datoteke. RealPlayer dodatni moduli prikazuju striming zvu~ne i video datoteke. Ve}e datoteke kao što su intervjui i govori se dobro prikazuju sa Real Playerom. On je tako|e idealan za gledanje emisija u`ivo, konferencija, radio i TV emisija, koncerta itd. Tako|e postoji i Windows Media Player. Mnoge lokacije vam nude da birate koji }ete da koristite. Shockwave predstavlja još jedno multimedijalno iskustvo. On vam omogu}uje pravljenje i implementaciju multimedijalnog sadr`aja kombinovanjem grafike, animacije i zvuka. Zvu~ne datoteke, uklju~uju}i muziku, tako|e se mogu ~uti na Webu. Uobi~ajeno je da prilikom posete Web lokaciji ~ujete muziku u pozadini. Zvu~ne datoteke mo`ete i snimiti nezavisno od posete Web lokaciji. Web podr`ava mnoge tipove zvu~nih datoteka sa odgovaraju}im dodatnim modulima. Najnovij trend je MP4 format datoteke sa dodatnim modulima koji ga podr`avaju. Internet kamere (engl. Live cams) su još jedan vid multimedijalnog iskustva koje je dostupno na Webu. `ive i video kamere koje šalju podatke u`ivo na Web server. Ove kamere se mogu na}i na raznim lokacijama, ozbiljnim i neozbiljnim: kancelarija, vrh zgrade, lokalna scena, specijalni doga|aj itd. PROGRAMSKI JEZICI I FUNKCIJE Upotreba postoje}ih i novih programskih jezika proširila je mogu}nosti Weba.Ovo je osnovni vodi~ u uobi~ajene jezike i funkcije koji se danas koriste na Webu. 13 INTERNET - neotkrivene mogu}nosti CGI (Common Gateway Interface) se odnosi na specifikaciju pomo}u koje programi komuniciraju sa Web serverom. CGI program ili skripta je program napravljen za prihvatanje i povratak podataka koji odgovaraju CGI specifikaciji. Program mo`e biti napisan na bilo kojem jeziku uklju~uju}i C, Perl i Visual Basic Script. ~esto se upotrebljava za proces interaktivne forme na Web stranici. Na primer, mo`ete da popunite obrazac za narud`bu knjige putem Interlibrary Loan. Skript šalje informacije na odre|enu e-mail adresu u odseku Interlibrary Loan-a. ASP (Active Server Pages) je noviji tip dinami~ne Web stranice koju je napravio Microsoft. ASP su HTML stranice koje uklju~uju skriptovanje i pravljenje interaktivnih aplikacija Web servera. Skripte se pokre}u na serveru a ne na Web pretra`iva~u da bi se stvarale HTML stranice poslate pretra`iva~ima. Visual Basic i JScript (JavaScript) se ~esto koriste za skritovanje. ASP datoteke imaju oznaku tipa .asp. 14 INTERNET - neotkrivene mogu}nosti Java/Java Applets: Java je najverovatnije najpopularniji programski jezik Weba. Java je programski jezik baziran na objektima poput C++. Napravio ga je Sun Microsystems a cilj Jave je da pravi programe koji }e biti nezavisni. Javin moto je "napiši ga jednom, pokre}i ga svuda". Savršeni Java program bi trebalo podjednako dobro da radi na PC-ju, Macintoshu, Unixu itd., bez dodatnog programiranja. Ovaj cilj tek treba da se realizuje. Java se mo`e koristiti za pravljenje aplikacija za Web kao i onih koje nisu za Web. Java aplikacije bazirane na Webu su obi~no u obliku tzv. Java appleta (malih aplikacija). To su mali Java programi pozvani sa HTML stranice koji se mogu snimiti sa Web servera i pokrenuti Web pretra`iva~em koji podr`ava Javu. Nekoliko primera: vesti u`ivo, pokretne slike sa zvukom, kalkulatori, tabele i interaktivni vizuelni prikazi. Java apleti imaju tendenciju sporoga o~itavanja ali se radi na ubrzanju. JavaScript/JScript: JavaScript je programski jezik kojeg je napravio Netscape Communications. Mali programi napisani ovim jezikom su ugra|eni u HTML stranicu ili se pozivaju izvan stranice da bi pove}ali funkcionalnost stranice. Primeri JavaScripta su pokretne nalepnice, padaju}i meniji, `ivi kalendari i satovi, interakcije sa mišem. JScript je sli~an jezik, razvio ga je Microsoft i radi sa pretra`iva~em te kompanije, Internet Explorerom. XML: XML (eXtensive Markup Language) je jezik za pravljenje Web stranica koji omogu}uje dizajnerima da prave sopstvene kontrolne kodove da bi obezbedili funkcionalnost koja nije dostupna u HTML-u. XML je jezik strukture podataka i razmene i omogu}uje onima koji ga razvijaju da razdvoje formu od sadr`aja. Ovaj program po~inje sve više da se koristi. U maju 1999., me|utim, W3 konzorcijum je najavio da je HTML 4.0 promenjen u XML aplikaciju koja se zove XHTML. Ovo je bio zna~ajan pomak i za XML i za HTML. KOMUNIKACIJA U@IVO Unutar Weba postoji tekstuelna, zvu~na i video komunikacija. Ova sposobnost omogu}uje ljudima da prave konferencije i u`ivo sara|uju. Uopšteno, što je br`a Internet veza to je uspešnija komunikacija. Najjednostavniji chat program omogu}uje da više korisnika komunicira u`ivo.Internet Relay Chat (IRC), America Online˘s Instant Messenger i ICQ (I seek you) su primarni primeri ove vrste programa. Razvoj protokola poruka je u toku. Ovi protokoli bi obezbedili ekspanziju ove sposobnosti Interneta. Naprednija `iva komunikacija nudi zvu~nu i/ili video komponentu. Najpopularniji program ove vrste je CU-See Me. Još napredniji su programi koji omogu}uju `ivu saradnju (engl. real-time collaboration). Neki od primera su Microsoftov NetMeeting i Netscapeov Conference (deo Communicatora). Ovi programi sadr`e alate koji podr`avaju: • • • • • • audio: telefonski razgovor na Webu video: posmatrate publiku prenos datoteka: šalje datoteke od pošiljaoca do pošiljaoca chat: tipkanje u`ivo whiteboard: crta, obele`ava i ~uva slike na deljenom prozoru ili plo~i razmena dokumenata/aplikacija: prikazuje i koristi program na tu|em ra~unaru 15 INTERNET - neotkrivene mogu}nosti • saradnja u Web pretra`ivanju: zajedno pose}ujete Web stranice Trenutno ne postoji definisan standard koji bi trebalo da podr`avaju programi za konferenciju. 16 INTERNET - neotkrivene mogu}nosti KONCEPTI KONSTRUKCIJE WEB STRANICE Prisustvo na Internetu u vidu prezentacije trebalo bi da pocne sa idejom sta je to sto zelimo da predstavimo. U zavisnosti od ovog pitanja nadovezuje se sledece: Ko je zainteresovan za to sto zelimo da predstavimo. Ako su u pitanju deca koja vole igrice i naucnu fantastiku, strategija predstavljanja je jedna, a ako su u pitanju odrasli koji vole da citaju dnevnu stampu, strategija je druga. Ako se za temu koju predstavljamo interesuju ljudi koji nemaju puno vremena, informacije moraju kratke i jasne, ili kratak i jasan opis dugackog teksta na svetloj pozadini, jer takve tekstove posetioci stampaju. Tekst koji upisujete na web stranicu je isti kao tekst u svim drugim dokumentima. Razlika je u tome što tekst sadr`i kodove koji omogu}uju ~itanje u formatiranom obliku pomo}u vašeg omiljenog pretra`iva~a. Ove kodove morate uklju~iti na vašu stranicu da bi ona radila ali ako koristite HTML programe za ure|ivanje kao što su PageMill ili HoTMetal ne morate da pamtite kodove. Ako `elite, mo`ete napisati stranicu u programu za ure|ivanje teksta kao što je "WordPad" pa je sa~uvati kao tekstuelnu datoteku pomo}u komande Save As. Druga mogu}nost je da napišete obi~nu stranicu u Wordu ili WordPerfectu koji vam omogu}uju da sa~uvate stranicu kao HTML datoteku. Me|utim, ako razumete šta je „iza prozora” to }e vam pomo}i da razumete mogu}nosti web dizajna i pomo}i vam da rešite probleme u radu ako stvari ne izgledaju onako kako ste hteli. Mnogi ljudi ne znaju da mogu videti (i kopirati!) kodove iz drugih web stranica.Da biste videli kodove za odre|enu stranicu pritisnite mišem na View koji se nalazi na liniji menija pa izaberite stavku Source. Potom mo`ete se}i i prenositi delove koda koliko god `elite. Tako|e je dobro videti kako su drugi ljudi konstruisali svoju web stranicu. OBJAVLJIVANJE NA WEBU KORIŠ]ENJEM PROGRAMA DREAMWEAVER Program MACROMEDIA DREMAWIVER mo`ete preuzeti i instalirati na Vaš ra~unar sa internet adrese http://www.macromedia.com. Web je komunikacioni medijum sa jedinstvenim svojstvima. Kao i kod ostalih komunikacionih medijuma, va`no je da se utvrdi cilj: • koja je namena vaše Internet prezentacije, • potencijalna publika (ko su oni, šta znaju, šta treba da znaju) • tematika (koje informacije }e vaša prezentacija obuhvatiti i kako). Web se razlikuje od drugih medijuma po svojoj interaktivnosti: korisnici mogu da pritiskaju mišem na tzv. povezani tekst i slike da bi krstarili po prezentaciji po svom naho|enju, usredsre|uju}i se na sadr`aj koji njih zanima. Tako|e, Web omogu}ava da dodajete svojim stranicama slike, zvuk, video i animaciju. Pri objavljivanju Web prezentacije izdvajaju se tri faze: • • • Planiranje i dizajniranje sadr`aja Pravljenje Web lokacije Prebacivanje datoteka na Web server. Za ovaj posao od softverskih alata potrebni su vam Dreamweaver i Internet Explorer. Planiranje i dizajniranje sadr`aja 17 INTERNET - neotkrivene mogu}nosti Sadr`aj i dizajn se definišu zajedno, ali sadr`aj treba da odre|uje dizajn: vi treba da znate šta `elite da saopštite pre nego što po`elite to da predstavite. U ovoj fazi treba da razmišljate o sadr`aju prezentacije i da planirate organizovano i efikasno predstavljanje tog materijala. Pre no što po~nete da pravite stranicu razmislite o slede}em: • Zašto pravite stranicu ? • Šta `elite da ka`ete ? • Zašto }e se ljudi zaustaviti na vašoj stranici ? • Koje grafike `elite da uklju~ite ? • Koje veze `elite da uklju~ite ? • Da li imate `ivot mimo ra~unara ? 18 INTERNET - neotkrivene mogu}nosti Planiranje sadr`aja stranice Slede}a pitanja }e vam pomo}i u odre|ivanju sadr`aja. Odgovorite na njih i notirajte sve druge informacije koje mogu biti va`ne. Koja je namena vaše prezentacije? Ko ~ini vašu publiku? Šta ona zna? Šta ona treba da zna? Koju vrstu priklju~ka na internet ona poseduje? Šta `elite da publika sazna iz vaše prezentacije? Na koje podoblasti treba izdeliti sadr`aj kako bi tok informacija bio jasan, logi~an i koristan za publiku? 1. Dobra ideja je pokretac svega. Strucnaci iz Marketing predvidjaju da ce sledeci vek biti vek "ideja". 2. Budzet koji prati ostvarivanje ideje. U zavisnosti od kolicine predvidjenih sredstava efekti promocije dolaze brze ili kasnije. 3. Izrada Web prezentacije. Nadam se da ce se daljim razvojem Interneta kod nas prevazici sistem prisustva firme na internetu koji pocinje i zavrsava Web prezentacijom. 4. Kreiranje Internet medija plana, ili plana reklamiranja putem razlicitih Internet servisa. Ovaj deo promocije, ako je postojao, uglavnom se u nasim uslovima zavrsavao na prijavljivanju na pretrazivace. 5. Pracenje efekata promocije. Razlicitim alatima koji omogucavaju pracenje statistika posecenosti i korigovanjem svih online aktivnosti prema ovim rezultatima povecavaju se pozitivni efekti od promocije. Planiranje izgleda Što se ti~e efikasnog dizajna, Web prezentacije se mogu ocenjivati prema slede}im kriterijumima: jedinstvenost, preglednost i upravljivost. • Jedinstvenost postoji kada su elementi tako uklopljeni da zadovoljavaju opšti komunikacioni cilj. • Preglednost postoji kada je sadr`aj izdeljen na logi~ke, manageable podskupove. • Upravljivost postoji kada korisnici mogu da predvide gde se nalaze oblasti koje njih interesuju i kada mogu lako da stignu do njih. Preporu~ujem da kada pose}ujete druge Web prezentacije da ocenjujete njihov dizajn na osnovu prethodnih kriterijuma. Pogledajte svaku prezentaciju i kao stvaralac i kao konzument Web informacija. Jedinstvenost: Da li je jasno o ~emu }e se komunicirati? Ako nije, kako bi se mogle informacije u~initi jasnijim? Da li svi elementi prezentacije (tekst, grafika, izgled) podr`avaju isti komunikacioni cilj? Da li su delovi unutar odeljka ili stranice me|usobno dobro uklopljeni? Ako nije tako, gde "škripi" u dizajnu? Kako su delovi pojedinih odeljaka uklopljeni u prezentaciju kao celinu? Da li je ista pozadina? Da li je raspored elemenata sli~an? Da li postoje zajedni~ki grafi~ki elementi na svakoj stranici? Preglednost: Da li je podela prezentacije na podoblasti logi~na? Da li su nazivi veza dovoljno jasni tako da znate gde }e vas odvesti pre nego što mišem pritisnete na njih? Da li se materijalom unutar svake podoblasti lako upravlja? Da li mo`ete lako da uo~ite povezani tekst i slike? 19 INTERNET - neotkrivene mogu}nosti Upravljivost: • Da li mo`ete, pre nego što mišem pritisnete na vezu, da odredite šta }e biti dato na svakoj povezanoj stranici? • Kako "krstarite" unutar stranice? • Kako "krstarite" izme|u stranica prezentacije? • Da li imate izbor kada je u pitanju navigacija? Da li mo`ete da trasirate svoju putanju kroz materijal ili morate da sledite postavljenu putanju? • Da li postoji neki oblik neposredne pomo}i u slu~aju da ne mo`ete da na|ete ono što `elite? Razmišljajte prezentaciju. o svemu ovome 20 kada budete pravili svoju Web INTERNET - neotkrivene mogu}nosti PRAVLJENJE WEB PREZENTACIJE Kada osmislite sta bi trebalo da ima od sadzaja na jednom sajtu, obzirom da je konkretan sadrzaj to sto najvise privlaci ili odbija posetioce Web prezentacije, sledeci korak u formiranju kvalitetne prezentacije predstavlja odabir navigacije koja ce se protezati kroz sajt. Navigacija na sajtu sluzi posetiocu kao vodic do sadrzaja koji ga zanima. Sto je navigacija kvalitetnija posetilac ce lakse nalaziti trazene sadrzaje i cesce ce dolaziti na sajt. Objavljivanje na Webu je evoluiralo na isti na~in kao što je evoluirala obrada teksta. Nekada su korisnici u programima za obradu teksta morali da koriste specijalne kodove kada su `eleli neka specijalna formatizovanja teksta. Naprimer, da bi imali tekst ispisan kurzivom, korisnici su morali da obezbede kôd koji je saopštavao štampa~u kada da po~ne da štampa, a kada da prestane sa tom vrstom ispisa. Zatim su programi za obradu teksta postali prefinjeniji, tako da korisnici danas ne moraju da znaju specijalne kodove da bi formatizovali tekst, ve} samo na koje dugme treba da pritisnu mišem. Ve}ina Web stvaralaca koristi kodove prilikom pravljenja Web stranica, ali postoje programi koji omogu}uju da pravite Web stranice bez poznavanja tih kodova ili kontrolnih oznaka (engl. tags). Sa aspekta pretrazivaca, META tagovi pruzaju mogucnost odredjivanja opisa Web stranice kada se ona nadje u rezultatu pretrazivanja i mogucnost definisanja kljucnih reci i fraza koje opisuju sadrzaj stranice. META tagovi pruzaju mogucnost definisanja kljucnih reci i opisa kod Web stranica cija struktura je takva da ne postoji drugi nacin da neki program pronadje sta je sadrzaj stranice. U pitanju su stranice sa ramovima (frames), stranice bez teksta, stranice sa malo teksta, stranice koje u svom pocetku imaju skriptove, applete ili veliki broj definisanih tabela. . . Mnoge stranice koje vidite na Internetu napravljene su pomo}u nizova kodova napisanih koriš}enjem hipertekstualnog markerskog jezika (engl. HyperText Markup Language - HTML). Potom Web pretra`iva~i, kao što su Internet Explorer ili Netscape Navigator, interpretiraju i prikazuju te kontrolne oznake. Pretra`iva~ interpretira tekst, slike i formatizovanje. Potrebno je nekoliko datoteka da bi se prikazao sadr`aj jedne stranice. Napravljena HTML datoteka sadr`i samo kôd, a potrebne su posebne datoteke za slike, video ili animacije koje }e biti prikazane na stranici. Pošto pravite prezentaciju u Dreamweaveru, svoj rad preliminarno mo`ete da pregledate u Internet Exploreru ili Netscape Navigatoru. POKRETANJE DREAMWEAVERA Prvi korak je da prona|ete i pokrenete Dreamweaver. Kada pokrenete Dramweaver po prvi put vide}ete glavni prozor, koji se zove prozor Document, i nekoliko plutaju}ih (pomerljivih) panela, odnosno, paleta. 21 INTERNET - neotkrivene mogu}nosti Dremweaverovo radno okru`enje zajedno sa plutaju}im prozorima. Prozor Document je centar aktivnosti u Dreamweaveru. On prikazuje teku}i dokument dok ga pravite i ure|ujete. Koristi}ete prozor Document i njegovu vernu flotu panela za sve, od tipografije do animacije. Dreamweaver vam mo`e olakšati rad, bez obzira na to da li kreirate jednostavnu mati~nu stranicu ili veliku i kompleksnu prezentaciju. Ako ste koristili Dremweaver i ranije, prva razlika koju }ete primetiti jeste nova paleta alatki koja ima opcije za brzo poigravanje sa kodom i za upravljanje datotekama. Glavne komponente koje }u ovom prilikom predstaviti jesu: • • • • • • Launcher, prozor Site, paleta HTML Styles, panel Objects i panel Property LAUNCHER Launcher vam pru`a lak na~in, jednim pritiskom mišem, da otvorite neke dodatne alatke u Dreamweaveru. Pritisnite dugme Launcher i prozor ili panel }e se otvoriti. Pritisnite na isto dugme i prozor }e se zatvoriti. U radu sa Launcherom bitno je da znate i ovo: • • 22 Pritisnite dugme Direction da biste promenili orijentaciju Launchera. Ako zatvorite Launcher pa po`elite ponovo da ga otvorite, odaberite Window > Launcher iz linije menija prozora Document. ~ak i kada je prozor Launcher zatvoren, njegova mini verzija }e biti vidljiva u INTERNET - neotkrivene mogu}nosti • • donjem desnom uglu prozora Document, kao što se vidi na slici. Kada je prozor Dreamweaver otvoren, njegovo dugme Launcher izgleda kao da je "pritisnuto". Na traci Launcher, na statusnoj liniji prozora Document, sve njegove aktivne karakteristike }e biti "osvetljene". • Ako iz nekog razloga ne `elite da se Launcher pojavi na statusnoj liniji, mo`ete ga ukoniti s nje. Iz linije menija prozora Document odaberite Edit > Preferences. Pojavi}e se okvir za dijalog Preferences. Iz liste Category odaberite Status Bar. U panelu Status Bar okvira za dijalog, uklonite potvrdu iz polja Show Mini-Launcher in Status Bar. Kasnije ga uvek mo`ete ponovo odabrati. SITE Prozor Site je alatka koju koristite da biste organizovali svoje datoteke na lokalnoj prezentaciji, na disku, kao i da biste te datoteke postavili na udaljenoj Web prezentaciji. U njemu radite standardne operacije odr`avanja datoteka, kao što su pravljenje novih HTML dokumenata, otvaranje, pregledanje i premeštanje datoteka, pravljenje direktorijuma i brisanje stavki. Tako|e, mo`ete ga koristiti za prenos datoteka izme|u lokalne i udaljene Web lokacije, kao i za postavljanje navigacije prema mapi lokacije.Inicijalno, udaljena lokacija ili mapa lokacije pojavljuje se u levom oknu prozora, a lokalna lokacija u desnom oknu. Ovo mo`ete promeniti podešavanjem parametara izborom u meniju Edit stavke Preferences. 23 INTERNET - neotkrivene mogu}nosti PALETA HTML STYLES Paleta HTML Styles vam omogu}ava da pravite stilove za tekst u obi~nom HTML kodu, koji su sli~ni stilovima za tekst u programima Word ili QuarkExpress. HTML stil je definisan sa jednom ili više kontrolnih oznaka koje se primenjuju na formatizovanje teksta. Verziju HTML 4.0 definisao je još 1998. godine W3 konzorcijum, koji sada preporu~uje koriš}enje kaskadnih listova stilova (engl. CSS style sheets). Me|utim, u praksi, HTML kodiranje podr`ava ve}i broj pretra`iva~a nego kaskadne listove stilova i prili~no je rašireno me|u programerima. PANEL OBJECTS Panel Objects elemenata stranica. nudi dugmad koja su pre~ice za umetanje uobi~ajenih Za komforman rad sa ovim panelom potrebno je da znate slede}e: • Da biste prikazali ili sakrili panel Objects: 1. Iz linije menija prozora Document odaberite Window > Objects ili pritisnite Ctrl+F2 (Command+F2). Panel Objects }e se pojaviti.Panel Objects sadr`i sedam kategorija: Characters, Common, Forms, Frames, Head, Invisibles i Special. • Da biste promenili kategorije panela Objects: 1. Pritisnite na strelicu za meni na vrhu panela Objects. Pojavi}e se priru~ni meni. 2. Odaberite kategoriju iz priru~nog menija. Panel Objects }e prikazati skup koji ste odabrali. • Da biste umetnuli objekat: 1. Dok su prikazani i panel Objects i aktuelna stranica, pritisnite na ikonu za objekat koji `elite da umetnete.Ako je Dreamweaveru 24 INTERNET - neotkrivene mogu}nosti potrebno više informacija da bi umetnuo objekat, pojavi}e se okvir za dijalog. 2. Popunite okvir za dijalog ako je potrebno i pritisnite OK. Objekat }e se pojaviti u prozoru Document. 25 INTERNET - neotkrivene mogu}nosti • Da biste izabrali i prepravili objekat: 1. Ve}inu objekata mo`ete da izaberete tako što }ete ih ista}i ili pritisnuti na njih mišem. Kada je objekat izabran, pregled Property }e prikazati njegova svojstva. Da biste umetnuli odre|eni objekat pritisnite na dugme u panelu Objects. Dok u panelu Objects prelazite preko dugmi}a, za svaku alatku pojavljiva}e se savet da vas podseti šta koje dugme radi. Pritisnite na strelicu kategorija panela Objects. za meni da biste dobili priru~ni meni PANEL PROPERTY Ovaj panel vam omogu}ava da utvrdite i podesite svojstva za trenutno izabrani element stranice. (Element stranice je neki objekat ili tekst.) Elemente stranice mo`ete izabrati ili u prozoru Document ili prozoru Code Inspector. Da biste ovaj panel prikazali na ekranu ili ga sklonili sa ekrana, izaberite u meniju Window stavku Properties. Ve}ina izmena koje napravite na svojstvima neposredno se primenjuje u prozoru Document. (Za neka svojstva izmene se ne primenjuju sve dok mišem ne pritisnete izvan polja za prepravljanje tog svojstva, dok ne pritisnete taster Enter ili pritiskom na tabulator ne pre|ete na drugo svojstvo.) Sadr`aj panela se menja u zavisnosti od izabranog elementa. Da biste dobili informacije o odre|enim svojstvima, izaberite element u prozoru Document, a zatim pritisnite mišem na ikonu Help u gornjem desnom uglu panela. Panel inicijalno prikazuje naj~eš}e koriš}ena svojstva izabranog elementa. Pritisnite mišem na strelicu za proširenje u donjem desnom uglu panela da biste videli preostala svojstva elementa. (U retkim slu~ajevima mo`e se desiti da se neka re|e koriš}enja svojstva ne pojave ~ak ni u ovom proširenom prikazu; u tim slu~ajevima koristite prozore Code Inspector ili Code da biste "ru~no" videli kôd tih svojstava.) 26 INTERNET - neotkrivene mogu}nosti PRAVLJENJE LOKALNE PREZENTACIJE Da biste napravili na svom disku lokaciju za Web prezentaciju potrebno je da uradite slede}e: 1. Pokrenite Windows Explorer i u njegovom meniju File izaberite stavku New/Folder; napravite novi direktorijum za smeštaj prezentacije. Tom direktorijumu dodelite naziv www, a zatim zatvorite Explorer. 2. Pokrenite Dreamweaver i u meniju Site izaberite stavku New Site. 3. U okviru za dijalog Site Definitions izaberite u listi Category stavlu Local Info. 4. U polje Site Name upišite Moj kurs. 5. Izaberite direktorijum napravljen u koraku 1 za Local Root Folder. 6. Uklju~ite opciju Cache ukoliko `elite da ubrzare vezu ka lokaciji u cilju efikasnijeg rada. Me|utim, kada se radi o malim prezentacijama sa nekoliko stranica, veza i slika, keširanje nije neophodno. 7. Na kraju, pritisnite dugme OK. Na ekranu se pojavljuje prozor Site vaše lokacije, koji je prikazan na slede}oj slici. DODELJIVANJE NASLOVA WEB STRANICI Dok je još prozor Document otvoren treba da dodelimo stranici na ~ijem oblikovanju }emo raditi tokom ovog kursa. 27 naslov web INTERNET - neotkrivene mogu}nosti Na liniji alatki mišem pritisnimo u polje Title i upišimo naslov stranice za naš kurs. Naslov koji smo upisali ne}e se pojaviti na web stranici, ali }e se pojaviti na naslovnoj liniji prozora pretra`iva~a. 28 INTERNET - neotkrivene mogu}nosti SNIMANJE WEB STRANICE U DATOTEKU U meniju File izaberimo stavku Save i na ekranu }e se pojaviti okvir za dijalog Save As. Prona|imo direktorijum WWW na lokalnom disku pošto }emo u njemu ~uvati web stranicu. Potrebno je da dodelimo naziv datoteci sa kojom radimo. Taj naziv treba da je druga~iji od naslova same stranice; on se ne}e pojaviti na web stranici, ali }emo ga mi videti kada budemo organizovali i povezivali web datoteke. Dodelimo datoteci naziv index.html. Glavna stranica web lokacije se ~esto naziva index.html ili default.html. Ovaj princip dodeljivanja naziva olakšava posetiocima da prona|u stranicu na lokaciji. Pritisnimo dugme Save. NAPOMENA: Na~in na koji ste dodelili naziv web stranicama mo`e da uti~e na njihovo ponašanje pošto ih postavite na web lokaciju. Naime, mnogi web serveri prave razliku izme|u malih i velikih slova i ne prihvataju nazive ispisane velikim slovima, zato preporu~ujem da uvek koristite samo mala slova. FORMATIZOVANJE TEKSTA Sada ste spremni da upišete tekst na svoju web stranicu. Prva stvar koju treba da uradite je da upišete osnovne informacije o kursu, a zatim da ih formatizujete, tj. da definišete njihov izgled na ekranu. Za tu svrhu koristi}emo paletu Property Inspector, koja omogu}uje da menjamo font i formatizovanje. Ukoliko paleta nije prikazana na ekranu, u meniju Window izaberite stavku Properties. U prozoru Document, mišem ozna~imo naziv dokumenta. Na paleti Property Inspector mišem otvorimo padaju}u listu Format i izaberimo stavku Heading 1. Na webu se koriste naslovi razli~ite veli~ine. Heading 1 je najve}i, a Heading 6 je najmanji. Pritisnimo mišem negde ispod naslova, kako više ne bi bio ozna~en. Pritisnimo taster Enter i upišimo drugi red teksta, recimo, kratak opis našeg kursa. Ozna~imo mišem drugi red teksta i u listi Format izaberimo stavku Heading 3. Pritisnimo mišem na kraj našeg podnaslova (drugog reda teksta), kako više ne bi bio ozna~en. Pritisnimo taster Enter i proverimo da li je na listi 29 INTERNET - neotkrivene mogu}nosti Format postavljena stavka Paragraph, ukoliko nije, izaberimo je. Sada smo spremni za upisivanje nekog uvodnog teksta o web lokaciji. Upišimo sada tekst. 30 INTERNET - neotkrivene mogu}nosti NAPOMENA: Kada stavljate materijal kursa na web, preporu~uje se da date kratak uvod u kurs. On treba da informiše posetioce lokacije o sadr`aju kursa, potrebnom predznanju i prate}im resursima. Tako|e, pri vrhu stranice mo`ete da stavite svoje ime, elektronsku adresu itd. MENJANJE IZGLEDA TEKSTA POMO]U PROPERTY INSPECTORA Ozna~imo mišem bilo koju re~ na stranici i pritisnimo mišem na ikonu na kojoj je ispisano slovo B, koja se nalazi paleti Property Inspector. Ozna~ena re~ }e sada biti ispisana podebljanim (tzv. masnim) slovima. Da bi izgled ozna~ene re~i vratili u prethodno stanje, pritisnimo mišem ponovo na istu ikonu ili u meniju Edit izaberimo stavku Undo. Da bi promenili veli~inu slova, ozna~imo mišem neki tekst i sa padaju}e lista Size izaberimo neku od ponu|enih veli~ina. Ovog puta veli~ine su u opsegu od 1 do 7. Najmanjoj veli~ini odgovara 1, a najve}oj 7. Veli~ina 3 je standardna veli~ina slova, ili podrazumevana veli~ina. Da bi promenili boju teksta, ozna~imo mišem tekst i pritisnimo mišem na sivi kvadrat koji se nalazi desno od liste Size na paleti Property Inspector. Na ekranu se pojavljuje paleta boja, a pokaziva~ miša menja oblik u kanticu sa bojom. Izaberimo mišem `eljenu boju. Polje koje se nalazi desno od palete boja prikazuje kôd boje koji je potreban pretra`iva~u da bi verno prikazao boju koju smo izabrali. Pritisnimo pokaziva~em miša na stranicu, van teksta, kako ne bi bio više ozna~en. Prethodno ozna~en tekst se sada pojavljuje u novoj boji. NAPOMENA: Sve prethodno navedene komande za formatizovanje teksta mogu se izabrati i iz menija Text. 31 INTERNET - neotkrivene mogu}nosti RASPORE\IVANJE TEKSTA Liste i poravnavanja mogu da pomognu posetiocima web lokacije da brzo prona|u informacije koje `ele. U ovom odeljku }e biti opisano kako se prave liste i poravnava tekst. Pritisnimo mišem ispod podnaslova i upišimo slede}e: • • • • • Osnovne informacije: Plan kursa Predava~ Materijal za kurs Resursi Posle upisivanja svake stavke pritisnite taster Enter, kako bi slede}a stavka bila u novom redu. Ozna~imo mišem stavku Osnovne informacije: i na paleti Property Inspector sa liste Format izaberimo stavku Heading 3. Ozna~imo mišem sve ~etiri upisane stavke i na paleti Property Inspector pritisnimo dugme Unordered List. Stavke su sada prikazane kao nenumerisana lista. Pre|imo u novi pasus i pritiskom mišem na dugme Unordered List, isklju~imo dodeljivanje grafi~kog ornamenta stavkama liste. Upišimo sada slede}i tekst: • • • • Ve`be: Laboratorija Projekti Prezentacija Ozna~imo mišem re~ Ve`be: i na paleti Property Inspector izaberimo Heading 3. Ozna~imo mišem sve ~etiri upisane stavke i na paleti Property Inspector pritisnimo dugme Ordered List. Stavke su sada prikazane kao numerisana lista. Tekst mo`emo rasporediti i poravnavanjem. Ozna~imo mišem prva dva reda teksta (naslov i podnaslov), a zatim na paleti Property Inspector pritisnimo dugme Align Center. Naslov i podnaslov su sada centrirani. Za kraj, u meniju File izaberite stavku Save i snimite svoj rad u datoteku. DODAVANJE SLIKE Kada oblikujete kurs na Web lokaciji, slike se mogu koristiti za vizuelno predstavljanje informacija. Slike mogu da "ilustruju" obrazovni sadr`aj, koji poma`e u razumevanju i prihvatanju sadr`aja. Slike i grafika na Web stranici mogu da: • • • • Privuku pa`nju; Poboljšaju razumevanje; Poboljšaju usvajanje sadr`aja i Pripreme okru`enje za koncept povezivanja. Da biste dodali sliku Web dokumentu, potrebno je da nazna~ite gde se slika nalazi. Doda}emo sliku koja se nalazi u direktorijumu slike na lokalnom disku. 32 INTERNET - neotkrivene mogu}nosti 1. Pritisnite mišem iznad liste i pritisnite taster Enter. Tako|e, pritisnite mišem na dugme Ordered List da biste isklju~ili numeraciju stavki. 2. 2.U meniju Insert izaberite stavku Image. Na ekranu }e se pojaviti okvir za dijalog Select Image Source. 3. Koriste}i okvir za dijalog prona|ite sliku Oblnas.gif u direktorijumu kurs_slike i pritisnite dugme Select. 33 INTERNET - neotkrivene mogu}nosti NAPOMENA: Dreamweaver }e nas upozoriti da se slika ne nalazi unutar direktorijuma za kurs i predlo`iti da je iskopira u njega. Slika se pojavljuje na Web stranici. Ova slika verovatno ne}e odgovarati sadr`aju vašeg kursa, ali ona ovde slu`i samo da demonstriramo proceduru smeštanja slike na Web stranu. BROJ I VELI^INA SLIKA NA STRANICI Pravilo je jednostavno - sto je vise slika, stranica se sporije ucitava. Mnoge firme i eksperti iz ove oblasti preporucuju razlicita resenja, a mi cemo se zadrzati na najjednostavnijim i najefektnijim: Pokusajte da ne koristite sliku kao pozadinu. Ako to hocete, koristite sliku koja nije velika ( 1 - 3 kB), ili nije suvise mala (nekoliko Byte-ova). Ovo drugo mozda deluje cudno, ali sto je manja slika treba vise vremena da se popuni ekran. Na mestu gde u HTML kodu stoji informacija o slici () trebalo bi da stoji informacija o sirini i visini slike (width, height) u pikselima, npr. . U Dreamwiver-u ovu informaciju korisnik sam odredjuje kada se pri postavljanju slike odredi format slike i Dreamwiver odmah prihvata format slike koji ste upisali. Ovo je bitno zbog toga sto ako ne postoji ova informacija, browser (MSIE, Netscape), mora sam da odredi koja je velicina u pitanju, i vreme se gubi. Ako imate veliku sliku ili bilo koji drugi multimedijalni sadrzaj (animacija, film, zvuk) koji zelite da pokazete, dobro je prvo dati informaciju o tome na stranici, sa linkom do sadrzaja (i velicinom, po mogucnosti). U slucaju slika, moze se dati umanjena slika (komanda LowSrc) ili jednostavan link od umanjene slike do slike u pravoj velicini. Puno malih slika se sporo ucitavaju, jer se ucitava jedna po jedna slika, naizmenicno, dok se sve ne ucitaju. Ovo pravilo je narocito korisno za slike u kojima se nalazi samo tekst. UKLANJANJE SLIKE 34 INTERNET - neotkrivene mogu}nosti U ovom odeljku }ete nau~iti kako da koristite tabele da biste postavili slike i tekst jedne pored drugih. Da bismo to uradili potrebno je da se malo više pozabavimo radom sa tabelama. Me|utim, prvo }emo obrisati prethodno dodatu sliku da nam ne bi smetala u postavljanju tabele. 1. U prozoru Document ozna~imo mišem sliku. 2. Pritisnimo taster Delete na tastaturi. Slika nestaje sa Web stranice. 3. Da bismo poništili prethodnu operaciju, tj. povratili prvobitno stanje potrebno je da u meniju Edit izaberemo stavku Undo. Slika se ponovo pojavljuje na Web stranici. 4. Snimite svoj dosadašnji rad u datoteku. PRELIMINARNI PREGLED STRANICE Dok pravite stranicu u Dreamweaveru, ona ne}e uvek imati izgled na ekranu kao što }e biti kada se postavi na Web server. Potrebno je da povremeno preliminarno pregledate stranicu u svom pretra`iva~u (Explorer ili Netscape). Da biste preliminarno pregledali stranicu u meniju File izaberite stavku Preview in Browser, a zatim u podmeniju izaberite pretra`iva~. Pokre}e se izabrani pretra`iva~ i u~itava stranicu. Napomena: Ukoliko u listi pretra`iva~a nema definisanog ni jednog pretra`iva~a, tada }ete morati da konfigurišete Dreamweaver da uklju~i vaš omiljeni pretra`iva~. U meniju Edit izaberite stavku Preferences/Preview in Browser i definišite pretra`iva~. Sada se vratite u Dreamweaver. (Na dnu ekrana je paleta Taskbar koja prikazuje trenutno aktivne programe. Pritisnite dugme na kome piše Dreamweaver ... .) UPOTREBA PALETE HISTORY Paleta History u Dreamweaveru vam omogu}ava da se vratite na neko od prethodnih stanja u procesu pravljenja Web stranice; u suštini, ona omogu}uje "neograni~en povratak u prošlost". Ovo svojstvo je veoma pogodno ukoliko ste poprili~no odmakli u pravljenju Web stranice a onda odlu~ili da znatno izmenite dizajn, što za sobom povla~i niz promena. 35 INTERNET - neotkrivene mogu}nosti 1. Ukoliko na vašem ekranu nije prikazana ova paleta, tada je potrebno da u meniju Window izaberete stavku History. 2. Pro|ite kroz stavke palete History. Sve akcije koje ste preduzeli tokom pravljenja Web stranice su tu zabele`ene. 3. Na dnu liste, na levoj strani, nalazi se mali kliza~ koji sada mo`ete da pomerite naviše na prethodnu stavku. Time ste poništili umetanje slike na Web stranicu. 4. Prevucite kliza~ do stavke Insert Image i slika }e se ponovo pojaviti na stranici. 5. Kada završite pregled istorijata rada na stranici, pritisnite mišem na dugme Close da zatvorite paletu History. Kako se pomerite na stavku iz prošlosti, ona dobija sivu boju a stranica se vra}a na izgled koji je imala pre nego što je ta stavka (akcija) primenjena. NAPOMENA: Ukoliko se vratite jedan ili više koraka unazad, zatim primenite druge akcije, izgubi}ete kompletan istorijat ispod te ta~ke i ne}ete više mo}i da rekonstruišete te akcije. PRAVLJENJE TABELE Jedan od na~ina da rasporedite tekst i slike je da koristite tabele, tj. mre`u redova i kolona. Tabela mo`e da se koristi da se tekst i slika smeste jedno pored drugog. U ovom odeljku napravi}emo tabelu koja }e prikazivati datume i nastavne jedinice koje }e se tada predavati u okviru kursa. 1. Pritisnite mišem na dno stranice. Pritisnite taster Enter i upišite: "Nastavni program". Tako|e, mo`ete dodati semestar i kalendarsku godinu: "letnji semestar 2002. godine". 2. Ozna~ite "Nastavni program" i definišite da je stil formatiranja Heading 2. Pritisnite mišem u prozor Document da deaktivirate izbor teksta.Pritisnite taster Enter. Sada }emo ubaciti tabelu koju sa~injavaju dva reda i dve kolone. 3. U meniju Insert izaberite stavku Table. Na ekranu se pojavljuje okvir za dijalog Insert Table. 4. U polje Rows: upišite 2. 5. U polje Columns: upišite 2. Ostale parametre tabele ovog puta ne}emo menjati, tj. podešavati. 6. Pritisnite dugme Ok. Na ekranu se pojavljuje tabela sa zadatim brojem redova i kolona. Svaki pravougaonik u tabeli se ozna~ava kao }elija. 36 INTERNET - neotkrivene mogu}nosti 7. Pritisnite mišem u gornju levu }eliju tabele. Upišite "Datum predavanja". Pritisnite taster Tab da biste se prebacili u slede}u }eliju u tabeli. 8. U }eliji gde se sada nalazi kursor upišite "Tema", a potom pritisnite taster Tab da se prebacite u slede}i red. 9. U teku}oj }eliji upišite datum. Prebacite se u slede}u }eliju i upišite naziv nastavne jedinice kursa. Ukoliko je naziv duga~ak, prelom reda }e se obaviti unutar }elije. 10. Pritisnite taster Tab i tabeli }e biti dodat novi red. Upišite datum i naziv druge nastavne jedinice u tre}i red tabele. Tabela na vašoj stranici treba da ima izgled kao što je prikazano na slede}oj slici. 37 INTERNET - neotkrivene mogu}nosti UMETANJE SLIKE U TABELU U tabelu mo`ete staviti i sliku. To se radi tako što pritisnete mišem u }eliju u koju `elite da stavite sliku, a zatim prona|ete sliku koju `elite da stavite. 1. Pritisnite taster Tab da biste dodali tabeli novi red. Pritisnite mišem u desnu }eliju. 2. Ukoliko paleta Objects nije prikazana na ekranu, u meniju Window izaberite stavku Objects. 3. Pritisnite mišem na ikonu Insert Image koja se nalazi u gornjem levom uglu palete. Na ekranu se pojavljuje okvir za dijalog Select Source Image. 4. Prona|ite i ozna~ite sliku u direktorijumu kurs_slike, a zatim pritisnite dugme Select. Slika Oblnas.gif se pojavljuje u }eliji tabele. DODAVANJE NOVOG REDA Pošto ste napravili tabelu, mo`da }e biti potrebno da dodate neke informacije u sredinu tabele. Mogu}e je dodavati redove i kolone kako bi se tabela proširila. Pritisnite mišem u drugi red tabele. U meniju Modify izaberite stavku Table, a zatim Insert Row. U tabeli se pojavljuje novi red. Pritisnite mišem u drugu kolonu novododatog reda i ubacite sliku skola_logo.gif, koja se nalazi u direktorijumu kurs_slike. Slika se pojavljuje u }eliji. ]elija koja se nalazi uz sliku je prazna. Pritisnite mišem u tu }eliju i upišite naziv predavanja. BRISANJE REDA Tabela se, tako|e, mo`e podešavati uklanjanjem nepotrebnih redova i kolona. 38 INTERNET - neotkrivene mogu}nosti 1.Pritisnite mišem u drugi red tabele. U meniju Modify izaberite stavku Table, a zatim Delete Row. Red i njegov sadr`aj nestaju iz tabele. Da vas podsetim, uvek mo`ete da poništite akciju koriš}enjem komande Undo. 39 INTERNET - neotkrivene mogu}nosti MENJANJE VELI^INE KOLONE ]elija koja sadr`i sliku ima širinu ve}u nego što je potrebno. Mo`emo promeniti širinu kolone tako da odgovara dimenzijama slike, tj. da nema belina oko slike. 1. Postavimo pokaziva~ miša na grani~nu liniju izme|u kolona. Pokaziva~ dobija oblik dvostrano orijentisane strelice. 2. Pritisnimo miša i povucimo ga ka desnoj ivici tabele i otpustimo taster na mišu. Širine kolona su promenjene. 3. Postavimo pokaziva~ miša na desnu ivicu tabele. Pritisnimo miša i povucimo ga ulevo kako bi ponovo promenili veli~inu tabele. 4. Snimite svoj rad u tabelu, a potom u pretra`iva~u obavite preliminarni pregled. 5. Sada se iz pretra`iva~a vratite u Dreamweaver. NAPOMENA: Verovatno }ete prilikom preliminarnog pregleda uo~iti da kako menjate veli~inu prozora pretra`iva~a da se menja i veli~ina tabele, tako da se opet mogu pojaviti beline oko slike u }eliji tabele. Zašto se to dešava? Razlog za to je u ~injenici da se širina tabele izra`ava u procentima ukupne širine prozora pretra`iva~a, u ovom slu~aju je to 75%. Ukoliko `elite da fiksirate tabelu na odre|enu veli~inu, morate dimenzije tabele da izrazite druga~ije. DEFINISANJE FIKSNE VELI^INE TABELE Dimenzije tabele mogu biti izra`ene kao fiksne koriš}enjem piksela. Piksel je ta~ka grafi~ke slike. Ekrani se sastoje od hiljada (ili miliona) piksela koji su ure|eni u redove i kolone. Kod Web stranica preporu~uje se da širina tabele ne bude ve}a od 550 piksela. (Podrazumeva se da se radi o rezoluciji ekrana dimenzija 640x480 piksela.) 1. Pritisnite mišem na tabelu. Zatim, u donjem levom uglu prozora stranice pritisnite mišem na kontrolnu oznaku (vidi sliku) da biste izabrali celu tabelu. je HTML kontrolna oznaka koja iscrtava tabelu na ekranu, a Dreamweaver ga ovde koristi kao simbol da predstavi tabelu u celini. NAPOMENA: Verovatno ste primetili polje W koje je prikazano u Property Inspectoru. Ono ozna~ava širinu tabele koja je izra`ena u procentima. Ukoliko `elite da fiksirate veli~inu tabele, potrebno je da zadate veli~inu u pikselima. 2. U Property Inspectoru pritisnite mišem na strelicu pored polja sa znakom % i izaberite pixels. U polje W upišite 550. Ovime ste definisali širinu tabele na 550 piksela. 3. Pritisnite mišem bilo gde u prozoru Document da deaktivirate izbor tabele.Koliko prostora je potrebno za svaku kolonu? Dvokolonska tabela treba da ima u`u levu a širu desnu kolonu.Na primer, leva kolona bi mogla biti širine 150 piksela. Tada }e 40 INTERNET - neotkrivene mogu}nosti desna kolona biti širine 550 - 150 = 400 piksela. Sada }emo zadati ove širine kolona. 4. Da biste izabrali desnu kolonu tabele potrebno je da postavite pokaziva~ miša iznad te kolone, kada pokaziva~ promeni oblik u zatamnjenu strelicu usmerenu nani`e pritisnite taster na mišu. Kolona je sada izabrana (aktivna) i svaka }elija kolone je zatamnjena. 5. Proširite Property Inspector pritiskom miša na trougao u donjem desnom uglu kako biste videli širinu }elije tabele. 6. Paleta bi trebala da ima izgled prikazan na slede}oj slici. 7. Širina kolone tabele mo`e se promeniti u Property Inspectoru. 8. Pritisnite mišem na polje W na dnu palete. Upišite veli~inu od 400 piksela. 9. Izaberite levu kolonu tabele i promenite njenu širinu na 150 piksela. 10. Snimite svoj rad u datoteku i preliminarno pregledajte stranicu u pretra`iva~u. Promenite veli~inu prozora pretra`iva~a da biste se uverilida se sada veli~ina tabele ne menja. 11. Vratite se iz pretra`iva~a u Dreamweaver. FORMATIRANJE TABELE 1. Kompletirajmo tabelu formatiranjem teksta. Izaberite prvi red tabele tako što }ete postaviti pokaziva~ miša na po~etak reda, pritisnuti taster na mišu i prevu}i pokaziva~ preko svih }elija u redu. 2. Sadr`aj reda formatirajte kao Heading 3. Zadr`ite aktivnim izabrani red da biste promenili boju pozadine }elija. 3. Da biste definisali boju pozadine reda, potrebno je da mišem pritisnete na kvadrati} (u okviru koga se nalazi paleta boja) pored oznake Bg na paleti Property Inspector. 4. Sa palete boja izaberite `eljenu boju. 5. Pritisnite mišem izvan tabele da deaktivirate izbor reda. Red je sada obojen izabranom bojom. 6. Isprobajte razne opcije formatiraju}i ostatak tabele koriste}i alatke Property Inspectora. Promenite veli~inu fonta teksta, boju i stil teksta, kao i poravnavanje. 41 INTERNET - neotkrivene mogu}nosti 7. Snimite svoj rad u datoteku i obavite preliminarni pregled u pretra`iva~u, a potom se vratite u Dreamweaver. Dreamweaver ima ~ak i ugra|ene neke formate koje mo`ete koristiti za brzo podešavanje izgleda tabele. 1. Izaberite tabelu. 2. U meniju Commands izaberite stavku Format Table. 3. Na ekranu se pojavljuje okvir za dijalog Format Table sa nizom opcija. Lista opcija se pojavljuje u gornjem levom uglu okvira za dijalog. Pritisnite mišem na neku od ponu|enih stavki i u okviru koji se nalazi desno vide}ete uticaj tog stila formatiranja na izgled tabele. 4. Izaberite `eljeno formatiranje i pritisnite dugme Apply. Izabrano formatiranje se primenjuje na tabelu. 5. Kada završite sa formatiranjem pritisnite dugme OK. 6. Snimite svoj rad u datoteku. Pravljenje druge Web stranice Sada }emo napraviti drugu stranicu za Web lokaciju. Ova stranica }e biti stranica sa resursima potrebnim za kurs, kao što su ud`benici, priru~nici, uputstva za laboratorijske ve`be itd. Još jednom }u vas podsetiti na planiranje stranice. Planiranje stranice: Kada planirate Web lokaciju kursa bi}e potrebno da odlu~ite kako }ete da organizujete svaku Web stranicu. Šta }e biti postavljeno na svaku stranicu? (Na primer, nastavni program, veze ka resursima na Webu, prate}a literatura, ve`be, on-line diskusija itd.) Izdelite lokaciju na stranice kako bi pristup bio što jednostavniji. Ukoliko vaši studenti `ele da ~itaju ili štampaju samo kalendar kursa, tada oni ne}e `eleti da štampaju kompletan sadr`aj Web lokacije da bi videli samo kalendar. Tako|e, u fazi planiranja treba da razmotrite kako }e stranice me|usobno biti povezane. Vratimo se sada na pravljenje druge stranice. 1. U meniju File izaberite stavku New. Svakako }ete `eleti da novom dokumentu date nov i opisan naslov tako da vaši posetioci mogu da ga prona|u tra`e}i relevantne informacije. 2. Dodelite naslov novoj stranici. U meniju Modify izaberite stavku Page Properties i upišite naslov (tj. "Resursi za kurs" ... ). Po upisivanju pritisnite mišem na dugme OK. 3. Upišite na vrhu stranice identifikacioni broj i naziv kursa. U drugom redu stranice upišite "Resursi za kurs". 42 INTERNET - neotkrivene mogu}nosti 4. Sada upišite neke od resursa. 5. Formatirajte sadr`aj stranice koriste}i opcije palete Property Inspector. 6. Snimite svoj rad u datoteku. Dodelite dokumentu naziv resursi.html i snimite ga u direktorijum www . 43 INTERNET - neotkrivene mogu}nosti Pravljenje veze Pre nego isplanirate što pristupimo pravljenju veza, potrebno je da ih dobro Planiranje veza: Kako }e stranice me|usobno biti povezane? Kada planirate Web lokaciju kursa bi}e potrebno da odlu~ite kako da organizujete veze izme|u svih stranica. Prakti~no je da veze ka drugim stranicama postavite na vrhu i dnu svake stranice. Tako|e, svaka stranica treba da bude povezana sa vašom mati~nom stranicom (index.html). Pošto imamo dve Web stranice mo`emo da ih pove`emo. Poveza}emo stranicu resursi.html sa glavnom stranicom index.html. U Dreamweaveru pre|imo na stranicu index.html (za to koristimo meni Window). Na toj stranici ozna~imo nenumerisani tekst: Resursi da bi ga koristili kao vezu /engl. link).Koristi}emo Property Inspector da pravimo vezu. Ukoliko ne vidite na ekranu pomenutu paletu, u meniju Window izaberite stavku Properties i paleta }e se pojaviti u prednjem planu. Na paleti Property Inspector pritisnite mišem na ikonu Browse for File (vidi slede}u sliku). Na ekranu se pojavljuje okvir za dijalog Select HTML File. Koriste}i ovaj okvir za dijalog prona|ite i izaberite datoteku resursi.html. Pritisnite mišem na dugme Select. Prethodno izabrani tekst je podvu~en i obojen je bojom koju ste izabrali. Na paleti Property Inspector polje Link o~itava "resursi.html". Pritisnite mišem na prozor Document da deaktivirate vezu. Pravljenje veze ka stranici koja se nalazi negde na Webu Napravi}emo sada vezu ka mati~noj (engl. home) stranici CET-ove Web lokacije kako bi posetioci mogli lako da pristupe resursima. Pošto se CET-ova mati~na strana nalazi na Webu, mora}emo da damo punu ili apsolutnu adresu da bi napravili vezu (tj. da}emo tzv. URL - Uniform Resource Locator). Tako|e, mo`emo na isti na~in dodati veze ka drugim stranicama na Webu. 1. Postavimo pokaziva~ miša na dno Web stranice, pritisnimo taster Enter i upišimo tekst koji }emo koristiti kao vezu: "Posetite školu ra~unara CET". 2. Ozna~ite mišem taj tekst. Da biste definisali vezu ka CET-ovoj mati~noj stranici, potrebno je da znate njenu adresu: http://www.cet.co.yu/. 3. Na paleti Property Inspector upišite u polje Link adresu http://www.cet.co.yu/ i pritisnite taster Enter. Tekst " Posetite školu 44 INTERNET - neotkrivene mogu}nosti ra~unara CET" postaje veza. (Ista tehnika se koristi ukoliko `elite da dodate vezu ka bilo kojoj stranici na Webu.) Napomena: Kada dodajete vezu, mo`da }ete po`eleti da uklju~ite kratak opis veze, tj. napomenu zašto je bitna i uka`ete na odgovaraju}e odeljke lokacije. 45 INTERNET - neotkrivene mogu}nosti Da biste proverili da li veza radi kako treba, morate da pogledate stranicu u pretra`iva~u. 4. Snimite svoj rad u datoteku i pregledajte ga u pretra`iva~u. 5. Dok ste u pretra`iva~u proverite vezu. Pritisnite mišem na vezu ka resursima. Veza se brzo pojavljuje u aktivnoj boji, a zatim se pojavljuje stranica resursi.html. 6. Pritisnite mišem na dugme Back. Veza ka resursima pojavljuje se u boji koju smo izabrali da ozna~ava pose}ene stranice. 7. Testirajte preostale veze. Ukoliko veza ne radi, ponovite postupak iz ovog odeljka. 8. Vratite se u Dreamweaver da biste dodali još neke stvari svojim stranicama. Pravljenje veze unutar stranice Veze se mogu koristiti za navigaciju u okviru stranice. Pravljenjem liste sa sadr`ajem na vrhu stranice, a zatim povezuju}i je sa drugim odeljcima na stranici omogu}ujete direktnu navigaciju u okviru stranice. Na prvoj stranici koju smo ranije napravili nenumerisana lista je dodata na vrh te stranice. Sada }emo napraviti vezu od stavke "Plan kursa" u nenumerisanoj listi ka odeljku "Nastavni program predmeta" koji se nalazi ni`e na stranici. Pre nego što mo`e veza da bude napravljena u okviru stranice, ciljni deo veze treba da bude napravljen. To se naziva sidro. Na ovoj stranici, sidro }e biti odeljak "Nastavni program predmeta" koji se nalazi u donjem delu stranice. Ni`e na stranici koristi}emo Nastavni program predmeta kao "sidro". Za po~etak, napravi}emo prvo sidro. 1. Pre|imo na deo stranice koji sadr`i tabelu nastavnog programa. Pritisnite mišem na kraj reda "Nastavni program predmeta". 2. U meniju Insert izaberite stavku Invisible Tags, a iz podmenija stavku Named Anchor. 3. U okviru za dijalog upišite naziv za sidro, tj. Nast i pritisnite dugme OK. Ukoliko se ne pojavi `uti simbol sidra u meniju View izaberite stavku Visual Aids, a iz podmenija stavku Invisible Elements. 4. Sada }emo napraviti vezu od vrha stranice ka odeljku Nastavni program predmeta. 5. Na vrhu stranice ozna~imo u nenumerisanoj listi tekst "Plan kursa" da bi ga koristili kao vezu. 6. Na paleti Property Inspector pritisnimo mišem na ikonu Point-to-File (koja se nalazi levo od polja Link) i prevucimo je na simbol sidra nastavnog programa. 46 INTERNET - neotkrivene mogu}nosti 7. Kada otpustimo taster na mišu, oznaka #Nast pojavljuje se u polju veze. Stavka "Plan kursa" je sada veza i podvu~ena je i obojena drugom bojom. Oblik koji ovaj tip veze koristi je druga~iji od standardne veze. U polju veze pojavljuje se znak # pored naziva sidra. Znak # ozna~ava da je to veza ka sidru na Web stranici. Veza ka vrhu stranice Kada dodate mnoštvo informacija na stranicu, ona postaje prili~no duga~ka i komplikovano je kreatati se kroz njen sadr`aj. Da bi se to prevazišlo mogu se dodati navigacione veze kako bi se korisniku omogu}io direktan povratak na vrh stranice. U ovom primeru napravi}emo koriste}i jednu klju~nu re~ HTML-a (top) koja }e prebacivati korisnika na vrh postoje}e stranice. Sidro ne mora da se koristi pošto koristimo ugra|eno sidro. Pritisnimo mišem na dno stranice, upišimo tekst "Vrh stranice" i ozna~imo ga. Na paleti Property Inspector pritisnimo mišem u polje Link i upišimo kao vezu oznaku #top. Snimimo rad u datoteku i preliminarno pregledajmo u pretra`iva~u. Testirajmo veze. Pravljenje podno`ja stranice Na ve}ini Web lokacija informacije za kontakt su stavljene u podno`je (engl. footer; u klasi~nom štamparstvu to se zove donja `iva kolona) stranice. Podno`je posetiocima pru`a informacije o izvoru stranice, uklju~uju}i informaciju o dizajneru lokacije. Ovo daje dodatnu verodostojnost informacijama koje su stavljene na Web stranice.Tako|e, nalazi se i informacija o li~nosti koju posetioci lokacije mogu kontaktirati ukoliko ne mogu da prona|u na lokaciji ono što su tra`ili. Podno`je, tako|e, sadr`i datum poslednjeg a`uriranja stranice, što omogu}uje posetiocu da zaklju~i koliko su informacije aktuelne. 47 INTERNET - neotkrivene mogu}nosti U ovom primeru napravi}emo podno`je za stranicu index.html koje }e imati oblik prikazan na slede}oj slici. Prva stvar koju }emo dodati podno`je od ostatka stranice. bi}e horizontalna linija da bi razdvojili 1. U Dreamweaveru spustimo se do dna stranice index.html i pritisnimo mišem, a zatim pritisnimo taster Enter da bi napravili novi prazan red. 2. U meniju Insert izaberimo stavku Horizontal Rule. Ozna~ena horizontalna linija se pojavljuje na stranici. 3. Pritisnimo mišem na kraj horizontalne linije, a potom pritisnimo taster Enter. Pokaziva~ miša se sada pojavljuje u prvom redu podno`ja. 4. Sada }emo dodati odre|ene informacije da bi kompletirali stranicu. Upišite prvo svoje ime. 5. Da biste redove teksta u podno`ju razdvojili za po jedan prazan red dr`ite pritisnut taster Shift i pritisnite taster Enter. Dr`e}i pritisnut taster Shift ubacuje se kontrolni znak za prekid linije umesto znaka za završetak pasusa. 6. Upišite elektronsku adresu i telefonski broj, a razdvojite ih sa znakom ; ili nekim drugim znakom interpunkcije. Po upisivanju pritisnite istovremeno tastere Shift i Enter. 7. Upišite naziv odseka i škole, a potom pritisnite istovremeno tastere Shift i Enter. 8. Upišite tekst "Datum poslednje izmene:" i teku}i datum. Dodavanje veze za elektronsku adresu Napravi}emo vezu za sopstvenu elektronsku adresu, tako da posetioci mogu da pritisnu mišem na nju i pošalju vam poštu. Ovo je zgodno svojstvo, ali mo`da ne}e funkcionisati kod svakog pretra`iva~a. Uklju~uji}i vezu za poštu na svojoj stranici pru`ate mogu}nost svojim u~enicima i posetiocima lokacije da vas kontaktiraju ili pošalju povratnu informaciju. Pre|imo na posao. 1. Ozna~ite mišem svoju elektronsku adresu. 2. Na paleti Property Inspector u polje Link upišite slede}e: mailto: [email protected], odnosno, adresu svoje e-pošte. 3. Pritisnite taster Enter i vaša adresa }e se pojaviti kao veza. 48 INTERNET - neotkrivene mogu}nosti 4. Snimite svoj rad u datoteku i u pretra`iva~u testirajte vezu ka svojoj elektronskoj adresi. Ukoliko veza ka elektronskoj adresi ne radi, ponovite prethodno izlo`enu proceduru. Proverite informaciju koju ste upisali u polje Link. Ukoliko i posle ovoga veza ne radi, mo`da vaš Web pretra`iva~ nije konfigurisan da šalje e-poštu. Kopiranje podno`ja na drugu stranicu Da biste obezbedili konzistentnost Web lokacije i kontrolu posetiocima treba da uklju~ite podno`je na svaku stranicu lokacije. Umesto da pravite podno`je na svakoj stranici ponaosob, mo`ete ga kopirati sa prve stranice na ostale. 1. 2. 3. 4. Vratite se u Dreamweaver. Ozna~ite mišem horizontalnu liniju i celo podno`je. U meniju Edit izaberite stavku Copy. Pre|ite na stranicu resursi.html i pritisnite mišem na dno stranice. U meniju Edit izaberite stavku Paste. Podno`je se pojavljuje na stranici resursi.html. Napomena: Svrha upisivanja informacije o poslednjem a`uriranju stanja na stranici je da se posetiocima omogu}i uvid koliko su informacije na stranici aktuelne. Taj datum }e varirati od stranice do stranice, u zavisnosti od prirode sadr`aja tih stranica. 5. Snimite svoj rad u datoteku. Veza ka mati~noj stranici Web lokacije Da biste posetiocima obezbedili ve}u kontrolu, potrebno je da navigaciju izme|u stranica u~inite što prostijom i direktnijom. Jedan od na~ina da to ostvarite je da pove`ete svaku od podr`anih stranica sa mati~nom stranicom. 49 INTERNET - neotkrivene mogu}nosti U ovom odeljku poveza}emo stranicu resursi.html sa stranicom index.html. 1. U prozoru Document u kome se nalazi stranica resursi.html, ozna~ite u podno`ju stavku Odsek. 2. Na paleti Property Inspector, u polju Link upišite index.html i pritisnite taster Enter. Naziv odseka se sada pojavljuje kao veza. 3. Snimite svoj rad u datoteku i testirajte vezu u pretra`iva~u. Promena boje teksta i pozadine U ovom odeljku pokaza}u kako da podesite standardnu boju za tekst, kao i za pozadinu i veze. Ovo se radi koriš}enjem opcija okvira za dijalog Page Properties, koji smo ranije ve} koristili kod dodeljivanja naslova stranici. 1. Prebacite se iz pretra`iva~a u Dreamweaver i to na stranicu index.html. 2. U meniju Modify izaberite stavku Page Properties. Na ekranu se pojavljuje okvir za dijalog Page Properties. 3. Da biste promenili boju teksta pritisnite mišem na kvadrati} pored polja Text (vidi sliku). Pojavljuje se paleta boja, a pokaziva~ miša menja oblik u pipetu (engl. Eye dropper). 4. Pipetom izaberite `eljenu boju za tekst. 5. Da biste promenili boju pozadine, pritisnite mišem na kvadrati} pored polja Background 6. Pipetom izaberite `eljenu boju pozadine. Tako|e, mo`ete promeniti boju veza, aktivnih veza i pose}enih veza. Veza na koju korisnik pritisne mišem postaje u tom trenutku aktivna veza. Promena boje omogu}uje korisniku vizuelni pokazatelj da je pretra`iva~ prihvatio komandu. Pose}ena veza je veza koju je korisnik ve} koristio. Promena boje obezbe|uje posetiocu (korisniku) vizuelni podsetnik da je ve} posetio te povezane stranice. Napomena: Obojen ili podvu~en tekst mo`e biti problemati~an za veze. Izaberite svoju šemu boja tako da se veze razlikuju od ostatka teksta. Tako|e, tekst i veze treba da se razlikuju od pozadine zbog ~itljivosti. 7. Upotrebite procedure iz koraka 3 i 4 da promenite boju veza, aktivnih veza i pose}enih veza. 50 INTERNET - neotkrivene mogu}nosti 8. Kada ste izabrali `eljeni tekst i boju veze, pritisnite mišem na dugme Apply da biste videli promene. Tekst i pozadina stranice }e se pojaviti u bojama koje ste izabrali. 9. Zadr`ite otvorenim okvir za dijalog na ekranu da biste napravili potrebne izmene boja ili pritisnite na dugme OK da prihvatite boje koje ste izabrali. Ukoliko ste promenili boju nekog teksta koriste}i paletu Property Inspector, te promene }e nadvladati opšte postavke boja za stranicu. 10. Snimite svoj rad u datoteku. Definisanje šeme boja za stranicu Ukoliko nemate poverenja u izbor sopstvene kombinacije boja za Web stranice, oslonite se na Dreamweaverov skup unapred definisanih šema boja koje koriste tzv. Web-sigurne boje, tj. boje koje }e mo}i da se pojavi u istom tonalitetu na svim tipovima ra~unarskih platformi i pretra`iva~ima. Napomena: Boje pozadine ostavljaju najbolji utisak kada se opa`aju kao nešto što stvara kontrast. Hladnije boje, kao što su tamno plava i zelena, imaju isti efekat. Toplije boje, kao što su crvena i `uta bolje se opa`aju kada su naspram neke hladnije, zato je pogodno koristiti ih za informacije koje se postavljaju preko pozadine. Kada birate boje, vodite ra~una o jednostavnosti. Suviše boja mo`e dovesti do konfuzije i izazvati iritaciju. 1. U meniju Commands izaberite stavku Set Color Scheme ... . Na ekranu }e se pojaviti okvir za dijalog Set Color Scheme Command. 2. Sa liste Background izaberite boju pozadine, a zatim izaberite kombinaciju boja za tekst i veze sa liste Text and Links. 3. Uzorak šeme boja pojavi}e se u oknu koje se nalazi na desnoj strani okvira za dijalog. Kada izaberete `eljenu šemu boja, pritisnite mišem na dugme OK da biste je primenili na stranicu. Dodavanje Dreamweaveru objekata tipa Flash 51 INTERNET - neotkrivene mogu}nosti Lako mo`ete posti}i specijalne efekte koriste}i Flashovu dugmad i animacije. Pošto je Flashova grafika vektorska, ona je veoma mala po veli~ini. Usled toga, ta grafika se brzo u~itava u korisnikov pretra`iva~. Dodavanje Flashove dugmadi Flashova dugmad imaju nekoliko stanja u zavisnosti od polo`aja pokaziva~a miša u odnosu na njih i od toga da li je pritisnut taster na mišu. Prvo stanje je izgled koji ima dugme kada pokaziva~ miša nije na njemu. Drugo stanje se pojavljuje kada je pokaziva~ miša na dugmetu ali nije pritisnut taster na mišu. Tre}e stanje se pojavljuje kada je pokaziva~ miša na dugmetu i istovremeno pritisnut taster na mišu. U Dreamweaveru mo`ete napraviti i odr`avati Flashovu dugmad koriste}i raspolo`ivi skup stilova za dugmad. Ve}ina atributa dugmeta su izmenljivi. Prvo }emo napraviti dugme, a zatim }emo ga modifikovati. Da bismo napravili Flashovo dugme potrebno je da uradite slede}e: U datoteci koju u ovoj ve`bi koristimo, index.htm, postavimo ta~ku umetanja ispod slike u centru prozora Document. Na panelu Objects/Common izaberimo mišem ikonu Flash Button. Na ekranu se pojavljuje okvir za dijalog Insert Flash Button. Uradite sada slede}e promene: • U pomo}nom meniju Style izaberite stavku Beveled Rect-Blue. • U polju za tekst Button Text upišite Povratak nazad. • U pomo}nom meniju Font izaberite font Verdana. • U polju za tekst Size upišite 12. 52 INTERNET - neotkrivene mogu}nosti Pritisnite mišem na kvadrati} pored polja Bg Color. Na ekranu se pojavljuje paleta boja. Koriste}i alatku u obliku pipete izaberite osnovnu boju dugmeta. U zavisnosti od boje koju ste izabrali, u polju Bg Color pojavi}e se znak # i do njega numeri~ki kôd izabrane boje. U polje za tekst Save As upišite Povratak.swf i pritisnite dugme OK. Okvir za dijalog Insert Flash Button se zatvara. Na paleti Property Inspector pritisnite mišem na dugme Play. Dugme se sada nalazi u prvom stanju. U prozoru Document pre|ite pokaziva~em miša preko dugmeta. Dugme u trenutku prelaska pokaziva~a preko njega menja boju, tj. menja svoje stanje. Dok je pokaziva~ miša na dugmetu , pritisnite taster na mišu. Dugme opet menja boju i sada je u tre}em stanju. Snimite svoj rad u datoteku i pregledajte stranicu u pretra`iva~u. Pomeranjem pokaziva~a preko dugmeta i pritiskom na taster na mišu, dugme menja stanja kao što je menjalo stanja u Dreamweaveru. 53 INTERNET - neotkrivene mogu}nosti Da biste izmenili Flashovo dugme potrebno je da uradite slede}e: 1. U prozoru Document dva puta pritisnite mišem na Flashovo dugme. Na ekranu }e se pojaviti okvir za dijalog Insert Flash Button. 2. Ukoliko se okvir za dijalog ne pojavi, pritisnite mišem na Stop na paleti Property Inspector, a zatim dva puta mišem pritisnite na Flashovo dugme ponovo. 3. Podesite `eljene opcije. Na primer, promenite font u Arial. 4. Pritisnite mišem na dugme Apply da biste videli promene. 5. Pritisnite mišem na dugme OK kada završite. Dodavanje Flashovih animacija Svom dokumentu mo`ete lako dodati Flash animacije, skoro kao što dodajete sliku. Naravno, animacije treba da su ve} pripremljene. Mo`ete prevla~enjem ru~ica promeniti veli~inu animacije da odgovara vašem raspolo`ivom prostoru. Za razliku od Flash dugmadi, u Dreamweaveru ne mo`ete direktno praviti animacije. Da biste dodali Flash animaciju potrebno je da uradite slede}e: 1. Postavite ta~ku umetanja ispod Flash dugmeta. Ukoliko ta~ka umetanja nije centrirana, pritisnite mišem na dugme Center na paleti Property Inspector. Ta~ka umetanja je sada centrirana na stranici. Slede}i objekat koji dodate stranici bi}e centriran. 2. Na panelu Assets pritisnite Flash. 3. Izaberite svoju animaciju, a zatim pritisnite Insert. Flash animacija je smeštena na stranicu. 4. Na paleti Property Inspector izaberite Loop i Autoplay. Pritisnite Play da biste videli animaciju u Dreamweaveru. 5. Snimite rad u datoteku i pregledajte u pretra`iva~u. Autoplay izaziva da Flash animacija po~inje da se izvršava ~im se stranica u~ita u pretra`iva~. Animacija se ponavlja, tj. vrti u petlji, zato što je definisano svojstvo Loop u Dreamweaveru. Napomena: Uvek proverite da li ste izabrali datoteku tipa SWF kada ubacujete Flash animaciju. Nemojte da ubacujete datoteke tipa FLA ili SWT, zato što se one ne}e pojaviti u pretra`iva~u. 54 INTERNET - neotkrivene mogu}nosti Koriš}enje zvuka u Dreamweaveru Zvuk mo`ete da uklju~ite na stranicu u Dreamweaveru koriš}enjem objekta Plugin, koji se nalazi na paleti Objects. Potom }e posredstvom pripadaju}eg okvira za dijalog od vas biti zatra`eno da saopštite o kojoj zvu~noj datoteci se radi. Simbol Plug-In }e biti umetnut u dokument. Ovaj simbol se ne}e prikazivati kada budete puštali datoteku u pretra`iva~u. Simbol mo`ete postaviti bilo gde unutar dokumenta, slišno kao što radite kada je u pitanju slika. Plug-inovi su softverski moduli koje pretra`iva~i koriste da bi mogli da opslu`uju razli~ite vrste datoteka. Testirajte stranicu i uo~ite da }e se niz varijanti audio kontrolera pojaviti na stranici. U ovom primeru, koristi se skra}ena verzija kontrolera. Levo dugme kontroliše ja~inu zvuka, a desno dugme je dugme za reprodukciju i pauzu. Koriš}enje parametara: eliminisanje kontrolera sa ekrana Na mnogim stranicama ne `elite da kontroler bude vidljiv. Na primer, sigurno u pri~i ne `elite da kontroler bude vidljiv, `elite samo da po~ne reprodukovanje melodije kada se pristupi stranici. Da biste upravljali pojavljivanjem kontrolera i drugim stvarima koje se ti~u zvuka, softverski moduli koriste parametre. Da biste koristili parametre u Dreamweaveru, izaberite softverski modul i pogledajte okvir za dijalog Parameters. 55 INTERNET - neotkrivene mogu}nosti Upišite svaki parametar u pripadaju}e polje. Koristite dugmad sa simbolima + i – da pre|ete na slede}i parametar, odnosno, da se vratite na prethodni parametar. Na prethodnoj slici, parametar Controller je postavljen na vrednost False. Za ve}inu korisnika to je jedini parametar koji treba da podese. Ova vrednost parametra definiše da je kontroler nevidljiv. Budite obazrivi prilikom upisivanja parametara i njihovih vrednosti. Ukoliko nešto pogrešno upišete, mo`e se desiti da se zvuk uopšte ne reprodukuje. Vodite ra~una da ne napravite slovne greške kod naziva parametara i njihovih vrednosti. Za one koji su radoznali dajemo tabelu sa vrednostima i opisom nekoliko parametara. Parametar Vrednost Opis controller true/false Postavite vrednost True da biste isklju~ili softverski modul za QuickTime. Koristite ovo da biste izbegli prikazivanje kontrolera. hidden true/false Odre|uje da li }e komande kontrolera biti vidljive kada se bude prikazivala stranica. autoplay true/false Odre|uje da li }e po~eti reprodukcija zvuka ~im se u~ita. Podrazumevana vrednost je True, tako da u mnogim slu~ajevima ne morate da definišete ovaj parametar. volume 0 - 100 Procentualna vrednost ja~ine zvuka koju sistem koristi. loop true/false/ Odre|uje da li }e se reprodukcija zvu~nog broj zapisa kontinualno ponavljati, tj. „vrteti” u petlji. height and Broj piksela Definiše veli~inu oblasti koju zahvata width kontroler kada je vidljiv. controls Console/ Definiše tip kontrolera, kao i da li je Smallconsole/ vidljiv ili ne. true/false 56 INTERNET - neotkrivene mogu}nosti Parametri i html Ponekad je lakše direktno u html-u podešavati parametre. U Dreamweaveru, pritisnite taster F10 da bi se prozor sa html-om pojavio u prvom planu ili prepravite kontrolnu oznaku , pritisnite mišem na Plug-In i u meniju Modify izaberite stavku Quick Tag Edit. Na ekranu }e se sada pojaviti samo kontrolna oznaka u prozoru, tako da mo`ete da je prepravite. U primeru prikazanom na slede}oj slici radi se o zvu~noj datoteci demo.mp3, a kontroler je nevidljiv. Pravljenje Web stranice od Wordovog dokumenta Prilikom pripreme Web prezentacije, autori ~esto kao osnovu koriste postoje}e dokumente. Mo`ete u Wordu dokument koji je u njegovom izvornom formatu snimiti kao HTML datoteku, a zatim u~itati u Dreamweaver i doraditi za potrebe Web prezentacije. 1. Pokrenite Microsoft Word. 2. U meniju File izaberite stavku Open. Prona|ite `eljeni dokument i pritisnite mišem na dugme Open. 3. Kada je dokument u~itan u Word, u meniju File izaberite stavku Save As Web Page da biste ga snimili kao HTML datoteku. Dodelite datoteci naziv i pritisnite mišem na dugme Save. 4. Napustite Word i pokrenite Dreamweaver. U meniju File izaberite stavku Open. Pomo}u Okvira za dijalog Open prona|ite dokument koji ste malopre snimili u HTML formatu. Pritisnite mišem na dugme OK. Wordov dokument se u Dreamweaveru pojavljuje na novoj stranici. Stranica se sada mo`e ure|ivati i formatirati kao Web stranica. Me|utim, mo`e se desiti da do|e do gubitka nekih atributa formatiranja prilikom konverzije iz Word formata u Dreamweaverov format. Na primer, svaki tabulator u vašem dokumentu bi}e ignorisan. Savet: Ukoliko volite da koristite tabulatore u Wordu, pretvorite tabulatore u tabele dok ste u Wordu, pre nego što dokument snimite u HTML formatu. 57 INTERNET - neotkrivene mogu}nosti Prema tome, dok ste u Wordu uradite slede}e: 1. Ozna~ite pasuse koriste}i tabulator. 2. U meniju Table izaberite stavku Convert Text to Table ... . 3. Pojavljuje se okvir za dijalog Conert Text to Table. Ukoliko je broj kolona ta~an, pritisnite mišem na OK. Potom mo`ete sajta. u Dreamweaveru nastaviti dalju doradu dokumenta za potrebe Snimite svoj rad u datoteku i u pretra`iva~u pregledajte stranice Prebacivanje datoteka na Web server Završili smo drugu fazu u publikovanju Web sadr`aja i sada smo spremni za tre}u fazu: prebacivanje datoteka na Web server. U prethodnoj fazi smo pregledali stranice na lokalnom disku koriste}i pretra`iva~ da bi proverili kako one izgledaju na Webu. U ovoj fazi prebaci}emo kopije Web datoteka na Web server, tj. ra~unar koji skladišti Web datoteke, tako da i drugi mogu da vide naše stranice na Webu. Da bi smestili datoteke na Web, potrebno je da imamo obezbe|en "magacinski prostor", tj. nalog na Web serveru. Taj server mo`e biti na fakultetu, školi ili nekoj organizaciji. Ovde }emo koristiti fiktivni Web server NASTAVA koji je "fizi~ki" smešten u CET-u. Prvi korak kod prebacivanja datoteka je da saopštite Dreamweaveru gde se one nalaze. U prvoj lekciji ovog kursa definisali smo mesto lokalne prezentacije kursa, tj. direktorijum www, kao i niz nekih opcija. Sada }e biti potrebno da definišemo još neke parametre koji su bitni za prebacivanje datoteka. 1. Pokrenimo Dreamweaver. 2. U meniju Site izaberimo stavku Define Sites. Na ekranu se pojavljuje okvir za dijalog Define Sites. 3. Ozna~imo u listi stavku Moj kurs i pritisnimo dugme Edit. Na ekranu se pojavljuje okvir za dijalog Site Definition for Moj kurs. 4. U listi Category izaberimo stavku Remote Info. Ova stavka se odnosi na nalog na Web serveru. To je mesto gde }emo kopiranjem prebaciti datoteke. 5. U padaju}em meniju Access izaberimo stavku FTP. FTP je skra}enica od File Transfer Protocol; posmatrajte to kao jezik kojim se dva ra~unara sporazumevaju da bi mogli da obave prebacivanje datoteka. Napomena: Ovde }e biti navedeni fiktivni FTP i Web server, nalog i lozinka. 6. U polje FTP Host upišite adresu servera: nastava.cet.co.yu. 7. U polje Host Directory upišite: /www/nastava/kursevi/Obliknastave/netid/. Ovde je "netid" deo vaše identifikacije na sistemu kome pristupate. 8. U polje Login upišite korisni~ko ime koje ste dogovorili sa administratorom servera. 9. U polje Password upišite lozinku koju ste dogovorili sa administratorom servera. 10. Na kraju, pritisnite dugme OK. 58 INTERNET - neotkrivene mogu}nosti 11. Dreamweaver analizira sadr`aj lokalne prezentacije i otvara se prozor Site - Moj kurs. Lokalne datoteke se nalaze na desnoj strani a datoteke na serveru bi}e na levoj strani kada se pove`emo sa serverom. 12. Pritisnimo dugme Connect na paleti alatki prozora Site. 13. Na upišite ekranu se pojavljuje okvir za pristupnu lozinku, a dijalog zatim i u polje Password pritisnite OK. Desna strana prozora Site prikazuje datoteke iz direktorijuma www na lokalnom disku. Leva strana prozora prikazuje datoteke na Web serveru, trenutno tamo nema ništa, ali }e se to ubrzo promeniti. Tokom rada mi smo sve datoteke smestili u direktorijum www na lokalnom disku, a Dreamweaver je slike koje smo ubacivali povezao sa HTML dokumentima na osnovu relativnog polo`aja tih datoteka. Da bi stranice funkcionisale kako treba, potrebno je da odr`imo istu strukturu prezentacije kada datoteke smestimo na server. Sada }emo prebaciti sve datoteke iz direktorijuma www u direktorijum na serveru NASTAVA. 14. U prozoru Site ozna~imo sve datoteke u direktorijumu www. Da bi ozna~ili više datoteka potrebno je da dr`imo pritisnut taster Ctrl i mišem ozna~avamo `eljene datoteke. 15. Na paleti alatki prozora Site pritisnimo dugme Put Files. 59 INTERNET - neotkrivene mogu}nosti 16. Na ekranu se pojavljuje okvir za dijalog Dependent Files pomo}u koga definišete da li }e se u prenos uklju~iti i zavisne datoteke. 17. Pritisnite dugme No. Dreamweaver serveru. prenosi kopije obele`enih datoteka na naš direktorijum na Ukoliko prebacujete datoteke i uklju~ite prebacivanje zavisnih datoteka, Dreamweaver }e prebaciti sve lokalne datoteke koje izabrana datoteka adresira. Na primer, ukoliko prebacujemo datoteku index.html i izaberemo prenos zavisnih datoteka, Dreamweaver }e automatski prebaciti slike koje smo uklju~ili u tu datoteku, kao i datoteku resursi.html. U ovom slu~aju, ovaj izbor mo`e da uspori proces prebacivanja datoteka zbog ponovnog prebacivanja datoteka koje ve} postoje na serveru. Tako|e, mo`e se desiti da nehotice zamenite datoteke koje su na serveru. Odlu~ite se za prebacivanje zavisnih datoteka samo onda kada ste sigurni da `elite da Dreamweaver isporu~i sve datoteke koje su u nekom odnosu sa izabranom stranicom ili stranicama. U ovom slu~aju mi smo izabrali sve zavisne datoteke na lokaciji, tako da }e rezultat biti isti bez obzira da li smo izabrali Yes ili No. Mada posle prebacivanja imate primerke datoteka i na lokalnom disku i na serveru, mo`da }e u budu}nosti biti potrebno da dopremite datoteke sa Web servera da bi ih a`urirali. Da biste preuzeli datoteke sa servera, pritisnite mišem na dugme Get Files na paleti alatki prozora Site. Pregledanje datoteka koje su na Web serveru Sve do sada u pretra`iva~u smo pregledali samo lokalne datoteke. Sada, pošto su preba~ene na Web server, mo`emo da ih u pretra`iva~u pregledamo sa te lokacije. 1. Pokrenimo pretra`iva~ (Netscape ili Internet Explorer). 2. U polju Location upišite adresu Web lokacije kursa. U našem slu~aju http://nastava.cet.co.yu/kursevi/Obliknastave/netid/, gde je netid identifikacija na serveru. Pritisnite taster Enter i pojavi}e se naša Web stranica. 60 INTERNET - neotkrivene mogu}nosti Gornjom adresom saopštili smo pretra`iva~u da ide na nastava.cet.co.yu i tra`i direktorijum /www/kursevi/Obliknastave/netid/. Verovatno ste uo~ili da nije navedeno koji HTML dokument ta~no `elimo da vidimo. Pošto naziv datoteke nije eksplicitno naveden, pretra`iva~ }e u direktorijumu potra`iti datoteku index.html. Server NASTAVA zna koji je dokument u direktorijumu inicijalno predvi|en za prikazivanje i ako nije navedena datoteka. Sada vam je jasno zašto smo svojevremeno datoteku prve stranice kursa nazvali index.html. Me|utim, naziv dokumenta za inicijalno prikazivanje zavisi od tipa servera, zato proverite kod administratora servera koji naziv treba da koristite. Izlazak iz Dreamweavera i pretra`iva~a Dok ste u pretra`iva~u, u meniju File izaberite stavku Exit, a zatim se vratite u Dreamweaver, sninite svoj rad u datoteku i u meniju File izaberite stavku Exit 61 INTERNET - neotkrivene mogu}nosti FRAME-OVI Ovo pitanje je jos osetljivije, s obzirom da postoji citava AntiFrame kampanja, koja ima neke osnove, ali savet je NE KORISTITI FRAME-OVE. Razloga za ovo ima dosta, ali spomenucu samo najbitnije: 1. Jedina pozitivna osobina frame-ova jeste da stede prostor na serveru gde vam se nalazi prezentacija i omogucava vam da eventualno ostanu na raspolaganju korisniku kada ode sa vase prezentacije (ako neko zna jos neku, neka mi slobodno javi). Da li ste na site-u Yahoo!, ZDNet, ili C|Net videli neki frame? Mozda, ali tek u nekom 4 ili 5 nivou prezentacije. U pitanju su site-ovi koji su najposeceniji (Yahoo!), ili medju najposecenijim site-ovima na Web-u. Koristite njihove ideje i daleko cete dogurati ("ako se vec kopira, treba kopirati najbolje"). 2. Glavni problem kod frame-ova jeste da se u zavisnosti od njihovog broja ucitava toliki broj file-ova istovremeno, koji se ucitavaju u frame-ove (znaci, najmanje 2 file-a). Ljudi koji ih koriste kazu da to nema veze, jer navigaciona oblast (bar), koja je obicno razlog za upotrebu frame-a, zauzima malo prostora zajedno sa slikama koje se tu eventualno nalaze. Ovo je u redu do sledeceg momenta: Hocete da se prijavite na pretrazivace, i tu nastaju problemi. 62 INTERNET - neotkrivene mogu}nosti PRAVLJENJE TASTERA ZA WEB STRANICU * PHOTOSHOP * Photoshop je program za obradu slika koji Web dizajneri veoma mnogo koriste. Ovde }emo demonstrirati jednu veoma prostu tehniku pravljenja dugmadi za web stranice. Pokrenimo Photoshop i u meniju File izaberimo stavku New. Na ekranu se pojavljuje okvir za dijalog New u kome definišemo radni prostor za svoju sliku. Za web stranice veli~inu slike treba definisati u pikselima. Re`imom boje definišemo koji }emo model boja koristiti za sliku. Za slike za web stranice koristi se RGB model (u tom modelu se svaki piksel komponuje od crvene, zelene i plave boje u odre|enoj, procentualno izra`enom srazmeri). Napravi}emo oblast dimenzija 200x100 piksela. Za pozadinu }emo izabrati belu boju. Na ekranu se pojavljuje mala bela oblast spremna za rad. SLOJEVI U Photoshopu se mo`e napraviti više slojeva na slici, što omogu}ava da pravimo razli~ite slike na posebnim radnim ravnima (tzv. slojevima) koje ne uti~u na podatke na drugim ravnima. Ovo je veoma zgodno pri pravljenju tzv. kontekstno osetljivih dugmadi (engl. rollover buttons), tj. dugmadi koja se vizuelno menjaju kada preko njih pre|e pokaziva~ miša. Svojstva slojeva podešavaju se pomo}u palete Layers. Ukoliko ta paleta nije prikazana na ekranu, u meniju Window izaberite stavku Show Layers i ona }e biti prikazana. Sve palete u Photoshopu imaju ako se mišem pritisne na strelicu u mišem meni palete i izaberite stavku ime Dugme. Pojavi}e se novi sloj. sopstveni meni kome se mo`e pristupiti gornjem desnom uglu palete. Aktivirajte New Layer, a zatim dodelite novom sloju Uo~ite da se ikona u obliku ~etkice 63 INTERNET - neotkrivene mogu}nosti premestila sa sloja Background na sloj Dugme. Ikona u obliku ~etkice pokazuje koji je sloj trenutno aktivan. BOJENJE DUGMETA Napravimo sada prosto pravougaono dugme. Prvo }emo napraviti pravougaonu konturu dugmeta. Me|utim, Photoshop nema alatku za crtanje pravougaonika. Taj nedostatak prevazi}i }emo tako što }emo alatkom Rectangular Marquee ozna~iti pravougaonu oblast, a zatim tu oblast popuniti bojom. Sa palete alatki izaberite alatku Rectangular Marquee, koja se nalazi u gornjem levom delu palete alatki. (Ako paleta alatki nije prikazana na ekranu, u meniju Window izaberite stavku Show Tools i paleta }e se pojaviti na ekranu.) Ako na paleti alatki u gornjem levom delu ne vidimo alatku Rectangular Marquee, pritisnite levi taster na mišu dok je pokaziva~ miša na trenutno prikazanoj ikoni i dr`ite ga pritisnutim da bi se pojavila pomo}na paleta na kojoj se nalaze dodatni alati, me|u kojima je i alatka Rectangular Marquee. Mišem izaberite tu alatku sa pomo}ne palete. "Nacrtajmo" sada pravougaonu oblast. Nju }emo popuniti bojom koriste}i alatku Paint Bucket. Izaberimo alatku Paint Bucket sa palete alatki. Da bismo videli njene opcije, dva puta mišem pritisnimo na tu alatku i pojavi}e se paleta Paint Bucket Options. Proverimo da li opcija Contents ima vrednost Foreground i da li je re`im bojenja postavljen na Normal. Ovi parametri odre|uju da alatka bojenje obavlja trenutno izabranom bojom prednjeg plana. Boja prednjeg plana bira se tako što mišem izaberemo levi kvadrat od dva preklopljena kvadrata koji se nalaze na donjoj polovini palete alatki. Ovi kvadrati slu`e za postavljanje boje prednjeg plana i pozadine, a izabrana boja se primenjuje na trenutno aktivnu alatku. 64 INTERNET - neotkrivene mogu}nosti Boja se mo`e izabrati i sa palete uzoraka boja (engl. Color Swatch). Paleta Color Swatch bi}e prikazana na ekranu ako u meniju Window izaberemo stavku Show Swatch. Kada smo izabrali boju, postavljamo pokaziva~ miša unutar pravougaone crti~aste konture i pritisnemo levi taster na mišu. Pošto je trenutno aktivna alatka Paint Bucket, pravougaona kontura se popunjava izabranom bojom. Sada u meniju Select izaberimo stavku Deselect da bi sa ekrana nestala pravougaona crti~asta kontura. Na ekranu imamo pravougaonik obojen zelenom bojom na sopstvenom sloju. UOBLI^AVANJE DUGMETA Photoshop raspola`e nizom filtera pomo}u kojih mo`ete da podešavate slike na pojedinim slojevima. Od verzije 5 postoje specijalni filteri koji obuhvataju neke operacije koje su se ranije obavljale ru~no. Jedan od tih filtera je filter Bevel and Emboss koji pravi iluziju trodimenzionalnog konusnog dugmeta. U meniju Layer izaberimo stavku Effects/Bevel and Emboss. U okviru za dijalog Effects izaberimo stil Inner Bevel. Ostale parametre podešavajte po `elji, sve dok ne dobijete odgovaraju}i izgled dugmeta. 65 INTERNET - neotkrivene mogu}nosti Sada }emo dodati tekst dugmetu, kako bi korisnici znali koju funkciju dugme obavlja. Sa palete alatki izaberimo alatku Type, a zatim postavimo pokaziva~ miša na crte` i pritisnimo levi taster na mišu. Na ekranu se pojavljuje okvir za dijalog Type Tool u koji upisujemo `eljeni tekst. Ovaj okvir za dijalog ima dve korisne opcije koje treba aktivirati, Auto Kern i Anti-Aliased. Opcija Auto Kern kontroliše razmak izme|u slova, a Anti-Aliased "umekšava" ivice slova tako da ne izgledaju nazubljeno. Po završenom podešavanju pritiskom na dugme OK zatvaramo ovaj okvir za dijalog. Tekst je sada na dugmetu. Ukoliko `elimo da korigujemo polo`aj teksta, potrebno je da sa palete alatki izaberemo alatku Move i pomerimo tekst na `eljeno mesto. Slede}i korak je obrezivanje (engl. crop) radne oblasti na veli~inu dugmeta.Svaki sloj sadr`i informacije o oblastima prozirnosti (engl. transparency) koje omogu}avaju da izaberete samo oblasti sloja sa konkretnom informacijom. Sa palete slojeva izaberimo sloj Dugme, a zatim u meniju Select izaberimo stavku Load Selection i u okviru za dijalog Load Selection pritisnimo dugme OK. Oko dugmeta se pojavljuje crti~asti pravougaonik. 66 INTERNET - neotkrivene mogu}nosti U meniju Image izaberimo stavku Crop da bismo uklonili suvišne delove radne oblasti. Dugme sada ima oblik prikazan na slede}oj slici. SNIMANJE U DATOTEKU Po`eljno je da povremeno snimite svoj rad, zato }emo u meniju File izabrati stavku Save. Ovim postupkom snimi}emo rad u datoteku koja je izvorni Photoshopov grafi~ki format (tip .psd). Me|utim, taj format nije predvi|en za upotrebu na web stranicama zbog svoje veli~ine, pošto sadr`i dodatne informacije o slojevima, što ne zna~i da kasnije ne mo`emo u~itati ovu datoteku i sadr`aj prilagoditi potrebama weba. Pošto pravimo dugme za web stranicu, mora}emo da spojimo slojeve pre nego što obavimo snimanje u odgovaraju}em formatu. U meniju Layer izaberimo stavku Flatten Image da bismo to ostvarili. Ina~e, ova opcija je na raspolaganju i na pomo}nom meniju palete Layers. 67 INTERNET - neotkrivene mogu}nosti SNIMANJE U DATOTEKU FORMATA GIF Naše dugme je relativno malo, sa malo boje, pa }emo ga snimiti u formatu GIF. GIF memoriše sliku koriste}i maksimalno 256 boja, a naša slika trenutno ima 24-bitnu paletu (16,7 miliona boja). Da bismo redukovali paletu na 256 boja, u meniju Image izaberimo stavku Mode i u pomo}nom meniju opciju Indexed Color. Na ekranu se pojavljuje okvir za dijalog Indexed Color. Parametar Palette definiše kako }e se boje koristiti na završenoj slici. Izaberimo za ovaj parametar vrednost Adaptive, kako bi se za prikaz izabrale najoptimalnije boje iz raspolo`ivog skupa boja. Kada se koristi ta vrednost, mogu}e je dodatno smanjiti broj boja, kao i izabrati manju vrednost za parametar Color Depth, da bi se dobila što manja veli~ina datoteke. Za parametar Dither izaberimo vrednost Diffusion, da bismo postigli simulaciju ve}e palete boja kombinacijom boja. Veoma je va`no da korektno obavimo ova podešavanja, tako da uprkos koriš}enju malog broja boja dobijemo zadovoljavaju}i kvalitet slike. Što se ti~e parametra Palette, u igri je još jedna vrednost - Web. Naime, Netscape je razvio paletu boja za web, zato što ve}ina operativnih sistema ima sopstvenu paletu boja, pa koriš}enjem Netscapeove palete obezbe|ujemo paletu koja je prisutna na svim operativnim sistemima. Ova paleta ima 216 boja koje je definisao Netscape, a ostatak su boje koje zavise od operativnog sistema. Biranjem ove palete sigurni smo da }e prikaz slike na ekranima korisnika biti korektan i da ga pretra`iva~ ne}e razmrljati. Kada smo podesili parametre, pritisnimo dugme OK, a zatim u meniju File izaberimo stavku Save As i snimimo sliku u datoteku Dugme.gif. Ovime smo završili pravljenje prvog dugmeta. PRAVLJENJE KONTEKSTNO OSETLJIVOG DUGMETA Ova dugmad su uobi~ajena na web stranicama. To je u stvari niz slika koji se menja kada pomerimo pokaziva~ miša preko njih. Ona su pogodna za dodavanje dodatnih informacija vezanih za funkciju dugmadi itd. Mi }emo napraviti takvo dugme koje samo menja boju kada se mišem pre|e preko njega. Mada se ~ini da je ovakva funkcija prosta i mo`da nepotrebna, promena boje dugmeta obezbe|uje povratnu informaciju korisniku da je ta slika u stvari dugme, a ne deo podloge i doprinosi jasno}i web stranice. 68 INTERNET - neotkrivene mogu}nosti Veoma je lako napraviti ovo dugme u Photoshopu. Prvo, u~itajmo naše originalno dugme, tj. uslojenu Photoshopovu datoteku. PRAVLJENJE NOVOG STANJA DUGMETA Aktivirajmo sloj Dugme i u meniju Layer izaberimo opciju Duplicate Layer. Novi sloj }emo nazvati "Dugme_nad". Sada imamo dva sloja dugmeta koja su identi~na. Jasnoje da treba promeniti novi sloj tako da se naše dugme menja kada korisnik pre|e mišem preko njega. Izaberimo novu boju i popunimo sliku na novom sloju. Efekat Bevel }e biti za novu boju. 69 INTERNET - neotkrivene mogu}nosti To je sve. Sada imamo kontekstno osetljivo dugme sa dva stanja. Da bismo videli kako }e dugme izgledati, pritisnimo mišem na ikonu oka pored sloja Dugme_nad. Prvo }emo ga snimit u izvornu Photoshopovu datoteku Dugme_nad.psd da bismo imali osnovu za kasnije izmene, ako to bude potrebno. Sada mo`emo da ga snimimo u datoteku formata GIF. Ovoj datoteci }emo dati ime Dugme_nad.gif. Dugmad su spremna za uklju~ivanje u web stranice. 10 NACINA KAKO DA NE PROMOVISETE VAS SAJT Kada zavrsite izradu vaseg sajta, sledeci korak je da ga predstavite svetu. Slanje adrese vaseg Web sajta na masine za pretragu Interneta , direktorijume i slicne sajtove je u nekim slucajevima dobar izbor. Medjutim, u nekim slucajevima nacin na koji se pristupa ovom poslu moze da ima kontra efekat. Za razliku od drugih tekstova koji vas upucuju sta treba da radite, ovaj tekst vas upucuje sta ne treba da radite prilikom promocije vaseg sajta na pomenutim adresama. Na zalost, Internet je pun losih preporuka, laznih saveta, a cak i prevara u vezi posla promocije vaseg sajta.U slucaju da vrsite promociju vaseg sajta na pogredan nacin, mozete vise naskoditi vasem sajtu, nego mu pomoci. 1 - Nemojte Spamovati! Ovo je osnovno pravilo. SPAM je slanje velikog broja nekontrolisanih poruka preko e-maila ili preko NEWS grupa, CHATova i sl. Spamovanje ce vam proizvesti vise neprijatelja, nego koristi koje cete imati. Postoji mogucnost da velik broj ljudi postavi filtere na vase poruke, pa ih ubuduce nece primati, bez obzira na sadrzaj koji se nalazi u njima. Takode, neki provajderi isto tako postavljaju filtere na poruke koje stizu na njihove konferencije, ili oglasne table, a nije redak slucaj da zbog SPAMa postave i filtere na svu elektronsku postu koja dolazi od vas. 2 - Ne placajte za registraciju na pretrazivacima. Posaljite podatke o vasem sajtu na 500 masina za pretrazivanje za samo 250 dinara! Los posao. Ne postoji 500 ili cak ni 100 masina na koje vredi poslati podatke. Oni koji vam nude ovakve usluge, ne idu od pretrazivaca do pretrazivaca i registruju vas sajt, vec koriste automatsko slanje preko besplatnih servisa (poput http://www.zr.co.yu/search/submit.htm, ili slicnih). 3 - Ne gubite vreme na prevelik broj pretrazivaca WEB-a. Posaljite podatke o vasem sajtu na nekoliko glavnih masina za pretrazivanje i direktorijuma pretrazivaca, koristeci servise za registraciju, a za ostale to uradite individualno. Obicno vredi poslati podatke za oko 30 pretrazivaca. Potom potrazite specijalizovane direktorijume 70 INTERNET - neotkrivene mogu}nosti koji odgovaraju sadrzaju vaseg sajta (putovanja, investicije, kupovina, turizam, itd.). Ne gubite vreme na nebitne masine za pretrazivanje ili decije link strane. Bolje da vase vreme provedete u pazljivom slanju podataka na Yahoo. 4 - Ne protrcavajte kroz slanje podataka na Yahoo. Yahoo je verovatno najvazniji direktorijum pretrazivaca, i takode jedan od onih na koje je najteze uci. Ono sto posaljete ce biti pregledano od strane stvarnih urednika, pa zato pratite uputstva sa sajta, i stvarno se trudite da ih ispostujete i ubedite urednike da je vas sajt vredan pomena. Sta vam vredi ako vas sajt postave na 1257. mesto od 1700 sajtova koji se bave odredeno temom? 5 - Nikad ne saljite podatke na pretrazivace pre nego sto je sajt spreman za posetioce. Testirajte vas sajt pazljivo, i uverite se da je svaki deo sajta spreman za posetioce pre slanja podataka na pretrazivace. Mnogi sureferi se nikad nece vratiti na vas sajt ako na njemu zateknu poruku tipa "under construction" ili mrtve (nevazece) linkove. 6 - Ne zaboravite da integrisete vas URL u posao. Zapanjujuce je koliko neke kompanije novca potrose na pravljenje WEB sajta, a potom zaborave da prilikom stampe novih vizit karti i reklamnih materijala postave u zaglavlje URL sajta. URL vaseg sajta treba da bude odstampan na svako mesto gde bi ste postavili i broj telefona vase kompanije. 7 - Ne mesajte se sa crnom magijom. Postoji mnogo raznih trikova koji se pominju na raznim NEWS grupama i mailing listama, koji obecavaju da ce popravti vase rangiranje na pretrazivacima. Ucitavanje vasih stranica sa nevidljivim kljucnim recima, kreiranje posebnih ulaznih stranica sa specijalnim sadrzajem i tajni programi (za samo $19.95) koji guraju vase strane na pretrazivacima predstavljaju obmanu. Nemojte se njima zavaravati. Pretrazivaci i direktorijumi sajtova vode bitku protiv onih koji zele da pobede sistem, i izbacice vas ukoliko posumnjaju da zelite da ih SPAMujete. Koristite META tagove, kljucne reci u nazivu i telu stranica, isl., ali ne idite dalje, i uvek pratite uputstva za slanje podataka. 8 - Ne stavljajte svasta na vas Web sajt, pogotovo ono sto ne zelite da javnost vidi. Vecina vas ima test stranice, ili stranice sa licnim materijalom, koje cuvate na vasem Web serveru, ali ne zelite da budu javno objavljevne. Vecina pretrazivaca, poput Excite ili Altavista, automatski ce pretraziti i indeksirati sve strane na vasem sajtu, ukoliko im ne kazete da to ne rade. Kreirajte tekst fajl pod imenom "robots.txt," i postavite ga u root direktorijum na vasem sajtu (obicno u "htdocs" direktorijum). Taj fajl treba da sadrzi listu strana ili direktorijuma za koje ne zelite da se indeksraju od stane pretrazivaca. Fajl izgleda poput sledeceg teksta: User-agent: * Disallow: /test Disallow: /temporary Disallow: /templates Ovaj fajl govori svim spiderima (programima za pretragu sajtova) da ne indeksiraju pomenute direktorijume. 9 - Ne ustrucavajte se da merite vas saobracaj. Jedan od nacina da bolje promovisete vas sajt je da koristite neki od softvera koji ce vam davati podatke o posecenosti pojedinacnih stranica, sa kojih pretrazivaca dolaze posete i koje su kljucne reci koje ljudi koriste da 71 INTERNET - neotkrivene mogu}nosti bi dosli do vaseg sajta. Ovi podaci ce vam biti dragoceni da bi ste znali kako dalje da razvijate sadrzaj vaseg sajta. 10 - Kad zavrsite, nemojte stati! Promocija sajta je stalan posao. Kada jednom posaljete podatke za koje zelite da se pojave na internet pretrazivacima i direktorijumima, navratite posle mesec dana na te masine da proverite postojanje poslatih podataka. Ponekad se desi da ih nema, pa je potrebno da ponovite slanje. Ukoliko postoje. nemojte ih ponovo slati. Uvek trazite nove sajtove koji su voljni da postave kod sebe vas link ili vam nude nove i po mogucstvu besplatne oblike promocije. Prezentacija na servisu World Wide Web (www) KAKO IZABRATI FIRMU KOJA NUDI PROSTOR NA WEB-U (WEB SPACE PROVIDER)? Mnoge firme kod nas i u svetu prodaju prostor na Web-u, a vrlo cesto i izradjuju prezentacije. Da bi izabrali firmu od koje cete kupiti prostor trebalo bi da se informisete o sledecim podacima: 1. Cena prostora (cene znaju da budu vrlo razlicite, u zavisnosti od dodatnih usluga koje se podrazumevaju u osnovnoj ceni) 2. Brzina pristupa prostoru od strane posetilaca prezentacije (nekim mestima na Net-u se pristupa brze ili sporije u zavisnosti od opreme koju poseduje firma, kao i od brzine pristupa Internet-u koju firma ostvaruje (link)) 3. Koje se firme vec nalaze kod te firme (sto su firme ozbiljnije, verovatno postoji razlog za to) 4. Koje su sve usluge koje se nude za tu cenu (broj E-mail adresa, ftp server, inicijalno (ili stalno) reklamiranje. . .) 5. Firma kod koje kupite prostor ne mora da bude firma koja ce vam napraviti prezentaciju (pogledajte prezentacije koje vam se dopadaju pa odaberite firmu u odnosu na kvalitet prezentacija koje je firma napravila - sve takve firme imaju spisak prezentacija koje su napravile) 72 × Report "Dreamweaver MX" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close