adobe dream weaver cs4

66
Adobe Dreamweaver CS4 Naziv modula Naziv nastavne jedinice 1. Osnovni pojmovi u web dizajnu, interfejs Dreamweaver-a 1.1 Osnovna struktura web sajta, konvencije u imenovanju fajlova free 1.2 Šta je index stranica, XHTML, CSS, JavaScript 1.3 Welcome screen, Application toolbar, prozor dokumenta free 1.4 Workspace, paneli, Properties inspector 2. Kontrola web sajta, pravljenje novih dokumenata, struktura sajta i rad sa tekstom 2.5 Definisanje novog web sajta free 2.6 Upravljanje sajtovima, Preferences, DOCTYPE deklaracije, podešavanje default čitača (browser-a) 2.7 Kreiranje novih dokumenata i svojstva novog dokumenta free 2.8 Dodavanje strukture Web stranici 2.9 Ubacivanje teksta u Dreamweaver, importovanje Word dokumenata free 2.10 Liste 3. Rad sa slikama, flash-om i video fajlovima, linkovi u Dreamweaver-u 3.11 Tipovi image fajlova (jpg, gif, png), ubacivanje image fajlova, Assets u Dreamweaver-u free 3.12 Postavljanje slika na Web stranicu, izmena svojstva slike i Photoshop integracija 3.13 Ubacivanje flash fajlova i video fajlova free 3.14 Osnovno o linkovima 3.15 Kreiranje linkova free 4. CSS 4.16 Cascading Style Sheets, anatomija CSS pravila i postavljanje CSS preferenci 4.17 CSS Styles panel, kontrolisanje CSS-a sa Property Inspector–om free 4.18 Kreiranje novog stila, dodavanje eksternog Style Sheet-a, eksportovanje unutrašnjeg CSS-a u eksterni CSS fajl 4.19 CSS pozicioniranje: Box model, Floats free 4.20 CSS pozicioniranje: apslolutno, relativno i fiksno pozicioniranje 4.21 Slojevi i CSS Layout free 5. Tabele, forme i šabloni 5.22 Tabele 5.23 Formulari free 5.24 Šabloni (Template) 5.25 Behaviors free 5.26 Spry 6. Kodiranje u Dreamweaver-u 6.27 Code Inspector, Code toolbar i korišćenje code hint-a free 6.28 Izveštaji, validacija koda i provera prekinutih linkova 6.29 Kompatibilnost sa raznim čitačima free 6.30 Definisanje udaljenog servera 6.31 Publikovanje Web sajta i sinhronizacija fajlova free

Upload: branko-graovac

Post on 15-Oct-2014

214 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Adobe Dream Weaver CS4

Adobe Dreamweaver CS4

Naziv modula Naziv nastavne jedinice

1. Osnovni pojmovi u web dizajnu, interfejs Dreamweaver-a

1.1 Osnovna struktura web sajta, konvencije u imenovanju fajlova

free

1.2 Šta je index stranica, XHTML, CSS, JavaScript

1.3 Welcome screen, Application toolbar, prozor dokumenta free

1.4 Workspace, paneli, Properties inspector

2. Kontrola web sajta, pravljenje novih dokumenata, struktura sajta i rad sa tekstom

2.5 Definisanje novog web sajta free

2.6 Upravljanje sajtovima, Preferences, DOCTYPE deklaracije,

podešavanje default čitača (browser-a)

2.7 Kreiranje novih dokumenata i svojstva novog dokumenta free

2.8 Dodavanje strukture Web stranici

2.9 Ubacivanje teksta u Dreamweaver, importovanje Word

dokumenata free

2.10 Liste

3. Rad sa slikama, flash-om i video fajlovima, linkovi u Dreamweaver-u

3.11 Tipovi image fajlova (jpg, gif, png), ubacivanje image fajlova,

Assets u Dreamweaver-u free

3.12 Postavljanje slika na Web stranicu, izmena svojstva slike i

Photoshop integracija

3.13 Ubacivanje flash fajlova i video fajlova free

3.14 Osnovno o linkovima

3.15 Kreiranje linkova free

4. CSS

4.16 Cascading Style Sheets, anatomija CSS pravila i postavljanje CSS

preferenci

4.17 CSS Styles panel, kontrolisanje CSS-a sa Property Inspector–om

free

4.18 Kreiranje novog stila, dodavanje eksternog Style Sheet-a,

eksportovanje unutrašnjeg CSS-a u eksterni CSS fajl

4.19 CSS pozicioniranje: Box model, Floats free

4.20 CSS pozicioniranje: apslolutno, relativno i fiksno pozicioniranje

4.21 Slojevi i CSS Layout free

5. Tabele, forme i šabloni

5.22 Tabele

5.23 Formulari free

5.24 Šabloni (Template)

5.25 Behaviors free

5.26 Spry

6. Kodiranje u Dreamweaver-u

6.27 Code Inspector, Code toolbar i korišćenje code hint-a free

6.28 Izveštaji, validacija koda i provera prekinutih linkova

6.29 Kompatibilnost sa raznim čitačima free

6.30 Definisanje udaljenog servera

6.31 Publikovanje Web sajta i sinhronizacija fajlova free

Page 2: Adobe Dream Weaver CS4

Modul: Osnovni pojmovi u web dizajnu, interfejs Dreamweaver-a

Autor: Vasil Miloševski

Naziv jedinice: Osnovna struktura web sajta, konvencije u imenovanju fajlova

Materijali vezani uz ovu lekciju:

- Test osnovna struktura web sajta, konvencije u imenovanju fajlova- Osnovna struktura web sajta, konvencije u imenovanju fajlova (PDF dokument)

Web lokacija se tipično sastoji od dva ili tri osnovna dela:

1. Lokalni folder (engl. Local Folder) - Ovaj folder se takođe zove i Root folder. U njemu se nalaze svi fajlovi, slike i ostali elementi Web sajta. Najjednostavnije rečeno, Root nivo je početna tačka koju čitači (engl. Browsers) koriste da pronađu objekte vašeg Web sajta. Lokalni folder tj. Root folder se tipično nalazi negde na Hard disku vašeg računara.

2. Udaljeni folder (engl. Remote Folder) - Ovo je folder gde publikujete vaš sajt i on se nalazi na Web serveru. Na primer, kada kupite Web Hosting plan, u osnovi vi iznajmljujete prostor za „parkiranje“ vašeg sajta koji se nalazi na „virtuelnom parkingu“ Interneta. Taj prostor se nalazi na udaljenom Web serveru vašeg Hosting provajdera.

3. Testing server folder - Ovo je folder gde Dreamweaver procesira dinamičke fajlove da bi kreirao dinamički sadržaj i gde se konektuje sa bazom podataka dok vi kreirate i testirate vaš sajt. Server za testiranje može biti na lokalnom računaru i ne preporučuje se korišćenje udaljenog foldera kao testing server foldera.

Putanje

Pošto odlučite kakva će biti generalna struktura vašeg sajta, sledeći korak je da se opredelite kako ćete oraganizovati i linkovati fajlove. Svaka stranica Web sajta ima jedinstvenu adresu ili URL (Uniform Resource Locator), kao na primer http://www.it-akademija.com/index.php. Kada kreirate lokalni link (link od jedne stranice ka drugoj stranici unutar istog sajta), generalno ne morate da specificirate ceo URL fajla na koji linkujete. Umesto toga, samo je potrebno da postavite relativnu putanju, a to je putanja od aktuelnog fajla ili od Root foldera do linkovanog fajla. Na primer ako biste linkovali od stranice o-nama.html do stranice kontakt.html, a obe ove stranice se nalaze u Root folderu, tada bi kod za lokalni link izgledao ovako:

<a href=“kontakt.html“>Kontakt</a>

Postoje tri tipa putanja kod linkovanja:

Putanje relativne u odnosu na dokument - Ovaj tip linka specificira putanju i ime dokumenta na koji se linkuje, kao na primer kontakt.html ili galerija/planina.html. Kod ovog tipa linkovanja ideja je da ne morate da dodajete apsolutni (ceo) URL uključujući i http:// da bi linkovi radili jer se svi linkovani fajlovi nalaze na Root nivou, ili u Root lokalnom folderu, ili u nekom podfolderu.

Putanja galerija/planina.html kazuje čitaču da se pomeri jedan nivo ispod u hijerarhiji foldera, od Root nivoa do foldera „galerija“ i tu pronađe fajl koji se zove planina.html. Ako biste želeli da na stranici planine.html postavite link koji će voditi ka stanici index.html, dodaćete dve tačke i slash (../) ispred imena fajla ../index.html. Ove dve tačke kazuju čitaču da se pomeri nivo iznad u hijerarhiji foldera. Sledeća tabela prikazuje različita scenarija i može

vam pomoći da malo bolje razumete strukturu putanja.

Link od X do Y Primer linka

Od index.html do kontakt.html kontakt.html

Od kontakt.html do planine.htmlgalerija/planine.html

Od planine.html do more.html more.html

Od planine.html do kontakt.html../kontakt.html

Putanje relativne u odnosu na Root folder sajta - Linkovi koji koriste putanje relativne u odnosu na Root sajt prikazuju putanju i ime dokumenta na koji se linkuje, ali one usmeravaju čitače da počnu pretragu za putanjom počev od Root nivoa sajta. Da biste napisali ovu putanju, uvrstite Forward slash ispred prvog foldera ili imena fajla

Page 3: Adobe Dream Weaver CS4

kao u sledećem primeru

/kontakt.html/galerija/planine.html

Apsolutne putanje - Apsolutna putanja je ceo URL do linkovanog fajla kao u sledećem kodu http://www.mojsajt.com/galerija/planine.html.Ova vrsta putanja se mora koristiti kada se linkuju fajlovi koji se nalaze na drugim serverima, kao na primer link sa vašeg sajta ka index stranici sajta IT akademije.

Organizacija Root foldera

U osnovi Web lokacije su kolekcija foldera i fajlova. Iako je svaki Web sajt drugačiji, ipak postoje neki standardi u pravljenju strukture Web sajta koji vam mogu pomoći u uvek dobroj organizaciji sajta.

Da biste kreirali vaš sajt, prvo je potrebno da kreirate folder na vašem hard disku – Root folder, a kasnije kad budete definisali vaš sajt, to će biti folder prema kom ćete uperiti Dreamweaver. Unutar Root foldera napravićete strukturu foldera i fajlova na osnovu toga kako će se pojavljivati onlajn. Ako, na primer, imate mali sajt, svi vaši HTML fajlovi će ići u Root folder, a kako vaš sajt postaje veći i kompleksniji, tako ćete praviti podfoldere.

Ako, na primer, odemo na sledeću stranicu:http://www.futura.edu.rs/studije/osnovne-akademske.html,

možemo da vidimo da je URL futura.edu.rs forward slash studije forward slash osnovne-akademske.html. Ovo znači da se u Root folderu sajta nalazi podfolder studije, a u podfolderu studije nalazi se fajl osnovne-akademske.html.

Pored strukturiranja stranica na ovaj način, većina Web dizajnera će postaviti elemente sajta u posebne foldere. Ovo je dobar način da se organizuje sajt i da se dodatni elementi lakše pronađu – slike, css, skriptovi, video fajlovi i drugi elementi. Takođe dobra praksa je da se ispred foldera u kojima su elementi sajta doda donja crta (_) (engl. Underscore) ispred imena foldera. Ovo pomaže da se ti folderi pomere na vrh strukture Web sajta i da se identifikuju kao folderi koji sadrže elemente, a ne da se mešaju sa podfolderima.

Konvencije u imenovanju fajlova

Kod kreiranja fajlova za web od vitalnog je značaja da pratite pravila za imenovanja fajlova. Ako vaši fajlovi nisu ispravno imenovani, izvesne stranice mogu postati nedostupne ili jednostavno neće raditi pravilno. Ova pravila su prilično jednostavna i trebalo bi ih se pridržavati.

1. Nemojte koristiti razmake u imenima fajlova - Ako je potrebno da razdvojite više reči, koristite donju ctru (_) (engl. Underscore) ili crticu (-) (engl. Hypen):

o_nama.htmlo-nama.html

Većina servera će dozvoliti razmake u imenima fajlova, ali ovo može biti nepodesno jer će neki serveri prikazati %20 i može dovesti do zabune kada želite da pošaljete nekom link te stranice ili URL.

2. Kraća imena fajlova su bolja - Bolje je da imenujete fajl o-nama.html nego pogledajte-vise-o-nama.html, imena stranica se lakše pamte, a i lakše je vašim korisnicima da ukucaju URL.

3. Nemojte koristiti specijalne karaktere #, $, %, *, & - Ovi karakteri imaju neka druga značenja, kao na primer URL perimetri, koja možete aktivirati. Brojevi se mogu koristiti u imenima fajlova, jedino izbegavajte da ih koristite kao prvi karakter u imenu fajla.

4. Nemojte mešati velika i mala slova Trebalo bi napisati index.html, a ne Index.html.Takođe izbegavajte velika slova, ako je moguće, mnogim Web serverima neće smetati, ali neki UNIX serveri prave razliku između velikih i malih slova (Case Sensitive) i linkovi se neće pravilno razrešiti.

