Svari koje nikada nećete videti

Transcription

DREAMWEAVER MX 2004
Fakultet organizacionih nauka
Dreamweaver MX 2004
SADRŽAJ
1. POBOLJŠANJA U NOVOJ VERZIJI.........................................................................................................................8
GENERALNA POBOLJŠANJA VEZANA ZA INTERFEJS ........................................................................................................................8
Kategorije kod grupe objekata.....................................................................................................................................8
Integrisani pano Site ...................................................................................................................................................9
Palete vezane za dokumente.......................................................................................................................................10
Tag Inspector..............................................................................................................................................................10
Poboljšani meni Window............................................................................................................................................12
POBOLJŠANJA VEZANA ZA RAD SA DOKUMENTIMA.....................................................................................................................12
Poboljšano uređivanje tabela.....................................................................................................................................12
Bolja integracija provere dokumenta.........................................................................................................................13
Integrisano rukovanje grafikom.................................................................................................................................13
POBOLJŠANJA VEZANA ZA CSS.............................................................................................................................................14
CSS integracija...........................................................................................................................................................14
Poboljšana podrška za CSS2......................................................................................................................................15
POBOLJŠANJA VEZANA ZA KOD...............................................................................................................................................16
POBOLJŠANJA VEZANA ZA RUKOVANJE SAJTOM.........................................................................................................................17
POBOLJŠANJA VEZANA ZA RAD SA DINAMIČKIM PODACIMA.........................................................................................................18
2. RADNI PROSTOR DREAMWEAVERA..................................................................................................................19
IZBOR RADNOG PROSTORA.....................................................................................................................................................19
Poređenje radnih prostora.........................................................................................................................................19
Promena radnih prostora...........................................................................................................................................20
STRANA START...................................................................................................................................................................21
RAD SA PANOIMA................................................................................................................................................................22
Panoi i grupe panoa...................................................................................................................................................22
Prikazivanje i sakrivanje............................................................................................................................................23
Pričvršćivanje i odvezivanje panoa............................................................................................................................24
Grupisanje i pregrupisavanje.....................................................................................................................................25
Paleta Insert i Property Inspector..............................................................................................................................25
RAD SA PROZOROM DOCUMENT.............................................................................................................................................26
Vezivanje i odvezivanje..............................................................................................................................................26
Pregled dokumenata...................................................................................................................................................27
Statusna linija.............................................................................................................................................................28
PALETE..............................................................................................................................................................................31
Paleta Standard..........................................................................................................................................................31
Paleta Document........................................................................................................................................................31
POMOĆ..............................................................................................................................................................................31
General Assistance: Pano Reference.........................................................................................................................31
Pomoć Dreamweavera...............................................................................................................................................32
3. KREIRANJE I RAD SA DOKUMENTIMA.............................................................................................................34
OSNOVNI POJMOVI VEZANI ZA KREIRANJE DOKUMENATA............................................................................................................34
Okvir za dijalog New Document................................................................................................................................34
Novo podešavanje podrazumevanih osobina dokumenta (preferences)....................................................................35
RAD SA DOKUMENTIMA........................................................................................................................................................36
Provera ispravnosti strane.........................................................................................................................................36
Provera ispravnosti HTML koda................................................................................................................................36
Provera XML dokumenata.........................................................................................................................................37
Provera rada u određenom pretraživaču...................................................................................................................37
Dostupnost Vaših strana............................................................................................................................................38
4. RAD SA TEKSTOM....................................................................................................................................................40
OSNOVE U VEZI TEKSTA........................................................................................................................................................40
Tekst u pretraživaču...................................................................................................................................................40
Tekst u Dreamweaveru...............................................................................................................................................40
PREBACIVANJE TEKSTA IZ DRUGIH PROGRAMA..........................................................................................................................40
Prednosti i nedostaci kopiranja iz drugih programa.................................................................................................40
2 / 299
Dreamweaver MX 2004
Prebacivanje teksta (i drugih objekata) iz Worda i Excela.......................................................................................42
Tabelarni podaci........................................................................................................................................................45
DEFINISANJE STRUKTURE TEKSTA ...........................................................................................................................................46
Dobra struktura teksta: Dostupnost teksta.................................................................................................................46
Prekidi linija, razmaci koji ne znače prekid i beline..................................................................................................49
Sve o listama...............................................................................................................................................................50
Prednosti koje donose specijalni karakteri................................................................................................................52
Umetanje specijalnih karaktera tokom rada..............................................................................................................52
5. RAD SA SLIKAMA.....................................................................................................................................................55
OSNOVNO O SLIKAMA..........................................................................................................................................................55
Slike u pretraživaču....................................................................................................................................................55
Slike u Dreamweaveru...............................................................................................................................................55
RAD SA SLIKAMA................................................................................................................................................................57
Dostupnost slika.........................................................................................................................................................57
Dostupnost slika u Dreamweaveru............................................................................................................................58
Integrisano uređivanje slika.......................................................................................................................................59
Slike kao pozadina......................................................................................................................................................61
Slike i struktura strane...............................................................................................................................................65
Slike u GIF formatu od jednog piksela.......................................................................................................................65
Lowsrc........................................................................................................................................................................66
Definisanje rasporeda pomoću prostora rezervisanog za sliku.................................................................................67
Integracija Dreamweavera i Fireworksa...................................................................................................................68
Ubacivanje HTML-a koji je nastao u Fireworksu.....................................................................................................69
Launch and edit..........................................................................................................................................................70
Optimizacija u letu.....................................................................................................................................................70
Proširenje Fireworksa vezano za integraciju............................................................................................................70
6. LINKOVI I NAVIGACIJA.........................................................................................................................................72
OSNOVNO O LINKOVIMA.......................................................................................................................................................72
Kako linkovi rade u pretraživaču...............................................................................................................................72
Linkovi u Dreamweaveru...........................................................................................................................................73
METODI I ALATI ZA NAVIGACIJU............................................................................................................................................75
Kotve sa imenima.......................................................................................................................................................75
Mape slika..................................................................................................................................................................76
Padajući meniji..........................................................................................................................................................77
Rollover......................................................................................................................................................................80
Linije za navigaciju....................................................................................................................................................82
RAD SA LINKOVIMA.............................................................................................................................................................85
Dostupniji linkovi.......................................................................................................................................................85
Podešavanje linkova preko CSS-a..............................................................................................................................86
Podešavanje parametara URL-a................................................................................................................................88
Linkovi na JavaScript kod..........................................................................................................................................90
7. PODEŠAVANJE GLAVNOG SADRŽAJA...............................................................................................................92
OSNOVNO O SADRŽAJU ZAGLAVLJA.........................................................................................................................................92
Kako se sadržaj zaglavlja ponaša u pretraživaču......................................................................................................92
Kako se u Dreamweaver u radi sa zaglavljem...........................................................................................................92
RAD SA OZNAKAMA META.....................................................................................................................................................93
Oznaka meta character-encoding..............................................................................................................................93
Oznaka meta i generički objekat meta.......................................................................................................................94
Ključne reči meta i njihov opis...................................................................................................................................94
Oznaka meta refresh...................................................................................................................................................96
RAD SA OSTALIM SADRŽAJEM ZAGLAVLJA................................................................................................................................97
Objekat Base i oznaka base........................................................................................................................................97
Oznake linkova i objekat Link....................................................................................................................................99
8. KREIRANJE TABELA.............................................................................................................................................100
OSNOVNO O TABELAMA......................................................................................................................................................100
Tabele u pretraživaču...............................................................................................................................................100
Tabele u Dreamweaveru..........................................................................................................................................100
RAD SA TABELAMA............................................................................................................................................................105
3 / 299
Dreamweaver MX 2004
Kontrolisanje dimenzija tabele.................................................................................................................................106
FLEKSIBILNE ŠIRINE ...........................................................................................................................................................106
Dostupnost tabela.....................................................................................................................................................106
CSS i tabele..............................................................................................................................................................109
DEFINISANJE RASPOREDA ELEMENATA NA STRANI POMOĆU TABELA............................................................................................111
Strategija rada..........................................................................................................................................................111
Tabele koje se koriste za raspored i režim Layout...................................................................................................112
9. FORME.......................................................................................................................................................................116
OSNOVNO O FORMAMA.......................................................................................................................................................116
Skriptovi za obradu formi.........................................................................................................................................116
HTML koji se nalazi iza formi..................................................................................................................................116
Kako forme funkcionišu u Dreamweaveru...............................................................................................................116
RAD SA FORMAMA.............................................................................................................................................................117
Dostupnost formi......................................................................................................................................................117
Formatiranje formi...................................................................................................................................................120
Prednosti i nedostaci obrade formi..........................................................................................................................122
10. DIZAJNIRANJE STRANA SA FREJMOVIMA..................................................................................................124
OSNOVNO O FREJMOVIMA...................................................................................................................................................124
Frejmovi u pretraživaču...........................................................................................................................................124
Frejmovi u Dreamweaveru.......................................................................................................................................124
RAD SA FREJMOVIMA.........................................................................................................................................................126
Dostupnost frejmova................................................................................................................................................126
Mogućnost pretraživanja frejmova..........................................................................................................................128
Navigacija unutar frejmova.....................................................................................................................................129
Zadržavanje strana u frejmovima............................................................................................................................132
Izlazak iz frejmova....................................................................................................................................................136
Kreativni grafički efekti koji se dobijaju preko frejmova.........................................................................................137
SVET FREJMOVA................................................................................................................................................................138
Inlajn frejmovi (iframes) u Dreamweaveru..............................................................................................................138
Exchange: Proširenje vezano za inlajn frejmove.....................................................................................................139
11. KASKADNE LISTE STILOVA (CSS)...................................................................................................................140
OSNOVE CSS-A...............................................................................................................................................................140
Kratak osvrt..............................................................................................................................................................140
Osnovni elementi CSS-a...........................................................................................................................................140
CSS u Dreamweaveru...............................................................................................................................................143
RAD SA CSS-OM..............................................................................................................................................................157
Definisanje fontova u HTML-u (i CSS-u).................................................................................................................157
Definisanje dimenzija preko CSS-a..........................................................................................................................158
CSS i dostupnost.......................................................................................................................................................159
Specifičnosti koje se postižu kontekstualnim selektorima........................................................................................159
Kako da odjednom radite sa više različitih spoljašnjih datoteka sa stilovima........................................................160
12. CSS POZICIONIRANJE, NIVOI DREAMWEAVERA I RASPORED NA STRANI.....................................162
OSNOVNO O NIVOIMA.........................................................................................................................................................162
CSS-P i nivoi u pretraživaču....................................................................................................................................162
Kako u Dreamweaveru rade nivoi...........................................................................................................................163
Dizajn nivoa u prikazu Design.................................................................................................................................166
RAD SA NIVOIMA...............................................................................................................................................................169
Nivoi kao objekti sa stilovima..................................................................................................................................169
Podrška pretraživača za nivoe.................................................................................................................................171
13. UPRAVLJANJE LOKALNIM SAJTOM..............................................................................................................172
KAKO DREAMWEAVER RUKUJE LOKALNIM SAJTOVIMA.............................................................................................................172
DEFINISANJE LOKALNOG SAJTA............................................................................................................................................172
UPRAVLJANJE SAJTOVIMA...................................................................................................................................................174
PANO SITE.......................................................................................................................................................................174
Proširivanje i sužavanje panoa Site.........................................................................................................................174
Prikaz datoteka na sajtu...........................................................................................................................................175
Prikaz Mape sajta (Site Map)...................................................................................................................................176
4 / 299
Dreamweaver MX 2004
UPRAVLJANJE DATOTEKAMA I LINKOVIMA NA SAJTU................................................................................................................178
Upravljanje datotekama i fasciklama......................................................................................................................179
Upravljanje linkovima..............................................................................................................................................179
Provera i popravka linkova......................................................................................................................................182
UPRAVLJANJE AKTIVOM PREKO PANOA ASSETS......................................................................................................................183
Umetanje elementa iz aktive.....................................................................................................................................185
Favoriti u listi aktive................................................................................................................................................186
Podešavanje panoa Assets.......................................................................................................................................187
Upotreba aktive na sajtu..........................................................................................................................................187
Promena elemenata koji čine aktivu........................................................................................................................187
Kreiranje novog elementa u aktivi...........................................................................................................................188
RAD BEZ SAJTA.................................................................................................................................................................188
14. PUBLIKOVANJE I ODRŽAVANJE SAJTA.......................................................................................................189
KAKO DREAMWEAVER RADI SA UDALJENIM SAJTOVIMA...........................................................................................................189
DEFINISANJE UDALJENOG SAJTA U DREAMWEAVERU...............................................................................................................189
Bez uspostavljanja veze............................................................................................................................................190
FTP...........................................................................................................................................................................190
RAD SA UDALJENIM SAJTOM................................................................................................................................................192
Pregled informacija sa udaljenog servera u panou Site..........................................................................................192
Uspostavljanje i prekidanje veze..............................................................................................................................193
Postavljanje i preuzimanje.......................................................................................................................................193
SINHRONIZACIJA LOKALNOG I UDALJENOG SAJTA.....................................................................................................................193
Izbor novijih datoteka na udaljenom i lokalnom sajtu.............................................................................................193
Komanda Synchronize..............................................................................................................................................194
Sakrivanje.................................................................................................................................................................195
Uključivanje i isključivanje sakrivanja....................................................................................................................195
Sakrivanje datoteka i fascikli...................................................................................................................................196
Otkrivanje.................................................................................................................................................................196
RAD BEZ SAJTA: DEFINISANJE VEZE SA UDALJENIM SERVEROM..................................................................................................196
15. KREIRANJE DINAMIČKIH SAJTOVA U DREAMWEAVERU.....................................................................199
OSNOVNO O DINAMIČKIM SAJTOVIMA....................................................................................................................................199
Kako rade statičke strane.........................................................................................................................................199
Kako rade dinamičke strane.....................................................................................................................................199
PODEŠAVANJE RADNE STANICE ZA RAZVOJ DINAMIČKIH SAJTOVA...............................................................................................202
Podešavanje onlajn razvoja.....................................................................................................................................203
PODEŠAVANJE OFLAJN RAZVOJA...........................................................................................................................................203
Podešavanje HTTP servera......................................................................................................................................203
Podešavanje aplikacionog servera...........................................................................................................................204
Baze podataka..........................................................................................................................................................205
FUNKCIONISANJE DINAMIČKIH SAJTOVA U DREAMWEAVERU.....................................................................................................205
Pregled živih podataka i server za testiranje...........................................................................................................206
Podešavanje dinamičkih sajtova..............................................................................................................................206
Povezivanje sa bazom podataka...............................................................................................................................207
16. DINAMIČKE STRANE...........................................................................................................................................209
PRIKUPLJANJE DINAMIČKIH PODATAKA..................................................................................................................................209
Osnovno o skupovima zapisa...................................................................................................................................209
Sofisticiraniji upiti i skupovi rezultata.....................................................................................................................210
POSTAVLJANJE DINAMIČKIH ELEMENATA NA STRANE................................................................................................................212
Dinamički tekstualni elementi..................................................................................................................................212
Podešavanje dinamičkih osobina.............................................................................................................................213
Dinamički podaci i forme.........................................................................................................................................215
Regioni koji se ponavljaju........................................................................................................................................216
Uslovni sadržaj.........................................................................................................................................................218
17. JOŠ NEKE DINAMIČKE TEHNIKE....................................................................................................................220
DINAMIČKI ŠABLONI..........................................................................................................................................................220
Kreiranje dinamičkih šablona..................................................................................................................................220
Kako rade dinamičke strane.....................................................................................................................................220
SKUPOVI GLAVNIH I DETALJNIH STRANA................................................................................................................................221
5 / 299
Dreamweaver MX 2004
Ručno kreiranje skupova glavnih i detaljnih strana................................................................................................221
SLOŽENI SKUPOVI ZAPISA....................................................................................................................................................222
Pisanje SQL upita.....................................................................................................................................................223
Pisanje SQL upita preko stabla sa stavkama iz baze podataka...............................................................................224
Parametri u SQL iskazima.......................................................................................................................................225
KREIRANJE SISTEMA ZA PRIJAVLJIVANJE KORISNIKA.................................................................................................................227
Registracija korisnika..............................................................................................................................................228
Prijavljivanje korisnika............................................................................................................................................228
Ograničavanje pristupa............................................................................................................................................228
Odjavljivanje............................................................................................................................................................229
USLOVNI SADRŽAJ.............................................................................................................................................................229
Objekti Show Region................................................................................................................................................229
Druge vrste uslovnog sadržaja.................................................................................................................................230
18. ASP.NET...................................................................................................................................................................231
ASP.NET NAPOMENE O INSTALACIJI...................................................................................................................................231
Na kojim verzijama Windowsa ASP.NET može da radi?.........................................................................................231
Isključite opciju Simple File Sharing.......................................................................................................................231
Podešavanje dozvola za fascikle..............................................................................................................................231
Podešavanje dozvola za IIS Administratora............................................................................................................231
ASP.NET OBJEKTI ZA RUČNO KODIRANJE NA PALETI INSERTION..............................................................................................232
Objekat Register Custom Tag..................................................................................................................................232
Objekat Import Namespace......................................................................................................................................232
Objekat Trimmed Form Element..............................................................................................................................232
Element Trimmed QueryString.................................................................................................................................232
Objekat Runat Server...............................................................................................................................................232
Objekat Bound Data.................................................................................................................................................233
Objekat Page_Load..................................................................................................................................................233
ASP.NET OBJEKTI WEB SERVER CONTROL NA PALETI INSERTION..........................................................................................233
Objekat asp:Button...................................................................................................................................................233
Objekat asp:CheckBox ima sledeće atribute:..........................................................................................................235
Objekat asp:CheckBoxList.......................................................................................................................................236
Objekat asp:DropDownList.....................................................................................................................................238
Objekat asp:lmageButton.........................................................................................................................................239
Objekat asp:Label....................................................................................................................................................240
Objekat asp:ListBox.................................................................................................................................................241
Objekat asp:RadioButton.........................................................................................................................................243
Objekat asp:RadioButtonList...................................................................................................................................244
Objekat asp:TextBox................................................................................................................................................246
Objekat More Tags...................................................................................................................................................247
19. PISANJE KODA U DREAMWEAVERU..............................................................................................................249
DREAMWEAVER KAO EDITOR TEKSTA....................................................................................................................................249
Pristup editoru teksta...............................................................................................................................................249
Opcije prikaza Code i podešavanje njegovih karakteristika....................................................................................250
Opcije vezane za formatiranje koda.........................................................................................................................255
Prepisivanje koda.....................................................................................................................................................257
Pisanje i uređivanje koda.........................................................................................................................................258
Delovi koda (Snippets).............................................................................................................................................260
POVEZIVANJE SA SPOLJAŠNJIM EDITORIMA TEKSTA..................................................................................................................262
Podešavanje spoljašnjeg editora teksta (nije integrisan)........................................................................................262
Integracija editora HomeSite+ sa Dreamweaverom...............................................................................................262
BIBLIOTEKE TAGOVA I EDITOR TAG LIBRARY........................................................................................................................263
Rad sa okvirom za dijalog Tag Library Editor........................................................................................................263
Promena stavki u biblioteci oznaka.........................................................................................................................264
Dodavanje (brisanje) stavki.....................................................................................................................................264
NAPREDNE KOMANDE FIND AND REPLACE............................................................................................................................266
Napredno pretraživanje teksta.................................................................................................................................266
Pretraživanja na osnovu zadate oznake...................................................................................................................266
Upotreba regularnih izraza......................................................................................................................................267
RAD SA TEKSTOM KOJI NIJE HTML U DREAMWEAVERU.........................................................................................................269
PISANJE JAVASCRIPT KODA U DREAMWEAVERU.....................................................................................................................270
6 / 299
Dreamweaver MX 2004
Pano Reference........................................................................................................................................................270
Pisanje skriptova bez prikaza Code.........................................................................................................................271
Alati vezani za JavaScript dostupni u prikazu Code................................................................................................273
20. PRILAGOĐAVANJE I PROŠIRIVANJE DREAMWEAVERA........................................................................275
KAKO SE DREAMWEAVER KONFIGURIŠE................................................................................................................................275
Kako se radi sa fasciklom za konfiguraciju.............................................................................................................275
Podrška za više korisnika: Fascikla User Configuration........................................................................................275
PROMENA KONFIGURACIJE...................................................................................................................................................276
Promena prečica sa tastature..................................................................................................................................276
Podešavanje kategorije Favorites na paleti Insert..................................................................................................278
Automatizacija zadataka preko korisnički definisanih komandi..............................................................................280
Kako se konfigurišu zapisane komande...................................................................................................................281
Prilagođavanje okvira za dijalog preko HTML-a....................................................................................................281
Prialgođavanje menija Dreamweavera preko datoteke menus.xml.........................................................................282
PROŠIRENJA KOJA DOLAZE OD NEZAVISNIH PROIZVOĐAČA.........................................................................................................282
Pronalaženje proširenja: Macromedia Exchange...................................................................................................282
21. PRILOG....................................................................................................................................................................283
PRIMER IZRADE DINAMIČKOG SAJTA......................................................................................................................................283
Struktura sajta..........................................................................................................................................................283
Priprema...................................................................................................................................................................283
Baza podataka..........................................................................................................................................................283
Definisanje sajta.......................................................................................................................................................285
Povezivanje sa bazom...............................................................................................................................................290
Login forma..............................................................................................................................................................291
Učitavanje teksta iz baze..........................................................................................................................................292
Učitavanje slika iz baze............................................................................................................................................294
Ograničavanje pristupa............................................................................................................................................294
Rad sa podacima u bazi (Insert, Update, Delete)....................................................................................................295
CSS stilovi................................................................................................................................................................298
7 / 299
Dreamweaver MX 2004
1. Poboljšanja u novoj verziji
Koja su poboljšanja u verziji MX 2004 u odnosu na verziju MX ? Možda ih nećete videti, ali ona su tu. To su
neosetna poboljšanja, koja program čine boljim. Dreamweaver je poboljšan u pravcu veće brzine i
pouzdanosti. Program nudi punu podršku za Unicode, što znači da se strane mogu prikazivati na bilo kom
jeziku koji programski sistem može da razume. Ugrađeni FTP program je potuno nov, pouzdaniji je i brži.
A evo i stvari koje nećete videti zato što više nisu tu. HTML stilovi, Timeline, pogled Tag Inspector Tree (ne
samo Tag Inspector, koji se nalazi na kartici Properties opcije Selection Inspector), pano Answers, sve je to
otišlo. Ako ste koristili Dreamweaver za Windows, onda je i Classic Workspace otišao. Otišla je i podrška za
Windows NT, Windows Me i Macove operativne sisteme pre verzije Jaguar (10.2).
Prvi put kada pokrenete svoju novu kopiju Dreamweavera MX 2004, susrešćete se sa stranom Start. Ova
strana nije samo obična strana za dobrošlicu, ona se prikazuje svaki put kada Dreamweaver radi, i ako nije
otvoren nijedan dokument. Izaberite da otvorite neki dokument koji ste prethodno otvarali, brzo kreirajte novi
dokument i definišite sajt iz samo jednog ekrana. Ako vam se ova strana ne dopada, možete je isključiti u
okviru za dijalog Preferences.
Generalna poboljšanja vezana za interfejs
Nakon promena na početnoj strani, interfejs Dreamweavera se ne razlikuje mnogo od starog MX interfejsa.
Ali, kako se budete dalje udubljivali, otkrivaćete suptilne, ali i manje suptilne promene.
Kategorije kod grupe objekata
Kartice na paleti Insert više nisu tu. Kategorije objekata koje su se tamo nalazile, sada su dostupne iz
padajućeg menija. Sada postoji manje kategorija nego ranije. To su samo kategorije Common, Layout,
Forms, HTML, Application, kao i nova sjajna kategorija Favorites. U okviru svake kategorije ćete pronaći
mešavinu objekata (prikazanih preko ikona), kao i grupe objekata (naznačene su trouglastim strelicama
pored ikone za objekat). U okviru kategorije Common se nalaze objekti Hyperlink, Email Link i Anchor.
8 / 299
Dreamweaver MX 2004
Tu su takođe opcije Tables, Images, Media Objects, Template Objects, itd. Opcije Tables, Layers i Layout
Tables su kategoriji Layout, a tu su i neke korisne stavke kao što su Table Rows i Table Columns, ili oznake
tabela za ručno kodiranje. Poslednji objekat iz grupe koji ste koristili je onaj koji se prikazuje na paleti Insert.
Ako želite da izaberete neku drugu opciju, kliknite trougao i izaberite opciju iz liste. Iako u prvom trenutku
može biti uznemirujuće da lovite svoj objekat i da ga na kraju pronađete sakrivenog u grupi, vrlo brzo ćete
zavoleti činjenicu da se objekti koje ste poslednje koristili nalaze upravo tu ispred Vas. Na kraju krajeva, ako
je poslednja stavka koju ste ubacili bila tabela, onda ćete verovatno ubacivati više tabela, pre nego što
predete na nivoe ili ćelije.
Ako Vam se i dalje ne dopada način na koji su objekti grupisani, možete da ga izmenite. Idite do kategorije
Favorites i tamo izaberite objekte koje želite da prikažete.
Integrisani pano Site
Ako ste prvi put otvorili Dreamweaver MX 2004, verovatno ćete se najpre zapitati: "Gde je nestao pano
Site?". On je bio integrisan u grupu panoa Files, tako da se pojavljivao u skraćenom obliku kao jedan od
kaskadnih panoa sa donje desne strane monitora.
9 / 299
Dreamweaver MX 2004
Ovim komandama se može pristupiti iz menija Options u prozoru. Tu su komande New File, New Folder,
Select Never Local, kao i druge komande koje su zakopane u podmeniju Site Files View, glavnog menija
Site.
Palete vezane za dokumente
Korisnici će primetiti inovaciju vezanu za radni prostor, odnosno videće da su palete pričvršćene za prozor
Document, a ne ispod palete Insert. Iako ovo može izgledati pomalo neobično, ipak je vrlo efikasno, jer se
palete približavaju aktivnom delu dokumenta u kome radite, tako da možete da za različite dokumente
različito podešavate pojedine palete. Palete se mogu otkačiti prevlačenjem njihovih ručica, ili se mogu vezati
za paletu Insert, kao u MX-u.
Tag Inspector
Novi, promenjeni Tag Inspector (Window-Tag Inspector) je sjajan (i veoma kompaktan) način za pregled i
rad sa bilo kojim elementom na strani. Ovo je kao vojnički nož - sve što će Vam ikad trebati je tu, čak i ako
niste znali da će Vam biti potrebno.
Kartica Attributes je uvećana verzija Tag Inspectora iz verzije Dreamweaver MX. Iz ovog korisnog i
kompaktnog panoa možete da podešavate osobine za bilo koju izabranu stavku, od osobina strane, do
osobina teksta, tabela i slika. Osobine se mogu prikazivati po abecednom redu ili grupisane po kategorijama
(sami podešavate). Tu su sve osobine, zajedno sa standardnim dugmadima za pretraživanje, mogućnostima
za podešavanje boja, kao i dinamičkim opcijama koje omogućavaju da brzo i tačno unesete vrednost.
10 / 299
Dreamweaver MX 2004
Na kartici Behaviors se nalazi poboljšani interfejs sa panoa Behaviors. Tu su sada dve opcije za prikazivanje
rukovaoca događajima koji se mogu koristiti.
Kartica Tag Inspector/CSS vrši inspekciju stilova. Ovo je nov i koristan način za ispitivanje i promenu CSS
stilova koji se primenjuju na neki objekat. Elementi stilova koji se koriste za formatiranje se mogu prikazivati
po abecednom redu ili po kategorijama. Ovi elementi se mogu menjati na licu mesta, tako da ne morate da
idete kroz pano CSS Styles. Ako ste ranije smatrali da je rad sa CSS stilovima težak i zbunjujuć, spremni ste
za nova, poboljšana iskustva.
Možda volite da za svoj svakodnevni posao koristite Property Inspector, a da Selection Inspector otvarate
samo u specijalnim situacijama. Kako god da radite, nova gomila alata je dobrodošla novina, koja Vašim
rukama daje novu snagu.
11 / 299
Dreamweaver MX 2004
Poboljšani meni Window
U meniju Window su sada u glavnom prozoru prikazani svi panoi i inspektori. Pojedine stavke, kao što je bio
slučaj sa opcijama Layers i Frames sada nisu više u podmeniju Others. Naravno, kad jednom podesite
prečice sa tastature, verovatno više nećete koristiti meni Window, ali kao generalni princip, lepo je da se sve
nađe na jednom mestu.
Poboljšanja vezana za rad sa dokumentima
Naravno da je jedna od najboljih osobina ovog programa bilo intuitivno, jasno i snažno okruženje za rad sa
dokumentima. Iako se u novoj verziji izgled prozora Document nije promenio, različite osobine su ojačane,
tako da se dobija bolje integrisano radno okruženje.
Poboljšano uređivanje tabela
Većini web dizajnera tabele predstavljaju veliki deo svakodnevnih radnih aktivnosti. Njima se teško rukuje,
čak i u grafičkom okruženju. Dreamweaver je uvek imao dobre alate za uređivanje tabela. Dreamweaver MX
2004 je dodao dve nove osobine.
Paleta Table Widths (dostupna sa palete Document iz podmenija View Options > Visual Aids) prikazuje
horizontalnu traku sa informacijama o debljini za bilo koju izabranu tabelu. Ovo je slično informacijama koje
se za izabranu tabelu prikazuju u Layout modu. Paleta ne samo da prikazuje informacije o dimenzijama, već
je tu i padajući meni sa komandama za izbor i uređivanje.
12 / 299
Dreamweaver MX 2004
Druga pomoć, režim Expanded Tables (View > Table Mode > Expanded Tables Mode) može da olakša život
onima koji za raspored strana koriste tabele bez vidljivih ivica. U režimu Expanded Tables, Dreamweaver
sve tabele prikazuje sa ivicama, prikazuje rastojanje između ćelija, uvlačenje ćelija, tako da se jasno vidi
struktura tabele. Čak i male ćelije se jasno vide i selektuju. Kod koji stoji iza tabele se ne menja, tako da se
tabela u pretraživaču i dalje prikazuje na uobičajeni način. Režim Expanded Tables može puno da pomogne
kod dizajna, jer se vidi ono što biste inače morali da zamišljate.
Za one koji vole da rade u režimu Layout, on je i dalje tu. Neka poboljšanja su doprinela većoj pouzdanosti.
Tabelama koje ste pravili u režimu Layout više nije potreban atribut height, premda raspored ćelija i dalje
postoji, a u Layout Table Property Inspectoru sada postoji i dugme za brisanje visine vrsta. Ćelije se sada
kreiraju sa razmacima koji se ne prekidaju, čime se izbegava problem koje prazne ćelije donose u
pretraživačima. Sada je teže da slučajno napravite tabelu u vazduhu, odnosno da kreirate tabelu koja se
slučajno našla u okviru neke druge tabele.
Na kraju, kao vrlo suptilna promena, odloženo ažuriranje tabele u režimu Standard pripada prošlosti. Tabela
se sada automatski širi do prave veličine čim se izbriše sadržaj, tako da ne morate da klikćete izvan tabele
da biste prelazili u pogled Display.
Bolja integracija provere dokumenta
Kreiranje dokumenata koji dobro rade u ciljnim pretraživačima je krucijalna stvar kod razvoja za Web. Zbog
toga ima i smisla da se osobine Dreamweavera vezane za proveru dokumenata nađu na važnijem mestu.
Tako je i bilo. Dreamweaver sada može automatski da proverava kompatibilnost otvorenog dokumenta sa
petraživačem, a na paleti Document se nalazi korisna ikona OK, koja govori da je sve u redu, ili ikona sa
upozorenjem da postoji problem.
Ako kliknete ikonu, dolazite do različitih podešavanja i kontrola, uključujući i poboljšani interfejs za izbor
pretraživača. Glavne komande Validate i Check Target Browser su i dalje u meniju File, tako da oni koji su
se navikli na njih, mogu i dalje da ih tamo pronađu.
Integrisano rukovanje grafikom
Na svoju stranu ste ubacili neku sliku. Zamislite da to izgleda užasno. Želite da promenite veličinu, promenite
uzorak ili podesite boje i prazan prostor. Sada sve to možete da radite u okviru Dreamweavera i to preko
poboljšanog Image Property Inspectora. Ako su neki od Vas koristili komandu Fireworks, komanda Optimize
13 / 299
Dreamweaver MX 2004
in Fireworks (formalno sakrivena u meniju Commands) sada ima sopstveno dugme.
Poboljšanja vezana za CSS
Ovo je više od poboljšanja. Osnovni pristup Dreamweavera da morate da pravite kod za svoje strane je
promenjen, tako da CSS možete da uključujete na svim nivoima. Ovo je sada dobra stvar.
CSS integracija
Novi CSS style rule inspector (kartica CSS u okviru Tag Inspectora) je samo vrh ledenog brega, koji se
odnosi na promene u rukovanju CSS-om u Dreamweaveru. Promenjen je pano CSS Styles, tako da sada
postoji samo režim za uređivanje. Zašto? Zato što su sve osobine za primenu stilova već integrisane u
Property Inspectoru. Više nema potrebe za specijalnim interfejsima, kao što je pano CSS Styles. Stilovima
se sada pristupa preko interfejsa i oni se koriste za osnovne zadatke vezane za kodiranje, tako da se više ne
koristi stari način sa HTML formatiranjem.
Različite verzije Property Inspectora sada sadrže više informacija nego ikada pre. Text Property Inspector
više ne omogućava prelaz sa "običnog" na "CSS" režim. Umesto toga, sada su u centru CSS opcije.
Podrazumeva se da se kod bilo kog formatiranja teksta preko Property Inspectora koristi CSS formatiranje, a
ne ubacivanje oznaka font. Na tabele i druge elemente na strani se sada mogu primeniti klase sa njihovih
Property Inspectora, premda neki od Vas mogu da koriste i desni klik mišem i opciju Tag Inspector i da na taj
način primene stilove.
14 / 299
Dreamweaver MX 2004
Okvir za dijalog Page Properties ima novi interfejs preko kojeg se može podešavati boja pozadine strane,
podešavati izgled linka. Sve to se radi preko CSS stilova koji se automatski generišu.
Bilo koju od ovih automatizovnih CSS funkcija možete da isključite (ako odete u okvir za dijalog Preferences
General i ne potvrdite opciju Use CSS Instead HTML Tags). Ali, zašto biste to radili?
Poboljšana podrška za CSS2
Da, i dalje možete da crtate nivoe (alat Draw Layer se nalazi na paleti Insert, u okviru grupe objekata
Layout). Možete i da izaberete bilo koji element sa strane, da ga ubacite u oznaku div i da primenite
korisnički definisanu klasu ili ID, zahvaljujući novom objektu Div (takode se nalazi u grupi objekata Layout na
paleti Insert). Na slici je prikazana ova sjajna procedura. Stara oznaka za nivoe koja potiče od Netscapea
više se ne koristi kod kodiranja nivoa. Takođe je poboljšan i pogled Design za elemente koji koriste CSS.
15 / 299
Dreamweaver MX 2004
Poboljšanja vezana za kod
Za one koji vole da kodiraju ima takođe dobrih vesti. Ako u prozoru Code kliknete desnim tasterom miša,
otvoriće se pomoćni meni iz kojeg možete da brzo pristupite poslovima vezanim za kodiranje, kao što su
kreiranje delova koda, konvertovanje malih u velika slova i obrnuto i još puno toga. Ako želite da ručno
kodirate CSS stilove, na raspolaganju Vam stoje saveti vezani za CSS kod. U okviru za dijalog Find And
Replace sada postoji više opcija. Ovo i nije alat za kodiranje, ali je koristan kao pomoć. Dreamweaver sada u
potpunosti podržava prostore imena iz XML-a.
16 / 299
Dreamweaver MX 2004
Poboljšanja vezana za rukovanje sajtom
U delu koji se odnosi na rukovanje sajtom, veliku novost predstavlja program Contribute. Ovaj novi program
Macromedie omogućava običnim ljudima, koji nisu web dizajneri, da lako ažuriraju sadržaj u unapred
napravljenim šablonskim stranama, koje su napravljene preko Dreamweavera. Opcije Site definitions u
Dreamweaveru MX 2004 imaju mogućnost upravljanja sajtom Contribute, koordinacije sa korisnicima tog
programa, čime se postiže optimalna efikasnost kod ažuriranja. Sada su podržane i sigurne FTP veze
(SFTP), preko kojih se pristupa udaljenim sajtovima i serverima za testiranje.
Život bez sajtova je lakši, posebno u onim trenucima kada samo želite da brzo završite posao, a da pri tome
ne morate da definišete sajt. Izaberite Computer, Desktop ili neku od stavki koje nisu vezane za sajtove i
počnite da radite. Više se neće pojavljivati pitanje Dreamweavera da li treba da slike prebaci u najbližu
lokalnu fasciklu, i neće biti insistiranja na apsolutnim putanjama do datoteka, ako se ne nalazite u okviru te
fascikle. Kod uploadovanja (prebacivanja datoteka na server) se veze sa serverom mogu definisati
nezavisno od definicije sajta.
17 / 299
Dreamweaver MX 2004
Poboljšanja vezana za rad sa dinamičkim podacima
I u oblasti rada sa dinamičkim podacima je došlo do poboljšanja. Poboljšano je testiranje performansi
servera. Pojačana je podrška za ColdFusion i naravno, Dreamweaver MX 2004 podržava sve nove osobine
ColdFusiona MX. Dinamički objekti su sada logičnije postavljeni, tako da ih je lakše pronaći na paleti Insert.
Ako ste navikli da ih tražite u panou Server Behaviors, oni su i dalje tamo.
18 / 299
Dreamweaver MX 2004
2. Radni prostor Dreamweavera
Izbor radnog prostora
Dreamweaver koristi integrisani radni prostor, kod kojeg je većina prozora i panoa pričvšćena i tačno
postavljena u velikom prozoru koji pripada aplikaciji. Prvi put kada pokrenete program možete da birate
izmedu dva radna prostora. To su Designer i HomeSite/Coder-Style. Radni prostor Designer je optimizovan,
naravno, za dizajnere. Radni prostor HomeSite/Coder-Style je optimizovan za one koji su navikli da koriste
tekstualne editore, posebno HomeSite firme Macromedia. Koje su razlike?
Poređenje radnih prostora
Standardni interfejs Dreamweavera (Designer Style) ima sve panoe vezane, osim Property Inspectora,
palete Insert i prozora Results. Svi se oni nalaze sa donje strane prozora aplikacije. Podrazumevano,
Property Inspector je proširen, a prozor Document prikazuje pogled Design.
Radni prostor HomeSite/Code-Style ima sve panoe vezane, osim Property Inspectora, palete Insert i prozor
Results, ali se oni nalaze sa leve strane prozora aplikaciju Podrazumevano je da je Property Inspector
smanjen, a prozor Document se otvara sa pogledom Code.
19 / 299
Dreamweaver MX 2004
Promena radnih prostora
Ako ste izabrali neki prostor i počeli da radite, u bilo kom trenutku se možete predomisliti. Otvorite okvir za
dijalog Preferences (Edit > Preferences), idite u kategoriju General i kliknite dugme Change Workspace.
Možete da birate neki od stilova Designer i HomeSite/Code-Style. Da bi promene imale efekta, morate
ponovo pokrenuti program.
20 / 299
Dreamweaver MX 2004
Strana Start
Od verzije Dreamweaver MX 2004 imate mogućnost da program otvarate sa prijateljski nastrojenom
početnom stranom Start. Pored linkova koji vode u tutorijal za Dreamweaver, možete brzo pristupiti i
sledećim stavkama:
• Otvaranje dokumenata sa kojima ste poslednji put radili (alternativa opciji File > Open iz menija).
• Kreiranje novih dokumenata različitih tipova (alternativa za File > New i okvir za dijalog New
Document, tako da ne morate da se borite sa okvirom za dijalog New Document). Ako izaberete
opciju More Documents, otvoriće se okvir za dijalog New Document.
• Kreiranje novog sajta (alternativa za Site > Manage Sites, pa dugme New).
• Kreiranje novih dokumenata na bazi različitih primera (isti primeri su dostupni i u okviru za dijalog
New Document).
• Provera novih dodataka u Dreamweaver Exchangeu (alternativa za Help > Dreamweaver Exchange).
Ako izaberete dugme Dreamweaver Tour, otići ćete na web sajt Macromedie. Ako izaberete dugme
Dreamweaver Tutorial, otvoriće se pomoć iz programa. Ovo ste mogli da izaberete i iz menija Help. Ovde
nema ničeg što ne možete da uradite i na neki drugi način, ali je dobro što su poslovi koje obavljate na
početku rada grupisani na jednom mestu, dostupni iz jednog centralnog interfejsa.
Ako ne želite da se bavite početnom stranom, izaberite opciju Dont Show Again. Ako želite da uključite ili
isključite prikazivanje strane Start, otvorite okvir za dijalog Preferences > General (Edit > Preferences) i
potvrdite ili nemojte porvrditi opciju Show Start Page. Ako je uključeno prikazivanje strane Start, ona će se
prikazati svaki put kada pokrenete program, i kad god nije otvoren nijedan dokument.
21 / 299
Dreamweaver MX 2004
Rad sa panoima
Činjenica je da ovde ima mnogo panoa. S vremena na vreme svaki od njih postaje koristan, ali su tu i oni koji
tog trenutka nisu potrebni, tako da je onaj potreban teško pronaći. Mnogi poslovi u Dreamweaveru zahtevaju
panoe.
Panoi i grupe panoa
Bilo koji pano preko menija Windows može da se otvori ili proširi. Tu su prikazane i liste prečica za otvaranje
i zatvaranje panoa. Većina panoa Dreamweavera se nalaze u grupama, pri čemu se pojedinačnom panou
pristupa preko kartice u prozoru grupe. (Tehnički govoreći, svi panoi se nalaze u grupama, ali neki, kao što je
CSS pano, se nalaze sami u grupi.) Grupe su logički organizovane, tako da intuitivno možete da zaključite
koji se pano gde nalazi.
Zaglavlja panoa i grupa imaju i meni sa opcijama, preko kojeg možete da obavljate poslove vezane za
panoe. Na slici su prikazane tipične grupe panoa sa istaknutim osobinama.
22 / 299
Dreamweaver MX 2004
Ako želite da proširite ili sažmete grupu panoa, kliknite strelicu za sažimanje ili proširivanje, koja se nalazi u
zaglavlju panoa. Ako je potrebno, prozor panoa se širi da bi prihvatio proširene panoe. Ako želite da proširite
grupu panoa i promenite joj veličinu, možete da odete u meni sa opcijama i izaberete opciju Maximize Panel
Group.
Ako želite da podesite relativnu visinu dve grupe panoa u okviru prozora, postavite kursor između njih.
Kursor će dobiti oblik dvosmerne strelice. Tada uhvatite granicu i promenite veličinu.
Ako želite da zatvorite grupu panoa, otvorite meni sa opcijama i izaberite Close Panel Group. Grupu panoa
možete ponovo da otvorite ako neki od panoa izaberete iz menija Window.
Prikazivanje i sakrivanje
Ponekad proširivanje ili sažimanje nije dovoljno. Možda želite da prikažete samo one stvari koje su preko
potrebne u dokumentu.
Ako želite da podesite prostor koji zauzima pričvršćeni pano, prevucite vertikalnu liniju koja odvaja taj pano
od ostalog dela radnog prostora. Ako želite da potpuno isključite ili uključite pano, kliknite trougao na
vertikalnoj liniji.
23 / 299
Dreamweaver MX 2004
Ako želite da sve panoe uključite ili isključite izaberite Window > Hide Panels ili Window > Show Panels, ili
samo pritisnite F4 da biste ih uključili ili isključili.
Pričvršćivanje i odvezivanje panoa
Ponekad nećete želeti da radite sa vezanim panoima. Možda ćete zaključiti da je neki pano (kao što je pano
Reference) teško postaviti na pravo mesto. Možda imate dva monitora i želite da se svi panoi nalaze na
monitoru 1, a da se na monitoru 2 prikazuje samo prozor Document. Možda ste samo navikli da imate
slobodne panoe. Niste obavezni da ih vezujete.
Ivica ručice koja se nalazi sa leve strane zaglavlja panoa omogućava da vezujete i odvezuejte grupe. Ako
želite da otkačite pano, uhvatite ručicu i prevucite celu grupu izvan prozora panoa. Ako želite da promenite
prozor panoa i vratite ga u stanje koje nije vezano, prevucite donji desni ugao.
Ako želite da ponovo vežete panoe, uhvatite ručicu i prevucite grupu do drugih vezanih panoa, sve dok se ne
pojavi tanka crna linija, koja ukazuje na mesto postavljanja. Grupu možete da vežete na potpuno drugom
mestu u odnosu na ono na kome se prethodno nalazila. Korisnici mogu horizontalne panoe (kao što je
Results) da vežu sa strane ili da vertikalno postavljene panoe (kao što je grupa Code) postave na dno ili vrh
prozora Document.
24 / 299
Dreamweaver MX 2004
Grupisanje i pregrupisavanje
Pretpostavlja se da su grupe panoa u Dreamweaveru logički grupisane i intuitivne, ali šta ako to nije slučaj?
Šta ako zaključite da koristite samo tri ili četiri panoa, i ne želite da stalno otvarate ili zatvarate te grupe?
Možete da grupišete, rastavljate grupe ili pravite svoje grupe panoa i da tako napravite onaj raspored koji
Vam odgovara. Sve ovo se radi preko menija sa opcijama za panoe. Ako želite da određeni pano prebacite u
drugu grupu, otvorite meni sa opcijama za originalan pano, izaberite Group Panel With > (grupa koju želite).
Ako želite da pano postavite u poseban prozor, idite u meni sa opcijama i izaberite Group Panel.
Ako želite da napravite svoju grupu omiljenih panoa, treba da iskombinujete nekoliko prethodno pomenutih
koraka:
1. Pronađite prvi pano koji želite da ubacite u svoju grupu i odvojite ga od grupe. Ovo ćete uraditi preko
menija sa opcijama, iz koga ćete izabrati opciju Group Panel With > New Group.
2. U prozoru panoa koji ste upravo napravili, idite u meni sa opcijama i izaberite Rename Panel Group.
Nazovite grupu kako želite, na primer, Omiljeni panoi, Moji panoi i sl.
3. Sada je vreme da pronađete ostale panoe koje želite u svojoj grupi. Za svaki od njih morate da odete
u meni sa opcijama i da izaberete opciju Group Panel With > (ime grupe). Obratite pažnju na to da
se Tag Inspector ne može prebacivati u grupe.
Sada slobodno možete da zatvorite ili skupite sve druge grupe panoa, jer znate da su Vaši omiljeni panoi
uvek na dohvat ruke.
Paleta Insert i Property Inspector
Paleta Insert i Property Inspector su jedinstveni panoi sa svojim skupom pravila. U integrisanom radnom
prostoru Windowsa, oni su vezani na vrhu i dnu prozora Document. Oni se mogu otkačiti, ali se ne mogu
grupisati sa drugim panoima.
Paleta Insert se može prikazivati u jednom od dva režima. To su režim meni (podrazumevani) ili režim sa
karticama (stil Dreamweaver MX). Prelaz iz jednog u drugi režim se može uraditi ako se izabere Show as
Tabs iz padajuće liste sa opcijama za tu grupu. Ovo važi ako se trenutno nalazite u režimu sa menijima, a
ako ste u režimu sa karticama, onda se iz menija sa opcijama bira opcija Show as Menus. Na slici su
prikazana ova dva stila.
U radnom prostoru Windowsa, Property Inspector se može smanjiti kao i bilo koji drugi pano. I u radnom
prostoru Macintosh i Windows verzije, Property Inspector se može smanjiti za pola, tako da se prikazuje
samo njegova gornja polovina. Ovo se radi tako što se izabere ikona trouglića u gornjem levom uglu.
25 / 299
Dreamweaver MX 2004
Rad sa prozorom Document
Bez obzira na stil koji koristite u radu, verovatno ćete najviše vremena provoditi u radu sa prozorom
Document. U pitanju je intuitivni interfejs, sa mnoštvom resursa, koji se kao i mnoge druge stvari u
Dreamweaveru može podešavati u skladu sa Vašim željama.
Vezivanje i odvezivanje
U integrisanom radnom prostoru, prozor Document može biti pričvršćen ili ne. Ovaj prozor može da zauzme
onaj deo prostora koji mu dodelite u centru, ili ako imate dovoljno veliki monitor (ili dva monitora), može da
se postavi izvan prozora aplikacije. Vezani prozor Document automatski ispunjava centralni deo radnog
prostora i prikazuje karticu u gornjem delu. Ne prikazuje se zaglavlje. Ovo omogućava da lako prelazite iz
jednog u drugi otvoreni prozor dokumenta.
Ako želite da vežete ili otkačite prozor Document, možete da upotrebite polje Maximize/Normalize u gornjem
desnom uglu.
26 / 299
Dreamweaver MX 2004
Pregled dokumenata
Ako želite da radite sa dokumentima, generalno morate da ih vidite. Prozor Document omogućava da ih
vidite na različite načine.
Rad sa prikazima Code i Design
Osnovni izbor koji činite prilikom rada sa dokumentima je da li želite da radite u okruženju za pisanje koda ili
u grafičkom okruženju.
Prikaz Design (View > Design) omogućava da stranu vidite približno onako kako bi ona izgledala u
pretraživaču. lako ovo nije prikaz tipa WYSWYG (ono što vidiš je ono što ćeš dobiti), ipak je omogućeno da
sa svim elementima na strani radite u grafičkom okruženju. Elementi strane koji nisu grafički, kao što su
komentari, zaglavlje i skriptovi, mogu da se vide kao ikonice. Ovo se postiže ako se izabere meni View i
podmeni Visual Aids > Iconic Form. Ostala vizuelna pomoć koju možete dobiti iz ovog menija je:
•
Rulers (View > Rulers) (lenjiri) - Moguće je podesiti prikazivanje lenjira, koji se postavljaju duž leve i
gornje ivice. Prikazivanje i sklanjanje lenjira se radi preko komande Rulers iz menija View. Ta
komanda služi i za promenu jedinica (iako su nabolji pikseli), kao i promenu početka odakle se vrši
merenje.
•
Grid (View > Grid) (mreža) - Mreža koja može da se podešava. Ona može da se prikaže iza sadržaja
dokumenta, čime je olakšano ravnanje elemenata na strani. Podmeni Grid iz menija View
omogućava prikazivanje mreže, uključivanje skokovitog kretanja kursora samo između tačaka
mreže, kao i promenu veličine i izgleda mreže.
•
Tracing Image (View > Tracing Image) (praćenje slike) - Ispod sadržaja u prozoru Document se
prikazuje GIF, JPG ili PNG datoteka, koja služi prilikom raspoređivanja elemenata. Komande iz
podmenija Tracing, menija View služe za učitavanje slike i njeno relativno postavljanje na strani.
Preko okvira za dijalog Page Properties (Modify > Page Properties) možete podešavati prozirnost
slike, tako da Vam ne smeta prilikom rada.
•
Table Borders, layer borders, frame borders (View > Visual Aids) (granice tabela, nivoa i frejmova) Ivice tabela, nivoa i frejmova se prikazuju kao tanke ili tačkaste linije. Ovo je u cilju pomoći kod
uređivanja.
•
Table widths (View > Visual Aids > Table Widths) (širina tabela) - Duž svake tabele u prikazu Design
se prikazuje linija sa informacijama koje pokazuju kolika je širina kolona i tabela.
•
Table mode (View > Table Mode podmeni) - Postoji nekoliko načina za prikazivanje tabela. Oni se
koriste samo kod uređivanja .
•
Image maps (View > Visual Aids > Image maps) - Vruće tačke slika su prikazane kao delimično
providni oblici. Ovo se koristi samo u cilju uređivanja slika
•
Invisible elements (View > Visual Aids > Invisible Elements) (nevidljivi elementi) - Bilo koji deo koda
koji se inače ne bi video u pogledu Design se prikazuje kao ikona. Preko kategorije
Preferences/Invisible Elements možete da odredite koja vrsta nevidljivog koda se prikazuje kao
ikona.
Code view (View > Code) prikazuje samo čist HTML kod za tu stranu. Ovaj prikaz u suštini predstavlja
ugrađeni editor teksta. Neke funkcije koje su ranije postojale, kao što su dodavanje ponašanja i crtanje nivoa
više se ne mogu koristiti iz ovog prikaza. Dokumenti koji nisu HTML dokumenti, kao što su CSS datoteke i
skriptovi, mogu se videti samo u ovom prikazu.
Code and Design View (View > Code and Design) deli prozor Document na dva dela po horizontali, tako da
u isto vreme možete da vidite i prikaz Design i prikaz Code. Mnogi ljudi smatraju da je ovaj pogled
najkorisniji, pošto im omogućava da prilikom projektovanja strane tačno vide gde se nalaze u kodu. Ovaj
prikaz je koristan kada radite sa složenim poslovima vezanim za kodiranje, kao što je izbor određene vrste ili
kolone u ugnježđenoj tabeli. Podrazumevano se prikaz Code vidi u gornjem delu prozora. Ako želite, možete
ga prebaciti u donji deo i to preko komande View > Design View on Top.
27 / 299
Dreamweaver MX 2004
Prikazi Code i Design su više od običnih pogleda. Oni predstavljaju različite načine rada. U zavisnosti od
prikaza, u panoima se prikazuju različite opcije, druge komande su izbačene. Kada su vidljiva oba prikaza,
fokus je uvek u jednom od njih, odnosno Dreamweaver smatra da je to aktivan prozor. Ako želite da
određeni pogled dobije fokus, kliknite u tu polovinu prozora.
Možete i da izaberete View > Switch View i da tako prelazite iz pogleda u pogled.
Pogled sa živim podacima
Ako Dreamweaver koristite za kreiranje sajtova koji su vezani za podatke, onda se u prikazu Design
prikazuju strane sa označenim pozicijama mesta na kojima će server eventualno da ubacuje podatke iz baze
podataka. Na primer, ako u Dreamweaveru gledate stranu za onlajn katalog, onda će Dreamweaver označiti
mesta za imena stavki, njihove cene i opise. Pogled Live Data omogućava da Dreamweaver zameni ove
označene lokacije stvarnim informacijama iz baze podataka, tako da možete bolje da vidite kako će Vaša
strana stvarno izgledati.
Statusna linija
Na dnu prozora Document se nalazi statusna linija. Tu se prikazuju informacije o samoj strani. Odatle
možete i da samo jednim klikom pristupite pogledima Design i Code.
28 / 299
Dreamweaver MX 2004
Veličina prozora
Inidikator veličine prozora ukazuje kolika je trenutna širina i visina "živog" dela prozora Document. (Živ deo je
deo prozora u kome se trenutno nalazi neki sadržaj, što je suprotno paletama i statusnim linijama, koji se
ponekad nazivaju "hromiranim" elementima). Ovo mogu biti važne informacije, ako pokušavate da napravite
stranu koja će se uklopiti u najčešće veličine prozora pretraživača.
Indikator veličine prozora prikazuje veličinu samo dela Design iz prozora Document. Ako je u prozoru
Document prikazan pogled Code, onda se ovaj indikator ne prikazuje.
Ako su u prozoru Document prikazana oba pogleda, onda se indikator odnosi na deo Design.
Ako radite u integrisanom radnom prostoru i ako ste prozor Document maksimizovali, onda indikator veličine
prozora pokazuje vidiljivi deo prozora (na primer, od donje ivice palete Insert, do dna prozora Document, kao
i od leve ivice prozora aplikacije, do vertikalne linije gde počinju panoi).
Indikator veličine prozora sadrži i padajući meni koji može brzo da promeni veličinu prozora Document. Mogu
se izabrati neke od unapred podešenih standardnih veličina. Te standradne veličine odgovaraju standardnim
veličinama prozora pretraživača. Ovo možete da koristite da biste brzo proverili kako se Vaša strana uklapa
u neke opšte veličine prozora. Niste ograničeni na upotrebu samo onih veličina koje je dao Dreamweaver.
Ako, na primer, pravite dizajn za intranet i znate da će svi pretraživači biti podešeni na rezoluciju 600 x 300,
te dimenzije možete da dodate u padajući meni.
Evo kako se to radi:
1.
Iz padajućeg menija indikatora veličine prozora izaberite opciju Edit Size. Otvoriće se kategorija
Status Bar iz okvira za dijalog Dreamweaver Preferences.
2.
U okviru za dijalog Preferences promenite veličinu prozora.
• Ako želite da promenite neku od postojećih dimenzija, izaberite je i unesite novi broj.
• Ako želite da zadate novu veličinu, kliknite u prostor ispod postojećih stavki, da biste ga
aktivirali i unesite novu dimenziju. Nova stavka može da ima širinu, visinu ili obe vrednosti.
3.
Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog Preferences. Od sada će se ta
stavka prikazivati u padajućem meniju indikatora za veličinu prozora.
29 / 299
Dreamweaver MX 2004
Indikator koji pokazuje veličinu dokumenta i vreme prebacivanja
Ovaj indikator prikazuje dve informacije koje su medusobno povezane. To su veličina tekućeg dokumenta i
svih ubačenih sadržaja, kao i procenjeno vreme koje je potrebno da se taj materijal prebaci. Osim ako ne
radite sa nekim posebno strpljivim posetiocima, ovo je vrlo bitna informacija, o kojoj treba voditi računa
prilikom kreiranja web strana. Indikator veličine datoteke (sa leve strane) izračunava veličinu tekuće HTML
datoteke, zajedno sa veličinom slika, Flash animacija ili nekih drugih datoteka koje treba preuzeti pre nego
što se strana prikaže u pretraživaču. Ova vrednost se zaokružuje na najbliži kilobajt. Procenjeno vreme
prebacivanja se odnosi na vreme prebacivanja preko zadate brzine mreže, zaokruženo na sekundu. Na
primer, ako je Vaša strana HTML datoteka veličine 1 K, na kojoj je slika od 27 K, sa brzinom veze od 28.8
Kbps, prebacivanje te strane će trajati oko 1 sekunde. Za ovaj slučaj će se prikazati vrednost 28Kb sec.
Podrazumevana brzina koja se koristi za izračunavanje vremena prebacivanja je 28.8 Kbps (kilobita po
sekundi). Ovu brzinu možete da promenite u skladu sa onom brzinom koju predviđate u ciljnom okruženju.
Na primer, ako pravite onlajn filmski festival, za korisnike koji imaju velike brzine prenosa, verovatno ćete
brzinu prenosa podesiti na nekoliko stotina kilobita po sekundi. Ako želite da podesite brzinu veze treba da
uradite sledeće:
1.
Kliknite indikator veličine prozora i iz padajućeg menija izaberite Edit Sizes. Otvoriće se okvir za
dajalog Preferences/Status Bar.
2.
U polju Connection Speed unesite vrednost koju želite. Ova vrednost treba da predstavlja srednju
vrednost brzine veze.
3.
Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Na statusnoj liniji će se sada
prikazati vreme prebacivanja, koje se izračunava na osnovu veličine dokumenta i nove brzine
prenosa.
Tag Selector
Tag Selector omogućava da tokom rada u pogledu Design stalno na oku imate i kod. Ova osobina koristi
činjenicu da se HTML strane prave kao niz međusobno ugnježđenih oznaka. Tag Selector sve vreme
ukazuje gde je tačka umetanja ili šta je izabrano u odnosu na hijerarhiju oznaka koje čine stranu. Pošto se u
pogledu Design prikazuje samo vidljivi deo oznake body, to je oznaka body uvek krajnja leva. Ako je tačka
umetanja u okviru oznake hl, Tag Selector prikazuje strukturu:
<body> <h1>
30 / 299
Dreamweaver MX 2004
Ako je tačka umetanja u ćeliji tabele, u vrsti tabele u samoj tabeli, Tag Selector prikazuje:
<body> <table> <tr> <td>
Ako je izabrana cela oznaka i njen sadržaj, Tag Selector tu oznaku prikazuje masnim slovima.
Najbolje je to što Tag Selector možete da koristite za selektovanje oznaka. Kliknite neku oznaku koja je tu
prikazana i u pogledu Design će ta oznaka i njen sadržaj biti selektovani. Ako desnim tasterom miša kliknete
Tag Selector, otvoriće se kontekstualni meni, u kome se nalaze stavke vezane za rad sa oznakama, kao što
su izbacivanje oznake, dok njen sadržaj ostaje (Remove Tag), primena CSS stila na oznaku (Set Class) ili
primena ID atributa (Set ID).
Palete
U Dreamweaveru postoje različite palete koje se mogu prikazati na vrhu prozora Document. Njih možete
koristiti kao pomoć u radu. Svim paletama se može pristupiti preko podmenija View > Toolbars ili ako desnim
tasterom miša kliknete prazan deo palete prozora Document.
Paleta Standard
U skladu sa trendom koji postoji kod većine programa, na paleti Standard se prikazuju komande iz menija
File i Edit koje se najviše koriste. Paleta Standard se može uključiti i isključiti preko opcije View > Toolbars >
Standard. Paleta Standard može da se otkači i da se postavi u centar prozora Document. Ponovo ćete je
pričvrstiti ako dva puta brzo kliknete njeno zaglavlje.
Paleta Document
Na paleti Document se prikazuju standardne ikone sa komandama koje se često koriste dok ste u prozoru
Document. Samo jednim klikom miša možete da promenite poglede na dokument, da pogledate kako to
izgleda u pretraživaču, da proverite da li je sve kako treba. Paleta Document može da se isključi i uključi ako
izaberete View > Toolbars > Document.
Pomoć
Ako imate teškoća u radu sa svojim stranama, ili sa samim Dreamweaverom, pomoć možete dobiti na
različitim mestima. U okviru pomoći koja postoji u Dreamweaveru, ili preko panoa Rreference, i na kraju, u
centru za podršku na sajtu firme Macromedia ćete verovatno naći odgovor na pitanje koje Vas zanima. U
ovom odeljku ćemo objasniti opcije za pružanje pomoći.
General Assistance: Pano Reference
Da li je oko Vas u toku rada naređana gomila literature? Ako je tako, onda će Vam pano Reference postati
najbolji prijatelj. U ovom panou se nalazi kompletan tekst sa nekoliko referentnih vodiča sa Weba.
31 / 299
Dreamweaver MX 2004
Pano Reference možete koristiti za pretraživanje informacija na svoj način, ili ga možete koristiti zajedno sa
prozorom Document, da biste dobili pomoć vezanu za neki sadržaj. Ako želite da dobijete pomoć vezanu za
neku oznaku ili skript na kojima trenutno radite, treba da uradite sledeće:
1. Kliknite unutar elementa za koji želite da dobijete referencu.
2. Izaberite Windows > Reference.
3. Otvoriće se pano Reference i u njemu opis i primer sintakse za izabranu stavku.
Pomoć Dreamweavera
Dreamweaver ima svoju pomoć koja objašnjava osnovne načine upotrebe svakog elementa programa. Ovu
pomoć treba koristiti za sva pitanja koja se odnose na osobine Dreamweavera.
Pomoći Dreamweavera ćete pristupiti ako izaberete Help > Using Dreamweaver. Otvoriće se aplikacija za
pomoć koja postoji na Vašem operativnom sistemu i u njoj će se prikazati pomoć vezana za Dreamweaver.
32 / 299
Dreamweaver MX 2004
33 / 299
Dreamweaver MX 2004
3. Kreiranje i rad sa dokumentima
Osnovni pojmovi vezani za kreiranje dokumenata
Dreamweaver nije namenjen samo za kreiranje HTML strana, iako je to verovatno vrsta strana koju će
većina korisnika najčešće praviti. Sa verzijom Dreamweaver MX 2004 možete da pravite bilo koju vrstu
dokumenta koji je vezan za Web. Svi dokumenti mogu da se kreiraju, menjaju, pa čak i grafički prikazuju u
prikazu Design. To se ne odnosi samo na HTML, već i na dokumente koji rade sa živim podacima, kao što
su ASP, CFM, PHP i JSP, zatim dokumenti za podršku, kao što su CSS i JS dokumenti, kao i različiti drugi
dokumenti, kao što su XML, XHTML i WML.
Usled ovih novih mogućnosti, kreiranje dokumenta u Dreamweaveru je i dalje osnovna stvar, ali više ne tako
jednostavna. Okvir za dijalog New Document omogućava da dokumente kreirate od početka, kao i da ih
uvozite iz nekih drugih izvora.
Okvir za dijalog New Document
Kada izaberete opciju File > New, ili pritisnete Ctrl+N, otvoriće se okvir za dijalog New Document. U ovom
okviru za dijalog postoji mnoštvo opcija, preko kojih možete da kreirate dokumenat bilo koje vrste.
Tipovi dokumenata koji se kreiraju
Veći deo okvira za dijalog zauzimaju opcije za kreiranje različitih tipova dokumenata. U krajnjoj levoj koloni
su prikazane kategorije sa osnovnim tipovima dokumenata. To su: Basic, Dynamic, Template, itd.
Većinom ovih tipova se nećemo baviti u ovom poglavlju.
Ako želite da kreirate standardnu HTML stranu, izaberite opciju Basic > HTML. Iz krajnje leve kolone
izaberite opciju Basic, a iz desne kolone opciju HTML.
Pošto u okviru za dijalog postoji tako mnogo opcija, sa kojima je teško snaći se, postoji i deo sa opisom
svake opcije, koji se nalazi u donjem desnom uglu. Iz druge kolone izaberite neki tip datoteke i pročitajte
34 / 299
Dreamweaver MX 2004
kratak opis koji se odnosi na to što ste izabrali. Za neke opcije će se u gornjem desnom uglu prikazati i slika.
Treba da znate da iako se Dreamweaver može koristiti za kreiranje skoro svih tipova dokumenata, ipak nisu
svi ti tipovi prikazani u prozoru Design. Ovde su prikazani samo oni tipovi datoteka koji se koriste za kreiranje
vidljivih web strana, odnosno strana koje se mogu prikazati u prikazu Design. Drugi tipovi datoteka, kao što
su JS, CSS i TXT moraju da se prikazuju i uređuju u prozoru Code.
Pripremljene strane
Dreamweaver dolazi sa nizom unapred pripremljenih rasporeda, koje možete dalje da prilagođavate svojim
potrebama. Ovi rasporedi se nalaze u kategorijama Page Designs i Page Designs (Accessible).
Dreamweaver takođe ima i niz unapred definisanih CSS dokumenata, koji su spremni da se primene u
Vašim dokumentima, tako da možete brzo da formatirate tekst i odgovarajući raspored.
Ako želite da kreirate web stranu na osnovu neke od ovih pripremljenih HTML strana, izaberite odgovarajuću
stavku iz neke od kategorija Page Design i kliknite OK. Dreamweaver će napraviti novi dokument i u njemu
postaviti mesta za ubacivanje sadržaja. Primeniće i izabrano formatiranje. Upamtite ovaj dokument kao deo
svog web sajta i njegov sadržaj prilagodite svojim potrebama. Na taj način možete brzo da napravite novu
stranu.
Ako na osnovu stavki koje birate iz ovog okvira za dijalog napravite CSS stranu, nećete dobiti stranu koju
možete da prikažete u svom pretraživaču. CSS datoteke služe za podršku HTML stranama i drugim
dokumentima. Ako želite da na osnovu neke od unapred pripremljenih strana sa CSS-om kreirate novu,
izaberite odgovarajuću stavku iz kategorije CSS i kliknite OK. Dreamweaver će kreirati CSS datoteku (neće
je prikazati u prikazu Design), koja sadrži listu sa stilovima za formatiranje HTML strana. Upamtite ovaj
dokument na svom web sajtu, sa ekstenzijom .css. Da biste tu stranu upotrebil na HTML stranama, morate
neku od tih strana povezati sa CSS datotekom.
Saglasnost sa XHTML-om
Kad god pravite datoteku koja se u pretraživaču može prikazati, u okviru za dijalog imate opciju koja Vas pita
da li želite da svoj novi dokument učinite saglasnim (kompatibilnim) sa XHTML-om. XHTML je najnovija
varijanta HTML-a, koja će eventualno zameniti HTML. XHTML se zasniva na XML-u. Sintaktičke razlike u
odnosu na HTML su veoma male, ali je pridržavanje pravila mnogo čvršće. Pretraživači bi u budućnosti
trebalo da za kreiranje ispravnih dokumenata zahtevaju XHTML. Ako Dreamweaveru kažete da novi
dokument treba da bude kompatibilan sa XHTML-om, dobićete malo drugačiju sintaksu u odnosu na
uobičajenu.
Novo podešavanje podrazumevanih osobina dokumenta (preferences)
Kada izaberete File > New, Dreamweaver podrazumevano otvara okvir za dijalog New Document, u kome je
podrazumevani tip dokumenta HTML, a kompatibilnost sa XHTML-om je isključena. Ako želite da promenite
ove i druge podrazumevane vrednosti, kliknite dugme Preferences, koje se nalazi na dnu okvira za dijalog
New Document. Otvoriće se okvir za dijalog Preferences > New Document. Ovo je standardan okvir za
dijalog Preferences koji se koristi svuda u Dreamweaveru. Istom okviru za dijalog možete da pristupite i ako
izaberete Edit > Preferences i sa leve strane izaberete kategoriju New Document.
35 / 299
Dreamweaver MX 2004
Rad sa dokumentima
Kako da u Dreamweaveru od svojih dokumenata izvučete najviše? Morate biti sigurni da su ispravni. Morate
biti sigurni da ispravno rade u svim pretraživačima, koje mislite da će Vaši posetioci koristiti. Na kraju morate
biti sigurni da su strane dostupne.
Provera ispravnosti strane
Provera ispravnosti je važan koncept u svetu Web razvoja. U pitanju je proces provere koda za HTML, XML i
XHTML dokument, tako da budete sigurni da je ispravno kodiran (sa ispravnom sintaksom i bez oznaka i
atributa koji nisu standardni). Ovu proveru radite pre nego što stranu prikažete u pretraživaču. Jedan od
razloga što su današnji pretraživači tako glomazni je da su programirani za rad sa svim vrstama neispravnog
koda, pa čak pokušavaju da pogode kako bi strana trebalo da izgleda, na osnovu sintakse koja nije ispravna.
U idealnom svetu, svaka strana bi trebalo da se proveri, pre nego što pretraživač pokuša da je prikaže.
Strane koje su neispravne ne bi trebalo da se prikazuju. Pretraživači bi bili manji pošto bi prikazivali samo
ispravne strane. Bez obzira da li ste početnik ili iskusan profesionalac u web dizajnu, proveru ispravnosti za
sada možete zanemariti. Nijedan od pretraživača ne radi ovu proveru, za sada. Ali verovatno u budućnosti
hoće.
Provera ispravnosti HTML koda
Dreamweaver nudi proveru svih HTML dokumenata. Ako želite da proverite ispravnost dokumenta, otvorite
dokument koji želite da proverite i izaberite File > Check Page > Validate Markup. Nakon nekoliko trenutaka
će se otvoriti prozor Results. Prikazaće se kartica Validation i u njoj izveštaj o dokumentu.
Možete i da proverite tekući dokument ili tekući sajt. Ovo ćete uraditi ako otvorite prozor Results (Window
Results), pritisnete zeleno dugme za validaciju u gornjem levom uglu i izaberete opciju Validate Document ili
Validate Entire. Ako ste izabrali pano Site, onda u meniju Validate imate i opciju Validate Selected Files in
Site.
36 / 299
Dreamweaver MX 2004
Definisanje načina provere
Provera ispravnosti se odnosi na proveru dokumenta u odnosu na standarde. Postoje različiti standardi, od
HTML-a 2.0 do XHTML. Da biste videli koji standard Dreamweaver koristi za proveru, i da ga promenite ako
je potrebno, izaberite Edit > Preferences > Validator. Možete i da u prozoru Validator kliknete dugme Validate
i izaberete opciju Settings. Obe komande otvaraju okvir za dijalog Preferences Validator.
Provera XML dokumenata
Ako radite sa nekom vrstom XML dokumenta (uključujući i XHTML), onda je provera vrlo bitna. Pretraživači (i
drugi interpreteri) generalno neće obrađivati neispravne dokumente. Ako želite da proverite XML dokument,
izaberite File > Check Page > Validate as XML. Ovu komandu ćete koristiti i za XHTML dokumente, jer su i
oni XML dokumenti.
Provera rada u određenom pretraživaču
U redu, Vaše strane su ispravne, ali zašto u pretraživaču Vaših korisnika ne rade kako treba? Pretraživači
imaju svoja podešavanja i ne slažu se uvek sa standardom. Većina web dizajnera na kraju završi tako što
37 / 299
Dreamweaver MX 2004
upamti ta podešavanja i radi sa njima.
Ipak, ne možemo svi da pamtimo sve. Dreamweaver ima bazu podataka sa informacijama o tome koji
pretraživač šta koristi.
Automatska provera
Provera prikazivanja u ciljnom pretraživaču je tako bitna da Dreamweaver automatski proverava svaku
stranu čim je otvori. Na paleti Document se istovremeno prikazuje ikona Browser Target Check. Ako
dokument uspešno prođe sve provere, prikazaće se ikona OK, a ako to nije slučaj, prikazaće se ikona za
alarm. Ako želite da pogledate listu problema, kliknite ikonu Browser Target Check i izaberite opciju Show All
Errors. Možete i da otvorite prozor Results (Window > Results) i da odete na karticu Target Browser Check.
Sve stavke pored kojih stoji žuta ikona su upozorenje, odnosno one nisu podržane u nekom od ciljnih
pretraživača, ali na strani neće dovesti do problema. Sve stavke pored koji se nalazi crveni znak stop su
greške, tako da se u pretraživaču može dobiti neprijatno iznenađenje.
Manuelna provera
Pored automatske provere, proveru dokumenta ili sajta možete da vršite i u bilo kom drugom trenutku. Ako
želite da proverite ciljni dokument, kliknite ikonu Target Browser Check sa palete Document i izaberite opciju
Check Browser Support. Ako želite da proverite više dokumenata ili ceo sajt, otvorite prozor Results
(Window > Results), pređite na karticu Target Browser Check i kliknite zeleno dugme. Pomoću padajućeg
menija iz prozora Results možete da prikažete alarme vezane za neki dokument ili ceo sajt.
Definisanje pretraživača za koje se vrši provera
Provera prikazivanja strane u pretraživačima ima značaja samo ako definišete koji su to pretraživači koje
želite da proveravate. Ovo ćete uraditi ako na paleti kliknete Target Browser Check i izaberete opciju
Settings. U okviru za dijalog koji se otvara, izaberite pretraživače i verzije koje želite da proveravate. Nakon
toga kliknite OK, da biste zatvorili ovaj okvir za dijalog.
Dostupnost Vaših strana
Vaše strane izgledaju sjajno u većini pretraživača, prošle su testove provere koda. Ali, da li su strane
dostupne? Strane koje su dostupne su one koje mogu da koriste i ljudi sa vizuelnim, motornim, slušnim ili
nekim drugim nedostacima. Tu spadaju ljudi koji preko čitača ekrana ili nekog drugog specijalnog softvera i
hardvera pristupaju Internetu. Da bi World Wide Web bio u potpunosti univerzalan, strane treba da budu
dostupne i njima.
Standardni vezani za dostupnost
Postoje različiti standardi koji određuju da li su web strane dostupne. Najvažniji od njih su:
• Section 508 U pitanju je federalni dekret koji svi sajtovi koje koriste vladini službenici, kao i sajtovi
koji distribuiraju informacije vezane za vladu moraju poštovati. Premda se ovaj standard primenjuje
samo na sajtove vezane za federalnu državu, mnoge vlade nižih nivoa su ih prihvatile i za sajtove
pod njihovom nadležnosti. Mnoge korporacije su takođe prihvatile ove standarde.
• W3C Web Accessibilitv Initiative (WAI) WWW Konzorcijum (W3C) je napravio detaljan skup
pravila koja su vezana za dostupnost. Mnoga od njih odgovaraju pravilima iz standarda Section 508,
ali ovaj standard je generalno širi od standarda Section 508.
Pomoću panoa Reference možete da naučite više o standardima vezanim za dostupnost. Otvorite ovaj pano
i iz padajućeg menija Book izaberite opciju UsableNew Accessibility Reference. Sada na raspolaganju imate
sve vrste informacija o različitim standardima i načinu na koji se oni primenjuju.
Opcije Dreamweavera vezane za dostupnost
38 / 299
Dreamweaver MX 2004
Dreamweaver MX 2004 omogućava da brzo pristupite svakom od atributa vezanim za dostupnost strane.
Ako želite da uključite atribute dostupnosti, izaberite Edit > Preferences i u okviru za dijalog izaberite
kategoriju Accessibility. Opcije koje su date u listi predstavljaju različite elemente strana koje u HTML-u imaju
specijalne atribute vezane za dostupnost. Kada ovde izaberete neku stavku, svaki naredni put kada kliknete
objekat, da biste ga ubacili na stranu, u njegovom okviru za dijalog se prikazuju i njegovi atributi vezani za
dostupnost. (O opcijama dostupnosti za pojedinačne elemente strana možete više saznati u posebnim
odeljcima, onda kada budemo govorili o tim elementima).
Provera dostupnosti
Kao što možete da proverite ispravnost koda i podršku pretraživača, možete i da proverite dostupnost svojih
strana i sajtova. U Dreamweaveru postoje različiti alati, koji su upravo tome namenjeni.
Ako želite da dobijete izveštaj u vezi dostupnosti tekućeg sajta, treba da uradite sledeće:
1. Izaberite Site > Reports.
2. Kada se otvori okvir za dijalog Site Reports, izaberite Accessibilty. Možete izabrati opciju da se
izveštaj napravi za tekući dokument, ili za izabrane datoteke sa sajta.
3. Pre nego što napravite izveštaj, kliknite dugme Report Settings i izaberite standard prema kojem
želite da se provera vrši. Kliknite OK da biste zatvorili okvir za dijalog.
4. Klikntie Run da biste napravili izveštaj.
Dreamweaver će pregledati Vaše strane i rezultate prikazati u prozoru Results.
39 / 299
Dreamweaver MX 2004
4. Rad sa tekstom
Osnove u vezi teksta
Na web strani ne možete da dobijete mnogo više od osnovnog teksta. Ako sa druge strane sagledate
činenjicu da 90% vremena koje provedete kao dizajner za Web radite sa tekstom, onda ćete uvideti potrebu
da dobro naučite kako HTML radi sa tekstom i šta je to što može poći naopako.
Tekst u pretraživaču
Ako ste ikada pravili neku web stranu, onda znate osnovnu činjenicu. HTML je strukturni markup jezik.
Njegov osnovni zadatak je da opiše logičku strukturu elemenata na strani, kao što je i tekst, tako da logika
strane bude jasna svakoj osobi ili uređaju koji je čita. Za formatiranje teksta HTML koristi oznake na nivou
bloka, koje se primenjuju na delove teksta i time ukazuju na ulogu tog teksta na strani. Pored oznaka na
nivou blokova, koriste se i oznake na nivou karaktera, koje se primenjuju na reč ili nekoliko reči u okviru
bloka, čime se te reči ističu u odnosu na ostatak teksta.
Tekst u Dreamweaveru
Tekst se u Dreamweaveru kreira kucanjem ili prebacivanjem iz nekog drugog programa. Funkcije za
kucanje, uređivanje i selektovanje teksta su iste kao i u bilo kom programu za uređivanje teksta. Provera
pravopisa (Text > Check Spelling) omogućava da proverite pravopis za izabrani tekst ili ceo dokument.
Provera se vrši na osnovu rečnika koji postoji u Dreamweaveru, ali i prema Vašem sopstvenom rečniku.
HTML strukturu ćete na tekst primeniti preko Text Property Inspectora, tekstualnih objekata sa palete Insert,
kao i različitih komandi iz menija Insert.
Prebacivanje teksta iz drugih programa
Ako tekst koji Vam treba na strani već postoji u nekom drugom programu, ili ako samo više volite da kucate u
nekom drugom programu, onda taj tekst treba efikasno prebaciti u Dreamweaver. Srećom, postoji nekoliko
mehanizama preko kojih se to može uraditi.
Prednosti i nedostaci kopiranja iz drugih programa
Tekst se iz drugog programa može lako iskopirati u Dreamweaver. Ipak, sebi ćete olakšati život ako to radite
kako treba. Nakon što ste iz nekog programa iskopirali tekst na Clipboard, za njegovo ubacivanje Vam stoje
na raspolaganju tri komande. To su komande Edit > Paste, Edit > Paste Text i Edit > Paste HTML. Postoje i
dve odgovarajuće komande za kopiranje, Edit > Copy i Edit > Copy HTML.
Komanda Paste
Ako se nalazite u prozoru Design, onda će komanda Edit > Paste or Edit > Paste Text prebaciti tekst koji se
nalazi na Clipboardu u Vaš dokument. Svo formatiranje koje je postojalo se gubi. Oznake novih pasusa će
postati oznake br. Neće se ubacivati nove HTML oznake. Dreamweaver će svaki specijalni karakter koji
prepozna da konvertuje. To se odnosi na apostrofe, navodnike, crtice, oznake za autorska prava. Konverzija
se vrši iz koda koji je specifičan za neki sistem za obradu teksta, na opšte HTML oznake.
Ako se nalazite u prikazu Code, onda komanda Edit > Paste zadržava formatiranje i tekst postavlja na mesto
gde ste pokazali. Tom prilikom nema konverzije specijalnih karaktera. Ako, na primer, na Clipboardu imate
tekst:
40 / 299
Dreamweaver MX 2004
<b>Zdravo, kako ste</b>
41 / 299
Dreamweaver MX 2004
onda ćete komandom Edit > Paste iz prozora Design u svoj kod postaviti sledeće:
<b>Zdravo, kako ste</b>
Pretraživač će prikazati uglaste zagrade, ali tekst neće biti ispisan masnim slovima. Ako za prebacivanje
istog teksta upotrebite komandu Edit > Paste iz prozora Code, onda se tekst ne menja, tako da se u
pretraživaču prikazuje tekst:
Zdravo, kako ste.
Komanda Paste HTML
Kako se tu uklapa komanda Paste HTML? Ako se nalazite u prozoru Design i ako izaberete Edit > Paste
HTML, dobija se isti efekat kao da ste bili u prozoru Code i izabrali komandu Edit > Paste. Drugim rečima,
ova komanda prilikom prebacivanja teksta ne vrši nikakve promene. Sva formatiranja se izbacuju, a
specijalni karakteri se ne konvertuju.
Ako se nalazite u prikazu Code, onda komanda Paste HTML nije dostupna.
Kopiranje preko komande Copy nasuprot kopiranja preko komande Copy HTML
Isti principi važe i u obrnutom smeru, odnosno ako želite da kod iz Dreamweavera prebacite negde napolje.
Ako se nalazite u prikazu Design i ako izaberete Edit > Copy, onda ćete vidljivi tekst koji ste izabrali postaviti
na Clipboard. Ako se nalazite u prikazu Design i ako izaberete Edit > Copy HTML, ili ako se nalazite u
prikazu Code i ako izaberete opciju Edit > Copy, onda se na Clipboard prebacuje izvorni HTML kod,
uključuju i tekst strane.
Prebacivanje teksta (i drugih objekata) iz Worda i Excela
Od verzije Dreamweaver 2004 lako možete da čak i složeni sadržaj prebacite iz Worda ili Excela u
Dreamweaver. Tom prilikom možete da zadržite veći deo formatiranja i da dobijete pristojan HTML kod.
Kopiranje i postavljanje u dokument
Iskopirajte nešto iz Worda ili Excela, a onda u prozoru Design u Dreamweaveru izaberite komandu Edit >
Paste or Edit > Paste Text. To je sve. Sadržaj koji ste kopirali ima dobar format i strukturu.
Formatiranje teksta
Pasusi koje ste iskopirali iz Worda dolaze kao pravi pasusi, a ne kao tekst koji je odvojen novim redovima.
Stil Normal iz Worda je ubačen u klasu iz CSS-a, po imenu MsoNormal, a to je ubačeno u interni stylesheet
dokumenta iz Dreamweavera. Pasusi koji su imali neki od stilova za naslove iz Worda (Heading 1, Heading 2
itd.) dolaze između HTML oznaka za naslove (hl, h2, itd.), sa dodatnim unutrašnjim stilovima, koji prenose i
format.
Tabele
Tabele iz Worda, kao i unakrsne tabele iz Excela se u Dreamweaver prebacuju kao HTML tabele.
Formatiranje se zadržava preko klasa iz CSS-a:
<table class="MacTableGrid">
<tr>
<td width="118" valign="top">
.<p class="MacNormal">State</p></td>
<td width="118" valign="top">
.<p class="MacNormal">Capital</p></td>
</tr>
Uvoz dokumenata iz Worda i Excela
Metod copy-and-paste radi dobro kod kopiranja delova dokumenta. Ceo dokument iz Worda ili Excela
možete i efikasnije prebaciti u HTML. Za to se koriste komande Dreamweavera vezane za uvoz. Evo kako se
to radi:
1. Kreirajte ili otvorite dokument u Dreamweaveru u koji želite da uvezete dokument.
2. Pređite u prikaz Design (komande ne funkcionišu u prozoru Code).
3. Izaberite File > Import > Word Document ili File > Import Excel Document. Pronađite datoteku koju
želite da ubacite i kliknite OK da biste zatvorili okvir za dijalog.
Dobili ste sadržaj u HTML-u koji je lepo formatiran.
Treba da imate na umu da ponekad, dokumenti iz Worda mogu biti suviše dugi (nekoliko desetina ili stotina
42 / 299
Dreamweaver MX 2004
strana), dok web strane ne bi trebalo da budu tako duge. Ako želite da u Dreamweaver prebacite dugačak
dokument iz Worda, treba da ga podelite na nekoliko delova i da svaki deo ubacite posebno. Možete i da
izaberete samo deo dokumenta i da preko metoda copy-and-paste postavite svaki segment u poseban
HTML dokument. Ako želite da se sve to ponaša kao celina, u Dreamweaveru morate da dodate linkove na
svaki od ubačenih delova.
Rad sa HTML tekstom iz Worda
Microsoft Word može da napravi svoj HTML tekst. Za to se koristi komande Save as Web Page ili Save as
HTML. Na žalost, Word ne može da napravi preterano dobar HTML tekst. Kod koji on pravi je mešavina
HTML-a i XML-a, sa mnoštvom oznaka tipa font ili stilova iz CSS-a, kao i bezbroj oznaka meta. Ovim se web
strana čini nepotrebno velikom, usporava se njeno učitavanje, a dalje promene postaju teško izvodljive.
Ako imate mogućnost da birate, onda je bolje da ostavite da Dreamweaver pravi HTML kod, odnosno da
upotrebite metode copy-and- paste ili uvoz koje smo pomenuli. Sa druge strane, možda nećete imati kontrolu
nad tim delom procesa. Treba da u Wordu, pre izvoza, pažljivo podesite opcije, a da kasnije upotrebite
mogućnosti Dreamweavera i poboljšate situaciju.
Priprema dokumenta u Wordu
U Wordu možete da uradite nekoliko stvari i da time dobijete čistiji i što bolji kod.
Prvo morate da budete sigurni da su opcije vezane za kreiranje koda podešene na pravi način. U zavisnosti
od verzije Worda, ove opcije se nalaze na različitim mestima. Evo koje opcije treba da potražite:
•
Podesite ciljni pretraživač na opciju koja nije samo Internet Explorer. Prilično dobar izbor je Internet
Explorer 4.0 ili Netscape Navigator 4.0. Isključite sve opcije koje nisu podržane u oba pretraživača.
• Za formatiranje fontova treba da koristite CSS. (Ovim se izbegavaju brojne oznake fonta koje se
ubacuju u dokument.)
• Za grafički format nemojte koristiti format PNG.
• Kodiranje podesite na Unicode ili Western European (ISO). Ovo je posebno važno, jer Word
podrazumevano strane kodira u skladu sa platformom koja se koristi. Specijalni karakteri mogu da
dobiju format koji je specifičan za Windows ili Mac i da kasnije u pretraživačima izazovu probleme.
Ako u Vašem dokumentu postoji grafika, podesite rezoluciju na neku razumnu vrednost, kao što je na primer
72 ili 96.
U zavisnosti od verzije Worda koju koristite izaberite File > Save as Web Page, File > Save as HTML ili File >
Save. Preko opcija u okviru za dijalog Save podesite neki od formata. Kada se tu nađete, postoje dve
osnovne mogućnosti. To su da ceo sadržaj upamtite kao web datoteku, ili da upamtite prečišćenu ili verziju
samo za čitanje. U čemu je razlika? Ako upamtite ceo sadržaj, Word ubacuje sve vrste koda, tako da kasnije
možete da taj dokument, koji je postao HTML, ponovo vratite u Word. Ovim se ubacuje mnogo dodatnog
materijala. Osim ako niste potpuno sigurni da želite baš to, izaberite opciju filtered ili display only.
Prečišćavanje u Dreamweaveru
Dokument koji je Word napravio, u Dreamweaveru otvarate kao i bilo koji drugi HTML dokument. Nakon toga
izaberite opciju Commands > Clean Up Word HTML. Otvoriće se okvir za dijalog Clean Up Word.
43 / 299
Dreamweaver MX 2004
Opcije koje se nalaze na kartici Detailed možete da koristite za tačno definisanje promena koje želite da se
uključe u konverziju.
Nakon što ste izabrali određene stavke, kliknite OK. Dreamweaver đe obraditi datoteku, a u prozoru
Document će se prikazati prečišćena verzija strane.
Nakon prečišćavanja, u kodu mogu i dalje da postoje oznake i atributi koje ne želite. Konkretno, može se
desiti da postoji interni style sheet, i da on sadrži puno klasa po imenu Sectionl, Section2, itd. Ove klase se
primenjuju na oznake div, koje okružuju telo strane. Na celoj strani se mogu naći elementi koji su dodeljeni
klasi Normal, iako ta klasa nije interno definisana, ili nije u style sheetu.
Malo se zabavite pronalaženjem i zamenom ovih stavki. Možete da uradite sledeće:
1. Otvorite okvir za dijalog Find and Replace (Edit > Find and replace).
2. Oblast pretraživanja (search scope) podesite na Document.
3. Ako želite da uklonite oznake div, search type podesite na Specific Tag. U delu Search For, unesite
div, kao oznaku koja se briše, a onda pritisnite dugme da biste obrisali druge kriterijume
pretraživanja. Iz padajućeg menija Action izaberite opciju Strip tag. Ovim se oznake div uklanjaju, a
da se ne briše njihov sadržaj. Na slici je prikazan okvir za dijalog Find and Replace, sa podešenim
ovim opcijama. Kliknite dugme Replace All da biste završili pretraživanje.
4. Ako želite da uklonite klasu Normal, podesite search type na Source code. U polju Search For
44 / 299
Dreamweaver MX 2004
unesite class="Normal". Polje Replace With treba da ostane prazno. Kliknite Replace All da biste
zamenili sve što treba.
5. Nakon što završite, zatvorite okvir za dijalog Find and Replace.
Ako želite da izbacite interne CSS stilove, možete da pretražujete sa nekom drugom opcijom, ili možete da
otvorite pano CS Styles (Window > CSS Styles), izaberete interne stilove i kliknete ikonu za otpatke na dnu
panoa.
Tabelarni podaci
Tabelarni podaci predstavljaju tekst koji se već nalazi u tabeli. To su podaci iz unakrsne tabele u Excelu, ili iz
tabele koja dolazi iz nekog programa za obradu teksta, ili baze podataka. Da biste prikazali podatke na web
strani, oni moraju biti u HTML tabeli. Premda većina ovih programa može to izvesti kao HTML tekst, kod koji
se pravi nije baš najčistiji. Ako je tabela u Excelu ili Wordu, možete da je jednostavno iskopirate i postavite u
Dreamweaver, kao što smo već opisali. Ako tabela dolazi iz nekog drugog programa, onda je najbolje da
upotrebite komandu Import Tabluar Data. Evo kako se to radi:
1.
2.
U originalnom programu (na primer, program za rad za unakrsna izračunavanja), zapamtite
datoteku, ili je izvezite, ali u formatu sa nekim delimiterom. To znači da program treba da napravi
tekstualnu datoteku, kod koje neki karakter, obično zarez ili tabulator, odvajaju sadržaj pojedinih
ćelija, a oznaka za novi red ukazuje na novu vrstu iz tabele.
U Dreamweaveru otvorite dokument i kursor postavite tamo gde želite da se prikažu tabelarni
podaci. Sa palete Layout Insert izaberite opciju Tabular Data, ili izaberite File > Import > Tabular
Data ili Insert > Table Objects > Import Tabular Data. Otvoriće se okvir za dijalog u kojem možete
da izaberete tekstualnu datoteku koja se uvozi, da definišete karakter koji se koristi kao delimiter, i
da tabeli dodelite formatiranje kakvo želite. (Ovo kasnije uvek možete da promenite, preko Property
Inspectora, tako da nije baš toliko bitno da ovde sve uradite kako treba.). Kada kliknete OK,
Dreamweaver kreira novu tabelu koja sadrži tekst iz datoteke, deli je na ćelije i vrste, na bazi
delimitera. Ovo je prikazano na slici.
45 / 299
Dreamweaver MX 2004
Nakon što Dreamweaver napravi tabelu koja sadrži uvezene podatke, ona se ponaša kao i bilo koja druga
tabela, koju biste napravili u Dreamweaveru. Nema dinamičke veze sa tekstom koji ste uvezli, tako da se
ništa loše ne može desiti ako tu datoteku obrišete ili premestite.
Prilikom upotrebe ove komande treba biti oprezan, jer Dreamweaver ne može da prepozna spajane ćelije.
Ako se u originalnoj unakrsnoj tabeli ili običnoj tabeli nalaze takve ćelije, tabela koju će Dreamweaver da
napravi neće imati pravilnu strukturu. Problem možete rešiti ako ručno podesite vrednosti rowspan i colspan
za te ćelije.
Definisanje strukture teksta
Kao web dizajner, sa tekstom treba da radite što je moguće efikasnije. To znači da efikasno treba da kreirate
i menjate tekst, kao i da treba da imate dobru ideju šta čini dobru strukturu teksta.
Dobra struktura teksta: Dostupnost teksta
Ako želite da napravite dobru HTML stranu, onda treba da odvojite formu i sadržaj. Tekst je U HTML-U
struktuiran preko oznaka koje ukazuju na logičku namenu svakog elementa teksta (naslova, podnaslova,
pasusa, listi, itd.).
To je sadržaj. Forma je način na koji se tekst predstavlja, tako da njegova logička struktura bude očigledna.
Forma se može kontrolisati preko pretraživača, čitača ekrana, ili nekog dragog uređaja. Na nju se može
uticati preko CSS-a, koji ukazuje kako se može rukovati nekim logičkim elementima.
Zašto je bitna ova razlika? Najpre je u pitanju efikasnost. Podešavanje svakog pojedinačnog naslova na web
sajtu na određenu veličinu, font ili boju (za sve ovo se koristi termin markup za prezentaciju) je dosadno i
teško za kasnije ažuriranje. Mnogo je efikasnije da svaki naslov označite kao naslov i da onda pretraživaču ili
style sheetu ostavite formatiranje svih naslova. Ovo se zove strukturni markup.
Ne samo da je efikasniji, strukturni markup je i fleksibilniji, pa tako i dostupniji. Čitač ekrana, na primer, ne
zna da neki veliki tekst na strani, ispisan masnim slovima, treba da bude naslov, ali zna da je tekst koji je u
okviru oznake hl naslov. Preporuke konzorcijuma W3C koje se odnose na dostupnost uključuju i one koje
ohrabruju upotrebu strukturnog, a ne prezentacionog markupa.
3.3. Za kontrolu rasporeda i prezentacije treba koristiti Style Sheet.
3.5. Elementi zaglavlja treba da se koriste za izražavanje strukture dokumenta. Ovi elementi treba
da se koriste prema specifikaciji.
3.6. Liste i stavke u njima treba označiti na pravi način.
3.7. Navodnike treba koristiti na pravim mestima. Nemojte koristiti oznake navođenja (kao što su
oznake blockquote, na primer) za formatiranje tipa uvlačenja.
Iz ovih razloga se oznaka font i njeni atributi (size, color i face) u HTML-U koriste sve manje, u korist CSS-a.
Takode se manje koriste oznake bold i italic (oznake b i i), a umesto njih treba koristiti oznake em (emphasis)
i strong. Oznake font, bold i italic se koriste samo za vizuelnu prezentaciju.
46 / 299
Dreamweaver MX 2004
Opcije indent i outdent
Dugmad Indent i Outdent u okviru Property Inspectora izgledaju kao slične kontrole u programima za obradu
teksta, ali nisu. Kada se ove opcije primene na obične pasuse, koji nisu stavke u definisanoj listi, dodaju se
oznake blockquote. Kada se primene na stavke u uređenoj ili neuređenoj listi, onda se kreiraju podkategorije.
To je pravi način kako treba da se koriste. Ako želite da uvučete neki pasus, onda preko CSS-a treba da
kreirate stil za uvučeni pasus. Ako želite da stavke u listi budu uvučene više nego što je uobičajeno, onda to
treba da promenite preko CSS-a, koji će promeniti oznaku li.
Sve oznake treba koristiti prema njihovoj strukturi, a ne prema izgledu
Ovo je samo proširenje prethodne teze. Kada primenjujete oznaku treba da razmišljate strukturno, a kada
primenjujete style sheet, treba da razmišljate kao o prezentaciji. Najviši nivo naslova u dokumentu treba da
bude h1, a ne h2 ili h3. Ako oznaka h1 pravi tekst koji je suviše velik za Vaš ukus, preko CSS-a možete da
promenite prezentaciju, a ne da promenite način upotrebe. Formatiranje listi treba koristiti samo za liste, ne
za uvlačenje. I tako dalje. Neki od posetilaca Vašeg sajta će Vam biti zahvalni. Zahvalićete i sami sebi, kada
kasnije budete održavali taj dokument. Kolege će Vam biti zahvalne kada dođe trenutak da treba ažurirati
dokument, a Vi budete na odmoru.
Ispravka teksta sa lošom strukturom
Šta ako nasledite stranu koja narušava pravila? U Dreamweaveru postoje različiti alati koji mogu da
pomognu u rešavanju ovih problema.
Brisanje oznaka font
Upotreba oznaka font nikad nije bila dobra ideja. Ako želite da uklonite te oznake, treba da uradite sledeće:
1. Postavite kursor unutar teksta koji je formatiran pomoću oznake font.
2. U Tag Selectoru pronađite oznaku font i kliknite je desnim tasterom miša. Iz pomoćnog menija
izaberite opciju Remove Tag. Ovim će se oznaka font ukloniti, a sam tekst neće biti narušen.
Ako želite da brzo uklonite sve oznake font iz jednog ili više dokumenata, možete da upotrebite pretraživanje
Specific Tag. Evo kako se to radi:
1. Izaberite Edit, Find and Replace.
2. Kada se otvori okvir za dijalog Find and Replace, podesite oblast pretraživanja na ono što želite.
3. Tip pretraživanja (search type) podesite na Specific Tag. U polju Search Field unesite font. Kliknite
dugme minus ( - ) da biste uklonili sve druge opcije pretraživanja.
4. Iz padajućeg menija Actions izaberite opciju Strip Tag. Na slici je prikazano kako bi okvir za dijalog
trebalo da izgleda u ovom trenutku.
5. Kliknite Replace ili Replace All da biste izvršili pretraživanje.
6. Kada završite, kliknite Close da biste zatvorili okvir za dijalog.
Zamena oznaka Bold i Italic, oznakama String i Emphasis
47 / 299
Dreamweaver MX 2004
Oznake b i i takođe možete preko pretraživanja Specific Tag zameniti oznakama strong i em.
1. Izaberite Edit > Find and Replace.
2. Kada se otvori okvir za dijalog, podesite oblast pretraživania onako kako želite.
3. Tip pretraživanja podesite na Specific Tag. U polju Search Field unesite b. Kliknite dugme minus ( - )
da bste uklonili sve druge opcije pretraživanja.
4. Iz padajućeg menija Action izaberite Replace Tag. U tekstualnom polju koje se prikaže unesite
strong. Na slici je prikazano kako bi okvir za dijalog trebalo da izgleda u ovom trenutku.
5. Kliknite Replace ili Replace All da biste izvršili pretraživanje.
6. Ponovite prethodne korake i zamenite i sa em. Nakon što zatvorite kliknite Close da biste zatvorili
okvir za dijalog.
Istu tehniku možete da upotrebite i za uklanjanje oznaka blockquote i njihovu zamenu oznakama p. Tom
prilikom je ipak pametnije da koristite opciju Replace, a ne Replace All, tako da možete da ispitate svaki
pojedinačni slučaj i da budete sigurni da nije u pitanju navodnik, koji je na pravom mestu.
Izbacivanje višestruko uvučenih lista
Višestruko uvučene liste se sastoje od jedne uređene liste i druge koja nije uređena, a koja se nalazi unutar
prve. Cilj ovog uvlačenja nije kreiranje podliste, nego novo uvlačenje. Evo kako izgleda taj kod:
<ul>
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
</ul>
Ako želite da uklanjate jedno po jedno uvlačenje, onda izaberite tu stavku iz liste, pronađite u Tag Selectoru
dvostruki skup oznaka ul i ol, kliknite desnim tasterom miša neku od tih oznaka i iz pomoćnog menija
izaberite opciju remove Tag. Ako želite da brzo uklonite ove oznake iz celog dokumenta, ili na celom sajtu,
onda možete da upotrebite pretraživanje sa opcijom Specific Tag i da potražite oznake ul ili ol, koje se
nalaze unutar druge oznake ul ili ol. Pošto ćete morati da odjednom zamenite sve oznake, treba da budete
pažljivi, jer ćete ukloniti i ispravno ugnježdene liste.
48 / 299
Dreamweaver MX 2004
Prekidi linija, razmaci koji ne znače prekid i beline
Belina je vizuelni koncept, koji je prema tome, povezan sa formatiranjem, a ne sa strukturom. Nema ničeg
lošeg u malo beline, dokle god to ne narušava strukturu.
Prekidi linija: Šta je dobro, a šta loše
Ako u Dreamweaveru prtisnete taster Enter ili Return, završava se tekući pasus i počinje novi. U izvnorom
kodu ovim se završava jedan blok (pasus, naslov, stavka u listi, itd.) i počinje novi. U prikazu Design, kao i u
pretraživaču, svi prekidi između blokova se prikazuju kao dvostruki razmaci. Ovo se često naziva čvrstim
prekidom.
Ponekad želite da dobijete novu liniju, ali ne želite da se napravi novi blok. Ne želite dodatni razmak, ili ne
želite da pravite novu stavku u listi. U takvim slučajevima treba da pritisnete Shift+Enter. Ovim se završava
tekuća linija i počinje nova. U izvornom kodu se unosi oznaka br. Ova oznaka se ubacuje u tekući blok za
formatiranje. U prikazu Design i u pretraživačima se pravi novi red, ali bez dodatnog prostora, dodatnih
stavki, itd. Ovo se često naziva meki prekid.
Mane mekanih prekida
Prekidi linija se vrlo lako zloupotrebljavaju i mogu da dovedu do problema, ako se ne koriste kako treba. Šta
će se desiti ako pažljivo ubacite prekid linije u svoj tekst, a pretraživač preuredi tekst, usled opcija koje je
korisnik podesio, ili usled veličine prozora.
Mekani prekid i struktura
Upamtite da mekane prekide ne treba da koristite za lošu strukturu. Ako ne želite dodatne praznine između
naslova i teksta koji sledi, nemojte koristiri prekid linije. Ovim se briše strukturna razlika između naslova i
teksta. Umesto toga, dodatni prostor treba da uklonite preko CSS-a. Evo kako se to radi:
1.
2.
3.
4.
U panou CSS Styles napravite novi stil, bilo tako što ćete promeniti definiciju postojećih oznaka, ili
putem kreiranja korisničke klase.
U okviru za dijalog CSS Style Definition izaberite katerogiju Box.
U kontrolama u polju Margins, opcija Same for All ne treba da bude potvrđena. Donja margina
treba da se podesi na negativnu vrednost. Na slici je prikazano šta se dešava.
Ako ste svoj stil definisali kao korisničku klasu, izaberite tekst i preko Property Inspectora ili Tag
Inspectora primenite tu klasu.
49 / 299
Dreamweaver MX 2004
Razmaci koji ne vode novim redovima
Ovakvi razmaci ( ) su upravo ono što i ime govori. To je belina za koju se ne garantuje da dovodi do
nove linije, bez obzira šta se dešava sa automatskim prelazom teksta u novi red. Ovo je i više od toga.
Pretraživači ignorišu dodatne beline u HTML kodu.
Sa druge strane, razmaci koji ne dovode do novih redova prave dodatni prostor između reči i drugih
elemenata, koji pretraživači ne smeju da zanemare. Najlakši način da u Dreamweaveru napravite ovakav
razmak je da pritisnete Shift+Ctrl+razmak. Isti objekat se može dobiti i ako sa palete Insert izaberete opciju
Nonbreaking Space, ili izaberete opciju Insert > HTML > Nonbreaking Space.
Prekide koji prave novi red u nekim situacijama može da za Vas napravi Dreamweaver. Na primer, svaki put
kada pravite novi pasus, Dreamweaver ubacuje ovakav prekid, da bi naterao pretraživač da obrati pažnju na
pasus. (Potpuno prazni pasusi se smatraju belinama bez značenja i pretraživači ih ignorišu.) Program
prekide koji ne vode novom redu ubacuje i u prazne ćelije tabela, iz razloga što pojedini pretraživači ne
prikazuju ispravno prazne ćelije.
Dodavanje belina preko praznih pasusa
Priznajte, koliko ste puta ovo i sami uradili. Pritisnete taster Enter nekoliko puta više i kreirate puno praznog
prostora između elemenata na strani. Dreamweaver omogućava da vrlo lako ubacite prekide koji ne vode
novom redu, za koje ste sigurni da će se ispravno prikazati. Ali, da li je u pitanju zaista dobra struktura? Šta
je logično u pasusu u kome nema ničeg? Mnogo bolje je da prostor između stavki dodate preko CSS-a.
Sve o listama
Bez obzira da li je lista sa oznakama ili brojevima, da li je uređena ili ne, lista pomaže da brzo napravite
sadržaj koji se lako čita. Puno toga može da se uradi na poboljšanju izgleda i strukture Vaših listi.
Fino podešavanje izgleda preko tipova listi
Ne želite da oznake stavki u listi budu crni kružići? Želite "abc" umesto "123"? Samo treba da podesite
atribut type na listu ili stavku. Kod izgleda ovako:
<ul type="square">
<ol type="a">
Tipovi listi se u Dreamweaveru podešavaju u okviru za dijalog List Properties, kome se pristupa preko List
Item Property Inspectora.
Da bi se ovo desilo, potrebno je da kursor postavite negde u listi i da u Text Property Inspectoru kliknete
dugme List Item. Otvoriće se okvir za dijalog List Properties.
50 / 299
Dreamweaver MX 2004
Ovde možete da preko padajuće liste List Type definišete vrstu liste. Iako se ovo zove List Type, ne ubacuje
se atribut type za tu listu, već se menja oznaka koja je napravljena za tu listu.
• Ordered (ol) (uređena) – Kreira se numerička, alfabetska ili na neki drugi način uređena lista.
• Unordered (ul) (neuređena) – Kreira se lista kod koje su stavke označene znacima.
• Directory (dir) – Kreira se lista direktorijuma sa više kolona (ova oznaka je zastarela).
• Menu (menu) – Kreira se lista menija sa jednom kolonom (ova oznaka je zastarela).
U zavisnosti od opcije koju izaberete, u ostatku okvira za dijalog imate na raspolaganju različite opcije.
Ako želite da definišete atribut type za listu, upotrebite padajući meni Style.
Za uređene liste možete i da zadate od kojeg broja počinje brojanje elemenata liste (1,2,3...). Ovde treba
uneti broj, čak i ako ste izabrali tip koji nije numerički. Ovim se oznaci list dodaje atribut start:
<ol start="5">
Na kraju, na dnu okvira za dijalog možete da izaberte opciju New Style, čime se konkretnoj stavki iz liste koju
ste izabrali dodaje atribut type. Ovu stavku ste izabrali pre otvaranja okvira za dijalog.
<ol type="l">
<li>
<li type="a">
<li>
Promene se odražavaju samo na jednoj stavci liste.
Poboljšane oznake elemenata u listi preko CSS-a
Tipovi oznaka elemenata liste su dobri, ali šta ako želite da za svoju neuređenu listu imate kao oznaku neki
crtež. Tu Vam može pomoći CSS. Evo šta treba da uradite:
1. U nekom programu za rad sa grafikom napravite GIF ili JPEG sliku koju želite da koristite kao
oznaku.
2. U Dreamweaveru napravite novi CSS stil, koji drugačije definiše oznaku ul (neuređena lista). Ovo
ćete uraditi tako što ćete izabrati Text > CSS Styles > New CSS Style, ili preko dugmeta New Style
sa panoa CSS Styles.
3. Kada se otvori okvir za dijalog CSS Style Definition, idite u kategoriju List. U polju Bullet Image
pronađite svoju oznaku. Polje Position možete da ostavite prazno ili da iz pomoćnog menija
izaberete opciju inside i tako ubacite svoju oznaku u uvlačenje stavki (ovo može dovesti do toga da
se uvlačenje poveća).
Kliknite OK da biste zatvorili okvir za dijalog. Od sada će izgled svake neuređene liste zavisiti od style sheeta
koji koristi sliku kao oznaku.
51 / 299
Dreamweaver MX 2004
Naravno da ovo nije jedini način na koji CSS može da Vam pomogne u formatiranju listi. Font, veličina
teksta, boja i još puno toga se može podesiti preko CSS-a. Ako želite da povećate ili smanjite uvlačenje
stavki u listi, ili da promenite vertikalno rastojanje između stavki, podesite marginu (ovo se radi preko
kategorije Box u okviru za dijalog CSS Style Definition).
Prednosti koje donose specijalni karakteri
Prilikom rada ćete bez sumnje doći u situaciju da Vam zatrebaju specijalni karakteri, kao što su akcentovana
slova, oznake autorskih prava ili ugaone zagrade koje se koriste u HTML-u. Da bi ovakvi karakteri mogli da
se koriste u HTML-u, moraju se predstaviti specijalnim kodovima, koje nazivamo HTML entitetima. Ovi
entiteti imaju oblik &kod, gde je kod reč ili broj koji ukazuje na to koji karakter treba da se prikaže na ekranu.
Postoji na stotine HTML entiteta za specijalne karaktere.
Umetanje specijalnih karaktera tokom rada
Neki specijalni karakteri se lakše unose u odnosu na druge. Ako na primer, želite da ubacite ampersend,
samo treba da pritisnete Shif+7 (dok ste u prozoru Design), a Dreamweaver će to zameniti odgovarajućim
specijalnim karakterom (&). Ako poznajete prečice sa tastature koje Vaš operativni sistem koristi za
kreiranje drugih karaktera, možete i njih da koristite dok ste u prikazu Design. Dreamweaver će uneti pravi
kod.
HTML entitetima koji se najviše koriste može da se pristupi preko podmenija Insert > HTML > Special
Characters. Kada želite da ubacite neki od ovih karaktera, samo postavite kursor tamo gde želite i izaberite
neku od komandi iz ovog menija.
52 / 299
Dreamweaver MX 2004
Ako specijalnog karaktera koji Vam je potreban nema u listi, sa palete Insert izaberite objekat Other
Character ili upotrebite komandu Insert > HTML > Special Characters > Other. Otvoriće se novi prozor iz
kojeg možete izabrati specijalni karakter. Kada kliknete ikonu karaktera, na vrhu prozora će se prikazati
tekstualno polje. U polje možete i da ubacite kod svog specijalnog karaktera.
53 / 299
Dreamweaver MX 2004
Ubacivanje specijalnog karaktera preko pronalaženja i zamene
Ako ispred sebe imate punu stranu teksta, ili još gore, ako imate ceo sajt sa stranama koje ste kucali bez
upotrebe specijalnih karaktera iz HTML-a, poslednja stvar koju ćete želeti da uradite je da lovite specijalne
karaktere jedan po jedan. Vreme je za pronalaženje i zamenu. Evo kako se to radi:
1. Otvorite neki od dokumenata koji želite da menjate. Proverite da li se nalazite u prikazu Design.
2. Pronađite prvi karakter koji želite da zamenite. Ako želite da zamenite pravu (zakrivljenu) apostrofu
umesto obične, pronađite primer za to. Obrišite taj karakter i preko palete Insert ili menija Insert
ubacite HTML entitet.
3. Izaberite specijalni karakter koji ste upravo ubacili i izaberite Edit > Copy.
4. Izaberite Edit > Find and Replace. Izaberite oblast pretraživanja (Current document, Entire Site, itd.).
Iz padajuće liste Search In izaberite na Text. U polju Search In unesite karakter koji želite da
menjate, običan navodnik, crticu i sl. Kliknite u polje Replace With i preko komande Edit > Paste
ubacite specijalni karakter na tu lokaciju.
5. Izaberite Replace ili Replace All. Kada završi posao, Dreamweaver će pokazati broj zamena koje je
izvršio. Kliknite OK da biste zatvorili okvir za dijalog, a onda kliknite OK da biste zatvorili i prozor
Find and Replace.
6. Istu proceduru ponovite i za druge specijalne karaktere koje želite da koristite.
Ako zaključite da stalno radite isto, mogli biste da upamtite kriterijum pretraživanja i da ga tako olakšate. Evo
kako se to radi:
1. Ponovite korake koje smo upravo pomenuli, sve do trenutka kada se nađete u okviru za dijalog Find
and Replace sa ispravnim kriterijumom za pretraživanje.
2. Umesto pretraživanja i zatvaranja prozora, kliknite dugme Save. Ovo dugme izgleda kao disk
računara. Upamtite kriterijum pretraživanja u nekoj fascikli, ali upamtite gde ste to uradili, da biste
kasnije mogli da taj kriterijum ponovo pronađete. Nakon toga zatvorite okvir za dijalog Find and
Replace.
3. Naredni put kada želite da pronađete i zamenite specijalni karakter, otvorite okvir za dijalog Find and
Replace i kliknite dugme Load. Ono izgleda kao fascikla. Pronađite svoj kriterijum i učitajte ga.
Nakon toga, pretraživanje uradite kao i obično.
54 / 299
Dreamweaver MX 2004
5. Rad sa slikama
Osnovno o slikama
Rad sa slikama u pretraživaču nije komplikovan, ali kao i uvek, postoje određena pravila koja treba poštovati.
U ovom odeljku smo pokrili osnove, a to je kako slike funkcionišu na web stranama i kako se uklapaju u svet
Dreamweavera.
Slike u pretraživaču
Slike se generalno na web strane ubacuju preko oznake img:
<img src="fido.gif" width="100" height="100">
Ovaj kod govori pretraživaču gde treba da potraži datoteku sa slikom, kao i koliko prostora treba da ostavi.
Atribut src je relativni ili apsolutni link do GIF, JPEG ili PNG datoteke. Ovo je obavezan atribut, pošto bez
njega nema ni slike. Striktno govoreći, ni atribut width ni atribut height nisu obavezni, ali ako ih izostavite,
pretraživač nema načina da sazna koliko prostora treba da ostavi za sliku, što usporava prikazivanje web
strane. Zbog toga se ovi atributi uvek daju.
Datoteke koje sadrže slike moraju biti u formatu koji pretraživač može da prepozna i prikaže. Trenutno su to
formati GIF, JPEG PNG (premda je podrška za PNG nedosledna, tako da mnogi dizajneri odustaju od ovog
formata). Format GIF je najbolji za slike koje nisu fotografije, sa ograničenim bojama, gde je obavezm da
slike budu jasne. GIF može da se koristi i za animacije i efekat providnosti. JPEG je najbolji za fotografije i
druge slike koje sadrže puno boja i suptilne prelaze u bojama.
Slike u Dreamweaveru
U Dreamweaveru se sa slikama radi veoma lako. U narednim odeljcima ćemo objasniti osnovne procedure
za rad sa slikama u Dreamweaveru. Usput ćemo istaći i potencijalne zamke.
Umetanje slika
Slike se u Dreamweaver mogu ubaciti na različite načine. Možete ih ubaciti preko objekta Image sa palete
Insert ili preko komand Insert > Image. Ako ste definisali sajt, slike možete da prevučete sa panoa Site ili
Assets direktno u prozor Document. Treba da imate na umu da priilikom umetanja slike, Dreamweaver ne
ugrađuje sliku, kao što to radi sa listama ili tabelama, već se ubacuje relativna putanja do datoteke sa slikom.
Ako koristite relativne putanje u odnosu na dokument Dreamweaver najbolje radi ako ste datoteku pre
umetanja zapisali, tako da može da se izračuna relativna putanja između dokumenta i datoteke sa slikom.
55 / 299
Dreamweaver MX 2004
Rad sa slikama
Većina osobina slika se u Dreamweaveru mogu podesiti preko Image Property Inspectora. Za podešavanje
drugih osobina treba da koristite Selection Inspector ili komandu Edit Tag.
Promena veličine slike
Dimenzije slike možete promeniti ako promenite vrednost za width ili height u Property Inspectoru ili ako
uhvatite ručice koje se prikazuju kada izaberete sliku i prevučete ih na novu lokaciju. Treba da imate na umu
da slikama ne bi trebalo menjati dimenzije ni u Dreamweaveru ni na bilo kom drugom mestu izvan programa
koji se koristili za uređivanje slika. Ako u HTML-u promenite veličinu slike, to samo pretraživaču govori da
sliku treba da prikaže većom ili manjom u odnosu na stvarnu dimenziju.
Ako prikažete veću sliku, povećavaju se pikseli, slika se deformiše, tako da se mogu videti tačkice ili će slika
biti zamagljena. Ako prikažete manju sliku, samo bacate piksele i neracionalno trošite propusnu moć mreže.
Ako u Dreamweaveru izaberete sliku i pogledate Property Inspector, uvek možete reći da li je ta slika
menjana. Ako su vrednosti za height i width prikazane masnim slovima, onda to nisu originalne dimenzije
slike. Ako želite, sliku možete da vratite na početne dimenzije i to tako što ćete kliknuti dugme Reset Size,
koje se nalazi u Property Inspectoru, ili ako kliknete slova W i H pored polja Height i Width.
Kao i kod svih pravila i ovde postoje izuzeci. GIF slike koje se sastoje od punih boja i traka mogu da se
menjaju bez krivljenja, dokle god se to razvlačenje odvija duž tih traka. Ovim se povećava veličina slike, a da
se pri tome ne menja veličina datoteka i samim tim ne utiče na propusnu moć mreže.
Ravnanje slika
Za početnike ravnanje slika preko Property Inspectora može biti zbunjujuće, pošto za to postoje dva skupa
komandi. To su padajući meni Align, kao i dugmad left/center/right. U čemu je razlika?
Komande iz padajućeg menija Align oznaci img dodaju atribut aligment:
<img src="fido.gif" width="100" height="100" align="left">
Ovaj atribut određuje kako se slika ravna u odnosu na ostale stavke iz istog bloka. Najčešće je to tekst koji
okružuje sliku. Ovaj atribut se podešava slično kao što se podešavaju atributi koji definišu način smeštanja
teksta oko slike u programima za definisanje rasporeda strane.
Dugmad left/center/right se odnose na ravnanje teksta. Ako element teksta, kao što je oznaka p, okružuje
sliku, i ako kliknete neko od ovih dugmadi, tom elementu će se dodati atribut align. Ako nema tekstualnog
elementa, i ako kliknete neko od ovih dugmadi, dodaće se oznaka div, koja dodaje ravnanje.
<div align="left">
</div>
Ako se slika nalazi u ćeliji tabele, onda je efikasnije da je podesite preko ravnanja ćelije. Ovo se radi tako što
se izabere ćelija tabele (klikne se izvan slike, ali unutar ćelije, tako da se kursor nade unutra) i preko
padajućih menija Horiz i Vert se podese osobine ćelije align i valign. Kod izgleda ovako:
<td align="left" valign="middle">
56 / 299
Dreamweaver MX 2004
</td>
Uređivanje slika
Ako dva puta brzo kliknete sliku u prozoru Document, otvoriće se okvir za dijalog u kome možete da
promenite src datoteku za sliku. Kada izaberete sliku i u Property Inspetora kliknete dugme Edit, otvoriće se
grafička aplikacija u kojoj možete da je menjate. Koji program za rad sa grafikom će se otvoriti? To zavisi od
toga koji spoljašnji grafički editor ste definisali u Dreamweaveru. Ako želite da proverite (ili promenite) šta ste
podesili, treba da uradite
sledeće:
1. Izaberite Edit > Preferences. Otvoriće se okvir za dijalog Preferences. Izaberite kategoriju File
Types/Editors.
2. Iz liste Extensions izaberite GIF. Šta će se u delu Editors pojaviti kao primarni editor? Ako program
za rad sa grafikom koji koristite nije prisutan, kliknite dugme + na vrhu liste da biste ga dodali.
Izaberite svoj program i kliknite dugme Make Primary.
3. Ponovite istu proceduru za JPEG i (ako ćete koristiti PNG) PNG.
4. Kada završite kliknite dugme OK, da biste zatvorili okvir za dijalog. Naredni put kada kiknete dugme
Edit u Image Property Inspectoru, pokrenuće se program koji ste definisali kao primarni za odredeni
tip slike.
Rad sa slikama
Osnovni pojmovi u radu sa slikama su izuzetno jednostavni, ali postoji mnogo načina da se sa slikama radi,
ali i da se upadne u nevolje, kao i da se bude kreativno. I Dreamweaver ima mnogo osobina vezanih za rad
sa slikama, koje vam mogu pomoći da vam posao bude zabavan i efikasan.
Dostupnost slika
Slike su generalno nedostupne ljudima sa vizuelnim nedostacima. Vaš posao kao web autora je da ih učinite
dostupnim, dodatnim alternativni tekstualnim opisom, dugim ili kratkim. Slike se pominju i u standardu
57 / 299
Dreamweaver MX 2004
Section 508, § 1194.22(a):
Treba obezbediti tekstualni ekvivalent za svaki element koji nije tekstualan (preko atributa alt, longdesc ili u
sadržaju elementa).
Osnovni mehanizam da ovo uradite u HTML-u predstavljaju ali i longdesc. U pitanju su atributi oznake img.
• alt – Ovo je kratak tekstualni ekvivalent za sliku. Koristi se uvek kada slika ne može da se vidi, što
znači da će ga i grafički pretraživači prikazati, ako ne mogu da prikažu sliku. (Internet Explorer
prikazuje alt tekst, kada se mišem prelazi preko slike iako to nije osnovna namena ovog atributa.)
Svaka slika u Vašem dokumentu bi trebalo da sadrži i atribut alt. Slike koje nisu bitne, bi trebalo da
sadrže prazan atribut alt.
•
longdesc – Ako značenje slike ne možete da sumirate u kratkom tekstu atributa alt, možete
opcionalno da upotrebite atribut longdesc. Ovaj atribut treba da sadrži URL adresu strane sa punim
tekstualnim opisom slike. (Do sada ovaj atribut nije baš najbolje podržan. Vaš zadatak kao web
autora je da obezbedite mogućnost, a ne da se bavite nedostacima tehnologija.)
Dostupnost slika u Dreamweaveru
Slike su osnovni vinovnik nedostupnosti web strana, pošto po svojoj prirodi nisu dostupne ljudima koji imaju
problem sa vidom. Rešenje ovog problema je da uvek obezbedite tekstualni ekvivalent za sve slike koje
imate na svojim stranama.
Podešavanje opcija vezanih za dostupnost
Pre nego što krenete sa umetanjem slika, treba da budete sigurni da su opcije koje se odnose na dostupnost
slika uključene (Edit > Preferences > Accessibility).
Ako su ove opcije uključene, kada sledeći put budete ubacivali sliku, prikazaće se drugi okvir za dijalog, koji
omogućava da podesite atribute alt i longdesc. Ako ne unesete vrednost za neki od ovih atributa, taj atribut
se neće ubacivati u dokument.
Property Inspector, Tag Inspector i komanda Edit Tag
Nakon što ste ubacili sliku, u bilo kom trenutku možete da podesite atribut alt za svoju sliku. Ovo ćete uraditi
preko Property Inspectora. Atribut longdesc se može dodati ili menjati preko Tag Inspectora ili preko
komande Edit Tag.
•
Prazan atribut alt za slike koje nisu bitne – Prema pravilima, slike koje nisu bitne, kao što su one koje
služe samo za dekoraciju, treba da imaju prazan atribut alt. U Dreamweaveru ćete prazan atribut alt
napraviti pomoću padajućeg menija Alt u Property Inspectoru. Treba izabrati opciju empty.
58 / 299
•
Dreamweaver MX 2004
Potraga za atributom alt bez teksta – Niste sigurni da li ste atribut alt koristili za svaku sliku na svom
sajtu? Možete da potražite slike bez ovog atributa u tekućem dokumentu, fascikli ili na celom sajtu.
Izaberite Site > Reports, a onda izaberite opciju Missing Alt Text Report. Pazite, ovaj izveštaj će
identifikovati sve prazne atribute alt, kao atribute koji nedostaju, što naravno nije slučaj.
Integrisano uređivanje slika
U Dreamweaveru MX 2004 su dodate neke osnovne aktivnosti za uređivanje slika, kao što su odsecanje
delova slike, dodavanje belina, rukovanje priširenjima slika. Sve ovo se sada može raditi direktno iz
Dreamweavera. Naravno da Dreamweaver nije osnovni editor za rad sa slikama, tako da sofisticirane stvari
treba ostaviti programima kao što su Fireworks ili Photoshop, ili nekom drugom editoru koji izaberete. Ipak,
za brza podešavanja u letu, ovo je značajna inovacija. Osobine vezane za integraciju slika su deo Image
Property Inspectora. Mogu se koristiti uvek kada izaberete sliku koja je postavljena u dokument u
Dreamweaveru. Ovim opcijama se može pristupiti i preko podmenija Modify > Image. Mogu se koristiti kod
bilo kojih slika koje su postavljene u dokument Dreamweavera, ali se najviše koriste za fotografije kod kojih
su suptilne razlike u bojama bitne, a često se zahteva i odsecanje delova slika.
Mogli biste da se naviknete na ove mogućnosti, ali treba da imate na umu da svaka promena koju napravite
preko ovih alata utiče na datoteku sa slikom, što je razlika od drugih promena koje možete napraviti preko
Property Inspectora. Polja width i height, na primer, samo menjaju dimenzije slike koja se prikazuje na strani,
a ne utiču na stvarne dimenzije slike u datoteci iz koje slika dolazi.
59 / 299
Dreamweaver MX 2004
Odsecanje delova slika
Komanda Crop se odnosi na odsecanje delova slika, koji se gube. Rezultujuća slika je i dalje pravougaonog
oblika (odsecanje nije kao maskiranje ili neki drugi efekti vezani za transparentnost). Ipak su neki njeni delovi
izbačeni.
Ako želite da neku sliku odsečete u Dreamweaveru izaberite je i kliknite dugme Crop u Property Inspectoru ili
izaberite Modify > Image > Crop. Dreamweaver će vas upozoriti da će ovo promeniti originalnu sliku. Kliknite
OK da biste zatvorili prozor sa upozorenjem. Prikazaće se slika sa pravougaonikom za odsecanje ispred nje.
Površina unutar pravougaonika će biti deo koji ostaje nakon odsecanja. Prevucite ručice na ivicama i
postavite ih na željenu poziciju. Delovi slike koji su izvan pravougaonika će biti prikazani sa sivom prevlakom
preko njih, što ukazuje da će biti izbačeni. Nakon što ste podesili pravougaonik odsecanja, možete ili da
pritisnete Enter ili da dva puta brzo kliknete unutar slike da biste potvrdili primene i odsekli sliku.
Kako da prekinete, ako ste već započeli odsecanje? Kliknite u prozor Document, ali izvan slike. Ovim se
prozor odsecanja zatvara i ne dolazi do odsecanja.
Podešavanje osvetljenja i kontrasta
Osvetljenje određuje osvetljenost slike. Ako povećavate osvetljenje, sve boje postaju svetlije. Ako smanjujete
osvetljenje, sve boje postaju tamnije. Kontrast određuje koliko svetla treba da dobiju svetle površine slike, a
koliko tamne, kao i srednje tonove. Slika sa velikim kontrastom ima vrlo svetle i vrlo tamne tonove, ali malo
srednjih tonova. Slika sa malim kontrastom ima mnogo srednjih tonova, ali svetle površine nisu mnogo
svetlije odsrednjih tonova, a tamne nisu mnogo tamnije.
Ako želite da podesite osvetljene ili kontrast slike, izaberite tu sliku i kliknite dugme Brightness/Contrast na
Property Inspectoru. Pomerajte klizače naviše i naniže, ili unesite konretne brojeve. Nakon što završite
kliknite OK, da biste zatvorili okvir za dijalog i promenili sliku.
Podešavanje oštrine
Izoštravanje slike znači da učinite da detalji slike izgledaju oštrije, više u fokusu. To može dovesti do iluzije
da ste slici dodali nove detalje. Prilikom izoštravanja se na slici traže oblasti kod kojih se tamni pikseli sreću
sa svetlim. Pod pretpostavkom da ove tačke susreta na slici predstavljaju detalje, kao što su ivica površine
nasuprot pozadini, ili nos nasuprot lica, kontrast između svetlog i tamnog duž ivice postaje veći. Ovim se
ivica dalje ističe. Zbog toga što proces digitalizacije može dovesti do toga da slika izgleda nejasno i
zamagljeno, izoštravanje postaje važan alat za digitalno uređivanje.
Ako želite da u Dreamweaveru podesite oštrinu slike, izaberite tu sliku i kliknite dugme Sharpen na Property
Inspectoru. Možete i da izaberete Modify > Image > Sharpen. Otvoriće se okvir za dijalog Sharpen, sa
klizačem. Ako želite da izoštrite sliku, pomerite klizač sa leva udesno. Na kraju kliknite OK da bi se i slika
60 / 299
Dreamweaver MX 2004
promenila.
Promena broja piksela u slici
Svaka slika koja se sastoji od piksela ima u sebi izvestan broj piksela. Kada u Dreamweaveru menjate
veličinu slike (putem promene parametara width i height u Property Inspectoru), ne menjate broj piksela ili
nešto drugo u samoj datoteci sa slikom. Vi samo govorite pretraživaču da postojeće piksele prikaže većim ili
manjim. To je razlog što slika koju ste povećali izgleda nejasno i što se kod nje vide pikseli. Proces promene
broja piksela u slici se na engleskom naziva resample. Računar ili dalje deli piksele, tako se povećava
ukupan broj piksela, ili ih kombinuje, čime se smanjuje ukupan broj piksela. Ovaj proces uvek dovodi do
krivljenja slike, pošto računar ne može da pogodi koje su boje pikseli koji se dodaju ili gube. Ipak, slika kojoj
je broj piksela promenjen, da bi se uvećala, generalno izgleda bolje nego da ste je povećali na uobičajen
način.
Promena broja piksela u Dreamweaveru nije relevantna, osim u slučaju da ste već menjali širinu i visinu slike
(bilo preko Property Inspectora i Tag Inspectora, ili prevlačenjem ivica u prozoru Document). Nakon što to
uradite, postaje dostupno dugme Resample u Property Inspectoru. Izaberite sliku i kliknite ovo dugme da
biste podelili ili kombinovali piksele, tako da se dimenzije slike promene u skladu sa širinom i visinom.
Slike kao pozadina
Od kada su pretraživači počeli da podržavaju upotrebu slika, kreatori web strana su počeli da ih koriste, i
zloupotrebljavaju, kao elemente pozadine. Slike se kao pozadina dodeljuju stranama, tabelama i nivoima.
Slika u pozadini može da se ponavlja po horizontali ili vertikali, tako da ispuni određeni prostor. Tekst ili neki
drugi grafički elementi mogu da se postavljaju ispred slike u pozadini, bez ikakvih CSS tehnika za rad sa
nivoima. Slika u pozadini može biti jednostavna, kao što je ponavljanje tapeta u pozadini, ali može biti i
znatno složenija i skrivenija, kada se koristi kao vodeni žig, baner, itd.
Pozadina u stilu ploča, staromodan način
Mnogo pre nego što je CSS stupio na scenu, slike su počele da se koriste kao pozadinski elementi. To je bilo
moguće zahvaljujući atributu background. Ako oznaci body dodelite atribut backgorund, onda se slika
ponavlja kao pozadina na celoj strani. Ako dodelite atribut background tabeli, vrsti tabele ili ćeliji, onda se
ploče ponavljaju samo u tim elementima.
<body background="flowers. jpg">
<table background="polkadots.gif">
Sliku ćete u Dreamweaveru da postavite kao pozadinu strane (kao atribut oznake body) ako izaberete Edit >
Preferences, zatim izaberete kategoriju General i tamo deselektujete opciju Use CSS instead of HTML Tags.
Nakon toga izaberite Modify > Page Properties i promenite boju pozadine. Ovo ćete uraditi u kategoriji
Appearance. Tabelama i drugim elementima strane ćete dodeliti pozadinu preko polja Bg image koje se
nalazi u Property Inspectoru.
61 / 299
Dreamweaver MX 2004
Ovaj metod definisanja pozadine je i dalje ispravan i možda će Vam biti potreban, ali u poređenju sa CSSom, ima određene nedostatke:
• Nema načina da se kontrolišu ploče sa slikom. Pretraživač automatski postavlja ploče sa slikom
onoliko puta koliko je potrebno, po horizontali ili vertikali i pokušava da ispuni raspoloživi prostor.
Iako ovo nije uvek loše, neće se uvek uklapati u Vaše želje.
• Nema načina da se kontroliše pozicija slike. Popločavanje počinje u gornjem levom uglu i ponavlja
se odatle.
Slike u pozadini, ali sa CSS-om
U danima CSS-a teorija pozadinskih slika se nije promenila, ali je primena postala efikasnija i moćnija.
Redefinisani elementi strane i korisničke klase mogu da sadrže različite osobine vezane za slike u pozadini:
background-image: url(myimage.gif);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: 0px 2px;
Ako želite da nekom elementu na strani dodelite sliku kao pozadinu (uključujući i oznaku body), treba da
koristite stil iz CSS-a koji oma osobine vezane za pozadinu. Evo kako se to radi:
1. Otvorite pano CSS Styles (Window > CSS Styles) i kliknite dugme New Style, koje se nalazi na dnu
panoa. Možete i desnim tasterom miša kliknuti karticu CSS ili Tag Inspector i izaberete opciju new
Rule.
2. Kada se otvori okvir za dijalog New CSS Style, izaberite da li svoj stil želite da kreirate u tekućem
dokumentu ili u posebnom dokumentu sa stilovima. Treba i da izaberete da li želite da promenite
definiciju postojeće HTML oznake, ili da kreirate korisničku klasu. Ako pozadinu dodeljujete celoj
strani, treba da promenite definiciju oznake body. Ako pozadinu dodeljujete tabeli, vrsti u tabeli ili
ćeliji u tabeli, zapitajte se da li svaka tabela, vrsta ili ćelija treba da ima istu pozadinu (verovatno ne).
Ako ne treba, onda za svoju sliku u pozadini napravite korisničku klasu.
3. Kliknite OK da biste zatvorili okvir za dijalog i otvorili okvir za dijalog CSS Style Definition. U ovom
okviru za dijalog idite u kategoriju Background i dodelite različite osobine slike. Nakon što završite
kliknite OK da biste zatvorili okvir za dijalog.
4. Ako menjate oznaku iz HTML-a (na primer, oznaku body) onda ste završili. Ako sliku u pozadini
pravite kao korisnički definisanu klasu, onda treba da tu klasu primenite na tabelu ili neki drugi
element, za koji definišete pozadinu. Ovo ćete uraditi tako što ćete izabrati taj element, tako da se
njegova oznaka pojavi na Tag Selectoru, zatim desnim tasterom miša kliknuti Tag Selector i iz
podmenija izabrati opciju Class.
Ako želite da sliku kao pozadinu dodelite samoj strani (tj. da je ubacite u oznaku body), onda možete ili da
preko prethodno pomenutih koraka promenite definiciju oznake body, ili možete da izaberte Edit >
Preferences i da u okviru za dijalog Preferences proverite da li je u kategoriji General izabrana opcija Use
CSS instead of HTML tags. Nakon toga izaberite Modify > Page Properties i preko polja Background Image,
koje se nalazi u kategoriji Appearance dodelite sliku. Dreamweaver će automatski kreirati CSS stil, koji
menja definiciju oznake body.
62 / 299
Dreamweaver MX 2004
63 / 299
Dreamweaver MX 2004
Kreativni pozadinski efekti
Početnici u web dizajnu uvek žele da znaju kako da dobiju one sjajne integrisane tekstualne i grafičke efekte,
kakve su videli na mnogim web sajtovima. Odgovor je često u kreativnim pozadinskim efektima.
Vertikalno popločavanje za kreiranje grafike sidebara
Sidebarovi koji se koriste za navigaciju i nalaze uglavnom se sa leve strane su veoma česti. Njihovo
kreiranje je u velikoj meri olakšano pojavom CSS-a. Evo šta treba da uradite:
1. U svom grafičkom programu napravite grafiku sidebara, kakvu želite.
2. 2 Verovatno ćete želeti da se sidebar proteže od vrha do dna strane, ali samo sa jedne strane. Ideja
je da se ploče postave po horizontali, a ne po vertikali. Dok se nalazite u programu za rad sa
grafikom, zapitajte se koliko će slika biti kratka, da biste dobili pravi rezulat kada je postavite u
vertikalnim pločama. Najefikasnija grafika je visoka samo jedan ili dva piksela, dok je širina jednaka
širini sidebara. Nakon što ste definisali idealne dimenzije, odsecite sliku do te veličine (ili napravite
deo slike te veličine) i izvezite je.
3. U Dreamweaveru napravite CSS stil. Opciju Repeat podesite na repeat-y.
Ako iz nekog razloga treba da napravite pozadinu strane bez CSS-a, i dalje možete da sprečite da se
postavljaju ploče sa slikom po horizontali i to tako što ćete sliku napraviti širom od prozora pretraživača. Pre
nego što se pojavio CSS, nije bilo ništa neuobičajeno da naiđete na sliku koja se koristi kao pozadina, čija je
visina bila jedan piksel, a širina nekoliko hiljada piksela.
Tabele boja ispred tapeta
Od kad na web stranama postoje slike u pozadini, postoje dizajneri koji pokušavaju da ispred šablona u stilu
tapeta postave neki tekst. Taj tekst skoro nikad nije vidljiv, osim ako je šablon tako suptilan da se teško i
primećuje.
Kreativno rešenje ovog problema je da se tekst stavi u potpuno obojeni objekat (kao što je ćelija tabele ili
nivo), koji se nalazi ispred pozadine na strani
Mešanje i uparivanje za dobijanje efikasnih i fleksibilnih efekata sa slikama
Kada se naredni put spremite da odsečete neku sliku koja ide u liniju za navigaciju, baner sa naslovom ili
sidebar, zapitajte se da li mešanje i podešavanje slika u pozadini i onih koje su prvom planu, kao i boja u
pozadini i slika može da Vam pomogne.
64 / 299
Dreamweaver MX 2004
Slike i struktura strane
Slike su ključne u dizajnu web strana. Pošto se web strane danas uglavnom uređuju pomoću tabela, to se
slike koriste za definisanje strukture strane, ali u tabelama. One mogu da se koriste kao nevidljivi stabilizatori
strukture tabele, ili kao vidljivi raspored tabele, ili tabele sa delovima slika. U ovom odeljku smo se pozabavili
i jednim i drugim načinom upotrebe.
Slike u GIF formatu od jednog piksela
U pitanju je slika u GIF formatu koja se sastoji od samo jednog piksela, obično transparentnog. Ovakve male
jedinice su među web dizajnerima popularne jer mogu da reše neke opšte probleme rasporeda, kao i da
doprinesu nekim interesantnim mogućnostima. Često se koristi termin separator (spacer) ili podmetač.
Kreiranje slika u GIF formatu od jednog piksela
Ovakve slike se lako mogu napraviti u bilo kom programu za rad sa grafikom. Otvorite novi dokument sa
veličinom kanvasa podešenom na 1x1 i podesite boju kanvasa (ili pozadine) na transparent (providna). Zatim
tu sliku upamtite i izvezite kao GIF, sa uključenom opcijom transparent.
Slike u GIF formatu od jednog piksela u HTML-u
Ovakve slike se u HTML-u najviše koriste da podupru otvorene ćelije tabele i da stabilizuju strukturu tabele.
Ubacite neku od ovih providnih slika u ćeliju tabele koja bi inače bila prazna i slici dodelite širinu i visinu, koje
želite da ima ćelija tabele.
Dodavanje vrsta i kolona koje nemaju ništa drugo osim providnih GIF slika različite veličine, može da dovede
do vrlo lepih tabela. Dizajneri ove vrste i kolone nazivaju kontrolnim vrstama i kolonama.
Kada Fireworks pravi odsečenu sliku, ili kada Dreamweaver pravi tabelu u režimu Layout, ili kada se koristi
komanda Convert Layers to Table, programi dodaju kontrolne vrste i kolone, koje su ispunjene providnim
slikama u GIF formatu. Program, čak, umesto Vas pravi slike od jednog piksela. U Fireworksu ove slike
dobijaju ime spacer.gif. U Dreamweaveru, one dobijaju ime spacer.gif ili transparent.gif. Ako ste koristili neke
od mogućnosti za krerianje tabela, onda na svom sajtu verovatno imate neke slike u GIF formatu od jednog
piksela. Slobodno ih koristite.
Rad sa slikama u GIF formatu od jednog piksela u Dreamweaveru
Ovakva slika se na stranu ubacuje kao i bilo koja druga. Jedini problem je što su ove slike tako tanke, tako
da ih je teško videti u prikazu Design. Evo kako se ubacuje ovakva slika:
1. Ubacite sliku kao i obično. Kada se pojavi u dokumentu ona će biti automatski izabrana.
2. Nemojte deselktovati sliku, jer ćete je kasnije teško pronaći. Odmah preko Property Inspectora
dodelite visinu i širinu toj slici. Dodelite joj i praznu oznaku alt (tako što ćete iz padajućeg menija
polja Alt, izabrati opciju <empty>) Ako izgubite sliku od jednog piksela, izaberite stavke koje se
nalaze oko nje i idite u prozor Code. Negde u izabranom kodu ćete naći oznaku <img>. Tu možete
da promenite širinu i visinu.
3. Čak i posle promene veličine slike, providna slika se ne može videti (ona je providna). Ipak, ako
znate gde se otprilike nalazi, možete da klikćete okolo dok je ne pronađete.
Tabela sa odsečenom slikom
Ovakve tabele se dobijaju kada pravite raspored (kao što je linija za navigaciju, ili baner sa naslovom) u
programu za rad grafikom za web, podelite sve ovo nekim objektima za odsecanje i izvezete HTML i slike.
Ipak, struktura strane koja se dobija ovim tabelama nije tako jednostavna ili fleksibilna, kakva bi mogla biti.
Kompleksnim tabelama treba više vremena da se prikažu u pretraživaču u odnosu na jednostavnije, a
ponekad se generiše više slika nego što je potrebno.
Sličice kao separatori (spacer) ili popuna slika preko opcije padding
Tabele sa odsečenim slikama ubacuju spacer slike kad god je potrebno da se stavke odvoje. To nije uvek
neophodno. Slike se mogu odvojiti (po horizontali ili vertikali) i dopunom preko opcija vspace i hspace (bez
CSS-a) ili preko opcije padding (CSS), ili dodavanjem popune ćelija u ćelije tabela u kojima se slike nalaze.
Opcija hspace dodeljuje prostor na obe strane slike, tako da je slika u sredini dovoljna da odvoji sve tri slike.
Ponovna upotreba, promena veličine i zamena
Tabele sa odsečenim slikama takođe prave posebnu sliku za svaku ćeliju u tabeli, iako je ponekad efikasnije
da se ista slika koristi više puta. Prave se slike pune veličine, čak i kad bi moglo da se istoj slici promeni
veličina i da se dobije isti efekat. Pogledajte svoje slike i proverite da li se to desilo. Ako jeste, zamenite
različite slike, samo jednom. Veće slike zamenite manjim. Posebnu pažnju treba da obratite na spacere, koji
su ostali u pojedinim budžacima. Efikasnosti radi, svi spaceri koji se ne vide treba da budu slike od jednog
piksela u GIF formatu.
65 / 299
Dreamweaver MX 2004
Podešavanje generisanja tabela u Fireworksu
Ako za kreiranje tabela sa odsečenim slikama koristite Fireworks, onda će Vam za kreiranje efikasnih slika i
HTML koda pomoći sledeći saveti:
• Pažljivo poravnajte sve odsečene objekte, tako da se kreira što je moguće manje vrsta i kolona.
• Nacrtajte odsečene objekte onako kako Vam je potrebno, a prazan prostor ostavite samo tamo gde
treba da se prikaže pozadina tabele ili strane.
• Za popunu praznih ćelija spacerima (slikama separatorima) možete koristiti komandu File > HTML
Setup i karticu Table u okviru za dijalog HTML Setup.
• Prilikom izvoza ne treba da bude izabrana opcija Include Areas Without Slices. (Ćelije tabele koje
nastaju na osnovu površina bez odsečenih slika će biti ispunjene spacerima od jednog piksela u GIF
formatu).
Ubacivanje elemenata u pozadini
Programi za kreiranje grafike za Web generalno ne prave slike u pozadini ili svoj izlaz zasnivaju na bojama
pozadine. Ipak, to možete i elegantnije uraditi. Analizirajte strukturu svoje tabele i pogledajte koliko slika
možete da zamenite pozadinskim elementima.
Poštujte strukturu tabele
Ako pravite svoju tabelu koja sadrži slike, na Vama je da učinite da ta tabela bude solidna i stabilna. Pre
nego što počnete da menjate tabelu koju ste dobili u Fireworksu ili Photoshopu, treba da budete sigurni da
razumete osnovnu strukturu te tabele, da je ne biste narušili. Tabele sa odsečenim slikama su stabilne zbog
načina na koji su struktuirane. Tabele iz Fireworksa, na primer, imaju sledeće strukturne karakteristike:
• Individualne ćelije nemaju dimenzije, ali cela tabela ima širinu definisanu u pikselima.
• "Kontrolna vrsta" i "kontrolna kolona" od jednog piksela u GIF formatu se postavljaju na vrhu i sa
desne strane, tako da se interni elementi tabele štite od promena. Ove stavke su ubačene iz
dobrog razloga. Ako ih poremetite, tabela se u pretraživaču možda neće prikazati na pravi način.
Pozicioniranje tabela preko CSS-P-a
Ako ne nameravate da se Vaše web strane koriste u Netscapeu 4.x ili nekim starijim pretraživačima, sjajne
efekte u rasporedu možete da dobijete putem pozicioniranja slika preko CSS-a. Ove slike izgledaju kao da
plivaju iznad ostatka strane. Ako želite da u Drearmveaveru napravite sliku koja je pozicionirana preko CSSa, treba da uradite sledeće:
1. Napravite sliku kao i obično.
2. Ubacite sliku u dokument. Ovo ćete uraditi tako što ćete kursor postaviti na početak sadržaja i
pozvati komandu Insert > Image, ili upotrebiti paletu Insert. Treba da budete sigurni da slika nije u
okviru drugih oznaka, kao što su tabele, pasusi ili naslovi.
3. Otvorite pano CSS Style (Window > CSS Style) i kliknite ikonu New Style (ili desnim tasterom miša
kliknite Tag Inspector i izaberite opciju New Rule). Kada se otvori okvir za dijalog, napravite
korisničku klasu sa ekstenzijom .image ili .logo. Možete i da upotrebite neko drugo opisno ime.
Kliknite OK da biste zatvorili okvir za dijalog.
4. U okviru za dijalog CSS Style Definition idite u kategoriju Positioning. Izaberite Absolute Positioning i
dodelite neki broj opcijama Left i Right, ili Top i Bottom. (Same vrednosti nisu bitne, jer ih kasnije
možete promeniti). Kliknite OK da biste zatvorili ovaj okvir za dijalog.
5. U prozoru Document izaberite sliku. Na Tag Selectoru desnim tasterom miša kliknite oznaku img i iz
podmenija Set Class izaberite korisničku klasu koju ste napravili.
6. Sada ste svoju sliku pozicionirali preko CSS-a. Poziciju na strani možete podesiti ako kliknete ivicu
slike tako da se pojavi Layer Property Inspector i onda je prevlačite po strani. Slika bi trebalo da pliva
iznad svih drugih elemenata na strani koji nisu pozicionirani preko CSS-a.
Jedno upozorenje u vezi ovakvih slika: Ako je slika u GIF formatu sa efektima providnosti, onda treba
pažljivo da razmislite o tome kako da ivice slike postavite tako da u odnosu na druge elemente budu glatki
prelazi.
Lowsrc
Postoji toliko divnih stvari koje na web stranam dobro rade samo za korisnike sa velikom propusnom moći,
ali je lowsrc najbolji za saobraćaj sa malom propusnom moći. Sta je lowsrc? U pitanju je alternativna slika
kojoj možete zadati da se u pretraživaču prikazuje na mestu druge slike, dok se ta druga učitava. Recimo da
imate sjajanu, realističku fotografiju Nijagarinih vodopada, ili fotografiju astronauta koji šetaju po Marsu i da
Vam te slike zaista trebaju na web strani, ali zauzimaju 30K ili više. Napravite alternativnu verziju slike, sa
istim dimenzijama, ali vrlo malu, veličine od 1K i zadajte je kao lowsrc za glavnu sliku. Korisnik sa sporom
66 / 299
Dreamweaver MX 2004
vezom će na svojoj strani videti malu sliku, na mestu velike, sve dok se velika ne učita i bude spremna za
prikazivanje.
Ako želite da kreirate i ubacite sliku lowsrc, treba da uradite sledeće:
1. U svom programu za rad sa grafikom otvorite veliku sliku. U pitanju je verovatno slika u GIF ili
JPEG formatu sa sjajnim bojama.
2. Promenite opcije vezane za izvoz i optimizaciju, tako da napravite GIF sliku sa samo dve boje
(popularno je crno-bela, ali mogu se koristiti i bilo koje druge dve boje), podešavajte sve dok ne
dobijete najmanju moguću veličinu slike, a onda je izvezite i upamtite kao GIF. (U lowsrc slici skoro
da ne postoje tačke koje se ne učitavaju trenutno).
3. U Dreamweaveru ubacite glavnu sliku na svoju stranu.
4. Dok je slika izabrana, u Property Inspectoru potražite polje Low Src. Pronađite lowsrc verziju svoje
slike.
Lowsrc verziju slike nećete moći da pregledate u lokalu, pošto će se glavna slika prikazati suviše brzo. Kod
spore veze, efekat izgleda skoro kao animacija, čime se koriste prednosti sporog učitavanja glavne slike.
Definisanje rasporeda pomoću prostora rezervisanog za sliku
Koliko puta Vam se desilo da morate da napravite stranu, na kojoj još ne postoji tekst i grafika? Da li ste
ikada upali u situaciju u kojoj pravite stranu, na koju treba da stavite neku sliku, koja još uvek nije
napravljena, tako da morate da se zaustavite i na to mesto postavite nešto drugo? Dizajneri grafike u svetu
štamparstva koriste grčki tekst ili FPO za prostore rezervisane za slike. U Dreamweaveru, za brzo dobijanje
grčkog teksta možete da koristite neki od generatora lažnog teksta. Za kreiranje koda za sliku bilo koje
veličine, možete da koristite objekat Image Placeholder, sve dok na svoje mesto ne dođe i prava slika.
Ubacivanje mesta rezervisanih za slike
Ako u Dreamweaveru želite da ubacite mesto rezervisano za sliku, treba da uradite sledeće:
1. U otvorenom dokumentu postavite kursor tamo gde želite da se ubaci privremena slika.
2. Na paleti Common Insert, iz objekta Images izaberite Image Placeholder. Možete i da iz menija
izaberete Insert > Image Objects > Image Placeholder.
3. Otvoriće se okvir za dijalog Image Placeholder. Dodelite visinu i širinu, da biste definisali prostor koji
slika treba da zauzme, boju rezervisanog mesta za sliku (siva je dobar izbor, ako ne želite da to
mesto suviše odudara od neke usvojene šeme boja), dodajte alt tekst radi dostupnosti i prikazivanja
u pretraživaču i dajte ime koje će se u tom mestu pojavljivati u prozoru Design, a koje Vas podseća
šta ste to hteli da uradite. (Ime mora biti ispravno radi korišćenja u skriptovima, tako da ne sme da
sadrži razmake ili specijalne karaktere.) Nakon što podesite ove opcije, kliknite OK da biste zatvorili
okvir za dijalog i ubacili rezervisano mesto.
67 / 299
Dreamweaver MX 2004
Ako pogledate kod svog ubačenog mesta za sliku, videćete da je u pitanju obična oznaka img, sa praznim
atributom src i ubačenim atributom style iz CSS-a, koji podešava boju pozadine. Ovde nema ničeg što nije
standardno, tako da pretraživač nema problema da interpretira kod. Pošto nema zadate slike, pa se ona ne
može stvarno prikazati, pretraživač koristi boju pozadine i na tom mestu alt tekst.
Rad sa mestima rezervisanim za slike
Mesta rezervisana za slike treba koristiti ne samo za definisanje mesta gde će se kasnije naći slika, već i kao
pomoć prilikom određivanja njenih idealnih dimenzija. Veličinu ovog mesta možete menjati preko Property
Inspectora ili preko ručica. Tekuće dimenzije se prikazuju na samom mestu, a i u Property Inspectoru. Kada
ste spremni da napravite konačnu sliku, te dimenzije možete da koristite kao vodilje. Nakon što ste napravili
sliku, vratite se u Dreamweaver, izaberite mesto rezervisano za sliku i preko Property Inspectora dodelite
atribut src. Nakon što ste podesili atribut src, mesto rezervisano za sliku postaje obična slika.
Ako koristite Fireworks, onda je kreiranje konačne slike na mestu rezervisanom za sliku još jednostavnije.
Kada ste spremni da napravite sliku, izaberite mesto rezervisano za sliku i u Property Inspectoru kliknite
dugme Create. Ovim se pokreće Fireworks i u njemu novi dokument, sa veličinom okvira podešenom na
dimenzije koje je imalo mesto rezevisano za sliku. Napravite završnu sliku i kliknite dugme Done u prozoru
Fireworks. Fireworks će Vas provesti kroz proces zapisivanja i izvoza, pre nego što se vratite u
Dreamweaver.
Integracija Dreamweavera i Fireworksa
Ako za kreiranje web strana koristite Dreamweaver, a za kreiranje slika Fireworks, onda integracijom ova
dva programa možete da dobijete neke dodatne mogućnosti.
Kako radi ova integracija
Različiti programi u okviru Srudio MX-a 2004 komuniciraju jedan sa drugim tako što jedan drugom ostavljaju
HTML komentare i napomene o dizajnu. HTML komentari postoje u bilo kom HTML tekstu koji generiše
Fireworks, tako da Dreamweaver dobija važne detalje o tome kako je napravljen HTML, koja izvorna
datoteka ga je kreirala, itd.
Kada u Dreamweaveru izaberete tabelu koja je napravljena u Fireworksu, ako Dreamweaver naiđe na ove
komentare, prikazuje se specijalni Fireworks Table Property Inspector i omogućava pokretanje i uređivanje.
Napomene o dizajnu (Design Notes) su male XML datoteke sa ekstenzijom .mno, koje se nalaze u
datotekama named_notes. Kad god iz Fireworksa izvozite sliku u fasciklu koja je deo lokalnog sajta
Dreamweavera, Fireworks kreira napomenu o dizajnu, nakon izvoza, sa dodatom ekstenzijom .mno. Prema
tome, slika po imenu mydog.jpg kreira datoteku sa napomenom o dizajnu po imenu mydog.jpg.mno. Ova
MNO datoteka se stavlja u fasciklu _notes, koja se nalazi u istoj fascikli u kojoj je i slika koja se izvozi. Ako ta
fascikla ne postoji, prilikom izvoza će biti napravljena.
Kada u Dreamweaveru ubacite ovu sliku i kasnije je izaberete, program traži ovu MNO datoteku. Ako je
pronađe, on zna da je u pitanju slika koja dolazi iz Fireworksa, tako da dobijate specijalni Fireworks Image
Property Inspector. Program takođe zna lokaciju PNG datoteke koja je napravila ovu sliku, tako da se
omogućava pokretanje i uređivanje.
Ako je slika kreirana na osnovu parčeta iz Fireworksa, MNO datoteka takođe sadrži i liniju koda koja ukazuje
na deo slike od kojeg je nastala.
68 / 299
Dreamweaver MX 2004
Brisanje komentara onemogućava integraciju sa stavkama koje su napravljene u Fireworksu, kao što su
tabele sa odsečenim slikama. Brisanje fascikle _notes ili MNO datoteke onemogućava integraciju, kao što su
"pokreni i menjaj" za pojedine slike.
Ubacivanje HTML-a koji je nastao u Fireworksu
HTML objekat iz Fireworksa nudi lak metod za dobijanje tabele sa odsečenim slikama, zajedno sa
JavaScriptom koji se koristi za efekat rollover, u Dreamweaveru. Većina ljudi generalno neće koristiti
Fireworks za dizajn celih web strana. Umesto toga, oni u Fireworksu prave samo liniju za navigaciju, ili samo
baner sa naslovom, a ostatak strane prave u Dreamweaveru. HTML koji dolazi iz Fireworksa ima mnogo više
ograničenja, kada se koristi za definisanje rasporeda strana. HTML objekat iz Fireworksa se u sve ovo sjajno
uklapa. Evo kako ga treba koristiti:
1. U Dreamweaveru napravite rasproed za svoju stranu, ukljujući i tabele i CSS nivoe koji su potrebni
za formatiranje. Ostavite prostor za tabelu sa odsečenim slikama.
2. U Fireworksu napravite datoteku koja je veličine linije za navigaciju, baner sa naslovom ili neki drugi
element strane koji želite da napravite. Napravite svoju grafiku, nacrtajte objekte koji se odsecaju,
dodelite linkove i ponašanje, ili bilo šta drugo što želite.
3. Pre izvoza izaberite opciju File > HTML Setup. U okviru za dijalog HTML Setup proverite da li je
opcija HTML Style podešena na Dreamweaver HTML. Ova opcija dovodi do toga da Fireworks
dodaje komentare, koji su Dreanrweaveru potrebni za pravilnu integraciju.
4. Prilikom izvoza proverite da li ste u okviru za dijalog Export izabrali opciju HTML and Images.
5. U Dreamweaveru otvorite dokument u koji želite da ubacite element iz Fireworksa i postavite kursor
tamo gde treba da se ubaci.
6.
Sa palete Insert, izaberite Fireworks HTML. Kada se otvori okvir za dijalog, pronađite HTML
datoteku koju želite da ubacite (nemojte da brinete o pronalaženju slike, to će uraditi Dreamweaver).
Osim ako ne planirate da taj element iz Fireworksa ubacuejte u još neki dokument u Dreamweaveru,
izaberite opciju Delete File After Insertion. Nakon što završite, kliknite OK da biste zatvorili okvir za
dijalog i obavili umetanje.
U dokumentu u Dreamweaveru sada imate tabelu iz Fireworksa, kao i JavaScript kod koji je sa njom
povezan. Tu su i komentari u HTML-u koji identifikuju tu tabelu. Od sada, kada izaberete tabelu,
Dreamweaver prikazuje specijalni Fireworks Table Property Inspector. Pored uobičajenih osobina tabele, u
ovom Inspectoru se nalaze i informacije koje su potrebne za pokretanje Fireworksa.
69 / 299
Dreamweaver MX 2004
Launch and edit
Pokreni i menjaj (launch-and-edit) je opšti termin koji se u Macromediji koristi za opisivanje mogućnosti
integracije programa. U pitanju je mogućnost da izaberete stavku koju ste napravili u jednom programu (kao
što je Fireworks ili Flash), iz nekog drugog programa i da automatski pokrenete taj drugi program, otvorite
željenu datoteku sa izvornim kodom, promenite šta želite i vratite se u početni program.
Ako je u pitanju integracija Dreamweavera i Fireworksa, to znači da ako izaberete sliku ili tabelu, koji su
napravljeni u Fireworksu i kliknete dugme Edit na Property Inspectoru, automatski dolazi do pokretanja
Fireworksa, koji otvara izvornu PNG datoteku, koju sada možete da menjate. Osnovni proces je jednostavan:
1.
2.
3.
4.
U Dreamweaveru izaberite sliku ili tabelu i kliknite dugme Edit na Property Inspectoru. Možete i da
desnim tasterom miša kliknete sliku i da iz pomoćnog menija izaberete opciju Edit with Fireworks.
Kada se otvori Fireworks, u njegovom prozoru će na vrhu biti specijalna paleta pokreni i menjaj.
Promenite šta želite i nakon što završite, kliknite dugme Done.
Fireworks sada pamti PNG datoteku, ponovo je izvozi, ako je potrebno i generiše novu sliku ili
HTML, nakon čega zatvara datoteku.
Ponovo se prikazuje Dreamweaver u kome se ponovo učitavg slika ili HTML.
Nakon što ste u Dreamweaver ubacili HTML iz Fireworksa, morate paziti šta sa tim ubačenim elementom
radite, ako želite da ga kasnije ponovo pokrećete u Fireworksu. Promena linkova, alt teksta ili nekih drugih
informacija koje se ne odnose na strukturu HTML-a generalno ne predstavlja problem. Ako se odlučite na
neke strukturne promene u tabeli i posle toga probate da to menjate u Fireworksu, bićete upozoreni da
Fireworks prilikom ažuriranja HTML koda može da prebriše ono što ste u međuvremenu promenili u
Dreamweaveru.
Nemojte da dopustite da se to desi. Isto će se desiti i ako izaberete pojedinačnu sliku unutar tabele sa
odsečenim slikama i pokušate da je menjate po principu pokreni i menjaj. Čak i ako želite da ažurirate samo
tu sliku, Fireworks obnavlja celu tabelu.
Optimizacija u letu
Jedna od najboljih osobina integracije je mogućnost da se u Dreamweaveru u letu optimizuju slike. Recimo
da ste uvezli neku animiranu sliku, za svoju stranu "šta je novo" i da kad dođete u Dreamweaver ustanovite
da ono što ste optimizovali kao JPEG ili providnost u GIF formatu ne radi, ili da je vreme za animaciju
pogrešno izraučunato. Izaberite sliku, pa onda izaberite Commands > Optimize Image in Fireworks, ili kliknite
sliku desnim tasterom miša i iz pomoćnog menija izaberite opciju Optimize Image in Fireworks. Možete i da
kliknete dugme Optimize in Fireworks, sa palete Property Inspector. Pokrenuće se Fireworks. Otići ćete
direktno u specijalnu verziju okvira za dijalog Export Preview, po imenu Optimize Image. Ovde možete da
promenite podešavanja vezana za optimizaciju, nakon čega treba kliknuti na Update. Fireworks će ponovo
izvesti sliku, sa novim podešavanjima i vratiti Vas u Dreamweaver.
Optimizacija u letu je posebno korisna kada dođe do promene veličine datoteka. Možda ćete raditi na strani
sa nekoliko slika i doći do zaključka da neka od njih treba da bude veća ili manja. Pošto se ne preporučuje
da se veličina slike menja u Dreamweaveru, postavlja se pitanje šta ćete uraditi? Promenite veličinu slike,
ostavite je izabranom i izaberite Commands > Optimize Image in Fireworks (ili desnim tasterom miša kliknite
na sliku i izaberite komandu iz pomoćnog menija). Kada se otvori okvir za dijalog Optimize Image, datoteka
će biti podešena da se optimizuje na novu veličinu. Nakon što kliknete na Update i vratite se u
Dreamweaver, pogledajte indikatore za visinu i širinu na Property Inspectoru. Videćete da oni više nisu
ispisani masnim slovima, što znači da je veličina slike promenjena na pravi način.
Proširenje Fireworksa vezano za integraciju
Ako ugrađene mogućnosti integracije između Dreamweavera i Fireworksa nisu dovoljne, Dreamweaver
Exchange ima nekoliko proširenja koja mogu da učine i više. To su besplatna proširenja koja su odobrena od
strane Macromedije: InstaGraphics Extensions for Dreamweaver MX i Web Photo Album 2.1 for
Dreamweaver MX.
InstaGraphics Extensions for Dreamweaver MX
Prema Macromediji, ovo proširenje omogućava da brzo napravite web grafiku prema Fireworksu, direktno u
Dreamweaveru, bez nekih posebnih znanja, pa čak i ako nikad pre niste radili sa Fireworksom. Tu spadaju tri
stavke: komanda Convert Text to Image, komanda Convert Bullets to Images i objekat Fireworks Button.
70 / 299
•
•
•
Dreamweaver MX 2004
Komanda Convert Text to Image – Kao što i samo ime ukazuje, ova komanda od teksta u
Dreamweaveru pravi sliku. Vi podešavate font i stil po želji. Možete je primeniti na izabrani tekst ili na
sav tekst koji se u dokumentu nalazi između određenih oznaka (kao što je tekst izmedu oznaka M).
Ova komanda se nalazi u meniju Commands.
Komanda Convert Bullets to Images – Ova komanda konvertuje sve neuređene liste u dokumentu u
liste sa grafičkim oznakama i tabele sa dobrim formatiranjem. Vi možete da izaberte veličinu i stil
oznake, a Fireworks čak osigurava da se ovo slaže sa bojom pozadine u dokumentu. (Treba da
znate, da nakon što završite sa ovom komandom, lista tehnički više nije lista, pošto se ne nalazi
između oznaka ul.) Komanda se nalazi u meniju Commands.
Objekat Fireworks Button – Ovaj objekat se ponaša slično kao objekat Flash Button, koji postoji u
Dreamweaveru. Tu možete da birate stil dugmeta, dodeljujete svoj tekst i informacije o linku, kao i da
kreirate dugme sa podešenim rollover kodom. Ovo je kao prečica za kreiranje dugmeta i stanja
rollover.
Dodaje se i ponašanje tipa Swap Image, izvozi se sve i Fireworksa i stavlja u HTML u Dreamweaveru. Ovo
može da Vam uštedi prilično vremena, dokle god Vam stilovi dugmadi odgovaraju. Ovaj objekat se nalazi na
kartici Media, palete Insert.
Web Photo Album 2.1 for Dreamweaver MX (Macromedia)
Ovo popularno proširenje omogućava da napravite svoj HTML foto album i to na osnovu fotografija koje
imate na svom računaru. Vi birate grafički stil i druge detalje, kao i fotografije koje ćeti ubaciti. Generišu se
male sličice, HTML strane koje će se prikazati i sve ostalo. Interfejs ima oblik čarobnjaka koji Vas vodi kroz
jednostavne korake, i koji je vrlo intuitivan Komanda se nalazi u meniju Commands.
71 / 299
Dreamweaver MX 2004
6. Linkovi i navigacija
Osnovno o linkovima
Ako želite da efikasno koristite linkove, prvo morate da naučite kako oni rade u pretraživačima i kako
Dreamweaver MX 2004 njima rukuje. U narednom odeljku smo objasnili oznaku anchor (a), šta ona radi i
kako Dreamweaver može da pomogne u ubacivanju i upravljanju linkovima.
Kako linkovi rade u pretraživaču
Hiprelinkovi se prave tako što se neki element na strani okruži kotvom, odnosno oznakom a. Atribut href, što
je skraćenica za hypretext reference, definiše odredište linka.
Tekst na kome je postavljen link se u pretraživaču označava na neki način, tako da se može jasno razlikovati
od okolnog teksta. Obično je link podvučen i obojen plavom bojom. Nakon što ste posetili adresu na koju taj
link upućuje, linkovi obično postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link
prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definišu svoje boje. Kada prelazi preko
linka, kursor menja oblik u šaku sa kažiprstom upretim u nešto, člme se ukazuje da se taj link može kliknuti.
Apsolutne ili relativne putanje
URL je skraćenica za universal resource locator. URL ili web adresa je u suštini pokazivač na određeni
dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako da dođete do
tog dokumenta. URL putanja može biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na
koren.
Apsolutna adresa je adresa na Internetu koja sadrži sve informacije koje su računaru potrebne u vezi lokacije
koja se traži. Tu spadaju informacije o tome kako se vraćaju informacije, uključujući protokol, domen, fasciklu
i ime datoteke.
http://www.mfa.org/exhibitions/upcoming.htm
Zašto je protokol tako bitan? Svim vrstama web adresa se može pristupiti preko apsolutnog URL-a,
uključujući i web strane, adrese elektronske pošte, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa
se traži.
Relativna putanja je skraćeni oblik adrese kod koje se razlčiti delovi adrese, kao što je protokol, adresa sajta
ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje na raspolaganju.
Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekućeg dokumenta
odete na željenu stranu. Ako želite da povežete dve strane koje se nalaze u istoj fascikli, potrebno je da
zadate samo ime datoteke, na primer (sa strane mojastrana.html) :mojadrugastrana.html.
Ako želite da link postavite na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa koje se
link poziva, onda treba da navedete i ime fascikle i ime datoteke (ako je link na strani mojastrana.html)
mojafascikla/mojatrećastrana.html.
Ako želite da link ukazuje na drugu stranu koja je u fascikli koja je iznad fascikle u kojoj se trenutno nalazite,
onda preko ../ ukazujete na to da treba da se popnete jedan nivo naviše Iza ovog sledi ime datoteke (linka sa
strane mojastrana.html)
: ../index.html.
Ako želite da se u hijrearhiji fascikli krećete naviše ili naniže za više nivoa, onda treba da navodite sva imena
fascikli ili indikatore ../ više puta, po jednom za svaki nivo.
pages/myfolder/mythirdpage.html
../../index.html
Putanja relaitvna u odnosu na koren uspostavlja vezu između datoteke i korena celog sajta. Koren sajta je
ono što smatrate generalnim imenom sajta, kao što je na primer www.macromedia.com ili www.mfa.org:
/index.html
/pages/mypage.html
72 / 299
Dreamweaver MX 2004
/pages/myfolder/mythirdpage.html
Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu (/), što možete
videti i u primerima koje smo dali.
Zašto biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da uštede vreme,
ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeću,
koje ste postavili onlajn i ako mesečne članke prebacujete u fasciklu Archive, kada započne novi mesec
onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da uštede vreme koje biste proveli u
prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom.
Atribut target
Kada kliknete link, podrazumeva se da se novi dokument otvara u istom prozoru pretraživača u kome je
prethodno bio otvoren tekući dokument. Sa druge strane, HTML omogućava da zadate gde link treba da se
otvori u novom prozoru pretraživača, ili ako se radi o frejmovima, onda u određenom frejmu. Ovo se zadaje
putem opcionalnog atributa oznake anchor <a>, a to je target. Ako želite da se novi dokument otvori u
posebnom prozoru pretraživača, onda atribut target treba da podesite na _blank.
Linkovi u Dreamweaveru
Kreiranje linkova je zadatak sa kojim ćete se prilikom definisanja web sajtova često suočavati. Srećom,
Dreamweaver omogućava da to radite brzo i lako. Sada kada ste shvatili osnovne principe URL putanja,
spremni ste da koristite Property Inspector iz Dreamweavera i da dodajete linkove na svoj sajt.
Kad god je u Dreamweaveru izabran neki element teksta ili neka slika, na Property Inspectoru se nalaze
polja za linkove, kao i za kontrolu informacija vezanih za taj link.
Dodeljivanje apsolutnih linkova
Svi apsolutni linkovi se moraju uneti u polje Link, Property Inspectora. Morate da ukucate kompletan link,
uključuijući i protokol.
Ako radite u okviru sajta koji ste definisali u Dreamweaveru, možete da koristite i pano Assets, koji može
pomoći u rukovanju apsolutnim URL adresama. Otvorite pano Assets (Window > Assets) i pređite u
kategoriju URL
Dodeljivanje relativnih linkova
Ako želite da dodate relativni link, izaberite element, a onda ili u polju Link Property Inspectora, unesite
relativni URL, ili možete da upotrebite ikone Browse ili Point-to-File. I jedan i drugi metod dovode do toga da
Dreamweaver pravi putanje relativne u odnosu na dokument ili u odnosu na koren sajta.
Ako želite da potražite link, kliknite dugme Browse (ikona fascikle), koje se nalazi pored polja Link i preko
okvira za dijalog koji se otvara izaberite datoteku koju želite. Možete i da izaberete da li želite da link bude
relativan u odnosu na dokument ili u odnosu na koren sajta.
Ako želite da koristite opciju Point-to-File treba da otvorite pano Site, ili da u Dreamweaveru otvorite još neki
dokument. Kliknite ikonu Point-to-File (izgleda kao nišan puške) i vucite odatle sve dok se kursor ne nađe
73 / 299
Dreamweaver MX 2004
iznad dokumenta na koji želite da postavite link, bilo da je u pitanju ikona te datoteke u panou Site, ili prozor
Document sa tom datotekom.
Putanje relativne u odnosu na dokument i putanje relativne u odnosu na koren sajta u Dreamweaveru
Svaki put kada pretražujete datoteku za koju pravite relativni link, Dreamweaver daje opciju kreiranja linka sa
putanjom relativnom u odnosu na dokument i u odnosu na koren sajta. Ovo podešavanje ostaje na istoj
vrednosti sve dok ga ponovo ne promenite. Nije retroaktivno (ne menja linkove koje ste već napravili, putem
onog drugog metoda).
Ako relativni link pravite preko opcije Point-to-File, onda nemate mogućnost da birate vrstu relativnog linka
koju pravite. Umesto toga se koristi onaj vrsta koju ste koristili poslednji put. Ako želite da promenite
podrazumevanu vrednost, dodelite najmanje jedan link, preko opcije Browse i u okviru za dijalog Select File
podesite željenu vrstu linka. Linkovi koji su relativni u odnosu na koren sajta ne mogu da se pregledaju
lokalno u pretraživaču. Ako u Dreamweaveru pokušate da pogledate stranu sa putanjom relativnom u
odnosu na koren sajta, Dreamweaver privremeno konvertuje taj URL u putanju relativnu u odnosu na
dokument. Kada kliknete link, da biste pogledali stranu, to će raditi, ali naredne putanje neće raditi u lokalu,
pošto zavise od korena sajta. Iz tog razloga u jednom trenutku možete da pogledate samo jednu stranu.
Linkovi na elektronsku poštu
Linkovi na elcktronsku poštu (email link) su druga vrsta apsolutne putanje. U Dreamweaveru postoji nekoliko
različitih mogućnosti za kreiranje ovakvih linkova. Najjednostavnije je da koristite Property Inspector.
Izaberite tekst ili sliku koju želite da koristite kao link, i u polju Link Property Inspectora unesite adresu,
zajedno sa protokolom mailto:
mailto:youraddress@domainname.com
Na slici je prikazano ono što se dešava. Obratite pažnju na to da iza dve tačke nema praznog prostora.
Ako ne želite da svaki put unosite protokol mailto: Dreamweaver ima i objekat Email Link. Evo kako se on
koristi:
1. Ako želite da link na elektronsku poštu napravite za sliku, kliknite sliku da biste je izabrali. Ako želite
da ovakav link napravite za tekst, ili unesite tekst, ili ga izaberite i postavite kursor tamo gde želite
da se tekst nađe.
2. Sa palete Insert izaberite objekat Email Link (kategorija Common), ili izaberite Insert > Email Link iz
glavnog menija Dreamweavera.
3. Kada se pojavi okvir za dijalog Insert Email Link, unesite email adresu na koju želite da link ukazuje
(bez protokola mailto:) i kliknite OK.
74 / 299
Dreamweaver MX 2004
Nakon što ste na ovaj način ubacili email link, ako pogledate Property Inspector, videćete da se u polju Link
prikazuje apsolutni URL, isto kao da ste ga sami uneli.
Metodi i alati za navigaciju
Rad sa linkovima obuhvata mnogo više od pukog ukazivanja preko slika i teksta na druge web strane. Kotve
sa imenima, mape slika, kao i meniji koji iskaču su alternativni način upotrebe linkova. Rollover efekat i linije
za navigaciju pretvaraju jednostavne grafičke linkove u interaktivne elemente na strani. Dreamweaver može
da Vam pomogne u kreiranju svih ovih elemenata.
Kotve sa imenima
Zar nije sjajno kada posetite web sajt na kome su dizajneri potrošili izvesno vreme u kreiranju linkova koji
omogućavaju da se krećete po dugačkim stranama, tako da ne morate da idete naviše i naniže, da biste
pronašli ono što tražite? Možda ste ovo videli na strani sa najčešće postavljenim pitanjima. Kad god kliknete
neko pitanje, dobijete odgovor samo na to pitanje. Kada pravite link na određeno mesto u dokumentu (ne na
sam dokument), pravite ono što se zove kotva sa imenom.
Kako rade kotve sa imenima
Kotva sa imenom je u HTML-u oznaka kotve a, bez atributa href, ali sa atributom name.
<a name="outerspace"></a>
Sama kotva je nevidljiva. Sa druge strane, tekstualni ili linkovi sa slikama mogu da ukazuju na tu kotvu, tako
što će u svoj atribut href ubaciti ime te kotve.
<a href="#outerspace">
<a href="destinations.html#outerspace">
<a href="http://www.rocketlaura.com/destinations.html#outerspace">
Prvi od ovih primera ukazuje na kotvu sa imenom u tekućem dokumentu (# znači "ovaj dokument"). Druga
dva linka ukazuju na kotvu sa imenom u drugom dokumentu. Referenca na taj drugi dokument se zadaje
apsolutno ili relativno. Ako je kotva u tom dokumentu postavljena u delu strane koji se ne vidi, linkovi koji
otvaraju tu stranu dovode do toga da se prozor pretraživača prikaže sa vidljivim tim drugim delom.
Kreiranje kotvi sa imenom
Ako u Dreamweaveru želite da kreirate kotvu sa imenom, treba da uradite sledeće:
1. U prozoru Document, u prikazu Design, postavite kursor tamo gde želite da bude kotva.
2. Sa palete Insert (kategorija Common), izaberite objekat Named Anchor. Možete i da izaberete Insert
> Named Anchor iz menija.
3. U okviru za dijalog koji se otvara, unesite ime kotve (jedna reč) i kliknite OK.
Ako ukazujete na nevidljive elemente, marker za kotvu će se prikazati u prikazu Design i to na mestu
kursora. Ako se marker kotve ne vidi, izaberite View > Visual Aids > Invisible Elements ili podmeni Visual
75 / 299
Dreamweaver MX 2004
Aids iz menija View Options, sa palete Document). Možda će izgledati kao da mala zlatna ikona sa kotvom
narušava izgled strane.
Ovo je iluzija koju daje prikaz Design iz Dreamweavera. U pretraživaču se ova ikona ne vidi i ne zauzima
nikakav prostor.
Linkovi na kotve sa imenima
U Dreamweaveru postoji nekoliko načina da se linkovi povežu sa kotvama sa imenima.
Preko Property Inspectora: Izaberite tekst ili sliku od koje želite da vodi link. Ako je kotva u tekućem
dokumentu, samo otkucajte oznaku funte (#) i iza nje ime kotve. Ovo se unosi u polju Link. Ako je kotva u
drugoj datoteci, unesite putanju do datoteke (kucanjem ili pretraživanjem), a onda unesite #, iza čega sledi
ime kotve.
Preko opcije Point-to-File: Ikona Point-to-Fole se takođe može upotrebiti za linkove ka kotvama sa imenima.
Izaberite tekst ili sliku od kojih link treba da vodi, kliknite ikonu Point-to-File i prevucite marker kotve do
strane. Opcija Point-to-File se može koristiti za linkove na kotve koje se nalaze u drugim dokumentima, ali
samo ako su oba dokumenta otvorena, Samo pokažite drugi dokument (čim ga aktivirate), a onda na kotvu
unutar njega.
Mape slika
Mapa slika je grafička slika koja ima različite "vruće tačke", koje se ponašaju kao linkovi. Vruće tačke u
okviru slike se definišu pravougaonicima, krugovima ili poligonima.
Kako rade mape sa slikama
Postoje dva tipa mapa sa slikama. To su mape sa slikama na strani servera i mape sa slikama na strani
klijenta. Kod mapa na strani servera, informacije o koordinatama se čuvaju na serveru, čime se značajno
može usporiti učitavanje strana na koje linkovi vode. Mape na strani klijenta sve informacije o mapi sadrže u
okviru HTML datoteke u kojoj se nalazi slika. Mape na strani klijenta su bolje iz nekoliko razloga:
• Linkovi se brže rešavaju pošto nema potrebe za informacijama koje se nalaze na udaljenom serveru.
• Korisniku se prilikom prelaska miša iznad linka može prikazati URL adresa.
• • Mape sa slikama se mogu lokalno testirati.
Kod za mape sa slikama na strani klijenta se sastoji od dva dela. To je oznaka img, sa atributom usemap,
koji tu sliku povezuje sa mapom, kao i oznake map, koja sadrži koordinate. Evo kako to izgleda:
<img src="images/library.gif" width="534" height="120"border="0" usemap="#libmap">
<map name="libmap">
<area shape="rect" coords="41,23,196,85" href="page1.html">
<area shape="rect" coords="205,25,350,87" href="page2.html">
</map>
Oznaka map može biti bilo gde u okviru dela body. Ne mora da se nalazi blizu oznake img.
Kreiranje mape slika
U Dreamweaveru postoje alati za kreiranje, konfigurisanje i uređivanje mapa slika i njihovih vrućih tačaka,
tako da ne morate da brinete o kodu koji se nalazi ispod toga. Alati za vruće tačke u Dreamweaveru kreiraju
mape slika na strani klijenta.
Ako želite da u Dreamweaveru napravite mapu slika, treba da uradite sledeće :
1. U prozoru Document izaberite sliku od koje želite da napravite mapu.
2. U delu Map Image Property Inspectora unesite jedinstveno ime mape. Ovo ime mora biti jedna reč.
3. Definišite vruće tačke mape slika, preko jednog ili više alata Hotspot. Obratite pažnju na to da
postoje različiti alati za sve vrste vrućih tačaka.
76 / 299
Dreamweaver MX 2004
Ako želite da nacrtate pravougaone ili kružne vruće oblasti, izaberite odgovarajući alat i mišem označite
površinu na slici.
Kreiranje poligonalnih vrućih oblasti može biti malo složenije. Ako želite da koristite alat za poligone,
izaberite alat i u prozoru Document kliknite jednom preko slike za svaki ugao željenog poligona. Završićete
tako što ćete se vratiti na Property Inspector i kliknuti alat Arrow (u delu Map), da biste zatvorili poligon. Vrlo
je važno da zvanično završite crtanje poligona preko alata Arror (strelica). Ako ne uradite tako, svaki naredni
klik na slici nastavlja da u poligon dodaje nova temena. Ako Vam se desi tako nešto, kliknite alat Arrow da
biste napustili režim crtanja poligona, a onda izaberite taj poligon i izbrišite ga.
Rad sa vrućim tačkama
Nakon što ste u Dreamweaveru kreirali vruću tačku, možete da je izaberete i da njene osobine podesite
preko alata Hotspot Property Inspector. Polja Link, Target i Alt rade isto kao i ona koja ste koristili kada ste
pravili jednostavan hiperlink na sliku, a i koriste se na isti način.
Ako želite da menjate vruću tačku nakon što ste je kreirali, možete da koristite dugme Arrow (nalazi se na
Hotspot Property Inspectoru). Kliknite u vruću oblast, da biste je izabrali. Možete da je prevučete na novu
lokaciju. Ako želite da promenite oblik, kliknite i vucite neku od tačaka koje se prikazuju duž ivica oblasti.
Padajući meniji
Padajući meni je element select iz forme, koji se prikazuje kao padajuća lista sa opcijama. Ako kliknete neku
od opcija, to je isto kao da ste kliknuli neki link. Padajući meni može da ima linkove na lokalne ili udaljene
dokumente, email linkove ili linkove na neki drugi tip datoteke koji može da postoji u HTML-u.
Padajući meni često sadrži i neki odziv, kao što je na primer, Zemlja ili Izaberite stavku, koja se prikazuje na
vrhu liste. Ako kliknete neku od opcija iz liste, aktivira se link. Meniji koji iskaču se najbolje koriste u
specifičnim aplikacijama. Generalno, kada je bitno da se uštedi prostor, kada korisnik ne mora da odjednom
vidi sve opcije iz menija, ili kada sa stavkama iz menija ima puno da se radi, ovakav meni je pogodan izbor.
Kreiranje padajućeg menija u Dreamweaveru
Padajući meni se u Dreamweaveru lako pravi. Samo treba da pratite sledeće korake :
1. Otvorite svoj dokument u prikazu Design i kursor postavite tamo gde želite da se pojavi meni.
2. Sa palete Insert idite na kategoriju Forms i izaberite objekat Jump Menu. Možete i da izaberete
Insert > Form > Jump Menu.
77 / 299
Dreamweaver MX 2004
3. Kada se otvori okvir za dijalog Insert Jump Menu, definišite stavke koje treba da se pojave u meniju i
na koju lokaciju pretraživač treba da pošalje korisnika, kada izabere tu opciju. U polju Text unesite
tekst koji želite da se prikaže. Kliknite plus (+) da biste u meni dodali stavku.
URL možete da zadate preko dugmeta Browse ili da ga unesete ručno. Ovaj okvir za dijalog možete da
koristite i za podešavanje opcija iz padajućeg menija, kao što je na primer, da li da postoji dugme Go.
Kod padajućeg menija
Kod za ovakav meni se sastoji od oznaka <form> i <select>, kao i Java Scripta, koji omogućava rad menija.
Nakon što ste ubacili meni, ako ste u svom dokumentu podesili prikazivanje nevidljivih elemenata, treba da
se prikaže crveni pravougaonik forme koja sadrži meni. Ako izaberete padajući meni, na panou Behavior
ćete videti odgovarajuće ponašanje.
78 / 299
Dreamweaver MX 2004
Koristiti ili ne dugme Go
Kada kreirate padajući meni, imate mogućnost da ga napravite kao padajući meni ili kao padajući meni sa
pridruženim dugmetom Go. Dugme Go je dugme forme, sa oznakom Go, kojim se, kada se klikne, aktivira
meni.
Padajućem meniju nije potrebno dugme Go, pošto se meni uobičajeno aktivira kada korisnik klikne stavku iz
menija. Ali, šta ako je odredište koje korisnik želi da izabere već prikazano u meniju? Na primer, možda je to
odredište podrazumevana opcija iz menija (prva stavka iz liste), ili je korisnik možda na stranu dospeo preko
dugmeta Back u pretraživaču. U takvim slučajevima dugme Go omogućava da se meni aktivira bez promene
izabranog odredišta.
Ako želite da dugme Go uključite prilikom definisanja menija, izaberite opciju Insert Go Button After Menu u
okviru za dijalog Insert Jump Menu.
Korišćenje menija sa frejmovima i višestrukim prozorima
Padajući meniji se mogu koristiti za učitavanje novih strana u nove prozore, ili u različite prozore u skupu
frejmova. Ovo možete zadati preko opcije Open in Main Window za svaki URL koji ste definisali za stavke iz
menija.
Ako padajući meni novi URL otvara u posebnom prozoru, treba da donesete još jednu odluku: Nakon što je
učitana strana sa odredišne adrese, da li želite da se u padajućem meniju i dalje prikazuje stavka za to
odredište, ili želite da se prikaže prva stavka? Ako otvarate novi prozor (atribut target je _blank), onda želite
da se meni vrati. Ako otvarate poseban frejm, ali u istom prozoru pretraživača, onda ne želite vraćanje
stavke. Da li će se izabrana stavka promeniti ili ne zavisi od opcije Select First Item After URL Change, koja
se podešava u okviru za dijalog Insert Jump Menu.
Uređivanje padajućeg menija
Nakon što ste napravili padajući meni, možete ga dalje menjati. Ovo se radi preko Property Inspectora i
panoa Behaviors. Možete i da menjate, dodajete ili brišete dugmad Go.
Property Inspector za padajući meni
Ako želite da vidite Property Inspector za padajući meni, izaberite taj meni. Ovo je u suštini List/Menu
Property Inspector, sa ubačenim stavkama. Pored toga što padajući meni možete da promenite od menija sa
prikazanom jednom stavkom, na listu (sa prikazanih nekoliko stavki odjednom), možete i da menjate
odredišta. Ovo ćete uraditi ako kliknete dugme List Values.
Ponašanje padajućeg menija
Izaberite padajući meni i u panou Behaviors ćete videti da je dodato ponašanje. Ovo ponašanje je u okviru
elementa form, a koristi se triger onChange. (To znači da se ovo ponašanje izvršava svaki put kada se iz
menija izabere druga stavka.) Kliknite dva puta brzo to ponašanje. Otvoriće se okvir za dijalog Jump Menu.
Ovaj okvir za dijalog je skoro identičan sa okvirom za dijalog Insert Jump Menu. Nema samo opcija Menu
Name i Insert Go Buttons, koje se definišu samo prilikom kreiranja menija.
Rad sa dugmadima Go
Ako ste napravili padajući meni sa dugmetom Go, onda postoji i ponašanje Jump Menu Go. Ova akcija se
79 / 299
Dreamweaver MX 2004
izvršava kada se desi događaj onClick. Kliknite dva puta brzo, da biste promenili ovo ponašanje. Jedina
opcija je da se klikne dugme, koje pokreće izvršenje stavke iz menija. Ako odlučite da Vam nije potrebno
dugme Go, možete da ga slobodno izaberete i izbrišete u bilo kom trenutku.
Ako nakon kreiranja padajućeg menija odlučite da Vam je dugme Go potrebno, možete da ga dodate na
jedan od sledećih načina:
1. Ubacivanjem dugmeta forme, u formu koja sadrži padajući meni. (Postavite kursor direktno iza
padajućeg menija i izaberite Insert > Form Objects > Button).
2. Preko Property Inspectora, ako se oznaka na dugmetu podesi na Go.
3. Izaberete dugme i sa panoa Behaviors mu dodelite ponašanje Jump Menu Go.
Većina korisnika više voli da ih padajći meni šalje na novu destinaciju čim iz njega izaberu neku stavku. Ipak,
ako želite da se meni aktivira samo ako korisnici prvo iz njega nešto izaberu, pa kliknu dugme Go, treba da
uradite sledeće:
1. Kreirajte padajući meni sa dugmetom Go, ili ga preko prethodno pomenutih instrukcija dodelite
kasnije.
2. Idite u prozore Design i Code. U delu Design prozora Document izaberite padajući meni.
3. U delu Code pronađite i ispitajte kod za meni (stavka select). Izbacite rukovaoca događajem i poziv
funkcije, kao što je ovde pokazano:
<select name=:"menu1" onChange="MM_jumpMenu(' parent', this,0) ">
Obratite pažnju na to, da nakon što ovo uradite, Dreamweaver više stavku select ne prepoznaje kao padajući
meni, tako da ne možete da koristite pano Behaviors i da tamo menjate ponašanje.
Rollover
Obično se link, u trenutku kada korisnik iznad njega postavi pokazivač miša na neki način menja. Na primer,
tekstualni link može da promeni veličinu ili boju, od normalnih na bold. Ako učinite da se link vizuelno menja,
on kao da kaže "Ovde možeš da klikneš". Ovakve mogućnosti se nazivaju rollover i obično se primenjuju na
slike.
Rollover se u suštini sastoji od dve slike. To je primama slika ili up slika, koja se prikazuje kada se strana po
prvi put učita i sekundarna slika, ili over slika., kojom pretraživač menja primarnu sliku, kada se iznad
primarne postavi kursor. Dve slike moraju biti iste veličine. Ako to nije slučaj, sekundarna slika će preuzeti
dimenzije primarne.
Dobijanje efekta rollover u Dreamweaveru
Rollover za slike se u Dreamweaveru vrlo lako dobija i to zahvaljujući objektu Rollover Image. Ako želite da
napravite rollover, onda treba da ubacite sliku koja se automatski pretvara u drugu sliku kada se iznad nje
postavi kursor.
Evo kako se ubacuje rollover slika :
1. U svom dokumentu otvorite prikaz Design. Kursor postavite tamo gde treba da se ubaci slika. Sa
palete Insert (kategorija Common), iz objekata Images, izaberite objekat Rollover Image.
2. Otvoriće se okvir za dijalog Insert Rollover Image. U polju Name unesite ime. Slike koje se koriste
kao rollover moraju imati imena. Ako ne unesete ime, Dreamweaver će dodeliti podrazumevano
ime.
3. Preko dugmeta Browse pronađite Original (Up) sliku, i Rollover (Over) sliku, ili u svako polje unesite
ime i putanju do odgovarajućih slika.
4. Ako je potrebno, potvrdite polje Preload Images.
5. U polje Alternate Text unesite alternativni tekst. (Ovo će postati atribut alt primarne slike.)
6. Preko dugmeta Browse potražite i izaberite URL koji se posetiocu šalje kada se klikne rollover slika.
Možete i da unesete javascript:. Ovo je prazan link, ako link nigde ne treba da vodi.
7. 7.Kliknite OK da biste ubacili rollover sliku.
80 / 299
Dreamweaver MX 2004
Prethodno učitavanje i rollover
Pretraživač sve resurse sa strane obično učitava kada se prvi put pojave na strani. To znači da se učitava up
slika, ali pošto se slika ispod nje ne prikazuje, a možda se i nikad neće prikazati, to se ona i ne učitava. Kada
neko postavi kursor iznad gornje slike, onda se preuzima donja. Ovo može da potraje izvesno vreme, čime
se gubi utisak koji efekat rollover ostavlja. Možda će korisnik pomeriti miša sa slike pre nego što se učita
slika. Ako tu sliku unapred učitate, onda je druga slika spremna i čeka da se prikaže. Moguće je da se ona
nikad ne prikaže u prvom planu, ali to nije bitno. Ako se pozove, prikazuje se istog trenutka. Ako potvrdite
opciju Preload Images u okviru za dijalog Rollover Image, Dreamweaver piše JavaScript kod koji
pretraživaču govori da treba da učita i primarne i sekundarne slike kada se strana po prvi put učitava. Na taj
način se eliminiše odlaganje. Zbog toga je dobro da, kada ubacujete objekat Rollover Image, uvek proverite
da li je ta opcija uključena.
Uređivanje rollover slika
Objekat Rollover Image je samo prečica do složenije procedure koja u Dreamweaveru postoji za umetanje
slika, dodeljivanje linka toj slici i dodavanje ponašanje Swap Image i Swap Image Restore. Nakon što ste
ubacili rollover sliku, ona postaje slika sa linkom i dodeljenim ponašanjem. Ako želite da menjate sliku i link,
treba da je izaberete i koristite Property Inspector. Ako želite da menjate rollover kod, izaberite sliku i u
panou Behaviors dva puta brzo kliknite ponašanje Swap Image. Otvoriće se okvir za dijalog Swap Image u
kome možete da menjate sekundarnu sliku i opcije vezane za prethodno učitavanje.
81 / 299
Dreamweaver MX 2004
Linije za navigaciju
Termin linija za navigaciju se može odnositi na bilo koji skup linkova koji su postavljeni na web strani, bilo po
horizontali ili po vertikali. Generalno, ovo je bitna funkcija web sajta i ostaje konzistentna od strane do strane.
Time se korisniku pruža mogućnost da lako prelazi sa jedne na drugu stranu. Linija za navigaciju (navbar)
može biti skup tekstualnih linkova, slika sa linkovima ili mapa slika. Složeniji tip linije za navigaciju se često
pravi preko skupa slika koje se menjaju na bazi akcija koje korisnik preduzima, a sve to preko JavaScripta. U
Dreamweaveru postoji objekat Navigation Bar koji omogućava jednostavno kreiranje ovakve linije za
navigaciju.
Svako dugme ili element na liniji za navigaciju Dreamweavera može imati do četiri stanja. Dva stanja
određuju standardne funkcije vezane za rollover.
•
•
Up – Slika se prikazuje kada korisnik nije u interakciji sa elementom.
Over – Slika se prikazuje kada se pokazivač miša zadrži iznad slike. Izgled elementa se menja da bi
se signalizirala interaktivnost
Druga dva stanja određuju kako se slika prikazuje kada je prikazana strana na koju ukazuje link koji vodi od
te slike; na primer, kako treba da izgleda dugme Home, kada se nalazi na strani Home? Opcije su:
•
•
Down – Kada se linija za navigaciju ne koristi za navigaciju između strana (obično se ovde radi sa
skupom frejmova). Ovo je slika koja se prikazuje kada korisnik klikne element. Kada se element
klikne i kada se učita nova strana, linija za navigaciju, koja je i dalje prikazana, taj kliknuti element
prikazuje sa promenjenim izgledom, da bi se ukazalo na to da je taj element izabran.
Over While Down – Ova slika se pojavljuje kada se pokazivač miša postavi iznad donje slike.
Svaka linija za navigaciju ne mora da sadrži sva četiri stanja. Cesto se koriste stanja Up, Over i Down.
Kreiranje linije za navigaciju
Ako želite da napravite liniju za navigaciju, prvo morate u svon programu za rad sa grafikom napraviti sve
slike koje se odnose na stanja dugmadi koja će se koristiti. Nakon toga se vratite u Dreamweaver, otvorite
dokument, postavite kursor tamo gde treba da bude linija za navigaciju i uradite sledeće :
1. Na paleti Common Insert, iz objekata Images, izaberite objeka Navigation Bar. Možete i iz menija
izaberete opciji Insert > Image Objects > Navigation bar.
2. Otvoriće se okvir za dijalog Navigation bar. Svaki element odgovara dugmetu na ovoj liniji, a svako
dugme ima do četiri stanja. Svakom svom elementu treba da zadate ime (jednom po jednom), a
onda preko dugmeta plus (+) dodajte elemente na liniju za navigaciju. Preko dugmeta Browse ćete
dodeliti slike za različita stanja.
82 / 299
3.
4.
5.
6.
Dreamweaver MX 2004
Zadajte alternativni tekst u polju sa tim imenom, i preko dugmeta Browse zadajte URL, na koji
korisnik treba da ode kada klikne to dugme. Ovo se zadaje u polju When Clicked, Go to URL.
Izaberite prozor ili frejm u kome želite da se otvori ta URL adresa. Ovo se radi u polju sa desne
strane polja URL.
Ako želite, možete da potvrdite opciju Preload Images. Ako želite da određeni element na strani
bude u stanju Down kada se strana učitava, potvrdite opciju Show Down Image Initial. Ovo je
pogodno, na primer, za naslovnu stranu, kada želite da dugme Home ukazuje na to da se već
nalazite na naslovnoj strani.
U dnu okvira za dijalog postoje još dve opcije. Izaberite da li želite da se linija za navigaciju postavi
po horizontali ili vertikali i izaberite da li želite da se koriste HTML tabele.
Kliknite OK da biste ubacili liniju za navigaciju.
Uređivanje linije za navigaciju
Nakon što ste ubacili liniju za navigaciju, ona se sastoji od nekoliko slika. Svaka od tih slika ima dodeljeno
ponašanje Set Nav Bar Image. Ako izaberete da se linija za navigaciju definiše u tabeli, onda postoji i
oznaka.
83 / 299
Dreamweaver MX 2004
Slobodno možete da menjate poziciju slika na liniji za navigaviju, da podešavate osobine tabele u kojoj se
slike nalaze, da menjate URL adrese na koje vode linkovi, pa čak i da brišete neke slike, a da se pri tome
linija za navigaciju ne iskrivi.
Ake želite da odjednom menjate celu liniju za navigaciju, izaberite komandu Modify > Navigation Bar.
Otvoriće se okvir za dijalog Modify Navigation Bar, koji jako liči na okvir za dijalog koji ste koristili za kreiranje
linije za navigaciju.
Ako želite da menjate rollover efekte koji postoje na liniji za navigaciju, izaberite sliku iz grupe, i u panou
Behaviors dva puta brzo kliknite neku od opcija Set Nav Bar Image. U okviru za dijalog koji se otvara postoje
dve kartice: na kartici Basic možete da podešavate rollover efekat za sliku koja je trenutno izabrana; na
kartici Advanced možete da podešavate vrlo interesantne promene, koje se dešavaju na osnovu toga šta se
dešava sa izabranom slikom.
84 / 299
Dreamweaver MX 2004
Rad sa linkovima
Linkovi su u središtu aktivnosti na Webu. Postoji puno toga što možete uraditi da oni postanu još moćniji,
zabavniji i više interaktivni, čak i dostupniji.
Dostupniji linkovi
Linkovi nisu po prirodi nedostupni. U grafičkom interfejsu korisnik može da pogleda na šta koji link ukazuje u
da izabere onaj koji mu je potreban. Čitač ekrana čita celu stranu od početka do kraja, pa se linkovi mogu
lako izgubiti u gomili. Korisnik koji želi da dođe pravo na sadržaj strane, ne želi da čita gomilu linkova sa linije
za navigaciju. Korisnik koji želi da upotrebi link na dnu strane, ne želi da sluša celu stranu, da bi mogao da
negde ode. U standardu Section 508, § 1194.22(o), stoji:
Treba da postoji način koji omogućava da korisnik preskoči linkove za navigaciju koji se ponavljaju.
Ne postoji magični HTML atribut koji bi to mogao da uradi, kao što ni Dreamweaver ne može da tu magiju
uradi za Vas. To ipak ne znači da je to teško uraditi. Rešenje je da se iznad linkova koji se ponavljaju doda
još jedan link. Evo kako se to radi:
1. Na kraju skupa linkova, neposredno ispred početka glavnog sadržaja strane, ubacite kotvu sa
imenom. Nazovite je na primer, main
2. Na početku skupa linkova ubacite tekst ili sliku i linkujte je na tu kotvu. Tekst može, na primer, biti
Skip Navigation (Preskoči navigaciju), ili Main Content (Glavni sadržaj).
Ako želite da napravite zaista nevdivljivi link, onda treba da upotrebite providnu spacer sliku u GIF formatu.
Dodajte joj alt tekst, kao što je Skip to Main Content, ili Skip Navigation, i linkujte je na kotvu. Čitač ekrana će
pročitati alt tekst, ali grafički pretraživači će u potpunosti preskočiti sliku.
Kod za ovo nevidljivo preskakanje navigacije je:
<a href="#main">
<img src="spacer.gif" width="1" height="1" alt=Skip to main content>
</a>
[ovde dolazi link za navigaciju i ostali linkovi]
<a name=main></a>
[ovde dolazi glavni sadrzaj strane]
85 / 299
Dreamweaver MX 2004
Specijalni zahtevi za mape slika
Naravno da se mape slika prave od slika, tako da se ideje vezane za dostupnost slika, najvažnije upotreba
oznaka alt, odnose i na mape. Pored toga, u standardu Section 508 1194.22(e) se kaže:
Za svaki aktivni region mape slika na serveru treba da postoji redudantni tekstualni link.
Mape slika na strani klijenta ne zahtevaju redudantne linkove pošto svaka vruća oblast ima svoj atribut alt.
Jedna nezvanična napomena je da treba da budete svesni da su mape slika dostupnije ako su vruće oblasti
velike i ako ih je lako kliknuti. One bi trebalo da budu manje ili više uniformne veličine, ako ne i oblika i
dovoljno velike da ih kursorom možete lako naći. Vruća oblast bi uvek trebalo da odgovara delu grafike koji
jasno komunicira sa URL destinacijom. Ako se ne koriste reči, onda treba da se primene ikone koje su svima
jasne (kao što je poštansko sanduče, za link na elektronsku poštu).
Podešavanje linkova preko CSS-a
Linkovi se u pretraživaču podrazumevano ističu plavom bojom. Tekst sa linkom je podvučen plavom linijom,
slike sa linkom imaju plavi okvir. Linkovi koji su već bili posećeni dobijaju purpurnu liniju ili okvir. Premda neki
web stručnjaci dokazuju da ova podešavanja ne bi trebalo mešati (tako da posetioci ne bi bili zbunjeni, tako
da u njima ne prepoznaju linkove), većina web dizajnera ipak uradi nešto dodatno, da bi podesili izgled linka.
Slike sa linkovima
Okvir oko slike sa linkom može da se isključi specijalnim podešavanjem atributa border slike. Ova vrednost
treba da se podesi na 0. Svaki put kada nekoj slici u Dreamweaveru dodate link, ovo se automatski dešava.
Tekst sa linkom
Izgled teksta sa linkom, boja teksta, da li je podvučen, itd. se može podešavati preko CSS-a koji menja
oznaku a. U Dreamweaveru ovom poslu možete prići na dva načina: preko prozora Page Properties ili preko
panoa CSS Styles.
Upotreba panoa CSS Styles za kontrolu izgleda linka
Ovo je sporiji način da se to uradi, ali dobijate jasniju predstavu šta se dešava iza scene. Takođe, imate i
više opcija na raspolaganju. Možete, na primer, da upamtite stilove za formatiranje linkova u nekoj
spoljašnjoj datoteci (style sheetu) i da tako taj stil koristite na celom sajtu.
Ako želite da promenite osnovni izgled i ponašanje teksta sa linkom, otvorite pano CSS Styles i napravite
novi stil U okviru za dijalog New Style izaberite da promenite definiciju oznake a. Postoji mogućnost da to
uradite samo za tekući dokument ili u posebnoj datoeci sa stilovima. Kada se otvori okvir za dijalog CSS
Style Definition, izaberite opcije koje želite. Sav tekst sa linkovima će biti u skladu sa onim što ovde podesite.
Opcije koje se najčešće koriste se nalaze u kategoriji Type.
•
•
•
Ako želite da podesite boju linka, izaberite boju iz polja Color.
Ako želite da ukonite podvlačenje, podesite opciju Decoration na None.
Ako želite da linkovi budu ispisani masnim slovima, izaberite Bold (ili neko od podešavanja vezanih
za bold).
Drugi sofisticiraniji efekti vezani za tekstualne linkove se mogu dobiti preko pseudoklase a: . Ako želite da to
uradite, u Dreamweaveru otvorite pano CSS Styles i napravite novi stil. U okviru za dijalog New Style
izaberite CSS Selector i iz padajućeg menija koji se otvara izaberite jednu od slededh opcija :
•
•
•
•
a:link kontroliše kako izgledaju obični linkovi (slično sa promenom definicije oznake a).
a:hover kontroliše kako će link izgledati kada korisnik pređe preko njega.
a:visited kontroliše kako izgledaju linkovi koji su bili posećeni (oni koji su poslednji korišćeni).
a:active kontroliše kako izgledaju linkovi kada korisnik na njih klikne.
86 / 299
Dreamweaver MX 2004
Kada izaberete da napravite jedan od ovih stilova, otvara se okvir za dijalog CSS Style Definition. U njemu
možete da dalje formatirate linkove. Jedan od efekata koji je trenutno najpopularniji je da se sakriju linije koje
podvlače linkovani tekst, koje se pojavljuju kada korisnik postavi kursor iznad linka.
Ovo ćete uraditi putem definisanja klase a:hover, iz kategorije Type, koja se nalazi u okviru za dijalog
Definition. Treba podesiti opciju Decoration to Underline.
Kontrola izgleda linka putem osobina strane
Ako ne želite da trošite vreme na podešavanje različitih stilova u panou CSS Styles, izgled linka možete brzo
da podesite preko prozora Page Properties. Izaberite Modify > Page Properties i idite u kategoriju Links. Tu
87 / 299
Dreamweaver MX 2004
se nalaze opcije koje se najviše koriste za obične linkove, za podešavanja koja se odnose na izgled linka
kada se iznad njega postavi kursor, izgled linka koji je posećen, kao i aktivne linkove.
Kada na ovaj način izaberete potrebna podešavanja, Dreamweaver dodaje sve potrebne CSS stilove (a.,
a:hover, itd.) u internu datoteku stilova, za tekući dokument.
Podešavanje boja linka bez CSS-a
Ovo je način koji se pre pojave CSS-a koristio za podešavanje boje običnih, posećenih i aktivnih boja
linkova. Tada su se dodavali atributi oznaci body:
<body link="#FFFF00" alink="#FF0000" vlink="#00FF00">
Nema valjanog razloga da koristite ovaj metod, osim ako nemate nameru da se Vaša strana koristi u zaista
starim verzijama pretraživača.
Ipak, ako želite, možete da Dreamweaveru naložite da boje linkova podešava na ovaj način. U okviru za
dijalog Preferences/General (izaberite Edit > Preferences, pa idite na kategoriju General) nemojte izabrati
opciju Use CSS instead of HTML Tags. Naredni put kada izaberte Modify > Page Properties, kategorija Links
se neće pojaviti. Umesto toga, idite na osobinu Appearance i tu podesite boje linkova. Nećete biti u stanju da
menjate drugre karakteristike linkova, kao što je brisanje linija za podvlačenje, ili dobijanje efekta hover, a
sve to zato što ste izbacili CSS.
Podešavanje parametara URL-a
Linkovi se mogu koristiti i za prenos informacija sa strane na stranu. Ovo se radi putem parametara URL
adrese. Informacija koja se prosleđuje kao parametar se kodira u obliku para ime/vrednost i dodaje na kraj
URL adrese, odvojen znakom pitanja (?). Ako ima više parametara, oni se međusobno odvajaju
ampersendom (&). Ako neka od vrednosti koje se prosleđuju sadrži razmak, taj razmak se mora kodirati
preko znaka plus (+) ili se zadati kao ASCII vrednost (%20). URL sa parametrima koji se prosleđuju izgleda
ovako:
mypage.html?username=fred+jones&password=logmein
Strana na kraju ovog linka (u ovom slučaju mypage.html) može da preko JavaScripta ili nekog drugog jezika
za obradu na strani servera, upotrebi ove parametre. (Ovo je ista vrsta URL-a kao ona koja se dobija kada
pošaljete formu preko metoda GET.)
88 / 299
Dreamweaver MX 2004
Dodavanje URL parametara linku u Dreamweaveru
Ako u Dreamweaveru želite da dodate parametar linku, uvek možete da ukucate parametar u polje Link u
Property Inspectoru, naravno, ako se sećate sintakse i nemate ništa protiv kucanja. Ipak je lakše da pustite
da Vam Dreamweaver pomogne. Kliknite dugme Browse da biste potražili link. Kada se otvori okvir za
dijalog Select File, izaberite datoteku na koju link vodi, a onda kliknite dugme Parameters. Otvoriće se okvir
za dijalog Parameters. U ovom okviru za dijalog unesite svako ime i vrednost koji treba da se proslede.
Kliknite dva puta OK da biste zatvorili okvire za dijalog, a u polju Link, Property Inspectora ćete videti ceo
URL.
Obrada parametara URL adrese preko JavaScripta
Strane koje su vezane za podatke i koje koriste tehnologije na strani servera, kao što su ColdFusion ili PHP,
intenzivno koriste URL parametre. Prosleđene informacije možete da obrađujete i preko JavaScripta. Na
žalost, u Dreamweaveru ne postoji neko unapred ugrađeno ponašanje, vezano za to, ali ako nemate ništa
protiv pisanja malo koda, možete da dobijete neke vrlo korisne efekte.
Šta ako, na primer, posetioci mogu na neku stranu na Vašem sajtu da dođu sa različitih lokacija i Vi želite da
prilagodite informacije koje se prikazuju, tako da one budu u skladu sa korisnikom koji je strani pristupio?
Gde god želite da se prikaže prilagođeni sadržaj, ubacite sledeći kod:
<script language="JavaScript">
var params = location.search;
//uzima s prosledjeni parametar i smesta u promenljivu x
var x = params.substring(x.indexOf("=")+1,x.length);
// ako parametar ima neku vrednost unosi se neki sadrzaj
if (x =="parents") document.write('<h1>Hello, Parents!</h1>');
// ako parametar ima neku drugu vrednost unosi se drugi sadrzaj
else if (x =="students") document.write('<h1>Hello, Students! </h1>');
//u suprotnom se unosi neki podrazumevani sadrzaj
else document.write('<h1>Hello!</h1>');
</script>
U zavisnosti od vrednosti koja se prosleđuje, prikazuje se različit naslov. Skript se može promeniti tako da
prikuplja bilo koji URL parametar i prikazuje opcionalni sadržaj na strani. Potrebno je samo da iskopirate
sledeći kod i da ga postavite u dokument u Dreamweaveru, tamo gde želite da se taj sadržaj prikaže:
if (x=="value1") document.write('content here');
else if (x=="value2") document.write('content here');
else document.write('default content here');
</script>
Kod možete da prilagodite svojim potrebama:
• Umesto određenih delova koda, unesite svoje informacije (vrednosti parametara, sadržaj).
• Uvek treba da proveravate najmanje jednu vrednost, tako da uvek treba da postoji red koji počinje sa
if.
• Za bilo koje druge vrednosti za koje želite da imate poseban sadržaj, ubacite liniju else if. Ponovite
taj red onoliko puta koliko želite.
• Šta se dešava ako nema prosleđenih parametara? Ako želite da se prikaže podrazumevani sadržaj,
možete da koristite klauzulu else. Ako ne želite da se prikazuje sadržaj, onda nemojte ubacivati ovu
klauzulu.
Sebi možete da olaškate ako svaki od ovih redova ubacite u parčiće koda (snippet), tako da ne morate da ih
svaki put kucate:
1. Otvorite pano Snippets (Window -> Snippets).
2. Desnim tasterom miša kliknite faciklu JavaScript Snippets i iz pomoćnog menija izaberite
opciju New Snippet. Ime neka bude na primer Parameter-if. Kao tip unesite Block. U delu za
unos teksta unseite iskaz if, na primer:
if (x=="value1") document.write('content here');
Kliknite OK da biste zatvorili okvir za dijalog.
3. Ponovite ovaj postupak i za kreiranje dela Parameter if-else i Parameter else.
4. Na kraju treba da napravite još jedno parče. Nazvaćemo ga Parameter-Wrapper (omotač).
89 / 299
Dreamweaver MX 2004
Kao tip unesite Wrap. U delu Insert Before, unesite:
A u delu Insert After unesite:
</script>
Evo kako se koriste novi delovi koda. Idite u prikaz Code i:
Kursor postavite tamo gde želite da bude kod.
Sa panoa Snippets izaberite parče Parameter-If i kliknite dugme Insert. Kada se u dokument postavi
opšti kod, promenite valuel i content i unesite ono što želite.
Za svaki novi red else-if i else koji želite da dodate, napravite prazan red u kodu i ubacite odgovarajuće
parče koda. Nakon toga promenite delove value i content.
Na kraju treba da izaberete sve linije koda koje ste napravili i da ubacite parče Parameter-Wrapper.
Ovim će iskazi if biti ubačeni u skript koji obrađuje parametre.
Poboljšanje linkova na elektronsku poštu preko parametara
Parametri URL-a se mogu koristiti i kod e-mail adresa za definisanje dodatnih stavki, kao što su subject i cc.
To znači da kada korisnik klikne link, i kada se otvori program za elektronsku poštu, u prozoru za unos nove
poruke ove stavke se već nalaze na svojim mestima.
Na žalost, za dodavanje parametara ne možete da koristite prozor Parameters iz Drearmveavera, pošto se
on poziva iz okvira za dijalog Select File, kome se pristupa kada tražite datoteku. E-mail adresa se ne može
tražiti na ovaj način, jer je u pitanju apsolutni URL.
Sa druge strane, parametre možete dodati tako što ćete ih ručno uneti u polje Link, u Property Inspectoru
(koje je vrlo malo), a možete ih naravno uneti i direktno u prozoru Code. Prilikom unosa treba da imate na
umu pravilnu interpunkciju, odnosno da na početku stavite ?, da parametre odvajate sa &, a da je kod za
razmake %20.
Linkovi na JavaScript kod
Web dizajneri koriste kotvu ne samo za linkove na drugu stranu. Prelaz preko linka, ili klik na njega, može da
izazove neki događaj u JavaScriptu, što znači da oznaka može da ima dodeljeno neko ponašanje.
Prazni linkovi i ponašanje
Ako želite da neki deo teksta pokrene neku akciju iz Dreamweavera, onda prvo morate da napravite tekst sa
linkom. Slike mogu.da izazovu neku akciju i da nisu slike sa linkom, ali onda kursor, u trenutku prelaza preko
slike mora da promeni oblik u šaku, jer u suprotnom korisnik ne bi znao da tu sliku treba da klikne. Vi želite
da korisnik klikne link, ali ne želite da ga taj link negde odvede, već samo da pokrene neku akciju. U tom
slučaju treba da napravite prazan (null) link. U pitanju je oznaka a, sa atributom href koji nema vrednost.
Da biste kreirali ovakav link, morate da izaberete sliku ili tekst i da u polju Link, Property Inspectora unesete
javascript:. Evo kako izgleda taj kod:
<a href="javascript:;">Click here!</a>
Ovim se pretraživaču govori da kada se izabere link, ne treba ništa raditi.
Prazan link je moguće kreirati i ako se u polju Link unese oznaka funte (#) (lakše je otkucati). Ovaj link
ukazuje na tekuću stranu, tako da se u pretraživaču u suštini ništa ne dešava. Ipak, ako je link negde prema
kraju dugačke strane, onda klik na taj link može navesti pretraživač da prikaže početak strane. Iz toga
razloga se ovakav link ne koristi. Sigurnije je da unesete javascript:.
Unos JavaScripta u HREF
Ako želite da pravite svoj JavaScript kod i treba da unesete samo malo koda, možete ga uneti direktno u
atribut href. Ispred toga treba da stoji javascript:
<a href="javascript:alert('You clicked me!');">Click here!</a>
Ipak, ove informacije možete da unesete i u polje Link Property Inspectora. Jedini problem je da je ovo polje
prilično malo, tako da je teško da se prati šta se unosi.
90 / 299
Dreamweaver MX 2004
91 / 299
Dreamweaver MX 2004
7. Podešavanje glavnog sadržaja
Osnovno o sadržaju zaglavlja
Sadržaj zaglavlja možda nije glamurozan, ali ga nije ni teško shvatiti, a izuzetno je koristan. U ovom odeljku
ćete videti kako se u HTML-u kodira sadržaj zaglavlja, i kako se interpretira u pretraživačima, mašinama za
pretraživanje, itd. Takođe smo objasnili i interfejs koji se u Dreamweaveru koristi za rad sa sadržajem
zaglavlja.
Kako se sadržaj zaglavlja ponaša u pretraživaču
Standardna strana u HTML-u sadrži oznake head i body. Oznaka body sadrži ceo sadržaj koji će se prikazati
u prozoru pretraživača. U zaglavlju se nalaze različite informacije koje se neće prikazati (u najmanju ruku ne
direktno), premda im se može pristupiti da bi se odredilo kako se stranom rukuje. Jednom delu zaglavlja
pristupa pretraživač, drugom neki drugi programi, kao što je serverski softver, mašine za pretraživanje ili
softver za proveru. Nekim delovima se nikad ne pristupa, izuzev od strane ljudi koji žele da menjaju kod.
Konzorcijum W3C definiše nekoliko elemenata koje svako zaglavlje koje je dobro napravljeno treba da
sadrži. Na žalost, pretraživači još uvek nisu u potpunosti implementirali sve te elemente, tako da ih ne
možete da u punoj meri iskoristiti.
Kako se u Dreamweaver u radi sa zaglavljem
U Dreamweaver-u postoje dva osnovna interfejsa za rad sa sadržajem zaglavlja. To je meni objekata Head,
koji se nalazi u kategoriji HTML na paleti Insert, koji se koristi za dodavanje sadržaja u zaglavlje i opcija
Head Content, zajedno sa Property Inspectorima koji se koriste za ispitivanje i promenu sadržaja zaglavlja.
Pregled i uređivanje sadržaja zaglavlja
Sadržaj zaglavlja se u prikazu Design Dreamweavera prikazuje kao linija na vrhu prozora Document, pri
čemu se za svaki element prikazuje ikona. Ako želite da uključite ili isključite prikazivanje sadržaja zaglavlja,
možete da koristite opciju View Options > Head Content. (Meniju View Options možete da pristupite sa
palete Document ili iz menija View.) Obratite pažnju na to da se opcija Head Content neće prikazati osim ako
se ne nalazite u prikazu Design ili Code and Design.
Ako želite da ispitate ili primenite neki element zaglavlja, kliknite njegovu ikonu na paleti i preko Property
Inspectora pogledajte ili promenite atribute tog elementa. Elementima zaglavlja možete da promenite
redosled ako po liniji zaglavlja prevučete njihove ikone. Redosled elemenata u zaglavlju obično nije bitan,
pošto svaki element ima različitu funkciju, i poziva se kada je potrebno, bez obzira na poziciju.
Dodavanje sadržaja zaglavlja
Neke elemente zaglavlja (title, script i style) Dreamweaver automatski ubacuje kada pravite novu stranu ili
uređujete postojeću. Drugi elementi zaglavlja koji se često koriste u kategoriji HTML imaju svoje
odgovarajuće objekte. Ovi objekti se nalaze na paleti Insert. Ako želite da ubacite neki element kojeg nema
na paleti Insert, onda morate da ga unesete u prikazu Code, bilo tako što ćete sami da otkucate što je
potrebno, ili ćete ga uneti preko Tag Choosera. Opcije vezane za zaglavlje možete da proširite, ako potražite
neko proširenje (Macromedia Exchange for Dreamweaver), koje radi to što Vam je potrebno. Elemente
zaglavlja možete da ubacite u prikazima Code i Design.
92 / 299
Dreamweaver MX 2004
Postoje, međutim, razlike između ova dva prikaza. Ako radite u prikazu Design, onda mesto na kome se
nalazi kursor nije toliko bitno u trenutku rada sa zaglavljem. Iako prilikom ubacivanja elementa zaglavlja
selektujete neki element koji pripada telu dokumenta, Dreamweaver zna da to treba da smesti u zaglavlje.
Ako ste pre ubacivanja izabrali neku ikonu elementa zaglavlja, onda Dreamweaver novi element postavlja
odmah iza izabranog elementa. Ako prilikom ubacivanja niste izabrali nijedan element zaglavlja,
Dreamweaver novi element ubacuje na kraj zaglavlja. Ako prilikom ubacivanja objekta Head radite u prikazu
Code, kod za taj objekat se ubacuje tamo gde se nalazi kursor. Ovo važi čak i ako to dovodi do ubacivanja
elementa potpuno izvan elementa head, ili ubacivanje u neki drugi element HTML-a. (Očigledno je sigurnije
da koristite prikaz Design, osim ako niste u potpunosti sigurni u HTML sintaksu koju koristite.)
Rad sa oznakama meta
Meta znači "o". Namena oznake meta je da čuva informacije c tekućem dokumentu tako da pretraživači,
serveri, mašine za pretraživanje ili čak i ljudi mogu te informacije pronaći i obraditi. Za svaku novu vrstu
informacija koju čuvate se koristi različite oznaka meta. HTML dokumenti mogu da imaju onoliko oznaka
meta koliko je potrebno, pri čemu se sve one nalaze u zaglavlju.
Kako oznake meta čuvaju informacije
Generalno se informacije u okviru oznake meta čuvaju kao parovi ime-vrednost. Pri tome se koriste atributi
name i content.
<meta name="generator" content="Dreamweaver">
Tokom vremena su pojedini parovi ime-vrednost, kao što su keywords, description ili refresh, postali
standardni, pa ih pretraživači i mašine za pretraživanje tako i koriste. Web autori imaju slobodu da prave i
svoje parove i da tako čuvaju druge informacije vezane za dokument. Mnogi popularni programi za pisanje
HTML koda, koriste oznaku meta generator prilikom generisanja koda, čime se u dokument ubacuje malo
dodatne reklame. Neki web autori podsećaju one koji pozajmljuju kod, od koga su ga pozajmili preko oznake
author:
<meta name="author" content="Julius Marx">
Različite meta oznake su bile toliko korisne da u Dreamweaver u postoje posebni objekti koji se na njih
odnose. U narednih nekoliko pasusa smo ispitali neke od njih.
Oznaka meta character-encoding
Ova vrsta oznake meta se ne nalazi na paleti Insert. Dreamweaver ovu oznaku automatski ubacuje u svaki
HTML dokument koji pravi. Evo kako izgleda kod:
<meta http-equiv="Content-Type" content="text/html; > charset > iso-8859-1 ">
(U narednom odeljku možete naći više informacija o atributu http-equiv, koja se ovde koristi na mestu
atributa name.)
Standardna oznaka meta govori pretraživaču koji skup karaktera treba koristiti za prikazivanje tekstualnih
delova strane. ISO-8859-1 ukazuje na skup Latin-1, koji se koristi u većini jezika zapadne Evrope. Primeri za
druge skupove karaktera mogu biti IS0-8859-2 (ćirilica) ili SHIFT_JIS (japanski). Osim ako niste sigurni u to
što radite, nemojte dirati ovu oznaku.
93 / 299
Dreamweaver MX 2004
Oznaka meta i generički objekat meta
Svaka oznaka meta se obavezno sastoji od imena i nekog sadržaja, tako da generički objekat Meta iz
Dreamweaver a predstavlja dobar alat za umetanje korisničkih meta informacija.
Ako želite da ubacite oznaku meta, treba da uradite sledeće:
1. Na paleti Insert pronađite kategoriju HTML i od objekata Head izaberite objekat Meta.
2. U okviru za dijalog koji se otvara preko pomoćnog menija izaberite atribut name ili http-equiv. (Atribut
http-equiv povezuje atribut i odgovarajuće ime sa zaglavljem u HTTP odgovoru, radi dalje obrade.
Osim ako ste potpuno sigurni da treba da koristite atribut http-equiv, najbolje je da koristite atribut
name.)
3. U polju Value unesite ime (ili http-equiv) koji želite.
4. U delu Contents unesite vrednost koju želite da dobije atribut content.
Zašto se ovaj generički objekat ne bi koristio za unos svog meta sadržaja? Oznake meta koje koriste
standardne ključne reči, koje pretraživač ili drugi agenti mogu da obrađuju takođe traže standardnu sintaksu.
O zahtevima vezanim za specifičnu sintaksu vode računa specijalni Meta objekti iz Dreamweavera. U
Dreamweaveru ne postoje sve oznake meta koje biste poželeli da koristite.
Ključne reči meta i njihov opis
Nesumnjivo je da su oznake meta koje se najviše koriste one koje mašinama za pretraživanje pomažu da
pronađu u vrate informacije o dokumentima. Najviše se koriste oznake keywords i description. Evo kako se
one koriste:
<meta name="keywords" content="Marx Brothers, humor,.vaudeville, movies, Groucho, Harpo, Chico,
Zeppo, Gummo">.<meta name="description" content="An unofficial look at.America's kings of slapstick and
wisecracking. With links.and freebies.">
Oznaka meta keywords sadrži listu reči odvojenih zarezima, koje posetioci na webu mogu da otkucaju u
svom polju search. Ta reč bi trebalo da ih odvede do tekućeg dokumenta. Oznaka meta description sadrži
nekoliko rečenica koje se mogu koristiti na strani sa rezultatima pretraživanja, da bi se predstavio tekući
dokument. Za svaku od ovih oznaka postoji u Dreamweaver u odgovarajući objekat. Ako želite da neki od
ovih objekata ubacite u svoje zaglavlje, izaberite objekat sa palete Insert ili iz menija i u okviru za dijalog
unesite potrebne informacije.
94 / 299
Dreamweaver MX 2004
Maksimalna mogućnost pretraživanja
Jedno je koristiti ključne reči i opise, a drugo koristiti ih na pravi način. Što više budete znali o mašinama za
pretraživanje i načinu njihovog rada, to će rezultati pretraživanja Vaših strana biti bolji. Mašine za
pretraživanje rade tako što šalju automatizovane programe, koje nazivamo robotima (ili web puzačima, ili
špijunima) da indeksiraju web strane. Indeksiranje se sastoji od vraćanja dokumenata i rekurzivnog vraćanja
svih dokumenata koji su preko linka povezani sa tim dokumentom. Od koje strane treba početi indeksiranje
roboti određuju na različite načine. Tu spada i registracija strane kod mašine za pretraživanje, koju radi autor
web strane ili webmaster. Kada posetilac pristupi mašini za pretraživanje i unese jednu ili više ključnih reči,
mašina vraća rezultat na bazi svoje analize dokumenata koje je vratila. Rezultati se baziraju na pronađenim
ključnim rečima, uparenim rečima u okviru opisa, naslova strane, vidljivog sadržaja dokumenta, linkova, kao i
alt teksta. Evo kako bi izgledao kod iz zaglavlja koji je napisan tako da mogućnost pretraživanja i
pronalaženja bude maksimalna:
<head>
<title>The Web Widgets Construction Materials Home Page</title>
<meta name="keywords" content="web, widgets, construction materials, building tools, web tools,
snarflators, crambangers, diffusion devices, child, children, diffuse,
diffusion,.....">
<meta name="description" content="The Web Widgets Construction > Materials Company, home to
a vast selection of snarflators, crambangers and other web tools. Visit us for daily specials and our
unique how-to section.">

Ovaj kod sakuplja URL parametre u promenljivu myParameters. Nakon toga se traži ime datoteke koje se
nalazi ispred znaka jednakosti i lokacija frejma po imenu mainFrame se podešava na tu vrednost. U kodu
ćete verovatno zameniti mainFrame imenom svog frejma za sadržaj. Nakon što ste proverili svoj kod i
osigurali da su u njemu prava imena frejmova, kliknite OK da biste zatvorili okvir za dijalog. U delu zaglavlja
u prozoru Document će se prikazati ikona skripta.
130 / 299
Dreamweaver MX 2004
6. Ova funkcija se mora izvršiti kada se učitava skup frejmova, što znači da oznaka frameset mora da
pozove tu funkciju u događaju onLoad. Kada se otvori okvir za dijalog Edit Tag, idite u kategoriju
Events > onLoad. Selektujte događaj onLoad i u delu content unesite sledeće :
loadPage()
7. Nakon što završite kliknite OK da biste zatvorili okvir za dijalog Edit Tag.
Sve što treba da uradite posle ubacivanja koda je da mu pristupite sa strane koja je linkovana na skup
frejmova. Recimo da se glavna strana sa skupom frejmova zove index.html i da želite da tu stranu učitate, a
da se u frejmu content prikaže strana catalog.html. URL koji se prikazuje u polju sa adresom pretraživača je:
http://mvdomain.com/index.html?page=catalog.html
Ovo možete isprobati ako pogledate svoju stranu sa frejmovima u pretraživaču i ručno unesete znak pitanja i
URL parametar. Ako želite da na stranu sa frejmovima dođete sa nekog drugog mesta na svom sajtu, treba
da uradite sledeće:
1. U Dreamweaveru otvorite stranu sa koje link treba da vodi na stranu sa frejmovima. Selektujte tekst
ili sliku koji treba da predstavljaju link na tu stranu.
2. U Property Inspectoru kliknite dugme Browse, koje se nalazi pored polja Link. Pronađite svoj
dokument sa frejmovima.
3. Pre nego što zatvorite okvir za dijalog Select File, kliknite dugme Parameters. Otvoriće se drugi okvir
za dijalog. Unesite stranu kao ime parametra, a kao vrednost unesite ime strane sa sadržajem.
4. Kliknite OK da biste zatvorili okvir za dijalog i izaberite close, da biste zatvorili glavni okvir za dijalog.
U polju Link, u Property Inspectoru bi sada trebalo da stoji URL adresa, sa parametrima, koji su
odvojeni znakom pitanja.
Ako ne želite, URL ne morate tražiti preko dugmeta browse. Ako volite da kucate i ako dobro poznajete
pravila vezana za parametre URL adrese, možete da preko tastature unesete URL adresu i njene parametre.
(Pravila su: Oko znaka pitanja ili znaka jednakosti nema razmaka i u vrednostima nema navodnika.) Obratite
pažnju na to da prethodni primer pretpostavlja da se sve datoteke nalaze u istoj fascikli, iako to nije uvek
slučaj. URL parametri moraju sadržati apsolutni URL ili URL koji je relativan u odnosu na dokument sa
skupom frejmova. Dreamweaver Vam ne može pomoći u ovome. Ako je strana sa katalogom u nekoj
podfascikli, po imenu departments, onda konačni link treba da izgleda ovako:
index.html?page=departments/catalog.html
Napravite posebno parče koda
Ako često koristite frejmove, onda funkciju loadPage() možete da upamtite kao poseban deo koda, tako da je
kasnije možete ubacivati po potrebi. Treba da imate na umu da poziv funkcije treba ubaciti svaki put kada se
funkcija poziva, a da ćete ubacivanjem posebnog dela koda samo ubaciti funkciju. Svaki put morate ručno
dodati poziv te funkcije. Ovo možete da uradite preko panoa Behaviors:
1. U Tag Selectoru izaberite oznaku body.
2. U panou Behaviors kliknite kolonu za dve kolone, tako da se prikažu svi događaji.
3. Pronađite događaj onLoad. U koloni pored ovog događaja unesite loadPage().
131 / 299
Dreamweaver MX 2004
Dodatak Exchange
Ne postoji neki pomoćni program u okviru Macromedia Exchangea, koji bi se koristio za navigaciju kroz
frejmove. Sa druge strane, stalno se prave nova proširenja, tako da treba da povremeno proverite da li se
neko pojavilo.
Mogućnost označavanja strana
Nakon što ste u svoj dokument sa frejmovima ubacili skript loadPage(), lako je proveriti da li strane možete
da markirate pojedinačno. Svaki put kada korisnik označi stranu, ta oznaka se prikaže u polju pretraživača
za unos adrese. Vi samo treba da budete sigurni da se u okviru interne navigacije na sajtu koriste URL
parametri, tako da se u polju sa adresom uvek nalazi i strana sa rasporedom, kao i parametar koji se odnosi
na konkretnu stranu.
Zadržavanje strana u frejmovima
Jedan od problema sa kojim se suočavaju autori web strana sa frejmovima je: Šta uraditi ako korisnik
slučajno dođe na neku od strana koje su u frejmovima, ali je učita bez okvira i izvan skupa frejmova? Ovo se
može lako desiti ako, na primer, mašina za pretraživanje pronađe neku od Vaših strana i korisnika pošalje
tamo. Ako na strani nema indikacije web sajta kome ona pripada i (što je još važnije) ako nema načina da se
korisnik vrati nazad na osnovni sajt, korisnik nikad neće ni čuti za Vas. Vaša strana će postati siroče u
sajber-svetu. Ovo se može rešiti na različite načine, počev od automatizovanih rešenja sa skriptovima, pa do
jednostavnih dodataka vezanih za navigaciju. Ljudi koji se bave frejmovima za ovo koriste termine frame
jamming i frame stuffing.
Podnožje sa navigacijom
Problem siročeta možete rešiti brzo i jednostavno, ako uvek na stranu ubacujete navigaciju i indetifikaciju.
Na primer, malo podnožje (footer) na dnu strane, osigurava da korisnik te strane zna gde ta strana pripada i
kako da tamo ode. Nisu potrebni skriptovi ili neki drugi dodaci.
Brzo dodavanje navigacije u podnožje preko parčića koda
Navigaciju možete da napravite kako god želite, ali ako želite da to uradite brzo, možete proveriti delove koji
dolaze uz Dreamweaver. U panou Snippets (Window > Snippets) proverite šta se nalazi u fascikli
Navigation/Horizontal.
Ubacite svoje podnožje u biblioteku
Skupove frejmova ćete verovatno koristiti zbog njihove efikasnosti. Nakon što ste napravili podnožje sa
navigacijom, ubacite ga u biblioteku u Dreamweaveru, tako da ga kasnije možete lako prevući i ubaciti na
koju god stranu želite.
Ubacivanje skripta: Uslovno prikazivanje informacija u podnožju
Sa vrlo malo dodatnog truda, možete da dalje podesite svoje strane sa frejmovima, tako što ćete napraviti da
prikazivanje navigacije i identifikacije bude uslovno, tako da se prikazuju samo na stranama na kojima ne
postoji osnovni skup frejmova. Kod je pomalo složen, ali je vredan truda. Kao i obično, Dreamweaver nudi
svoju pomoć. Evo koji su osnovni koraci:
1. Otvorite stranu koja uobičajeno treba da se prikače kao deo skupa frejmova i kreirajte sadržaj za
navigaciju i identifikaciju, koji se prikazuje ako strana nije u skupu frejmova.
132 / 299
Dreamweaver MX 2004
2. Sada dolazi ono glavno. Selektujte sadržaj koji ste napravili i pređite u prikaz Code. Kod ne sme da
ima nove redove, a svi jednostruki navodnici ili apostrofe moraju ispred sebe imati escape karakter
(\). Izabrani deo koda treba da promenite tako da bude u skladu sa zahtevima. Ovo možete da
uradite ručno ili preko komande Edit > Find and Replace. Sledeći kod neće raditi:
<table>
<tr>
<td>Joe's sajt</td>
</tr>
</table>
Ali, ovaj kod hoće:
<table><tr><td>Joe\ 's sajt</td></tr></table>
3. Sada izaberite prečišćeni kod i izaberite Edit > Cut.
4. Ostavite kursor tamo gde jeste i sa palete Insert izaberite objekat Script.
5. Kada se otvori okvir za dijalog Script Insertion, proverite da li je iz padajućeg menija za jezike
izabran jezik JavaScript. U polje Content unesite sledeći sadržaj (bez grešaka).
<!..
if (self == top) document.write(' ');
//-->
6. Postavite kursor između dva jednostruka navodnika izaberite Edit > Paste. Ovim bi prečišćeni
kod trebalo da se postavi u prozor.
7. Sada kursor postavite u polje No Script i izaberite Edit > Paste
8. Kliknite OK da biste zatvorili okvir za dijalog. U prikazu Code bi ovaj deo strane trebalo da izgleda
ovako:
<!-if (self == top) document.write('<table><tr><td>Joe\'s sajt</td></tr></table>' );
//-->
</script>
<noscript>
<table><tr><td>Joe\'s sajt</td></tr></table>
</noscript>
Obratite pažnju na boje u kodu. Ako je sve u redu, sav kod koji ste postavili u JavaScript (ne kod u okviru
oznake noscript) treba da bude prikazan u jednoj boji i jednim stilom. Ako to nije slučaj, onda ste izostavili
novi red ili jednostruki navodnik u nekom delu koda.
9. Kada se vratite u prikaz Design, uslovni sadržaj će se prikazati kao zlatna ikona skripta. Ako želite
da ubuduće menjate ovaj skript, treba da selektujete ikonu i da sa Property Inspectora kliknete
133 / 299
Dreamweaver MX 2004
dugme Edit. Sadržaj oznake noscript će se prikazati kao i obično u prikazu Design.
Ako želite da napravite snipet (parče koda) koji sadrži sav kod koji ste ubacili, treba da uradite sledeće:
1. U prikazu Design selektujte ikonu skripta koja predstavlja uslovni sadržaj i iskopirajte je (Edit >
Copy).
2. Otvorite pano Snippets (Window > Snippets) i desnim tasterom miša kliknite fasciklu snippet. Iz
pomoćnog menija izaberite New Snippet.
3. Kada se otvori okvir za dijalog Snippet, kod koji ste upravo iskopirali treba da bude u polju Content.
Dajte snipetu ime i opis. Tip podesite na block. Nakon što završite, kliknite OK da biste zatvorili okvir
za dijalog.
4. Naredni put kada želite da ubacite ovaj sadržaj na neku stranu, samo prevucite ovaj snipet sa panoa
Snippets i postavite ga na određeno mesto u dokumentu.
Možete da napravite i snipet koji sadrži samo ljusku JavaScripta, tako da u budućnosti možete da dodajete
različit uslovni sadržaj. Evo kako ćete to uraditi:
1. Otvorite pano Snippets (Window > Snippets) i desnim tasterom miša kliknite fasciklu JavaScript. Iz
pomoćnog menija izaberite New Snippet.
2. Kada se otvori okvir za dijalog dajte snipetu ime i opis. Tip podesite na Wrap.
134 / 299
Dreamweaver MX 2004
3. U polju Insert Before unesite sledeće:
<! - if (self == top) document.write('
U tekstu koji sledi iza navedenog treba da pazite da nema praznih redova
4. U polju Insert After unesite sledeće:
');
//-->
</script>
5. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog.
Naredni put kada budete želeli da ubacite uslovnu navigaciju u skup frejmova treba da uradite sledeće:
1. U prikazu Design napravite navigaciju ili neki drugi element koji treba da se prikazuje samo na toj
strani, a ne i u skupu frejmova.
2. Pređite u prikaz Code. Obrišite sve nove redove i ispred svih apostrofa i jednostrukih navodnika
ubacite kosu crtu (\).
3. Selektujte sav prečišćeni kod.
4. Otvorite pano Snippets, selektujte snipet sa uslovnim kodom i kliknite dugme Insert sa dna panoa.
Ovim se oko Vašeg sadržaja ubacuje JavaScript kod.
Pogledajte Exchange
Ako Vam je sa uslovnom navigacijom potrebno malo pomoći, možete da isprobate objekat Write If Frameset,
koji postoji u okviru programa Macromedia Exchange. Ovaj objekat radi slično kao snipet koji smo opisali u
prethodnom odeljku. Kod njega postoji ograničenje da kod koji ubacujete ne sme imati prazne redove i
dvostruke navodnike. On takođe traži da oznaka frameset ima atribut id.
Skriptovi za automatsko učitavanje frejmova
Postoji mogućnost da ceo proces automatizujete, tako da kad god se strana učitava bez osnovnog skupa
frejmova, automatski dolazi do njenog ponovnog učitavanja frejmovima. Ovo se radi preko JavaScripta koji
135 / 299
Dreamweaver MX 2004
se automatski izvršava. Na žalost, Dreamweaver ne može da napiše ovaj skript umesto Vas. Ipak, postoji
nekoliko opcija za ubacivanje ovakvih skriptova, uključujući i kreiranje skripta loadPage(), koji smo objasnili u
prethodnom odeljku, kao i upotrebu skriptova koji postoje u okviru programa Exchange.
Uradite to preko funkcije loadPage()
Skriptove za automatsko učitavanje strane sa frejmovima možete napraviti preko funkcije loadPage(). Treba
da ubacite i poziv ove funkcije. Ako nemate napravljen ovaj kod, vratite se u taj odeljak i napravite ga. Nakon
što ste podesili dokument sa skupom frejmova, svaka strana sa sadržajem se automatski ubacuje u skup
frejmova, ako ima podešen skript koji se nalazi u sekciji zaglavlja. Evo kako ćete to da uradite:
1. Otvorite stranu sa sadržajem koju želite da pripremite.
2. Izaberite View > Head Content tako da se prikaže deo sa zaglavljem, a onda kliknite tu oblast da
biste je aktivirali.
3. Sa palete Insert izaberite objekat Script. Kada se otvori okvir za dijalog Script, proverite da li je u
padajućem meniju language izabrana opcija JavaScript. U polje Content unesite sledeći kod:
<!-if (top == self) location.replace("frameset.html?page=
.content.html");
//-->
Ubacite ime svog dokumetna sa skupom frejmova i svoju stranu sa sadržajem. To treba da ubacite tamo gde
je označeno masnim slovima.
4. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Ovaj skript će se u delu sa
zaglavljem prikazati u obliku ikone.
Pogledajte program Exchange: Proširenje frame-jamming
Macromedia Exchange ima nekoliko proširenja koja ubacuju kod koji je sličan onom koji smo ovde dali. To
su Find Parent Frameset (Subhash Robin), Frame Jammer (Hal Pawluk) i Frame Stuffer (Hal Pawluk).
Izlazak iz frejmova
Navigacija kroz skup frejmova je samo jedan deo priče o kretanju kroz frejmove. Ponekad će Vam biti
potrebno da svoju stranu dobijete bez frejmova. Ovo se može urditi automatski, preko JavaScripta koji
razbija frejmove ili ručno, preko linkova sa atributom target.
Razbijanje frejmova
Razbijanje frejmova je potrebno kada koristite tuđe skupove frejmova. Da li ste se ikad našli u situaciji da se
neka od Vaših strana neđe u tudem skupu frejmova? Ovo se dešava kada autor strane sa frejmovima,
slučajno ili namerno, da link na Vašu stranu, bez odgovarajućeg atributa target. Pošto postavljanje tuđe
strane u Vaš skup frejmova ukazuje da je taj drugi sajt dopunski u odnosu na Vaš, to su se oko ove
aljkavosti vodile razne parnice. Ako na svoju stranu ubacite malo JavaScripta, možete da garantujete da se
ona nikad neće pojaviti u okviru frejma. Na žalost, Dreamweaver ne može automatski da napiše takav skript.
Ipak, postoji nekoliko drugih opcija da ubacite kod koji razbija frejmove.
Napravite svoj kod za razbijanje frejma
Kod koji razbija frejm nije komplikovan, tako da ako nemate ništa protiv da malo kucate, možete lako
napraviti skript i kasnije ga ponovo koristiti. Evo kako ćete to da uradite:
1. Otvorite HTML dokument u koji želite da ubacite kod za razbijanje frejma.
2. Izaberite View > Head Content tako da se siva traka sa sadržajem zaglavlja prikaže na vrhu prozora
Document. Kliknite unutar sadržaja zaglavlja, da biste ga aktivirali.
3. Sa palete HTML Insert, iz grupe objekata Script izaberite objekat Script.
4. Kada se otvori okvir za dijalog Script Insertion, proverite da li je iz padajuće liste language izabrana
stavka JavaScript i u polje Conent unesite sledeće:
<!-if (self ! = top) top.location.replace(self.location);
//-->
136 / 299
Dreamweaver MX 2004
5. Nakon što završite, kliknite OK da biste zatvorili okvir za dija log. U delu zaglavlja će se ovaj skript
prikazati kao ikona Strana je sada razbijena.
6. Kada ubuduće budete želeli da menjate ovaj skript, izaberite njegovu ikonu u delu sa zaglavljem i u
Property Inspectoru kliknite dugme Edit.
Pogledajte Exchange: Proširenja vezana za razbijanje frejmova
Ako ipak želite da koristite kod koji su drugi napravili, možete da pogledate listu sa nekoliko proširenja koja
su napravila nezavisna proširenja, a koja postoje u okviru Dreamweaver Exchange. Tu spadaju objekti
Frame i Break Out of Frames, kao i ponašanje Bust Frames.
Strane koje se lepo štampaju
Druga stvar koja se odnosi na upotrebljivost, a koja muči sajtove sa frejmovima, je teško štampanje
pojedinačnih frejmova. Ništa nije tako frustrirajuće kao kada pokušate da odštampate svoju stranu, a dobijete
lepo odštampan frejm sa navigacijom, pri čemu ste bacili puno boje. Ovaj problem je najlakše rešiti ako
napravite link na stranu koja se dobro štampa i to stavite na svaku stranu sa sadržajem. Kakve su to strane?
Tu je sadržaj samog frejma, ali nema banera ili navigacije sa strane.
Da biste napravili link na stranu koja se dobro štampa, treba da uradite sledeće.
1. Napravite nenametljiv link sa tekstom ili grafikom. Tekst može biti, na primer, "Kliknite ovde da biste
dobili stranu koja se lako štampa".
2. Preko Property Inspectora dodelite link na istu tu stranu, okrenut ka praznom prozoru.
Kreativni grafički efekti koji se dobijaju preko frejmova
Deo zabave u radu sa frejmovima je mogućnost da dobijete neobične grafičke efekte ili efekte vezane za
raspored. U narednim odeljcima ćemo pokazati nešto od ovog, zajedno sa specijalnim instrukcijama kako da
to uradite pomoću Dreamweavera.
Kako da sami napravite skup frejmova tipa Letterbox
U Dreamweaveru ne postoji objekat letterbox, tako da ga morate sami napraviti. Koristićete komande iz
menija Modify > Frameset > Split. Evo kako ćete to uraditi:
1. Napravite novi dokument. U okviru za dijalog New Document, izaberite Frameset/Fixed Top, Fixed
Bottom.
2. Postavite kursor u srednji frejm i izaberite Modify > Frameset > Split Frame Left. Ovim ćete napraviti
vertikalnu podelu frejma koji je ubačen u horizontalnu podelu.
3. Pritisnite Alt/Opt i prevucite levo ili desno da biste ovu vertikalu podelili i napravili još jednu vertikalnu
podelu. (U ovom trenutku proverite pano Frames, da biste bili sigurni da ste podelili skup frejmova, a
ne ubacili jedan u drugi. Ako se slučajno desilo ovo drugo, izaberite Edit > Undo i ponovite
postupak.)
4. Postavite horizontalne i vertikalne delove tamo gde želite da budu, ali upamtite da će raspored u
potpunosti biti u okviru centralnog frejma.
5. Otvorite pano Frames i selektujte spoljni od dva skupa frejmova. U Property Inspectoru podesite
opciju borders na None, a širinu granice na 0. Centralni fiksni frejm ćete napraviti preko Property
Inspectora, odnosno atributa proxy. Na taj način se gornji i donji frejm podešavaju sa visinom Height.
Srednji frejm ćete podesiti na određeni broj piksela.Ako želite da napravite fleksibilan centralni frejm,
137 / 299
Dreamweaver MX 2004
onda preko proksija treba da podesite srednji frejm na visinu Relative, a da donji i gornji frejm
podesite na određeni broj piksela.
6. Ponovite postupak i za unutrašnji skup frejmova. Podesite opciju borders na None, a debljinu okvira
na 0. Ako želite da napravite fiksni centralni frejm, onda preko proksija podesite levi i desni frejm na
relative, a centralni frejm na određeni broj piksela.
7. Spoljašnji frejmovi neće imati nikakav sadržaj, tako da nisu potrebni ni klizači. Izaberite svaki od
spoljašnjih frejmova (top, bottom, left, right) i podesite opciju Scroll na None. Sami birate da li ćete
klizače ubaciti u centralni frejm.
8. Na kraju, pošto će spoljašnji frejmovi biti isti, za svaki od njih možete da koristite istu HTML datoteku.
Postavite kursor u neki od spoljašnjih frejmova i upamtite datoteku pod nekim opštim imenom, kao
što je bg.html. Boju pozadine podesite na crnu, sivu ili neku drugu. Nakon toga, preko panoa Frames
podesite atribut Src za ostale frejmove, tako da ukazuje na istu datoteku, koju ste upravo upamtili.
Exchange: Proširenje Letterbox Frameset
Ako su Vam se frejmovi tipa Letterbox toliko dopali, da nameravate da ih stalno koristite, možete da
pogledate proširenje koje postoji u okviru programa Macromedia Exchange. To je proširenje Letterbox
Frameset, koje dolazi od Projecta Seven. Ova komanda koja se nalazi u meniju Modify > Frameset, kreira
raspored tipa letterbox, sa fiksnim centralnim frejmom.
Deoba grafike u pozadini između frejmova
Neki od sajtova koji pokazuju najviše kreativnosti u upotrebi frejmova su oni koji sakrivaju da su sastavljeni
od frejmova. U tom cilju se koriste boje pozadine i slike. Tehnika koja se ovde koristi nije tako složena, ali
zahteva malo više razmišljanja, pošto u većini grafičkih programa ne postoje alati da se to lako uradi. Ako
koristite Dreamweaver i Fireworks, to ćete uraditi na sledeći način:
1. U Dreamweaveru napravite skup frejmova. Obratite pažnju na dimenzije frejmova.
2. U Fireworksu napravite novi dokument sa dovoljno velikim prostorom koji može da pokrije oba
frejma.
3. Napravite grafiku za pozadinu koja pokriva ceo prostor.
4. Napravite odsečene objekte iste veličine i pozicije kao u frejmovima. Ako je potrebno, podesite
grafiku tako da odgovara veličini delova.
5. Optimizujte sliku i izvezite je iz Fireworksa. Treba da upotrebite opciju Export Images Only i Export
Slices.
6. Kada se vratite u Dreamweaver, podesite da svaka izvezena slika postane pozadina odgovarajućeg
frejma. Ako želite da kontrolišete postavljanje slika u pozadini, možete da upotrebite i CSS.
Svet frejmova
Inlajn frejm, kao i običan frejm, definiše pravougaonu oblast u prozoru pretraživača, koja prikazuje deo
drugog dokumenta. Za razliku od strandardnih frejmova, ovi frejmovi postoje u okviru običnih HTML
dokumenata, u okviru oznake body. Ovaj frejm se ponaša kao i bilo koji drugi element na strani (slika, tabela
i sl.). Inlajn frejmovi su korisni uglavnom iz istih razloga kao i obični frejmovi. Oni omogućavaju da se deo
sadržaja na strani menja, a da pri tome ne mora da se učitava cela strana. Oni omogućavaju da se klizačima
krećete kroz deo strane, a da ostali sadržaj ostaje na svom mestu, itd. I za njih kao i za obične frejmove
postoje izvesni zahtevi vezani za dostupnost. Oni su deo HTML 4 specifikacije i trenutno ih podržava većina
najvažnijih pretraživača.
Inlajn frejmovi (iframes) u Dreamweaveru
Dreamweaver samo delimično podržava inlajn frejmove. Ovi frejmovi se ne mogu ubacivati iz prikaza
Design, oni se u tom prikazu ne prikazuju, a ni njihove osobine se ne prikazuju u okviru Property Inspectora.
Kreiranje inlajn frejmova
Dva su mehanizma za umetanje inlajn frejmova. To su Tag Chooser i objekat Floating Frame. Ako želite da
preko Tag Choosera ubacite inlajn frejm, treba da uradite sledeće:
1. Napravite dokument koji će sadržati osnovni raspored i koji određuje gde treba da se postavi inlajn
frejm. To treba da bude pravougaonik, koji se može postaviti u ćeliju tabele ili na nivo iz CSS-a, ili
negde drugde u okviru bloka iz HTML-a (slike ili pasusi).
2. Napravite drugi dokument koji treba da se prikaže u okviru te pravougaone površine. Ceo dokument
ne mora da stane u oblast koja je predviđena za inlajn frejm, pošto je moguća upotreba klizača, ako
je taj dokument veći.
3. U glavnom dokumentu postavite kursor tamo gde treba da se prikaže inlajn frejm. U ovom trenutku,
inlajn frejm možete da ubacite preko Tag Choosera ili preko objekta Floating Frame (samo u prikazu
138 / 299
Dreamweaver MX 2004
Code).
4. Izaberite Insert > Tag, da biste pristupili Tag Chooseru. Iz kategorije HTML Tags /Page
Elements/General izaberite iframe i kliknite Insert.
5. Otvoriće se okvir za dijalog Edit Tag. U kategoriji General dodelite potrebne osobine.
6. Kada završite sa dodeljivanjem osobina, kliknite OK da biste zatvorili okvir za dijalog Edit Tag, a
onda kliknite Close da biste zatvorili i Tag Chooser. Inlajn frejm se neće prikazati u Dreamweaveru,
ali će pogled na prikaz Code dokazati da je ipak na svom mestu.
Ako želite da inlajn frejm ubacite preko objekta Floating Frame, pripremite datoteke kao u koracima 1 i 2, a
onda uradite sledeće:
1. Pređite u prikaz Code. U ovom kodu postavite kursor tamo gde želite da se prikaže inlajn frejm.
2. Sa palete HTML Insert izaberite Floating Frame (grupa objekata Frames). (Ovaj objekat je dostupan
samo iz prikaza Code). Ovim se ubacuje inlajn frejm koji nema dodeljene osobine i koji neće biti
funkcionalan, osim ako mu zasebno ne dodelite osobine.
Osobine inlajn frejmova
Nakon što ste napravili inlajn frejm, preko Tag Inspectora ili okvira za dijalog Edit Tag treba da podesite
njegove osobine. Inlajn frejmovi se ne vide u prikazu Design, ali se mogu selektovati preko Tag Selectora.
Inlajn frejm možete selektovati i u prikazu Design. Samo treba da kliknete u prozor Document, tamo gde
treba da se nalazi frejm i on će se pojaviti u Tag Selectoru. Naravno, ukoliko ne možete da vidite frejm,
možda ćete imati problema da pogodite gde se on tačno nalazi, ili čak da tačno upamtite šta je u pitanju. Za
razliku od mnogih drugih nevidljivih objekata (oznaka form, na primer), inlajn frejmovi se ne prikazuju ni kao
zlatna ikona. Između oznake za otvaranje i zatvaranje frejma možete da ubacite neki komentar, koji će Vam
kasnije pomoći da ga pronađete, pošto se komentari prikazuju kao zlatna ikona. Evo kako ćete to uraditi:
1. Idite u okvir za dijalog Preferences/Invisible Elements i uključite ikonu za komentare. Ovim se
Dreamweaveru nalaže da komentare prikazuje kao zlatnu ikonu (kada su prikazani nevidljivi
elementi).
2. Pređite u prikaz Code i postavite kursor između oznake početka i završetka iframe.
3. Sa palete Common Insert izaberite objekat Comment. Ovim se ubacuje komentar. Unesite nekoliko
reči, kao što je, na primer: "iframes se nalazi ovde".
Od sada, kada god se prikažu nevidljivi elementi na strani, možete da selektujete zlatnu ikonu komentara, a
Tag Selector će prikazati oznaku iframe. Kliknite indikator oznake u Tag Selectoru da biste je selektovali, a
onda možete i da podešavate njene osobine. Ako želite da podesite osobine inlajn frejma, izaberite Modify >
Edit Tag. Otvoriće se Tag Editor. Možete i da koristite karticu Attributes u okviru Tag Inspectora.
Exchange: Proširenje vezano za inlajn frejmove
Inlajn frejmovi su korisne male stavke i prilično su popularni. U programu Macromedia Exchange postoji
nekoliko proširenja koja pomažu kod ubacivanja i rada sa ovakvim frejmovima.
139 / 299
Dreamweaver MX 2004
11. Kaskadne liste stilova (CSS)
Osnove CSS-a
Iako je CSS sjajan alat, ipak može biti zastrašujuć, ako ga nikad ranije niste upotrebljavali. Ovaj kratak
pogled se bavi osnovama CSS-a, objašnjavajući odakle on dolazi, šta i kako radi, a pokazali smo i osnovne
alate koji u Dreamweaveru MX 2004 postoje za rad sa njime.
Kratak osvrt
Izvorni koncept HTML-a je bio da je to jezik koji se koristi za označavanje teksta, odnosno za opisivanje
različitih strukturnih elemenata u dokumentu. Oznake iz HTML-a identifikuju koji deo dokumenta je zaglavlje,
gde su pasusi, koji deo je lista, a koje reči treba istaći. Pretraživači su tako napravljeni da interpretiraju ove
strukturne elemente i prikazuju sve to na ekranu. Neće svaki pretraživač prikazati tekst na isti način. Neki će
tekst označen kao emphasize prikazati kurzivom, neki masnim slovima, ali je tekst u svakom slučaju
istaknut. Cilj je dobiti čitljiv dokument koji će se prikazivati preko strukturnih definicija na različitim
platformama.
Prezentacioni markup jezik i problemi koji tu postoje
Sa pojavom grafičkih pretraživača i brzom ekspanzijom Weba, javili su se i zahtevi autora koji su se bavili
HTML-om, da se naprave nove oznake koje će se baviti i prezentacijom, a ne samo strukturom. Dizajneri
nisu više bili zadovoljni samo mogućnošću da zadaju da reč treba da se istakne, oni su želeli da definišu i
kako ta reč treba da se istakne (na primer, putem masnih slova). Kao odgovor na ovaj pritisak, u jezik su
ubačeni fizički elementi kao što su oznake b i i. Uskoro je strukturni jezik prerastao u prezentacioni, a oznaka
font je počela da se široko primenjuje za definisanje stila teksta. Dizajneri web sajtova su bili srećni da imaju
izvesnu kontrolu nad prezentacijom, ali kako su prestali da koriste strukturno formatiranje, više nije bilo
moguće odrediti strukturne informacije na osnovu izvornog koda. To je dovelo do negativnih posledica, kao
što su:
• Kod koji se pravio nije ništa govorio o značenju teksta koji se prikazuje. Strukturno, ove strane
predstavljaju samo niz slova. Pretraživač sa sintezom govora, na primer, tekst koji je označen
oznakom <hl> prepoznaje kao glavno zaglavlje. On zna da taj tekst treba da prikaže velikim i
masnim slovima, ali je to za njega običan tekst.
• Markup koji nema strukturu je mnogo teže održavati. tekst koji je logički označen prema značenju
sadržaja dovodi do čistijeg koda, koji ima smisla.
• Nestruktuirane strane je vrlo teško indeksirati. Ako su zaglavlja strana i odeljaka jasno označena,
mašine za pretraživanje mogu da ih koriste da omoguće korisniku da pronađe relevantne
informacije.
Ovo je posao za CSS
W3C je brzo prepoznao da se priroda HTML-a promenila sa povećanom upotrebom prezentacionog
označavanja i da je potrebno neko rešenje. Kao odgovor na to, počeo je rad na kaskadnim listama stilova
(cascading style sheets - CSS), a 1996. godine je CSS postao preporuka W3C konzorcijuma. CSS je
napravljen tako da dizajneru web strane omogući puno kontrole nad prikazivanjem strane, a da HTML
ostane strukturni jezik. CSS omogućava mnogo kompleksniju i raznovrsniju prezentaciju teksta nego što je
HTML ikad mogao da uradi, omogućavajući takve stvari, kao što je kreiranje okvira, definisanje razmaka oko
elemenata, varijacije u velikim i malim slovima, dekoraciju (kao što je podvlačenje), definisanje razmaka
između slova i puno toga drugog. Verovatno je najlepša stvar, koja je smanjila opterećenje web dizajnera,
mogućnost da se koriste povezane liste stilova, tako da promenom stila na jednom mestu, možete da
promenite izgled celog sajta. CSS je nešto što web dizajneri moraju poznavati, tako da svaki ozbiljan
dizajner mora ovaj alat imati u svom arsenalu.
Osnovni elementi CSS-a
CSS je u osnovi skup instrukcija koje definišu kako neki HTML dokument treba da se prikaže. Najbolja stvar
kod CSS-a je da se on može deflnisati u spoljašnjoj datoteci, ili listu (sheet). Pretraživač onda može da
pročita ovaj spoljašnji list i da primeni sadržaj na određeni sadržaj datoteke. Na taj način se stil i formatiranje
strane odvajaju od samog sadržaja. Ovo je vrlo bitan koncept kod dizajna web strana. Ovo Vam pruža
moćan i detaljan način da ažurirate svoj web sajt. U datoteci sa stilovima možete definisati da se za tekst
140 / 299
Dreamweaver MX 2004
primenjuje font Arial, da je veličina slova 12 piksela, da su slova crvene boje, da su masna, da je tekst levo
poravnat i da je pozadina plava. Ako ovu datoteku pridružite svim stranama na svom sajtu, tekst će se uvek
prikazivati na taj način. Ako promenite mišljenje, možete da promenite jednu datoteku i da zadate da font
bude Times, da veličina slova bude 28 piksela, da su zelene boje, pisana kurzovim i desno poravnata.
Upamtite tu novu datoteku i ceo web sajt se automatski ažurira. CSS takođe omogućava da radite neke
stvari koje u HTML-u nisu moguće. Za svoju stranu možete definisati nivo kroz koji ćete se kretati klizačem.
Na taj način možete da imate prozor u sredini strane sa sadržajem kroz koji se možete kretati uz pomoć
klizača. Za svaku ivicu u okviru tabele možete definisati različitu boju. Možete podesiti da se kod oznaka za
nabrajanje koristi korisnički definisana grafika, ili možete obrisati podvlačenje hiperlinkova. Premda se sa
svakom novom verzijom pretraživača poboljšava podrška koju oni imaju za CSS, ipak neće svi pretraživači
prikazati sve elemente CSS-a, niti će sve elemente prikazati na isti način. Uvek je dobro da svoju stranu
testirate u različitim pretraživačima. Jedna od bitnih ideja u vezi CSS-a je da ako pretraživač ne podržava
neki stil, informacije su i dalje tu, ali se ne koriste stilovi koji nedostaju. IE 5 i Netscape 6 i novije verzije
uglavnom prikazuju većinu CSS elemenata. Izvesna ograničenja postoje u verziji Netscape 4. CSS Vam daje
neverovatnu kontrolu nad stranama. W3C sada preporučuje da za formatiranje strana koristite CSS. Trebalo
bi da pažljivo razmotrite mogućnosti primene CSS-a kod dizajna.
Napomena o semantici
Stil (style, ili style rule) generalno definisan kao skup parametara za neku oznaku ili klasu.
List (sheet) je datoteka koja sadrži stilove. List može da sadrži više stilova.
Anatomija stila
U srcu CSS-a je stil. Ako shvatite kako stilovi rade i kakve mogućnosti donose, onda možete i da ih korisite
na pravi način.
CSS selektori
CSS stil koji je najlakše razumeti je CSS selektor. Selektor je bilo koji HTML element ili oznaka. Ako želite da
utičete na izgled oznake, onda morate da primenite niz pravila koja definišu kao se ta oznaka prikazuje u
pretraživaču. Osnovni format selektora je:
selector {osobina:vrednost}
Selector je oznaka koja se menja. Osobina je ime osobine koja se podešava. Vrednost je vrednost osobine
koja se zadaje. Evo jednostavnog primera:
p {color: green}
Ovim se zadaje da tekst koji se nalazi između oznaka <p></p> treba da bude zelene boje. To važi za svaku
stranu koja koristi taj stil. Možete i da u okviru jednog stila zadate nekoliko osobina:
p
{
color: green;
text-align: right }
Ovim se zadaje da tekst treba da bude zelene boje i da bude desno poravnat. Ako želite da isti stil dodelite
različitim oznakama, onda možete da ih u okviru selektora sve navedete:
p,div,H2
{
color: green;
text-align: right
}
Obratite pažnju na zareze koji odvajaju oznake, kao i na dve tačke koje odvajaju ime osobine od vrednosti,
kao i na tačku i zarez koji odvajaju osobine.
Kontekstualni selektori
Drugi način za primenu stilova na određenu stranu su kontekstualni selektori. Ovde postoji malo više
specijalizacije, pošto se selektor primenjuje samo ako je zadovoljen određeni uslov ili ako je prisutan niz
oznaka. Možete, na primer, napraviti CSS selektor koji se primenjuje na oznake anchor, ali samo ako su one
u okviru liste. To znači da treba da napravite selektor koji traži kombinaciju oznaka li a (stavka u listi i kotva) i
da onda primeni stil. Ovaj stil se ne primenjuje na linkove koji nisu u listi.
141 / 299
Dreamweaver MX 2004
li a
{
color: red;
font-weight: bold;
text-decoration: none;
}
Klase
Za neku oznaku možete definisati više stilova. Najfleksibilniji metod da se to uradi je da se zada klasa. Klasa
je skup pravila za stilove koji se može primeniti na bilo koji element. Ovo je različito u odnosu na promenjenu
definiciju oznake iz HTML-a, koja se automatski primenjuje na zadati element. Ova oznaka izgleda ovako:
.red {color: red} h2.green {color: green}
Ako za neku oznaku želite da zadate klasu, mogli biste da napišete:
<h2 class="green">Ovo je zeleni tekst</h2>
Ovim se oznaci nalaže da treba da koristi klasu green. Pošto se stil primenjuje direktno na oznaku, to i utiče
samo na tu oznaku. Ovo ne utiče na <h3 class="green"> Ovo nije zeleni tekst </h3> pošto je klasa.green
direktno povezana sa oznakom <h2>. Klasu red možete da koristite sa bilo kojom oznakom. Ona će se na tu
oznaku primeniti, pošto nije dodeljena nijednoj konkretnoj oznaci. To znači da će se sledeće primeniti na
pravi način:
<h2 class="red">Ovo je crveni tekst</h2> <h3 class="red">Ovo je crveni tekst</h3>
Pseudo klase
Ovakve klase se najviše koriste za prikazivanje linkova u različitim stanjima. To su stanja Link, Visited, Hover
i Active. U pitanju su unapred podešene definicije za stilove linkova, koje razlikuju linkove, aktivne linkove
(oni koji se mogu kliknuti), Hover (kada miša postavite iznad linka), kao i Visited (linkove na kojima ste već
bili). Preko selektora možete definisati stilove za svako od ovih stanja. Ovde je bitan redosled definicija u
CSS datoteci. Taj redosled mora biti Link, Visited, Hover, Active, ili ovo neće raditi kako očekujete. Evo
primera:
a:link{text-decoration:underline}
a:visited{text-decoration:overline}
a:active{text-decoration:none;cursor:wait}
a:hover{text-decoration:none}
Pseudo klase funkcionišu u verzijama IE 4+ i Netscape 4+, ali se efekat a:hover ne prikazuje kako treba u
verziji Netscape 4.
Stilovi i datoteke sa stilovima i gde ih treba čuvati
Stilovi se mogu definisati u okviru dokumenta, kao pojedinačni stilovi koji su postavljeni direktno u kod, a
mogu se definisati i u okviru lista sa stilovima. List sa stilovima može biti interni ili eksterni, u zavistnosti od
toga gde je smešten u odnosu na dokument koji formatira. U narednim odeljcima ćemo razmotriti prednosti i
nedostatke inlajn stilova, internih lista sa stilovima i spoljašnjih lista.
Inlajn stilovi
Inlajn stilovi se definišu direktno u okviru oznake na strani. CSS se piše direktno u oznaku, kao atribut. Evo
kako to izgleda:
<input type="text" style="width:150px; border:1px solid #000000; ">
Iako inlajn stil ima prioritet u odnosu na ostale stilove, on utiče samo na oznaku kojoj je pridružen. Prethodni
CSS ne utiče ni na jednu drugu oznaku input. Ovo je najmanje efikasan način za upotrebu CSS-a na web
strani.
Interni listovi stilova
Interni listovi stilova se defmišu u okviru HTML strane u delu head. Koristi se block style. Na ovaj način se
stilovima može da pristupi sa cele strane, ali ne utiču na druge datoteke. Tipični interni stil izgleda ovako:
142 / 299
Dreamweaver MX 2004
<head>
<style type="text/css">
body {background-color: red}
p {text-align: right; color: white}
</style>
</head>
<body>
<p>Ovaj paragraf je bele boje.</p> <p>I ovaj paragraf je bele boje.</p>
Kao što vidite, ako želite da prebacite sve pasuse u dokumentu na levo ravnanje i da im promenite boju,
samo treba da promenite CSS u zaglavlju. Promene se automatski primenjuju na sve pasuse u dokumentu.
Spoljašnje liste sa stilovima
Spoljašnje liste stilova omogućavaju da u potpunosti iskoristite mogućnosti CSS-a. U ovakvim datotekama
se nalaze svi stilovi i definicije. Datoteka ima ekstenziju.css. Ovo je nesporno najbolji način za skladištenje
stilova. Na ovaj način su informacije o stilovima potpuno nezavisne od HTML koda. Promenom samo jedne
datoteke možete da promenite izgled celog sajta. Sajt se automatski ažurira u zavisnosti od informacija u
datoteci sa stilovima. Ako naučite sve opcije koje pruža CSS, onda možete da u potpuosti iskoristite ovu
funkciju. Tipična spoljašnja datoteka sa stilovima je povezana sa stranom preko sledećeg koda:
<link href="styles.css" rel="stylesheet" type="text/css">
Može i da se uveze preko sledećeg koda:
<style type="text/css">
<!-@import url("styles.css");
- ->
</style>
Datoteka sa stilovima sadrži listu selektora i klasa. Evo kako to izgleda:
P
{
color: green;
text-align: right
}
.red {color: red}
h2.green {color: green}
Kaskadnost i nasleđivanje
Jedna od prednosti koje nudi CSS je da stilovi rade zajedno i da ako je potrebno možete da preklopite jedan
stil drugim. Kaskadnost i nasleđivanje funkcionišu zajedno. Kaskadnost predstavlja upotrebu više stilova i
listova sa stilovima, kao i redosled po kojem se oni čitaju. Redosled u kojem se stilovi pojavljuju u kodu
određuje koja se konkretna osobina prikazuje. Ako spoljašnja datoteka sa stilovima kaže da tekst u oznaci
h2 treba da bude plave boje, ali postoji inlajn stil koji kaže da konkretna oznaka treba da bude žuta, onda
žuta pobeđuje, pošto se nalazi bliže aktuelnom kodu. Inheritance znači da će u kaskadi stilova, bliži stil
preklopiti samo one parametre koji su zajednički za oba stila. U prethodnom primeru, ako spoljašnji stil kaže
da oznaka h2 treba da bude desno poravnata, inlajn stil neće to da preklopi, pošto u njemu nema parametra
koji kontroliše ravnanje. To znači da će oznaka h2 biti žute boje, pošto je to boja definisana u inlajn stilu. Ali
će naslediti desno ravnanje od spoljašnjeg stila.
CSS u Dreamweaveru
U Dreamweaveru postoji niz alata koji mogu da pomognu u dizajnu, kreiranju, održavanju i pregledu web
sajtova koji koriste CSS. Počev od verzije Dreamweaver MX 2004, CSS je svuda u kodu koji piše sam
program. Centralno mesto za manipulisanje i kontrolu stilova i listi stilova je pano CSS Styles (Window > CSS
Styles). Preko ovog panoa možete da kreirate, menjate i ispitujete stilove, kao i da upravljate dokumentima
sa stilovima koji su uvezeni preko spoljašnjih linkova ili su uvezeni.
143 / 299
Dreamweaver MX 2004
Kreiranje novog stila
Ako želite da preko panoa CSS styles kreirate novi stil, kliknite dugme New CSS Styles. Novi stil možete da
napravite i ako desnim tasterom miša kliknete relevantnu CSS karticu u Tag Inspectoru i izaberete New
Rule, ili ako izaberete opciju New iz padajuće liste Style u Property Inspectoru, ili ako izaberete Text > CSS
Styles > New iz glavnog menija, ili ako desnim tasterom miša kliknete u prozoru Document i izaberete CSS >
New. Koji god metod da izaberete, otvara se okvir za dijalog New CSS Style. U njemu možete da definišete
koju vrstu stila želite da napravite i gde želite da ga postavite. Preko opcija iz Selector Type izaberite tip stila
koji želite da napravite. Mogućnosti su:
• Class (može da se primeni na bilo koju oznaku) – Ako izaberete ovu opciju, onda preko polja
Selector možete da unesete ime klase. Ime klase treba da počne tačkom, ako ako zaboravite da
unesete tačku, to će umesto Vas da uradi Dreamweaver.
• Tag (menja se izgled određene oznake) – Ako izaberete ovu opciju, onda u polju Selector treba da
definišete oznaku kojoj menjate definiciju, ili tako što ćete izabrati oznaku iz padajućeg menija ili tako
što ćete ukucati oznaku u polje.
• Advanced (kontekstualni selektori i sl.) – Ovu kategoriju ćete koristiti za sve što ne pripada prvim
dvema. To su, na primer, pseudo klase, kontekstualni selektori i ID oznake.
Ako želite da napravite pseudo klasu, izaberite tu opciju i preko padajućeg menija Selector izaberite pseudo
klasu. Možete i da ručno unsete ime pseudo klase. Ako želite da napravite kontekstualni selektor, izaberite tu
opciju i ukucajte ime kontekstualnog selektora u polje Selector. Na primer ako kontekstualni selektor treba da
kombinuje oznake li i a, u polje treba da ukucate li a. Ako selektor treba da kombinuje korisničku klasu footer
a:link, ukucajte .footer a:link (nemojte zaboraviti tačku ispred imena klase, ili selektor neće raditi). Ako želite
da kreirate ID, izaberite tu opciju i u polje Selector unesite lD#name. Umesto name unesite svoje ime. U
donjem delu okvira za dijalog možete da izaberete da upamtite stil kao internu listu stilova, koju možete da
ubacite u zaglavlje dokumenta, ili kao spoljašnju datoteku, koja se pamti u CSS dokumentu i pridružuje
tekućem HTML dokumentu. Ako želite da stil stavite u spoljašnji dokument, a nemate nijednu datoteku,
izaberite opciju New Style Sheet Document i Dreamweaver će Vam pomoći da napravite jednu.
Nakon što ste odlučili koju vrstu stila želite da napravite, kliknite OK da biste zatvorili okvir za dijalog New
CSS Style. Ovim se automatski otvara okvir za dijalog Style Definition u kome možete da definišete format
koji treba da bude u novom stilu. To se radi preko parametara stila.
Definisanje parametara stila
Interfejs preko kojeg zadajete formatiranje u CSS stilu je okvir za dijalog Style Definition. Ovaj okvir za
144 / 299
Dreamweaver MX 2004
dijalog se otvara čim kreirate novi stil i svaki put kada želite da menjate postojeće stilove. Tu postoji osam
različitih prozora koji se odnose na različite aspekte kontrole preko CSS-a. U toku rada ćete primetiti da
Dreamweaver MX 2004 sada u prikazu Design prikazuje većinu CSS elemenata. Ipak je dobro da stranu
pogledate u različitim pretraživačima, da biste bili sigurni da će se strana prikazati na pravi način.
Tip
Kategorija Type sadrži opcije za formatiranje teksta. Neke opcije su same po sebi jasne, neke i nisu. Većina
podešavanja dobro radi u pretraživačima, kao i u prikazu Design.
•
•
•
•
•
•
•
•
•
Font – Izaberite grupu fontova koja se koristi u tom stilu. Ovu listu možete menjati ako kliknete
strelicu naniže i izaberte opciju Edit Font List.
Size – Definiše se veličina fonta. Možete da izaberete brojčanu vrednost ili da zadate apsolutnu
veličinu. Apsolutna veličina se odnosi na srednju vrednost podrazumevane vrednosti u pretraživaču
korisnika, ili na definisani stil. Odatle se posle meri vrednost.
Style – Font može da se podesi na opcije normal, italic ili oblique. Razlika između opcija italic i
oblique je u tome da je italic različita verzija fonta. Većina fontova ima verziju italic. Opcija oblique je
originalna verzija fonta koju je računar napisao pod drugim uglom. U stvarnosti, pretraživač ih obično
prikazuje na isti način, ali mogu da postoje razlike između fontova i veličina. Ako je ta razlika bitna,
onda obe opcije treba da testirate u pretraživačima.
Line Height - Ovim se određuje visina jednog reda teksta. Ako radite sa projektima koji se štampaju,
onda je to slično sa razmakom između redova i uvlačenjem. Normalna visina reda se izračunava na
bazi veličine tipa. Linije su otprilike 20% veće nego veličina tipa. Apsolutna visina linije se može
dodeliti na bazi mernog sistema koji smo dali u sledećem uokvirenom delu.
Weight – Ovim se određuje da li su slova deblja ili ne. Brojčane vrednosti (100-900) se odnose na
apsolutna podešavanja, dok se opcije Bolder i Lighter zadaju relativno u odnosu na podrazumevanu
težinu. Debljina slova se neće uvek isto prikazati u svim pretraživačima. Ako ovde birate neku opciju
koja je različita u odnosu na Normal ili Bold, treba da proverite kako to izgleda u pretraživačima.
Variant – Ova vrednost određuje da li će se mala slova zameniti velikim, ali umanjenim slovima.
Case Određuje da li su slova velika ili mala. Sva slova su velika, sva su mala ili svaka reč počinje
velikim slovom.
Color – Određuje se boja fonta.
Decoration – Ovim se podešavaju opcije redova u tekstu. Ako želite da uklonite podvlačenje kod
hiperlinkova, onda treba da zadate opciju None.
Pozadina
Kategorija Background kontroliše pozadinu. Preko CSS-a možete da kontrolišete pozadinu svakog elementa
145 / 299
Dreamweaver MX 2004
u bloku. To znači da svaki pasus, nivo, tabela ili neki drugi konačni element može da ima svoj stil za
pozadinu. Ako želite da pozadinu primenite na celu stranu, onda morate da je zadate za oznaku body.
•
•
•
•
•
Background Color – Ovim se zadaje boja pozadine za neki element.
Background Image – Ovim se zadaje slika koja ide u pozadini elementa. Ostala podešavanja iz ove
kategorije definišu kako se prikazuje slika u pozadini.
Repeat Ova vrednost definiše da li se slika u pozadini ponavlja u vidu ploča. Možete podesiti opciju
repeat, non repeat, repeat-x (samo po horizontali) ili po vertikali (repeat-y).
Attachment – Ova opcija određuje da li se slika u pozadini kreće zajedno sa stranom ili ostaje
statička, tako da strana prelazi preko nje.
Horizontal Position and Vertical Poisition – Ovim se definiše postavljanje slike u pozadini. Opcije
Left, Right ili Center/Middle omogućavaju da sliku poravnate relativno u odnosu na osnovni element.
Ako želite da slika bude na nekom rastojanju od gornjeg levog ugla osnovnog elementa, onda
unesite neko numeričko rastojanje.
Slika koju ovde zadate se u prozoru Dreamweavera može prikazati u gornjem levom uglu prozora Design.
Da biste videli kako strana tačno izgleda, pogledajte je u pretraživaču. Sa nekim verzijama pretraživača,
posebno sa Netscapeom 4, postoje izvesna ograničenja koja su vezana za slike u pozadini. Kao i uvek,
proverite kompatibilnost u više pretraživača.
Blok
Blokovi su diskretni delovi HTML-a. Na primer, pasus je element bloka. Sa aspekta CSS-a, to se smatra
blokom koda. Kada korisničku klasu primenite na pasus, to utiče samo na kod koji je između oznake početka
i kraja pasusa. Na taj način se svaki pasus tretira kao zaseban element. Većina blokova ima oznaku za
početak i kraj. Ovo se razlikuje od inlajn elemenata, koji se mogu postaviti bilo gde u okviru bloka. Slika koja
nema oznaku za zatvaranje je dobar primer inlajn elementa. Kategorija Block u okviru za dijalog CSS Style
Definition sadrži opcije za definisanje blokova koji postoje na strani.
146 / 299
•
•
•
•
•
•
•
Dreamweaver MX 2004
Word Spacing – Koristi se za definisanje rastojanja između reči.
Letter Spacing – Koristi se za definisanje rastojanja između slova u reči.
Vertical Aligment – Zadaje se vertikalni aspekt razmaka između reči. Ovo možete koristiti za
subscript i superscript.
Text Align – Definiše se horizonatlno ravnanje bloka sa tekstom. Može biti Left, Right, Center i
Justify. Kad koristite opciju Justify, proverite kako to izgleda u pertraživaču, pošto je podrška za
ovakvo ravnanje različita (i prilično loše izgleda čak i kada postoji).
Text Indent – Definiše se uvlačenje prve linije bloka sa tekstom. (Ako želite da uvučete ceo blok,
treba da upotrebite opciju Margin or Padding iz kategorije Box).
Whitespace – Definiše se razmak unutar bloka. Opcija Normal spaja više razmaka u jedan. Opcija
Pre ostavlja više razmaka. Opcija Nowrap ne dozvoljava prelaz u novi red, bez oznake break.
Display – Kontrolišu se osnovni aspekti elementa block, uključući i da li se element prikazuje i kako
se oznaka ponaša. Sa ovim podešavanjim treba biti oprezan pošto za opciju Display u
pretraživačima postoji ograničena podrška.
Box
Svaki element koji može biti blok, kao što je pasus, postoji u svom pravougaonom okviru, koji se može
podešavati preko CSS-a. Neka od ovih podešavanja se koriste zajedno sa kontrolom pozicije, čime se dobija
CSS pozicija. Obratite pažnju na to da će se neka od ovih podešavanja prikazati samo u pretraživaču.
Trebalo bi da stalno proveravate kako nešto izgleda u pretraživaču. Za kontrolu postavljanja elementa i za
rastojanja na strani ćete koristiti kategoriju Box iz okvira za dijalog CSS Style Definition.
147 / 299
•
•
•
•
•
Dreamweaver MX 2004
Width and Height – Definišu se visina i širina elementa.
Float – Koristi se odvajanje elementa od ostatka strane. Ostali elementi mogu da teku preko ovog
elementa ili da se prekidaju oko njega, slično onom što možete da radite sa slikom. Ova
podešavanja se u prikazu Design prikazuju samo za slučaj slika.
Clear – Koristi se za definisanje oblasti u kojoj se ne dozovljava preklapanje elemenata. Nivo koji se
pojavi u oblasti definisanoj sa Clear se postavlja ispod te oblasti. Ovim se sprečava da elementi
bloka zauzimaju isti horizontalni prostor.
Padding – Definiše rastojanje između sadržaja bloka i njegovog okvira (ili njegove margine, ako
okvir nije zadat). Ovo je slično sa atributom cellpadding kod tabela. Možete da ga podesite
nezavisno za sve četiri strane elementa. U tom slučaju treba da deselektujete polje Same for All.
Margin – Margina definiše rastojanje između okvira elementa i ostalih elemenata na strani, koji se
nalaze oko njega. Ovo je slično sa atributom cellspacing kod tabela, ili atributima vspace i hspace
kod slika i medijskih elemenata. Ako deselektujete polje Same fo All, možete da nezavisno
podešavate marginu za sve četiri strane.
Border
Ove opcije se koriste za podešavanje okvira oko zadatog elementa. U pitanju je okvir u odnosu na koji se
zadaju atributi padding i spacing. Ovo je slično sa okvirom tabele, ali sa više mogućnosti. Za podešavanje
okvira nekog elementa na strani treba da koristite kategoriju Border iz okvira za dijalog CSS StyleDefinition.
148 / 299
•
•
•
Dreamweaver MX 2004
Style – Možete izabrati neku od opcija Dotted, Dashed, Solid, Double, Groove, Ridge, Inset i Outset.
Podrška u pretraživačima se razlikuje za pojedine opcije.
Width – Podešava se širina okvira, kao broj piksela ili varijante Thick i Thin, koje nisu brojčane.
Color – Bira se boja okvira.
Treba da znate da se okvir može primeniti nezavisno na sve četiri strane elementa. Ova nezavisnost Vam
omogućava da postignete efekte kao što su pravila u pasusima.
List
Kategorija List sadrži opcije za podešavanje listi bilo sa brojevima, bilo sa nekim oznakama.
149 / 299
•
•
•
Dreamweaver MX 2004
Type – Za liste sa oznakama (neuređene), izaberite tij oznake. Opcije su Disc, Circle i Square.
Kod uređenih list birate vrstu slovne ili brojčane oznake. Opcije su Decimal Lowercase, Roman
Numerals, Uppercase Roman Numerals Upper i Lowercase slova.
Bullet Image – Kod listi sa oznakama, ovim se zadaje sliki koja se koristi kao oznaka. Preko
dugmeta Browse možete d; povežete sliku.
Position – Definiše se kako stavke u listi prelaze u nove redovi i koliko se uvlače. Opcija Outside će
stavku iz list ravnati sa uvlačenjem prvog reda, a opcija Inside sa marginom
Positioning
Opcije iz ove kategorije definišu gde se elemeni strane prikazuju na toj strani. Ovo se zove CSS
pozicioniranje, ili CSS-P. Premda se CSS pozicioniranje može primeniti na većinu elemenata koji čine
blokove, ono se ipak generalno koristi sa oznakom div.
150 / 299
•
•
•
•
•
•
•
Dreamweaver MX 2004
Type – Ovim se definiše vrsta kontrole pozicije nekog elementa. Apsolutno pozicioniranje element
postavlja relativno u odnosu na gornji levi ugao strane. Relativno pozicioniranje postavlja element
relativno u odnosu na mesto u dokumentu, u kome se stil javlja u dokumentu. Statičko pozicioniranje
postavlja element bloka na istu lokaciju na kojoj se pojavljuje i u dokumentu.
Visibility – Kontroliše se inicijalna vidljivost elementa. Nasledivanje daje elementu istu vidljivost,
koja je podešena i za osnovnu oznaku. Opcija Visible čini element vidljivim. Opcija Hidden ga čini
nevidljivim. Ove opcije dinamički prikazuju i uklanjaju element preko JavaScripta.
Width i Height – Isto kao istoimeni elementi u kategoriji Block. Definišu se dimenzije elementa u
bloku.
Z-Index Definiše se redosled prikazivanja elemenata, ako dođe do njihovog preklapanja. Elementi
sa manjim brojem se prikazuju ispod elemenata sa većim brojem. Ovaj redosled je bitan samo kod
elemenata koji su pozicionirani preko CSS-a.
Overflow – Ovo se koristi kada je sadržaj nekog elementa veći od zadate visine i širine i definiše šta
se dešava sa tim dodatnim materijalom. Ako je zadata opcija Visible, onda se sav sadržaj nivoa
prikazuje istovremeno, bez obzira na podešenu veličinu. Opcija Hidden striktno poštuje zadatu
veličinu nivoa i seče sav sadržaj koji prelazi tu veličinu. Opcija Scrollbars dodaje klizače, bez obzira
da li su potrebni ili ne. Ako je sadržaj koji prikazujete bitan, pogledajte kako pretraživači to
podržavaju. Opcija Auto pravi klizače samo ako je potrebno.
Placement – Ove vrednosti definišu gde element pozicioniran preko CSS-a treba da se prikaže. Kod
elemenata kojima je zadata apsolutna pozicija, sve vrednosti su relativne u odnosu na ugao prozora
pretraživača.
Clip – Koristi se za definisanje dela nivoa koji je vidljiv. Koristićete ovo ako želite da sakrijete deo
nivoa, a da pri tome ne koristite opcije Overflow. Može se koristiti zajedno sa Java Scriptom, čime se
dobijaju interesantni efekti.
Extensions
Opcije iz kategorije Extensions se koriste u specijalnim slučajevima. Njih pretraživači i ne podržavaju na
najbolji način,tako da treba da ih pažljivo koristite. Ako ih koristite, obavezno proverite kako se to prikazuje u
pretraživaču.
151 / 299
•
•
•
Dreamweaver MX 2004
Page Break – Koristi se za podešavanje preloma strane, kod štampanja. Ovim se prelom strane
zadaje pre ili posle elementa.
Visual Effect – Koristi se za promenu izgleda kursora kada se nađe iznad elementa za koji zadajete
vrednost. Većina pretraživača ovu opciju ne podržava.
Filter – Omogućava da na slike koje se nalaze na strani primenite specijalne efekte. U vreme dok
ovo pišemo, samo IE4+ podržava ove opcije.
Rad sa stilovima
Stilovima rukujete preko panoa CSS, Tag Inspectora, Property Inspectora, Tag Selectora i preko mnogih
drugih stavki.
Primena (i uklanjanje) stilova
Lepota promene definicije HTML oznaka je u tome što to ne mora da se primeni. Kada u datoteci sa
stilovima menjate definiciju oznake, svako pojavljivanje te oznake se automatski prilagođava formatiranju
koje ste zadali. Kontekstualni selektori i pseudo klase rade na isti način. Korisničke klase, sa druge strane,
moraju da se primene na određenu oznaku. U Dreamweaveru postoje različiti načini da to uradite.
•
Preko Property Inspectora – Property Inspectori za tekst i tabele imaju padajući meni sa klasama
koje su u tekućem dokumentu na raspolaganju. Samo izaberite objekat/tekst, na koji želite da
primenite klasu, a onda iz padajućeg menija izaberite stil koji treba da se primeni. Prvo treba da
izaberete objekat na koji želite da primenite klasu, a onda da izaberete i klasu. Ako želite da uklonite
primenu klase, iz menija izaberite None.
•
Preko Tag Inspectora – U delu Attributes u Tag Inspectoru, u okviru kategorije CSS/Accessibility
152 / 299
Dreamweaver MX 2004
unesite ime klase koja se primenjuje.
•
Preko Tag Selectora – Desnim tasteron miša kliknite neku oznaku u Tag Selectoru i iz pomoćno >
menija izaberite opciju Set Class. Prikazaće se lista klasa koje stoje na raspolaganju. Izaberite neku
od njih. Ako ne želite da primenite ni jednu od klasa, izaberite None.
•
Preko CSS Styles – U meniju CSS Style postoji lista klasa koje su trenutno na raspolaganju. Ovom
meniju možete da pristupite preko menija Text, ili ako desnin tasterom miša kliknete neki element na
strani i izaberite opciji iz pomoćnog menija. Ako ne želite da primenite ni jedni klasu, izaberite opciju
None.
Nakon što se na oznaku primenila neka klasa, u padajućem meniji Class iz Property Inspectora se sada
prikazuje ta klasa, a u Tag Selectoru se prikazuje oznaka, iza koje sledi ime klase.
153 / 299
Dreamweaver MX 2004
Rukovanje stilovima preko panoa CSS Styles (i sa drugih mesta)
U panou CSS Styles se prikazuju stilovi koje ste definisali, prikazuju se njihove osobine, kao i mesto na
kome se nalaze (interno ili eksterno).
• Ako želite da promenite neki stil, selektujte ga u panou i kliknite dugme Edit Style sa panoa. Otvoriće
se okvir za dijalog CSS Style Definition, u kome možete da menjate osobine.
• Ako želite da promenite ime klase, selektujte tu klasu i iz menija Options u panou, izaberite opciju
Rename.
• Ako želite da obrišete stil, selektujte ga u panou i kliknite dugme Remove Style (kanta za otpatke).
Za korisničke klase ovim nećete obrisati mesta na kojima je stil primenjen u dokumentu.
Stilovima možete da rukujete i sa različitih drugih mesta u Dreamweaveru. Iz glavnog menija možete da
izaberete Text > CSS Styles i da pozovete komande Edit ili Rename. Ovaj podmeni možete da dobijete i ako
u prozoru Document kliknete desnim tasterom miša i iz pomoćnog menija izaberete opciju Text > CSS
Styles. Drugi interfejs koji možete koristiti za rukovanje stilovima je iz opcija Text > CSS Styles > Edit iz
glavnog menija. Ova komanda otvara prozor <style>, u kome se prikazuju svi stilovi koji su definisani interno
u dokumentu i u pridruženim listama stilova.
Ako želite da menjate stil, selektujte ga i kliknite dugme Edit, ili selektujte datoteku sa stilovima i kliknite Edit.
Ovim se otvara drugi prozor u kome se prikazuju stilovi iz te datoteke. Oni koji su Dreamweaver počeli da
koriste pre verzije MX će prepoznati ovaj način rada. Ovo je vrlo nezgrapno u odnosu na pano CSS Styles,
tako da je bolje da ga ne koristite, osim ako ste već niste navikli na taj način rada.
Pregled stilova
Nakon što ste stilove ubacili u dokument, verovatno ćete želeti da pratite koje su klase primenjene, koje
formatiranje iz CSS-a se koristi, i sl. Property Inspector, Tag Selector, a posebno novi, slavni Tag Inspector
mogu u tome da Vam pomognu.
Pregled stilova preko Property Inspectora
Preko Text i Table Property Inspectora možete da pogledate sve primenjene klase. Ovim klasama se
pristupa preko padajućeg menija Class. Gde je moguće, prikazuju se i formati. Ako ste izabrali tekst,
Property Inspector prikazuje i neko osnovno formatiranje teksta, koje se primenjuje na tu oznaku. Ovde treba
da budete pažljivi. Promena neke od ovih vrednosti neće promeniti stil. Umesto toga se pravi novi stil i
primenjuje se na tekstualni element. Novi stil se dodaje zajedno sa starim koji su već bili primenjeni na taj
element.
Primenjene klase i Tag Selector
Nakon što ste na oznaku primenili neku klasu, ona se u Tag Selectoru prikazuje zajedno sa tom oznakom
Obratite pažnju. Ovo je sjajan način da pratite klase koje se koriste. Tag Selector Vam neće reći da li je
promenjena definicija oznake, kao i da li radi neki kontekstualni selektor.
Tag Inspector/CSS Rule Inspector
Kartica Attributes u okviru Tag Inspectora, preko svoje kategorije CSS/Accessbility ukazuje da li je klasa
primenjena na izabranu oznaku. Kartica Relevant CSS iz Tag Inspectora, koja se često zove i CSS Rule
Inspector je sjajan i komapaktan interfejs za ispitivanje i uređivanje stilova koji su primenjeni na elemente na
strani.
• Ispitivanje primenjenih stilova - U gornjem delu prozora su prikazani stilovi koji su trenutno
primenjeni na izabranu stavku u dokumentu. Taj stil može biti korisnički definisana klasa,
promenjena definicija oznake ili neka kombinacija. Kod korisnički definisanih klasa se prikazuje i
oznaka na koju je klasa primenjena.
• Ispitivanje osobina stila - Ako na vrhu prozora izaberete pravilo, u donjem delu se prikazuje opsežna
lista opcija vezanih za CSS formatiranje. Tu su sve vrednosti koje su u okviru pravila podešene.
Listu možete prikazivati uredenu po kategorijama (iste kategorije koje postoje i u okviru za dijalog
CSS Style Definition) ili po abecednom redu.
• Uređivanje stilova - Najbolje je što bilo koje promene koje napravite u osobinama stila ovde,
154 / 299
Dreamweaver MX 2004
automatski menjaju stil. Prema tome, ako ste u dokumentu izabrali jedan pasus i ako se on
kontroliše preko promenjene definicije oznake p, možete da promenite pravilo za formatiranje
oznake p i da se automatski promene svi pasusi. Ako se promenjena definicija oznake p nalazi u
spoljašnjoj datoteci sa stilovima, onda ste upravo promenili format pasusa na celom sajtu, a niste
morali da idete u pano CSS Styles ili da otvarate okvir za dijalog CSS Style Definition.
Rad sa listama stilova
Rukovanje stilovima obuhvata i rukovanje listama stilova, bilo internim, bilo eksternim. Ovo rukovanje se
obavlja preko panoa CSS Styles.
Pridruživanje lista sa stilovima
Pored toga što pano CSS Styles koristite za kreiranje liste stilova, isti pano se koristi i za pridruživanje tih
listi. Ako na sajt dodajete više strana u kojima se nalazi niz unapred napravljenih stilova, ove stilove lako
možete da pridružite svojim novim stranama i da ih primenite kada Vam to zatreba. Ovi stilovi se neće
ponašati u odnosu na stilove koje ste kreirali u Dreamweaveru. Promene HTML oznake će se automatski
ažurirati, a u panou CSS Styles će se pojaviti lista korisničkih klasa.
Ako želite da neku postojeću listu stilova pridružite preko panoa CSS Styles, jednostavno kliknite dugme
Attach Style Sheet, koje se nalazi u donjem levom delu panoa. Možete i da iz padajućeg menija Class
izaberete opciju Attach Style Sheet. Ova klasa je u okviru Property Inspectora. Možete i da izaberete Text >
CSS Styles > Attach Style Sheet iz glavnog menija, ili da desnim tasterom miša kliknete u prozoru Document
i iz pomoćnog menija izaberete opciju CSS Styles > Attach Style Sheet. Koji god metod da izaberete,
zatražiće se da pronađete.css datoteku i da izaberete da li je linkujete ili uvozite. Razlika između ove dve
opcije je vrlo mala. Opcija Link povezuje datoteku preko oznake href, a opcija Import koristi stil ili URL link za
pronalaženje datoteke. U verziji Netscape 4 je podržana samo opcija sa linkovanjem. Ostale, novije verzije
pretraživača podržavaju i jednu i drugu opciju. Kliknite OK da biste zarvšili povezivanje. Promenjene
definicije HTML oznaka i selektori se automatski primenjuju, a listi korisničkih klasa možete da pristupite
preko interfejsa.
Ako ste uvezli listu stilova, ona se prikazuje u panou CSS Styles i to preko indikatora <style>. Razlog je što
se direktiva import nalazi u okviru oznake style. Ako ste datoteku sa stilovima linkovali, ona se jednostavno
prikazuje u panou CSS Styles.
Rad sa spoljašnjim stilovima
Ako ste svom dokumentu pridružili spoljašnju datoteku sa stilovima, onda sa ovim stilovima možete da radite
na isti način kao što radite sa internim. To znači da možete da koristite pano CSS Styles i ostale elemente
interfejsa koje smo pomenuli. Treba da vodite računa da svaki put kada promenite stil u pridruženoj listi
stilova, Dreamweaver menja CSS dokument, a ne otvoreni HTML dokument. Ovo Vas možda malo zbunjuje,
ali samo dok se ne naviknete. Mogli biste, na primer, da upamtite svoju HTMl datoteku, da promenite
definiciju stila, a da onda probate da poništite tu promenu i da vidite da to ne možete da uradite zato što se
promene nisu desile u tekućem dokumentu.
Neke autore ovo frustrira, pa Dreamweaver ima i opciju da automatski otvara spoljašnju datoteku sa
stilovima ispod tekućeg dokumenta. Ovo se radi kad god radite na nekom od stilova. Na taj način možete da
promenite stil, ta promena se dešava u datoteci sa stilovima koja je otvorena; ta datoteka nije upamćena.
Ako želite da poništite promene, to možete da uradite, a ako želite da poništite više uzastopnih akcija, onda
možete da aktivirate CSS dokument i da izaberete opciju File > Revert.
Nedostatak činjenice da Dreamweaver otvara CSS dokument i da ga ne pamti automatski je u tome da
morate da upamtite da sami treba povremeno da pamtite ovu datoteku, iako ona nije u glavnom dokumentu
na kome radite. (Radite na HTML dokumentu.) Na primer, svaki put kada želite da pogledate kako strana
izgleda n pretraživaču, morate da se setite da aktivirate CSS dokument i da ga upamtite, jer se u suprotnom
promene stilova koje ste poslednje uradili neće prikazati. Ako bi Dreamweaver pao prilikom rada, ili ako bi
nestalo struje, tako da se računar neočekivano ugasi, a Vi niste upamtili HTML i CSS dokument, onda ste
izgubili sve što ste u međuvremenu promenili. Dreamweaver podrazumevano ne otvara automatski CSS
dokument. Ako želite da to promenite, izaberite Edit > Preferences/CS5 Styles i tu potvrdite opciju
Open_CSS Files When Modified.
155 / 299
Dreamweaver MX 2004
Brisanje datoteke sa stilovima
Ako želite da uklonite neku spoljašnju datoteku sa stilovima, u panou CSS Styles izaberite tu datoteku i
kliknite dugme Delete CSS (kanta za otpatke). Ovim se neće obrisati sama datoteka. Ovim se samo uklanja
iskaz link ili import, kojim je tekući dokument povezan sa tom datotekom. Interna lista stilova se ne može
ukloniti. Umesto toga, treba da selektujete pojedinačne stilove u okviru liste i da ih izbrišete.
Izvoz datoteka sa stilovima
Izvoz se odnosi na prebacivanje stilova iz interne liste stilova u spoljašnju datoteku sa stilovima. Izvoz
postaje bitan ako ste interno napravili stil i želite da ga kreirate eksterno, ili ako ste napravili interno, a kasnije
promenili mišljenje. Ako želite da preko panoa CSS Styles izvezete internu listu stilova, izaberite opciju
Export Style Sheet, koja se nalazi u meniju Options. Možete i da izaberete Text > CSS Styles > Export iz
glavnog menija, ili da u prozoru Document kliknete desnim tasterom miša i izaberete opciju CSS Styles >
Export.
Koji god metod da izaberete, Dreamweaver Vas pita da li treba da kreira novi CSS dokument. Nakon što
završite, kliknite OK da biste zatvorili okvir za dijalog. Ovim je napravljen novi stil. Na žalost, ako ste se
ponadali da je sada izbrisana interna lista stilovi da je novi dokument automatski linkovan, niste u pravu.
Tekući dokument se ne menja. Da biste operaciju kompletno završili, morate da izbrišete internu listu stilova i
da preko dugmeta Attach Style Sheet linkujete ili uvezete CSS dokument koji ste upravo kreirali.
Ako želite da u neki spoljašnji dokument iskopirate samo jedan ili dva stila, a ne celu internu listu stilova,
izaberite te stilove u prikazu Code i iskopirajte ih i postavite u CSS dokument. Ovde Vam ponovo može
pomoći pano CSS Styles. U panou izaberite neki od stilova i iz menija Options izaberite opciju Go to Code.
(Možete i da desnim tasterom miša kliknete stil i da pri tome dobijete isti meni Options.) Možete i da dva puta
brzo kliknete ime stila i da uradite istu stvar.
Kreiranje datoteke sa stilovima od početka
Možda ne želite da svoju spoljašnju datoteku pravite u toku rada. Možda unapred znate koje stilove ćete
koristiti i samo želite da napravite datoteku sa stilovima, a da ne morate da otvarate neki dokument. I to
možete da uradite. Izaberite File > New i u prozoru New Document, kao tip dokumenta izaberite Basic
Pages / CSS.
Datoteka će se otvoriti u prikazu Code, pošto nema šta da se prikaže u prikazu Design. To ne znači da ne
možete da koristite alate za dizajn. Preko panoa CSS Styles ili putem nekog drugog metoda koji postoji u
156 / 299
Dreamweaver MX 2004
Dreamweaveru, napravite onoliko stilova koliko želite. Proverite da li je opcija u okviru za dijalog New
Document podešena na This Document Only, tako da kod ostaje u dokumentu koji ste otvorili. Nakon što
završite, zapamtite datoteku i zatvorite je. Sada tu datoteku sa stilovima možete da linkujete i uvozite u nove
HTML dokumente.
Rad sa CSS-om
CSS je sjajan ne samo zato što je efikasan, već i zato što ima mnogo mogućnosti. Da biste od CSS-a dobili
najviše moguće, treba da ga koristite pametno.
Definisanje fontova u HTML-u (i CSS-u)
Veliki deo formatiranja teksta je mnogo bolji od kada se pojavio CSS. Bez CSS-a ste imali puno veličina
teksta, od kojih je trebalo birati, niste mogli da uvlačite tekst ili podešavate margine, itd. Svet fontova je,
međutim, ostao isti kakav je i bio. U okviru za dijalog CSS Style definition i dalje, kao i kod alata koji ne
koriste CSS, a koji su se koristili u prethodnim verzijama Dreamweavera, postoji padajuća lista sa grupama
fontova od kojih treba izabrati neku.
HTML, fontovi i pretraživači
Fontovi se ne ugrađuju na web strane i ne postoji mehanizam za linkovanje fonta na web stranu, na način na
koji je to moguće uraditi sa grafikom ili nekim drugim medijumom. (Postoji puno tehničkih i pravnih razloga.)
To znači da krajnji korisnik Vašu web stranu može da prikaže samo sa onim fontovima koje ima na svom
računaru.
Ako na strani koristite font koji nije instaliran, onda se tekst prikazuje sa podrazumevanim fontom koji je
podešen u pretraživaču, a to je obično Times New Roman. Prva strategija kada naiđete na ovakav problem
je da zadajete samo one fontove koje korisnici verovatno imaju. Naravno da je svaki računar podešen
drugačije, ali većina Windows sistema ima fontove Times New Roman, Arial, Georgia, Verdana i Courier
New. Druga strategija je da zadate više od jednog fonta, a da korisnik može da iz liste izabere onaj za koji
zna da postoji na njegovom sistemu. Ovo se često zove fallback fonts, grupa fontova ili lista fontova. Pošto
se pretraživač zaustavlja na prvom fontu koji prepozna, strategija je da se počne sa fontovima koje možda
nema svako i da se ide ka fontovima koji se više koriste, pa da se na kraju da kategorija fontova koja se
najviše koristi, kao što su serif i sans serif. Ovakav sistem značajno proširuje mogućnosti, čak i ako ste
ograničeni samo na fontove koje posetioci verovatno imaju.
Liste fontova u Dreamweaveru
U Dreamweaveru postoje sledeće kombinacije fontova i izgleda:
• Arial, Helvetica, sans serif
• Times New Roman, Times, serif
• Courier New, Courier, mono
• Georgia, Times New Roman, Times, serif
• Verdana, Arial, Helvetica, sans serif
Ako Vas izgled nekog od ovih fontova ne zadovoljava, možete da ih menjate ili da preko okvira za dijalog
Edit font List dodajete svoje fontove. Ovom prozoru možete da pristupite iz bilo koje padajuće liste fontova u
Dreamweaveru, ako izaberete opciju Edit Font List sa dna menija. Možete i da izaberete opciju Text > Fonts
> Edit Font List.
Ako želite da napravite novu listu fontova, izaberite opciju Add Font in List Below iz dela sa listama fontova.
Možete i da kliknete dugme + na vrhu ove oblasti. U donjem delu okvira za dijalog postoje dva dugmeta. Deo
Chosen Font sa leve strane prikazuje fontove u listi. Polje za unos teksta koje se nalazi ispod ove oblasti
omogućava da zadate font koji nije u sistemu.
157 / 299
Dreamweaver MX 2004
Ideja je da selektujete ili unesete font sa desne strane, da pritisnete dugme << i da time iskopirate font u listu
sa leve strane. Ako želite da izbacite font iz liste, kliknite dugme > >
Dodajte onoliko fontova koliko želite, počev od onog koji je najpoželjniji, pa do onog koji je najopštiji.
Kombinaciju fontova uvek treba da završite sa opštom familijom fontova. Ta familija se može pronaći na
kraju liste Available Fonts.
Nakon što završite kliknite OK da biste zatvorili okvir za dijalog Edit Font List.
Definisanje dimenzija preko CSS-a
Kada dođe trenutak da se zada veličina, CSS nudi zbunjujuće obilje mogućnosti. Zbunjujuće zato što neko
treba da zna šta sve te opcije znače. Postoji puno različitih načina da se definiše veličina, ali se svi oni
generalno mogu svrstati u dve grupe: apsolutni i relativni. Apsolutne veličine ne mogu da se menjaju, bez
obzira na to gde se koriste.
•
•
•
•
Points (pt) i picas (pc) dolaze iz štampanja. Point je 1/72-i deo inča. Pica je 12 picasa ili 1/6 inča.
Milimetri (mm) i centimetri(cm) su standardne metričke jedinice. Milimetar je 1/100 centimetra. (2.54
cm je jednako 1-om inču).
Inči (in) su standardne veličine u običnom svetu, mada se retko koriste u svetu Weba. Jedan inč
ima.394 centimetra.
Piksel (px) je standardan način za definisanje veličine na računaru. Većina elemenata na web strani
je definisana u pikselima. Piksel je mali blok iz prostora monitora, odnosno fizički gradivni element
ekrana. Piksel se definiše kao razlomak inča na ekranu. Teškoće koje nastaju kada se radi sa
pikselima nastaju zato što PC računari koriste različite razlomke za određivanje veličine. CSS koristi
termin "referentni piksel" od oko 90 piksela po inču, što ne koristi nijedan operativni sistem. Ipak se
pikseli i dalje najviše koriste.
Relativne veličine su veće ili manje od neke zadate veličine.
•
•
•
Procenti (percentage) (%) – Univerzalni koncept. Vrednost u procentima je X% veća od standardne
vrednosti. Veličine koje se zadaju u procentima uvek kao osnovu koriste podrazumevanu vrednost
osnovne oznake. Na primer, ako je podrazumevana veličina fonta 10 jedinica, onda vrednost od
120% daje font od 12 jedinica. Zadavanje vrednosti od 20% daje 2 jedinice. Drugi primer su tabele.
Podesite tabelu na širinu od 80% i ona će se prikazati kao 80% prozora, pošto je osnovni element
oznaka body. Ako ćeliju u tabeli podesite na 80%, ona će zauzeti 80% tabele, pošto je osnovni
element za ćeliju oznaka table.
Em – Ovo je tajanstvena, ali korisna vrednost. Ona se definiše kao jednaka veličini pointa za dati
element fonta. Ako je font podešen na 12 piksela, onda je 1 em jednak 12 piksela. Na taj način
možete da podesite korisničku klasu na vrednost 2 em od neke vrednosti, na primer od prethodnog
fonta. Ako ovu klasu primenite na deo teksta, veličina će biti 2 ema ili 24 piksela.
Ex – Ovo je relativna vrednost, pošto se zasniva na visini malog slova x u izabranom fontu. Iako ovo
158 / 299
Dreamweaver MX 2004
može biti od velike pomoći kada se koristi izvestan font, treba da imate na umu da različiti fontovi
imaju različite veličine slova x. Kod jednog fonta malo slovo x može biti polovina velikog slova, a kod
drugog 60-70%. Na taj način se ex različito prikazuje kod različitih fontova.
CSS i dostupnost
U CSS-u ne postoji ništa što je po svojoj prirodi nedostupno. U pitanju je samo jezik za formatiranje. U
suštini, CSS je tako koristan web surferi često koriste svoje liste stilova da bi povećali funkcionalnosti. Na
primer, osoba sa smanjenim vidom može koristiti datoteku sa stilovima koja zadaje velika slova, dok osobe
koje ne razlikuju boje mogu koristiti datoteku sa stilovima da promene boje na belu i crnu. Posao web
dizajnera, vezano za ovakve osobe, je da ostane na njihovom putu. Dokumenti treba da budu tako
organizovani da mogu da se čitaju bez pridružene datoteke sa stilovima.
Bez obzira na to koju vrstu stilova koristite u svom dokumentu, dokument treba da bude čltljiv i funkcionalan i
bez njih. (Ne mora da bude lep, samo fukcionalan). Pošto su datoteke sa stilovima koje koriste korisnici
spoljašnje, nećete želeti da te stilove preklapate stilovima koje ste definisali interno. To znači da treba da
koristite spoljašnje datoteke sa stilovima, a ne interne liste stilova ili inlajn stilove. Standard Section 508 ne
ide dalje od ovoga, ali preporuke Web Accessibilitv Initiative, koje dolaze od W3C-a, dodaju neke stvari koje
se generalno odnose na formatiranje:
U vrednostima atributa markup jezika i osobina liste stilova treba koristiti relativne, a ne apsolutne jedinice.
(prioritet 2)
Drugim rečima, veličine fontova, kao i druge veličine, treba podesiti u procentima ili drugim relativnim
vrednostima, a ne u apsolutnim jedinicama. Dreamweaver nema alatku koja može da Vam pomogne da
napravite dostupan CSS. Ona Vam nije ni potrebna. Prilikom kreiranja stilova i lista stilova razmišljajte u
skladu sa prihvaćenim načelima. Opciju Design Time Style Sheets iz Dreamweavera možete da upotrebite
da pogledate kako strana prolazi u alternativnim okruženjima. Evo kako ćete to da uradite:
1. Napravite novi CSS dokument (izaberite File > New, a onda kao tip dokumenta izaberite Basic Pages
/CSS). Dok je dokument otvoren, preko panoa CSS Styles promenite osnovne HTML oznake za
tekst, tako da se prikazuju velika slova (na primer, veličina 200%, boja crna, font Georgia).
Promenite definiciju oznake body tako da boja pozadine bude bela. Možete i da promenite bilo šta
što je vidljivo, a što bi ciljni korisnik mogao da ima u svojoj datoteci sa stilovima. Zapamtite ovu
datoteku pod opisnim imenom, kao što je access.css.
2. Sada otvorite neki od HTML dokumenata koji su formatirani sa sjajnim, elegantnim stilovima iz
posljašnje datoteke.
3. U panou CSS Styles idite u meni Options i izaberite opciju Design Time Style Sheets. Kada se otvori
okvir za dijalog pronađite deo Show Only at Design Time i kliknite dugme +. Pronađite svoju
datoteku access.css.Sada pronađite deo Hide at Design Time i kliknite dugme +. Pronađite datoteku
sa stilovima koja je trenutno pridružena strani.
4. Kada završite kliknite OK da biste zatvorili okvir za dijalog. Dreamweaver sada prikazuje dokument
sa alternativnom listom stilova.
5. Stvari ćete vratiti na normalu ako odete nazad u pano CSS Styles, i njegov meni Options, izaberete
ponovo Design Time Style Sheets i u oba dela izaberete stilove koji su prikazani. Nakon toga kliknite
dugme.
Specifičnosti koje se postižu kontekstualnim selektorima
Kontekstualni CSS selektori, odnosno stilovi koji imaju efekat samo pod određenim uslovima, drastično
povećavaju snagu CSS formatiranja. Kao što smo napomenuli ranije u ovom poglavlju, to se u
Dreamweaveru lako radi. Da biste iskoristili prednosti koje ovo donosi, morate da uskladite svoj način
razmišljanja sa kontekstualnim selektorima.
Kreiranje više stilova za linkove na strani
Zamislite sledeću situaciju: Sve strane imaju deo za navigaciju sa strane, a umesto slika su tekstualni linkovi
sa CSS formatiranjem. Tu je i podnožje sa tekstualnim linkovima koji se ponavljaju. Glavni deo sa sadržajem
na svakoj strani može ili ne mora da sadrži inlajn linkove na tekst. Ako definišete neke kontekstualne
selektore, možete da dobijete različite stilove za linkove za svaku potrebu. Evo kako se to radi:
1. Za tekstualne linkove u glavnom delu strane ili promenite definiciju oznake a (i njene pseudo klase)
ili ostavite da se to prikaže sa podrazumevanim podešavanjima pretraživača. Posetioci su navikli da
vide podvučene linkove plave boje, tako da nema potrebe da menjate ono što je dobro.
2. Za deo sa strane napravite korisničku klasu. sidebar i primenite je na ćeliju tabele ili na element div
koji sadrži elemente tog dela sa strane. U ovom stilu možete da podesite elemente koje želite. To su
boja pozadine, formatiranje teksta ili bilo šta drugo.
159 / 299
Dreamweaver MX 2004
3. Sada napravite kontekstualni selektor. U okviru New CSS Style u Dreamweaveru, izaberite opciju
Advanced i u polju input unesite.sidebar a:link. To je ime Vašeg stila. Ovo će uticati samo na linkove
unutar elemenata na koje je primenjena klasa sidebar, odnosno samo na linkove koji se nalaze u
tom delu. Ovi linkovi će podražavati tradicionalni deo za navigaciju, tako da treba da obrišete
podvlačenje, napravite masna slova, promenite fontove i uradite šta god želite.
4. Ako želite da svojim linkovima date efekat rollover, napravite još jedan kontekstualni selektor.
Nazovite ga.sidebar a:hover i dodelite boju, kao i druge osobine koje želite.
5. Ponovite ovu proceduru i za linkove u podnožju. Napravite korisničku klasu.footer i primenite je na
ćeliju tabele ili na element div, koji sadrže elemente za navigaciju na dnu strane. Nakon toga,
definišite kontekstualni selektor.footer a, koji će kontrolisati izgled ovih linkova.
Brzo podešavanje izgleda ćelija u tabeli
Evo još jednog scenarija: Imate tabele koje se koriste za raspored elemenata na strani, ali imate i nekoliko
desetina velikih tabela sa podacima, koje su razbacane po sajtu, a koje želite da se prikazuju na određeni
način. Zelite da kontrolu vršite na najefikasniji način. Možete da koristite koriničke klase za formatiranje
tabela, ali je nedostatak što klase moraju da se primene. Formatiranje koje imate na umu mora da se primeni
na pojedinačne ćelije tabele, a ne samo na tabele. Da li morate da napravite korisničku klasu za ćelije sa
podacima i da onda idete po celom sajtu i primenjujete korisničke klase na desetine ćelija tabela u svakom
dokumentu? Ne. Vi ćete primeniti korisničku klasu na tabele sa podacima, a preko kontekstualnog selektora
primeniti i formatiranje ćelija. Evo kako se to radi:
1.
2.
Napravite korisničku klasu po imenu.datatable. Unesite format koji želite da imate u svojim
tabelama sa podacima, možda neku lepu boju pozadine ili format teksta za sadržaj. Primenite tu
klasu na sve tabele.
Sada napravite kontekstualni selektor. U okviru za dijalog New CSS Style izaberite opciju Advanced
i u polju input unesite ime stila.datatable td. Zadajte centralno ravnanje, dodelite okvir i naravite
dodatne formate koje želite da primenite na ćelije. Nakon što završite, ćelija u tabeli treba da bude
odmah formatirana, jer je korisnička klasa već primenjena.
Kada počnete da razmišljate na kontekstualan način, poboljšaćete svoju efikasnost u radu sa CSS-om i
bićete u stanju da radite na svojim projektima, a da kasnije ništa ne popravljate.
Kako da odjednom radite sa više različitih spoljašnjih datoteka sa stilovima
Zahvaljujući nasleđivanju i kaskadnosti, možete da imate i spoljašnju datoteku stilova i internu listu stilova, ili
možete da imate više spoljašnjih datoteka stilova, koje u istom trenutku kontrolišu isti dokument. Upamtite da
kaskadnost u CSS-u znači da se stilovi mogu sabirati i da kod koji je najbliže aktuelnom elementu ima veći
prioritet u odnosu na pravila sa višeg nivoa. Ako shvatite prednosti i nedostatke kombinovanja više stilova,
moći ćete da u punoj meri iskoristite prednosti koje donosi CSS.
Zajednička upotreba internih lista stilova i spoljašnjih datoteka sa stilovima
Zašto biste zajedno koristili interni i spoljašnji stil? Možda imate niz stilova koje primenjujete na celom sajtu i
koji definišu opšti izgled sajta. Ali, kad dođete na konkretnu stranu koja se razlikuje od ostalih i koja zahteva
različito formatiranje, morate se prilagoditi. I dalje želite da zadržite opšti izgled celog sajta, ali su potrebna
dodatna podešavanja koja se odnose samo na tu stranu. Ako za kreiranje stilova koristite pano CSS Styles,
lako je zajedno koristiti interne i spoljašnje sitlove. Svaki put kada pravite novi stil, preko opcije Define In
možete da podesite gde taj stil treba da ode. Upamtite da, prema pravilima nasleđivanja i kaskadnosti, interni
stil uvek pobeđuje spoljašnji, ako dođe do njihovog suprostavljanja. Treba što više stilova da definišete kao
spoljašnje, a onda selektivno preklapajte samo one stilove koji se razlikuju za konkretnu stranu. Ako u
spoljašnjoj datoteci sa stilovima definišete da oznaka P bude sa fontom Arial, da tekst bude levo poravnat i
da veličina slova bude 12, razmak između redova 15 i boja crna, a na trenutnoj strani Vam treba plavi tekst,
onda interno promenite oznaku p, ali ubacite samo konkretnu osobinu koju menjate, a to je u ovom slučaju
boja. Na taj način, ako se font u preduzeću promeni na Georgia, ovu stranu ne morate kasnije da
popravljate.
Upotreba više spoljašnjih datoteka sa stilovima
Ovo je trenutak kada život postaje stvarno interesantan. Ao ste dobar planer, možete da napravite
modularne efekte u dizajnu i da tako izvučete maksimum od CSS-a, čak i kod velikih sajtova. Zamislite
sledeću situciju: Imate datoteku sa stilovima koju ćete koristiti na sajtu, sa zadatim marginama, osnovnim
fontovima i veličinama i ništa više. Ovo se primenjuje na sve strane na sajtu. Nakon toga, svako odeljenje
ima svoju datoteku sa stilovima u kojoj definiše boje koje se primenjuju na pozadinu strana i tekst. U svim
odeljenjima imate neke zajedničke tipove strana, kao što su ulazne forme, koje imaju svoje zahteve u
160 / 299
Dreamweaver MX 2004
pogledu stila.
Redosled
Jednom HTML dokumentu možete da pridružite ili da sa njim povežete onoliko datoteka sa stilovima koliko
želite. Prema pravilima kaskadnosti, datoteke sa dna liste imaju prioritet (pošto su najbliže strani i njenom
sadržaju). Pošto je stil na vrhu najdalje od strane, njega će ostali stilovi preklopiti. Sto je u hijerarhiji datoteka
sa stilovima niže, to je njen prioritet viši.
Kako ovo radi u Dreamweaveru
Ako ne pazite, prilikom pridruživanja više spoljašnjih datoteka sa stilovima možete da upadnete u ozbiljne
probleme.
Prvo, treba da imate na umu da Dreamweaver podrazumevano nove datoteke stilova dodaje na dno liste.
Ovo važi bez obzira na to da li se stil linkuje ili uvozi. Ako ste u mogućnosti, pridružite stilove po pravilnom
redosledu, počev od najnižeg prema najvišem prioritetu. Njihov redosled u panou CSS Styles je isti kao u
dokumentu.
Sta možete da uradite ako redosled datoteka sa stilovima nije pravi? Redosled ne možete da promenite
preko samog panoa CSS Styles. Možete da pređete u prikaz Code, da pronađete kod za oba stila i da ih
premestite na drugu lokaciju.
Drugo, moguće je (čak i ispravno) uvesti jednu datoteku sa stilovima u drugu. Ako ste prilikom pridruživanja
datoteke sa stilovima u panou CSS Styles selektovali drugu datoteku sa stilovima, Dreamweaver će novu
datoteku ubaciti u onu koju ste selektovali, a neće je pridružiti tekućem dokumentu. Ako se to desi, nova
datoteka sa stilovima se u listi stilova prikazuje uvučeno. U tom slučaju možete da otvorite drugi dokument
sa stilovima u Dreamweaveru, da pronađete kod koji je uvezen i da ga obrišete.
161 / 299
Dreamweaver MX 2004
12. CSS pozicioniranje, nivoi Dreamweavera i raspored na
strani
Šta je nivo (layer)? Ako pogledate HTML referencu, videćete da u Netscapeu 4 postoji stara oznaka layer,
ali to nije ono što se u Dreamweaveru podrazumeva pod nivoima, ni ono što većina web programera danas
koristi. Nivo je intuitivan termin, koji se koristi za elemente na strani. Ovi elementi se preko CSS osobina
pozicioniraju i postavljaju u nivoe iznad drugih elemenata. U ovom poglavlju ćemo termin koristiti na taj
način.
Osnovno o nivoima
Ako želite da sa nivoima u Dreamweaveru radite na pravi način, morate prvo da shvatite odakle oni dolaze i
šta rade. Ako se prvo pozabavite osnovama, poštedećete sebe neprijatnih situacija.
CSS-P i nivoi u pretraživaču
Originalna CSS 1 specifikacija pokriva različite opcije formatiranja teksta i elemenata na strani u HTML-u.
Ipak W3C nije tu završio. CSS-P je uveo mogućnost da se upravlja pozicijom elemenata na strani (P je od
pozicija). Pored pozicioniranja, CSS-P omogućava da se elementima na strani dodeli i širina, vidljivost, pa
čak i dubina (z-indeks), tako da elementi na strane mogu da se postavljaju u nivoe. (Odatle termin nivo).
Kako radi pozicioniranje u CSS-u
Putem kontrole pozicije, bilo koji element na strani se može prervoriti u samostalan entitet i, makar teoretski,
web dizajneri ne moraju da koriste tabele i za jednostavne stvari kao što je postavljanje elementa na strani,
tamo gde on treba da bude.
Tipovi pozicioniranja
Postoje tri vrste pozicioniranja. To su statičko, relativno i avsolutno. Evo kako rade ovi tipovi:
• Statičko pozicioniranje dovodi do toga da element postane deo normalnog toka strane. To je mesto
na kome se element nalazi na strani, ako nije zadata pozicija. Element se na strani prikazuje kao
deo normalnog toka elemenata. Kod za statičko pozicioniranje nekog elementa bi mogao biti: <h1
style = "position:static; " >Howdy!</h1>
• Apsolutno pozicioniranje postavlja element na apsolutnom rastojanju od ivica prozora pretraživača,
ili osnovnog elementa. Rastojanje se može zadati u pikselima, procentima ili nekim drugim
jedinicama mere koje CSS podržava.
Kod za apsolutno pozicioniranje nekog elementa bi mogao da izgleda ovako:
<h1 style="position:absolute; left:0px; top:0px; "> wHowdy!</h1>
Pod pretpostavkom da ovaj element nije u okviru tabele, elementa div ili nekog drugog elementa na strani,
on je direktno potčinjen oznaci body, pa će se postaviti u gornji levi ugao, bez obzira na druge elemente na
strani.
• Relativno pozicioniranje postavlja element na strani relativno u odnosu na neki drugi sadržaj na
strani. Ovo je slično sa statičkim pozicioniranjem, u tome da je podrazumevana pozicija elementa iza
ili ispod elemenata koji u HTML kodu prethode tom elementu, kao i pre ili iznad elementa koji u
HTML kodu slede iza. Element sa relativnom poziciojm može biti pomeren u odnosu na
podrazumevanu poziciju i to preko arributa left, right, top i bottom. Kod za relativno pozicioniranje
nekog elementa na strani bi mogao da izgleda ovako: <h1 style="position:relative; left:50px;
top:10px; "> Howdy!</h1>. Pod pretpostavkom da se ovaj element pojavljuje ispod tabele, kod koji
je ovde zadat će pomeriti celu ivicu elementa za 50 piksela udesno od mesta gde bi u suprotnom bio
ispod tabele, kao i za 10 piksela naniže u odnosu na mesto gde bi bio.
• Fiksno pozicioniranje je slično sa apsolutnim, a razlika je u tome da kada se strana pomera preko
klizača, fiksni elementi se ne pomeraju. Kod koji fiksno pozicionira neki element bi mogao biti: <h1
style="position:fixed; left:0px; top:0px; ">Howdy!</h1>. Pod pretpostavkom da ovaj element nije
ugnježđen u neki drugi element (izuzev u okviru oznake body), on će se postaviti u gornjem levom
uglu prozora pretraživača i ostaće tamo, čak i kada se korisnik preko klizača kreće naniže. (Na
žalost, fiksno pozicioniranje nije dobro podržano, kao ostali tipovi, čak ni u novijim pretraživačima.)
Pozicioniranje i ugnježđavanje
162 / 299
Dreamweaver MX 2004
Pozicioniranje postaje složenije kada se elementi gnjezde unutar drugih elemenata. U većini pretraživača,
kao i u CSS-2 specifikaciji, se način pozicioniranja interpretira u zavisnosti od toga da li osnovni element za
taj element takode ima zadaru poziciju i da li je zadato kao nestatička. Ako osnovni element nema zadat
arribut position ili ima poziciju podešenu na static, onda će element dete koji ima apsolutnu poziciju biti
postavljen relativno u odnosu na najbližeg predaka, sa apsolutnim ili relativnim pozicioniranjem. Ako nema
takvog pretka (uključujući i telo dokumenta), onda će element dete biti postavljen relativno u odnosu na
prozor.
Primena pozicioniranja na elemente strane
Element strane se može pozicionirati preko inlajn stila. Evo kako to izgleda:
<h1 style="position:absolute; left:150px; top:80px">Howdy!</h1>
Može se pozicionirati i preko korisničke klase koja uključuje poziciju.
.logotest { position: absolute; left:150px; top:80px; }
<h1 class="logotest">Howdy!</h1>
Pošto definicija konkretnog stila koja sadrži i poziciju može u dokumentu da se koristi samo jednom,
informacije iz CSS stila mogu da se pridruže elementu strane preko jedinstvenog atributa ID:
#logotest { position: absolute; left: 150px; top: 80px; };
<h1 id="logotest">Howdy!</h1>
Ako je definicija stila postavljna u spoljašnji dokument sa stilovima i pridružena većem broju HTML strana,
svaka strana može da ima jedan element sa ID oznakom logotest, čija se pozicija kontroliše preko stila. Kao i
kod bilo kojeg CSS-a, inlajn metod je najmanje efikasan, pošto se informacije nikad ne mogu primeniti i na
druge elemente na strani, bilo u istom bilo u nekom drugom elementu.
Pozicioniranje elemenata na strani preko oznaka div i span
Teoretski se bilo koji element na strani može pozicionirati preko CSS-P-a. Elementi koji mogu biti blokovi
(tabele, zaglavlja i pasusi) se najčešće tako pozicioniraju, premda se mogu pozicionirati i inlajn elementi. Sta
ako želite da zadate poziciju za grupu elemenata, kao što su zaglavlje i naredni pasus? Mogli biste da celu
grupu ubacite u jednu oznaku, koja nema svoje karakteristike, koje bi se preklapale sa nekim drugim
elementom, a da onda na tu oznaku primenite korisničku klasu.
Dve oznake koje se koriste u ovu svrhu su div (blok) i span (inlajn). Kod za pozicioniranje grupe elemenata bi
mogao da izgleda ovako:
<div style="position:absolute; left:150px; top:80px; width:200px">
<h1>Howdy!</h1>
<p>Welcome to my brand-new website!</p> </div>
ili
<span style="position:absolute; left:150px; top:80px; width:200px">
<h1>Howdy!</h1>
<p>Welcome to my brand-new website!</p>
</span>
Elementi div i span mogu da se gnjezde jedan u drugom. Svaki HTML element koji je u okviru oznake div ili
span može takođe da ima zadatu poziciju:
<div style="position:absolute; left:150px; top:80px;">
<h1 style="position:absolute; left:50px; top:50px;"> Howdy!</h1>
</div>
Kako u Dreamweaveru rade nivoi
Nivoi u Dreamweaveru daju interfejs za rad sa CSS-P-om u prikazu Design. Kao i bilo koji drugi alat, i oni se
mogu koristiti ili zloupotrebiti. Upamtite da, prilikom rada sa nivoima, uvek treba da pratite šta se dešava u
kodu.
163 / 299
Dreamweaver MX 2004
Crtanje i ubacivanje nivoa
Najjednostavniji način za kreiranje nivoa je da preko objekta Draw Layer ubacite objekte nivoa. Ovaj objekat
se nalazi na paleti Layout Insert. Ovaj alat se koristi tako što se izabere sa palete Insert, kursor se postavi u
prozor Document, a onda se prevuče na crtež. Nakon što završite, Dreamweaver prikazuje nivo koji se
uklapa u Vaše dimenzije.
Možete i da izaberete Insert > Layout Objects > Layer. Ovim se u dokument ubacuje nivo sa
podrazumevanim dimenzijama i pozicijom. Ako posle kreiranja nivoa proverite u prikazu Code, videćete da je
Dreamweaver napravio praznu oznaku div sa inlajn stilom i zadatom pozicijom, dimenzijama i indeksom
dubine.
<div id="l_ayer1" style="position:absolute; width:200px;
height:115px; z-index:1; left: 113px; top: 117px; "></div>
Elementi čija je pozicija zadata apsolutno ne zahtevaju sve ove atribute, ali se oni zadaju po
podrazumevanoj vrednosti.
Osobine nivoa
Kada izaberete nivo, pojaviće se Layer Property Inspector. Ovo možete koristiti za promenu ili brisanje
osobina, ili za promenu oznake koja se koristi za nivo od div na span. Ako želite da promenite
podrazumevane vrednosti kod ubacivanja nivoa, možete i da izaberete Edit > Preferences/Layers. Možete i
da promenite veličinu i poziciju nivoa interaktivno, pomeranjem i promenom veličine u prozoru Document.
164 / 299
Dreamweaver MX 2004
Nevidljivi elementi: Markeri nivoa
Pošto nivoi koji se prave preko objekta Layer koriste apsolutno pozicioniranje, njihovo postavljanje u prikazu
Design nije obavezno blizu mesta gde je ubačen kod. Kod za nivo se može naći odmah iza otvorene oznake
body, a da se sam nivo nađe na dnu strane. Da biste mogli da pratite kod, Dreamweaver ima opciju da vidite
ikonu koja pokazuje gde se on nalazi. Ovo ćete uključiti ako odete u Preferences (Edit > Preferences) i u
kategoriji Invisible Elements proverite da li je izabrana opcija Anchor Point for Layers. Nakon toga, u meniju
View Options izaberite Visual Aids i selektujte Invisible Elements. Na slici je prikazano kako ova pomoć
izgleda.
Rukovanje nivoima preko panoa Layers
Pano Layers može da Vam pomogne da rukujete svojim nivoima. On ukratko pokazuje koliko nivoa u
dokumentu postoji, koja su njihova imena, koji je redosled (koji je ispred koji iza), kao i koji su vidljivi.
(Nevidljivi nivoi nisu korisni kod kreiranja rasporeda strane, ali su glavni kod DHTML skriptova.) Pano Layers
165 / 299
Dreamweaver MX 2004
možete da upotrebite i za izbor nivoa koje biste inače teško selektovali, pošto su nevidljivi ili zato što su
prekriveni nekim drugim nivoom.
Panou Layers ćete pristupiti ako izaberete Window > Layers. Nakon što se otvori pano Layers, on se
prikazuje kao deo grupe Advanced Layout, vezan zajedno sa drugim panoima.
Nivoi koje ste postavili na tekuću stranu se u panou prikazuju kao lista imena, koja ukazuje na njihov
redosled (ili z-indeks). Taj redosled se može menjati prevlačenjem nivoa po ovoj listi. Vidljivost nivoa možete
da menjate preko leve kolone, sa ikonom oka. Preklapanje nivoa možete da uključite ili isključite putem
opcije Prevent Overlaps. Kao što smo objasnili, kod nivoa koji se preklapaju postoji veći rizik da se ne
ponašaju kako treba, nego kod nivoa koji se ne preklapaju. Preklapanje možete da isključite i ako mislite da
ćete kasnije nivoe prebaciti u tabelu, da biste dobili kompatibilniji raspored. (Ovo možete da uradite preko
komande Modify > Convert > Layers to Table, iako se time dobija glomazna struktura tabele.)
Dizajn nivoa u prikazu Design
Ako ste vizuelna osoba, onda će Vam se dopasti intuitivnost kreiranja dizajna strane preko nivoa, u prikazu
Design.
Selektovanje nivoa
Nivo ima tri moguća stanja za selektovanje. Svako od njih je u prikazu Design predstavljeno različitim
grafičkim stanjem :
• Kada je izabran nivo, on u svom gornjem levom uglu prikazuje mali beli pravougaonik, kao i osam
crnih kvadrata po obimu. Beli pravougaonik je ručica za selektovanje. Crni kvadrati su ručice za
promenu veličine.
• Kada se kursor postavi unutar nivoa, nivo izgleda kao pravougaonik. U njemu postoji pravougaonik
za selektovanje, ali ne postoje ručice za promenu veličine. Nivo ovako izgleda odmah posle
ubacivanja, pošto Dreamweaver pretpostavlja da ćete baš ovako početi ubacivanje nekog sadržaja u
novi nivo.
• Kada nivo nije selektovan, on izgleda kao pravougaonik i nema ni ručica za selektovanje ni ručica za
promenu veličine.
Ako želite da selektujete neki nivo, treba da uradite jedno od sledećeg:
• Kliknite neku od stranica nivoa.
• Kliknite unutar nivoa, tako da se u gornjem levom uglu prikaže ručica za selektovanje, a onda kliknite
tu ručicu.
• Kliknite unutar nivoa i preko tag selectora, koji se nalazi na dnu prozora Document, selektujte
oznake div ili span, koje čine nivo.
• Ako su prikazani nevidljivi elementi, kliknite marker za taj nivo.
• Ako se nalazite u panou Layers, kliknite ime tog nivoa.
166 / 299
Dreamweaver MX 2004
Ako želite da iz prozora Document izaberte više nivoa, kliknite jednu od stranica ili ručicu za izbor u prvom
nivou koji želite da izaberete, a onda istovremenim pritiskom na taster Shift i klikom miša izaberite i druge
nivoe. Ako su prikazani nevidljivi elementi, možete da zajedničkim pritiskom tastera Shift i klikom miša na
marker nivoa izaberete svaki od njih. Ako želite da preko panoa Layers izaberete više nivoa, pritisnite Shift i
kliknite imena nivoa koje želite da izaberete. (Ne morate pokazivati redom.) Bez obzira na to koji metod za
izbor koristite, poslednji nivo koji ste izabrali će prikazati crne ručice za promenu veličine. Ostali izabrani
nivoi će svoje ručice za promenu veličine prikazati u beloj boji.
Imena nivoa
Svaki nivo u dokumentu mora da ima jedinstvenu ID oznaku. Dreamweaver ID daje oznake kao Layerl,
Layer2, Layer3, itd. ID oznake nivoa se koriste za refernciranje u CSS-u, kao i u skriptovima koji koriste ove
nivoe. Imena nivoa mogu da sadrže samo jednu reč, a ne sme biti specijalnih karaktera. Iako ne morate da
menjate podrazumevana imena nivoa, nije loše da nivoima date imena koja znače više od običnog Layerl.
Na taj način kasnije lako možete da identifikujete te nivoe. Još bolje je da imena dajete prema šemi imena, u
kojoj ime svakog nivoa govori nešto o njegovoj poziciji ili funkciji. Na primer, nivoi bi mogli da se zovu
LayerNav, ako je u pitanju nivo sa delom za navigaciju, ili LayerFooter, za nivo sa podnožjem. Ime nivoa
možete promeniti preko panoa Layers, ili preko Property Inspectora. Dva puta brzo kliknite nivo u panou
Layers i unesite novo ime. Ime možete da promenite i u polju Layer ID u Property Inspectoru.
Ubacivanje sadržaja u nivoe
Ubacivanje sadržaja u nivoe je jednostavno. Samo kliknite unutar nivoa i ubacite sadržaj na uobičajen način.
Sadržaj može da se ubacuje preko palete Insert ili menija Insert iz Dreamweavera, ili prevlačenjem preko
panoa Assets, ili sa nekog drugog mesta, ili postavljanjem sa Clipboarda.
Promena veličine nivoa prevlačenjem
Ako želite da u prozoru Document promenite veličinu nivoa, prvo ga selektujte tako da se prikažu ručice za
promenu veličine. Nakon toga kliknite i prevucite neku od tih ručica. Preko ručica u uglu možete da
istovremeno menjate i dužinu i visinu, a preko ostalih možete da menjate veličinu samo u jednom pravcu.
Premeštanje nivoa
Ako iz prozora Document želite da promenite poziciju nivoa, samo uhvatite taj nivo, preko njegove ručice za
izbor ili na ivici, a onda kliknite i prevucite. Kursor će promeniti oblik u strelicu usmerenu na sve četiri strane
(ako ste uhvatili ručicu za izbor) ili će dobiti oblik ruke, ako ste uhvatili okvir. Ako želite da nivo pomerate po
jedan piksel, izabrite taj nivo i preko strelica sa tastature ga pomerajte. Ako želtie da pomeranje bude za po
10 piskela, dok pritiskate strelice, držite pritisnut taster Shift.
Ravnanje nivoa
U Dreamweaveru postoji mogućnost ravnanja nivoa. Ako želite da poravnate nekoliko nivoa, sa okvirom ili
nekim drugim nivoom, treba da uradite sledeće:
1. Odredite koji se nivo u odnosu na koji ravna (koji nivo se ne pomera, dok se drugi pomeraju da bi
se poravnali sa njim).
2. Svi nivoi će biti poravnati sa poslednjim nivoom koji ste izabrali. Prema tome, preko neke od tehnika
za izbor koje smo pomenuli, selektujte nivoe koje želite da ravnate, a nivo koji se ne pomera
izaberite poslednji. (Njegove ručice za izbor će biti prikazane crnom bojom, što ukazuje da se on ne
pomera.)
3. Idite u meni Modify > Align i iz podmenija izaberite neku od opcija za ravnanje (Left, Right, Top,
Bottom).
Na slici je prikazano nekoliko nivoa koji su poravnati u odnosu na nepokretan nivo.
167 / 299
Dreamweaver MX 2004
Uparivanje veličine nivoa
Prema proceduri za ravnanje nivoa, možete i da ih promenite, tako da njihove dimenzije odgovaraju jedna
drugoj. Ovo ćete uraditi ako izaberete nivo i izaberete Modify Align, a onda izaberete opciju Make Same
Height ili Make Same Width. Kao i kod ravnanja, poslednji nivo određuje konačnu visinu ili širinu izabranih
nivoa.
Ugnježđavanje nivoa
Ugnježđeni nivo je nivo koji se nalazi unutar drugog nivoa. Evo kako izgleda kod:
<div id="Layer1" style="position:absolute; width:200px;
Height:115px; z-index:1; left: 200px; top: 200px;">
<div id="Layer2" style="position:absolute; width:100px;
height:100px; z-index:1; left: 50px; top: 50px;">
[Layer2 content goes here]
</div>
[Layer1 content goes here]
</div>
Ugnježđavanje se često koristi za grupisanje nivoa. Ugnježđeni nivo se pomera zajedno sa osnovnim
nivoom i može se podesiti da od roditelja nasledi i vidljivost.Ugnježđeni nivo možete da napravite na jedan
od sledećih načina:
• Postavite kursor unutar postojećeg nivoa i izaberite Insert > Layer.
• Prevucite dugme Draw Layer sa palete Insert i postavite ga u postojeći nivo.
• Kliknite dugme Draw Layer sa palete Inset, držite pritisnut taster Alt/Opt i nacrtajte nivo unutar
postojećeg.
• Sa panoa Layers izaberite nivo, a onda držite pritisnut taster Ctrl/Cmd i prevucite ime nivoa u nivo
koji želite da mu bude roditeljski.
• Ako su prikazani nevidljivi elementi, prevucite marker nivoa deteta unutar nivoa roditelja.
Nakon što je jedan nivo ubačen u drugi, nivo dete (ugnježđeni) može da skoči na novu lokaciju u prozoru
Document. Razlog je što se pozicija nivoa sada računa relativno u odnosu na poziciju nivoa roditelja. To
dalje znači da, ako sada pomerate nivo roditelj, pomeraju se i njegova deca, ali ako pomerate nivo dete,
roditelj se ne pomera. Na slici je pokazano kako ugnježđeni nivoi izgledaju u različitim interfejsima
168 / 299
Dreamweaver MX 2004
Dreamweavera. Ako su prikazani nevidljivi elementi, u prozoru Document se prikazuje zlatna kotva, koja
ukazuje na ugnježđenost nivoa. U panou Layers ugnježđeni nivo je prikazan tako što je njegovo ime
uvučeno ispod nivoa roditelja. Kliknite dugme plus/minus sa leve strane nivoa roditelja, ako želite da
prikažete ili sakrijete njegovu decu.
Rad sa nivoima
Ovo su osnove rada sa nivoima u Drearmveaveru. Sta još postoji? Istraživanje veza između nivoa i CSS-Pa, kao i iskorišćavanje prednosti koje nudi CSS.
Nivoi kao objekti sa stilovima
Iako se u Dreamweaveru sa nivoima najviše radi preko objekta Layer, tu nije kraj priče. Bilo koji element na
strani, čiji stil sadrži osobinu za definisanje apsolutne ili relativne pozicije, može da se u prikazu Design
tretira kao nivo. Ovo je dobra vest, pošto Vam se možda neće dopasti način na koji objekat Layer vrši
kodiranje, ali i dalje želite da koristite dobre stvari koje interfejs nivoa nudi u prikazu Design.
Kreiranje nivoa preko CSS-a
Da biste napravili element čija se pozicija određuje preko CSS-a, a koji radi kao nivo, i da pri tome ne
koristite objekat Layer, treba da definišete stil koji sadrži informacije o relativnoj ili apsolutnoj poziciji. Ako je
stil korisnička klasa, ili ID, onda treba i da ga primenite na element strane. Evo kako se to radi:
1. Napravite novi stil. Možete da koristite pano CSS Styles ili neki drugi način.
2. Kada se otvori okvir za dijalog New Style, napravite korisničku klasu. Ovo ćete uraditi tako što ćete
izabrati Class i u polje Selector uneti ime. Možete i da napravite ID i da izaberete Advanced i
unesete znak za funtu, iza kojeg sledi ime. Ovo se radi u polju Selector. Stil možete da napravite
interno ili eksterno. Kada završite, kliknite OK.
Kada se otvori okvir za dijalog CSS Style Definition, idite u kategoriju Positioning. Iz padajućeg menija Type
izaberite Absolute ili Relative. Nakon toga unesite vrednosti u poljima Left, Top, Right ili Bottom. Pazite da ne
dodelite vrednosti koje su kontradiktorne. Nemojte dodeljivati vrednost za Left i Right istovremeno, kao ni za
Top i Bottom. Pre nego što napustite okvir za dijalog CSS Style Definition, možete da podesite i druge
karakteristike, ili ako ste zainteresovani samo za pozicioniranje, razmotrite definisanje stila samo sa tim
elementima. Kada završite, kliknite OK da biste zatvorili okvir za dijalog.
169 / 299
Dreamweaver MX 2004
Primena stila za pozicioniranje na postojeći element na strani
Sada možete da primenite tu klasu ili ID. Izaberite element na strani kojem želite da zadate poziciju (hl, img
ili neki drugi). Ako je Vaš stil klasa, onda preko nekog od metoda koje smo već pomenuli možete da tu klasu
primenite. Ako je stil ID, onda možete da ga primenite preko kartice Attributes ili Tag Selectora (ID je u
kategoriji atributa CSS/Accessibility), tako što ćete uneti ime (bez oznake funte).
Čim ovo uradite, pozicioniranje će pomeriti element. Elementi će se pojaviti u prikazu Design okruženi
pravougaonikom nivoa. Dokle god je pravougaonik nivoa izabran, u Property Inspectoru se element
prikazuje kao nivo. Ako kliknete unutar nivoa, pojaviće se Property Inspector za originalni element. Ako ste
stil definisali kao klasu, onda treba da novom elementu na strani koji je sada "nivo" dodelite ID. Ovo možete
da uradite preko polja ID u Layer Property Inspectoru.
Kreiranje elementa div koji sadrži stil
Možda želite da primenite svoj novi stil na oznaku div, koja može da sadrži više elemenata. U
Dreamweaveru postoji objekat Div, koji se koristi baš u takvim situacijama. Treba da uradite sledeće:
1. Ako već imate sadržaj na strani, koji treba da okruži oznaku div, izaberite ga. Ako to nije slučaj,
stavite kursor tamo gde želite da se ubaci oznaka div i njen sadržaj.
2. Sa palete Layout Insert izaberite objekat Div ili iz glavnog menija izaberite Insert > Layout Objects >
Div. Otvoriće se okvir za dijalog Insert Div Tag.
3. Ako ste stil definisali kao klasu, izaberite ga iz padajućeg menija Class u ovom okviru za dijalog. U
polju ID unesite jedinstvenu reč.
4. Ako ste stil definisali kao ID, izaberite ga iz padajućeg menija ID. (U ovom meniju se prikazuju samo
170 / 299
5.
Dreamweaver MX 2004
ID oznake koje se ne koriste. Za razliku od klasa, ID se u dokumentu može koristiti samo jednom.)
Opcija Insert omogućava da definišete gde treba da se prikaže element div. Ako ste izabrali neki
sadržaj, on će ga okružiti. Ako ništa nije izabrano, onda se on postavlja na mesto kursora. Oznaku
možete i da ubacite neposredno ispred ili iza drugih oznaka, kao što je na primer body.
Nakon što izaberete ono što želite, kliknite OK da biste zatvorili okvir za dijalog i ubacite oznaku div. Sada
ste od oznake div kreirali nivo, ali za razliku od nivoa koje je napravio Dreamweaver, ovi nivoi svoju poziciju,
dimenzije kao i druge osobine izvode iz korisničke klase ili ID-a.
Rad sa nivoima koji predstavljaju stilove iz CSS-a
Sa nivoima koji su krierani na ovaj način se u osnovi radi na isti način kao i sa nivoima koji su napravljeni
preko objekta Layer, ali postoji jedna bitna razlika. Svaki put kada promenite osobine novog nivoa preko
Property Inspectora ili Tag Inspectora (preko panoa Layer, ili preko prozora Document), menja se i stil. Ovo
se dešava čak i ako se stil nalazi u spoljašnjoj datoteci sa stilovima. Koje prednosti donosi kreiranje nivoa na
ovaj način, u odnosu na kreiranje nivoa preko objekta Layer iz Dreamweavera? Prvo, tu su prednosti koje
donosi odvajanje forme i sadržaja koje postoji CSS-u. Pošto su informacije o stilu u posebnoj klasi ili ID-u,
kod na strani nije pretrpan različitim informacijama. Ako je stil definisan u spoljašnjoj datoteci, on se može
primeniti na više strana na sajtu za formatiranje koje uključuje i pozicioniranje. Informacije o poziciji mogu da
se uklone ako se obriše dodeljivanje stila, tako da se strane mogu brzo ažurirati. Pored ovog, pano CSS
Styles omogućava da dobijete efekte pozicioniranja koje nije moguće dobiti preko nivoa napravljenih preko
objekta Layer. Tu se misli na dodeljivanje pozicije na bazi desne i donje pozicije, umesto na bazi leve i
gornje. To znači da možete da napravite element na strani koji je priljubljen uz desnu ili donju ivicu prozora,
umesto da bude gore levo. Pazite: Property Inspector prikazuje samo levu i gornju poziciju, tako da ako
definišete nivo preko CSS-a preko pozicioniranja desno i dole, nećete ovde moći da menjate ili vidite te
osobine. Ako u prikazu Design pomerite nivo, Dreamweaver će dodati levo i gornje pozicioniranje, umesto
originalnih koordinata desno i dole. Ovim se dobija matematička nepravilnost koja u pretraživaču može da
dovede do problema.
Podrška pretraživača za nivoe
Na žalost, podrška za CSS-P u pretraživačima je i dalje prilično iznuđena. Nijedan pretraživač pre verzije 4
ne podržava CSS-E Neki od novijih pretraživača, koji obećavaju kompatibilnost sa standardima bi trebalo da
stranu prikažu na pravi način. Ipak, i dalje postoji puno prostora za interpretaciju rada sa CSS-om, tako da bi
prilikom rada sa nivoima uvek trebalo da nastupate oprezno. Za strane koje dobro rade u starim i
pretraživačima koji nisu stadnardni, čak i ako nisu podržane neke nove stvari, se kaže da su graciozno
degradirane. Možda formatiranje preko nivoa neće raditi baš najbolje, ali će strana i dalje biti čitljiva, a njeni
linkovi i druge osobine će biti funkcionalni. Kako da budete sigurni da je strana sa nivoom graciozno
degradirana? Pazite da sadržaj bude predstavljen po logičnom i čitljivom redu, čak i ako nema nekih
posebnih mogućnosti za pozicioniranje. To je ujedno i način da stranu sa nivoima učinite dostupnom. Kako
možete da proverite da li će se strana prikazati na prihvatljiv način i bez formata sa nivoima? Verovatno je
najlakše rešenje da u pretraživaču isključite podršku za liste sa stilovima. Ako je formatiranje preko nivoa
ubačeno u spoljašnju datoteku sa stilovima, preko Dreamweavera, odnosno njegove opcije Design Time
Style Sheets, možete da privremeno sakrijete lisru sa stilovima.
171 / 299
Dreamweaver MX 2004
13. Upravljanje lokalnim sajtom
Kako Dreamweaver rukuje lokalnim sajtovima
U srcu rukovanja sajtom u Dreamweaveru je koncept lokalnog sajta. Lokalni sajt je kompletna verzija web
sajta, koja postoji na Vašem računaru. On sadrži iste dokumente i resurse koji će se eventualno publikovati,
sa istim rasporedom datoteka i fascikli. Lokalni sajt je razvojno i test okruženje. Strane na kojima trenutno
radite, kao i druge resurse, smeštate na lokalni sajt. Struktura fascikli i rukovanje sadržajem strana se radi
odavde. Alati za rad sa lokalnim sajtovima koji postoje u Dreamweaveru omogućavaju da obavljate proveru
pravopisa, operacije pronalaženja i zamene, kao i proveru konzistentnosti.
Lokalni sajt se u Dreamweaveru definiše tako što se Dreamweaver usmeri na fasciklu u kojoj planirate da
čuvate datoteke lokalnog sajta. Ova fascikla je korenska fascikla lokalnog sajta. Nakon što fasciklu označite
kao korensku, Dreamweaver svaku stavku koju stavite ispod te fascikle tretira kao deo sajta. Ako želite da na
sajt dodate neki dokument ili resurs, jednostavno ih postavite u ovu fasciklu. Ako želite da dokument uklonite
sa sajta, a da ga ne obrišete fizički sa računara, onda ga uklonite iz ove fascikle. Sve vreme dok radite na
različitim datotekama, koje se nalaze na sajtu, Dreamweaver prati lokalnu korensku fasciklu, prateći koje su
datoteke dodate ili uklonjene, zapisujud kad god se datoteci ili fascikli promeni ime, ili mesto u strukturi. On
ispituje veze između dokumenata, da bi bio siguran da su relativni linkovi tačni. Korenska fascikla lokalnog
sajta je sastavni deo rada sa sajtovima u Dreamweaveru.
Definisanje lokalnog sajta
Kreiranje i upravljanje sajtovima se u Dreamweaveru radi preko komande Site > Manage Sites. Sve opcije
vezane za sajtove se definišu u okviru za dijalog Site Definition. Ako želite da napravite novi sajt, ili da
promenite postojeći, treba da koristite okvir za dijalog Site definition. Izaberite Site > Manage Sites (ili iz
palete panoa Site, iz padajućeg menija, izaberite Manage Sites). Ovim se otvara okvir za dijalog Manage
Sites. Ovaj okvir za dijalog je centralno mesto odakle možete da pravite novi sajt (preko dugmeta New) ili da
menjate postojeći (preko dugmeta Edit).
U okviru za dijalog Site Definition postoje dva načina za definisanje informacija vezanih za sajt. To su Basic
(poznat i kao Site Wizard) i Advanced (napredni) režimi. Osim ako ste potpuni početnik u kreiranju sajtova,
režim Advanced može biti vrlo efikasan. On omogućava da podesite iste osnovne informacije koje prikuplja i
čarobnjak Site Wizard, ali ima i mnogo dodatnih opcija. Informacije su svrstane u logičke kategorije, ali nema
pristupa pitanje - odgovor, koji postoji kod čarobnjaka.
Definisanje lokalnog sajta preko režima Advanced ćete početi pristupom okviru za dijalog Site Definition (Site
> New Site > Manage Sites > New). Izaberite karticu Advanced. Informacije o sajtu su podeljene u kategorije
koje pokrivaju sve aspekte dinamičkih i statičkih sajtova. Za defmisanje lokalnog sajta su potrebne samo
informacije koje se nalaze u kategoriji Local Info. Za definisanje sajta su apsolutno obavezne samo dve
172 / 299
Dreamweaver MX 2004
stavke. Obavezne informacije u kategoriji Local Info (ove informacije prikuplja i čarobnjak Site Wizard) su:
•
•
Site Name (ime sajta) – Tu možete da zadate ime preko kojeg Dreamweaver pristupa sajtu.
Local Root Folder – Ovde se definiše fascikla na računaru, koja se koristi kao koren sajta. Fasciklu
možete da izaberete preko dugmeta Browse.
U kategoriji Local Info možete da zadate i neke informacije koje su opcionalne (ne mogu se zadati preko
čarobnjaka Site Wizard). To su sledeće informacije:
• HTTP Addres – Unesite kompletnu HTTP adresu, koja će biti glavna adresa sajta, kada se postavi
na web server. Adresa, na primer, može biti, http://www.mydomain.com. Ako na sajtu između
dokumenata koristite apsolutne linkove, Dreamweaver će preko ove informacije proveravati da li
linkovi vode na prava mesta. Ako za internu navigaciju po sajtu ne budete koristili apsolutne adrese,
onda ovo polje možete da ostavite prazno. Ako ste za definisanje sajta koristi čarobnjaka Site
Wizard, onda je podrazumevana adresa http://.
• Enable Cache – Kao što smo pomenuli, Dreamweaver, tokom rada, automatski prati informacije o
datotekama i aktivi na lokalnom sajtu. On ovo radi preko keša za sajt, odnosno dela memorije
računara koja se privremeno koristi za smeštanje tih informacija. Kod malih i srednjih sajtova, keš
može značajno da ubrza operacije koje se odnose na ceo sajt, kao što su Find and Replace, provera
pravopisa, ili rukovanje linkovima.
Kod velikih sajtova, keš može i da uspori ove operacije (pošto Dreamweaver mora da pamti previše
informacija). Generalna strategija je da keš koristite kada prvi put definišete sajt. Kada kasnije primetite da
operacije sa sajtom postaju sporije, isključite keš. U Dreamweaveru možete kreirati onoliko sajtova koliko
Vam je potrebno. Svaki sajt mora da ima zadate najmanje svoje lokalne informacije, premda može da sadrži
i udaljene i druge informacije.
173 / 299
Dreamweaver MX 2004
Upravljanje sajtovima
Upravljanje sajtovima u Dreamweaveru se radi preko okvira za dijalog Manage Sites , okvira za dijalog Site
Definition i panoa Site, sa njegovim padajudm menijem. Tekući sajt se prikazuje u panou Site. Njegovo ime
je prikazano u padajućem meniju ovog panoa. Ako želite da drugi sajt postane tekući, možete da otvorite
okvir za dijalog Manage Sites. Ovo možete da uradite preko opcije Manage Sites iz pomenutog menija. Okvir
za dijalog Site Definition za tekući sajt možete da otvorite ako kliknete njegovo ime u padajućem meniju.
Okvir za dijalog Site Definition, koji se koristi za kreiranje novih sajtova, se takođe koristi i za promenu
postojećih. Promenu možete da radite ako izabereete Site > Manage Sites, zatim izaberete sajt, a onda
kliknete dugme Edit. Možete i da dva puta brzo kliknete ime sajta u padajućem meniju panoa Site. U okviru
za dijalog Manage Sites je prikazana lista svih sajtova koji su trenutno definisani. Ovde imate mogućnost da
pravite nove sajtove, da menjate postojeće, da ih brišete i još puno toga. Ovom okviru za dijalog možete da
pristupite ako izaberete Site > Manage Sites, ili ako iz padajućeg menija u panou Site izaberete Manage
Sites. Možete mu pristupiti i ako u okviru za dijalog Preferences > Site izaberete odgovarajuće dugme.
• Ako iz ovog okvira za dijalog želite da menjate postojeći sajt, izaberite ga, a onda kliknite Edit da
biste otvorili okvir za dijalog Site Definition, za taj sajt.
• Ako želite da obrišete sajt, izaberite ga i kliknite dugme Delete. Brisanje sajta ne briše i same
datoteke, koje su njegov deo, niti na bilo koji način menja lokalnu fasciklu. Brišu se samo informacije
vezane za sajt, kao i naznaka da je neka fascikla korenska fascikla sajta.
• Ako iz ovog okvira za dijalog želite da napravite novi sajt, kliknite dugme New.
Pano Site
Nakon što ste definisali sajt, pano Site iz Dreamweavera je Vaš interfejs, preko kojeg vršite sve poslove
vezane za sajt. Dobro je da ovaj okvir za dijalog tokom rada ostavite otvorenim. U ovom prozoru možete da
vidite datoteke sajta, kao i hijerarhijsku strukturu, da rukujete datotekama sa sajta i sl.
Proširivanje i sužavanje panoa Site
Pano Site sa svim informacijama može da zauzme veliki deo ekrana, što može biti problem, osim ako
nemate veliki monitor, ili podešen dvojni monitor na svojoj radnoj stanici. Rešenje ovog problema je da se
pano prikaže u punom ili skraćenom obliku. Prelaz iz jednog u drugi oblik se vrši preko dugmeta
Expand/Collapse koje se nalazi na paleti panoa Site. Kao i drugi panoi i ovaj se može vezati sa ostale
174 / 299
Dreamweaver MX 2004
panoe, ili ga ostavite da bude slobodan. (Ovo je novost kod korisnika koji rade pod operativnim sistemom
Macintosh.) Kada je pano vezan, uvek se prikazuje u skraćenom obliku.
Prikaz datoteka na sajtu
U proširenom obliku pano Site u desnoj koloni prikazuje listu Site Files. U skraćenom obliku, ova lista se
podrazumevano prikazuje. Ona se može prikazati ako se iz padajućeg menija izabere Local View. U listi Site
Files je prikazan sadržaj lokalne korenske fascikle. Sadržaj je uređen hijerarhijski, onako kako bi se prikazao
u Windows Exploreru ili Macintosh Finderu. Kao i druge liste datoteka na sistemu, svaka fascikla se
prikazuje sa znakom plus/minus (+/-) (Windows). Ove oznake omogućavaju sakrivanje i prikazivanje
sadržaja. Većina opcija koje u Dreamweaveru postoje za rad sa datotekama se nalaze u prikazu Site Files.
Kolone u prikazu File View
Kada je pano Site proširen, lista Site Files postaje više od obične liste sa imenima. Ona sadrži kolone sa
informacijama o svakoj datoteci. To su ime, veličina, tip, datum promene i još po nešto. Ako je pano Site
dovoljno širok, o datotekama možete puno da saznate samo ako pogledate informacije koje se nalaze u
kolonama. Kao što možete da sa Windows Explorerom ili Mactionsh Finderom prikažete datoteke sortirane
po nekoj od kolona, to možete i ovde, ako kliknete tu kolonu.
Ako pano Site nije organizovan prema Vašim žaljama, možete da ga menjate. Dreamweaver omogućava da
podešavate pogled na pano Site. Ovo se radi preko kategorije File View Columns u okiru za dijalog Site
Definition. Ovaj okvir za dijalog se može otvoriti i ako se iz linije menija panoa Site izaberete View > File View
Columns. U ovom prozoru možete da vidite sva imena kolona koje se vide u panou Site, bez obzira da li ste
ih sami napravili ili ih je napravio Dreamweaver. Možete da vidite i da li su kolone vidljive. Ako želite da
dodate svoju kolonu, kliknite dugme plus (+). Nakon toga možete da joj date ime, da zadate da li želite da joj
se dodeljuju napomene (Design Note), da definišete kako se informacije u koloni ravnaju i da zadate da li je
kolona vidljiva ili ne. Kada pravite svoju kolonu, njen tip je Personal. Ako želite da obrišete kolonu koju ste
napravili kliknite dugme - (Delete).
175 / 299
Dreamweaver MX 2004
Da biste razumeli gde se kolona koju pravite pojavljuje u panou Site, morate da koristite imaginaciju.
Zamislite pano Site. Sećate se da prava kolona u prozoru sadrži imena datoteka koje se nalaze na lokalnom
sajtu. Naredna kolona sadrži napomene (Design Note). Treća kolona ukazuje na veličinu datoteka, četvrta
pokazuje tip datoteke. Ovde možete da vidite imena kolona (koja se prikazuju na panou Site po horizontali),
po vertikali. Dreamweaver novu kolonu podrazumevano postavlja na dno liste, što znači da se nova kolona
postavlja najdalje u desno od panoa Site. Ako želite da promentie položaj nove kolone, upotrebite strelice
naviše i naniže koje se nalaze u gornjem desnom delu prozora Site Definition. Kada kliknete strelicu naviše,
prebacujete kolonu u levo na panou Site. Kada kliknete strelicu naniže, kolonu prebacujete na desni deo
panoa Site. Možete da prebacujete i ugrađene kolone, sve osim kolone Name. Ova kolona uvek mora da
ostane na vrhu liste.
Prikaz Mape sajta (Site Map)
Do sada ste elemente svog sajta uvek gledali kao listu. Ova lista, međutim, ne govori kako su datoteke
međusobno povezane. Koja datoteka se prva vidi kada neko dođe na sajt? Koliko datoteka je vezano za tu
prvu stranu? Dreamweaver pruža jednostavan odgovor na sva ova pitanja, a to je prikaz Site Map.
Označavanje naslovne strane
Pre nego što budete mogli da koristite prikaz Site Map, Dreamweaveru morate da saopštite koja je naslovna
strana. Ovo je prva strana koja se vidi kada neko dođe na sajt. To što je naslovna strana ne mora da znači
da i ime datoteke treba da bude home.html. Obično se ta prva strana označava kao index.html, default.html
ili default.htm. Razlog je to što su web serveri obično konfigurisani da neka od ovih imena automatski
prepoznaju, tako da posetioci ne moraju da kao adrese unose i ime datoteke. (Pre nego što izaberete ime
naslovne datoteke za svoj sajt, proverite sa osobljem zaduženim za tehničku podršku, koja su
podrazumevana imena koja Vaš server prepoznaje.) Da biste definisali naslovnu stranu svog sajta, otvorite
okvir za dijalog Site Definition i idite na kategoriju Site Map Layout. Na ovu kategoriju možete da odete i
direktno ako iz menija panoa Site izaberete View > Layout. U okviru za dijalog kliknite ikonu fascikle da biste
potražili naslovnu stranu, ili možete da njeno ime unesete u polju home page. Ako ste kao naslovnu stranu
izabrali neko od podrazumevanih imena, onda ne morate tu datoteku da eksplicitno definišete u
Dreamweaveru. Kao i web server, i Dreamweaver prepoznaje ta imena i pretpostavlja da su datoteke sa
podrazumevanim imenom, naslovne strane.
176 / 299
Dreamweaver MX 2004
Pregled sajta preko mape sajta
Nakon što ste izabrali naslovnu stranu, možete da pogledate mapu sajta. Kada je pano Site proširen,
pritisnite dugme Site Map i iz padajućeg menija izaberite Map Only ili Map and Files. Prikaz Site Map
prikazuje sajt kao hijerarhiju povezanih datoteka, pri čemu je na vrhu naslovna strana. Ispod ove naslovne
strane su datoteke koje su direktno povezane sa njom. Tu su i e-mail linkovi, spoljašnji linkovi, kao i linkovi
koji vode do nekog medijalnog sadržaja koju je ugrađen na strani. Opcije koje utiču na prikazivanje mape
sajta se podešavaju u kategoriji Site Map Layout u okviru za dijalog Site Definition. Neke opcije se mogu
podesiti i preko komandi iz menija View, u meniju panoa Site.
Ikone, imena i tipovi datoteka
Mapa sajta koristi male ikone da vizuelno ukaže na status datoteke ili linka. Kada pogledate vizuelni jezik koji
se koristi, videćete da on, ukratko, o sajtu može da Vam saopšti sledeće informacije:
• Ikone Svaka stavka na mapi sajta ima svoj tip ikone. Ikone datoteka Dreamweavera sa crnim
natpisima predstavljaju datoteke. Ikone globusa sa plavim natpisima predstavljaju apsolutne URL
adrese ili druge specijalne linkove. Prekinuti linkovi su označeni crvenom ikonom lanca, sa crvenim
natpisom.
• Natpisi Ako želite da ikone kao natpise imaju naslove strana, a ne imena datoteka, izaberite Page
Titles u okviru za dijalog Site Definition, ili izaberite View > Show Page Titles iz menija panoa Site.
Da biste ponovo uključili imena datoteka, izaberite Filenames u okviru za dijalog Site Definition, ili
izaberite View > Show Filenames iz menija panoa Site.
Sta se prikazuje, a šta ne
Zavisne datoteke (kao što su linkovani medijalni sadržaj, ili linkovane skript ili CSS datoteke) se
podrazumevano ne prikazuju na mapi sajta. Da biste videli i ove datoteke, izaberite opciju Display
Dependent Files u okviru za dijalog Site Definition, ili izaberite View > Show Dependent Files u meniju panoa
Site. Iste komande se koriste i za njihovo ponovno sakrivanje.
177 / 299
Dreamweaver MX 2004
Prikazivanje hijerarhije
Ako je sajt složen, onda čitanje mape sajta može biti komplikovano, zbog obilja ikona i linkova. Ovo možete
da pojednostavite sakrivanjem i prikazivanjem linkova. Da biste sakrili sve linkove koji dolaze iz konkretne
datoteke, kliknite dugme minus (-), koje se nalazi pored ikone datoteke. Da biste ponovo prikazali linkove,
kliknite dugme plus (+). (Dugme menja stanje u zavisnosti od toga da li su linkovi prikazani ili sakriveni.) Da
biste videli samo deo sajta u jednom trenutku (na primer, da se pokaže samo deo Meanswear, na sajtu sa
katalogom štofova), desnim tasterom miša kliknite datoteku na vrhu hijerarhije koju želite da vidite i iz
pomoćnog menija izaberite View as Root. Mapa sajta se menja, tako da se izabrana datoteka prikazuje kao
nova naslovna strana na vrhu hijerarhije, sa prikazanim svim linkovima koji su ispod nje. Drugi delovi sajta se
ne vide. Na vrhu prozora sa mapom sajta se nalazi specijalna ikona, koja ukazuje na veze tekućeg prikaza i
naslovne strane. Ako posle prelaska na ovaj privremeni pogled, želite da se vratite na prikaz celog sajta,
kliknite ikonu naslovne strane na vrhu mape sajta).
Promena naslovne strane mape sajta
Dreamweaver omogućava da postojeću naslovnu stranu promenite ili na neku drugu stranu koja već postoji,
ili na kompletno novu stranu, uključujući i strane koje nisu HTML datoteke, kao što su neka datoteka sa
slikom ili SWF datoteka. Iz menija u panou Site izaberite opciju Site > New Home Page. Otvoriće se okvir za
dijalog New Home Page. Ovde možete da unesete ime datoteke i naslov strane za svoju novu naslovnu
stranu. Nakon kreiranja nove strane, možete da preuredite linkove, preko komande Link to Existing File ili
ikone Point-to-File. Ovaj proces je objašnjen u prethodnom odeljku ovog poglavlja.
Da biste postojeću stranu postavili kao naslovnu na mapi sajta, prvo treba da izaberete na panou Site
(morate biti u režimu Map and Files View, da biste ovo mogli da uradite). Nakon toga iz menija u panou Site
izaberite opciju Site > Set as Home Page. Ovim se ponovo kreira mapa sajta, ali sa novom naslovnom
stranom i njenim linkovima. Možete i da desnim tasterom miša kliknete datoteku u panou Site i da iz
pomoćnog menija izaberete Set as Home Page.
Podešavanje rasporeda na mapi sajta
Preko kategorije Site Map Layout, koja se nalazi u okviru za dijalog Site Definition, možete da podesite
trenutnu mapu svog sajta. Iz ovog prozora možete da izaberete broj kolona, kao i da podesite širinu kolona
koje se prikazuju na mapi sajta. Tu se definiše broj strana koje se prikazuju u jednoj vrsti. Podrazumevana
vrednost je 200. Obično ovu vrednost ne morate da menjate, pošto retko imate više od 200 strana koje su
povezane sa naslovnom stranom.
Sada možete da izaberete da li dokumenti na mapi sajta treba da se prikažu kao datoteke ili sa naslovima
strana. Ako ste bili marljivi prilikom kreiranja naslova strana, onda upotreba tih naslova na mapi sajta može
da bude dobar način za pregled sajta. Prikazivanje datoteka naslova strana takođe pokazuje da li su naslovi
takvi da mogu lako da se prate. Možda ćete se iznenaditi koliko konfuzni mogu biti naslovi nekih strana, ako
ne gledate i samu stranu.
Na kraju, možete da podešavate i ono što će se naći na mapi sajta. Prva opcija omogućava da podesite da li
se prikazuju datoteke koje su označene kao sakrivene. Kada je ova opcija potvrđena, onda se prikazuju i
skrivene datoteke. Druga opcija, Display Dependent Files, prikazuje sve zavisne datoteke (kao što su slike,
ili druge datoteke koje su linkovane preko HTML koda). Ove datoteke se prikazuju prema redosledu po
kojem su postavljene u HTML kodu.
Kreiranje slike od mape sajta
Zar ne bi bilo korisno ako biste mapu sajta mogli da upamtite kao sliku, koju biste onda mogli elektronskom
poštom da pošaljete klijentu ili koju biste mogli da odštampate? Dreamweaver omogućava da ovo radite
neverovatno lako. Da biste upamtili mapu sajtu, izaberite File > Save Site Map. U okviru za dijalog Save Site
Map, dajte ime svojoj slici i izaberite lokaciju gde treba da se upamti. Kod Windowsa, iz padajućeg menija
File Type možete da izaberete.bmp, čime se slika pamti kao bitmapa, a ako izaberete .png, onda se pamti
kao PNG datoteka. Kod Macintosha se datoteka automatski pamti kao JPEG.
Upravljanje datotekama i linkovima na sajtu
Najviše posla u razvoju web sajta zahteva upravljanje sajtom, odnosno praćenje datoteka na sajtu. Treba da
budete sigurni da je struktura fascikli logička, da imena datoteka imaju smisla, da svi linkovi rade, kao i da je
sve tamo gde ga možete brzo naći, ako kasnije treba nešto da menjate, ili kada zatreba da prebacujete na
server. Nakon što ste definisali sajt u Dreamweaveru, sva snaga alata za upravljanje lokalnim sajtom je u
Vašim rukama. Kada radite u "centralnom prozoru za komande", drugim rečima, panou Site, prst možete
178 / 299
Dreamweaver MX 2004
stalno da držite na pulsu sajta i da kontrolišete svoje datoteke, kao što neki general kontroliše svoje trupe.
Upravljanje datotekama i fasciklama
Pano Site možete da shvatite kao zamenu za Windows Explorer ili Macintosh Finder. Neka bude otvoren sve
vreme dok radite na sajtu. Koristićete ga za obavljanje osnovnih operacija na sajtu. Prikaz Site Files je ključ
za rukovanje strukturom datoteka na sajtu. Prikaz Site Map je najbitniji ključ za rukovanje linkovima.
Otvaranje datoteka
Kao i uvek, otvaranje datoteka u Dreamweaveru možete da uradite na više načina. Prvi i najpopularniji
metod je da se iz menija izabere File > Open. Onda preko okvira za dijalog Open možete da pronađete
datoteku koju želite i kliknete dugme Open. Brži metod je da koristite pano Site. U panou Site možete dva
puta brzo da kliknete datoteku (prikaz Site Files ili Site Map) i ona će se otvoriti. Sada kada znate nekoliko
pomoćnih načina da otvorite datoteku, da li ćete ikad koristiti neki od starih načina.
Kreiranje datoteka i fascikli
Ako želite da novu datoteku ili fasciklu napravite iz prikaza Site Files, kliknite fasciklu u koju želite da
smestite novu stavku i izaberite Choose File > New File ili File > New Folder iz menija panoa Site. Možete i
da desnim tasterom miša kliknete fasciklu u koju želite da smestite novu stavku i da iz pomoćnog menija
izaberete New File ili New Folder. U listi Site Files će se pojaviti nova datoteka bez imena. (Kod novih
datoteka, Dreamweaver kreira datoteku sa podrazumevanim tipom za sajt.)
Promena imena datoteka i promena njihove pozicije
Obični ljudi koji nisu super organizovani retko biraju najbolji sistem organizacije, sve dok se na neki način ne
nađu u projektu za razvoj nekog sajta. Možda će doći do savršene šeme za davanja imena, ali tek pošto su
pre toga napravili nekoliko desetina datoteka sa imenima koja nisu baš bila korisna. Noćna mora ovakvog
scenarija je: kada nakon što ste počeli sa kreiranjem svog sajta, odnosno napravili linkove sa grafikom i
vezama između datoteka, treba da promenite lokaciju ili ime datoteke. Ta mala promena može da traži veliki
posao, jer treba promeniti svaki relativni link, koji ukazuje ili dolazi sa te strane.
Ako za za davanje imena i organizaciju budete koristili prikaz Site Files iz Drearmveavera, onda
Dreamweaver može automatski da ažurira sve linkove, ako je potrebno. Da biste prebacili datoteku ili
fasciklu sa jedne lokacije na drugu, dovoljno je da tu stavku, u prikazu Site Files, prevučete na novu lokaciju.
Ako želite da promenite ime datoteke ili fascikle, kliknite dva puta to ime u prikazu Site Files ili Site Map, ili
izaberite datoteku, a onda iz menija panoa Site izaberite File > Rename. Nakon toga unesite novo ime. Ako
menjate ime za naslovnu stranu sajta, onda se mapa sajta neće prikazati na pravi način, sve dok ne osvežite
sajt, preko opcije Site > Re-create Site Cache, koja se nalazi u meniju panoa Site. Ako promene koje pravite
zahtevaju da se ažuriraju svi linkovi, Dreamweaver ima i okvir za dijalog Update Links u kome su prikazane
sve datoteke koje treba ažurirati, kao rezultat Vaše akcije. Ovde treba da jednostavno kliknete Update, a
Dreamweaver menja sve linkove u izlistanim datotekama, tako da nijedan od linkova nije prekinut.
Upravljanje linkovima
Već ste videli prilično dobar način za upravljanje linkovima, kada Dreamweaver ažurira linkove prilikom
promene strukture datoteka. Ovo je ipak samo prvi korak u složenom sistemu za upravljanje linkovima. Ako
koristite mapu sajta, različite komande iz menija panoa Site, kao Site Reports, strukturu linkova na sajtu
možete da imate u svojim rukama.
Opcija Point to File iz datoteke
Ako ste otvorili datoteku i ako je pano Site bar delimično vidljiv na ekranu, možete da napravite link koji vodi
od te datoteke do neke druge, preko opcije point to file. Evo kako se to radi.
1. Otvorite datoteku u kojoj želite da se nalazi link. Proverite da li je pano Site otvoren i vidljiv.
2. Izaberite tekst ili sliku koji će postati link.
3. U Property Inspectoru pronađite polje Link, ali umesto da kliknete dugme Browse ili da unosite ime
datoteke u odgovarajuće polje, pronađite dugme Point to File.
4. Izaberite ovo dugme i prevucite na pano Site. (Ako je pano Site slobodan, samo prevucite preko
nekog njegovog dela i on će se prikazati u prvom planu, tako da možete da vidite ceo prozor. )
Nastavite da vučete sve dok se ne nađete iznad datoteke na koju želite da link vodi. Kada se nađete
na pravoj lokaciji, datoteka će biti istaknuta.
5. Ostavite dugme miša. Ako Vam koordinacija ruke i oka radi kako treba, u otovrenom dokumentu se
sada nalazi link na stavku koju ste pokazali.
179 / 299
Dreamweaver MX 2004
Opcija Point to File i mapa sajta
Ako ste u žurbi da napravite neke kontrole za navigaciju na sajtu, a ne želite da otvarate datoteke da biste to
radili, onda će Vam se dopasti mogućnost da to uradite preko mape sajta. Evo kako se to radi:
1. Zatvorite sve dokumente. (To uvek treba da uradite pre nego što počnete sa radom na nekom od
poslova vezanih za rukovanje datotekama, koji bi mogli da ažuriraju sadržaj datoteka.)
2. U panou Site orvorite prikaz Site Map.
3. Na mapi sajta izaberite datoteku od koje želite da vodi link. Pored te datoteke će se pojaviti mala
ikona.
4. Izaberite tu ikonu i prevucite je na datoteku na koju želite da link vodi. Možete da je prevučete do
neke druge datoteke na mapi sajta, ili do datoteke iz liste Site Files. Kada se nađete iznad željene
datoteke i kada je ona postane istaknuta, to je to. Napravljen je link.
Mapa sajta će se promeniti i prikazaće se da je između dve datoteke dodat link. Otvorite datoteku od koje
link vodi i idite do dna strane. Videćete da je Dreamweaver dodao tekstualni link na drugu datoteku, sa
tekstom koji je izveden iz imena druge datoteke. Ako nastavite da dodajete linkove iz iste datoteke
Dreamweaver će eventualno kreirati celu tekstualnu liniju za nayigaciju, koja će se naći na dnu strane. Ovo
nije baš najlepše, ali je korisno i radi. Niste otvorili nijednu datoteku.
Kreiranje linkova preko komandi iz menija i mape sajta
Ako ovo pokazivanje nije ono što želite, linkove i dalje možete brzo da dodate, a da ne morate da otvarate
180 / 299
Dreamweaver MX 2004
datoteke. Ovo možete da uradite preko komandi iz menija. Da biste to mogli da uradite, morate biti u prikazu
Site Map, ali tada nema prevlačenja.
Postavljanje linka koji vodi na postojeću datoteku, preko menija iz prikaza Site Map
Ako želite da date link na postojeću datoteku, a da ne morate da otvarate nijednu od ovih datoteka, i ne
želite da koristite opciju point to file, treba da uradite sledeće:
1. U prikazu Site Map izaberite ime datoteke od koje želite da link vodi, a onda izaberite Site > Link to
Existing File iz menija u panou Site. Možete i da desnim tasterom miša kliknete datoteku od koje
želite da link vodi i da iz pomoćnog menija izaberete opciju Link to Existing File.
2. Kada se otvori okvir za dijalog Select HTML File, pronađite datoteku na koju želite da link ukazuje.
Kliknite Choose da biste zatvorili okvir za dijalog.
Link je na mestu i prikazuje se kao dodatni link na mapi sajta. Da biste videli kako ovaj link izgleda u
originalnoj datoteci, otvorite datoteku i idite na dno strane. Videćete da je, kao i kod opcije point to file, koju
smo opisali, Dreamweaver dodao tekstualni link na drugu datoteku, dok je tekst izveden iz imena druge
datoteke.
Dodavanje linka na novu datoteku (koja ne postoji) preko menija iz prikaza Site Map
Sa mape sajta možete da definišete koje datoteke na sajtu treba da budu povezane sa kojim drugim
datotekama, tako da ceo sajt možete da napravite bez otvaranja datoteke. Da biste napravili novu datoteku i
link na nju, sve u jednom procesu, treba da uradite sledeće :
1. U prikazu Site Map izaberite datoteku od koje želite da link vodi, a onda izaberite Site > Link to New
File iz menija panoa Site, ili desnim tasterom kliknite datoteku od koje želite da link vodi, a onda iz
pomoćnog menija izaberite opciju Link to New File.
2. Kada se otvori okvir za dijalog Link to New File popunite sledeće informacije:
• Filename Dreamweaver će napraviti novu datoteku za Vas.
• Title Koji treba da bude naslov strane.
• Text of Link Nakon što se napravi nova datoteka, Dreamweaver pravi tekstualni link u
polaznoj datoteci, koji vodi ka novoj datoteci.
3.
Nakon što unesete sve informacije, kliknite OK da biste zatvorili okvir za dijalog. Link je na svom
mestu. Tu je i nova datoteka. Otvorite originalnu datoteku i videćete da je link dodat kao običan
tekstualni link i to na kraj datoteke, posle svog ostalog sadržaja. Ako ponovite ovaj proces, možete
da napravite ceo web sajt, počev od jedne naslovne strane. Uopšte ne morate da napuštate prikaz
Site Map.
Promena linkova
Napravili ste svoj sajt i linkovima povezali nekoliko strana sa stranom gallery.html. Posle toga ste malo
razmislili i zaključili da linkovi sa tih strana treba da vode na stranu slideshow.html. Uz pomoć
Dreamweavera možete da promenite ono na šta linkovi ukazuju, bilo pojedinačno, bilo odjednom, a da pri
tome ne morate da otvorite ni jednu datoteku.
Komanda Change Link
Da biste promenili sve linkove koji vode na jednu stranu, i poslali ih na neku drugu, treba da uradite sledeće:
1. Izaberite stranu na koju linkovi treba da vode. (U primeru koji smo prethodno pomenuli, to je strana
gallery.html.)
2. Iz menija panoa Site izaberite Site > Change Link. Otvoriće se okvir za dijalog Select HTML File.
3. Izaberite novu datoteku na koju želite da linkovi ukazuju. (U prethodnom primeru to bi bila strana
slideshow.html.) Kada završite, kliknite Select.
4. Otvara se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje treba
da se ažuriraju. Da biste promenili sve linkove i zatvorili okvir za dijalog, kliknite Update.
181 / 299
Dreamweaver MX 2004
Komanda Change Links Sitewide
Ova komanda radi slično kao komanda Change Links, ali se nekim bitnim razlikama. Kao i kod prethodne
komande, namera je da se promene svi linkovi na sajtu, koji vode ka jednoj datoteci, tako da vode na neku
drugu. Ova komanda se koristi na sledeći način:
1. (Opcionalno) Izaberite stranu koju želite da promenite. To je strana na koju linkovi vode (gallery.html
iz prethodnog primera).
2. Izaberite Site > Change Links Sitewide.
3. Kada se otvori okvir za dijalog Change Links Sitewide unesite sledeće informacije:
•
Change All Links To - Ako ste pre pokretanja komande izabrali datoteku, ova informacija je
već uneta. Ako to nije bio slučaj, ovde treba da unesete link.
• Into Links To - Unesite novi link koji želite da zameni stari (u prethodnom primeru to je
slideshow.html).
4. Kliknite OK da biste zatvorili okvir za dijalog.
5. Otvoriće se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje
treba da se ažuriraju. Da biste promenili sve linkove i zatvorili okvir za dijalog kliknite Update.
Po čemu se komanda Change Links Sitewide razlikuje od komande Chang Links? Namena komande
Change Links je da da se ponovo izračunaju relativni linkovi između dokumenata na sajtu, pa ta komanda to
i radi. Komanda Change Links Sitewide više liči na običnu komandu Find and Replace, jer ona menja atribut
href za određene linkove. Jednu vrednost zamenjuje drugom.
Posledice su sledeće:
• Komanda Change Links Sitewide se koristi samo sa apsolutnim linkovima, ili linkovima koji su
relativni u odnosu na koren. Ne koristi se za relativne linkove u dokumentima. Ako u okviru za dijalog
Change Links Sitewide potražite neki link, Dreamweaver smatra da je taj link relativan u odnosu na
koren. Ako unesete link koji je relativan u odnosu na dokument, dobićete poruku o grešci. Ako želite
da promenite sve reference na dokument na svom sajtu, a ne koristite putanje koje su relativne u
odnosu na koren sajta, onda treba da koristite komandu Change Links.
• Komanda Change Links se koristi samo za linkove koji ukazuju na dokummente. Komanda Change
Links Sitewide se može koristiti za promenu bilo kojeg href atributa na neku drugu vrednost. Na
primer, možete da promenite linkove mailto:, ako se promeni Vaša e-mail adresa, ili možete da
promenite nulte linkove od #, na sigurnije linkove javascript:, sve to preko komande Change Links
Sitewide. Uvek kada želite da menjate linkove koji nisu relativni u odnosu na druge dokumente, treba
da koristite komandu Change Links Sitewide.
Provera i popravka linkova
U narednih nekoliko odeljaka ćete naučiti kako da pomoću Dreamweavera proverite sve svoje linkove.
Videćete i kako da popravite greške, ako ih pronađete.
Provera linkova
Možete odjednom da proveravate linkove u jednoj datoteci, da odjednom proveravate linkove u više
datoteka, ili da u jednom zamahu proverite ceo sajt. Funkcija Check Links iz Dreamweavera izveštava ove tri
vrste mogućih problema:
•
•
Broken links – Ovo su datoteke sa internim linkovima, koji ne sadrže pravilnu putanju da bi link
radio kako treba. To znači da Dreamweaver ne može na sajtu da pronađe interne linkove na koje
ovo ukazuje.
External links – Spoljašnji linkovi su možda najozloglašeniji kod kreiranja slika koje ne vode nikuda.
Tada se dobija ona poruka: "Error 404: File not found". To su datoteke koje se ne nalaze na Vašem
sajtu (na primer http: //www. nekisajt.com).
182 / 299
Dreamweaver MX 2004
Eksterni linkovi se prikazuju tako da budete svesni eventualnih problema koji se mogu javiti. Link koji se
pojavi na spoljašnjem linku ne znači da je taj link prekinut, već samo da je to izvan domena sistema za
upravljanje linkovima koji postoji u Dreamweaveru.
• Datoteke siročići – Ovo su datoteke koje nemaju linkove koji vode prema njima. Drugim rečima,
ovo su datoteke za koje ne postoji navigacija koja vodi ka njima. Obično su ovo stare verzije nekih
datoteka, koje se više ne koriste. Sa druge strane, ne možete jednostavno da pretpostavite da li su
ovakve datoteke nepotrebne i da li ih treba obrisati. Pažljivo proverite pre brisanja.
Bez obzira da li proveravate ceo sajt istovremeno, ili proveravate samo jednu ili dve datoteke, procedura je u
osnovi ista. Da biste odjednom proverili sve linkove na sajtu, treba da uradite sledeće:
1.
Upamtite sve otvorene dokumente.
2.
Izaberite Site > Check Links Sitewide, ili desnim tasterom miša kliknite datoteku ili fasciklu iz
liste Site Files, a onda iz pomoćnog menija izaberite opciju Sheck Links > Entire Site.
Da biste proverili linkove samo za nekoliko datoteka, treba da uradite sledeće:
1. Upamtite i zatvorite sve otvorene dokumente.
2. U listi Site Files ili na mapi sajta izaberite datoteke koje želite da proverite. Više datoteka možete
izabrati ako držite pritisnut taster Shift (Windows) ili Ctrl/Cmd (Macintosh), tokom izbora datoteka.
3. Desnim klikom kliknite bilo koji selektovani fajl i iz kontekstualnog menija izaberite Check Links >
Selected Files/Folders.
Ako želite da linkove proverite samo za jedan dokument, treba da uradite sledeće:
1. Otvorite dokument koji želite da proverite i ako je potrebno upamtite ga.
2. Izaberite File > Check Page > Check Links.
Koji god metod da izaberete, Dreamweaver proverava linkove i prikazuje rezultat. Rezultat se prikazuje u
prozoru Results, kod kojeg je prikazana kartica Link Checker. Uz pomoć padajućeg menija na vrhu prozora
možete da vidite bilo koji od ova tri tipa linkova (prekinuti linkovi, spoljašnji linkovi i siročići). Sa leve strane
prozora je prikazana datoteka koja pravi probleme. Sa desne strane je konkretan link, koji Dreamweaveru
pravi probleme. Deo Orphaned Files nema drugu kolonu, pošto ne postoje linkovi koji su sa ovim povezani.
Odavde možete ili da zatvorite prozor Results/Link Checker ili da listu upamtite u datoteku, kod koje su
stavke odvojene tabulatorima. Nakon toga listu možete da uvezete na neku stranu, preko objekta Tabular
Data (sa palete Layout Insert), ili da uvezete tekstualnu datoteku u program za obradu teksta, da biste ga
odštampali.
Popravka linkova
Postoje dva načina za poptavku prekinutih i spoljašnjih linkova (ako je to potrebno). U oba slučaja morate da
koristite prozor Results/Link Checker. Prvi metod je da dva puta brzo kliknete ime datoteke koja je prekinuta
ili spoljašnji link. Ovim se u prozoru Document otvara datoteka, a sumnjivi link je istaknut. Ako je otvoren
Property Inspector, onda je link istaknut u delu Link ili Src ovog Inspectora. Možete da ukucate pravu
referencu, ili da preko ikone fascikle ili komande Point-to-File izaberete datoteku na koju link treba da vodi.
Drugi način je verovatno lakši i brži, ali samo ako dobro poznajete sajt. U prozoru Link Checker kliknite
jednom link koji je u pitanju (u desnoj koloni). Na taj način možete da unesete novi link. Ako ste trenutno u
delu sa prekinutim linkovima, pojavljuje se ikona fascikle koja omogućava da pronađete pravi link. Ako
postoje i drugi prekinuti linkovi sa istom referencom, Dreamweaver će Vas pitati da li treba i njih da ažurira.
Upravljanje aktivom preko panoa Assets
Pano Assets prati i omogućava da lako ažurirate ili ubacujete neke elemente koji se koriste na sajtu, kao što
su slike, boje, medijalne datoteke (Flash, Shockwave i sl), ili skriptovi. Ovo je posebno korisno kada planirate
da neke od ovih stavki koristite na više strana na sajtu.
183 / 299
Dreamweaver MX 2004
Pano Assets ćete otvoriti ako izaberete Window > Assets, ili proširite grupu Files u svom panou i pređete na
karticu Assets. Pano se sastoji od dva osnovna dela. To su lista aktive (donja polovina panoa) i deo za
prikazivanje (gornja polovina). Izbor nekog elementa iz liste assets prikazuje taj element u gornjem delu.
Pošto su ovi elementi organizovani po tipu, a ne po hijerarhijskoj strukturi fascikli koja se koristi u panou Site,
u jednom trenutku možete da gledate samo jedan tip elementa. Prelazak od jednog na drugi tip elementa je
moguć preko dugmadi koja se nalaze sa leve strane panoa. Tipovi elemenata su:
• Images – Ovo datoteke sa slikama, kao što su GIF, JPEG ili PNG, koje se nalaze na sajtu. To su
slike koje se nalaze u fascikli sajta, bez obzira da li su trenutno vezane za neki dokument.
• Colors – Ovo su sve boje koje se koriste na sajtu, uključujući i boju pozadine, kao i boje teksta i
linkova.
• URLs – Ovo su spoljašnje URL adrese koje se nalaze u linkovima u dokumentima na sajtu. Tu su
linkovi tipa HTTP, HTTPS, FTP, JavaScript, do lokalnih datoteka (file://) i email (mailto:) linkovi.
• Flashmovies – Ovo su filmovi iz Flasha koji se nalaze u korenskoj fascikli lokalnog sajta. Ovde su
prikazane samo SWF datoteke, a ne i FLA datoteke ili SWT šablonske datoteke.
• Shockwave movies – Ovo su filmovi iz Shockwavea, koji su napravljeni preko Directora ili
Authorware, a koji se nalaze na Vašem sajtu.
• QuickTime i MPEG filmovi – Ovo su filmovi u formatu Apple QuickTime (.mov ili.qt), ili u MPEG
formatu.
• Scripts – Ovo su skriptovi pisani u JavaScriptu ili VBScriptu, koji postoje na sajtu. Prikazane su
samo nezavisne skript datoteke. JavaScript koji se nalazi na Vašim stranama se ne uzima u obzir.
• Templates – Kada se koriste kako treba, šabloni predstavljaju lak način za kreiranje i uređivanje
sličnih strana. Pre nego što počnete da previše koristite ovakav dizajn, treba da pažljivo proučite
koje su njihove prednosti i nedostaci.
• Library – Biblioteke su slične šablonima, tako da promenom samo jednog primerka utičete na
promene više drugih. Obično su mali elementi sadržaja, koji se koriste na više strana na sajtu, kao
što je logo kompanije ili podrazumevani pano za navigaciju.
184 / 299
Dreamweaver MX 2004
Umetanje elementa iz aktive
Pano Assets omogućava da lako pronalazite i ubacujete slike i ostale elemente u svoje dokumente.
Ubacivanje medijalnih elemenata preko panoa Assets
Slike i drugi medijalni elementi (Flash filmovi, Shockwave filmovi i sl.) se najjednostavnije ubacuju preko
panoa Assets. Sve je u hvatanju i prevlačenju, ili izboru i kliku mišem. Da biste u svoj dokument ubacili
medijalni element, pomoću tehnike uhvati i prevuci, treba da uradite sledeće:
1. U prozoru Document proverite da li je aktivan prikaz Design.
2. Otvorite pano Assets i kliknite željenu ikonu da biste videli tip elementa koji treba da se ubaci.
3. Iz liste assets uhvatite stavku koju želite da ubacite i prevucite je na željenu lokaciju u dokumentu.
Iako element možete da prebacite bilo gde u dokumentu, njegova konačna pozicija u dokumentu
zavisi od toka sadržaja koji se nalazi oko njega. Prevlačenje slike na sredinu pasusa dovodi do toga
da tekst ide preko slike. Prevlačenje slike na desnu stranu neće postaviti sliku tu, ako je sadržaj
strane levo poravnat.
Da biste preko dugmeta Insert ubacili medijalni element, treba da uradite sledeće:
1. U prozoru Document proverite da li je aktivan prikaz Design. Kliknite da biste kursor postavili tamo
gde želite da se postavi element.
2. Otvorite pano Assets i kliknite željenu ikonu, da biste videli tip elementa koji treba da se ubaci.
3. U panou Assets izaberite element koji želtie da ubacite. Nakoii toga kliknite dugme Insert.
Umetanje URL adrese sa panoa Assets
Ubacivanje URL adrese je malo složenije od ubacivanja medijalnih elemenata, pošto se URL adresa mora
ubaciti kao href atribut za neki link. Evo kako se to radi:
1. Otvorite dokument i proverite da li ste u prikazu Design.
2. U dokumentu izaberite sliku ili tekst na koji treba da se doda link.
3. Otvorite pano Assets i kliknite ikonu URL, da bi se prikazal URL elementi.
4. Ili pronađite URL koji želite da primenite i prevucite ga m selektovanu stavku u prozoru Document, ili
izaberite URL, i onda kliknite dugme Apply.
Ubacivanje boja
Elementi sa bojama nisu tako korisni, kao što biste možda pomislili u prvi mah. Oni se ne mogu primeniti na
puno elemenata u dokumentu. Jedina vrsta elementa na strani, koji prihavata boje, jeste tekst. Kada se tekst
boji na ovaj način, boja se dodaje kao deo oznake f ont (što se odbacuje u korist CSS formatiranja). Ako se
ovo koristi zajedno sa biranjem boja u Dreamweaveru, onda ovakvo dodeljivanje boja može biti vrlo korisno.
Evo kako se preko boja sa panoa Assets dodeljuje boja nekom elementu u dokumentu :
1. Otvorite pano Assets i kliknite ikonu sa primerkom boje. Prikazaće se boje koje možete da koristite.
2. Otvorite dokument na kome želite da radite ili izaberite stavku koju želite da obojite (nivo, tabelu,
ćeliju tabele, itd.) ili otvorite okvir za dijalog odakle možete da birate boje (Page Properties, CSS
Style Definition ili neka druga opcija).
3. U bilo kom okviru za dijalog ili Property Inspectoru da se nalazite, pronađite dugme za boju i kliknite
ga da biste aktivirali izbor boja.
185 / 299
Dreamweaver MX 2004
4. Umesto da birate boje na osnovu uzorka, prebacite kursor na pano Assets i kliknite element od kojeg
želite da preuzmete boju.
Favoriti u listi aktive
Lista elemenata sadrži svaki element koji postoji na sajtu, uključujud boje, slike i URL adrese koje su možda
samo jednom korišćene na sajtu. Obično, kako sajt raste i broj elemenata na sajtu raste. Kada počnete da
rukujete sajtom od 30 strana, lako se može desiti da imate 50 ili 60 različitih slika, ako ne i više. Kao što
možete da zamislite, ova lista elemenata postaje vrlo složena i kroz nju se sporo kreće. Da bi rešio ovaj
problem, Dreamweaver ima elemente favorite. Od svih elemenata koji se na ovaj način mogu koristiti na
sajtu, možete da izaberete samo one za koje ste sigurni da ćete ih ponovo koristiti. Te elemente ćete
deklarisati kao favorite. Ovi favoriri se prikazuju na panou Assets kada pređete u prikaz Favorite. Ne samo
da je lakše kretati se kroz listu od 10 ili 100 elemenata, nego se i prikaz Favorite može organizovati u
fascikle, tako da se pristup još više olakša i logički definiše.
Pregled favorita i rad sa njima
Ove funkcije sa panoa Assets koje se mogu primeniti na obične elemente važe i za favorite. Da biste videli
favorite i mogli sa njima da radite, kliknite radio dugme Favorites, koje se nalazi na vrhu panoa Asseets.
Element sa sajta možete dodati u favorite, ako uradite jedno od sledećeg:
• U prozoru Assets izaberite elemente koje želite da dodate u listu favorita. Nakon toga, kliknite
dugme Add to Favorites u donjem desnom delu prozora. Ovo dugme izgleda kao znak plus (+) sa
purpurnom trakom.
• U prozoru Assets izaberite elemente koje želite da dodate u listu favorita. Otvorite pomoćni meni,
tako što ćete kliknuti strelicu usmerenu u desno u gornjem desnom uglu panoa. Ovaj meni možete
otvoriti i ako desnim tasterom miša kliknete neki od elemenata.
• U prikazu Design u prozoru Document, izaberite elemente (ili objekte) koje želite da dodate. Desnim
tasterom miša kliknite objekte, da biste otvorili pomoćni meni. Izaberite opciju Add to [Asset tip]
Favorites.
1.
2.
Lista favorita ne bi mnogo vredela, ukoliko ne biste mogli da menjate mišljenje i brišete stavke iz nje. Da
biste neki element izbacili iz ove liste treba da uradite sledeće:
Izaberite element koji želite da izbacite iz liste.
Kliknite dugme Remove from Favorites. Možete i da desnim tasterom miša kliknete neki
element i da iz pomoćnog menija izaberete opciju Remove from Favorites. Alternativno, možete i da u listi
Favorites izaberete element i da pritisnete taster Delete. Možete i da obrišete celu fasciklu sa favoritima,
čime se uklanja i sadržaj te fascikle.
Elementi koje izbacite iz liste favorita nisu obrisani i sa sajta. Oni su jednostavno izbačeni iz liste Favorite
Assets.
Grupisanje elemenata u listi favorita
Da biste izbegli kasniju zbrku, elemente možete da grupišete u fascikle. Na taj način, slike koje koristite za
186 / 299
Dreamweaver MX 2004
glavnu navigaciju po sajtu možete da čuvate u posebnoj facikli, a da ostale slike smestite na drugo mesto.
Kreiranje fascikli sa favoritima i postavljanje elemenata u njih ne menja lokaciju datoteke u strukturi fascikli
na sajtu. To je samo dodatan način za bolje organizovanje elemenata koji čine aktivu. Evo kako se kreira
fascikla u listi favorita i kako se u nju dodaje element:
1. Otvorite listu favorita.
2. Kliknite dugme New Favorites koje se nalazi u donjem desnom uglu panoa. Možete i
da izaberete opciju New Favorites, ako desnim tasterom miša kliknete neki od
elemenata.
3. Dajte ime fascikli i prevucite element u tu fasciklu.
Podešavanje panoa Assets
Kao i većina drugih stvari u Dreamweaveru, i pano Assets možete prilagoditi na različite načine. Pored toga
što možete definisati svoje favorite (ovo smo već objasnili), možete i da promenite redosled prikazivanja
elemanta. Podrazumevano se svi elementi prikazuju po rastućem alfabetskom redu (od A do Y), po imenu i
vrednosti. Ovaj redosled možete da promenite ako kliknete zaglavlje kolone po kojoj želite da izvršite
sortiranje. Ovim se elementi sortiraju po rastućem abecednom redu, ali za tu kolonu. Ako po drugi put
kliknete zaglavlje kolone, sortiranje je i dalje po abecednom redu, ali sada po opadajućem (od Z do A). Ako
sortirate kolone sa brojevima, kao što su veličina datoteke, onda je sortiranje po numeričkim vrednostima, a
ne po abecedi, od najmanje prema najvećoj ili obrnuto. Možete da promenite i širinu kolona u panou Assets.
Jednostavno postavite kursor direktno iznad linije koja odvaja dve kolone. Primetićete da kursor menja oblik
u dvostruku strelicu. Sada možete da kliknete i prevučete kolonu dajući joj željenu širinu. Ovo se obično radi i
kod većine prozora koji koriste kolone.
Upotreba aktive na sajtu
Dreamweaver omogućava da ovu aktivu koristite na različite načine. On čak omogućava da kopirate
elemente i delite ih između različitih sajtova. Ako želite da neki element aktive iskopirate sa jednog sajta na
drugi, treba da uradite sledeće:
1. Izaberite elemente koje želite da kopirate na drugi sajt. Možete da kopirate cele fascikle iz liste
favorita.
2. Kliknite dugme sa strelicom usmerenom udesno, koje se nalazi u gornjem desnom uglu panoa.
3. Iz ovog menija izaberite opciju Copy to Site. Pojaviće se podmeni sa listom sajtova na koje je
moguće kopirati. Izaberite jedan od sajtova iz liste.
Izabrani elementi se kopiraju na zadati sajt i postavljaju u fascikle koje odgovaraju njihovim lokacijama na
trenutnom sajtu. Ako neka fascikla trenutno ne postoji, ona se automatski kreira. Takođe je bitno da znate da
se elementi koje kopirate na ovaj način, automatski dodaju u listu favorita na novom sajtu. Nakon što sajt na
kome radite postane suviše velik, možete da zabrovite gde se nalaze neki elementi koje ste koristili.
Dreamweaver može da Vam pomogne da ih pronađete. Ako samo želite da nađete gde se nalazi određeni
element (ili grupa elemenata), koje ste koristili na lokalnom sajtu, treba da uradite sledeće:
1. U panou Assets izaberite element ili elemente za koje želite da pronađete lokaciju.
2. Kliknite desnim tasterom miša. Otvoriće se pomoćni meni. Ovom meniju možete da pristupite i ako
izaberete dugme sa strelicom usmerenom udesno, koje se nalazi u gornjem desnom uglu panoa.
3. Iz ovog menija izaberite opciju Locate in Site. Pojaviće se pano Site, a element koji tražite će biti
istaknut.
Opcija Locate in Site nije na raspolaganju za boje i URL adrese, zato što se ova dva tipa ne nalaze u
datotekama. To su jednostavno nizovi teksta koji se nalaze u okviru datoteka.
Promena elemenata koji čine aktivu
Preko panoa Assets možete lako da promenite neki od elemenata. Ovo može biti korisno ako želite da
promenite više slika, ali ne želite da gazite kroz komplikovanu strukturu panoa Site. Promene preko panoa
Assets možete da uradite na sledeći način:
• Dva puta brzo kliknite ime elementa. Ovim se otvara podrazumevani editor (onako kako ste definisali
u podešavanjima Dreamweavera).
• Izaberite element i kliknite dugme Edit koje se nalazi u donjem desnom uglu panoa.
Tip elementa koji ste izabrali doređuje šta se sledeće dešava. Sa elementima kao što su slike ili Flash
filmovi, pokreće se spoljašnja aplikacija i u njoj se otvara datoteka koja je u pitanju. U tom slučaju,
jednostavno promenite element i ponovo ga izvezite u fasciklu na lokalnom sajtu, prepisujući staru verziju.
Boje i URL aderse neće pokrenuti posebnu aplikaciju. Ove tipove elemenata aktive možete da menjate samo
187 / 299
Dreamweaver MX 2004
ako se nalaze u delu Favorites. Promena boja otvara okvir sa uzorcima, odakle možete da izaberete boju.
Promena URL adrese otvara okvir Edit URL u kome možete da menjate URL, kao i nadimak koji se u panou
Assets koristi za opis tog URL-a. Stavke iz biblioteke i šablona se menjaju direktno u prozoru Document.
Kreiranje novog elementa u aktivi
Iako pomoću panoa Assets ne možete da kreriate svaki tip elementa, možete da napravite novu boju, URL
adresu, šablon i biblioteku. (Slike, Flash i Shockwave filmovi se prave izvan Dreamweavera.) Da biste mogli
da pravite nove boje i URL adrese, morate da imate prikazane favorite.
Da biste mogli da kreirate novu boju, morate biti sigurni da su trenutno prikazani u listi Favorite. Nakon toga
izaberite deo Colors. Kliknite dugme New Color, koje se nalazi u donjem desnom uglu panoa. Možete da
koristite i pomoćni meni, koji se otvara ako listu kliknete desnim tasterom miša. Otvoriće se uzorak sa
bojama, odakle možete da izaberete novu boju. Nakon što ste izabrali boju, možete da joj date i nadimak.
Da biste napravili novi URL, morate biti sigurni da je trenutno prikazana lista favorita, a onda izaberite deo
URL. Kliknite dugme New URL koje se nalazi u donjem desnom uglu panoa. Možete da koristite i pomoćni
meni, koji se otvara ako listu kliknete desnim tasterom miša. Otvoriće se okvir za dijalog Add URL u kome
možete da definišete nadimak, kao i URL putanju za novi element.
Rad bez sajta
U Dreamweaveru MX 2004 je novost što je na kraju moguće raditi i bez definisanog sajta. Ovo je korisno ako
imate samo jednu stranu, koju želite da napravite, a ne želite da stajete i podešavate sajt. Ako želite da
radite bez sajta, u padajućem meniju panoa Site izaberite opciju Computer. Umesto da se prikaže lista
datoteka u fascikli lokalnog sajta, pano Site sada prikazuje listu datoteka na Vašem računaru. Ovu listu
možete da proširujete. Preko liste možete da pronađete bilo koji dokument koji želite da otvorite ili ubacujete.
Dreamweaver neće insistirati da ove datoteke budu u korenskoj fascikli, a neće ni nuditi da u nju kopira te
datoteke. Naravno da u ovom slučaju ne možete da koristite prednosti upravljanja sajtom.
188 / 299
Dreamweaver MX 2004
14. Publikovanje i održavanje sajta
Kako Dreamweaver radi sa udaljenim sajtovima
Pre nego što dublje zađemo u funkcije i karakteristike udaljenih sajtova, koje nudi Dreamweaver, morate da
shvatite šta Dreamweaver podrazumeva pod udaljenim sajtom. Tokom vašeg lutanja po Internetu ste
verovatno primetili da adrese web strana prate osnovnu i srećom, intuitivnu šemu imena. Na primer, mnoge
naslovne strane, odnosno podrazumevani dokumenti, imaju ime index.htm. Ako kliknete da biste videli
stranu sa proizvodima nekog preduzeća, verovatno ćete biti preusmereni u podfasciklu sa proizvodom. Ne
samo da ovo omogućava bolju organizaciju i održavanje, već ima i više smisla.
Kada postavljate svoj web sajt (upload), Dreamweaver preslikava njegovu strukturu na udaljeni sajt, što je
više moguće (sa nekim izuzecima). Ako na svom lokalnom sajtu imate datoteku widgets.htm, koja se nalazi u
podfascikli products, onda nakon publikovanja sajta imate datoteku widgets.htm u podfascikli products na
udaljenom sajtu. Iako se ovo čini previše jednostavnim, ovo preslikavanje pomaže na nekoliko načina:
• Pomaže prilikom ažuriranja i održavanja sajta.
• Pomaže kod izbegavanja prekinutih linkova, kao i drugih linkova koji iz nekog razloga nisu ispravni.
• Pomaže da se spreči pojava više kopija jedne web strane ili datoteke sa slikom. Ovim se čuva prostor
servera i u nekim slučajevima se smanjuje saobraćaj koji se zauzima.
• Dodaje se nivo profesionalnosti Vašim stranama.
• Lakše je shvatiti i pratiti relativne linkove.
U suštini, da biste mogli da koristite većinu od alata Dreamweavera koji se koriste za rad sa udaljenim
sajtovima, lokalni i udaljeni sajt moraju biti identične kopije. Održavanje strukture datoteka i fascikli je od
vitalnog značaja za sve Vaše linkove. Ovo i nije problem, pošto Dreamweaver to radi umesto Vas
(uključujući i kreiranje potrebnih podfasckli). On to radi automatski, preko komandi kao što su Synchronize,
Get i Put. Pored ovoga ćete naučiti i kako da pravilno konfigurišete udaljeni sajt. Ovo se radi preko okvira za
dijalog Site Definition.
Definisanje udaljenog sajta u Dreamweaveru
Kao i kod definisanja lokalnog sajta, i informacije vezane za udaljeni sajt se mogu uneti u Basic (Site Wizard)
i Advanced režimu. Ovaj drugi način je efikasniji, ali i teži za novajlije, jer nudi više opcija. Ako želite da
udaljeni sajt definišete u naprednom (Advanced) režimu, otvorite okvir za dijalog Site Definition (izaberite
Site > Manage Sites, ili iz padajućeg menija panoa Site izaberite opciju manage Sites). U okviru za dijalog
Manage Sites izaberite svoj sajt i kliknite Edit. Kada se otvori okvir za dijalog Site Definition, kliknite karticu
Advanced, a onda idite na kategoriju Remote Info. Jedina opcija koja stoji na raspolaganju kada prvi put
dođete u deo Remote Info je meni Access. Ono što ovde izaberete dinamički generiše ostale opcije. U
narednim odeljcima ćemo se pozabaviti mogućnostima koje ovde možete podešavati.
189 / 299
Dreamweaver MX 2004
Bez uspostavljanja veze
Ako kao metod pristupa izaberete None, onda nemate na raspolaganju druge opcije i preko Dreamweavera
ne možete da prebacite svoj sajt na udaljenu lokaciju. Ako ne uspostavite vezu ne možete ni da koristite
neke od naprednih mogućnosti za rukovanje sajtovima, koje postoje u Dreamweaveru.
Iako u slučaju kada nemate definisan način pristupa udaljenom sajtu ne možete ni da koristite Dreamweaver
za rukovanje udaljenim sajtom (kao što su prebacivanje Vašeg sajta na taj udaljeni sajt), to možete da
uradite preko nekog nezavisnog programa, kao što su FTP klijenti, poput CuteFTP-a na Windows platformi
(www.cuteftp.com). Ako niste familijarni sa ovakvom praksom, onda se ipak preporučuje da koristite
ugrađene funkcije za rukovanje sajtovima, koje postoje u Dreamweaveru.
FTP
FTP je skraćenica za File Transfer Protocol i on je verovatno najrasprostranjeniji metod za prebacivanje web
strana na web server. Vi ćete verovatno koristiti ovaj metod kada budete pravili organizaciju web strana.
Slično kao kod Hypertext Transfer Protocol (HTTP, koji se koristi za transfer web strana preko Interneta), i
FTP zahteva klijentsku i serversku aplikaciju. U ovom slučaju Dreamweaver se ponaša kao FTP klijent.
Softver na udaljenom serveru se ponaša kao FTP server. Ako kao metod pristupa u Dreamweaveru
izaberete FTP onda u okviru za dijalog Site Definition treba da unesete sledeće informacije :
190 / 299
Dreamweaver MX 2004
Host Directory Ovim se definiše fascikla na serveru gde će se nalaziti prebačeni sajt. To je isto kao
facscikla na lokalnom račuinaru. Dosta servera ima osnovnu adresu sajta www.htdocs ili public_html. Ako
niste sigurni koja je fascikla domaćin, ostavite ovo polje prazno. Ovo je podrazumevano glavna fascikla FTP
hosta. (Neki host računari koriste kombinaciju korisničko ime/lozinka da Vas automatski prebace u
odgovarajuću fasciklu.) Ako je u polju host directory neispravna putanja, Dreamweaver možda neće uspeti
da se poveže. čak i ako je FTP informacija ispravna, a vi preko nje možete da se povežete sa drugim
klijentima. Ako imate problema kod povezivanja, obrišite vrednost u polju Host Directory. Nakon što se
povežete, možete da proverite koja je prava fascikla.
• Login – Ovo je korisničko ime Vašeg naloga.
• Password – Ovo je lozinka koja se koristi za proveru identiteta za vaš nalog kod pristupa FTP
serveru.
• Use Passive FTP – Ovo je potrebno kod nekih firewall-ova, a omogućava Dreamweaveru da podesi
FTP sesiju umesto da to radi FTP server. Ako niste sigurni šta ovde treba uneti, ostavite polje
nepotvrđeno i proverite sa svojim mrežnim administratorom.
• Use Firewall – Ovo diktira da li će Dreamweaver koristiti podešavanja firewalla za povezivanje sa
FTP serverom. Ako je potrebno da podesite ovu vrednosti, pitajte svog mrežnog administratora.
• Use Secure FTP – Ovim se omogućava da šifrujete svoje informacije o nalogu. Ne šifruju se
datoteke koje se prebacuju.
• Use Check In /Check Out Ovim se uključuje softver Dreamweavera za proveru verzija.
Veza tipa Local/Network
Ovakva veza se koristi kada se web server na koji publikujete svoje strane nalazi u istoj lokalnoj mreži (LAN)
kao i vi. Ova opcija se često koristi kada pravite intranet sajt ili ako nudite dizajn i smeštaj tuđih sajtova. Kod
ovakvog tipa veze, morate da zadate putanju do udaljene fascikle. Te informacije možete da unesete ili
preko dugmeta Browse možete da pronađete fasciklu na udaljenom sajtu.
191 / 299
Dreamweaver MX 2004
Kod ovakvog načina povezivanja imate mogućnost automatskog osvežavanja liste datoteka na udaljenom
sajtu. Ako je ova opcija uključena, Dreamweaver osvežava tu listu za Vas (na primer, povezuje se sa
udaljenim računarom i ponovo pravi listu udaljenih datoteka) svaki put kada se dodaju ili brišu udaljene
datoteke. Ako ne uključite ovu opciju i dalje to možete da uradite ručno, ako kliknete dugme Refresh u panou
Site, ili ako izaberete View > Refresh u meniju panoa Site.
SourceSafe Database, RDS i WebDAV
SoruceSafe, RDS i WebDAV su sistemi za proveru verzija, odnosno alati koji omogućavaju da više
programera radi zajedno i da prate datoteke, tako da se ne desi da jedan programer prebriše nešto što je
neko drugi uradio. Visual SourceSafe (VSS) je Microsoftov program. RDS i WebDAV su protokoli (kao FTP),
što znači da je u pitanju skup pravila koja se koriste za komunikaciju i praćenje datoteka. Protokol je skup
pravila oko kojih su se računari složili prilikom transporta datoteka. Ove opcije koje se odnose na udaljena
podešavanja su različiti načini povezivanja računara i prebacivanja datoteka.
Rad sa udaljenim sajtom
Nakon što u okviru za dijalog Site Definition podesite informacije vezane za udaljeni sajt, možete da
komunicirate sa udaljenim serverom. U ovom odeljku ćemo pokazati koji su koraci koji spadaju u upravljanje
udaljenim sajtom. Napredniju diskusiju, kao što je ona koja se odnosi na sinhronizaciju, ostavili smo za
kasnije. U ovom odeljku smo objasnili dve osnovne funkcije, a to su uspostavljanje i prekidanje veze sa
udaljenim serverom, kao i prebacivanje datoteka i njihovo preuzimanje sa udaljenog servera.
Pregled informacija sa udaljenog servera u panou Site
Kada proširite pano Site tako da se prikazuju i leva i desna strana, imate mogućnost da prikažete mapu sajta
ili listu Remote Files. Oni se prikazuju u levom panou. Ako želite da prikažete listu Remote Files, kliknite
192 / 299
Dreamweaver MX 2004
ikonu Files u gornjem levom uglu proširenog prozora. Za razliku od Dreamweavera, većina FTP programa
prikazuje lokalne informacije sa leve, a informacije sa udaljenog sajta sa desne strane. Ako biste želeli da se
i u panou Site koristi takav način prikazivanja, otvorite okvir za dijalog Prefences > Site i promenite raspored.
Uspostavljanje i prekidanje veze
Dugme Connect/Disconnect omogućava da uspostavite i prekinete vezu sa udaljenim FTP serverom. Ova je
opcija na raspolaganju i ako koristite sistem za kontrolu koda, kao što je SourceSafe ili WebDAV. Ako
publikujete materijal na server koji se nalazi na Vašem računaru ili u Vašoj mreži, ovo dugme je sive boje,
pošto ste sa lokalnim serverom automatski povezani. Ovo dugme je sive boje i ako niste zadali udaljeni FTP
server u definiciji sajta. Ako koristite FTP vezu, morate da izaberete dugme Connect da biste se povezali sa
FTP serverom pre nego što počnete prebacivanje datoteka iz lokalne u udaljenu fasciklu. Kada se povežete,
u donjem levom uglu ikone dugmeta Connect se pojavljuje zeleno svetlo. Tako možete da znate da li ste
povezani sa udaljenim serverom. Ako kliknete to dugme veza se prekida. Ako, prilikom uspostavljanja veze
sa udaljenim serverom naiđete na probleme (ili ako samo želite da znate šta Dreamweaver radi kada
pritisnete dugme Connect), možete da pogledate FTP dnevnik. Ovo se dešava ako iz menija panoa Site
izaberete opciju View > Site FTP Log, ili ako otvorite pano Results (Window > Results) i pređete na karticu
FTP Log. Tu su zapisi koji nastaju u realnom vremenu, a odnose se na FTP zahteve i odgovore. Ovo će
Vam pokazati i kako Dreamweaver kreira fascikle, kako prebacuje i preuzima datoteke i koristi druge FTP
komande.
Postavljanje i preuzimanje
Kada ste povezani sa udaljenim sajtom, na njega možete da postavljate ili sa njega preuzimate datoteke.
Kada želite da prebacite datoteke na sajt, to je proces postavljanja, pošto postavljate datoteke na udaljeni
sajt. Kada želite da preuzmete datoteke sa udaljenog servera, to je proces dobijanja, pošto dobijate datoteku
sa udaljene fascikle. U Dreamweaveru datoteke možete preuzimati i prebacivati na sledeće načine:
• Kliknite dugme Get ili Put na paleti panoa Site.
• Izaberite Site > Get ili Site > Put sa menija panoa Site.
• Desnim tasterom miša kliknite izabranu datoteku i iz pomoćnog menija izaberite Get ili Put.
Možete i da izaberete zabavan ali i opasan način, a to je prevlačenje datoteka, u panou Site, sa jednog sajta
na drugi. Ako prilikom postavljanja ili preuzimanja datoteka, postoji neka starija verzija te datoteke, ona se
prepisuje. Ako postoji novija verzija, Dreamweaver će Vas upozoriti i omogućiti da prekinete operaciju. Kada
izaberete da preuzimate ili postavljate datoteke, otvara se okvir za dijalog Dependent Files. U njemu se pita
da li treba da se uključe sve datoteke koje su linkovima povezane sa tim HTML dokumentom. Tu spadaju i
slike i drugi multimedijalni sadržaj. Izaberite Yes ili No. Dreamweaveru možete da kažete i da li ubuduće
treba da postavlja isto pitanje. Ako odlučite da Dreamweaver više ne treba da postavlja to pitanje, mogli biste
da se kasnije predomislite. Ovu opciju možete ponovo da uključite ako odete u deo Site u okviru Preferences
i potvrdite polje Prompt on Get or Put. Ako odlučite da ovu mogućnost ne koristite, možete da naterate da
Vas Drearmveaver to pita samo povremeno, ako prilikom izbora dugmeta Get ili Put držite pritisnut taster Alt.
Sinhronizacija lokalnog i udaljenog sajta
Tokom svog "programerskog" života ste sigurno probdeli nekoliko noći u pokušaju da projekat završite na
vreme. Možda se desilo da sa izlaskom sunca, dok i dalje furiozno radite, zaboravite da li ste poslednju
verziju prebacili na udaljeni sajt. Kako da pratite koje su najnovije datoteke i da li su postavljene na udaljeni
sajt? Dreamweaver nudi dva načina da se ovo uradi. Može se raditi ručno i automatski. U narednom odeljku
smo objasnili stari manuelni metod. Nakon toga smo objasnili snagu komande Synchronize, koja omogućava
da ovo radite automatski.
Izbor novijih datoteka na udaljenom i lokalnom sajtu
Komanda Select Newer Local i komanda Select Newer Remote može da se koristi za manuelnu
sinhronizaciju sajtova. Ova funkcija poredi datum promene svake datoteke na lokalnoj mašini sa datumom
promene datoteke na udaljenom sajtu.
Novije lokalne datoteke
Ako želite da izaberete novije datoteke na lokalnom sajtu, desnim tasterom miša kliknite pano Site i izaberite
opciju Select > Newer > Local, ili iz menija panoa Site izaberite Select > Select Newer Local. Nakon što
193 / 299
Dreamweaver MX 2004
Dreamweaver uporedi datume promena datoteka na udaljenom i lokalnom sajtu, on će u lokalnom prozoru
istaći datoteke koje su novije u odnosu na datoteke na udaljenom sajtu. Odavde možete da kliknete dugme
Put i da sve datoteke koje su novije sa lokalnog sajta prebacite na udaljeni sajt.
Opcija Select Newer Remote
Ako na jednom sajtu radite kao deo tima, moguće je da na udaljenom sajtu postoji novija verzija dokumneta,
od one koju imate na lokalnom sajtu. U tom slučaju, pre nego što počnete da menjate dokument, treba da
proverite da li na udaljenom serveru postoji novija verzija. Ovo možete da uradite ako u panou Site kliknete
desnim tasterom miša i izaberete opciju Select Newer Remote, ili ako iz menija panoa Site izaberete Site >
Select Newer Remote.
U tom slučaju se ističu datoteke koje su novije na udaljenom sajtu. Ako želtie da tu noviju verziju prebacite
kod sebe, dovoljno je da kliknete dugme Get.
Pošto Dreamweaver ističe samo one datoteke koje su novije, to one koje imaju ista vremena (odnosno kod
kojih su datum i vreme promene isti) nisu izabrane. Ako je sajt već sinhronizovan, onda se posle ovih
komandi neće izabrati nijedna datoteka. Možda ćete pomisliti da se ništa nije desilo, ali su oba sajta
ažurirana.
Treba da znate da Dreamweaver proverava sve datoteke na sajtu, odnosno da komanda Select Newer
Remote može da potraje. To je slučaj ako sa udaljenim serverom imate sporu vezu. Ponekad možete da
pomislite da je Dreamweaver zamrznut. Budite strpljivi, posebno ako ste povezani preko modema.
Komanda Synchronize
Da biste pristupili komandi Synchronize izaberite Site > Syncrhonize. Ova komanda je mnogo bolji način za
sinhronizaciju datoteka, nego ručno selektovanje novijih datoteka. Deo lepote i snage ove komande je u
tome da možete da je podešavate onoliko koliko želite. To znači da možete da sinhronizujete samo jednu
fasciklu ili ceo sajt. Možete i da izaberete da obrišete neku datoteku na udaljenom sajtu, koja ne postoji na
lokalnom, ili obrnuto. Ovo nije moguće kod prethodnog (ručnog) metoda.
Sinhronizaciju sajta pomoću komande Synchronize ćete izvršiti na sledeći način:
1. Osim u slučaju da želite da sinhronizujete ceo sajt, izaberite datoteke koje želite da sinhronizujete.
2. Izaberite Site > Synchronize. Otvoriće se okvir za dijalog Synchronize Files.
3. Iz padajućeg menija Synchronize izaberite da li želite da ažurirate ceo sajt ili samo izabrane
datoteke.
4. Iz padajućeg menija Direction izaberite neku od sledećih opcija:
•
•
•
Prebacivanje samo onih datoteka koji su novije na lokalnom nego na udaljenom sajtu
(datoteke će se samo slati na udaljeni sajt).
Preuzimanje samo onih datoteka koje su novije na udaljenom nego na lokalnom sajtu
(datoteke se samo preuzimaju).
Sinhronizacija lokalnog i udaljenog sajta (datoteke se i šalju i preuzimaju).
5. Ako ste iz menija Direction izabrali opciju Get and Put Newer Files, idite pravo na korak 6. Ako ste
izabrali neku od druge dve opcije, treba da podesite još jednu dodatnu opciju. Ako prebacujete
novije datoteke na udaljeni sajt, na lokalnom disku možete da obrišete te datoteke. Potrebno je
samo da potvrdite odgovarajuće polje u donjem levom uglu. Treba da imate na umu da je brisanje
datoteka konačna operacija i da se ne može poništiti. Ovu opciju treba koristiti vrlo pažljivo. Na
serveru često postoje datoteke koje su potrebne, kao što su dnevnici, skriptovi i sl. za koje na
lokalnom sajtu ne postoje odgovarajuće datoteke. Slično se može desiti da imate lokalne datoteke,
kao što su PNG, FLA ili fascikle sa šablonima i bibliotekom, koji se ne prebacuju na server, ali su
ipak potrebne.
194 / 299
Dreamweaver MX 2004
6. Pritisnite Preview. Ovim se obrađuju datoteke koje sinhronizuju i otvara se prozor Synchronize. Na
taj način možete da vidite šta će se desiti ako kliknete OK. Prikazaće se broj datoteka koje će biti
ažurirane, akcija koja će se desiti sa tom datotekom (get, put ili delete), kao i ime datoteke.
7. U koloni Action ovog okvira za dijalog su podrazumevano potvrđena sva polja. Ako neko polje ne
potvrdite, onda se datoteka i ne obrađuje. Na taj način možete da osigurate da tačno znate šta se
dešava, odnosno koje promene će napraviti Dreamweaver. Ovo je samo za slučaj da znate nešto
što on neće uraditi.
8. Kliknite OK da biste zatvorili okvir za dijalog.
Kada sinhronizaciju vršite sa opcijom Get Newer Files from Remote možete da obrišete lokalne datoteke
kojih nema na udaljenom sajtu. Ako sinhronizujete sa opcijom Get Newer Files from Local, možete da
obrišete datoteke na udaljenom serveru, kojih nema na lokalnom serveru. Sa ovim opcijama treba da budete
izuzetno pažljivi. Najčešće se izvorne datoteke, kao što su .psd datoteke iz Photoshopa, ili .png iz
Fireworksa, čuvaju u fasciklama na lokalnom sajtu. Ove datoteke ne bi trebalo ni da se prebacuju ni da se
brišu. Slično se može desiti da na web serveru postoje neophodne datoteke (udaljeni sajt), koje nemaju
svoje parove na lokalnom sajtu. To su, na primer, skriptovi ili statistika web sajta.
Nakon što završite sinhronizaciju, možete da vidite koje je akcije Dreamweaver preduzeo. Dreamweaver
prikazuje napredak sinhronizacije i nakon što završi omogućava da upamtite tekstualnu datoteku sa
izvršenom procedurom.
Sakrivanje
Pošto se često dešava da na svom lokalnom sajtu imate aktivu, koja se nikad ne prebacuje na udaljeni sajt,
Dreamweaver omogućava da određene fascikle i datoteke sakrijete. Sakrivanje sajta omogućava da
isključite fascikle i tipove datoteka iz određenih operacija, kao što su preuzimanje ili prebacivanje (get i put).
Treba da znate da možete da sakrijete određene tipove datoteke (kao što je PNG), ali ne i konkretne
datoteke. Stavke koje sakrivate su specifične za sajt, što znači da svaki sajt na kome radite može da sakriva
različite fascikle i tipove datoteka. Fascikle i tipove datoteka možete da sakrivate kako na lokalnom, tako i na
udaljenom sajtu. Kada je fascikla sakrivena, onda se isključuje iz sledećih operacija:
• Put/Get
• Check In/Check Out
• Undo Checkout
• Reports
• Select Newer Local/Select Newer Remote
• Check Links Sitewide/Change Links Sitewide
• Synchronize
• Find/Replace Sitewide
• Asset Panel Contents
• Template Updating/Library Updating
Uključivanje i isključivanje sakrivanja
Mogućnost sakrivanja je podrazumevano uključena. Ako želite da ovo isključite, otvorite okvir za dijalog Site
Definition (izaberite Site > Manage Sites, ili upotrebite padajući meni Site u panou Site), desnim tasterom
kliknite pano Site i izaberite Cloaking > Settings, ili iz menija panoa Site izaberite Site > Cloaking > Settings.
Idite u kategoriju Cloaking i uključite ili isključite opciju Enable Cloaking. Ako isključite sakrivanje, onda sve
sakrivene datoteke opstaju otkrivene. Dreamweaver neće zaboraviti da ste ih jednom sakrili. Ako kasnije
ponovo uključite sakrivanje, te datoteke ponovo postaju sakrivene.
195 / 299
Dreamweaver MX 2004
Sakrivanje datoteka i fascikli
Ako želite da sakrijete neku fasciklu, kliknite je desnim tasterom miša i u panou Site izaberite Cloaking >
Cloak. Možete i da izaberete fasciklu i da iz menija panoa Site izaberete Site > Cloaking > Cloak. Sakrivena
datoteka se prikazuje sa dijagonalnom crvenom linijom preko nje. Sakrivanje pojedinačnih datoteka se radi
na malo drugačiji način. Umesto da sakrijete konkretnu datoteku, sakrivate određeni tip datoteke, što se
definiše ekstenzijom datoteke. Ovo ćete uraditi tako što ćete otvoriti okvir za dijalog Site Definition (izaberite
Site > Manage Sites, ili upotrebite padajući meni Site u panou Site) i idite u kategoriju Cloaking. Uključite
sakrivanje na bazi tipa datoteke, preko opcije Cloak Files Ending With. Dreamweaver podrazumevano nudi
da sakrijete PNG i FLA datoteke, odnosno datoteke koje dolaze iz Fireworksa i Flasha.
Zadajte tip koji treba sakriti tako što ćete uneti ekstenziju od tri slova, koja se primenjuje na tip datoteke koju
sakrivate. Pojedine stavke treba da odvojite razmakom. Ako ne želite da sakrivate PNG ili FLA datoteke,
samo obrišite te stavke. Od sada pa nadalje će sve datoteke koje pripadaju izabranom tipu u panou Site biti
označene crvenom linijom.
Otkrivanje
Ako želite da otkrijete sakrivene datoteke, bez obzira da li ste ih sakrili po tipu ili po lokaciji, kliknite desnim
tasterom miša u panou Site i izaberite Cloaking > Uncloak All, ili izaberite Site > Cloaking > Uncloak All iz
menija u panou Site. Dreamweaver će pitati da li ste sigurni da želite da to uradite. Otvoriće se okvir za
dijalog sa pitanjem: 'Are you sure You Want to Do This?". Kliknite Yes. Sada su sve datoteke i fasickle
otkrivene, bez obzira na tehniku koju ste koristili da ih sakrijete.
Rad bez sajta: Definisanje veze sa udaljenim serverom
Ako ne želite da radite u okviru sajta, ali i dalje želite da na server prebacujete web strane, Dreamweaver
196 / 299
Dreamweaver MX 2004
omogućava da definišete udaljenu vezu, bez definisanja sajta. Udaljenu vezu ćete napraviti ako desnim
tasterom miša kliknete ikonu FTP and RDS Servers, koja se nalazi u panou Site, ili ako iz menija u panou
Site izaberete meni Servers. Otvoriće se okvir za dijalog Configure Server. Vezi dajte ime koje ćete kasnije
prepoznati. Unesite podešavanja slična onima koja ste zadavali u kategoriji Remote Info u okviru za dijalog
Site Definition. Kada završite, kliknite OK da biste zatvorili okvir za dijalog. U panou Site se sada prikazuje
lista datoteka i fascikli na serveru sa kojim ste se povezali. Ubuduće će proširivanje veze sa tim serverom u
panou Site, radi prikazivanja datoteka, istovremeno značiti i uspostavljanje te veze, naravno, ako već pre
toga nije uspostavljena. Ako želite da na udaljenom serveru sačuvate dokument (da ga prebacite tamo) treba
1. Otvorite dokument koji želite da premestite na server i izaberite File > Save to Remote Server.
2. Kada se pojavi okvir za dijalog Save File, u listi sa leve strane pronađite svoju vezu. Prikazaće se
struktura fascikli na serveru. Izaberite fasciklu u koju želite da smestite datoteku i kliknite OK. Ovim
se dokument prebacuje na udaljeni server.
Ako želite da otvorite datoteku sa udaljenog servera, u listi sadržaja servera u panou Site, desnim tasterom
miša kliknite tu datoteku i izaberite opciju Open. Ovim se otvara kopija datoteke. Datoteka se ne prebacuje
na lokalni server. Ovo možete da zaključite ako u prozoru Document pogledate naslovnu liniju otvorenog
dokumenta.
197 / 299
Dreamweaver MX 2004
198 / 299
Dreamweaver MX 2004
15. Kreiranje dinamičkih sajtova u Dreamweaveru
Osnovno o dinamičkim sajtovima
Statička web strana je ona koja se u potpunosti kreira unapred, sa postavljenim tekstom i slikama. Ona se
nalazi na web serveru i čeka da je posetilac pogleda. Dinamička web strana sadrži mesta na kojima server
ubacuje određeni sadržaj i to u trenutku kada korisnik zatraži stranu. Tu su i instrukcije kako da server
napravi tu stranu. Ako pogledate kako se web strane šalju od servera do pretraživača, shvatićete i kako ovo
radi.
Kako rade statičke strane
Kada posetilac klikne link ili unese URL adresu, pretraživač šalje zahtev u obliku URL-a, koji ide na server.
Server pronalazi stranu i odgovara tako što je šalje nazad do pretraživača. Ovo je model zahtev-i-odgovor
(request-and-response). Zahtev je HTTP zahtev, odnosno koristi se protokol http://. Ovaj protokol se zadaje
pre URL adrese. Softver koji predstavlja web server se naziva i HTTP
Kako rade dinamičke strane
Dinamički podaci u ovu jednačinu ulaze na tri načina:
• Uključivanje na strani servera (Server-Side Include - SSI)
• CGI skriptovi
• Povezivanje sa bazom podataka preko aplikacionih servera
Iako je namena ovog poglavlja da pokaže kako funkcioniše treći metod, ipak smo objasnili sva tri načina, da
biste videli kako su oni povezani.
Uključivanje na strani servera (SSI)
Najjednostavnija vrsta dinamičkog sadržaja, i ona koju je najlaše razumeti, je SSI. SSI je mesto koje se
nalazi u HTML dokumentu, koje sadrži instrukcije da server treba da ga zameni nekim podacima koji se
dinamički generišu. Podaci koji se ubacuju mogu biti delovi unapred definisanog koda, ili tekući datum i
vreme, koji su prikupljeni iz nekog skripta ili iz baze podataka. Kod za SSI bi mogao da izgleda ovako:



HTML dokument koji sadrži SSI se pamti u datotekama sa posebnom ekstenzijom, obično.shtm ili.shtml.
Ovim se server upozorava da postoji SSI. Kada server primi zahtev za nekim SHTML dokumentom, on
odgovara pronalaženjem SSI-ja koji je ugrađen na toj strani, izvršenjem instrukcija koje su tu zadate i
ubacivanjem rezultujućih podataka u dokument, koji se zatim šalje do pretraživača. Obično ovo obuhvata
postavljanje nekih realnih podataka (kao što su datum i vreme, ili čak sadržaj neke druge datoteke na
serveru) na mesto koje je definisao SSI.
Dokumenti sa CGI skriptovima
Prave dinamičke strane se mogu napraviti preko CGI skriptova. Ovi skriptovi obrađuju zahteve pretraživača i
šalju odgovor, pri čemu se pamti ono što je korisnik uneo, a isporučju se web strane sa sadržajem za koji se
unapred zna samo gde će se nalaziti. Strane čak mogu i da se prave u vreme izvršenja, na osnovu niza
parčića koda. Za ovu diskusiju je potrebno samo da znate da se CGI skriptovi (obično pisani u Perlu) nalaze
na web serveru u posebnoj fascikli. Ova fascikla se generalno zove cgi-bin. Kada korisnik popuni formu,
akcija te forme može biti URL adresa CGI skripta. Evo kako to izgleda (URL je ispisan masnim slovima):
<form name="theForm" action="http://www.domain.com/cgi-bin/myscript.cgi" method="post">
Kada kliknete dugme Submit, pretraživač traži zadati skript i prosleđuje mu promenljive sa forme. Ovo se
prosleđuje kao deo URL adrese, ili kao pridružena pošta. Pošto je ekstenzija strane koja se traži.cgi ili.pl (u
zavisnosti od softvera koji se koristi), web server zna da tražena strana ne može da se samo pošalje
pretraživaču, već pronalazi skript i izvršava ga. Skript može da obavlja neke jednostavne zadatke, kao što je
199 / 299
Dreamweaver MX 2004
slanje onog što je korisnik uneo na određenu adresu, ali može i da obavlja složenije poslove, kao što su neki
proračuni sa tim korisnikovim podacima, komunikacija sa bazom podataka, itd.
Aplikacioni serveri i povezivanje sa bazama podataka
Treći i najmoćniji način za kreiranje dinamičkih web strana je upotreba baza podataka, koje obezbeđuju
sadržaj, zajedno sa specijalnim programima, aplikacionim serverima, koji u trenutku izvršenja prave web
strane. Proces generalno teče na sledeći način:
1. Pretraživač šalje HTTP zahtev koji sadrži URL adresu dokumenta sa ekstenzijom kao što
je.asp,.aspx,.cfm,.php ili.jsp.
2. Web server prepoznaje ekstenziju, pronalazi traženu stranu i aktivira aplikacioni server. Ovo može
biti Active Server kontrola, ugrađena u Microsoftov web server, ColdFusion Server, Tomcat Java
server ili PHO modul.
3. Aplikacioni server čita dokument i izvršava skriptove koji u njemu postoje, ili interpretira korisničke
oznake koje tu pronađe. Ovi skriptovi i oznake obično sadrže zahteve za nekom vrstom informacija
iz baze podataka (na primer, "ovde postavi sadržaj polja Product Name, iz baze Widget
International"), ili instrukcije da treba nešto promeniti u bazi (na primer, "U polje Username u bazi
Books Online, dodaj Johna Smitha).
4. Aplikacioni server šalje ove zahteve i instrukcije, zbirno su to upiti, do sistema za upravljanje bazama
podataka, kao što su Access, ili MySQL, koji pronalaze odgovarajuću bazu podataka i izvršavaju
traženu akciju. Ako su tražene neke informacije, one se šalju nazad na aplikacioni server.
5. Apliacioni server konstruiše HTML stranu koja sadrži tražene informacije, formatirane prema
instrukcijama u prvobitnom dkoumentu. Sve to se šalje nazad do web servera.
6. Web server ovu stranu šalje do pretraživača.
Operativni sistem na serveru i HTTP serverski softver
Web server je računar koji koristi neku verziju operativnog sistema kao što su Windows ili Unix/Linux
(uključujući i Mac OS X), na kojima radi specijalni program koji obrađuje HTTP zahteve. Termin web server u
priči o dinamičkim sajtovima obično ukazuje ne na sam računar, već na program koji tu radi. Program se
naziva i HTTP serverom, da bi se razlikovao od aplikacionog servera. Programi koji se najčešće koriste kao
serveri su opisani u narednim odeljcima.
Apache
Apache je danas najpopularniji program. Njega pravi i održava firma Apache Software Foundation. Instaliran
je na preko 50% svih web servera. Apache je open source, pa je prema tome besplatan ili vrlo jeftin. On je
stabilan i dobar, a može da radi na bilo kom operativnom sistemu.
Internet Information Server
Microsoftov Internet Information Server (IIS) je po popularnosti odmah iza Apachea. On je snažan i
fleksibilan, ali pošto je proizvod Microsofta, radi samo na Windows operativnim sistemima (NT, 2000 ili XP).
Baza podataka
U srcu web sajta koji se upravlja podacima je, naravno, baza podataka. Da bi sistem mogao da radi, mora da
postoji baza podataka i ona mora da se nalazi na web serveru, ili na računaru kome web server može da
200 / 299
Dreamweaver MX 2004
pristupi. Da biste kreirali bazu podataka i mogli da sa njom komunicirate, morate imati softver po imenu
sistem za upravljanje bazama podataka (database management system - DBMS). Da bi baza bila deo
sistema, mora da se nalazi na serveru.
Hijerarhijska skladišta podataka
Baze podataka informacije čuvaju u tabelama, odnosno nizu polja (kolona) i zapisa (vrsta). Dodavanje novog
kupca u bazu dodaje novi zapis, odnosno vrstu. Dodavanje novog polja, ili kolone, znači da se o tom kupcu
sada čuva još neko parče informacija.Ovakva struktura tabele se naziva hijerarhijskim skladištem podataka.
Relacione baze podataka
Hijerarhijsko skladištenje podataka nije tako loše, ali ne može da pomogne kod rukovanja složenim
informacijama. Sofisticiranije baze podataka, one koje se i koriste kod web sajtova upravljanim podacima, su
relacione baze podataka. Ovim bazama rukuje sistem za upravljanje relacionim bazama podataka (RDBMS).
Relacione baze podataka imaju sledeće mogućnosti:
• Višestruke tabele Relaciona baza podataka informacije čuva u nizu tabela, koje su povezane nekim
zajedničkim ključnim poljima.
• Primarni i strani ključevi Ključevi uspostavljaju vezu između tabela. Svaka tabela mora da sadrži
jedno polje označeno kao primarni ključ. To je jedinstvena vrednost za svaki zapis. Preko ove
vrednosti možete da pronađete određeno polje. Svaka tabela je povezana sa drugim tabelama preko
primarnog ključa iz te druge tabele, koji u prvoj predstavlja strani ključ. Primarni ključevi postaju
strani ključevi u tabeli Order, čime se uspostavlja veza između tabela.
Upiti i SQL iskazi
Baza podataka je korisna samo ako možete da pronađete, ažurirate i analizirate informacije koje iz nje
dolaze. Upite bazi podataka šaljete preko sistema za upravljanje bazom podataka. Koliko je ljudi naručilo
proizvod J-9995 od januara prošle godine? Da li je u odnosu na prošlu godinu neku stavku naručilo više ili
manje ljudi? Koja je najskuplja stavka koja je naručena od marta? Sortiraj kupce po imenu, poštanskom broju
ili državi. Povećaj cene svih proizvoda u bazi za 5 procenata. Standardni jezik koji se koristi za postavljanje
upita bazi podataka je Structured Query Language (SQL). Zato se i upiti koji se šalju u bazu zovu SQL upiti.
Aplikacioni serveri sa sistemima za upravljanje bazama podataka komuniciraju preko drajvera. To su
programi koji definišu kako se informacije prebacuju u i iz baze podataka. Najčešći formati drajvera baze
podataka su Microsoftov Open Database Conectivity (ODBC) i Sunov Java Database Conectivity (JDBC). Za
sisteme upravljanja bazama podataka sa kojima se možete povezati preko nekog od ovih formata se kaže
da su ODBC ili JDBC kompatibilni.
Standardni DBMS programi
Da bi funkcionisao kao deo onlajn sistema, sistem za upravljanje bazom podataka mora biti relaciona baza,
mora biti u stanju da radi pod operativnim sistemom koji server traži, mora da razume SQL iskaze i mora biti
kompatibilan sa ODBC-om, JDBC-om ili nekim drugim standardnim formatom drajvera. U ovom odeljku smo
opisali neke sisteme za upravljanje bazama podataka koji se najviše koriste.
Microsoft Access je najpopularniji program baze podataka. Koristi se generalno u svim poslovima, ali
najčešće za male baze do baza srednje veličine. Access nije baš tako moćan DBMS sistem. Njegovo
osnovno ograničenje u onlajn upotrebi je da ne može da prihvati veliki broj korisnika koji istovremeno
pristupaju bazi. Sa druge strane, njegova cena je razumna, a on je kao deo Microsoft Office-a lako dostupan.
Pošto je proizvod firme Microsoft, radi samo na Windows serverima.
SQL Server je veliki brat Accessa. Namenjen je za velike sajtove sa velikom količinom podataka i velikim
brojem istovremenih zahteva. Ovaj moćan program je skup, a nije ga lako ni naučiti. Kao i Access i on radi
samo pod Windowsom.
MySQL je DBMS, kao dobra alternativa za Access, ako imate mali budžet i ne radite pod Windowsom. Kod
njega ne postoje ograničenja vezana za istovremeni pristup kao kod Accessa, a već su famozni njegova
brzina i stabilnost, tako da je u stanju da rukuje velikim količinama podataka. Sa druge strane, njemu
nedostaju neke od naprednih mogućnosti Accessa, kao što su uskladištene procedure. U svojoj osnovnoj
formi, MySQL koristi interfejs sa komandne linije, tako da u prvom trenutku može da izgleda zastrašujuće. Sa
druge strane, postoje nekoliko besplatnih GUI interfejsa za pristup MySQL-u. Kriva učenja je iznenađujuće
blaga u odnosu na Access. U zavisnosti od toga kako ga koristite on može biti skup ili jeftin. Radi na
Windowsu, Unix-u, Linuxu i Max OS X-u.
PostgreSQL je stariji brat MySQL-a. Ovo je najnapredniji open source DBMS sistem. Radi na Unixu,
uključujući i Linux i Max OS X. Za one koji nisu opterećeni Microsoftom, on je dobra alternativa SQL Serveru.
201 / 299
Dreamweaver MX 2004
Oracle, firme Oracle Enterprises je namoćniji sistem za upravljanje bazama podataka koji danas postoji. To
nije program za mala preduzeća i one koji imaju mali budžet. Vrlo je skup, kriva učenja je strma, a vrlo je
skupo naučiti ga. Oracle radi pod Linuxom, Unixom i Windowsom. Više informacija o Accessu i SQL Serevru
možete naći na adresi www.microsoft.com. Ako želite da više naučite (i preuzmete) MySQL i PostgreSQL
posetite adrese www.mysql.com i www.postgresql.org. O Oraclu možete više naučiti ako posetite sajt
www.oracle.com.
Aplikacioni server (srednji sloj)
Baze podataka i sistemi za upravljanje bazama podataka su široka priča, ali je to ipak samo polovina.
Aplikacioni serveri se ponašaju kao srednji sloj i omogućavaju komunikaciju pretraživača i DBMS sistema. Vi
(i Vaš klijent i preduzeće) ćete se sa ovim programom svakodnevno družiti. Jezik aplikacionog servera ćete
koristiti za pisanje svojih strana. Bićete ograničeni njegovim ograničenjima, a potpomognuti njegovom
snagom. Koji web server, baza podataka i/ili aplikacioni server treba da izaberete? Osim ako niste Vi taj ko
odlučuje o konfiguraciji web servera, ove odluke verovatno nećete donositi sami. Da li će na hostu postojati
određene tehnologije? Ako kupujete neki host, onda je dobro da pogledate koje tehnologije on nudi i kako
opcije koje on nudi zadovoljavaju Vaše potrebe.
ColdFusion
ColdFusion firme Macromedia je postao vrlo popularna alternativa ASP-u, pošto je zasnovan na oznakama
(tagovima), a ne na skriptovima i na taj način komunicira sa bazom podataka. Srce funkcionalnosti
ColdFusiona je ColdFusion Markup Language (CFML). Elementi na strani se mogu praviti preko CFScript
jezika. Deo sa aplikacionog servera je ColdFusion Server. On radi pod Windowsom, Linuxom, HP-UX-om ili
Solarisom i može da se kupi posebno u odnosu na drugi softver web servera. Pošto postoji samo kao
komercijalna licenca, ColdFusion možda nije baš najatraktivniji izbor za mala preduzeća, ali brži razvoj
strana i moguća upotraba CFML-a na duže staze ima smisla.
PHP
PHP (akronim za PHP: Hypertext Preprocessor) je popularna open source alternativa za komercijalne
sisteme. Njegove komande se zasnivaju na skriptovima, koji se pišu u PHP skript jeziku. PHP se može dobiti
besplatno ili jeftino u zavisnosti od toga koja mu je namena. Zajednica koja ga podržava je vrlo velika i
prijateljski nastrojena, ali iza njega ne stoje komercijalne garancije. PHP radi po Apache i IIS web serverima.
Radi na Windowsu, Unixu i Mac OS X operativnim sistemima. Za razliku od ostalih serverskih tehnologija,
PHP je vezan za određene baze podataka. Neće sve instalacije PHP-a raditi sa svim DBMS sistemima.
Dreamweaver MX 2004 podržava PHP koji radi sa MySQL-om.
ASP/ASP.NET
ASP (Active server Pages) je Microsoftov aplikacioni server. ASP nije nezavisan program ili softverski modul,
kao što je slučaj sa drugim aplikacionim serverima. Umesto toga su njegove funkcije ugrađene u Microsoftov
web server (IIS). Jezik se zasniva na skriptovima, a za pristup bazama podataka se može koristiti VBScript ili
JavaScript. Ovo se koristi i za konstruisanje strana na osnovu tih rezultata. Mnogi programeri i dalje koriste
ASP za sajtove koji su manje složeni, ali se on uglavnom menja moćnijim ASP.NET-om. Prema
Microsoftu,.NET okruženje koje sadrži i ASP.NET je novo lice dinamičkog web razvoja. Programi i skriptovi
se mogu pisati u nekoliko jezika, uključujući C++, C#, JScript i Visual Basic. Mogu se izvršavati na strani
servera i na strani klijenta. Strane sa živim podacima se mogu programirati i uz pomoć COM tehnologije.
ASP.NET ima mnoge dobre osobine rada sa Javom i JSP tehnologijom, ali je striktno u okviru Microsoftovih
rešenja. ASP.NET radi samo na IIS web serverima i naravno samo na serverima koji rade pod Windowsom.
JSP
JSP ili Java Server Pages su, kao što i ime pokazuje, alternativa zasnovana na Javi. Aplikacioni server je u
obliku apleta (kontejnera) koji se nalazi na serveru. Među popularnim JSP kontejnerima postoje neki koji su
komercijalni, kao što su JRun firme Macromedia ili IBM-ov WebSphere, a postoji i open source rešenje, kao
što je Tomcat. JSP najviše koriste Java programeri. On definitivno nije za novajlije.
Napomena
ASP je stara tehnologija, koja je zamenjena ASP.NET-om. JSP generalno ne koristi niko osim Java
programera.
Podešavanje radne stanice za razvoj dinamičkih sajtova
Ako želite da preko Dreamweavera pravite web sajtove koji su upravljani podacima iz baze podataka, i da
koristite ColdFusion, PHP ili neku drugu tehnologiju na strani serevra, svoje razvojno okruženje možete da
podesite na jedan od dva načina.
202 / 299
Dreamweaver MX 2004
Kod "živog" ili "onlajn" podešavanja se sav specijalan softver, kao što je web server, aplikacioni server,
DBMS i drajver, nalaze na udaljenom računaru do kojeg možete da pristupate preko FTP-a. Ovaj udaljeni
računar može biti čak i web server na kome se nalazi Vaš sajt. Ovakav rad je lakši, pošto to znači da na
svom računaru ne morate da instalirate nikakav novi softver. Sa druge strane, možete da radite samo ako
ste povezani sa udaljenim serverom i ograničeni brzinom veze.
Kod "offlajn" podešavanja se svi softverski elementi stavljaju na Vaš računar, uključujući i HTTP server,
DBMS i sve drugo, tako da se Vaš računar privremeno ponaša i kao server i kao razvoj. Kada završite sajt,
sve datoteke iz baze podataka, drajvere i strane prebacujete na pravi server. Ovo je i način koji uglavnom
koriste programeri, kad god je to moguće. Dodatna prednost ovakvog načina rada je da dobijate besplatnu
edukaciju o tome kako rade web serveri.
Podešavanje onlajn razvoja
Za podešavanje udaljenog razvoja su Vam potrebne sledeće informacije i konfiguracija.
HTTP adresa udaljenog računara (URL)
Čak i ako ste sa udaljenim računarom povezani preko lokalne mreže, da biste mogli da šaljete HTTP
zahteve morate znati njegovu URL adresu. Ako je udaljeni računar web host, onda ćete koristiti ime domena
za Vaš sajt. Ako je udaljeni računar jednostavno drugi računar, sa kojim ste umreženi, onda morate da imate
IP adresu, koju možete dobiti od administratora. IP adresu za Windows server ćete dobiti ako izađete u
prozor za unos komandi, odnosno DOS prozor. Otkucajte ipconfig i pritisnite Enter. Prikazaće se niz brojeva,
koji predstavljaju IP adresu.
Pristup za čitanje i pisanje do deljive web fascikle
Ako je udaljeni računar koji koristite za razvoj web host, onda već imate FTP pristup do svih publikovanih
datoteka. Ako na udaljenom računaru imate lokalnu mrežnu adresu, onda Vam nije potreban FTP pristup.
Bez obzira na način povezivanja, morate biti sigurni da imate dozvolu za čitanje i pisanje za fasciklu u kojoj
se nalaze Vaše datoteke.
Pravilno podešavanje udaljenog računara
Udaljeni računar može biti web server kod preduzeća kome za to plaćate, ili može biti računar kojim
administrira neko drugi u kancelariji, ili sve to može biti Vaša odgovornost. Neko treba da podesi HTTP
server, aplikacioni server, DBMS, kao i drajver. Sve to mora biti na tom računaru. Morate i da poznajete sve
specijalne instrukcije koje se koriste za pristup do tih stavki. Te informacije možete dobiti od administratora
servera ili osoblja za tehničku podršku.
Podešavanje oflajn razvoja
Ako želite da radite oflajn, odnosno, koristite svoj računar kao web server, onda morate biti sigurni da su
HTTP server, aplikacioni server, baza podataka i svi potrebni drajveri instalirani i podešeni na pravi način.
Podešavanje HTTP servera
Osnovne mogućnosti za HTTP server su Apache i IIS. Ako ćete koristiti ColdFusion, onda ColdFusion server
možete da koristite i kao samostalni server (koji obavlja dužnosti HTTP servera i aplikacionog servera), tako
da možete da ga instalirate umesto Apachea ili IlS-a. I dalje treba da pročitate naredni odeljak "Lokalno
opsluživanje strana", da biste shvatili kako lokalni HTTP serveri rade.
Instalacija MS-a
Ako radite po Windowsom NT, 2000 ili XP Pro, onda je najjednostavniji HTTP server za instalaciju IIS. Za NT
korisnike, IIS je deo Windowsa NT 4.0 Option Packa, koji možete da preuzmete sa Microsoftovog web sajta.
Ostali korisnici IIS mogu da nađu na CD sa instalacijom Windowsa. IIS se instalira kao servis, što znači da
se automatski startuje kada se računar podiže. Podešavanju i konfigurisanju IlS-a možete da pristupite ako
izaberete Start > Control Panel > (Administrative Tools) > Internet Service Manager.
Instalacija Apache servera
IIS je najčešći izbor za server koji radi pod Windowsom, ali nije jedina mogućnost. Možda ćete želeti,
posebno ako koristite PHF da pre prebacivanja na Unix okruženje, napravite bližu kopiju eventualnog
okruženja, ako kao HTTP server upotrebite Apache. Apache je besplatan i lako se nabavlja. Korisnici
203 / 299
Dreamweaver MX 2004
Windowsa Apache server mogu da nabave od Apache grupe (http://httpd.apache.org). Apache je stalno pod
razvojem, ali obično može da se preuzme exe datoteka koja se sama instalira. Tu su kompletne instrukcije
za instalaciju. Možete da ga instalirate kao servis (na taj način se pokreće uvek kada se pokrene računar) ili
kao aplikacija, u kom slučaju je sami pokrećete.
Lokalno servisiranje strana
Ako želite da vidite lokalne strane, onda pretraživač mora dc pošalje HTTP zahtev do servera koji se nalazi
na Vašem računaru. Morate zadati HTTP protokol, iza kojeg sledi IP adresa ili ime računara. Možete i da
koristite opštu IP adresu (127.0.0.1) ili ime (localhost) koje računari koriste da pristupe sami sebi. Ako bilo
šta od sledećeg unesete kao adresu u svom pretraživaču on će smatrati da ste zatražili podrazumevanu
stranu na lokalnom serveru:
http://localhost/
http://127.0.0.1/
http://192.123.128.128/(zamenite IP adresom svog računara)
Svaki server ima korensku fasciklu od koje počinje da traži strane koje vraća. Možete da tražite bilo koji
dokument koji je postavljen u toj fascikli, ili u nekoj njenoj podfascikli. Na primer, možete da zatražite
datoteku po imenu myfile.html, koja se nalazi u fascikli myFiles, koja se nalazi ispod korenske fascikle
servera. Treba da unesete sledeće:
http://127.0.0.1/myFiles/index.html
http://localhost/myFiles/index.html
http://192.123.128.128/myFiles/index.html (stavite svoju IP adresu)
Kod IlS-a je korenska fascikla od koje se sve strane traže, c:\Inetpub\wwwroot. Kod Apache servera koji radi
pod Windowsom, korenska fascikla je htdocs, koja se nalazi u fascikli programa Apache. Tačna putanja
može biti različita, u zavisnosti od instalacije.
Najbrži način da proverite da li ste pravilno identifikovali korensku fasciklu je da napravite jednostavnu HTML
datoteku, po imenu mytest.html, i da je upamtite tamo gde mislite da je korenska fascikla. Nakon toga
otvorite pretraživač i otkucajte http:/localhost/mytest.html. Trebalo bi da se prikaže Vaša strana.
Podešavanje aplikacionog servera
Morate biti sigurni i da je aplikacioni server pravilno instaliran i konfigurisan. Aplikacioni serveri kojima smo
se mi bavili su ASP.NET, PHP i ColdFusion.
Podešavanje PHP-a
Ako želite da PHP strane pravite i testirate u lokalu, morate da imate serverski PHP modul ili CGI aplikaciju.
Korisnici Windowsa mogu da ovo preuzmu sa web sajta PHP-a (http://www.php.net/down-loads.php). Pazite
da preuzmete binarnu verziju, a ne izvorni kod. Ovo je verzija koja se sama instalira, zajedno sa kompletnom
dokumentacijom.
Podešavanje ColdFusiona
Ako želite da u lokalu razvijate i testirate ColdFusion strane, morate da instalirate ColdFusion server. Ovo je
komercijalni program, al postoji besplatna verzija za korisnike koji želte da rade na jednon računaru. Korisnici
Windowsa mogu da koriste ColdFusion Server: koji je deo Macromedia Studia MX 2004, ili mogu da
preuzmu program sa adrese http://www.macromedia.com/software/coldfusion. U toku instalacije će se tražiti
da zadate administrativnu lozinki preko koje se pristupa serveru radi podešavanja. Ovo što unesete morate
da upamtite ili zapišete. Kasnije će Vam biti potrebno.
ColdFusion kao HTTP server
ColdFusion može da radi kao samostalni server, što znači da može da funkcioniše i kao HTTP server i kao
aplikacioni server. On podrazumevano radi na portu 8500, što znači da može da radi istovremeno sa IlS-om
ili Apache serverom. To takođe znači da svim stranama morate da pristupate na sledeći način:
http://localhost:8500/...
http://127.0.0.1:8500/...
Korenska fascikla od koje ColdFusion traži sve strane je CfusionMX\wwwroot\. Kod podrazumevane
instalacije na Windowsu se ovo nalazi na C disku. Sve datoteke i fascikle koje se nalaze u ovoj fascikli su
204 / 299
Dreamweaver MX 2004
dostupne preko URL adresa, koje smo pomenuli.
Administriranje ColdFusion servera
Administrativni interfejs ColdFusion Servera je skup web strana kojima pristupate preko pretraživača, na
adresi http://localhost:8500/CFIDE/administrator. Da biste mogli da pristupite ovim stranama, morate da
unesete administrativnu lozinku.
Podešavanje ASP.NET-a
ASP je deo IlS-a, tako da ne zahteva posebnu instalaciju. Ako želite da ASP.NET strane razvijate i testirate u
lokalu, morate da preuzmete i instalirate.NET framework (http://www.microsoft.com/net). Na web sajtu imate
puno dokumentacije i pomoći oko instalacije. Treba da znate da treba preuzeti veliku količinu podataka.
Baze podataka
Ako na svom računaru nemate instalrian DBMS softver, ne možete da opslužujete strane koje se prave na
osnovu podataka iz baze. Za mala preduzeća se najviše koriste Access i MySQL.
Podešavanje Microsoft Accessa
Windows korisnici mogu lako da dobiju Microsoft Access. Možda ga već imate na svom računaru. Ako radite
u lokalu, datoteka sa bazom podataka može da se nalazi bilo gde na računaru.
Podešavanje MySQL-a
MySQL je besplatan. Sa njim se prilično lako radi, ali ga nije tako lako podesiti. Kompletne informacije o
MySQL-u možete naći na zvaničnom web sajtu, na adresi http://www.mysql.com.
Korisnici koji rade pod operativnim sistemom Windows mogu da preuzmu.exe datoteku koja se sama
instalira. (Pazite da preuzmete binarne datoteke za Windows.) Nakon što ga instalirate, pokrenite serverski
deo programa, tako što ćete pokrenuti program WinMySQLAdmin. Ovaj program radi u pozadini i na liniji
poslova se prikazuje kao ikona semafora. Verovatno će Vam biti potreban i neki grafički korisnički interfejs.
MySQL Control Center, koji se može naći na sajtu MySQL-a, je besplatan i lako se koristi. Datoteke baze
podataka se moraju nalaziti tamo gde MySQL server može da ih pronađe. Svaka baza podataka se sastoji
od nekoliko datoteka koje se nalaze u fascikli te baze podataka, u podfascikli mysql/data. Tačna lokacija ove
fascikle zavisi od instalacije MySQL-a koju koristite.
Podešavanje drajvera
Svaka baza podataka sa kojom želite da komunicirate traži da postoji neki drajver preko kojeg bi se sa njom
povezivali. Podešavanje drajvera zavisi od serverske tehnologije koju nameravate da koristite.
ColdFusion
Ako radite sa ColdFusionom, baza mora biti registrovana na ColdFusion serveru. Ovo možete da uradite
preko administrativnih strana ColdFusiona. Sa glavne strane izaberite Data & Services > Data Sources. U
delu Add New Data Source dajte svom izvoru podataka ime od jedne reči i izaberite tip drajvera (Access,
MySQL itd.). Nakon toga kliknite dugme Add. U delu Data Source popunite potrebne informacije (ovo može
biti različito, u zavisnosti od tipa drajvera koji ste izabrali) i kliknite Submit. Ako je sve u redu, nakon nekoliko
trenutaka će se ekran promeniti, a u delu Connected Data Sources će biti prikazana i ta baza podataka.
PHP i drajveri
Kada radite sa MySQL-om (kao i u Dreamweaveru), PHP ne traži drajvere. Umesto toga on komunicira sa
MySQL serverom i može da pristupi svim bazama u sistemu.
ASP.NET i DSN izvori
ASP.NET za komunikaciju sa bazama podataka traži postojanje DSN (Data Source Name) izvora. DSN i
ODBC drajveri se kreiraju i njima se upravlja preko Control Panela, i to njegovog dela Data Sources (ODBC).
DSN ćete napraviti ako otvorite Control Panel, odete na karticu System DSN i kliknete dugme Add. Kada se
pojavi novi DSN prozor, iz liste drajvera izaberite odgovarajući (u zavisnosti od baze podataka koju koristite) i
unesite dodatne informacije koje su potrebne. Za Access baze podataka ovo je jednostavno pronalaženje
baze. Kada završite, zatvorite sve okvire za dijalog. Sada imate metod za pristup bazi podataka iz bilo koje
web aplikacije na računaru.
Funkcionisanje dinamičkih sajtova u Dreamweaveru
Kao što Dreamweaver može da pomogne u pisanju statičkih HTML strana, on sadrži i obilje alata koji mogu
da pomognu u razvoju dinamičkih sajtova, koji koriste ASP, ColdFusion, PHP ili JSP. On može da pomogne
205 / 299
Dreamweaver MX 2004
kod upravljanja vezama sa bazom podataka, kreiranja upita za baze podataka, kao i prikazivanje dinamičkih
informacija, sve to u okviru familijarnog vizuelnog okruženja. Osnovna procedura je:
1. Definišite sajt, uključujući i informacije o serveru koji služi za testiranje.
2. Za sajt napravite najmanje jednu vezu sa bazom.
3. Otvorite pojedinačne dokumente i radite sa objektima aplikacije i ponašanjima servera. Ovo se
koristi za postavljanje upita, prikupljanje rezultata iz baze, prikazivanje dinamičkih podataka, itd.
Pregled živih podataka i server za testiranje
Osnovna razlika između upotrebe Dreamweavera za statičke i dinamičke sajtove je u tome kako se
pregledaju strane koje ste napravili.
Prethodni pregled u pretraživaču
Kada kod statičkog sajta izaberete Preview in Browser (F12), Dreamweaver pokreće pretraživač i prosleđuje
lokalnu adresu tekuće strane:
C:\Client Files\Web\My Local Site\index.html
Ovim pretraživač pristupa sistemu datoteka na računaru. Kod dinamičkih sajtova, međutim, nije dovoljno da
samo pregledate strane u pretraživaču. Dreamweaver mora da aktivira web server i da mu prosledi HTTP
zahtev, tako da ovaj može da obradi te datoteke. Tu se zahteva adresa koja liči na sledeće:
http://localhost/mysite/index.php
http://127.0.0.1:8500/mysite/index.cfm
http://www.mydomain.com/index.aspx
Ovim se zapošljavaju web server i pretraživač, tako da se sve strane servisiraju, i nisu samo prikazane preko
sistema datoteka. Prema tome, da biste razvijali dinamičke sajtove morate imati pristup do web servera na
kome radite.
Prethodni pregled u prozoru Document
Dinamički prethodni pregled možete da izvršite i u prozoru Document, ako kliknete dugme Live Data sa
palete Document. Kada to uradite, prozor Document se menja i u njemu se prikazuje URL (isto kao ono što
se koristi u pretraživaču), a na strani se prikazuju realni podaci. Ovi podaci se prikazuju na mestima na
kojima je to unapred predviđeno. Iako neki posao možete da uradite i sa prikazom Live Data, ovim se proces
usporava i to nije preporučljivo. Umesto toga, ovu opciju možete da upotrebite povremeno, samo kada želite
da pogledate rezultate, a da ne napuštate Dreamweaver. Prikaz Live Data ćete isključiti ako kliknete ikonu
nekog drugog prikaza (Design, Code, Code and Design) sa palete Document.
Podešavanje dinamičkih sajtova
Prvi korak u kreiranju dinamičkih sajtova u Dreamweaveru je da se definiše sajt i to kompletno sa
informacijama o lokalnom serveru, serveru za testiranje i (opcionalno) udaljenom serveru. Dreamweaver
mora da zna gde se nalaze lokalni server, server za testiranje, kao i udaljene fascikle. On takođe mora da
zna koju serversku tehnologiju koristite i ako je potrebno, koji se skript jezika koristi za tu tehnologiju. (Na
primer, ASP može da se kodira u različitim skript jezicima.) Na kraju, kao i kod udaljenog sajta, on mora da
zna kako da komunicira sa web serverom i serverom za testiranje. Evo kako se podešava dinamički sajt u
Dreamweaveru:
1. Izaberite Site > Manage Sites, a onda kliknite dugme New (kao što i obično definišete sajt).
2. U okviru za dijalog Site definition (Advanced) kao i obično podesite kategoriju Local Info. Ako želite,
možete u ovom trenutku da podesite i udaljene informacije (Remote Info), ali to u ovom trenutku nije
obavezno.
3. Dok se još uvek nalazite u okviru za dijalog Site Definition, idite u kategoriju Testing Server. Podesite
serversku tehnologiju i skript jezik koji želite da koristite, a onda podesite i informacije potrebne za
komunikaciju sa udaljenim serverom. Ako planirate da radite onlajn, i da udaljeni server bude
razvojni server, onda podešavanja koja ovde zadate treba da budu ista kao u kategoriji Remote Info.
Ako želite da radite oflajn sa lokalnim serverom za testiranje (sigurnije), onda ovde treba da podesite i
informacije o povezivanju sa serverom.
206 / 299
Dreamweaver MX 2004
Od posebne je važnosti je da budete sigurni da je URL prefiks za komunikaciju sa serverom za testiranje
ispravan. Dreamweaver koristi te informacije za kreiranje pregleda ovih strana. Kod oflajn razvoja, adrese
počinju sa http://localhost ili http://127.0.0.1. Kod onlajn razvoja unesite osnovni URL koji obično koristite za
pregled na svom web sajtu, a to je http://mojdomen.com. Kada završite, kliknite OK, da biste zatvorili okvir za
dijalog Site Definition. Sada su na sajtu uključene dinamičke karakteristike Dreamweavera. Server za
testiranje je u suštini privremeni udaljeni sajt. Sa njim se u interfejsu Dreamweavera radi slično kao sa
udaljenim sajtom. Da biste videli sadržaj servera za testiranje, treba da uradite jedno od sledećeg:
• Ako pano Site nije proširen, iz padajućeg menija izaberite Testing Server (umesto Local View).
• Ako je pano Site proširen, kliknite dugme Testing Server da biste prikazali levi pano.
Kada je pano Site u proširenom režimu i kada je prikazan server za testiranje, sve komande Dreamweavera
za sinhronizaciju, kao što su Get, Put i Synchronize, sa lokalnim i sajtom za testiranje rade isto kao sa
lokalnim i udaljenim sajtom.
Povezivanje sa bazom podataka
Povezivanje sa bazom podataka je skript koji ili poziva drajver, koji komunicira sa bazom podataka, ili govori
aplikacionom serveru kako da bez drajvera komunicira sa bazom. Svaki put kada preko Dreamweavera
uspostavite vezu sa bazom podataka, program pravi fasciklu Connections, koja se nalazi u korenskoj fascikli.
U tu fasciklu se stavlja specijalna skript datoteka. Svaki put kada ovu vezu koristite u nekom od dokumenata
na sajtu, Dreamweaver povezuje taj dokument i skript datoteku. Ovo je sjajna stvar, pošto omogućava da
radite na serveru za testiranje, a da onda prebacite sajt na živi udaljeni server, a da pri tome ažurirate samo
skript za vezu. Svim vezama se upravlja preko panoa Databases (Window > Connections), koje se nalaze u
grupi Application. Vezu možete da napravite ako otvorite pano Databases i proverite poruke koje se tu
javljaju. Koji god model servera da koristite, ovaj pano Vas vodi kroz korake kreiranja skripta za vezu, u
okviru te tehnologije.
207 / 299
Dreamweaver MX 2004
Napomena
Jednim okom bi trebalo da pratite panoe koji postoje u u grupi Application. Prilikom definisanja dinamičkih
sajtova i njihovih strana, generalno počinjete od panoa Databases (sa leve strane) i idete kroz panoe sa leva
u desno. Svaki pano počinje sa listom zadataka koje treba uraditi pre nego što pano bude mogao da se
koristi.
ColdFusion
Za sajtove koji koriste ColdFusion MX se, odmah posle definisanja servera za testiranje, u panou Database
prikazuje lista svih baza podataka koje su trenutno registrovane kod ColdFusion MX servera.
PHP MySQL
Ako je tehnologija koju koristite na strani servera PHP MySQL, onda ne morate da definišete drajver. MySQL
sam brine o bazama podataka i povezivanju sa njima. Kao što je pokazano u panou Databases, potrebno je
definisati sajt (koji uključuje i server za testiranje), otvoriti ili napraviti PHP dokument i proveriti da li se on
može povezati sa serverom za testiranje. Nakon toga kliknite dugme + da biste napravili vezu. Kada kliknete
dugme +, jedini izbor koji postoji je MySQL Connection. Kada izaberete ovu opciju u okviru za dijalog se od
Vas traži:
• Connection name Ime od jedne reči, premda mnogi programeri vole da im se imena veza
završavaju sa conn.
• MySQL Server Unesite IP adresu servera za testiranje. Ako server radi na istom računaru, unesite
localhost ili 127.0.0.1.
• User name and password MySQL samo poznatim korisnicima omogućava da pristupe njegovim
bazama podataka. Ove informacije možete dobiti od adminsitratora MySQL servera. (Ako ste
MySQL podesili na svom računaru, proverite tabelu user u bazi mysql. Tu možete videti koja
korisnička imena i lozinke postoje.)
• Database Ime baze podataka sa kojom se povezujete. Kliknite dugme Select da biste dobili listu
svih postojećih baza podataka.
ASP.NET
Za sajtove koji koriste ASP i ASP.NET u panou Databases možete izabrati DSN na serveru, ili možete da
napravite string za vezu, bez DSN-a. Ako izaberete prvu opciju, prikazuje se okvir za dijalog sa svim DSN
izvorima koji su trenutno definisani na zadatom serveru. Ako nije definisan DSN, onda možete da kliknete
dugme Define. Povezaćete se sa Control Panelom ODBC, u kome možete da definišete DSN bez
Dreamweavera. Ako izaberete drugu opciju, otvoriće se okvir za dijalog u kome možete da otkucate string za
vezu. (Ako želite da više naučite o strinogovima za vezu, proverite šta o tome postoji u nekoj literaturi za
ASP.NET). Nakon što ste napravili vezu, u panou Databases se prikazuje ikona baze podataka sa imenom
te veze. Ako proširite ovu ikonu, videćete strukturu baze podataka sa kojom ste povezani.
208 / 299
Dreamweaver MX 2004
16. Dinamičke strane
Prikupljanje dinamičkih podataka
Čim napišete jedan ili više skriptova za vezu, pojedine strane sa sajta mogu bazi da postavljaju upite.
Najčešća vrsta upita je da se kreira skup rezultata (grupa zapisa koji odgovaraju zadatom kriterijumu
pretraživanja).
Osnovno o skupovima zapisa
Skup zapisa ćete napraviti ako otvorite dinamički dokument i pratite sledeće korake:
1. Otvorite pano Bindings, kliknite dugme + i izaberite Recordset (Query), ili idite na paletu Insert,
izaberite Application Objects, a odatle objekat Recordset, kao što je prikazano na slici. Možete i da
otvorite pano Server Behaviors, da kliknete dugme + i da izaberete opciju Recordset (Query).
2. U okviru za dijalog Recordset koji se otvara, izaberite vezu, bazu podataka i konkretne elemente iz
baze (obično kolone iz tabele, koje se prevode u polja u skupu zapisa), koje želite da prikupite.
3. (Opcionalno) Ako želite da proverite informacije koje ste prikupili, kliknite dugme Test.
4. Kada završite, kliknite OK da biste zatvorili okvir za dijalog.
Nakon što ste napravili skup zapisa, dobijene kolone se prikazuju u panou Bindings, kao što je prikazano
na slici. Proširite ih da biste videli sva polja iz baze podataka koja ste dobili. Pošto Dreamweaver mora da
piše skript da bi napravio skup zapisa, tehnički govoreći, akcija prikupljanja je ponašanje na strani servera,
tako da se skup zapisa prikazuje i u panou Server Behaviors.
209 / 299
Dreamweaver MX 2004
Ako želite da promentie skup zapisa koji ste već napravili, tako da se prikupljaju drugi podaci, ili da se oni
različito organizuju, otvorite pano Server Behaviors i dva puta brzo kliknite ponašanje Recordset. Otvoriće se
okvir za dijalog Recordset u kome možete da promenite podešavanja. Ako posle kreiranja skupa zapisa
promenite njegovo ime, Dreamweaver će Vas upozoriti da preko komande Find and Replace treba da se
zamene sva pojavljivanja tog skupa zapisa u dokumentu. Kliknite OK da biste zatvorili ovo upozorenje.
Otvoriće se okvir za dijalog Find and Replace. Ako želite da prekinete promenu imena skupa zapisa, u okviru
za dijalog Find and Replace kliknite Cancel. Ako želite da zamenite sva pojavljivanja odjednom, kliknite
Replace All. Ako želite da promene vršite jednu po jednu, tako da možete da proveravate šta se dešava,
kliknite Replace onoliko puta koliko je potrebno da bi se promenio ceo dokument. Na šta liči kod za ovaj skup
zapisa? Očigledno je da njegov izgled zavisi od serverske tehnologije i jezika koje koristite. Ipak, u srcu
svakog skupa zapisa je SQL upit, koji može da liči na sledeće upite:
SELECT * FROM korisnici
SELECT korisnickoIme,sifra FROM korisnici
Prvi primer prikuplja sva polja iz svih zapisa u tabeli korisnici u zadatoj bazi podataka. Drugi iskaz prukuplja
samo polja korisnicko ime i sifra iz iste tabele. Iako nije najbitnije da znate kako izgleda upit koji daje skup
zapisa i kod rada sa bazama podataka, kao i kod HTML-a, znanje je moć, pa tako što više znate o onome
što se dešava iza scene, to je bolje za Vas.
Sofisticiraniji upiti i skupovi rezultata
Ako je sve što želite da dobijete skup svih zapise iz tabele u bazi podataka, onda kreiranje skupa zapisa nije
ništa više od koraka koje smo već pomenuli. Često se, međutim, dešava da su potrebni složeniji skupovi
zapisa. Što više znate o takvim skupovima zapisa, to ćete lakše prikupiti prave informacije iz baze.
Sortiranje
Osim ako ne zadate drugačije, server zapise iz baze pdoataka prikuplja po onom redosledu po kojem se oni
tamo nalaze. Ako zapise želite da uredite na neki način, morate da u upit ubacite klauzulu za sortiranje. U
okviru za dijalog Recordset (Query), ovo možete da uradite preko opcije Sort. Sortiranje možete da vršite po
bilo kom polju u tabeli iz koje vadite zapise. Sortiranje se uvek radi po alfanumeričkom redu (0 do 9, A do Y).
Ako želite da sortirate po rastućem ili opadajućem nizu, izaberite opcije Ascending ili Descending (Z do A, 9
do 0). SQL upit koji stoji iza ovakvog rezultata koristi klauzulu ORDER BY. Evo kako to izgleda:
SELECT * FROM korisnici ORDER BY korisnickoIme
210 / 299
Dreamweaver MX 2004
Filtriranje
Filtriranje ćete koristiti kada ne želite da prikupite sve zapise iz baze, već samo one koje zadovoljavaju
određeni kriterijum. Možda želite samo one korisnike čija prezimena počinju sa A, ili samo ljude koji žive u
državi Maine.
Filtrirani skup zapisa ćete dobiti ako otvorite okvir za dijalog recordset (Query) i podesite opcije Filter. Tu su
tri padajuća menija:
•
•
•
Filter by – Bira se polje iz skupa zapisa.
Comparison – Bira se operator poredenja (=, >, < ,> =, <>)
Required value (obavezna vrednost) – Bira se neka od opcija koje se ovde nalaze, ili se unosi
vrednost.
Ako želite da pronađete ljude koji žive u državi Maine, u tabeli u bazi mora postojati polje za državu (state).
Onda polje state možete da izaberete iz liste Filter by, zatim da iz druge liste izaberete znak jednakosti, da
kao tip filtera izaberete Entered Value, a da u polju za vrednost unesete Maine. Ako će se strana pozivati sa
forme koja parametre prosleđuje preko metoda GET, onda ćete koristiti opciju URL parameter. Ovo isto važi
i ako se strana poziva preko obične oznake, koja sadrži URL parametar. Evo kako to izgleda:
<a href="dynamicpage.cfm?state=Maine">
Opcija Form Variable se koristi ako je strana pozvana sa neke forme koja svoje promenljive prosleđuje preko
metoda POST. SQL upit koji stoji iza upita koji filtrira zapise sadrži klauzulu WHERE. On može da izgleda
ovako:
SELECT * FROM korisnici WHERE drzava = "Maine"
Kreiranje naprednih skupova zapisa preko SQL-a
Postoji puno načina da fino podesite kolekciju podataka koje dobijate iz baze. Ako poznajete strukturu svojih
upisa, sve to možete da uradite preko SQL-a. Kreiranje skupova zapisa na bazi složenih upita koji
obuhvataju spajanja, grupisanje ili neke druge opcije traži da radite u naprednom režimu. Tada možete sami
da pravite SQL upite. Napredni skup zapisa možete dobiti ako otvorite okvir za dijalog Recordset (Query) i
kliknete dugme Advanced. Prozor koji se dobija sadrži deo za unos SQL upita, deo za definisanje
parametara, kao i deo za pretragu baze podataka, preko kojeg upite možete da pravite bez kucanja.
211 / 299
Dreamweaver MX 2004
Prikupljanje različitih zapisa
Pretpostavimo da u svojoj bazi podataka imate listu od 200 ljudi. 25 od njih su iz države Maine, 25 iz države
California, a 50 iz New Yorka. Zelite da napravite skup zapisa koji ukazuje na to koje države postoje. Treba
da prikažete polje drzave, iz tabele korisnici. Ne želite da prikupite svih 25 primeraka države Maine, 25
primeraka Californie itd. Želite da se prikaže samo jedan primerak za svaku državu. U tom slučaju treba da
upotrebite ključnu reč DISTINCT, Evo kako to izgleda:
SELECT DISTINCT drzava FROM korisnici ORDER BY drzava
Ako u Dreamweaveru želite da napravite iskaz kao što je ovaj, treba da uradite sledeće:
1. Otvorite okvir za dijalog Recordset (Query). U režimu Simple napravite upit koji selektuje samo ona
polja koja želite da grupišete. (Na primer, selektujte samo kolonu drzava, iz tabele korisnici). Ako
želite podesite i opciju Sort by order.
2. Kliknite dugme Advanced. U delu SQL text, odmah iza imena polja za koje želite da dobijete samo
jedan primerak, dodajte reč DISTINCT. Pre nego što zatvorite okvir za dijalog, kliknite dugme Tetst,
da biste bili sigurni da u upitu nema grešaka.
Postavljanje dinamičkih elemenata na strane
Dinamički elementi Dreamweavera omogućavaju da prikažete podatke iz baze podataka na svojim web
stranama. Možete i da ih pogledate u prikazu Design. Kreiranje dinamičkih strana u Dreamweveru se
uglavnom sastoji od rada sa dinamičkim tekstom, slikama, tabelama i sl.
Dinamički tekstualni elementi
Dinamički tekstualni elementi predstavljaju sadržaj polja u bazi podataka, koji je na strane postavljen kao
tekst. Cene, imena stvari i opisi su dobri kandidati za ubacivanje kao tekstualni elementi. U zavosnosti od
toga koliko teksta polje u bazi sadrži, dinamički elementi mogu biti kratki (nekoliko slova ili reči) ili dugi
(nekoliko pasusa). Dinamički tekstualni elementi se u prikazu Design prikazuju na unapred određenim
mestima.
(Recordset1.kategorija)
212 / 299
Dreamweaver MX 2004
ili kao skript na strani servera u prikazu Code:
<?php echo $row_Recordset1[kategorija]; ?>
Ovo određeno mesto za prikazivanje ne ukazuje na to koliko će prostora stvarno biti zauzeto.
Ubacivanje dinamičkog teksta
Tekst možete da ubacite ako otvorite pano Server Behaviors, pritisnete dugme + i izaberete ponašanje
Dynamic Text. Možete i da izaberete objekat Dynamic Text iz kategorije Application, sa palete Insert. U oba
slučaja se otvara okvir za dijalog u kome možete da zadate polje iz baze koje se prikazuje kao tekst, kao i da
primenite neko automatsko formatiranje. Tu se misli, na primer, na oznaku za dolar, ili oznaku za novac, kao
što je prikazano na slici.
Dinamički tekst možete da ubacite i sa panoa Bindings, bilo tako što ćete prevući polje u prozor Document ili
selektovati polje i kliknuti dugme Insert. Nakon što postavite tekst na svoje mesto, u panou Server Behaviors
se prikazuje novo ponašanje Dynamic Element, koje je dodato u dokument. Dva puta brzo kliknite ovo
ponašanje. Otvoriće se okvir za dijalog Dynamic Text u kome možete da dodate neko automatsko
formatiranje.
Dinamički tekst u dokumentu
Mesta za ubacivanje dinamičkog teksta možete da koristite na isti način, i sa istim ciljem, kao i običan tekst.
Dinamički tekst može da se prikazuje u svojim oznakama p, h1 ili nekim drugim, ili može biti u sredini bloka
sa statičkim tekstom. Sva formatiranja koja primenjujete na tekst, kao što su korisničke klase iz CSS-a,
možete da primenite i na mesto za ubacivanje dinamičkog teksta. Potrebno je samo da izaberete to mesto i
da preko Property Inspectora ili panoa CSS uradite što i obično.
Podešavanje dinamičkih osobina
Kao što dinamičke informacije mogu da na web strani zamene običan tekst, one mogu da zamene i bilo koji
deo HTML koda, uključujući i atribute oznaka. Ako je, na primer, u bazi podataka omiljena boja, u polju
favcolor, onda naredni PHP kod dinamički podešava pozadinu ćelije tabele na tu boju:
<td bgcolor="<?php echo $row_Recordset1[favcolor]; ?>">
Dinamičke osobine i Selection Inspector
Tag Inspector predstavlja koristan interfejs za unos dinamičkih osobina. Samo selektujte element na strani
koji treba da ima dinamičku osobinu, otvorite Tag Inspector i pređite na karticu Attributes. Nakon toga, iz liste
izaberite atribut koji je u pitanju i pogledajte malu ikonu zavrtnja na desnoj strani panoa. Kliknite tu ikonu.
Otvoriće se okvir za dijalog u kome se pita koje polje iz baze treba da zameni vrednost atributa. Izaberite
polje, kliknite dva puta OK (da biste zatvorili dva okvira za dijalog) i to je to.
213 / 299
Dreamweaver MX 2004
Dinamičke slike
Generalno, slike i druge multimedijalne datoteke se ne čuvaju u bazama podataka. U bazama podataka se
čuva ime datoteke ili URL adresa koji ukazuju na tu sliku. Dinamički generisane web strane mogu onda da
sadrže oznaku img, koja referencira polje sa atributom src:
<img src="<?php echo $row_Recordset1[filename]; ?>">
Pod pretpostavkom da u bazi podataka postoji zapis sa vrednošću "necklace.gif" u polju filename ova
referenca generiše sledeći kod:
<img src="necklace.gif">
Ubacivanje dinamičkih slika
Ubacivanje dinamičkih slika je slično ubacivanju običnih slika. Koristi se objekat Image ili komanda Insert >
Image, kao i obično. Kada se otvori okvir za dijalog Insert Image, pronađite opciju Select File Name From i
kliknite dugme Data Source. Pojaviće se lista polja koja su na raspolaganju i tekućeg skupa zapisa u
dokumentu. Izaberite neko od tih polja i kliknite OK. Slika će se postaviti u dokument i to sa ikonom koja
označava mesto na koje se ubacuje (osvetljeni zavrtanj). Nakon ovog pogledajte pano Server Behaviors.
Videćete da je na stranu dodato novo ponašanje Dynamic Attribute. Dinamički atribut je src atribut za Vašu
sliku. Izaberite svoju dinamičku sliku i proverite kako to izgleda u Property Inspectoru ili Selection Inspectoru.
Videćete da je atribut src definisan preko koda na strani servera. Kada ubacujete dinamičku sliku,
Dreamweaver toj slici ne dodeljuje širinu i visinu. Pošto src za sliku još uvek nije definisan, Dreamweaver ne
zna koje su dimenzije. Ako znate da će određene slike iz baze imati iste dimenzije, možete sami da dodate
širinu i visinu. Ovo se radi preko Property Inspectora. Ako niste sigurni u vezi dimenzija, ili ako će se
dimenzije slika menjati, onda se neće dodeliti vrednosti ovih atributa.
Delimične URL adrese
Polje iz baze podataka koje se koristi za generisanje atributa src ne mora da sadrži celu apsolutnu ili
relativnu putanju do slike. Na primer, ako se slike nalaze u podfascikli images, i ako se u bazi podataka
nalazi samo ime datoteke, onda ostatak putanje možete da napravite u trenutku postavljanja dinamičke slike.
U okviru za dijalog Insert Image, nakon što ste izabrali polje iz baze koje se koristi kao src, u polje URL
unesite ostale informacije vezane za putanju. Evo kako to izgleda:
images/<?php echo $row_Recordset1[filename]; ?>
Ako ste imena slika birali pažljivo, ovo možete da uradite i za polje filename iz baze. Pretpostavimo da u bazi
postoji polje itemname. Kod koji se pojavljuje u polju URL može dalje da podesi ubacivanje dinamičke slike:
images<%=(Recordset1.Fields.Item("itemname").Value)%>.gif
Pod pretpostavkom da jedno od polja itemname u dobijenom skupu zapisa sadrži vrednost necklace,
dobijeni HTML kod bi izgledao ovako:
<img src="images/necklace.gif">
214 / 299
Dreamweaver MX 2004
Dinamički alt natpisi
Dinamičke slike treba da imaju alt natpise koji se dinamički određuju. Ako u skupu zapisa postoji neko polje
koje opisuje stavku na slici, to polje možete da upotrebite za kreiranje alt teksta. Ovo možete da uradite
preko Selection Inspectora, kao što smo opisali u prethodnom odeljku.
Dinamički podaci i forme
Forme se na dinamičkim sajtovima puno koriste za prikupljanje informacija. Strane za pretraživanje, strane
za prijavljivanje, kao i strane za ažuriranje informacija koriste forme ili za prikupljanje podataka od korisnika,
ili za promenu izvora podataka. Ako Vam je forma potrebna samo da biste prikupili informacije, onda
elementi forme ne moraju biti dinamički. Ako želite da se u formi prikazuju i informacije iz baze, na primer,
padajući meni sa stavkama koje dolaze iz baze, ili strana sa ličnim podacima korisnika, koje on može da
menja i ažurira, onda za određivanje sadržaja i statusa elemenata forme morate da koristite dinamičke
podatke.
Dinamičke liste i meniji
Dinamička padajuća lista ili meni u formi se prave preko elementa select iz forme, kome se stavke dinamički
dodeljuju. Ako želite da napravite neku listu, otvorite dinamički dokument i napravite skup zapisa za
dinamičke stavke. Nakon toga treba da uradite sledeće:
1. Napravite formu kao i obično. Preko objekta List/Menu (kategorija Form sa palete Insert) ubacite
standardnu listu.
2. U Property Inspectoru kliknite dugme Dynamic. Otvoriće se okvir za dijalog. Izaberite polje koje u
tekućem skupu zapisa treba da se prikaže u meniju, a onda kliknite OK da biste zatvorili okvir za
dijalog.
Isti okvir za dijalog možete da iskoristite i za dodavanje statičkih elemenata (oni koji su stalno isti, bez obzira
na bazu podataka). Kada završite, kliknite OK da biste zatvorili okvir za dijalog.
Grupisanje zapisa za prikazivanje liste
Prehodne instrukcije prave sjajnu listu, ali samo ako u skupu zapisa postoji samo jedna vrednost za svako
polje koje treba da se prikaže. Ako treba da izaberete neku od 10 ogrlica (necklace) i ako se ime ogrlice
prikazuje u meniju, onda je sve u redu. Ali šta ako imate 10 ogrlica, 10 broševa i 10 narukvica, i želite da se
u listi prikažu samo imena kategorija (ogrlice, narukvice i broševi)? Trik je u tome da se napravi padajući
meni ili lista sa dinamičkim stavkama, ali da se pre toga eleminišu duplikati. Ovo možete uraditi ako
napravite skup zapisa koji vadi samo jednu stavku. Kada budete pravili ovakav skup zapisa, nakon što
izaberete polja koja se vade, idite na karticu Advanced. U SQL upit dodajte klauzulu GROUP BY. Na taj
način se grupišu polja koja planirate da koristite u dinamičkoj listi. Ako ostane klauzula ORDER BY, ona mora
biti na kraju upita. Ako želite da napravite listu sa kategorijama nakita, kod bi mogao da izgleda ovako:
SELECT kategorija FROM nakit
GROUP BY kategorija
ORDER BY kategorija ASC
Nakon što ste ovo uneli u polje SQL, ne možete da se vratite u prikaz Simple za taj skup zapisa.
Dinamička polja za potvrdu
Dinamičko polje za potvrdu je potvrđeno ili nije u zavisnosti od vrednosti polja u skupu zapisa. Evo kako se
pravi dinamičko polje za potvrdu:
1. U formu ubacite obično polje za potvrdu (izaberite Insert > Form Objects > Checkbox). Preko
Property Inspectora dajte ovom polju ime koje ćete upamtiti.
2. Dok se još uvek nalazite u Property Inspectoru, kliknite dugme Dynamic. U okviru za dijalog koji se
otvara, izaberite lme polja za potvrdu. Definišite koje polje iz skupa zapisa treba da se ispituje i
unesite vrednost koju to polje mora da ima da bi bilo potvrđeno. Okvir za dijalog omogućava da
poređenja pravite na osnovu jednakosti (ne manje, više od,itd.).
Dinamička radio dugmad
Kod grupe dinamičkih radio dugmadi je selektovan jedan od članova i to u zavisnosti od vrednosti polja iz
skupa zapisa. Grupa dinamičkih radio dugmadi se pravi na sledeći način:
1. Ubacite grupu radio dugmadi, kao što i obično radite (izaberite Insert > Form Objects > Radio Button,
ili Insert > Form Objects > Radio Group). Preko Property Inspectora dajte grupi ime i svakom
dugmetu dodelite jedinstvenu vrednost.
2. U panou Server Behaviors kliknite dugme + i izaberite opciju Dynamic Form Elements > Dynamic
Radio Group.
215 / 299
Dreamweaver MX 2004
3. U okviru za dijalog koji se otvara izaberite ime grupe koju ste napravili. Nakon toga definišite polje iz
skupa zapisa, sa kojim grupa treba da se poredi, da bi se odredilo da li nešto na formi treba da bude
izabrano.
Dinamičko polje za tekst
Dinamička tekstualna polja su u formi ispunjena tekstom koji dolazi iz određenog polja iz skupa zapisa. Evo
kako se pravi dinamičko tekstualno polje:
1. Ubacite tekstualno polje na uobičajeni način (Insert > Form Objects > Text Field). Preko Property
Inspectora dodelite ime koje ćete upamtiti.
2. U panou Server Behavior kliknite dugme + i izaberite Dynamic Form Elements > Dynamic Text Field.
3. U okviru za dijalog koji se otvara izaberite ime svog polja. Nakon toga definišite polje iz skupa zapisa
čija vrednost treba da se prikaže u tekstualnom polju.
Sadržaj koji se ponavlja
Većina dinamičkih elemenata podrazumevano prikazuje informacije iz prvog zapisa koji se nalazi u skupu
zapisa. Regioni koji se ponavljaju i dinamičke tabele omogućavaju da na strani prikažete i više zapisa.
Regioni koji se ponavljaju
Region koji se ponavlja može biti bilo koji element strane, podnaslov ili pasus, stavka liste, tabela, ali je
element koji se najčešće ponavlja vrsta u tabeli. Regione koji se ponavljaju pravite preko objekta Repeated
Region ili ponašanja Repeat Region.
Ako želite da napravite region koji se ponavlja, otvorite dinamički dokument, napravite skup zapisa i uradite
sledeće:
1. Definišite oblast sa strane koja treba da se ponavlja i izaberite je. U toj oblasti bi trebalo da bude i
neki dinamički sadržaj (kao što su tekst ili slike).
2. Od objekata Application, sa palete Insert, izaberite Repeated Region, ili sa panoa Server Behaviors
izaberite Repeat Region. Kada se otvori okvir za dijalog izaberite skup zapisa i broj onih zapisa koji
treba da se prikažu. Nakon toga kliknite OK.
216 / 299
Dreamweaver MX 2004
Regioni koji se ponavljaju su u prikazu Design okruženi natpisom. Ako želite da promenite taj natpis, kliknite
ga brzo dva puta.
Dinamičke tabele
Dinamička tabela je tabela koja prikazuje dinamičke informacije iz tekućeg skupa zapisa, pri čemu se kao
vrste koriste regioni koji se ponavljaju. Ovo je u suštini samo skraćeni metod za kreiranje najčešće vrste
regiona koji se ponavljaju. Ako želite da napravite dinamičku tabelu, otvorite dinamički dokument, napravite
skup zapisa i uradite sledeće:
1. Postavite kursor tamo gde želite da se pojavi tabela.
2. Sa palete Application Insert, iz grupe Dynamic Data izaberite Dynamic Table. Kada se otvori okvir za
dijalog, izaberite skup zapisa, broj zapisa koji treba da se prikažu, kao i opcije za formatiranje tabele.
Kliknite OK da biste zatvorili ovaj okvir za dijalog.
Dreamweaver će ubaciti tabelu sa vrstom koja se ponavlja, potpuno isto kao da ste napravili tabelu i dodelili
vrstu koja se ponavlja. Tabela sadrži sva polja iz tekućeg skupa zapisa sa istim redosledom. Ako ne želite da
se prikažu sva polja, možete da obrišete kolone iz tabele. Dinamički tekst u ćelijama tabele se može tretirati
isto kao bilo koji dinamički tekst.
Testiranje i otklanjanje grešaka
Regioni koji se ponavljaju se kodiraju kao petlje koje sadrže ono što se ponavlja. Tu su i instrukcije serveru
da u jednom trenutku treba da postavi jedan zapis iz skupa zapisa. Ovaj kod se razlikuje u zavisnosti od
jezika koji koristite. Evo kako to izgleda u PHP-u:
<?php do { ?>
[repeated content goes here]
<?php } while ($row_Recordset1 =
mysql fetch assoc($Recordset1)); ?>
Evo kako to izgleda u ColdFusionu:
<cfoutput query="Recordset1" startRow="#StartRow_Recordset1#"
maxRows= "#MaxRows_Recordset#">
[repeated content goes here]
</cfoutput>
Na strani se može izabrati bilo koja oblast. Vrlo je važno da budete sigurni da ste izabrali prave stvari, pre
nego ubacite region koji se ponavlja. Ako pravite listu sa stavkama koje se ponavljaju, onda treba da budete
sigurni da ste uhvatili oznaku li, ali ne i okolne oznake ol i ul. Ako pravite vrstu u tabeli koja se ponavlja, onda
morate biti sigurni da ste izabrali oznaku tr. Najbolje je da stalno koristite Tag Selector, ili da radite u prikazu
Code and Design i da jedno oko stalno držite na kodu. Morate biti sigurni da ste izabrali baš ono što treba da
se ponavlja. Ako želite da sadržaj strane ubacite odmah ispod regiona koji se ponavlja, morate biti posebno
pažljivi. Dreamweaver neće novi sadržaj ubaciti u region. Cesto se javlja situacija da u tabeli imate vrstu koja
se ponavlja, a želite da ubacite još jednu vrstu koja se ne ponavlja. Obično ćete da biste u tabelu ubacili
vrstu postaviti kursor u poslednju ćeliju u tabeli i pritisnuti taster Tab, ili selektovati opciju Modify > Table >
Insert Rows or Columns, ili ćete u Property Inspectoru dodati određeni broj vrsta. U svakom od pomenutih
slučajeva se nova vrsta dodaje u region koji se ponavlja. Ako Dreamweaver novi sadržaj dodaje u region koji
se ponavlja (nova vrsta u tabeli, pasus, itd.), pređite na kratko u prikaz Code. Pronađite kod za vrstu tabele ili
drugi element koji ne treba da bude u regionu koji se ponavlja i prebacite ga ispod linije koda koja zatvara
region.
Straničenje u regionu koji se ponavlja
Straničenje u skupu zapisa, ili navigacija, ulazi u igru kada koristite region koji se ponavlja, ali želite da se u
jednom trenutku prikaže samo određeni broj zapisa. Tu onda postoje linkovi Next, Previous, First i Last, sa
porukom koja ukazuje na to koliko je zapisa trneutno prikazano (kao što je 2 to 14 of 500). U Dreamweaveru
postoji nekoliko načina za dodavanje kontrola za straničenje, kao što su različiti aplikacioni objekti,
ponašanja servera i sl.
Objekti Recordset Paging
Ako želite da na stranu koja sadrži region koji se ponavlja ubacite linkove Next, Previous, First i Last, možete
da uradite jedno od sledećeg:
• Otkucajte tekst ili izaberite sliku koja će služiti kao link. Sa palete Insert izaberite jedan od objekata
Recordset Paging: Move to First, Move To Last, itd.
217 / 299
•
Dreamweaver MX 2004
Postavite kursor tamo gde želite da se ubaci link. Sa palete Insert izaberite jedan od objekata
Recordset Paging. Dreamweaver će linku dodati podrazumevani tekst.
Ako želite da automatski ubacite ceo niz kontrola za straničenje, postavite kursor tamo gde želite da se
postave kontrole, a onda sa palete Insert izaberite Recordset Navigation bar. Možete da napravite tekstualnu
liniju linkova ili linkove sa slikama (Dreamweaver obezbeđuje slike). Ova linija za navigaciju se pravi kao
centrirana tabela sa ćelijom za svaki link. Linkovi za navigaciju kroz skup zapisa su elementi strane u okviru
oznaka a, koji imaju dinamički atribut href. Navigacija se neće narušiti ako promenite bilo šta, osim
dinamičkog atributa href. Slobodno možete formatirati ili menjati tekst, dodavati rollover efekat, itd.
Objekti Recordset Count
Kada se posetioci kreću kroz skup zapisa, oni vole da znaju gde se u tom skupu zapisa nalaze, koliko je
ukupno zapisa gde su u skupu, itd. Dreamweaver ima objekte za ove indikatore. Ako na strani imate region
koji se ponavlja, i ako su tu kontrole za kretanje kroz skup zapisa, onda brojač možete dodati ako postavite
kursor tamo gde želite da se pojave indikatori i iz kategorije Application sa palete Insert izaberete neki od
objekata Display Record Count. Ako izaberete da ubacite ceo objekat Recordset Navigation, Dreamweaver
pravi i tekst koji će se prikazati. Možete i da ubacite samo mesta za ubacivanje dinamičkog teksta, bez
teksta. Ovo se radi ako izaberete objekte Starting Record, Ending Record ili Total Records. Ovi objekti na
stranu ubacuju mešavinu dinamičkih i statičkih elemenata. Kao i sa bilo kojim dinamičkim tekstom, slobodno
možete da primenite format koji želite ili da promenite bilo koji statički tekst.
Uslovni sadržaj
Uslovni sadržaj se na strani pojavljuje samo ako je zadovoljen određeni uslov. Tu spadaju neke vrste iskaza
if-then u skript jeziku koji koristite na strani servera. Sa uslovnim sadržajem možete da, preko uslova, fino
podesite šta se tačno prikazuje na strani. Sve se ovo radi preko objekta Show if ili preko ponašanja servera.
Prikazivanje i sakrivanje sadržaja, ako je skup zapisa prazan
Ako upit u bazi podataka nije pronašao nijedan zapis koji odgovara kriterijumu, pa je skup zapisa prazan,
verovatno ćete korisniku želeti da prikažete poruku "Žao nam je, ali u bazi ništa nije pronađeno". Ako su
zapisi pronadeni, onda ćete prikazati relevantne dinamičke elemente. Ovo možete uraditi ako na stranu
stavite i jedan i drugi sadržaj, a definišete uslov koji proverava sadržaj skupa zapisa. U ovu svrhu možete da
upotebite objekte Show If Recordset Empty i Show If Recordset Not Empty, ili ponašanja servera. Evo kako
se to radi:
1. U dokumentu napravite sadržaj koji treba da se prikaže ako su pronadeni zapisi u bazi. Odmah
ispred ili iza ovog sadržaja napravite sadržaj koji treba da se prikaže ako zapisa nema. To znači da
strana na početku prikazuje mesta za zapis, a onda i poruku "Žao nam je ", ili neki drugi
podrazumevani sadržaj.
2. Izaberite sadržaj koji treba da se prikaže samo ako postoje zapisi u skupu zapisa. Proverite da li ste
sve izabrali, uključujući i regione koji se ponavljaju, HTML oznake i sl.
3. Sa palete Insert (kategorija Application, objekti Show Region) izaberite objekat Show If Recordset
Not Empty. Možete i da u panou Server Behaviors kliknete dugme + i izaberete opciju Show Region
> Show If Recordset Not Empty. U okviru za dijalog koji se otvara proverite da li je izabran pravi skup
zapisa, a onda kliknite OK da biste ubacili region.
Sadržaj koji ste izabrali se u prikazu Design prikazuje u okviru pravougaonika, sa natpisom. Tačan tekst
218 / 299
Dreamweaver MX 2004
natpisa može biti različit, u zavisnosti od serverske tehnologije koju koristite. Izaberite sadržaj koji treba da
se prikaže samo ako u bazi ništa nije pronađeno. Ponovo treba da budete sigurni da ste izabrali sve HTML
oznake i ostale vidljive elemente. (Možete da koristite Tag Selector, ili da pređete u prikaz Code, da biste
proverili da li je sve u redu). Sa palete Insert ili iz panoa Server Behaviors izaberite objekat Show If
Recordset Empty. Kada se otvori okvir za dijalog, izaberite skup zapisa preko kojeg ćete testirati da li je sve
u redu (taj okvir mora biti prazan, da bi se ovaj sadržaj pojavio), a onda kliknite OK da biste zatvorili okvir za
dijalog. Ovaj sadržaj se u prikazu Design takođe prikazuje u okviru pravougaonika. Pogledajte ovu stranu u
pretraživaču, da biste videli kako to radi. Možete da eksperimentišete putem promene definicije skupa
zapisa, tako da u njemu ne bude podataka, da biste videli poruku "Žao nam je".
Prikazivanje i sakrivanje sadržaja na bazi strane u skupu zapisa koja je prikazana
Ako ste ikad ubacivali objekat Recordset Navigation Status, onda ste već koristili ovu vrstu uslovnog
sadržaja. Ako na strani postoji region koji se ponavlja i ako je straničenje podešeno da u jednom trenutku
prikazuje samo odredeni broj zapisa, onda biste mogli da poželite objekat kao što je Move to Next Page, koji
bi se prikazivao samo u slučaju da postoji sledeća stranica. U tom cilju možete da koristite objekte Show If
First Page, Shof If Not First Page, Show If Last Page i Show If Not Last Page. Evo kako se to radi:
1. Otvorite dokument koji u regionima koji se ponavljaju sadrži dinamičke podatke. Region treba da
bude podešen da prikazuje samo deo zapisa u jednom trenutku.
2. Izaberite sadržaj koji bi trebalo da se prikaže samo ako je u pitanju prva strana zapisa. Možete da
ubacite bilo koji dekorativni element, kao i dinamičke elemente kao što su Move to First Page ili
Move to Previous Page.
3. Sa palete Insert (kategorija Application, objekti Show If) izaberite objekat Show If First Page. Možete
i da sa panoa Server Behvaiors izaberete ponašanje servera Show If > Show If First Page. Novi
uslovni sadržaj se sada u prikazu Design vidi kao pravougaonik sa natpisom.
4. Ponovite ovu proceduru da biste identifikovali i izolovali elemente koji bi trebalo da se prikažu samo
ako nije prva ili poslednja strana u skupu zapisa.
Testiranje uslovnog sadržaja i otklanjanje grešaka
Kao i regioni koji se ponavljaju, tako se i uslovni regioni kodiraju kodom na serveru koji uokviruje uslovni
sadržaj. Evo kako to izgleda (za PHP):
<?php if ($totalRows_Recordset_1 > 0) { ?>
[conditional content goes here]
<?php } ?>
ili za ColdFusion:
<cfif Recordset4.RecordCount GT 0>
[conditional content goes here]
</cfif>
Važno je da znate kako ovo izgleda, da biste mogli da popravite stvari, ako krenu naopako. Ako se uslovni
sadržaj nije sakrio, a prikazuje se ispravni sadržaj, onda na trenutak pređite u prikaz Code. Sav uslovni
sadržaj mora biti između reda koji otvara i reda koji zatvara kod. Ako prilikom ubacivanja uslovnog regiona
niste izabrali tačno ono što treba, sada možete da selektujete dodatni kod i da ga prebacite između ovih
redova početka i kraja.
219 / 299
Dreamweaver MX 2004
17. Još neke dinamičke tehnike
Dinamički šabloni
Šabloni Dreamweavera se mogu koristiti i sa dinamičkim stranama. Na taj način, preko šablona možete
napraviti izgled celog sajta, a da i dalje dinamički kreirate pojedinačne strane.
Kreiranje dinamičkih šablona
Ako želite da napravite dinamički šablon, izaberite File > New. U okviru za dijalog New Document izaberite
Template page i neki od dinamičkih tipova dokumenata koji su prikazani. Koja je razlika između dinamičkog i
običnog HTML šablona? Ako radite sa serverskim modelom koji obavezno mora biti na vrhu strane (kao što
su deklaracije jezika u ASP-u i ASP.NET-u) onda se kod dodaje automatski. Dreamweaver takođe dinamičke
šablone pamti sa dve ekstenzije, na primer, main.cfm.dwt, da bi se ukazalo na status ovih datoteka.
Dinamički šablon možete da napravite i ako otvorite postojeću dinamičku stranu i izaberete File > Save As
Template.
Kako rade dinamičke strane
Kada se strana pravi na osnovu šablona, sve oblasti na njoj su zaključane, osim promenljivih regiona, koje
ste posebno definisali. Na dinamičkim stranama obično postoji neki serverski sadržaj, koji se nalazi izvan
html oznaka. Da bi prihvatio ovaj kod, Dreamweaver smatra da oblast izvan html oznaka može da se menja
na izvedenim stranama. To možete da zaključite ako pogledate deo zaglavlja na bilo kojoj izvedenoj strani.
Odmah iza oznake html na ovim stranama postoji sledeći iskaz:
220 / 299
Dreamweaver MX 2004

Ovo znači da u dokumente koji se zasnivaju na šablonima možete da dodajete skupove zapisa i druge
instrukcije koje se izvršavaju na strani servera. Serverske instrukcije možete da ubacite i na samu šablonsku
stranu, ali ako kod postavite izvan HTML oznake, on se tretira kao sadržaj promenljivog regiona, što znači da
se ne kopira na postojeće izvedene strane i ove strane mogu da ga prebrišu. Dreamweaver će Vas upozoriti
da će se to desiti. Ako želite, možete postići da oblast izvan HTML oznaka ostane zaključana, odnosno da se
na svim izvedenim stranama koriste isti skupovi zapisa, kao i u šablonu. Šablonske datoteke
podrazumevano ne uključuju iskaz za zaključavanje koda (ovaj iskaz se na izvedene strane dodaje, samo
ako ga sami napravite). Ali ipak možete da ga ubacite. U šablonskoj datoteci pređite u prikaz Code i u
zaglavlje unesite sledeće:
. Ako prilikom ubacivanja komandnog parčeta koda
ništa nije selektovano, Dreamweaver ubacuje prazan par oznaka za komentar.
Promena parčića koda
Ovi delovi koda se lako menjaju. U panou Snippet možete da izaberete to parče i da kliknete dugme Edit, ili
260 / 299
Dreamweaver MX 2004
da dva puta brzo kliknete samo parče. Otvoriće se okvir za dijalog Snippet, koji je prikazan na slici. Možete
da menjate ime parčeta, njegov opis, tip (block ili wrapped), kao i da menjate kod koji se u njemu nalazi.
Možete i da definišete da li parče koda treba da se prethodno prikazuje u panou Snippets.
Čuvanje parčića koda
Parčići koda su organizovani u fascikle, od kojih su neke ugnježđene u drugima. Ovu hijerarhiju možete da
menjate kako god želite. Ovo se radi prevlačenjem parčeta u drugu fasciklu. Možete i da menjate imena
parčića. Ime fascikle ćete promeniti ako dva puta brzo kliknete tu fasciklu. Možete čak i da obrišete parče
koda, ili fasciklu, ako ih selektujete i kliknete ikonu sa otpacima koja se nalazi na dnu panoa.
Kreiranje Vaših parčića koda
Najbolje kod parčića koda je to da možete da lako pravite svoje parčiće, pa čak i da pravite svoje fascikle u
kojima biste ih čuvali. Ako želite da napravite novu fasciklu za smeštanje parčića koda, treba da uradite
sledeće:
1. Ako želite da se fascikla nađe u korenskom nivou u panou Snippets, počećete time što nijedna od
fascikli u panou Snippets ne sme da bude selektovana. Ako želite da fascikla bude u okviru neke
druge fascikle, izabrite je.
2. Kliknite ikonu fascikle koja se nalazi na dnu panoa. Pojaviće se nova fascikla.
3. Dajte ime novoj fascikli. Ona je spremna za akciju.
Ako želite da napravite novo parče koda, treba da uradite sledeće:
1. (Opcionalno) Ako već imate kod koji treba da se nađe u parčetu, otvorite dokument koji sadrži taj
kod i selektujte ga u prikazu Code.
2. U panou Snippets izaberite fasciklu u kojoj želite da se nade parče. Nakon toga kliknite ikonu New
Snippet koja se nalazi na dnu panoa. Možete i da desnim tasterom miša kliknete fasciklu i izaberete
New Snippet. Ovim se pravi novo parče koda, koje nema ime. Automatski se otvara okvir za dijalog
Snippet. Ako ste izabrali neki kod, on se prikazuje u polju Contnet. Ako to niste uradili, sada je
trenutak da ukucate kod. (Nećete praviti prazno parče.)
3. Ako pravite parče tipa wrapped (parče koje ubacuje kod ispred i iza onog što je selektovano) pazite
da se pravi delovi koda nađu u poljima Before (pre) i After (posle).
4. Popunite i sve druge opcije u ovom okviru za dijalog, a onda kliknite OK. Parče bi sada trebalo da
se pojavi u panou Snippets i da se ponaša kao i bilo koje drugo parče. Možete da ga ubacujete,
menjate, brišete, prebacujete, šta god želite.
261 / 299
Dreamweaver MX 2004
Povezivanje sa spoljašnjim editorima teksta
Dakle, volite da radite sa kodom i dopada Vam se Dreamweaver, ali Vam se više dopada Vaš omiljeni editor
teksta od prikaza Code. U tom slučaju možete da podesite vezu između Dreamweavera i spoljašnjeg editora
teksta, tako da dobijete najbolje iz oba sveta.
Podešavanje spoljašnjeg editora teksta (nije integrisan)
Procedura povezivanja i rada sa spoljašnjim editorima teksta (koji nisu HomeSite i BBEdit) je jednostavna i u
osnovi ista na različitim platformama. Podešavanje integracije sa spoljašnjim editorom teksta se obavlja na
sledeći način:
1. U okviru za dijalog Preferences otvorite kategoriju File Types /Editors, kao što je prikazano na slici.
2. Pronađite polje External Code Editor. Pronađite editor teksta koji želite da koristite.
3. Opcija Reload Modified Files definiše šta se dešava kada menjate dokument u spoljašnjem editoru i
posle toga se vratite u Dreamweaver. Ako želite da postignete bližu integraciju, izaberite opciju
Always Reload. Promene se automatski ubacuju. Ako Vam je potrebno više kontrole nad mogućim
neslaganjima, izaberite Prompt. Dreamweaver će Vas upozoriti da su se desile promene.
Opcija Save on Launch definiše da li Dreamweaver treba da upamti dokument pre pokretanja spoljašnjeg
editora teksta. Ako Vam je potrebna bliža integracija izaberite Always. Ako želite da imate šansu da
pregledate promene koje su nastale u dokumentu izaberite Prompt. Editor koji ste izabrali će se pojaviti u
meniju Edit, kao deo komande Edit with application. Tekući dokument ćete otvoriti u novom editoru ako
izaberete ovu opciju.
Integracija editora HomeSite+ sa Dreamweaverom
Editor HomeSite+ firme Macromedia, koji se isporučuje sa verzijom Dreamweavera za Windows se lako
integriše sa Dreamweaverom. Podešavanje HomeSite editora se vrši na isti način kao i povezivanje bilo
262 / 299
Dreamweaver MX 2004
kojeg spoljašnjeg editora.
Možete i da podesite integraciju Dreamweavera u HomeSite. Podrazumevano HomeSite ima uključenu
integraciju. U HomeSiteu idite na Options > Settings i izaberite kategoriju Dreamweaver. Ovde se proverava
i konfiguriše način na koji HomeSite tretira ostale opcije modifikovanih datoteka. Ako želite da u HomeSiteu
radite sa dokumentom iz Dreamweavera, otvorite dokument u Dreamweaveru i idite na Edit > Edit With
Home Site. Ako već nije pokrenut, program će se sada pokrenuti, a dokument će biti spreman za rad. Ako
želite da HomeSite dokument menjate u Dreamweaveru, otvorite dokument u tom editoru. Sa palete Editing
kliknite ikonu Dreamweavera. Ako ste uključili opcije da oba programa automatski ponovo učitavaju
promenjene datoteke i pamte ih pre pokretanja i ako imate dovoljno veliki monitor, ili podešene dvojne
monitore, onda možete da ostavite da dokument bude otvoren u oba programa i da lako prelazite iz jednog u
drugi. Ovo liči na rad sa Code Inspectorom.
Biblioteke tagova i editor Tag Library
Biblioteke tagova (Tag Library) predstavljaju srce funkcionalnosti Dreamweavera. Biblioteka tagova (oznaka)
je baza podataka sa informacijama o skupu oznaka, HTML oznaka, ASP oznaka, ColdFusion oznaka i sl. U
ovoj bazi podataka se nalaze informacije koje Dreamweaver koristi za obavljanje većine svojih poslova
vezanih za oznake, od popune koda savetima vezanim za kod, pa do primene formatiranja izvornog koda ili
generisanja informacija koje se prikazuju u okvirima Tag Chooser i Edit tag. Tag Library Editor je Vaš prozor
do biblioteke oznaka i alat za promenu i dodavanje informacija koje se tu nalaze. Da li je poslednja verzija
Internet Explorera počela da podržava neku oznaku ili atribut o kojoj Dreamweaver ne zna ništa? Dodajte to
u biblioteku.
Rad sa okvirom za dijalog Tag Library Editor
Pre nego što počnete da petljate sa bibliotekama oznaka, morate da znate koje su informacije i opcije
dostupne u okviru za dijalog Tag Library Editor. Ovaj okvir za dijalog ćete otvoriti ako izaberete Edit > Tag
Libraries. Do istog okvira za dijalog možete doći i iz prozora Preferences/Code Format i Code Hints.
Lista oznaka
U gornjem delu okvira za dijalog se nalazi lista oznaka. U pitanju je proširena struktura u obliku stabla koja
prikazuje sve biblioteke oznaka, oznake koje tu postoje, kao i njihove atribute. Biblioteke oznaka su
prikazane onim redosledom kojim ih Dreamweaver pretražuje. Drugim rečima, kada Dreamweaver određuje
kako da rukuje određenom oznakom on će tražiti u ColdFusion biblioteci ili drugim bibliotekama, samo ako ta
oznaka ne postoji u biblioteci HTML. Unutar svake biblioteke su pojedinačne oznake i atributi prikazani po
abecednom redu.
Opcije biblioteke oznaka
Ako ste iz liste oznaka izabrali neku biblioteku oznaka, u donjem delu okvira za dijalog se prikazuje lista
tipova dokumenata koji mogu sadržati oznaku iz te biblioteke. To ne znači da Dreamweaver dozvoljava da
samo određeni tipovi oznaka budu u određenim tipovima dokumenata, ali to znači da su određene oznake iz
određene biblioteke za Dreamweaver validne samo ako se nalaze u određenom tipu dokumenta. Na primer,
u JavaScript dokumentu, HTML oznake, kao što su a ili table nemaju značenje. Dreamweaver neće davati
savete vezane za kod ili drugu pomoć vezanu za uređivanje koda, ako se ove oznake nalaze u tom
kontekstu.
Opcije vezane za oznake
Kada se iz liste izabere neka oznaka, u donjem delu okvira za dijalog se prikazuje opcije Tag Formats za tu
oznaku:
• Line breaks Da li da Dreamweaver u kod ubaci novi red pre i posle oznake, ili između parova
oznaka i ugnježđenog sadrđaja? Opcije iz ovog padajućeg menija to određuju.
• Contents Treba li svaki sadržaj koji se nalazi ugnježđen između para oznaka da bude uvučen i
treba li da bude formatiran? Izaberite neku od opcija iz ovog menija.
• Case Da li oznaka treba da se piše malim, velikim ili mešanim slovima? Možda treba poštovati ono
što je podešeno na nivou aplikacije? (Kliknite link default ako želite da postavite podrazumevane
opcije za sve oznake).
Opcije vezane za atribute
Kada je iz liste izabran neki atribut oznake, u donjem delu okvira za dijalog se prikazuju opcije vezane za
formatiranje tog atributa:
• Attribute Case Kao i kod oznaka i ovde se može podesiti da se vrednosti pišu velikim, malim
slovima ili mešavinom. Atribut može i da koristi podešavanja na nivou aplikacije. (Podrazumevane
263 / 299
•
•
Dreamweaver MX 2004
vrednosti se koriste ako kliknete link Default.)
Attribute Type Opcija koju izaberete iz ovog menija određuje kakva će pomoć biti korisniku na
raspolaganju, odnosno kakvi će se saveti vezani za kod i opcije u Tag Inspectoru pojaviti. Ako na
primer, Dreamweaver očekuje tekstualnu vrednost, onda neće biti nikakvih saveta, ako se očekuje
boja, onda se prikazuje dijalog za izbor boja, ako se očekuje neka iz liste vrednosti, prikazuju se
moguće vrednosti. U tabeli 27.2 su dati tipovi atributa i način na koji se oni tretiraju u interfejsu
Dreamweavera.
Attribute Value Ako je tip atributa podešen na Enumerated, onda u ovom delu treba da se nalazi
lista mogućih vrednosti, odvojenih zarezima. Ovo će postati stavke u meniju Code Hint.
Promena stavki u biblioteci oznaka
Kao što ste verovatno zaključili, bilo koju vrednost bilo koje biblioteke, oznake ili atributa možete da
promenite. Jednostavno treba izabrati željenu stavku, a onda možete da menjate vrednosti koje se prikazuju.
Evo nekoliko saveta o tome kako se menjaju opcije:
• Ako jednostavno promenite podešavanja vezana za nove redove ili velika i mala slova, ne možete
nešto ozbiljno da pokvarite u Dreamweaveru, ali se može desiti da saveti vezani za kod ne budu na
raspolaganju, ako niste pažljivi sa podešavanjima. Radite obazrivo.
• Nemojte menjati podrazumevane opcije za velika i mala slova, osim ako nemate dobar razlog.
Podešavanja na nivou aplikacije nemaju značenje ako ih većina elemenata menja.
Isprobajte ono što ste promenili da biste videli kako Vam se dopada. Nakon što promenite opciju
formatiranja, probajte da napravite i sredite neke primere oznaka u prikazu Code.
Dodavanje (brisanje) stavki
Dodavanje i brisanje atributa, oznaka, pa čak i celih biblioteka je malo složenije (i može biti mnogo opasnije)
nego promena postojećih stavki. Sa druge strane može se puno dobiti, jer biste u potpunosti iskoristili snagu
biblioteka oznaka koje postoje u Dreamweaveru. Sva dodavanja i brisanja se rade preko dugmadi + i -, koja
se nalaze na vrhu okvira za dijalog tag Library Editor.
Ubacivanje biblioteke oznaka
264 / 299
Dreamweaver MX 2004
Ak želite da napravite novu, praznu biblioteku oznaka, treba da uradite sledeće:
1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajućeg menija izaberite opciju Tag Library.
2. U okviru za dijalog koji se otvara dajte ime svojoj biblioteci. (Ovo ime vredi samo Vama, tako da
treba da bude sažeto i opisno.)
3. Kliknite OK da biste zatvorili okvir za dijalog. Na dnu liste oznaka će se prikazati nova biblioteka.
4. Dok je iz liste oznaka izabrana nova biblioteka, selektujte tip dokumenta koji treba da podržava
oznake koje se nalaze u ovoj biblioteci.
Nova biblioteka je spremna za igru. Naredni korak je da u biblioteku dodate oznake, tako da ona postane i
korisna.
Dodavanje oznake
Ako želite da u biblioteku dodate novu oznaku, treba da uradite sledeće:
1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajućeg menija izaberite New Tags.
2. Otvara se okvir za dijalog New Tags, koji je prikazan na slici. Zadajte ime biblioteke u koju oznaka
treba da se doda, a onda unesite ime oznake. (Ime je ono što se prikazuje između simbola < >.
Nemojte uključivati i same simbole.)
3. Ako oznaka sadrži početnu i krajnju oznaku, izaberite opcijt Have Matching End Tags. Ako će to biti
jedinstvena oznakć (kao što su <html> ili <hr>) onda ova opcija ne treba da bude izabrana.
4. Kada završite kliknite OK. Proverite svoju listu oznaka Oznaka bi sada trebalo da se prikaže kao
nova stavka i biblioteci koju ste zadali. Selektujte oznaku iz liste i promenite opcije formatiranja u
skladu sa Vašim željama.
Nakon što ste ovo uradili isprobajte kako to radi. Otvorite dokument onog tipa koji ta oznaka podržava, idite u
prikaz Code i unesite prvih nekoliko karaktera nove oznake. Ako ste uključili savete vezane za kod, pojaviće
se i meni sa savetima, pri čemu je Vaša oznaka jedna od stavki u tom meniju.
Dodavanje atributa
Ako želite da oznaci dodate novi atribut, treba da uradite sledeće:
1. Kliknite dugme + koje se nalazi na vrhu liste oznaka i iz menija izaberite New Attributes.
2. Prikazaće se okvir za dijalog New Attribute, koji je prikazan na slici 27.26. Definišite biblioteku i
oznaku kojima novi atribut pripada, a onda unesite ime tog atributa.
3. Nakon što završite kliknite OK. Proverite svoju listu oznaka. Atribut se pojavljuje kao jedna od stavki
za oznaku koju ste zadali. Izaberite atribut iz liste i promenite opcije formatiranja u skladu sa Vašim
željama.
265 / 299
Dreamweaver MX 2004
Napredne komande Find and Replace
Iako komanda Find and Replace iz Dreamweavera ne mora da se obavezno koristi u prikazu Code,
sofisticirano pretraživanje se obično vezuje za uređivanje koda. Komanda Find and Replace iz
Dreamweavera je snažan alat koji podržava regularne izraze kod pretraživanja koda, kao i mogućnost da se
prave složena pretraživanja preko jednostavnog interfejsa sa padajućim menijem.
Napredno pretraživanje teksta
Kod osnovnog pretraživanja teksta, Dreamweaver omogućava da pretražujete elemente teksta u HTML
dokumentu (ovo je tekst koji se vidi na strani, što je suprotno HTML oznakama). Kod naprednog
pretraživanja teksta, možete da ograničite pretraživanje na samo pojedine elemente unutar ili izvan
određenih oznaka. Možete da zadate da element teksta bude u okviru jedne ili više oznaka, možete čak da
zahtevate da oznake koje je uokviruju imaju određene atribute. Opcija Advanced Text search je na
raspolaganju kroz prozor Search and Replace. Sa otvorenim prozorom, iz menija Search For izaberite opciju
Text (Advanced).
Napredna pretraživanja teksta su korisna uvek kada radite sa složenim dokumentima i kada želite da
pretraživanja budu što konkretnija. Možda želite da promenite sve primerke teksta Minnesota na MN, ali ne
želite da to uradite sa naslovima. Mogli biste da tražite ime države, ali samo ako nije u okviru oznake <hi> ili
neke druge oznake za naslove. Ako želite da se promene dese na celom sajtu, ovakvo pretraživanje
omogućava da sve zamenite za 5 minuta, a ne da idete sa jednim po jednim pretraživanjem i zamenom, koji
mogu trajati satima. Na slici je prikazan okvir za dijalog Find and Replace, sa podešenim naprednim
pretraživanjem.
Pretraživanja na osnovu zadate oznake
Ovaj tip pretraživanja omogućava da pronađete i promenite atribute različitih HTML oznaka, kao i da
dodajete, menjate, pa čak i brišete određene oznake. Ovo je moćna funkcija, iako nije nešto što biste
povezali sa pretraživanjem i zamenom. Nakon što ovo isprobate nekoliko puta, bićete zapanjeni koliko je ovo
pretraživanje korisno. Šta ako ste na celom sajtu koristili logo kompanije, a onda otkrijete da ste zaboravili da
dodate alt natpis? Problem će se rešiti preko pretraživanja svake oznake <img> sa atributom src="logo.gif" i
podešavanjem atributa alt na "Your logo". Možda treba da pronađete sve tabele koje su širine 100% na sajtu
i da ih promenite na širinu od 90%. Ovo se može uraditi preko jednog lakog pretraživanja. Na slici je prikazan
okvir za dijaloog Find and Replace podešen da obavi pretraživanje određenih oznaka, sa nekoliko
kriterijuma. Umesto zamene, prilikom pronalaženja oznake možete da podesite i neku drugu akciju.
Procedura za ovakvo pretraživanje (malo manje intuitivna) je da kliknete dugme Find da bi se pretražili svi
primerci zadate oznake, a da onda kliknete dugme Replace da biste zadali određenu akciju na pronađenim
oznakama.
266 / 299
Dreamweaver MX 2004
Upotreba regularnih izraza
Regularni izrazi nisu vrsta pretraživanja i ne postoje samo u Dreamweaveru. Regularni izrazi su dobar način
za pretraživanje koda u potrazi za obrascima, a ne određenim karakterima. Na primer, ako na grupi web
strana tražite sve telefonske brojeve, ali ne želite da tražite pojedinačne telefonske brojeve, možete da preko
regularnih izraza potražite obrazac sa brojevima, crticama i zagradama, koji svi telefonski brojevi moraju da
slede. Regularni izrazi su deo Perla, JavaScripta, kao i drugih skript i programskih jezika. Oni mogu biti
jednostavni ili vrlo složeni, u zavisnosti od toga šta želite da dobijete. Ako razmišljate na tehnički način, treba
da znate da su mogućnosti Dreamweavera koje se odnose na pretraživanje napravljene na osnovu
JavaScripta. Prema tome, sve mogućnosti regularnih izraza, koje podržava JavaScript rade i u okviru
komande Find and Replace, u Dreamweaveru.
Pisanje regularnih izraza
Regularni izraz je opis tekstualnog stringa koji sadrži određene karaktere, koji se u obrascima nalaze na
određenim mestima. Najjednostavniji regularni izrazi se sastoje samo od slova i brojeva koje tražite i oni će
pronađi samo primerke određenih karaktera. Na primer, sledeća tri stringa za pretraživanje su regularni izrazi
koji pronalaze baš onaj string koji je zadat, kad god se on pronađe u dokumentu:
Fred Flintstone
87125
laura@rocketlaura.com
Sa druge strane, regularni izrazi mogu da sadrže i meta karaktere, koji se koriste za opis i brojanje karaktera
u dokumentu.
Pronalaženje i zamena putem regularnih izraza
Ako želite da u Dreamweaveru koristite regularne izraze, samo uključite opciju Use Regular Expression u
okviru za dijalog Find and Replace. Karaktere i metakaraktere unesite u bilo kojem od tekstualnih polja u
delu Find. (Nema smisla da regularne izraze koristite u delu za zamenu). Na slici su prikazani primeri tri tipa
pretraživanja, koja koriste regularne izraze. Na vrhu je primer koji prikazuje osnovno tekstualno pretraživanje
koje nalazi različite varijante teksta labeled i čini ih konzistentnim. Centralni primer prikazuje napredno
pretraživanje koje pronalazi sva pojavljivanja reči and samo u zaglavljima (h_ vraća hl i h2 i h3) i menja ih sa
&. Poslednji primer prikazuje pretraživanje određenih oznaka i pronalazi sve tabele sa širinom zadatom u
procentima (\d*% pronalazi bilo koji broj cifara koji završava procentom) i briše atribut width. Opcije Use
Regular Expression i Ignore White Space ne mogu biti istovremeno uključene, pošto se u okviru regularnih
izraza ne mogu zanemariti beline. Najbolja osobina komande Find and Replace u Dreamweaveru je
mogućnost da se kriterijum pretraživanja upamti radi kasnije ponovne upotrebe. Bilo koje podešavanje koje
napravite u okviru za dijalog Find and Replace se može zapisati. To znači da vreme koje provedete u
kreiranju složenih izraza pretraživanja nije izgubljeno. Dobar skup kriterijuma pretraživanja je kao poseban
pomoćni program, spreman da se samo preko nekoliko klikova mišem izvrši u bilo kojoj datoteci. Nakon što
ste uneli opcije komande Find and Replace, preko dugmeta Save možete da upamtite skup kriterijuma.
Otvoriće se standradni okvir za dijalog Save. Izaberite lokaciju i ime. Nakon što završite kriterijumi se
267 / 299
Dreamweaver MX 2004
zapisuju u datoteku sa ekstenzijom .dwr. Ako želite da kriterijume koje ste zapisali u datoteku učitate,
otvorite okvir za dijalog Find and Replace i kliknite dugme Load Query (sa ikonom datoteke). Otvoriće se
okvir za dijalog u kome se pita koju datoteku želite da učitate. Pronađite upamćenu DWR datoteku i otvorite
je. Interfejs komande Find and Replace će se popuniti onim što je u datoteci.
Ako želite, možete da menjate datoteku sa upisanim kriterijumima, Na kraju krajeva, DWR datoteke su
obične XML datoteke koje sadrže različite parametre, kao atribute korisničkih oznaka. Ako volite da radite sa
268 / 299
Dreamweaver MX 2004
kodom, uvek možete da otvorite DWR datoteku u nekom editoru teksta (čak i u Dreamweaveru) i da tu
promenite kriterijume. Kod za pretraživanje može da izgleda ovako:
<?xml version="1.0"?>
<dwquery>
<queryparams matchcase="false" ignorewhitespace="false"
useregexp="true"/>
<find>
<qtag qname="table">
<qattribute qname="width" qcompare="=" qvalue="\d*%"></qattribute>
</qtag>
</find>
<replace action="removeAttribute" param1="width" 'param2="" />
</dwquery>
Rad sa tekstom koji nije HTML u Dreamweaveru
Editor koda u Dreamweaveru može da se koristi i za rad sa kodom koji nije neki od podrazumevanih markup
jezika (HTML, XML, XHTML, ASP, CFM, itd.) premda ove datoteke ne možete da prikažete u prikazu Design
ili da za njihov pregled koristite opciju Preview in Browser. Koji su drugi jezici koje biste mogli da poželite?
Ako radite sa multimedijom, mogli biste da probate SMIL (Sinchronyzed Media Integration Language) koji se
korisi za kreiranje audio vizuelnih prezentacija, ili SVG (Scalable Vector Graphics), koji se koristi za kreiranje
vektorske grafike. Oba ova jezika se zasnivaju na XML-u i njihova popularnost raste. Ako radite sa Windows
Mediom, onda biste mogli da ovde uređujete metadatoteke koje se tu koriste (.wvx i.wax). Ako radite
RealMedia prezentacije, onda biste mogli da uređujete datoteke RealText (.rt) ili RealPix (.rp). Ovde se mogu
uredivati i datoteke za konfiguraciju Dreamweavera, koje se takođe zasnivaju na XML-u (.mno,.dwr itd).
Autori proširenja za Dreamweaver mogu ovde da uređuju i svoje datoteke (.mxi). Ako Dreamweaver ne
poznaje tu ekstenziju datoteke, on ne može da je otvori. Ako želite da u listu Dreamweavera dodate novu
ekstenziju, izaberite Edit > Preferences i izaberite kategoriju Types/Editors. Pronađite opciju Open in Code i
dodajte novu ekstenziju datoteke, kao što je prikazano na slici. Svaka ekstenzija mora da se odvoji od drugih
u listi putem blanko karaktera sa svake strane. Nemojte zaboraviti da dodate i tačku (.). Ako Vaš tip datoteke
može da ima alternativne ekstenzije (kao što su .smi, .smil ili .sml za SMIL) onda svaku od njih treba da
ubacite posebno. Da biste bili sigurni da Dreamweaver neće prepisati kod koji se nalazi u datoteci, izaberite
Edit > Preferences i izaberite Code Rewriting. Pronađite listu New Rewrite Code i dodajte novu ekstenziju.
Svaka nova ekstenzija datoteke mora biti odvojena od drugih stavki iz liste blanko karakterima.
269 / 299
Dreamweaver MX 2004
Ako su Vam za poseban markup jezik potrebni saveti vezani za kod i pomoć, možete da napravite i korisnički
definisanu biblioteku oznaka. Ako planirate da često radite sa konkretnim tipom dokumenta, vreme koje
uložite u podešavanje biblioteke oznaka može da se isplati.
Pisanje JavaScript koda u Dreamweaveru
Pored podrške za ostale jezike, Dreamweaver ima nekoliko karakteristika koje mogu da pomognu kada
radite sa JavaScriptom.
Pano Reference
Ako je reč o pomoći kod pisanja skriptova, pano Reference ima pomoć i za JavaScript. Ako želite da u panou
Reference pristupite pomoći za JavaScript, kliknite dugme <?> sa palete Document i iz padajućeg menija
Book izaberite O'Reillv JavaScript Reference. Na slici je prikazan deo JavaScript panoa Reference, sa
označenim pojedinim delovima radi lakšeg pretraživanja. Ovo je orgnizovano po objektima, kao i većina
JavaScript rečnika, tako da morate da znate strukturu objekata, da biste mogli da iskoristite sve prednosti
koje postoje.
270 / 299
Dreamweaver MX 2004
Pisanje skriptova bez prikaza Code
Ako želite da na stranu dodajete svoje skriptove, a da pri tome ne morate da menjate editore i prikaze, na
raspolaganju imate dve mogućnosti: ponašanje JavaScript i objekat Script. Script Property Inspector takođe
omogućava da menjate postojeće oznake script.
Ponašanje Call JavaScript
Ovo ponašanje se primenjuje i menja na isti način kao i sve druge stavke sa panoa Behaviors. Umesto da
ubacujete unapred napisane JavaScript akcije, ovo ponašanje dodaje one JavaScript iskaze koje konkretno
navedete.
Pratite sledeće korake:
1. Otvorite dokument i izaberite element na strani kojem želite da pridružite ponašanje.
2. Otvorite pano Behaviors i iz menija + izaberite Call JavaScript.
3. U okviru za dijalog koji se otvara unesite JavaScript iskaze koje želite da izvršite. (Ako ih ima više,
odvojite ih tačkom i zarezom.) Nakon što završite kliknite OK.
Koliko je korisno ponašanje Call JavaScript? Ono je sjajno, ako niste baš najbolji u pisanju skriptova, ili ako
ste u žurbi. Sa druge strane, pošto o kodiranju brine Dreamweaver, to ponašanje Call JavaScript može da
dovede do pomalo nezgrapnog koda. Ponašanja Dreamweavera svoje skriptove uvek ubacuju u funkciju u
zaglavlju koje se ne prilagođava, a ta funkcija se poziva sa parametrima. Recimo da želite da ubacite liniju
sa kodom u kojoj se pretraživač šalje nazad na prethodnu stranu. Ovo se dešava kada korisnik klikne
određenu stavku. Ubacićete ponašanje Call JavaScript i uneti history.back(). To se unosi u ovom okviru za
dijalog. Dreamweaver će u zaglavlje dokumenta dodati sledeću funkciju:
function MIVl_callJS(jsStr)
{ //v2.0
return eval(jsStr)
}
Izabranom elementu na strani će se dodati sledeći rukovaoc događajima:
<a href="javascript:;" onClick="MM_callJS('history.back()')">
Ako Vam je poznato kako Java Script radi u okviru HTML-u, onda ćete videti da je mnogo efikasnije da ovaj
JavaScript iskaz stavite u href, kao što je:
<a href="javascript:window.back()">
Za ovaj konkretan slučaj, ako želite možete i da izbegnete prikaz Code. Samo izaberite element na strani koji
treba da pokrene link i u polje Link Property Inspectora unesite javascript:window.back().
Objekat Script
Objekat Script iz Dreamweavera je brz način da se u dokument ubaci kompletna oznaka Script, a da pri
tome ne mora da se ide u prikaz Code. Skriptovi koji se unose na ovaj način ne moraju biti napisani u
JavaScriptu. Oni mogu da sadrže bilo koju oznaku koja se može naći u skriptu, uključujući i linkove na
271 / 299
Dreamweaver MX 2004
posebne .js datoteke.
Ako želite da u dokument ubacite blok sa skriptom, i da to uradite preko objekta Script, pratite sledeće
korake :
1. Otvorite dokument.
2. Da biste skript ubacili u deo body, postavite kursor tamo gde bi oznaka trebalo da se doda. Ako
želite da skript ubacite u deo head, upotrebite opciju View Options i uključite Head Content. Nakon
toga kliknite liniju sa zaglavljima (na vrhu Dreamweaverov-og prozora) da biste je aktivirali.
3. Sa palete Insert idite u kategoriju HTML. Iz grupe objekata Script izaberite objekat Script. Možete i
da izaberete Insert > HTML > Script Object > Script.
4. U okviru za dijalog koji se otvara izaberite skript jezik. U padajućoj listi su prikazane opcije
JavaScript (razne verzije) u VBScript. Ako želite da izaberete neki drugi jezik, unesite informacije
direktno u polje za unos teksta.
5. Unesite kompletan sadržaj skripta, ali nemojte unositi oznake otvaranja i zatvaranja skripta (kao i
komentare).
Dreamweaver će Vaš skript ubaciti unutar oznaka script, sa definisanim pravim jezikom. On će ubaciti i
komentare, koji sakrivaju skript od pretraživača koji ga ne podržavaju. Ako želite da blok sa skriptom menjate
preko Script Inspectora, pratite sledeće korake :
1. Otvorite dokument koji sadrži oznake script.
2. Ako se skript nalazi u zaglavlju dokumenta, prikažite liniju sadržaja zaglavlja (izaberite View Options
> Head Content). Ako je skript u telu dokumenta, uključite nevidljive elemente (izaberite View
Options > Visual Aids > Invisible Elements). Svaka oznaka script u dokumentu sada treba da se
prikaže na liniji sadržaja zaglavlja, ili u prikazu Design kao ikona skripta.
3. Izaberite ikonu skripta koja predstavlja kod koji želite da promenite.
4. Preko Property Inspectora promenite parametre skripta. Kliknite dugme Edit da biste pristupili i
promenili kod.
272 / 299
Dreamweaver MX 2004
Kada ubacujete objekat Script nemate mogućnost da dodate i link sa skriptom. U okviru za dijalog se
pretpostavlja da unosite sopostveni skript. Ovaj proces možete i da okrenete. Ako želite da preko objekta
Script, ubacite link na JS datoteku koja se nalazi na strani klijenta ili strani servera, treba da uradite sledeće:
1. Otvorite dokument i ubacite objekat Script, kao što smo već opisali.
2. U okviru za dijalog Script, ostavite polje sa kodom prazno, a onda kliknite OK. Ovim se u dokument
ubacuje prazna oznaka Script.
3. Uključite i liniju sadržaja zaglavlja ili nevidljive elemente, pronađite ikonu skripta i izaberite je.
4. U Property Inspectoru za objekat script, izaberite datoteku koju želite da pridružite.
Skriptovi u panou Assets
Ako radite u okviru definisanog sajta i želtie da u svoj dokument dodate linkove na JS dokumente, to ćete
najlakše uraditi preko panoa Assets. Svaka JS datoteka unutar fascikle na lokalnom sajtu se prikazuje u delu
Script, panoa Assets. Ako želite da na ovaj način u dokument dodate link na skript, treba da uradite sledeće:
1. Otvorite dokument u koji želite da ubacite link.
2. Proverite da li je prikazana linija sa sadržajem zaglavlja (izaberite View Options > Head Contents).
3. Otvorite pano Assets, a onda kliknite ikonu skripta, da bi se prikazale datoteke sa skriptovima na
sajtu.
4. Pronađite datoteku na koju želite da link ukazuje i prevucite njenu ikonu sa panoa Assets do linije
sadržaja zaglavlja za dokument.
Alati vezani za JavaScript dostupni u prikazu Code
Ako svoje skriptove uređujete u prikazu Code ili Code Inspectoru, onda možete da koristite prednosti koje
273 / 299
Dreamweaver MX 2004
nude različito obojeni delovi koda, navigacija kroz funkcije, automatsko uravnotežavanje, kao i različiti alati
za debagovanje.
Različite boje za različite delove koda u skladu sa sintaksom
Već ste videli kako ovo funkcioniše u Dreamweaveru, odnosno kako se uključuju i podešavaju boje teksta za
različite elemente koda. U okviru za dijalog Preferences Code Coloring se nalaze specijalna podešavanja
koja se odnose na boje teksta u skriptovima. Tu su rezervisane reči, ostale ključne reči, kao i stringovi. Ove
boje se primenjuju ne bilo koji kod koji se nalazi izmedu para oznaka script. Ono što ovde podesite ne utiče
na kod koji je deo rukovaoca događaja, pošto taj kod nije u okviru oznaka script.
Delovi JavaScript koda (snippet)
Delovi koda koje smo razmatrali ranije u ovom poglavlju mogu takođe da se koriste za čuvanje fragmenata
koda koji se najčešće koriste. Dreamweaver dolazi sa nizom korisnih JavaScript fragmenata, koje ćete
možda poželeti da istražite.
Meni za navigaciju kroz kod
Kada radite u Code Inspectoru, Dreamweaver omogućava da lako skočite na različite JavaScript funkcije.
Ovo se radi preko menija Code Navigation. Ovom meniju možete da pristupite preko palete Code Inspector,
ako kliknete ikonu sa velikim zagradama. Ako izaberte neku funkciju, prebacujete se u prvu liniju te funkcije,
koja se prikazuje na ekranu. (Ova mogućnost ne postoji u prikazu Code u prozoru Document.)
Automatsko uravnotežavanje zagrada
Često se dešava da se izgubi trag o otvorenim i zatvorenim velikim i malim zagradama, ili otvorenim i
zatvorenim navodnicima. Dreamweaver Vam ne može pomoći u određivanju da li su otvoreni navodnici
zatvoreni ili ne, ali može kod određivanja da li su zatvorene zagrade koje ste otvorili (velike, male i srednje).
Ako želite da proverite da li je Vaša interpunkcija ispravno uparena, treba da uradite sledeće:
1. U prikazu Code ili u Code Inspectoru izaberite otvorenu zagradu (veliku, srednju ili malu).
2. Izaberite Edit > Balance Braces. Dreamweaver će selektovati sav kod između te zagrade i
odgovarajuće zatvorene zagrade.
Ako ste navikli na način na koji je ovo automatsko zatvaranje zagrada implementirano u nekim editorima
teksta (kao što je BBEdit), komanda Balance Braces može da uradi ponešto od toga na šta ste navikli. Ne
možete je koristiti za uravnotežavanje bilo čega drugog, osim zagrada. Ona radi samo kada ste izabrali
otvorenu zagradu, a ne i zatvorenu. Ako imate neispravno zatvorene zagrade, komanda se javlja porukom o
grešci (zvukom). Ovo se, na primer, dešava kada imate više otvorenih od zatvorenih zagrada. Ako u
sledećem kodu izaberete prvu otvorenu zagradu, čuće se zvuk koji upozorava na grešku, pošto zagrade nisu
uparene:
function helloWorld()
{
if (a==0) {
window.alert("Hello, world");
}
Ako izaberete drugu otvorenu zagradu, neće se javiti greška, pošto će Dreamweaver da izabere samo onaj
kod koji se nalazi u zagradama iskaza if.
274 / 299
Dreamweaver MX 2004
20. Prilagođavanje i proširivanje Dreamweavera
Kako se Dreamweaver konfiguriše
Dreamweaver se razlikuje od drugog komercijalnog softvera. Većina programa se pravi u jezicima kao što je
C++, nakon čega se kompajliraju. Dobijaju se izvršni programi, što znači da Vi ne možete da ulazite u
njihovu strukturu, da biste videli kako su napravljeni ili da podešavate njihove funkcije. Za programe je u
poslednjih nekoliko godina postalo popularno da nude plug-in arhitekturu, čime se nezavisnim programerima
omogućava da kreiraju nezavisne module, plug-inove (Xtras, Xtensions), ili čak i filtare, u zavisnosti od
softvera koji je u pitanju. Ovi moduli se generalno moraju praviti kao kompajlirani programi napravljeni u C++
ili nekom drugom sličnom jeziku.
Dreamweaver je, sa druge strane, napravljen sa idejom da korisnicima omogući da menjaju i dodaju svoje
dodatke u program. Da bi ovo uradili, inženjeri koji su pravili Dreamweaver su napravili kombinaciju
kompajliranog jezgra napisanog u jeziku C, dok su interfejs i mnoge funkcije napisane u spoljašnjim
JavaSript, XML ili HTML datotekama. Ove spoljašnje datoteke se nazivaju proširenjima. Promenom
proširenja možete da podešavate kako Dreamweaver izgleda i kako radi. Dodavanjem proširenja u
Dreamweaver možete da dodajete nove funkcije. Premda morate da znate način na koji se pomoću
JavaScripta prave ova proširenja, ipak je za podešavanje interfejsa proširenja potrebno samo osnovno
znanje o HTML-u i XML-u. Macromedia Exchange za Dreamweaver ima stotine proširenja koja su napisali
drugi programeri. Neka od njih su besplatna, a neka se plaćaju.
Kako se radi sa fasciklom za konfiguraciju
Ključ za sve menije, komande i funkcije je fascikla za konfiguraciju. Ova fascikla, koja se nalazi ispod
Dreamweaver-ove fascikle Application, sadrži sve datoteke za proširenje. Ispitajte ovu fasciklu, i
prepoznaćete mnoge fascikle koje odgovaraju elementima Dreamweavera. To su Objects, Behaviors,
Commands, Menus, Inspectors itd. U okviru ovih fascikli se nalaze pojedinačne datoteke koje kontrolišu
izgled i funkcije različitih elemenata interfejsa Dreamweavera.
Tipovi datoteka u ovoj fascikli su: U HTML datotekama se nalaze elementi vezani za raspored i interfejs
pojedinih okvira za dijalog, panoa i inspektora. JavaScript datoteke, kao i JavaScript kod koji je ugrađen u
HTML datoteke, obezbeđuju funkcije različitih proširenja. XML datoteke (sa različitim ekstenzijama) sadrže
instrukcije koje Dreamweaver koristi da bi odredio kako se proširenje integriše u interfejs glavnog programa.
Ako ste dovoljno avanturistički raspoloženi da petljate sa ovim datotekama, možete da podesite i proširite
Dreamweaver. U ovom poglavlju ćete imati šansu da ispitate HTML i XML datoteke u fascikli Configuration i
da promenite ponešto u njima.
Podrška za više korisnika: Fascikla User Configuration
Kao i svi noviji operativni sistemi, i Dreamweaver pretpostavlja da ćete raditi u okruženju sa više korisnika.
To znači da se na Vaš računar može prijaviti više od jedne osobe. Svi oni mogu da pokrenu program i
podešavaju njegove karakteristike. Dreamweaver podržava konfiguraciju za različite korisnike preko više
različitih fascikli Configuration. Podrazumevani poslovi vezani za konfiguraciju su vezani za glavnu fasciklu
Configuration, koja se nalazi u okviru fascikle Dreamweavera kao aplikacije. Svaki korisnik pored toga može
da ima i svoju posebnu fasciklu za konfiguraciju. Kod verzije Dreamweavera za Windows lične fascikle
korisnika za konfiguraciju se nalaze na putanji:
c:\documents and settings\username\application data\macromedia\dreamweaver mx\configuration\
Umesto username se stavlja Vaše korisničko ime, ili Owner ili Default User, u zavisnosti od toga kako je
sistem podešen. Fascikla Application Data je verovatno nevidljiva, osim u slučaju da ste nešto petljali sa
podešavanjem sistema. Morate da je učinite vidljivom (u Exploreru izaberite Tools > Folder Options > View),
a onda možete da vidite i dalje podešavate datoteke za konfiguraciju. Pogledajte jednu od ovih dodatnih
fascikli i videćete da to nije potpuni duplikat glavne fascikle Configuration. Tu su samo izvesne datoteke, koje
predstavljaju elemente interfejsa koji treba različito podesiti za svakog korisnika. (Ako nikad niste pokretali
Dreamweaver, onda ove fascikle i ne postoje. One se kreiraju samo ako je potrebno.) Podešavanja kao što
su boje za različite delove koda, meniji koji se mogu podešavati da bi im se pristupalo preko tastature,
komande koje se mogu zapisivati preko panoa History, pa čak i objekti koji pamte svoja podešavanja od
275 / 299
Dreamweaver MX 2004
jedne radne sesije do druge se nalaze u fascikli Configuration za svakog pojedinog korisnika. Koliko je ovo
bitno za Vas? Ako želite da budete samo generalni korisnik Dreamweavera, sve što treba da znate o
konfiguraciji pojedinih korisnika, je da ona postoji. Ako volite da petljate i da radite sa ovim datotekama da
biste podesili svoj program, onda morate da znate u kojoj se fascikli Configuration nalaze koje datoteke,
odnosno gde su datoteke koje treba promeniti da bi se nešto obavilo. Generalno pravilo je: Kada traži
datoteke za proširenja, Dreamweaver uvek prvo pretražuje fasciklu Configuration tog korisnika (i ne koristi
datoteke duplikate koje postoje u glavnoj fascikli). Samo ako neka datoteka sa proširenjem nema svoj par u
fascikli za konfiguraciju korisnika, Dreamweaver koristi datoteku koja se nalazi u glavnoj fascikli
Configuration.
Promena konfiguracije
Sve što uradite u podešavanju Dreamweavera utiče na fasciklu Configuration. Ipak neće sve zahtevati da
idete u fasciklu Configuration i da tamo nešto petljate. U narednim odeljcima smo objasnili različite zadatke
vezane za promenu konfiguracije, koje biste mogli da poželite, od jednostavnih promena, da bi se dobio
malo bolji interfejs, pa do promena koje su potencijalno opasne, a koje se mogu obaviti samo u srcu mašine.
Dobro se zabavite.
Promena prečica sa tastature
Prečice sa tastature su sjajan način da se brzo pristupi komandama i funkcijama Dreamweavera.
Podrazumevano podešavanje Dreamweavera sadrži prečice za većinu komandi iz menija, kao i prečice za
selektovanje nečega, za kretanje naviše ili naniže po strani, kao i za uredivanje u prikazima Code i Design. U
slučaju da Vaša omiljena komanda ili operacija nema prečicu, ili ako Vam se ne dopadaju prečice koje je
firma Macromedia pripremila za Vas, one se mogu menjati. Možete da dodajete, brišete ili menjate prečice.
Možete i da pravite različite skupove prečica za različite namene i da prelazite sa jednog na drugi skup.
Kako se radi sa Editorom za prečice sa tastature
Osnovni interfejs za rad sa prečicama sa tastature je Keyboard Shortcut Editor, koji je prikazan na slici.
Ovom editoru možete da pristupite ako izaberete Edit > Keyboard Shortcuts. U ovom prozoru možete da
izaberete jedan od unapred definisanih skupova prečica, koji dolaze sa Dreamweaverom, ili da napravite ili
podesite svoj skup.
276 / 299
Dreamweaver MX 2004
Dreamweaver dolazi sa četiri skupa prečica sa tasture:
• Macromedia Standard – Ovo je podrazumevani skup, koji najbolje funkcioniše prilikom integracije
sa ostatkom programa Macromedie MX 2004, (Fireworks MX 2004, Flash MX 2004).
• Dreamweaver – Za korisnike koji su koristili prethodne verzije i ne žele da pamte ceo skup novih
komandi, svaki put kada se pojavi nova verzija.
• HomeSite Vrlo korisno za korisnike koji rade pod Windowsom, a koji često koriste Dreamweaver i
editor HomeSite+.
Za prelaz sa jednog skupa prečica na drugi samo treba da iz menija Shortcut Set izaberete odgovarajuću
opciju. Čim kliknete OK da biste zatvorili okvir za dijalog novi skup prečica postaje aktivan. (Nema potrebe
da restartuejte Dreamweaver). Premda ove skupove ne možete da menjate, bilo koji od njih možete da
duplicirate i da tako napravite svoj skup, koji onda možete da menjate i podesite onako kako želite. Samo
aktivirajte skup koji želite da duplicirate, a onda kliknte dugme Duplicate Set. Dajte skupu ime koje želite, a
onda klikntie OK da biste zatvorili okvir za dijalog, a time i kreirali skup. Ako želite da u svom korinsički
definisnaom skupu napravite novu prečicu, ili da promenite neku od postojećih, potražite komandu koju želite
da menjate. Kada izaberete komandu u polju Shortcuts se prikazuje prečica. Ako želite da promenite
postojeću prečicu, selektujte je u polju Shortcuts. Ako želite da dodate novu, kliknite dugme + koje se nalazi
iznad polja Shortcuts. Nakon toga kliknite u polje Press Key, unesite svoju kombinaciju tastera, a onda
kliknite Change. Evo nekoliko saveta koji mogu pomoći kada radite sa editorom Shortcuts.
•
•
•
Čim aktivirate polje Press Key, Dreamweaver sve što pritisnete na tastaturi interpretira kao prečicu
sa tastarure, koju pokušavate da dodelite. Ako pritisnete pogrešnu kombinaciju tastera, ne možete
da pritisnete Delete ili Ctrl/Cmd+Z da biste poništili ono što ste uneli. Upamtite da sve dok ne
pritisnete dugme Change, ništa što ste uneli u ovom polju nije postalo prečica.
Samo izvesne kombinacije tastera se smatraju ispravnim prečicama. Dozvoljene su kobinacije sa
funkcijskim tasterima i to sa ili bez modifikatora. Kombinacije brojeva i slova moraju počinjati sa Ctrl
(Windows). Ako u polju Press Key unesete neispravnu kombinaciju tastera, Dreamweaver će Vas
upozoriti i neće dozvoliti da je dodelite.
Ako u polje Press Key unesete kombinaciju tastera koja je već dodeljena, Dreamweaver će Vas
277 / 299
Dreamweaver MX 2004
upozoriti. Ako kliknete dugme Change, Dreamweaver će Vas pitati da li želite da se kombinacija
dodeli drugoj komandi. Naravno da u ovome nema ničeg lošeg.
Sve promene koje napravite u skupu prečica se ne pamte dok ne predete na drugi skup prečica (u tom
trenutku se postavlja pitanje da li želite da upamtite promene u prethodnom skupu) ili dok ne kliknete OK da
biste zatvorili okvir za dijalog Keyboard Shortcuts. Ako se Dreamweaver zaglavi ili ugasi pre nego što ste
uradili jednu od ove dve stvari, prečice se neće upamtiti.
Kako se prečice sa tastature konfigurišu
Zahvaljujući editoru Keyboard Shortcuts ne morate da se bavite detaljima o konfiguraciji vezanoj za promenu
prečica. U slučaju da želite da petljate ispod pokrivača, prečice sa tastature se kontrolišu preko nekoliko
XML datoteka koje se nalaze u fascikli Configuration/Menus/Custom Sets. Svaka od datoteka u ovoj fascikli,
Macromedia.xml, HomeSite.xml itd, predstavljaju jedan skup prečica sa tastature. Sadržaj datoteke otprilike
izgleda ovako:
<SHORTCUTSET name="Macromedia Standard" type="factory">
<SH0RTCUT ID="DWMenu_File_Save" keys="Cmd+S"/>
<SHORTCUT ID="DWMenu_File_SaveAs" keys="Cmd+Shift+S"/>
<SH0RTCUT ID="DWMenu_File_SaveAsTemplate" keys=""/> etc
</SHORTCUTSET>
Ako ste kreirali neki korisnički definisan skup prečica, one se pojavljuju u fascikli Configuration za tog
korisnika, kao posebna XML datoteka. Ime datoteke je u skladu sa imenom koje ste dali svom skupu, a
ekstenzija.xml. U istoj fascikli postoji datoteka Active.txt koja Dreamweaveru govori koji skup prečica je
trenutno aktivan. Ako iz nekog razloga ne želite da radite sa editorom - Keyboard Shortcuts (on je na primer,
suviše spor ili jednostavno ne želite da se bavite poljima Shortcut i Press Key, već više volite da kucate),
možete da promenite datoteke koje se nalaze u fascikli Configuration za tog korisnika i da tamo zadate koje
god želite prečice. Samo treba da imate na umu da sintaksa XML datoteke mora biti ispravna i da je na ovaj
način moguće da poremetite i rad Dreamweavera. Ako slučajno pokvarite svoj skup prečica ovim ručnim
promenama, napustite Dreamweaver, izbacite XML datoteku koja se odnosi na taj skup i promenite datoteku
Active.txt tako da se neki drugi skup podesi kao aktivan. Ovo je cena petljanja po kodu.
Podešavanje kategorije Favorites na paleti Insert
Teško ste radili, pravili strane, ubacivali sadržaj i pokušavali da budete što je moguće efikasniji. Da li Vam je
ikada dosadilo stalno skakanje sa jedne na drugu kategoriju na paleti Insert i stalno preskakanje objekata
koje ćete retko kada koristiti, da biste došli do onih koje koristite svo vreme? U Dreamweaveru MX 2004 je
novost da u kategoriju Favorites na paleti Insert možete lako da dodate svoje omiljene objekte. Ne morate da
petljate po kodu.
Prozor Customize Favorite Object
Prvi put kada dođete na paletu Insert Favorites, ona je prazna. Tu je samo poruka da treba da kliknete da
biste podesili kategoriju. Kada kliknete ovu poruku, Dreamweaver otvara okvir za dijalog Customize Favorite
Objects, koji je prikazan na slici. Ako želite da dodate svog favorita, u levom delu prozora izaberite objekat iz
liste. Nakon toga klikntie dugme >> da biste taj objekat prebacili u listu Favorites sa desne strane. Vaš
omiljeni objekati će se na paleti Favorites Insert prikazati po onom redosledu po kojem se prikazuju u listi
Favorites. Ako želite da ih organizujete (kada ih imate više), izaberite stavku iz liste, a onda pritisnite strelice
naviše i naniže, da biste ih pomerili naviše ili naniže u listi. Ako na paleti Insert želite da dodate vertikalni
separator (tako da možete da grupišete objekte u logičke grupe), izaberite objekat iza kojeg sledi separator,
a onda kliknite dugme Add Separator.
278 / 299
Dreamweaver MX 2004
Ako želite da iz liste Favorites izbacite neki objekat, selektujte ga i kliknite ikonu kante za đubre. (Ovim se
objekat ne briše iz ostalih interfejsa Dreamweavera, već samo iz kategorije Favorites.) Kada završite sa
kreiranjem favorita, kliknite OK da biste zatvorili okvir za dijalog. U bilo kom trenutku možete da se vratite u
ovaj prozor i da promentie kategoriju Favorites. Potrebno je da desnim tasterom miša kliknete prazan deo
palete Favorites Insert i da izaberete opciju Customize Favorites.
Kako se paleta Insert konfiguriše
Nije obavezno da znate kako Dreamweaver konfiguriše kategoriju Favorites ili neku drugu kategoriju sa
palete Insert. U slučaju da ste ozbiljni, ili da volite da petljate, evo kako to radi. U fascikli
Connguration/Objects se nalazi datoteka Insertbar.xml. Ona sadrži instrukcije za konfigurisanje palete Insert,
uključujući kategorije, dugmad sa objektima, grupe objekata itd. Evo kako radi kod:
<category>
<button />
<separator />
<menubutton>
<button />
<button />
</menubutton>
</category>
Svaki par oznaka category kreira kategoriju Insertbar. U okviru svake kategorije postoje oznake button, koje
kreiraju dugmad za objekte, a oznaka menubutton koja sadrži druge oznake button kreira padajući meni sa
objektima. Vertikalni separatori se prave preko oznaka spearator.
Kod sadrži različite atribute za svaku oznaku. Na kraju sve to izgleda ovako:
<category id="DW_Insertbar_Common"
MMString:name="insertbar/category/common"
folder="Common">
<button
id="DW_Anchor"
image="Common\Anchor.gif"MMString: name="insertbar/anchor" file="Common\Anchor.htm"/>
<separator />
<menubutton
id="DW_LayoutTools"
MMString:name=
"insertbar/layoutTools"
image="Common\Table.gif" folder="Tables">
<button
id="DW_Table"
image="Common\Table.gif"
enabled="!
VIEW_LAYOUT"
279 / 299
Dreamweaver MX 2004
MMString:name="insertbar/table" file="Common\Table. htm" />
<button
id="DW_Div"
image="Common\Div.gif"
enabled="!
MMString:name="insertbar/div" file= "Common\Div.htm"/>
</menubutton>
<category>
_VIEW_LAYOUT"
Automatizacija zadataka preko korisnički definisanih komandi
Ako ste jedan od ultra efikasnih ljudi, koji vole da kad god je moguće smanje sebi posao, onda ste verovatno
već koristili makroe koji postoje u drugim programima. Makroi omogućavaju da zapišete sve korake koje ste
uradili u obavljanju nekog posla i da ih kasnije ponovite. Ovo se obično pokreće nekom prečicom sa
tastature ili komandom iz menija. U Dreamweaveru, umesto da pravite makroe, možete da kreirate i
implementirate korisničke komande. Korisničke komande uključuju komande koje su privremeno zapisane,
stalno zapisane komande koje su zapisane preko panoa History, kao i složenije komande koje se moraju
programirati (preko skriptova). U narednom odeljku smo objasnili dve vrste korisničkih komandi.
Zapisivanje komandi
Zapisana komanda je niz koraka koje Vi nalažete da Dreamweaver zapiše, tako da ih kasnije može ponoviti
onoliko puta koliko Vam je potrebno. Komandu ćete zapisati na sledeći način:
1. Isplanirajte sve korake koji su Vam potrebni i ako je potrebno podesite uslove za zapisivanje. (Na
primer, ako želite da zapamtite formatiranje tabele, onda treba da otvorite dokument i da napravite
tabelu, pa tek tada možete da počnete sa zapisivanjem koraka).
2. Izaberite Commands > Start Recording.
3. Uradite korake koje želite da zapišete. Na primer, ako želite da formatirate tabelu, preko Property
Inspectora možete da primenite boju pozadine, da podesite cell padding i spacing, da podesite
debljinu i boju okvira, ili da podesite neke druge osobine. Dreamweaver ne može da zapiše korake
kao što su promena onog što je izabrano ili promena aktivnog dokumenta. Ako tokom zapisivanja
radite nešto od ovog, to se zanemaruje. Sa druge strane zapisuje se izbor iz Property Inspectora,
kucanje, kao i biranje komandi iz menija.
4. Kada završite sa zapisivanjem, izaberite Commands > Stop Recording.
Komanda koju ste zapisali ostaje u memoriji, spremna da se ponovo izvrši, sve dok ne zapišete novu ili dok
ne napustite Dreamweaver.
Ako želite da ponovo izvršite komandu koju ste zapisali, uradite sledeće:
1. Podesite uslove koji treba da budu podešeni preko nego što komanda bude počela da se izvršava.
(Ako želite da ponovo primenite komandu koja formatira tabelu, prvo morate da selektujete tabelu.)
2. Izaberite Commands > Play Recorder Command. Izvršiće se pojedini koraci koje ste zapisali.
3. Ponovite ovu proceduru onoliko puta koliko želite. Komande će se izvršiti isto toliko puta.
Kao što vidite, zapisane komande su prilično dobre. Ipak i one imaju svoja ograničenja. One mogu biti brza,
privremena pomoć u obavljanju nekih poslova koji se često ponavljaju. One ne mogu da rade ništa složenije,
ili duže. Na primer:
• Dreamweaver u jednom trenutku u memoriji može da ima samo jednu komandu. Čim
zapišete novu komandu, gubi se ona koja je prethodno bila zapisana.
• Zapisane komande ne mogu da sadrže okvire za dijalog i prema tome ne mogu se
prilagođavati da prihvataju unos od strane korisnika. Svaka komanda obavlja potpuno iste
korake, sa potpuno istim koracima.
• Ne mogu da se zapisuju sve akcije. Ako probate da zapišete skup koraka, koji sadrže
promenu nečeg što je izabrano, taj korak se ne može zapisati. Kada se komanda ponovo
izvršava, ovo može dovesti do nepredvidljivih rezultata.
• Nema provere grešaka. Na primer, ako pre ponovnog puštanja zapisane komande ne
selektujete ono što treba, komanda jednostavno neće raditi. Nećete dobiti lepu prijateljsku
poruku koja Vas upozorava da je nešto pošlo naopako.
Zapisivanje komandi preko panoa History
Ako Vam se dopada ideja da zapisujete i ponavljate svoje akcije, ali želite više kontrole i fleksibilnosti, pano
History nudi dve alternative. To su karakteristike Replay Steps i Save ASP.NET Commands, koje
omogućavaju da upamtite i ponovite skup koraka koji mogu, ali ne moraju biti uzastopni. Ovo se može
upamtiti privremeno ili stalno. Repeated Steps (ponovljeni koraci) se koriste kada želite da obavite skup
akcija i da odmah iza toga ponovite te akcije, jednom ili više puta. Zapisane komande se koriste kada želite
da svoje korake upamtite za stalno i da to stavite u interfejs Dreamweavera, tako da u budućnosti to možete
280 / 299
Dreamweaver MX 2004
da ponovite kad god želite. Procedura za ponavljanje koraka ili zapisivanje komandi je u osnovi ista. Treba
1. Isplanirajte korake koje želite da upamtite. Ako je potrebno, podesite uslove za njih (napravite tabelu
koja se formatira, na primer).
2. Otvorite pano History (izaberite Windows > History) tako da budete spremni za rad sa njime. Da biste
bili sigurni da počinjete sa praznim panoom i da možete da pokrijete što više koraka, izaberite
komandu Options > Clear History.
3. Izvršite akcije koje želite da ponavljate. Svaka akcija se na panou History prikazuje kao jedan korak.
I ovde ne mogu da se uključuju sve akcije (kao što su promena onog što je izabrano, ili pomeranje
miša). Ove akcije se na panou History prikazuju kao horizontalna crvena linija, ili crna linija koja
ukazuje na pomeranje miša.
4. Nakon što završite svoju proceduru i kada budete spremni da je ponovite, u panou History izaberite
sve korake koje želite da ponovite:
• Ako selektujete korake koji se nastavlju, svaki od njih kliknite sa pritisnutim tasterom Shift.
• Ako želite da selektujete korake koji nisu kontinualni (na primer, da preskočite pomeranje
miša), pritisnite taster Ctrl (Windows) i kliknite.
5. Ako ove korake želite da ponovite i da ih ne pamtite za stalno, iz panoa History izaberite Options >
Replay Steps. Svaki izabrani korak se ponovo izvršava (osim ako je u pitanju pomeranje miša, ili
neka druga akcija koja se ne ponavlja), a u panou History se prikazuje sledeći korak, po imenu
Replay Steps. Izaberite Replay Steps onoliko puta koliko je potrebno. Svaki put se na panou
pojavljuje novi korak koji se može ponoviti.
6. Ako želite da ove korake upamtite za stalno i da ih smestite u interfejs Dreamweavera, iz panoa
History izaberite Options > Save ASP.NET Command. (Ako u koracima postoji nešto što se nemože
pokriti, Dreamweaver će Vas upozoriti na to i dati priliku da prekinete operaciju.) Od Vas će se
zatražiti da novoj komandi date ime. Nakon što sve to završite, kliknite OK da biste zatvorili okvir za
dijalog. Nova komanda će se pojaviti u donjem delu menija Commands.
Nakon što ste niz komandi u panou History upamtili kao komandu, ove korake možete da ponovo izvršite u
bilo kom trenutku. Potrebno je da svoju komandu izaberete iz menija Commands. Za razliku od zapisanih
komandi koje smo ranije opisali, ove komande ostaju zapisane sve dok ih sami ne odbacite. Prema tome,
ako volite ovakve komande, verovatno ćete završiti sa nizom takvih. Ako želite da obrišete neku od zapisanih
komandi, ili da joj promenite ime, izaberite Commands > Edit Command List.
Kako se konfigurišu zapisane komande
Kao i drugi elementi interfejsa Dreamweavera, i zapisane komande se nalaze u fascikli Configuration.
Konkretno, one se nalaze u fascikli Configuration, za odredenog korisnika, odnosno u fascikli
Configuration/Commands. Svaka zapisana komanda postoji u obliku HTML datoteke, pri čemu je ime
datoteke jednako sa imenom komande, uz dodatu ekstenziju.htm. Ako želite da zavirite ispod poklopca i da
podešavate ove komande, u bilo kom tekstu možete da otvorite ove komande i da petljate sa njima. Ovo bi
naravno moglo da destabilizuje Dreamweaver, ako ne uradite sve kako treba. Ako se desi tako nešto,
otvorite fasciklu Configuration/Commands i obrišite datoteku koja se odnosi na komandu koja pravi
probleme.
Prilagođavanje okvira za dijalog preko HTML-a
Većina objekata, komandi i ponašanja koja rade sa okvirima za dijalog, svoje informacije vezane za raspored
čuvaju u HTML datotekama, koje se nalaze u fascikli Configuration. Ulazna polja, polja za potvrdu, padajući
meniji i sl. se kreiraju na osnovu standardnih elemenata HTML formi i formatiraju se preko tabela ili nivoa.
Premda bez narušavanja funkcionalnosti ne možete da brišete ili dodajete ulazna polja, možete da menjate
okvir za dijalog, tako što ćete menjati HTML raspored. Čudno, ali za ovo možete da koristite Dreamweaver,
premda pre nego što promene budu imale efekta, morate da restartujete program. Recimo da, na primer,
želite da prilagodite okvir za dijalog Call JavaScript. Pošto je ovo ponašanje, treba ga potražiti u fascikli
Configuration/Behaviors/Actions. U ovoj fascikli postoji datoteka Call JavaScript.js i Call JavaScript.htm. JS
datoteka sadrži funkcionalnosti za ovo ponašanje, a HTML sadrži raspored ovog okvira za dijalog. Ako u
Dreamweaveru otvorite HTML datoteku, videćete raspored okvira za dijalog kao formu i tabelu. Sve promene
koje napravite u rasporedu se prikazuju u okviru za dijalog. Nemojte menjati ime forme ili njenih elemenata,
ili dodavati ili izbacivati elemente forme, jer bi u tom slučaju mogli da uništite ponašanje.
281 / 299
Dreamweaver MX 2004
Prialgođavanje menija Dreamweavera preko datoteke menus.xml
Svaka komanda koja se pojavljuje u sistemu menija Dreamweavera, uključujući menije aplikacije, kontekstne
menije i sve drugo, je definisana preko datoteke za konfiguraciju menus.xml. Ova datoteka odreduje koji će
se meniji pojaviti na liniji menija, koja se komanda u kom meniju pojavljuje, kao i koju akciju Dreamweaver
treba da izvrši kada se komanda izabere. (Akcija je obično da se otvori i izvrši datoteka za konfiguraciju, kao
što je Objects/Common/Table.htm.) Datoteka Menus.xml se nalazi u fascikli Configuration/Menus. Kao i
datoteka Insertbar.xml ovo je validan XML dokument. Korenski element je par oznaka <menubar>, u okviru
kojeg su ugnježđeni različiti drugi elementi (oznake i parovi oznaka). Struktura osnovnog elementa je:
<menubar>
<menu>
<menuitem/>
<menuitem/>
</menu>
more menus
</menubar>
Svaka oznaka ima skup atributa koji rukuju time kako se meni i komanda prikazuju i šta se dešava kada se
komanda izabere. Iako bez pisanja skripta ne možete da dodate potpuno novu stavku menija, preko XML-a
možete da podesite svoj sistem menija. Možete da prebacujete stavke u meniju, da dodajete separatore, pa
čak i da ih kopirate tako da se prikazuju na više mesta, na primer, jednom u meniju i drugi put u kontekstnom
meniju. Prilikom dupliciranja stavki iz menija, obratite pažnju na to da svaka stavka iz datoteke menus.xml
ima atrribut id koji mora biti jedinstven. Ako duplicirate neku stavku, morate da promenite id oznaku
duplikata, tako da se razlikuje od originalne stavke.
Proširenja koja dolaze od nezavisnih proizvođača
Ako želite da prilagođavate Dreamweaver radi proširenja njegovih funkcija, onda ste spremni za nova
proširenja. Ako želite da koristite dokazane veštine drugih u programiranju, Tako da ne morate da sami
kreirate proširenje, spremni ste za Macromedia Exchange for Dreamweaver i Extension Manager.
Pronalaženje proširenja: Macromedia Exchange
Macromedia Exchange for Dreamweaver je veliko skladište proširenja koja je prikupila firma Macromedia.
Predstavljeno je na Webu i svi mogu da ga koriste. Premda je neka od ovih proširenja napisala sama firma
Macromedia, veliki deo su pisali nezavisni programeri, koji su proširenja pravili sami za sebe, a onda se
složili da to podele sa zajednicom Dreamweavera.
Ova proširenja se pakuju u opštem formatu (MXP) i postavljaju na Exchange, tako da svako može da ih
koristi. Većina njih je besplatno, ali se neka i naplaćuju, ali relativno malo. Programu Macromedia Exchange
for
Dreamweaver
možete
pristupiti
ako
u
pretraživaču
unesete
adresu
www.macromedia.com/exchange/dreamweaver. Postoji na stotine različitih proširenja. Ona dodaju različite
funkcije, od pretraživanja sajta, pa do instalacije kodova zemalja ili dodavanja dugmeta za nove Flash
stilove. Sva proširenja su testirana u Macromediji da bi se osiguralo da su instalirana kako treba i da rade na
pravi način. Ona koja imaju odobrenje Macromedije su rigoroznije testirana i ona prate pravila definisana za
UI u Macromediji, tako da se vrlo lepo uklapaju u interfejs Dreamweavera. Proširenja možete da pretražujete
po kategorijama, ili po naslovu i autoru. Ako želite da preuzmete neko proširenje, morate da se prijavite pod
besplatnim nalogom Macromedia Exchangea.
Exchangeu možete da pristupite i ako u Dreamweaveru izaberete Help > Dreamweaver Exchange ili neku od
komandi Get More, kao što je Insert > Get More Objects, Commands > Get More Commands, ili komandu
Get More Behaviors, koja se nalazi na dnu panoa Behaviors, u padajućem meniju Actions. Ako izaberete
neku od ovih komandi, pokrenuće se pretraživač i odvesti Vas na naslovnu stranu programa Exchange.
282 / 299
Dreamweaver MX 2004
21. Prilog
Primer izrade dinamičkog sajta
U ovom odeljku opisaćemo postupak izrade jednostavnog dinamičkog sajta – elektronske prodavnice.
Struktura sajta
Sajt se sastoji iz četiri celine. Prvi deo, početna strana, sadrži navigacioni meni i vesti koje se učitavaju iz
baze. Drugi deo predstavlja katalog proizvoda koji su u ponudi i takođe se učitava iz baze. Treći deo su
stranice koje se odnose na opis poslovanja e-prodavnice i nisu od velikog značaja u ovom odeljku. Četvrti
deo predstavlja deo za administraciju vesti, proizvoda i korisnika, koji je dostupan samo administratoru.
Priprema
Pre samog kreiranja sajta, potrebno je da se obezbedi odgovarajući web server, kao i baza podataka. U
našem primeru koristili smo Apache web server i MySQL sistem za upravljanje bazama podataka. Postupak
instaliranja navedenih komponenti se značajno ubrzava korišćenjem EasyPHP softverskog paketa, koji
možete preuzeti sa adrese: http://www.easyphp.org/?lang=en
Baza podataka
Baza se sastoji od sledećih tabela:
Proizvod (IDproizvoda, Tip, Naziv, Opis, Cena, Slika)
Vesti (IDvesti, Naslov, Datum, Telo, PrikazatiYN)
Korisnik (IDkorisnika, Ime, Prezime, Adresa, Email, Username, Password, AccessLevel)
283 / 299
Dreamweaver MX 2004
Da biste kreirali MySQL bazu, u browseru idite na http://localhost/mysql/
U odeljku ’Create new database’ upišite ’eprodavnica’ i kliknite na dugme ’Create’.
Nakon toga treba dodati tri tabele u bazu. To se radi tako što se u odeljku ’Create new table on database
eprodavnica’ unesu nazivi tabela i broj njihovih polja.
284 / 299
Dreamweaver MX 2004
Da biste ubacili vrednosti u odgovarajuću tabelu, kliknite na ikonicu ’Browse’ a zatim na ’Insert new row’ i
unesite potrebne podatke.
Da ne biste svaki put prolazili kroz ovaj postupak, jednom kreiranu i popunjenu bazu možete da eksportujete
tako što ćete u gornjem meniju izabrati ’Export’ i podesiti odgovarajuće opcije. Dobijate tekstualni fajl, koji
kasnije, pri kreiranju nove baze, možete da importujete klikom na stavku ’SQL’ u gornjem meniju i
izvršavanjem SQL upita.
Definisanje sajta
Nakon pripreme, prvi korak je definisanje sajta u Dreamweaveru, tj. kreiranje zajedničkog foldera za sve
fajlove koji će se koristiti, biranje serverske tehnologije (u našem primeru to je PHP), definisanje servera za
testiranje i udaljenog servera.
1.
2.
3.
4.
5.
6.
7.
8.
Iz menija Site izaberite opciju Manage Sites, pa opciju New i na kraju opciju Site.
Dodelite naziv svom sajtu. Kliknite next.
Izaberite da želite da koristite serversku tehnologiju, i to PHP MySQL. Kliknite next.
Izaberite prvu opciju ‘Edit and test locally’ i izaberite folder, npr.
C:\Program Files\EasyPHP1-8\www\EProdavnica\ . Kliknite next.
Za URL testing servera unesite http://localhost/EProdavnica/ . Kliknite next.
Izaberite da želite da koristite udaljeni server. Kliknite next.
Pošto ćemo sajt da testiramo na lokalnoj mašini, a kasnije da uploadujemo na Internet, izabraćemo
opciju Local/Network. Za lokaciju unesite istu kao u koraku 4. Kliknite next.
Izaberite da ne želite check in/out. Kliknite next, pa Done.
285 / 299
Dreamweaver MX 2004
286 / 299
Dreamweaver MX 2004
287 / 299
Dreamweaver MX 2004
288 / 299
Dreamweaver MX 2004
289 / 299
Dreamweaver MX 2004
Povezivanje sa bazom
Kada kreirate novi fajl index.php, otvorite pano Applications / Databases
Kliknite na plus ( + ) pa na MySQL Connection, da biste kreirali konekciju ka bazi. Popunite sve potrebne
podatke i kliknite na Select da biste odabrali bazu. Kliknite OK.
Nakon toga, u panou Databases možete da vidite tabele u bazi.
290 / 299
Dreamweaver MX 2004
Login forma
Kada na index.php stavite sve potrebne elemente, tabele, menije i kada primenite svoj CSS stil, potrebno je
da dodate formu koja će da sadrži dva Text Field-a za Username i Password, kao i jedno Submit dugme.
Text Field-ovima dodelite nazive preko panoa Properties, da biste se kasnije lakše snalazili.
Na panou Application / Server Behaviors kliknite na plus ( + ), zatim na User Authentication i na kraju na Log
In User.
Popunite polja kako je prikazano na sledećoj slici:
291 / 299
Dreamweaver MX 2004
Učitavanje teksta iz baze
Ako želite da se na strani prikazuju vesti, ili bilo koji drugi elementi iz baze, potrebno je da prvo definišete
Recordset. Na panou Server Behaviors kliknite na plus ( + ) pa na Recordset. Popunite polja kako je to
prikazano na sledećoj slici:
292 / 299
Dreamweaver MX 2004
Sada pređite na pano Application / Bindings i videćete da se tu pojavio Recordset koji ste malopre definisali,
sa svojim komponentama. Jednostavno prevucite mišem određene komponente u ćelije tabele koja će da
prikazuje vesti.
Da biste videli sve vesti iz baze, a ne samo prvu, potrebno je da izaberete red tabele u koji ste ubacili
dinamičke elemente, i da na panou Server Behaviors kliknete na plus ( + ) pa na Repeat Region. Izaberite
da se prikazuju svi rekordi iz baze:
293 / 299
Dreamweaver MX 2004
Nakon toga, oblast na koju ste primenili ovaj Server Behavior (u našem slučaju – red tabele) se ograničava i
dobija mali tab na kome piše Repeat.
Učitavanje slika iz baze
Kada definišete Recordset (u ovom slučaju to je rs_proizvod jer ćemo u katalogu prikazati i slike proizvoda),
postupak za ubacivanje dinamičkih slika je sledeći. Na meniju Insert izaberite Image, i u sekciji ’Select file
name from:’ izaberite ’Data sources’, umesto ’File System’ koji je označen po defaultu. U Recordsetu
izaberite Sliku i kliknite na OK. Posle ovih operacija, na poziciji u tabeli koju ste rezervisali za slike, trebalo bi
da vidite oznaku za dinamičku sliku:
Ograničavanje pristupa
Ako želite da vaš katalog gledaju samo ulogovani korisnici, možete da iskoristite Server Behavior – Restrict
294 / 299
Dreamweaver MX 2004
Access to Page. Popunite polja na sledeći način:
Brojevi 0 i 1 koji su selektovani (plava boja) označavaju da strani mogu da pristupe korisnici koji imaju
access level 0 i 1, a to su upravo vrednosti koje u bazi označavaju običnog korisnika (0) i administratora (1).
Ostali, neulogovani posetioci će imati vrednost NULL tako da im neće biti omogućen pristup i biće
redirektovani na stranu denied.php.
Slično se radi i sa logovanjem administratora. Pravo pristupa strani ima samo korisnik sa vrednošću access
level-a 1, i on može da učita stranu administracija.php, dok se ostali korisnici redirektuju na stranu koja
prikazuje grešku o neautorizovanom pristupu.
Rad sa podacima u bazi (Insert, Update, Delete)
Pre nego što počnete da radite sa ubacivanjem novih, izmenom ili brisanjem postojećih elemenata iz baze,
morate da kreirate odgovarajući Recordset, kako je to ranije opisano.
Zatim treba da kreirate formu u koju ćete da stavite sve potrebne komponente (Text Field, Checkbox,
Dugme...). Poželjno je da tim komponentama preko panoa Properties dodelite nazive, kako biste se kasnije
lakše snalazili.
Nakon toga na panou Server Behaviors kliknite na plus ( + ) pa na Insert Record.
Popunite potrebne podatke kako je to prikazano na sledećoj slici:
295 / 299
Dreamweaver MX 2004
Obratite pažnju na to da li ste izabrali odgovarajuću konekciju ka bazi i odgovarajuću tabelu iz baze. U
našem slučaju radimo sa operacijama Insert, Update i Delete nad tabelom Vesti, tako da je ta tabela i
izabrana.
Posle toga, za svaki red u odeljku Columns, iz combobox-a Value treba da odaberete naziv odgovarajuće
komponente na formi, kako je prikazano na sledećoj slici:
U ovom primeru, vrednost ’tb_vesti_ins2’ je naziv Text Field-a u koji se unosi naslov vesti, i klikom na dugme
Ubaci, upisana vrednost će se upisati u bazu, u tabelu Vesti, polje Naziv.
Promena vrednosti u bazi je nešto komplikovanija. Ustvari, ono što dodatno treba da uradite jeste da kreirate
296 / 299
Dreamweaver MX 2004
dinamičke Text Field-ove. Pošto ste kreirali novu formu i na nju stavili sve potrebne komponente, sada
označite Text Field, u koji će da se upisuju vrednosti iz baze, a koji želite da pretvorite u dinamički. U panou
Properties, u delu ’Init val’ kliknite na ikonicu munje.
Otvoriće se prozor u kome ćete da izaberete odgovarajući element Recordset-a. Postupak ponovite za sve
dinamičke komponente.
Sada na panou Server Behaviors kliknite plus ( + ) pa Update Record, i ponovite proceduru za ubacivanje
novog rekorda u tabelu u bazi.
Isti postupak primenjujete za izbacivanje rekorda iz baze, samo što umesto Update Record, na panou Server
Behaviors izaberete Delete Record.
Na kraju bi pano Server Behaviors trebalo da izgleda slično kao na ovoj slici:
297 / 299
Dreamweaver MX 2004
CSS stilovi
Navešćemo i ukratko objasniti par CSS stilova koje smo koristili u ovom primeru.
Oznaka a:link znači da će formatiranje da se primeni na sve linkove (tag <a>), dok se a:hover primenjuje na
linkove iznad kojih se postavi kursor miša. Vidimo da će tada boja slova preći iz tamno crvene (#990000) u
belu (#FFFFFF), pozadina će postati tamno crvena i tekst će biti podvučen. U oba slučaja margine i razmak
od ivice će biti po 2 piksela.
Klasa .okvir_tabledata doprinosi tome da se svakom tagu na koji se primeni, granica postavi na 1 pixel, boja
promeni u plavo-ljubičastu i razmak od ivice bude 5 piksela. U našem primeru, ovaj CSS stil smo selektivno
primenjivali na <td> tagove.
Tag h3 se primenjuje na naslove (heading), koji su treći po značaju, iza h1 i h2. Font u njima je nešto veći i
boldovan za razliku od ostatka teksta.
Ovo je stil koji je primenjen na desnu kolonu u glavnoj tabeli. Mala slika – gradijent, je ’prilepljena’ uz levu
ivicu te kolone, a ponavlja se po y-osi (vertikalno).
298 / 299
Dreamweaver MX 2004
I za kraj, pogledajte kako izgleda sajt sa CSS stilovima, koji se nalaze u jednom jedinom fajlu koji veoma
lako možete da menjate, i kako bi taj isti sajt izgledao bez CSS stilova:
299 / 299

Svari koje nikada nećete videti

Transcription

Similar documents

Hrvatski/Bosanski/Srpski

Macromedia Dreamweaver MX

Ključ za primjenu Zakona privlačnosti

PLAY!

ABRAHADABRA Vodič kroz telemitsku magiku

100 trgovin 200 znamk modnih oblikovalcev 30

Priprema za štampu uputstva PDF

Galaxy S - Telenor

Galaxy S2

Uputstvo za ADSL ruter TP-LINK

Play! #71 | April 2014. | www.play

Odzivno spletno oblikovanje - e-Prints.FRI

Tower 6_Hrv - Plan-B