Dreamweawer Tutorial

DREAMWEAVER MX 2004
Fakultet organizacionih nauka
Dreamweaver MX 2004
SADRAJ
1. POBOLJANJA U NOVOJ VERZIJI.........................................................................................................................8 GENERALNA POBOLJANJA VEZANA ZA INTERFEJS ........................................................................................................................8 Kategorije kod grupe objekata.....................................................................................................................................8 Integrisani pano Site ...................................................................................................................................................9 Palete vezane za dokumente.......................................................................................................................................10 Tag Inspector..............................................................................................................................................................10 Poboljani meni Window............................................................................................................................................12 POBOLJANJA VEZANA ZA RAD SA DOKUMENTIMA.....................................................................................................................12 Poboljano ureivanje tabela.....................................................................................................................................12 Bolja integracija provere dokumenta.........................................................................................................................13 Integrisano rukovanje grafikom.................................................................................................................................13 POBOLJANJA VEZANA ZA CSS.............................................................................................................................................14 CSS integracija...........................................................................................................................................................14 Poboljana podrka za CSS2......................................................................................................................................15 POBOLJANJA VEZANA ZA KOD...............................................................................................................................................16 POBOLJANJA VEZANA ZA RUKOVANJE SAJTOM.........................................................................................................................17 POBOLJANJA VEZANA ZA RAD SA DINAMIKIM PODACIMA.........................................................................................................18 2. RADNI PROSTOR DREAMWEAVERA..................................................................................................................19 IZBOR RADNOG PROSTORA.....................................................................................................................................................19 Poreenje radnih prostora.........................................................................................................................................19 Promena radnih prostora...........................................................................................................................................20 STRANA START...................................................................................................................................................................21 RAD SA PANOIMA................................................................................................................................................................22 Panoi i grupe panoa...................................................................................................................................................22 Prikazivanje i sakrivanje............................................................................................................................................23 Privrivanje 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 podeavanje 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 odreenom pretraivau...................................................................................................................37 Dostupnost Vaih strana............................................................................................................................................38 4. RAD SA TEKSTOM....................................................................................................................................................40 OSNOVE U VEZI TEKSTA........................................................................................................................................................40 Tekst u pretraivau...................................................................................................................................................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 znae 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 pretraivau....................................................................................................................................................55 Slike u Dreamweaveru...............................................................................................................................................55 RAD SA SLIKAMA................................................................................................................................................................57 Dostupnost slika.........................................................................................................................................................57 Dostupnost slika u Dreamweaveru............................................................................................................................58 Integrisano ureivanje slika.......................................................................................................................................59 Slike kao pozadina......................................................................................................................................................61 Slike i struktura strane...............................................................................................................................................65 Slike u GIF formatu od jednog piksela.......................................................................................................................65 Lowsrc........................................................................................................................................................................66 Definisanje rasporeda pomou 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 Proirenje Fireworksa vezano za integraciju............................................................................................................70 6. LINKOVI I NAVIGACIJA.........................................................................................................................................72 OSNOVNO O LINKOVIMA.......................................................................................................................................................72 Kako linkovi rade u pretraivau...............................................................................................................................72 Linkovi u Dreamweaveru...........................................................................................................................................73 METODI I ALATI ZA NAVIGACIJU............................................................................................................................................75 Kotve sa imenima.......................................................................................................................................................75 Mape slika..................................................................................................................................................................76 Padajui meniji..........................................................................................................................................................77 Rollover......................................................................................................................................................................80 Linije za navigaciju....................................................................................................................................................82 RAD SA LINKOVIMA.............................................................................................................................................................85 Dostupniji linkovi.......................................................................................................................................................85 Podeavanje linkova preko CSS-a..............................................................................................................................86 Podeavanje parametara URL-a................................................................................................................................88 Linkovi na JavaScript kod..........................................................................................................................................90 7. PODEAVANJE GLAVNOG SADRAJA...............................................................................................................92 OSNOVNO O SADRAJU ZAGLAVLJA.........................................................................................................................................92 Kako se sadraj zaglavlja ponaa u pretraivau......................................................................................................92 Kako se u Dreamweaver u radi sa zaglavljem...........................................................................................................92 RAD SA OZNAKAMA META.....................................................................................................................................................93 Oznaka meta character-encoding..............................................................................................................................93 Oznaka meta i generiki objekat meta.......................................................................................................................94 Kljune rei meta i njihov opis...................................................................................................................................94 Oznaka meta refresh...................................................................................................................................................96 RAD SA OSTALIM SADRAJEM ZAGLAVLJA................................................................................................................................97 Objekat Base i oznaka base........................................................................................................................................97 Oznake linkova i objekat Link....................................................................................................................................99 8. KREIRANJE TABELA.............................................................................................................................................100 OSNOVNO O TABELAMA......................................................................................................................................................100 Tabele u pretraivau...............................................................................................................................................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 POMOU TABELA............................................................................................111 Strategija rada..........................................................................................................................................................111 Tabele koje se koriste za raspored i reim Layout...................................................................................................112 9. FORME.......................................................................................................................................................................116 OSNOVNO O FORMAMA.......................................................................................................................................................116 Skriptovi za obradu formi.........................................................................................................................................116 HTML koji se nalazi iza formi..................................................................................................................................116 Kako forme funkcioniu 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 pretraivau...........................................................................................................................................124 Frejmovi u Dreamweaveru.......................................................................................................................................124 RAD SA FREJMOVIMA.........................................................................................................................................................126 Dostupnost frejmova................................................................................................................................................126 Mogunost pretraivanja frejmova..........................................................................................................................128 Navigacija unutar frejmova.....................................................................................................................................129 Zadravanje strana u frejmovima............................................................................................................................132 Izlazak iz frejmova....................................................................................................................................................136 Kreativni grafiki efekti koji se dobijaju preko frejmova.........................................................................................137 SVET FREJMOVA................................................................................................................................................................138 Inlajn frejmovi (iframes) u Dreamweaveru..............................................................................................................138 Exchange: Proirenje 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 Specifinosti koje se postiu kontekstualnim selektorima........................................................................................159 Kako da odjednom radite sa vie razliitih spoljanjih datoteka sa stilovima........................................................160 12. CSS POZICIONIRANJE, NIVOI DREAMWEAVERA I RASPORED NA STRANI.....................................162 OSNOVNO O NIVOIMA.........................................................................................................................................................162 CSS-P i nivoi u pretraivau....................................................................................................................................162 Kako u Dreamweaveru rade nivoi...........................................................................................................................163 Dizajn nivoa u prikazu Design.................................................................................................................................166 RAD SA NIVOIMA...............................................................................................................................................................169 Nivoi kao objekti sa stilovima..................................................................................................................................169 Podrka pretraivaa za nivoe.................................................................................................................................171 13. UPRAVLJANJE LOKALNIM SAJTOM..............................................................................................................172 KAKO DREAMWEAVER RUKUJE LOKALNIM SAJTOVIMA.............................................................................................................172 DEFINISANJE LOKALNOG SAJTA............................................................................................................................................172 UPRAVLJANJE SAJTOVIMA...................................................................................................................................................174 PANO SITE.......................................................................................................................................................................174 Proirivanje i suavanje 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 Podeavanje 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 ODRAVANJE 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 Ukljuivanje i iskljuivanje sakrivanja....................................................................................................................195 Sakrivanje datoteka i fascikli...................................................................................................................................196 Otkrivanje.................................................................................................................................................................196 RAD BEZ SAJTA: DEFINISANJE VEZE SA UDALJENIM SERVEROM..................................................................................................196 15. KREIRANJE DINAMIKIH SAJTOVA U DREAMWEAVERU.....................................................................199 OSNOVNO O DINAMIKIM SAJTOVIMA....................................................................................................................................199 Kako rade statike strane.........................................................................................................................................199 Kako rade dinamike strane.....................................................................................................................................199 PODEAVANJE RADNE STANICE ZA RAZVOJ DINAMIKIH SAJTOVA...............................................................................................202 Podeavanje onlajn razvoja.....................................................................................................................................203 PODEAVANJE OFLAJN RAZVOJA...........................................................................................................................................203 Podeavanje HTTP servera......................................................................................................................................203 Podeavanje aplikacionog servera...........................................................................................................................204 Baze podataka..........................................................................................................................................................205 FUNKCIONISANJE DINAMIKIH SAJTOVA U DREAMWEAVERU.....................................................................................................205 Pregled ivih podataka i server za testiranje...........................................................................................................206 Podeavanje dinamikih sajtova..............................................................................................................................206 Povezivanje sa bazom podataka...............................................................................................................................207 16. DINAMIKE STRANE...........................................................................................................................................209 PRIKUPLJANJE DINAMIKIH PODATAKA..................................................................................................................................209 Osnovno o skupovima zapisa...................................................................................................................................209 Sofisticiraniji upiti i skupovi rezultata.....................................................................................................................210 POSTAVLJANJE DINAMIKIH ELEMENATA NA STRANE................................................................................................................212 Dinamiki tekstualni elementi..................................................................................................................................212 Podeavanje dinamikih osobina.............................................................................................................................213 Dinamiki podaci i forme.........................................................................................................................................215 Regioni koji se ponavljaju........................................................................................................................................216 Uslovni sadraj.........................................................................................................................................................218 17. JO NEKE DINAMIKE TEHNIKE....................................................................................................................220 DINAMIKI ABLONI..........................................................................................................................................................220 Kreiranje dinamikih ablona..................................................................................................................................220 Kako rade dinamike strane.....................................................................................................................................220 SKUPOVI GLAVNIH I DETALJNIH STRANA................................................................................................................................221
5 / 299
Dreamweaver MX 2004
Runo kreiranje skupova glavnih i detaljnih strana................................................................................................221 SLOENI 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 Ograniavanje pristupa............................................................................................................................................228 Odjavljivanje............................................................................................................................................................229 USLOVNI SADRAJ.............................................................................................................................................................229 Objekti Show Region................................................................................................................................................229 Druge vrste uslovnog sadraja.................................................................................................................................230 18. ASP.NET...................................................................................................................................................................231 ASP.NET NAPOMENE O INSTALACIJI...................................................................................................................................231 Na kojim verzijama Windowsa ASP.NET moe da radi?.........................................................................................231 Iskljuite opciju Simple File Sharing.......................................................................................................................231 Podeavanje dozvola za fascikle..............................................................................................................................231 Podeavanje dozvola za IIS Administratora............................................................................................................231 ASP.NET OBJEKTI ZA RUNO 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 sledee 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 podeavanje njegovih karakteristika....................................................................................250 Opcije vezane za formatiranje koda.........................................................................................................................255 Prepisivanje koda.....................................................................................................................................................257 Pisanje i ureivanje koda.........................................................................................................................................258 Delovi koda (Snippets).............................................................................................................................................260 POVEZIVANJE SA SPOLJANJIM EDITORIMA TEKSTA..................................................................................................................262 Podeavanje spoljanjeg 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 pretraivanje teksta.................................................................................................................................266 Pretraivanja 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. PRILAGOAVANJE I PROIRIVANJE DREAMWEAVERA........................................................................275 KAKO SE DREAMWEAVER KONFIGURIE................................................................................................................................275 Kako se radi sa fasciklom za konfiguraciju.............................................................................................................275 Podrka za vie korisnika: Fascikla User Configuration........................................................................................275 PROMENA KONFIGURACIJE...................................................................................................................................................276 Promena preica sa tastature..................................................................................................................................276 Podeavanje kategorije Favorites na paleti Insert..................................................................................................278 Automatizacija zadataka preko korisniki definisanih komandi..............................................................................280 Kako se konfiguriu zapisane komande...................................................................................................................281 Prilagoavanje okvira za dijalog preko HTML-a....................................................................................................281 Prialgoavanje menija Dreamweavera preko datoteke menus.xml.........................................................................282 PROIRENJA KOJA DOLAZE OD NEZAVISNIH PROIZVOAA.........................................................................................................282 Pronalaenje proirenja: Macromedia Exchange...................................................................................................282 21. PRILOG....................................................................................................................................................................283 PRIMER IZRADE DINAMIKOG SAJTA......................................................................................................................................283 Struktura sajta..........................................................................................................................................................283 Priprema...................................................................................................................................................................283 Baza podataka..........................................................................................................................................................283 Definisanje sajta.......................................................................................................................................................285 Povezivanje sa bazom...............................................................................................................................................290 Login forma..............................................................................................................................................................291 Uitavanje teksta iz baze..........................................................................................................................................292 Uitavanje slika iz baze............................................................................................................................................294 Ograniavanje pristupa............................................................................................................................................294 Rad sa podacima u bazi (Insert, Update, Delete)....................................................................................................295 CSS stilovi................................................................................................................................................................298
7 / 299
Dreamweaver MX 2004
1. Poboljanja u novoj verziji

Koja su poboljanja u verziji MX 2004 u odnosu na verziju MX ? Moda ih neete videti, ali ona su tu. To su neosetna poboljanja, koja program ine boljim. Dreamweaver je poboljan u pravcu vee brzine i pouzdanosti. Program nudi punu podrku za Unicode, to znai da se strane mogu prikazivati na bilo kom jeziku koji programski sistem moe da razume. Ugraeni FTP program je potuno nov, pouzdaniji je i bri. A evo i stvari koje neete videti zato to vie 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 otilo. Ako ste koristili Dreamweaver za Windows, onda je i Classic Workspace otiao. Otila je i podrka za Windows NT, Windows Me i Macove operativne sisteme pre verzije Jaguar (10.2). Prvi put kada pokrenete svoju novu kopiju Dreamweavera MX 2004, susreete se sa stranom Start. Ova strana nije samo obina strana za dobrolicu, 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 definiite sajt iz samo jednog ekrana. Ako vam se ova strana ne dopada, moete je iskljuiti u okviru za dijalog Preferences.
Generalna poboljanja vezana za interfejs

Nakon promena na poetnoj strani, interfejs Dreamweavera se ne razlikuje mnogo od starog MX interfejsa. Ali, kako se budete dalje udubljivali, otkrivaete suptilne, ali i manje suptilne promene.
Kategorije kod grupe objekata

Kartice na paleti Insert vie nisu tu. Kategorije objekata koje su se tamo nalazile, sada su dostupne iz padajueg 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 pronai meavinu objekata (prikazanih preko ikona), kao i grupe objekata (naznaene 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 takoe 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 runo 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 moe biti uznemirujue da lovite svoj objekat i da ga na kraju pronaete 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 vie tabela, pre nego to predete na nivoe ili elije.
Ako Vam se i dalje ne dopada nain na koji su objekti grupisani, moete da ga izmenite. Idite do kategorije Favorites i tamo izaberite objekte koje elite da prikaete.
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 skraenom obliku kao jedan od kaskadnih panoa sa donje desne strane monitora.
9 / 299
Dreamweaver MX 2004
Ovim komandama se moe 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 videe da su palete privrene za prozor Document, a ne ispod palete Insert. Iako ovo moe izgledati pomalo neobino, ipak je vrlo efikasno, jer se palete pribliavaju aktivnom delu dokumenta u kome radite, tako da moete da za razliite dokumente razliito podeavate pojedine palete. Palete se mogu otkaiti prevlaenjem njihovih ruica, 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) nain za pregled i rad sa bilo kojim elementom na strani. Ovo je kao vojniki no - sve to e Vam ikad trebati je tu, ak i ako niste znali da e Vam biti potrebno. Kartica Attributes je uveana verzija Tag Inspectora iz verzije Dreamweaver MX. Iz ovog korisnog i kompaktnog panoa moete da podeavate 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 podeavate). Tu su sve osobine, zajedno sa standardnim dugmadima za pretraivanje, mogunostima za podeavanje boja, kao i dinamikim opcijama koje omoguavaju da brzo i tano unesete vrednost.
10 / 299
Dreamweaver MX 2004
Na kartici Behaviors se nalazi poboljani interfejs sa panoa Behaviors. Tu su sada dve opcije za prikazivanje rukovaoca dogaajima koji se mogu koristiti. Kartica Tag Inspector/CSS vri inspekciju stilova. Ovo je nov i koristan nain 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 teak i zbunjuju, spremni ste za nova, poboljana iskustva. Moda 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 dobrodola novina, koja Vaim rukama daje novu snagu.
11 / 299
Dreamweaver MX 2004
Poboljani meni Window

U meniju Window su sada u glavnom prozoru prikazani svi panoi i inspektori. Pojedine stavke, kao to je bio sluaj sa opcijama Layers i Frames sada nisu vie u podmeniju Others. Naravno, kad jednom podesite preice sa tastature, verovatno vie neete koristiti meni Window, ali kao generalni princip, lepo je da se sve nae na jednom mestu.
Poboljanja vezana za rad sa dokumentima

Naravno da je jedna od najboljih osobina ovog programa bilo intuitivno, jasno i snano okruenje za rad sa dokumentima. Iako se u novoj verziji izgled prozora Document nije promenio, razliite osobine su ojaane, tako da se dobija bolje integrisano radno okruenje.
Poboljano ureivanje tabela

Veini web dizajnera tabele predstavljaju veliki deo svakodnevnih radnih aktivnosti. Njima se teko rukuje, ak i u grafikom okruenju. Dreamweaver je uvek imao dobre alate za ureivanje 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 slino informacijama koje se za izabranu tabelu prikazuju u Layout modu. Paleta ne samo da prikazuje informacije o dimenzijama, ve je tu i padajui meni sa komandama za izbor i ureivanje.
12 / 299
Dreamweaver MX 2004
Druga pomo, reim Expanded Tables (View > Table Mode > Expanded Tables Mode) moe da olaka ivot onima koji za raspored strana koriste tabele bez vidljivih ivica. U reimu Expanded Tables, Dreamweaver sve tabele prikazuje sa ivicama, prikazuje rastojanje izmeu elija, uvlaenje 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 pretraivau i dalje prikazuje na uobiajeni nain. Reim Expanded Tables moe puno da pomogne kod dizajna, jer se vidi ono to biste inae morali da zamiljate. Za one koji vole da rade u reimu Layout, on je i dalje tu. Neka poboljanja su doprinela veoj pouzdanosti. Tabelama koje ste pravili u reimu Layout vie 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 pretraivaima. Sada je tee da sluajno napravite tabelu u vazduhu, odnosno da kreirate tabelu koja se sluajno nala u okviru neke druge tabele. Na kraju, kao vrlo suptilna promena, odloeno auriranje tabele u reimu Standard pripada prolosti. Tabela se sada automatski iri do prave veliine im se izbrie sadraj, tako da ne morate da klikete izvan tabele da biste prelazili u pogled Display.
Bolja integracija provere dokumenta

Kreiranje dokumenata koji dobro rade u ciljnim pretraivaima je krucijalna stvar kod razvoja za Web. Zbog toga ima i smisla da se osobine Dreamweavera vezane za proveru dokumenata nau na vanijem mestu. Tako je i bilo. Dreamweaver sada moe automatski da proverava kompatibilnost otvorenog dokumenta sa petraivaem, 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 razliitih podeavanja i kontrola, ukljuujui i poboljani interfejs za izbor pretraivaa. 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 pronau.
Integrisano rukovanje grafikom

Na svoju stranu ste ubacili neku sliku. Zamislite da to izgleda uasno. elite da promenite veliinu, promenite uzorak ili podesite boje i prazan prostor. Sada sve to moete da radite u okviru Dreamweavera i to preko poboljanog 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.
Poboljanja vezana za CSS

Ovo je vie od poboljanja. Osnovni pristup Dreamweavera da morate da pravite kod za svoje strane je promenjen, tako da CSS moete da ukljuujete 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 reim za ureivanje. Zato? Zato to su sve osobine za primenu stilova ve integrisane u Property Inspectoru. Vie 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 vie ne koristi stari nain sa HTML formatiranjem.
Razliite verzije Property Inspectora sada sadre vie informacija nego ikada pre. Text Property Inspector vie ne omoguava prelaz sa "obinog" na "CSS" reim. 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 miem i opciju Tag Inspector i da na taj nain primene stilove.
14 / 299
Dreamweaver MX 2004
Okvir za dijalog Page Properties ima novi interfejs preko kojeg se moe podeavati boja pozadine strane, podeavati izgled linka. Sve to se radi preko CSS stilova koji se automatski generiu.
Bilo koju od ovih automatizovnih CSS funkcija moete da iskljuite (ako odete u okvir za dijalog Preferences General i ne potvrdite opciju Use CSS Instead HTML Tags). Ali, zato biste to radili?
Poboljana podrka za CSS2

Da, i dalje moete da crtate nivoe (alat Draw Layer se nalazi na paleti Insert, u okviru grupe objekata Layout). Moete i da izaberete bilo koji element sa strane, da ga ubacite u oznaku div i da primenite korisniki definisanu klasu ili ID, zahvaljujui 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 potie od Netscapea vie se ne koristi kod kodiranja nivoa. Takoe je poboljan i pogled Design za elemente koji koriste CSS.
15 / 299
Dreamweaver MX 2004
Poboljanja vezana za kod

Za one koji vole da kodiraju ima takoe dobrih vesti. Ako u prozoru Code kliknete desnim tasterom mia, otvorie se pomoni meni iz kojeg moete 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 runo kodirate CSS stilove, na raspolaganju Vam stoje saveti vezani za CSS kod. U okviru za dijalog Find And Replace sada postoji vie opcija. Ovo i nije alat za kodiranje, ali je koristan kao pomo. Dreamweaver sada u potpunosti podrava prostore imena iz XML-a.
16 / 299
Dreamweaver MX 2004
Poboljanja vezana za rukovanje sajtom

U delu koji se odnosi na rukovanje sajtom, veliku novost predstavlja program Contribute. Ovaj novi program Macromedie omoguava obinim ljudima, koji nisu web dizajneri, da lako auriraju sadraj u unapred napravljenim ablonskim stranama, koje su napravljene preko Dreamweavera. Opcije Site definitions u Dreamweaveru MX 2004 imaju mogunost upravljanja sajtom Contribute, koordinacije sa korisnicima tog programa, ime se postie optimalna efikasnost kod auriranja. Sada su podrane i sigurne FTP veze (SFTP), preko kojih se pristupa udaljenim sajtovima i serverima za testiranje. ivot bez sajtova je laki, posebno u onim trenucima kada samo elite da brzo zavrite posao, a da pri tome ne morate da definiete sajt. Izaberite Computer, Desktop ili neku od stavki koje nisu vezane za sajtove i ponite da radite. Vie se nee pojavljivati pitanje Dreamweavera da li treba da slike prebaci u najbliu lokalnu fasciklu, i nee 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
Poboljanja vezana za rad sa dinamikim podacima

I u oblasti rada sa dinamikim podacima je dolo do poboljanja. Poboljano je testiranje performansi servera. Pojaana je podrka za ColdFusion i naravno, Dreamweaver MX 2004 podrava sve nove osobine ColdFusiona MX. Dinamiki objekti su sada loginije postavljeni, tako da ih je lake pronai na paleti Insert. Ako ste navikli da ih traite 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 veina prozora i panoa privena i tano postavljena u velikom prozoru koji pripada aplikaciji. Prvi put kada pokrenete program moete 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?
Poreenje 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 proiren, 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 poeli da radite, u bilo kom trenutku se moete predomisliti. Otvorite okvir za dijalog Preferences (Edit > Preferences), idite u kategoriju General i kliknite dugme Change Workspace. Moete 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 mogunost da program otvarate sa prijateljski nastrojenom poetnom stranom Start. Pored linkova koji vode u tutorijal za Dreamweaver, moete brzo pristupiti i sledeim stavkama: Otvaranje dokumenata sa kojima ste poslednji put radili (alternativa opciji File > Open iz menija). Kreiranje novih dokumenata razliitih 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, otvorie se okvir za dijalog New Document. Kreiranje novog sajta (alternativa za Site > Manage Sites, pa dugme New). Kreiranje novih dokumenata na bazi razliitih 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, otii ete na web sajt Macromedie. Ako izaberete dugme Dreamweaver Tutorial, otvorie se pomo iz programa. Ovo ste mogli da izaberete i iz menija Help. Ovde nema nieg to ne moete da uradite i na neki drugi nain, ali je dobro to su poslovi koje obavljate na poetku rada grupisani na jednom mestu, dostupni iz jednog centralnog interfejsa. Ako ne elite da se bavite poetnom stranom, izaberite opciju Dont Show Again. Ako elite da ukljuite ili iskljuite prikazivanje strane Start, otvorite okvir za dijalog Preferences > General (Edit > Preferences) i potvrdite ili nemojte porvrditi opciju Show Start Page. Ako je ukljueno 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 teko pronai. Mnogi poslovi u Dreamweaveru zahtevaju panoe.
Panoi i grupe panoa

Bilo koji pano preko menija Windows moe da se otvori ili proiri. Tu su prikazane i liste preica za otvaranje i zatvaranje panoa. Veina panoa Dreamweavera se nalaze u grupama, pri emu se pojedinanom panou pristupa preko kartice u prozoru grupe. (Tehniki govorei, svi panoi se nalaze u grupama, ali neki, kao to je CSS pano, se nalaze sami u grupi.) Grupe su logiki organizovane, tako da intuitivno moete da zakljuite koji se pano gde nalazi. Zaglavlja panoa i grupa imaju i meni sa opcijama, preko kojeg moete da obavljate poslove vezane za panoe. Na slici su prikazane tipine grupe panoa sa istaknutim osobinama.
22 / 299
Dreamweaver MX 2004
Ako elite da proirite ili samete grupu panoa, kliknite strelicu za saimanje ili proirivanje, koja se nalazi u zaglavlju panoa. Ako je potrebno, prozor panoa se iri da bi prihvatio proirene panoe. Ako elite da proirite grupu panoa i promenite joj veliinu, moete 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 izmeu njih. Kursor e dobiti oblik dvosmerne strelice. Tada uhvatite granicu i promenite veliinu. Ako elite da zatvorite grupu panoa, otvorite meni sa opcijama i izaberite Close Panel Group. Grupu panoa moete ponovo da otvorite ako neki od panoa izaberete iz menija Window.
Prikazivanje i sakrivanje
Ponekad proirivanje ili saimanje nije dovoljno. Moda elite da prikaete samo one stvari koje su preko potrebne u dokumentu. Ako elite da podesite prostor koji zauzima privreni pano, prevucite vertikalnu liniju koja odvaja taj pano od ostalog dela radnog prostora. Ako elite da potpuno iskljuite ili ukljuite pano, kliknite trougao na vertikalnoj liniji.
23 / 299
Dreamweaver MX 2004
Ako elite da sve panoe ukljuite ili iskljuite izaberite Window > Hide Panels ili Window > Show Panels, ili samo pritisnite F4 da biste ih ukljuili ili iskljuili.
Privrivanje i odvezivanje panoa

Ponekad neete eleti da radite sa vezanim panoima. Moda ete zakljuiti da je neki pano (kao to je pano Reference) teko postaviti na pravo mesto. Moda imate dva monitora i elite da se svi panoi nalaze na monitoru 1, a da se na monitoru 2 prikazuje samo prozor Document. Moda ste samo navikli da imate slobodne panoe. Niste obavezni da ih vezujete. Ivica ruice koja se nalazi sa leve strane zaglavlja panoa omoguava da vezujete i odvezuejte grupe. Ako elite da otkaite pano, uhvatite ruicu 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 veete panoe, uhvatite ruicu i prevucite grupu do drugih vezanih panoa, sve dok se ne pojavi tanka crna linija, koja ukazuje na mesto postavljanja. Grupu moete da veete na potpuno drugom mestu u odnosu na ono na kome se prethodno nalazila. Korisnici mogu horizontalne panoe (kao to je Results) da veu 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 logiki grupisane i intuitivne, ali ta ako to nije sluaj? ta ako zakljuite da koristite samo tri ili etiri panoa, i ne elite da stalno otvarate ili zatvarate te grupe? Moete da grupiete, 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 odreeni 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. Pronaite 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 pronaete 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 panju na to da se Tag Inspector ne moe prebacivati u grupe. Sada slobodno moete da zatvorite ili skupite sve druge grupe panoa, jer znate da su Vai 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 otkaiti, ali se ne mogu grupisati sa drugim panoima. Paleta Insert se moe prikazivati u jednom od dva reima. To su reim meni (podrazumevani) ili reim sa karticama (stil Dreamweaver MX). Prelaz iz jednog u drugi reim se moe uraditi ako se izabere Show as Tabs iz padajue liste sa opcijama za tu grupu. Ovo vai ako se trenutno nalazite u reimu sa menijima, a ako ste u reimu 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 moe smanjiti kao i bilo koji drugi pano. I u radnom prostoru Macintosh i Windows verzije, Property Inspector se moe smanjiti za pola, tako da se prikazuje samo njegova gornja polovina. Ovo se radi tako to se izabere ikona trouglia u gornjem levom uglu.
25 / 299
Dreamweaver MX 2004
Rad sa prozorom Document

Bez obzira na stil koji koristite u radu, verovatno ete najvie vremena provoditi u radu sa prozorom Document. U pitanju je intuitivni interfejs, sa mnotvom resursa, koji se kao i mnoge druge stvari u Dreamweaveru moe podeavati u skladu sa Vaim eljama.
Vezivanje i odvezivanje
U integrisanom radnom prostoru, prozor Document moe biti privren ili ne. Ovaj prozor moe da zauzme onaj deo prostora koji mu dodelite u centru, ili ako imate dovoljno veliki monitor (ili dva monitora), moe 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 omoguava da lako prelazite iz jednog u drugi otvoreni prozor dokumenta. Ako elite da veete ili otkaite prozor Document, moete 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 omoguava da ih vidite na razliite naine. Rad sa prikazima Code i Design Osnovni izbor koji inite prilikom rada sa dokumentima je da li elite da radite u okruenju za pisanje koda ili u grafikom okruenju. Prikaz Design (View > Design) omoguava da stranu vidite priblino onako kako bi ona izgledala u pretraivau. lako ovo nije prikaz tipa WYSWYG (ono to vidi je ono to e dobiti), ipak je omogueno da sa svim elementima na strani radite u grafikom okruenju. Elementi strane koji nisu grafiki, kao to su komentari, zaglavlje i skriptovi, mogu da se vide kao ikonice. Ovo se postie ako se izabere meni View i podmeni Visual Aids > Iconic Form. Ostala vizuelna pomo koju moete dobiti iz ovog menija je: Rulers (View > Rulers) (lenjiri) - Mogue 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 slui i za promenu jedinica (iako su nabolji pikseli), kao i promenu poetka odakle se vri merenje. Grid (View > Grid) (mrea) - Mrea koja moe da se podeava. Ona moe da se prikae iza sadraja dokumenta, ime je olakano ravnanje elemenata na strani. Podmeni Grid iz menija View omoguava prikazivanje mree, ukljuivanje skokovitog kretanja kursora samo izmeu taaka mree, kao i promenu veliine i izgleda mree. Tracing Image (View > Tracing Image) (praenje slike) - Ispod sadraja u prozoru Document se prikazuje GIF, JPG ili PNG datoteka, koja slui prilikom rasporeivanja elemenata. Komande iz podmenija Tracing, menija View slue za uitavanje slike i njeno relativno postavljanje na strani. Preko okvira za dijalog Page Properties (Modify > Page Properties) moete podeavati 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 takaste linije. Ovo je u cilju pomoi kod ureivanja. 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 naina za prikazivanje tabela. Oni se koriste samo kod ureivanja . Image maps (View > Visual Aids > Image maps) - Vrue take slika su prikazane kao delimino providni oblici. Ovo se koristi samo u cilju ureivanja slika Invisible elements (View > Visual Aids > Invisible Elements) (nevidljivi elementi) - Bilo koji deo koda koji se inae ne bi video u pogledu Design se prikazuje kao ikona. Preko kategorije Preferences/Invisible Elements moete 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 sutini predstavlja ugraeni editor teksta. Neke funkcije koje su ranije postojale, kao to su dodavanje ponaanja i crtanje nivoa vie 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 moete da vidite i prikaz Design i prikaz Code. Mnogi ljudi smatraju da je ovaj pogled najkorisniji, poto im omoguava da prilikom projektovanja strane tano vide gde se nalaze u kodu. Ovaj prikaz je koristan kada radite sa sloenim poslovima vezanim za kodiranje, kao to je izbor odreene vrste ili kolone u ugnjeenoj tabeli. Podrazumevano se prikaz Code vidi u gornjem delu prozora. Ako elite, moete ga prebaciti u donji deo i to preko komande View > Design View on Top.
27 / 299
Dreamweaver MX 2004
Prikazi Code i Design su vie od obinih pogleda. Oni predstavljaju razliite naine rada. U zavisnosti od prikaza, u panoima se prikazuju razliite opcije, druge komande su izbaene. Kada su vidljiva oba prikaza, fokus je uvek u jednom od njih, odnosno Dreamweaver smatra da je to aktivan prozor. Ako elite da odreeni pogled dobije fokus, kliknite u tu polovinu prozora. Moete 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 oznaenim 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 oznaiti mesta za imena stavki, njihove cene i opise. Pogled Live Data omoguava da Dreamweaver zameni ove oznaene lokacije stvarnim informacijama iz baze podataka, tako da moete bolje da vidite kako e Vaa strana stvarno izgledati.
Statusna linija
Na dnu prozora Document se nalazi statusna linija. Tu se prikazuju informacije o samoj strani. Odatle moete i da samo jednim klikom pristupite pogledima Design i Code.
28 / 299
Dreamweaver MX 2004
Veliina prozora Inidikator veliine prozora ukazuje kolika je trenutna irina i visina "ivog" dela prozora Document. (iv deo je deo prozora u kome se trenutno nalazi neki sadraj, to je suprotno paletama i statusnim linijama, koji se ponekad nazivaju "hromiranim" elementima). Ovo mogu biti vane informacije, ako pokuavate da napravite stranu koja e se uklopiti u najee veliine prozora pretraivaa. Indikator veliine prozora prikazuje veliinu 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 veliine 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 poinju panoi). Indikator veliine prozora sadri i padajui meni koji moe brzo da promeni veliinu prozora Document. Mogu se izabrati neke od unapred podeenih standardnih veliina. Te standradne veliine odgovaraju standardnim veliinama prozora pretraivaa. Ovo moete da koristite da biste brzo proverili kako se Vaa strana uklapa u neke opte veliine prozora. Niste ogranieni na upotrebu samo onih veliina koje je dao Dreamweaver. Ako, na primer, pravite dizajn za intranet i znate da e svi pretraivai biti podeeni na rezoluciju 600 x 300, te dimenzije moete da dodate u padajui meni. Evo kako se to radi: 1. Iz padajueg menija indikatora veliine prozora izaberite opciju Edit Size. Otvorie se kategorija Status Bar iz okvira za dijalog Dreamweaver Preferences. 2. U okviru za dijalog Preferences promenite veliinu prozora. Ako elite da promenite neku od postojeih dimenzija, izaberite je i unesite novi broj. Ako elite da zadate novu veliinu, kliknite u prostor ispod postojeih stavki, da biste ga aktivirali i unesite novu dimenziju. Nova stavka moe da ima irinu, visinu ili obe vrednosti. 3. Nakon to zavrite, kliknite OK da biste zatvorili okvir za dijalog Preferences. Od sada e se ta stavka prikazivati u padajuem meniju indikatora za veliinu prozora.
29 / 299
Dreamweaver MX 2004
Indikator koji pokazuje veliinu dokumenta i vreme prebacivanja Ovaj indikator prikazuje dve informacije koje su medusobno povezane. To su veliina tekueg dokumenta i svih ubaenih sadraja, 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 rauna prilikom kreiranja web strana. Indikator veliine datoteke (sa leve strane) izraunava veliinu tekue HTML datoteke, zajedno sa veliinom slika, Flash animacija ili nekih drugih datoteka koje treba preuzeti pre nego to se strana prikae u pretraivau. Ova vrednost se zaokruuje na najblii kilobajt. Procenjeno vreme prebacivanja se odnosi na vreme prebacivanja preko zadate brzine mree, zaokrueno na sekundu. Na primer, ako je Vaa strana HTML datoteka veliine 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 sluaj e se prikazati vrednost 28Kb sec. Podrazumevana brzina koja se koristi za izraunavanje vremena prebacivanja je 28.8 Kbps (kilobita po sekundi). Ovu brzinu moete da promenite u skladu sa onom brzinom koju predviate u ciljnom okruenju. 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 sledee: 1. Kliknite indikator veliine prozora i iz padajueg menija izaberite Edit Sizes. Otvorie 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 zavrite, kliknite OK da biste zatvorili okvir za dijalog. Na statusnoj liniji e se sada prikazati vreme prebacivanja, koje se izraunava na osnovu veliine dokumenta i nove brzine prenosa. Tag Selector Tag Selector omoguava da tokom rada u pogledu Design stalno na oku imate i kod. Ova osobina koristi injenicu da se HTML strane prave kao niz meusobno ugnjeenih oznaka. Tag Selector sve vreme ukazuje gde je taka umetanja ili ta je izabrano u odnosu na hijerarhiju oznaka koje ine stranu. Poto se u pogledu Design prikazuje samo vidljivi deo oznake body, to je oznaka body uvek krajnja leva. Ako je taka umetanja u okviru oznake hl, Tag Selector prikazuje strukturu: <body> <h1>
30 / 299
Dreamweaver MX 2004
Ako je taka umetanja u eliji tabele, u vrsti tabele u samoj tabeli, Tag Selector prikazuje: <body> <table> <tr> <td> Ako je izabrana cela oznaka i njen sadraj, Tag Selector tu oznaku prikazuje masnim slovima. Najbolje je to to Tag Selector moete da koristite za selektovanje oznaka. Kliknite neku oznaku koja je tu prikazana i u pogledu Design e ta oznaka i njen sadraj biti selektovani. Ako desnim tasterom mia kliknete Tag Selector, otvorie se kontekstualni meni, u kome se nalaze stavke vezane za rad sa oznakama, kao to su izbacivanje oznake, dok njen sadraj ostaje (Remove Tag), primena CSS stila na oznaku (Set Class) ili primena ID atributa (Set ID).
Palete
U Dreamweaveru postoje razliite palete koje se mogu prikazati na vrhu prozora Document. Njih moete koristiti kao pomo u radu. Svim paletama se moe pristupiti preko podmenija View > Toolbars ili ako desnim tasterom mia kliknete prazan deo palete prozora Document.
Paleta Standard
U skladu sa trendom koji postoji kod veine programa, na paleti Standard se prikazuju komande iz menija File i Edit koje se najvie koriste. Paleta Standard se moe ukljuiti i iskljuiti preko opcije View > Toolbars > Standard. Paleta Standard moe da se otkai i da se postavi u centar prozora Document. Ponovo ete je privrstiti 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 mia moete da promenite poglede na dokument, da pogledate kako to izgleda u pretraivau, da proverite da li je sve kako treba. Paleta Document moe da se iskljui i ukljui ako izaberete View > Toolbars > Document.
Pomo
Ako imate tekoa u radu sa svojim stranama, ili sa samim Dreamweaverom, pomo moete dobiti na razliitim mestima. U okviru pomoi koja postoji u Dreamweaveru, ili preko panoa Rreference, i na kraju, u centru za podrku na sajtu firme Macromedia ete verovatno nai odgovor na pitanje koje Vas zanima. U ovom odeljku emo objasniti opcije za pruanje pomoi.
General Assistance: Pano Reference

Da li je oko Vas u toku rada nareana gomila literature? Ako je tako, onda e Vam pano Reference postati najbolji prijatelj. U ovom panou se nalazi kompletan tekst sa nekoliko referentnih vodia sa Weba.
31 / 299
Dreamweaver MX 2004
Pano Reference moete koristiti za pretraivanje informacija na svoj nain, ili ga moete koristiti zajedno sa prozorom Document, da biste dobili pomo vezanu za neki sadraj. Ako elite da dobijete pomo vezanu za neku oznaku ili skript na kojima trenutno radite, treba da uradite sledee: 1. Kliknite unutar elementa za koji elite da dobijete referencu. 2. Izaberite Windows > Reference. 3. Otvorie se pano Reference i u njemu opis i primer sintakse za izabranu stavku.
Pomo Dreamweavera
Dreamweaver ima svoju pomo koja objanjava osnovne naine upotrebe svakog elementa programa. Ovu pomo treba koristiti za sva pitanja koja se odnose na osobine Dreamweavera. Pomoi Dreamweavera ete pristupiti ako izaberete Help > Using Dreamweaver. Otvorie se aplikacija za pomo koja postoji na Vaem 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 veina korisnika najee praviti. Sa verzijom Dreamweaver MX 2004 moete da pravite bilo koju vrstu dokumenta koji je vezan za Web. Svi dokumenti mogu da se kreiraju, menjaju, pa ak i grafiki 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 podrku, kao to su CSS i JS dokumenti, kao i razliiti drugi dokumenti, kao to su XML, XHTML i WML. Usled ovih novih mogunosti, kreiranje dokumenta u Dreamweaveru je i dalje osnovna stvar, ali vie ne tako jednostavna. Okvir za dijalog New Document omoguava da dokumente kreirate od poetka, kao i da ih uvozite iz nekih drugih izvora.
Okvir za dijalog New Document

Kada izaberete opciju File > New, ili pritisnete Ctrl+N, otvorie se okvir za dijalog New Document. U ovom okviru za dijalog postoji mnotvo opcija, preko kojih moete da kreirate dokumenat bilo koje vrste. Tipovi dokumenata koji se kreiraju Vei deo okvira za dijalog zauzimaju opcije za kreiranje razliitih tipova dokumenata. U krajnjoj levoj koloni su prikazane kategorije sa osnovnim tipovima dokumenata. To su: Basic, Dynamic, Template, itd. Veinom ovih tipova se neemo 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.
Poto u okviru za dijalog postoji tako mnogo opcija, sa kojima je teko snai se, postoji i deo sa opisom svake opcije, koji se nalazi u donjem desnom uglu. Iz druge kolone izaberite neki tip datoteke i proitajte
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 moe 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 ureuju u prozoru Code. Pripremljene strane Dreamweaver dolazi sa nizom unapred pripremljenih rasporeda, koje moete dalje da prilagoavate svojim potrebama. Ovi rasporedi se nalaze u kategorijama Page Designs i Page Designs (Accessible). Dreamweaver takoe ima i niz unapred definisanih CSS dokumenata, koji su spremni da se primene u Vaim dokumentima, tako da moete brzo da formatirate tekst i odgovarajui raspored. Ako elite da kreirate web stranu na osnovu neke od ovih pripremljenih HTML strana, izaberite odgovarajuu stavku iz neke od kategorija Page Design i kliknite OK. Dreamweaver e napraviti novi dokument i u njemu postaviti mesta za ubacivanje sadraja. Primenie i izabrano formatiranje. Upamtite ovaj dokument kao deo svog web sajta i njegov sadraj prilagodite svojim potrebama. Na taj nain moete brzo da napravite novu stranu.
Ako na osnovu stavki koje birate iz ovog okvira za dijalog napravite CSS stranu, neete dobiti stranu koju moete da prikaete u svom pretraivau. CSS datoteke slue za podrku HTML stranama i drugim dokumentima. Ako elite da na osnovu neke od unapred pripremljenih strana sa CSS-om kreirate novu, izaberite odgovarajuu stavku iz kategorije CSS i kliknite OK. Dreamweaver e kreirati CSS datoteku (nee je prikazati u prikazu Design), koja sadri 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 pretraivau moe prikazati, u okviru za dijalog imate opciju koja Vas pita da li elite da svoj novi dokument uinite saglasnim (kompatibilnim) sa XHTML-om. XHTML je najnovija varijanta HTML-a, koja e eventualno zameniti HTML. XHTML se zasniva na XML-u. Sintaktike razlike u odnosu na HTML su veoma male, ali je pridravanje pravila mnogo vre. Pretraivai bi u budunosti trebalo da za kreiranje ispravnih dokumenata zahtevaju XHTML. Ako Dreamweaveru kaete da novi dokument treba da bude kompatibilan sa XHTML-om, dobiete malo drugaiju sintaksu u odnosu na uobiajenu.
Novo podeavanje 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 iskljuena. Ako elite da promenite ove i druge podrazumevane vrednosti, kliknite dugme Preferences, koje se nalazi na dnu okvira za dijalog New Document. Otvorie se okvir za dijalog Preferences > New Document. Ovo je standardan okvir za dijalog Preferences koji se koristi svuda u Dreamweaveru. Istom okviru za dijalog moete 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 izvuete najvie? Morate biti sigurni da su ispravni. Morate biti sigurni da ispravno rade u svim pretraivaima, koje mislite da e Vai posetioci koristiti. Na kraju morate biti sigurni da su strane dostupne.
Provera ispravnosti strane

Provera ispravnosti je vaan 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 prikaete u pretraivau. Jedan od razloga to su dananji pretraivai tako glomazni je da su programirani za rad sa svim vrstama neispravnog koda, pa ak pokuavaju 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 pretraiva pokua da je prikae. Strane koje su neispravne ne bi trebalo da se prikazuju. Pretraivai bi bili manji poto bi prikazivali samo ispravne strane. Bez obzira da li ste poetnik ili iskusan profesionalac u web dizajnu, proveru ispravnosti za sada moete zanemariti. Nijedan od pretraivaa ne radi ovu proveru, za sada. Ali verovatno u budunosti hoe.
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. Prikazae se kartica Validation i u njoj izvetaj o dokumentu. Moete i da proverite tekui dokument ili tekui 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 naina provere Provera ispravnosti se odnosi na proveru dokumenta u odnosu na standarde. Postoje razliiti 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. Moete 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 (ukljuujui i XHTML), onda je provera vrlo bitna. Pretraivai (i drugi interpreteri) generalno nee obraivati 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 odreenom pretraivau

U redu, Vae strane su ispravne, ali zato u pretraivau Vaih korisnika ne rade kako treba? Pretraivai imaju svoja podeavanja i ne slau se uvek sa standardom. Veina web dizajnera na kraju zavri tako to
37 / 299
Dreamweaver MX 2004
upamti ta podeavanja i radi sa njima. Ipak, ne moemo svi da pamtimo sve. Dreamweaver ima bazu podataka sa informacijama o tome koji pretraiva ta koristi. Automatska provera Provera prikazivanja u ciljnom pretraivau je tako bitna da Dreamweaver automatski proverava svaku stranu im je otvori. Na paleti Document se istovremeno prikazuje ikona Browser Target Check. Ako dokument uspeno proe sve provere, prikazae se ikona OK, a ako to nije sluaj, prikazae se ikona za alarm. Ako elite da pogledate listu problema, kliknite ikonu Browser Target Check i izaberite opciju Show All Errors. Moete 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 podrane u nekom od ciljnih pretraivaa, ali na strani nee dovesti do problema. Sve stavke pored koji se nalazi crveni znak stop su greke, tako da se u pretraivau moe dobiti neprijatno iznenaenje.
Manuelna provera Pored automatske provere, proveru dokumenta ili sajta moete da vrite 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 vie dokumenata ili ceo sajt, otvorite prozor Results (Window > Results), preite na karticu Target Browser Check i kliknite zeleno dugme. Pomou padajueg menija iz prozora Results moete da prikaete alarme vezane za neki dokument ili ceo sajt. Definisanje pretraivaa za koje se vri provera Provera prikazivanja strane u pretraivaima ima znaaja samo ako definiete koji su to pretraivai 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 pretraivae i verzije koje elite da proveravate. Nakon toga kliknite OK, da biste zatvorili ovaj okvir za dijalog.
Dostupnost Vaih strana

Vae strane izgledaju sjajno u veini pretraivaa, prole 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, slunim ili nekim drugim nedostacima. Tu spadaju ljudi koji preko itaa 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 razliiti standardi koji odreuju da li su web strane dostupne. Najvaniji od njih su: Section 508 U pitanju je federalni dekret koji svi sajtovi koje koriste vladini slubenici, kao i sajtovi koji distribuiraju informacije vezane za vladu moraju potovati. Premda se ovaj standard primenjuje samo na sajtove vezane za federalnu dravu, mnoge vlade niih nivoa su ih prihvatile i za sajtove pod njihovom nadlenosti. Mnoge korporacije su takoe 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. Pomou panoa Reference moete da nauite vie o standardima vezanim za dostupnost. Otvorite ovaj pano i iz padajueg menija Book izaberite opciju UsableNew Accessibility Reference. Sada na raspolaganju imate sve vrste informacija o razliitim standardima i nainu na koji se oni primenjuju. Opcije Dreamweavera vezane za dostupnost
38 / 299
Dreamweaver MX 2004
Dreamweaver MX 2004 omoguava da brzo pristupite svakom od atributa vezanim za dostupnost strane. Ako elite da ukljuite atribute dostupnosti, izaberite Edit > Preferences i u okviru za dijalog izaberite kategoriju Accessibility. Opcije koje su date u listi predstavljaju razliite 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 pojedinane elemente strana moete vie saznati u posebnim odeljcima, onda kada budemo govorili o tim elementima).
Provera dostupnosti Kao to moete da proverite ispravnost koda i podrku pretraivaa, moete i da proverite dostupnost svojih strana i sajtova. U Dreamweaveru postoje razliiti alati, koji su upravo tome namenjeni. Ako elite da dobijete izvetaj u vezi dostupnosti tekueg sajta, treba da uradite sledee: 1. Izaberite Site > Reports. 2. Kada se otvori okvir za dijalog Site Reports, izaberite Accessibilty. Moete izabrati opciju da se izvetaj napravi za tekui dokument, ili za izabrane datoteke sa sajta. 3. Pre nego to napravite izvetaj, kliknite dugme Report Settings i izaberite standard prema kojem elite da se provera vri. Kliknite OK da biste zatvorili okvir za dijalog. 4. Klikntie Run da biste napravili izvetaj. Dreamweaver e pregledati Vae strane i rezultate prikazati u prozoru Results.
39 / 299
Dreamweaver MX 2004
4. Rad sa tekstom
Osnove u vezi teksta
Na web strani ne moete da dobijete mnogo vie 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 nauite kako HTML radi sa tekstom i ta je to to moe poi naopako.
Tekst u pretraivau
Ako ste ikada pravili neku web stranu, onda znate osnovnu injenicu. HTML je strukturni markup jezik. Njegov osnovni zadatak je da opie logiku strukturu elemenata na strani, kao to je i tekst, tako da logika strane bude jasna svakoj osobi ili ureaju 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 rei u okviru bloka, ime se te rei istiu u odnosu na ostatak teksta.
Tekst u Dreamweaveru
Tekst se u Dreamweaveru kreira kucanjem ili prebacivanjem iz nekog drugog programa. Funkcije za kucanje, ureivanje i selektovanje teksta su iste kao i u bilo kom programu za ureivanje teksta. Provera pravopisa (Text > Check Spelling) omoguava da proverite pravopis za izabrani tekst ili ceo dokument. Provera se vri na osnovu renika koji postoji u Dreamweaveru, ali i prema Vaem sopstvenom reniku. HTML strukturu ete na tekst primeniti preko Text Property Inspectora, tekstualnih objekata sa palete Insert, kao i razliitih 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 vie volite da kucate u nekom drugom programu, onda taj tekst treba efikasno prebaciti u Dreamweaver. Sreom, postoji nekoliko mehanizama preko kojih se to moe uraditi.
Prednosti i nedostaci kopiranja iz drugih programa

Tekst se iz drugog programa moe lako iskopirati u Dreamweaver. Ipak, sebi ete olakati 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 odgovarajue 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. Nee 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 vri iz koda koji je specifian za neki sistem za obradu teksta, na opte HTML oznake. Ako se nalazite u prikazu Code, onda komanda Edit > Paste zadrava 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 sledee: <b>Zdravo, kako ste</b> Pretraiva e prikazati uglaste zagrade, ali tekst nee 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 pretraivau 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 reima, ova komanda prilikom prebacivanja teksta ne vri 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 vae 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, ukljuuju i tekst strane.
Prebacivanje teksta (i drugih objekata) iz Worda i Excela

Od verzije Dreamweaver 2004 lako moete da ak i sloeni sadraj prebacite iz Worda ili Excela u Dreamweaver. Tom prilikom moete da zadrite vei deo formatiranja i da dobijete pristojan HTML kod. Kopiranje i postavljanje u dokument Iskopirajte neto iz Worda ili Excela, a onda u prozoru Design u Dreamweaveru izaberite komandu Edit > Paste or Edit > Paste Text. To je sve. Sadraj 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 ubaen u klasu iz CSS-a, po imenu MsoNormal, a to je ubaeno u interni stylesheet dokumenta iz Dreamweavera. Pasusi koji su imali neki od stilova za naslove iz Worda (Heading 1, Heading 2 itd.) dolaze izmeu HTML oznaka za naslove (hl, h2, itd.), sa dodatnim unutranjim stilovima, koji prenose i format. Tabele Tabele iz Worda, kao i unakrsne tabele iz Excela se u Dreamweaver prebacuju kao HTML tabele. Formatiranje se zadrava 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 moete 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. Preite u prikaz Design (komande ne funkcioniu u prozoru Code). 3. Izaberite File > Import > Word Document ili File > Import Excel Document. Pronaite datoteku koju elite da ubacite i kliknite OK da biste zatvorili okvir za dijalog. Dobili ste sadraj u HTML-u koji je lepo formatiran. Treba da imate na umu da ponekad, dokumenti iz Worda mogu biti suvie 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 dugaak dokument iz Worda, treba da ga podelite na nekoliko delova i da svaki deo ubacite posebno. Moete 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 ponaa kao celina, u Dreamweaveru morate da dodate linkove na svaki od ubaenih delova. Rad sa HTML tekstom iz Worda Microsoft Word moe da napravi svoj HTML tekst. Za to se koristi komande Save as Web Page ili Save as HTML. Na alost, Word ne moe da napravi preterano dobar HTML tekst. Kod koji on pravi je meavina HTML-a i XML-a, sa mnotvom oznaka tipa font ili stilova iz CSS-a, kao i bezbroj oznaka meta. Ovim se web strana ini nepotrebno velikom, usporava se njeno uitavanje, a dalje promene postaju teko izvodljive. Ako imate mogunost 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, moda neete imati kontrolu nad tim delom procesa. Treba da u Wordu, pre izvoza, paljivo podesite opcije, a da kasnije upotrebite mogunosti Dreamweavera i poboljate situaciju. Priprema dokumenta u Wordu U Wordu moete 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 podeene na pravi nain. U zavisnosti od verzije Worda, ove opcije se nalaze na razliitim mestima. Evo koje opcije treba da potraite: Podesite ciljni pretraiva na opciju koja nije samo Internet Explorer. Prilino dobar izbor je Internet Explorer 4.0 ili Netscape Navigator 4.0. Iskljuite sve opcije koje nisu podrane u oba pretraivaa. Za formatiranje fontova treba da koristite CSS. (Ovim se izbegavaju brojne oznake fonta koje se ubacuju u dokument.) Za grafiki format nemojte koristiti format PNG. Kodiranje podesite na Unicode ili Western European (ISO). Ovo je posebno vano, jer Word podrazumevano strane kodira u skladu sa platformom koja se koristi. Specijalni karakteri mogu da dobiju format koji je specifian za Windows ili Mac i da kasnije u pretraivaima izazovu probleme. Ako u Vaem 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 naete, postoje dve osnovne mogunosti. To su da ceo sadraj upamtite kao web datoteku, ili da upamtite preienu ili verziju samo za itanje. U emu je razlika? Ako upamtite ceo sadraj, Word ubacuje sve vrste koda, tako da kasnije moete 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. Preiavanje 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. Otvorie se okvir za dijalog Clean Up Word.
43 / 299
Dreamweaver MX 2004
Opcije koje se nalaze na kartici Detailed moete da koristite za tano definisanje promena koje elite da se ukljue u konverziju. Nakon to ste izabrali odreene stavke, kliknite OK. Dreamweaver e obraditi datoteku, a u prozoru Document e se prikazati preiena verzija strane. Nakon preiavanja, u kodu mogu i dalje da postoje oznake i atributi koje ne elite. Konkretno, moe se desiti da postoji interni style sheet, i da on sadri puno klasa po imenu Sectionl, Section2, itd. Ove klase se primenjuju na oznake div, koje okruuju telo strane. Na celoj strani se mogu nai elementi koji su dodeljeni klasi Normal, iako ta klasa nije interno definisana, ili nije u style sheetu. Malo se zabavite pronalaenjem i zamenom ovih stavki. Moete da uradite sledee: 1. Otvorite okvir za dijalog Find and Replace (Edit > Find and replace). 2. Oblast pretraivanja (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 brie, a onda pritisnite dugme da biste obrisali druge kriterijume pretraivanja. Iz padajueg menija Action izaberite opciju Strip tag. Ovim se oznake div uklanjaju, a da se ne brie njihov sadraj. Na slici je prikazan okvir za dijalog Find and Replace, sa podeenim ovim opcijama. Kliknite dugme Replace All da biste zavrili pretraivanje.
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 zavrite, zatvorite okvir za dijalog Find and Replace. Ako elite da izbacite interne CSS stilove, moete da pretraujete sa nekom drugom opcijom, ili moete 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 veina ovih programa moe to izvesti kao HTML tekst, kod koji se pravi nije ba najistiji. Ako je tabela u Excelu ili Wordu, moete 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. U originalnom programu (na primer, program za rad za unakrsna izraunavanja), zapamtite datoteku, ili je izvezite, ali u formatu sa nekim delimiterom. To znai da program treba da napravi tekstualnu datoteku, kod koje neki karakter, obino zarez ili tabulator, odvajaju sadraj 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 prikau tabelarni podaci. Sa palete Layout Insert izaberite opciju Tabular Data, ili izaberite File > Import > Tabular Data ili Insert > Table Objects > Import Tabular Data. Otvorie se okvir za dijalog u kojem moete da izaberete tekstualnu datoteku koja se uvozi, da definiete karakter koji se koristi kao delimiter, i da tabeli dodelite formatiranje kakvo elite. (Ovo kasnije uvek moete 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 sadri tekst iz datoteke, deli je na elije i vrste, na bazi delimitera. Ovo je prikazano na slici.
2.
45 / 299
Dreamweaver MX 2004
Nakon to Dreamweaver napravi tabelu koja sadri uvezene podatke, ona se ponaa kao i bilo koja druga tabela, koju biste napravili u Dreamweaveru. Nema dinamike veze sa tekstom koji ste uvezli, tako da se nita loe ne moe desiti ako tu datoteku obriete ili premestite. Prilikom upotrebe ove komande treba biti oprezan, jer Dreamweaver ne moe da prepozna spajane elije. Ako se u originalnoj unakrsnoj tabeli ili obinoj tabeli nalaze takve elije, tabela koju e Dreamweaver da napravi nee imati pravilnu strukturu. Problem moete reiti ako runo podesite vrednosti rowspan i colspan za te elije.
Definisanje strukture teksta

Kao web dizajner, sa tekstom treba da radite to je mogue efikasnije. To znai 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 sadraj. Tekst je U HTML-U struktuiran preko oznaka koje ukazuju na logiku namenu svakog elementa teksta (naslova, podnaslova, pasusa, listi, itd.). To je sadraj. Forma je nain na koji se tekst predstavlja, tako da njegova logika struktura bude oigledna. Forma se moe kontrolisati preko pretraivaa, itaa ekrana, ili nekog dragog ureaja. Na nju se moe uticati preko CSS-a, koji ukazuje kako se moe rukovati nekim logikim elementima. Zato je bitna ova razlika? Najpre je u pitanju efikasnost. Podeavanje svakog pojedinanog naslova na web sajtu na odreenu veliinu, font ili boju (za sve ovo se koristi termin markup za prezentaciju) je dosadno i teko za kasnije auriranje. Mnogo je efikasnije da svaki naslov oznaite kao naslov i da onda pretraivau 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 ukljuuju 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 izraavanje strukture dokumenta. Ovi elementi treba da se koriste prema specifikaciji. 3.6. Liste i stavke u njima treba oznaiti na pravi nain. 3.7. Navodnike treba koristiti na pravim mestima. Nemojte koristiti oznake navoenja (kao to su oznake blockquote, na primer) za formatiranje tipa uvlaenja. 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 sline kontrole u programima za obradu teksta, ali nisu. Kada se ove opcije primene na obine pasuse, koji nisu stavke u definisanoj listi, dodaju se oznake blockquote. Kada se primene na stavke u ureenoj ili neureenoj listi, onda se kreiraju podkategorije. To je pravi nain kako treba da se koriste. Ako elite da uvuete neki pasus, onda preko CSS-a treba da kreirate stil za uvueni pasus. Ako elite da stavke u listi budu uvuene vie nego to je uobiajeno, 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 proirenje prethodne teze. Kada primenjujete oznaku treba da razmiljate strukturno, a kada primenjujete style sheet, treba da razmiljate kao o prezentaciji. Najvii nivo naslova u dokumentu treba da bude h1, a ne h2 ili h3. Ako oznaka h1 pravi tekst koji je suvie velik za Va ukus, preko CSS-a moete da promenite prezentaciju, a ne da promenite nain upotrebe. Formatiranje listi treba koristiti samo za liste, ne za uvlaenje. I tako dalje. Neki od posetilaca Vaeg sajta e Vam biti zahvalni. Zahvaliete i sami sebi, kada kasnije budete odravali taj dokument. Kolege e Vam biti zahvalne kada doe trenutak da treba aurirati dokument, a Vi budete na odmoru. Ispravka teksta sa loom strukturom ta ako nasledite stranu koja naruava pravila? U Dreamweaveru postoje razliiti alati koji mogu da pomognu u reavanju ovih problema. Brisanje oznaka font Upotreba oznaka font nikad nije bila dobra ideja. Ako elite da uklonite te oznake, treba da uradite sledee: 1. Postavite kursor unutar teksta koji je formatiran pomou oznake font. 2. U Tag Selectoru pronaite oznaku font i kliknite je desnim tasterom mia. Iz pomonog menija izaberite opciju Remove Tag. Ovim e se oznaka font ukloniti, a sam tekst nee biti naruen.
Ako elite da brzo uklonite sve oznake font iz jednog ili vie dokumenata, moete da upotrebite pretraivanje 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 pretraivanja na ono to elite. 3. Tip pretraivanja (search type) podesite na Specific Tag. U polju Search Field unesite font. Kliknite dugme minus ( - ) da biste uklonili sve druge opcije pretraivanja. 4. Iz padajueg 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 izvrili pretraivanje. 6. Kada zavrite, 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 takoe moete preko pretraivanja Specific Tag zameniti oznakama strong i em. 1. Izaberite Edit > Find and Replace. 2. Kada se otvori okvir za dijalog, podesite oblast pretraivania onako kako elite. 3. Tip pretraivanja podesite na Specific Tag. U polju Search Field unesite b. Kliknite dugme minus ( - ) da bste uklonili sve druge opcije pretraivanja. 4. Iz padajueg menija Action izaberite Replace Tag. U tekstualnom polju koje se prikae 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 izvrili pretraivanje. 6. Ponovite prethodne korake i zamenite i sa em. Nakon to zatvorite kliknite Close da biste zatvorili okvir za dijalog. Istu tehniku moete 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 moete da ispitate svaki pojedinani sluaj i da budete sigurni da nije u pitanju navodnik, koji je na pravom mestu. Izbacivanje viestruko uvuenih lista Viestruko uvuene liste se sastoje od jedne ureene liste i druge koja nije ureena, a koja se nalazi unutar prve. Cilj ovog uvlaenja nije kreiranje podliste, nego novo uvlaenje. Evo kako izgleda taj kod: <ul> <ul> <li>Apples</li> <li>Bananas</li> </ul> </ul> Ako elite da uklanjate jedno po jedno uvlaenje, onda izaberite tu stavku iz liste, pronaite u Tag Selectoru dvostruki skup oznaka ul i ol, kliknite desnim tasterom mia neku od tih oznaka i iz pomonog menija izaberite opciju remove Tag. Ako elite da brzo uklonite ove oznake iz celog dokumenta, ili na celom sajtu, onda moete da upotrebite pretraivanje sa opcijom Specific Tag i da potraite oznake ul ili ol, koje se nalaze unutar druge oznake ul ili ol. Poto ete morati da odjednom zamenite sve oznake, treba da budete paljivi, jer ete ukloniti i ispravno ugnjedene liste.
48 / 299
Dreamweaver MX 2004
Prekidi linija, razmaci koji ne znae prekid i beline

Belina je vizuelni koncept, koji je prema tome, povezan sa formatiranjem, a ne sa strukturom. Nema nieg loeg u malo beline, dokle god to ne naruava strukturu. Prekidi linija: ta je dobro, a ta loe Ako u Dreamweaveru prtisnete taster Enter ili Return, zavrava se tekui pasus i poinje novi. U izvnorom kodu ovim se zavrava jedan blok (pasus, naslov, stavka u listi, itd.) i poinje novi. U prikazu Design, kao i u pretraivau, svi prekidi izmeu 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 sluajevima treba da pritisnete Shift+Enter. Ovim se zavrava tekua linija i poinje nova. U izvornom kodu se unosi oznaka br. Ova oznaka se ubacuje u tekui blok za formatiranje. U prikazu Design i u pretraivaima 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 paljivo ubacite prekid linije u svoj tekst, a pretraiva preuredi tekst, usled opcija koje je korisnik podesio, ili usled veliine prozora. Mekani prekid i struktura Upamtite da mekane prekide ne treba da koristite za lou strukturu. Ako ne elite dodatne praznine izmeu naslova i teksta koji sledi, nemojte koristiri prekid linije. Ovim se brie strukturna razlika izmeu 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 postojeih oznaka, ili putem kreiranja korisnike klase. U okviru za dijalog CSS Style Definition izaberite katerogiju Box. U kontrolama u polju Margins, opcija Same for All ne treba da bude potvrena. Donja margina treba da se podesi na negativnu vrednost. Na slici je prikazano ta se deava. Ako ste svoj stil definisali kao korisniku 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 deava sa automatskim prelazom teksta u novi red. Ovo je i vie od toga. Pretraivai ignoriu dodatne beline u HTML kodu. Sa druge strane, razmaci koji ne dovode do novih redova prave dodatni prostor izmeu rei i drugih elemenata, koji pretraivai ne smeju da zanemare. Najlaki nain da u Dreamweaveru napravite ovakav razmak je da pritisnete Shift+Ctrl+razmak. Isti objekat se moe 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 moe da za Vas napravi Dreamweaver. Na primer, svaki put kada pravite novi pasus, Dreamweaver ubacuje ovakav prekid, da bi naterao pretraiva da obrati panju na pasus. (Potpuno prazni pasusi se smatraju belinama bez znaenja i pretraivai ih ignoriu.) Program prekide koji ne vode novom redu ubacuje i u prazne elije tabela, iz razloga to pojedini pretraivai ne prikazuju ispravno prazne elije. Dodavanje belina preko praznih pasusa Priznajte, koliko ste puta ovo i sami uradili. Pritisnete taster Enter nekoliko puta vie i kreirate puno praznog prostora izmeu elemenata na strani. Dreamweaver omoguava 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 logino u pasusu u kome nema nieg? Mnogo bolje je da prostor izmeu stavki dodate preko CSS-a.
Sve o listama
Bez obzira da li je lista sa oznakama ili brojevima, da li je ureena ili ne, lista pomae da brzo napravite sadraj koji se lako ita. Puno toga moe da se uradi na poboljanju izgleda i strukture Vaih listi. Fino podeavanje izgleda preko tipova listi Ne elite da oznake stavki u listi budu crni kruii? 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 podeavaju 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. Otvorie se okvir za dijalog List Properties.
50 / 299
Dreamweaver MX 2004
Ovde moete da preko padajue liste List Type definiete 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) (ureena) Kreira se numerika, alfabetska ili na neki drugi nain ureena lista. Unordered (ul) (neureena) Kreira se lista kod koje su stavke oznaene znacima. Directory (dir) Kreira se lista direktorijuma sa vie 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 razliite opcije. Ako elite da definiete atribut type za listu, upotrebite padajui meni Style. Za ureene liste moete i da zadate od kojeg broja poinje brojanje elemenata liste (1,2,3...). Ovde treba uneti broj, ak i ako ste izabrali tip koji nije numeriki. Ovim se oznaci list dodaje atribut start: <ol start="5"> Na kraju, na dnu okvira za dijalog moete 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 odraavaju samo na jednoj stavci liste.
Poboljane oznake elemenata u listi preko CSS-a Tipovi oznaka elemenata liste su dobri, ali ta ako elite da za svoju neureenu listu imate kao oznaku neki crte. Tu Vam moe pomoi 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 drugaije definie oznaku ul (neureena 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 pronaite svoju oznaku. Polje Position moete da ostavite prazno ili da iz pomonog menija izaberete opciju inside i tako ubacite svoju oznaku u uvlaenje stavki (ovo moe dovesti do toga da se uvlaenje povea). Kliknite OK da biste zatvorili okvir za dijalog. Od sada e izgled svake neureene liste zavisiti od style sheeta koji koristi sliku kao oznaku.
51 / 299
Dreamweaver MX 2004
Naravno da ovo nije jedini nain na koji CSS moe da Vam pomogne u formatiranju listi. Font, veliina teksta, boja i jo puno toga se moe podesiti preko CSS-a. Ako elite da poveate ili smanjite uvlaenje stavki u listi, ili da promenite vertikalno rastojanje izmeu 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 doi 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 prikae na ekranu. Postoji na stotine HTML entiteta za specijalne karaktere.
Umetanje specijalnih karaktera tokom rada

Neki specijalni karakteri se lake 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 odgovarajuim specijalnim karakterom (&). Ako poznajete preice sa tastature koje Va operativni sistem koristi za kreiranje drugih karaktera, moete i njih da koristite dok ste u prikazu Design. Dreamweaver e uneti pravi kod. HTML entitetima koji se najvie koriste moe 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. Otvorie se novi prozor iz kojeg moete izabrati specijalni karakter. Kada kliknete ikonu karaktera, na vrhu prozora e se prikazati tekstualno polje. U polje moete i da ubacite kod svog specijalnog karaktera.
53 / 299
Dreamweaver MX 2004
Ubacivanje specijalnog karaktera preko pronalaenja 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 pronalaenje 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. Pronaite prvi karakter koji elite da zamenite. Ako elite da zamenite pravu (zakrivljenu) apostrofu umesto obine, pronaite primer za to. Obriite 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 pretraivanja (Current document, Entire Site, itd.). Iz padajue liste Search In izaberite na Text. U polju Search In unesite karakter koji elite da menjate, obian 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 zavri posao, Dreamweaver e pokazati broj zamena koje je izvrio. 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 zakljuite da stalno radite isto, mogli biste da upamtite kriterijum pretraivanja i da ga tako olakate. Evo kako se to radi: 1. Ponovite korake koje smo upravo pomenuli, sve do trenutka kada se naete u okviru za dijalog Find and Replace sa ispravnim kriterijumom za pretraivanje. 2. Umesto pretraivanja i zatvaranja prozora, kliknite dugme Save. Ovo dugme izgleda kao disk raunara. Upamtite kriterijum pretraivanja u nekoj fascikli, ali upamtite gde ste to uradili, da biste kasnije mogli da taj kriterijum ponovo pronaete. Nakon toga zatvorite okvir za dijalog Find and Replace. 3. Naredni put kada elite da pronaete i zamenite specijalni karakter, otvorite okvir za dijalog Find and Replace i kliknite dugme Load. Ono izgleda kao fascikla. Pronaite svoj kriterijum i uitajte ga. Nakon toga, pretraivanje uradite kao i obino.
54 / 299
Dreamweaver MX 2004
5. Rad sa slikama
Osnovno o slikama
Rad sa slikama u pretraivau nije komplikovan, ali kao i uvek, postoje odreena pravila koja treba potovati. U ovom odeljku smo pokrili osnove, a to je kako slike funkcioniu na web stranama i kako se uklapaju u svet Dreamweavera.
Slike u pretraivau
Slike se generalno na web strane ubacuju preko oznake img: <img src="fido.gif" width="100" height="100"> Ovaj kod govori pretraivau gde treba da potrai 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, poto bez njega nema ni slike. Striktno govorei, ni atribut width ni atribut height nisu obavezni, ali ako ih izostavite, pretraiva nema naina da sazna koliko prostora treba da ostavi za sliku, to usporava prikazivanje web strane. Zbog toga se ovi atributi uvek daju. Datoteke koje sadre slike moraju biti u formatu koji pretraiva moe da prepozna i prikae. Trenutno su to formati GIF, JPEG PNG (premda je podrka za PNG nedosledna, tako da mnogi dizajneri odustaju od ovog formata). Format GIF je najbolji za slike koje nisu fotografije, sa ogranienim bojama, gde je obavezm da slike budu jasne. GIF moe da se koristi i za animacije i efekat providnosti. JPEG je najbolji za fotografije i druge slike koje sadre 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 istai i potencijalne zamke. Umetanje slika Slike se u Dreamweaver mogu ubaciti na razliite naine. Moete ih ubaciti preko objekta Image sa palete Insert ili preko komand Insert > Image. Ako ste definisali sajt, slike moete da prevuete sa panoa Site ili Assets direktno u prozor Document. Treba da imate na umu da priilikom umetanja slike, Dreamweaver ne ugrauje 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 moe da se izrauna relativna putanja izmeu dokumenta i datoteke sa slikom.
55 / 299
Dreamweaver MX 2004
Rad sa slikama Veina osobina slika se u Dreamweaveru mogu podesiti preko Image Property Inspectora. Za podeavanje drugih osobina treba da koristite Selection Inspector ili komandu Edit Tag.
Promena veliine slike Dimenzije slike moete promeniti ako promenite vrednost za width ili height u Property Inspectoru ili ako uhvatite ruice koje se prikazuju kada izaberete sliku i prevuete 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 ureivanje slika. Ako u HTML-u promenite veliinu slike, to samo pretraivau govori da sliku treba da prikae veom ili manjom u odnosu na stvarnu dimenziju. Ako prikaete veu sliku, poveavaju se pikseli, slika se deformie, tako da se mogu videti takice ili e slika biti zamagljena. Ako prikaete manju sliku, samo bacate piksele i neracionalno troite propusnu mo mree. Ako u Dreamweaveru izaberete sliku i pogledate Property Inspector, uvek moete rei 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 moete da vratite na poetne 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 razvlaenje odvija du tih traka. Ovim se poveava veliina slike, a da se pri tome ne menja veliina datoteka i samim tim ne utie na propusnu mo mree. Ravnanje slika Za poetnike ravnanje slika preko Property Inspectora moe biti zbunjujue, poto za to postoje dva skupa komandi. To su padajui meni Align, kao i dugmad left/center/right. U emu je razlika? Komande iz padajueg menija Align oznaci img dodaju atribut aligment: <img src="fido.gif" width="100" height="100" align="left"> Ovaj atribut odreuje kako se slika ravna u odnosu na ostale stavke iz istog bloka. Najee je to tekst koji okruuje sliku. Ovaj atribut se podeava slino kao to se podeavaju atributi koji definiu nain smetanja 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, okruuje 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, dodae se oznaka div, koja dodaje ravnanje. <div align="left"> <img src="fido.gif" width="100" height="100"> </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 padajuih menija Horiz i Vert se podese osobine elije align i valign. Kod izgleda ovako: <td align="left" valign="middle">
56 / 299
Dreamweaver MX 2004
<img src="fido.gif" width="100" height="100"> </td> Ureivanje slika Ako dva puta brzo kliknete sliku u prozoru Document, otvorie se okvir za dijalog u kome moete da promenite src datoteku za sliku. Kada izaberete sliku i u Property Inspetora kliknete dugme Edit, otvorie se grafika aplikacija u kojoj moete da je menjate. Koji program za rad sa grafikom e se otvoriti? To zavisi od toga koji spoljanji grafiki editor ste definisali u Dreamweaveru. Ako elite da proverite (ili promenite) ta ste podesili, treba da uradite sledee: 1. Izaberite Edit > Preferences. Otvorie 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 zavrite kliknite dugme OK, da biste zatvorili okvir za dijalog. Naredni put kada kiknete dugme Edit u Image Property Inspectoru, pokrenue 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 naina 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 pomoi 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 uinite 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 sadraju 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 moe da se vidi, to znai da e ga i grafiki pretraivai prikazati, ako ne mogu da prikau sliku. (Internet Explorer prikazuje alt tekst, kada se miem prelazi preko slike iako to nije osnovna namena ovog atributa.) Svaka slika u Vaem dokumentu bi trebalo da sadri i atribut alt. Slike koje nisu bitne, bi trebalo da sadre prazan atribut alt. longdesc Ako znaenje slike ne moete da sumirate u kratkom tekstu atributa alt, moete opcionalno da upotrebite atribut longdesc. Ovaj atribut treba da sadri URL adresu strane sa punim tekstualnim opisom slike. (Do sada ovaj atribut nije ba najbolje podran. Va zadatak kao web autora je da obezbedite mogunost, a ne da se bavite nedostacima tehnologija.)
Dostupnost slika u Dreamweaveru

Slike su osnovni vinovnik nedostupnosti web strana, poto po svojoj prirodi nisu dostupne ljudima koji imaju problem sa vidom. Reenje ovog problema je da uvek obezbedite tekstualni ekvivalent za sve slike koje imate na svojim stranama. Podeavanje opcija vezanih za dostupnost Pre nego to krenete sa umetanjem slika, treba da budete sigurni da su opcije koje se odnose na dostupnost slika ukljuene (Edit > Preferences > Accessibility). Ako su ove opcije ukljuene, kada sledei put budete ubacivali sliku, prikazae se drugi okvir za dijalog, koji omoguava da podesite atribute alt i longdesc. Ako ne unesete vrednost za neki od ovih atributa, taj atribut se nee ubacivati u dokument.
Property Inspector, Tag Inspector i komanda Edit Tag Nakon to ste ubacili sliku, u bilo kom trenutku moete da podesite atribut alt za svoju sliku. Ovo ete uraditi preko Property Inspectora. Atribut longdesc se moe 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 slue samo za dekoraciju, treba da imaju prazan atribut alt. U Dreamweaveru ete prazan atribut alt napraviti pomou padajueg 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? Moete da potraite slike bez ovog atributa u tekuem dokumentu, fascikli ili na celom sajtu. Izaberite Site > Reports, a onda izaberite opciju Missing Alt Text Report. Pazite, ovaj izvetaj e identifikovati sve prazne atribute alt, kao atribute koji nedostaju, to naravno nije sluaj.
Integrisano ureivanje slika

U Dreamweaveru MX 2004 su dodate neke osnovne aktivnosti za ureivanje slika, kao to su odsecanje delova slike, dodavanje belina, rukovanje priirenjima slika. Sve ovo se sada moe 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 podeavanja u letu, ovo je znaajna 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 moe pristupiti i preko podmenija Modify > Image. Mogu se koristiti kod bilo kojih slika koje su postavljene u dokument Dreamweavera, ali se najvie 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 mogunosti, ali treba da imate na umu da svaka promena koju napravite preko ovih alata utie na datoteku sa slikom, to je razlika od drugih promena koje moete napraviti preko Property Inspectora. Polja width i height, na primer, samo menjaju dimenzije slike koja se prikazuje na strani, a ne utiu 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. Rezultujua slika je i dalje pravougaonog oblika (odsecanje nije kao maskiranje ili neki drugi efekti vezani za transparentnost). Ipak su neki njeni delovi izbaeni. Ako elite da neku sliku odseete 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. Prikazae se slika sa pravougaonikom za odsecanje ispred nje. Povrina unutar pravougaonika e biti deo koji ostaje nakon odsecanja. Prevucite ruice 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 izbaeni. Nakon to ste podesili pravougaonik odsecanja, moete 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 zapoeli odsecanje? Kliknite u prozor Document, ali izvan slike. Ovim se prozor odsecanja zatvara i ne dolazi do odsecanja. Podeavanje osvetljenja i kontrasta Osvetljenje odreuje osvetljenost slike. Ako poveavate osvetljenje, sve boje postaju svetlije. Ako smanjujete osvetljenje, sve boje postaju tamnije. Kontrast odreuje koliko svetla treba da dobiju svetle povrine 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 povrine 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 klizae navie i nanie, ili unesite konretne brojeve. Nakon to zavrite kliknite OK, da biste zatvorili okvir za dijalog i promenili sliku.
Podeavanje otrine Izotravanje slike znai da uinite da detalji slike izgledaju otrije, vie u fokusu. To moe dovesti do iluzije da ste slici dodali nove detalje. Prilikom izotravanja se na slici trae oblasti kod kojih se tamni pikseli sreu sa svetlim. Pod pretpostavkom da ove take susreta na slici predstavljaju detalje, kao to su ivica povrine nasuprot pozadini, ili nos nasuprot lica, kontrast izmeu svetlog i tamnog du ivice postaje vei. Ovim se ivica dalje istie. Zbog toga to proces digitalizacije moe dovesti do toga da slika izgleda nejasno i zamagljeno, izotravanje postaje vaan alat za digitalno ureivanje. Ako elite da u Dreamweaveru podesite otrinu slike, izaberite tu sliku i kliknite dugme Sharpen na Property Inspectoru. Moete i da izaberete Modify > Image > Sharpen. Otvorie se okvir za dijalog Sharpen, sa klizaem. Ako elite da izotrite 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 veliinu slike (putem promene parametara width i height u Property Inspectoru), ne menjate broj piksela ili neto drugo u samoj datoteci sa slikom. Vi samo govorite pretraivau da postojee piksele prikae veim ili manjim. To je razlog to slika koju ste poveali izgleda nejasno i to se kod nje vide pikseli. Proces promene broja piksela u slici se na engleskom naziva resample. Raunar ili dalje deli piksele, tako se poveava ukupan broj piksela, ili ih kombinuje, ime se smanjuje ukupan broj piksela. Ovaj proces uvek dovodi do krivljenja slike, poto raunar ne moe da pogodi koje su boje pikseli koji se dodaju ili gube. Ipak, slika kojoj je broj piksela promenjen, da bi se uveala, generalno izgleda bolje nego da ste je poveali na uobiajen nain. Promena broja piksela u Dreamweaveru nije relevantna, osim u sluaju da ste ve menjali irinu i visinu slike (bilo preko Property Inspectora i Tag Inspectora, ili prevlaenjem 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 pretraivai poeli da podravaju upotrebu slika, kreatori web strana su poeli da ih koriste, i zloupotrebljavaju, kao elemente pozadine. Slike se kao pozadina dodeljuju stranama, tabelama i nivoima. Slika u pozadini moe da se ponavlja po horizontali ili vertikali, tako da ispuni odreeni prostor. Tekst ili neki drugi grafiki elementi mogu da se postavljaju ispred slike u pozadini, bez ikakvih CSS tehnika za rad sa nivoima. Slika u pozadini moe biti jednostavna, kao to je ponavljanje tapeta u pozadini, ali moe biti i znatno sloenija i skrivenija, kada se koristi kao vodeni ig, baner, itd. Pozadina u stilu ploa, staromodan nain Mnogo pre nego to je CSS stupio na scenu, slike su poele da se koriste kao pozadinski elementi. To je bilo mogue zahvaljujui 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 ploe 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 moda e Vam biti potreban, ali u poreenju sa CSSom, ima odreene nedostatke: Nema naina da se kontroliu ploe sa slikom. Pretraiva automatski postavlja ploe sa slikom onoliko puta koliko je potrebno, po horizontali ili vertikali i pokuava da ispuni raspoloivi prostor. Iako ovo nije uvek loe, nee se uvek uklapati u Vae elje. Nema naina da se kontrolie pozicija slike. Poploavanje poinje 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 monija. Redefinisani elementi strane i korisnike klase mogu da sadre razliite 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 (ukljuujui 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. Moete i desnim tasterom mia 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 tekuem dokumentu ili u posebnom dokumentu sa stilovima. Treba i da izaberete da li elite da promenite definiciju postojee HTML oznake, ili da kreirate korisniku 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 korisniku 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 razliite osobine slike. Nakon to zavrite kliknite OK da biste zatvorili okvir za dijalog. 4. Ako menjate oznaku iz HTML-a (na primer, oznaku body) onda ste zavrili. Ako sliku u pozadini pravite kao korisniki definisanu klasu, onda treba da tu klasu primenite na tabelu ili neki drugi element, za koji definiete pozadinu. Ovo ete uraditi tako to ete izabrati taj element, tako da se njegova oznaka pojavi na Tag Selectoru, zatim desnim tasterom mia 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 moete ili da preko prethodno pomenutih koraka promenite definiciju oznake body, ili moete 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 Poetnici u web dizajnu uvek ele da znaju kako da dobiju one sjajne integrisane tekstualne i grafike efekte, kakve su videli na mnogim web sajtovima. Odgovor je esto u kreativnim pozadinskim efektima. Vertikalno poploavanje 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 olakano pojavom CSS-a. Evo ta treba da uradite: 1. U svom grafikom programu napravite grafiku sidebara, kakvu elite. 2. 2 Verovatno ete eleti da se sidebar protee od vrha do dna strane, ali samo sa jedne strane. Ideja je da se ploe 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 ploama. 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 veliine (ili napravite deo slike te veliine) 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 moete da spreite da se postavljaju ploe sa slikom po horizontali i to tako to ete sliku napraviti irom od prozora pretraivaa. Pre nego to se pojavio CSS, nije bilo nita neuobiajeno da naiete 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 pokuavaju da ispred ablona u stilu tapeta postave neki tekst. Taj tekst skoro nikad nije vidljiv, osim ako je ablon tako suptilan da se teko i primeuje. Kreativno reenje 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 Meanje i uparivanje za dobijanje efikasnih i fleksibilnih efekata sa slikama Kada se naredni put spremite da odseete neku sliku koja ide u liniju za navigaciju, baner sa naslovom ili sidebar, zapitajte se da li meanje i podeavanje slika u pozadini i onih koje su prvom planu, kao i boja u pozadini i slika moe da Vam pomogne.
64 / 299
Dreamweaver MX 2004
Slike i struktura strane

Slike su kljune u dizajnu web strana. Poto se web strane danas uglavnom ureuju pomou 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 nainom upotrebe.
Slike u GIF formatu od jednog piksela

U pitanju je slika u GIF formatu koja se sastoji od samo jednog piksela, obino transparentnog. Ovakve male jedinice su meu web dizajnerima popularne jer mogu da ree neke opte probleme rasporeda, kao i da doprinesu nekim interesantnim mogunostima. 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 veliinom kanvasa podeenom na 1x1 i podesite boju kanvasa (ili pozadine) na transparent (providna). Zatim tu sliku upamtite i izvezite kao GIF, sa ukljuenom opcijom transparent. Slike u GIF formatu od jednog piksela u HTML-u Ovakve slike se u HTML-u najvie koriste da podupru otvorene elije tabele i da stabilizuju strukturu tabele. Ubacite neku od ovih providnih slika u eliju tabele koja bi inae bila prazna i slici dodelite irinu i visinu, koje elite da ima elija tabele. Dodavanje vrsta i kolona koje nemaju nita drugo osim providnih GIF slika razliite veliine, moe da dovede do vrlo lepih tabela. Dizajneri ove vrste i kolone nazivaju kontrolnim vrstama i kolonama. Kada Fireworks pravi odseenu sliku, ili kada Dreamweaver pravi tabelu u reimu 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 mogunosti 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 teko videti u prikazu Design. Evo kako se ubacuje ovakva slika: 1. Ubacite sliku kao i obino. Kada se pojavi u dokumentu ona e biti automatski izabrana. 2. Nemojte deselktovati sliku, jer ete je kasnije teko pronai. Odmah preko Property Inspectora dodelite visinu i irinu toj slici. Dodelite joj i praznu oznaku alt (tako to ete iz padajueg 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 nai oznaku <img>. Tu moete da promenite irinu i visinu. 3. ak i posle promene veliine slike, providna slika se ne moe videti (ona je providna). Ipak, ako znate gde se otprilike nalazi, moete da klikete okolo dok je ne pronaete. Tabela sa odseenom 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 vie vremena da se prikau u pretraivau u odnosu na jednostavnije, a ponekad se generie vie slika nego to je potrebno. Sliice kao separatori (spacer) ili popuna slika preko opcije padding Tabele sa odseenim 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 veliine i zamena Tabele sa odseenim slikama takoe prave posebnu sliku za svaku eliju u tabeli, iako je ponekad efikasnije da se ista slika koristi vie puta. Prave se slike pune veliine, ak i kad bi moglo da se istoj slici promeni veliina i da se dobije isti efekat. Pogledajte svoje slike i proverite da li se to desilo. Ako jeste, zamenite razliite slike, samo jednom. Vee slike zamenite manjim. Posebnu panju treba da obratite na spacere, koji su ostali u pojedinim budacima. Efikasnosti radi, svi spaceri koji se ne vide treba da budu slike od jednog piksela u GIF formatu.
65 / 299
Dreamweaver MX 2004
Podeavanje generisanja tabela u Fireworksu Ako za kreiranje tabela sa odseenim slikama koristite Fireworks, onda e Vam za kreiranje efikasnih slika i HTML koda pomoi sledei saveti: Paljivo poravnajte sve odseene objekte, tako da se kreira to je mogue manje vrsta i kolona. Nacrtajte odseene objekte onako kako Vam je potrebno, a prazan prostor ostavite samo tamo gde treba da se prikae pozadina tabele ili strane. Za popunu praznih elija spacerima (slikama separatorima) moete 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 povrina bez odseenih 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 moete i elegantnije uraditi. Analizirajte strukturu svoje tabele i pogledajte koliko slika moete da zamenite pozadinskim elementima. Potujte strukturu tabele Ako pravite svoju tabelu koja sadri slike, na Vama je da uinite da ta tabela bude solidna i stabilna. Pre nego to ponete da menjate tabelu koju ste dobili u Fireworksu ili Photoshopu, treba da budete sigurni da razumete osnovnu strukturu te tabele, da je ne biste naruili. Tabele sa odseenim slikama su stabilne zbog naina na koji su struktuirane. Tabele iz Fireworksa, na primer, imaju sledee 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 ubaene iz dobrog razloga. Ako ih poremetite, tabela se u pretraivau moda nee prikazati na pravi nain. Pozicioniranje tabela preko CSS-P-a Ako ne nameravate da se Vae web strane koriste u Netscapeu 4.x ili nekim starijim pretraivaima, sjajne efekte u rasporedu moete 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 sledee: 1. Napravite sliku kao i obino. 2. Ubacite sliku u dokument. Ovo ete uraditi tako to ete kursor postaviti na poetak sadraja 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 mia kliknite Tag Inspector i izaberite opciju New Rule). Kada se otvori okvir za dijalog, napravite korisniku klasu sa ekstenzijom .image ili .logo. Moete 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 moete promeniti). Kliknite OK da biste zatvorili ovaj okvir za dijalog. 5. U prozoru Document izaberite sliku. Na Tag Selectoru desnim tasterom mia kliknite oznaku img i iz podmenija Set Class izaberite korisniku klasu koju ste napravili. 6. Sada ste svoju sliku pozicionirali preko CSS-a. Poziciju na strani moete podesiti ako kliknete ivicu slike tako da se pojavi Layer Property Inspector i onda je prevlaite 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 paljivo 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 moi, ali je lowsrc najbolji za saobraaj sa malom propusnom moi. Sta je lowsrc? U pitanju je alternativna slika kojoj moete zadati da se u pretraivau prikazuje na mestu druge slike, dok se ta druga uitava. Recimo da imate sjajanu, realistiku fotografiju Nijagarinih vodopada, ili fotografiju astronauta koji etaju po Marsu i da Vam te slike zaista trebaju na web strani, ali zauzimaju 30K ili vie. Napravite alternativnu verziju slike, sa istim dimenzijama, ali vrlo malu, veliine 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 uita i bude spremna za prikazivanje. Ako elite da kreirate i ubacite sliku lowsrc, treba da uradite sledee: 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), podeavajte sve dok ne dobijete najmanju moguu veliinu slike, a onda je izvezite i upamtite kao GIF. (U lowsrc slici skoro da ne postoje take koje se ne uitavaju trenutno). 3. U Dreamweaveru ubacite glavnu sliku na svoju stranu. 4. Dok je slika izabrana, u Property Inspectoru potraite polje Low Src. Pronaite lowsrc verziju svoje slike. Lowsrc verziju slike neete moi da pregledate u lokalu, poto e se glavna slika prikazati suvie brzo. Kod spore veze, efekat izgleda skoro kao animacija, ime se koriste prednosti sporog uitavanja glavne slike.
Definisanje rasporeda pomou 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 neto drugo? Dizajneri grafike u svetu tamparstva koriste grki tekst ili FPO za prostore rezervisane za slike. U Dreamweaveru, za brzo dobijanje grkog teksta moete da koristite neki od generatora lanog teksta. Za kreiranje koda za sliku bilo koje veliine, moete da koristite objekat Image Placeholder, sve dok na svoje mesto ne doe i prava slika. Ubacivanje mesta rezervisanih za slike Ako u Dreamweaveru elite da ubacite mesto rezervisano za sliku, treba da uradite sledee: 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. Moete i da iz menija izaberete Insert > Image Objects > Image Placeholder. 3. Otvorie 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 suvie odudara od neke usvojene eme boja), dodajte alt tekst radi dostupnosti i prikazivanja u pretraivau i dajte ime koje e se u tom mestu pojavljivati u prozoru Design, a koje Vas podsea ta ste to hteli da uradite. (Ime mora biti ispravno radi korienja u skriptovima, tako da ne sme da sadri 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 ubaenog mesta za sliku, videete da je u pitanju obina oznaka img, sa praznim atributom src i ubaenim atributom style iz CSS-a, koji podeava boju pozadine. Ovde nema nieg to nije standardno, tako da pretraiva nema problema da interpretira kod. Poto nema zadate slike, pa se ona ne moe stvarno prikazati, pretraiva 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 nai slika, ve i kao pomo prilikom odreivanja njenih idealnih dimenzija. Veliinu ovog mesta moete menjati preko Property Inspectora ili preko ruica. Tekue dimenzije se prikazuju na samom mestu, a i u Property Inspectoru. Kada ste spremni da napravite konanu sliku, te dimenzije moete 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 obina slika. Ako koristite Fireworks, onda je kreiranje konane 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 pokree Fireworks i u njemu novi dokument, sa veliinom okvira podeenom na dimenzije koje je imalo mesto rezevisano za sliku. Napravite zavrnu 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 moete da dobijete neke dodatne mogunosti. Kako radi ova integracija Razliiti 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 generie Fireworks, tako da Dreamweaver dobija vane 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 naie na ove komentare, prikazuje se specijalni Fireworks Table Property Inspector i omoguava pokretanje i ureivanje. 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 trai ovu MNO datoteku. Ako je pronae, on zna da je u pitanju slika koja dolazi iz Fireworksa, tako da dobijate specijalni Fireworks Image Property Inspector. Program takoe zna lokaciju PNG datoteke koja je napravila ovu sliku, tako da se omoguava pokretanje i ureivanje. Ako je slika kreirana na osnovu pareta iz Fireworksa, MNO datoteka takoe sadri i liniju koda koja ukazuje na deo slike od kojeg je nastala.
68 / 299
Dreamweaver MX 2004
Brisanje komentara onemoguava integraciju sa stavkama koje su napravljene u Fireworksu, kao to su tabele sa odseenim slikama. Brisanje fascikle _notes ili MNO datoteke onemoguava 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 odseenim slikama, zajedno sa JavaScriptom koji se koristi za efekat rollover, u Dreamweaveru. Veina ljudi generalno nee 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 vie ogranienja, 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, ukljujui i tabele i CSS nivoe koji su potrebni za formatiranje. Ostavite prostor za tabelu sa odseenim slikama. 2. U Fireworksu napravite datoteku koja je veliine 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 ponaanje, 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 podeena 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, pronaite HTML datoteku koju elite da ubacite (nemojte da brinete o pronalaenju 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 zavrite, 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 uobiajenih 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 opti termin koji se u Macromediji koristi za opisivanje mogunosti integracije programa. U pitanju je mogunost 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 poetni program. Ako je u pitanju integracija Dreamweavera i Fireworksa, to znai 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 moete da menjate. Osnovni proces je jednostavan: 1. 2. 3. 4. U Dreamweaveru izaberite sliku ili tabelu i kliknite dugme Edit na Property Inspectoru. Moete i da desnim tasterom mia kliknete sliku i da iz pomonog 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 zavrite, kliknite dugme Done. Fireworks sada pamti PNG datoteku, ponovo je izvozi, ako je potrebno i generie novu sliku ili HTML, nakon ega zatvara datoteku. Ponovo se prikazuje Dreamweaver u kome se ponovo uitavg slika ili HTML.
Nakon to ste u Dreamweaver ubacili HTML iz Fireworksa, morate paziti ta sa tim ubaenim elementom radite, ako elite da ga kasnije ponovo pokreete u Fireworksu. Promena linkova, alt teksta ili nekih drugih informacija koje se ne odnose na strukturu HTML-a generalno ne predstavlja problem. Ako se odluite na neke strukturne promene u tabeli i posle toga probate da to menjate u Fireworksu, biete upozoreni da Fireworks prilikom auriranja HTML koda moe da prebrie ono to ste u meuvremenu promenili u Dreamweaveru. Nemojte da dopustite da se to desi. Isto e se desiti i ako izaberete pojedinanu sliku unutar tabele sa odseenim slikama i pokuate da je menjate po principu pokreni i menjaj. ak i ako elite da aurirate samo tu sliku, Fireworks obnavlja celu tabelu.
Optimizacija u letu
Jedna od najboljih osobina integracije je mogunost da se u Dreamweaveru u letu optimizuju slike. Recimo da ste uvezli neku animiranu sliku, za svoju stranu "ta je novo" i da kad doete u Dreamweaver ustanovite da ono to ste optimizovali kao JPEG ili providnost u GIF formatu ne radi, ili da je vreme za animaciju pogreno izrauunato. Izaberite sliku, pa onda izaberite Commands > Optimize Image in Fireworks, ili kliknite sliku desnim tasterom mia i iz pomonog menija izaberite opciju Optimize Image in Fireworks. Moete i da kliknete dugme Optimize in Fireworks, sa palete Property Inspector. Pokrenue se Fireworks. Otii ete direktno u specijalnu verziju okvira za dijalog Export Preview, po imenu Optimize Image. Ovde moete da promenite podeavanja vezana za optimizaciju, nakon ega treba kliknuti na Update. Fireworks e ponovo izvesti sliku, sa novim podeavanjima i vratiti Vas u Dreamweaver. Optimizacija u letu je posebno korisna kada doe do promene veliine datoteka. Moda ete raditi na strani sa nekoliko slika i doi do zakljuka da neka od njih treba da bude vea ili manja. Poto se ne preporuuje da se veliina slike menja u Dreamweaveru, postavlja se pitanje ta ete uraditi? Promenite veliinu slike, ostavite je izabranom i izaberite Commands > Optimize Image in Fireworks (ili desnim tasterom mia kliknite na sliku i izaberite komandu iz pomonog menija). Kada se otvori okvir za dijalog Optimize Image, datoteka e biti podeena da se optimizuje na novu veliinu. Nakon to kliknete na Update i vratite se u Dreamweaver, pogledajte indikatore za visinu i irinu na Property Inspectoru. Videete da oni vie nisu ispisani masnim slovima, to znai da je veliina slike promenjena na pravi nain.
Proirenje Fireworksa vezano za integraciju

Ako ugraene mogunosti integracije izmeu Dreamweavera i Fireworksa nisu dovoljne, Dreamweaver Exchange ima nekoliko proirenja koja mogu da uine i vie. To su besplatna proirenja 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 proirenje omoguava 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 podeavate font i stil po elji. Moete je primeniti na izabrani tekst ili na sav tekst koji se u dokumentu nalazi izmeu odreenih oznaka (kao to je tekst izmedu oznaka M). Ova komanda se nalazi u meniju Commands. Komanda Convert Bullets to Images Ova komanda konvertuje sve neureene liste u dokumentu u liste sa grafikim oznakama i tabele sa dobrim formatiranjem. Vi moete da izaberte veliinu i stil oznake, a Fireworks ak osigurava da se ovo slae sa bojom pozadine u dokumentu. (Treba da znate, da nakon to zavrite sa ovom komandom, lista tehniki vie nije lista, poto se ne nalazi izmeu oznaka ul.) Komanda se nalazi u meniju Commands. Objekat Fireworks Button Ovaj objekat se ponaa slino kao objekat Flash Button, koji postoji u Dreamweaveru. Tu moete da birate stil dugmeta, dodeljujete svoj tekst i informacije o linku, kao i da kreirate dugme sa podeenim rollover kodom. Ovo je kao preica za kreiranje dugmeta i stanja rollover.
Dodaje se i ponaanje tipa Swap Image, izvozi se sve i Fireworksa i stavlja u HTML u Dreamweaveru. Ovo moe da Vam utedi prilino 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 proirenje omoguava da napravite svoj HTML foto album i to na osnovu fotografija koje imate na svom raunaru. Vi birate grafiki stil i druge detalje, kao i fotografije koje eti ubaciti. Generiu se male sliice, 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 nauite kako oni rade u pretraivaima i kako Dreamweaver MX 2004 njima rukuje. U narednom odeljku smo objasnili oznaku anchor (a), ta ona radi i kako Dreamweaver moe da pomogne u ubacivanju i upravljanju linkovima.
Kako linkovi rade u pretraivau

Hiprelinkovi se prave tako to se neki element na strani okrui kotvom, odnosno oznakom a. Atribut href, to je skraenica za hypretext reference, definie odredite linka. Tekst na kome je postavljen link se u pretraivau oznaava na neki nain, tako da se moe jasno razlikovati od okolnog teksta. Obino je link podvuen i obojen plavom bojom. Nakon to ste posetili adresu na koju taj link upuuje, linkovi obino postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definiu svoje boje. Kada prelazi preko linka, kursor menja oblik u aku sa kaiprstom upretim u neto, lme se ukazuje da se taj link moe kliknuti. Apsolutne ili relativne putanje URL je skraenica za universal resource locator. URL ili web adresa je u sutini pokaziva na odreeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako da doete do tog dokumenta. URL putanja moe biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren. Apsolutna adresa je adresa na Internetu koja sadri sve informacije koje su raunaru potrebne u vezi lokacije koja se trai. Tu spadaju informacije o tome kako se vraaju informacije, ukljuujui protokol, domen, fasciklu i ime datoteke. http://www.mfa.org/exhibitions/upcoming.htm Zato je protokol tako bitan? Svim vrstama web adresa se moe pristupiti preko apsolutnog URL-a, ukljuujui i web strane, adrese elektronske pote, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se trai. Relativna putanja je skraeni oblik adrese kod koje se razliti 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 tekueg dokumenta odete na eljenu stranu. Ako elite da poveete 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/mojatreastrana.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 navie Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html. Ako elite da se u hijrearhiji fascikli kreete navie ili nanie za vie nivoa, onda treba da navodite sva imena fascikli ili indikatore ../ vie puta, po jednom za svaki nivo. pages/myfolder/mythirdpage.html ../../index.html Putanja relaitvna u odnosu na koren uspostavlja vezu izmeu 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 moete videti i u primerima koje smo dali. Zato biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da utede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeu, koje ste postavili onlajn i ako mesene lanke prebacujete u fasciklu Archive, kada zapone novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da utede 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 pretraivaa u kome je prethodno bio otvoren tekui dokument. Sa druge strane, HTML omoguava da zadate gde link treba da se otvori u novom prozoru pretraivaa, ili ako se radi o frejmovima, onda u odreenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor <a>, a to je target. Ako elite da se novi dokument otvori u posebnom prozoru pretraivaa, onda atribut target treba da podesite na _blank.
Linkovi u Dreamweaveru
Kreiranje linkova je zadatak sa kojim ete se prilikom definisanja web sajtova esto suoavati. Sreom, Dreamweaver omoguava 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, ukljuuijui i protokol. Ako radite u okviru sajta koji ste definisali u Dreamweaveru, moete da koristite i pano Assets, koji moe pomoi u rukovanju apsolutnim URL adresama. Otvorite pano Assets (Window > Assets) i preite 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 moete 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 potraite link, kliknite dugme Browse (ikona fascikle), koje se nalazi pored polja Link i preko okvira za dijalog koji se otvara izaberite datoteku koju elite. Moete 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 nian puke) i vucite odatle sve dok se kursor ne nae
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 pretraujete 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 podeavanje 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 mogunost 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 pretraivau. Ako u Dreamweaveru pokuate 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 nee raditi u lokalu, poto zavise od korena sajta. Iz tog razloga u jednom trenutku moete da pogledate samo jednu stranu. Linkovi na elektronsku potu Linkovi na elcktronsku potu (email link) su druga vrsta apsolutne putanje. U Dreamweaveru postoji nekoliko razliitih mogunosti 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 deava. Obratite panju na to da iza dve take 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 potu 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 nae. 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 nain ubacili email link, ako pogledate Property Inspector, videete 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 vie od pukog ukazivanja preko slika i teksta na druge web strane. Kotve sa imenima, mape slika, kao i meniji koji iskau su alternativni nain upotrebe linkova. Rollover efekat i linije za navigaciju pretvaraju jednostavne grafike linkove u interaktivne elemente na strani. Dreamweaver moe da Vam pomogne u kreiranju svih ovih elemenata.
Kotve sa imenima
Zar nije sjajno kada posetite web sajt na kome su dizajneri potroili izvesno vreme u kreiranju linkova koji omoguavaju da se kreete po dugakim stranama, tako da ne morate da idete navie i nanie, da biste pronali ono to traite? Moda ste ovo videli na strani sa najee postavljenim pitanjima. Kad god kliknete neko pitanje, dobijete odgovor samo na to pitanje. Kada pravite link na odreeno 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 tekuem dokumentu (# znai "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 pretraivaa prikae sa vidljivim tim drugim delom. Kreiranje kotvi sa imenom Ako u Dreamweaveru elite da kreirate kotvu sa imenom, treba da uradite sledee: 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. Moete 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). Moda e izgledati kao da mala zlatna ikona sa kotvom naruava izgled strane. Ovo je iluzija koju daje prikaz Design iz Dreamweavera. U pretraivau se ova ikona ne vidi i ne zauzima nikakav prostor. Linkovi na kotve sa imenima U Dreamweaveru postoji nekoliko naina da se linkovi poveu sa kotvama sa imenima. Preko Property Inspectora: Izaberite tekst ili sliku od koje elite da vodi link. Ako je kotva u tekuem 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 pretraivanjem), a onda unesite #, iza ega sledi ime kotve.
Preko opcije Point-to-File: Ikona Point-to-Fole se takoe moe 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 moe koristiti za linkove na kotve koje se nalaze u drugim dokumentima, ali samo ako su oba dokumenta otvorena, Samo pokaite drugi dokument (im ga aktivirate), a onda na kotvu unutar njega.
Mape slika
Mapa slika je grafika slika koja ima razliite "vrue take", koje se ponaaju kao linkovi. Vrue take u okviru slike se definiu 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 znaajno moe usporiti uitavanje strana na koje linkovi vode. Mape na strani klijenta sve informacije o mapi sadre u okviru HTML datoteke u kojoj se nalazi slika. Mape na strani klijenta su bolje iz nekoliko razloga: Linkovi se bre reavaju poto nema potrebe za informacijama koje se nalaze na udaljenom serveru. Korisniku se prilikom prelaska mia iznad linka moe 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 sadri 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 moe 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 ureivanje mapa slika i njihovih vruih taaka, tako da ne morate da brinete o kodu koji se nalazi ispod toga. Alati za vrue take u Dreamweaveru kreiraju mape slika na strani klijenta. Ako elite da u Dreamweaveru napravite mapu slika, treba da uradite sledee : 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. Definiite vrue take mape slika, preko jednog ili vie alata Hotspot. Obratite panju na to da postoje razliiti alati za sve vrste vruih taaka.
76 / 299
Dreamweaver MX 2004
Ako elite da nacrtate pravougaone ili krune vrue oblasti, izaberite odgovarajui alat i miem oznaite povrinu na slici. Kreiranje poligonalnih vruih oblasti moe biti malo sloenije. Ako elite da koristite alat za poligone, izaberite alat i u prozoru Document kliknite jednom preko slike za svaki ugao eljenog poligona. Zavriete tako to ete se vratiti na Property Inspector i kliknuti alat Arrow (u delu Map), da biste zatvorili poligon. Vrlo je vano da zvanino zavrite 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 neto, kliknite alat Arrow da biste napustili reim crtanja poligona, a onda izaberite taj poligon i izbriite ga. Rad sa vruim takama Nakon to ste u Dreamweaveru kreirali vruu taku, moete 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 nain.
Ako elite da menjate vruu taku nakon to ste je kreirali, moete da koristite dugme Arrow (nalazi se na Hotspot Property Inspectoru). Kliknite u vruu oblast, da biste je izabrali. Moete da je prevuete na novu lokaciju. Ako elite da promenite oblik, kliknite i vucite neku od taaka koje se prikazuju du ivica oblasti.
Padajui meniji
Padajui meni je element select iz forme, koji se prikazuje kao padajua lista sa opcijama. Ako kliknete neku od opcija, to je isto kao da ste kliknuli neki link. Padajui meni moe da ima linkove na lokalne ili udaljene dokumente, email linkove ili linkove na neki drugi tip datoteke koji moe da postoji u HTML-u. Padajui meni esto sadri 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 iskau se najbolje koriste u specifinim aplikacijama. Generalno, kada je bitno da se utedi 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 padajueg menija u Dreamweaveru Padajui meni se u Dreamweaveru lako pravi. Samo treba da pratite sledee 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. Moete i da izaberete Insert > Form > Jump Menu.
77 / 299
Dreamweaver MX 2004
3. Kada se otvori okvir za dijalog Insert Jump Menu, definiite stavke koje treba da se pojave u meniju i na koju lokaciju pretraiva treba da poalje korisnika, kada izabere tu opciju. U polju Text unesite tekst koji elite da se prikae. Kliknite plus (+) da biste u meni dodali stavku. URL moete da zadate preko dugmeta Browse ili da ga unesete runo. Ovaj okvir za dijalog moete da koristite i za podeavanje opcija iz padajueg menija, kao to je na primer, da li da postoji dugme Go.
Kod padajueg menija Kod za ovakav meni se sastoji od oznaka <form> i <select>, kao i Java Scripta, koji omoguava rad menija. Nakon to ste ubacili meni, ako ste u svom dokumentu podesili prikazivanje nevidljivih elemenata, treba da se prikae crveni pravougaonik forme koja sadri meni. Ako izaberete padajui meni, na panou Behavior ete videti odgovarajue ponaanje.
78 / 299
Dreamweaver MX 2004
Koristiti ili ne dugme Go Kada kreirate padajui meni, imate mogunost da ga napravite kao padajui meni ili kao padajui meni sa pridruenim dugmetom Go. Dugme Go je dugme forme, sa oznakom Go, kojim se, kada se klikne, aktivira meni. Padajuem meniju nije potrebno dugme Go, poto se meni uobiajeno aktivira kada korisnik klikne stavku iz menija. Ali, ta ako je odredite koje korisnik eli da izabere ve prikazano u meniju? Na primer, moda je to odredite podrazumevana opcija iz menija (prva stavka iz liste), ili je korisnik moda na stranu dospeo preko dugmeta Back u pretraivau. U takvim sluajevima dugme Go omoguava da se meni aktivira bez promene izabranog odredita. Ako elite da dugme Go ukljuite prilikom definisanja menija, izaberite opciju Insert Go Button After Menu u okviru za dijalog Insert Jump Menu. Korienje menija sa frejmovima i viestrukim prozorima Padajui meniji se mogu koristiti za uitavanje novih strana u nove prozore, ili u razliite prozore u skupu frejmova. Ovo moete zadati preko opcije Open in Main Window za svaki URL koji ste definisali za stavke iz menija. Ako padajui meni novi URL otvara u posebnom prozoru, treba da donesete jo jednu odluku: Nakon to je uitana strana sa odredine adrese, da li elite da se u padajuem meniju i dalje prikazuje stavka za to odredite, ili elite da se prikae prva stavka? Ako otvarate novi prozor (atribut target je _blank), onda elite da se meni vrati. Ako otvarate poseban frejm, ali u istom prozoru pretraivaa, onda ne elite vraanje stavke. Da li e se izabrana stavka promeniti ili ne zavisi od opcije Select First Item After URL Change, koja se podeava u okviru za dijalog Insert Jump Menu. Ureivanje padajueg menija Nakon to ste napravili padajui meni, moete ga dalje menjati. Ovo se radi preko Property Inspectora i panoa Behaviors. Moete i da menjate, dodajete ili briete dugmad Go. Property Inspector za padajui meni Ako elite da vidite Property Inspector za padajui meni, izaberite taj meni. Ovo je u sutini List/Menu Property Inspector, sa ubaenim stavkama. Pored toga to padajui meni moete da promenite od menija sa prikazanom jednom stavkom, na listu (sa prikazanih nekoliko stavki odjednom), moete i da menjate odredita. Ovo ete uraditi ako kliknete dugme List Values.
Ponaanje padajueg menija Izaberite padajui meni i u panou Behaviors ete videti da je dodato ponaanje. Ovo ponaanje je u okviru elementa form, a koristi se triger onChange. (To znai da se ovo ponaanje izvrava svaki put kada se iz menija izabere druga stavka.) Kliknite dva puta brzo to ponaanje. Otvorie se okvir za dijalog Jump Menu. Ovaj okvir za dijalog je skoro identian sa okvirom za dijalog Insert Jump Menu. Nema samo opcija Menu Name i Insert Go Buttons, koje se definiu samo prilikom kreiranja menija. Rad sa dugmadima Go Ako ste napravili padajui meni sa dugmetom Go, onda postoji i ponaanje Jump Menu Go. Ova akcija se
79 / 299
Dreamweaver MX 2004
izvrava kada se desi dogaaj onClick. Kliknite dva puta brzo, da biste promenili ovo ponaanje. Jedina opcija je da se klikne dugme, koje pokree izvrenje stavke iz menija. Ako odluite da Vam nije potrebno dugme Go, moete da ga slobodno izaberete i izbriete u bilo kom trenutku. Ako nakon kreiranja padajueg menija odluite da Vam je dugme Go potrebno, moete da ga dodate na jedan od sledeih naina: 1. Ubacivanjem dugmeta forme, u formu koja sadri padajui meni. (Postavite kursor direktno iza padajueg 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 ponaanje Jump Menu Go. Veina korisnika vie voli da ih padaji meni alje na novu destinaciju im iz njega izaberu neku stavku. Ipak, ako elite da se meni aktivira samo ako korisnici prvo iz njega neto izaberu, pa kliknu dugme Go, treba da uradite sledee: 1. Kreirajte padajui 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 padajui meni. 3. U delu Code pronaite i ispitajte kod za meni (stavka select). Izbacite rukovaoca dogaajem i poziv funkcije, kao to je ovde pokazano: <select name=:"menu1" onChange="MM_jumpMenu(' parent', this,0) "> Obratite panju na to, da nakon to ovo uradite, Dreamweaver vie stavku select ne prepoznaje kao padajui meni, tako da ne moete da koristite pano Behaviors i da tamo menjate ponaanje.
Rollover
Obino se link, u trenutku kada korisnik iznad njega postavi pokaziva mia na neki nain menja. Na primer, tekstualni link moe da promeni veliinu ili boju, od normalnih na bold. Ako uinite da se link vizuelno menja, on kao da kae "Ovde moe da klikne". Ovakve mogunosti se nazivaju rollover i obino se primenjuju na slike. Rollover se u sutini sastoji od dve slike. To je primama slika ili up slika, koja se prikazuje kada se strana po prvi put uita i sekundarna slika, ili over slika., kojom pretraiva menja primarnu sliku, kada se iznad primarne postavi kursor. Dve slike moraju biti iste veliine. Ako to nije sluaj, sekundarna slika e preuzeti dimenzije primarne. Dobijanje efekta rollover u Dreamweaveru Rollover za slike se u Dreamweaveru vrlo lako dobija i to zahvaljujui 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. Otvorie 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 pronaite Original (Up) sliku, i Rollover (Over) sliku, ili u svako polje unesite ime i putanju do odgovarajuih 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 potraite i izaberite URL koji se posetiocu alje kada se klikne rollover slika. Moete 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 uitavanje i rollover Pretraiva sve resurse sa strane obino uitava kada se prvi put pojave na strani. To znai da se uitava up slika, ali poto se slika ispod nje ne prikazuje, a moda se i nikad nee prikazati, to se ona i ne uitava. Kada neko postavi kursor iznad gornje slike, onda se preuzima donja. Ovo moe da potraje izvesno vreme, ime se gubi utisak koji efekat rollover ostavlja. Moda e korisnik pomeriti mia sa slike pre nego to se uita slika. Ako tu sliku unapred uitate, onda je druga slika spremna i eka da se prikae. Mogue je da se ona nikad ne prikae 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 pie JavaScript kod koji pretraivau govori da treba da uita i primarne i sekundarne slike kada se strana po prvi put uitava. Na taj nain se eliminie odlaganje. Zbog toga je dobro da, kada ubacujete objekat Rollover Image, uvek proverite da li je ta opcija ukljuena. Ureivanje rollover slika Objekat Rollover Image je samo preica do sloenije procedure koja u Dreamweaveru postoji za umetanje slika, dodeljivanje linka toj slici i dodavanje ponaanje Swap Image i Swap Image Restore. Nakon to ste ubacili rollover sliku, ona postaje slika sa linkom i dodeljenim ponaanjem. 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 ponaanje Swap Image. Otvorie se okvir za dijalog Swap Image u kome moete da menjate sekundarnu sliku i opcije vezane za prethodno uitavanje.
81 / 299
Dreamweaver MX 2004
Linije za navigaciju
Termin linija za navigaciju se moe 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 prua mogunost da lako prelazi sa jedne na drugu stranu. Linija za navigaciju (navbar) moe biti skup tekstualnih linkova, slika sa linkovima ili mapa slika. Sloeniji 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 omoguava jednostavno kreiranje ovakve linije za navigaciju. Svako dugme ili element na liniji za navigaciju Dreamweavera moe imati do etiri stanja. Dva stanja odreuju standardne funkcije vezane za rollover. Up Slika se prikazuje kada korisnik nije u interakciji sa elementom. Over Slika se prikazuje kada se pokaziva mia zadri iznad slike. Izgled elementa se menja da bi se signalizirala interaktivnost
Druga dva stanja odreuju 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 izmeu strana (obino se ovde radi sa skupom frejmova). Ovo je slika koja se prikazuje kada korisnik klikne element. Kada se element klikne i kada se uita 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 mia postavi iznad donje slike.
Svaka linija za navigaciju ne mora da sadri 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 sledee : 1. Na paleti Common Insert, iz objekata Images, izaberite objeka Navigation Bar. Moete i iz menija izaberete opciji Insert > Image Objects > Navigation bar. 2. Otvorie 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 razliita stanja.
82 / 299
Dreamweaver MX 2004
3.
4.
5. 6.
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, moete da potvrdite opciju Preload Images. Ako elite da odreeni element na strani bude u stanju Down kada se strana uitava, 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.
Ureivanje linije za navigaciju Nakon to ste ubacili liniju za navigaciju, ona se sastoji od nekoliko slika. Svaka od tih slika ima dodeljeno ponaanje Set Nav Bar Image. Ako izaberete da se linija za navigaciju definie u tabeli, onda postoji i oznaka.
83 / 299
Dreamweaver MX 2004
Slobodno moete da menjate poziciju slika na liniji za navigaviju, da podeavate osobine tabele u kojoj se slike nalaze, da menjate URL adrese na koje vode linkovi, pa ak i da briete 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. Otvorie se okvir za dijalog Modify Navigation Bar, koji jako lii 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 moete da podeavate rollover efekat za sliku koja je trenutno izabrana; na kartici Advanced moete da podeavate vrlo interesantne promene, koje se deavaju na osnovu toga ta se deava sa izabranom slikom.
84 / 299
Dreamweaver MX 2004
Rad sa linkovima
Linkovi su u sreditu aktivnosti na Webu. Postoji puno toga to moete uraditi da oni postanu jo moniji, zabavniji i vie interaktivni, ak i dostupniji.
Dostupniji linkovi
Linkovi nisu po prirodi nedostupni. U grafikom interfejsu korisnik moe da pogleda na ta koji link ukazuje u da izabere onaj koji mu je potreban. ita ekrana ita celu stranu od poetka do kraja, pa se linkovi mogu lako izgubiti u gomili. Korisnik koji eli da doe pravo na sadraj strane, ne eli da ita gomilu linkova sa linije za navigaciju. Korisnik koji eli da upotrebi link na dnu strane, ne eli da slua celu stranu, da bi mogao da negde ode. U standardu Section 508, 1194.22(o), stoji: Treba da postoji nain koji omoguava da korisnik preskoi linkove za navigaciju koji se ponavljaju. Ne postoji magini HTML atribut koji bi to mogao da uradi, kao to ni Dreamweaver ne moe da tu magiju uradi za Vas. To ipak ne znai da je to teko uraditi. Reenje je da se iznad linkova koji se ponavljaju doda jo jedan link. Evo kako se to radi: 1. Na kraju skupa linkova, neposredno ispred poetka glavnog sadraja strane, ubacite kotvu sa imenom. Nazovite je na primer, main 2. Na poetku skupa linkova ubacite tekst ili sliku i linkujte je na tu kotvu. Tekst moe, na primer, biti Skip Navigation (Preskoi navigaciju), ili Main Content (Glavni sadraj). 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 proitati alt tekst, ali grafiki pretraivai e u potpunosti preskoiti 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, najvanije upotreba oznaka alt, odnose i na mape. Pored toga, u standardu Section 508 1194.22(e) se kae: Za svaki aktivni region mape slika na serveru treba da postoji redudantni tekstualni link. Mape slika na strani klijenta ne zahtevaju redudantne linkove poto svaka vrua oblast ima svoj atribut alt. Jedna nezvanina napomena je da treba da budete svesni da su mape slika dostupnije ako su vrue oblasti velike i ako ih je lako kliknuti. One bi trebalo da budu manje ili vie uniformne veliine, ako ne i oblika i dovoljno velike da ih kursorom moete lako nai. Vrua oblast bi uvek trebalo da odgovara delu grafike koji jasno komunicira sa URL destinacijom. Ako se ne koriste rei, onda treba da se primene ikone koje su svima jasne (kao to je potansko sandue, za link na elektronsku potu).
Podeavanje linkova preko CSS-a

Linkovi se u pretraivau podrazumevano istiu plavom bojom. Tekst sa linkom je podvuen plavom linijom, slike sa linkom imaju plavi okvir. Linkovi koji su ve bili poseeni dobijaju purpurnu liniju ili okvir. Premda neki web strunjaci dokazuju da ova podeavanja ne bi trebalo meati (tako da posetioci ne bi bili zbunjeni, tako da u njima ne prepoznaju linkove), veina web dizajnera ipak uradi neto dodatno, da bi podesili izgled linka. Slike sa linkovima Okvir oko slike sa linkom moe da se iskljui specijalnim podeavanjem atributa border slike. Ova vrednost treba da se podesi na 0. Svaki put kada nekoj slici u Dreamweaveru dodate link, ovo se automatski deava. Tekst sa linkom Izgled teksta sa linkom, boja teksta, da li je podvuen, itd. se moe podeavati preko CSS-a koji menja oznaku a. U Dreamweaveru ovom poslu moete prii na dva naina: preko prozora Page Properties ili preko panoa CSS Styles. Upotreba panoa CSS Styles za kontrolu izgleda linka Ovo je sporiji nain da se to uradi, ali dobijate jasniju predstavu ta se deava iza scene. Takoe, imate i vie opcija na raspolaganju. Moete, na primer, da upamtite stilove za formatiranje linkova u nekoj spoljanjoj datoteci (style sheetu) i da tako taj stil koristite na celom sajtu. Ako elite da promenite osnovni izgled i ponaanje teksta sa linkom, otvorite pano CSS Styles i napravite novi stil U okviru za dijalog New Style izaberite da promenite definiciju oznake a. Postoji mogunost da to uradite samo za tekui 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 najee koriste se nalaze u kategoriji Type. Ako elite da podesite boju linka, izaberite boju iz polja Color. Ako elite da ukonite podvlaenje, podesite opciju Decoration na None. Ako elite da linkovi budu ispisani masnim slovima, izaberite Bold (ili neko od podeavanja 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 padajueg menija koji se otvara izaberite jednu od slededh opcija : a:link kontrolie kako izgledaju obini linkovi (slino sa promenom definicije oznake a). a:hover kontrolie kako e link izgledati kada korisnik pree preko njega. a:visited kontrolie kako izgledaju linkovi koji su bili poseeni (oni koji su poslednji korieni). a:active kontrolie 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 moete da dalje formatirate linkove. Jedan od efekata koji je trenutno najpopularniji je da se sakriju linije koje podvlae 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 troite vreme na podeavanje razliitih stilova u panou CSS Styles, izgled linka moete 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 najvie koriste za obine linkove, za podeavanja koja se odnose na izgled linka kada se iznad njega postavi kursor, izgled linka koji je poseen, kao i aktivne linkove.
Kada na ovaj nain izaberete potrebna podeavanja, Dreamweaver dodaje sve potrebne CSS stilove (a., a:hover, itd.) u internu datoteku stilova, za tekui dokument. Podeavanje boja linka bez CSS-a Ovo je nain koji se pre pojave CSS-a koristio za podeavanje boje obinih, poseenih 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 Vaa strana koristi u zaista starim verzijama pretraivaa. Ipak, ako elite, moete da Dreamweaveru naloite da boje linkova podeava na ovaj nain. 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 nee pojaviti. Umesto toga, idite na osobinu Appearance i tu podesite boje linkova. Neete biti u stanju da menjate drugre karakteristike linkova, kao to je brisanje linija za podvlaenje, ili dobijanje efekta hover, a sve to zato to ste izbacili CSS.
Podeavanje 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 prosleuje kao parametar se kodira u obliku para ime/vrednost i dodaje na kraj URL adrese, odvojen znakom pitanja (?). Ako ima vie parametara, oni se meusobno odvajaju ampersendom (&). Ako neka od vrednosti koje se prosleuju sadri razmak, taj razmak se mora kodirati preko znaka plus (+) ili se zadati kao ASCII vrednost (%20). URL sa parametrima koji se prosleuju izgleda ovako: mypage.html?username=fred+jones&password=logmein Strana na kraju ovog linka (u ovom sluaju mypage.html) moe 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 poaljete formu preko metoda GET.)
88 / 299
Dreamweaver MX 2004
Dodavanje URL parametara linku u Dreamweaveru Ako u Dreamweaveru elite da dodate parametar linku, uvek moete da ukucate parametar u polje Link u Property Inspectoru, naravno, ako se seate sintakse i nemate nita protiv kucanja. Ipak je lake da pustite da Vam Dreamweaver pomogne. Kliknite dugme Browse da biste potraili link. Kada se otvori okvir za dijalog Select File, izaberite datoteku na koju link vodi, a onda kliknite dugme Parameters. Otvorie 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. Prosleene informacije moete da obraujete i preko JavaScripta. Na alost, u Dreamweaveru ne postoji neko unapred ugraeno ponaanje, vezano za to, ali ako nemate nita protiv pisanja malo koda, moete da dobijete neke vrlo korisne efekte. ta ako, na primer, posetioci mogu na neku stranu na Vaem sajtu da dou sa razliitih 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 prikae prilagoeni sadraj, ubacite sledei 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 prosleuje, prikazuje se razliit naslov. Skript se moe promeniti tako da prikuplja bilo koji URL parametar i prikazuje opcionalni sadraj na strani. Potrebno je samo da iskopirate sledei kod i da ga postavite u dokument u Dreamweaveru, tamo gde elite da se taj sadraj prikae: <script language="JavaScript"> var params = location.search; var x = params.substring(x.indexOf("=")+1,x.length); if (x=="value1") document.write('content here'); else if (x=="value2") document.write('content here'); else document.write('default content here'); </script> Kod moete da prilagodite svojim potrebama: Umesto odreenih delova koda, unesite svoje informacije (vrednosti parametara, sadraj). Uvek treba da proveravate najmanje jednu vrednost, tako da uvek treba da postoji red koji poinje sa if. Za bilo koje druge vrednosti za koje elite da imate poseban sadraj, ubacite liniju else if. Ponovite taj red onoliko puta koliko elite. ta se deava ako nema prosleenih parametara? Ako elite da se prikae podrazumevani sadraj, moete da koristite klauzulu else. Ako ne elite da se prikazuje sadraj, onda nemojte ubacivati ovu klauzulu. Sebi moete da olakate ako svaki od ovih redova ubacite u parie koda (snippet), tako da ne morate da ih svaki put kucate: 1. Otvorite pano Snippets (Window -> Snippets). 2. Desnim tasterom mia kliknite faciklu JavaScript Snippets i iz pomonog 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 pare. Nazvaemo ga Parameter-Wrapper (omota).
89 / 299
Dreamweaver MX 2004
Kao tip unesite Wrap. U delu Insert Before, unesite: <script language="JavaScript"> var params = location.search; var x = params.substring(x.indexOf("=")+1,x.length); 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 pare Parameter-If i kliknite dugme Insert. Kada se u dokument postavi opti 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 odgovarajue pare koda. Nakon toga promenite delove value i content. Na kraju treba da izaberete sve linije koda koje ste napravili i da ubacite pare Parameter-Wrapper. Ovim e iskazi if biti ubaeni u skript koji obrauje parametre. Poboljanje linkova na elektronsku potu preko parametara Parametri URL-a se mogu koristiti i kod e-mail adresa za definisanje dodatnih stavki, kao to su subject i cc. To znai da kada korisnik klikne link, i kada se otvori program za elektronsku potu, u prozoru za unos nove poruke ove stavke se ve nalaze na svojim mestima. Na alost, za dodavanje parametara ne moete da koristite prozor Parameters iz Drearmveavera, poto se on poziva iz okvira za dijalog Select File, kome se pristupa kada traite datoteku. E-mail adresa se ne moe traiti na ovaj nain, jer je u pitanju apsolutni URL. Sa druge strane, parametre moete dodati tako to ete ih runo uneti u polje Link, u Property Inspectoru (koje je vrlo malo), a moete ih naravno uneti i direktno u prozoru Code. Prilikom unosa treba da imate na umu pravilnu interpunkciju, odnosno da na poetku 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, moe da izazove neki dogaaj u JavaScriptu, to znai da oznaka moe da ima dodeljeno neko ponaanje. Prazni linkovi i ponaanje 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 sluaju 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 pretraivau govori da kada se izabere link, ne treba nita raditi. Prazan link je mogue kreirati i ako se u polju Link unese oznaka funte (#) (lake je otkucati). Ovaj link ukazuje na tekuu stranu, tako da se u pretraivau u sutini nita ne deava. Ipak, ako je link negde prema kraju dugake strane, onda klik na taj link moe navesti pretraiva da prikae poetak 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, moete 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 moete da unesete i u polje Link Property Inspectora. Jedini problem je da je ovo polje prilino malo, tako da je teko da se prati ta se unosi.
90 / 299
Dreamweaver MX 2004
91 / 299
Dreamweaver MX 2004
7. Podeavanje glavnog sadraja

Osnovno o sadraju zaglavlja
Sadraj zaglavlja moda nije glamurozan, ali ga nije ni teko shvatiti, a izuzetno je koristan. U ovom odeljku ete videti kako se u HTML-u kodira sadraj zaglavlja, i kako se interpretira u pretraivaima, mainama za pretraivanje, itd. Takoe smo objasnili i interfejs koji se u Dreamweaveru koristi za rad sa sadrajem zaglavlja.
Kako se sadraj zaglavlja ponaa u pretraivau

Standardna strana u HTML-u sadri oznake head i body. Oznaka body sadri ceo sadraj koji e se prikazati u prozoru pretraivaa. U zaglavlju se nalaze razliite informacije koje se nee prikazati (u najmanju ruku ne direktno), premda im se moe pristupiti da bi se odredilo kako se stranom rukuje. Jednom delu zaglavlja pristupa pretraiva, drugom neki drugi programi, kao to je serverski softver, maine za pretraivanje ili softver za proveru. Nekim delovima se nikad ne pristupa, izuzev od strane ljudi koji ele da menjaju kod. Konzorcijum W3C definie nekoliko elemenata koje svako zaglavlje koje je dobro napravljeno treba da sadri. Na alost, pretraivai jo uvek nisu u potpunosti implementirali sve te elemente, tako da ih ne moete da u punoj meri iskoristiti.
Kako se u Dreamweaver u radi sa zaglavljem

U Dreamweaver-u postoje dva osnovna interfejsa za rad sa sadrajem zaglavlja. To je meni objekata Head, koji se nalazi u kategoriji HTML na paleti Insert, koji se koristi za dodavanje sadraja u zaglavlje i opcija Head Content, zajedno sa Property Inspectorima koji se koriste za ispitivanje i promenu sadraja zaglavlja. Pregled i ureivanje sadraja zaglavlja Sadraj zaglavlja se u prikazu Design Dreamweavera prikazuje kao linija na vrhu prozora Document, pri emu se za svaki element prikazuje ikona. Ako elite da ukljuite ili iskljuite prikazivanje sadraja zaglavlja, moete da koristite opciju View Options > Head Content. (Meniju View Options moete da pristupite sa palete Document ili iz menija View.) Obratite panju na to da se opcija Head Content nee 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 moete da promenite redosled ako po liniji zaglavlja prevuete njihove ikone. Redosled elemenata u zaglavlju obino nije bitan, poto svaki element ima razliitu funkciju, i poziva se kada je potrebno, bez obzira na poziciju. Dodavanje sadraja zaglavlja Neke elemente zaglavlja (title, script i style) Dreamweaver automatski ubacuje kada pravite novu stranu ili ureujete postojeu. Drugi elementi zaglavlja koji se esto koriste u kategoriji HTML imaju svoje odgovarajue 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 moete da proirite, ako potraite neko proirenje (Macromedia Exchange for Dreamweaver), koje radi to to Vam je potrebno. Elemente zaglavlja moete da ubacite u prikazima Code i Design.
92 / 299
Dreamweaver MX 2004
Postoje, meutim, razlike izmeu 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 vai ak i ako to dovodi do ubacivanja elementa potpuno izvan elementa head, ili ubacivanje u neki drugi element HTML-a. (Oigledno je sigurnije da koristite prikaz Design, osim ako niste u potpunosti sigurni u HTML sintaksu koju koristite.)
Rad sa oznakama meta

Meta znai "o". Namena oznake meta je da uva informacije c tekuem dokumentu tako da pretraivai, serveri, maine za pretraivanje ili ak i ljudi mogu te informacije pronai i obraditi. Za svaku novu vrstu informacija koju uvate se koristi razliite 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 pretraivai i maine za pretraivanje 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 podseaju one koji pozajmljuju kod, od koga su ga pozajmili preko oznake author: <meta name="author" content="Julius Marx"> Razliite 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 moete nai vie informacija o atributu http-equiv, koja se ovde koristi na mestu atributa name.) Standardna oznaka meta govori pretraivau koji skup karaktera treba koristiti za prikazivanje tekstualnih delova strane. ISO-8859-1 ukazuje na skup Latin-1, koji se koristi u veini 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 generiki objekat meta

Svaka oznaka meta se obavezno sastoji od imena i nekog sadraja, tako da generiki objekat Meta iz Dreamweaver a predstavlja dobar alat za umetanje korisnikih meta informacija.
Ako elite da ubacite oznaku meta, treba da uradite sledee: 1. Na paleti Insert pronaite kategoriju HTML i od objekata Head izaberite objekat Meta. 2. U okviru za dijalog koji se otvara preko pomonog menija izaberite atribut name ili http-equiv. (Atribut http-equiv povezuje atribut i odgovarajue 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. Zato se ovaj generiki objekat ne bi koristio za unos svog meta sadraja? Oznake meta koje koriste standardne kljune rei, koje pretraiva ili drugi agenti mogu da obrauju takoe trae standardnu sintaksu. O zahtevima vezanim za specifinu sintaksu vode rauna specijalni Meta objekti iz Dreamweavera. U Dreamweaveru ne postoje sve oznake meta koje biste poeleli da koristite.
Kljune rei meta i njihov opis

Nesumnjivo je da su oznake meta koje se najvie koriste one koje mainama za pretraivanje pomau da pronau u vrate informacije o dokumentima. Najvie 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 sadri listu rei odvojenih zarezima, koje posetioci na webu mogu da otkucaju u svom polju search. Ta re bi trebalo da ih odvede do tekueg dokumenta. Oznaka meta description sadri nekoliko reenica koje se mogu koristiti na strani sa rezultatima pretraivanja, da bi se predstavio tekui dokument. Za svaku od ovih oznaka postoji u Dreamweaver u odgovarajui 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 mogunost pretraivanja Jedno je koristiti kljune rei i opise, a drugo koristiti ih na pravi nain. to vie budete znali o mainama za pretraivanje i nainu njihovog rada, to e rezultati pretraivanja Vaih strana biti bolji. Maine za pretraivanje rade tako to alju automatizovane programe, koje nazivamo robotima (ili web puzaima, ili pijunima) da indeksiraju web strane. Indeksiranje se sastoji od vraanja dokumenata i rekurzivnog vraanja svih dokumenata koji su preko linka povezani sa tim dokumentom. Od koje strane treba poeti indeksiranje roboti odreuju na razliite naine. Tu spada i registracija strane kod maine za pretraivanje, koju radi autor web strane ili webmaster. Kada posetilac pristupi maini za pretraivanje i unese jednu ili vie kljunih rei, maina vraa rezultat na bazi svoje analize dokumenata koje je vratila. Rezultati se baziraju na pronaenim kljunim reima, uparenim reima u okviru opisa, naslova strane, vidljivog sadraja dokumenta, linkova, kao i alt teksta. Evo kako bi izgledao kod iz zaglavlja koji je napisan tako da mogunost pretraivanja i pronalaenja 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 trai ime datoteke koje se nalazi ispred znaka jednakosti i lokacija frejma po imenu mainFrame se podeava na tu vrednost. U kodu ete verovatno zameniti mainFrame imenom svog frejma za sadraj. 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 izvriti kada se uitava skup frejmova, to znai da oznaka frameset mora da pozove tu funkciju u dogaaju onLoad. Kada se otvori okvir za dijalog Edit Tag, idite u kategoriju Events > onLoad. Selektujte dogaaj onLoad i u delu content unesite sledee : loadPage()
7. Nakon to zavrite 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 uitate, a da se u frejmu content prikae strana catalog.html. URL koji se prikazuje u polju sa adresom pretraivaa je: http://mvdomain.com/index.html?page=catalog.html Ovo moete isprobati ako pogledate svoju stranu sa frejmovima u pretraivau i runo unesete znak pitanja i URL parametar. Ako elite da na stranu sa frejmovima doete sa nekog drugog mesta na svom sajtu, treba da uradite sledee: 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. Pronaite svoj dokument sa frejmovima. 3. Pre nego to zatvorite okvir za dijalog Select File, kliknite dugme Parameters. Otvorie se drugi okvir za dijalog. Unesite stranu kao ime parametra, a kao vrednost unesite ime strane sa sadrajem. 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 traiti preko dugmeta browse. Ako volite da kucate i ako dobro poznajete pravila vezana za parametre URL adrese, moete 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 panju na to da prethodni primer pretpostavlja da se sve datoteke nalaze u istoj fascikli, iako to nije uvek sluaj. URL parametri moraju sadrati apsolutni URL ili URL koji je relativan u odnosu na dokument sa skupom frejmova. Dreamweaver Vam ne moe pomoi u ovome. Ako je strana sa katalogom u nekoj podfascikli, po imenu departments, onda konani link treba da izgleda ovako: index.html?page=departments/catalog.html Napravite posebno pare koda Ako esto koristite frejmove, onda funkciju loadPage() moete da upamtite kao poseban deo koda, tako da je kasnije moete 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 runo dodati poziv te funkcije. Ovo moete da uradite preko panoa Behaviors: 1. U Tag Selectoru izaberite oznaku body. 2. U panou Behaviors kliknite kolonu za dve kolone, tako da se prikau svi dogaaji. 3. Pronaite dogaaj onLoad. U koloni pored ovog dogaaja unesite loadPage().
131 / 299
Dreamweaver MX 2004
Dodatak Exchange Ne postoji neki pomoni program u okviru Macromedia Exchangea, koji bi se koristio za navigaciju kroz frejmove. Sa druge strane, stalno se prave nova proirenja, tako da treba da povremeno proverite da li se neko pojavilo. Mogunost oznaavanja strana Nakon to ste u svoj dokument sa frejmovima ubacili skript loadPage(), lako je proveriti da li strane moete da markirate pojedinano. Svaki put kada korisnik oznai stranu, ta oznaka se prikae u polju pretraivaa 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.
Zadravanje strana u frejmovima

Jedan od problema sa kojim se suoavaju autori web strana sa frejmovima je: ta uraditi ako korisnik sluajno doe na neku od strana koje su u frejmovima, ali je uita bez okvira i izvan skupa frejmova? Ovo se moe lako desiti ako, na primer, maina za pretraivanje pronae neku od Vaih strana i korisnika poalje tamo. Ako na strani nema indikacije web sajta kome ona pripada i (to je jo vanije) ako nema naina da se korisnik vrati nazad na osnovni sajt, korisnik nikad nee ni uti za Vas. Vaa strana e postati siroe u sajber-svetu. Ovo se moe reiti na razliite naine, poev od automatizovanih reenja sa skriptovima, pa do jednostavnih dodataka vezanih za navigaciju. Ljudi koji se bave frejmovima za ovo koriste termine frame jamming i frame stuffing. Podnoje sa navigacijom Problem siroeta moete reiti brzo i jednostavno, ako uvek na stranu ubacujete navigaciju i indetifikaciju. Na primer, malo podnoje (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 podnoje preko paria koda Navigaciju moete da napravite kako god elite, ali ako elite da to uradite brzo, moete proveriti delove koji dolaze uz Dreamweaver. U panou Snippets (Window > Snippets) proverite ta se nalazi u fascikli Navigation/Horizontal. Ubacite svoje podnoje u biblioteku Skupove frejmova ete verovatno koristiti zbog njihove efikasnosti. Nakon to ste napravili podnoje sa navigacijom, ubacite ga u biblioteku u Dreamweaveru, tako da ga kasnije moete lako prevui i ubaciti na koju god stranu elite. Ubacivanje skripta: Uslovno prikazivanje informacija u podnoju Sa vrlo malo dodatnog truda, moete 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 sloen, ali je vredan truda. Kao i obino, Dreamweaver nudi svoju pomo. Evo koji su osnovni koraci: 1. Otvorite stranu koja uobiajeno treba da se prikae kao deo skupa frejmova i kreirajte sadraj za navigaciju i identifikaciju, koji se prikazuje ako strana nije u skupu frejmova.
132 / 299
Dreamweaver MX 2004
2. Sada dolazi ono glavno. Selektujte sadraj koji ste napravili i preite 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 moete da uradite runo ili preko komande Edit > Find and Replace. Sledei kod nee raditi: <table> <tr> <td>Joe's sajt</td> </tr> </table> Ali, ovaj kod hoe: <table><tr><td>Joe\ 's sajt</td></tr></table> 3. Sada izaberite preieni 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 padajueg menija za jezike izabran jezik JavaScript. U polje Content unesite sledei sadraj (bez greaka). <!.. if (self == top) document.write(' '); //-->
6. Postavite kursor izmeu dva jednostruka navodnika izaberite Edit > Paste. Ovim bi preieni 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: <script language="JavaScript"> <!-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 panju 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 sluaj, onda ste izostavili novi red ili jednostruki navodnik u nekom delu koda. 9. Kada se vratite u prikaz Design, uslovni sadraj e se prikazati kao zlatna ikona skripta. Ako elite da ubudue menjate ovaj skript, treba da selektujete ikonu i da sa Property Inspectora kliknete
133 / 299
Dreamweaver MX 2004
dugme Edit. Sadraj oznake noscript e se prikazati kao i obino u prikazu Design. Ako elite da napravite snipet (pare koda) koji sadri sav kod koji ste ubacili, treba da uradite sledee: 1. U prikazu Design selektujte ikonu skripta koja predstavlja uslovni sadraj i iskopirajte je (Edit > Copy). 2. Otvorite pano Snippets (Window > Snippets) i desnim tasterom mia kliknite fasciklu snippet. Iz pomonog 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 zavrite, kliknite OK da biste zatvorili okvir za dijalog.
4. Naredni put kada elite da ubacite ovaj sadraj na neku stranu, samo prevucite ovaj snipet sa panoa Snippets i postavite ga na odreeno mesto u dokumentu. Moete da napravite i snipet koji sadri samo ljusku JavaScripta, tako da u budunosti moete da dodajete razliit uslovni sadraj. Evo kako ete to uraditi: 1. Otvorite pano Snippets (Window > Snippets) i desnim tasterom mia kliknite fasciklu JavaScript. Iz pomonog 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 sledee: <script language="JavaScript"> <! - if (self == top) document.write(' U tekstu koji sledi iza navedenog treba da pazite da nema praznih redova 4. U polju Insert After unesite sledee: '); //--> </script> 5. Nakon to zavrite, kliknite OK da biste zatvorili okvir za dijalog. Naredni put kada budete eleli da ubacite uslovnu navigaciju u skup frejmova treba da uradite sledee: 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. Preite u prikaz Code. Obriite sve nove redove i ispred svih apostrofa i jednostrukih navodnika ubacite kosu crtu (\). 3. Selektujte sav preieni kod. 4. Otvorite pano Snippets, selektujte snipet sa uslovnim kodom i kliknite dugme Insert sa dna panoa. Ovim se oko Vaeg sadraja ubacuje JavaScript kod. Pogledajte Exchange Ako Vam je sa uslovnom navigacijom potrebno malo pomoi, moete da isprobate objekat Write If Frameset, koji postoji u okviru programa Macromedia Exchange. Ovaj objekat radi slino kao snipet koji smo opisali u prethodnom odeljku. Kod njega postoji ogranienje da kod koji ubacujete ne sme imati prazne redove i dvostruke navodnike. On takoe trai da oznaka frameset ima atribut id. Skriptovi za automatsko uitavanje frejmova Postoji mogunost da ceo proces automatizujete, tako da kad god se strana uitava bez osnovnog skupa frejmova, automatski dolazi do njenog ponovnog uitavanja frejmovima. Ovo se radi preko JavaScripta koji
135 / 299
Dreamweaver MX 2004
se automatski izvrava. Na alost, Dreamweaver ne moe da napie ovaj skript umesto Vas. Ipak, postoji nekoliko opcija za ubacivanje ovakvih skriptova, ukljuujui 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 uitavanje strane sa frejmovima moete 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 sadrajem se automatski ubacuje u skup frejmova, ako ima podeen skript koji se nalazi u sekciji zaglavlja. Evo kako ete to da uradite: 1. Otvorite stranu sa sadrajem koju elite da pripremite. 2. Izaberite View > Head Content tako da se prikae 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 padajuem meniju language izabrana opcija JavaScript. U polje Content unesite sledei kod: <!-if (top == self) location.replace("frameset.html?page= .content.html"); //--> Ubacite ime svog dokumetna sa skupom frejmova i svoju stranu sa sadrajem. To treba da ubacite tamo gde je oznaeno masnim slovima. 4. Nakon to zavrite, kliknite OK da biste zatvorili okvir za dijalog. Ovaj skript e se u delu sa zaglavljem prikazati u obliku ikone. Pogledajte program Exchange: Proirenje frame-jamming Macromedia Exchange ima nekoliko proirenja koja ubacuju kod koji je slian 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 prie o kretanju kroz frejmove. Ponekad e Vam biti potrebno da svoju stranu dobijete bez frejmova. Ovo se moe urditi automatski, preko JavaScripta koji razbija frejmove ili runo, preko linkova sa atributom target. Razbijanje frejmova Razbijanje frejmova je potrebno kada koristite tue skupove frejmova. Da li ste se ikad nali u situaciji da se neka od Vaih strana nee u tudem skupu frejmova? Ovo se deava kada autor strane sa frejmovima, sluajno ili namerno, da link na Vau stranu, bez odgovarajueg atributa target. Poto postavljanje tue 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, moete da garantujete da se ona nikad nee pojaviti u okviru frejma. Na alost, Dreamweaver ne moe automatski da napie 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 nita protiv da malo kucate, moete 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 sadrajem zaglavlja prikae na vrhu prozora Document. Kliknite unutar sadraja 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 padajue liste language izabrana stavka JavaScript i u polje Conent unesite sledee: <!-if (self ! = top) top.location.replace(self.location); //-->
136 / 299
Dreamweaver MX 2004
5. Nakon to zavrite, 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 ubudue budete eleli da menjate ovaj skript, izaberite njegovu ikonu u delu sa zaglavljem i u Property Inspectoru kliknite dugme Edit. Pogledajte Exchange: Proirenja vezana za razbijanje frejmova Ako ipak elite da koristite kod koji su drugi napravili, moete da pogledate listu sa nekoliko proirenja koja su napravila nezavisna proirenja, a koja postoje u okviru Dreamweaver Exchange. Tu spadaju objekti Frame i Break Out of Frames, kao i ponaanje Bust Frames. Strane koje se lepo tampaju Druga stvar koja se odnosi na upotrebljivost, a koja mui sajtove sa frejmovima, je teko tampanje pojedinanih frejmova. Nita nije tako frustrirajue kao kada pokuate da odtampate svoju stranu, a dobijete lepo odtampan frejm sa navigacijom, pri emu ste bacili puno boje. Ovaj problem je najlake reiti ako napravite link na stranu koja se dobro tampa i to stavite na svaku stranu sa sadrajem. Kakve su to strane? Tu je sadraj samog frejma, ali nema banera ili navigacije sa strane. Da biste napravili link na stranu koja se dobro tampa, treba da uradite sledee. 1. Napravite nenametljiv link sa tekstom ili grafikom. Tekst moe 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 grafiki efekti koji se dobijaju preko frejmova

Deo zabave u radu sa frejmovima je mogunost da dobijete neobine grafike efekte ili efekte vezane za raspored. U narednim odeljcima emo pokazati neto od ovog, zajedno sa specijalnim instrukcijama kako da to uradite pomou Dreamweavera. Kako da sami napravite skup frejmova tipa Letterbox U Dreamweaveru ne postoji objekat letterbox, tako da ga morate sami napraviti. Koristiete 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 ubaen 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 sluajno 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 nain se gornji i donji frejm podeavaju sa visinom Height. Srednji frejm ete podesiti na odreeni 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 odreeni broj piksela. 6. Ponovite postupak i za unutranji 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 odreeni broj piksela. 7. Spoljanji frejmovi nee imati nikakav sadraj, tako da nisu potrebni ni klizai. Izaberite svaki od spoljanjih frejmova (top, bottom, left, right) i podesite opciju Scroll na None. Sami birate da li ete klizae ubaciti u centralni frejm. 8. Na kraju, poto e spoljanji frejmovi biti isti, za svaki od njih moete da koristite istu HTML datoteku. Postavite kursor u neki od spoljanjih frejmova i upamtite datoteku pod nekim optim 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: Proirenje Letterbox Frameset Ako su Vam se frejmovi tipa Letterbox toliko dopali, da nameravate da ih stalno koristite, moete da pogledate proirenje koje postoji u okviru programa Macromedia Exchange. To je proirenje 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 izmeu frejmova Neki od sajtova koji pokazuju najvie 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 sloena, ali zahteva malo vie razmiljanja, poto u veini grafikih programa ne postoje alati da se to lako uradi. Ako koristite Dreamweaver i Fireworks, to ete uraditi na sledei nain: 1. U Dreamweaveru napravite skup frejmova. Obratite panju na dimenzije frejmova. 2. U Fireworksu napravite novi dokument sa dovoljno velikim prostorom koji moe da pokrije oba frejma. 3. Napravite grafiku za pozadinu koja pokriva ceo prostor. 4. Napravite odseene objekte iste veliine i pozicije kao u frejmovima. Ako je potrebno, podesite grafiku tako da odgovara veliini 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 odgovarajueg frejma. Ako elite da kontroliete postavljanje slika u pozadini, moete da upotrebite i CSS.
Svet frejmova
Inlajn frejm, kao i obian frejm, definie pravougaonu oblast u prozoru pretraivaa, koja prikazuje deo drugog dokumenta. Za razliku od strandardnih frejmova, ovi frejmovi postoje u okviru obinih HTML dokumenata, u okviru oznake body. Ovaj frejm se ponaa kao i bilo koji drugi element na strani (slika, tabela i sl.). Inlajn frejmovi su korisni uglavnom iz istih razloga kao i obini frejmovi. Oni omoguavaju da se deo sadraja na strani menja, a da pri tome ne mora da se uitava cela strana. Oni omoguavaju da se klizaima kreete kroz deo strane, a da ostali sadraj ostaje na svom mestu, itd. I za njih kao i za obine frejmove postoje izvesni zahtevi vezani za dostupnost. Oni su deo HTML 4 specifikacije i trenutno ih podrava veina najvanijih pretraivaa.
Inlajn frejmovi (iframes) u Dreamweaveru

Dreamweaver samo delimino podrava 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 sledee: 1. Napravite dokument koji e sadrati osnovni raspored i koji odreuje gde treba da se postavi inlajn frejm. To treba da bude pravougaonik, koji se moe 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 prikae u okviru te pravougaone povrine. Ceo dokument ne mora da stane u oblast koja je predviena za inlajn frejm, poto je mogua upotreba klizaa, ako je taj dokument vei. 3. U glavnom dokumentu postavite kursor tamo gde treba da se prikae inlajn frejm. U ovom trenutku, inlajn frejm moete 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. Otvorie se okvir za dijalog Edit Tag. U kategoriji General dodelite potrebne osobine. 6. Kada zavrite 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 nee 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 sledee: 1. Preite u prikaz Code. U ovom kodu postavite kursor tamo gde elite da se prikae 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 nee 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 moete 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 moete da vidite frejm, moda ete imati problema da pogodite gde se on tano nalazi, ili ak da tano 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. Izmeu oznake za otvaranje i zatvaranje frejma moete da ubacite neki komentar, koji e Vam kasnije pomoi da ga pronaete, poto se komentari prikazuju kao zlatna ikona. Evo kako ete to uraditi: 1. Idite u okvir za dijalog Preferences/Invisible Elements i ukljuite ikonu za komentare. Ovim se Dreamweaveru nalae da komentare prikazuje kao zlatnu ikonu (kada su prikazani nevidljivi elementi). 2. Preite u prikaz Code i postavite kursor izmeu oznake poetka i zavretka iframe. 3. Sa palete Common Insert izaberite objekat Comment. Ovim se ubacuje komentar. Unesite nekoliko rei, kao to je, na primer: "iframes se nalazi ovde". Od sada, kada god se prikau nevidljivi elementi na strani, moete da selektujete zlatnu ikonu komentara, a Tag Selector e prikazati oznaku iframe. Kliknite indikator oznake u Tag Selectoru da biste je selektovali, a onda moete i da podeavate njene osobine. Ako elite da podesite osobine inlajn frejma, izaberite Modify > Edit Tag. Otvorie se Tag Editor. Moete i da koristite karticu Attributes u okviru Tag Inspectora.
Exchange: Proirenje vezano za inlajn frejmove

Inlajn frejmovi su korisne male stavke i prilino su popularni. U programu Macromedia Exchange postoji nekoliko proirenja koja pomau 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 moe biti zastrauju, ako ga nikad ranije niste upotrebljavali. Ovaj kratak pogled se bavi osnovama CSS-a, objanjavajui 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 oznaavanje teksta, odnosno za opisivanje razliitih strukturnih elemenata u dokumentu. Oznake iz HTML-a identifikuju koji deo dokumenta je zaglavlje, gde su pasusi, koji deo je lista, a koje rei treba istai. Pretraivai su tako napravljeni da interpretiraju ove strukturne elemente i prikazuju sve to na ekranu. Nee svaki pretraiva prikazati tekst na isti nain. Neki e tekst oznaen kao emphasize prikazati kurzivom, neki masnim slovima, ali je tekst u svakom sluaju istaknut. Cilj je dobiti itljiv dokument koji e se prikazivati preko strukturnih definicija na razliitim platformama. Prezentacioni markup jezik i problemi koji tu postoje Sa pojavom grafikih pretraivaa 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 vie bili zadovoljni samo mogunou da zadaju da re treba da se istakne, oni su eleli da definiu i kako ta re treba da se istakne (na primer, putem masnih slova). Kao odgovor na ovaj pritisak, u jezik su ubaeni fiziki elementi kao to su oznake b i i. Uskoro je strukturni jezik prerastao u prezentacioni, a oznaka font je poela da se iroko primenjuje za definisanje stila teksta. Dizajneri web sajtova su bili sreni da imaju izvesnu kontrolu nad prezentacijom, ali kako su prestali da koriste strukturno formatiranje, vie nije bilo mogue odrediti strukturne informacije na osnovu izvornog koda. To je dovelo do negativnih posledica, kao to su: Kod koji se pravio nije nita govorio o znaenju teksta koji se prikazuje. Strukturno, ove strane predstavljaju samo niz slova. Pretraiva sa sintezom govora, na primer, tekst koji je oznaen oznakom <hl> prepoznaje kao glavno zaglavlje. On zna da taj tekst treba da prikae velikim i masnim slovima, ali je to za njega obian tekst. Markup koji nema strukturu je mnogo tee odravati. tekst koji je logiki oznaen prema znaenju sadraja dovodi do istijeg koda, koji ima smisla. Nestruktuirane strane je vrlo teko indeksirati. Ako su zaglavlja strana i odeljaka jasno oznaena, maine za pretraivanje mogu da ih koriste da omogue korisniku da pronae relevantne informacije. Ovo je posao za CSS W3C je brzo prepoznao da se priroda HTML-a promenila sa poveanom upotrebom prezentacionog oznaavanja i da je potrebno neko reenje. Kao odgovor na to, poeo 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 omogui puno kontrole nad prikazivanjem strane, a da HTML ostane strukturni jezik. CSS omoguava mnogo kompleksniju i raznovrsniju prezentaciju teksta nego to je HTML ikad mogao da uradi, omoguavajui takve stvari, kao to je kreiranje okvira, definisanje razmaka oko elemenata, varijacije u velikim i malim slovima, dekoraciju (kao to je podvlaenje), definisanje razmaka izmeu slova i puno toga drugog. Verovatno je najlepa stvar, koja je smanjila optereenje web dizajnera, mogunost da se koriste povezane liste stilova, tako da promenom stila na jednom mestu, moete da promenite izgled celog sajta. CSS je neto 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 definiu kako neki HTML dokument treba da se prikae. Najbolja stvar kod CSS-a je da se on moe deflnisati u spoljanjoj datoteci, ili listu (sheet). Pretraiva onda moe da proita ovaj spoljanji list i da primeni sadraj na odreeni sadraj datoteke. Na taj nain se stil i formatiranje strane odvajaju od samog sadraja. Ovo je vrlo bitan koncept kod dizajna web strana. Ovo Vam prua moan i detaljan nain da aurirate svoj web sajt. U datoteci sa stilovima moete definisati da se za tekst
140 / 299
Dreamweaver MX 2004
primenjuje font Arial, da je veliina slova 12 piksela, da su slova crvene boje, da su masna, da je tekst levo poravnat i da je pozadina plava. Ako ovu datoteku pridruite svim stranama na svom sajtu, tekst e se uvek prikazivati na taj nain. Ako promenite miljenje, moete da promenite jednu datoteku i da zadate da font bude Times, da veliina slova bude 28 piksela, da su zelene boje, pisana kurzovim i desno poravnata. Upamtite tu novu datoteku i ceo web sajt se automatski aurira. CSS takoe omoguava da radite neke stvari koje u HTML-u nisu mogue. Za svoju stranu moete definisati nivo kroz koji ete se kretati klizaem. Na taj nain moete da imate prozor u sredini strane sa sadrajem kroz koji se moete kretati uz pomo klizaa. Za svaku ivicu u okviru tabele moete definisati razliitu boju. Moete podesiti da se kod oznaka za nabrajanje koristi korisniki definisana grafika, ili moete obrisati podvlaenje hiperlinkova. Premda se sa svakom novom verzijom pretraivaa poboljava podrka koju oni imaju za CSS, ipak nee svi pretraivai prikazati sve elemente CSS-a, niti e sve elemente prikazati na isti nain. Uvek je dobro da svoju stranu testirate u razliitim pretraivaima. Jedna od bitnih ideja u vezi CSS-a je da ako pretraiva ne podrava neki stil, informacije su i dalje tu, ali se ne koriste stilovi koji nedostaju. IE 5 i Netscape 6 i novije verzije uglavnom prikazuju veinu CSS elemenata. Izvesna ogranienja postoje u verziji Netscape 4. CSS Vam daje neverovatnu kontrolu nad stranama. W3C sada preporuuje da za formatiranje strana koristite CSS. Trebalo bi da paljivo razmotrite mogunosti 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 sadri stilove. List moe da sadri vie stilova. Anatomija stila U srcu CSS-a je stil. Ako shvatite kako stilovi rade i kakve mogunosti donose, onda moete i da ih korisite na pravi nain. CSS selektori CSS stil koji je najlake razumeti je CSS selektor. Selektor je bilo koji HTML element ili oznaka. Ako elite da utiete na izgled oznake, onda morate da primenite niz pravila koja definiu kao se ta oznaka prikazuje u pretraivau. Osnovni format selektora je: selector {osobina:vrednost} Selector je oznaka koja se menja. Osobina je ime osobine koja se podeava. Vrednost je vrednost osobine koja se zadaje. Evo jednostavnog primera: p {color: green} Ovim se zadaje da tekst koji se nalazi izmeu oznaka <p></p> treba da bude zelene boje. To vai za svaku stranu koja koristi taj stil. Moete 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 razliitim oznakama, onda moete da ih u okviru selektora sve navedete: p,div,H2 { color: green; text-align: right } Obratite panju na zareze koji odvajaju oznake, kao i na dve take koje odvajaju ime osobine od vrednosti, kao i na taku i zarez koji odvajaju osobine. Kontekstualni selektori Drugi nain za primenu stilova na odreenu stranu su kontekstualni selektori. Ovde postoji malo vie specijalizacije, poto se selektor primenjuje samo ako je zadovoljen odreeni uslov ili ako je prisutan niz oznaka. Moete, na primer, napraviti CSS selektor koji se primenjuje na oznake anchor, ali samo ako su one u okviru liste. To znai da treba da napravite selektor koji trai 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 moete definisati vie stilova. Najfleksibilniji metod da se to uradi je da se zada klasa. Klasa je skup pravila za stilove koji se moe primeniti na bilo koji element. Ovo je razliito 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 napiete: <h2 class="green">Ovo je zeleni tekst</h2> Ovim se oznaci nalae da treba da koristi klasu green. Poto se stil primenjuje direktno na oznaku, to i utie samo na tu oznaku. Ovo ne utie na <h3 class="green"> Ovo nije zeleni tekst </h3> poto je klasa.green direktno povezana sa oznakom <h2>. Klasu red moete da koristite sa bilo kojom oznakom. Ona e se na tu oznaku primeniti, poto nije dodeljena nijednoj konkretnoj oznaci. To znai da e se sledee primeniti na pravi nain: <h2 class="red">Ovo je crveni tekst</h2> <h3 class="red">Ovo je crveni tekst</h3> Pseudo klase Ovakve klase se najvie koriste za prikazivanje linkova u razliitim stanjima. To su stanja Link, Visited, Hover i Active. U pitanju su unapred podeene definicije za stilove linkova, koje razlikuju linkove, aktivne linkove (oni koji se mogu kliknuti), Hover (kada mia postavite iznad linka), kao i Visited (linkove na kojima ste ve bili). Preko selektora moete 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 nee raditi kako oekujete. 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 funkcioniu 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 pojedinani stilovi koji su postavljeni direktno u kod, a mogu se definisati i u okviru lista sa stilovima. List sa stilovima moe biti interni ili eksterni, u zavistnosti od toga gde je smeten u odnosu na dokument koji formatira. U narednim odeljcima emo razmotriti prednosti i nedostatke inlajn stilova, internih lista sa stilovima i spoljanjih lista. Inlajn stilovi Inlajn stilovi se definiu direktno u okviru oznake na strani. CSS se pie 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 utie samo na oznaku kojoj je pridruen. Prethodni CSS ne utie ni na jednu drugu oznaku input. Ovo je najmanje efikasan nain za upotrebu CSS-a na web strani. Interni listovi stilova Interni listovi stilova se defmiu u okviru HTML strane u delu head. Koristi se block style. Na ovaj nain se stilovima moe da pristupi sa cele strane, ali ne utiu na druge datoteke. Tipini 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. Spoljanje liste sa stilovima Spoljanje liste stilova omoguavaju da u potpunosti iskoristite mogunosti CSS-a. U ovakvim datotekama se nalaze svi stilovi i definicije. Datoteka ima ekstenziju.css. Ovo je nesporno najbolji nain za skladitenje stilova. Na ovaj nain su informacije o stilovima potpuno nezavisne od HTML koda. Promenom samo jedne datoteke moete da promenite izgled celog sajta. Sajt se automatski aurira u zavisnosti od informacija u datoteci sa stilovima. Ako nauite sve opcije koje prua CSS, onda moete da u potpuosti iskoristite ovu funkciju. Tipina spoljanja datoteka sa stilovima je povezana sa stranom preko sledeeg koda: <link href="styles.css" rel="stylesheet" type="text/css"> Moe i da se uveze preko sledeeg koda: <style type="text/css"> <!-@import url("styles.css"); - -> </style> Datoteka sa stilovima sadri listu selektora i klasa. Evo kako to izgleda: P { color: green; text-align: right } .red {color: red} h2.green {color: green} Kaskadnost i nasleivanje Jedna od prednosti koje nudi CSS je da stilovi rade zajedno i da ako je potrebno moete da preklopite jedan stil drugim. Kaskadnost i nasleivanje funkcioniu zajedno. Kaskadnost predstavlja upotrebu vie stilova i listova sa stilovima, kao i redosled po kojem se oni itaju. Redosled u kojem se stilovi pojavljuju u kodu odreuje koja se konkretna osobina prikazuje. Ako spoljanja datoteka sa stilovima kae da tekst u oznaci h2 treba da bude plave boje, ali postoji inlajn stil koji kae da konkretna oznaka treba da bude uta, onda uta pobeuje, poto se nalazi blie aktuelnom kodu. Inheritance znai da e u kaskadi stilova, blii stil preklopiti samo one parametre koji su zajedniki za oba stila. U prethodnom primeru, ako spoljanji stil kae da oznaka h2 treba da bude desno poravnata, inlajn stil nee to da preklopi, poto u njemu nema parametra koji kontrolie ravnanje. To znai da e oznaka h2 biti ute boje, poto je to boja definisana u inlajn stilu. Ali e naslediti desno ravnanje od spoljanjeg stila.
CSS u Dreamweaveru
U Dreamweaveru postoji niz alata koji mogu da pomognu u dizajnu, kreiranju, odravanju i pregledu web sajtova koji koriste CSS. Poev od verzije Dreamweaver MX 2004, CSS je svuda u kodu koji pie sam program. Centralno mesto za manipulisanje i kontrolu stilova i listi stilova je pano CSS Styles (Window > CSS Styles). Preko ovog panoa moete da kreirate, menjate i ispitujete stilove, kao i da upravljate dokumentima sa stilovima koji su uvezeni preko spoljanjih 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 moete da napravite i ako desnim tasterom mia kliknete relevantnu CSS karticu u Tag Inspectoru i izaberete New Rule, ili ako izaberete opciju New iz padajue liste Style u Property Inspectoru, ili ako izaberete Text > CSS Styles > New iz glavnog menija, ili ako desnim tasterom mia kliknete u prozoru Document i izaberete CSS > New. Koji god metod da izaberete, otvara se okvir za dijalog New CSS Style. U njemu moete da definiete koju vrstu stila elite da napravite i gde elite da ga postavite. Preko opcija iz Selector Type izaberite tip stila koji elite da napravite. Mogunosti su: Class (moe da se primeni na bilo koju oznaku) Ako izaberete ovu opciju, onda preko polja Selector moete da unesete ime klase. Ime klase treba da pone takom, ako ako zaboravite da unesete taku, to e umesto Vas da uradi Dreamweaver. Tag (menja se izgled odreene oznake) Ako izaberete ovu opciju, onda u polju Selector treba da definiete oznaku kojoj menjate definiciju, ili tako to ete izabrati oznaku iz padajueg 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 padajueg menija Selector izaberite pseudo klasu. Moete i da runo 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 korisniku klasu footer a:link, ukucajte .footer a:link (nemojte zaboraviti taku ispred imena klase, ili selektor nee 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 moete da izaberete da upamtite stil kao internu listu stilova, koju moete da ubacite u zaglavlje dokumenta, ili kao spoljanju datoteku, koja se pamti u CSS dokumentu i pridruuje tekuem HTML dokumentu. Ako elite da stil stavite u spoljanji dokument, a nemate nijednu datoteku, izaberite opciju New Style Sheet Document i Dreamweaver e Vam pomoi da napravite jednu.
Nakon to ste odluili 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 moete da definiete 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 postojee stilove. Tu postoji osam razliitih prozora koji se odnose na razliite aspekte kontrole preko CSS-a. U toku rada ete primetiti da Dreamweaver MX 2004 sada u prikazu Design prikazuje veinu CSS elemenata. Ipak je dobro da stranu pogledate u razliitim pretraivaima, da biste bili sigurni da e se strana prikazati na pravi nain. Tip Kategorija Type sadri opcije za formatiranje teksta. Neke opcije su same po sebi jasne, neke i nisu. Veina podeavanja dobro radi u pretraivaima, kao i u prikazu Design.
Font Izaberite grupu fontova koja se koristi u tom stilu. Ovu listu moete menjati ako kliknete strelicu nanie i izaberte opciju Edit Font List. Size Definie se veliina fonta. Moete da izaberete brojanu vrednost ili da zadate apsolutnu veliinu. Apsolutna veliina se odnosi na srednju vrednost podrazumevane vrednosti u pretraivau korisnika, ili na definisani stil. Odatle se posle meri vrednost. Style Font moe da se podesi na opcije normal, italic ili oblique. Razlika izmeu opcija italic i oblique je u tome da je italic razliita verzija fonta. Veina fontova ima verziju italic. Opcija oblique je originalna verzija fonta koju je raunar napisao pod drugim uglom. U stvarnosti, pretraiva ih obino prikazuje na isti nain, ali mogu da postoje razlike izmeu fontova i veliina. Ako je ta razlika bitna, onda obe opcije treba da testirate u pretraivaima. Line Height - Ovim se odreuje visina jednog reda teksta. Ako radite sa projektima koji se tampaju, onda je to slino sa razmakom izmeu redova i uvlaenjem. Normalna visina reda se izraunava na bazi veliine tipa. Linije su otprilike 20% vee nego veliina tipa. Apsolutna visina linije se moe dodeliti na bazi mernog sistema koji smo dali u sledeem uokvirenom delu. Weight Ovim se odreuje da li su slova deblja ili ne. Brojane vrednosti (100-900) se odnose na apsolutna podeavanja, dok se opcije Bolder i Lighter zadaju relativno u odnosu na podrazumevanu teinu. Debljina slova se nee uvek isto prikazati u svim pretraivaima. Ako ovde birate neku opciju koja je razliita u odnosu na Normal ili Bold, treba da proverite kako to izgleda u pretraivaima. Variant Ova vrednost odreuje da li e se mala slova zameniti velikim, ali umanjenim slovima. Case Odreuje da li su slova velika ili mala. Sva slova su velika, sva su mala ili svaka re poinje velikim slovom. Color Odreuje se boja fonta. Decoration Ovim se podeavaju opcije redova u tekstu. Ako elite da uklonite podvlaenje kod hiperlinkova, onda treba da zadate opciju None.
Pozadina Kategorija Background kontrolie pozadinu. Preko CSS-a moete da kontroliete pozadinu svakog elementa
145 / 299
Dreamweaver MX 2004
u bloku. To znai da svaki pasus, nivo, tabela ili neki drugi konani element moe 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 podeavanja iz ove kategorije definiu kako se prikazuje slika u pozadini. Repeat Ova vrednost definie da li se slika u pozadini ponavlja u vidu ploa. Moete podesiti opciju repeat, non repeat, repeat-x (samo po horizontali) ili po vertikali (repeat-y). Attachment Ova opcija odreuje da li se slika u pozadini kree zajedno sa stranom ili ostaje statika, tako da strana prelazi preko nje. Horizontal Position and Vertical Poisition Ovim se definie postavljanje slike u pozadini. Opcije Left, Right ili Center/Middle omoguavaju 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 numeriko rastojanje.
Slika koju ovde zadate se u prozoru Dreamweavera moe prikazati u gornjem levom uglu prozora Design. Da biste videli kako strana tano izgleda, pogledajte je u pretraivau. Sa nekim verzijama pretraivaa, posebno sa Netscapeom 4, postoje izvesna ogranienja koja su vezana za slike u pozadini. Kao i uvek, proverite kompatibilnost u vie pretraivaa. Blok Blokovi su diskretni delovi HTML-a. Na primer, pasus je element bloka. Sa aspekta CSS-a, to se smatra blokom koda. Kada korisniku klasu primenite na pasus, to utie samo na kod koji je izmeu oznake poetka i kraja pasusa. Na taj nain se svaki pasus tretira kao zaseban element. Veina blokova ima oznaku za poetak 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 sadri opcije za definisanje blokova koji postoje na strani.
146 / 299
Dreamweaver MX 2004
Word Spacing Koristi se za definisanje rastojanja izmeu rei. Letter Spacing Koristi se za definisanje rastojanja izmeu slova u rei. Vertical Aligment Zadaje se vertikalni aspekt razmaka izmeu rei. Ovo moete koristiti za subscript i superscript. Text Align Definie se horizonatlno ravnanje bloka sa tekstom. Moe biti Left, Right, Center i Justify. Kad koristite opciju Justify, proverite kako to izgleda u pertraivau, poto je podrka za ovakvo ravnanje razliita (i prilino loe izgleda ak i kada postoji). Text Indent Definie se uvlaenje prve linije bloka sa tekstom. (Ako elite da uvuete ceo blok, treba da upotrebite opciju Margin or Padding iz kategorije Box). Whitespace Definie se razmak unutar bloka. Opcija Normal spaja vie razmaka u jedan. Opcija Pre ostavlja vie razmaka. Opcija Nowrap ne dozvoljava prelaz u novi red, bez oznake break. Display Kontroliu se osnovni aspekti elementa block, ukljuui i da li se element prikazuje i kako se oznaka ponaa. Sa ovim podeavanjim treba biti oprezan poto za opciju Display u pretraivaima postoji ograniena podrka.
Box Svaki element koji moe biti blok, kao to je pasus, postoji u svom pravougaonom okviru, koji se moe podeavati preko CSS-a. Neka od ovih podeavanja se koriste zajedno sa kontrolom pozicije, ime se dobija CSS pozicija. Obratite panju na to da e se neka od ovih podeavanja prikazati samo u pretraivau. Trebalo bi da stalno proveravate kako neto izgleda u pretraivau. 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 Definiu 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, slino onom to moete da radite sa slikom. Ova podeavanja se u prikazu Design prikazuju samo za sluaj 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 spreava da elementi bloka zauzimaju isti horizontalni prostor. Padding Definie rastojanje izmeu sadraja bloka i njegovog okvira (ili njegove margine, ako okvir nije zadat). Ovo je slino sa atributom cellpadding kod tabela. Moete da ga podesite nezavisno za sve etiri strane elementa. U tom sluaju treba da deselektujete polje Same for All. Margin Margina definie rastojanje izmeu okvira elementa i ostalih elemenata na strani, koji se nalaze oko njega. Ovo je slino sa atributom cellspacing kod tabela, ili atributima vspace i hspace kod slika i medijskih elemenata. Ako deselektujete polje Same fo All, moete da nezavisno podeavate marginu za sve etiri strane.
Border Ove opcije se koriste za podeavanje okvira oko zadatog elementa. U pitanju je okvir u odnosu na koji se zadaju atributi padding i spacing. Ovo je slino sa okvirom tabele, ali sa vie mogunosti. Za podeavanje okvira nekog elementa na strani treba da koristite kategoriju Border iz okvira za dijalog CSS StyleDefinition.
148 / 299
Dreamweaver MX 2004
Style Moete izabrati neku od opcija Dotted, Dashed, Solid, Double, Groove, Ridge, Inset i Outset. Podrka u pretraivaima se razlikuje za pojedine opcije. Width Podeava se irina okvira, kao broj piksela ili varijante Thick i Thin, koje nisu brojane. Color Bira se boja okvira.
Treba da znate da se okvir moe primeniti nezavisno na sve etiri strane elementa. Ova nezavisnost Vam omoguava da postignete efekte kao to su pravila u pasusima. List Kategorija List sadri opcije za podeavanje listi bilo sa brojevima, bilo sa nekim oznakama.
149 / 299
Dreamweaver MX 2004
Type Za liste sa oznakama (neureene), izaberite tij oznake. Opcije su Disc, Circle i Square. Kod ureenih list birate vrstu slovne ili brojane 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 moete d; poveete sliku. Position Definie se kako stavke u listi prelaze u nove redovi i koliko se uvlae. Opcija Outside e stavku iz list ravnati sa uvlaenjem prvog reda, a opcija Inside sa marginom
Positioning Opcije iz ove kategorije definiu gde se elemeni strane prikazuju na toj strani. Ovo se zove CSS pozicioniranje, ili CSS-P. Premda se CSS pozicioniranje moe primeniti na veinu elemenata koji ine blokove, ono se ipak generalno koristi sa oznakom div.
150 / 299
Dreamweaver MX 2004
Type Ovim se definie 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. Statiko pozicioniranje postavlja element bloka na istu lokaciju na kojoj se pojavljuje i u dokumentu. Visibility Kontrolie se inicijalna vidljivost elementa. Nasledivanje daje elementu istu vidljivost, koja je podeena i za osnovnu oznaku. Opcija Visible ini element vidljivim. Opcija Hidden ga ini nevidljivim. Ove opcije dinamiki prikazuju i uklanjaju element preko JavaScripta. Width i Height Isto kao istoimeni elementi u kategoriji Block. Definiu se dimenzije elementa u bloku. Z-Index Definie se redosled prikazivanja elemenata, ako doe do njihovog preklapanja. Elementi sa manjim brojem se prikazuju ispod elemenata sa veim brojem. Ovaj redosled je bitan samo kod elemenata koji su pozicionirani preko CSS-a. Overflow Ovo se koristi kada je sadraj nekog elementa vei od zadate visine i irine i definie ta se deava sa tim dodatnim materijalom. Ako je zadata opcija Visible, onda se sav sadraj nivoa prikazuje istovremeno, bez obzira na podeenu veliinu. Opcija Hidden striktno potuje zadatu veliinu nivoa i see sav sadraj koji prelazi tu veliinu. Opcija Scrollbars dodaje klizae, bez obzira da li su potrebni ili ne. Ako je sadraj koji prikazujete bitan, pogledajte kako pretraivai to podravaju. Opcija Auto pravi klizae samo ako je potrebno. Placement Ove vrednosti definiu gde element pozicioniran preko CSS-a treba da se prikae. Kod elemenata kojima je zadata apsolutna pozicija, sve vrednosti su relativne u odnosu na ugao prozora pretraivaa. Clip Koristi se za definisanje dela nivoa koji je vidljiv. Koristiete ovo ako elite da sakrijete deo nivoa, a da pri tome ne koristite opcije Overflow. Moe se koristiti zajedno sa Java Scriptom, ime se dobijaju interesantni efekti.
Extensions Opcije iz kategorije Extensions se koriste u specijalnim sluajevima. Njih pretraivai i ne podravaju na najbolji nain,tako da treba da ih paljivo koristite. Ako ih koristite, obavezno proverite kako se to prikazuje u pretraivau.
151 / 299
Dreamweaver MX 2004
Page Break Koristi se za podeavanje preloma strane, kod tampanja. Ovim se prelom strane zadaje pre ili posle elementa. Visual Effect Koristi se za promenu izgleda kursora kada se nae iznad elementa za koji zadajete vrednost. Veina pretraivaa ovu opciju ne podrava. Filter Omoguava da na slike koje se nalaze na strani primenite specijalne efekte. U vreme dok ovo piemo, samo IE4+ podrava 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 prilagoava formatiranju koje ste zadali. Kontekstualni selektori i pseudo klase rade na isti nain. Korisnike klase, sa druge strane, moraju da se primene na odreenu oznaku. U Dreamweaveru postoje razliiti naini da to uradite. Preko Property Inspectora Property Inspectori za tekst i tabele imaju padajui meni sa klasama koje su u tekuem dokumentu na raspolaganju. Samo izaberite objekat/tekst, na koji elite da primenite klasu, a onda iz padajueg 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 mia kliknite neku oznaku u Tag Selectoru i iz pomono > menija izaberite opciju Set Class. Prikazae 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 moete da pristupite preko menija Text, ili ako desnin tasterom mia kliknete neki element na strani i izaberite opciji iz pomonog menija. Ako ne elite da primenite ni jedni klasu, izaberite opciju None.
Nakon to se na oznaku primenila neka klasa, u padajuem 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. Otvorie se okvir za dijalog CSS Style Definition, u kome moete da menjate osobine. Ako elite da promenite ime klase, selektujte tu klasu i iz menija Options u panou, izaberite opciju Rename. Ako elite da obriete stil, selektujte ga u panou i kliknite dugme Remove Style (kanta za otpatke). Za korisnike klase ovim neete obrisati mesta na kojima je stil primenjen u dokumentu. Stilovima moete da rukujete i sa razliitih drugih mesta u Dreamweaveru. Iz glavnog menija moete da izaberete Text > CSS Styles i da pozovete komande Edit ili Rename. Ovaj podmeni moete da dobijete i ako u prozoru Document kliknete desnim tasterom mia i iz pomonog menija izaberete opciju Text > CSS Styles. Drugi interfejs koji moete 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 pridruenim 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 poeli da koriste pre verzije MX e prepoznati ovaj nain 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 nain 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 moete da pogledate sve primenjene klase. Ovim klasama se pristupa preko padajueg menija Class. Gde je mogue, 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 paljivi. Promena neke od ovih vrednosti nee 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 panju. Ovo je sjajan nain da pratite klase koje se koriste. Tag Selector Vam nee rei 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 ureivanje 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 moe biti korisniki definisana klasa, promenjena definicija oznake ili neka kombinacija. Kod korisniki 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 opsena lista opcija vezanih za CSS formatiranje. Tu su sve vrednosti koje su u okviru pravila podeene. Listu moete prikazivati uredenu po kategorijama (iste kategorije koje postoje i u okviru za dijalog CSS Style Definition) ili po abecednom redu. Ureivanje 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 kontrolie preko promenjene definicije oznake p, moete da promenite pravilo za formatiranje oznake p i da se automatski promene svi pasusi. Ako se promenjena definicija oznake p nalazi u spoljanjoj 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. Pridruivanje lista sa stilovima Pored toga to pano CSS Styles koristite za kreiranje liste stilova, isti pano se koristi i za pridruivanje tih listi. Ako na sajt dodajete vie strana u kojima se nalazi niz unapred napravljenih stilova, ove stilove lako moete da pridruite svojim novim stranama i da ih primenite kada Vam to zatreba. Ovi stilovi se nee ponaati u odnosu na stilove koje ste kreirali u Dreamweaveru. Promene HTML oznake e se automatski aurirati, a u panou CSS Styles e se pojaviti lista korisnikih klasa. Ako elite da neku postojeu listu stilova pridruite preko panoa CSS Styles, jednostavno kliknite dugme Attach Style Sheet, koje se nalazi u donjem levom delu panoa. Moete i da iz padajueg menija Class izaberete opciju Attach Style Sheet. Ova klasa je u okviru Property Inspectora. Moete i da izaberete Text > CSS Styles > Attach Style Sheet iz glavnog menija, ili da desnim tasterom mia kliknete u prozoru Document i iz pomonog menija izaberete opciju CSS Styles > Attach Style Sheet. Koji god metod da izaberete, zatraie se da pronaete.css datoteku i da izaberete da li je linkujete ili uvozite. Razlika izmeu ove dve opcije je vrlo mala. Opcija Link povezuje datoteku preko oznake href, a opcija Import koristi stil ili URL link za pronalaenje datoteke. U verziji Netscape 4 je podrana samo opcija sa linkovanjem. Ostale, novije verzije pretraivaa podravaju i jednu i drugu opciju. Kliknite OK da biste zarvili povezivanje. Promenjene definicije HTML oznaka i selektori se automatski primenjuju, a listi korisnikih klasa moete 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 spoljanjim stilovima Ako ste svom dokumentu pridruili spoljanju datoteku sa stilovima, onda sa ovim stilovima moete da radite na isti nain kao to radite sa internim. To znai da moete da koristite pano CSS Styles i ostale elemente interfejsa koje smo pomenuli. Treba da vodite rauna da svaki put kada promenite stil u pridruenoj listi stilova, Dreamweaver menja CSS dokument, a ne otvoreni HTML dokument. Ovo Vas moda 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 ponitite tu promenu i da vidite da to ne moete da uradite zato to se promene nisu desile u tekuem dokumentu. Neke autore ovo frustrira, pa Dreamweaver ima i opciju da automatski otvara spoljanju datoteku sa stilovima ispod tekueg dokumenta. Ovo se radi kad god radite na nekom od stilova. Na taj nain moete da promenite stil, ta promena se deava u datoteci sa stilovima koja je otvorena; ta datoteka nije upamena. Ako elite da ponitite promene, to moete da uradite, a ako elite da ponitite vie uzastopnih akcija, onda moete 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 pretraivau, morate da se setite da aktivirate CSS dokument i da ga upamtite, jer se u suprotnom promene stilova koje ste poslednje uradili nee prikazati. Ako bi Dreamweaver pao prilikom rada, ili ako bi nestalo struje, tako da se raunar neoekivano ugasi, a Vi niste upamtili HTML i CSS dokument, onda ste izgubili sve to ste u meuvremenu 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 spoljanju datoteku sa stilovima, u panou CSS Styles izaberite tu datoteku i kliknite dugme Delete CSS (kanta za otpatke). Ovim se nee obrisati sama datoteka. Ovim se samo uklanja iskaz link ili import, kojim je tekui dokument povezan sa tom datotekom. Interna lista stilova se ne moe ukloniti. Umesto toga, treba da selektujete pojedinane stilove u okviru liste i da ih izbriete. Izvoz datoteka sa stilovima Izvoz se odnosi na prebacivanje stilova iz interne liste stilova u spoljanju 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 miljenje. Ako elite da preko panoa CSS Styles izvezete internu listu stilova, izaberite opciju Export Style Sheet, koja se nalazi u meniju Options. Moete i da izaberete Text > CSS Styles > Export iz glavnog menija, ili da u prozoru Document kliknete desnim tasterom mia i izaberete opciju CSS Styles > Export. Koji god metod da izaberete, Dreamweaver Vas pita da li treba da kreira novi CSS dokument. Nakon to zavrite, 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. Tekui dokument se ne menja. Da biste operaciju kompletno zavrili, morate da izbriete internu listu stilova i da preko dugmeta Attach Style Sheet linkujete ili uvezete CSS dokument koji ste upravo kreirali. Ako elite da u neki spoljanji 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 moe pomoi pano CSS Styles. U panou izaberite neki od stilova i iz menija Options izaberite opciju Go to Code. (Moete i da desnim tasterom mia kliknete stil i da pri tome dobijete isti meni Options.) Moete i da dva puta brzo kliknete ime stila i da uradite istu stvar. Kreiranje datoteke sa stilovima od poetka Moda ne elite da svoju spoljanju datoteku pravite u toku rada. Moda unapred znate koje stilove ete koristiti i samo elite da napravite datoteku sa stilovima, a da ne morate da otvarate neki dokument. I to moete da uradite. Izaberite File > New i u prozoru New Document, kao tip dokumenta izaberite Basic Pages / CSS. Datoteka e se otvoriti u prikazu Code, poto nema ta da se prikae u prikazu Design. To ne znai da ne moete 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 podeena na This Document Only, tako da kod ostaje u dokumentu koji ste otvorili. Nakon to zavrite, zapamtite datoteku i zatvorite je. Sada tu datoteku sa stilovima moete 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 mogunosti. Da biste od CSS-a dobili najvie mogue, 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 veliina teksta, od kojih je trebalo birati, niste mogli da uvlaite tekst ili podeavate margine, itd. Svet fontova je, meutim, 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 padajua lista sa grupama fontova od kojih treba izabrati neku. HTML, fontovi i pretraivai Fontovi se ne ugrauju na web strane i ne postoji mehanizam za linkovanje fonta na web stranu, na nain na koji je to mogue uraditi sa grafikom ili nekim drugim medijumom. (Postoji puno tehnikih i pravnih razloga.) To znai da krajnji korisnik Vau web stranu moe da prikae samo sa onim fontovima koje ima na svom raunaru. Ako na strani koristite font koji nije instaliran, onda se tekst prikazuje sa podrazumevanim fontom koji je podeen u pretraivau, a to je obino Times New Roman. Prva strategija kada naiete na ovakav problem je da zadajete samo one fontove koje korisnici verovatno imaju. Naravno da je svaki raunar podeen drugaije, ali veina Windows sistema ima fontove Times New Roman, Arial, Georgia, Verdana i Courier New. Druga strategija je da zadate vie od jednog fonta, a da korisnik moe da iz liste izabere onaj za koji zna da postoji na njegovom sistemu. Ovo se esto zove fallback fonts, grupa fontova ili lista fontova. Poto se pretraiva zaustavlja na prvom fontu koji prepozna, strategija je da se pone sa fontovima koje moda nema svako i da se ide ka fontovima koji se vie koriste, pa da se na kraju da kategorija fontova koja se najvie koristi, kao to su serif i sans serif. Ovakav sistem znaajno proiruje mogunosti, ak i ako ste ogranieni samo na fontove koje posetioci verovatno imaju. Liste fontova u Dreamweaveru U Dreamweaveru postoje sledee 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, moete da ih menjate ili da preko okvira za dijalog Edit font List dodajete svoje fontove. Ovom prozoru moete da pristupite iz bilo koje padajue liste fontova u Dreamweaveru, ako izaberete opciju Edit Font List sa dna menija. Moete 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. Moete 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 omoguava 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, poev od onog koji je najpoeljniji, pa do onog koji je najoptiji. Kombinaciju fontova uvek treba da zavrite sa optom familijom fontova. Ta familija se moe pronai na kraju liste Available Fonts. Nakon to zavrite kliknite OK da biste zatvorili okvir za dijalog Edit Font List.
Definisanje dimenzija preko CSS-a

Kada doe trenutak da se zada veliina, CSS nudi zbunjujue obilje mogunosti. Zbunjujue zato to neko treba da zna ta sve te opcije znae. Postoji puno razliitih naina da se definie veliina, ali se svi oni generalno mogu svrstati u dve grupe: apsolutni i relativni. Apsolutne veliine 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 ina. Pica je 12 picasa ili 1/6 ina. Milimetri (mm) i centimetri(cm) su standardne metrike jedinice. Milimetar je 1/100 centimetra. (2.54 cm je jednako 1-om inu). Ini (in) su standardne veliine u obinom svetu, mada se retko koriste u svetu Weba. Jedan in ima.394 centimetra. Piksel (px) je standardan nain za definisanje veliine na raunaru. Veina elemenata na web strani je definisana u pikselima. Piksel je mali blok iz prostora monitora, odnosno fiziki gradivni element ekrana. Piksel se definie kao razlomak ina na ekranu. Tekoe koje nastaju kada se radi sa pikselima nastaju zato to PC raunari koriste razliite razlomke za odreivanje veliine. CSS koristi termin "referentni piksel" od oko 90 piksela po inu, to ne koristi nijedan operativni sistem. Ipak se pikseli i dalje najvie koriste.
Relativne veliine su vee ili manje od neke zadate veliine. Procenti (percentage) (%) Univerzalni koncept. Vrednost u procentima je X% vea od standardne vrednosti. Veliine koje se zadaju u procentima uvek kao osnovu koriste podrazumevanu vrednost osnovne oznake. Na primer, ako je podrazumevana veliina 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, poto je osnovni element oznaka body. Ako eliju u tabeli podesite na 80%, ona e zauzeti 80% tabele, poto je osnovni element za eliju oznaka table. Em Ovo je tajanstvena, ali korisna vrednost. Ona se definie kao jednaka veliini pointa za dati element fonta. Ako je font podeen na 12 piksela, onda je 1 em jednak 12 piksela. Na taj nain moete da podesite korisniku klasu na vrednost 2 em od neke vrednosti, na primer od prethodnog fonta. Ako ovu klasu primenite na deo teksta, veliina e biti 2 ema ili 24 piksela. Ex Ovo je relativna vrednost, poto se zasniva na visini malog slova x u izabranom fontu. Iako ovo
158 / 299
Dreamweaver MX 2004
moe biti od velike pomoi kada se koristi izvestan font, treba da imate na umu da razliiti fontovi imaju razliite veliine slova x. Kod jednog fonta malo slovo x moe biti polovina velikog slova, a kod drugog 60-70%. Na taj nain se ex razliito prikazuje kod razliitih fontova.
CSS i dostupnost
U CSS-u ne postoji nita to je po svojoj prirodi nedostupno. U pitanju je samo jezik za formatiranje. U sutini, CSS je tako koristan web surferi esto koriste svoje liste stilova da bi poveali funkcionalnosti. Na primer, osoba sa smanjenim vidom moe 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 pridruene 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). Poto su datoteke sa stilovima koje koriste korisnici spoljanje, neete eleti da te stilove preklapate stilovima koje ste definisali interno. To znai da treba da koristite spoljanje 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 reima, veliine fontova, kao i druge veliine, treba podesiti u procentima ili drugim relativnim vrednostima, a ne u apsolutnim jedinicama. Dreamweaver nema alatku koja moe da Vam pomogne da napravite dostupan CSS. Ona Vam nije ni potrebna. Prilikom kreiranja stilova i lista stilova razmiljajte u skladu sa prihvaenim naelima. Opciju Design Time Style Sheets iz Dreamweavera moete da upotrebite da pogledate kako strana prolazi u alternativnim okruenjima. 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, veliina 200%, boja crna, font Georgia). Promenite definiciju oznake body tako da boja pozadine bude bela. Moete 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 posljanje datoteke. 3. U panou CSS Styles idite u meni Options i izaberite opciju Design Time Style Sheets. Kada se otvori okvir za dijalog pronaite deo Show Only at Design Time i kliknite dugme +. Pronaite svoju datoteku access.css.Sada pronaite deo Hide at Design Time i kliknite dugme +. Pronaite datoteku sa stilovima koja je trenutno pridruena strani. 4. Kada zavrite 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.
Specifinosti koje se postiu kontekstualnim selektorima

Kontekstualni CSS selektori, odnosno stilovi koji imaju efekat samo pod odreenim uslovima, drastino poveavaju 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 nain razmiljanja sa kontekstualnim selektorima. Kreiranje vie stilova za linkove na strani Zamislite sledeu situaciju: Sve strane imaju deo za navigaciju sa strane, a umesto slika su tekstualni linkovi sa CSS formatiranjem. Tu je i podnoje sa tekstualnim linkovima koji se ponavljaju. Glavni deo sa sadrajem na svakoj strani moe ili ne mora da sadri inlajn linkove na tekst. Ako definiete neke kontekstualne selektore, moete da dobijete razliite 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 prikae sa podrazumevanim podeavanjima pretraivaa. Posetioci su navikli da vide podvuene linkove plave boje, tako da nema potrebe da menjate ono to je dobro. 2. Za deo sa strane napravite korisniku klasu. sidebar i primenite je na eliju tabele ili na element div koji sadri elemente tog dela sa strane. U ovom stilu moete 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 Vaeg 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 podraavati tradicionalni deo za navigaciju, tako da treba da obriete podvlaenje, 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 podnoju. Napravite korisniku klasu.footer i primenite je na eliju tabele ili na element div, koji sadre elemente za navigaciju na dnu strane. Nakon toga, definiite kontekstualni selektor.footer a, koji e kontrolisati izgled ovih linkova. Brzo podeavanje 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 odreeni nain. Zelite da kontrolu vrite na najefikasniji nain. Moete da koristite korinike klase za formatiranje tabela, ali je nedostatak to klase moraju da se primene. Formatiranje koje imate na umu mora da se primeni na pojedinane elije tabele, a ne samo na tabele. Da li morate da napravite korisniku klasu za elije sa podacima i da onda idete po celom sajtu i primenjujete korisnike klase na desetine elija tabela u svakom dokumentu? Ne. Vi ete primeniti korisniku klasu na tabele sa podacima, a preko kontekstualnog selektora primeniti i formatiranje elija. Evo kako se to radi: 1. 2. Napravite korisniku klasu po imenu.datatable. Unesite format koji elite da imate u svojim tabelama sa podacima, moda neku lepu boju pozadine ili format teksta za sadraj. 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 zavrite, elija u tabeli treba da bude odmah formatirana, jer je korisnika klasa ve primenjena.
Kada ponete da razmiljate na kontekstualan nain, poboljaete svoju efikasnost u radu sa CSS-om i biete u stanju da radite na svojim projektima, a da kasnije nita ne popravljate.
Kako da odjednom radite sa vie razliitih spoljanjih datoteka sa stilovima

Zahvaljujui nasleivanju i kaskadnosti, moete da imate i spoljanju datoteku stilova i internu listu stilova, ili moete da imate vie spoljanjih datoteka stilova, koje u istom trenutku kontroliu isti dokument. Upamtite da kaskadnost u CSS-u znai da se stilovi mogu sabirati i da kod koji je najblie aktuelnom elementu ima vei prioritet u odnosu na pravila sa vieg nivoa. Ako shvatite prednosti i nedostatke kombinovanja vie stilova, moi ete da u punoj meri iskoristite prednosti koje donosi CSS. Zajednika upotreba internih lista stilova i spoljanjih datoteka sa stilovima Zato biste zajedno koristili interni i spoljanji stil? Moda imate niz stilova koje primenjujete na celom sajtu i koji definiu opti izgled sajta. Ali, kad doete na konkretnu stranu koja se razlikuje od ostalih i koja zahteva razliito formatiranje, morate se prilagoditi. I dalje elite da zadrite opti izgled celog sajta, ali su potrebna dodatna podeavanja koja se odnose samo na tu stranu. Ako za kreiranje stilova koristite pano CSS Styles, lako je zajedno koristiti interne i spoljanje sitlove. Svaki put kada pravite novi stil, preko opcije Define In moete da podesite gde taj stil treba da ode. Upamtite da, prema pravilima nasleivanja i kaskadnosti, interni stil uvek pobeuje spoljanji, ako doe do njihovog suprostavljanja. Treba to vie stilova da definiete kao spoljanje, a onda selektivno preklapajte samo one stilove koji se razlikuju za konkretnu stranu. Ako u spoljanjoj datoteci sa stilovima definiete da oznaka P bude sa fontom Arial, da tekst bude levo poravnat i da veliina slova bude 12, razmak izmeu 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 sluaju boja. Na taj nain, ako se font u preduzeu promeni na Georgia, ovu stranu ne morate kasnije da popravljate. Upotreba vie spoljanjih datoteka sa stilovima Ovo je trenutak kada ivot postaje stvarno interesantan. Ao ste dobar planer, moete da napravite modularne efekte u dizajnu i da tako izvuete maksimum od CSS-a, ak i kod velikih sajtova. Zamislite sledeu situciju: Imate datoteku sa stilovima koju ete koristiti na sajtu, sa zadatim marginama, osnovnim fontovima i veliinama i nita vie. Ovo se primenjuje na sve strane na sajtu. Nakon toga, svako odeljenje ima svoju datoteku sa stilovima u kojoj definie boje koje se primenjuju na pozadinu strana i tekst. U svim odeljenjima imate neke zajednike tipove strana, kao to su ulazne forme, koje imaju svoje zahteve u
160 / 299
Dreamweaver MX 2004
pogledu stila. Redosled Jednom HTML dokumentu moete da pridruite ili da sa njim poveete onoliko datoteka sa stilovima koliko elite. Prema pravilima kaskadnosti, datoteke sa dna liste imaju prioritet (poto su najblie strani i njenom sadraju). Poto je stil na vrhu najdalje od strane, njega e ostali stilovi preklopiti. Sto je u hijerarhiji datoteka sa stilovima nie, to je njen prioritet vii. Kako ovo radi u Dreamweaveru Ako ne pazite, prilikom pridruivanja vie spoljanjih datoteka sa stilovima moete da upadnete u ozbiljne probleme. Prvo, treba da imate na umu da Dreamweaver podrazumevano nove datoteke stilova dodaje na dno liste. Ovo vai bez obzira na to da li se stil linkuje ili uvozi. Ako ste u mogunosti, pridruite stilove po pravilnom redosledu, poev od najnieg prema najviem prioritetu. Njihov redosled u panou CSS Styles je isti kao u dokumentu. Sta moete da uradite ako redosled datoteka sa stilovima nije pravi? Redosled ne moete da promenite preko samog panoa CSS Styles. Moete da preete u prikaz Code, da pronaete kod za oba stila i da ih premestite na drugu lokaciju. Drugo, mogue je (ak i ispravno) uvesti jednu datoteku sa stilovima u drugu. Ako ste prilikom pridruivanja datoteke sa stilovima u panou CSS Styles selektovali drugu datoteku sa stilovima, Dreamweaver e novu datoteku ubaciti u onu koju ste selektovali, a nee je pridruiti tekuem dokumentu. Ako se to desi, nova datoteka sa stilovima se u listi stilova prikazuje uvueno. U tom sluaju moete da otvorite drugi dokument sa stilovima u Dreamweaveru, da pronaete kod koji je uvezen i da ga obriete.
161 / 299
Dreamweaver MX 2004
12. CSS pozicioniranje, nivoi Dreamweavera i raspored na strani

ta je nivo (layer)? Ako pogledate HTML referencu, videete da u Netscapeu 4 postoji stara oznaka layer, ali to nije ono to se u Dreamweaveru podrazumeva pod nivoima, ni ono to veina 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 nain.
Osnovno o nivoima
Ako elite da sa nivoima u Dreamweaveru radite na pravi nain, morate prvo da shvatite odakle oni dolaze i ta rade. Ako se prvo pozabavite osnovama, potedeete sebe neprijatnih situacija.
CSS-P i nivoi u pretraivau

Originalna CSS 1 specifikacija pokriva razliite opcije formatiranja teksta i elemenata na strani u HTML-u. Ipak W3C nije tu zavrio. CSS-P je uveo mogunost da se upravlja pozicijom elemenata na strani (P je od pozicija). Pored pozicioniranja, CSS-P omoguava 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 moe 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 statiko, relativno i avsolutno. Evo kako rade ovi tipovi: Statiko 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 statiko pozicioniranje nekog elementa bi mogao biti: <h1 style = "position:static; " >Howdy!</h1> Apsolutno pozicioniranje postavlja element na apsolutnom rastojanju od ivica prozora pretraivaa, ili osnovnog elementa. Rastojanje se moe zadati u pikselima, procentima ili nekim drugim jedinicama mere koje CSS podrava. 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 potinjen 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 sadraj na strani. Ovo je slino sa statikim 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 moe 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 nanie u odnosu na mesto gde bi bio. Fiksno pozicioniranje je slino sa apsolutnim, a razlika je u tome da kada se strana pomera preko klizaa, 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 ugnjeen u neki drugi element (izuzev u okviru oznake body), on e se postaviti u gornjem levom uglu prozora pretraivaa i ostae tamo, ak i kada se korisnik preko klizaa kree nanie. (Na alost, fiksno pozicioniranje nije dobro podrano, kao ostali tipovi, ak ni u novijim pretraivaima.) Pozicioniranje i ugnjeavanje
162 / 299
Dreamweaver MX 2004
Pozicioniranje postaje sloenije kada se elementi gnjezde unutar drugih elemenata. U veini pretraivaa, kao i u CSS-2 specifikaciji, se nain pozicioniranja interpretira u zavisnosti od toga da li osnovni element za taj element takode ima zadaru poziciju i da li je zadato kao nestatika. Ako osnovni element nema zadat arribut position ili ima poziciju podeenu na static, onda e element dete koji ima apsolutnu poziciju biti postavljen relativno u odnosu na najblieg predaka, sa apsolutnim ili relativnim pozicioniranjem. Ako nema takvog pretka (ukljuujui i telo dokumenta), onda e element dete biti postavljen relativno u odnosu na prozor. Primena pozicioniranja na elemente strane Element strane se moe pozicionirati preko inlajn stila. Evo kako to izgleda: <h1 style="position:absolute; left:150px; top:80px">Howdy!</h1> Moe se pozicionirati i preko korisnike klase koja ukljuuje poziciju. .logotest { position: absolute; left:150px; top:80px; } <h1 class="logotest">Howdy!</h1> Poto definicija konkretnog stila koja sadri i poziciju moe u dokumentu da se koristi samo jednom, informacije iz CSS stila mogu da se pridrue elementu strane preko jedinstvenog atributa ID: #logotest { position: absolute; left: 150px; top: 80px; }; <h1 id="logotest">Howdy!</h1> Ako je definicija stila postavljna u spoljanji dokument sa stilovima i pridruena veem broju HTML strana, svaka strana moe da ima jedan element sa ID oznakom logotest, ija se pozicija kontrolie preko stila. Kao i kod bilo kojeg CSS-a, inlajn metod je najmanje efikasan, poto 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 moe pozicionirati preko CSS-P-a. Elementi koji mogu biti blokovi (tabele, zaglavlja i pasusi) se najee 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 korisniku 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 moe takoe 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 deava u kodu.
163 / 299
Dreamweaver MX 2004
Crtanje i ubacivanje nivoa Najjednostavniji nain 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 prevue na crte. Nakon to zavrite, Dreamweaver prikazuje nivo koji se uklapa u Vae dimenzije.
Moete 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, videete 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, pojavie se Layer Property Inspector. Ovo moete 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, moete i da izaberete Edit > Preferences/Layers. Moete i da promenite veliinu i poziciju nivoa interaktivno, pomeranjem i promenom veliine u prozoru Document.
164 / 299
Dreamweaver MX 2004
Nevidljivi elementi: Markeri nivoa Poto nivoi koji se prave preko objekta Layer koriste apsolutno pozicioniranje, njihovo postavljanje u prikazu Design nije obavezno blizu mesta gde je ubaen kod. Kod za nivo se moe nai odmah iza otvorene oznake body, a da se sam nivo nae na dnu strane. Da biste mogli da pratite kod, Dreamweaver ima opciju da vidite ikonu koja pokazuje gde se on nalazi. Ovo ete ukljuiti 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 moe 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
moete da upotrebite i za izbor nivoa koje biste inae teko selektovali, poto 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 tekuu stranu se u panou prikazuju kao lista imena, koja ukazuje na njihov redosled (ili z-indeks). Taj redosled se moe menjati prevlaenjem nivoa po ovoj listi. Vidljivost nivoa moete da menjate preko leve kolone, sa ikonom oka. Preklapanje nivoa moete da ukljuite ili iskljuite putem opcije Prevent Overlaps. Kao to smo objasnili, kod nivoa koji se preklapaju postoji vei rizik da se ne ponaaju kako treba, nego kod nivoa koji se ne preklapaju. Preklapanje moete da iskljuite i ako mislite da ete kasnije nivoe prebaciti u tabelu, da biste dobili kompatibilniji raspored. (Ovo moete 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 mogua stanja za selektovanje. Svako od njih je u prikazu Design predstavljeno razliitim grafikim 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 ruica za selektovanje. Crni kvadrati su ruice za promenu veliine. Kada se kursor postavi unutar nivoa, nivo izgleda kao pravougaonik. U njemu postoji pravougaonik za selektovanje, ali ne postoje ruice za promenu veliine. Nivo ovako izgleda odmah posle ubacivanja, poto Dreamweaver pretpostavlja da ete ba ovako poeti ubacivanje nekog sadraja u novi nivo. Kada nivo nije selektovan, on izgleda kao pravougaonik i nema ni ruica za selektovanje ni ruica za promenu veliine.
Ako elite da selektujete neki nivo, treba da uradite jedno od sledeeg: Kliknite neku od stranica nivoa. Kliknite unutar nivoa, tako da se u gornjem levom uglu prikae ruica za selektovanje, a onda kliknite tu ruicu. 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 vie nivoa, kliknite jednu od stranica ili ruicu za izbor u prvom nivou koji elite da izaberete, a onda istovremenim pritiskom na taster Shift i klikom mia izaberite i druge nivoe. Ako su prikazani nevidljivi elementi, moete da zajednikim pritiskom tastera Shift i klikom mia na marker nivoa izaberete svaki od njih. Ako elite da preko panoa Layers izaberete vie 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 ruice za promenu veliine. Ostali izabrani nivoi e svoje ruice za promenu veliine 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 sadre samo jednu re, a ne sme biti specijalnih karaktera. Iako ne morate da menjate podrazumevana imena nivoa, nije loe da nivoima date imena koja znae vie od obinog Layerl. Na taj nain kasnije lako moete da identifikujete te nivoe. Jo bolje je da imena dajete prema emi imena, u kojoj ime svakog nivoa govori neto 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 podnojem. Ime nivoa moete promeniti preko panoa Layers, ili preko Property Inspectora. Dva puta brzo kliknite nivo u panou Layers i unesite novo ime. Ime moete da promenite i u polju Layer ID u Property Inspectoru. Ubacivanje sadraja u nivoe Ubacivanje sadraja u nivoe je jednostavno. Samo kliknite unutar nivoa i ubacite sadraj na uobiajen nain. Sadraj moe da se ubacuje preko palete Insert ili menija Insert iz Dreamweavera, ili prevlaenjem preko panoa Assets, ili sa nekog drugog mesta, ili postavljanjem sa Clipboarda. Promena veliine nivoa prevlaenjem Ako elite da u prozoru Document promenite veliinu nivoa, prvo ga selektujte tako da se prikau ruice za promenu veliine. Nakon toga kliknite i prevucite neku od tih ruica. Preko ruica u uglu moete da istovremeno menjate i duinu i visinu, a preko ostalih moete da menjate veliinu samo u jednom pravcu. Premetanje nivoa Ako iz prozora Document elite da promenite poziciju nivoa, samo uhvatite taj nivo, preko njegove ruice za izbor ili na ivici, a onda kliknite i prevucite. Kursor e promeniti oblik u strelicu usmerenu na sve etiri strane (ako ste uhvatili ruicu 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, drite pritisnut taster Shift. Ravnanje nivoa U Dreamweaveru postoji mogunost ravnanja nivoa. Ako elite da poravnate nekoliko nivoa, sa okvirom ili nekim drugim nivoom, treba da uradite sledee: 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 ruice 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 veliine nivoa Prema proceduri za ravnanje nivoa, moete 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 odreuje konanu visinu ili irinu izabranih nivoa. Ugnjeavanje nivoa Ugnjeeni 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> Ugnjeavanje se esto koristi za grupisanje nivoa. Ugnjeeni nivo se pomera zajedno sa osnovnim nivoom i moe se podesiti da od roditelja nasledi i vidljivost.Ugnjeeni nivo moete da napravite na jedan od sledeih naina: Postavite kursor unutar postojeeg nivoa i izaberite Insert > Layer. Prevucite dugme Draw Layer sa palete Insert i postavite ga u postojei nivo. Kliknite dugme Draw Layer sa palete Inset, drite pritisnut taster Alt/Opt i nacrtajte nivo unutar postojeeg. Sa panoa Layers izaberite nivo, a onda drite 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 ubaen u drugi, nivo dete (ugnjeeni) moe da skoi na novu lokaciju u prozoru Document. Razlog je to se pozicija nivoa sada rauna relativno u odnosu na poziciju nivoa roditelja. To dalje znai 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 ugnjeeni nivoi izgledaju u razliitim interfejsima
168 / 299
Dreamweaver MX 2004
Dreamweavera. Ako su prikazani nevidljivi elementi, u prozoru Document se prikazuje zlatna kotva, koja ukazuje na ugnjeenost nivoa. U panou Layers ugnjeeni nivo je prikazan tako to je njegovo ime uvueno ispod nivoa roditelja. Kliknite dugme plus/minus sa leve strane nivoa roditelja, ako elite da prikaete ili sakrijete njegovu decu.
Rad sa nivoima
Ovo su osnove rada sa nivoima u Drearmveaveru. Sta jo postoji? Istraivanje veza izmeu nivoa i CSS-Pa, kao i iskoriavanje prednosti koje nudi CSS.
Nivoi kao objekti sa stilovima

Iako se u Dreamweaveru sa nivoima najvie radi preko objekta Layer, tu nije kraj prie. Bilo koji element na strani, iji stil sadri osobinu za definisanje apsolutne ili relativne pozicije, moe da se u prikazu Design tretira kao nivo. Ovo je dobra vest, poto Vam se moda nee dopasti nain na koji objekat Layer vri 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 odreuje preko CSS-a, a koji radi kao nivo, i da pri tome ne koristite objekat Layer, treba da definiete stil koji sadri informacije o relativnoj ili apsolutnoj poziciji. Ako je stil korisnika klasa, ili ID, onda treba i da ga primenite na element strane. Evo kako se to radi: 1. Napravite novi stil. Moete da koristite pano CSS Styles ili neki drugi nain. 2. Kada se otvori okvir za dijalog New Style, napravite korisniku klasu. Ovo ete uraditi tako to ete izabrati Class i u polje Selector uneti ime. Moete i da napravite ID i da izaberete Advanced i unesete znak za funtu, iza kojeg sledi ime. Ovo se radi u polju Selector. Stil moete da napravite interno ili eksterno. Kada zavrite, kliknite OK. Kada se otvori okvir za dijalog CSS Style Definition, idite u kategoriju Positioning. Iz padajueg 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, moete da podesite i druge karakteristike, ili ako ste zainteresovani samo za pozicioniranje, razmotrite definisanje stila samo sa tim elementima. Kada zavrite, kliknite OK da biste zatvorili okvir za dijalog.
169 / 299
Dreamweaver MX 2004
Primena stila za pozicioniranje na postojei element na strani Sada moete 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 moete da tu klasu primenite. Ako je stil ID, onda moete 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 okrueni pravougaonikom nivoa. Dokle god je pravougaonik nivoa izabran, u Property Inspectoru se element prikazuje kao nivo. Ako kliknete unutar nivoa, pojavie 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 moete da uradite preko polja ID u Layer Property Inspectoru. Kreiranje elementa div koji sadri stil Moda elite da primenite svoj novi stil na oznaku div, koja moe da sadri vie elemenata. U Dreamweaveru postoji objekat Div, koji se koristi ba u takvim situacijama. Treba da uradite sledee: 1. Ako ve imate sadraj na strani, koji treba da okrui oznaku div, izaberite ga. Ako to nije sluaj, stavite kursor tamo gde elite da se ubaci oznaka div i njen sadraj. 2. Sa palete Layout Insert izaberite objekat Div ili iz glavnog menija izaberite Insert > Layout Objects > Div. Otvorie se okvir za dijalog Insert Div Tag. 3. Ako ste stil definisali kao klasu, izaberite ga iz padajueg menija Class u ovom okviru za dijalog. U polju ID unesite jedinstvenu re. 4. Ako ste stil definisali kao ID, izaberite ga iz padajueg menija ID. (U ovom meniju se prikazuju samo
170 / 299
Dreamweaver MX 2004
5.
ID oznake koje se ne koriste. Za razliku od klasa, ID se u dokumentu moe koristiti samo jednom.) Opcija Insert omoguava da definiete gde treba da se prikae element div. Ako ste izabrali neki sadraj, on e ga okruiti. Ako nita nije izabrano, onda se on postavlja na mesto kursora. Oznaku moete 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 korisnike klase ili ID-a. Rad sa nivoima koji predstavljaju stilove iz CSS-a Sa nivoima koji su krierani na ovaj nain se u osnovi radi na isti nain 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 deava ak i ako se stil nalazi u spoljanjoj datoteci sa stilovima. Koje prednosti donosi kreiranje nivoa na ovaj nain, u odnosu na kreiranje nivoa preko objekta Layer iz Dreamweavera? Prvo, tu su prednosti koje donosi odvajanje forme i sadraja koje postoji CSS-u. Poto su informacije o stilu u posebnoj klasi ili ID-u, kod na strani nije pretrpan razliitim informacijama. Ako je stil definisan u spoljanjoj datoteci, on se moe primeniti na vie strana na sajtu za formatiranje koje ukljuuje i pozicioniranje. Informacije o poziciji mogu da se uklone ako se obrie dodeljivanje stila, tako da se strane mogu brzo aurirati. Pored ovog, pano CSS Styles omoguava da dobijete efekte pozicioniranja koje nije mogue 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 znai da moete 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 definiete nivo preko CSS-a preko pozicioniranja desno i dole, neete ovde moi 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 matematika nepravilnost koja u pretraivau moe da dovede do problema.
Podrka pretraivaa za nivoe

Na alost, podrka za CSS-P u pretraivaima je i dalje prilino iznuena. Nijedan pretraiva pre verzije 4 ne podrava CSS-E Neki od novijih pretraivaa, koji obeavaju kompatibilnost sa standardima bi trebalo da stranu prikau na pravi nain. 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 pretraivaima koji nisu stadnardni, ak i ako nisu podrane neke nove stvari, se kae da su graciozno degradirane. Moda formatiranje preko nivoa nee 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 sadraj bude predstavljen po loginom i itljivom redu, ak i ako nema nekih posebnih mogunosti za pozicioniranje. To je ujedno i nain da stranu sa nivoima uinite dostupnom. Kako moete da proverite da li e se strana prikazati na prihvatljiv nain i bez formata sa nivoima? Verovatno je najlake reenje da u pretraivau iskljuite podrku za liste sa stilovima. Ako je formatiranje preko nivoa ubaeno u spoljanju datoteku sa stilovima, preko Dreamweavera, odnosno njegove opcije Design Time Style Sheets, moete 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 Vaem raunaru. On sadri iste dokumente i resurse koji e se eventualno publikovati, sa istim rasporedom datoteka i fascikli. Lokalni sajt je razvojno i test okruenje. Strane na kojima trenutno radite, kao i druge resurse, smetate na lokalni sajt. Struktura fascikli i rukovanje sadrajem strana se radi odavde. Alati za rad sa lokalnim sajtovima koji postoje u Dreamweaveru omoguavaju da obavljate proveru pravopisa, operacije pronalaenja i zamene, kao i proveru konzistentnosti. Lokalni sajt se u Dreamweaveru definie 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 oznaite 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 obriete fiziki sa raunara, onda ga uklonite iz ove fascikle. Sve vreme dok radite na razliitim datotekama, koje se nalaze na sajtu, Dreamweaver prati lokalnu korensku fasciklu, pratei koje su datoteke dodate ili uklonjene, zapisujud kad god se datoteci ili fascikli promeni ime, ili mesto u strukturi. On ispituje veze izmeu dokumenata, da bi bio siguran da su relativni linkovi tani. 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 definiu u okviru za dijalog Site Definition. Ako elite da napravite novi sajt, ili da promenite postojei, treba da koristite okvir za dijalog Site definition. Izaberite Site > Manage Sites (ili iz palete panoa Site, iz padajueg menija, izaberite Manage Sites). Ovim se otvara okvir za dijalog Manage Sites. Ovaj okvir za dijalog je centralno mesto odakle moete da pravite novi sajt (preko dugmeta New) ili da menjate postojei (preko dugmeta Edit).
U okviru za dijalog Site Definition postoje dva naina za definisanje informacija vezanih za sajt. To su Basic (poznat i kao Site Wizard) i Advanced (napredni) reimi. Osim ako ste potpuni poetnik u kreiranju sajtova, reim Advanced moe biti vrlo efikasan. On omoguava da podesite iste osnovne informacije koje prikuplja i arobnjak Site Wizard, ali ima i mnogo dodatnih opcija. Informacije su svrstane u logike kategorije, ali nema pristupa pitanje - odgovor, koji postoji kod arobnjaka. Definisanje lokalnog sajta preko reima Advanced ete poeti 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 dinamikih i statikih 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 moete da zadate ime preko kojeg Dreamweaver pristupa sajtu. Local Root Folder Ovde se definie fascikla na raunaru, koja se koristi kao koren sajta. Fasciklu moete da izaberete preko dugmeta Browse.
U kategoriji Local Info moete da zadate i neke informacije koje su opcionalne (ne mogu se zadati preko arobnjaka Site Wizard). To su sledee informacije: HTTP Addres Unesite kompletnu HTTP adresu, koja e biti glavna adresa sajta, kada se postavi na web server. Adresa, na primer, moe biti, http://www.mydomain.com. Ako na sajtu izmeu 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 moete 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 kea za sajt, odnosno dela memorije raunara koja se privremeno koristi za smetanje tih informacija. Kod malih i srednjih sajtova, ke moe znaajno da ubrza operacije koje se odnose na ceo sajt, kao to su Find and Replace, provera pravopisa, ili rukovanje linkovima. Kod velikih sajtova, ke moe i da uspori ove operacije (poto Dreamweaver mora da pamti previe informacija). Generalna strategija je da ke koristite kada prvi put definiete sajt. Kada kasnije primetite da operacije sa sajtom postaju sporije, iskljuite ke. U Dreamweaveru moete kreirati onoliko sajtova koliko Vam je potrebno. Svaki sajt mora da ima zadate najmanje svoje lokalne informacije, premda moe da sadri 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. Tekui sajt se prikazuje u panou Site. Njegovo ime je prikazano u padajuem meniju ovog panoa. Ako elite da drugi sajt postane tekui, moete da otvorite okvir za dijalog Manage Sites. Ovo moete da uradite preko opcije Manage Sites iz pomenutog menija. Okvir za dijalog Site Definition za tekui sajt moete da otvorite ako kliknete njegovo ime u padajuem meniju. Okvir za dijalog Site Definition, koji se koristi za kreiranje novih sajtova, se takoe koristi i za promenu postojeih. Promenu moete da radite ako izabereete Site > Manage Sites, zatim izaberete sajt, a onda kliknete dugme Edit. Moete i da dva puta brzo kliknete ime sajta u padajuem meniju panoa Site. U okviru za dijalog Manage Sites je prikazana lista svih sajtova koji su trenutno definisani. Ovde imate mogunost da pravite nove sajtove, da menjate postojee, da ih briete i jo puno toga. Ovom okviru za dijalog moete da pristupite ako izaberete Site > Manage Sites, ili ako iz padajueg menija u panou Site izaberete Manage Sites. Moete mu pristupiti i ako u okviru za dijalog Preferences > Site izaberete odgovarajue dugme. Ako iz ovog okvira za dijalog elite da menjate postojei sajt, izaberite ga, a onda kliknite Edit da biste otvorili okvir za dijalog Site Definition, za taj sajt. Ako elite da obriete sajt, izaberite ga i kliknite dugme Delete. Brisanje sajta ne brie i same datoteke, koje su njegov deo, niti na bilo koji nain menja lokalnu fasciklu. Briu 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 vrite sve poslove vezane za sajt. Dobro je da ovaj okvir za dijalog tokom rada ostavite otvorenim. U ovom prozoru moete da vidite datoteke sajta, kao i hijerarhijsku strukturu, da rukujete datotekama sa sajta i sl.
Proirivanje i suavanje panoa Site

Pano Site sa svim informacijama moe da zauzme veliki deo ekrana, to moe biti problem, osim ako nemate veliki monitor, ili podeen dvojni monitor na svojoj radnoj stanici. Reenje ovog problema je da se pano prikae u punom ili skraenom obliku. Prelaz iz jednog u drugi oblik se vri preko dugmeta Expand/Collapse koje se nalazi na paleti panoa Site. Kao i drugi panoi i ovaj se moe 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 skraenom obliku.
Prikaz datoteka na sajtu

U proirenom obliku pano Site u desnoj koloni prikazuje listu Site Files. U skraenom obliku, ova lista se podrazumevano prikazuje. Ona se moe prikazati ako se iz padajueg menija izabere Local View. U listi Site Files je prikazan sadraj lokalne korenske fascikle. Sadraj je ureen 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 omoguavaju sakrivanje i prikazivanje sadraja. Veina opcija koje u Dreamweaveru postoje za rad sa datotekama se nalaze u prikazu Site Files. Kolone u prikazu File View Kada je pano Site proiren, lista Site Files postaje vie od obine liste sa imenima. Ona sadri kolone sa informacijama o svakoj datoteci. To su ime, veliina, tip, datum promene i jo po neto. Ako je pano Site dovoljno irok, o datotekama moete puno da saznate samo ako pogledate informacije koje se nalaze u kolonama. Kao to moete da sa Windows Explorerom ili Mactionsh Finderom prikaete datoteke sortirane po nekoj od kolona, to moete i ovde, ako kliknete tu kolonu. Ako pano Site nije organizovan prema Vaim aljama, moete da ga menjate. Dreamweaver omoguava da podeavate pogled na pano Site. Ovo se radi preko kategorije File View Columns u okiru za dijalog Site Definition. Ovaj okvir za dijalog se moe otvoriti i ako se iz linije menija panoa Site izaberete View > File View Columns. U ovom prozoru moete da vidite sva imena kolona koje se vide u panou Site, bez obzira da li ste ih sami napravili ili ih je napravio Dreamweaver. Moete da vidite i da li su kolone vidljive. Ako elite da dodate svoju kolonu, kliknite dugme plus (+). Nakon toga moete da joj date ime, da zadate da li elite da joj se dodeljuju napomene (Design Note), da definiete 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 obriete 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. Seate se da prava kolona u prozoru sadri imena datoteka koje se nalaze na lokalnom sajtu. Naredna kolona sadri napomene (Design Note). Trea kolona ukazuje na veliinu datoteka, etvrta pokazuje tip datoteke. Ovde moete da vidite imena kolona (koja se prikazuju na panou Site po horizontali), po vertikali. Dreamweaver novu kolonu podrazumevano postavlja na dno liste, to znai da se nova kolona postavlja najdalje u desno od panoa Site. Ako elite da promentie poloaj nove kolone, upotrebite strelice navie i nanie koje se nalaze u gornjem desnom delu prozora Site Definition. Kada kliknete strelicu navie, prebacujete kolonu u levo na panou Site. Kada kliknete strelicu nanie, kolonu prebacujete na desni deo panoa Site. Moete da prebacujete i ugraene 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, meutim, ne govori kako su datoteke meusobno povezane. Koja datoteka se prva vidi kada neko doe na sajt? Koliko datoteka je vezano za tu prvu stranu? Dreamweaver prua jednostavan odgovor na sva ova pitanja, a to je prikaz Site Map. Oznaavanje naslovne strane Pre nego to budete mogli da koristite prikaz Site Map, Dreamweaveru morate da saoptite koja je naslovna strana. Ovo je prva strana koja se vidi kada neko doe na sajt. To to je naslovna strana ne mora da znai da i ime datoteke treba da bude home.html. Obino se ta prva strana oznaava kao index.html, default.html ili default.htm. Razlog je to to su web serveri obino 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 zaduenim za tehniku podrku, 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 moete da odete i direktno ako iz menija panoa Site izaberete View > Layout. U okviru za dijalog kliknite ikonu fascikle da biste potraili naslovnu stranu, ili moete 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 definiete 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, moete da pogledate mapu sajta. Kada je pano Site proiren, pritisnite dugme Site Map i iz padajueg 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, spoljanji linkovi, kao i linkovi koji vode do nekog medijalnog sadraja koju je ugraen na strani. Opcije koje utiu na prikazivanje mape sajta se podeavaju 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 ukae na status datoteke ili linka. Kada pogledate vizuelni jezik koji se koristi, videete da on, ukratko, o sajtu moe da Vam saopti sledee 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 oznaeni 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 ukljuili 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 sadraj, 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 sloen, onda itanje mape sajta moe biti komplikovano, zbog obilja ikona i linkova. Ovo moete 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 pokae samo deo Meanswear, na sajtu sa katalogom tofova), desnim tasterom mia kliknite datoteku na vrhu hijerarhije koju elite da vidite i iz pomonog 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 tekueg 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 omoguava da postojeu naslovnu stranu promenite ili na neku drugu stranu koja ve postoji, ili na kompletno novu stranu, ukljuujui 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. Otvorie se okvir za dijalog New Home Page. Ovde moete da unesete ime datoteke i naslov strane za svoju novu naslovnu stranu. Nakon kreiranja nove strane, moete da preuredite linkove, preko komande Link to Existing File ili ikone Point-to-File. Ovaj proces je objanjen u prethodnom odeljku ovog poglavlja. Da biste postojeu stranu postavili kao naslovnu na mapi sajta, prvo treba da izaberete na panou Site (morate biti u reimu 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. Moete i da desnim tasterom mia kliknete datoteku u panou Site i da iz pomonog menija izaberete Set as Home Page. Podeavanje rasporeda na mapi sajta Preko kategorije Site Map Layout, koja se nalazi u okviru za dijalog Site Definition, moete da podesite trenutnu mapu svog sajta. Iz ovog prozora moete da izaberete broj kolona, kao i da podesite irinu kolona koje se prikazuju na mapi sajta. Tu se definie broj strana koje se prikazuju u jednoj vrsti. Podrazumevana vrednost je 200. Obino ovu vrednost ne morate da menjate, poto retko imate vie od 200 strana koje su povezane sa naslovnom stranom. Sada moete da izaberete da li dokumenti na mapi sajta treba da se prikau kao datoteke ili sa naslovima strana. Ako ste bili marljivi prilikom kreiranja naslova strana, onda upotreba tih naslova na mapi sajta moe da bude dobar nain za pregled sajta. Prikazivanje datoteka naslova strana takoe pokazuje da li su naslovi takvi da mogu lako da se prate. Moda ete se iznenaditi koliko konfuzni mogu biti naslovi nekih strana, ako ne gledate i samu stranu. Na kraju, moete da podeavate i ono to e se nai na mapi sajta. Prva opcija omoguava da podesite da li se prikazuju datoteke koje su oznaene kao sakrivene. Kada je ova opcija potvrena, 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 potom da poaljete klijentu ili koju biste mogli da odtampate? Dreamweaver omoguava 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 padajueg menija File Type moete 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

Najvie posla u razvoju web sajta zahteva upravljanje sajtom, odnosno praenje datoteka na sajtu. Treba da budete sigurni da je struktura fascikli logika, da imena datoteka imaju smisla, da svi linkovi rade, kao i da je sve tamo gde ga moete brzo nai, ako kasnije treba neto 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 Vaim rukama. Kada radite u "centralnom prozoru za komande", drugim reima, panou Site, prst moete
178 / 299
Dreamweaver MX 2004
stalno da drite na pulsu sajta i da kontroliete svoje datoteke, kao to neki general kontrolie svoje trupe.
Upravljanje datotekama i fasciklama

Pano Site moete da shvatite kao zamenu za Windows Explorer ili Macintosh Finder. Neka bude otvoren sve vreme dok radite na sajtu. Koristiete 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 moete da uradite na vie naina. Prvi i najpopularniji metod je da se iz menija izabere File > Open. Onda preko okvira za dijalog Open moete da pronaete datoteku koju elite i kliknete dugme Open. Bri metod je da koristite pano Site. U panou Site moete dva puta brzo da kliknete datoteku (prikaz Site Files ili Site Map) i ona e se otvoriti. Sada kada znate nekoliko pomonih naina da otvorite datoteku, da li ete ikad koristiti neki od starih naina. 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. Moete i da desnim tasterom mia kliknete fasciklu u koju elite da smestite novu stavku i da iz pomonog 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 Obini ljudi koji nisu super organizovani retko biraju najbolji sistem organizacije, sve dok se na neki nain ne nau u projektu za razvoj nekog sajta. Moda e doi do savrene eme za davanja imena, ali tek poto su pre toga napravili nekoliko desetina datoteka sa imenima koja nisu ba bila korisna. Nona mora ovakvog scenarija je: kada nakon to ste poeli sa kreiranjem svog sajta, odnosno napravili linkove sa grafikom i vezama izmeu datoteka, treba da promenite lokaciju ili ime datoteke. Ta mala promena moe da trai 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 moe automatski da aurira 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, prevuete 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 nee prikazati na pravi nain, sve dok ne osveite sajt, preko opcije Site > Re-create Site Cache, koja se nalazi u meniju panoa Site. Ako promene koje pravite zahtevaju da se auriraju svi linkovi, Dreamweaver ima i okvir za dijalog Update Links u kome su prikazane sve datoteke koje treba aurirati, kao rezultat Vae 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 prilino dobar nain za upravljanje linkovima, kada Dreamweaver aurira linkove prilikom promene strukture datoteka. Ovo je ipak samo prvi korak u sloenom sistemu za upravljanje linkovima. Ako koristite mapu sajta, razliite komande iz menija panoa Site, kao Site Reports, strukturu linkova na sajtu moete da imate u svojim rukama. Opcija Point to File iz datoteke Ako ste otvorili datoteku i ako je pano Site bar delimino vidljiv na ekranu, moete 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 pronaite polje Link, ali umesto da kliknete dugme Browse ili da unosite ime datoteke u odgovarajue polje, pronaite 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 moete da vidite ceo prozor. ) Nastavite da vuete sve dok se ne naete iznad datoteke na koju elite da link vodi. Kada se naete na pravoj lokaciji, datoteka e biti istaknuta. 5. Ostavite dugme mia. 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 mogunost da to uradite preko mape sajta. Evo kako se to radi: 1. Zatvorite sve dokumente. (To uvek treba da uradite pre nego to ponete sa radom na nekom od poslova vezanih za rukovanje datotekama, koji bi mogli da auriraju sadraj 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. Moete da je prevuete do neke druge datoteke na mapi sajta, ili do datoteke iz liste Site Files. Kada se naete iznad eljene datoteke i kada je ona postane istaknuta, to je to. Napravljen je link. Mapa sajta e se promeniti i prikazae se da je izmeu dve datoteke dodat link. Otvorite datoteku od koje link vodi i idite do dna strane. Videete 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 nai na dnu strane. Ovo nije ba najlepe, 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 moete brzo da dodate, a da ne morate da otvarate
180 / 299
Dreamweaver MX 2004
datoteke. Ovo moete da uradite preko komandi iz menija. Da biste to mogli da uradite, morate biti u prikazu Site Map, ali tada nema prevlaenja. Postavljanje linka koji vodi na postojeu datoteku, preko menija iz prikaza Site Map Ako elite da date link na postojeu datoteku, a da ne morate da otvarate nijednu od ovih datoteka, i ne elite da koristite opciju point to file, treba da uradite sledee: 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. Moete i da desnim tasterom mia kliknete datoteku od koje elite da link vodi i da iz pomonog menija izaberete opciju Link to Existing File. 2. Kada se otvori okvir za dijalog Select HTML File, pronaite 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. Videete 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 moete da definiete koje datoteke na sajtu treba da budu povezane sa kojim drugim datotekama, tako da ceo sajt moete da napravite bez otvaranja datoteke. Da biste napravili novu datoteku i link na nju, sve u jednom procesu, treba da uradite sledee :
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 pomonog menija izaberite opciju Link to New File. 2. Kada se otvori okvir za dijalog Link to New File popunite sledee 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 videete da je link dodat kao obian tekstualni link i to na kraj datoteke, posle svog ostalog sadraja. Ako ponovite ovaj proces, moete da napravite ceo web sajt, poev od jedne naslovne strane. Uopte ne morate da naputate prikaz Site Map. Promena linkova Napravili ste svoj sajt i linkovima povezali nekoliko strana sa stranom gallery.html. Posle toga ste malo razmislili i zakljuili da linkovi sa tih strana treba da vode na stranu slideshow.html. Uz pomo Dreamweavera moete da promenite ono na ta linkovi ukazuju, bilo pojedinano, 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 sledee: 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. Otvorie 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 zavrite, kliknite Select. 4. Otvara se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje treba da se auriraju. Da biste promenili sve linkove i zatvorili okvir za dijalog, kliknite Update.
181 / 299
Dreamweaver MX 2004
Komanda Change Links Sitewide Ova komanda radi slino 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 sledei nain: 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 sledee informacije:
Change All Links To - Ako ste pre pokretanja komande izabrali datoteku, ova informacija je ve uneta. Ako to nije bio sluaj, 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. Otvorie se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje treba da se auriraju. 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 izraunaju relativni linkovi izmeu dokumenata na sajtu, pa ta komanda to i radi. Komanda Change Links Sitewide vie lii na obinu komandu Find and Replace, jer ona menja atribut href za odreene linkove. Jednu vrednost zamenjuje drugom. Posledice su sledee: 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 potraite neki link, Dreamweaver smatra da je taj link relativan u odnosu na koren. Ako unesete link koji je relativan u odnosu na dokument, dobiete poruku o greci. 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 moe koristiti za promenu bilo kojeg href atributa na neku drugu vrednost. Na primer, moete da promenite linkove mailto:, ako se promeni Vaa e-mail adresa, ili moete 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 nauiti kako da pomou Dreamweavera proverite sve svoje linkove. Videete i kako da popravite greke, ako ih pronaete. Provera linkova Moete odjednom da proveravate linkove u jednoj datoteci, da odjednom proveravate linkove u vie datoteka, ili da u jednom zamahu proverite ceo sajt. Funkcija Check Links iz Dreamweavera izvetava ove tri vrste moguih problema: Broken links Ovo su datoteke sa internim linkovima, koji ne sadre pravilnu putanju da bi link radio kako treba. To znai da Dreamweaver ne moe na sajtu da pronae interne linkove na koje ovo ukazuje. External links Spoljanji linkovi su moda najozloglaeniji 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 Vaem 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 spoljanjem linku ne znai da je taj link prekinut, ve samo da je to izvan domena sistema za upravljanje linkovima koji postoji u Dreamweaveru. Datoteke siroii Ovo su datoteke koje nemaju linkove koji vode prema njima. Drugim reima, ovo su datoteke za koje ne postoji navigacija koja vodi ka njima. Obino su ovo stare verzije nekih datoteka, koje se vie ne koriste. Sa druge strane, ne moete jednostavno da pretpostavite da li su ovakve datoteke nepotrebne i da li ih treba obrisati. Paljivo 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 sledee: 1. Upamtite sve otvorene dokumente. 2. Izaberite Site > Check Links Sitewide, ili desnim tasterom mia kliknite datoteku ili fasciklu iz liste Site Files, a onda iz pomonog menija izaberite opciju Sheck Links > Entire Site. Da biste proverili linkove samo za nekoliko datoteka, treba da uradite sledee: 1. Upamtite i zatvorite sve otvorene dokumente. 2. U listi Site Files ili na mapi sajta izaberite datoteke koje elite da proverite. Vie datoteka moete izabrati ako drite 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 sledee: 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 padajueg menija na vrhu prozora moete da vidite bilo koji od ova tri tipa linkova (prekinuti linkovi, spoljanji linkovi i siroii). 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, poto ne postoje linkovi koji su sa ovim povezani.
Odavde moete ili da zatvorite prozor Results/Link Checker ili da listu upamtite u datoteku, kod koje su stavke odvojene tabulatorima. Nakon toga listu moete 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 odtampali. Popravka linkova Postoje dva naina za poptavku prekinutih i spoljanjih linkova (ako je to potrebno). U oba sluaja morate da koristite prozor Results/Link Checker. Prvi metod je da dva puta brzo kliknete ime datoteke koja je prekinuta ili spoljanji 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. Moete da ukucate pravu referencu, ili da preko ikone fascikle ili komande Point-to-File izaberete datoteku na koju link treba da vodi. Drugi nain je verovatno laki i bri, ali samo ako dobro poznajete sajt. U prozoru Link Checker kliknite jednom link koji je u pitanju (u desnoj koloni). Na taj nain moete da unesete novi link. Ako ste trenutno u delu sa prekinutim linkovima, pojavljuje se ikona fascikle koja omoguava da pronaete pravi link. Ako postoje i drugi prekinuti linkovi sa istom referencom, Dreamweaver e Vas pitati da li treba i njih da aurira.
Upravljanje aktivom preko panoa Assets

Pano Assets prati i omoguava da lako aurirate 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 vie strana na sajtu.
183 / 299
Dreamweaver MX 2004
Pano Assets ete otvoriti ako izaberete Window > Assets, ili proirite grupu Files u svom panou i preete 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. Poto su ovi elementi organizovani po tipu, a ne po hijerarhijskoj strukturi fascikli koja se koristi u panou Site, u jednom trenutku moete 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, ukljuujui i boju pozadine, kao i boje teksta i linkova. URLs Ovo su spoljanje 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 Vaem 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 Vaim stranama se ne uzima u obzir. Templates Kada se koriste kako treba, abloni predstavljaju lak nain za kreiranje i ureivanje slinih strana. Pre nego to ponete da previe koristite ovakav dizajn, treba da paljivo prouite koje su njihove prednosti i nedostaci. Library Biblioteke su sline ablonima, tako da promenom samo jednog primerka utiete na promene vie drugih. Obino su mali elementi sadraja, koji se koriste na vie strana na sajtu, kao to je logo kompanije ili podrazumevani pano za navigaciju.
184 / 299
Dreamweaver MX 2004
Umetanje elementa iz aktive

Pano Assets omoguava 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 prevlaenju, ili izboru i kliku miem. Da biste u svoj dokument ubacili medijalni element, pomou tehnike uhvati i prevuci, treba da uradite sledee: 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 moete da prebacite bilo gde u dokumentu, njegova konana pozicija u dokumentu zavisi od toka sadraja koji se nalazi oko njega. Prevlaenje slike na sredinu pasusa dovodi do toga da tekst ide preko slike. Prevlaenje slike na desnu stranu nee postaviti sliku tu, ako je sadraj strane levo poravnat. Da biste preko dugmeta Insert ubacili medijalni element, treba da uradite sledee: 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 sloenije od ubacivanja medijalnih elemenata, poto 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 pronaite 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 moda 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 nain, 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 moe 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. Prikazae se boje koje moete 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 moete 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, pronaite 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 sadri svaki element koji postoji na sajtu, ukljuujud boje, slike i URL adrese koje su moda samo jednom koriene na sajtu. Obino, kako sajt raste i broj elemenata na sajtu raste. Kada ponete da rukujete sajtom od 30 strana, lako se moe desiti da imate 50 ili 60 razliitih slika, ako ne i vie. Kao to moete da zamislite, ova lista elemenata postaje vrlo sloena i kroz nju se sporo kree. Da bi reio ovaj problem, Dreamweaver ima elemente favorite. Od svih elemenata koji se na ovaj nain mogu koristiti na sajtu, moete 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 preete u prikaz Favorite. Ne samo da je lake kretati se kroz listu od 10 ili 100 elemenata, nego se i prikaz Favorite moe organizovati u fascikle, tako da se pristup jo vie olaka i logiki definie. Pregled favorita i rad sa njima Ove funkcije sa panoa Assets koje se mogu primeniti na obine elemente vae 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 moete dodati u favorite, ako uradite jedno od sledeeg: 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 pomoni meni, tako to ete kliknuti strelicu usmerenu u desno u gornjem desnom uglu panoa. Ovaj meni moete otvoriti i ako desnim tasterom mia kliknete neki od elemenata. U prikazu Design u prozoru Document, izaberite elemente (ili objekte) koje elite da dodate. Desnim tasterom mia kliknite objekte, da biste otvorili pomoni meni. Izaberite opciju Add to [Asset tip] Favorites. Lista favorita ne bi mnogo vredela, ukoliko ne biste mogli da menjate miljenje i briete stavke iz nje. Da biste neki element izbacili iz ove liste treba da uradite sledee: Izaberite element koji elite da izbacite iz liste. Kliknite dugme Remove from Favorites. Moete i da desnim tasterom mia kliknete neki element i da iz pomonog menija izaberete opciju Remove from Favorites. Alternativno, moete i da u listi Favorites izaberete element i da pritisnete taster Delete. Moete i da obriete celu fasciklu sa favoritima, ime se uklanja i sadraj te fascikle. Elementi koje izbacite iz liste favorita nisu obrisani i sa sajta. Oni su jednostavno izbaeni iz liste Favorite Assets. Grupisanje elemenata u listi favorita Da biste izbegli kasniju zbrku, elemente moete da grupiete u fascikle. Na taj nain, slike koje koristite za
1. 2.
186 / 299
Dreamweaver MX 2004
glavnu navigaciju po sajtu moete 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 nain 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. Moete i da izaberete opciju New Favorites, ako desnim tasterom mia kliknete neki od elemenata. 3. Dajte ime fascikli i prevucite element u tu fasciklu.
Podeavanje panoa Assets

Kao i veina drugih stvari u Dreamweaveru, i pano Assets moete prilagoditi na razliite naine. Pored toga to moete definisati svoje favorite (ovo smo ve objasnili), moete i da promenite redosled prikazivanja elemanta. Podrazumevano se svi elementi prikazuju po rastuem alfabetskom redu (od A do Y), po imenu i vrednosti. Ovaj redosled moete da promenite ako kliknete zaglavlje kolone po kojoj elite da izvrite sortiranje. Ovim se elementi sortiraju po rastuem abecednom redu, ali za tu kolonu. Ako po drugi put kliknete zaglavlje kolone, sortiranje je i dalje po abecednom redu, ali sada po opadajuem (od Z do A). Ako sortirate kolone sa brojevima, kao to su veliina datoteke, onda je sortiranje po numerikim vrednostima, a ne po abecedi, od najmanje prema najveoj ili obrnuto. Moete da promenite i irinu kolona u panou Assets. Jednostavno postavite kursor direktno iznad linije koja odvaja dve kolone. Primetiete da kursor menja oblik u dvostruku strelicu. Sada moete da kliknete i prevuete kolonu dajui joj eljenu irinu. Ovo se obino radi i kod veine prozora koji koriste kolone.
Upotreba aktive na sajtu

Dreamweaver omoguava da ovu aktivu koristite na razliite naine. On ak omoguava da kopirate elemente i delite ih izmeu razliitih sajtova. Ako elite da neki element aktive iskopirate sa jednog sajta na drugi, treba da uradite sledee: 1. Izaberite elemente koje elite da kopirate na drugi sajt. Moete 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. Pojavie se podmeni sa listom sajtova na koje je mogue 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. Takoe je bitno da znate da se elementi koje kopirate na ovaj nain, automatski dodaju u listu favorita na novom sajtu. Nakon to sajt na kome radite postane suvie velik, moete da zabrovite gde se nalaze neki elementi koje ste koristili. Dreamweaver moe da Vam pomogne da ih pronaete. Ako samo elite da naete gde se nalazi odreeni element (ili grupa elemenata), koje ste koristili na lokalnom sajtu, treba da uradite sledee: 1. U panou Assets izaberite element ili elemente za koje elite da pronaete lokaciju. 2. Kliknite desnim tasterom mia. Otvorie se pomoni meni. Ovom meniju moete 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. Pojavie se pano Site, a element koji traite 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 moete lako da promenite neki od elemenata. Ovo moe biti korisno ako elite da promenite vie slika, ali ne elite da gazite kroz komplikovanu strukturu panoa Site. Promene preko panoa Assets moete da uradite na sledei nain: Dva puta brzo kliknite ime elementa. Ovim se otvara podrazumevani editor (onako kako ste definisali u podeavanjima Dreamweavera). Izaberite element i kliknite dugme Edit koje se nalazi u donjem desnom uglu panoa. Tip elementa koji ste izabrali doreuje ta se sledee deava. Sa elementima kao to su slike ili Flash filmovi, pokree se spoljanja aplikacija i u njoj se otvara datoteka koja je u pitanju. U tom sluaju, jednostavno promenite element i ponovo ga izvezite u fasciklu na lokalnom sajtu, prepisujui staru verziju. Boje i URL aderse nee pokrenuti posebnu aplikaciju. Ove tipove elemenata aktive moete da menjate samo
187 / 299
Dreamweaver MX 2004
ako se nalaze u delu Favorites. Promena boja otvara okvir sa uzorcima, odakle moete da izaberete boju. Promena URL adrese otvara okvir Edit URL u kome moete 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 pomou panoa Assets ne moete da kreriate svaki tip elementa, moete 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. Moete da koristite i pomoni meni, koji se otvara ako listu kliknete desnim tasterom mia. Otvorie se uzorak sa bojama, odakle moete da izaberete novu boju. Nakon to ste izabrali boju, moete 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. Moete da koristite i pomoni meni, koji se otvara ako listu kliknete desnim tasterom mia. Otvorie se okvir za dijalog Add URL u kome moete da definiete nadimak, kao i URL putanju za novi element.
Rad bez sajta

U Dreamweaveru MX 2004 je novost to je na kraju mogue raditi i bez definisanog sajta. Ovo je korisno ako imate samo jednu stranu, koju elite da napravite, a ne elite da stajete i podeavate sajt. Ako elite da radite bez sajta, u padajuem meniju panoa Site izaberite opciju Computer. Umesto da se prikae lista datoteka u fascikli lokalnog sajta, pano Site sada prikazuje listu datoteka na Vaem raunaru. Ovu listu moete da proirujete. Preko liste moete da pronaete bilo koji dokument koji elite da otvorite ili ubacujete. Dreamweaver nee insistirati da ove datoteke budu u korenskoj fascikli, a nee ni nuditi da u nju kopira te datoteke. Naravno da u ovom sluaju ne moete da koristite prednosti upravljanja sajtom.
188 / 299
Dreamweaver MX 2004
14. Publikovanje i odravanje sajta

Kako Dreamweaver radi sa udaljenim sajtovima
Pre nego to dublje zaemo u funkcije i karakteristike udaljenih sajtova, koje nudi Dreamweaver, morate da shvatite ta Dreamweaver podrazumeva pod udaljenim sajtom. Tokom vaeg lutanja po Internetu ste verovatno primetili da adrese web strana prate osnovnu i sreom, intuitivnu emu imena. Na primer, mnoge naslovne strane, odnosno podrazumevani dokumenti, imaju ime index.htm. Ako kliknete da biste videli stranu sa proizvodima nekog preduzea, verovatno ete biti preusmereni u podfasciklu sa proizvodom. Ne samo da ovo omoguava bolju organizaciju i odravanje, ve ima i vie smisla. Kada postavljate svoj web sajt (upload), Dreamweaver preslikava njegovu strukturu na udaljeni sajt, to je vie mogue (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 previe jednostavnim, ovo preslikavanje pomae na nekoliko naina: Pomae prilikom auriranja i odravanja sajta. Pomae kod izbegavanja prekinutih linkova, kao i drugih linkova koji iz nekog razloga nisu ispravni. Pomae da se sprei pojava vie kopija jedne web strane ili datoteke sa slikom. Ovim se uva prostor servera i u nekim sluajevima se smanjuje saobraaj koji se zauzima. Dodaje se nivo profesionalnosti Vaim stranama. Lake je shvatiti i pratiti relativne linkove. U sutini, da biste mogli da koristite veinu od alata Dreamweavera koji se koriste za rad sa udaljenim sajtovima, lokalni i udaljeni sajt moraju biti identine kopije. Odravanje strukture datoteka i fascikli je od vitalnog znaaja za sve Vae linkove. Ovo i nije problem, poto Dreamweaver to radi umesto Vas (ukljuujui i kreiranje potrebnih podfasckli). On to radi automatski, preko komandi kao to su Synchronize, Get i Put. Pored ovoga ete nauiti i kako da pravilno konfiguriete 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 reimu. Ovaj drugi nain je efikasniji, ali i tei za novajlije, jer nudi vie opcija. Ako elite da udaljeni sajt definiete u naprednom (Advanced) reimu, otvorite okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili iz padajueg 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 doete u deo Remote Info je meni Access. Ono to ovde izaberete dinamiki generie ostale opcije. U narednim odeljcima emo se pozabaviti mogunostima koje ovde moete podeavati.
189 / 299
Dreamweaver MX 2004
Bez uspostavljanja veze

Ako kao metod pristupa izaberete None, onda nemate na raspolaganju druge opcije i preko Dreamweavera ne moete da prebacite svoj sajt na udaljenu lokaciju. Ako ne uspostavite vezu ne moete ni da koristite neke od naprednih mogunosti za rukovanje sajtovima, koje postoje u Dreamweaveru. Iako u sluaju kada nemate definisan nain pristupa udaljenom sajtu ne moete ni da koristite Dreamweaver za rukovanje udaljenim sajtom (kao to su prebacivanje Vaeg sajta na taj udaljeni sajt), to moete 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 preporuuje da koristite ugraene funkcije za rukovanje sajtovima, koje postoje u Dreamweaveru.
FTP
FTP je skraenica 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. Slino kao kod Hypertext Transfer Protocol (HTTP, koji se koristi za transfer web strana preko Interneta), i FTP zahteva klijentsku i serversku aplikaciju. U ovom sluaju Dreamweaver se ponaa kao FTP klijent. Softver na udaljenom serveru se ponaa kao FTP server. Ako kao metod pristupa u Dreamweaveru izaberete FTP onda u okviru za dijalog Site Definition treba da unesete sledee informacije :
190 / 299
Dreamweaver MX 2004
Host Directory Ovim se definie fascikla na serveru gde e se nalaziti prebaeni sajt. To je isto kao facscikla na lokalnom rauinaru. Dosta servera ima osnovnu adresu sajta www.htdocs ili public_html. Ako niste sigurni koja je fascikla domain, ostavite ovo polje prazno. Ovo je podrazumevano glavna fascikla FTP hosta. (Neki host raunari koriste kombinaciju korisniko ime/lozinka da Vas automatski prebace u odgovarajuu fasciklu.) Ako je u polju host directory neispravna putanja, Dreamweaver moda nee uspeti da se povee. ak i ako je FTP informacija ispravna, a vi preko nje moete da se poveete sa drugim klijentima. Ako imate problema kod povezivanja, obriite vrednost u polju Host Directory. Nakon to se poveete, moete da proverite koja je prava fascikla. Login Ovo je korisniko ime Vaeg 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 omoguava Dreamweaveru da podesi FTP sesiju umesto da to radi FTP server. Ako niste sigurni ta ovde treba uneti, ostavite polje nepotvreno i proverite sa svojim mrenim administratorom. Use Firewall Ovo diktira da li e Dreamweaver koristiti podeavanja firewalla za povezivanje sa FTP serverom. Ako je potrebno da podesite ovu vrednosti, pitajte svog mrenog administratora. Use Secure FTP Ovim se omoguava da ifrujete svoje informacije o nalogu. Ne ifruju se datoteke koje se prebacuju. Use Check In /Check Out Ovim se ukljuuje 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 mrei (LAN) kao i vi. Ova opcija se esto koristi kada pravite intranet sajt ili ako nudite dizajn i smetaj tuih sajtova. Kod ovakvog tipa veze, morate da zadate putanju do udaljene fascikle. Te informacije moete da unesete ili preko dugmeta Browse moete da pronaete fasciklu na udaljenom sajtu.
191 / 299
Dreamweaver MX 2004
Kod ovakvog naina povezivanja imate mogunost automatskog osveavanja liste datoteka na udaljenom sajtu. Ako je ova opcija ukljuena, Dreamweaver osveava tu listu za Vas (na primer, povezuje se sa udaljenim raunarom i ponovo pravi listu udaljenih datoteka) svaki put kada se dodaju ili briu udaljene datoteke. Ako ne ukljuite ovu opciju i dalje to moete da uradite runo, 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 omoguavaju da vie programera radi zajedno i da prate datoteke, tako da se ne desi da jedan programer prebrie neto to je neko drugi uradio. Visual SourceSafe (VSS) je Microsoftov program. RDS i WebDAV su protokoli (kao FTP), to znai da je u pitanju skup pravila koja se koriste za komunikaciju i praenje datoteka. Protokol je skup pravila oko kojih su se raunari sloili prilikom transporta datoteka. Ove opcije koje se odnose na udaljena podeavanja su razliiti naini povezivanja raunara i prebacivanja datoteka.
Rad sa udaljenim sajtom

Nakon to u okviru za dijalog Site Definition podesite informacije vezane za udaljeni sajt, moete 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 proirite pano Site tako da se prikazuju i leva i desna strana, imate mogunost da prikaete mapu sajta ili listu Remote Files. Oni se prikazuju u levom panou. Ako elite da prikaete listu Remote Files, kliknite
192 / 299
Dreamweaver MX 2004
ikonu Files u gornjem levom uglu proirenog prozora. Za razliku od Dreamweavera, veina 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 nain prikazivanja, otvorite okvir za dijalog Prefences > Site i promenite raspored.
Uspostavljanje i prekidanje veze

Dugme Connect/Disconnect omoguava 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 Vaem raunaru ili u Vaoj mrei, ovo dugme je sive boje, poto 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 ponete prebacivanje datoteka iz lokalne u udaljenu fasciklu. Kada se poveete, u donjem levom uglu ikone dugmeta Connect se pojavljuje zeleno svetlo. Tako moete da znate da li ste povezani sa udaljenim serverom. Ako kliknete to dugme veza se prekida. Ako, prilikom uspostavljanja veze sa udaljenim serverom naiete na probleme (ili ako samo elite da znate ta Dreamweaver radi kada pritisnete dugme Connect), moete da pogledate FTP dnevnik. Ovo se deava ako iz menija panoa Site izaberete opciju View > Site FTP Log, ili ako otvorite pano Results (Window > Results) i preete 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 moete da postavljate ili sa njega preuzimate datoteke. Kada elite da prebacite datoteke na sajt, to je proces postavljanja, poto postavljate datoteke na udaljeni sajt. Kada elite da preuzmete datoteke sa udaljenog servera, to je proces dobijanja, poto dobijate datoteku sa udaljene fascikle. U Dreamweaveru datoteke moete preuzimati i prebacivati na sledee naine: Kliknite dugme Get ili Put na paleti panoa Site. Izaberite Site > Get ili Site > Put sa menija panoa Site. Desnim tasterom mia kliknite izabranu datoteku i iz pomonog menija izaberite Get ili Put. Moete i da izaberete zabavan ali i opasan nain, a to je prevlaenje 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 omoguiti 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 ukljue sve datoteke koje su linkovima povezane sa tim HTML dokumentom. Tu spadaju i slike i drugi multimedijalni sadraj. Izaberite Yes ili No. Dreamweaveru moete da kaete i da li ubudue treba da postavlja isto pitanje. Ako odluite da Dreamweaver vie ne treba da postavlja to pitanje, mogli biste da se kasnije predomislite. Ovu opciju moete ponovo da ukljuite ako odete u deo Site u okviru Preferences i potvrdite polje Prompt on Get or Put. Ako odluite da ovu mogunost ne koristite, moete da naterate da Vas Drearmveaver to pita samo povremeno, ako prilikom izbora dugmeta Get ili Put drite pritisnut taster Alt.
Sinhronizacija lokalnog i udaljenog sajta

Tokom svog "programerskog" ivota ste sigurno probdeli nekoliko noi u pokuaju da projekat zavrite na vreme. Moda 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 naina da se ovo uradi. Moe se raditi runo i automatski. U narednom odeljku smo objasnili stari manuelni metod. Nakon toga smo objasnili snagu komande Synchronize, koja omoguava da ovo radite automatski.
Izbor novijih datoteka na udaljenom i lokalnom sajtu

Komanda Select Newer Local i komanda Select Newer Remote moe da se koristi za manuelnu sinhronizaciju sajtova. Ova funkcija poredi datum promene svake datoteke na lokalnoj maini sa datumom promene datoteke na udaljenom sajtu. Novije lokalne datoteke Ako elite da izaberete novije datoteke na lokalnom sajtu, desnim tasterom mia 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 istai datoteke koje su novije u odnosu na datoteke na udaljenom sajtu. Odavde moete 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, mogue je da na udaljenom sajtu postoji novija verzija dokumneta, od one koju imate na lokalnom sajtu. U tom sluaju, pre nego to ponete da menjate dokument, treba da proverite da li na udaljenom serveru postoji novija verzija. Ovo moete da uradite ako u panou Site kliknete desnim tasterom mia i izaberete opciju Select Newer Remote, ili ako iz menija panoa Site izaberete Site > Select Newer Remote. U tom sluaju se istiu datoteke koje su novije na udaljenom sajtu. Ako eltie da tu noviju verziju prebacite kod sebe, dovoljno je da kliknete dugme Get. Poto Dreamweaver istie 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 nee izabrati nijedna datoteka. Moda ete pomisliti da se nita nije desilo, ali su oba sajta aurirana. Treba da znate da Dreamweaver proverava sve datoteke na sajtu, odnosno da komanda Select Newer Remote moe da potraje. To je sluaj ako sa udaljenim serverom imate sporu vezu. Ponekad moete 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 nain za sinhronizaciju datoteka, nego runo selektovanje novijih datoteka. Deo lepote i snage ove komande je u tome da moete da je podeavate onoliko koliko elite. To znai da moete da sinhronizujete samo jednu fasciklu ili ceo sajt. Moete i da izaberete da obriete neku datoteku na udaljenom sajtu, koja ne postoji na lokalnom, ili obrnuto. Ovo nije mogue kod prethodnog (runog) metoda. Sinhronizaciju sajta pomou komande Synchronize ete izvriti na sledei nain: 1. Osim u sluaju da elite da sinhronizujete ceo sajt, izaberite datoteke koje elite da sinhronizujete. 2. Izaberite Site > Synchronize. Otvorie se okvir za dijalog Synchronize Files. 3. Iz padajueg menija Synchronize izaberite da li elite da aurirate ceo sajt ili samo izabrane datoteke. 4. Iz padajueg menija Direction izaberite neku od sledeih 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 moete da obriete te datoteke. Potrebno je samo da potvrdite odgovarajue polje u donjem levom uglu. Treba da imate na umu da je brisanje datoteka konana operacija i da se ne moe ponititi. Ovu opciju treba koristiti vrlo paljivo. Na serveru esto postoje datoteke koje su potrebne, kao to su dnevnici, skriptovi i sl. za koje na lokalnom sajtu ne postoje odgovarajue datoteke. Slino se moe 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 obrauju datoteke koje sinhronizuju i otvara se prozor Synchronize. Na taj nain moete da vidite ta e se desiti ako kliknete OK. Prikazae se broj datoteka koje e biti aurirane, 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 potvrena sva polja. Ako neko polje ne potvrdite, onda se datoteka i ne obrauje. Na taj nain moete da osigurate da tano znate ta se deava, odnosno koje promene e napraviti Dreamweaver. Ovo je samo za sluaj da znate neto to on nee uraditi. 8. Kliknite OK da biste zatvorili okvir za dijalog. Kada sinhronizaciju vrite sa opcijom Get Newer Files from Remote moete da obriete lokalne datoteke kojih nema na udaljenom sajtu. Ako sinhronizujete sa opcijom Get Newer Files from Local, moete da obriete datoteke na udaljenom serveru, kojih nema na lokalnom serveru. Sa ovim opcijama treba da budete izuzetno paljivi. Najee 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 briu. Slino se moe 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 zavrite sinhronizaciju, moete da vidite koje je akcije Dreamweaver preduzeo. Dreamweaver prikazuje napredak sinhronizacije i nakon to zavri omoguava da upamtite tekstualnu datoteku sa izvrenom procedurom.
Sakrivanje
Poto se esto deava da na svom lokalnom sajtu imate aktivu, koja se nikad ne prebacuje na udaljeni sajt, Dreamweaver omoguava da odreene fascikle i datoteke sakrijete. Sakrivanje sajta omoguava da iskljuite fascikle i tipove datoteka iz odreenih operacija, kao to su preuzimanje ili prebacivanje (get i put). Treba da znate da moete da sakrijete odreene tipove datoteke (kao to je PNG), ali ne i konkretne datoteke. Stavke koje sakrivate su specifine za sajt, to znai da svaki sajt na kome radite moe da sakriva razliite fascikle i tipove datoteka. Fascikle i tipove datoteka moete da sakrivate kako na lokalnom, tako i na udaljenom sajtu. Kada je fascikla sakrivena, onda se iskljuuje iz sledeih 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
Ukljuivanje i iskljuivanje sakrivanja

Mogunost sakrivanja je podrazumevano ukljuena. Ako elite da ovo iskljuite, otvorite okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili upotrebite padajui 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 ukljuite ili iskljuite opciju Enable Cloaking. Ako iskljuite sakrivanje, onda sve sakrivene datoteke opstaju otkrivene. Dreamweaver nee zaboraviti da ste ih jednom sakrili. Ako kasnije ponovo ukljuite 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 mia i u panou Site izaberite Cloaking > Cloak. Moete 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 pojedinanih datoteka se radi na malo drugaiji nain. Umesto da sakrijete konkretnu datoteku, sakrivate odreeni tip datoteke, to se definie ekstenzijom datoteke. Ovo ete uraditi tako to ete otvoriti okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili upotrebite padajui meni Site u panou Site) i idite u kategoriju Cloaking. Ukljuite 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 obriite te stavke. Od sada pa nadalje e sve datoteke koje pripadaju izabranom tipu u panou Site biti oznaene crvenom linijom.
Otkrivanje
Ako elite da otkrijete sakrivene datoteke, bez obzira da li ste ih sakrili po tipu ili po lokaciji, kliknite desnim tasterom mia 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. Otvorie 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
omoguava da definiete udaljenu vezu, bez definisanja sajta. Udaljenu vezu ete napraviti ako desnim tasterom mia kliknete ikonu FTP and RDS Servers, koja se nalazi u panou Site, ili ako iz menija u panou Site izaberete meni Servers. Otvorie se okvir za dijalog Configure Server. Vezi dajte ime koje ete kasnije prepoznati. Unesite podeavanja slina onima koja ste zadavali u kategoriji Remote Info u okviru za dijalog Site Definition. Kada zavrite, 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. Ubudue e proirivanje veze sa tim serverom u panou Site, radi prikazivanja datoteka, istovremeno znaiti i uspostavljanje te veze, naravno, ako ve pre toga nije uspostavljena. Ako elite da na udaljenom serveru sauvate dokument (da ga prebacite tamo) treba da uradite sledee: 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 pronaite svoju vezu. Prikazae 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 sadraja servera u panou Site, desnim tasterom mia kliknite tu datoteku i izaberite opciju Open. Ovim se otvara kopija datoteke. Datoteka se ne prebacuje na lokalni server. Ovo moete da zakljuite ako u prozoru Document pogledate naslovnu liniju otvorenog dokumenta.
197 / 299
Dreamweaver MX 2004
198 / 299
Dreamweaver MX 2004
15. Kreiranje dinamikih sajtova u Dreamweaveru

Osnovno o dinamikim sajtovima
Statika 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. Dinamika web strana sadri mesta na kojima server ubacuje odreeni sadraj i to u trenutku kada korisnik zatrai stranu. Tu su i instrukcije kako da server napravi tu stranu. Ako pogledate kako se web strane alju od servera do pretraivaa, shvatiete i kako ovo radi.
Kako rade statike strane

Kada posetilac klikne link ili unese URL adresu, pretraiva alje zahtev u obliku URL-a, koji ide na server. Server pronalazi stranu i odgovara tako to je alje nazad do pretraivaa. 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 dinamike strane

Dinamiki podaci u ovu jednainu ulaze na tri naina: Ukljuivanje na strani servera (Server-Side Include - SSI) CGI skriptovi Povezivanje sa bazom podataka preko aplikacionih servera Iako je namena ovog poglavlja da pokae kako funkcionie trei metod, ipak smo objasnili sva tri naina, da biste videli kako su oni povezani. Ukljuivanje na strani servera (SSI) Najjednostavnija vrsta dinamikog sadraja, i ona koju je najlae razumeti, je SSI. SSI je mesto koje se nalazi u HTML dokumentu, koje sadri instrukcije da server treba da ga zameni nekim podacima koji se dinamiki generiu. Podaci koji se ubacuju mogu biti delovi unapred definisanog koda, ili tekui datum i vreme, koji su prikupljeni iz nekog skripta ili iz baze podataka. Kod za SSI bi mogao da izgleda ovako:    HTML dokument koji sadri SSI se pamti u datotekama sa posebnom ekstenzijom, obino.shtm ili.shtml. Ovim se server upozorava da postoji SSI. Kada server primi zahtev za nekim SHTML dokumentom, on odgovara pronalaenjem SSI-ja koji je ugraen na toj strani, izvrenjem instrukcija koje su tu zadate i ubacivanjem rezultujuih podataka u dokument, koji se zatim alje do pretraivaa. Obino ovo obuhvata postavljanje nekih realnih podataka (kao to su datum i vreme, ili ak sadraj neke druge datoteke na serveru) na mesto koje je definisao SSI. Dokumenti sa CGI skriptovima Prave dinamike strane se mogu napraviti preko CGI skriptova. Ovi skriptovi obrauju zahteve pretraivaa i alju odgovor, pri emu se pamti ono to je korisnik uneo, a isporuju se web strane sa sadrajem za koji se unapred zna samo gde e se nalaziti. Strane ak mogu i da se prave u vreme izvrenja, na osnovu niza paria koda. Za ovu diskusiju je potrebno samo da znate da se CGI skriptovi (obino pisani u Perlu) nalaze na web serveru u posebnoj fascikli. Ova fascikla se generalno zove cgi-bin. Kada korisnik popuni formu, akcija te forme moe 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, pretraiva trai zadati skript i prosleuje mu promenljive sa forme. Ovo se prosleuje kao deo URL adrese, ili kao pridruena pota. Poto je ekstenzija strane koja se trai.cgi ili.pl (u zavisnosti od softvera koji se koristi), web server zna da traena strana ne moe da se samo poalje pretraivau, ve pronalazi skript i izvrava ga. Skript moe da obavlja neke jednostavne zadatke, kao to je
199 / 299
Dreamweaver MX 2004
slanje onog to je korisnik uneo na odreenu adresu, ali moe i da obavlja sloenije poslove, kao to su neki prorauni sa tim korisnikovim podacima, komunikacija sa bazom podataka, itd.
Aplikacioni serveri i povezivanje sa bazama podataka Trei i najmoniji nain za kreiranje dinamikih web strana je upotreba baza podataka, koje obezbeuju sadraj, zajedno sa specijalnim programima, aplikacionim serverima, koji u trenutku izvrenja prave web strane. Proces generalno tee na sledei nain: 1. Pretraiva alje HTTP zahtev koji sadri URL adresu dokumenta sa ekstenzijom kao to je.asp,.aspx,.cfm,.php ili.jsp. 2. Web server prepoznaje ekstenziju, pronalazi traenu stranu i aktivira aplikacioni server. Ovo moe biti Active Server kontrola, ugraena u Microsoftov web server, ColdFusion Server, Tomcat Java server ili PHO modul. 3. Aplikacioni server ita dokument i izvrava skriptove koji u njemu postoje, ili interpretira korisnike oznake koje tu pronae. Ovi skriptovi i oznake obino sadre zahteve za nekom vrstom informacija iz baze podataka (na primer, "ovde postavi sadraj polja Product Name, iz baze Widget International"), ili instrukcije da treba neto 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 odgovarajuu bazu podataka i izvravaju traenu akciju. Ako su traene neke informacije, one se alju nazad na aplikacioni server. 5. Apliacioni server konstruie HTML stranu koja sadri traene informacije, formatirane prema instrukcijama u prvobitnom dkoumentu. Sve to se alje nazad do web servera. 6. Web server ovu stranu alje do pretraivaa. Operativni sistem na serveru i HTTP serverski softver Web server je raunar koji koristi neku verziju operativnog sistema kao to su Windows ili Unix/Linux (ukljuujui i Mac OS X), na kojima radi specijalni program koji obrauje HTTP zahteve. Termin web server u prii o dinamikim sajtovima obino ukazuje ne na sam raunar, ve na program koji tu radi. Program se naziva i HTTP serverom, da bi se razlikovao od aplikacionog servera. Programi koji se najee koriste kao serveri su opisani u narednim odeljcima. Apache Apache je danas najpopularniji program. Njega pravi i odrava 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 moe da radi na bilo kom operativnom sistemu. Internet Information Server Microsoftov Internet Information Server (IIS) je po popularnosti odmah iza Apachea. On je snaan i fleksibilan, ali poto 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 raunaru kome web server moe 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 skladita 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, znai da se o tom kupcu sada uva jo neko pare informacija.Ovakva struktura tabele se naziva hijerarhijskim skladitem podataka. Relacione baze podataka Hijerarhijsko skladitenje podataka nije tako loe, ali ne moe da pomogne kod rukovanja sloenim 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 sledee mogunosti: Viestruke tabele Relaciona baza podataka informacije uva u nizu tabela, koje su povezane nekim zajednikim kljunim poljima. Primarni i strani kljuevi Kljuevi uspostavljaju vezu izmeu tabela. Svaka tabela mora da sadri jedno polje oznaeno kao primarni klju. To je jedinstvena vrednost za svaki zapis. Preko ove vrednosti moete da pronaete odreeno polje. Svaka tabela je povezana sa drugim tabelama preko primarnog kljua iz te druge tabele, koji u prvoj predstavlja strani klju. Primarni kljuevi postaju strani kljuevi u tabeli Order, ime se uspostavlja veza izmeu tabela. Upiti i SQL iskazi Baza podataka je korisna samo ako moete da pronaete, aurirate i analizirate informacije koje iz nje dolaze. Upite bazi podataka aljete preko sistema za upravljanje bazom podataka. Koliko je ljudi naruilo proizvod J-9995 od januara prole godine? Da li je u odnosu na prolu godinu neku stavku naruilo vie ili manje ljudi? Koja je najskuplja stavka koja je naruena od marta? Sortiraj kupce po imenu, potanskom broju ili dravi. Poveaj 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 definiu kako se informacije prebacuju u i iz baze podataka. Najei formati drajvera baze podataka su Microsoftov Open Database Conectivity (ODBC) i Sunov Java Database Conectivity (JDBC). Za sisteme upravljanja bazama podataka sa kojima se moete povezati preko nekog od ovih formata se kae 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 trai, 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 najvie koriste. Microsoft Access je najpopularniji program baze podataka. Koristi se generalno u svim poslovima, ali najee za male baze do baza srednje veliine. Access nije ba tako moan DBMS sistem. Njegovo osnovno ogranienje u onlajn upotrebi je da ne moe 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. Poto je proizvod firme Microsoft, radi samo na Windows serverima. SQL Server je veliki brat Accessa. Namenjen je za velike sajtove sa velikom koliinom podataka i velikim brojem istovremenih zahteva. Ovaj moan program je skup, a nije ga lako ni nauiti. Kao i Access i on radi samo pod Windowsom. MySQL je DBMS, kao dobra alternativa za Access, ako imate mali budet i ne radite pod Windowsom. Kod njega ne postoje ogranienja vezana za istovremeni pristup kao kod Accessa, a ve su famozni njegova brzina i stabilnost, tako da je u stanju da rukuje velikim koliinama podataka. Sa druge strane, njemu nedostaju neke od naprednih mogunosti Accessa, kao to su uskladitene procedure. U svojoj osnovnoj formi, MySQL koristi interfejs sa komandne linije, tako da u prvom trenutku moe da izgleda zastraujue. Sa druge strane, postoje nekoliko besplatnih GUI interfejsa za pristup MySQL-u. Kriva uenja je iznenaujue blaga u odnosu na Access. U zavisnosti od toga kako ga koristite on moe 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, ukljuujui i Linux i Max OS X. Za one koji nisu optereeni Microsoftom, on je dobra alternativa SQL Serveru.
201 / 299
Dreamweaver MX 2004
Oracle, firme Oracle Enterprises je namoniji sistem za upravljanje bazama podataka koji danas postoji. To nije program za mala preduzea i one koji imaju mali budet. Vrlo je skup, kriva uenja je strma, a vrlo je skupo nauiti ga. Oracle radi pod Linuxom, Unixom i Windowsom. Vie informacija o Accessu i SQL Serevru moete nai na adresi www.microsoft.com. Ako elite da vie nauite (i preuzmete) MySQL i PostgreSQL posetite adrese www.mysql.com i www.postgresql.org. O Oraclu moete vie nauiti ako posetite sajt www.oracle.com. Aplikacioni server (srednji sloj) Baze podataka i sistemi za upravljanje bazama podataka su iroka pria, ali je to ipak samo polovina. Aplikacioni serveri se ponaaju kao srednji sloj i omoguavaju komunikaciju pretraivaa i DBMS sistema. Vi (i Va klijent i preduzee) ete se sa ovim programom svakodnevno druiti. Jezik aplikacionog servera ete koristiti za pisanje svojih strana. Biete ogranieni njegovim ogranienjima, a potpomognuti njegovom snagom. Koji web server, baza podataka i/ili aplikacioni server treba da izaberete? Osim ako niste Vi taj ko odluuje o konfiguraciji web servera, ove odluke verovatno neete donositi sami. Da li e na hostu postojati odreene tehnologije? Ako kupujete neki host, onda je dobro da pogledate koje tehnologije on nudi i kako opcije koje on nudi zadovoljavaju Vae potrebe. ColdFusion ColdFusion firme Macromedia je postao vrlo popularna alternativa ASP-u, poto je zasnovan na oznakama (tagovima), a ne na skriptovima i na taj nain 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 moe da se kupi posebno u odnosu na drugi softver web servera. Poto postoji samo kao komercijalna licenca, ColdFusion moda nije ba najatraktivniji izbor za mala preduzea, ali bri razvoj strana i mogua upotraba CFML-a na due 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 piu u PHP skript jeziku. PHP se moe dobiti besplatno ili jeftino u zavisnosti od toga koja mu je namena. Zajednica koja ga podrava 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 odreene baze podataka. Nee sve instalacije PHP-a raditi sa svim DBMS sistemima. Dreamweaver MX 2004 podrava 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 sluaj sa drugim aplikacionim serverima. Umesto toga su njegove funkcije ugraene u Microsoftov web server (IIS). Jezik se zasniva na skriptovima, a za pristup bazama podataka se moe 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 sloeni, ali se on uglavnom menja monijim ASP.NET-om. Prema Microsoftu,.NET okruenje koje sadri i ASP.NET je novo lice dinamikog web razvoja. Programi i skriptovi se mogu pisati u nekoliko jezika, ukljuujui C++, C#, JScript i Visual Basic. Mogu se izvravati 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 reenja. 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. Meu popularnim JSP kontejnerima postoje neki koji su komercijalni, kao to su JRun firme Macromedia ili IBM-ov WebSphere, a postoji i open source reenje, kao to je Tomcat. JSP najvie 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.
Podeavanje radne stanice za razvoj dinamikih 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 okruenje moete da podesite na jedan od dva naina.
202 / 299
Dreamweaver MX 2004
Kod "ivog" ili "onlajn" podeavanja se sav specijalan softver, kao to je web server, aplikacioni server, DBMS i drajver, nalaze na udaljenom raunaru do kojeg moete da pristupate preko FTP-a. Ovaj udaljeni raunar moe biti ak i web server na kome se nalazi Va sajt. Ovakav rad je laki, poto to znai da na svom raunaru ne morate da instalirate nikakav novi softver. Sa druge strane, moete da radite samo ako ste povezani sa udaljenim serverom i ogranieni brzinom veze. Kod "offlajn" podeavanja se svi softverski elementi stavljaju na Va raunar, ukljuujui i HTTP server, DBMS i sve drugo, tako da se Va raunar privremeno ponaa i kao server i kao razvoj. Kada zavrite sajt, sve datoteke iz baze podataka, drajvere i strane prebacujete na pravi server. Ovo je i nain koji uglavnom koriste programeri, kad god je to mogue. Dodatna prednost ovakvog naina rada je da dobijate besplatnu edukaciju o tome kako rade web serveri.
Podeavanje onlajn razvoja

Za podeavanje udaljenog razvoja su Vam potrebne sledee informacije i konfiguracija. HTTP adresa udaljenog raunara (URL) ak i ako ste sa udaljenim raunarom povezani preko lokalne mree, da biste mogli da aljete HTTP zahteve morate znati njegovu URL adresu. Ako je udaljeni raunar web host, onda ete koristiti ime domena za Va sajt. Ako je udaljeni raunar jednostavno drugi raunar, sa kojim ste umreeni, onda morate da imate IP adresu, koju moete dobiti od administratora. IP adresu za Windows server ete dobiti ako izaete u prozor za unos komandi, odnosno DOS prozor. Otkucajte ipconfig i pritisnite Enter. Prikazae se niz brojeva, koji predstavljaju IP adresu. Pristup za itanje i pisanje do deljive web fascikle Ako je udaljeni raunar koji koristite za razvoj web host, onda ve imate FTP pristup do svih publikovanih datoteka. Ako na udaljenom raunaru imate lokalnu mrenu adresu, onda Vam nije potreban FTP pristup. Bez obzira na nain povezivanja, morate biti sigurni da imate dozvolu za itanje i pisanje za fasciklu u kojoj se nalaze Vae datoteke. Pravilno podeavanje udaljenog raunara Udaljeni raunar moe biti web server kod preduzea kome za to plaate, ili moe biti raunar kojim administrira neko drugi u kancelariji, ili sve to moe biti Vaa odgovornost. Neko treba da podesi HTTP server, aplikacioni server, DBMS, kao i drajver. Sve to mora biti na tom raunaru. Morate i da poznajete sve specijalne instrukcije koje se koriste za pristup do tih stavki. Te informacije moete dobiti od administratora servera ili osoblja za tehniku podrku.
Podeavanje oflajn razvoja

Ako elite da radite oflajn, odnosno, koristite svoj raunar kao web server, onda morate biti sigurni da su HTTP server, aplikacioni server, baza podataka i svi potrebni drajveri instalirani i podeeni na pravi nain.
Podeavanje HTTP servera

Osnovne mogunosti za HTTP server su Apache i IIS. Ako ete koristiti ColdFusion, onda ColdFusion server moete da koristite i kao samostalni server (koji obavlja dunosti HTTP servera i aplikacionog servera), tako da moete da ga instalirate umesto Apachea ili IlS-a. I dalje treba da proitate naredni odeljak "Lokalno opsluivanje 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 moete da preuzmete sa Microsoftovog web sajta. Ostali korisnici IIS mogu da nau na CD sa instalacijom Windowsa. IIS se instalira kao servis, to znai da se automatski startuje kada se raunar podie. Podeavanju i konfigurisanju IlS-a moete da pristupite ako izaberete Start > Control Panel > (Administrative Tools) > Internet Service Manager. Instalacija Apache servera IIS je najei izbor za server koji radi pod Windowsom, ali nije jedina mogunost. Moda ete eleti, posebno ako koristite PHF da pre prebacivanja na Unix okruenje, napravite bliu kopiju eventualnog okruenja, 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 obino moe da se preuzme exe datoteka koja se sama instalira. Tu su kompletne instrukcije za instalaciju. Moete da ga instalirate kao servis (na taj nain se pokree uvek kada se pokrene raunar) ili kao aplikacija, u kom sluaju je sami pokreete. Lokalno servisiranje strana Ako elite da vidite lokalne strane, onda pretraiva mora dc poalje HTTP zahtev do servera koji se nalazi na Vaem raunaru. Morate zadati HTTP protokol, iza kojeg sledi IP adresa ili ime raunara. Moete i da koristite optu IP adresu (127.0.0.1) ili ime (localhost) koje raunari koriste da pristupe sami sebi. Ako bilo ta od sledeeg unesete kao adresu u svom pretraivau on e smatrati da ste zatraili podrazumevanu stranu na lokalnom serveru: http://localhost/ http://127.0.0.1/ http://192.123.128.128/(zamenite IP adresom svog raunara) Svaki server ima korensku fasciklu od koje poinje da trai strane koje vraa. Moete da traite bilo koji dokument koji je postavljen u toj fascikli, ili u nekoj njenoj podfascikli. Na primer, moete da zatraite datoteku po imenu myfile.html, koja se nalazi u fascikli myFiles, koja se nalazi ispod korenske fascikle servera. Treba da unesete sledee: 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 trae, c:\Inetpub\wwwroot. Kod Apache servera koji radi pod Windowsom, korenska fascikla je htdocs, koja se nalazi u fascikli programa Apache. Tana putanja moe biti razliita, u zavisnosti od instalacije. Najbri nain 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 pretraiva i otkucajte http:/localhost/mytest.html. Trebalo bi da se prikae Vaa strana.
Podeavanje 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. Podeavanje 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. Podeavanje 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 raunaru. 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 traiti da zadate administrativnu lozinki preko koje se pristupa serveru radi podeavanja. Ovo to unesete morate da upamtite ili zapiete. Kasnije e Vam biti potrebno. ColdFusion kao HTTP server ColdFusion moe da radi kao samostalni server, to znai da moe da funkcionie i kao HTTP server i kao aplikacioni server. On podrazumevano radi na portu 8500, to znai da moe da radi istovremeno sa IlS-om ili Apache serverom. To takoe znai da svim stranama morate da pristupate na sledei nain: http://localhost:8500/... http://127.0.0.1:8500/... Korenska fascikla od koje ColdFusion trai 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 pretraivaa, na adresi http://localhost:8500/CFIDE/administrator. Da biste mogli da pristupite ovim stranama, morate da unesete administrativnu lozinku. Podeavanje 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 pomoi oko instalacije. Treba da znate da treba preuzeti veliku koliinu podataka.
Baze podataka
Ako na svom raunaru nemate instalrian DBMS softver, ne moete da opsluujete strane koje se prave na osnovu podataka iz baze. Za mala preduzea se najvie koriste Access i MySQL. Podeavanje Microsoft Accessa Windows korisnici mogu lako da dobiju Microsoft Access. Moda ga ve imate na svom raunaru. Ako radite u lokalu, datoteka sa bazom podataka moe da se nalazi bilo gde na raunaru. Podeavanje MySQL-a MySQL je besplatan. Sa njim se prilino lako radi, ali ga nije tako lako podesiti. Kompletne informacije o MySQL-u moete nai na zvaninom 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 grafiki korisniki interfejs. MySQL Control Center, koji se moe nai na sajtu MySQL-a, je besplatan i lako se koristi. Datoteke baze podataka se moraju nalaziti tamo gde MySQL server moe da ih pronae. Svaka baza podataka se sastoji od nekoliko datoteka koje se nalaze u fascikli te baze podataka, u podfascikli mysql/data. Tana lokacija ove fascikle zavisi od instalacije MySQL-a koju koristite. Podeavanje drajvera Svaka baza podataka sa kojom elite da komunicirate trai da postoji neki drajver preko kojeg bi se sa njom povezivali. Podeavanje drajvera zavisi od serverske tehnologije koju nameravate da koristite. ColdFusion Ako radite sa ColdFusionom, baza mora biti registrovana na ColdFusion serveru. Ovo moete 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 rei i izaberite tip drajvera (Access, MySQL itd.). Nakon toga kliknite dugme Add. U delu Data Source popunite potrebne informacije (ovo moe biti razliito, 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 trai drajvere. Umesto toga on komunicira sa MySQL serverom i moe da pristupi svim bazama u sistemu. ASP.NET i DSN izvori ASP.NET za komunikaciju sa bazama podataka trai 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 odgovarajui (u zavisnosti od baze podataka koju koristite) i unesite dodatne informacije koje su potrebne. Za Access baze podataka ovo je jednostavno pronalaenje baze. Kada zavrite, zatvorite sve okvire za dijalog. Sada imate metod za pristup bazi podataka iz bilo koje web aplikacije na raunaru.
Funkcionisanje dinamikih sajtova u Dreamweaveru

Kao to Dreamweaver moe da pomogne u pisanju statikih HTML strana, on sadri i obilje alata koji mogu da pomognu u razvoju dinamikih sajtova, koji koriste ASP, ColdFusion, PHP ili JSP. On moe da pomogne
205 / 299
Dreamweaver MX 2004
kod upravljanja vezama sa bazom podataka, kreiranja upita za baze podataka, kao i prikazivanje dinamikih informacija, sve to u okviru familijarnog vizuelnog okruenja. Osnovna procedura je: 1. Definiite sajt, ukljuujui i informacije o serveru koji slui za testiranje. 2. Za sajt napravite najmanje jednu vezu sa bazom. 3. Otvorite pojedinane dokumente i radite sa objektima aplikacije i ponaanjima servera. Ovo se koristi za postavljanje upita, prikupljanje rezultata iz baze, prikazivanje dinamikih podataka, itd.
Pregled ivih podataka i server za testiranje

Osnovna razlika izmeu upotrebe Dreamweavera za statike i dinamike sajtove je u tome kako se pregledaju strane koje ste napravili. Prethodni pregled u pretraivau Kada kod statikog sajta izaberete Preview in Browser (F12), Dreamweaver pokree pretraiva i prosleuje lokalnu adresu tekue strane: C:\Client Files\Web\My Local Site\index.html Ovim pretraiva pristupa sistemu datoteka na raunaru. Kod dinamikih sajtova, meutim, nije dovoljno da samo pregledate strane u pretraivau. Dreamweaver mora da aktivira web server i da mu prosledi HTTP zahtev, tako da ovaj moe da obradi te datoteke. Tu se zahteva adresa koja lii na sledee: http://localhost/mysite/index.php http://127.0.0.1:8500/mysite/index.cfm http://www.mydomain.com/index.aspx Ovim se zapoljavaju web server i pretraiva, tako da se sve strane servisiraju, i nisu samo prikazane preko sistema datoteka. Prema tome, da biste razvijali dinamike sajtove morate imati pristup do web servera na kome radite. Prethodni pregled u prozoru Document Dinamiki prethodni pregled moete da izvrite 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 pretraivau), a na strani se prikazuju realni podaci. Ovi podaci se prikazuju na mestima na kojima je to unapred predvieno. Iako neki posao moete da uradite i sa prikazom Live Data, ovim se proces usporava i to nije preporuljivo. Umesto toga, ovu opciju moete da upotrebite povremeno, samo kada elite da pogledate rezultate, a da ne naputate Dreamweaver. Prikaz Live Data ete iskljuiti ako kliknete ikonu nekog drugog prikaza (Design, Code, Code and Design) sa palete Document.
Podeavanje dinamikih sajtova

Prvi korak u kreiranju dinamikih sajtova u Dreamweaveru je da se definie 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 takoe mora da zna koju serversku tehnologiju koristite i ako je potrebno, koji se skript jezika koristi za tu tehnologiju. (Na primer, ASP moe da se kodira u razliitim 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 podeava dinamiki sajt u Dreamweaveru: 1. Izaberite Site > Manage Sites, a onda kliknite dugme New (kao to i obino definiete sajt). 2. U okviru za dijalog Site definition (Advanced) kao i obino podesite kategoriju Local Info. Ako elite, moete 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 podeavanja 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 vanosti 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 poinju sa http://localhost ili http://127.0.0.1. Kod onlajn razvoja unesite osnovni URL koji obino koristite za pregled na svom web sajtu, a to je http://mojdomen.com. Kada zavrite, kliknite OK, da biste zatvorili okvir za dijalog Site Definition. Sada su na sajtu ukljuene dinamike karakteristike Dreamweavera. Server za testiranje je u sutini privremeni udaljeni sajt. Sa njim se u interfejsu Dreamweavera radi slino kao sa udaljenim sajtom. Da biste videli sadraj servera za testiranje, treba da uradite jedno od sledeeg: Ako pano Site nije proiren, iz padajueg menija izaberite Testing Server (umesto Local View). Ako je pano Site proiren, kliknite dugme Testing Server da biste prikazali levi pano. Kada je pano Site u proirenom reimu 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, poto omoguava da radite na serveru za testiranje, a da onda prebacite sajt na ivi udaljeni server, a da pri tome aurirate samo skript za vezu. Svim vezama se upravlja preko panoa Databases (Window > Connections), koje se nalaze u grupi Application. Vezu moete 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 dinamikih sajtova i njihovih strana, generalno poinjete od panoa Databases (sa leve strane) i idete kroz panoe sa leva u desno. Svaki pano poinje 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 definiete drajver. MySQL sam brine o bazama podataka i povezivanju sa njima. Kao to je pokazano u panou Databases, potrebno je definisati sajt (koji ukljuuje i server za testiranje), otvoriti ili napraviti PHP dokument i proveriti da li se on moe 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 trai: Connection name Ime od jedne rei, premda mnogi programeri vole da im se imena veza zavravaju sa conn. MySQL Server Unesite IP adresu servera za testiranje. Ako server radi na istom raunaru, unesite localhost ili 127.0.0.1. User name and password MySQL samo poznatim korisnicima omoguava da pristupe njegovim bazama podataka. Ove informacije moete dobiti od adminsitratora MySQL servera. (Ako ste MySQL podesili na svom raunaru, proverite tabelu user u bazi mysql. Tu moete videti koja korisnika imena i lozinke postoje.) Database Ime baze podataka sa kojom se povezujete. Kliknite dugme Select da biste dobili listu svih postojeih baza podataka. ASP.NET Za sajtove koji koriste ASP i ASP.NET u panou Databases moete izabrati DSN na serveru, ili moete 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 moete da kliknete dugme Define. Povezaete se sa Control Panelom ODBC, u kome moete da definiete DSN bez Dreamweavera. Ako izaberete drugu opciju, otvorie se okvir za dijalog u kome moete da otkucate string za vezu. (Ako elite da vie nauite 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 proirite ovu ikonu, videete strukturu baze podataka sa kojom ste povezani.
208 / 299
Dreamweaver MX 2004
16. Dinamike strane

Prikupljanje dinamikih podataka
im napiete jedan ili vie skriptova za vezu, pojedine strane sa sajta mogu bazi da postavljaju upite. Najea vrsta upita je da se kreira skup rezultata (grupa zapisa koji odgovaraju zadatom kriterijumu pretraivanja).
Osnovno o skupovima zapisa

Skup zapisa ete napraviti ako otvorite dinamiki dokument i pratite sledee 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. Moete 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 (obino 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 zavrite, 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. Proirite ih da biste videli sva polja iz baze podataka koja ste dobili. Poto Dreamweaver mora da pie skript da bi napravio skup zapisa, tehniki govorei, akcija prikupljanja je ponaanje 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 razliito organizuju, otvorite pano Server Behaviors i dva puta brzo kliknite ponaanje Recordset. Otvorie se okvir za dijalog Recordset u kome moete da promenite podeavanja. 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. Otvorie 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 vrite jednu po jednu, tako da moete da proveravate ta se deava, kliknite Replace onoliko puta koliko je potrebno da bi se promenio ceo dokument. Na ta lii kod za ovaj skup zapisa? Oigledno je da njegov izgled zavisi od serverske tehnologije i jezika koje koristite. Ipak, u srcu svakog skupa zapisa je SQL upit, koji moe da lii na sledee 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 vie znate o onome to se deava 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 nita vie od koraka koje smo ve pomenuli. esto se, meutim, deava da su potrebni sloeniji skupovi zapisa. to vie znate o takvim skupovima zapisa, to ete lake prikupiti prave informacije iz baze. Sortiranje Osim ako ne zadate drugaije, server zapise iz baze pdoataka prikuplja po onom redosledu po kojem se oni tamo nalaze. Ako zapise elite da uredite na neki nain, morate da u upit ubacite klauzulu za sortiranje. U okviru za dijalog Recordset (Query), ovo moete da uradite preko opcije Sort. Sortiranje moete da vrite po bilo kom polju u tabeli iz koje vadite zapise. Sortiranje se uvek radi po alfanumerikom redu (0 do 9, A do Y). Ako elite da sortirate po rastuem ili opadajuem 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 odreeni kriterijum. Moda elite samo one korisnike ija prezimena poinju sa A, ili samo ljude koji ive u dravi Maine. Filtrirani skup zapisa ete dobiti ako otvorite okvir za dijalog recordset (Query) i podesite opcije Filter. Tu su tri padajua 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 pronaete ljude koji ive u dravi Maine, u tabeli u bazi mora postojati polje za dravu (state). Onda polje state moete 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 prosleuje preko metoda GET, onda ete koristiti opciju URL parameter. Ovo isto vai i ako se strana poziva preko obine oznake, koja sadri 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 prosleuje preko metoda POST. SQL upit koji stoji iza upita koji filtrira zapise sadri klauzulu WHERE. On moe da izgleda ovako: SELECT * FROM korisnici WHERE drzava = "Maine" Kreiranje naprednih skupova zapisa preko SQL-a Postoji puno naina da fino podesite kolekciju podataka koje dobijate iz baze. Ako poznajete strukturu svojih upisa, sve to moete da uradite preko SQL-a. Kreiranje skupova zapisa na bazi sloenih upita koji obuhvataju spajanja, grupisanje ili neke druge opcije trai da radite u naprednom reimu. Tada moete sami da pravite SQL upite. Napredni skup zapisa moete dobiti ako otvorite okvir za dijalog Recordset (Query) i kliknete dugme Advanced. Prozor koji se dobija sadri deo za unos SQL upita, deo za definisanje parametara, kao i deo za pretragu baze podataka, preko kojeg upite moete da pravite bez kucanja.
211 / 299
Dreamweaver MX 2004
Prikupljanje razliitih zapisa Pretpostavimo da u svojoj bazi podataka imate listu od 200 ljudi. 25 od njih su iz drave Maine, 25 iz drave California, a 50 iz New Yorka. Zelite da napravite skup zapisa koji ukazuje na to koje drave postoje. Treba da prikaete polje drzave, iz tabele korisnici. Ne elite da prikupite svih 25 primeraka drave Maine, 25 primeraka Californie itd. elite da se prikae samo jedan primerak za svaku dravu. U tom sluaju treba da upotrebite kljunu 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 sledee: 1. Otvorite okvir za dijalog Recordset (Query). U reimu Simple napravite upit koji selektuje samo ona polja koja elite da grupiete. (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 greaka.
Postavljanje dinamikih elemenata na strane

Dinamiki elementi Dreamweavera omoguavaju da prikaete podatke iz baze podataka na svojim web stranama. Moete i da ih pogledate u prikazu Design. Kreiranje dinamikih strana u Dreamweveru se uglavnom sastoji od rada sa dinamikim tekstom, slikama, tabelama i sl.
Dinamiki tekstualni elementi

Dinamiki tekstualni elementi predstavljaju sadraj 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 sadri, dinamiki elementi mogu biti kratki (nekoliko slova ili rei) ili dugi (nekoliko pasusa). Dinamiki tekstualni elementi se u prikazu Design prikazuju na unapred odreenim mestima. (Recordset1.kategorija)
212 / 299
Dreamweaver MX 2004
ili kao skript na strani servera u prikazu Code: <?php echo $row_Recordset1[kategorija]; ?> Ovo odreeno mesto za prikazivanje ne ukazuje na to koliko e prostora stvarno biti zauzeto. Ubacivanje dinamikog teksta Tekst moete da ubacite ako otvorite pano Server Behaviors, pritisnete dugme + i izaberete ponaanje Dynamic Text. Moete i da izaberete objekat Dynamic Text iz kategorije Application, sa palete Insert. U oba sluaja se otvara okvir za dijalog u kome moete 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.
Dinamiki tekst moete da ubacite i sa panoa Bindings, bilo tako to ete prevui 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 ponaanje Dynamic Element, koje je dodato u dokument. Dva puta brzo kliknite ovo ponaanje. Otvorie se okvir za dijalog Dynamic Text u kome moete da dodate neko automatsko formatiranje. Dinamiki tekst u dokumentu Mesta za ubacivanje dinamikog teksta moete da koristite na isti nain, i sa istim ciljem, kao i obian tekst. Dinamiki tekst moe da se prikazuje u svojim oznakama p, h1 ili nekim drugim, ili moe biti u sredini bloka sa statikim tekstom. Sva formatiranja koja primenjujete na tekst, kao to su korisnike klase iz CSS-a, moete da primenite i na mesto za ubacivanje dinamikog teksta. Potrebno je samo da izaberete to mesto i da preko Property Inspectora ili panoa CSS uradite to i obino.
Podeavanje dinamikih osobina

Kao to dinamike informacije mogu da na web strani zamene obian tekst, one mogu da zamene i bilo koji deo HTML koda, ukljuujui i atribute oznaka. Ako je, na primer, u bazi podataka omiljena boja, u polju favcolor, onda naredni PHP kod dinamiki podeava pozadinu elije tabele na tu boju: <td bgcolor="<?php echo $row_Recordset1[favcolor]; ?>"> Dinamike osobine i Selection Inspector Tag Inspector predstavlja koristan interfejs za unos dinamikih osobina. Samo selektujte element na strani koji treba da ima dinamiku osobinu, otvorite Tag Inspector i preite 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. Otvorie 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
Dinamike 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. Dinamiki generisane web strane mogu onda da sadre oznaku img, koja referencira polje sa atributom src: <img src="<?php echo $row_Recordset1[filename]; ?>"> Pod pretpostavkom da u bazi podataka postoji zapis sa vrednou "necklace.gif" u polju filename ova referenca generie sledei kod: <img src="necklace.gif"> Ubacivanje dinamikih slika Ubacivanje dinamikih slika je slino ubacivanju obinih slika. Koristi se objekat Image ili komanda Insert > Image, kao i obino. Kada se otvori okvir za dijalog Insert Image, pronaite opciju Select File Name From i kliknite dugme Data Source. Pojavie se lista polja koja su na raspolaganju i tekueg skupa zapisa u dokumentu. Izaberite neko od tih polja i kliknite OK. Slika e se postaviti u dokument i to sa ikonom koja oznaava mesto na koje se ubacuje (osvetljeni zavrtanj). Nakon ovog pogledajte pano Server Behaviors. Videete da je na stranu dodato novo ponaanje Dynamic Attribute. Dinamiki atribut je src atribut za Vau sliku. Izaberite svoju dinamiku sliku i proverite kako to izgleda u Property Inspectoru ili Selection Inspectoru. Videete da je atribut src definisan preko koda na strani servera. Kada ubacujete dinamiku sliku, Dreamweaver toj slici ne dodeljuje irinu i visinu. Poto src za sliku jo uvek nije definisan, Dreamweaver ne zna koje su dimenzije. Ako znate da e odreene slike iz baze imati iste dimenzije, moete 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 nee dodeliti vrednosti ovih atributa. Delimine URL adrese Polje iz baze podataka koje se koristi za generisanje atributa src ne mora da sadri 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 moete da napravite u trenutku postavljanja dinamike 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 paljivo, ovo moete da uradite i za polje filename iz baze. Pretpostavimo da u bazi postoji polje itemname. Kod koji se pojavljuje u polju URL moe dalje da podesi ubacivanje dinamike slike: images<%=(Recordset1.Fields.Item("itemname").Value)%>.gif Pod pretpostavkom da jedno od polja itemname u dobijenom skupu zapisa sadri vrednost necklace, dobijeni HTML kod bi izgledao ovako: <img src="images/necklace.gif">
214 / 299
Dreamweaver MX 2004
Dinamiki alt natpisi Dinamike slike treba da imaju alt natpise koji se dinamiki odreuju. Ako u skupu zapisa postoji neko polje koje opisuje stavku na slici, to polje moete da upotrebite za kreiranje alt teksta. Ovo moete da uradite preko Selection Inspectora, kao to smo opisali u prethodnom odeljku.
Dinamiki podaci i forme

Forme se na dinamikim sajtovima puno koriste za prikupljanje informacija. Strane za pretraivanje, strane za prijavljivanje, kao i strane za auriranje 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 dinamiki. Ako elite da se u formi prikazuju i informacije iz baze, na primer, padajui meni sa stavkama koje dolaze iz baze, ili strana sa linim podacima korisnika, koje on moe da menja i aurira, onda za odreivanje sadraja i statusa elemenata forme morate da koristite dinamike podatke. Dinamike liste i meniji Dinamika padajua lista ili meni u formi se prave preko elementa select iz forme, kome se stavke dinamiki dodeljuju. Ako elite da napravite neku listu, otvorite dinamiki dokument i napravite skup zapisa za dinamike stavke. Nakon toga treba da uradite sledee: 1. Napravite formu kao i obino. Preko objekta List/Menu (kategorija Form sa palete Insert) ubacite standardnu listu. 2. U Property Inspectoru kliknite dugme Dynamic. Otvorie se okvir za dijalog. Izaberite polje koje u tekuem skupu zapisa treba da se prikae u meniju, a onda kliknite OK da biste zatvorili okvir za dijalog. Isti okvir za dijalog moete da iskoristite i za dodavanje statikih elemenata (oni koji su stalno isti, bez obzira na bazu podataka). Kada zavrite, 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 prikae. 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 broeva i 10 narukvica, i elite da se u listi prikau samo imena kategorija (ogrlice, narukvice i broevi)? Trik je u tome da se napravi padajui meni ili lista sa dinamikim stavkama, ali da se pre toga eleminiu duplikati. Ovo moete 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 nain se grupiu polja koja planirate da koristite u dinamikoj 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 moete da se vratite u prikaz Simple za taj skup zapisa. Dinamika polja za potvrdu Dinamiko polje za potvrdu je potvreno ili nije u zavisnosti od vrednosti polja u skupu zapisa. Evo kako se pravi dinamiko polje za potvrdu: 1. U formu ubacite obino 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. Definiite koje polje iz skupa zapisa treba da se ispituje i unesite vrednost koju to polje mora da ima da bi bilo potvreno. Okvir za dijalog omoguava da poreenja pravite na osnovu jednakosti (ne manje, vie od,itd.). Dinamika radio dugmad Kod grupe dinamikih radio dugmadi je selektovan jedan od lanova i to u zavisnosti od vrednosti polja iz skupa zapisa. Grupa dinamikih radio dugmadi se pravi na sledei nain: 1. Ubacite grupu radio dugmadi, kao to i obino 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 definiite polje iz skupa zapisa, sa kojim grupa treba da se poredi, da bi se odredilo da li neto na formi treba da bude izabrano. Dinamiko polje za tekst Dinamika tekstualna polja su u formi ispunjena tekstom koji dolazi iz odreenog polja iz skupa zapisa. Evo kako se pravi dinamiko tekstualno polje: 1. Ubacite tekstualno polje na uobiajeni nain (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 definiite polje iz skupa zapisa ija vrednost treba da se prikae u tekstualnom polju. Sadraj koji se ponavlja Veina dinamikih elemenata podrazumevano prikazuje informacije iz prvog zapisa koji se nalazi u skupu zapisa. Regioni koji se ponavljaju i dinamike tabele omoguavaju da na strani prikaete i vie zapisa.
Regioni koji se ponavljaju

Region koji se ponavlja moe biti bilo koji element strane, podnaslov ili pasus, stavka liste, tabela, ali je element koji se najee ponavlja vrsta u tabeli. Regione koji se ponavljaju pravite preko objekta Repeated Region ili ponaanja Repeat Region.
Ako elite da napravite region koji se ponavlja, otvorite dinamiki dokument, napravite skup zapisa i uradite sledee: 1. Definiite oblast sa strane koja treba da se ponavlja i izaberite je. U toj oblasti bi trebalo da bude i neki dinamiki sadraj (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 prikau. Nakon toga kliknite OK.
216 / 299
Dreamweaver MX 2004
Regioni koji se ponavljaju su u prikazu Design okrueni natpisom. Ako elite da promenite taj natpis, kliknite ga brzo dva puta. Dinamike tabele Dinamika tabela je tabela koja prikazuje dinamike informacije iz tekueg skupa zapisa, pri emu se kao vrste koriste regioni koji se ponavljaju. Ovo je u sutini samo skraeni metod za kreiranje najee vrste regiona koji se ponavljaju. Ako elite da napravite dinamiku tabelu, otvorite dinamiki dokument, napravite skup zapisa i uradite sledee: 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 prikau, 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 sadri sva polja iz tekueg skupa zapisa sa istim redosledom. Ako ne elite da se prikau sva polja, moete da obriete kolone iz tabele. Dinamiki tekst u elijama tabele se moe tretirati isto kao bilo koji dinamiki tekst. Testiranje i otklanjanje greaka Regioni koji se ponavljaju se kodiraju kao petlje koje sadre 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 moe izabrati bilo koja oblast. Vrlo je vano 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 drite na kodu. Morate biti sigurni da ste izabrali ba ono to treba da se ponavlja. Ako elite da sadraj strane ubacite odmah ispod regiona koji se ponavlja, morate biti posebno paljivi. Dreamweaver nee novi sadraj 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. Obino 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 odreeni broj vrsta. U svakom od pomenutih sluajeva se nova vrsta dodaje u region koji se ponavlja. Ako Dreamweaver novi sadraj dodaje u region koji se ponavlja (nova vrsta u tabeli, pasus, itd.), preite na kratko u prikaz Code. Pronaite 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. Stranienje u regionu koji se ponavlja Stranienje u skupu zapisa, ili navigacija, ulazi u igru kada koristite region koji se ponavlja, ali elite da se u jednom trenutku prikae samo odreeni 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 naina za dodavanje kontrola za stranienje, kao to su razliiti aplikacioni objekti, ponaanja servera i sl. Objekti Recordset Paging Ako elite da na stranu koja sadri region koji se ponavlja ubacite linkove Next, Previous, First i Last, moete da uradite jedno od sledeeg: Otkucajte tekst ili izaberite sliku koja e sluiti 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 stranienje, postavite kursor tamo gde elite da se postave kontrole, a onda sa palete Insert izaberite Recordset Navigation bar. Moete da napravite tekstualnu liniju linkova ili linkove sa slikama (Dreamweaver obezbeuje 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 dinamiki atribut href. Navigacija se nee naruiti ako promenite bilo ta, osim dinamikog atributa href. Slobodno moete formatirati ili menjati tekst, dodavati rollover efekat, itd. Objekti Recordset Count Kada se posetioci kreu 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 moete 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. Moete i da ubacite samo mesta za ubacivanje dinamikog teksta, bez teksta. Ovo se radi ako izaberete objekte Starting Record, Ending Record ili Total Records. Ovi objekti na stranu ubacuju meavinu dinamikih i statikih elemenata. Kao i sa bilo kojim dinamikim tekstom, slobodno moete da primenite format koji elite ili da promenite bilo koji statiki tekst.
Uslovni sadraj
Uslovni sadraj se na strani pojavljuje samo ako je zadovoljen odreeni uslov. Tu spadaju neke vrste iskaza if-then u skript jeziku koji koristite na strani servera. Sa uslovnim sadrajem moete da, preko uslova, fino podesite ta se tano prikazuje na strani. Sve se ovo radi preko objekta Show if ili preko ponaanja servera.
Prikazivanje i sakrivanje sadraja, ako je skup zapisa prazan Ako upit u bazi podataka nije pronaao nijedan zapis koji odgovara kriterijumu, pa je skup zapisa prazan, verovatno ete korisniku eleti da prikaete poruku "ao nam je, ali u bazi nita nije pronaeno". Ako su zapisi pronadeni, onda ete prikazati relevantne dinamike elemente. Ovo moete uraditi ako na stranu stavite i jedan i drugi sadraj, a definiete uslov koji proverava sadraj skupa zapisa. U ovu svrhu moete da upotebite objekte Show If Recordset Empty i Show If Recordset Not Empty, ili ponaanja servera. Evo kako se to radi: 1. U dokumentu napravite sadraj koji treba da se prikae ako su pronadeni zapisi u bazi. Odmah ispred ili iza ovog sadraja napravite sadraj koji treba da se prikae ako zapisa nema. To znai da strana na poetku prikazuje mesta za zapis, a onda i poruku "ao nam je ", ili neki drugi podrazumevani sadraj. 2. Izaberite sadraj koji treba da se prikae samo ako postoje zapisi u skupu zapisa. Proverite da li ste sve izabrali, ukljuujui 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. Moete 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. Sadraj koji ste izabrali se u prikazu Design prikazuje u okviru pravougaonika, sa natpisom. Taan tekst
218 / 299
Dreamweaver MX 2004
natpisa moe biti razliit, u zavisnosti od serverske tehnologije koju koristite. Izaberite sadraj koji treba da se prikae samo ako u bazi nita nije pronaeno. Ponovo treba da budete sigurni da ste izabrali sve HTML oznake i ostale vidljive elemente. (Moete da koristite Tag Selector, ili da preete 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 sadraj pojavio), a onda kliknite OK da biste zatvorili okvir za dijalog. Ovaj sadraj se u prikazu Design takoe prikazuje u okviru pravougaonika. Pogledajte ovu stranu u pretraivau, da biste videli kako to radi. Moete da eksperimentiete putem promene definicije skupa zapisa, tako da u njemu ne bude podataka, da biste videli poruku "ao nam je".
Prikazivanje i sakrivanje sadraja na bazi strane u skupu zapisa koja je prikazana Ako ste ikad ubacivali objekat Recordset Navigation Status, onda ste ve koristili ovu vrstu uslovnog sadraja. Ako na strani postoji region koji se ponavlja i ako je stranienje podeeno da u jednom trenutku prikazuje samo odredeni broj zapisa, onda biste mogli da poelite objekat kao to je Move to Next Page, koji bi se prikazivao samo u sluaju da postoji sledea stranica. U tom cilju moete 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 sadri dinamike podatke. Region treba da bude podeen da prikazuje samo deo zapisa u jednom trenutku. 2. Izaberite sadraj koji bi trebalo da se prikae samo ako je u pitanju prva strana zapisa. Moete da ubacite bilo koji dekorativni element, kao i dinamike 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. Moete i da sa panoa Server Behvaiors izaberete ponaanje servera Show If > Show If First Page. Novi uslovni sadraj 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 prikau samo ako nije prva ili poslednja strana u skupu zapisa. Testiranje uslovnog sadraja i otklanjanje greaka Kao i regioni koji se ponavljaju, tako se i uslovni regioni kodiraju kodom na serveru koji uokviruje uslovni sadraj. 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> Vano je da znate kako ovo izgleda, da biste mogli da popravite stvari, ako krenu naopako. Ako se uslovni sadraj nije sakrio, a prikazuje se ispravni sadraj, onda na trenutak preite u prikaz Code. Sav uslovni sadraj mora biti izmeu reda koji otvara i reda koji zatvara kod. Ako prilikom ubacivanja uslovnog regiona niste izabrali tano ono to treba, sada moete da selektujete dodatni kod i da ga prebacite izmeu ovih redova poetka i kraja.
219 / 299
Dreamweaver MX 2004
17. Jo neke dinamike tehnike

Dinamiki abloni
abloni Dreamweavera se mogu koristiti i sa dinamikim stranama. Na taj nain, preko ablona moete napraviti izgled celog sajta, a da i dalje dinamiki kreirate pojedinane strane.
Kreiranje dinamikih ablona

Ako elite da napravite dinamiki ablon, izaberite File > New. U okviru za dijalog New Document izaberite Template page i neki od dinamikih tipova dokumenata koji su prikazani. Koja je razlika izmeu dinamikog i obinog 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 takoe dinamike ablone pamti sa dve ekstenzije, na primer, main.cfm.dwt, da bi se ukazalo na status ovih datoteka.
Dinamiki ablon moete da napravite i ako otvorite postojeu dinamiku stranu i izaberete File > Save As Template.
Kako rade dinamike strane

Kada se strana pravi na osnovu ablona, sve oblasti na njoj su zakljuane, osim promenljivih regiona, koje ste posebno definisali. Na dinamikim stranama obino postoji neki serverski sadraj, koji se nalazi izvan html oznaka. Da bi prihvatio ovaj kod, Dreamweaver smatra da oblast izvan html oznaka moe da se menja na izvedenim stranama. To moete da zakljuite ako pogledate deo zaglavlja na bilo kojoj izvedenoj strani. Odmah iza oznake html na ovim stranama postoji sledei iskaz:
220 / 299
Dreamweaver MX 2004
 Ovo znai da u dokumente koji se zasnivaju na ablonima moete da dodajete skupove zapisa i druge instrukcije koje se izvravaju na strani servera. Serverske instrukcije moete da ubacite i na samu ablonsku stranu, ali ako kod postavite izvan HTML oznake, on se tretira kao sadraj promenljivog regiona, to znai da se ne kopira na postojee izvedene strane i ove strane mogu da ga prebriu. Dreamweaver e Vas upozoriti da e se to desiti. Ako elite, moete postii da oblast izvan HTML oznaka ostane zakljuana, odnosno da se na svim izvedenim stranama koriste isti skupovi zapisa, kao i u ablonu. ablonske datoteke podrazumevano ne ukljuuju iskaz za zakljuavanje koda (ovaj iskaz se na izvedene strane dodaje, samo ako ga sami napravite). Ali ipak moete da ga ubacite. U ablonskoj datoteci preite u prikaz Code i u zaglavlje unesite sledee: . Ako prilikom ubacivanja komandnog pareta koda nita nije selektovano, Dreamweaver ubacuje prazan par oznaka za komentar. Promena paria koda Ovi delovi koda se lako menjaju. U panou Snippet moete da izaberete to pare i da kliknete dugme Edit, ili
260 / 299
Dreamweaver MX 2004
da dva puta brzo kliknete samo pare. Otvorie se okvir za dijalog Snippet, koji je prikazan na slici. Moete da menjate ime pareta, njegov opis, tip (block ili wrapped), kao i da menjate kod koji se u njemu nalazi. Moete i da definiete da li pare koda treba da se prethodno prikazuje u panou Snippets.
uvanje paria koda Parii koda su organizovani u fascikle, od kojih su neke ugnjeene u drugima. Ovu hijerarhiju moete da menjate kako god elite. Ovo se radi prevlaenjem pareta u drugu fasciklu. Moete i da menjate imena paria. Ime fascikle ete promeniti ako dva puta brzo kliknete tu fasciklu. Moete ak i da obriete pare koda, ili fasciklu, ako ih selektujete i kliknete ikonu sa otpacima koja se nalazi na dnu panoa. Kreiranje Vaih paria koda Najbolje kod paria koda je to da moete da lako pravite svoje parie, pa ak i da pravite svoje fascikle u kojima biste ih uvali. Ako elite da napravite novu fasciklu za smetanje paria koda, treba da uradite sledee: 1. Ako elite da se fascikla nae u korenskom nivou u panou Snippets, poeete 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. Pojavie se nova fascikla. 3. Dajte ime novoj fascikli. Ona je spremna za akciju. Ako elite da napravite novo pare koda, treba da uradite sledee: 1. (Opcionalno) Ako ve imate kod koji treba da se nae u paretu, otvorite dokument koji sadri taj kod i selektujte ga u prikazu Code. 2. U panou Snippets izaberite fasciklu u kojoj elite da se nade pare. Nakon toga kliknite ikonu New Snippet koja se nalazi na dnu panoa. Moete i da desnim tasterom mia kliknete fasciklu i izaberete New Snippet. Ovim se pravi novo pare 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. (Neete praviti prazno pare.) 3. Ako pravite pare tipa wrapped (pare koje ubacuje kod ispred i iza onog to je selektovano) pazite da se pravi delovi koda nau u poljima Before (pre) i After (posle). 4. Popunite i sve druge opcije u ovom okviru za dijalog, a onda kliknite OK. Pare bi sada trebalo da se pojavi u panou Snippets i da se ponaa kao i bilo koje drugo pare. Moete da ga ubacujete, menjate, briete, prebacujete, ta god elite.
261 / 299
Dreamweaver MX 2004
Povezivanje sa spoljanjim editorima teksta

Dakle, volite da radite sa kodom i dopada Vam se Dreamweaver, ali Vam se vie dopada Va omiljeni editor teksta od prikaza Code. U tom sluaju moete da podesite vezu izmeu Dreamweavera i spoljanjeg editora teksta, tako da dobijete najbolje iz oba sveta.
Podeavanje spoljanjeg editora teksta (nije integrisan)

Procedura povezivanja i rada sa spoljanjim editorima teksta (koji nisu HomeSite i BBEdit) je jednostavna i u osnovi ista na razliitim platformama. Podeavanje integracije sa spoljanjim editorom teksta se obavlja na sledei nain: 1. U okviru za dijalog Preferences otvorite kategoriju File Types /Editors, kao to je prikazano na slici.
2. Pronaite polje External Code Editor. Pronaite editor teksta koji elite da koristite. 3. Opcija Reload Modified Files definie ta se deava kada menjate dokument u spoljanjem editoru i posle toga se vratite u Dreamweaver. Ako elite da postignete bliu integraciju, izaberite opciju Always Reload. Promene se automatski ubacuju. Ako Vam je potrebno vie kontrole nad moguim neslaganjima, izaberite Prompt. Dreamweaver e Vas upozoriti da su se desile promene. Opcija Save on Launch definie da li Dreamweaver treba da upamti dokument pre pokretanja spoljanjeg editora teksta. Ako Vam je potrebna blia 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. Tekui dokument ete otvoriti u novom editoru ako izaberete ovu opciju.
Integracija editora HomeSite+ sa Dreamweaverom

Editor HomeSite+ firme Macromedia, koji se isporuuje sa verzijom Dreamweavera za Windows se lako integrie sa Dreamweaverom. Podeavanje HomeSite editora se vri na isti nain kao i povezivanje bilo
262 / 299
Dreamweaver MX 2004
kojeg spoljanjeg editora. Moete i da podesite integraciju Dreamweavera u HomeSite. Podrazumevano HomeSite ima ukljuenu integraciju. U HomeSiteu idite na Options > Settings i izaberite kategoriju Dreamweaver. Ovde se proverava i konfigurie nain 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 ukljuili opcije da oba programa automatski ponovo uitavaju promenjene datoteke i pamte ih pre pokretanja i ako imate dovoljno veliki monitor, ili podeene dvojne monitore, onda moete da ostavite da dokument bude otvoren u oba programa i da lako prelazite iz jednog u drugi. Ovo lii 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 veine 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 poela da podrava neku oznaku ili atribut o kojoj Dreamweaver ne zna nita? Dodajte to u biblioteku.
Rad sa okvirom za dijalog Tag Library Editor

Pre nego to ponete 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 moete doi i iz prozora Preferences/Code Format i Code Hints. Lista oznaka U gornjem delu okvira za dijalog se nalazi lista oznaka. U pitanju je proirena 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 pretrauje. Drugim reima, kada Dreamweaver odreuje kako da rukuje odreenom oznakom on e traiti u ColdFusion biblioteci ili drugim bibliotekama, samo ako ta oznaka ne postoji u biblioteci HTML. Unutar svake biblioteke su pojedinane 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 sadrati oznaku iz te biblioteke. To ne znai da Dreamweaver dozvoljava da samo odreeni tipovi oznaka budu u odreenim tipovima dokumenata, ali to znai da su odreene oznake iz odreene biblioteke za Dreamweaver validne samo ako se nalaze u odreenom tipu dokumenta. Na primer, u JavaScript dokumentu, HTML oznake, kao to su a ili table nemaju znaenje. Dreamweaver nee davati savete vezane za kod ili drugu pomo vezanu za ureivanje 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 izmeu parova oznaka i ugnjeenog sadraja? Opcije iz ovog padajueg menija to odreuju. Contents Treba li svaki sadraj koji se nalazi ugnjeen izmeu para oznaka da bude uvuen i treba li da bude formatiran? Izaberite neku od opcija iz ovog menija. Case Da li oznaka treba da se pie malim, velikim ili meanim slovima? Moda treba potovati ono to je podeeno 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 moe podesiti da se vrednosti piu velikim, malim slovima ili meavinom. Atribut moe i da koristi podeavanja na nivou aplikacije. (Podrazumevane
263 / 299
Dreamweaver MX 2004
vrednosti se koriste ako kliknete link Default.) Attribute Type Opcija koju izaberete iz ovog menija odreuje 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 oekuje tekstualnu vrednost, onda nee biti nikakvih saveta, ako se oekuje boja, onda se prikazuje dijalog za izbor boja, ako se oekuje neka iz liste vrednosti, prikazuju se mogue vrednosti. U tabeli 27.2 su dati tipovi atributa i nain na koji se oni tretiraju u interfejsu Dreamweavera. Attribute Value Ako je tip atributa podeen na Enumerated, onda u ovom delu treba da se nalazi lista moguih vrednosti, odvojenih zarezima. Ovo e postati stavke u meniju Code Hint.
Promena stavki u biblioteci oznaka

Kao to ste verovatno zakljuili, bilo koju vrednost bilo koje biblioteke, oznake ili atributa moete da promenite. Jednostavno treba izabrati eljenu stavku, a onda moete da menjate vrednosti koje se prikazuju. Evo nekoliko saveta o tome kako se menjaju opcije: Ako jednostavno promenite podeavanja vezana za nove redove ili velika i mala slova, ne moete neto ozbiljno da pokvarite u Dreamweaveru, ali se moe desiti da saveti vezani za kod ne budu na raspolaganju, ako niste paljivi sa podeavanjima. Radite obazrivo. Nemojte menjati podrazumevane opcije za velika i mala slova, osim ako nemate dobar razlog. Podeavanja na nivou aplikacije nemaju znaenje ako ih veina 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 sloenije (i moe biti mnogo opasnije) nego promena postojeih stavki. Sa druge strane moe 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 sledee: 1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajueg 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 saeto 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 podrava 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 sledee: 1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajueg 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 izmeu simbola < >. Nemojte ukljuivati i same simbole.)
3. Ako oznaka sadri poetnu 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 zavrite kliknite OK. Proverite svoju listu oznaka Oznaka bi sada trebalo da se prikae kao nova stavka i biblioteci koju ste zadali. Selektujte oznaku iz liste i promenite opcije formatiranja u skladu sa Vaim eljama. Nakon to ste ovo uradili isprobajte kako to radi. Otvorite dokument onog tipa koji ta oznaka podrava, idite u prikaz Code i unesite prvih nekoliko karaktera nove oznake. Ako ste ukljuili savete vezane za kod, pojavie se i meni sa savetima, pri emu je Vaa oznaka jedna od stavki u tom meniju. Dodavanje atributa Ako elite da oznaci dodate novi atribut, treba da uradite sledee: 1. Kliknite dugme + koje se nalazi na vrhu liste oznaka i iz menija izaberite New Attributes. 2. Prikazae se okvir za dijalog New Attribute, koji je prikazan na slici 27.26. Definiite biblioteku i oznaku kojima novi atribut pripada, a onda unesite ime tog atributa.
3. Nakon to zavrite 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 Vaim 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 pretraivanje se obino vezuje za ureivanje koda. Komanda Find and Replace iz Dreamweavera je snaan alat koji podrava regularne izraze kod pretraivanja koda, kao i mogunost da se prave sloena pretraivanja preko jednostavnog interfejsa sa padajuim menijem.
Napredno pretraivanje teksta

Kod osnovnog pretraivanja teksta, Dreamweaver omoguava da pretraujete elemente teksta u HTML dokumentu (ovo je tekst koji se vidi na strani, to je suprotno HTML oznakama). Kod naprednog pretraivanja teksta, moete da ograniite pretraivanje na samo pojedine elemente unutar ili izvan odreenih oznaka. Moete da zadate da element teksta bude u okviru jedne ili vie oznaka, moete ak da zahtevate da oznake koje je uokviruju imaju odreene 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 pretraivanja teksta su korisna uvek kada radite sa sloenim dokumentima i kada elite da pretraivanja budu to konkretnija. Moda elite da promenite sve primerke teksta Minnesota na MN, ali ne elite da to uradite sa naslovima. Mogli biste da traite ime drave, ali samo ako nije u okviru oznake <hi> ili neke druge oznake za naslove. Ako elite da se promene dese na celom sajtu, ovakvo pretraivanje omoguava da sve zamenite za 5 minuta, a ne da idete sa jednim po jednim pretraivanjem i zamenom, koji mogu trajati satima. Na slici je prikazan okvir za dijalog Find and Replace, sa podeenim naprednim pretraivanjem.
Pretraivanja na osnovu zadate oznake

Ovaj tip pretraivanja omoguava da pronaete i promenite atribute razliitih HTML oznaka, kao i da dodajete, menjate, pa ak i briete odreene oznake. Ovo je mona funkcija, iako nije neto to biste povezali sa pretraivanjem i zamenom. Nakon to ovo isprobate nekoliko puta, biete zapanjeni koliko je ovo pretraivanje korisno. ta ako ste na celom sajtu koristili logo kompanije, a onda otkrijete da ste zaboravili da dodate alt natpis? Problem e se reiti preko pretraivanja svake oznake <img> sa atributom src="logo.gif" i podeavanjem atributa alt na "Your logo". Moda treba da pronaete sve tabele koje su irine 100% na sajtu i da ih promenite na irinu od 90%. Ovo se moe uraditi preko jednog lakog pretraivanja. Na slici je prikazan okvir za dijaloog Find and Replace podeen da obavi pretraivanje odreenih oznaka, sa nekoliko kriterijuma. Umesto zamene, prilikom pronalaenja oznake moete da podesite i neku drugu akciju. Procedura za ovakvo pretraivanje (malo manje intuitivna) je da kliknete dugme Find da bi se pretraili svi primerci zadate oznake, a da onda kliknete dugme Replace da biste zadali odreenu akciju na pronaenim oznakama.
266 / 299
Dreamweaver MX 2004
Upotreba regularnih izraza

Regularni izrazi nisu vrsta pretraivanja i ne postoje samo u Dreamweaveru. Regularni izrazi su dobar nain za pretraivanje koda u potrazi za obrascima, a ne odreenim karakterima. Na primer, ako na grupi web strana traite sve telefonske brojeve, ali ne elite da traite pojedinane telefonske brojeve, moete da preko regularnih izraza potraite 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 sloeni, u zavisnosti od toga ta elite da dobijete. Ako razmiljate na tehniki nain, treba da znate da su mogunosti Dreamweavera koje se odnose na pretraivanje napravljene na osnovu JavaScripta. Prema tome, sve mogunosti regularnih izraza, koje podrava JavaScript rade i u okviru komande Find and Replace, u Dreamweaveru. Pisanje regularnih izraza Regularni izraz je opis tekstualnog stringa koji sadri odreene karaktere, koji se u obrascima nalaze na odreenim mestima. Najjednostavniji regularni izrazi se sastoje samo od slova i brojeva koje traite i oni e pronai samo primerke odreenih karaktera. Na primer, sledea tri stringa za pretraivanje su regularni izrazi koji pronalaze ba onaj string koji je zadat, kad god se on pronae u dokumentu: Fred Flintstone 87125 laura@rocketlaura.com Sa druge strane, regularni izrazi mogu da sadre i meta karaktere, koji se koriste za opis i brojanje karaktera u dokumentu. Pronalaenje i zamena putem regularnih izraza Ako elite da u Dreamweaveru koristite regularne izraze, samo ukljuite 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 pretraivanja, koja koriste regularne izraze. Na vrhu je primer koji prikazuje osnovno tekstualno pretraivanje koje nalazi razliite varijante teksta labeled i ini ih konzistentnim. Centralni primer prikazuje napredno pretraivanje koje pronalazi sva pojavljivanja rei and samo u zaglavljima (h_ vraa hl i h2 i h3) i menja ih sa &. Poslednji primer prikazuje pretraivanje odreenih oznaka i pronalazi sve tabele sa irinom zadatom u procentima (\d*% pronalazi bilo koji broj cifara koji zavrava procentom) i brie atribut width. Opcije Use Regular Expression i Ignore White Space ne mogu biti istovremeno ukljuene, poto se u okviru regularnih izraza ne mogu zanemariti beline. Najbolja osobina komande Find and Replace u Dreamweaveru je mogunost da se kriterijum pretraivanja upamti radi kasnije ponovne upotrebe. Bilo koje podeavanje koje napravite u okviru za dijalog Find and Replace se moe zapisati. To znai da vreme koje provedete u kreiranju sloenih izraza pretraivanja nije izgubljeno. Dobar skup kriterijuma pretraivanja je kao poseban pomoni program, spreman da se samo preko nekoliko klikova miem izvri u bilo kojoj datoteci. Nakon to ste uneli opcije komande Find and Replace, preko dugmeta Save moete da upamtite skup kriterijuma. Otvorie se standradni okvir za dijalog Save. Izaberite lokaciju i ime. Nakon to zavrite kriterijumi se
267 / 299
Dreamweaver MX 2004
zapisuju u datoteku sa ekstenzijom .dwr. Ako elite da kriterijume koje ste zapisali u datoteku uitate, otvorite okvir za dijalog Find and Replace i kliknite dugme Load Query (sa ikonom datoteke). Otvorie se okvir za dijalog u kome se pita koju datoteku elite da uitate. Pronaite upamenu DWR datoteku i otvorite je. Interfejs komande Find and Replace e se popuniti onim to je u datoteci.
Ako elite, moete da menjate datoteku sa upisanim kriterijumima, Na kraju krajeva, DWR datoteke su obine XML datoteke koje sadre razliite parametre, kao atribute korisnikih oznaka. Ako volite da radite sa
268 / 299
Dreamweaver MX 2004
kodom, uvek moete da otvorite DWR datoteku u nekom editoru teksta (ak i u Dreamweaveru) i da tu promenite kriterijume. Kod za pretraivanje moe 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 moe 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 moete da prikaete u prikazu Design ili da za njihov pregled koristite opciju Preview in Browser. Koji su drugi jezici koje biste mogli da poelite? 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 ureujete metadatoteke koje se tu koriste (.wvx i.wax). Ako radite RealMedia prezentacije, onda biste mogli da ureujete datoteke RealText (.rt) ili RealPix (.rp). Ovde se mogu uredivati i datoteke za konfiguraciju Dreamweavera, koje se takoe zasnivaju na XML-u (.mno,.dwr itd). Autori proirenja za Dreamweaver mogu ovde da ureuju i svoje datoteke (.mxi). Ako Dreamweaver ne poznaje tu ekstenziju datoteke, on ne moe da je otvori. Ako elite da u listu Dreamweavera dodate novu ekstenziju, izaberite Edit > Preferences i izaberite kategoriju Types/Editors. Pronaite 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 taku (.). Ako Va tip datoteke moe 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 nee prepisati kod koji se nalazi u datoteci, izaberite Edit > Preferences i izaberite Code Rewriting. Pronaite 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, moete da napravite i korisniki definisanu biblioteku oznaka. Ako planirate da esto radite sa konkretnim tipom dokumenta, vreme koje uloite u podeavanje biblioteke oznaka moe da se isplati.
Pisanje JavaScript koda u Dreamweaveru

Pored podrke za ostale jezike, Dreamweaver ima nekoliko karakteristika koje mogu da pomognu kada radite sa JavaScriptom.
Pano Reference
Ako je re o pomoi kod pisanja skriptova, pano Reference ima pomo i za JavaScript. Ako elite da u panou Reference pristupite pomoi za JavaScript, kliknite dugme <?> sa palete Document i iz padajueg menija Book izaberite O'Reillv JavaScript Reference. Na slici je prikazan deo JavaScript panoa Reference, sa oznaenim pojedinim delovima radi lakeg pretraivanja. Ovo je orgnizovano po objektima, kao i veina JavaScript renika, 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 mogunosti: ponaanje JavaScript i objekat Script. Script Property Inspector takoe omoguava da menjate postojee oznake script. Ponaanje Call JavaScript Ovo ponaanje se primenjuje i menja na isti nain kao i sve druge stavke sa panoa Behaviors. Umesto da ubacujete unapred napisane JavaScript akcije, ovo ponaanje dodaje one JavaScript iskaze koje konkretno navedete. Pratite sledee korake: 1. Otvorite dokument i izaberite element na strani kojem elite da pridruite ponaanje. 2. Otvorite pano Behaviors i iz menija + izaberite Call JavaScript. 3. U okviru za dijalog koji se otvara unesite JavaScript iskaze koje elite da izvrite. (Ako ih ima vie, odvojite ih takom i zarezom.) Nakon to zavrite kliknite OK. Koliko je korisno ponaanje Call JavaScript? Ono je sjajno, ako niste ba najbolji u pisanju skriptova, ili ako ste u urbi. Sa druge strane, poto o kodiranju brine Dreamweaver, to ponaanje Call JavaScript moe da dovede do pomalo nezgrapnog koda. Ponaanja Dreamweavera svoje skriptove uvek ubacuju u funkciju u zaglavlju koje se ne prilagoava, a ta funkcija se poziva sa parametrima. Recimo da elite da ubacite liniju sa kodom u kojoj se pretraiva alje nazad na prethodnu stranu. Ovo se deava kada korisnik klikne odreenu stavku. Ubaciete ponaanje Call JavaScript i uneti history.back(). To se unosi u ovom okviru za dijalog. Dreamweaver e u zaglavlje dokumenta dodati sledeu funkciju: function MIVl_callJS(jsStr) { //v2.0 return eval(jsStr) } Izabranom elementu na strani e se dodati sledei rukovaoc dogaajima: <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 sluaj, ako elite moete 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 nain 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 nain ne moraju biti napisani u JavaScriptu. Oni mogu da sadre bilo koju oznaku koja se moe nai u skriptu, ukljuujui 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 sledee 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 ukljuite 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. Moete i da izaberete Insert > HTML > Script Object > Script. 4. U okviru za dijalog koji se otvara izaberite skript jezik. U padajuoj 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 sadraj 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 pretraivaa koji ga ne podravaju. Ako elite da blok sa skriptom menjate preko Script Inspectora, pratite sledee korake : 1. Otvorite dokument koji sadri oznake script. 2. Ako se skript nalazi u zaglavlju dokumenta, prikaite liniju sadraja zaglavlja (izaberite View Options > Head Content). Ako je skript u telu dokumenta, ukljuite nevidljive elemente (izaberite View Options > Visual Aids > Invisible Elements). Svaka oznaka script u dokumentu sada treba da se prikae na liniji sadraja 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 mogunost da dodate i link sa skriptom. U okviru za dijalog se pretpostavlja da unosite sopostveni skript. Ovaj proces moete 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 sledee: 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. Ukljuite i liniju sadraja zaglavlja ili nevidljive elemente, pronaite ikonu skripta i izaberite je. 4. U Property Inspectoru za objekat script, izaberite datoteku koju elite da pridruite. Skriptovi u panou Assets Ako radite u okviru definisanog sajta i eltie da u svoj dokument dodate linkove na JS dokumente, to ete najlake uraditi preko panoa Assets. Svaka JS datoteka unutar fascikle na lokalnom sajtu se prikazuje u delu Script, panoa Assets. Ako elite da na ovaj nain u dokument dodate link na skript, treba da uradite sledee: 1. Otvorite dokument u koji elite da ubacite link. 2. Proverite da li je prikazana linija sa sadrajem 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. Pronaite datoteku na koju elite da link ukazuje i prevucite njenu ikonu sa panoa Assets do linije sadraja zaglavlja za dokument.
Alati vezani za JavaScript dostupni u prikazu Code

Ako svoje skriptove ureujete u prikazu Code ili Code Inspectoru, onda moete da koristite prednosti koje
273 / 299
Dreamweaver MX 2004
nude razliito obojeni delovi koda, navigacija kroz funkcije, automatsko uravnoteavanje, kao i razliiti alati za debagovanje. Razliite boje za razliite delove koda u skladu sa sintaksom Ve ste videli kako ovo funkcionie u Dreamweaveru, odnosno kako se ukljuuju i podeavaju boje teksta za razliite elemente koda. U okviru za dijalog Preferences Code Coloring se nalaze specijalna podeavanja koja se odnose na boje teksta u skriptovima. Tu su rezervisane rei, ostale kljune rei, kao i stringovi. Ove boje se primenjuju ne bilo koji kod koji se nalazi izmedu para oznaka script. Ono to ovde podesite ne utie na kod koji je deo rukovaoca dogaaja, poto taj kod nije u okviru oznaka script. Delovi JavaScript koda (snippet) Delovi koda koje smo razmatrali ranije u ovom poglavlju mogu takoe da se koriste za uvanje fragmenata koda koji se najee koriste. Dreamweaver dolazi sa nizom korisnih JavaScript fragmenata, koje ete moda poeleti da istraite. Meni za navigaciju kroz kod Kada radite u Code Inspectoru, Dreamweaver omoguava da lako skoite na razliite JavaScript funkcije. Ovo se radi preko menija Code Navigation. Ovom meniju moete 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 mogunost ne postoji u prikazu Code u prozoru Document.) Automatsko uravnoteavanje zagrada esto se deava da se izgubi trag o otvorenim i zatvorenim velikim i malim zagradama, ili otvorenim i zatvorenim navodnicima. Dreamweaver Vam ne moe pomoi u odreivanju da li su otvoreni navodnici zatvoreni ili ne, ali moe kod odreivanja da li su zatvorene zagrade koje ste otvorili (velike, male i srednje). Ako elite da proverite da li je Vaa interpunkcija ispravno uparena, treba da uradite sledee: 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 izmeu te zagrade i odgovarajue zatvorene zagrade. Ako ste navikli na nain na koji je ovo automatsko zatvaranje zagrada implementirano u nekim editorima teksta (kao to je BBEdit), komanda Balance Braces moe da uradi poneto od toga na ta ste navikli. Ne moete je koristiti za uravnoteavanje 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 greci (zvukom). Ovo se, na primer, deava kada imate vie otvorenih od zatvorenih zagrada. Ako u sledeem kodu izaberete prvu otvorenu zagradu, ue se zvuk koji upozorava na greku, poto zagrade nisu uparene: function helloWorld() { if (a==0) { window.alert("Hello, world"); } Ako izaberete drugu otvorenu zagradu, nee se javiti greka, poto e Dreamweaver da izabere samo onaj kod koji se nalazi u zagradama iskaza if.
274 / 299
Dreamweaver MX 2004
20. Prilagoavanje i proirivanje Dreamweavera

Kako se Dreamweaver konfigurie
Dreamweaver se razlikuje od drugog komercijalnog softvera. Veina programa se pravi u jezicima kao to je C++, nakon ega se kompajliraju. Dobijaju se izvrni programi, to znai da Vi ne moete da ulazite u njihovu strukturu, da biste videli kako su napravljeni ili da podeavate njihove funkcije. Za programe je u poslednjih nekoliko godina postalo popularno da nude plug-in arhitekturu, ime se nezavisnim programerima omoguava 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 slinom jeziku. Dreamweaver je, sa druge strane, napravljen sa idejom da korisnicima omogui da menjaju i dodaju svoje dodatke u program. Da bi ovo uradili, inenjeri koji su pravili Dreamweaver su napravili kombinaciju kompajliranog jezgra napisanog u jeziku C, dok su interfejs i mnoge funkcije napisane u spoljanjim JavaSript, XML ili HTML datotekama. Ove spoljanje datoteke se nazivaju proirenjima. Promenom proirenja moete da podeavate kako Dreamweaver izgleda i kako radi. Dodavanjem proirenja u Dreamweaver moete da dodajete nove funkcije. Premda morate da znate nain na koji se pomou JavaScripta prave ova proirenja, ipak je za podeavanje interfejsa proirenja potrebno samo osnovno znanje o HTML-u i XML-u. Macromedia Exchange za Dreamweaver ima stotine proirenja koja su napisali drugi programeri. Neka od njih su besplatna, a neka se plaaju.
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, sadri sve datoteke za proirenje. Ispitajte ovu fasciklu, i prepoznaete mnoge fascikle koje odgovaraju elementima Dreamweavera. To su Objects, Behaviors, Commands, Menus, Inspectors itd. U okviru ovih fascikli se nalaze pojedinane datoteke koje kontroliu izgled i funkcije razliitih 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 ugraen u HTML datoteke, obezbeuju funkcije razliitih proirenja. XML datoteke (sa razliitim ekstenzijama) sadre instrukcije koje Dreamweaver koristi da bi odredio kako se proirenje integrie u interfejs glavnog programa. Ako ste dovoljno avanturistiki raspoloeni da petljate sa ovim datotekama, moete da podesite i proirite Dreamweaver. U ovom poglavlju ete imati ansu da ispitate HTML i XML datoteke u fascikli Configuration i da promenite poneto u njima.
Podrka za vie korisnika: Fascikla User Configuration

Kao i svi noviji operativni sistemi, i Dreamweaver pretpostavlja da ete raditi u okruenju sa vie korisnika. To znai da se na Va raunar moe prijaviti vie od jedne osobe. Svi oni mogu da pokrenu program i podeavaju njegove karakteristike. Dreamweaver podrava konfiguraciju za razliite korisnike preko vie razliitih 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 moe da ima i svoju posebnu fasciklu za konfiguraciju. Kod verzije Dreamweavera za Windows line fascikle korisnika za konfiguraciju se nalaze na putanji: c:\documents and settings\username\application data\macromedia\dreamweaver mx\configuration\ Umesto username se stavlja Vae korisniko ime, ili Owner ili Default User, u zavisnosti od toga kako je sistem podeen. Fascikla Application Data je verovatno nevidljiva, osim u sluaju da ste neto petljali sa podeavanjem sistema. Morate da je uinite vidljivom (u Exploreru izaberite Tools > Folder Options > View), a onda moete da vidite i dalje podeavate datoteke za konfiguraciju. Pogledajte jednu od ovih dodatnih fascikli i videete da to nije potpuni duplikat glavne fascikle Configuration. Tu su samo izvesne datoteke, koje predstavljaju elemente interfejsa koji treba razliito podesiti za svakog korisnika. (Ako nikad niste pokretali Dreamweaver, onda ove fascikle i ne postoje. One se kreiraju samo ako je potrebno.) Podeavanja kao to su boje za razliite delove koda, meniji koji se mogu podeavati da bi im se pristupalo preko tastature, komande koje se mogu zapisivati preko panoa History, pa ak i objekti koji pamte svoja podeavanja 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 neto obavilo. Generalno pravilo je: Kada trai datoteke za proirenja, Dreamweaver uvek prvo pretrauje fasciklu Configuration tog korisnika (i ne koristi datoteke duplikate koje postoje u glavnoj fascikli). Samo ako neka datoteka sa proirenjem nema svoj par u fascikli za konfiguraciju korisnika, Dreamweaver koristi datoteku koja se nalazi u glavnoj fascikli Configuration.
Promena konfiguracije
Sve to uradite u podeavanju Dreamweavera utie na fasciklu Configuration. Ipak nee sve zahtevati da idete u fasciklu Configuration i da tamo neto petljate. U narednim odeljcima smo objasnili razliite zadatke vezane za promenu konfiguracije, koje biste mogli da poelite, 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 maine. Dobro se zabavite.
Promena preica sa tastature

Preice sa tastature su sjajan nain da se brzo pristupi komandama i funkcijama Dreamweavera. Podrazumevano podeavanje Dreamweavera sadri preice za veinu komandi iz menija, kao i preice za selektovanje neega, za kretanje navie ili nanie po strani, kao i za uredivanje u prikazima Code i Design. U sluaju da Vaa omiljena komanda ili operacija nema preicu, ili ako Vam se ne dopadaju preice koje je firma Macromedia pripremila za Vas, one se mogu menjati. Moete da dodajete, briete ili menjate preice. Moete i da pravite razliite skupove preica za razliite namene i da prelazite sa jednog na drugi skup. Kako se radi sa Editorom za preice sa tastature Osnovni interfejs za rad sa preicama sa tastature je Keyboard Shortcut Editor, koji je prikazan na slici. Ovom editoru moete da pristupite ako izaberete Edit > Keyboard Shortcuts. U ovom prozoru moete da izaberete jedan od unapred definisanih skupova preica, koji dolaze sa Dreamweaverom, ili da napravite ili podesite svoj skup.
276 / 299
Dreamweaver MX 2004
Dreamweaver dolazi sa etiri skupa preica sa tasture: Macromedia Standard Ovo je podrazumevani skup, koji najbolje funkcionie 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 preica na drugi samo treba da iz menija Shortcut Set izaberete odgovarajuu opciju. im kliknete OK da biste zatvorili okvir za dijalog novi skup preica postaje aktivan. (Nema potrebe da restartuejte Dreamweaver). Premda ove skupove ne moete da menjate, bilo koji od njih moete da duplicirate i da tako napravite svoj skup, koji onda moete 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 korinsiki definisnaom skupu napravite novu preicu, ili da promenite neku od postojeih, potraite komandu koju elite da menjate. Kada izaberete komandu u polju Shortcuts se prikazuje preica. Ako elite da promenite postojeu preicu, 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 pomoi kada radite sa editorom Shortcuts. im aktivirate polje Press Key, Dreamweaver sve to pritisnete na tastaturi interpretira kao preicu sa tastarure, koju pokuavate da dodelite. Ako pritisnete pogrenu kombinaciju tastera, ne moete da pritisnete Delete ili Ctrl/Cmd+Z da biste ponitili ono to ste uneli. Upamtite da sve dok ne pritisnete dugme Change, nita to ste uneli u ovom polju nije postalo preica. Samo izvesne kombinacije tastera se smatraju ispravnim preicama. Dozvoljene su kobinacije sa funkcijskim tasterima i to sa ili bez modifikatora. Kombinacije brojeva i slova moraju poinjati sa Ctrl (Windows). Ako u polju Press Key unesete neispravnu kombinaciju tastera, Dreamweaver e Vas upozoriti i nee 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 nieg loeg. Sve promene koje napravite u skupu preica se ne pamte dok ne predete na drugi skup preica (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, preice se nee upamtiti. Kako se preice sa tastature konfiguriu Zahvaljujui editoru Keyboard Shortcuts ne morate da se bavite detaljima o konfiguraciji vezanoj za promenu preica. U sluaju da elite da petljate ispod pokrivaa, preice sa tastature se kontroliu 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 preica sa tastature. Sadraj 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 korisniki definisan skup preica, 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 preica je trenutno aktivan. Ako iz nekog razloga ne elite da radite sa editorom - Keyboard Shortcuts (on je na primer, suvie spor ili jednostavno ne elite da se bavite poljima Shortcut i Press Key, ve vie volite da kucate), moete da promenite datoteke koje se nalaze u fascikli Configuration za tog korisnika i da tamo zadate koje god elite preice. Samo treba da imate na umu da sintaksa XML datoteke mora biti ispravna i da je na ovaj nain mogue da poremetite i rad Dreamweavera. Ako sluajno pokvarite svoj skup preica ovim runim 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.
Podeavanje kategorije Favorites na paleti Insert

Teko ste radili, pravili strane, ubacivali sadraj i pokuavali da budete to je mogue 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 doli do onih koje koristite svo vreme? U Dreamweaveru MX 2004 je novost da u kategoriju Favorites na paleti Insert moete lako da dodate svoje omiljene objekte. Ne morate da petljate po kodu. Prozor Customize Favorite Object Prvi put kada doete 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 vie), izaberite stavku iz liste, a onda pritisnite strelice navie i nanie, da biste ih pomerili navie ili nanie u listi. Ako na paleti Insert elite da dodate vertikalni separator (tako da moete da grupiete objekte u logike 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 brie iz ostalih interfejsa Dreamweavera, ve samo iz kategorije Favorites.) Kada zavrite sa kreiranjem favorita, kliknite OK da biste zatvorili okvir za dijalog. U bilo kom trenutku moete da se vratite u ovaj prozor i da promentie kategoriju Favorites. Potrebno je da desnim tasterom mia kliknete prazan deo palete Favorites Insert i da izaberete opciju Customize Favorites. Kako se paleta Insert konfigurie Nije obavezno da znate kako Dreamweaver konfigurie kategoriju Favorites ili neku drugu kategoriju sa palete Insert. U sluaju da ste ozbiljni, ili da volite da petljate, evo kako to radi. U fascikli Connguration/Objects se nalazi datoteka Insertbar.xml. Ona sadri instrukcije za konfigurisanje palete Insert, ukljuujui 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 sadri druge oznake button kreira padajui meni sa objektima. Vertikalni separatori se prave preko oznaka spearator. Kod sadri razliite 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 korisniki definisanih komandi

Ako ste jedan od ultra efikasnih ljudi, koji vole da kad god je mogue smanje sebi posao, onda ste verovatno ve koristili makroe koji postoje u drugim programima. Makroi omoguavaju da zapiete sve korake koje ste uradili u obavljanju nekog posla i da ih kasnije ponovite. Ovo se obino pokree nekom preicom sa tastature ili komandom iz menija. U Dreamweaveru, umesto da pravite makroe, moete da kreirate i implementirate korisnike komande. Korisnike komande ukljuuju komande koje su privremeno zapisane, stalno zapisane komande koje su zapisane preko panoa History, kao i sloenije komande koje se moraju programirati (preko skriptova). U narednom odeljku smo objasnili dve vrste korisnikih komandi. Zapisivanje komandi Zapisana komanda je niz koraka koje Vi nalaete da Dreamweaver zapie, tako da ih kasnije moe ponoviti onoliko puta koliko Vam je potrebno. Komandu ete zapisati na sledei nain: 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 moete da ponete sa zapisivanjem koraka). 2. Izaberite Commands > Start Recording. 3. Uradite korake koje elite da zapiete. Na primer, ako elite da formatirate tabelu, preko Property Inspectora moete da primenite boju pozadine, da podesite cell padding i spacing, da podesite debljinu i boju okvira, ili da podesite neke druge osobine. Dreamweaver ne moe da zapie korake kao to su promena onog to je izabrano ili promena aktivnog dokumenta. Ako tokom zapisivanja radite neto od ovog, to se zanemaruje. Sa druge strane zapisuje se izbor iz Property Inspectora, kucanje, kao i biranje komandi iz menija. 4. Kada zavrite sa zapisivanjem, izaberite Commands > Stop Recording. Komanda koju ste zapisali ostaje u memoriji, spremna da se ponovo izvri, sve dok ne zapiete novu ili dok ne napustite Dreamweaver. Ako elite da ponovo izvrite komandu koju ste zapisali, uradite sledee: 1. Podesite uslove koji treba da budu podeeni preko nego to komanda bude poela da se izvrava. (Ako elite da ponovo primenite komandu koja formatira tabelu, prvo morate da selektujete tabelu.) 2. Izaberite Commands > Play Recorder Command. Izvrie se pojedini koraci koje ste zapisali. 3. Ponovite ovu proceduru onoliko puta koliko elite. Komande e se izvriti isto toliko puta. Kao to vidite, zapisane komande su prilino dobre. Ipak i one imaju svoja ogranienja. One mogu biti brza, privremena pomo u obavljanju nekih poslova koji se esto ponavljaju. One ne mogu da rade nita sloenije, ili due. Na primer: Dreamweaver u jednom trenutku u memoriji moe da ima samo jednu komandu. im zapiete novu komandu, gubi se ona koja je prethodno bila zapisana. Zapisane komande ne mogu da sadre okvire za dijalog i prema tome ne mogu se prilagoavati 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 zapiete skup koraka, koji sadre promenu neeg to je izabrano, taj korak se ne moe zapisati. Kada se komanda ponovo izvrava, ovo moe dovesti do nepredvidljivih rezultata. Nema provere greaka. Na primer, ako pre ponovnog putanja zapisane komande ne selektujete ono to treba, komanda jednostavno nee raditi. Neete dobiti lepu prijateljsku poruku koja Vas upozorava da je neto polo naopako. Zapisivanje komandi preko panoa History Ako Vam se dopada ideja da zapisujete i ponavljate svoje akcije, ali elite vie kontrole i fleksibilnosti, pano History nudi dve alternative. To su karakteristike Replay Steps i Save ASP.NET Commands, koje omoguavaju da upamtite i ponovite skup koraka koji mogu, ali ne moraju biti uzastopni. Ovo se moe 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 vie puta. Zapisane komande se koriste kada elite da svoje korake upamtite za stalno i da to stavite u interfejs Dreamweavera, tako da u budunosti to moete
280 / 299
Dreamweaver MX 2004
da ponovite kad god elite. Procedura za ponavljanje koraka ili zapisivanje komandi je u osnovi ista. Treba da uradite sledee: 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 poinjete sa praznim panoom i da moete da pokrijete to vie koraka, izaberite komandu Options > Clear History. 3. Izvrite akcije koje elite da ponavljate. Svaka akcija se na panou History prikazuje kao jedan korak. I ovde ne mogu da se ukljuuju sve akcije (kao to su promena onog to je izabrano, ili pomeranje mia). Ove akcije se na panou History prikazuju kao horizontalna crvena linija, ili crna linija koja ukazuje na pomeranje mia. 4. Nakon to zavrite 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 preskoite pomeranje mia), 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 izvrava (osim ako je u pitanju pomeranje mia, ili neka druga akcija koja se ne ponavlja), a u panou History se prikazuje sledei korak, po imenu Replay Steps. Izaberite Replay Steps onoliko puta koliko je potrebno. Svaki put se na panou pojavljuje novi korak koji se moe 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 neto to se nemoe pokriti, Dreamweaver e Vas upozoriti na to i dati priliku da prekinete operaciju.) Od Vas e se zatraiti da novoj komandi date ime. Nakon to sve to zavrite, 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 moete da ponovo izvrite 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 zavriti sa nizom takvih. Ako elite da obriete neku od zapisanih komandi, ili da joj promenite ime, izaberite Commands > Edit Command List.
Kako se konfiguriu 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 podeavate ove komande, u bilo kom tekstu moete 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 neto, otvorite fasciklu Configuration/Commands i obriite datoteku koja se odnosi na komandu koja pravi probleme.
Prilagoavanje okvira za dijalog preko HTML-a

Veina objekata, komandi i ponaanja 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, padajui meniji i sl. se kreiraju na osnovu standardnih elemenata HTML formi i formatiraju se preko tabela ili nivoa. Premda bez naruavanja funkcionalnosti ne moete da briete ili dodajete ulazna polja, moete da menjate okvir za dijalog, tako to ete menjati HTML raspored. udno, ali za ovo moete 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. Poto je ovo ponaanje, treba ga potraiti u fascikli Configuration/Behaviors/Actions. U ovoj fascikli postoji datoteka Call JavaScript.js i Call JavaScript.htm. JS datoteka sadri funkcionalnosti za ovo ponaanje, a HTML sadri raspored ovog okvira za dijalog. Ako u Dreamweaveru otvorite HTML datoteku, videete 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 sluaju mogli da unitite ponaanje.
281 / 299
Dreamweaver MX 2004
Prialgoavanje menija Dreamweavera preko datoteke menus.xml

Svaka komanda koja se pojavljuje u sistemu menija Dreamweavera, ukljuujui 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 izvri kada se komanda izabere. (Akcija je obino da se otvori i izvri 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 ugnjeeni razliiti 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 deava kada se komanda izabere. Iako bez pisanja skripta ne moete da dodate potpuno novu stavku menija, preko XML-a moete da podesite svoj sistem menija. Moete da prebacujete stavke u meniju, da dodajete separatore, pa ak i da ih kopirate tako da se prikazuju na vie mesta, na primer, jednom u meniju i drugi put u kontekstnom meniju. Prilikom dupliciranja stavki iz menija, obratite panju 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.
Proirenja koja dolaze od nezavisnih proizvoaa

Ako elite da prilagoavate Dreamweaver radi proirenja njegovih funkcija, onda ste spremni za nova proirenja. Ako elite da koristite dokazane vetine drugih u programiranju, Tako da ne morate da sami kreirate proirenje, spremni ste za Macromedia Exchange for Dreamweaver i Extension Manager.
Pronalaenje proirenja: Macromedia Exchange

Macromedia Exchange for Dreamweaver je veliko skladite proirenja koja je prikupila firma Macromedia. Predstavljeno je na Webu i svi mogu da ga koriste. Premda je neka od ovih proirenja napisala sama firma Macromedia, veliki deo su pisali nezavisni programeri, koji su proirenja pravili sami za sebe, a onda se sloili da to podele sa zajednicom Dreamweavera. Ova proirenja se pakuju u optem formatu (MXP) i postavljaju na Exchange, tako da svako moe da ih koristi. Veina njih je besplatno, ali se neka i naplauju, ali relativno malo. Programu Macromedia Exchange for Dreamweaver moete pristupiti ako u pretraivau unesete adresu www.macromedia.com/exchange/dreamweaver. Postoji na stotine razliitih proirenja. Ona dodaju razliite funkcije, od pretraivanja sajta, pa do instalacije kodova zemalja ili dodavanja dugmeta za nove Flash stilove. Sva proirenja su testirana u Macromediji da bi se osiguralo da su instalirana kako treba i da rade na pravi nain. 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. Proirenja moete da pretraujete po kategorijama, ili po naslovu i autoru. Ako elite da preuzmete neko proirenje, morate da se prijavite pod besplatnim nalogom Macromedia Exchangea. Exchangeu moete 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 padajuem meniju Actions. Ako izaberete neku od ovih komandi, pokrenue se pretraiva i odvesti Vas na naslovnu stranu programa Exchange.
282 / 299
Dreamweaver MX 2004
21. Prilog
Primer izrade dinamikog sajta
U ovom odeljku opisaemo postupak izrade jednostavnog dinamikog sajta elektronske prodavnice.
Struktura sajta
Sajt se sastoji iz etiri celine. Prvi deo, poetna strana, sadri navigacioni meni i vesti koje se uitavaju iz baze. Drugi deo predstavlja katalog proizvoda koji su u ponudi i takoe se uitava iz baze. Trei deo su stranice koje se odnose na opis poslovanja e-prodavnice i nisu od velikog znaaja 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 odgovarajui web server, kao i baza podataka. U naem primeru koristili smo Apache web server i MySQL sistem za upravljanje bazama podataka. Postupak instaliranja navedenih komponenti se znaajno ubrzava korienjem EasyPHP softverskog paketa, koji moete preuzeti sa adrese: http://www.easyphp.org/?lang=en
Baza podataka
Baza se sastoji od sledeih 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 upiite 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 odgovarajuu 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 moete da eksportujete tako to ete u gornjem meniju izabrati Export i podesiti odgovarajue opcije. Dobijate tekstualni fajl, koji kasnije, pri kreiranju nove baze, moete da importujete klikom na stavku SQL u gornjem meniju i izvravanjem SQL upita.
Definisanje sajta
Nakon pripreme, prvi korak je definisanje sajta u Dreamweaveru, tj. kreiranje zajednikog foldera za sve fajlove koji e se koristiti, biranje serverske tehnologije (u naem 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. Poto emo sajt da testiramo na lokalnoj maini, a kasnije da uploadujemo na Internet, izabraemo 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 moete 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 sadri 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 lake 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 sledeoj slici:
291 / 299
Dreamweaver MX 2004
Uitavanje teksta iz baze

Ako elite da se na strani prikazuju vesti, ili bilo koji drugi elementi iz baze, potrebno je da prvo definiete Recordset. Na panou Server Behaviors kliknite na plus ( + ) pa na Recordset. Popunite polja kako je to prikazano na sledeoj slici:
292 / 299
Dreamweaver MX 2004
Sada preite na pano Application / Bindings i videete da se tu pojavio Recordset koji ste malopre definisali, sa svojim komponentama. Jednostavno prevucite miem odreene 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 dinamike 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 naem sluaju red tabele) se ograniava i dobija mali tab na kome pie Repeat.
Uitavanje slika iz baze

Kada definiete Recordset (u ovom sluaju to je rs_proizvod jer emo u katalogu prikazati i slike proizvoda), postupak za ubacivanje dinamikih slika je sledei. Na meniju Insert izaberite Image, i u sekciji Select file name from: izaberite Data sources, umesto File System koji je oznaen 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 dinamiku sliku:
Ograniavanje pristupa
Ako elite da va katalog gledaju samo ulogovani korisnici, moete da iskoristite Server Behavior Restrict
294 / 299
Dreamweaver MX 2004
Access to Page. Popunite polja na sledei nain:
Brojevi 0 i 1 koji su selektovani (plava boja) oznaavaju da strani mogu da pristupe korisnici koji imaju access level 0 i 1, a to su upravo vrednosti koje u bazi oznaavaju obinog korisnika (0) i administratora (1). Ostali, neulogovani posetioci e imati vrednost NULL tako da im nee biti omoguen pristup i bie redirektovani na stranu denied.php. Slino se radi i sa logovanjem administratora. Pravo pristupa strani ima samo korisnik sa vrednou access level-a 1, i on moe da uita stranu administracija.php, dok se ostali korisnici redirektuju na stranu koja prikazuje greku o neautorizovanom pristupu.
Rad sa podacima u bazi (Insert, Update, Delete)

Pre nego to ponete da radite sa ubacivanjem novih, izmenom ili brisanjem postojeih elemenata iz baze, morate da kreirate odgovarajui Recordset, kako je to ranije opisano. Zatim treba da kreirate formu u koju ete da stavite sve potrebne komponente (Text Field, Checkbox, Dugme...). Poeljno je da tim komponentama preko panoa Properties dodelite nazive, kako biste se kasnije lake snalazili. Nakon toga na panou Server Behaviors kliknite na plus ( + ) pa na Insert Record.
Popunite potrebne podatke kako je to prikazano na sledeoj slici:
295 / 299
Dreamweaver MX 2004
Obratite panju na to da li ste izabrali odgovarajuu konekciju ka bazi i odgovarajuu tabelu iz baze. U naem sluaju 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 odgovarajue komponente na formi, kako je prikazano na sledeoj 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 neto komplikovanija. Ustvari, ono to dodatno treba da uradite jeste da kreirate
296 / 299
Dreamweaver MX 2004
dinamike Text Field-ove. Poto ste kreirali novu formu i na nju stavili sve potrebne komponente, sada oznaite Text Field, u koji e da se upisuju vrednosti iz baze, a koji elite da pretvorite u dinamiki. U panou Properties, u delu Init val kliknite na ikonicu munje.
Otvorie se prozor u kome ete da izaberete odgovarajui element Recordset-a. Postupak ponovite za sve dinamike 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 slino kao na ovoj slici:
297 / 299
Dreamweaver MX 2004
CSS stilovi
Naveemo i ukratko objasniti par CSS stilova koje smo koristili u ovom primeru.
Oznaka a:link znai da e formatiranje da se primeni na sve linkove (tag <a>), dok se a:hover primenjuje na linkove iznad kojih se postavi kursor mia. Vidimo da e tada boja slova prei iz tamno crvene (#990000) u belu (#FFFFFF), pozadina e postati tamno crvena i tekst e biti podvuen. U oba sluaja 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-ljubiastu i razmak od ivice bude 5 piksela. U naem primeru, ovaj CSS stil smo selektivno primenjivali na <td> tagove. Tag h3 se primenjuje na naslove (heading), koji su trei po znaaju, iza h1 i h2. Font u njima je neto vei 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 moete da menjate, i kako bi taj isti sajt izgledao bez CSS stilova:
299 / 299

Dreamweawer Tutorial

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamweawer Tutorial

Uploaded by

Copyright:

Available Formats

DREAMWEAVER MX 2004

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

1. Poboljanja u novoj verziji

Generalna poboljanja vezana za interfejs

Kategorije kod grupe objekata

Fakultet organizacionih nauka

Integrisani pano Site

Fakultet organizacionih nauka

Palete vezane za dokumente

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Poboljani meni Window

Poboljanja vezana za rad sa dokumentima

Poboljano ureivanje tabela

Fakultet organizacionih nauka

Bolja integracija provere dokumenta

Integrisano rukovanje grafikom

Fakultet organizacionih nauka

in Fireworks (formalno sakrivena u meniju Commands) sada ima sopstveno dugme.

Poboljanja vezana za CSS

Fakultet organizacionih nauka

Poboljana podrka za CSS2

Fakultet organizacionih nauka

Poboljanja vezana za kod

Fakultet organizacionih nauka

Poboljanja vezana za rukovanje sajtom

Fakultet organizacionih nauka

Poboljanja vezana za rad sa dinamikim podacima

Fakultet organizacionih nauka

2. Radni prostor Dreamweavera

Poreenje radnih prostora

Fakultet organizacionih nauka

Promena radnih prostora

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Panoi i grupe panoa

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Privrivanje i odvezivanje panoa

Fakultet organizacionih nauka

Paleta Insert i Property Inspector

Fakultet organizacionih nauka

Rad sa prozorom Document

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

General Assistance: Pano Reference

Fakultet organizacionih nauka

Fakultet organizacionih nauka

Fakultet organizacionih nauka

3. Kreiranje i rad sa dokumentima

Okvir za dijalog New Document

Fakultet organizacionih nauka

Novo podeavanje podrazumevanih osobina dokumenta (preferences)

Fakultet organizacionih nauka