5. Budite konzistentni u dužini ekstenzije fajlova - Kod nedinamičkih sajtova koristite ili .html ili .htm ekstenzije, nikako zajedno.

Ako se pridržavate ovih pravila kod imenovanja fajlova, izbeći ćete greške ili probleme unutar vašeg Web sajta.

Page 4: Adobe Dream Weaver CS4

Modul: Osnovni pojmovi u web dizajnu, interfejs Dreamweaver-a

Autor: Vasil Miloševski

Naziv jedinice: Welcome screen, Application toolbar, prozor dokumenta

Materijali vezani uz ovu lekciju:

- Test welcome screen, application toolbar, prozor dokumenta- Welcome screen, Application toolbar, prozor dokumenta (PDF dokument)

Dreamweaver

Dreamweaver je postao standard za kreiranje Web sajtova i upravljanje njima. Dreamweaver radi sa Web tehnologijama o kojima je bilo reči u prošloj nastavnosj jedinici - HTML, XHTML, CSS i JavaScript. Takođe je i ozbiljan alat za pravljenje dinamičkih Web lokacija.

Welcome screen

Prvi element interfejsa Dreamweaver-a sa kojim ćemo se upoznati je Welcome screen ili ekran dobrodošlice. Kada pokrenete Dreamweaver, Welcome screen se pojavljuje na radnoj površini. Inače ovaj screen je automatski omogućen pa će se prikazivati svakog puta kada pokrenete aplikaciju.

Ako ne želite da vam se prikazuje ovaj Screen, imate mogućnost u levom donjem delu tog prozora da štiklirate dugme Don’t show again.

Ovaj Screen sadrži takozvane brze linkove (engl. Quick links) za kreiranje novih dokumenata i linkove ka poslednjim fajlovima na kojima ste radili. Pored tih linkova sadrži i Web linkove ka video trening fajlovima iz Adobe biblioteke i ka Dreamweaver Exchange Web sajtu. Takođe, tu su i linkovi ka „Getting strated” i „New features” tutorijalima koji se nalaze na Adobe Web sajtu. Oni su posebno korisni za nove korisnike koji traže brze detalje o tome šta je novo u Dreamweaver-u CS4.

Page 5: Adobe Dream Weaver CS4

Application toolbar

Paleta aplikacije sadrži logo Dreamweaver-a, zatim meni aplikacije, Layout dugme za selektovanje različitih prikaza stranica, Extend Dreamweaver dugme za pristup menadžeru ekstenzija (engl. Extension Manager) i Dreamweaver Exchange sajtu gde možete preuzeti razne ekstenzije. Tu je i Site dugme za brzo upravljanje novim sajtovima i editovanje već postojećih sajtova, zatim dugme Workspace Layout menu za prebacivanje između različitih opcija radnih površina. I na kraju palete je Search bar pomoću kog možete potražiti pomoć na Web stranici Adobe Community Help.

Prozor dokumenta - Document window

Prozor dokumenta se sastoji iz više delova od kojih su neki uvek vidljivi, dok se ostali mogu prebacivati iz vidljivog u nevidljivo stanje. Ti delovi su: Document tab bar, Document toolbar, lenjiri (engl. Rulers), mreža (engl. Grid), vođice (engl. Guides) i status bar.

Document tab bar

Document tab bar se nalazi direktno ispod Toolbar aplikacije i prikazuje ime fajla i njegovu putanju. Kada je otvoreno više fajlova, poređani su s leva na desno, svaki fajl ima svoj Tab u Tab baru. Ako želite da vidite vaša dokumenta u nekom posebnom nizu, možete prevući levim klikom miša dokument na željeno mesto (metoda Drag and Drop). Ako je otvoreno više dokumenata, tada se putanja fajla neće videti, ali dovoljo je da pređete mišem preko imena fajla i putanja će se prikazati.

Jedna od novih opcija u Dreamweaver-u CS4 jeste prikaz svih eksternih fajlova vezanih za aktivni dokument u Tab baru.

Benefit ove opcije je da kada menjamo, na primer, CSS fajl, a promene sačuvamo, nije potrebno da prelazimo u html fajl da bismo pokrenuli dokument u čitaču i videli kako se stranica ponaša, kao u prošlim verzijama Dreamweaver-a, već nam je omogućeno da direktno iz CSS fajla pokrenemo čitač.

Document toolbar

Document toolbar se nalazi na vrhu svakog otvorenog dokumenta, a ispod Application Toolbar-a i Document Tab bar-a i prikazuje sve opcije i detalje vezane za aktivan dokument. Prelaskom miša preko svake opcije pojavljuje se koristan Tooltip koji prikazuje ime i funkciju dugmeta.

U Document Toolbar-u postoje dugmad koja omogućavaju različite prikaze vaše stranice. Postoji pet režima prikaza:

Code view - Prikazuje kod vašeg dokumenta. Ovaj prikaz nam omogućava ručno kodiranje u HTML-u, CSS-u, JavaScript-u ili ako radimo sa dinamičkim stranicama, u PHP-u, ASP-u itd. Difoltni font teksta koji prikazuje kod je Courier 9 pt, a može se promeniti u prozoru Preferences, zatim kartica Font.

Design view - Ovaj prikaz je WYSIWYG (What You See Is What You Get) i on nam omogućava vizuelni prikaz koda koji se nalazi u Body Tag-u dokumenta. Iako je prikaz prilično sličan onome što ćete videti i u prozoru čitača, Design view ipak ne može da prikaže neke interaktivne elemente kao što su linkovi ili JavaScript.

Split View - Ovaj prikaz se koristi da biste istovremeno videli i kod i dizajn stranice. Pomoću bara koji ih razdvaja mogu se podesiti veličine dela koji prikazuje kod i dela koji prikazuje dizajn.

Postoje još neke opcije koje se nalaze u Layout padajućem meniju u Application baru, a to su:

Split code view - Ovaj prikaz se koristi kada želimo da prikažemo istovremeno dva različita dela koda jedne te iste stranice.

Design view on top - Prikaz dizajna stranice može da bude u donjem ili u gornjem delu ekrana. Ako želite da bude u gornjem, iskoristite opciju Design View on top.

Page 6: Adobe Dream Weaver CS4

Split verticaly - Ova opcija se koristi za prikazivanje panela vertikalno, jedan pored drugog. Design View on left - Kada izaberete Split, tada se kod u Code and Design prikazu nalzi na levoj strani Document

prozora, a dizajn se prikazuje na desnoj. Ovom opcijom možete da promenite redosled, da se dizajn prikazuje na levoj strani, a kod dokumenta da desnoj.

Četvrti način rada je Live View. Ovo je nova opcija koja se pojavila u Dreamweaver-u CS4. Ona vam omogućava da vidite vaš kod zajedno sa dinamičkim sadržajem stranice, slično prikazu stranice u čitaču.

Peti način rada je Live Code. Takođe nova opcija u Dreamweaver-u CS4. Kada je omogućen Live View klikom na Live Code dugme, omogućeno nam je da selektujemo elemente u dizajn prikazu i brzo identifikujemo odgovarajući kod.

Sledeći element Document Toolbar-a je Title. Ovde nam je omogućeno da na brz način dodamo naslov našem dokumentu. Takođe možemo kucati naslov Web stranice direktno u kodu u Title Tag-u. Ovaj naslov se pojavljuje u Title baru čitača.

File Management: Koristi se za preuzimanje i prenos fajlova na Web server.

Preview/Debug in browser: Koristi se za prikaz stranice u čitaču.

Refresh Design View (F5): Kada napravite promene u Code prikazu, kliknite na ovo dugme da biste osvežili Design prikaz.

View options: U padajućem meniju ovog dugmeta nalaze se opcije za uključivanje/ isključivanje lenjira, mreže, vođica, zatim Header bara (opcija Head Content).

Visual Aids: Koristi se za uključivanje/isključivanje raznih alata koji mogu da vam asistiraju kod postavljanja parametara za izgled Web stranice.

Validate Markup: U padajućem meniju ovog dugmeta nalaze se opcije za validaciju trenutnog fajla na kome radite, celog Web sajta ili više selektovanih fajlova. Tu je i Settings opcija koja otvara Preferences prozor gde možete da odredite DOCTYPE prema kome će biti izvršena validacija. Rezultati podrazumevaju prikaz grešaka, upozorenja i poruka.

Check Page: Ovaj alat proverava kompatibilnost vašeg fajla na kome trenutno radite sa raznim čitačima (engl. Browsers).

Lenjiri (Rulers)

Lenjiri su odličan alat koji može da vam asistira kod merenja i postavljanja elemenata na Web stranicu. Pojavljuju se u levoj i gornjoj ivici prozora dokumenta. Desnim klikom miša možete odrediti da li će lenjiri biti prikazani u pikselima, centimetrima ili inčima. X/Y koordinate lenjira koje predstavljaju 0/0 tj. početak za obe ose po difoltu je postavljen u gornjem levom uglu fajla. Ovaj početak se može pomeriti na bilo koju lokaciju na stranici tako što ćemo kliknuti levim tasterom miša na kvadratić u gornjem levom uglu i povući do željene lokacije na stranici. X/Y koordinate se tada pomeraju na 0/0 na novoj poziciji. Vraćanje na staru poziciju se može izvršiti preko opcije Reset Origin. Isključivanje lenjira se vrši preko opcije Hide Rulers.

Mreža

Linije mreže se protežu duž celog dokumenta u jednakim intervalima, s leve na desnu stranu i od vrha ka dnu dokumenta. One vam mogu pomoći za tačno pozicioniranje objekata na Web stranici. Možete uključiti Snap to Grid (privlačenje mreži) opciju za još bolje poravnanje. U podešavanjima mreže (View>Grid>Grid Settings) možete odrediti koje boje će biti linije u mreži, zatim možete odrediti koliki će biti razmak između tih linija i da li će se mreža prikazivati u vidu linija ili tačkica.

Vođice

Postoje horizontalne i vertikalne vođice koje možete dovući u otvoren dokument da bi vam pomogle u merenju i postavljanju novih objekata na Web stranicu. Da biste kreirali vođice, potrebno je da je prvo lenjir uključen, zatim ćete kliknuti levim dugmetom miša na lenjir i povući vođicu do željene lokacije na stranici. Na primer, ako želite da postavite AP Div na stranicu, 250px od leve ivice dokumenta i 300px od gornje ivice dokumenta, postavićete vođice na tu lokaciju i uključićete Snap to Guides (View>Guides>Snap to guides), zatim ćete samo privući Div ka toj lokaciji i on će se sam „zalepiti” za to mesto.

Vođice su vidljive samo na radnoj površini u Dreamweaver-u, a ne vide se na Web stranici u čitaču.

Status bar

Page 7: Adobe Dream Weaver CS4

Status bar sadrži dosta priručnih alata. U levom delu status bara se nalazi Tag selektor i omogućava vam da selektujete sadržaj određenog Tag-a. U desnom uglu status bara su Select tool, Hand tool. Zatim prikaz trenutne veličine prozora dokumenta u pikselima i procenjeno vreme otvaranja stranice. I na kraju status bara je Document encoding – u ovom slučaju Unicode (UTF-8)

Page 8: Adobe Dream Weaver CS4

Modul: Kontrola web sajta, pravljenje novih dokumenata, struktura sajta i rad sa tekstom

Autor: Vasil Miloševski

Naziv jedinice: Definisanje novog web sajta

Materijali vezani uz ovu lekciju:

- Test definisanje novog web sajta- Definisanje novog web sajta (PDF dokument)

Kreiranje novog Web sajta u Dreamweaver-u podrazumeva definisanje lokalnog sajta na vašem računaru kako bi Dreamweaver znao gde da sačuva i nađe dokumente i fajlove vezane za vaš sajt.

Postoji više načina za otvaranje Site Definition dijalog boksa preko koga definišete vaš novi sajt. Jedan način je preko dugmeta Site u Application Toolbar-u, a drugi preko opcije Site u meniju aplikacije.

Još jedan način za definisanje novog sajta je i preko Files panela preko opcije Manage Sites.

Page 9: Adobe Dream Weaver CS4

Ova opcija otvara Manage Sites dijalog boks preko koga možete kreirati novi sajt ili upravljati već postojećim Web sajtovima.

Kada izaberete opciju New Site, otvoriće vam se Site Definition dijlalog boks sa izabranom karticom Basic. Ova kartica vam omogućava definisanje novog sajta pomoću Site Wizard-a i setuje samo osnovne karakteristike kao što su ime sajta, HTTP adresa sajta i Root folder sajta.

Kartica Advanced se koristi za naprednije definisanje novog sajta.

Page 10: Adobe Dream Weaver CS4

Local info

Site name - Ovde definišete ime novog sajta unutar Dreamweaver-a. Ovo ime obično predstavlja ime klijenta ili označava namenu Web sajta i služi samo vama, posetioci Web sajta ga neće videti.

Local Root Folder - Ovo je Top level folder ili Root folder vašeg novog sajta. Sva dokumeta i fajlovi novog sajta moraju biti sadržani u ovom folderu. Klikom na ikonu foldera potražite Root folder na lokalnom računaru. Ako ga još niste kreirali, dođite do Parent foldera tj. foldera u kom želite da bude vaš Root folder i kliknite New folder ikonicu da biste ga i kreirali.

Default Images Folder - Ovo polje je opcionalno. Svakog puta kada ubacite sliku u vaš sajt, Dreamweaver je automatski kopira u ovaj folder. Pošto kreiramo novi sajt, još uvek nismo odredili koji će nam folder sadžati image fajlove pa ćemo ostaviti ovo polje prazno.

Links relative to - Kada linkujemo stranice u jednom sajtu, postoje dve opcije za to Document i Site Root. O vrsti ovih linkova bilo je reči u nastavnoj jedinici 1.1.

HTTP Address - Ostavite ovo polje prazno ako ste označili radio dugme Links Relative to Document i ako testirate sajt u lokalu.

Case-sensitive links - Neki serveri (Linux. Unix) su Case sensitive (prave razliku između velikih i malih slova). Na primer Web stranica kontakt.html i Kontakt.html su dve različite stranice. Čekirajte ovaj boks da biste bili sigurni da Dreamweaver neće zameniti jedan fajl za drugi kad bude čekirao linkove. U operativnom sistemu Windows nije moguće napraviti dva fajla kontakt.html i Kontakt.html, stoga ostavite ovo polje prazno.

Cache - Ova opcija ubrzava rad sa fajlovima u Dreamweaver-u.

Remote info

Pomoću ove opcije postavljate Dreamwever kako da pristupi udaljenom serveru. Kada otvorite Remote info, dobićete jedan padajući meni pod imenom Access. Ponuđeno vam je šest opcija:

Page 11: Adobe Dream Weaver CS4

None - Izaberite ovu opciju ako ne želite da postavljate vaš sajt na Internet ili ako ćete kasnije postaviti udaljeni server.

FTP - Ovo je najčešći izbor, odabira File Transfer Protocol program koji je ugrađen u Dreamweaver za pristup udaljenom serveru.

Local/Network - Ako imate lokalni server na vašem računaru (na primer Wamp), izabraćete ovu opciju. WebDAV - Ova opcija koristi WebDAV protokol za komunikaciju sa udaljenim serverom. Potrebno je da udaljeni

server podržava ovaj protokol. RDS - Ova opcija koristi Remote Development Service koji je podržan samo od strane ColdFusion servera. MicrosoftVisual SourceSafe - Ova opcija zahteva pristup Microsoft Visual Source Safe bazi podataka.

Testing Server

Selektovanjem ove opcije dobijamo dva padajuća boksa Server model i Access. Ovo je najbitniji dijalog boks kod kreiranja dinamičkih Web sajtova u Dreamweaver-u. Ako pogrešno postavite neku opciju, Dreamweaver neće moći da komunicira sa vašom bazom podataka.

Version Control

Version Control opcija Subversion se ponaša kao neka vrsta baze podataka čuvajući projektne fajlove u različitim fazama razvoja. Umesto da presnimi originalni fajl, ova baza podataka čuva snimak (engl. Snapshot) svake etape rada na fajlu.

Cloacking

Ako želite da čuvate izvorne Photoshop ili Flash fajlove u Root folderu vašeg sajta, ova opcija vam omogućava da sakrijete te fajlove i izuzmete ih od bilo kojih operacija u okviru Dreamweaver-a.

Design Notes

Postoji nekoliko svrha ove opcije. Jedna je da se čuvaju beleške o individualnim fajlovima. Ovo se uglavnom koristi kada tim učestvuje u razvoju Web sajta pa različiti članovi tima mogu da ostave belešku koja se tiče određenog fajla. Takođe, Dreamweaver automatski kreira Design Notes gde čuva informacije o povezanim fajlovima, sinhronizaciji fajlova i lokalno kreiranim varijablama. Po difoltu Design Notes su omogućene i Dreamweaver ih kreira u skrivenom folderu _notes unutar većine foldera vašeg sajta. Ako ne želite Design Notes, možete ih isključiti tako što ćete deselktovati Maintain Design Notes.

File View Columns

Ova opcija vam omogućava da podesite izgled Files panela.

Contribute

Kada kreirate sajt koji će koristiti Adobe Contribute Software, morate omogućiti ovu opciju.

Templates

Ova opcija je za kompatibilnost sa starijim verzijama Dreamweaver Template-a. Po difoltu je omogućena i tako treba i da ostane.

Spry

Adobe Ajax Framework, Spry ima biblioteke koda koji se moraju poslati na udaljeni server. Po difoltu Dreamweaver ih smešta u folder Spry Assets u Root Folderu vašeg sajta. Ovaj folder za Spry biblioteke koda možete ovde definisati.

Page 12: Adobe Dream Weaver CS4

Modul: Kontrola web sajta, pravljenje novih dokumenata, struktura sajta i rad sa tekstom

Autor: Vasil Miloševski

Naziv jedinice: Kreiranje novih dokumenata i svojstva novog dokumenta

Materijali vezani uz ovu lekciju:

- Test kreiranje novih dokumenata i svojstva novog dokumenta- Kreiranje novih dokumenata i svojstva novog dokumenta (PDF dokument)

New Documents

Dreamweaver nam omogućava, kod kreiranja novih dokumenata, nekoliko različitih tipova dokumenta, zatim nekoliko različitih načina za kreiranje novog dokumenta kao i nekoliko već dizajniranih fajlova koji vam mogu poslužiti kao polazišna tačka dizajna.

Najbrži način da se kreira novi dokument, kada se otvori Dreamweaver, jeste klikom na neku od opcija iz kolone Create New Welcome screen-a. Ako izaberete jednu od prve četiri opcije (HTML, ColdFusion, PHP, ASP VBScript), Dreamweaver otvara dokument sa DOCTYPE deklaracijom koja je setovana u Preferences panelu (ako niste promenili ovo podešavanje, otvoriće se XHTML 1.0 Transitional DOCTYPE deklaracija).

Opcija koja omogućava kreiranje novog dokumenta, a ima najviše izbora je New Document dijalog boks. Do njega se dolazi preko opcije menija fajl, a zatim klikom na New.

Ovaj dijalog boks je podeljen u nekoliko različitih kolona i u zavisnosti od toga koja kategorija je selektovana u levom delu ovog boksa, zavisiće i opcije koje će biti na raspolaganju. Postoje sledeće kategorije:

Blank Page - Ova opcija vam omogućava da izaberete jedan od 17 različitih tipova Web dokumenata. Ako izaberete <none> u Layout koloni, Dreamweaver će kreirati dokument koji će sadržati samo osnovni HTML skelet dokumenta (koji sadrži svaka Web stranica). O ostalim opcijama će kasnije bit reči.

Page 13: Adobe Dream Weaver CS4

Blank Template - Ova opcija vam omogućava kreiranje Template od samog početka (engl. From scratch). Page from Template - Kada kliknete na ovu kategoriju, izlistaće vam se svi sajtovi koje ste definisali u

Dreamweaver-u zajedno sa Template-ima koji su povezani sa svakim sajtom. Page from Sample - Ova kategorija nudi kolekciju primera CSS-a koji se mogu iskoristiti kao početna tačka

kreiranja vaših stilova. Takođe, tu je i niz Frameset-ova koji su bili popularni devedesetih godina, ali se više ne koriste zbog stvaranja problema kod upotrebljivosti Web lokacija.

Other - Ova opcija omogućava kreirnje drugih dokumenata koji su u vezi sa Web-om, uključujući i običan text fajl.

Postoji još nekoliko opcija u ovom dijalog boksu, a to je selektovanje različite od difoltne DOCTYPE deklaracije, takođe i povezivanje jednog ili više kaskadnog stila sa novim dokumentom.

Postoji još nekoliko opcija za kreiranje novog dokumenta:

Preko Standard Toolbar-a - Ovaj Toolbar ne prikazuje se po difoltu uprkos njegovom imenu. Da bi prikazali Standard Toolbar kliknućete na View u meniju aplikacije, zatim na Toolbars i izabraćete Standard. Novi dokument ćemo kreirati klikom na ikonicu New. Otvoriće nam se New Document dijalog boks.

Preko Files Panela - Otvaranjem kontekst menija kliknućete na New File. Kreiraće se nova stranica sa difoltnim tipom stranice. Ime fajla je automatski omogućeno za editovanje.

Page Properties

Iskusni Web dizajneri obično imaju osnovni set CSS pravila koji primenjuju na sve sajtove pa jedino što treba da urade je da povežu taj CSS fajl sa Web stranicama. Drugi način je da odmah otvore novi CSS dokument i krenu sa pisanjem pravila od samog početka.

Ako nemate toliko iskustva sa CSS-om, Page Properties dijalog boks vam nudi jednostavan interfejs za kreiranje osnovnih stilova koji se automatski primenjuju na celu stranicu. Uz podešavanje osnovnih CSS pravila ovaj interfejs vam omogućava i promenu DOCTYPE deklaracije i Encoding tekuće stranice.

Page Properties dijalog boks se otvara preko dugmeta Modify iz menija aplikacije ili pomoću prečice Ctrl+J.

Na levoj strani ovog dijalog boksa se nalazi šest kategorija:

Appearance (CSS) - Ova opcija setuje osnovni Font, boju teksta i pozadinu stranice. Appearance (HTML) - Ova opcija setuje izgled pozadine stranice, stil linkova i margine uz korišćenje

neodobravanih HTML atributa. Ovu opciju ne bi trebalo koristiti za nove stranice, osim ako postoji specifičan razlog za korišćenje HTML atributa umesto CSS (na primer za kreiranje HTML email Newsletter-a).

Page 14: Adobe Dream Weaver CS4

Links (CSS) - Ova opcija vam omogućava podešavanje fonta i boja hiperlinkova. Opcije boja su ekvivalentne sledećim pseudo klasama u CSS-u.

o Link color – a:linko Visited links – a:visitedo Rollover links – a:hovero Active links – a:activ

Underline style opcija vam dozvoljava da izaberete da li će vaši linkovi biti uvek podvučeni, nikad, samo kada prelazite mišem preko linka ili možete izabrati opciju da sakrijete podvučenu liniju kada prelazite mišem preko linka.

Heading (CSS) - Ova opcija vam omogućava da setujete font za naslove, zatim veličinu i boju za svaki nivo naslova posebno.

Title/Encoding - Ovde vam je omogućeno da promenite naslov stranice, DOCTYPE deklaraciju, Encoding. Tracing Image - Neki dizajneri vole da koriste sliku kao vodič za postavljanje Layout-a stranice. Ova opcija vam

omogućava da dodate tu sliku stranici i da kontrolišete njenu providnost. Važno je da znate da ta slika nije deo stranice i da se ne prikazuje u čitaču.

Page 15: Adobe Dream Weaver CS4

Modul: Kontrola web sajta, pravljenje novih dokumenata, struktura sajta i rad sa tekstom

Autor: Vasil Miloševski

Naziv jedinice: Ubacivanje teksta u Dreamweaver, importovanje Word dokumenata

Materijali vezani uz ovu lekciju:

- Test ubacivanje teksta u dreamweaver, importovanje word dokumenata- Ubacivanje teksta u Dreamweaver, importovanje Word dokumenata (PDF dokument)

HTML je strukturni Markup jezik i njegov osnovni zadatak je da opiše logičku strukturu elemenata na stranici, kao što je tekst, tako da logika Web stranice bude jasna svakom korisniku ili uređaju koji je čita. Za formatiranje teksta HTML koristi oznake na nivou bloka (engl. Block Level), koje se primenjuju na delove teksta i time ukazuju na ulogu tog teksta na Web stranici. Pored oznaka na nivou blokova koriste se i oznake na nivou karaktera koje se primenjuju na reč ili na nekoliko reči u okviru bloka. Time se te reči ističu u odnosu na ostali deo teksta.

Oznake za strukturno označavanje teksta su:

p – paragraf h1 do h6 – naslovi od nivoa jedan do nivoa šest ul, li – neuređena lista sa stavkama ol, li – uređena lista sa stavkama blockquote – paragraf sa tekstom pod navodnicima dl, dt, dd – lista definicija sa terminima i definicijama termina

Oznake na nivou karaktera:

em – italik strong – bold

Ubacivanje teksta u Dreamweaver

Tekst se u Dreamweaver-u kreirara kucanjem ili prebacivanjem iz nekog drugog programa. Funkcije za kucanje, editovanje ili selektovanje teksta su iste kao u programima za editovanje teksta.

Tekst možete dodati ili u Design ili Code prikazu. U Design prikazu postavite kursor na mesto gde želite da dodate tekst i počnite da kucate. U Code prikazu možete dodati tekst bilo gde unutar Body Tag-a, uključujući i unutar ćelija tabela, DIV Tag-ova, SPAN Tag-ova.

Copy i Paste

Kada, na primer, kreirate Web sajt za klijenta, u većini slučajeva ćete dobiti tekst u nekom tekst procesoru. Otvorićete taj tekst, kopirati ga i zatim „nalepiti“ (pomoću opcije Paste) u Dreamweaver. Dramweaver će sačuvati većinu, ako ne i svo formatiranje teksta, a postoji i opcija da izaberete koliko ćete formatiranja zadržati.

U Preferences panelu možete postaviti ponašanje opcije Paste.

Page 16: Adobe Dream Weaver CS4

Postoje sledeće opcije:

Text only - Samo tekst u bukvalnom smislu, svako formatiranje je izuzeto. Text with structure (paragraphs, lists, tables, etc) - Ova opcija će pored teksta ostaviti i naslove, pasuse, tabele,

liste i drugo strukturno označavanje. Text with structure plus basic formatting (Bold, Italic) - Ova opcija će ostaviti Bold i Italic formatiranje. Text with structure plus full formatting (Bold, Italic, Styles) - Ova opciija konvertuje fontove, boje i druge

stilove u CSS fajl. Rezultat u Design prikazu je impresivan, ali CSS fajl je noćna mora. Nemojte koristiit ovu opciju. Mnogo je bolje da izaberete Text with structure plus basic formating pa da napišete svoj CSS fajl.

Retain line brakes - Ovaj kvadratić za izbor uključenja/isključenja opcije nam omogućava da odredimo da li će razmaci između linija biti prikazani ili ne.

Clean up Word paragraph spacing - Ova opcija izbacuje ekstra liniju između paragrafa u tekstu dodatom iz Microsoft Word-a.

Postoji još jedna opcija za prebacivanje teksta, a to je Paste Special. Dobija se preko dugmeta Edit u meniju aplikacije. Ona se koristi ako želite neku drugu Paste opciju, a ne želite da menjate difoltne opcije. Otvara se sledeći prozor:

Page 17: Adobe Dream Weaver CS4

Importovanje Microsoft Word dokumenata

Dreamweaver ima opciju za importovanje Word dokumenata direktno u Document prozor. Ovo je dosta slična opcija kao i Copying i Pasting.

Da biste importovali Word fajl, kliknućete na File->Import->Word Document.

Otvara se Import Word Document dijalog boks. Dreamweaver podržava importovanje i fajlova sa .doc i .docx ekstenzijom. Pri dnu prozora Formatting padajući boks nudi iste opcije koje su dostupne i kod Copy/Paste kategorije u Preferences panelu.

Page 18: Adobe Dream Weaver CS4

Importovanjem Word dokumenta dobijamo isti rezultat kao i kod Copy/Paste opcije, jedina razlika je što ne morate da otvarate Word dokument kako bste uneli njegov sadržaj na Web stranicu.

Page 19: Adobe Dream Weaver CS4

Modul: Rad sa slikama, flash-om i video fajlovima, linkovi u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Tipovi image fajlova (jpg, gif, png), ubacivanje image fajlova, Assets u Dreamweaver-u

Materijali vezani uz ovu lekciju:

- Test tipovi image fajlova (jpg, gif, png), ubacivanje image fajlova, assets u dreamweaver-u- Tipovi image fajlova (jpg, gif, png), ubacivanje image fajlova, Assets u Dreamweaver-u (PDF dokument)

Računarske slike javljaju se u dva glavna oblika, kao

Bitmapirane (rasterske) slike Vektorske slike

Web podržava bitmapirane slike formata JPG, GIF i PNG.

JPG format (Joint Photographic Experts Group) koristi .jpg ili .jpeg ekstenziju. Ovaj format ne podržava providnost (engl. Transparency) niti animaciju, ali je odličan za komprimovanje fotografija. U programima za obradu slika možete izabrati koliku degradaciju kvaliteta ćete tolerisati u zamenu za manju veličinu fajla.

GIF (Graphic Interchange Format) se pretežno koristi za male slike, jer se sa njim ne gube detalji, ali je ograničen na 256 boja. GIF-ovi su odlični za tehnički crtež i za slike na kojima se pojavljuje tekst. GIF-ovi mogu da pamte 2,4,16... boja, pa se može dosta uštedeti na veličini prilikom kreiranja slika. GIF fajlovi se kompresuju horizotalno, tj. ukoliko na GIF slici piksel ima malu varijaciju boja u horizontalnom pravcu, mnogo lakše se transformiše u manju veličinu. GIF format podržava providnost i animaciju.

Svaka pojedinačna boja u GIF slici može da postane „providna", omogućujući tako pozadini da se vidi. Ovakve slike se nazivaju providnim GIF-ovima. GIF slika može da bude sastavljena od više pojedinačnih slika koje se redom smenjuju, dajući utisak kretanja. Ovakve slike se nazivaju animiranim GIF-ovima.

PNG (Portable Network Graphic), još jedan format podržan od strane novijih Web čitača, a kombinuje funkcionalnosti gif-a i jpeg-a. Ovaj reasterski format za slike koristi kompresiju bez gubitka i zamišljen je kao format za razmenu preko interneta. Koristi samo RGB i sistem boja u sivim tonovima.

Postoje dva tipa formata:

PNG-8, sadrži 8-bitnu informaciju o bojama (slično GIF-u). PNG-24, sadrži 24-bitnu informaciju o bojama (slično JPEG-u).

PNG-8 ne podržava animaciju, ali podržava transparentnost i to mnogo bolje nego GIF, dok PNG-24 je ekvivalentan JPEG-u i poseduje sličnu kompresiju.

Assets panel

Najjednostavniji način za ubacivanje slika u Dreamweaver (ako pretpostavimo da je slika unutar vašeg sajta) jeste da prevučete sliku ili iz Files panela ili iz Assets panela. Da biste koristili Assets panel, morate smestiti sve optimizovane slike za Web sajt u Images folder koji se nalazi u Root folderu vašeg sajta.

Assets panel sortira elemente sajta u devet kategorija kojima se pristupa klikom na jednu od ikonica na levoj strani panela.

Images - U ovoj kategoriji se nalaze svi jpg, png i gif fajlovi i prikazane su njihove dimenzije, veličina i putanja do njihovog mesta na računaru.

Colors - Ova kategorija prikazuje sve boje koje su specificirane na vašem sajtu uključujući i pozadinske boje, boju teksta i linkova.

Page 20: Adobe Dream Weaver CS4

Links - Ovde su prikazani svi linkovi, ne samo eksterni http:// nego i email linkovi, FTP adrese i JavaScript linkovi.

Multimedia - Flash, Shockwave i Movies - svaka kategorija prikazuje movie fajl sa odgovarajućom ekstenzijom .swf (Flash), .dcr (Shockwave) i .mpg ili .mov (Quick Time i MPEG)

Scripts - Ova kategorija prikazuje JavaScript fajlove, i to eksterne skript fajlove ka kojima Web stranica ima linkove (na primer, JavaScript fajlovi koji su deo Spry Framework-a, koji su prikačeni za stranicu kada koristite Spry Widget-e ili efekte). U ovoj kategoriji nisu prikazani JavaScript fajlovi koji su ugnježdeni u Web stranicu (na primer kada koristite Dreamweaver Behaviors).

Templates i Library - Poslednje dve kategorije biće objašnjene u nekom od sledećih modula.

Možete se prebacivati iz Site u Favorites prikaz kategorije i obrnuto tako što ćete kliknuti na radio dugme na vrhu panela. Site opcija prikazuje sve elemente izabrane kategorije koji se nalaze na Web sajtu. Favorites opcija vam daje mogućnost da kreirate listu vaših najvažnijih elemenata i elemenata koje najviše koristite.

Kada kliknete na neku sliku, u gornjem delu panela se prikazuje Tumbnail slike, zatim dimenzije slike, veličina, tip i cela putanja do slike. Ako se odlučite da editujete sliku pre nego što je ubacite na sajt, možete kliknuti na Edit dugme u donjem desnom uglu panela da bi vam se otvorila difoltna grafička aplikacija.

Sliku možete ubaciti na Web stranicu iz Assets panela tako što postavite kursor na stranici gde želite da ubacite sliku, zatim obeležite sliku i kliknete na dugme Insert.

Ako importujete dodatni image fajl na Web sajt, da biste videli i taj fajl u Assets panelu, morate da kliknete na Refresh Site List dugme u donjem desnom uglu panela.

Page 21: Adobe Dream Weaver CS4

Modul: Rad sa slikama, flash-om i video fajlovima, linkovi u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Ubacivanje flash fajlova i video fajlova

Materijali vezani uz ovu lekciju:

- Test ubacivanje flash fajlova i video fajlova- Ubacivanje flash fajlova i video fajlova (PDF dokument)

Dreamweaver olakšava posao unosa Flash fajlova, muzičkih i video fajlova, usklađuje atribute koji određuju kako će ti medija fajlovi biti prikazani na Web stranici i tamo gde je primenljivo, Dreamweaver daje mogućnost promene načina na koji korisnik interaguje sa tim fajlovima.

Flash fajlovi

Postoji nekoliko tipova Flash fajlova koje možete ubaciti na Web stranicu:

.fla (Flash fajlovi ili Flash filmovi) - Ovo su originalni, editabilni izvorni Flash fajlovi za kreiranje .swf fajlova. .swf fajlovi - Ovo su kompresovane, prenosive verzije .fla fajlova koje se mogu prikazati u Dreamweaver-u i

pustiti u rad u Web čitačima. Flash buttons i Flash text isto koriste .swf fajlove. Ovi fajlovi nemaju mogućnost editovanja kao originalni .fla fajlovi.

.swt fajlovi - Ovo su Flash Template-i koji vam omogućavaju da promenite informacije u .swf fajlovima. Na primer, dugme koje je kreirano u Flash-u može koristiti .swt fajl koji će vam omogućiti da generišete više dugmadi sa različitim tekstom.

.swc fajlovi - Ovo su specijalni SWF fajlovi koji se koriste za Rich Internet Applications. .flv fajlovi (Flash video fajlovi) - Ovi fajlovi sadrže enkodirane audio i video podatke koji omogućavaju da ih

besplatni Flash Player pušta na Web stranicama.

Ubacivanje Flash filmova

Pre nego što ubacite Flash fajlove u Dreamweaver, morate ih prvo kreirati u Flash aplikaciji i snimiti sa swf ekstenzijom. Ubacivanje Flash filmova je jako slično kao i ubacivanje slika. Međutim prateći kod se dosta razlikuje.

Da biste ubacili swf fajl u Dreamweaver, postavite kursor na mesto gde želite da ubacite fajl, zatim kliknite na Insert dugme u meniju aplikacije, zatim Media pa SWF.

Page 22: Adobe Dream Weaver CS4

Otvoriće se Object Tag Accessibility Attributes dijalog boks gde možete da ubacite naslov filma, Acces key i Tab index. Sva tri atributa su opciona, ali je dobra praksa da date bar ime filmu. Ako kliknete na Cancel, film će se ipak insertovati na stranicu za razliku od Image fajlova, gde kada kliknete Cancel, slika se ne ubacuje na stranicu.

Po difoltu Dreamweaver prikazuje Placeholder za SWF fajl:

Page 23: Adobe Dream Weaver CS4

Da biste videli kako izgleda film zajedno sa sadržajem stranice, kliknite na Placeholder u dizajn prikazu. U Property Inspector-u kliknite na Play dugme.

Flash film će se pokrenuti u dizajn prikazu:

Takođe, možete kliknuti i na Live view da vidite kako će stranica izgledati u Web čitaču. Obavezno kliknite na dugme Stop u Property Inspector-u kada završite sa pregledom swf fajlova jer taj pregled troši resurse računara.

Page 24: Adobe Dream Weaver CS4

Kao što vidite Property Inspector ima dosta opcija gde možete kontrolisati podešavanje Flash filmova. U levom gornjem uglu prikazuje se tip fajla i veličina, odmah ispod je polje u kome se nalazi ID atribut <object> Tag-a. Dreamweaver automatski dodeljuje vrednost FlashID za prvi ubačeni swf objekat. Svi naredni objekti koji se ubacuju dobijaju FlashID2, FlashID3 itd.. Ovo polje je editabilno tako da možete da upišete vaš ID.

Ostale opcije u Property Insspector-u:

Weight i Hight - Širina i visina filma u pikselima. Ova polja se automatski popunjavaju kada ubacite swf objekat, mada ih vi možete promeniti ubacivanjem drugih vrednosti.

File - Ovo polje prikazuje punu putanju do swf objekta. Metica vam omogućava da prevučete objekat iz Files panela, a folder ikonica da selektujete objekat putem Select swf Object dijalog boksa.

Src - Ovo polje specificira lokaciju originalnog .fla fajla koji je korišćen u kreiranju swf objekta. Bg - Ova opcija unosi parametar u <object> Tag i setuje pozadinsku boju swf objekta (boja koja se prikazuje u

pozadini filma). Edit - Ova opcija otvara .fla fajl za editovanje, ali da bi radila, src polje mora biti popunjeno. Class - Omoguća vam da primenite CSS klasu na <object> Tag. Loop - Ova opcija je automatski potvrđena, deselektujte je ako ne želite da se film prikazuje u kontinuitetu. Autoplay - Ova opcije je takođe automatski potvrđena, deselktujte je ako ne želite da se film automatski pokrene

kada se Web stranica prvi put prikazuje. V Space i H space - Ova opcija insertuje neodobravane (nisu XHTML standard) atribute u <object> Tag.

Postavljaju vertikalan i horizontalan prostor oko filma. Najbolje je ove atribute dodeliti preko CSS-a. Quality - Ova opcija kontroliše izgled filma za vreme plejbeka. Postoje sledeća podešavanja:

o High - Postavlja najbolji kvalitet filma, ali zahteva dosta procesorske snage. o Low - Selektujte ovu opciju ako vam je mnogo bitnija brzina prikazivanja nego kvalitet filma.o AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali žrtvuje izgled ako je potrebno više

brzine.o AutoLow - Prioritet je na brzini, ali kad god je moguće popravlja kvalitet filma.

Scale - Određuje kako se film prikazuje u već određenim H i W dimenzijama.o Default (Show All) - Ceo film se prikazuje sa svojih 100%.o No Border - Bilo koji delovi filma koji se pružaju preko podešenih W i H dimenzija su isečeni.o Exact Fit - Sabija film u specificirane dimenzije bez obzira na originalnu veličinu filma.

Align - Postavlja poravnanje filma relativno u odnosu na stranicu. Wmode - Ova opcija postavlja Wmode filma u prozoru čitača, što preventuje konflikte sa DHTML elementima kao

što su Spry Widgets. Postoje sledeće opcije: o Window - Forsira swf iznad svih elemenata stranice.o Opaque - Difoltna opcija, dozvoljava DHTML objektima kao što su na primer padajući meniji da se

korektno prikazuju preko filma.o Transparent - Forsira DHTML elemente da se prikazuju ispod filma.

Parameters - Otvara dijalog boks sa nizom parametara koje možete postaviti samo ako je film kreiran tako da prihvata te parametre.

Dreamweaver postavlja svetlo plavi Tab iznad swf objekta u dizajn prikazu sa ikonicom otvorenog oka u desnom uglu Tab-a. Kada kliknete na tu ikonicu, otvara se alternativni sadržaj koji će se prikazati ako korisnik nema najnoviju verziju Flash Player-a. Možete ili editovati ili obrisati ovaj sadržaj.

Da biste zatvorili ovaj prikaz, kliknite na ikonicu sada zatvorenog oka.

Ubacivanje Flash video fajlova

Flash video fajl je drugačiji od regularnog swif objekta jer ima .flv ekstenziju što vam omogućava da dodate već gotov film na Web stranicu. Potrebno je samo da enkodirate druge formate video fajlova u .flv format i insertujete ga tako što ćete kliknuti na Insert stavku u meniju aplikacije, zatim na Media, zatim na FLV opciju. Ova opcija vam omogućava da

Page 25: Adobe Dream Weaver CS4

unesete .flv fajl bez korišćenja Flash aplikacije i omogućava da Web čitači pokrenu unešeni video sa prikazanim playback kontrolama. Otvoriće se Insert FLV dijalog boks sa malo drugačijim opcijama u zavisnosti da li za Video Type birate Progressive Download ili Streaming Video.

Page 26: Adobe Dream Weaver CS4

Modul: Rad sa slikama, flash-om i video fajlovima, linkovi u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Kreiranje linkova

Materijali vezani uz ovu lekciju:

- Test kreiranje linkova- Kreiranje linkova (PDF dokument)

Kreiranje tekstualnih linkova

Tekstualni linkovi se mogu kreirati od jedne reči, rečenice, pasusa ili čak cele stranice teksta. Da biste ubacili tekstualni link u Dreamweaver, pozicioniraćete kursor na stranici gde želite link i kliknućete na Insert dugme u meniju aplikacije, a zatim ćete izabrati opciju Hyperlink, otvoriće vam se Hyperlink dijalog boks.

Postoje sledeće opcije:

Text - U ovo polje unesite tekst od koga želite da napravite link. Link - Ovde unosite putanju do dokumenta na koji linkujete. Ako je dokument u okviru istog sajta, onda upisujete

samo ime fajla (kontakt.html), a ako linkujete na stranicu van sajta, unosite celu URL adresu. Target - Birate u kom će se prozoru otvoriti nova stranica.

o _blank - Otvara se u novom prozoru.o _self - Otvara se u istom prozoru.o _parent - Opcija za sajtove koje koriste Frame-ove.o _top - Opcija za sajtove koje koriste Frame-ove.

Title - Ovde unosite opis linka. Naslov se pokazuje u nekim čitačima kao Tool tip kada korisnik prelazi mišem preko linka. Dobra praksa je da se ovo polje popuni jer doprinosi boljoj pristupačnosti i može pomoći u boljem rankiranju i indeksiranju kod Web pretraživača.

Access key - Unesite jedno slovo sa tastature pomoću kog ćete moći u kombinaciji sa Alt Tab-om da selektujete link na Web stranici i pritiskom na Enter taj link će vas odvesti na linkovanu stranicu.

Tab index - Unesite broj za redosled Tab-a ovog linka relativno u odnosu na druge linkove na stranici.

Klikom na OK Dreamweaver će kreirati link, a kod će izgledati na sledeći način:

<a href="http://www.it-akademija.com" title="IT Akademija" accesskey="e" tabindex="2"> IT Akademija </a>

Korišćenje slika kao linkova

Page 27: Adobe Dream Weaver CS4

Da biste kreirali link od slike, selektujte sliku u Design prikazu, zatim u Property Inspector-u u polju Link unesite putanju. Kada dodate link slici, pojavljuje se plava linija oko slike koja ukazuje na link. Ova linija se može ukloniti tako što ćete postaviti Border na 0 u Property Inspector-u.

<a href="http://www.it-akademija.com"><img src="Portal/images/logo.png" alt="logo" width="298" height="75" border="0" /></a>

Kreiranje email linkova

Da biste kreirali email link u Dreamweaver-u, kliknite na Insert dugme u meniju aplikacije, zatim izaberite Email Link, otvoriće vam se Email Link dijalog boks.

U Text polje unećete tekst koji će se pojaviti kao link u čitaču, na primer [email protected] ili kontakt. U E-Mail polje unećete email adresu.

Dreamweaver će uneti sledeći kod:

<a href="mailto:[email protected]" >Kontakt</a>

Imenovana sidra

Kreiranje imenovanog sidra zahteva nekoliko stvari:

1. Unos sidra na mesto do koga želite da linkujete, zatim imenovanje tog sidra.2. Pravljenje linka koji pokazuje na to sidro koje ste upravo kreirali.

Ako, na primer, imate stranicu na Web sajtu „Pitanja i odgovori“ i ako želite da izlistate prvo sva pitanja, a zatim i odgovore ispod pitanja, tekst na stranici bi izgledao otprilike ovako:

1. Pitanje2. Pitanje3. Pitanje4. Pitanje5. Pitanje6. Pitanje

1. Odgovor na prvo pitanje2. Odgovor na drugo pitanje3. Odgovor na treće pitanje4. Odgovor na četvrto pitanje

Page 28: Adobe Dream Weaver CS4

5. Odgovor na peto pitanje6. Odgovor na šesto pitanje

Da bi linkovali svako pitanje sa svojim odgovorom, napravićete sidro ispred svakog odgovora i linkovati ga za odgovarajuće pitanje. Ovaj tip linka se zove imenovano sidro (engl. Name Anchor) jer koristi Name atribut u <a> Tag-u.

Da biste kreirali imenovano sidro u Dreamweaver-u, postavićete u dizajn prikazu kursor na mesto gde želite da unesete sidro, kliknućete na Insert dugme u meniju aplikacije, a zatim ćete izabrati Named Anchor. Otvoriće se Named Anchor dijalog boks.

Unećete ime sidra u polje Named Anchor i Dreamweaver će generisati sledeći kod:

<a name="Odgovor1" id="Odgovor1"></a>

Sledeći korak je linkovanje tog sidra za odgovarajuće pitanje. Da bi se kreirao link ka imenovanom sidru, umesto kao putanja ka imenu fajla ili URL adresi, link se piše kao #Odgovor1 (simbol funte, a zatim ime sidra). Kod bi izgledao:

<a href="#Odgovor1" >Odgovor na pitanje br.1</a>

Ako linkujemo sa neke druge stranice na sidro na stranici pitanja i odgovori, link bi izgledao:

<a href="pitanja-i-odgovori.html#Odgovor1" >Odgovor na pitanje br.1</a>

Page 29: Adobe Dream Weaver CS4

Modul: CSS

Autor: Vasil Miloševski

Naziv jedinice: CSS Styles panel, kontrolisanje CSS-a sa Property Inspector–om

Materijali vezani uz ovu lekciju:

- Test css styles panel, kontrolisanje css-a sa property inspector–om- CSS Styles panel, kontrolisanje CSS-a sa Property Inspector–om (PDF dokument)

Centralno mesto za manipulisanje, kontrolu i kreiranje stilova i listi stilova je CSS Styles panel. Ako panel nije vidljiv otvorićete ga preko dugmeta Window u meniju aplikacije, zatim ćete kliknuti na CSS Styles.

Postoje dva režima rada u CSS Styles panelu:

All - Ovaj režim rada prikazuje sve CSS stilove primenjene na tekući dokument, bilo da su eksterni CSS fajlovi ili ugnježdeni u Head sekciji dokumenta. Kada kliknete na All dugme dobićete dva panoa:

o All rules - U ovom delu se prikazuju svi CSS fajlovi po hijerarhiji u vidu Tree menija koji su zakačeni za ili se nalaze unutar trenutno otvorenog dokumenta. Ako se nalaze u Head sekciji dokumenta (Embeded stil ili ugnježden stil), onda se prikazuje kao <style> Tag, a ako su eksterni, tada se prikazuje ime CSS fajla.

Page 30: Adobe Dream Weaver CS4

o Properties - Kada se selektuje stil u gornjem All panou, ovde se prikazuju specifični atributi tog stila. Ovde možete brzo promeniti svojstva ili dodati novo svojstvo preko Add Property linka.

Current - Ovaj režim rada je mnogo moćniji, ali i kompleksniji, tako da se početnicima preporučuje prvo rad u All režimu. Omogućava detaljni prikaz pravila primenjenih na selektovani element. Klikom na ovo dugme CSS Styles panel se deli na tri dela:

o Summary for selection - Ovde se prikazuje kratak sadržaj atributa trenutno selektovanog stila.o About/Rules - U ovom delu se prikazuju dva načina rada: About, gde se prikazuje informacija o

selektovanom svojstvu i Rules koji prikazuje ime stila i Tag u kodu na koji je selektovani stil primenjen. Promena iz jednog načina u drugi način rada se vrši preko dva dugmeta u gornjem desnom uglu.

o Properties - Donji deo panoa prikazuje atribute selektovanog stila u formatu za editovanje. takođe možete dodati nova svojstva preko Add Property linka.

Na dnu CSS Styles panela se nalaze dugmad koja su dostupna u oba režima rada.

U levom delu panela se nalaze tri opcije:

Show Category View - Deli CSS na devet kategorija, Font, Background, Block, Border, Box, List, Positioning, Extensions i Tables, Content i Quotes. Svojstva svake kategorije su prikazana u formatu liste koja se može proširiti klikom na znak plus. Svojstva u svakoj kategoriji su poređana po alfabetu sa primenjenim svojstvima prikazanim na vrhu u plavoj boji.

Page 31: Adobe Dream Weaver CS4

Show List View - Prikazuje CSS svojstva u alfabet opadajućem nizu sa primenjenim svojstvima u plavoj boji prikazanim na vrhu.

Show Only Set Properties - Difoltna opcija, prikazuju se samo svojstva koja su primenjena.

U desnom delu panela imamo četiri opcije:

Attach Style Sheet - Ova opcija otvara Attach External Style Sheet dijalog boks za selektovanje eksternog CSS fajla koji želite da linkujete ili importujete u tekući dokument. Media polje ćete uobičajeno ostaviti prazno jer će onda Web čitači primeniti CSS fajl na sve sredine (medijume). Takođe, možete kreirati poseban fajl za različite svrhe, na primer za mobilne uređaje ili za štampanje. Ako napravite CSS fajl za štampanje, izabraćete opciju Print iz padajućeg menija.

New CSS Rule - Ova opcija otvara New CSS Rule dijalog boks za biranje tipa selektora, imena i određivanje lokacije za novo CSS pravilo.

Edit Rule - Otvara se CSS Rule Definition dijalog boks za selektovani stil u dokumentu. Delete CSS Rule - Briše selektovano svojstvo ili pravilo iz CSS fajla.

Kontrolisanje CSS-a sa Property Inspector-om

Property Inspector u Dreamweaver-u CS4 vam omogućava da manipulišete CSS pravilima. Jedna od najvažnijih stvari pre nego što promenite bilo koje CSS pravilo u Property Inspector-u je da znate šta to pravilo radi. Postoji više opcija u Property Inspector-u čijom promenom ne utičete na samo jedan element na stranici iako vam, na primer, ta opcija nudi manipulaciju samo jednim elementom.

U Property Inspector-u kliknite na CSS dugme da bi se otvorile opcije za manipulaciju CSS-om.

Postoji nekoliko polja u CSS prikazu Property Inspector-a:

Targeted Rule - Prikazuje na koje će pravilo uticati bilo koje promene urađene u CSS prikazu. Takođe i kontroliše koje će pravilo biti editovano klikom na Edit Rule dugme.

CSS panel - Ovo dugme otvara CSS panel.

Page 32: Adobe Dream Weaver CS4

Sledeći set opcija omogućava promenu svojstva atributa vezanih za tekst. Ovde morate voditi računa na šta će sve uticati vaše promene. Ako želite da napravite samo lokalnu promenu, selektovaćete element na stranici na koji želite da primenite CSS stil i opcija Targeted Rule će se pretvoriti u <New CSS Rule>. Zatim, ako pokušate da unesete neke promene u Property Inspector-u, otvoriće se New CSS Rule dijalog boks.

Page 33: Adobe Dream Weaver CS4

Modul: CSS

Autor: Vasil Miloševski

Naziv jedinice: CSS pozicioniranje: Box model, Floats

Materijali vezani uz ovu lekciju:

- Test css pozicioniranje: box model, floats- CSS pozicioniranje: Box model, Floats (PDF dokument)

Box Model

Da biste razumeli pozicioniranje elemenata na stranici pomoću CSS-a, potrebno je prvo da razumete Box Model. Da bi se lakše predstavili, u ovoj lekciji svi elementi u dokumentu su dati kao pravougaoni boks čiji je sadržaj okružen: marginama, Padding i ivicama.

Box Model se sastoji od pet osnovnih svojstava elemenata: Width, Height, Margin, Padding, Border i Background koji tehnički nije deo Box modela, ali se često uključuje. Margine su uvek transparentne i odvajaju element od drugih elemenata na stranici, okviri (Borders) mogu biti različitih stilova i definišu granice elementa. Padding odvaja sadržaj elementa (Content) od njegovih okvira. Background podešavanja elementa se odnose na oblast unutar okvira zajedno sa Padding i Content delom. U cilju ilustrovanja Box Modela, Padding deo je prikazan u nešto tamnijoj sivoj boji.

Margins, Borders i Padding su opcioni atributi, ali zbog kalkulisanja pozicije i veličine, ako nije drugačije specificirano, svi imaju difoltnu širinu 0. Za svaku stranicu (Top, Bottom, Left, Right) mogu biti postavljene različite vrednosti širine. Margine mogu imati i negativnu vrednost.

Boks može da sadrži i više drugih bokseva, kreirajući hijerarhiju bokseva što predstavlja ugnježdene elemente stranice. Prozor čitača u ovoj hijerarhiji predstavlja Root element.

Postoje dva osnovna tipa bokseva: Block i Inline.

P, DIV i TABLE elementi generišu block bokseve dok B, I, SPAN Tag-ovi i konkretni sadržaj (tekst i slike) generišu Inline bokseve. Takođe tip boksa može biti određen korišćenjem svojstva Display. Ako na primer, svojstvu Display Inline elementa dodelimo vrednost Block, tada će taj element biti tretiran kao Blok element. Boks neće biti kreiran ako svojstvu Display dodelite vrednost None. U tom slučaju, čitač će se ponašati kao da element ne postoji. Takođe i bilo koji ugnježdeni elementi unutar tog elementa neće biti prikazani iako im je dodeljena neka druga Display vrednost.

Postoje tri načina pozicioniranja ili tri šeme: Normal, Float i Absolute. Svaki način ima svoj set pravila.

Normal Flow

Page 34: Adobe Dream Weaver CS4

Normal Flow je difoltni način rada kod pozicioniranja. Primenjuje se na bilo koji element koji nema specificiranu poziciju Absolute ili Fixed i koji nije Floated. Blok boksevi su pozicionirani jedan ispod drugog po vertikali dok su Inline boksevi pozicionirani po horizontali, s leva na desno.

Vertikalne margine kolapsiraju u Normal Flow-u. To znači da se umesto sabiranja vrednosti margina gornjeg i donjeg boksa računa samo margina koja je veća - kao što je ilustrovano na slici ispod.

Horizontalne margine nikad ne kolapsiraju.

Floats

Floating se ostvaruje preko svojstva Flaot sa vrednostima levo i desno. Kada se dodeljuje Float svojstvo element je vertikalno pozicioniran isto kao što bi bio u Normal Flow-u, dok je horizontalno pozicioniran skroz na levu ili desnu stranu koliko je moguće unutar svog bloka u kome je sadržan. Okolni Inline sadržaj je tada pozicioniran na suprotnoj strani.

Sledeći kod i slika ilustruju Floated element koji je definisan kao deo Inline teksta.

<p><span style=“float:right;width:30%;“>content…</span>content content content content content content content…</p>

Page 35: Adobe Dream Weaver CS4

Float svojstvo može biti postavljeno na: Left, Right,Nnone ili Inherit. boks kome je dodeljeno svojstvo trebalo bi da ima definisanu širinu, inače će popuniti svoj sadržajni blok horizontalno kao i da nema dodeljeno svojstvo Float i neće ostaviti mesta za drugi sadržaj da se pozicionira okolo.

Za razliku od bokseva u Normal Flow-u vertikalne margine Floated elemenata nikada ne kolapsiraju sa marginama elemenata iznad ili ispod. Flaoted boks može da preklopi susedne Block Level Boxes u Normal Flow-u. Sledi primer koda i slika gde Flaoted element ima mnogo više teksta nego njegov sadržajni blok.

<p><span style=“float:right;width:30%;“>content content content content content content contentcontent content content content content content content…</span>content content content content content content </p><p>content content content content content contentcontent content content content content content </p>

U ovom slučaju možete primetiti da se Floated boks preklapa preko svog Parent boksa i boksa koji dolazi posle njega. Ovo se može izbeći dodavanjem svojstva Clear.

Postavićemo clear:right drugom boksu. Ovo pravilo će ga pomeriti na dole odmah ispod Floated boksa.

<p><span style=“float:right;width:30%;“>content content content content content content contentcontent content content content content content content…</span>content content content content content content </p><p style=“clear:right;“>content content content content content content

Page 36: Adobe Dream Weaver CS4

content content content content content content </p>

Floated boks i dalje se preklapa sa boksom na vrhu, ali tako je namerno urađeno u cilju demonstracije. Ovo preklapanje bi bilo izbegnuto kada bismo Floated element postavili izvan p taga. Time bismo dozvolili da oba paragrafa budu pozicionirana oko Floated elementa.

<span style=“float:right;width:30%;“>content content content content content content contentcontent content content content content content content…</span>

<p>content content content content content content</p>

<p>content content content content content content</p>

Page 37: Adobe Dream Weaver CS4

Modul: CSS

Autor: Vasil Miloševski

Naziv jedinice: Slojevi i CSS Layout

Materijali vezani uz ovu lekciju:

- Test slojevi i css layout- Slojevi i CSS Layout (PDF dokument)

Slojevi (Layers) su strukturni elementi Web stranice. Služe kao kontejneri za razne elemente i možete ih postaviti bilo gde na Web stranici. U kodu dokumenta obično su obeleženi <div> Tag-om i mogu da sadrže slike, tekst, JavaScript, Flash movies itd. Takođe se nazivaju i Layout objektima jer ih možete postaviti bilo gde na stranici uključujući i jedne povrh drugih, takođe i jedne unutar drugih. Te mogućnosti vam omogućavaju dizajniranje veoma zanimljivih Web sajtova. Možete ih načiniti vidljivim ili sakrivenim, možete ih stilizovati preko CSS-a, ugnjezditi jedne unutar drugih, poređati ih po određenom redu.

Zbog svoje fleksibilnosti slojevi su postali novo rešenje za mnoge kompleksne Web Layout-e. Većina Web čitača ih podržava, a jako mali procenat starijih verzija ih ne podržava. U svakom slučaju ako želite da podržite i starije čitače postoji opcija Convert u Dreamweaver-u kojom možete konvertovati slojeve u Layout zasnovan na tabelama.

Koncept slojeva

Slojevi su Block Level elementi i predstavljaju, kako smo već rekli, kontejnere koji mogu da sadrže tekst, grafiku, Flash fajlove, bilo koje veličine i koji pomoću CSS-a mogu biti pozicionirani bilo gde na Web stranici.

U Dreamweaver-u postoji dva tipa slojeva koje možete nacrtati ili ubaciti u dokument: regularni <div> Tag i AP Div, koji je kontrolisan pomoću AP Elements panela.

Oba tipa slojeva se ubacuju u dokument preko Insert dugmeta u meniju aplikacije, zatim odabirom opcije Layout Objects, a zatim i odabirom tipa slojeva: Div Tag ili AP Div.

Page 38: Adobe Dream Weaver CS4

Kada kliknete na opciju Div Tag, otvoriće vam se Insert Div Tag dijalog boks.

Postoje sledeće opcije:

Insert - Ovde određujete tačku gde ćete ubaciti Tag. Postoje više opcija:o At insertion point - Odabirom ove opcije sloj se ubacuje na mesto kursora u dokumentu.o After start of Tag - Odabirom ove opcije otvara se polje na desnoj strani gde birate posle kog početnog

Tag-a elementa ćete ubaciti sloj. Na primer ako izaberete Body Tag, Dreamweaver će uneti sledeći kod u dokument.

<body><div>Content for New Div Tag Goes Here</div><p>neki content</p> </body>

o Before end of Tag - Odabirom ove opcije otvara se polje na desnoj strani gde birate posle kog završnog Tag-a elementa ćete ubaciti sloj. Na primer ako izaberete Body Tag, Dreamweaver će uneti sledeći kod u dokument.

Page 39: Adobe Dream Weaver CS4

<body><p>neki content</p><div>Content for New Div Tag Goes Here</div></body>

Ako već postoji neki sadržaj na stranici koji želite da postavite u sloj, selektovaćete taj sadržaj i automatski će se otvoriti nova opcija u Insert Div Tag dijalog boksu:

o Wrap around selection - Ova opcija postavlja div Tag oko selekcije. Class - Ova opcija dodeljuje već postojeću CSS klasu div elementu. ID - Ova opcija dodeljuje ID atribut div elementu. New CSS Rule - Klikom na ovo dugme možete da kreirate novu klasu ili ID u vašem CSS fajlu i dodelite ih vašem

div elementu dok ga unesete u dokument.

Takođe, div Tag možete ubaciti u dokument preko Insert panela klikom na Insert Div Tag.

Kada ubacujete AP Div u vaš dokument, Dreamweaver automatski unosi unutrašnji CSS u Head sekciju dokumenta, sa veličinom i pozicijom elementa. U kodu dokumenta se unosi div Tag sa atributom ID <div id=“ApDiv1“></div>, takođe postavlja se i marker u AP Elements panou.

Page 40: Adobe Dream Weaver CS4

Svaki sledeći AP element koji se unosi, dobija automatski ID sa vrednošću ApDiv2, ApDiv3, ApDiv4... Ove vrednosti možete promeniti u Ap Elements panou ili u Property Inspector-u.

AP Div možete i nacrtati u dizajn prikazu dokumenta pomoću opcije Draw AP Div koja se nalazi u Layout kategoriji Insert panela.

CSS Layout

Dreamweaver ima u sebi 32 ugrađena CSS Layout-a. Kada pravite novi dokument klikom na New u File padajućem meniju, otvara se New Document dijalog boks.

Page 41: Adobe Dream Weaver CS4

Kategorija Layout sadrži kako smo već rekli 32 CSS ugrađena layout-a koji pokrivaju već uobičajene dizajne Web stranica - stranice sa jednom, dve ili tri kolone, sa i bez Footer-a i Header-a. Ovi Layout-i su testirani u svim čitačima i predstavljaju solidnu osnovu za razvoj Web sajta.

Postoje četiri vrste širina kolona koje možete da izaberete:

Elastic - Širina je definisana u em-ovima tako da se postepeno smanjuje ili povećava u odnosu na Font. Fixed - Širina je definisana u pikselima. Liquid - Širina je definisana u procentima. Hybrid - Glavna kolona je definisana u procentima, a sporedna u em-ovima.

Page 42: Adobe Dream Weaver CS4

Modul: Tabele, forme i šabloni

Autor: Vasil Miloševski

Naziv jedinice: Formulari

Materijali vezani uz ovu lekciju:

- Test formulari- Formulari (PDF dokument)

Formulari su odličan alat za sakupljanje informacija od posetilaca Web sajta. Formulari dozvoljavaju korisnicima da pošalju komentare i pitanja, zatraže neku informaciju, prijave se za Newsletter, popune Online aplikaciju ili unesu informacije za plaćanje kako bi kupili neki proizvod.

Pre nego što krenete sa kreiranjem formulara, razmislite koje ćete podatke prikupljati i kako ćete logički organizovati podatke tako da formular bude lako razumljiv i da korisniku bude lako kretanje kroz njega. Takođe pokušajte da dužina frormulara bude što kraća i od posetilaca tražite samo one informacije koje su vam stvarno potrebne, inače se može desiti da korisnici odustanu od posete.

Kada posetilac Web sajta unese podatke u formular i klikne na Pošalji ili Submit dugme, ti podaci moraju negde da odu na procesiranje. To se vrši preko Server-Side skripti ili posebnih programa. Formulari se obično procesiraju pomoću PHP, ASP, CGI i ColdFusion skripti. Kada procesira podatke, skripta vraća nazad informacije korisniku tako što ga pošalje na stranicu gde se zahvaljuje za prijavljivanju (Thank you stranica) ili šalje email direktno na specificiranu email adresu.

Pre nego što počnete da pravite formulare, proverite sa administratorom servera na kom planirate da postavite svoj sajt, koja se tehnologija skriptovanja koristi. CGI (Common Gateway Script) skriptovi pisani u Perlu su najčešće podržani.

Kreiranje formulara

Da biste kreirali formular u Dreamweaver-u, postavićete kursor na mesto gde želite da unesete formular. Kliknućete na Insert dugme u meniju aplikacije, zatim ćete izabrati opciju Form, zatim opet Form. Drugi način je preko Insert panela, izabraćete kategoriju Form i kliknućete na Form dugme.

Page 43: Adobe Dream Weaver CS4

Ako se nalazite u Code prikazu, otvoriće se Tag editor – Form dijalog boks.

Ako se nalazite u Design prikazu, Dreamweaver će uneti crvenu isprekidanu liniju u obliku pravougaonika, a u Code prikazu sledeći kod.

<form id="form1" method="post" action=""></form>

Page 44: Adobe Dream Weaver CS4

Property Inspector će prikazati opcije za formular.

Form ID - U ovom polju unesite jedinstveno ime formulara. Action - U ovom polju unosite ima skripte koja će procesirati formular. Kliknite na folder ikonicu da biste pronašli

lokaciju skripte. Na primer dosta formulara koristi CGI skripte koje se nalaze na serveru unutar CGI foldera. Method - Ovde birate kojim ćete metodom poslati serveru sakupljene podatke iz formulara.

o Default - Ova opcija koristi difoltna podešavanja čitača da bi poslala informacije sa formulara. Difoltni metod je obično, ali ne i uvek GET metod. Zato je bolje da specificirate ili GET ili POST metod, a ne difolt.

o GET - Podaci iz fome se ovom opcijom šalju na server kao dodatak URL-u. Pošto je omogućen Bookmarking kod ovog URL-a, tada su i informacije podložne napadima hakera. Pošto URL može da ima maksimum 8192 karaktera, ovaj metod nije podesan za duže formulare.

o POST - Ovaj metod krije podatke formulara unutar HTTP zahteva čime se sprečava Bookmarking stranice. Ipak podaci nisu šifrovani i stoga su podložni napadima hakera, tako da ako sakupljate personalne informacije kao što su korisnička imena, lozinke ili brojevi kreditnih kartica, budite sigurni da koristite bezbednu konekciju do sigurnog servera.

Enctype - Ovo polje je opciono i po difoltu je prazno. Za POST metod izaberite application/x-www-form-urlencoded ili kada imate File upload polje u formularu izaberite Multipart/form-data tip.

Target - Omogućava da odredište bude drugi prozor ili ram (Frame) u odnosu na tekući. U tom drugom prozoru ili ramu se prikazuje HTML strana koja se dobija nakon obrade podataka.

Formulare možete organizovati na stranici pomoću tabela ili preporučljivo pomoću CSS-a.

U formulare možete ubacivati objekte kao što su tekstualna polja, polja za potvrdu, radio dugmad, Submit dugmad itd. Takođe, unutar formulara možete ubacivati i elemente koji nisu vezani za formulare kao što su slike, tekst ili tabele.

Svaki objekat formulara ima svoje opcije u Property Inspector-u. Posebnu pažnju treba obratiti na imena objekata formulara, pošto skript koji obrađuje tu formu može zahtevati određene konvencije u imenovanju. Ne treba koristiti razmake i specijalne karaktere. Zatim, nije loše da koristite imena koja jasno identifikuju ulogu frormulara ili objekta formulara. Korisno je da napravite svoje konvencije za zadavanje imena i pridržavajte se toga. Ili nemojte uopste koristiti velika slova, ili ih koristite na konzistentan način, ili koristite povlake između reči ili ih spajajte zajedno. Na taj način ćete lakše upamtiti imena koja zadajete i izbeći greške u kucanju. Takođe, treba da znate da skrptovi koji se koriste za procesiranje formulara imaju rezervisane reči, koje imaju specijalno značenje, a koje mogu dovesti do problema.

Page 45: Adobe Dream Weaver CS4

Modul: Tabele, forme i šabloni

Autor: Vasil Miloševski

Naziv jedinice: Behaviors

Materijali vezani uz ovu lekciju:

- Test behaviors- Behaviors (PDF dokument)

1997. godina je poznata po „ratu browser-a“ između Microsoft-a i Netscape-a. Obe kompanije su se borile za dominantnost na tržištu izbacujući nove karakteristike koje su bile nekompatibilne sa karakteristikama njihovih rivala. Samim tim su predstavljali glavobolje za bilo koga ko je pokušao da koristi Java Script ne bi li dodao dinamičke karakteristike na Web stranicama, kao što su Image replacement, Rollovers, validacija korisničkog unosa. Ono što je radilo u Internet Explorer-u nije radilo u Netscape-u i obrnuto. Dreamweaver je izašao kao spasilac sa svojom ponudom preinstaliranih Behavior-a koji su rešili nedoslednosti i nekompatibilnosti.

Client-side Java Script ili Behaviors u Dreamweaver-u izvršavaju se u čitačima klijenta i kombinacija su događaja i akcije prouzrokovane tj. izazvane događajem.

Događaji su postupci koje korisnik obavlja da bi interagovao sa Web stranicom (ili stvari koje se dešavaju na stranici bez interakcije korisnika, na primer kada se stranica otvara u čitaču) što izaziva Action Script koji prozrokuje neke promene na stranici. Akcije su delovi skripta koji izvršavaju određene zadatke kao, na primer, otvaranje drugog prozora čitača, prikazivanje poruke u status baru čitača, promena slike kod Rollover dugmeta ili skrivanje i prikazivanje sloja.

Korišćenje standardnih Dreamwever Behaviors-a

Instalacija Dreamweaver-a dolazi sa oko 20 predinstaliranih ponašanja (engl. Behaviors) koje možete da koristite kako biste ugnjezdili Client Side Java Script kod u vaš dokument. Većina ovih skripti dozvoljava korisniku da interaguje sa sadržajem na vašoj stranici. Behaviors su tipično sastavljeni od događaja i akcija koje pokreću te događaje.

Behaviors se mogu dodati na Web stranicu koristeći Behaviors Panel. Svi imaju svoj dijalog boks koji vas vodi kroz proces unosa potrebnih podataka. Da biste otvorili Behaviors panel, kliknite na Windows dugme u meniju aplikacije i izaberite opciju Behaviors. U Dreamweaver-u CS4 Behaviors panel je ugnježden sa Attributes panelom unutar Tag Inspector panela.

Page 46: Adobe Dream Weaver CS4

Behaviors panel postaje aktivan kada imate otvoren dokument u prozoru radnog prostora. Da biste saznali nešto više o već primenjenim ponašanjima, selektujete element ili Tag na koji je primenjen Behavior na Web stranici, i on će se pojaviti u listingu Behaviors panela. Kada se događaj sastoji od više akcija, one su izazvane prema redu u kome se nalaze na listi. Tipično Behaviors su pridodati Tag-ovima za tekst, slike, ali možete i da ih primenite na <body> elemente, linkove, polja formulara.

Meni akcija u Bahaviors panelu se dobija klikom na + dugme. Tada će se izlistati sva presetovana ponašanja.

Page 47: Adobe Dream Weaver CS4

Dva faktora utiču na to koja će ponašanja biti dostupna, a koja nedostupna:

1. Koji objekat ili element na stranici je selektovan pre nego što kliknete na + dugme.2. Koji čitač je slektovan na dnu Actions menija u opciji Show Events For. Čitač koji je selektovan određuje koji su

događaji podržani i prema tome prikazuje akcije koje su dostupne.

Kako se dodaje Behavior (ponašanje)?

Dodavanje Behavior-a elementu u Dreamweaver-u je prilično jednostavno i sastoji se iz nekoliko koraka. Najkraće rečeno, selektujete objekat ili tekst na stranici, izaberete Behavior u Behaviors panelu, popunite polja u dijalog boksu tog Behavior-a koje ste izabrali i proverite da li Event Hendler odgovara vašim potrebama.

Editovnje i brisanje Behavior-a se vrši u Behaviors panelu desnim klikom miša na Behavior.

Drag AP Element Behavior

Ako koristite AP Div slojeve na vašim Web stranicama, postoji jedan interesantan Behavior Drag AP Element koje omogućava da posetioci Web sajta pomeraju i repozicioniraju ove slojeve u prozoru čitača. Ovo je odličan Behavior koji može da se iskoristi u kreiranju interaktivnih igrica, puzli i drugih interfejs kontrola. Ovo ponašanje omogućava da korisnici vuku slojeve gore, dole, levo, desno i dijagonalno u prozoru čitača. Pored ostalih stvari možete i postaviti ciljnu destinaciju za sloj i odrediti da li će se taj lejer privuću cilju (Snap to target) prema specificiranom broju piksela.

Da biste dodali ovo ponašanje na vašem Web sajtu potrebno je da:

Unesite AP div lejer u dokument. Insert>Layout Objects>AP Div Selektujte <body> Tag da biste primenili ovaj Behavior. Kliknite na + znak u Behaviors panelu i izaberite opciju Drag AP Element. Otvoriće se Drag AP Element dijalog

boks koji se sastoji od dva taba: Basic i Advanced.

U Basic Tab-u selektujete AP element na kome ćete primeniti Behavior. Zatim određujete da li će pomeranje biti ograničeno (kada želite da kontorlišete kretanje) ili neograničeno (kod puzli i igrica na primer). Ako izaberete Constrained tj. ograničeno, tada ćete uneti vrednosti u pikselima za parametre: gore, dole, levo i desno. Zatim ćete uneti za levo i gore polje vrednosti u pikselima za željenu krajnju poziciju sloja, relativno u odnosu na gornji desni ugao čitača. Snap if within _ Pixels of drop target je opciono polje, ali možete uneti vrednost u pikselima ako želite da se lejer privuče za već određenu krajnju

Page 48: Adobe Dream Weaver CS4

destinaciju kad se približi za unetu vrednost u ovo polje. Na primer, ako uneste 10 px u ovo polje, i krenete da vučete lejer po stranici, kada se približite na 10 px od krajnje pozicije, lejer će se automatski privući.

U Advance tabu možete postaviti dodatne parametre i pozvati JavaScript za sloj.

Postoje sledeće opcije:

Drag handle - Po difoltu je selektovana opcija Entire element što znači da se ceo sloj ponaša kao ručica za povlačenje. Ako želite da samo jedan deo sloja predstavlja ručici za povlačenje, unesite kordinate u pikselima u polja Left, Top, Width, Height

While dragging Bring the element to front, then...Ako čekirate ovu opciju, dok povlačite sloj preko prozora čitača, možete da izaberete da li ćete ostaviti taj sloj povrh svih elemenata ili ćete vratiti Z-index.

Call Java Script - Ovde unesite ako želite JavaScript kod koji će se izvršavati dok se sloj povlači. When dropped Call Java Script - Unsite kod za dodatni JavaScript koji će se izvršiti kada sloj dođe do ciljne

pozicije ili kada se pusti. Only if snapped - Ako je ova opcija čekirana, Java Script se izvršava jedino kada sloj stigne do ciljne pozicije.

Kliknite na OK da biste sačuvali promene i zatvorili Drag AP Element dijalog boks.

Page 49: Adobe Dream Weaver CS4

Modul: Kodiranje u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Code Inspector, Code toolbar i korišćenje code hint-a

Materijali vezani uz ovu lekciju:

- Test code inspector, code toolbar i korišćenje code hint-a- Code Inspector, Code toolbar i korišćenje code hint-a (PDF dokument)

Code Inspector možete otvoriti tako što ćete izabrati Windows dugme iz menija aplikacije, a zatim kliknuti na Code Inspector, takođe i prečicom F10 sa tastature. Code Inspector vam omogućava da vidite tekući kod stranice u posebnom prozoru.

Dostupne opcije su većinom opcije koje takođe postoje u prozoru Code prikaza dokumenta.

Coding Toolbar

Po difoltu Coding Toolbar je prikazan na levoj strani dokumanta u Code prikazu stranice. Takođe je dostupan u Code Inspector-u i nalazi se isto na levoj strani prozora. Coding Toolbar se ne može otkačiti i premestiti na neko drugo mesto, ali se može isključiti preko opcije View->Toolbars->Coding.

U Coding Toolbar-u postoje sledeće opcije:

Open Documents - Kada kliknete na ovo dugme, izlistaće vam se svi trenutno otvoreni dokumenti zajedno sa njihovim putanjama. Ovo je korisna opcija ako imate više otvorenih File-ova sa istim imenom, pa preko putanje možete lako odrediti koji je File. Klikom na njega on postaje dostupan. Nije više potrebno da pogađate File.

Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za prikazivanje liste CSS pravila koja su primenjena na selektovani element na stranici zajedno sa detaljnim kodom koji dobijate u vidu Pop up prozora kada pređete mišem preko određenog pravila. Kada kliknete na neko od pravila u Code Navigator-u, otvara vam se CSS File sa postavljenim kursorom tačno na početak tog pravila.

Page 50: Adobe Dream Weaver CS4

Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi vaš kursor i kolapsira sav kod koji je u njemu.

Collapse Selection - Ova opcija kolapsira selektovani kod. Expand All - Kliknite na ovu opciju da biste proširili sve kolapsirane sekcije. Select Parent Tag - Ova opcija selektuje Parent tag trenutno selektovanog elementa ili elementa gde god je kursor

trenutno lociran. Balance Braces - Ova opcije selektuje ceo kod koji se nalazi unutar zagrada, vitičastih zagrada i ugaonih zagrada. Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija u Code prikazu. Highlight Invalid Code - Dreamweaver ističe žutom bojom nekorektno ugnježdene Tag-ove. Ovo dugme

uključuje/isključuje žutu boju u Code prikazu. Difoltna opcija je OFF. Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute trake na vrhu prozora

dokumenta. Ovo dugme uključuje/isključuje ovu opciju. Apply Comment Tag - Ova opcija omogućava unos različitih tipova Comment Tag-ova u tekuću liniju ili

selekciju. Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz tekuće linije ili selekcije. Wrap Tag - Ova opcija omogućava brz način za primenu Tag-a oko tekuće selekcije. Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippet-i iz Snippets panela. Move or Convert CSS - Ova opcija omogućava brzo prebacivanje CSS pravila u CSS File. Indent Code - Ova opcija pomera otvoreni Tag elementa u desno. Tab dugme ima istu ulogu. Outdent Code - Ova opcija pomera otvoreni Tag elementa u levo (Shift + Tab). Format Source Code - Kada kliknete na ovo dugme, otvara se meni sa opcijama pomoću kojih možete da

primenite difoltno formatiranje na stranicu ili trenutno selektovan kod, zatim imate brz pristup kategoriji Code Format u Prefernces panelu. Tag Library Editor vam omogućava kontrolu nad formatiranjem svakog HTML elementa u vašem kodu.

Code Hint

Po difoltu Dreamweaver prikazuje Content-sensitive code Hint-ove u Code prikazu. Na primer, ako krenete da otvarate ugaonu zagradu posle otvorenog <body> Tag-a, otvoriće se sadržajni meni i prikazaće vam sve validne HTML Tag-ove. Možete skrolovati dole da biste pronašli odgovarajući Tag i dvoklikom na njega uneti ga u kod dokumenta. Druga opcija je da nastavite sa kucanjem, na primer ako unosite div Tag, ukucajte slovo d zatim i, selektovaće se div u meniju, pritisnite Enter na tastaturi i Tag će biti unesen u dokument.

Page 51: Adobe Dream Weaver CS4

Kada pritisnete Space bar na tastaturi, otvoriće se drugi Context meni, samo što će ovog puta prikazati sve validne atribute za tekući element. Ako unosite ID elemente, Dreamweaver će uneti id=““ i postaviti kursor između znaka navoda da biste vi uneli vrednost za ID. Ako unosite klasu koja je već definisana u CSS-u, Dreamweaver će automatski prikazati sve dostupne klase koje možete da izaberete. Context meni nastavlja da se pojavlju sve dok ne zatvorite ugaonu zagradu. Ako se slučajno ovaj meni izgubi, pritisnite Ctrl + Spacebar da bi se opet pojavio.

Page 52: Adobe Dream Weaver CS4

Modul: Kodiranje u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Kompatibilnost sa raznim čitačima

Materijali vezani uz ovu lekciju:

- Test kompatibilnost sa raznim čitačima- Kompatibilnost sa raznim čitačima (PDF dokument)

Izveštaj kompatibilnosti vašeg Web sajta sa raznim čitačima (Browser Compatibility Report) podrazumeva testiranje vaših HTML i CSS dokumenata i pronalaženje Tag-ova ili atributa koji su nedozvoljeni (kao na primer <b>, <i>, <font> ili <center>) i nepodržani od strane ciljanih čitača (kao na primer Height atribut <table> Tag-a u Firefox-u 1, Netscape 7 i 8 ). Ova vrsta testiranja je drugačija od pregleda stranice u čitaču koji pokazuje samo kako će stranica izgledati u čitaču.

Kada prepravite greške koje su se pojavile u izveštaju, pokrenite opet Browser Compatibilty Report da biste bili sigurni da vaše ispravke nisu prouzrokovale neke druge greške.

Pre nego što pokrenete Browser Compatibility Report podesite ciljane čitače za vaš izveštaj tako da će se greške u izveštaju pokazati za čitače koje vi želite.

Podešavanje ciljanih čitača

Možete podesiti da se vaš kod testira u nekoliko različitih čitača bez obzira da li te čitače imate instalirane na vašem računaru. Na primer, ako radite na PC računaru, možete podesiti da se vaš sajt testira za Internet Explorer 5.2 na Mac računaru.

Otvorite Results panel, selektujete Browser Compatibility i kliknite na zeleno Play dugme, zatim izaberite Settings, otvoriće se Target Browsers dijalog boks.

Ako već nisu čekirana polja ispred imena čitača, čekirajte ih i podesite minamilanu verziju čitača desno od imena čitača. Za Firefox minimalna verzija je 1.5, za Internet Explorer 6.0, Internet Explorer za Macintosh 5.2, za Netscape 8.0, za Operu 8.0, za Safari 2.0.

Pokretanje izveštaja

Browser Compatibility Report se nalazi u Results Panelu, karitica Browser Compatinility. Kliknite na zeleno Play dugme i pokrenuće se izveštaj.

Page 53: Adobe Dream Weaver CS4

Kada pokrenete Browser Compatibility Report, on skenira tekući fajl i prikazuje potencijalne CSS greške u vidu kruga koji je skroz popunjen, ¾ polupopunjen ili ¼ popunjen. ¼ popunjen krug ukazuje na moguće pojavljivanje problema (Bug-a), a pun krug na veoma moguće pojavljivanje. Za svaki potencijalni Bag Dreamweaver obezbeđuje direktni link ka dokumentaciji na CCS Advisor-u gde možete pronaći i rešenje za ispravljanje greške.

Kao što smo već rekli, možete ga pokrenuti za tekući dokument, za ceo sajt ili samo za selektovane stranice iz Files panela. Ovaj izveštaj definiše tri nivoa problema:

Greške (Errors) - Prikazane su kao crveni krug sa belim znakom uzvika unutar tog kruga. Identifikuje problem koji može da izazove loše prikazivanje stranice u ciljanim čitačima ili neke nepodržane tagove koji potencijalno mogu da izazovu probleme.

Upozorenja (Warnings) - Prikazana su kao žuti krug sa belim znakom uzvika unutar tog kruga. Upozorenje ukazuju da deo koda nije podržan od strane čitača, ali verovatno neće izazvati neke dodatne ili ozbiljne probleme u prikazivanju.

Informacione poruke (Informational messages) - Prikazane su kao beli balon i ukazuju da deo koda nije podržan od strane određenog čitača, ali to nema nikakav vidljiv efekat.

Sada će Results panel izgledati ovako:

Na element koji predstavlja problem kliknućete jednom i u desnom delu Results panela prikazaće se razlog problema i na koje sve čitače će uticati. Ako želite da vidite gde se u dokumentu nalazi problem, uradićete dvoklik na određeni problem u Results panelu. Ako želite da pređete sa problema na sledeći problem ili da se vratite na prethodni problem u dokumentu, kliknućete na Check Page dugme u Document toolbar-u i izabrati Next Issue ili Previous Issue.

Page 54: Adobe Dream Weaver CS4

Modul: Kodiranje u Dreamweaver-u

Autor: Vasil Miloševski

Naziv jedinice: Publikovanje Web sajta i sinhronizacija fajlova

Materijali vezani uz ovu lekciju:

- Test publikovanje web sajta i sinhronizacija fajlova- Publikovanje Web sajta i sinhronizacija fajlova (PDF dokument)

Uspešno postavljanje vašeg Web sajta leži u korektno definisanim Remote informacijama o kojima je bilo reči u prošloj nastavnoj jedinici. Dreamweaver otprema fajlove koristeći istu hijerarhiju foldera kao i u Files panelu.

U Files panelu postoji Site Management meni i Site View padajući meni.

Site View meni nam omogućava prebacivanje iz četiri moguća prikaza Web sajta:

Local - Selektujte ovaj prikaz da biste videli strukturu Web sajta u Files panelu. U proširenom prikazu (Extended View) ova opcija je prikazana u vidu dugmeta Site Files.

Remote - Selektujte ovu opciju da biste videli strukturu fajlova i foldera udaljenog Web sajta. Testing server - Ova opcija je dostupna ako ste podesili testing server i lista sve foldere i fajlove koji se nalaze na

testing serveru. Repository - Ova opcija prikazuje fajlove i foldere u skladištu kada radite sa Subversion control sistemom.

Da pogledamo koje su još opcije dostupne u Site Management meniju, a tiču se menadžmenta Web sajta.

Connect/Disconnect - Ova opcija vam omogućava konektovanje/diskonektovanje sa udaljenim serverom. Ako je FTP konekcija, Dreamweaver se sam diskonektuje posle 30 minuta neaktivnosti. Idle time (vreme neaktivnosti) možete podesiti u Preferences panelu, kategorija Site.

Refresh - Ova opcija osvežava i lokalne i udaljene fajlove. Get Files - Preuzimanje kopija selektovanih fajlova i foldera iz Files panela na udaljenom sajtu u vaš lokalni Root

folder. Svi fajlovi koji su postojali u lokalnom Files panelu će biti prekopirani za vreme ovog procesa. Put Files - Ova opcija postavlja kopije selektovanih fajlova i foldera iz Files panela lokalnog sajta na udaljeni

server ili testing server. Fajlovi sa istim imenom na serveru bivaju prekopirani sa novijom verzijom iz lokalnog sajta.

Check Out Files - Ova opcija je dostupna samo kada koristite Check In/Check Out sistem. Kliknite na ovo dugme da biste preuzeli kopiju selektovanog fajla sa remote servera na vaš lokalni sajt. Ako ovaj fajl već postoji u lokalnom sajtu, ova opcija će prekopirati lokalnu verziju fajla. Kada je fajl kopiran u lokalni sajt, fajl na serveru je markiran kao Checked out i mala zelena Check Mark ikonica će se pojaviti pored imena fajla u Files panelu.

Check In Files - Ova opcija je takođe dostupna samo kada koristite Check In/Check Out sistem. Kliknite na ovo dugme da biste postavili kopiju selektovanog fajla sa lokalnog sajta na remote server. Kada je fajl kopiran, fajl u lokalnom folderu je markiran kao Checked In i mala katanac ikonica će se pojaviti pored imena fajla u Files panelu kao indikacija da fajl ima Read-Only status.

Synchronize - Ovo dugme vam omogućava da pokrenete proces sinhronizacije o kome će kasnije biti reči. Expand/Collapse - Ova opcija prebacuje Files panel iz kolapsiranog u prošireni prikaz i obratno. U kolapsiranom

prikazu možete videti Local, Remote, Repository ili Testing server prikaz. U proširenom prikazu možete videti listing svih foldera i fajlova i lokalonog i udaljenog sajta. Po difoltu lokalni sajt se nalazi na desnoj strani prozora, ali možete modifikovati ova podešavanja u Site kategoriji Preferences panela. U Extend načinu rada se pojavljuje i ceo red opcija na vrhu panela koje vam pomažu u transferu fajlova sa remote servera i na remote server.

Page 55: Adobe Dream Weaver CS4

Postavljanje Web sajta

Najlakši način da postavite ceo sajt je da selektujete Root folder u Files panelu i kliknete na dugme Put (plava strelica sa pravcem na gore).

Ako niste još uvek definisali udaljeni server, prikazaće se sledeći dijalog boks koji će vas pitati da li želite da definišete Remote server.

Ako ste već definisali Remote info, pojaviće se sledeći dijalog boks koji vas pita da li ste sigurni da želite da postavite ceo sajt.

Page 56: Adobe Dream Weaver CS4

Klikom na OK dugme Dreamweaver će pokrenuti postavljanje celog sajta.

Kada želite da preuzmete fajlove sa remote servera, selektovaćete željene fajlove i kliknuti na Get Files dugme.

Sinhronizacija fajlova

Sinhronizacija se vrši preko opcije Synchronize Sitewide (Site -> Synchronize Sitewide). Otvoriće se Synchronize Files dijalog boks.

Imate sledeće opcije:

Synchronize - Izaberite od dve ponuđene opcije:o Entire Menaged Site - Izaberite ovu opciju da biste sinhronizovali sve fajlove selektovanog sajta.o Selected Local Files Only - Izaberite ovu opciju kada želite da sinhronizujete samo selektovane fajlove

Web sajta. Direction

o Put Newer Files To Remote - Ova opcija postavlja fajlove koji su ažurirani od poslednjeg postavljanja, zajedno sa novim fajlovima koji su kreirani i nema ih još uvek na udaljenom serveru.

o Get Newer Files From Remote - Ova opcija preuzima fajlove sa Remote servera koji su bili ažurirani od poslednjeg preuzimanja, zajedno sa novim fajlovima kojih još uvek nema u lokalnom folderu.

o Get And Put Newer Files - Postavlja najnovije verzije fajlova zajedno sa fajlovima koji nedostaju i na udaljeni folder i u lokalni folder.

Delete remote files not on local drive - Selektujte ovu opciju ako želite da Dreamweaver obriše fajlove na udaljenom serveru koji se ne nalaze u lokalnom folderu.

Preview - Ova opcija vam daje pregled liste fajlova koji se ažuriraju.

Kliknite na OK da bi se pokrenula sinhronizacija. Ako su fajlovi sinhronizovani, Dreamweaver će izbaciti poruku da sinhronizacija nije potrebna - u suprotnom će uraditi sinhronizaciju.