docSvari koje nikada nećete videti
download 
Report Transcription
Svari koje nikada nećete videti
DREAMWEAVER MX 2004 Fakultet organizacionih nauka Dreamweaver MX 2004 SADRŽAJ 1. POBOLJŠANJA U NOVOJ VERZIJI.........................................................................................................................8 GENERALNA POBOLJŠANJA VEZANA ZA INTERFEJS ........................................................................................................................8 Kategorije kod grupe objekata.....................................................................................................................................8 Integrisani pano Site ...................................................................................................................................................9 Palete vezane za dokumente.......................................................................................................................................10 Tag Inspector..............................................................................................................................................................10 Poboljšani meni Window............................................................................................................................................12 POBOLJŠANJA VEZANA ZA RAD SA DOKUMENTIMA.....................................................................................................................12 Poboljšano uređivanje tabela.....................................................................................................................................12 Bolja integracija provere dokumenta.........................................................................................................................13 Integrisano rukovanje grafikom.................................................................................................................................13 POBOLJŠANJA VEZANA ZA CSS.............................................................................................................................................14 CSS integracija...........................................................................................................................................................14 Poboljšana podrška za CSS2......................................................................................................................................15 POBOLJŠANJA VEZANA ZA KOD...............................................................................................................................................16 POBOLJŠANJA VEZANA ZA RUKOVANJE SAJTOM.........................................................................................................................17 POBOLJŠANJA VEZANA ZA RAD SA DINAMIČKIM PODACIMA.........................................................................................................18 2. RADNI PROSTOR DREAMWEAVERA..................................................................................................................19 IZBOR RADNOG PROSTORA.....................................................................................................................................................19 Poređenje radnih prostora.........................................................................................................................................19 Promena radnih prostora...........................................................................................................................................20 STRANA START...................................................................................................................................................................21 RAD SA PANOIMA................................................................................................................................................................22 Panoi i grupe panoa...................................................................................................................................................22 Prikazivanje i sakrivanje............................................................................................................................................23 Pričvršćivanje i odvezivanje panoa............................................................................................................................24 Grupisanje i pregrupisavanje.....................................................................................................................................25 Paleta Insert i Property Inspector..............................................................................................................................25 RAD SA PROZOROM DOCUMENT.............................................................................................................................................26 Vezivanje i odvezivanje..............................................................................................................................................26 Pregled dokumenata...................................................................................................................................................27 Statusna linija.............................................................................................................................................................28 PALETE..............................................................................................................................................................................31 Paleta Standard..........................................................................................................................................................31 Paleta Document........................................................................................................................................................31 POMOĆ..............................................................................................................................................................................31 General Assistance: Pano Reference.........................................................................................................................31 Pomoć Dreamweavera...............................................................................................................................................32 3. KREIRANJE I RAD SA DOKUMENTIMA.............................................................................................................34 OSNOVNI POJMOVI VEZANI ZA KREIRANJE DOKUMENATA............................................................................................................34 Okvir za dijalog New Document................................................................................................................................34 Novo podešavanje podrazumevanih osobina dokumenta (preferences)....................................................................35 RAD SA DOKUMENTIMA........................................................................................................................................................36 Provera ispravnosti strane.........................................................................................................................................36 Provera ispravnosti HTML koda................................................................................................................................36 Provera XML dokumenata.........................................................................................................................................37 Provera rada u određenom pretraživaču...................................................................................................................37 Dostupnost Vaših strana............................................................................................................................................38 4. RAD SA TEKSTOM....................................................................................................................................................40 OSNOVE U VEZI TEKSTA........................................................................................................................................................40 Tekst u pretraživaču...................................................................................................................................................40 Tekst u Dreamweaveru...............................................................................................................................................40 PREBACIVANJE TEKSTA IZ DRUGIH PROGRAMA..........................................................................................................................40 Prednosti i nedostaci kopiranja iz drugih programa.................................................................................................40 2 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prebacivanje teksta (i drugih objekata) iz Worda i Excela.......................................................................................42 Tabelarni podaci........................................................................................................................................................45 DEFINISANJE STRUKTURE TEKSTA ...........................................................................................................................................46 Dobra struktura teksta: Dostupnost teksta.................................................................................................................46 Prekidi linija, razmaci koji ne znače prekid i beline..................................................................................................49 Sve o listama...............................................................................................................................................................50 Prednosti koje donose specijalni karakteri................................................................................................................52 Umetanje specijalnih karaktera tokom rada..............................................................................................................52 5. RAD SA SLIKAMA.....................................................................................................................................................55 OSNOVNO O SLIKAMA..........................................................................................................................................................55 Slike u pretraživaču....................................................................................................................................................55 Slike u Dreamweaveru...............................................................................................................................................55 RAD SA SLIKAMA................................................................................................................................................................57 Dostupnost slika.........................................................................................................................................................57 Dostupnost slika u Dreamweaveru............................................................................................................................58 Integrisano uređivanje slika.......................................................................................................................................59 Slike kao pozadina......................................................................................................................................................61 Slike i struktura strane...............................................................................................................................................65 Slike u GIF formatu od jednog piksela.......................................................................................................................65 Lowsrc........................................................................................................................................................................66 Definisanje rasporeda pomoću prostora rezervisanog za sliku.................................................................................67 Integracija Dreamweavera i Fireworksa...................................................................................................................68 Ubacivanje HTML-a koji je nastao u Fireworksu.....................................................................................................69 Launch and edit..........................................................................................................................................................70 Optimizacija u letu.....................................................................................................................................................70 Proširenje Fireworksa vezano za integraciju............................................................................................................70 6. LINKOVI I NAVIGACIJA.........................................................................................................................................72 OSNOVNO O LINKOVIMA.......................................................................................................................................................72 Kako linkovi rade u pretraživaču...............................................................................................................................72 Linkovi u Dreamweaveru...........................................................................................................................................73 METODI I ALATI ZA NAVIGACIJU............................................................................................................................................75 Kotve sa imenima.......................................................................................................................................................75 Mape slika..................................................................................................................................................................76 Padajući meniji..........................................................................................................................................................77 Rollover......................................................................................................................................................................80 Linije za navigaciju....................................................................................................................................................82 RAD SA LINKOVIMA.............................................................................................................................................................85 Dostupniji linkovi.......................................................................................................................................................85 Podešavanje linkova preko CSS-a..............................................................................................................................86 Podešavanje parametara URL-a................................................................................................................................88 Linkovi na JavaScript kod..........................................................................................................................................90 7. PODEŠAVANJE GLAVNOG SADRŽAJA...............................................................................................................92 OSNOVNO O SADRŽAJU ZAGLAVLJA.........................................................................................................................................92 Kako se sadržaj zaglavlja ponaša u pretraživaču......................................................................................................92 Kako se u Dreamweaver u radi sa zaglavljem...........................................................................................................92 RAD SA OZNAKAMA META.....................................................................................................................................................93 Oznaka meta character-encoding..............................................................................................................................93 Oznaka meta i generički objekat meta.......................................................................................................................94 Ključne reči meta i njihov opis...................................................................................................................................94 Oznaka meta refresh...................................................................................................................................................96 RAD SA OSTALIM SADRŽAJEM ZAGLAVLJA................................................................................................................................97 Objekat Base i oznaka base........................................................................................................................................97 Oznake linkova i objekat Link....................................................................................................................................99 8. KREIRANJE TABELA.............................................................................................................................................100 OSNOVNO O TABELAMA......................................................................................................................................................100 Tabele u pretraživaču...............................................................................................................................................100 Tabele u Dreamweaveru..........................................................................................................................................100 RAD SA TABELAMA............................................................................................................................................................105 3 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kontrolisanje dimenzija tabele.................................................................................................................................106 FLEKSIBILNE ŠIRINE ...........................................................................................................................................................106 Dostupnost tabela.....................................................................................................................................................106 CSS i tabele..............................................................................................................................................................109 DEFINISANJE RASPOREDA ELEMENATA NA STRANI POMOĆU TABELA............................................................................................111 Strategija rada..........................................................................................................................................................111 Tabele koje se koriste za raspored i režim Layout...................................................................................................112 9. FORME.......................................................................................................................................................................116 OSNOVNO O FORMAMA.......................................................................................................................................................116 Skriptovi za obradu formi.........................................................................................................................................116 HTML koji se nalazi iza formi..................................................................................................................................116 Kako forme funkcionišu u Dreamweaveru...............................................................................................................116 RAD SA FORMAMA.............................................................................................................................................................117 Dostupnost formi......................................................................................................................................................117 Formatiranje formi...................................................................................................................................................120 Prednosti i nedostaci obrade formi..........................................................................................................................122 10. DIZAJNIRANJE STRANA SA FREJMOVIMA..................................................................................................124 OSNOVNO O FREJMOVIMA...................................................................................................................................................124 Frejmovi u pretraživaču...........................................................................................................................................124 Frejmovi u Dreamweaveru.......................................................................................................................................124 RAD SA FREJMOVIMA.........................................................................................................................................................126 Dostupnost frejmova................................................................................................................................................126 Mogućnost pretraživanja frejmova..........................................................................................................................128 Navigacija unutar frejmova.....................................................................................................................................129 Zadržavanje strana u frejmovima............................................................................................................................132 Izlazak iz frejmova....................................................................................................................................................136 Kreativni grafički efekti koji se dobijaju preko frejmova.........................................................................................137 SVET FREJMOVA................................................................................................................................................................138 Inlajn frejmovi (iframes) u Dreamweaveru..............................................................................................................138 Exchange: Proširenje vezano za inlajn frejmove.....................................................................................................139 11. KASKADNE LISTE STILOVA (CSS)...................................................................................................................140 OSNOVE CSS-A...............................................................................................................................................................140 Kratak osvrt..............................................................................................................................................................140 Osnovni elementi CSS-a...........................................................................................................................................140 CSS u Dreamweaveru...............................................................................................................................................143 RAD SA CSS-OM..............................................................................................................................................................157 Definisanje fontova u HTML-u (i CSS-u).................................................................................................................157 Definisanje dimenzija preko CSS-a..........................................................................................................................158 CSS i dostupnost.......................................................................................................................................................159 Specifičnosti koje se postižu kontekstualnim selektorima........................................................................................159 Kako da odjednom radite sa više različitih spoljašnjih datoteka sa stilovima........................................................160 12. CSS POZICIONIRANJE, NIVOI DREAMWEAVERA I RASPORED NA STRANI.....................................162 OSNOVNO O NIVOIMA.........................................................................................................................................................162 CSS-P i nivoi u pretraživaču....................................................................................................................................162 Kako u Dreamweaveru rade nivoi...........................................................................................................................163 Dizajn nivoa u prikazu Design.................................................................................................................................166 RAD SA NIVOIMA...............................................................................................................................................................169 Nivoi kao objekti sa stilovima..................................................................................................................................169 Podrška pretraživača za nivoe.................................................................................................................................171 13. UPRAVLJANJE LOKALNIM SAJTOM..............................................................................................................172 KAKO DREAMWEAVER RUKUJE LOKALNIM SAJTOVIMA.............................................................................................................172 DEFINISANJE LOKALNOG SAJTA............................................................................................................................................172 UPRAVLJANJE SAJTOVIMA...................................................................................................................................................174 PANO SITE.......................................................................................................................................................................174 Proširivanje i sužavanje panoa Site.........................................................................................................................174 Prikaz datoteka na sajtu...........................................................................................................................................175 Prikaz Mape sajta (Site Map)...................................................................................................................................176 4 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 UPRAVLJANJE DATOTEKAMA I LINKOVIMA NA SAJTU................................................................................................................178 Upravljanje datotekama i fasciklama......................................................................................................................179 Upravljanje linkovima..............................................................................................................................................179 Provera i popravka linkova......................................................................................................................................182 UPRAVLJANJE AKTIVOM PREKO PANOA ASSETS......................................................................................................................183 Umetanje elementa iz aktive.....................................................................................................................................185 Favoriti u listi aktive................................................................................................................................................186 Podešavanje panoa Assets.......................................................................................................................................187 Upotreba aktive na sajtu..........................................................................................................................................187 Promena elemenata koji čine aktivu........................................................................................................................187 Kreiranje novog elementa u aktivi...........................................................................................................................188 RAD BEZ SAJTA.................................................................................................................................................................188 14. PUBLIKOVANJE I ODRŽAVANJE SAJTA.......................................................................................................189 KAKO DREAMWEAVER RADI SA UDALJENIM SAJTOVIMA...........................................................................................................189 DEFINISANJE UDALJENOG SAJTA U DREAMWEAVERU...............................................................................................................189 Bez uspostavljanja veze............................................................................................................................................190 FTP...........................................................................................................................................................................190 RAD SA UDALJENIM SAJTOM................................................................................................................................................192 Pregled informacija sa udaljenog servera u panou Site..........................................................................................192 Uspostavljanje i prekidanje veze..............................................................................................................................193 Postavljanje i preuzimanje.......................................................................................................................................193 SINHRONIZACIJA LOKALNOG I UDALJENOG SAJTA.....................................................................................................................193 Izbor novijih datoteka na udaljenom i lokalnom sajtu.............................................................................................193 Komanda Synchronize..............................................................................................................................................194 Sakrivanje.................................................................................................................................................................195 Uključivanje i isključivanje sakrivanja....................................................................................................................195 Sakrivanje datoteka i fascikli...................................................................................................................................196 Otkrivanje.................................................................................................................................................................196 RAD BEZ SAJTA: DEFINISANJE VEZE SA UDALJENIM SERVEROM..................................................................................................196 15. KREIRANJE DINAMIČKIH SAJTOVA U DREAMWEAVERU.....................................................................199 OSNOVNO O DINAMIČKIM SAJTOVIMA....................................................................................................................................199 Kako rade statičke strane.........................................................................................................................................199 Kako rade dinamičke strane.....................................................................................................................................199 PODEŠAVANJE RADNE STANICE ZA RAZVOJ DINAMIČKIH SAJTOVA...............................................................................................202 Podešavanje onlajn razvoja.....................................................................................................................................203 PODEŠAVANJE OFLAJN RAZVOJA...........................................................................................................................................203 Podešavanje HTTP servera......................................................................................................................................203 Podešavanje aplikacionog servera...........................................................................................................................204 Baze podataka..........................................................................................................................................................205 FUNKCIONISANJE DINAMIČKIH SAJTOVA U DREAMWEAVERU.....................................................................................................205 Pregled živih podataka i server za testiranje...........................................................................................................206 Podešavanje dinamičkih sajtova..............................................................................................................................206 Povezivanje sa bazom podataka...............................................................................................................................207 16. DINAMIČKE STRANE...........................................................................................................................................209 PRIKUPLJANJE DINAMIČKIH PODATAKA..................................................................................................................................209 Osnovno o skupovima zapisa...................................................................................................................................209 Sofisticiraniji upiti i skupovi rezultata.....................................................................................................................210 POSTAVLJANJE DINAMIČKIH ELEMENATA NA STRANE................................................................................................................212 Dinamički tekstualni elementi..................................................................................................................................212 Podešavanje dinamičkih osobina.............................................................................................................................213 Dinamički podaci i forme.........................................................................................................................................215 Regioni koji se ponavljaju........................................................................................................................................216 Uslovni sadržaj.........................................................................................................................................................218 17. JOŠ NEKE DINAMIČKE TEHNIKE....................................................................................................................220 DINAMIČKI ŠABLONI..........................................................................................................................................................220 Kreiranje dinamičkih šablona..................................................................................................................................220 Kako rade dinamičke strane.....................................................................................................................................220 SKUPOVI GLAVNIH I DETALJNIH STRANA................................................................................................................................221 5 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ručno kreiranje skupova glavnih i detaljnih strana................................................................................................221 SLOŽENI SKUPOVI ZAPISA....................................................................................................................................................222 Pisanje SQL upita.....................................................................................................................................................223 Pisanje SQL upita preko stabla sa stavkama iz baze podataka...............................................................................224 Parametri u SQL iskazima.......................................................................................................................................225 KREIRANJE SISTEMA ZA PRIJAVLJIVANJE KORISNIKA.................................................................................................................227 Registracija korisnika..............................................................................................................................................228 Prijavljivanje korisnika............................................................................................................................................228 Ograničavanje pristupa............................................................................................................................................228 Odjavljivanje............................................................................................................................................................229 USLOVNI SADRŽAJ.............................................................................................................................................................229 Objekti Show Region................................................................................................................................................229 Druge vrste uslovnog sadržaja.................................................................................................................................230 18. ASP.NET...................................................................................................................................................................231 ASP.NET NAPOMENE O INSTALACIJI...................................................................................................................................231 Na kojim verzijama Windowsa ASP.NET može da radi?.........................................................................................231 Isključite opciju Simple File Sharing.......................................................................................................................231 Podešavanje dozvola za fascikle..............................................................................................................................231 Podešavanje dozvola za IIS Administratora............................................................................................................231 ASP.NET OBJEKTI ZA RUČNO KODIRANJE NA PALETI INSERTION..............................................................................................232 Objekat Register Custom Tag..................................................................................................................................232 Objekat Import Namespace......................................................................................................................................232 Objekat Trimmed Form Element..............................................................................................................................232 Element Trimmed QueryString.................................................................................................................................232 Objekat Runat Server...............................................................................................................................................232 Objekat Bound Data.................................................................................................................................................233 Objekat Page_Load..................................................................................................................................................233 ASP.NET OBJEKTI WEB SERVER CONTROL NA PALETI INSERTION..........................................................................................233 Objekat asp:Button...................................................................................................................................................233 Objekat asp:CheckBox ima sledeće atribute:..........................................................................................................235 Objekat asp:CheckBoxList.......................................................................................................................................236 Objekat asp:DropDownList.....................................................................................................................................238 Objekat asp:lmageButton.........................................................................................................................................239 Objekat asp:Label....................................................................................................................................................240 Objekat asp:ListBox.................................................................................................................................................241 Objekat asp:RadioButton.........................................................................................................................................243 Objekat asp:RadioButtonList...................................................................................................................................244 Objekat asp:TextBox................................................................................................................................................246 Objekat More Tags...................................................................................................................................................247 19. PISANJE KODA U DREAMWEAVERU..............................................................................................................249 DREAMWEAVER KAO EDITOR TEKSTA....................................................................................................................................249 Pristup editoru teksta...............................................................................................................................................249 Opcije prikaza Code i podešavanje njegovih karakteristika....................................................................................250 Opcije vezane za formatiranje koda.........................................................................................................................255 Prepisivanje koda.....................................................................................................................................................257 Pisanje i uređivanje koda.........................................................................................................................................258 Delovi koda (Snippets).............................................................................................................................................260 POVEZIVANJE SA SPOLJAŠNJIM EDITORIMA TEKSTA..................................................................................................................262 Podešavanje spoljašnjeg editora teksta (nije integrisan)........................................................................................262 Integracija editora HomeSite+ sa Dreamweaverom...............................................................................................262 BIBLIOTEKE TAGOVA I EDITOR TAG LIBRARY........................................................................................................................263 Rad sa okvirom za dijalog Tag Library Editor........................................................................................................263 Promena stavki u biblioteci oznaka.........................................................................................................................264 Dodavanje (brisanje) stavki.....................................................................................................................................264 NAPREDNE KOMANDE FIND AND REPLACE............................................................................................................................266 Napredno pretraživanje teksta.................................................................................................................................266 Pretraživanja na osnovu zadate oznake...................................................................................................................266 Upotreba regularnih izraza......................................................................................................................................267 RAD SA TEKSTOM KOJI NIJE HTML U DREAMWEAVERU.........................................................................................................269 PISANJE JAVASCRIPT KODA U DREAMWEAVERU.....................................................................................................................270 6 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pano Reference........................................................................................................................................................270 Pisanje skriptova bez prikaza Code.........................................................................................................................271 Alati vezani za JavaScript dostupni u prikazu Code................................................................................................273 20. PRILAGOĐAVANJE I PROŠIRIVANJE DREAMWEAVERA........................................................................275 KAKO SE DREAMWEAVER KONFIGURIŠE................................................................................................................................275 Kako se radi sa fasciklom za konfiguraciju.............................................................................................................275 Podrška za više korisnika: Fascikla User Configuration........................................................................................275 PROMENA KONFIGURACIJE...................................................................................................................................................276 Promena prečica sa tastature..................................................................................................................................276 Podešavanje kategorije Favorites na paleti Insert..................................................................................................278 Automatizacija zadataka preko korisnički definisanih komandi..............................................................................280 Kako se konfigurišu zapisane komande...................................................................................................................281 Prilagođavanje okvira za dijalog preko HTML-a....................................................................................................281 Prialgođavanje menija Dreamweavera preko datoteke menus.xml.........................................................................282 PROŠIRENJA KOJA DOLAZE OD NEZAVISNIH PROIZVOĐAČA.........................................................................................................282 Pronalaženje proširenja: Macromedia Exchange...................................................................................................282 21. PRILOG....................................................................................................................................................................283 PRIMER IZRADE DINAMIČKOG SAJTA......................................................................................................................................283 Struktura sajta..........................................................................................................................................................283 Priprema...................................................................................................................................................................283 Baza podataka..........................................................................................................................................................283 Definisanje sajta.......................................................................................................................................................285 Povezivanje sa bazom...............................................................................................................................................290 Login forma..............................................................................................................................................................291 Učitavanje teksta iz baze..........................................................................................................................................292 Učitavanje slika iz baze............................................................................................................................................294 Ograničavanje pristupa............................................................................................................................................294 Rad sa podacima u bazi (Insert, Update, Delete)....................................................................................................295 CSS stilovi................................................................................................................................................................298 7 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 1. Poboljšanja u novoj verziji Koja su poboljšanja u verziji MX 2004 u odnosu na verziju MX ? Možda ih nećete videti, ali ona su tu. To su neosetna poboljšanja, koja program čine boljim. Dreamweaver je poboljšan u pravcu veće brzine i pouzdanosti. Program nudi punu podršku za Unicode, što znači da se strane mogu prikazivati na bilo kom jeziku koji programski sistem može da razume. Ugrađeni FTP program je potuno nov, pouzdaniji je i brži. A evo i stvari koje nećete videti zato što više nisu tu. HTML stilovi, Timeline, pogled Tag Inspector Tree (ne samo Tag Inspector, koji se nalazi na kartici Properties opcije Selection Inspector), pano Answers, sve je to otišlo. Ako ste koristili Dreamweaver za Windows, onda je i Classic Workspace otišao. Otišla je i podrška za Windows NT, Windows Me i Macove operativne sisteme pre verzije Jaguar (10.2). Prvi put kada pokrenete svoju novu kopiju Dreamweavera MX 2004, susrešćete se sa stranom Start. Ova strana nije samo obična strana za dobrošlicu, ona se prikazuje svaki put kada Dreamweaver radi, i ako nije otvoren nijedan dokument. Izaberite da otvorite neki dokument koji ste prethodno otvarali, brzo kreirajte novi dokument i definišite sajt iz samo jednog ekrana. Ako vam se ova strana ne dopada, možete je isključiti u okviru za dijalog Preferences. Generalna poboljšanja vezana za interfejs Nakon promena na početnoj strani, interfejs Dreamweavera se ne razlikuje mnogo od starog MX interfejsa. Ali, kako se budete dalje udubljivali, otkrivaćete suptilne, ali i manje suptilne promene. Kategorije kod grupe objekata Kartice na paleti Insert više nisu tu. Kategorije objekata koje su se tamo nalazile, sada su dostupne iz padajućeg menija. Sada postoji manje kategorija nego ranije. To su samo kategorije Common, Layout, Forms, HTML, Application, kao i nova sjajna kategorija Favorites. U okviru svake kategorije ćete pronaći mešavinu objekata (prikazanih preko ikona), kao i grupe objekata (naznačene su trouglastim strelicama pored ikone za objekat). U okviru kategorije Common se nalaze objekti Hyperlink, Email Link i Anchor. 8 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Tu su takođe opcije Tables, Images, Media Objects, Template Objects, itd. Opcije Tables, Layers i Layout Tables su kategoriji Layout, a tu su i neke korisne stavke kao što su Table Rows i Table Columns, ili oznake tabela za ručno kodiranje. Poslednji objekat iz grupe koji ste koristili je onaj koji se prikazuje na paleti Insert. Ako želite da izaberete neku drugu opciju, kliknite trougao i izaberite opciju iz liste. Iako u prvom trenutku može biti uznemirujuće da lovite svoj objekat i da ga na kraju pronađete sakrivenog u grupi, vrlo brzo ćete zavoleti činjenicu da se objekti koje ste poslednje koristili nalaze upravo tu ispred Vas. Na kraju krajeva, ako je poslednja stavka koju ste ubacili bila tabela, onda ćete verovatno ubacivati više tabela, pre nego što predete na nivoe ili ćelije. Ako Vam se i dalje ne dopada način na koji su objekti grupisani, možete da ga izmenite. Idite do kategorije Favorites i tamo izaberite objekte koje želite da prikažete. Integrisani pano Site Ako ste prvi put otvorili Dreamweaver MX 2004, verovatno ćete se najpre zapitati: "Gde je nestao pano Site?". On je bio integrisan u grupu panoa Files, tako da se pojavljivao u skraćenom obliku kao jedan od kaskadnih panoa sa donje desne strane monitora. 9 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ovim komandama se može pristupiti iz menija Options u prozoru. Tu su komande New File, New Folder, Select Never Local, kao i druge komande koje su zakopane u podmeniju Site Files View, glavnog menija Site. Palete vezane za dokumente Korisnici će primetiti inovaciju vezanu za radni prostor, odnosno videće da su palete pričvršćene za prozor Document, a ne ispod palete Insert. Iako ovo može izgledati pomalo neobično, ipak je vrlo efikasno, jer se palete približavaju aktivnom delu dokumenta u kome radite, tako da možete da za različite dokumente različito podešavate pojedine palete. Palete se mogu otkačiti prevlačenjem njihovih ručica, ili se mogu vezati za paletu Insert, kao u MX-u. Tag Inspector Novi, promenjeni Tag Inspector (Window-Tag Inspector) je sjajan (i veoma kompaktan) način za pregled i rad sa bilo kojim elementom na strani. Ovo je kao vojnički nož - sve što će Vam ikad trebati je tu, čak i ako niste znali da će Vam biti potrebno. Kartica Attributes je uvećana verzija Tag Inspectora iz verzije Dreamweaver MX. Iz ovog korisnog i kompaktnog panoa možete da podešavate osobine za bilo koju izabranu stavku, od osobina strane, do osobina teksta, tabela i slika. Osobine se mogu prikazivati po abecednom redu ili grupisane po kategorijama (sami podešavate). Tu su sve osobine, zajedno sa standardnim dugmadima za pretraživanje, mogućnostima za podešavanje boja, kao i dinamičkim opcijama koje omogućavaju da brzo i tačno unesete vrednost. 10 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Na kartici Behaviors se nalazi poboljšani interfejs sa panoa Behaviors. Tu su sada dve opcije za prikazivanje rukovaoca događajima koji se mogu koristiti. Kartica Tag Inspector/CSS vrši inspekciju stilova. Ovo je nov i koristan način za ispitivanje i promenu CSS stilova koji se primenjuju na neki objekat. Elementi stilova koji se koriste za formatiranje se mogu prikazivati po abecednom redu ili po kategorijama. Ovi elementi se mogu menjati na licu mesta, tako da ne morate da idete kroz pano CSS Styles. Ako ste ranije smatrali da je rad sa CSS stilovima težak i zbunjujuć, spremni ste za nova, poboljšana iskustva. Možda volite da za svoj svakodnevni posao koristite Property Inspector, a da Selection Inspector otvarate samo u specijalnim situacijama. Kako god da radite, nova gomila alata je dobrodošla novina, koja Vašim rukama daje novu snagu. 11 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Poboljšani meni Window U meniju Window su sada u glavnom prozoru prikazani svi panoi i inspektori. Pojedine stavke, kao što je bio slučaj sa opcijama Layers i Frames sada nisu više u podmeniju Others. Naravno, kad jednom podesite prečice sa tastature, verovatno više nećete koristiti meni Window, ali kao generalni princip, lepo je da se sve nađe na jednom mestu. Poboljšanja vezana za rad sa dokumentima Naravno da je jedna od najboljih osobina ovog programa bilo intuitivno, jasno i snažno okruženje za rad sa dokumentima. Iako se u novoj verziji izgled prozora Document nije promenio, različite osobine su ojačane, tako da se dobija bolje integrisano radno okruženje. Poboljšano uređivanje tabela Većini web dizajnera tabele predstavljaju veliki deo svakodnevnih radnih aktivnosti. Njima se teško rukuje, čak i u grafičkom okruženju. Dreamweaver je uvek imao dobre alate za uređivanje tabela. Dreamweaver MX 2004 je dodao dve nove osobine. Paleta Table Widths (dostupna sa palete Document iz podmenija View Options > Visual Aids) prikazuje horizontalnu traku sa informacijama o debljini za bilo koju izabranu tabelu. Ovo je slično informacijama koje se za izabranu tabelu prikazuju u Layout modu. Paleta ne samo da prikazuje informacije o dimenzijama, već je tu i padajući meni sa komandama za izbor i uređivanje. 12 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Druga pomoć, režim Expanded Tables (View > Table Mode > Expanded Tables Mode) može da olakša život onima koji za raspored strana koriste tabele bez vidljivih ivica. U režimu Expanded Tables, Dreamweaver sve tabele prikazuje sa ivicama, prikazuje rastojanje između ćelija, uvlačenje ćelija, tako da se jasno vidi struktura tabele. Čak i male ćelije se jasno vide i selektuju. Kod koji stoji iza tabele se ne menja, tako da se tabela u pretraživaču i dalje prikazuje na uobičajeni način. Režim Expanded Tables može puno da pomogne kod dizajna, jer se vidi ono što biste inače morali da zamišljate. Za one koji vole da rade u režimu Layout, on je i dalje tu. Neka poboljšanja su doprinela većoj pouzdanosti. Tabelama koje ste pravili u režimu Layout više nije potreban atribut height, premda raspored ćelija i dalje postoji, a u Layout Table Property Inspectoru sada postoji i dugme za brisanje visine vrsta. Ćelije se sada kreiraju sa razmacima koji se ne prekidaju, čime se izbegava problem koje prazne ćelije donose u pretraživačima. Sada je teže da slučajno napravite tabelu u vazduhu, odnosno da kreirate tabelu koja se slučajno našla u okviru neke druge tabele. Na kraju, kao vrlo suptilna promena, odloženo ažuriranje tabele u režimu Standard pripada prošlosti. Tabela se sada automatski širi do prave veličine čim se izbriše sadržaj, tako da ne morate da klikćete izvan tabele da biste prelazili u pogled Display. Bolja integracija provere dokumenta Kreiranje dokumenata koji dobro rade u ciljnim pretraživačima je krucijalna stvar kod razvoja za Web. Zbog toga ima i smisla da se osobine Dreamweavera vezane za proveru dokumenata nađu na važnijem mestu. Tako je i bilo. Dreamweaver sada može automatski da proverava kompatibilnost otvorenog dokumenta sa petraživačem, a na paleti Document se nalazi korisna ikona OK, koja govori da je sve u redu, ili ikona sa upozorenjem da postoji problem. Ako kliknete ikonu, dolazite do različitih podešavanja i kontrola, uključujući i poboljšani interfejs za izbor pretraživača. Glavne komande Validate i Check Target Browser su i dalje u meniju File, tako da oni koji su se navikli na njih, mogu i dalje da ih tamo pronađu. Integrisano rukovanje grafikom Na svoju stranu ste ubacili neku sliku. Zamislite da to izgleda užasno. Želite da promenite veličinu, promenite uzorak ili podesite boje i prazan prostor. Sada sve to možete da radite u okviru Dreamweavera i to preko poboljšanog Image Property Inspectora. Ako su neki od Vas koristili komandu Fireworks, komanda Optimize 13 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 in Fireworks (formalno sakrivena u meniju Commands) sada ima sopstveno dugme. Poboljšanja vezana za CSS Ovo je više od poboljšanja. Osnovni pristup Dreamweavera da morate da pravite kod za svoje strane je promenjen, tako da CSS možete da uključujete na svim nivoima. Ovo je sada dobra stvar. CSS integracija Novi CSS style rule inspector (kartica CSS u okviru Tag Inspectora) je samo vrh ledenog brega, koji se odnosi na promene u rukovanju CSS-om u Dreamweaveru. Promenjen je pano CSS Styles, tako da sada postoji samo režim za uređivanje. Zašto? Zato što su sve osobine za primenu stilova već integrisane u Property Inspectoru. Više nema potrebe za specijalnim interfejsima, kao što je pano CSS Styles. Stilovima se sada pristupa preko interfejsa i oni se koriste za osnovne zadatke vezane za kodiranje, tako da se više ne koristi stari način sa HTML formatiranjem. Različite verzije Property Inspectora sada sadrže više informacija nego ikada pre. Text Property Inspector više ne omogućava prelaz sa "običnog" na "CSS" režim. Umesto toga, sada su u centru CSS opcije. Podrazumeva se da se kod bilo kog formatiranja teksta preko Property Inspectora koristi CSS formatiranje, a ne ubacivanje oznaka font. Na tabele i druge elemente na strani se sada mogu primeniti klase sa njihovih Property Inspectora, premda neki od Vas mogu da koriste i desni klik mišem i opciju Tag Inspector i da na taj način primene stilove. 14 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Okvir za dijalog Page Properties ima novi interfejs preko kojeg se može podešavati boja pozadine strane, podešavati izgled linka. Sve to se radi preko CSS stilova koji se automatski generišu. Bilo koju od ovih automatizovnih CSS funkcija možete da isključite (ako odete u okvir za dijalog Preferences General i ne potvrdite opciju Use CSS Instead HTML Tags). Ali, zašto biste to radili? Poboljšana podrška za CSS2 Da, i dalje možete da crtate nivoe (alat Draw Layer se nalazi na paleti Insert, u okviru grupe objekata Layout). Možete i da izaberete bilo koji element sa strane, da ga ubacite u oznaku div i da primenite korisnički definisanu klasu ili ID, zahvaljujući novom objektu Div (takode se nalazi u grupi objekata Layout na paleti Insert). Na slici je prikazana ova sjajna procedura. Stara oznaka za nivoe koja potiče od Netscapea više se ne koristi kod kodiranja nivoa. Takođe je poboljšan i pogled Design za elemente koji koriste CSS. 15 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Poboljšanja vezana za kod Za one koji vole da kodiraju ima takođe dobrih vesti. Ako u prozoru Code kliknete desnim tasterom miša, otvoriće se pomoćni meni iz kojeg možete da brzo pristupite poslovima vezanim za kodiranje, kao što su kreiranje delova koda, konvertovanje malih u velika slova i obrnuto i još puno toga. Ako želite da ručno kodirate CSS stilove, na raspolaganju Vam stoje saveti vezani za CSS kod. U okviru za dijalog Find And Replace sada postoji više opcija. Ovo i nije alat za kodiranje, ali je koristan kao pomoć. Dreamweaver sada u potpunosti podržava prostore imena iz XML-a. 16 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Poboljšanja vezana za rukovanje sajtom U delu koji se odnosi na rukovanje sajtom, veliku novost predstavlja program Contribute. Ovaj novi program Macromedie omogućava običnim ljudima, koji nisu web dizajneri, da lako ažuriraju sadržaj u unapred napravljenim šablonskim stranama, koje su napravljene preko Dreamweavera. Opcije Site definitions u Dreamweaveru MX 2004 imaju mogućnost upravljanja sajtom Contribute, koordinacije sa korisnicima tog programa, čime se postiže optimalna efikasnost kod ažuriranja. Sada su podržane i sigurne FTP veze (SFTP), preko kojih se pristupa udaljenim sajtovima i serverima za testiranje. Život bez sajtova je lakši, posebno u onim trenucima kada samo želite da brzo završite posao, a da pri tome ne morate da definišete sajt. Izaberite Computer, Desktop ili neku od stavki koje nisu vezane za sajtove i počnite da radite. Više se neće pojavljivati pitanje Dreamweavera da li treba da slike prebaci u najbližu lokalnu fasciklu, i neće biti insistiranja na apsolutnim putanjama do datoteka, ako se ne nalazite u okviru te fascikle. Kod uploadovanja (prebacivanja datoteka na server) se veze sa serverom mogu definisati nezavisno od definicije sajta. 17 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Poboljšanja vezana za rad sa dinamičkim podacima I u oblasti rada sa dinamičkim podacima je došlo do poboljšanja. Poboljšano je testiranje performansi servera. Pojačana je podrška za ColdFusion i naravno, Dreamweaver MX 2004 podržava sve nove osobine ColdFusiona MX. Dinamički objekti su sada logičnije postavljeni, tako da ih je lakše pronaći na paleti Insert. Ako ste navikli da ih tražite u panou Server Behaviors, oni su i dalje tamo. 18 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 2. Radni prostor Dreamweavera Izbor radnog prostora Dreamweaver koristi integrisani radni prostor, kod kojeg je većina prozora i panoa pričvšćena i tačno postavljena u velikom prozoru koji pripada aplikaciji. Prvi put kada pokrenete program možete da birate izmedu dva radna prostora. To su Designer i HomeSite/Coder-Style. Radni prostor Designer je optimizovan, naravno, za dizajnere. Radni prostor HomeSite/Coder-Style je optimizovan za one koji su navikli da koriste tekstualne editore, posebno HomeSite firme Macromedia. Koje su razlike? Poređenje radnih prostora Standardni interfejs Dreamweavera (Designer Style) ima sve panoe vezane, osim Property Inspectora, palete Insert i prozora Results. Svi se oni nalaze sa donje strane prozora aplikacije. Podrazumevano, Property Inspector je proširen, a prozor Document prikazuje pogled Design. Radni prostor HomeSite/Code-Style ima sve panoe vezane, osim Property Inspectora, palete Insert i prozor Results, ali se oni nalaze sa leve strane prozora aplikaciju Podrazumevano je da je Property Inspector smanjen, a prozor Document se otvara sa pogledom Code. 19 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Promena radnih prostora Ako ste izabrali neki prostor i počeli da radite, u bilo kom trenutku se možete predomisliti. Otvorite okvir za dijalog Preferences (Edit > Preferences), idite u kategoriju General i kliknite dugme Change Workspace. Možete da birate neki od stilova Designer i HomeSite/Code-Style. Da bi promene imale efekta, morate ponovo pokrenuti program. 20 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Strana Start Od verzije Dreamweaver MX 2004 imate mogućnost da program otvarate sa prijateljski nastrojenom početnom stranom Start. Pored linkova koji vode u tutorijal za Dreamweaver, možete brzo pristupiti i sledećim stavkama: • Otvaranje dokumenata sa kojima ste poslednji put radili (alternativa opciji File > Open iz menija). • Kreiranje novih dokumenata različitih tipova (alternativa za File > New i okvir za dijalog New Document, tako da ne morate da se borite sa okvirom za dijalog New Document). Ako izaberete opciju More Documents, otvoriće se okvir za dijalog New Document. • Kreiranje novog sajta (alternativa za Site > Manage Sites, pa dugme New). • Kreiranje novih dokumenata na bazi različitih primera (isti primeri su dostupni i u okviru za dijalog New Document). • Provera novih dodataka u Dreamweaver Exchangeu (alternativa za Help > Dreamweaver Exchange). Ako izaberete dugme Dreamweaver Tour, otići ćete na web sajt Macromedie. Ako izaberete dugme Dreamweaver Tutorial, otvoriće se pomoć iz programa. Ovo ste mogli da izaberete i iz menija Help. Ovde nema ničeg što ne možete da uradite i na neki drugi način, ali je dobro što su poslovi koje obavljate na početku rada grupisani na jednom mestu, dostupni iz jednog centralnog interfejsa. Ako ne želite da se bavite početnom stranom, izaberite opciju Dont Show Again. Ako želite da uključite ili isključite prikazivanje strane Start, otvorite okvir za dijalog Preferences > General (Edit > Preferences) i potvrdite ili nemojte porvrditi opciju Show Start Page. Ako je uključeno prikazivanje strane Start, ona će se prikazati svaki put kada pokrenete program, i kad god nije otvoren nijedan dokument. 21 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad sa panoima Činjenica je da ovde ima mnogo panoa. S vremena na vreme svaki od njih postaje koristan, ali su tu i oni koji tog trenutka nisu potrebni, tako da je onaj potreban teško pronaći. Mnogi poslovi u Dreamweaveru zahtevaju panoe. Panoi i grupe panoa Bilo koji pano preko menija Windows može da se otvori ili proširi. Tu su prikazane i liste prečica za otvaranje i zatvaranje panoa. Većina panoa Dreamweavera se nalaze u grupama, pri čemu se pojedinačnom panou pristupa preko kartice u prozoru grupe. (Tehnički govoreći, svi panoi se nalaze u grupama, ali neki, kao što je CSS pano, se nalaze sami u grupi.) Grupe su logički organizovane, tako da intuitivno možete da zaključite koji se pano gde nalazi. Zaglavlja panoa i grupa imaju i meni sa opcijama, preko kojeg možete da obavljate poslove vezane za panoe. Na slici su prikazane tipične grupe panoa sa istaknutim osobinama. 22 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da proširite ili sažmete grupu panoa, kliknite strelicu za sažimanje ili proširivanje, koja se nalazi u zaglavlju panoa. Ako je potrebno, prozor panoa se širi da bi prihvatio proširene panoe. Ako želite da proširite grupu panoa i promenite joj veličinu, možete da odete u meni sa opcijama i izaberete opciju Maximize Panel Group. Ako želite da podesite relativnu visinu dve grupe panoa u okviru prozora, postavite kursor između njih. Kursor će dobiti oblik dvosmerne strelice. Tada uhvatite granicu i promenite veličinu. Ako želite da zatvorite grupu panoa, otvorite meni sa opcijama i izaberite Close Panel Group. Grupu panoa možete ponovo da otvorite ako neki od panoa izaberete iz menija Window. Prikazivanje i sakrivanje Ponekad proširivanje ili sažimanje nije dovoljno. Možda želite da prikažete samo one stvari koje su preko potrebne u dokumentu. Ako želite da podesite prostor koji zauzima pričvršćeni pano, prevucite vertikalnu liniju koja odvaja taj pano od ostalog dela radnog prostora. Ako želite da potpuno isključite ili uključite pano, kliknite trougao na vertikalnoj liniji. 23 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da sve panoe uključite ili isključite izaberite Window > Hide Panels ili Window > Show Panels, ili samo pritisnite F4 da biste ih uključili ili isključili. Pričvršćivanje i odvezivanje panoa Ponekad nećete želeti da radite sa vezanim panoima. Možda ćete zaključiti da je neki pano (kao što je pano Reference) teško postaviti na pravo mesto. Možda imate dva monitora i želite da se svi panoi nalaze na monitoru 1, a da se na monitoru 2 prikazuje samo prozor Document. Možda ste samo navikli da imate slobodne panoe. Niste obavezni da ih vezujete. Ivica ručice koja se nalazi sa leve strane zaglavlja panoa omogućava da vezujete i odvezuejte grupe. Ako želite da otkačite pano, uhvatite ručicu i prevucite celu grupu izvan prozora panoa. Ako želite da promenite prozor panoa i vratite ga u stanje koje nije vezano, prevucite donji desni ugao. Ako želite da ponovo vežete panoe, uhvatite ručicu i prevucite grupu do drugih vezanih panoa, sve dok se ne pojavi tanka crna linija, koja ukazuje na mesto postavljanja. Grupu možete da vežete na potpuno drugom mestu u odnosu na ono na kome se prethodno nalazila. Korisnici mogu horizontalne panoe (kao što je Results) da vežu sa strane ili da vertikalno postavljene panoe (kao što je grupa Code) postave na dno ili vrh prozora Document. 24 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Grupisanje i pregrupisavanje Pretpostavlja se da su grupe panoa u Dreamweaveru logički grupisane i intuitivne, ali šta ako to nije slučaj? Šta ako zaključite da koristite samo tri ili četiri panoa, i ne želite da stalno otvarate ili zatvarate te grupe? Možete da grupišete, rastavljate grupe ili pravite svoje grupe panoa i da tako napravite onaj raspored koji Vam odgovara. Sve ovo se radi preko menija sa opcijama za panoe. Ako želite da određeni pano prebacite u drugu grupu, otvorite meni sa opcijama za originalan pano, izaberite Group Panel With > (grupa koju želite). Ako želite da pano postavite u poseban prozor, idite u meni sa opcijama i izaberite Group Panel. Ako želite da napravite svoju grupu omiljenih panoa, treba da iskombinujete nekoliko prethodno pomenutih koraka: 1. Pronađite prvi pano koji želite da ubacite u svoju grupu i odvojite ga od grupe. Ovo ćete uraditi preko menija sa opcijama, iz koga ćete izabrati opciju Group Panel With > New Group. 2. U prozoru panoa koji ste upravo napravili, idite u meni sa opcijama i izaberite Rename Panel Group. Nazovite grupu kako želite, na primer, Omiljeni panoi, Moji panoi i sl. 3. Sada je vreme da pronađete ostale panoe koje želite u svojoj grupi. Za svaki od njih morate da odete u meni sa opcijama i da izaberete opciju Group Panel With > (ime grupe). Obratite pažnju na to da se Tag Inspector ne može prebacivati u grupe. Sada slobodno možete da zatvorite ili skupite sve druge grupe panoa, jer znate da su Vaši omiljeni panoi uvek na dohvat ruke. Paleta Insert i Property Inspector Paleta Insert i Property Inspector su jedinstveni panoi sa svojim skupom pravila. U integrisanom radnom prostoru Windowsa, oni su vezani na vrhu i dnu prozora Document. Oni se mogu otkačiti, ali se ne mogu grupisati sa drugim panoima. Paleta Insert se može prikazivati u jednom od dva režima. To su režim meni (podrazumevani) ili režim sa karticama (stil Dreamweaver MX). Prelaz iz jednog u drugi režim se može uraditi ako se izabere Show as Tabs iz padajuće liste sa opcijama za tu grupu. Ovo važi ako se trenutno nalazite u režimu sa menijima, a ako ste u režimu sa karticama, onda se iz menija sa opcijama bira opcija Show as Menus. Na slici su prikazana ova dva stila. U radnom prostoru Windowsa, Property Inspector se može smanjiti kao i bilo koji drugi pano. I u radnom prostoru Macintosh i Windows verzije, Property Inspector se može smanjiti za pola, tako da se prikazuje samo njegova gornja polovina. Ovo se radi tako što se izabere ikona trouglića u gornjem levom uglu. 25 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad sa prozorom Document Bez obzira na stil koji koristite u radu, verovatno ćete najviše vremena provoditi u radu sa prozorom Document. U pitanju je intuitivni interfejs, sa mnoštvom resursa, koji se kao i mnoge druge stvari u Dreamweaveru može podešavati u skladu sa Vašim željama. Vezivanje i odvezivanje U integrisanom radnom prostoru, prozor Document može biti pričvršćen ili ne. Ovaj prozor može da zauzme onaj deo prostora koji mu dodelite u centru, ili ako imate dovoljno veliki monitor (ili dva monitora), može da se postavi izvan prozora aplikacije. Vezani prozor Document automatski ispunjava centralni deo radnog prostora i prikazuje karticu u gornjem delu. Ne prikazuje se zaglavlje. Ovo omogućava da lako prelazite iz jednog u drugi otvoreni prozor dokumenta. Ako želite da vežete ili otkačite prozor Document, možete da upotrebite polje Maximize/Normalize u gornjem desnom uglu. 26 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pregled dokumenata Ako želite da radite sa dokumentima, generalno morate da ih vidite. Prozor Document omogućava da ih vidite na različite načine. Rad sa prikazima Code i Design Osnovni izbor koji činite prilikom rada sa dokumentima je da li želite da radite u okruženju za pisanje koda ili u grafičkom okruženju. Prikaz Design (View > Design) omogućava da stranu vidite približno onako kako bi ona izgledala u pretraživaču. lako ovo nije prikaz tipa WYSWYG (ono što vidiš je ono što ćeš dobiti), ipak je omogućeno da sa svim elementima na strani radite u grafičkom okruženju. Elementi strane koji nisu grafički, kao što su komentari, zaglavlje i skriptovi, mogu da se vide kao ikonice. Ovo se postiže ako se izabere meni View i podmeni Visual Aids > Iconic Form. Ostala vizuelna pomoć koju možete dobiti iz ovog menija je: • Rulers (View > Rulers) (lenjiri) - Moguće je podesiti prikazivanje lenjira, koji se postavljaju duž leve i gornje ivice. Prikazivanje i sklanjanje lenjira se radi preko komande Rulers iz menija View. Ta komanda služi i za promenu jedinica (iako su nabolji pikseli), kao i promenu početka odakle se vrši merenje. • Grid (View > Grid) (mreža) - Mreža koja može da se podešava. Ona može da se prikaže iza sadržaja dokumenta, čime je olakšano ravnanje elemenata na strani. Podmeni Grid iz menija View omogućava prikazivanje mreže, uključivanje skokovitog kretanja kursora samo između tačaka mreže, kao i promenu veličine i izgleda mreže. • Tracing Image (View > Tracing Image) (praćenje slike) - Ispod sadržaja u prozoru Document se prikazuje GIF, JPG ili PNG datoteka, koja služi prilikom raspoređivanja elemenata. Komande iz podmenija Tracing, menija View služe za učitavanje slike i njeno relativno postavljanje na strani. Preko okvira za dijalog Page Properties (Modify > Page Properties) možete podešavati prozirnost slike, tako da Vam ne smeta prilikom rada. • Table Borders, layer borders, frame borders (View > Visual Aids) (granice tabela, nivoa i frejmova) Ivice tabela, nivoa i frejmova se prikazuju kao tanke ili tačkaste linije. Ovo je u cilju pomoći kod uređivanja. • Table widths (View > Visual Aids > Table Widths) (širina tabela) - Duž svake tabele u prikazu Design se prikazuje linija sa informacijama koje pokazuju kolika je širina kolona i tabela. • Table mode (View > Table Mode podmeni) - Postoji nekoliko načina za prikazivanje tabela. Oni se koriste samo kod uređivanja . • Image maps (View > Visual Aids > Image maps) - Vruće tačke slika su prikazane kao delimično providni oblici. Ovo se koristi samo u cilju uređivanja slika • Invisible elements (View > Visual Aids > Invisible Elements) (nevidljivi elementi) - Bilo koji deo koda koji se inače ne bi video u pogledu Design se prikazuje kao ikona. Preko kategorije Preferences/Invisible Elements možete da odredite koja vrsta nevidljivog koda se prikazuje kao ikona. Code view (View > Code) prikazuje samo čist HTML kod za tu stranu. Ovaj prikaz u suštini predstavlja ugrađeni editor teksta. Neke funkcije koje su ranije postojale, kao što su dodavanje ponašanja i crtanje nivoa više se ne mogu koristiti iz ovog prikaza. Dokumenti koji nisu HTML dokumenti, kao što su CSS datoteke i skriptovi, mogu se videti samo u ovom prikazu. Code and Design View (View > Code and Design) deli prozor Document na dva dela po horizontali, tako da u isto vreme možete da vidite i prikaz Design i prikaz Code. Mnogi ljudi smatraju da je ovaj pogled najkorisniji, pošto im omogućava da prilikom projektovanja strane tačno vide gde se nalaze u kodu. Ovaj prikaz je koristan kada radite sa složenim poslovima vezanim za kodiranje, kao što je izbor određene vrste ili kolone u ugnježđenoj tabeli. Podrazumevano se prikaz Code vidi u gornjem delu prozora. Ako želite, možete ga prebaciti u donji deo i to preko komande View > Design View on Top. 27 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prikazi Code i Design su više od običnih pogleda. Oni predstavljaju različite načine rada. U zavisnosti od prikaza, u panoima se prikazuju različite opcije, druge komande su izbačene. Kada su vidljiva oba prikaza, fokus je uvek u jednom od njih, odnosno Dreamweaver smatra da je to aktivan prozor. Ako želite da određeni pogled dobije fokus, kliknite u tu polovinu prozora. Možete i da izaberete View > Switch View i da tako prelazite iz pogleda u pogled. Pogled sa živim podacima Ako Dreamweaver koristite za kreiranje sajtova koji su vezani za podatke, onda se u prikazu Design prikazuju strane sa označenim pozicijama mesta na kojima će server eventualno da ubacuje podatke iz baze podataka. Na primer, ako u Dreamweaveru gledate stranu za onlajn katalog, onda će Dreamweaver označiti mesta za imena stavki, njihove cene i opise. Pogled Live Data omogućava da Dreamweaver zameni ove označene lokacije stvarnim informacijama iz baze podataka, tako da možete bolje da vidite kako će Vaša strana stvarno izgledati. Statusna linija Na dnu prozora Document se nalazi statusna linija. Tu se prikazuju informacije o samoj strani. Odatle možete i da samo jednim klikom pristupite pogledima Design i Code. 28 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Veličina prozora Inidikator veličine prozora ukazuje kolika je trenutna širina i visina "živog" dela prozora Document. (Živ deo je deo prozora u kome se trenutno nalazi neki sadržaj, što je suprotno paletama i statusnim linijama, koji se ponekad nazivaju "hromiranim" elementima). Ovo mogu biti važne informacije, ako pokušavate da napravite stranu koja će se uklopiti u najčešće veličine prozora pretraživača. Indikator veličine prozora prikazuje veličinu samo dela Design iz prozora Document. Ako je u prozoru Document prikazan pogled Code, onda se ovaj indikator ne prikazuje. Ako su u prozoru Document prikazana oba pogleda, onda se indikator odnosi na deo Design. Ako radite u integrisanom radnom prostoru i ako ste prozor Document maksimizovali, onda indikator veličine prozora pokazuje vidiljivi deo prozora (na primer, od donje ivice palete Insert, do dna prozora Document, kao i od leve ivice prozora aplikacije, do vertikalne linije gde počinju panoi). Indikator veličine prozora sadrži i padajući meni koji može brzo da promeni veličinu prozora Document. Mogu se izabrati neke od unapred podešenih standardnih veličina. Te standradne veličine odgovaraju standardnim veličinama prozora pretraživača. Ovo možete da koristite da biste brzo proverili kako se Vaša strana uklapa u neke opšte veličine prozora. Niste ograničeni na upotrebu samo onih veličina koje je dao Dreamweaver. Ako, na primer, pravite dizajn za intranet i znate da će svi pretraživači biti podešeni na rezoluciju 600 x 300, te dimenzije možete da dodate u padajući meni. Evo kako se to radi: 1. Iz padajućeg menija indikatora veličine prozora izaberite opciju Edit Size. Otvoriće se kategorija Status Bar iz okvira za dijalog Dreamweaver Preferences. 2. U okviru za dijalog Preferences promenite veličinu prozora. • Ako želite da promenite neku od postojećih dimenzija, izaberite je i unesite novi broj. • Ako želite da zadate novu veličinu, kliknite u prostor ispod postojećih stavki, da biste ga aktivirali i unesite novu dimenziju. Nova stavka može da ima širinu, visinu ili obe vrednosti. 3. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog Preferences. Od sada će se ta stavka prikazivati u padajućem meniju indikatora za veličinu prozora. 29 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Indikator koji pokazuje veličinu dokumenta i vreme prebacivanja Ovaj indikator prikazuje dve informacije koje su medusobno povezane. To su veličina tekućeg dokumenta i svih ubačenih sadržaja, kao i procenjeno vreme koje je potrebno da se taj materijal prebaci. Osim ako ne radite sa nekim posebno strpljivim posetiocima, ovo je vrlo bitna informacija, o kojoj treba voditi računa prilikom kreiranja web strana. Indikator veličine datoteke (sa leve strane) izračunava veličinu tekuće HTML datoteke, zajedno sa veličinom slika, Flash animacija ili nekih drugih datoteka koje treba preuzeti pre nego što se strana prikaže u pretraživaču. Ova vrednost se zaokružuje na najbliži kilobajt. Procenjeno vreme prebacivanja se odnosi na vreme prebacivanja preko zadate brzine mreže, zaokruženo na sekundu. Na primer, ako je Vaša strana HTML datoteka veličine 1 K, na kojoj je slika od 27 K, sa brzinom veze od 28.8 Kbps, prebacivanje te strane će trajati oko 1 sekunde. Za ovaj slučaj će se prikazati vrednost 28Kb sec. Podrazumevana brzina koja se koristi za izračunavanje vremena prebacivanja je 28.8 Kbps (kilobita po sekundi). Ovu brzinu možete da promenite u skladu sa onom brzinom koju predviđate u ciljnom okruženju. Na primer, ako pravite onlajn filmski festival, za korisnike koji imaju velike brzine prenosa, verovatno ćete brzinu prenosa podesiti na nekoliko stotina kilobita po sekundi. Ako želite da podesite brzinu veze treba da uradite sledeće: 1. Kliknite indikator veličine prozora i iz padajućeg menija izaberite Edit Sizes. Otvoriće se okvir za dajalog Preferences/Status Bar. 2. U polju Connection Speed unesite vrednost koju želite. Ova vrednost treba da predstavlja srednju vrednost brzine veze. 3. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Na statusnoj liniji će se sada prikazati vreme prebacivanja, koje se izračunava na osnovu veličine dokumenta i nove brzine prenosa. Tag Selector Tag Selector omogućava da tokom rada u pogledu Design stalno na oku imate i kod. Ova osobina koristi činjenicu da se HTML strane prave kao niz međusobno ugnježđenih oznaka. Tag Selector sve vreme ukazuje gde je tačka umetanja ili šta je izabrano u odnosu na hijerarhiju oznaka koje čine stranu. Pošto se u pogledu Design prikazuje samo vidljivi deo oznake body, to je oznaka body uvek krajnja leva. Ako je tačka umetanja u okviru oznake hl, Tag Selector prikazuje strukturu: <body> <h1> 30 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako je tačka umetanja u ćeliji tabele, u vrsti tabele u samoj tabeli, Tag Selector prikazuje: <body> <table> <tr> <td> Ako je izabrana cela oznaka i njen sadržaj, Tag Selector tu oznaku prikazuje masnim slovima. Najbolje je to što Tag Selector možete da koristite za selektovanje oznaka. Kliknite neku oznaku koja je tu prikazana i u pogledu Design će ta oznaka i njen sadržaj biti selektovani. Ako desnim tasterom miša kliknete Tag Selector, otvoriće se kontekstualni meni, u kome se nalaze stavke vezane za rad sa oznakama, kao što su izbacivanje oznake, dok njen sadržaj ostaje (Remove Tag), primena CSS stila na oznaku (Set Class) ili primena ID atributa (Set ID). Palete U Dreamweaveru postoje različite palete koje se mogu prikazati na vrhu prozora Document. Njih možete koristiti kao pomoć u radu. Svim paletama se može pristupiti preko podmenija View > Toolbars ili ako desnim tasterom miša kliknete prazan deo palete prozora Document. Paleta Standard U skladu sa trendom koji postoji kod većine programa, na paleti Standard se prikazuju komande iz menija File i Edit koje se najviše koriste. Paleta Standard se može uključiti i isključiti preko opcije View > Toolbars > Standard. Paleta Standard može da se otkači i da se postavi u centar prozora Document. Ponovo ćete je pričvrstiti ako dva puta brzo kliknete njeno zaglavlje. Paleta Document Na paleti Document se prikazuju standardne ikone sa komandama koje se često koriste dok ste u prozoru Document. Samo jednim klikom miša možete da promenite poglede na dokument, da pogledate kako to izgleda u pretraživaču, da proverite da li je sve kako treba. Paleta Document može da se isključi i uključi ako izaberete View > Toolbars > Document. Pomoć Ako imate teškoća u radu sa svojim stranama, ili sa samim Dreamweaverom, pomoć možete dobiti na različitim mestima. U okviru pomoći koja postoji u Dreamweaveru, ili preko panoa Rreference, i na kraju, u centru za podršku na sajtu firme Macromedia ćete verovatno naći odgovor na pitanje koje Vas zanima. U ovom odeljku ćemo objasniti opcije za pružanje pomoći. General Assistance: Pano Reference Da li je oko Vas u toku rada naređana gomila literature? Ako je tako, onda će Vam pano Reference postati najbolji prijatelj. U ovom panou se nalazi kompletan tekst sa nekoliko referentnih vodiča sa Weba. 31 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pano Reference možete koristiti za pretraživanje informacija na svoj način, ili ga možete koristiti zajedno sa prozorom Document, da biste dobili pomoć vezanu za neki sadržaj. Ako želite da dobijete pomoć vezanu za neku oznaku ili skript na kojima trenutno radite, treba da uradite sledeće: 1. Kliknite unutar elementa za koji želite da dobijete referencu. 2. Izaberite Windows > Reference. 3. Otvoriće se pano Reference i u njemu opis i primer sintakse za izabranu stavku. Pomoć Dreamweavera Dreamweaver ima svoju pomoć koja objašnjava osnovne načine upotrebe svakog elementa programa. Ovu pomoć treba koristiti za sva pitanja koja se odnose na osobine Dreamweavera. Pomoći Dreamweavera ćete pristupiti ako izaberete Help > Using Dreamweaver. Otvoriće se aplikacija za pomoć koja postoji na Vašem operativnom sistemu i u njoj će se prikazati pomoć vezana za Dreamweaver. 32 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 33 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 3. Kreiranje i rad sa dokumentima Osnovni pojmovi vezani za kreiranje dokumenata Dreamweaver nije namenjen samo za kreiranje HTML strana, iako je to verovatno vrsta strana koju će većina korisnika najčešće praviti. Sa verzijom Dreamweaver MX 2004 možete da pravite bilo koju vrstu dokumenta koji je vezan za Web. Svi dokumenti mogu da se kreiraju, menjaju, pa čak i grafički prikazuju u prikazu Design. To se ne odnosi samo na HTML, već i na dokumente koji rade sa živim podacima, kao što su ASP, CFM, PHP i JSP, zatim dokumenti za podršku, kao što su CSS i JS dokumenti, kao i različiti drugi dokumenti, kao što su XML, XHTML i WML. Usled ovih novih mogućnosti, kreiranje dokumenta u Dreamweaveru je i dalje osnovna stvar, ali više ne tako jednostavna. Okvir za dijalog New Document omogućava da dokumente kreirate od početka, kao i da ih uvozite iz nekih drugih izvora. Okvir za dijalog New Document Kada izaberete opciju File > New, ili pritisnete Ctrl+N, otvoriće se okvir za dijalog New Document. U ovom okviru za dijalog postoji mnoštvo opcija, preko kojih možete da kreirate dokumenat bilo koje vrste. Tipovi dokumenata koji se kreiraju Veći deo okvira za dijalog zauzimaju opcije za kreiranje različitih tipova dokumenata. U krajnjoj levoj koloni su prikazane kategorije sa osnovnim tipovima dokumenata. To su: Basic, Dynamic, Template, itd. Većinom ovih tipova se nećemo baviti u ovom poglavlju. Ako želite da kreirate standardnu HTML stranu, izaberite opciju Basic > HTML. Iz krajnje leve kolone izaberite opciju Basic, a iz desne kolone opciju HTML. Pošto u okviru za dijalog postoji tako mnogo opcija, sa kojima je teško snaći se, postoji i deo sa opisom svake opcije, koji se nalazi u donjem desnom uglu. Iz druge kolone izaberite neki tip datoteke i pročitajte 34 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 kratak opis koji se odnosi na to što ste izabrali. Za neke opcije će se u gornjem desnom uglu prikazati i slika. Treba da znate da iako se Dreamweaver može koristiti za kreiranje skoro svih tipova dokumenata, ipak nisu svi ti tipovi prikazani u prozoru Design. Ovde su prikazani samo oni tipovi datoteka koji se koriste za kreiranje vidljivih web strana, odnosno strana koje se mogu prikazati u prikazu Design. Drugi tipovi datoteka, kao što su JS, CSS i TXT moraju da se prikazuju i uređuju u prozoru Code. Pripremljene strane Dreamweaver dolazi sa nizom unapred pripremljenih rasporeda, koje možete dalje da prilagođavate svojim potrebama. Ovi rasporedi se nalaze u kategorijama Page Designs i Page Designs (Accessible). Dreamweaver takođe ima i niz unapred definisanih CSS dokumenata, koji su spremni da se primene u Vašim dokumentima, tako da možete brzo da formatirate tekst i odgovarajući raspored. Ako želite da kreirate web stranu na osnovu neke od ovih pripremljenih HTML strana, izaberite odgovarajuću stavku iz neke od kategorija Page Design i kliknite OK. Dreamweaver će napraviti novi dokument i u njemu postaviti mesta za ubacivanje sadržaja. Primeniće i izabrano formatiranje. Upamtite ovaj dokument kao deo svog web sajta i njegov sadržaj prilagodite svojim potrebama. Na taj način možete brzo da napravite novu stranu. Ako na osnovu stavki koje birate iz ovog okvira za dijalog napravite CSS stranu, nećete dobiti stranu koju možete da prikažete u svom pretraživaču. CSS datoteke služe za podršku HTML stranama i drugim dokumentima. Ako želite da na osnovu neke od unapred pripremljenih strana sa CSS-om kreirate novu, izaberite odgovarajuću stavku iz kategorije CSS i kliknite OK. Dreamweaver će kreirati CSS datoteku (neće je prikazati u prikazu Design), koja sadrži listu sa stilovima za formatiranje HTML strana. Upamtite ovaj dokument na svom web sajtu, sa ekstenzijom .css. Da biste tu stranu upotrebil na HTML stranama, morate neku od tih strana povezati sa CSS datotekom. Saglasnost sa XHTML-om Kad god pravite datoteku koja se u pretraživaču može prikazati, u okviru za dijalog imate opciju koja Vas pita da li želite da svoj novi dokument učinite saglasnim (kompatibilnim) sa XHTML-om. XHTML je najnovija varijanta HTML-a, koja će eventualno zameniti HTML. XHTML se zasniva na XML-u. Sintaktičke razlike u odnosu na HTML su veoma male, ali je pridržavanje pravila mnogo čvršće. Pretraživači bi u budućnosti trebalo da za kreiranje ispravnih dokumenata zahtevaju XHTML. Ako Dreamweaveru kažete da novi dokument treba da bude kompatibilan sa XHTML-om, dobićete malo drugačiju sintaksu u odnosu na uobičajenu. Novo podešavanje podrazumevanih osobina dokumenta (preferences) Kada izaberete File > New, Dreamweaver podrazumevano otvara okvir za dijalog New Document, u kome je podrazumevani tip dokumenta HTML, a kompatibilnost sa XHTML-om je isključena. Ako želite da promenite ove i druge podrazumevane vrednosti, kliknite dugme Preferences, koje se nalazi na dnu okvira za dijalog New Document. Otvoriće se okvir za dijalog Preferences > New Document. Ovo je standardan okvir za dijalog Preferences koji se koristi svuda u Dreamweaveru. Istom okviru za dijalog možete da pristupite i ako izaberete Edit > Preferences i sa leve strane izaberete kategoriju New Document. 35 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad sa dokumentima Kako da u Dreamweaveru od svojih dokumenata izvučete najviše? Morate biti sigurni da su ispravni. Morate biti sigurni da ispravno rade u svim pretraživačima, koje mislite da će Vaši posetioci koristiti. Na kraju morate biti sigurni da su strane dostupne. Provera ispravnosti strane Provera ispravnosti je važan koncept u svetu Web razvoja. U pitanju je proces provere koda za HTML, XML i XHTML dokument, tako da budete sigurni da je ispravno kodiran (sa ispravnom sintaksom i bez oznaka i atributa koji nisu standardni). Ovu proveru radite pre nego što stranu prikažete u pretraživaču. Jedan od razloga što su današnji pretraživači tako glomazni je da su programirani za rad sa svim vrstama neispravnog koda, pa čak pokušavaju da pogode kako bi strana trebalo da izgleda, na osnovu sintakse koja nije ispravna. U idealnom svetu, svaka strana bi trebalo da se proveri, pre nego što pretraživač pokuša da je prikaže. Strane koje su neispravne ne bi trebalo da se prikazuju. Pretraživači bi bili manji pošto bi prikazivali samo ispravne strane. Bez obzira da li ste početnik ili iskusan profesionalac u web dizajnu, proveru ispravnosti za sada možete zanemariti. Nijedan od pretraživača ne radi ovu proveru, za sada. Ali verovatno u budućnosti hoće. Provera ispravnosti HTML koda Dreamweaver nudi proveru svih HTML dokumenata. Ako želite da proverite ispravnost dokumenta, otvorite dokument koji želite da proverite i izaberite File > Check Page > Validate Markup. Nakon nekoliko trenutaka će se otvoriti prozor Results. Prikazaće se kartica Validation i u njoj izveštaj o dokumentu. Možete i da proverite tekući dokument ili tekući sajt. Ovo ćete uraditi ako otvorite prozor Results (Window Results), pritisnete zeleno dugme za validaciju u gornjem levom uglu i izaberete opciju Validate Document ili Validate Entire. Ako ste izabrali pano Site, onda u meniju Validate imate i opciju Validate Selected Files in Site. 36 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Definisanje načina provere Provera ispravnosti se odnosi na proveru dokumenta u odnosu na standarde. Postoje različiti standardi, od HTML-a 2.0 do XHTML. Da biste videli koji standard Dreamweaver koristi za proveru, i da ga promenite ako je potrebno, izaberite Edit > Preferences > Validator. Možete i da u prozoru Validator kliknete dugme Validate i izaberete opciju Settings. Obe komande otvaraju okvir za dijalog Preferences Validator. Provera XML dokumenata Ako radite sa nekom vrstom XML dokumenta (uključujući i XHTML), onda je provera vrlo bitna. Pretraživači (i drugi interpreteri) generalno neće obrađivati neispravne dokumente. Ako želite da proverite XML dokument, izaberite File > Check Page > Validate as XML. Ovu komandu ćete koristiti i za XHTML dokumente, jer su i oni XML dokumenti. Provera rada u određenom pretraživaču U redu, Vaše strane su ispravne, ali zašto u pretraživaču Vaših korisnika ne rade kako treba? Pretraživači imaju svoja podešavanja i ne slažu se uvek sa standardom. Većina web dizajnera na kraju završi tako što 37 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 upamti ta podešavanja i radi sa njima. Ipak, ne možemo svi da pamtimo sve. Dreamweaver ima bazu podataka sa informacijama o tome koji pretraživač šta koristi. Automatska provera Provera prikazivanja u ciljnom pretraživaču je tako bitna da Dreamweaver automatski proverava svaku stranu čim je otvori. Na paleti Document se istovremeno prikazuje ikona Browser Target Check. Ako dokument uspešno prođe sve provere, prikazaće se ikona OK, a ako to nije slučaj, prikazaće se ikona za alarm. Ako želite da pogledate listu problema, kliknite ikonu Browser Target Check i izaberite opciju Show All Errors. Možete i da otvorite prozor Results (Window > Results) i da odete na karticu Target Browser Check. Sve stavke pored kojih stoji žuta ikona su upozorenje, odnosno one nisu podržane u nekom od ciljnih pretraživača, ali na strani neće dovesti do problema. Sve stavke pored koji se nalazi crveni znak stop su greške, tako da se u pretraživaču može dobiti neprijatno iznenađenje. Manuelna provera Pored automatske provere, proveru dokumenta ili sajta možete da vršite i u bilo kom drugom trenutku. Ako želite da proverite ciljni dokument, kliknite ikonu Target Browser Check sa palete Document i izaberite opciju Check Browser Support. Ako želite da proverite više dokumenata ili ceo sajt, otvorite prozor Results (Window > Results), pređite na karticu Target Browser Check i kliknite zeleno dugme. Pomoću padajućeg menija iz prozora Results možete da prikažete alarme vezane za neki dokument ili ceo sajt. Definisanje pretraživača za koje se vrši provera Provera prikazivanja strane u pretraživačima ima značaja samo ako definišete koji su to pretraživači koje želite da proveravate. Ovo ćete uraditi ako na paleti kliknete Target Browser Check i izaberete opciju Settings. U okviru za dijalog koji se otvara, izaberite pretraživače i verzije koje želite da proveravate. Nakon toga kliknite OK, da biste zatvorili ovaj okvir za dijalog. Dostupnost Vaših strana Vaše strane izgledaju sjajno u većini pretraživača, prošle su testove provere koda. Ali, da li su strane dostupne? Strane koje su dostupne su one koje mogu da koriste i ljudi sa vizuelnim, motornim, slušnim ili nekim drugim nedostacima. Tu spadaju ljudi koji preko čitača ekrana ili nekog drugog specijalnog softvera i hardvera pristupaju Internetu. Da bi World Wide Web bio u potpunosti univerzalan, strane treba da budu dostupne i njima. Standardni vezani za dostupnost Postoje različiti standardi koji određuju da li su web strane dostupne. Najvažniji od njih su: • Section 508 U pitanju je federalni dekret koji svi sajtovi koje koriste vladini službenici, kao i sajtovi koji distribuiraju informacije vezane za vladu moraju poštovati. Premda se ovaj standard primenjuje samo na sajtove vezane za federalnu državu, mnoge vlade nižih nivoa su ih prihvatile i za sajtove pod njihovom nadležnosti. Mnoge korporacije su takođe prihvatile ove standarde. • W3C Web Accessibilitv Initiative (WAI) WWW Konzorcijum (W3C) je napravio detaljan skup pravila koja su vezana za dostupnost. Mnoga od njih odgovaraju pravilima iz standarda Section 508, ali ovaj standard je generalno širi od standarda Section 508. Pomoću panoa Reference možete da naučite više o standardima vezanim za dostupnost. Otvorite ovaj pano i iz padajućeg menija Book izaberite opciju UsableNew Accessibility Reference. Sada na raspolaganju imate sve vrste informacija o različitim standardima i načinu na koji se oni primenjuju. Opcije Dreamweavera vezane za dostupnost 38 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dreamweaver MX 2004 omogućava da brzo pristupite svakom od atributa vezanim za dostupnost strane. Ako želite da uključite atribute dostupnosti, izaberite Edit > Preferences i u okviru za dijalog izaberite kategoriju Accessibility. Opcije koje su date u listi predstavljaju različite elemente strana koje u HTML-u imaju specijalne atribute vezane za dostupnost. Kada ovde izaberete neku stavku, svaki naredni put kada kliknete objekat, da biste ga ubacili na stranu, u njegovom okviru za dijalog se prikazuju i njegovi atributi vezani za dostupnost. (O opcijama dostupnosti za pojedinačne elemente strana možete više saznati u posebnim odeljcima, onda kada budemo govorili o tim elementima). Provera dostupnosti Kao što možete da proverite ispravnost koda i podršku pretraživača, možete i da proverite dostupnost svojih strana i sajtova. U Dreamweaveru postoje različiti alati, koji su upravo tome namenjeni. Ako želite da dobijete izveštaj u vezi dostupnosti tekućeg sajta, treba da uradite sledeće: 1. Izaberite Site > Reports. 2. Kada se otvori okvir za dijalog Site Reports, izaberite Accessibilty. Možete izabrati opciju da se izveštaj napravi za tekući dokument, ili za izabrane datoteke sa sajta. 3. Pre nego što napravite izveštaj, kliknite dugme Report Settings i izaberite standard prema kojem želite da se provera vrši. Kliknite OK da biste zatvorili okvir za dijalog. 4. Klikntie Run da biste napravili izveštaj. Dreamweaver će pregledati Vaše strane i rezultate prikazati u prozoru Results. 39 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 4. Rad sa tekstom Osnove u vezi teksta Na web strani ne možete da dobijete mnogo više od osnovnog teksta. Ako sa druge strane sagledate činenjicu da 90% vremena koje provedete kao dizajner za Web radite sa tekstom, onda ćete uvideti potrebu da dobro naučite kako HTML radi sa tekstom i šta je to što može poći naopako. Tekst u pretraživaču Ako ste ikada pravili neku web stranu, onda znate osnovnu činjenicu. HTML je strukturni markup jezik. Njegov osnovni zadatak je da opiše logičku strukturu elemenata na strani, kao što je i tekst, tako da logika strane bude jasna svakoj osobi ili uređaju koji je čita. Za formatiranje teksta HTML koristi oznake na nivou bloka, koje se primenjuju na delove teksta i time ukazuju na ulogu tog teksta na strani. Pored oznaka na nivou blokova, koriste se i oznake na nivou karaktera, koje se primenjuju na reč ili nekoliko reči u okviru bloka, čime se te reči ističu u odnosu na ostatak teksta. Tekst u Dreamweaveru Tekst se u Dreamweaveru kreira kucanjem ili prebacivanjem iz nekog drugog programa. Funkcije za kucanje, uređivanje i selektovanje teksta su iste kao i u bilo kom programu za uređivanje teksta. Provera pravopisa (Text > Check Spelling) omogućava da proverite pravopis za izabrani tekst ili ceo dokument. Provera se vrši na osnovu rečnika koji postoji u Dreamweaveru, ali i prema Vašem sopstvenom rečniku. HTML strukturu ćete na tekst primeniti preko Text Property Inspectora, tekstualnih objekata sa palete Insert, kao i različitih komandi iz menija Insert. Prebacivanje teksta iz drugih programa Ako tekst koji Vam treba na strani već postoji u nekom drugom programu, ili ako samo više volite da kucate u nekom drugom programu, onda taj tekst treba efikasno prebaciti u Dreamweaver. Srećom, postoji nekoliko mehanizama preko kojih se to može uraditi. Prednosti i nedostaci kopiranja iz drugih programa Tekst se iz drugog programa može lako iskopirati u Dreamweaver. Ipak, sebi ćete olakšati život ako to radite kako treba. Nakon što ste iz nekog programa iskopirali tekst na Clipboard, za njegovo ubacivanje Vam stoje na raspolaganju tri komande. To su komande Edit > Paste, Edit > Paste Text i Edit > Paste HTML. Postoje i dve odgovarajuće komande za kopiranje, Edit > Copy i Edit > Copy HTML. Komanda Paste Ako se nalazite u prozoru Design, onda će komanda Edit > Paste or Edit > Paste Text prebaciti tekst koji se nalazi na Clipboardu u Vaš dokument. Svo formatiranje koje je postojalo se gubi. Oznake novih pasusa će postati oznake br. Neće se ubacivati nove HTML oznake. Dreamweaver će svaki specijalni karakter koji prepozna da konvertuje. To se odnosi na apostrofe, navodnike, crtice, oznake za autorska prava. Konverzija se vrši iz koda koji je specifičan za neki sistem za obradu teksta, na opšte HTML oznake. Ako se nalazite u prikazu Code, onda komanda Edit > Paste zadržava formatiranje i tekst postavlja na mesto gde ste pokazali. Tom prilikom nema konverzije specijalnih karaktera. Ako, na primer, na Clipboardu imate tekst: 40 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 <b>Zdravo, kako ste</b> 41 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 onda ćete komandom Edit > Paste iz prozora Design u svoj kod postaviti sledeće: <b>Zdravo, kako ste</b> Pretraživač će prikazati uglaste zagrade, ali tekst neće biti ispisan masnim slovima. Ako za prebacivanje istog teksta upotrebite komandu Edit > Paste iz prozora Code, onda se tekst ne menja, tako da se u pretraživaču prikazuje tekst: Zdravo, kako ste. Komanda Paste HTML Kako se tu uklapa komanda Paste HTML? Ako se nalazite u prozoru Design i ako izaberete Edit > Paste HTML, dobija se isti efekat kao da ste bili u prozoru Code i izabrali komandu Edit > Paste. Drugim rečima, ova komanda prilikom prebacivanja teksta ne vrši nikakve promene. Sva formatiranja se izbacuju, a specijalni karakteri se ne konvertuju. Ako se nalazite u prikazu Code, onda komanda Paste HTML nije dostupna. Kopiranje preko komande Copy nasuprot kopiranja preko komande Copy HTML Isti principi važe i u obrnutom smeru, odnosno ako želite da kod iz Dreamweavera prebacite negde napolje. Ako se nalazite u prikazu Design i ako izaberete Edit > Copy, onda ćete vidljivi tekst koji ste izabrali postaviti na Clipboard. Ako se nalazite u prikazu Design i ako izaberete Edit > Copy HTML, ili ako se nalazite u prikazu Code i ako izaberete opciju Edit > Copy, onda se na Clipboard prebacuje izvorni HTML kod, uključuju i tekst strane. Prebacivanje teksta (i drugih objekata) iz Worda i Excela Od verzije Dreamweaver 2004 lako možete da čak i složeni sadržaj prebacite iz Worda ili Excela u Dreamweaver. Tom prilikom možete da zadržite veći deo formatiranja i da dobijete pristojan HTML kod. Kopiranje i postavljanje u dokument Iskopirajte nešto iz Worda ili Excela, a onda u prozoru Design u Dreamweaveru izaberite komandu Edit > Paste or Edit > Paste Text. To je sve. Sadržaj koji ste kopirali ima dobar format i strukturu. Formatiranje teksta Pasusi koje ste iskopirali iz Worda dolaze kao pravi pasusi, a ne kao tekst koji je odvojen novim redovima. Stil Normal iz Worda je ubačen u klasu iz CSS-a, po imenu MsoNormal, a to je ubačeno u interni stylesheet dokumenta iz Dreamweavera. Pasusi koji su imali neki od stilova za naslove iz Worda (Heading 1, Heading 2 itd.) dolaze između HTML oznaka za naslove (hl, h2, itd.), sa dodatnim unutrašnjim stilovima, koji prenose i format. Tabele Tabele iz Worda, kao i unakrsne tabele iz Excela se u Dreamweaver prebacuju kao HTML tabele. Formatiranje se zadržava preko klasa iz CSS-a: <table class="MacTableGrid"> <tr> <td width="118" valign="top"> .<p class="MacNormal">State</p></td> <td width="118" valign="top"> .<p class="MacNormal">Capital</p></td> </tr> Uvoz dokumenata iz Worda i Excela Metod copy-and-paste radi dobro kod kopiranja delova dokumenta. Ceo dokument iz Worda ili Excela možete i efikasnije prebaciti u HTML. Za to se koriste komande Dreamweavera vezane za uvoz. Evo kako se to radi: 1. Kreirajte ili otvorite dokument u Dreamweaveru u koji želite da uvezete dokument. 2. Pređite u prikaz Design (komande ne funkcionišu u prozoru Code). 3. Izaberite File > Import > Word Document ili File > Import Excel Document. Pronađite datoteku koju želite da ubacite i kliknite OK da biste zatvorili okvir za dijalog. Dobili ste sadržaj u HTML-u koji je lepo formatiran. Treba da imate na umu da ponekad, dokumenti iz Worda mogu biti suviše dugi (nekoliko desetina ili stotina 42 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 strana), dok web strane ne bi trebalo da budu tako duge. Ako želite da u Dreamweaver prebacite dugačak dokument iz Worda, treba da ga podelite na nekoliko delova i da svaki deo ubacite posebno. Možete i da izaberete samo deo dokumenta i da preko metoda copy-and-paste postavite svaki segment u poseban HTML dokument. Ako želite da se sve to ponaša kao celina, u Dreamweaveru morate da dodate linkove na svaki od ubačenih delova. Rad sa HTML tekstom iz Worda Microsoft Word može da napravi svoj HTML tekst. Za to se koristi komande Save as Web Page ili Save as HTML. Na žalost, Word ne može da napravi preterano dobar HTML tekst. Kod koji on pravi je mešavina HTML-a i XML-a, sa mnoštvom oznaka tipa font ili stilova iz CSS-a, kao i bezbroj oznaka meta. Ovim se web strana čini nepotrebno velikom, usporava se njeno učitavanje, a dalje promene postaju teško izvodljive. Ako imate mogućnost da birate, onda je bolje da ostavite da Dreamweaver pravi HTML kod, odnosno da upotrebite metode copy-and- paste ili uvoz koje smo pomenuli. Sa druge strane, možda nećete imati kontrolu nad tim delom procesa. Treba da u Wordu, pre izvoza, pažljivo podesite opcije, a da kasnije upotrebite mogućnosti Dreamweavera i poboljšate situaciju. Priprema dokumenta u Wordu U Wordu možete da uradite nekoliko stvari i da time dobijete čistiji i što bolji kod. Prvo morate da budete sigurni da su opcije vezane za kreiranje koda podešene na pravi način. U zavisnosti od verzije Worda, ove opcije se nalaze na različitim mestima. Evo koje opcije treba da potražite: • Podesite ciljni pretraživač na opciju koja nije samo Internet Explorer. Prilično dobar izbor je Internet Explorer 4.0 ili Netscape Navigator 4.0. Isključite sve opcije koje nisu podržane u oba pretraživača. • Za formatiranje fontova treba da koristite CSS. (Ovim se izbegavaju brojne oznake fonta koje se ubacuju u dokument.) • Za grafički format nemojte koristiti format PNG. • Kodiranje podesite na Unicode ili Western European (ISO). Ovo je posebno važno, jer Word podrazumevano strane kodira u skladu sa platformom koja se koristi. Specijalni karakteri mogu da dobiju format koji je specifičan za Windows ili Mac i da kasnije u pretraživačima izazovu probleme. Ako u Vašem dokumentu postoji grafika, podesite rezoluciju na neku razumnu vrednost, kao što je na primer 72 ili 96. U zavisnosti od verzije Worda koju koristite izaberite File > Save as Web Page, File > Save as HTML ili File > Save. Preko opcija u okviru za dijalog Save podesite neki od formata. Kada se tu nađete, postoje dve osnovne mogućnosti. To su da ceo sadržaj upamtite kao web datoteku, ili da upamtite prečišćenu ili verziju samo za čitanje. U čemu je razlika? Ako upamtite ceo sadržaj, Word ubacuje sve vrste koda, tako da kasnije možete da taj dokument, koji je postao HTML, ponovo vratite u Word. Ovim se ubacuje mnogo dodatnog materijala. Osim ako niste potpuno sigurni da želite baš to, izaberite opciju filtered ili display only. Prečišćavanje u Dreamweaveru Dokument koji je Word napravio, u Dreamweaveru otvarate kao i bilo koji drugi HTML dokument. Nakon toga izaberite opciju Commands > Clean Up Word HTML. Otvoriće se okvir za dijalog Clean Up Word. 43 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Opcije koje se nalaze na kartici Detailed možete da koristite za tačno definisanje promena koje želite da se uključe u konverziju. Nakon što ste izabrali određene stavke, kliknite OK. Dreamweaver đe obraditi datoteku, a u prozoru Document će se prikazati prečišćena verzija strane. Nakon prečišćavanja, u kodu mogu i dalje da postoje oznake i atributi koje ne želite. Konkretno, može se desiti da postoji interni style sheet, i da on sadrži puno klasa po imenu Sectionl, Section2, itd. Ove klase se primenjuju na oznake div, koje okružuju telo strane. Na celoj strani se mogu naći elementi koji su dodeljeni klasi Normal, iako ta klasa nije interno definisana, ili nije u style sheetu. Malo se zabavite pronalaženjem i zamenom ovih stavki. Možete da uradite sledeće: 1. Otvorite okvir za dijalog Find and Replace (Edit > Find and replace). 2. Oblast pretraživanja (search scope) podesite na Document. 3. Ako želite da uklonite oznake div, search type podesite na Specific Tag. U delu Search For, unesite div, kao oznaku koja se briše, a onda pritisnite dugme da biste obrisali druge kriterijume pretraživanja. Iz padajućeg menija Action izaberite opciju Strip tag. Ovim se oznake div uklanjaju, a da se ne briše njihov sadržaj. Na slici je prikazan okvir za dijalog Find and Replace, sa podešenim ovim opcijama. Kliknite dugme Replace All da biste završili pretraživanje. 4. Ako želite da uklonite klasu Normal, podesite search type na Source code. U polju Search For 44 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 unesite class="Normal". Polje Replace With treba da ostane prazno. Kliknite Replace All da biste zamenili sve što treba. 5. Nakon što završite, zatvorite okvir za dijalog Find and Replace. Ako želite da izbacite interne CSS stilove, možete da pretražujete sa nekom drugom opcijom, ili možete da otvorite pano CS Styles (Window > CSS Styles), izaberete interne stilove i kliknete ikonu za otpatke na dnu panoa. Tabelarni podaci Tabelarni podaci predstavljaju tekst koji se već nalazi u tabeli. To su podaci iz unakrsne tabele u Excelu, ili iz tabele koja dolazi iz nekog programa za obradu teksta, ili baze podataka. Da biste prikazali podatke na web strani, oni moraju biti u HTML tabeli. Premda većina ovih programa može to izvesti kao HTML tekst, kod koji se pravi nije baš najčistiji. Ako je tabela u Excelu ili Wordu, možete da je jednostavno iskopirate i postavite u Dreamweaver, kao što smo već opisali. Ako tabela dolazi iz nekog drugog programa, onda je najbolje da upotrebite komandu Import Tabluar Data. Evo kako se to radi: 1. 2. U originalnom programu (na primer, program za rad za unakrsna izračunavanja), zapamtite datoteku, ili je izvezite, ali u formatu sa nekim delimiterom. To znači da program treba da napravi tekstualnu datoteku, kod koje neki karakter, obično zarez ili tabulator, odvajaju sadržaj pojedinih ćelija, a oznaka za novi red ukazuje na novu vrstu iz tabele. U Dreamweaveru otvorite dokument i kursor postavite tamo gde želite da se prikažu tabelarni podaci. Sa palete Layout Insert izaberite opciju Tabular Data, ili izaberite File > Import > Tabular Data ili Insert > Table Objects > Import Tabular Data. Otvoriće se okvir za dijalog u kojem možete da izaberete tekstualnu datoteku koja se uvozi, da definišete karakter koji se koristi kao delimiter, i da tabeli dodelite formatiranje kakvo želite. (Ovo kasnije uvek možete da promenite, preko Property Inspectora, tako da nije baš toliko bitno da ovde sve uradite kako treba.). Kada kliknete OK, Dreamweaver kreira novu tabelu koja sadrži tekst iz datoteke, deli je na ćelije i vrste, na bazi delimitera. Ovo je prikazano na slici. 45 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Nakon što Dreamweaver napravi tabelu koja sadrži uvezene podatke, ona se ponaša kao i bilo koja druga tabela, koju biste napravili u Dreamweaveru. Nema dinamičke veze sa tekstom koji ste uvezli, tako da se ništa loše ne može desiti ako tu datoteku obrišete ili premestite. Prilikom upotrebe ove komande treba biti oprezan, jer Dreamweaver ne može da prepozna spajane ćelije. Ako se u originalnoj unakrsnoj tabeli ili običnoj tabeli nalaze takve ćelije, tabela koju će Dreamweaver da napravi neće imati pravilnu strukturu. Problem možete rešiti ako ručno podesite vrednosti rowspan i colspan za te ćelije. Definisanje strukture teksta Kao web dizajner, sa tekstom treba da radite što je moguće efikasnije. To znači da efikasno treba da kreirate i menjate tekst, kao i da treba da imate dobru ideju šta čini dobru strukturu teksta. Dobra struktura teksta: Dostupnost teksta Ako želite da napravite dobru HTML stranu, onda treba da odvojite formu i sadržaj. Tekst je U HTML-U struktuiran preko oznaka koje ukazuju na logičku namenu svakog elementa teksta (naslova, podnaslova, pasusa, listi, itd.). To je sadržaj. Forma je način na koji se tekst predstavlja, tako da njegova logička struktura bude očigledna. Forma se može kontrolisati preko pretraživača, čitača ekrana, ili nekog dragog uređaja. Na nju se može uticati preko CSS-a, koji ukazuje kako se može rukovati nekim logičkim elementima. Zašto je bitna ova razlika? Najpre je u pitanju efikasnost. Podešavanje svakog pojedinačnog naslova na web sajtu na određenu veličinu, font ili boju (za sve ovo se koristi termin markup za prezentaciju) je dosadno i teško za kasnije ažuriranje. Mnogo je efikasnije da svaki naslov označite kao naslov i da onda pretraživaču ili style sheetu ostavite formatiranje svih naslova. Ovo se zove strukturni markup. Ne samo da je efikasniji, strukturni markup je i fleksibilniji, pa tako i dostupniji. Čitač ekrana, na primer, ne zna da neki veliki tekst na strani, ispisan masnim slovima, treba da bude naslov, ali zna da je tekst koji je u okviru oznake hl naslov. Preporuke konzorcijuma W3C koje se odnose na dostupnost uključuju i one koje ohrabruju upotrebu strukturnog, a ne prezentacionog markupa. 3.3. Za kontrolu rasporeda i prezentacije treba koristiti Style Sheet. 3.5. Elementi zaglavlja treba da se koriste za izražavanje strukture dokumenta. Ovi elementi treba da se koriste prema specifikaciji. 3.6. Liste i stavke u njima treba označiti na pravi način. 3.7. Navodnike treba koristiti na pravim mestima. Nemojte koristiti oznake navođenja (kao što su oznake blockquote, na primer) za formatiranje tipa uvlačenja. Iz ovih razloga se oznaka font i njeni atributi (size, color i face) u HTML-U koriste sve manje, u korist CSS-a. Takode se manje koriste oznake bold i italic (oznake b i i), a umesto njih treba koristiti oznake em (emphasis) i strong. Oznake font, bold i italic se koriste samo za vizuelnu prezentaciju. 46 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Opcije indent i outdent Dugmad Indent i Outdent u okviru Property Inspectora izgledaju kao slične kontrole u programima za obradu teksta, ali nisu. Kada se ove opcije primene na obične pasuse, koji nisu stavke u definisanoj listi, dodaju se oznake blockquote. Kada se primene na stavke u uređenoj ili neuređenoj listi, onda se kreiraju podkategorije. To je pravi način kako treba da se koriste. Ako želite da uvučete neki pasus, onda preko CSS-a treba da kreirate stil za uvučeni pasus. Ako želite da stavke u listi budu uvučene više nego što je uobičajeno, onda to treba da promenite preko CSS-a, koji će promeniti oznaku li. Sve oznake treba koristiti prema njihovoj strukturi, a ne prema izgledu Ovo je samo proširenje prethodne teze. Kada primenjujete oznaku treba da razmišljate strukturno, a kada primenjujete style sheet, treba da razmišljate kao o prezentaciji. Najviši nivo naslova u dokumentu treba da bude h1, a ne h2 ili h3. Ako oznaka h1 pravi tekst koji je suviše velik za Vaš ukus, preko CSS-a možete da promenite prezentaciju, a ne da promenite način upotrebe. Formatiranje listi treba koristiti samo za liste, ne za uvlačenje. I tako dalje. Neki od posetilaca Vašeg sajta će Vam biti zahvalni. Zahvalićete i sami sebi, kada kasnije budete održavali taj dokument. Kolege će Vam biti zahvalne kada dođe trenutak da treba ažurirati dokument, a Vi budete na odmoru. Ispravka teksta sa lošom strukturom Šta ako nasledite stranu koja narušava pravila? U Dreamweaveru postoje različiti alati koji mogu da pomognu u rešavanju ovih problema. Brisanje oznaka font Upotreba oznaka font nikad nije bila dobra ideja. Ako želite da uklonite te oznake, treba da uradite sledeće: 1. Postavite kursor unutar teksta koji je formatiran pomoću oznake font. 2. U Tag Selectoru pronađite oznaku font i kliknite je desnim tasterom miša. Iz pomoćnog menija izaberite opciju Remove Tag. Ovim će se oznaka font ukloniti, a sam tekst neće biti narušen. Ako želite da brzo uklonite sve oznake font iz jednog ili više dokumenata, možete da upotrebite pretraživanje Specific Tag. Evo kako se to radi: 1. Izaberite Edit, Find and Replace. 2. Kada se otvori okvir za dijalog Find and Replace, podesite oblast pretraživanja na ono što želite. 3. Tip pretraživanja (search type) podesite na Specific Tag. U polju Search Field unesite font. Kliknite dugme minus ( - ) da biste uklonili sve druge opcije pretraživanja. 4. Iz padajućeg menija Actions izaberite opciju Strip Tag. Na slici je prikazano kako bi okvir za dijalog trebalo da izgleda u ovom trenutku. 5. Kliknite Replace ili Replace All da biste izvršili pretraživanje. 6. Kada završite, kliknite Close da biste zatvorili okvir za dijalog. Zamena oznaka Bold i Italic, oznakama String i Emphasis 47 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Oznake b i i takođe možete preko pretraživanja Specific Tag zameniti oznakama strong i em. 1. Izaberite Edit > Find and Replace. 2. Kada se otvori okvir za dijalog, podesite oblast pretraživania onako kako želite. 3. Tip pretraživanja podesite na Specific Tag. U polju Search Field unesite b. Kliknite dugme minus ( - ) da bste uklonili sve druge opcije pretraživanja. 4. Iz padajućeg menija Action izaberite Replace Tag. U tekstualnom polju koje se prikaže unesite strong. Na slici je prikazano kako bi okvir za dijalog trebalo da izgleda u ovom trenutku. 5. Kliknite Replace ili Replace All da biste izvršili pretraživanje. 6. Ponovite prethodne korake i zamenite i sa em. Nakon što zatvorite kliknite Close da biste zatvorili okvir za dijalog. Istu tehniku možete da upotrebite i za uklanjanje oznaka blockquote i njihovu zamenu oznakama p. Tom prilikom je ipak pametnije da koristite opciju Replace, a ne Replace All, tako da možete da ispitate svaki pojedinačni slučaj i da budete sigurni da nije u pitanju navodnik, koji je na pravom mestu. Izbacivanje višestruko uvučenih lista Višestruko uvučene liste se sastoje od jedne uređene liste i druge koja nije uređena, a koja se nalazi unutar prve. Cilj ovog uvlačenja nije kreiranje podliste, nego novo uvlačenje. Evo kako izgleda taj kod: <ul> <ul> <li>Apples</li> <li>Bananas</li> </ul> </ul> Ako želite da uklanjate jedno po jedno uvlačenje, onda izaberite tu stavku iz liste, pronađite u Tag Selectoru dvostruki skup oznaka ul i ol, kliknite desnim tasterom miša neku od tih oznaka i iz pomoćnog menija izaberite opciju remove Tag. Ako želite da brzo uklonite ove oznake iz celog dokumenta, ili na celom sajtu, onda možete da upotrebite pretraživanje sa opcijom Specific Tag i da potražite oznake ul ili ol, koje se nalaze unutar druge oznake ul ili ol. Pošto ćete morati da odjednom zamenite sve oznake, treba da budete pažljivi, jer ćete ukloniti i ispravno ugnježdene liste. 48 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prekidi linija, razmaci koji ne znače prekid i beline Belina je vizuelni koncept, koji je prema tome, povezan sa formatiranjem, a ne sa strukturom. Nema ničeg lošeg u malo beline, dokle god to ne narušava strukturu. Prekidi linija: Šta je dobro, a šta loše Ako u Dreamweaveru prtisnete taster Enter ili Return, završava se tekući pasus i počinje novi. U izvnorom kodu ovim se završava jedan blok (pasus, naslov, stavka u listi, itd.) i počinje novi. U prikazu Design, kao i u pretraživaču, svi prekidi između blokova se prikazuju kao dvostruki razmaci. Ovo se često naziva čvrstim prekidom. Ponekad želite da dobijete novu liniju, ali ne želite da se napravi novi blok. Ne želite dodatni razmak, ili ne želite da pravite novu stavku u listi. U takvim slučajevima treba da pritisnete Shift+Enter. Ovim se završava tekuća linija i počinje nova. U izvornom kodu se unosi oznaka br. Ova oznaka se ubacuje u tekući blok za formatiranje. U prikazu Design i u pretraživačima se pravi novi red, ali bez dodatnog prostora, dodatnih stavki, itd. Ovo se često naziva meki prekid. Mane mekanih prekida Prekidi linija se vrlo lako zloupotrebljavaju i mogu da dovedu do problema, ako se ne koriste kako treba. Šta će se desiti ako pažljivo ubacite prekid linije u svoj tekst, a pretraživač preuredi tekst, usled opcija koje je korisnik podesio, ili usled veličine prozora. Mekani prekid i struktura Upamtite da mekane prekide ne treba da koristite za lošu strukturu. Ako ne želite dodatne praznine između naslova i teksta koji sledi, nemojte koristiri prekid linije. Ovim se briše strukturna razlika između naslova i teksta. Umesto toga, dodatni prostor treba da uklonite preko CSS-a. Evo kako se to radi: 1. 2. 3. 4. U panou CSS Styles napravite novi stil, bilo tako što ćete promeniti definiciju postojećih oznaka, ili putem kreiranja korisničke klase. U okviru za dijalog CSS Style Definition izaberite katerogiju Box. U kontrolama u polju Margins, opcija Same for All ne treba da bude potvrđena. Donja margina treba da se podesi na negativnu vrednost. Na slici je prikazano šta se dešava. Ako ste svoj stil definisali kao korisničku klasu, izaberite tekst i preko Property Inspectora ili Tag Inspectora primenite tu klasu. 49 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Razmaci koji ne vode novim redovima Ovakvi razmaci ( ) su upravo ono što i ime govori. To je belina za koju se ne garantuje da dovodi do nove linije, bez obzira šta se dešava sa automatskim prelazom teksta u novi red. Ovo je i više od toga. Pretraživači ignorišu dodatne beline u HTML kodu. Sa druge strane, razmaci koji ne dovode do novih redova prave dodatni prostor između reči i drugih elemenata, koji pretraživači ne smeju da zanemare. Najlakši način da u Dreamweaveru napravite ovakav razmak je da pritisnete Shift+Ctrl+razmak. Isti objekat se može dobiti i ako sa palete Insert izaberete opciju Nonbreaking Space, ili izaberete opciju Insert > HTML > Nonbreaking Space. Prekide koji prave novi red u nekim situacijama može da za Vas napravi Dreamweaver. Na primer, svaki put kada pravite novi pasus, Dreamweaver ubacuje ovakav prekid, da bi naterao pretraživač da obrati pažnju na pasus. (Potpuno prazni pasusi se smatraju belinama bez značenja i pretraživači ih ignorišu.) Program prekide koji ne vode novom redu ubacuje i u prazne ćelije tabela, iz razloga što pojedini pretraživači ne prikazuju ispravno prazne ćelije. Dodavanje belina preko praznih pasusa Priznajte, koliko ste puta ovo i sami uradili. Pritisnete taster Enter nekoliko puta više i kreirate puno praznog prostora između elemenata na strani. Dreamweaver omogućava da vrlo lako ubacite prekide koji ne vode novom redu, za koje ste sigurni da će se ispravno prikazati. Ali, da li je u pitanju zaista dobra struktura? Šta je logično u pasusu u kome nema ničeg? Mnogo bolje je da prostor između stavki dodate preko CSS-a. Sve o listama Bez obzira da li je lista sa oznakama ili brojevima, da li je uređena ili ne, lista pomaže da brzo napravite sadržaj koji se lako čita. Puno toga može da se uradi na poboljšanju izgleda i strukture Vaših listi. Fino podešavanje izgleda preko tipova listi Ne želite da oznake stavki u listi budu crni kružići? Želite "abc" umesto "123"? Samo treba da podesite atribut type na listu ili stavku. Kod izgleda ovako: <ul type="square"> <ol type="a"> Tipovi listi se u Dreamweaveru podešavaju u okviru za dijalog List Properties, kome se pristupa preko List Item Property Inspectora. Da bi se ovo desilo, potrebno je da kursor postavite negde u listi i da u Text Property Inspectoru kliknete dugme List Item. Otvoriće se okvir za dijalog List Properties. 50 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ovde možete da preko padajuće liste List Type definišete vrstu liste. Iako se ovo zove List Type, ne ubacuje se atribut type za tu listu, već se menja oznaka koja je napravljena za tu listu. • Ordered (ol) (uređena) – Kreira se numerička, alfabetska ili na neki drugi način uređena lista. • Unordered (ul) (neuređena) – Kreira se lista kod koje su stavke označene znacima. • Directory (dir) – Kreira se lista direktorijuma sa više kolona (ova oznaka je zastarela). • Menu (menu) – Kreira se lista menija sa jednom kolonom (ova oznaka je zastarela). U zavisnosti od opcije koju izaberete, u ostatku okvira za dijalog imate na raspolaganju različite opcije. Ako želite da definišete atribut type za listu, upotrebite padajući meni Style. Za uređene liste možete i da zadate od kojeg broja počinje brojanje elemenata liste (1,2,3...). Ovde treba uneti broj, čak i ako ste izabrali tip koji nije numerički. Ovim se oznaci list dodaje atribut start: <ol start="5"> Na kraju, na dnu okvira za dijalog možete da izaberte opciju New Style, čime se konkretnoj stavki iz liste koju ste izabrali dodaje atribut type. Ovu stavku ste izabrali pre otvaranja okvira za dijalog. <ol type="l"> <li> <li type="a"> <li> Promene se odražavaju samo na jednoj stavci liste. Poboljšane oznake elemenata u listi preko CSS-a Tipovi oznaka elemenata liste su dobri, ali šta ako želite da za svoju neuređenu listu imate kao oznaku neki crtež. Tu Vam može pomoći CSS. Evo šta treba da uradite: 1. U nekom programu za rad sa grafikom napravite GIF ili JPEG sliku koju želite da koristite kao oznaku. 2. U Dreamweaveru napravite novi CSS stil, koji drugačije definiše oznaku ul (neuređena lista). Ovo ćete uraditi tako što ćete izabrati Text > CSS Styles > New CSS Style, ili preko dugmeta New Style sa panoa CSS Styles. 3. Kada se otvori okvir za dijalog CSS Style Definition, idite u kategoriju List. U polju Bullet Image pronađite svoju oznaku. Polje Position možete da ostavite prazno ili da iz pomoćnog menija izaberete opciju inside i tako ubacite svoju oznaku u uvlačenje stavki (ovo može dovesti do toga da se uvlačenje poveća). Kliknite OK da biste zatvorili okvir za dijalog. Od sada će izgled svake neuređene liste zavisiti od style sheeta koji koristi sliku kao oznaku. 51 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Naravno da ovo nije jedini način na koji CSS može da Vam pomogne u formatiranju listi. Font, veličina teksta, boja i još puno toga se može podesiti preko CSS-a. Ako želite da povećate ili smanjite uvlačenje stavki u listi, ili da promenite vertikalno rastojanje između stavki, podesite marginu (ovo se radi preko kategorije Box u okviru za dijalog CSS Style Definition). Prednosti koje donose specijalni karakteri Prilikom rada ćete bez sumnje doći u situaciju da Vam zatrebaju specijalni karakteri, kao što su akcentovana slova, oznake autorskih prava ili ugaone zagrade koje se koriste u HTML-u. Da bi ovakvi karakteri mogli da se koriste u HTML-u, moraju se predstaviti specijalnim kodovima, koje nazivamo HTML entitetima. Ovi entiteti imaju oblik &kod, gde je kod reč ili broj koji ukazuje na to koji karakter treba da se prikaže na ekranu. Postoji na stotine HTML entiteta za specijalne karaktere. Umetanje specijalnih karaktera tokom rada Neki specijalni karakteri se lakše unose u odnosu na druge. Ako na primer, želite da ubacite ampersend, samo treba da pritisnete Shif+7 (dok ste u prozoru Design), a Dreamweaver će to zameniti odgovarajućim specijalnim karakterom (&). Ako poznajete prečice sa tastature koje Vaš operativni sistem koristi za kreiranje drugih karaktera, možete i njih da koristite dok ste u prikazu Design. Dreamweaver će uneti pravi kod. HTML entitetima koji se najviše koriste može da se pristupi preko podmenija Insert > HTML > Special Characters. Kada želite da ubacite neki od ovih karaktera, samo postavite kursor tamo gde želite i izaberite neku od komandi iz ovog menija. 52 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako specijalnog karaktera koji Vam je potreban nema u listi, sa palete Insert izaberite objekat Other Character ili upotrebite komandu Insert > HTML > Special Characters > Other. Otvoriće se novi prozor iz kojeg možete izabrati specijalni karakter. Kada kliknete ikonu karaktera, na vrhu prozora će se prikazati tekstualno polje. U polje možete i da ubacite kod svog specijalnog karaktera. 53 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ubacivanje specijalnog karaktera preko pronalaženja i zamene Ako ispred sebe imate punu stranu teksta, ili još gore, ako imate ceo sajt sa stranama koje ste kucali bez upotrebe specijalnih karaktera iz HTML-a, poslednja stvar koju ćete želeti da uradite je da lovite specijalne karaktere jedan po jedan. Vreme je za pronalaženje i zamenu. Evo kako se to radi: 1. Otvorite neki od dokumenata koji želite da menjate. Proverite da li se nalazite u prikazu Design. 2. Pronađite prvi karakter koji želite da zamenite. Ako želite da zamenite pravu (zakrivljenu) apostrofu umesto obične, pronađite primer za to. Obrišite taj karakter i preko palete Insert ili menija Insert ubacite HTML entitet. 3. Izaberite specijalni karakter koji ste upravo ubacili i izaberite Edit > Copy. 4. Izaberite Edit > Find and Replace. Izaberite oblast pretraživanja (Current document, Entire Site, itd.). Iz padajuće liste Search In izaberite na Text. U polju Search In unesite karakter koji želite da menjate, običan navodnik, crticu i sl. Kliknite u polje Replace With i preko komande Edit > Paste ubacite specijalni karakter na tu lokaciju. 5. Izaberite Replace ili Replace All. Kada završi posao, Dreamweaver će pokazati broj zamena koje je izvršio. Kliknite OK da biste zatvorili okvir za dijalog, a onda kliknite OK da biste zatvorili i prozor Find and Replace. 6. Istu proceduru ponovite i za druge specijalne karaktere koje želite da koristite. Ako zaključite da stalno radite isto, mogli biste da upamtite kriterijum pretraživanja i da ga tako olakšate. Evo kako se to radi: 1. Ponovite korake koje smo upravo pomenuli, sve do trenutka kada se nađete u okviru za dijalog Find and Replace sa ispravnim kriterijumom za pretraživanje. 2. Umesto pretraživanja i zatvaranja prozora, kliknite dugme Save. Ovo dugme izgleda kao disk računara. Upamtite kriterijum pretraživanja u nekoj fascikli, ali upamtite gde ste to uradili, da biste kasnije mogli da taj kriterijum ponovo pronađete. Nakon toga zatvorite okvir za dijalog Find and Replace. 3. Naredni put kada želite da pronađete i zamenite specijalni karakter, otvorite okvir za dijalog Find and Replace i kliknite dugme Load. Ono izgleda kao fascikla. Pronađite svoj kriterijum i učitajte ga. Nakon toga, pretraživanje uradite kao i obično. 54 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 5. Rad sa slikama Osnovno o slikama Rad sa slikama u pretraživaču nije komplikovan, ali kao i uvek, postoje određena pravila koja treba poštovati. U ovom odeljku smo pokrili osnove, a to je kako slike funkcionišu na web stranama i kako se uklapaju u svet Dreamweavera. Slike u pretraživaču Slike se generalno na web strane ubacuju preko oznake img: <img src="fido.gif" width="100" height="100"> Ovaj kod govori pretraživaču gde treba da potraži datoteku sa slikom, kao i koliko prostora treba da ostavi. Atribut src je relativni ili apsolutni link do GIF, JPEG ili PNG datoteke. Ovo je obavezan atribut, pošto bez njega nema ni slike. Striktno govoreći, ni atribut width ni atribut height nisu obavezni, ali ako ih izostavite, pretraživač nema načina da sazna koliko prostora treba da ostavi za sliku, što usporava prikazivanje web strane. Zbog toga se ovi atributi uvek daju. Datoteke koje sadrže slike moraju biti u formatu koji pretraživač može da prepozna i prikaže. Trenutno su to formati GIF, JPEG PNG (premda je podrška za PNG nedosledna, tako da mnogi dizajneri odustaju od ovog formata). Format GIF je najbolji za slike koje nisu fotografije, sa ograničenim bojama, gde je obavezm da slike budu jasne. GIF može da se koristi i za animacije i efekat providnosti. JPEG je najbolji za fotografije i druge slike koje sadrže puno boja i suptilne prelaze u bojama. Slike u Dreamweaveru U Dreamweaveru se sa slikama radi veoma lako. U narednim odeljcima ćemo objasniti osnovne procedure za rad sa slikama u Dreamweaveru. Usput ćemo istaći i potencijalne zamke. Umetanje slika Slike se u Dreamweaver mogu ubaciti na različite načine. Možete ih ubaciti preko objekta Image sa palete Insert ili preko komand Insert > Image. Ako ste definisali sajt, slike možete da prevučete sa panoa Site ili Assets direktno u prozor Document. Treba da imate na umu da priilikom umetanja slike, Dreamweaver ne ugrađuje sliku, kao što to radi sa listama ili tabelama, već se ubacuje relativna putanja do datoteke sa slikom. Ako koristite relativne putanje u odnosu na dokument Dreamweaver najbolje radi ako ste datoteku pre umetanja zapisali, tako da može da se izračuna relativna putanja između dokumenta i datoteke sa slikom. 55 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad sa slikama Većina osobina slika se u Dreamweaveru mogu podesiti preko Image Property Inspectora. Za podešavanje drugih osobina treba da koristite Selection Inspector ili komandu Edit Tag. Promena veličine slike Dimenzije slike možete promeniti ako promenite vrednost za width ili height u Property Inspectoru ili ako uhvatite ručice koje se prikazuju kada izaberete sliku i prevučete ih na novu lokaciju. Treba da imate na umu da slikama ne bi trebalo menjati dimenzije ni u Dreamweaveru ni na bilo kom drugom mestu izvan programa koji se koristili za uređivanje slika. Ako u HTML-u promenite veličinu slike, to samo pretraživaču govori da sliku treba da prikaže većom ili manjom u odnosu na stvarnu dimenziju. Ako prikažete veću sliku, povećavaju se pikseli, slika se deformiše, tako da se mogu videti tačkice ili će slika biti zamagljena. Ako prikažete manju sliku, samo bacate piksele i neracionalno trošite propusnu moć mreže. Ako u Dreamweaveru izaberete sliku i pogledate Property Inspector, uvek možete reći da li je ta slika menjana. Ako su vrednosti za height i width prikazane masnim slovima, onda to nisu originalne dimenzije slike. Ako želite, sliku možete da vratite na početne dimenzije i to tako što ćete kliknuti dugme Reset Size, koje se nalazi u Property Inspectoru, ili ako kliknete slova W i H pored polja Height i Width. Kao i kod svih pravila i ovde postoje izuzeci. GIF slike koje se sastoje od punih boja i traka mogu da se menjaju bez krivljenja, dokle god se to razvlačenje odvija duž tih traka. Ovim se povećava veličina slike, a da se pri tome ne menja veličina datoteka i samim tim ne utiče na propusnu moć mreže. Ravnanje slika Za početnike ravnanje slika preko Property Inspectora može biti zbunjujuće, pošto za to postoje dva skupa komandi. To su padajući meni Align, kao i dugmad left/center/right. U čemu je razlika? Komande iz padajućeg menija Align oznaci img dodaju atribut aligment: <img src="fido.gif" width="100" height="100" align="left"> Ovaj atribut određuje kako se slika ravna u odnosu na ostale stavke iz istog bloka. Najčešće je to tekst koji okružuje sliku. Ovaj atribut se podešava slično kao što se podešavaju atributi koji definišu način smeštanja teksta oko slike u programima za definisanje rasporeda strane. Dugmad left/center/right se odnose na ravnanje teksta. Ako element teksta, kao što je oznaka p, okružuje sliku, i ako kliknete neko od ovih dugmadi, tom elementu će se dodati atribut align. Ako nema tekstualnog elementa, i ako kliknete neko od ovih dugmadi, dodaće se oznaka div, koja dodaje ravnanje. <div align="left"> <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 padajućih menija Horiz i Vert se podese osobine ćelije align i valign. Kod izgleda ovako: <td align="left" valign="middle"> 56 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 <img src="fido.gif" width="100" height="100"> </td> Uređivanje slika Ako dva puta brzo kliknete sliku u prozoru Document, otvoriće se okvir za dijalog u kome možete da promenite src datoteku za sliku. Kada izaberete sliku i u Property Inspetora kliknete dugme Edit, otvoriće se grafička aplikacija u kojoj možete da je menjate. Koji program za rad sa grafikom će se otvoriti? To zavisi od toga koji spoljašnji grafički editor ste definisali u Dreamweaveru. Ako želite da proverite (ili promenite) šta ste podesili, treba da uradite sledeće: 1. Izaberite Edit > Preferences. Otvoriće se okvir za dijalog Preferences. Izaberite kategoriju File Types/Editors. 2. Iz liste Extensions izaberite GIF. Šta će se u delu Editors pojaviti kao primarni editor? Ako program za rad sa grafikom koji koristite nije prisutan, kliknite dugme + na vrhu liste da biste ga dodali. Izaberite svoj program i kliknite dugme Make Primary. 3. Ponovite istu proceduru za JPEG i (ako ćete koristiti PNG) PNG. 4. Kada završite kliknite dugme OK, da biste zatvorili okvir za dijalog. Naredni put kada kiknete dugme Edit u Image Property Inspectoru, pokrenuće se program koji ste definisali kao primarni za odredeni tip slike. Rad sa slikama Osnovni pojmovi u radu sa slikama su izuzetno jednostavni, ali postoji mnogo načina da se sa slikama radi, ali i da se upadne u nevolje, kao i da se bude kreativno. I Dreamweaver ima mnogo osobina vezanih za rad sa slikama, koje vam mogu pomoći da vam posao bude zabavan i efikasan. Dostupnost slika Slike su generalno nedostupne ljudima sa vizuelnim nedostacima. Vaš posao kao web autora je da ih učinite dostupnim, dodatnim alternativni tekstualnim opisom, dugim ili kratkim. Slike se pominju i u standardu 57 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Section 508, § 1194.22(a): Treba obezbediti tekstualni ekvivalent za svaki element koji nije tekstualan (preko atributa alt, longdesc ili u sadržaju elementa). Osnovni mehanizam da ovo uradite u HTML-u predstavljaju ali i longdesc. U pitanju su atributi oznake img. • alt – Ovo je kratak tekstualni ekvivalent za sliku. Koristi se uvek kada slika ne može da se vidi, što znači da će ga i grafički pretraživači prikazati, ako ne mogu da prikažu sliku. (Internet Explorer prikazuje alt tekst, kada se mišem prelazi preko slike iako to nije osnovna namena ovog atributa.) Svaka slika u Vašem dokumentu bi trebalo da sadrži i atribut alt. Slike koje nisu bitne, bi trebalo da sadrže prazan atribut alt. • longdesc – Ako značenje slike ne možete da sumirate u kratkom tekstu atributa alt, možete opcionalno da upotrebite atribut longdesc. Ovaj atribut treba da sadrži URL adresu strane sa punim tekstualnim opisom slike. (Do sada ovaj atribut nije baš najbolje podržan. Vaš zadatak kao web autora je da obezbedite mogućnost, a ne da se bavite nedostacima tehnologija.) Dostupnost slika u Dreamweaveru Slike su osnovni vinovnik nedostupnosti web strana, pošto po svojoj prirodi nisu dostupne ljudima koji imaju problem sa vidom. Rešenje ovog problema je da uvek obezbedite tekstualni ekvivalent za sve slike koje imate na svojim stranama. Podešavanje opcija vezanih za dostupnost Pre nego što krenete sa umetanjem slika, treba da budete sigurni da su opcije koje se odnose na dostupnost slika uključene (Edit > Preferences > Accessibility). Ako su ove opcije uključene, kada sledeći put budete ubacivali sliku, prikazaće se drugi okvir za dijalog, koji omogućava da podesite atribute alt i longdesc. Ako ne unesete vrednost za neki od ovih atributa, taj atribut se neće ubacivati u dokument. Property Inspector, Tag Inspector i komanda Edit Tag Nakon što ste ubacili sliku, u bilo kom trenutku možete da podesite atribut alt za svoju sliku. Ovo ćete uraditi preko Property Inspectora. Atribut longdesc se može dodati ili menjati preko Tag Inspectora ili preko komande Edit Tag. • Prazan atribut alt za slike koje nisu bitne – Prema pravilima, slike koje nisu bitne, kao što su one koje služe samo za dekoraciju, treba da imaju prazan atribut alt. U Dreamweaveru ćete prazan atribut alt napraviti pomoću padajućeg menija Alt u Property Inspectoru. Treba izabrati opciju empty. 58 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 Potraga za atributom alt bez teksta – Niste sigurni da li ste atribut alt koristili za svaku sliku na svom sajtu? Možete da potražite slike bez ovog atributa u tekućem dokumentu, fascikli ili na celom sajtu. Izaberite Site > Reports, a onda izaberite opciju Missing Alt Text Report. Pazite, ovaj izveštaj će identifikovati sve prazne atribute alt, kao atribute koji nedostaju, što naravno nije slučaj. Integrisano uređivanje slika U Dreamweaveru MX 2004 su dodate neke osnovne aktivnosti za uređivanje slika, kao što su odsecanje delova slike, dodavanje belina, rukovanje priširenjima slika. Sve ovo se sada može raditi direktno iz Dreamweavera. Naravno da Dreamweaver nije osnovni editor za rad sa slikama, tako da sofisticirane stvari treba ostaviti programima kao što su Fireworks ili Photoshop, ili nekom drugom editoru koji izaberete. Ipak, za brza podešavanja u letu, ovo je značajna inovacija. Osobine vezane za integraciju slika su deo Image Property Inspectora. Mogu se koristiti uvek kada izaberete sliku koja je postavljena u dokument u Dreamweaveru. Ovim opcijama se može pristupiti i preko podmenija Modify > Image. Mogu se koristiti kod bilo kojih slika koje su postavljene u dokument Dreamweavera, ali se najviše koriste za fotografije kod kojih su suptilne razlike u bojama bitne, a često se zahteva i odsecanje delova slika. Mogli biste da se naviknete na ove mogućnosti, ali treba da imate na umu da svaka promena koju napravite preko ovih alata utiče na datoteku sa slikom, što je razlika od drugih promena koje možete napraviti preko Property Inspectora. Polja width i height, na primer, samo menjaju dimenzije slike koja se prikazuje na strani, a ne utiču na stvarne dimenzije slike u datoteci iz koje slika dolazi. 59 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Odsecanje delova slika Komanda Crop se odnosi na odsecanje delova slika, koji se gube. Rezultujuća slika je i dalje pravougaonog oblika (odsecanje nije kao maskiranje ili neki drugi efekti vezani za transparentnost). Ipak su neki njeni delovi izbačeni. Ako želite da neku sliku odsečete u Dreamweaveru izaberite je i kliknite dugme Crop u Property Inspectoru ili izaberite Modify > Image > Crop. Dreamweaver će vas upozoriti da će ovo promeniti originalnu sliku. Kliknite OK da biste zatvorili prozor sa upozorenjem. Prikazaće se slika sa pravougaonikom za odsecanje ispred nje. Površina unutar pravougaonika će biti deo koji ostaje nakon odsecanja. Prevucite ručice na ivicama i postavite ih na željenu poziciju. Delovi slike koji su izvan pravougaonika će biti prikazani sa sivom prevlakom preko njih, što ukazuje da će biti izbačeni. Nakon što ste podesili pravougaonik odsecanja, možete ili da pritisnete Enter ili da dva puta brzo kliknete unutar slike da biste potvrdili primene i odsekli sliku. Kako da prekinete, ako ste već započeli odsecanje? Kliknite u prozor Document, ali izvan slike. Ovim se prozor odsecanja zatvara i ne dolazi do odsecanja. Podešavanje osvetljenja i kontrasta Osvetljenje određuje osvetljenost slike. Ako povećavate osvetljenje, sve boje postaju svetlije. Ako smanjujete osvetljenje, sve boje postaju tamnije. Kontrast određuje koliko svetla treba da dobiju svetle površine slike, a koliko tamne, kao i srednje tonove. Slika sa velikim kontrastom ima vrlo svetle i vrlo tamne tonove, ali malo srednjih tonova. Slika sa malim kontrastom ima mnogo srednjih tonova, ali svetle površine nisu mnogo svetlije odsrednjih tonova, a tamne nisu mnogo tamnije. Ako želite da podesite osvetljene ili kontrast slike, izaberite tu sliku i kliknite dugme Brightness/Contrast na Property Inspectoru. Pomerajte klizače naviše i naniže, ili unesite konretne brojeve. Nakon što završite kliknite OK, da biste zatvorili okvir za dijalog i promenili sliku. Podešavanje oštrine Izoštravanje slike znači da učinite da detalji slike izgledaju oštrije, više u fokusu. To može dovesti do iluzije da ste slici dodali nove detalje. Prilikom izoštravanja se na slici traže oblasti kod kojih se tamni pikseli sreću sa svetlim. Pod pretpostavkom da ove tačke susreta na slici predstavljaju detalje, kao što su ivica površine nasuprot pozadini, ili nos nasuprot lica, kontrast između svetlog i tamnog duž ivice postaje veći. Ovim se ivica dalje ističe. Zbog toga što proces digitalizacije može dovesti do toga da slika izgleda nejasno i zamagljeno, izoštravanje postaje važan alat za digitalno uređivanje. Ako želite da u Dreamweaveru podesite oštrinu slike, izaberite tu sliku i kliknite dugme Sharpen na Property Inspectoru. Možete i da izaberete Modify > Image > Sharpen. Otvoriće se okvir za dijalog Sharpen, sa klizačem. Ako želite da izoštrite sliku, pomerite klizač sa leva udesno. Na kraju kliknite OK da bi se i slika 60 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 promenila. Promena broja piksela u slici Svaka slika koja se sastoji od piksela ima u sebi izvestan broj piksela. Kada u Dreamweaveru menjate veličinu slike (putem promene parametara width i height u Property Inspectoru), ne menjate broj piksela ili nešto drugo u samoj datoteci sa slikom. Vi samo govorite pretraživaču da postojeće piksele prikaže većim ili manjim. To je razlog što slika koju ste povećali izgleda nejasno i što se kod nje vide pikseli. Proces promene broja piksela u slici se na engleskom naziva resample. Računar ili dalje deli piksele, tako se povećava ukupan broj piksela, ili ih kombinuje, čime se smanjuje ukupan broj piksela. Ovaj proces uvek dovodi do krivljenja slike, pošto računar ne može da pogodi koje su boje pikseli koji se dodaju ili gube. Ipak, slika kojoj je broj piksela promenjen, da bi se uvećala, generalno izgleda bolje nego da ste je povećali na uobičajen način. Promena broja piksela u Dreamweaveru nije relevantna, osim u slučaju da ste već menjali širinu i visinu slike (bilo preko Property Inspectora i Tag Inspectora, ili prevlačenjem ivica u prozoru Document). Nakon što to uradite, postaje dostupno dugme Resample u Property Inspectoru. Izaberite sliku i kliknite ovo dugme da biste podelili ili kombinovali piksele, tako da se dimenzije slike promene u skladu sa širinom i visinom. Slike kao pozadina Od kada su pretraživači počeli da podržavaju upotrebu slika, kreatori web strana su počeli da ih koriste, i zloupotrebljavaju, kao elemente pozadine. Slike se kao pozadina dodeljuju stranama, tabelama i nivoima. Slika u pozadini može da se ponavlja po horizontali ili vertikali, tako da ispuni određeni prostor. Tekst ili neki drugi grafički elementi mogu da se postavljaju ispred slike u pozadini, bez ikakvih CSS tehnika za rad sa nivoima. Slika u pozadini može biti jednostavna, kao što je ponavljanje tapeta u pozadini, ali može biti i znatno složenija i skrivenija, kada se koristi kao vodeni žig, baner, itd. Pozadina u stilu ploča, staromodan način Mnogo pre nego što je CSS stupio na scenu, slike su počele da se koriste kao pozadinski elementi. To je bilo moguće zahvaljujući atributu background. Ako oznaci body dodelite atribut backgorund, onda se slika ponavlja kao pozadina na celoj strani. Ako dodelite atribut background tabeli, vrsti tabele ili ćeliji, onda se ploče ponavljaju samo u tim elementima. <body background="flowers. jpg"> <table background="polkadots.gif"> Sliku ćete u Dreamweaveru da postavite kao pozadinu strane (kao atribut oznake body) ako izaberete Edit > Preferences, zatim izaberete kategoriju General i tamo deselektujete opciju Use CSS instead of HTML Tags. Nakon toga izaberite Modify > Page Properties i promenite boju pozadine. Ovo ćete uraditi u kategoriji Appearance. Tabelama i drugim elementima strane ćete dodeliti pozadinu preko polja Bg image koje se nalazi u Property Inspectoru. 61 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ovaj metod definisanja pozadine je i dalje ispravan i možda će Vam biti potreban, ali u poređenju sa CSSom, ima određene nedostatke: • Nema načina da se kontrolišu ploče sa slikom. Pretraživač automatski postavlja ploče sa slikom onoliko puta koliko je potrebno, po horizontali ili vertikali i pokušava da ispuni raspoloživi prostor. Iako ovo nije uvek loše, neće se uvek uklapati u Vaše želje. • Nema načina da se kontroliše pozicija slike. Popločavanje počinje u gornjem levom uglu i ponavlja se odatle. Slike u pozadini, ali sa CSS-om U danima CSS-a teorija pozadinskih slika se nije promenila, ali je primena postala efikasnija i moćnija. Redefinisani elementi strane i korisničke klase mogu da sadrže različite osobine vezane za slike u pozadini: background-image: url(myimage.gif); background-attachment: scroll; background-repeat: repeat-x; background-position: 0px 2px; Ako želite da nekom elementu na strani dodelite sliku kao pozadinu (uključujući i oznaku body), treba da koristite stil iz CSS-a koji oma osobine vezane za pozadinu. Evo kako se to radi: 1. Otvorite pano CSS Styles (Window > CSS Styles) i kliknite dugme New Style, koje se nalazi na dnu panoa. Možete i desnim tasterom miša kliknuti karticu CSS ili Tag Inspector i izaberete opciju new Rule. 2. Kada se otvori okvir za dijalog New CSS Style, izaberite da li svoj stil želite da kreirate u tekućem dokumentu ili u posebnom dokumentu sa stilovima. Treba i da izaberete da li želite da promenite definiciju postojeće HTML oznake, ili da kreirate korisničku klasu. Ako pozadinu dodeljujete celoj strani, treba da promenite definiciju oznake body. Ako pozadinu dodeljujete tabeli, vrsti u tabeli ili ćeliji u tabeli, zapitajte se da li svaka tabela, vrsta ili ćelija treba da ima istu pozadinu (verovatno ne). Ako ne treba, onda za svoju sliku u pozadini napravite korisničku klasu. 3. Kliknite OK da biste zatvorili okvir za dijalog i otvorili okvir za dijalog CSS Style Definition. U ovom okviru za dijalog idite u kategoriju Background i dodelite različite osobine slike. Nakon što završite kliknite OK da biste zatvorili okvir za dijalog. 4. Ako menjate oznaku iz HTML-a (na primer, oznaku body) onda ste završili. Ako sliku u pozadini pravite kao korisnički definisanu klasu, onda treba da tu klasu primenite na tabelu ili neki drugi element, za koji definišete pozadinu. Ovo ćete uraditi tako što ćete izabrati taj element, tako da se njegova oznaka pojavi na Tag Selectoru, zatim desnim tasterom miša kliknuti Tag Selector i iz podmenija izabrati opciju Class. Ako želite da sliku kao pozadinu dodelite samoj strani (tj. da je ubacite u oznaku body), onda možete ili da preko prethodno pomenutih koraka promenite definiciju oznake body, ili možete da izaberte Edit > Preferences i da u okviru za dijalog Preferences proverite da li je u kategoriji General izabrana opcija Use CSS instead of HTML tags. Nakon toga izaberite Modify > Page Properties i preko polja Background Image, koje se nalazi u kategoriji Appearance dodelite sliku. Dreamweaver će automatski kreirati CSS stil, koji menja definiciju oznake body. 62 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 63 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kreativni pozadinski efekti Početnici u web dizajnu uvek žele da znaju kako da dobiju one sjajne integrisane tekstualne i grafičke efekte, kakve su videli na mnogim web sajtovima. Odgovor je često u kreativnim pozadinskim efektima. Vertikalno popločavanje za kreiranje grafike sidebara Sidebarovi koji se koriste za navigaciju i nalaze uglavnom se sa leve strane su veoma česti. Njihovo kreiranje je u velikoj meri olakšano pojavom CSS-a. Evo šta treba da uradite: 1. U svom grafičkom programu napravite grafiku sidebara, kakvu želite. 2. 2 Verovatno ćete želeti da se sidebar proteže od vrha do dna strane, ali samo sa jedne strane. Ideja je da se ploče postave po horizontali, a ne po vertikali. Dok se nalazite u programu za rad sa grafikom, zapitajte se koliko će slika biti kratka, da biste dobili pravi rezulat kada je postavite u vertikalnim pločama. Najefikasnija grafika je visoka samo jedan ili dva piksela, dok je širina jednaka širini sidebara. Nakon što ste definisali idealne dimenzije, odsecite sliku do te veličine (ili napravite deo slike te veličine) i izvezite je. 3. U Dreamweaveru napravite CSS stil. Opciju Repeat podesite na repeat-y. Ako iz nekog razloga treba da napravite pozadinu strane bez CSS-a, i dalje možete da sprečite da se postavljaju ploče sa slikom po horizontali i to tako što ćete sliku napraviti širom od prozora pretraživača. Pre nego što se pojavio CSS, nije bilo ništa neuobičajeno da naiđete na sliku koja se koristi kao pozadina, čija je visina bila jedan piksel, a širina nekoliko hiljada piksela. Tabele boja ispred tapeta Od kad na web stranama postoje slike u pozadini, postoje dizajneri koji pokušavaju da ispred šablona u stilu tapeta postave neki tekst. Taj tekst skoro nikad nije vidljiv, osim ako je šablon tako suptilan da se teško i primećuje. Kreativno rešenje ovog problema je da se tekst stavi u potpuno obojeni objekat (kao što je ćelija tabele ili nivo), koji se nalazi ispred pozadine na strani Mešanje i uparivanje za dobijanje efikasnih i fleksibilnih efekata sa slikama Kada se naredni put spremite da odsečete neku sliku koja ide u liniju za navigaciju, baner sa naslovom ili sidebar, zapitajte se da li mešanje i podešavanje slika u pozadini i onih koje su prvom planu, kao i boja u pozadini i slika može da Vam pomogne. 64 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Slike i struktura strane Slike su ključne u dizajnu web strana. Pošto se web strane danas uglavnom uređuju pomoću tabela, to se slike koriste za definisanje strukture strane, ali u tabelama. One mogu da se koriste kao nevidljivi stabilizatori strukture tabele, ili kao vidljivi raspored tabele, ili tabele sa delovima slika. U ovom odeljku smo se pozabavili i jednim i drugim načinom upotrebe. Slike u GIF formatu od jednog piksela U pitanju je slika u GIF formatu koja se sastoji od samo jednog piksela, obično transparentnog. Ovakve male jedinice su među web dizajnerima popularne jer mogu da reše neke opšte probleme rasporeda, kao i da doprinesu nekim interesantnim mogućnostima. Često se koristi termin separator (spacer) ili podmetač. Kreiranje slika u GIF formatu od jednog piksela Ovakve slike se lako mogu napraviti u bilo kom programu za rad sa grafikom. Otvorite novi dokument sa veličinom kanvasa podešenom na 1x1 i podesite boju kanvasa (ili pozadine) na transparent (providna). Zatim tu sliku upamtite i izvezite kao GIF, sa uključenom opcijom transparent. Slike u GIF formatu od jednog piksela u HTML-u Ovakve slike se u HTML-u najviše koriste da podupru otvorene ćelije tabele i da stabilizuju strukturu tabele. Ubacite neku od ovih providnih slika u ćeliju tabele koja bi inače bila prazna i slici dodelite širinu i visinu, koje želite da ima ćelija tabele. Dodavanje vrsta i kolona koje nemaju ništa drugo osim providnih GIF slika različite veličine, može da dovede do vrlo lepih tabela. Dizajneri ove vrste i kolone nazivaju kontrolnim vrstama i kolonama. Kada Fireworks pravi odsečenu sliku, ili kada Dreamweaver pravi tabelu u režimu Layout, ili kada se koristi komanda Convert Layers to Table, programi dodaju kontrolne vrste i kolone, koje su ispunjene providnim slikama u GIF formatu. Program, čak, umesto Vas pravi slike od jednog piksela. U Fireworksu ove slike dobijaju ime spacer.gif. U Dreamweaveru, one dobijaju ime spacer.gif ili transparent.gif. Ako ste koristili neke od mogućnosti za krerianje tabela, onda na svom sajtu verovatno imate neke slike u GIF formatu od jednog piksela. Slobodno ih koristite. Rad sa slikama u GIF formatu od jednog piksela u Dreamweaveru Ovakva slika se na stranu ubacuje kao i bilo koja druga. Jedini problem je što su ove slike tako tanke, tako da ih je teško videti u prikazu Design. Evo kako se ubacuje ovakva slika: 1. Ubacite sliku kao i obično. Kada se pojavi u dokumentu ona će biti automatski izabrana. 2. Nemojte deselktovati sliku, jer ćete je kasnije teško pronaći. Odmah preko Property Inspectora dodelite visinu i širinu toj slici. Dodelite joj i praznu oznaku alt (tako što ćete iz padajućeg menija polja Alt, izabrati opciju <empty>) Ako izgubite sliku od jednog piksela, izaberite stavke koje se nalaze oko nje i idite u prozor Code. Negde u izabranom kodu ćete naći oznaku <img>. Tu možete da promenite širinu i visinu. 3. Čak i posle promene veličine slike, providna slika se ne može videti (ona je providna). Ipak, ako znate gde se otprilike nalazi, možete da klikćete okolo dok je ne pronađete. Tabela sa odsečenom slikom Ovakve tabele se dobijaju kada pravite raspored (kao što je linija za navigaciju, ili baner sa naslovom) u programu za rad grafikom za web, podelite sve ovo nekim objektima za odsecanje i izvezete HTML i slike. Ipak, struktura strane koja se dobija ovim tabelama nije tako jednostavna ili fleksibilna, kakva bi mogla biti. Kompleksnim tabelama treba više vremena da se prikažu u pretraživaču u odnosu na jednostavnije, a ponekad se generiše više slika nego što je potrebno. Sličice kao separatori (spacer) ili popuna slika preko opcije padding Tabele sa odsečenim slikama ubacuju spacer slike kad god je potrebno da se stavke odvoje. To nije uvek neophodno. Slike se mogu odvojiti (po horizontali ili vertikali) i dopunom preko opcija vspace i hspace (bez CSS-a) ili preko opcije padding (CSS), ili dodavanjem popune ćelija u ćelije tabela u kojima se slike nalaze. Opcija hspace dodeljuje prostor na obe strane slike, tako da je slika u sredini dovoljna da odvoji sve tri slike. Ponovna upotreba, promena veličine i zamena Tabele sa odsečenim slikama takođe prave posebnu sliku za svaku ćeliju u tabeli, iako je ponekad efikasnije da se ista slika koristi više puta. Prave se slike pune veličine, čak i kad bi moglo da se istoj slici promeni veličina i da se dobije isti efekat. Pogledajte svoje slike i proverite da li se to desilo. Ako jeste, zamenite različite slike, samo jednom. Veće slike zamenite manjim. Posebnu pažnju treba da obratite na spacere, koji su ostali u pojedinim budžacima. Efikasnosti radi, svi spaceri koji se ne vide treba da budu slike od jednog piksela u GIF formatu. 65 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Podešavanje generisanja tabela u Fireworksu Ako za kreiranje tabela sa odsečenim slikama koristite Fireworks, onda će Vam za kreiranje efikasnih slika i HTML koda pomoći sledeći saveti: • Pažljivo poravnajte sve odsečene objekte, tako da se kreira što je moguće manje vrsta i kolona. • Nacrtajte odsečene objekte onako kako Vam je potrebno, a prazan prostor ostavite samo tamo gde treba da se prikaže pozadina tabele ili strane. • Za popunu praznih ćelija spacerima (slikama separatorima) možete koristiti komandu File > HTML Setup i karticu Table u okviru za dijalog HTML Setup. • Prilikom izvoza ne treba da bude izabrana opcija Include Areas Without Slices. (Ćelije tabele koje nastaju na osnovu površina bez odsečenih slika će biti ispunjene spacerima od jednog piksela u GIF formatu). Ubacivanje elemenata u pozadini Programi za kreiranje grafike za Web generalno ne prave slike u pozadini ili svoj izlaz zasnivaju na bojama pozadine. Ipak, to možete i elegantnije uraditi. Analizirajte strukturu svoje tabele i pogledajte koliko slika možete da zamenite pozadinskim elementima. Poštujte strukturu tabele Ako pravite svoju tabelu koja sadrži slike, na Vama je da učinite da ta tabela bude solidna i stabilna. Pre nego što počnete da menjate tabelu koju ste dobili u Fireworksu ili Photoshopu, treba da budete sigurni da razumete osnovnu strukturu te tabele, da je ne biste narušili. Tabele sa odsečenim slikama su stabilne zbog načina na koji su struktuirane. Tabele iz Fireworksa, na primer, imaju sledeće strukturne karakteristike: • Individualne ćelije nemaju dimenzije, ali cela tabela ima širinu definisanu u pikselima. • "Kontrolna vrsta" i "kontrolna kolona" od jednog piksela u GIF formatu se postavljaju na vrhu i sa desne strane, tako da se interni elementi tabele štite od promena. Ove stavke su ubačene iz dobrog razloga. Ako ih poremetite, tabela se u pretraživaču možda neće prikazati na pravi način. Pozicioniranje tabela preko CSS-P-a Ako ne nameravate da se Vaše web strane koriste u Netscapeu 4.x ili nekim starijim pretraživačima, sjajne efekte u rasporedu možete da dobijete putem pozicioniranja slika preko CSS-a. Ove slike izgledaju kao da plivaju iznad ostatka strane. Ako želite da u Drearmveaveru napravite sliku koja je pozicionirana preko CSSa, treba da uradite sledeće: 1. Napravite sliku kao i obično. 2. Ubacite sliku u dokument. Ovo ćete uraditi tako što ćete kursor postaviti na početak sadržaja i pozvati komandu Insert > Image, ili upotrebiti paletu Insert. Treba da budete sigurni da slika nije u okviru drugih oznaka, kao što su tabele, pasusi ili naslovi. 3. Otvorite pano CSS Style (Window > CSS Style) i kliknite ikonu New Style (ili desnim tasterom miša kliknite Tag Inspector i izaberite opciju New Rule). Kada se otvori okvir za dijalog, napravite korisničku klasu sa ekstenzijom .image ili .logo. Možete i da upotrebite neko drugo opisno ime. Kliknite OK da biste zatvorili okvir za dijalog. 4. U okviru za dijalog CSS Style Definition idite u kategoriju Positioning. Izaberite Absolute Positioning i dodelite neki broj opcijama Left i Right, ili Top i Bottom. (Same vrednosti nisu bitne, jer ih kasnije možete promeniti). Kliknite OK da biste zatvorili ovaj okvir za dijalog. 5. U prozoru Document izaberite sliku. Na Tag Selectoru desnim tasterom miša kliknite oznaku img i iz podmenija Set Class izaberite korisničku klasu koju ste napravili. 6. Sada ste svoju sliku pozicionirali preko CSS-a. Poziciju na strani možete podesiti ako kliknete ivicu slike tako da se pojavi Layer Property Inspector i onda je prevlačite po strani. Slika bi trebalo da pliva iznad svih drugih elemenata na strani koji nisu pozicionirani preko CSS-a. Jedno upozorenje u vezi ovakvih slika: Ako je slika u GIF formatu sa efektima providnosti, onda treba pažljivo da razmislite o tome kako da ivice slike postavite tako da u odnosu na druge elemente budu glatki prelazi. Lowsrc Postoji toliko divnih stvari koje na web stranam dobro rade samo za korisnike sa velikom propusnom moći, ali je lowsrc najbolji za saobraćaj sa malom propusnom moći. Sta je lowsrc? U pitanju je alternativna slika kojoj možete zadati da se u pretraživaču prikazuje na mestu druge slike, dok se ta druga učitava. Recimo da imate sjajanu, realističku fotografiju Nijagarinih vodopada, ili fotografiju astronauta koji šetaju po Marsu i da Vam te slike zaista trebaju na web strani, ali zauzimaju 30K ili više. Napravite alternativnu verziju slike, sa istim dimenzijama, ali vrlo malu, veličine od 1K i zadajte je kao lowsrc za glavnu sliku. Korisnik sa sporom 66 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 vezom će na svojoj strani videti malu sliku, na mestu velike, sve dok se velika ne učita i bude spremna za prikazivanje. Ako želite da kreirate i ubacite sliku lowsrc, treba da uradite sledeće: 1. U svom programu za rad sa grafikom otvorite veliku sliku. U pitanju je verovatno slika u GIF ili JPEG formatu sa sjajnim bojama. 2. Promenite opcije vezane za izvoz i optimizaciju, tako da napravite GIF sliku sa samo dve boje (popularno je crno-bela, ali mogu se koristiti i bilo koje druge dve boje), podešavajte sve dok ne dobijete najmanju moguću veličinu slike, a onda je izvezite i upamtite kao GIF. (U lowsrc slici skoro da ne postoje tačke koje se ne učitavaju trenutno). 3. U Dreamweaveru ubacite glavnu sliku na svoju stranu. 4. Dok je slika izabrana, u Property Inspectoru potražite polje Low Src. Pronađite lowsrc verziju svoje slike. Lowsrc verziju slike nećete moći da pregledate u lokalu, pošto će se glavna slika prikazati suviše brzo. Kod spore veze, efekat izgleda skoro kao animacija, čime se koriste prednosti sporog učitavanja glavne slike. Definisanje rasporeda pomoću prostora rezervisanog za sliku Koliko puta Vam se desilo da morate da napravite stranu, na kojoj još ne postoji tekst i grafika? Da li ste ikada upali u situaciju u kojoj pravite stranu, na koju treba da stavite neku sliku, koja još uvek nije napravljena, tako da morate da se zaustavite i na to mesto postavite nešto drugo? Dizajneri grafike u svetu štamparstva koriste grčki tekst ili FPO za prostore rezervisane za slike. U Dreamweaveru, za brzo dobijanje grčkog teksta možete da koristite neki od generatora lažnog teksta. Za kreiranje koda za sliku bilo koje veličine, možete da koristite objekat Image Placeholder, sve dok na svoje mesto ne dođe i prava slika. Ubacivanje mesta rezervisanih za slike Ako u Dreamweaveru želite da ubacite mesto rezervisano za sliku, treba da uradite sledeće: 1. U otvorenom dokumentu postavite kursor tamo gde želite da se ubaci privremena slika. 2. Na paleti Common Insert, iz objekta Images izaberite Image Placeholder. Možete i da iz menija izaberete Insert > Image Objects > Image Placeholder. 3. Otvoriće se okvir za dijalog Image Placeholder. Dodelite visinu i širinu, da biste definisali prostor koji slika treba da zauzme, boju rezervisanog mesta za sliku (siva je dobar izbor, ako ne želite da to mesto suviše odudara od neke usvojene šeme boja), dodajte alt tekst radi dostupnosti i prikazivanja u pretraživaču i dajte ime koje će se u tom mestu pojavljivati u prozoru Design, a koje Vas podseća šta ste to hteli da uradite. (Ime mora biti ispravno radi korišćenja u skriptovima, tako da ne sme da sadrži razmake ili specijalne karaktere.) Nakon što podesite ove opcije, kliknite OK da biste zatvorili okvir za dijalog i ubacili rezervisano mesto. 67 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako pogledate kod svog ubačenog mesta za sliku, videćete da je u pitanju obična oznaka img, sa praznim atributom src i ubačenim atributom style iz CSS-a, koji podešava boju pozadine. Ovde nema ničeg što nije standardno, tako da pretraživač nema problema da interpretira kod. Pošto nema zadate slike, pa se ona ne može stvarno prikazati, pretraživač koristi boju pozadine i na tom mestu alt tekst. Rad sa mestima rezervisanim za slike Mesta rezervisana za slike treba koristiti ne samo za definisanje mesta gde će se kasnije naći slika, već i kao pomoć prilikom određivanja njenih idealnih dimenzija. Veličinu ovog mesta možete menjati preko Property Inspectora ili preko ručica. Tekuće dimenzije se prikazuju na samom mestu, a i u Property Inspectoru. Kada ste spremni da napravite konačnu sliku, te dimenzije možete da koristite kao vodilje. Nakon što ste napravili sliku, vratite se u Dreamweaver, izaberite mesto rezervisano za sliku i preko Property Inspectora dodelite atribut src. Nakon što ste podesili atribut src, mesto rezervisano za sliku postaje obična slika. Ako koristite Fireworks, onda je kreiranje konačne slike na mestu rezervisanom za sliku još jednostavnije. Kada ste spremni da napravite sliku, izaberite mesto rezervisano za sliku i u Property Inspectoru kliknite dugme Create. Ovim se pokreće Fireworks i u njemu novi dokument, sa veličinom okvira podešenom na dimenzije koje je imalo mesto rezevisano za sliku. Napravite završnu sliku i kliknite dugme Done u prozoru Fireworks. Fireworks će Vas provesti kroz proces zapisivanja i izvoza, pre nego što se vratite u Dreamweaver. Integracija Dreamweavera i Fireworksa Ako za kreiranje web strana koristite Dreamweaver, a za kreiranje slika Fireworks, onda integracijom ova dva programa možete da dobijete neke dodatne mogućnosti. Kako radi ova integracija Različiti programi u okviru Srudio MX-a 2004 komuniciraju jedan sa drugim tako što jedan drugom ostavljaju HTML komentare i napomene o dizajnu. HTML komentari postoje u bilo kom HTML tekstu koji generiše Fireworks, tako da Dreamweaver dobija važne detalje o tome kako je napravljen HTML, koja izvorna datoteka ga je kreirala, itd. Kada u Dreamweaveru izaberete tabelu koja je napravljena u Fireworksu, ako Dreamweaver naiđe na ove komentare, prikazuje se specijalni Fireworks Table Property Inspector i omogućava pokretanje i uređivanje. Napomene o dizajnu (Design Notes) su male XML datoteke sa ekstenzijom .mno, koje se nalaze u datotekama named_notes. Kad god iz Fireworksa izvozite sliku u fasciklu koja je deo lokalnog sajta Dreamweavera, Fireworks kreira napomenu o dizajnu, nakon izvoza, sa dodatom ekstenzijom .mno. Prema tome, slika po imenu mydog.jpg kreira datoteku sa napomenom o dizajnu po imenu mydog.jpg.mno. Ova MNO datoteka se stavlja u fasciklu _notes, koja se nalazi u istoj fascikli u kojoj je i slika koja se izvozi. Ako ta fascikla ne postoji, prilikom izvoza će biti napravljena. Kada u Dreamweaveru ubacite ovu sliku i kasnije je izaberete, program traži ovu MNO datoteku. Ako je pronađe, on zna da je u pitanju slika koja dolazi iz Fireworksa, tako da dobijate specijalni Fireworks Image Property Inspector. Program takođe zna lokaciju PNG datoteke koja je napravila ovu sliku, tako da se omogućava pokretanje i uređivanje. Ako je slika kreirana na osnovu parčeta iz Fireworksa, MNO datoteka takođe sadrži i liniju koda koja ukazuje na deo slike od kojeg je nastala. 68 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Brisanje komentara onemogućava integraciju sa stavkama koje su napravljene u Fireworksu, kao što su tabele sa odsečenim slikama. Brisanje fascikle _notes ili MNO datoteke onemogućava integraciju, kao što su "pokreni i menjaj" za pojedine slike. Ubacivanje HTML-a koji je nastao u Fireworksu HTML objekat iz Fireworksa nudi lak metod za dobijanje tabele sa odsečenim slikama, zajedno sa JavaScriptom koji se koristi za efekat rollover, u Dreamweaveru. Većina ljudi generalno neće koristiti Fireworks za dizajn celih web strana. Umesto toga, oni u Fireworksu prave samo liniju za navigaciju, ili samo baner sa naslovom, a ostatak strane prave u Dreamweaveru. HTML koji dolazi iz Fireworksa ima mnogo više ograničenja, kada se koristi za definisanje rasporeda strana. HTML objekat iz Fireworksa se u sve ovo sjajno uklapa. Evo kako ga treba koristiti: 1. U Dreamweaveru napravite rasproed za svoju stranu, ukljujući i tabele i CSS nivoe koji su potrebni za formatiranje. Ostavite prostor za tabelu sa odsečenim slikama. 2. U Fireworksu napravite datoteku koja je veličine linije za navigaciju, baner sa naslovom ili neki drugi element strane koji želite da napravite. Napravite svoju grafiku, nacrtajte objekte koji se odsecaju, dodelite linkove i ponašanje, ili bilo šta drugo što želite. 3. Pre izvoza izaberite opciju File > HTML Setup. U okviru za dijalog HTML Setup proverite da li je opcija HTML Style podešena na Dreamweaver HTML. Ova opcija dovodi do toga da Fireworks dodaje komentare, koji su Dreanrweaveru potrebni za pravilnu integraciju. 4. Prilikom izvoza proverite da li ste u okviru za dijalog Export izabrali opciju HTML and Images. 5. U Dreamweaveru otvorite dokument u koji želite da ubacite element iz Fireworksa i postavite kursor tamo gde treba da se ubaci. 6. Sa palete Insert, izaberite Fireworks HTML. Kada se otvori okvir za dijalog, pronađite HTML datoteku koju želite da ubacite (nemojte da brinete o pronalaženju slike, to će uraditi Dreamweaver). Osim ako ne planirate da taj element iz Fireworksa ubacuejte u još neki dokument u Dreamweaveru, izaberite opciju Delete File After Insertion. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog i obavili umetanje. U dokumentu u Dreamweaveru sada imate tabelu iz Fireworksa, kao i JavaScript kod koji je sa njom povezan. Tu su i komentari u HTML-u koji identifikuju tu tabelu. Od sada, kada izaberete tabelu, Dreamweaver prikazuje specijalni Fireworks Table Property Inspector. Pored uobičajenih osobina tabele, u ovom Inspectoru se nalaze i informacije koje su potrebne za pokretanje Fireworksa. 69 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Launch and edit Pokreni i menjaj (launch-and-edit) je opšti termin koji se u Macromediji koristi za opisivanje mogućnosti integracije programa. U pitanju je mogućnost da izaberete stavku koju ste napravili u jednom programu (kao što je Fireworks ili Flash), iz nekog drugog programa i da automatski pokrenete taj drugi program, otvorite željenu datoteku sa izvornim kodom, promenite šta želite i vratite se u početni program. Ako je u pitanju integracija Dreamweavera i Fireworksa, to znači da ako izaberete sliku ili tabelu, koji su napravljeni u Fireworksu i kliknete dugme Edit na Property Inspectoru, automatski dolazi do pokretanja Fireworksa, koji otvara izvornu PNG datoteku, koju sada možete da menjate. Osnovni proces je jednostavan: 1. 2. 3. 4. U Dreamweaveru izaberite sliku ili tabelu i kliknite dugme Edit na Property Inspectoru. Možete i da desnim tasterom miša kliknete sliku i da iz pomoćnog menija izaberete opciju Edit with Fireworks. Kada se otvori Fireworks, u njegovom prozoru će na vrhu biti specijalna paleta pokreni i menjaj. Promenite šta želite i nakon što završite, kliknite dugme Done. Fireworks sada pamti PNG datoteku, ponovo je izvozi, ako je potrebno i generiše novu sliku ili HTML, nakon čega zatvara datoteku. Ponovo se prikazuje Dreamweaver u kome se ponovo učitavg slika ili HTML. Nakon što ste u Dreamweaver ubacili HTML iz Fireworksa, morate paziti šta sa tim ubačenim elementom radite, ako želite da ga kasnije ponovo pokrećete u Fireworksu. Promena linkova, alt teksta ili nekih drugih informacija koje se ne odnose na strukturu HTML-a generalno ne predstavlja problem. Ako se odlučite na neke strukturne promene u tabeli i posle toga probate da to menjate u Fireworksu, bićete upozoreni da Fireworks prilikom ažuriranja HTML koda može da prebriše ono što ste u međuvremenu promenili u Dreamweaveru. Nemojte da dopustite da se to desi. Isto će se desiti i ako izaberete pojedinačnu sliku unutar tabele sa odsečenim slikama i pokušate da je menjate po principu pokreni i menjaj. Čak i ako želite da ažurirate samo tu sliku, Fireworks obnavlja celu tabelu. Optimizacija u letu Jedna od najboljih osobina integracije je mogućnost da se u Dreamweaveru u letu optimizuju slike. Recimo da ste uvezli neku animiranu sliku, za svoju stranu "šta je novo" i da kad dođete u Dreamweaver ustanovite da ono što ste optimizovali kao JPEG ili providnost u GIF formatu ne radi, ili da je vreme za animaciju pogrešno izraučunato. Izaberite sliku, pa onda izaberite Commands > Optimize Image in Fireworks, ili kliknite sliku desnim tasterom miša i iz pomoćnog menija izaberite opciju Optimize Image in Fireworks. Možete i da kliknete dugme Optimize in Fireworks, sa palete Property Inspector. Pokrenuće se Fireworks. Otići ćete direktno u specijalnu verziju okvira za dijalog Export Preview, po imenu Optimize Image. Ovde možete da promenite podešavanja vezana za optimizaciju, nakon čega treba kliknuti na Update. Fireworks će ponovo izvesti sliku, sa novim podešavanjima i vratiti Vas u Dreamweaver. Optimizacija u letu je posebno korisna kada dođe do promene veličine datoteka. Možda ćete raditi na strani sa nekoliko slika i doći do zaključka da neka od njih treba da bude veća ili manja. Pošto se ne preporučuje da se veličina slike menja u Dreamweaveru, postavlja se pitanje šta ćete uraditi? Promenite veličinu slike, ostavite je izabranom i izaberite Commands > Optimize Image in Fireworks (ili desnim tasterom miša kliknite na sliku i izaberite komandu iz pomoćnog menija). Kada se otvori okvir za dijalog Optimize Image, datoteka će biti podešena da se optimizuje na novu veličinu. Nakon što kliknete na Update i vratite se u Dreamweaver, pogledajte indikatore za visinu i širinu na Property Inspectoru. Videćete da oni više nisu ispisani masnim slovima, što znači da je veličina slike promenjena na pravi način. Proširenje Fireworksa vezano za integraciju Ako ugrađene mogućnosti integracije između Dreamweavera i Fireworksa nisu dovoljne, Dreamweaver Exchange ima nekoliko proširenja koja mogu da učine i više. To su besplatna proširenja koja su odobrena od strane Macromedije: InstaGraphics Extensions for Dreamweaver MX i Web Photo Album 2.1 for Dreamweaver MX. InstaGraphics Extensions for Dreamweaver MX Prema Macromediji, ovo proširenje omogućava da brzo napravite web grafiku prema Fireworksu, direktno u Dreamweaveru, bez nekih posebnih znanja, pa čak i ako nikad pre niste radili sa Fireworksom. Tu spadaju tri stavke: komanda Convert Text to Image, komanda Convert Bullets to Images i objekat Fireworks Button. 70 / 299 Fakultet organizacionih nauka • • • Dreamweaver MX 2004 Komanda Convert Text to Image – Kao što i samo ime ukazuje, ova komanda od teksta u Dreamweaveru pravi sliku. Vi podešavate font i stil po želji. Možete je primeniti na izabrani tekst ili na sav tekst koji se u dokumentu nalazi između određenih oznaka (kao što je tekst izmedu oznaka M). Ova komanda se nalazi u meniju Commands. Komanda Convert Bullets to Images – Ova komanda konvertuje sve neuređene liste u dokumentu u liste sa grafičkim oznakama i tabele sa dobrim formatiranjem. Vi možete da izaberte veličinu i stil oznake, a Fireworks čak osigurava da se ovo slaže sa bojom pozadine u dokumentu. (Treba da znate, da nakon što završite sa ovom komandom, lista tehnički više nije lista, pošto se ne nalazi između oznaka ul.) Komanda se nalazi u meniju Commands. Objekat Fireworks Button – Ovaj objekat se ponaša slično kao objekat Flash Button, koji postoji u Dreamweaveru. Tu možete da birate stil dugmeta, dodeljujete svoj tekst i informacije o linku, kao i da kreirate dugme sa podešenim rollover kodom. Ovo je kao prečica za kreiranje dugmeta i stanja rollover. Dodaje se i ponašanje tipa Swap Image, izvozi se sve i Fireworksa i stavlja u HTML u Dreamweaveru. Ovo može da Vam uštedi prilično vremena, dokle god Vam stilovi dugmadi odgovaraju. Ovaj objekat se nalazi na kartici Media, palete Insert. Web Photo Album 2.1 for Dreamweaver MX (Macromedia) Ovo popularno proširenje omogućava da napravite svoj HTML foto album i to na osnovu fotografija koje imate na svom računaru. Vi birate grafički stil i druge detalje, kao i fotografije koje ćeti ubaciti. Generišu se male sličice, HTML strane koje će se prikazati i sve ostalo. Interfejs ima oblik čarobnjaka koji Vas vodi kroz jednostavne korake, i koji je vrlo intuitivan Komanda se nalazi u meniju Commands. 71 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 6. Linkovi i navigacija Osnovno o linkovima Ako želite da efikasno koristite linkove, prvo morate da naučite kako oni rade u pretraživačima i kako Dreamweaver MX 2004 njima rukuje. U narednom odeljku smo objasnili oznaku anchor (a), šta ona radi i kako Dreamweaver može da pomogne u ubacivanju i upravljanju linkovima. Kako linkovi rade u pretraživaču Hiprelinkovi se prave tako što se neki element na strani okruži kotvom, odnosno oznakom a. Atribut href, što je skraćenica za hypretext reference, definiše odredište linka. Tekst na kome je postavljen link se u pretraživaču označava na neki način, tako da se može jasno razlikovati od okolnog teksta. Obično je link podvučen i obojen plavom bojom. Nakon što ste posetili adresu na koju taj link upućuje, linkovi obično postaju purpurne boje. Podrazumevano je da se slike na kojima je postavljen link prikazuju sa okvirom u istim bojama, premda mnogi web dizajneri definišu svoje boje. Kada prelazi preko linka, kursor menja oblik u šaku sa kažiprstom upretim u nešto, člme se ukazuje da se taj link može kliknuti. Apsolutne ili relativne putanje URL je skraćenica za universal resource locator. URL ili web adresa je u suštini pokazivač na određeni dokument ili objekat koji se nalazi negde na Internetu, sa datom putanjom koja opisuje kako da dođete do tog dokumenta. URL putanja može biti apsolutna, relativna u odnosu na dokument, ili relativna u odnose na koren. Apsolutna adresa je adresa na Internetu koja sadrži sve informacije koje su računaru potrebne u vezi lokacije koja se traži. Tu spadaju informacije o tome kako se vraćaju informacije, uključujući protokol, domen, fasciklu i ime datoteke. http://www.mfa.org/exhibitions/upcoming.htm Zašto je protokol tako bitan? Svim vrstama web adresa se može pristupiti preko apsolutnog URL-a, uključujući i web strane, adrese elektronske pošte, FTP sajtove, itd. Protokol ukazuje na to koja vrsta resursa se traži. Relativna putanja je skraćeni oblik adrese kod koje se razlčiti delovi adrese, kao što je protokol, adresa sajta ili fascikla, mogu predvideti na osnovu ostalih informacija koje stoje na raspolaganju. Putanje relativne u odnosu na dokument daju samo informacije koje su potrebne da iz tekućeg dokumenta odete na željenu stranu. Ako želite da povežete dve strane koje se nalaze u istoj fascikli, potrebno je da zadate samo ime datoteke, na primer (sa strane mojastrana.html) :mojadrugastrana.html. Ako želite da link postavite na neku stranu koja je dublje u strukturi fascikle, u odnosu na stranu sa koje se link poziva, onda treba da navedete i ime fascikle i ime datoteke (ako je link na strani mojastrana.html) mojafascikla/mojatrećastrana.html. Ako želite da link ukazuje na drugu stranu koja je u fascikli koja je iznad fascikle u kojoj se trenutno nalazite, onda preko ../ ukazujete na to da treba da se popnete jedan nivo naviše Iza ovog sledi ime datoteke (linka sa strane mojastrana.html) : ../index.html. Ako želite da se u hijrearhiji fascikli krećete naviše ili naniže za više nivoa, onda treba da navodite sva imena fascikli ili indikatore ../ više puta, po jednom za svaki nivo. pages/myfolder/mythirdpage.html ../../index.html Putanja relaitvna u odnosu na koren uspostavlja vezu između datoteke i korena celog sajta. Koren sajta je ono što smatrate generalnim imenom sajta, kao što je na primer www.macromedia.com ili www.mfa.org: /index.html /pages/mypage.html 72 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 /pages/myfolder/mythirdpage.html Putanje koje se zadaju relativno u odnosu na koren uvek ispred same putanje imaju kosu crtu (/), što možete videti i u primerima koje smo dali. Zašto biste koristili putanje relativne u odnosu na koren sajta? Ove putanje kasnije mogu da uštede vreme, ako je potrebno da promenite organizaciju dokumenata na svom sajtu. Ako imate vesti u nekom preduzeću, koje ste postavili onlajn i ako mesečne članke prebacujete u fasciklu Archive, kada započne novi mesec onda putanje koje se zadaju relativno u odnosu na koren sajta mogu da uštede vreme koje biste proveli u prepravljanju linkova koji sada treba da budu u skladu sa novom strukturom. Atribut target Kada kliknete link, podrazumeva se da se novi dokument otvara u istom prozoru pretraživača u kome je prethodno bio otvoren tekući dokument. Sa druge strane, HTML omogućava da zadate gde link treba da se otvori u novom prozoru pretraživača, ili ako se radi o frejmovima, onda u određenom frejmu. Ovo se zadaje putem opcionalnog atributa oznake anchor <a>, a to je target. Ako želite da se novi dokument otvori u posebnom prozoru pretraživača, onda atribut target treba da podesite na _blank. Linkovi u Dreamweaveru Kreiranje linkova je zadatak sa kojim ćete se prilikom definisanja web sajtova često suočavati. Srećom, Dreamweaver omogućava da to radite brzo i lako. Sada kada ste shvatili osnovne principe URL putanja, spremni ste da koristite Property Inspector iz Dreamweavera i da dodajete linkove na svoj sajt. Kad god je u Dreamweaveru izabran neki element teksta ili neka slika, na Property Inspectoru se nalaze polja za linkove, kao i za kontrolu informacija vezanih za taj link. Dodeljivanje apsolutnih linkova Svi apsolutni linkovi se moraju uneti u polje Link, Property Inspectora. Morate da ukucate kompletan link, uključuijući i protokol. Ako radite u okviru sajta koji ste definisali u Dreamweaveru, možete da koristite i pano Assets, koji može pomoći u rukovanju apsolutnim URL adresama. Otvorite pano Assets (Window > Assets) i pređite u kategoriju URL Dodeljivanje relativnih linkova Ako želite da dodate relativni link, izaberite element, a onda ili u polju Link Property Inspectora, unesite relativni URL, ili možete da upotrebite ikone Browse ili Point-to-File. I jedan i drugi metod dovode do toga da Dreamweaver pravi putanje relativne u odnosu na dokument ili u odnosu na koren sajta. Ako želite da potražite link, kliknite dugme Browse (ikona fascikle), koje se nalazi pored polja Link i preko okvira za dijalog koji se otvara izaberite datoteku koju želite. Možete i da izaberete da li želite da link bude relativan u odnosu na dokument ili u odnosu na koren sajta. Ako želite da koristite opciju Point-to-File treba da otvorite pano Site, ili da u Dreamweaveru otvorite još neki dokument. Kliknite ikonu Point-to-File (izgleda kao nišan puške) i vucite odatle sve dok se kursor ne nađe 73 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 iznad dokumenta na koji želite da postavite link, bilo da je u pitanju ikona te datoteke u panou Site, ili prozor Document sa tom datotekom. Putanje relativne u odnosu na dokument i putanje relativne u odnosu na koren sajta u Dreamweaveru Svaki put kada pretražujete datoteku za koju pravite relativni link, Dreamweaver daje opciju kreiranja linka sa putanjom relativnom u odnosu na dokument i u odnosu na koren sajta. Ovo podešavanje ostaje na istoj vrednosti sve dok ga ponovo ne promenite. Nije retroaktivno (ne menja linkove koje ste već napravili, putem onog drugog metoda). Ako relativni link pravite preko opcije Point-to-File, onda nemate mogućnost da birate vrstu relativnog linka koju pravite. Umesto toga se koristi onaj vrsta koju ste koristili poslednji put. Ako želite da promenite podrazumevanu vrednost, dodelite najmanje jedan link, preko opcije Browse i u okviru za dijalog Select File podesite željenu vrstu linka. Linkovi koji su relativni u odnosu na koren sajta ne mogu da se pregledaju lokalno u pretraživaču. Ako u Dreamweaveru pokušate da pogledate stranu sa putanjom relativnom u odnosu na koren sajta, Dreamweaver privremeno konvertuje taj URL u putanju relativnu u odnosu na dokument. Kada kliknete link, da biste pogledali stranu, to će raditi, ali naredne putanje neće raditi u lokalu, pošto zavise od korena sajta. Iz tog razloga u jednom trenutku možete da pogledate samo jednu stranu. Linkovi na elektronsku poštu Linkovi na elcktronsku poštu (email link) su druga vrsta apsolutne putanje. U Dreamweaveru postoji nekoliko različitih mogućnosti za kreiranje ovakvih linkova. Najjednostavnije je da koristite Property Inspector. Izaberite tekst ili sliku koju želite da koristite kao link, i u polju Link Property Inspectora unesite adresu, zajedno sa protokolom mailto: mailto:[email protected] Na slici je prikazano ono što se dešava. Obratite pažnju na to da iza dve tačke nema praznog prostora. Ako ne želite da svaki put unosite protokol mailto: Dreamweaver ima i objekat Email Link. Evo kako se on koristi: 1. Ako želite da link na elektronsku poštu napravite za sliku, kliknite sliku da biste je izabrali. Ako želite da ovakav link napravite za tekst, ili unesite tekst, ili ga izaberite i postavite kursor tamo gde želite da se tekst nađe. 2. Sa palete Insert izaberite objekat Email Link (kategorija Common), ili izaberite Insert > Email Link iz glavnog menija Dreamweavera. 3. Kada se pojavi okvir za dijalog Insert Email Link, unesite email adresu na koju želite da link ukazuje (bez protokola mailto:) i kliknite OK. 74 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Nakon što ste na ovaj način ubacili email link, ako pogledate Property Inspector, videćete da se u polju Link prikazuje apsolutni URL, isto kao da ste ga sami uneli. Metodi i alati za navigaciju Rad sa linkovima obuhvata mnogo više od pukog ukazivanja preko slika i teksta na druge web strane. Kotve sa imenima, mape slika, kao i meniji koji iskaču su alternativni način upotrebe linkova. Rollover efekat i linije za navigaciju pretvaraju jednostavne grafičke linkove u interaktivne elemente na strani. Dreamweaver može da Vam pomogne u kreiranju svih ovih elemenata. Kotve sa imenima Zar nije sjajno kada posetite web sajt na kome su dizajneri potrošili izvesno vreme u kreiranju linkova koji omogućavaju da se krećete po dugačkim stranama, tako da ne morate da idete naviše i naniže, da biste pronašli ono što tražite? Možda ste ovo videli na strani sa najčešće postavljenim pitanjima. Kad god kliknete neko pitanje, dobijete odgovor samo na to pitanje. Kada pravite link na određeno mesto u dokumentu (ne na sam dokument), pravite ono što se zove kotva sa imenom. Kako rade kotve sa imenima Kotva sa imenom je u HTML-u oznaka kotve a, bez atributa href, ali sa atributom name. <a name="outerspace"></a> Sama kotva je nevidljiva. Sa druge strane, tekstualni ili linkovi sa slikama mogu da ukazuju na tu kotvu, tako što će u svoj atribut href ubaciti ime te kotve. <a href="#outerspace"> <a href="destinations.html#outerspace"> <a href="http://www.rocketlaura.com/destinations.html#outerspace"> Prvi od ovih primera ukazuje na kotvu sa imenom u tekućem dokumentu (# znači "ovaj dokument"). Druga dva linka ukazuju na kotvu sa imenom u drugom dokumentu. Referenca na taj drugi dokument se zadaje apsolutno ili relativno. Ako je kotva u tom dokumentu postavljena u delu strane koji se ne vidi, linkovi koji otvaraju tu stranu dovode do toga da se prozor pretraživača prikaže sa vidljivim tim drugim delom. Kreiranje kotvi sa imenom Ako u Dreamweaveru želite da kreirate kotvu sa imenom, treba da uradite sledeće: 1. U prozoru Document, u prikazu Design, postavite kursor tamo gde želite da bude kotva. 2. Sa palete Insert (kategorija Common), izaberite objekat Named Anchor. Možete i da izaberete Insert > Named Anchor iz menija. 3. U okviru za dijalog koji se otvara, unesite ime kotve (jedna reč) i kliknite OK. Ako ukazujete na nevidljive elemente, marker za kotvu će se prikazati u prikazu Design i to na mestu kursora. Ako se marker kotve ne vidi, izaberite View > Visual Aids > Invisible Elements ili podmeni Visual 75 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Aids iz menija View Options, sa palete Document). Možda će izgledati kao da mala zlatna ikona sa kotvom narušava izgled strane. Ovo je iluzija koju daje prikaz Design iz Dreamweavera. U pretraživaču se ova ikona ne vidi i ne zauzima nikakav prostor. Linkovi na kotve sa imenima U Dreamweaveru postoji nekoliko načina da se linkovi povežu sa kotvama sa imenima. Preko Property Inspectora: Izaberite tekst ili sliku od koje želite da vodi link. Ako je kotva u tekućem dokumentu, samo otkucajte oznaku funte (#) i iza nje ime kotve. Ovo se unosi u polju Link. Ako je kotva u drugoj datoteci, unesite putanju do datoteke (kucanjem ili pretraživanjem), a onda unesite #, iza čega sledi ime kotve. Preko opcije Point-to-File: Ikona Point-to-Fole se takođe može upotrebiti za linkove ka kotvama sa imenima. Izaberite tekst ili sliku od kojih link treba da vodi, kliknite ikonu Point-to-File i prevucite marker kotve do strane. Opcija Point-to-File se može koristiti za linkove na kotve koje se nalaze u drugim dokumentima, ali samo ako su oba dokumenta otvorena, Samo pokažite drugi dokument (čim ga aktivirate), a onda na kotvu unutar njega. Mape slika Mapa slika je grafička slika koja ima različite "vruće tačke", koje se ponašaju kao linkovi. Vruće tačke u okviru slike se definišu pravougaonicima, krugovima ili poligonima. Kako rade mape sa slikama Postoje dva tipa mapa sa slikama. To su mape sa slikama na strani servera i mape sa slikama na strani klijenta. Kod mapa na strani servera, informacije o koordinatama se čuvaju na serveru, čime se značajno može usporiti učitavanje strana na koje linkovi vode. Mape na strani klijenta sve informacije o mapi sadrže u okviru HTML datoteke u kojoj se nalazi slika. Mape na strani klijenta su bolje iz nekoliko razloga: • Linkovi se brže rešavaju pošto nema potrebe za informacijama koje se nalaze na udaljenom serveru. • Korisniku se prilikom prelaska miša iznad linka može prikazati URL adresa. • • Mape sa slikama se mogu lokalno testirati. Kod za mape sa slikama na strani klijenta se sastoji od dva dela. To je oznaka img, sa atributom usemap, koji tu sliku povezuje sa mapom, kao i oznake map, koja sadrži koordinate. Evo kako to izgleda: <img src="images/library.gif" width="534" height="120"border="0" usemap="#libmap"> <map name="libmap"> <area shape="rect" coords="41,23,196,85" href="page1.html"> <area shape="rect" coords="205,25,350,87" href="page2.html"> </map> Oznaka map može biti bilo gde u okviru dela body. Ne mora da se nalazi blizu oznake img. Kreiranje mape slika U Dreamweaveru postoje alati za kreiranje, konfigurisanje i uređivanje mapa slika i njihovih vrućih tačaka, tako da ne morate da brinete o kodu koji se nalazi ispod toga. Alati za vruće tačke u Dreamweaveru kreiraju mape slika na strani klijenta. Ako želite da u Dreamweaveru napravite mapu slika, treba da uradite sledeće : 1. U prozoru Document izaberite sliku od koje želite da napravite mapu. 2. U delu Map Image Property Inspectora unesite jedinstveno ime mape. Ovo ime mora biti jedna reč. 3. Definišite vruće tačke mape slika, preko jednog ili više alata Hotspot. Obratite pažnju na to da postoje različiti alati za sve vrste vrućih tačaka. 76 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da nacrtate pravougaone ili kružne vruće oblasti, izaberite odgovarajući alat i mišem označite površinu na slici. Kreiranje poligonalnih vrućih oblasti može biti malo složenije. Ako želite da koristite alat za poligone, izaberite alat i u prozoru Document kliknite jednom preko slike za svaki ugao željenog poligona. Završićete tako što ćete se vratiti na Property Inspector i kliknuti alat Arrow (u delu Map), da biste zatvorili poligon. Vrlo je važno da zvanično završite crtanje poligona preko alata Arror (strelica). Ako ne uradite tako, svaki naredni klik na slici nastavlja da u poligon dodaje nova temena. Ako Vam se desi tako nešto, kliknite alat Arrow da biste napustili režim crtanja poligona, a onda izaberite taj poligon i izbrišite ga. Rad sa vrućim tačkama Nakon što ste u Dreamweaveru kreirali vruću tačku, možete da je izaberete i da njene osobine podesite preko alata Hotspot Property Inspector. Polja Link, Target i Alt rade isto kao i ona koja ste koristili kada ste pravili jednostavan hiperlink na sliku, a i koriste se na isti način. Ako želite da menjate vruću tačku nakon što ste je kreirali, možete da koristite dugme Arrow (nalazi se na Hotspot Property Inspectoru). Kliknite u vruću oblast, da biste je izabrali. Možete da je prevučete na novu lokaciju. Ako želite da promenite oblik, kliknite i vucite neku od tačaka koje se prikazuju duž ivica oblasti. Padajući meniji Padajući meni je element select iz forme, koji se prikazuje kao padajuća lista sa opcijama. Ako kliknete neku od opcija, to je isto kao da ste kliknuli neki link. Padajući meni može da ima linkove na lokalne ili udaljene dokumente, email linkove ili linkove na neki drugi tip datoteke koji može da postoji u HTML-u. Padajući meni često sadrži i neki odziv, kao što je na primer, Zemlja ili Izaberite stavku, koja se prikazuje na vrhu liste. Ako kliknete neku od opcija iz liste, aktivira se link. Meniji koji iskaču se najbolje koriste u specifičnim aplikacijama. Generalno, kada je bitno da se uštedi prostor, kada korisnik ne mora da odjednom vidi sve opcije iz menija, ili kada sa stavkama iz menija ima puno da se radi, ovakav meni je pogodan izbor. Kreiranje padajućeg menija u Dreamweaveru Padajući meni se u Dreamweaveru lako pravi. Samo treba da pratite sledeće korake : 1. Otvorite svoj dokument u prikazu Design i kursor postavite tamo gde želite da se pojavi meni. 2. Sa palete Insert idite na kategoriju Forms i izaberite objekat Jump Menu. Možete i da izaberete Insert > Form > Jump Menu. 77 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 3. Kada se otvori okvir za dijalog Insert Jump Menu, definišite stavke koje treba da se pojave u meniju i na koju lokaciju pretraživač treba da pošalje korisnika, kada izabere tu opciju. U polju Text unesite tekst koji želite da se prikaže. Kliknite plus (+) da biste u meni dodali stavku. URL možete da zadate preko dugmeta Browse ili da ga unesete ručno. Ovaj okvir za dijalog možete da koristite i za podešavanje opcija iz padajućeg menija, kao što je na primer, da li da postoji dugme Go. Kod padajućeg menija Kod za ovakav meni se sastoji od oznaka <form> i <select>, kao i Java Scripta, koji omogućava rad menija. Nakon što ste ubacili meni, ako ste u svom dokumentu podesili prikazivanje nevidljivih elemenata, treba da se prikaže crveni pravougaonik forme koja sadrži meni. Ako izaberete padajući meni, na panou Behavior ćete videti odgovarajuće ponašanje. 78 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Koristiti ili ne dugme Go Kada kreirate padajući meni, imate mogućnost da ga napravite kao padajući meni ili kao padajući meni sa pridruženim dugmetom Go. Dugme Go je dugme forme, sa oznakom Go, kojim se, kada se klikne, aktivira meni. Padajućem meniju nije potrebno dugme Go, pošto se meni uobičajeno aktivira kada korisnik klikne stavku iz menija. Ali, šta ako je odredište koje korisnik želi da izabere već prikazano u meniju? Na primer, možda je to odredište podrazumevana opcija iz menija (prva stavka iz liste), ili je korisnik možda na stranu dospeo preko dugmeta Back u pretraživaču. U takvim slučajevima dugme Go omogućava da se meni aktivira bez promene izabranog odredišta. Ako želite da dugme Go uključite prilikom definisanja menija, izaberite opciju Insert Go Button After Menu u okviru za dijalog Insert Jump Menu. Korišćenje menija sa frejmovima i višestrukim prozorima Padajući meniji se mogu koristiti za učitavanje novih strana u nove prozore, ili u različite prozore u skupu frejmova. Ovo možete zadati preko opcije Open in Main Window za svaki URL koji ste definisali za stavke iz menija. Ako padajući meni novi URL otvara u posebnom prozoru, treba da donesete još jednu odluku: Nakon što je učitana strana sa odredišne adrese, da li želite da se u padajućem meniju i dalje prikazuje stavka za to odredište, ili želite da se prikaže prva stavka? Ako otvarate novi prozor (atribut target je _blank), onda želite da se meni vrati. Ako otvarate poseban frejm, ali u istom prozoru pretraživača, onda ne želite vraćanje stavke. Da li će se izabrana stavka promeniti ili ne zavisi od opcije Select First Item After URL Change, koja se podešava u okviru za dijalog Insert Jump Menu. Uređivanje padajućeg menija Nakon što ste napravili padajući meni, možete ga dalje menjati. Ovo se radi preko Property Inspectora i panoa Behaviors. Možete i da menjate, dodajete ili brišete dugmad Go. Property Inspector za padajući meni Ako želite da vidite Property Inspector za padajući meni, izaberite taj meni. Ovo je u suštini List/Menu Property Inspector, sa ubačenim stavkama. Pored toga što padajući meni možete da promenite od menija sa prikazanom jednom stavkom, na listu (sa prikazanih nekoliko stavki odjednom), možete i da menjate odredišta. Ovo ćete uraditi ako kliknete dugme List Values. Ponašanje padajućeg menija Izaberite padajući meni i u panou Behaviors ćete videti da je dodato ponašanje. Ovo ponašanje je u okviru elementa form, a koristi se triger onChange. (To znači da se ovo ponašanje izvršava svaki put kada se iz menija izabere druga stavka.) Kliknite dva puta brzo to ponašanje. Otvoriće se okvir za dijalog Jump Menu. Ovaj okvir za dijalog je skoro identičan sa okvirom za dijalog Insert Jump Menu. Nema samo opcija Menu Name i Insert Go Buttons, koje se definišu samo prilikom kreiranja menija. Rad sa dugmadima Go Ako ste napravili padajući meni sa dugmetom Go, onda postoji i ponašanje Jump Menu Go. Ova akcija se 79 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 izvršava kada se desi događaj onClick. Kliknite dva puta brzo, da biste promenili ovo ponašanje. Jedina opcija je da se klikne dugme, koje pokreće izvršenje stavke iz menija. Ako odlučite da Vam nije potrebno dugme Go, možete da ga slobodno izaberete i izbrišete u bilo kom trenutku. Ako nakon kreiranja padajućeg menija odlučite da Vam je dugme Go potrebno, možete da ga dodate na jedan od sledećih načina: 1. Ubacivanjem dugmeta forme, u formu koja sadrži padajući meni. (Postavite kursor direktno iza padajućeg menija i izaberite Insert > Form Objects > Button). 2. Preko Property Inspectora, ako se oznaka na dugmetu podesi na Go. 3. Izaberete dugme i sa panoa Behaviors mu dodelite ponašanje Jump Menu Go. Većina korisnika više voli da ih padajći meni šalje na novu destinaciju čim iz njega izaberu neku stavku. Ipak, ako želite da se meni aktivira samo ako korisnici prvo iz njega nešto izaberu, pa kliknu dugme Go, treba da uradite sledeće: 1. Kreirajte padajući meni sa dugmetom Go, ili ga preko prethodno pomenutih instrukcija dodelite kasnije. 2. Idite u prozore Design i Code. U delu Design prozora Document izaberite padajući meni. 3. U delu Code pronađite i ispitajte kod za meni (stavka select). Izbacite rukovaoca događajem i poziv funkcije, kao što je ovde pokazano: <select name=:"menu1" onChange="MM_jumpMenu(' parent', this,0) "> Obratite pažnju na to, da nakon što ovo uradite, Dreamweaver više stavku select ne prepoznaje kao padajući meni, tako da ne možete da koristite pano Behaviors i da tamo menjate ponašanje. Rollover Obično se link, u trenutku kada korisnik iznad njega postavi pokazivač miša na neki način menja. Na primer, tekstualni link može da promeni veličinu ili boju, od normalnih na bold. Ako učinite da se link vizuelno menja, on kao da kaže "Ovde možeš da klikneš". Ovakve mogućnosti se nazivaju rollover i obično se primenjuju na slike. Rollover se u suštini sastoji od dve slike. To je primama slika ili up slika, koja se prikazuje kada se strana po prvi put učita i sekundarna slika, ili over slika., kojom pretraživač menja primarnu sliku, kada se iznad primarne postavi kursor. Dve slike moraju biti iste veličine. Ako to nije slučaj, sekundarna slika će preuzeti dimenzije primarne. Dobijanje efekta rollover u Dreamweaveru Rollover za slike se u Dreamweaveru vrlo lako dobija i to zahvaljujući objektu Rollover Image. Ako želite da napravite rollover, onda treba da ubacite sliku koja se automatski pretvara u drugu sliku kada se iznad nje postavi kursor. Evo kako se ubacuje rollover slika : 1. U svom dokumentu otvorite prikaz Design. Kursor postavite tamo gde treba da se ubaci slika. Sa palete Insert (kategorija Common), iz objekata Images, izaberite objekat Rollover Image. 2. Otvoriće se okvir za dijalog Insert Rollover Image. U polju Name unesite ime. Slike koje se koriste kao rollover moraju imati imena. Ako ne unesete ime, Dreamweaver će dodeliti podrazumevano ime. 3. Preko dugmeta Browse pronađite Original (Up) sliku, i Rollover (Over) sliku, ili u svako polje unesite ime i putanju do odgovarajućih slika. 4. Ako je potrebno, potvrdite polje Preload Images. 5. U polje Alternate Text unesite alternativni tekst. (Ovo će postati atribut alt primarne slike.) 6. Preko dugmeta Browse potražite i izaberite URL koji se posetiocu šalje kada se klikne rollover slika. Možete i da unesete javascript:. Ovo je prazan link, ako link nigde ne treba da vodi. 7. 7.Kliknite OK da biste ubacili rollover sliku. 80 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prethodno učitavanje i rollover Pretraživač sve resurse sa strane obično učitava kada se prvi put pojave na strani. To znači da se učitava up slika, ali pošto se slika ispod nje ne prikazuje, a možda se i nikad neće prikazati, to se ona i ne učitava. Kada neko postavi kursor iznad gornje slike, onda se preuzima donja. Ovo može da potraje izvesno vreme, čime se gubi utisak koji efekat rollover ostavlja. Možda će korisnik pomeriti miša sa slike pre nego što se učita slika. Ako tu sliku unapred učitate, onda je druga slika spremna i čeka da se prikaže. Moguće je da se ona nikad ne prikaže u prvom planu, ali to nije bitno. Ako se pozove, prikazuje se istog trenutka. Ako potvrdite opciju Preload Images u okviru za dijalog Rollover Image, Dreamweaver piše JavaScript kod koji pretraživaču govori da treba da učita i primarne i sekundarne slike kada se strana po prvi put učitava. Na taj način se eliminiše odlaganje. Zbog toga je dobro da, kada ubacujete objekat Rollover Image, uvek proverite da li je ta opcija uključena. Uređivanje rollover slika Objekat Rollover Image je samo prečica do složenije procedure koja u Dreamweaveru postoji za umetanje slika, dodeljivanje linka toj slici i dodavanje ponašanje Swap Image i Swap Image Restore. Nakon što ste ubacili rollover sliku, ona postaje slika sa linkom i dodeljenim ponašanjem. Ako želite da menjate sliku i link, treba da je izaberete i koristite Property Inspector. Ako želite da menjate rollover kod, izaberite sliku i u panou Behaviors dva puta brzo kliknite ponašanje Swap Image. Otvoriće se okvir za dijalog Swap Image u kome možete da menjate sekundarnu sliku i opcije vezane za prethodno učitavanje. 81 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Linije za navigaciju Termin linija za navigaciju se može odnositi na bilo koji skup linkova koji su postavljeni na web strani, bilo po horizontali ili po vertikali. Generalno, ovo je bitna funkcija web sajta i ostaje konzistentna od strane do strane. Time se korisniku pruža mogućnost da lako prelazi sa jedne na drugu stranu. Linija za navigaciju (navbar) može biti skup tekstualnih linkova, slika sa linkovima ili mapa slika. Složeniji tip linije za navigaciju se često pravi preko skupa slika koje se menjaju na bazi akcija koje korisnik preduzima, a sve to preko JavaScripta. U Dreamweaveru postoji objekat Navigation Bar koji omogućava jednostavno kreiranje ovakve linije za navigaciju. Svako dugme ili element na liniji za navigaciju Dreamweavera može imati do četiri stanja. Dva stanja određuju standardne funkcije vezane za rollover. • • Up – Slika se prikazuje kada korisnik nije u interakciji sa elementom. Over – Slika se prikazuje kada se pokazivač miša zadrži iznad slike. Izgled elementa se menja da bi se signalizirala interaktivnost Druga dva stanja određuju kako se slika prikazuje kada je prikazana strana na koju ukazuje link koji vodi od te slike; na primer, kako treba da izgleda dugme Home, kada se nalazi na strani Home? Opcije su: • • Down – Kada se linija za navigaciju ne koristi za navigaciju između strana (obično se ovde radi sa skupom frejmova). Ovo je slika koja se prikazuje kada korisnik klikne element. Kada se element klikne i kada se učita nova strana, linija za navigaciju, koja je i dalje prikazana, taj kliknuti element prikazuje sa promenjenim izgledom, da bi se ukazalo na to da je taj element izabran. Over While Down – Ova slika se pojavljuje kada se pokazivač miša postavi iznad donje slike. Svaka linija za navigaciju ne mora da sadrži sva četiri stanja. Cesto se koriste stanja Up, Over i Down. Kreiranje linije za navigaciju Ako želite da napravite liniju za navigaciju, prvo morate u svon programu za rad sa grafikom napraviti sve slike koje se odnose na stanja dugmadi koja će se koristiti. Nakon toga se vratite u Dreamweaver, otvorite dokument, postavite kursor tamo gde treba da bude linija za navigaciju i uradite sledeće : 1. Na paleti Common Insert, iz objekata Images, izaberite objeka Navigation Bar. Možete i iz menija izaberete opciji Insert > Image Objects > Navigation bar. 2. Otvoriće se okvir za dijalog Navigation bar. Svaki element odgovara dugmetu na ovoj liniji, a svako dugme ima do četiri stanja. Svakom svom elementu treba da zadate ime (jednom po jednom), a onda preko dugmeta plus (+) dodajte elemente na liniju za navigaciju. Preko dugmeta Browse ćete dodeliti slike za različita stanja. 82 / 299 Fakultet organizacionih nauka 3. 4. 5. 6. Dreamweaver MX 2004 Zadajte alternativni tekst u polju sa tim imenom, i preko dugmeta Browse zadajte URL, na koji korisnik treba da ode kada klikne to dugme. Ovo se zadaje u polju When Clicked, Go to URL. Izaberite prozor ili frejm u kome želite da se otvori ta URL adresa. Ovo se radi u polju sa desne strane polja URL. Ako želite, možete da potvrdite opciju Preload Images. Ako želite da određeni element na strani bude u stanju Down kada se strana učitava, potvrdite opciju Show Down Image Initial. Ovo je pogodno, na primer, za naslovnu stranu, kada želite da dugme Home ukazuje na to da se već nalazite na naslovnoj strani. U dnu okvira za dijalog postoje još dve opcije. Izaberite da li želite da se linija za navigaciju postavi po horizontali ili vertikali i izaberite da li želite da se koriste HTML tabele. Kliknite OK da biste ubacili liniju za navigaciju. Uređivanje linije za navigaciju Nakon što ste ubacili liniju za navigaciju, ona se sastoji od nekoliko slika. Svaka od tih slika ima dodeljeno ponašanje Set Nav Bar Image. Ako izaberete da se linija za navigaciju definiše u tabeli, onda postoji i oznaka. 83 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Slobodno možete da menjate poziciju slika na liniji za navigaviju, da podešavate osobine tabele u kojoj se slike nalaze, da menjate URL adrese na koje vode linkovi, pa čak i da brišete neke slike, a da se pri tome linija za navigaciju ne iskrivi. Ake želite da odjednom menjate celu liniju za navigaciju, izaberite komandu Modify > Navigation Bar. Otvoriće se okvir za dijalog Modify Navigation Bar, koji jako liči na okvir za dijalog koji ste koristili za kreiranje linije za navigaciju. Ako želite da menjate rollover efekte koji postoje na liniji za navigaciju, izaberite sliku iz grupe, i u panou Behaviors dva puta brzo kliknite neku od opcija Set Nav Bar Image. U okviru za dijalog koji se otvara postoje dve kartice: na kartici Basic možete da podešavate rollover efekat za sliku koja je trenutno izabrana; na kartici Advanced možete da podešavate vrlo interesantne promene, koje se dešavaju na osnovu toga šta se dešava sa izabranom slikom. 84 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad sa linkovima Linkovi su u središtu aktivnosti na Webu. Postoji puno toga što možete uraditi da oni postanu još moćniji, zabavniji i više interaktivni, čak i dostupniji. Dostupniji linkovi Linkovi nisu po prirodi nedostupni. U grafičkom interfejsu korisnik može da pogleda na šta koji link ukazuje u da izabere onaj koji mu je potreban. Čitač ekrana čita celu stranu od početka do kraja, pa se linkovi mogu lako izgubiti u gomili. Korisnik koji želi da dođe pravo na sadržaj strane, ne želi da čita gomilu linkova sa linije za navigaciju. Korisnik koji želi da upotrebi link na dnu strane, ne želi da sluša celu stranu, da bi mogao da negde ode. U standardu Section 508, § 1194.22(o), stoji: Treba da postoji način koji omogućava da korisnik preskoči linkove za navigaciju koji se ponavljaju. Ne postoji magični HTML atribut koji bi to mogao da uradi, kao što ni Dreamweaver ne može da tu magiju uradi za Vas. To ipak ne znači da je to teško uraditi. Rešenje je da se iznad linkova koji se ponavljaju doda još jedan link. Evo kako se to radi: 1. Na kraju skupa linkova, neposredno ispred početka glavnog sadržaja strane, ubacite kotvu sa imenom. Nazovite je na primer, main 2. Na početku skupa linkova ubacite tekst ili sliku i linkujte je na tu kotvu. Tekst može, na primer, biti Skip Navigation (Preskoči navigaciju), ili Main Content (Glavni sadržaj). Ako želite da napravite zaista nevdivljivi link, onda treba da upotrebite providnu spacer sliku u GIF formatu. Dodajte joj alt tekst, kao što je Skip to Main Content, ili Skip Navigation, i linkujte je na kotvu. Čitač ekrana će pročitati alt tekst, ali grafički pretraživači će u potpunosti preskočiti sliku. Kod za ovo nevidljivo preskakanje navigacije je: <a href="#main"> <img src="spacer.gif" width="1" height="1" alt=Skip to main content> </a> [ovde dolazi link za navigaciju i ostali linkovi] <a name=main></a> [ovde dolazi glavni sadrzaj strane] 85 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Specijalni zahtevi za mape slika Naravno da se mape slika prave od slika, tako da se ideje vezane za dostupnost slika, najvažnije upotreba oznaka alt, odnose i na mape. Pored toga, u standardu Section 508 1194.22(e) se kaže: Za svaki aktivni region mape slika na serveru treba da postoji redudantni tekstualni link. Mape slika na strani klijenta ne zahtevaju redudantne linkove pošto svaka vruća oblast ima svoj atribut alt. Jedna nezvanična napomena je da treba da budete svesni da su mape slika dostupnije ako su vruće oblasti velike i ako ih je lako kliknuti. One bi trebalo da budu manje ili više uniformne veličine, ako ne i oblika i dovoljno velike da ih kursorom možete lako naći. Vruća oblast bi uvek trebalo da odgovara delu grafike koji jasno komunicira sa URL destinacijom. Ako se ne koriste reči, onda treba da se primene ikone koje su svima jasne (kao što je poštansko sanduče, za link na elektronsku poštu). Podešavanje linkova preko CSS-a Linkovi se u pretraživaču podrazumevano ističu plavom bojom. Tekst sa linkom je podvučen plavom linijom, slike sa linkom imaju plavi okvir. Linkovi koji su već bili posećeni dobijaju purpurnu liniju ili okvir. Premda neki web stručnjaci dokazuju da ova podešavanja ne bi trebalo mešati (tako da posetioci ne bi bili zbunjeni, tako da u njima ne prepoznaju linkove), većina web dizajnera ipak uradi nešto dodatno, da bi podesili izgled linka. Slike sa linkovima Okvir oko slike sa linkom može da se isključi specijalnim podešavanjem atributa border slike. Ova vrednost treba da se podesi na 0. Svaki put kada nekoj slici u Dreamweaveru dodate link, ovo se automatski dešava. Tekst sa linkom Izgled teksta sa linkom, boja teksta, da li je podvučen, itd. se može podešavati preko CSS-a koji menja oznaku a. U Dreamweaveru ovom poslu možete prići na dva načina: preko prozora Page Properties ili preko panoa CSS Styles. Upotreba panoa CSS Styles za kontrolu izgleda linka Ovo je sporiji način da se to uradi, ali dobijate jasniju predstavu šta se dešava iza scene. Takođe, imate i više opcija na raspolaganju. Možete, na primer, da upamtite stilove za formatiranje linkova u nekoj spoljašnjoj datoteci (style sheetu) i da tako taj stil koristite na celom sajtu. Ako želite da promenite osnovni izgled i ponašanje teksta sa linkom, otvorite pano CSS Styles i napravite novi stil U okviru za dijalog New Style izaberite da promenite definiciju oznake a. Postoji mogućnost da to uradite samo za tekući dokument ili u posebnoj datoeci sa stilovima. Kada se otvori okvir za dijalog CSS Style Definition, izaberite opcije koje želite. Sav tekst sa linkovima će biti u skladu sa onim što ovde podesite. Opcije koje se najčešće koriste se nalaze u kategoriji Type. • • • Ako želite da podesite boju linka, izaberite boju iz polja Color. Ako želite da ukonite podvlačenje, podesite opciju Decoration na None. Ako želite da linkovi budu ispisani masnim slovima, izaberite Bold (ili neko od podešavanja vezanih za bold). Drugi sofisticiraniji efekti vezani za tekstualne linkove se mogu dobiti preko pseudoklase a: . Ako želite da to uradite, u Dreamweaveru otvorite pano CSS Styles i napravite novi stil. U okviru za dijalog New Style izaberite CSS Selector i iz padajućeg menija koji se otvara izaberite jednu od slededh opcija : • • • • a:link kontroliše kako izgledaju obični linkovi (slično sa promenom definicije oznake a). a:hover kontroliše kako će link izgledati kada korisnik pređe preko njega. a:visited kontroliše kako izgledaju linkovi koji su bili posećeni (oni koji su poslednji korišćeni). a:active kontroliše kako izgledaju linkovi kada korisnik na njih klikne. 86 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kada izaberete da napravite jedan od ovih stilova, otvara se okvir za dijalog CSS Style Definition. U njemu možete da dalje formatirate linkove. Jedan od efekata koji je trenutno najpopularniji je da se sakriju linije koje podvlače linkovani tekst, koje se pojavljuju kada korisnik postavi kursor iznad linka. Ovo ćete uraditi putem definisanja klase a:hover, iz kategorije Type, koja se nalazi u okviru za dijalog Definition. Treba podesiti opciju Decoration to Underline. Kontrola izgleda linka putem osobina strane Ako ne želite da trošite vreme na podešavanje različitih stilova u panou CSS Styles, izgled linka možete brzo da podesite preko prozora Page Properties. Izaberite Modify > Page Properties i idite u kategoriju Links. Tu 87 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 se nalaze opcije koje se najviše koriste za obične linkove, za podešavanja koja se odnose na izgled linka kada se iznad njega postavi kursor, izgled linka koji je posećen, kao i aktivne linkove. Kada na ovaj način izaberete potrebna podešavanja, Dreamweaver dodaje sve potrebne CSS stilove (a., a:hover, itd.) u internu datoteku stilova, za tekući dokument. Podešavanje boja linka bez CSS-a Ovo je način koji se pre pojave CSS-a koristio za podešavanje boje običnih, posećenih i aktivnih boja linkova. Tada su se dodavali atributi oznaci body: <body link="#FFFF00" alink="#FF0000" vlink="#00FF00"> Nema valjanog razloga da koristite ovaj metod, osim ako nemate nameru da se Vaša strana koristi u zaista starim verzijama pretraživača. Ipak, ako želite, možete da Dreamweaveru naložite da boje linkova podešava na ovaj način. U okviru za dijalog Preferences/General (izaberite Edit > Preferences, pa idite na kategoriju General) nemojte izabrati opciju Use CSS instead of HTML Tags. Naredni put kada izaberte Modify > Page Properties, kategorija Links se neće pojaviti. Umesto toga, idite na osobinu Appearance i tu podesite boje linkova. Nećete biti u stanju da menjate drugre karakteristike linkova, kao što je brisanje linija za podvlačenje, ili dobijanje efekta hover, a sve to zato što ste izbacili CSS. Podešavanje parametara URL-a Linkovi se mogu koristiti i za prenos informacija sa strane na stranu. Ovo se radi putem parametara URL adrese. Informacija koja se prosleđuje kao parametar se kodira u obliku para ime/vrednost i dodaje na kraj URL adrese, odvojen znakom pitanja (?). Ako ima više parametara, oni se međusobno odvajaju ampersendom (&). Ako neka od vrednosti koje se prosleđuju sadrži razmak, taj razmak se mora kodirati preko znaka plus (+) ili se zadati kao ASCII vrednost (%20). URL sa parametrima koji se prosleđuju izgleda ovako: mypage.html?username=fred+jones&password=logmein Strana na kraju ovog linka (u ovom slučaju mypage.html) može da preko JavaScripta ili nekog drugog jezika za obradu na strani servera, upotrebi ove parametre. (Ovo je ista vrsta URL-a kao ona koja se dobija kada pošaljete formu preko metoda GET.) 88 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dodavanje URL parametara linku u Dreamweaveru Ako u Dreamweaveru želite da dodate parametar linku, uvek možete da ukucate parametar u polje Link u Property Inspectoru, naravno, ako se sećate sintakse i nemate ništa protiv kucanja. Ipak je lakše da pustite da Vam Dreamweaver pomogne. Kliknite dugme Browse da biste potražili link. Kada se otvori okvir za dijalog Select File, izaberite datoteku na koju link vodi, a onda kliknite dugme Parameters. Otvoriće se okvir za dijalog Parameters. U ovom okviru za dijalog unesite svako ime i vrednost koji treba da se proslede. Kliknite dva puta OK da biste zatvorili okvire za dijalog, a u polju Link, Property Inspectora ćete videti ceo URL. Obrada parametara URL adrese preko JavaScripta Strane koje su vezane za podatke i koje koriste tehnologije na strani servera, kao što su ColdFusion ili PHP, intenzivno koriste URL parametre. Prosleđene informacije možete da obrađujete i preko JavaScripta. Na žalost, u Dreamweaveru ne postoji neko unapred ugrađeno ponašanje, vezano za to, ali ako nemate ništa protiv pisanja malo koda, možete da dobijete neke vrlo korisne efekte. Šta ako, na primer, posetioci mogu na neku stranu na Vašem sajtu da dođu sa različitih lokacija i Vi želite da prilagodite informacije koje se prikazuju, tako da one budu u skladu sa korisnikom koji je strani pristupio? Gde god želite da se prikaže prilagođeni sadržaj, ubacite sledeći kod: <script language="JavaScript"> var params = location.search; //uzima s prosledjeni parametar i smesta u promenljivu x var x = params.substring(x.indexOf("=")+1,x.length); // ako parametar ima neku vrednost unosi se neki sadrzaj if (x =="parents") document.write('<h1>Hello, Parents!</h1>'); // ako parametar ima neku drugu vrednost unosi se drugi sadrzaj else if (x =="students") document.write('<h1>Hello, Students! </h1>'); //u suprotnom se unosi neki podrazumevani sadrzaj else document.write('<h1>Hello!</h1>'); </script> U zavisnosti od vrednosti koja se prosleđuje, prikazuje se različit naslov. Skript se može promeniti tako da prikuplja bilo koji URL parametar i prikazuje opcionalni sadržaj na strani. Potrebno je samo da iskopirate sledeći kod i da ga postavite u dokument u Dreamweaveru, tamo gde želite da se taj sadržaj prikaže: <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 možete da prilagodite svojim potrebama: • Umesto određenih delova koda, unesite svoje informacije (vrednosti parametara, sadržaj). • Uvek treba da proveravate najmanje jednu vrednost, tako da uvek treba da postoji red koji počinje sa if. • Za bilo koje druge vrednosti za koje želite da imate poseban sadržaj, ubacite liniju else if. Ponovite taj red onoliko puta koliko želite. • Šta se dešava ako nema prosleđenih parametara? Ako želite da se prikaže podrazumevani sadržaj, možete da koristite klauzulu else. Ako ne želite da se prikazuje sadržaj, onda nemojte ubacivati ovu klauzulu. Sebi možete da olaškate ako svaki od ovih redova ubacite u parčiće koda (snippet), tako da ne morate da ih svaki put kucate: 1. Otvorite pano Snippets (Window -> Snippets). 2. Desnim tasterom miša kliknite faciklu JavaScript Snippets i iz pomoćnog menija izaberite opciju New Snippet. Ime neka bude na primer Parameter-if. Kao tip unesite Block. U delu za unos teksta unseite iskaz if, na primer: if (x=="value1") document.write('content here'); Kliknite OK da biste zatvorili okvir za dijalog. 3. Ponovite ovaj postupak i za kreiranje dela Parameter if-else i Parameter else. 4. Na kraju treba da napravite još jedno parče. Nazvaćemo ga Parameter-Wrapper (omotač). 89 / 299 Fakultet organizacionih nauka 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 parče Parameter-If i kliknite dugme Insert. Kada se u dokument postavi opšti kod, promenite valuel i content i unesite ono što želite. Za svaki novi red else-if i else koji želite da dodate, napravite prazan red u kodu i ubacite odgovarajuće parče koda. Nakon toga promenite delove value i content. Na kraju treba da izaberete sve linije koda koje ste napravili i da ubacite parče Parameter-Wrapper. Ovim će iskazi if biti ubačeni u skript koji obrađuje parametre. Poboljšanje linkova na elektronsku poštu preko parametara Parametri URL-a se mogu koristiti i kod e-mail adresa za definisanje dodatnih stavki, kao što su subject i cc. To znači da kada korisnik klikne link, i kada se otvori program za elektronsku poštu, u prozoru za unos nove poruke ove stavke se već nalaze na svojim mestima. Na žalost, za dodavanje parametara ne možete da koristite prozor Parameters iz Drearmveavera, pošto se on poziva iz okvira za dijalog Select File, kome se pristupa kada tražite datoteku. E-mail adresa se ne može tražiti na ovaj način, jer je u pitanju apsolutni URL. Sa druge strane, parametre možete dodati tako što ćete ih ručno uneti u polje Link, u Property Inspectoru (koje je vrlo malo), a možete ih naravno uneti i direktno u prozoru Code. Prilikom unosa treba da imate na umu pravilnu interpunkciju, odnosno da na početku stavite ?, da parametre odvajate sa &, a da je kod za razmake %20. Linkovi na JavaScript kod Web dizajneri koriste kotvu ne samo za linkove na drugu stranu. Prelaz preko linka, ili klik na njega, može da izazove neki događaj u JavaScriptu, što znači da oznaka može da ima dodeljeno neko ponašanje. Prazni linkovi i ponašanje Ako želite da neki deo teksta pokrene neku akciju iz Dreamweavera, onda prvo morate da napravite tekst sa linkom. Slike mogu.da izazovu neku akciju i da nisu slike sa linkom, ali onda kursor, u trenutku prelaza preko slike mora da promeni oblik u šaku, jer u suprotnom korisnik ne bi znao da tu sliku treba da klikne. Vi želite da korisnik klikne link, ali ne želite da ga taj link negde odvede, već samo da pokrene neku akciju. U tom slučaju treba da napravite prazan (null) link. U pitanju je oznaka a, sa atributom href koji nema vrednost. Da biste kreirali ovakav link, morate da izaberete sliku ili tekst i da u polju Link, Property Inspectora unesete javascript:. Evo kako izgleda taj kod: <a href="javascript:;">Click here!</a> Ovim se pretraživaču govori da kada se izabere link, ne treba ništa raditi. Prazan link je moguće kreirati i ako se u polju Link unese oznaka funte (#) (lakše je otkucati). Ovaj link ukazuje na tekuću stranu, tako da se u pretraživaču u suštini ništa ne dešava. Ipak, ako je link negde prema kraju dugačke strane, onda klik na taj link može navesti pretraživač da prikaže početak strane. Iz toga razloga se ovakav link ne koristi. Sigurnije je da unesete javascript:. Unos JavaScripta u HREF Ako želite da pravite svoj JavaScript kod i treba da unesete samo malo koda, možete ga uneti direktno u atribut href. Ispred toga treba da stoji javascript: <a href="javascript:alert('You clicked me!');">Click here!</a> Ipak, ove informacije možete da unesete i u polje Link Property Inspectora. Jedini problem je da je ovo polje prilično malo, tako da je teško da se prati šta se unosi. 90 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 91 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 7. Podešavanje glavnog sadržaja Osnovno o sadržaju zaglavlja Sadržaj zaglavlja možda nije glamurozan, ali ga nije ni teško shvatiti, a izuzetno je koristan. U ovom odeljku ćete videti kako se u HTML-u kodira sadržaj zaglavlja, i kako se interpretira u pretraživačima, mašinama za pretraživanje, itd. Takođe smo objasnili i interfejs koji se u Dreamweaveru koristi za rad sa sadržajem zaglavlja. Kako se sadržaj zaglavlja ponaša u pretraživaču Standardna strana u HTML-u sadrži oznake head i body. Oznaka body sadrži ceo sadržaj koji će se prikazati u prozoru pretraživača. U zaglavlju se nalaze različite informacije koje se neće prikazati (u najmanju ruku ne direktno), premda im se može pristupiti da bi se odredilo kako se stranom rukuje. Jednom delu zaglavlja pristupa pretraživač, drugom neki drugi programi, kao što je serverski softver, mašine za pretraživanje ili softver za proveru. Nekim delovima se nikad ne pristupa, izuzev od strane ljudi koji žele da menjaju kod. Konzorcijum W3C definiše nekoliko elemenata koje svako zaglavlje koje je dobro napravljeno treba da sadrži. Na žalost, pretraživači još uvek nisu u potpunosti implementirali sve te elemente, tako da ih ne možete da u punoj meri iskoristiti. Kako se u Dreamweaver u radi sa zaglavljem U Dreamweaver-u postoje dva osnovna interfejsa za rad sa sadržajem zaglavlja. To je meni objekata Head, koji se nalazi u kategoriji HTML na paleti Insert, koji se koristi za dodavanje sadržaja u zaglavlje i opcija Head Content, zajedno sa Property Inspectorima koji se koriste za ispitivanje i promenu sadržaja zaglavlja. Pregled i uređivanje sadržaja zaglavlja Sadržaj zaglavlja se u prikazu Design Dreamweavera prikazuje kao linija na vrhu prozora Document, pri čemu se za svaki element prikazuje ikona. Ako želite da uključite ili isključite prikazivanje sadržaja zaglavlja, možete da koristite opciju View Options > Head Content. (Meniju View Options možete da pristupite sa palete Document ili iz menija View.) Obratite pažnju na to da se opcija Head Content neće prikazati osim ako se ne nalazite u prikazu Design ili Code and Design. Ako želite da ispitate ili primenite neki element zaglavlja, kliknite njegovu ikonu na paleti i preko Property Inspectora pogledajte ili promenite atribute tog elementa. Elementima zaglavlja možete da promenite redosled ako po liniji zaglavlja prevučete njihove ikone. Redosled elemenata u zaglavlju obično nije bitan, pošto svaki element ima različitu funkciju, i poziva se kada je potrebno, bez obzira na poziciju. Dodavanje sadržaja zaglavlja Neke elemente zaglavlja (title, script i style) Dreamweaver automatski ubacuje kada pravite novu stranu ili uređujete postojeću. Drugi elementi zaglavlja koji se često koriste u kategoriji HTML imaju svoje odgovarajuće objekte. Ovi objekti se nalaze na paleti Insert. Ako želite da ubacite neki element kojeg nema na paleti Insert, onda morate da ga unesete u prikazu Code, bilo tako što ćete sami da otkucate što je potrebno, ili ćete ga uneti preko Tag Choosera. Opcije vezane za zaglavlje možete da proširite, ako potražite neko proširenje (Macromedia Exchange for Dreamweaver), koje radi to što Vam je potrebno. Elemente zaglavlja možete da ubacite u prikazima Code i Design. 92 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Postoje, međutim, razlike između ova dva prikaza. Ako radite u prikazu Design, onda mesto na kome se nalazi kursor nije toliko bitno u trenutku rada sa zaglavljem. Iako prilikom ubacivanja elementa zaglavlja selektujete neki element koji pripada telu dokumenta, Dreamweaver zna da to treba da smesti u zaglavlje. Ako ste pre ubacivanja izabrali neku ikonu elementa zaglavlja, onda Dreamweaver novi element postavlja odmah iza izabranog elementa. Ako prilikom ubacivanja niste izabrali nijedan element zaglavlja, Dreamweaver novi element ubacuje na kraj zaglavlja. Ako prilikom ubacivanja objekta Head radite u prikazu Code, kod za taj objekat se ubacuje tamo gde se nalazi kursor. Ovo važi čak i ako to dovodi do ubacivanja elementa potpuno izvan elementa head, ili ubacivanje u neki drugi element HTML-a. (Očigledno je sigurnije da koristite prikaz Design, osim ako niste u potpunosti sigurni u HTML sintaksu koju koristite.) Rad sa oznakama meta Meta znači "o". Namena oznake meta je da čuva informacije c tekućem dokumentu tako da pretraživači, serveri, mašine za pretraživanje ili čak i ljudi mogu te informacije pronaći i obraditi. Za svaku novu vrstu informacija koju čuvate se koristi različite oznaka meta. HTML dokumenti mogu da imaju onoliko oznaka meta koliko je potrebno, pri čemu se sve one nalaze u zaglavlju. Kako oznake meta čuvaju informacije Generalno se informacije u okviru oznake meta čuvaju kao parovi ime-vrednost. Pri tome se koriste atributi name i content. <meta name="generator" content="Dreamweaver"> Tokom vremena su pojedini parovi ime-vrednost, kao što su keywords, description ili refresh, postali standardni, pa ih pretraživači i mašine za pretraživanje tako i koriste. Web autori imaju slobodu da prave i svoje parove i da tako čuvaju druge informacije vezane za dokument. Mnogi popularni programi za pisanje HTML koda, koriste oznaku meta generator prilikom generisanja koda, čime se u dokument ubacuje malo dodatne reklame. Neki web autori podsećaju one koji pozajmljuju kod, od koga su ga pozajmili preko oznake author: <meta name="author" content="Julius Marx"> Različite meta oznake su bile toliko korisne da u Dreamweaver u postoje posebni objekti koji se na njih odnose. U narednih nekoliko pasusa smo ispitali neke od njih. Oznaka meta character-encoding Ova vrsta oznake meta se ne nalazi na paleti Insert. Dreamweaver ovu oznaku automatski ubacuje u svaki HTML dokument koji pravi. Evo kako izgleda kod: <meta http-equiv="Content-Type" content="text/html; > charset > iso-8859-1 "> (U narednom odeljku možete naći više informacija o atributu http-equiv, koja se ovde koristi na mestu atributa name.) Standardna oznaka meta govori pretraživaču koji skup karaktera treba koristiti za prikazivanje tekstualnih delova strane. ISO-8859-1 ukazuje na skup Latin-1, koji se koristi u većini jezika zapadne Evrope. Primeri za druge skupove karaktera mogu biti IS0-8859-2 (ćirilica) ili SHIFT_JIS (japanski). Osim ako niste sigurni u to što radite, nemojte dirati ovu oznaku. 93 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Oznaka meta i generički objekat meta Svaka oznaka meta se obavezno sastoji od imena i nekog sadržaja, tako da generički objekat Meta iz Dreamweaver a predstavlja dobar alat za umetanje korisničkih meta informacija. Ako želite da ubacite oznaku meta, treba da uradite sledeće: 1. Na paleti Insert pronađite kategoriju HTML i od objekata Head izaberite objekat Meta. 2. U okviru za dijalog koji se otvara preko pomoćnog menija izaberite atribut name ili http-equiv. (Atribut http-equiv povezuje atribut i odgovarajuće ime sa zaglavljem u HTTP odgovoru, radi dalje obrade. Osim ako ste potpuno sigurni da treba da koristite atribut http-equiv, najbolje je da koristite atribut name.) 3. U polju Value unesite ime (ili http-equiv) koji želite. 4. U delu Contents unesite vrednost koju želite da dobije atribut content. Zašto se ovaj generički objekat ne bi koristio za unos svog meta sadržaja? Oznake meta koje koriste standardne ključne reči, koje pretraživač ili drugi agenti mogu da obrađuju takođe traže standardnu sintaksu. O zahtevima vezanim za specifičnu sintaksu vode računa specijalni Meta objekti iz Dreamweavera. U Dreamweaveru ne postoje sve oznake meta koje biste poželeli da koristite. Ključne reči meta i njihov opis Nesumnjivo je da su oznake meta koje se najviše koriste one koje mašinama za pretraživanje pomažu da pronađu u vrate informacije o dokumentima. Najviše se koriste oznake keywords i description. Evo kako se one koriste: <meta name="keywords" content="Marx Brothers, humor,.vaudeville, movies, Groucho, Harpo, Chico, Zeppo, Gummo">.<meta name="description" content="An unofficial look at.America's kings of slapstick and wisecracking. With links.and freebies."> Oznaka meta keywords sadrži listu reči odvojenih zarezima, koje posetioci na webu mogu da otkucaju u svom polju search. Ta reč bi trebalo da ih odvede do tekućeg dokumenta. Oznaka meta description sadrži nekoliko rečenica koje se mogu koristiti na strani sa rezultatima pretraživanja, da bi se predstavio tekući dokument. Za svaku od ovih oznaka postoji u Dreamweaver u odgovarajući objekat. Ako želite da neki od ovih objekata ubacite u svoje zaglavlje, izaberite objekat sa palete Insert ili iz menija i u okviru za dijalog unesite potrebne informacije. 94 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Maksimalna mogućnost pretraživanja Jedno je koristiti ključne reči i opise, a drugo koristiti ih na pravi način. Što više budete znali o mašinama za pretraživanje i načinu njihovog rada, to će rezultati pretraživanja Vaših strana biti bolji. Mašine za pretraživanje rade tako što šalju automatizovane programe, koje nazivamo robotima (ili web puzačima, ili špijunima) da indeksiraju web strane. Indeksiranje se sastoji od vraćanja dokumenata i rekurzivnog vraćanja svih dokumenata koji su preko linka povezani sa tim dokumentom. Od koje strane treba početi indeksiranje roboti određuju na različite načine. Tu spada i registracija strane kod mašine za pretraživanje, koju radi autor web strane ili webmaster. Kada posetilac pristupi mašini za pretraživanje i unese jednu ili više ključnih reči, mašina vraća rezultat na bazi svoje analize dokumenata koje je vratila. Rezultati se baziraju na pronađenim ključnim rečima, uparenim rečima u okviru opisa, naslova strane, vidljivog sadržaja dokumenta, linkova, kao i alt teksta. Evo kako bi izgledao kod iz zaglavlja koji je napisan tako da mogućnost pretraživanja i pronalaženja bude maksimalna: <head> <title>The Web Widgets Construction Materials Home Page</title> <meta name="keywords" content="web, widgets, construction materials, building tools, web tools, snarflators, crambangers, diffusion devices, child, children, diffuse, diffusion,....."> <meta name="description" content="The Web Widgets Construction > Materials Company, home to a vast selection of snarflators, crambangers and other web tools. Visit us for daily specials and our unique how-to section."> <!--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. - -> </head> Šta je to što ovaj kod čini lakim za pretraživanje? • Naslov strane – Informacija u okviru oznake title je opisna i čitljiva (može se pretražiti i prikazati na stranama koje nastaju kao rezultat pretraživanja) i koristi nekoliko reči koje se nalaze u listi ključnih reči. • Ključne reči (keywords) – Kod ključnih reči se pravi razlika između malih i velikih slova, a tamo gde treba, one se pišu u množini. Reči se ne ponavljaju, osim ako je neophodno. (Nepotrebna ponavljanja se ili ignorišu ili smatraju spamom i mogu da dovedu do toga da se ceo sajt zabrani od strane mašine za pretraživanje.) Lista sa ključnim rečima je aproksimativno dugačka 900 karaktera, što je maksimalna dužina koju neke mašine za pretraživanje prihvataju (neke prihvataju do 1024 karaktera). • Opis (description) – U opisu se koriste reči iz liste ključnih reči. Dužina je malo manja od 200 karaktera, što je maksimum koji mašine za pretraživanje prihvataju (neke prihvataju i manje). Treba da znate da ako su Vaše ključne reči ili opis suviše dugi, onda se prilikom pretraživanja neće uzimati u obzir. To ne mora da znači da će robot odbiti tu stranu. • Komentar (comment) – Komentar se ubacuje da bi pomogao nekim robotima koji ne ispituju oznake meta (kao što su Excite i Magellan). U njemu se ponavlja sadržaj opisa. Ograničavanje mogućnosti pretraživanja Zašto biste želeli da sprečite robote da indeksiraju Vašu stranu? Mogli biste da imate nekoliko razloga. Možda se u nekim oblastima Vašeg sajta nalaze poverljivi podaci. Ako se na Vašem sajtu koriste frejmovi, onda možda ne želite da se frejmovi indeksiraju izvan skupa frejmova. U izvesnim delovima, kao što su fascikle sa ASP ili CGI skriptovima se nalaze skriptovi koji kada se izvrše mogu da daju neželjene rezultate. Kod velikih sajtova, povećani saobraćaj koji potiče od robota koji indeksiraju svaku pojedinačnu stranu može da dovede do zagušenja servera. Saobraćaj koji potiče od robota možete da ograničite na dva načina. Sa svakim od njih Vam može pomoći i Dreamweaver. 95 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 Datoteka robots.txt – U ovoj fascikli koja se nalazi na serveru se mogu definisati određene fascikle na sajtu koje roboti ne bi trebalo da indeksiraju. Pomoću ove datoteke pojedine oblasti na sajtu možete u potpunosti da izolujete od svih ili samo od nekih robota. Evo kako bi mogao da izgleda sadržaj ove datoteke: USER-AGENT: * DISALLOW: /asp/ DISALLOW: /cgi-bin/ DISALLOW: /private_folder/ Nedostatak upotrebe datoteke robots.txt je da svaki web server mora da ima samo jednu takvu datoteku, koja se nalazi u korenskoj fascikli servera. Prilagođavanje ove datoteke, prema tome, spada u prava i obaveze administratora tog servera, a ne autora web strana. • Oznaka meta robots – Manje je pouzdana nego datoteka robots.txt, ali je lakše primeniti. U svoj dokument treba da dodate oznaku meta sa imenom " robots". Atribut content može imati neke od sledećih vrednosti: all, none, index, noindex, follow i nofollow. Vrednosti se međusobno odvajaju zarezima. Ako želite da eksplicitno dozvolite pristup do svih linkova unutar strane, treba da napišete sledeći kod: <meta name="robots" content="all, follow, index"> Ako želite da zabranite pristup do strane i njenih linkova treba da napišete sledeće: <meta name="robots" content="none,noindex,nofollow"> Ako želite da dozvolite pristup do tekućeg dokumenta, ali ne i do njegovih linkova treba da napišete: <meta name="robots" content="index,nofollow"> Pošto u Dreamweaveru ne postoji objekat Meta Robots, ove oznake ćete ubaciti preko generičkog objekta Meta. Kliknite objekat Meta koji se nalazi na kartici Head na paleti Insert. Oznaka meta refresh Još jedna standardizovana i populrana vrsta oznake meta je oznaka meta refresh. Ovu oznaku obrađuje pretraživač, a rezultat je da se ista strana ponovo učita ili se učita neka nova strana, nakon određenog zadatog vremenskog intervala. Ako želite da se tekuća strana ponovo učita nakon 10 sekundi, treba da napišete sledeći kod: <meta http-equiv="refresh" content="10"> Ako želite da se nakon 5 sekundi učita nova strana, sintaksa bi bila: <meta http-equiv="refresh" content="5;URL=pagetwo.html"> Oznake refresh koje ponovo učitavaju istu stranu se često koriste kod web strana sa dinamičkim podacima, kao što su strane sa vestima, zalihe iz magacina ili vreme i temperatura. Takođe se koriste i kod strana tipa web kamera. Svakih nekoliko sekundi se strana ponovo učitava i prikazuje se nova slika. Oznake refresh koje učitavaju nove strane se često koriste kod strana za redirekciju: "Naš sajt je premešten." Takođe se koriste kod ekrana sa bljeskom, kod kojih se nekoliko sekundi prikazuje kratka poruka dobrodošlice ili neka grafika, nakon čega se odlazi na pravu naslovnu stranu. Objekat Meta refresh Oznaku refresh ćete u Dreamweaveru ubaciti preko obekta Refresh. Izaberite ovaj objekta sa palete Insert ili iz menija i unesite broj sekundi koji treba da protekne pre nego što se učita nova ili ista strana. Saveti vezani za osvežavanje Premda se ova oznaka upotrebljava vrlo jednostavno, kao i uvek, postoje neke stvari na koje treba obratiti pažnju. • Na žalost, oznake refresh ne koriste samo nezlonamerni sajtovi. Njih u različite loše svrhe koriste i ozloglašeni sajtovi, koji time omogućavaju da se označe i neke na oko bezopasne strane. Iz tog razloga neke mašine za pretraživanje ne indeksiraju strane sa oznakom refresh. • Posebnu pažnju zahteva odluka o tome koliko treba sačekati pre ponovnog učitavanja (posebno kada se učitava nova strana). Koliko dugo je preterano dugo? Ako na tekućoj strani postoji neki 96 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 sadržaj (animacija, tekst koji treba da se pročita), koliko dugo je dovoljno dugo? Ako osvežavanje treba da Vas odvede na novu stranu, mogli biste da razmotrite i ubacivanje linka, koji se može kliknuti, tako da nestrpljivi korisnici ne moraju da čekaju definisani broj sekundi. Rad sa ostalim sadržajem zaglavlja Verovatno ćete najviše vremena provesti u radu sa različitim Meta objektima iz Dreamweavera, ali i objekti link i base imaju svoje mesto. Objekat Base i oznaka base Svrha oznake base u HTML-u je da obezbedi apsolutni URL ili link koji pretražvač automatski koristi za rešavanje svih linkova u okviru dokumenta. Ovo zvuči mnogo komplikovanije nego što stvarno jeste. Oznake base i apsolutni URL Kada u HTML dokumentu pretraživač naiđe na relativni URL, on kompletnu adresu pravi na osnovu "osnovnog" URL-a, koji je obično sam taj dokument. Ako je adresa Vaše web strane http://www.yourcompany.com/index.html i ako na strani postoji link images/spacer.gif, onda pretraživač apsolutnu adresu pravi na osnovu ove dve adrese i to je: http: //www.yourcom-pany.com/images/spacer.gif. Ako u zaglavlju dokumenta postoji oznaka base, koja definiše alternativni URL, kao što je: <base href="http://www.webwidgets.com/store/"> onda se svi relativni linkovi u dokumentu računaju relativno u odnosu na tu adresu. Prema tome, <a href="pricelist.html">Home</a> se rešava kao: http://www.webwidgets.com/store/pricelist.html Slično se link <img src="../images/spacer.gif"> rešava kao http://www.webwidgets.com/images/spacer.gif Ove adrese će se koristiti čak i ako je URL u dokumentu potpuno drugačiji, kao na primer: http://www.homepagesRus.com/index.htm Kada biste želeli da koristite oznaku base umesto URL adrese dokumenta? Dve su mogućnosti: • Kada se prave preslikani sajtovi, kod kojih skup strana na različitim web serverima koriste zajednički skup resursa slika ili strana, oznaka base omogućava ulaz strana na preslikani server. Preko ove oznake se mogu koristiti relativni linkovi koji bi ukazivali na resurse koji se nalaze na originalnom serveru. • Kada se u elektronske poruke ubacuje HTML, svi linkovi moraju biti ili apsolutni ili relativni u odnosu na zadatu oznaku base. Razlog je što elektronske poruke nemaju URL koji bi pretraživač koristio u pravljenju apsolutnih putanja. (Neki programi za elektronsku poštu, na primer Hotmail, ne mogu korektno da naprave URL preko oznake base. Zbog toga je sigurnije da imate apsolutni URL, a da se ne oslanjate na oznaku base.) Oznake base i atribut target za linkove Atribut target kod linka određuje u kom prozoru pretraživača će se prikazati dokument na koji link vodi. Ispravne vrednosti za ovaj atribut su ime bilo kog otvorenog prozora, ili frejma iz skupa frejmova, ili neka od generičkih vrednosti, kao što je _blank za novi prozor, ili _top za glavni prozor iz skupa frejmova. Normalna sintaksa linka je: <a href="widgets.html" target="_blank"> 97 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako u zaglavljau dokumenta postoji oznaka base, koja ukazuje na neki target, kao što je ovaj, svi linkovi u dokumentu se otvaraju u tom ciljnom prozoru, baš kao da je svaki od tih atributa zadat u okviru pojedinačnog linka. <base target="_blank"> Link koji je kodiran na ovaj način, se ponaša kao da je zadata puna sintaksa za atribut target. <a href="widgets.html"> Zašto bismo za definisanje atributa target koristili oznaku base, a ne pojedinačne linkove? Rezultat je efikasniji HTML kod, posebno ako na strani postoji puno linkova (strana sa resursima ili za bibliografiju, na primer). Ovakav način rada može da Vam olakša život, pošto ne morate da pamtite svaki pojedinačni atribut. Takođe su i promene jednostavnije, ako kasnije promenite mišljenje o tome gde treba da se otvaraju novi prozori. Umesto da menjate desetine pojedinačnih linkova, možete da promenite samo oznaku base. Rad sa oznakom Base u Dreamweaveru Da biste ubacili oznaku base u dokument u Dreamweaveru, treba da koristite objekat Base, koji se nalazi na paleti Insert, ili u meniju Insert. Ovaj objekat omogućava da unesete URL adresu i ime za atribut target. Kao i sa drugim sadržajem zaglavlja, dokle god ste u prikazu Design, nije bitno gde se u trenutku kada se objekat bira, nalazi kursor. Oznaka base se automatski ubacuje u zaglavlje. Kada u okruženju Dreamweavera radite sa oznakom baze, na umu treba da imate sledeće: • Upotrebljavajte samo jednu oznaku base po dokumentu. Dreamweaver Vas neće sprečiti da ubacite i više oznaka base u jedan dokument, ali to nije ispravan HTML kod. Nemojte to raditi. • Izbacite prazne atribute href. Ako definišete atribut target za base i nemate zadate URL adrese, Dreamweaver će za oznaku base napisati sledeći kod (problematični kod je istaknut) <base href=" " target="_blank"> Iako je ovo tehnički ispravno, može dovesti do toga da pretraživač pogrešno interpretira sve linkove na strani. (Link na spacer.gif se rešava kao http://spacer.gif, što je adresa koja nema smisla.) Ovakve probleme možete izbeći ako pređete u prikaz Code i manuelno izbacite prazan atribut href. Ako se nađete u situaciji da stalno koristite oznaku base samo za definisanje atributa target, možete da preuzmete objekat Base Target, iz proširenja Macromedie za Dreamweaver. • Kucajte apsolutne URL adrese. Iako Dreamweaver omogućava da putem prozora pronađete i izaberete URL, na taj način se kreiraju relativne adrese. Oznaka base se uobičajeno koristi sa apsolutnim URL adresama. • Nemojte zaboraviti kosu crtu na kraju (/). Pretraživač zanemaruje bilo koji deo URL adrese kojoj nedostaje završna kosa crta. Naredne URL adrese koje se koriste u oznaci base su ekvivalentne: http://www.webwidgets.com/ http://www.webwidgets.com/index.html http://www.webwidgets.com/images • Pogledajte kako strane sa ovakvim URL adresama izgledaju. Nakon što ste zadali apsolutni URL za oznaku base, tu stranu nećete moći da vidite na pravi način (ni u Dreamweaveru ni u pretraživaču), sve dok sve relevantne datoteke ne prebacite na server. Ako baš želite da svoju stranu pogledate dok se nalazite u lokalu, onda adresu treba da zamenite adresom fascikle svog lokalnog sajta. U 98 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 pitanju je URL adresa koja počinje tekstom file:// protokol. Ako želite da pristupite nekoj od takvih informacija, otvorite dokumente sa sajta u Dreamweaveru i preko dugmeta Preview in Browser (F12) pogledajte kako strana izgleda u nekom pretraživaču. Pogledajte kako izgleda adresa u polju za adresu. Putanja završava sa istim imenom kao i privremena datoteka, ali bi trebalo da počinje lokalnom URL adresom sajta, na primer (adresa lokalne fascikle je prikazana masnim slovima): Error! Hyperlink reference not valid. 0Widgets/Local%20Site/ wTMP2onxb308wp.htm Iskopirajte relevantan deo adrese iz pretraživača i postavite ga u oznaku base. (Proverite da li ste uključili kosu crtu na kraju!) <base href=" Error! Hyperlink reference not valid. > Local%20Site/"> Sada možete da pogledate kako ovo izgleda i u lokalu, ali nećete koristiti dugme Preview in Browser iz Dreamweavera. Stranu morate da otvorite sami, iz nekog pretraživača. Naravno, pre konačnog postavljanja strane ne smete da zaboravite da ponovo vratite prvobitni URL. • Pano Site nemojte koristiti za premeštanje datoteka. Nakon što ste postavili bazni URL, morate da brinete o relativnim linkovima. Ako promenite strukturu datoteka na sajtu preko panoa Site u prikazu File, Dreamweaver pokušava da ažurira sve relativne linkove. Nemojte to da dozvolite. Ovim će svi linkovi biti oštećeni i neće raditi. Najsigurnije je da raspored datoteka podesite izvan Dreamweavera, preko operativnog sistema, odnosno njegovog programa za upravljanje datotekema. Oznake linkova i objekat Link Pomoću oznake link je moguće, bar teoretski, definisati sve vrste veza između dokumenata. Tu spada i definisanje nekih dokumenata kao prethodnih ili narednih u nizu, povezivanje rečnika za stranu, itd. Na žalost, nijedan od glavnih pretraživača još uvek ne podržava ove mogućnosti. Trenutno je jedino pouzdana implementacija oznake link, tako da se ukazuje na spoljašnji style sheet dokument. 99 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 8. Kreiranje tabela Osnovno o tabelama Tabele same po sebi nije teško shvatiti, ali se one sastoje od mnoštva različitih elemenata, tako da je rad sa tim elementima u Dreamweaveru i pretraživaču složen proces. Tabele u pretraživaču U HTML-u se tabele kreiraju preko oznake table. Svaka tabela se sastoji od određenog broja vrsta, koje se definišu preko oznake tr (table row - vrsta tabele). Broj kolona se nigde ne definiše. On se zadaje preko broja ćelija u vrstama. Osnovni kod za tabelu sa dve vrste i dve kolone je: <table> <tr> <th>[header cell contents here]</th> <th>[header cell contents here]</th> </tr> <tr> <td>[cell contents here]</td> <td>[cell contents here]</td> </tr> </table> Ova tabela sadrži jednu vrstu sa zaglavljem ćelija, kao i jednu sa podacima. Nijedna od oznaka koje se ovde pojavljuju ne zahteva atribute. Postoje opcionalni atributi, koji određuju kako tabela izgleda i kako se ponaša. Ovi atributi se odnose na dimenzije, okvir, tretman sadržaja ćelija, itd. Postoji još puno drugih atributa. Neki od njih postoje u HTML specifikaciji, a drugi su definisani u različitim pretraživačima. (Proverite pano Dreamweaver Reference u kome možete naći potpuniju listu.) Originalno su tabele u HTML-u namenjene prikazivanju tabelarnih podataka. Web dizajneri su počeli da ih koriste za definisanje rasporeda na strani. Sa pojavom CSS pozicioniranja, tabele bi trebalo da se vrate na originalnu upotrebu. Nekonzistentna podrška pretraživača za CSS, međutim, dovodi do toga da su tabele i dalje najbolje za definisanje rasporeda strane. Tabele u Dreamweaveru Pošto su tabele toliko bitne, u Dreamweaveru postoji niz alata i komandi koje se mogu koristiti za rad sa njima. Neke je sigurnije koristiti od drugih, a neke se koriste intuitivnije od drugih. Bez obzira na to koja je Vaša strategija, bez sumnje ćete ih negde koristiti. Interfejsi za rad sa tabelama Naravno da je prva odluka koju treba doneti, kao i sa bilo čim drugim u Dreamweaveru, da li sa tabelama želite da radite u prikazu Code ili Design. Čak i u okruženju prikaza Design imate na raspolaganju više mogućnosti. Kako bi trebalo da izgleda interfejs za rad sa tabelama? Koja je vizuelna pomoć potrebna? Izbor režima rada sa tabelama Ako želite da izaberete režim rada sa tabelama, idite u meni View i izaberite neku od podopcija iz podmenija Table Mode. Možete i da sa palete Layout Insert izaberete neko od tri dugmeta Tab Mode. U svakom slučaju, na raspolaganju imate tri mogućnosti: • Standard (View > Table Mode > Standard Mode) – Ovo je podrazumevani režim za rad sa tabelama. U ovom slučaju se tabele u prikazu Design prikazuju približno isto kako bi izgledale u pretraživačima. Ovo je režim koji iskusni korisnici najviše vole, ali može biti nezgrapan, ako tabela ima složenu strukturu, ili ako postoje male i tanke ćelije, • Expanded (View > Table Mode > Expanded Tables Mode) – Ovaj režim, koji je novost u verziji Dreamweaver MX 2004, tabele prikazuje sa veštački dodatim prostorom između i unutar ćelija. Dodata je i vidljiva granica tabele, čak i ako tabela nema definisanu granicu. U ovom režimu se žrtvuju neki od WYSIWYG (ono što vidiš je ono što dobijaš) kvaliteta koji postoje u režimu Standard. Sa druge strane, struktura tabele se lakše prati, a elementi tabele se lakše biraju i sa njima se lakše radi. Rad u režimu Expanded je isti kao u režimu Standard, ali sa dodatnom pomoći u radu. 100 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 Layout (View > Table Mode > Layout Mode) – Ovaj režim ne samo da različito prikazuje tabele, u pitanju je potpuna alternativa za rad sa tabelama. Iako je vrlo intuitivan i atraktivan za početnike u web dizajnu, tu postoji niz opasnosti, tako da možete dobiti strane sa lošom strukturom. Pomoć u pregledu tabela Bez obzira da li radite u režimu Standard ili Expanded, postoji dodatna vizuelna pomoć, koju možete dobiti od interfejsa u prikazu Design. • Table Widths (View > Visual Aids > Table Widths) - Ovo je novost u verziji Dreamweaver MX 2004. Kada se izabere ova opcija, prikazuje se horizontalna linija na dnu ili vrhu izabrane tabele. Linija ukazuje na dimenzije tabele ili ćelije. Ako kliknete ikonu u obliku trougla, dobićete dodatnu pomoć za izbor elemenata i podešavanje osobina tabela. Ova pomoć funkcioniše i u režimu Standard i u režimu Expanded. • Table Borders (View > Visual Aids > table Borders) – Ako radite u režimu Stadnard, ova vizuelna pomoć prikazuje ivice tabele, koja nema definisane ivice, tako da se u prikazu Design može videti struktura tabele, iako se to u pretraživaču neće videti. Pošto se u režimu Expanded uvek prikazuju ivice, to ova pomoć u tom režimu nije potrebna. Umetanje tabela Ako želite da ubacite tabelu (osim ako radite u režimu Layout), možete da koristite objekat Table sa palete Layout Insert, ili da izaberete Insert > Table. U oba slučaja se otvara okvir za dijalog Insert Table. U ovom okviru za dijalog možete da definišete osnovnu strukturu tabele. Kada kliknete OK, tabela će se ubaciti. Primetićete da osim definisanja broja vrsta i kolona, druge osobine tabele ne možete da zadajete na ovom mestu. Struktura tabele i atributi se mogu kasnije menjati preko Property Inspectora, tako da ništa što ovde podesite nije nepromenljivo.Da li ste ikad pogledali kod potpuno nove tabele i u njemu videli ? Šta se tu dešava? U pitanju je HTML entitet za razmak. Neki pretraživači neće pravilno prikazati prazne ćelije, tako da Dreamweaver ne dozvoljava da pravite takve ćelije. Svaki put kada naiđe na praznu ćeliju, Dreamweaver stavlja ovaj razmak. Čim u tu ćeliju stavite neki sadržaj, Dreamweaver briše taj razmak. Obrišete sadržaj, a razmak se vrati. Ovo je sjajna pomoć u rukovanju koju Vam pruža Dreamweaver. 101 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Izbor tabela Rad sa tabelama podrazumeva izbor tabela i njihovih vrsta, kolona i ćelija, što nije uvek lako. Što ste bolje upoznati sa različitim opcijama vezanim za selektovanje, to ćete efikasnije raditi. Dve osnovne tehnike za selektovanje su putem klika i prevlačenja preko različitih stavki u prozoru Document i putem Tag Selectora. Za kretanje kroz tabelu možete da koristite i prečice sa tastature, pri čemu možete i da selektujete pojedine stavke. U većini slučajeva ćete koristiti metod koji najviše volite, ali ponekad će jedan metod u određenoj situaciji biti bolji od drugog, tako da nije loše da poznajete sve te metode. Selektovanje u prozoru Document Neki ljudi su rođeni za klik i prevlačenje. Kliknuti nešto u prozoru Document je način koji je najviše intuitivan za većinu ljudi. Kod tabela, postoji puno različitih mogućnosti. • Selektovanje pojedinih ćelija – Pre svega, ako je sve što želite da uradite samo podešavanje osobina ćelije u Property Inspectoru, onda tu ćeliju ne morate selektovati. Samo kliknite unutar ćelije, da biste kursor postavili na tu lokaciju. U donjem delu Property Inspectora će se prikazati osobine te ćelije. Ako želite da selektujete ćeliju, pritisnite taster Ctrl i kliknite unutar ćelije. Ako želite da odjednom selektujete više ćelija, pritisnite Ctrl i kliknite one ćelije koje želite da izaberete. Ako želite da selektuejte više susednih ćelija, kliknite mišem i prevucite preko svih ćelija koje želite da izaberete. Možete i da kliknete u prvu ćeliju, da pritisnete taster Shift i kliknte drugu ćeliju. • Selektovanje vrsta – Vrstu ćete selektovati tako što ćete selektovati sve ćelije koje je čine. • Selektovanje kolona – Kolonu možete da selektujete tako što ćete selektovati sve ćelije koje je čine. Ako je prikazana linija Table Width, možete i da kliknete trouglić indikatora širine za tu koloni i da izaberete opciju Select Column. • Selektovanje tabele – Celu tabelu možete selektovati ako kliknete njenu ivicu. Ovim se štedi iznenađujuća količina koordinacije ruke i oka. Prilikom klika na ivicu tabele, upadate u rizik da slučajno promenite njenu veličinu. Korisna i sigurna prečica je da desnim tasterom miša kliknete bilo gde u ćeliji tabele i da izaberete opciju Table > Select Table. Ako je prikazana linija Table Width, možete i da kliknete ikonu trougla indikatora širine tabele i da izaberete opciju Select Table. 102 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Selektovanje preko Tag Selectora Kada radite sa tabelama, jedan od najboljih prijatelja može biti Tag Selector. Njega najpre možete da koristite kao indikator mesta u strukturi tabele na kome se nalazite. Kliknite u neku ćeliju, ili izaberite ćeliju ili vrstu, a Tag Selector će prikazati strukturu tabele. Pored ovog, Tag Selector je naravno dobar za izbor pojedinih oznaka. Samo kliknite u neku ćeliju da biste na to mesto postavili kursor. Nakon toga kliknite oznaku td u Tag Selectoru, da biste izabrali ćeliju, oznaku tr da biste izabrali vrstu ili oznaku table, da biste izabrali celu tabelu. Tag Selector je manje koristan kod selektovanja višestrukih elemenata, ili za selektovanje kolona tabele (pošto kolone nemaju pridruženu oznaku). Navigacija i selekcija preko tastature Dreamweaver sa HTML tabelama radi na način koji je sličan načinu na koji radite u programima za obradu teksta, tako da u njemu možete da koristite svoje omiljene načine za pristup pojedinim elementima tabele. Ako želite da se prebacujete iz jedne u drugu ćeliju, možete da pritisnete taster Tab (za pomeranje unapred) ili tastere Shift+Tab (za pomeranje unazad). Za kretanje kroz tabelu, odnosno njene ćelije, možete koristiti i strelice sa tastature. Ako želite da preko tastature selektujete neku ćeliju, treba da budete sigurni da je kursor u toj ćeliji, a onda možete da pritisnete Ctrl + (otvorena uglasta zagrada). Ovo je prečica sa tastature za komandu Edit > Select Parent Tag. Kada ste izabrali prvu ćeliju, susedne možete izabrati pomoću strelica. Možete i da ponovo pritisnete Ctrl +[ i tako izaberete vrstu u kojoj se ta ćelija nalazi, ili da ponovo pritisnete Ctrl + [ i da izaberete celu tabelu. Podešavanje osobina tabele Kao i sve drugo u prikazu Design, i tabele i njihove ćelije imaju pridružene Property Inspectore, koji mogu da pomognu u radu sa njima. Kada izaberete tabelu, pojavljuje se Table Property Inspector. Ako kursor postavite u neku ćeliju, u donjem delu Property Inspectora će se prikazati osobine ćelije tabele. Iako vrste u tabeli nemaju pridružene Inspectore, ako su izabrane sve ćelije iz jedne vrste, Property Inspector prikazuje te osobine u delu rezervisanom za osobine ćelija. 103 / 299 Fakultet organizacionih nauka • • • • • Dreamweaver MX 2004 Prazne vrednosti za polja cellpadding i cellspacing znače da ove osobine nisu zadate, što dalje znači da će pretraživač sam da odredi te vrednosti. Većina pretraživača dodaje po dva piksela za oba atributa. Ako želite da napravite tabelu bez ovih atributa, ove vrednosti treba da podesite na 0. Nezavisno od osobine vezane za okvir cele tabele, većina osobina koje su vezane za okvir (boja, okvir pojedniačnih ćelija, itd.) nisu deo HTML standarda, tako da neće raditi u svim pretraživačima. Zbog toga te atribute treba da koristite pažljivo i da, u slučaju da su Vam potrebne dodatne informacije, proverite pano Reference. Iako je osobina width deo HTML standarda, osobina height to nije. Ako visinu (height) dodelite svojim tabelama ili ćelijama, to može dovesti do prikazivanja u pretraživaču. Izbegavajte zadavanje visine, osim ako niste primorani. Ako morate da zadate i visinu, onda u svim ciljnim pretraživačima treba da pogledate kako to izgleda. Mnoge osobine koje se odnose na vizuelno prikazivanje tabele (border, bgcolor ili aligment), se mogu efikasnije definisati preko CSS-a. Ako osobinu Background koristite za podešavanje neke slike, koja treba da bude u pozadini tabele, odabrana slika će se ponavljati u vidu ploča, tako da se popuni cela tabela. U Netscapeu 4 ovo popunjavanje neće raditi kako treba. Promena veličine i strukture tabele Koliko velika treba da bude Vaša tabela? Koliko vrsta i kolona treba da ima? Šta sa spajanjem ćelija u vrstama i kolonama? Svi opšti poslovi se mogu obaviti preko Table Property Inspectora, u prozoru Document, kao i preko menija Modify > Table. Podešavanje (i brisanje) dimenzija Dimenzije tabele i ćelija u njoj možete da podesite tako što ćete u Property Inspectoru uneti odgovarajuće brojeve, ili tako što ćete kliknuti i prevući ivice tabele ili ćelije, na novu lokaciju (u prozoru Document). Premda je metoda sa prevlačenjem sigurno više intuitivna, one je vrlo opasna, pošto je lako da se izgubi trag o dimenzijama koje Dreamweaver dodaje. Ovaj način može da dovede do frustracije, pošto se tabele, prilikom Vašeg prevlačenja ivica, neće uvek menjati onako kako očekujete. • Podešavanje dimenzija preko piksela ili u procentima Za izbor da li će se dimenzije tabele zadavati u pikselima ili procentima, možete da koristite padajći meni u Property Inspectoru. Kod tabela čije su dimenzije zadate u procentima, veličina tabele se menja u skladu sa veličinom prozora pretraživača, ili (kod tabela koje su ugnježđene) u skladu sa promenom veličine elementa strane u kome se ta tabela nalazi. U Property Inspectoru za ćelije ne postoji padajući meni, ali i dalje dimenzije ćelije možete da zadate u procentima. Potrebno je da iza broja koji unesete za visinu i širinu dodate oznaku procenta %. Ovakve ćelije imaju dimenzije u procentima u odnosu na veličinu tabele. (To znači da ako širine ćelija zadajete u procentima i to za sve ćelije u tabeli, treba da budete sigurni da je ukupan zbir 100%.). • Konevrzija od piksela u procente – Na Table Property Inspectoru postoji niz dugmadi koje se koriste za konverziju dimenzija zadatih u procentima u vrednosti koje se zadaju u pikselima, i obrnuto. Ovo se odnosi na celu tabele (i sve njene ćelije). • Brisanje dimenzija – Ako želite da obrišete dimenzije, u Table Property Inspectoru postoje dugmad Clear Column Widths i Clear Row Height. Ova dugmad su vrlo korisna kada imate mnoštvo dimenzija ili kada su u tabeli zadate pogrešne dimenzije pa morate da počnete iz početka. Ako ste prikazali liniju Table Widths, možete i da kliknete truoglić za neku kolonu i da izaberete opciju Celular Column Width. Dodavanje i uklanjanje vrsta i kolona Prilikom ubacivanja tabele, Vi definišete broj vrsta i kolona koje ta tabela treba da ima. Ipak, planovi se menjaju. Ništa nije večno. • Preko tastature – Ako želite da na kraju tabele dodate vrstu, postavite kursor u poslednju ćeliju tabele (na desnom donjem kraju) i pritisnite taster Tab. Pojaviće se nova vrsta. Na taj način možete da lako, prilikom kucanja, dodajete nove vrste. (Nova vrsta ima iste atribute, kao vrsta iznad nje.) • Preko Property Inspectora – Ako vrstu ili kolonu želite da dodate na kraj tabele, možete da selektujete celu tabelu i promenite broj vrsta ili kolona. Ako veći broj zameni manjim, Dreamweaver briše krajnje donje vrste i krajnje desne kolone (i njihov sadržaj). Ako zadate veći broj, Dreamweaver dodaje vrstu na dnu i kolonu sa krajnje desne strane. • Preko prozora Document – Ako želite da obrišete vrstu ili kolonu, izaberite je i pritisnite Delete. Naravno da će se obrisati i sav sadržaj koji se nalazio u tim ćelijama. 104 / 299 Fakultet organizacionih nauka • • • • • • Dreamweaver MX 2004 Preko linije Table Widths – Ako želite da ubacite novu kolonu, kliknite trouglić ispod kolone koja je sa leve ili desne strane u odnosu na ono što želite da ubacite, i izaberite opciju Insert Column Left ili Insert Column Right. Preko menija – U meniju Modify > Table (koji se otvara i kao pomoćni meni, ako desnim tasterom miša kliknete unutar tabele) postoji niz korisnih komandi, uključujući i komande za dodavanje i brisanje vrsta i kolona. Insert Row/Insert Column – Ubacuje novu vrstu ili kolonu direktno ispred (gore ili sa leve strane) u odnosu na vrstu ili kolonu u kojoj se trenutno nalazi kursor. Insert Rows or Columns – Mnogo fleksibilnija komanda, koja prikazuje okvir za dijalog u kome možete da ubacujete onoliko vrsta ili kolona koliko želite, i to pre ili posle kursora. Delete Row/Delete Column – Briše se vrsta ili kolona u kojoj se nalazi kursor. Preko palete Insert – Novost u verziji Dreamweaver MX 2004 je da se na paleti Layout Insert nalaze objekti koji se koriste za umetanje vrsta i kolona u tabelu. Spajanje i podela ćelija Strukturu tabele možete da promenite i spajanjem i podelom ćelija. Ako želite da spojite dve ili više ćelija, izaberite te ćelije ili Izaberite Modify > Table > Merge Cells, ili kliknite dugme Merge Cells u Property Inspectoru. Ako želite da ćeliju podelite na dva ili više delova, postavite kursor u tu ćeliju i izaberite komandu Modify > Table > Split Cells, ili kliknite dugme Split Cells, u Property Inspectoru. Otvoriće se okvir za dijalog u kome definišete način na koji želite da delite ćelije. Izaberite opcije koje želite, a onda kliknite OK. Okvir za dijalog će se zatvoriti, a ćelije će se podeliti. Šta se dešava kada spajate ćelije? Dreamweaver će na jednu od izabranih ćelija primeniti atribute rowspan i colspan, a ostale ćelije će obrisati. Sadržaj svih ćelija koje se spajaju se prebacuje u novu ćeliju. Možda ima više smisla da strukturu tabele menjate na neki drugi način. Ipak, ako na primer, spajate ćelije u svakoj vrsti i koloni u tabeli sa dve vrste i kolone, dobijate u suštini tabelu sa jednom kolonom. U tom slučaju Dreamweaver menja strukturu tabele u skladu sa time. Preko spajanja ćelija možete da dobijete vrlo složenu strukturu tabela. Ako ostavite da Dreamweaver brine o atributima rowspan i colspan, sa kodom se neće dogoditi ništa loše. Šta se dešava kada delite ćelije? Kada ćeliju delite na kolone, Dreamweaver povećava broj kolona u tabeli i drugim ćelijama u tekućoj koloni dodaje atribut colspan. Ovo je prilično velika promena strukture. Isto se dešava i kada delite ćelije u nove vrste. Povećava se ukupan broj vrsta, a svim ostalim ćelijama se dodaje atribut rowspan. Rad sa tabelama Kada budete morali da radite sa tabelama, treba da ih naterate da one rade za Vas. Želja Vam je da one izgledaju lepo, da imaju pravi oblik i da se koriste efikasno formatirane. Želite i da one budu dostupne. Sve to možete postići uz pomoć Dreamweavera. 105 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kontrolisanje dimenzija tabele Apsolutno najteža stvar u radu sa tabelema je da budete sigurni da će u različitim pretraživačima ona imati iste dimenzije. Ako ne morate, nemojte koristiti dimenzije Upamtite da tabele ne moraju da imaju dimenzije. Tabele bez dimenzija se skupljaju oko njihovog sadržaja, odnosno automatski se prilagođavaju potrebama. Ponekad je to sve što Vam je potrebno. Ponekad je potrebno postaviti samo nekoliko dimenzija, ali na pravim mestima. Probajte. Selektujte tabelu sa podacima ili rasporedom, koja Vam se čini podesnom i kliknite dugmad Clear Column Widths i Clear Row Heights sa Property Inspectora, da biste uklonili sve dimenzije. Kako izgleda? Ako u tabeli postoje mali delovi teksta koji se prelamaju kada ne treba, možete da izaberete svaku takvu ćeliju i podesite je preko opcije No Wrap iz Property Inspectora. Možda će problemi sa dimenzijama nestati. Ako su tabeli potrebne dimenzije, počnite tako što ćete zadati samo nekoliko. Možda će biti dovoljno podesiti širinu za celu tabelu, a da se širine ćelija podešavaju same. Ako kolone u Vašoj tabeli i dalje ne izgledaju kako treba, dodelite im širinu. Ne morate definisati širinu svake pojedinačne ćelije, dovoljno je to uraditi samo sa jednom ćelijom iz svake kolone. Nakon što ste podesili dimenzije, treba da budete sigurni da te dimenzije nisu u kontradiktornosti jedna sa drugom. Jedan od osnovnih uzroka koji dovodi do lošeg izgleda tabela u pretraživačima jeste konflikt kod dimenzija. Ako ste svaku kolonu u tabeli podesili da ima širinu, onda ili treba da obrišete širinu cele tabele ili da budete sigurni da se brojke poklapaju. (Ukupna širina tabele mora da sadrži širine svih kolona, ali i cellspacing, cellpadding i sve ivice koje nisu zadate preko CSS-a.) Ako ste kolone zadali preko procenata, ukupni zbir procenata mora da iznosi 100%. Ako je širina tabele zadata na bazi procenata, nemojte širine ćelija podešavati u pikselima, itd. Sto više radite sa dimenzijama, to je bitnije da vodite računa o matematici. Dreamweaver neće dovesti do matematičkih grešaka u poslu koji on obavlja, ali Vas istovremeno program neće sprečiti da to uradite sami. Na kraju, čak iako Dreamweaver daje mogućnost da podesite visine svojih tabela i ćelija, upamtite da ovaj atribut nije deo HTML specifikacije i da, što je važnije za Vaš dizajn, u pretraživačima neće uvek da se ponaša na pravi način. Dodelite širine koje želite, ali ostavite da sadržaj definiše visinu. Ako je zaista potrebno da dodelite visinu, onda to treba da pažljivo proverite u svim ciljnim pretraživačima. Ako je potrebno, koristite kontrolne vrste i kolone Da li ste se ikad zapitali zašto odsečene slike koje ste pravili u programima kao što je Fireworks, u pretraživačima izgledaju odvojeno? One su kodirane preko kontrolnih vrsta i kolona. Stari trik dizajnera koji vodi ka stabilnim tabelama je da se ta činjenica iskoristi tako što će se praviti tabele oko nevidljive "prostorne" grafike, koje dovode do prave veličine tabele. Kontrolna vrsta je dodatna vrsta na vrhu ili dnu tabele. Ova vrsta nema spojenih ćelija i u svakoj ćeliji sadrži po jednu GIF sliku od jednog piksela, sa širinom podešenom na širinu te kolone. Kontrolna kolona je dodatna kolona koja se dodaje sa leve ili desne strane tabele, koja nema spojenih ćelija i koja u svakoj ćeliji sadrži po jednu sliku u GIF formatu od jednog piksela, sa visinom podešenom na visinu te vrste. Ne morate obavezno da koristite obe kontrolne vrste i kolone. Ako je visina tabele stabilna i jedino je potrebno podesiti širinu, onda Vam je potrebna samo kontrolna vrsta. Ako želite da stabilizujete i širinu i visinu, onda dodajte i kontrolnu kolonu. Fleksibilne širine Fleksibline tabele je često teže napraviti nego tabele sa fiksnom širinom. Razlog je to što iako želite da cela tabela ima fleksibilnu širinu, verovatno ne želite da se menjaju sve kolone. Generalno se fleksibilne tabele prave sa jednom fleksibilnom kolonom i jednom ili više kolona sa fiksnom širinom. Podešavanje da jedna kolona bude fleksibilna, a da ostale ostanu fiksne, ne traži neke posebne korake. Fleksibilne tabele koje mešaju kolone fiksne širine i fleksibilne kolone se skoro uvek bolje prave ako imate na raspolaganju kontrolnu vrstu. Za svaku kolonu fiksne širine u kontrolnoj vrsti, na način koji smo opisali u prethodnom odeljku, ubacite spacer sliku, sa veličinom podešenom na širinu kolone. Kod kolone sa fleksibilnom širinom ubacite spacer sliku sa veličinom podešenom na minimalnu širinu koja Vam je potrebna za tu kolonu, a nakon toga samoj ćeliji dodelite širinu od 100%. To znači da će ćelija zauzeti 100% raspoloživog prostora, što je cela širina tabele, minus fiksna širina koja je definisana preko spacer grafike iz drugih kolona. Dostupnost tabela Dostupnost podataka u tabeli 106 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Za tabele sa podacima treba identifikovati vrste i zaglavlja kolona. Za povezivanje ćelija sa podacima i zaglavlja treba da se koristi markup. Ovo važi za tabele sa podacima koje imaju dva ili više logičkih nivoa vrsta ili zaglavlja kolona. Prvo od ova dva pravila se primenjuje na bilo koju tabelu sa podacima, koja ima jednostavnu strukturu i može se uraditi preko oznake th (table header), sa atributom id, kao i oznake td (table data) sa atributom headers: <table> <tr> <th id="State">State</th> <th id="Capital City">Capital City</th> </tr> <tr> <td headers="State">New Mexico</td> <td headers="Capital City">Santa Fe</td> </tr> </table> Drugo pravilo se primenuje na složenije tabele sa podacima, kod kojih postoji više osa sa informacijama. Ovo se može uzeti u obzii preko atributa scope, koji definiše da li ćelije zaglavlja kontrolišu vrstu ili kolonu. <table> <tr> <th> </th> <th id="Store #1" scope="row">Store #1</th> <th id="Store #2" scope="row">Store #2></th> </tr> <tr> <th id="Chocolate Bars" scope="col">Chocolate Bars</th> <td headers="Store #1 Chocolate Bars">355</td> <td headers="Store #2 Chocolate Bars">20</td> </tr> <tr> <th id="Popsicles" scope=,col'>Popsicles</th> <td headers="Store #1 Popsicles">25</td> <td headers="Store #2 Popsicles">500</td> </tr> </table> Naslov i rezime U standardu Section 508 se ništa ne govori o upotrebi naslova i rezimea u tabelama, premda Web Accessibility Initiative konzorcijuma W3C (WAI) preporučuje da se za tabele zadaje rezime, ali se ovome daje prioritet 3. Sa druge strane, mnogi eksperti koji se bave dostupnošću preporučuju da se ovo koristi u cilju povećanja dostupnosti tabele. Naslov tabele je kratka rečenica koja sumira sadržaj tabele, a koja se prikazuje u svim pretraživačima i čiji se stil može vizuelno podesiti preko CSS-a. Evo kako ovo izgleda u kodu: <table> <caption>States and their capital cities</caption> [etc] </table> Rezime je po svojoj funkcionalnosti sličan, ali se ne prikazuje u pretraživačima. Kod izgleda ovako: <table summary="States and their capital cities"> [etc] </table> 107 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pošto i naslov i rezime imaju istu funkciju, ne morate da koristite oba. Dostupnost kod tabela koje se koriste za raspored elemenata na strani U standardu Section 508 se ništa ne govori o tabelama koje se koriste za rasporede. Premda W3C generalno ne odobrava upotrebu tabela za rasporede (verujući da treba koristiti CSS), oni nude sledeće preporuke, koje se odnose na osiguranje da su tabele dostupne: Nemojte za raspored koristiti tabele, osim ako tabela ima smisla kada se linearizuje. Ako tabela nema smisla, obezbedite alternativu (koja može biti linearizovana verzija). [prioritet 1] Ako se tabela koristi za raspored, nemojte koristiti strukturni markup u cilju vizuelnog formatianja Treba da imate na umu da čitači ekrana tabele čitaju na linearan način, sa leva udesno i od vrha prema dnu, tako da sav sadržaj u tabeli treba da bude napravljen u skladu sa time. Ako to nije slučaj, ili promenite strukturu tabele ili obezbedite link na drugu stranu koja sadrži isti materijal, ali predstavljen na linearan način (bez tabele). Dalje, nemojte koristiti markup koji je obično povezan sa tabelama u kojima se nalaze podaci, kao što su zaglavlja tabela, naslovi, zaključci, itd, kod tabela koje se koriste kod rasporeda. Strukturno (kao i grafički), tabele koje se koriste za raspored elemenata na strani treba da budu nevidljive. Dostupnost tabela u Dreamweaveru Preko objekta Table iz Dreamweavera možete lako praviti dostupne podatke i tabele sa rasporedima. Samo treba da pažljivo razmislite kako popunjavate opcije u okviru za dijalog Insert Table i posao će biti obavljen u velikoj meri. Teško je atribute dostupnosti dodavati, menjati ili brisati nakon što se tabela napravi. Razlog je što se ovi atributi uglavnom ne prikazuju u Property Insepctor-u. Ćelije zaglavlja i atribut Scope Kada ubacujete tabelu koja će se koristiti za prikazivanje tabelarnih podataka, treba da budete sigurni da ste izabrali neku od opcija Zaglavlja (Headres) iz okvira za dijalog Insert Table, koje se odnose na postavljanje ćelija zaglavlja u prvu vrstu ili prvi: kolonu (ili obe). Te ćelije će se kreirati sa oznakama th i na njih će se primeniti atribut scope. Ako pravite tabelu koja se koristi za raspored, treba da budete sigurni da ste izabrali opciju None za zaglavlja, kao i da se u tabelu neće ubaciti oznake th. Ako nakon ubacivanja tabele promenite mišljenje o tome šta treba a šta ne treba da bude zaglavlje, izaberite svaku ćeliju koja je u pitanju i preko opcije Header sa Property Inspectora pretvorite ćelije u ćelije zaglavlja ili ćelije sa podacima. Ako budete ovo radili treba da pratite atribut scope. Ako pretvarate postojeću ćeliju zaglavlja u ćeliju sa podacima (tako što ćete deselektovati opciji Header), onda atribut scope ostaje na svom mestu, što ne bi trebalo da se desi, pošto ćelija sa podacima nema svoj domen. Pošto se atribut scope ne prikazuje u Property Inspectoru, treba da menjate direktno kod, ili da preko Selection Inspectora ili Tag Editon (Edit > Tag) izbacite ovaj atribut. Ako ćeliju sa podacima pretvarate u ćeliju zaglavlja (putem selektovanja opcije Header), onda se atribut scope ne dodaje. Prema standardu Section 508, atribut scope Vam nije potreban, osim ako imate više od jednog nivoa zaglavlja. Ako imate složenu tabelu koja traži ovaj atribut, onda morate da putem promene koda dodate atribut scope, ili da to uradite preko Selection Inspectora. Dreamweaver Vas neće sprečiti da uradite i nešto neispravno, kao što je da imate previše ćelija zaglavlja, ili da se zaglavlja nalaze na nelogičnim pozicijama. Naslovi i rezime Ako u tabelu još prilikom njenog umetanja želite da ubacite naslov ili rezime, samo treba da u okviru za dijalog Insert Table popunite odgovarajuća polja. Naslov (caption) se prikazuje u prikazu Design (kao i u prozoru pretraživača), tako da ga možete lako videti, selektovati ili menjati njegov tekst nakon ubacivanja. Ako želite da menjate osobine naslova (kao što je ravnanje), možete da koristite Selection Inspector. Rezime se ne prikazuje, tako da za rad sa njima morate da koristite Selection Inspector ili Tag Editor. Ovo morate da koristite čak i da biste videli da li je uopšte tu. Šta ako tabela već postoji i Vi želite da dodate neku od ovih stavki? Rezime se kodira kao atribut oznake table, tako da možete da selektujete tabelu i dodate ga preko Selection Inspectora. Malo je teže, u tabelu koja već postoji, dodati naslov. Pošto naslov ima svoju oznaku i nije atribut oznake table, za njegovo kreiranje ne možete koristiti komandu Edit Tag ili Selection Inspector. Ali, to možete da uradite u prikazu Code: 1. U prikazu Design izaberite tabelu. (Ovo je samo pomoć da pronađete kod, nakon što promenite prikaz.) 2. Pređite u prikaz Code ili Code and Design i pronađite otvorenu oznaku table. Postavite kursor odmah iza oznake. 3. Na paleti HTML Insert pronadite grupu objekata Table i izaberite objekat Table Caption. Ovim se u kod ubacuje prazna oznaka caption. 4. Između oznake caption za otvaranje i kraj, ubacite tekst koji želite da bude naslov. 108 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 CSS i tabele Cascading Style Sheets omogućavaju neke sjajne stvari vezane za prikazivanje tabela, pri čemu nema opterećivanja koda dodatnim atributima. Kao i uvek sa CSS-om, sve treba da pregledate u ciljnim pretraživačima, da biste bili sigurni da je podržano formatiranje koje koristite. Neke starije verzije pretraživača (kao što je Netscape 4) ne interpretiraju pravilno sve aspekte vezane za formatiranje tabela u CSS-u. Primena CSS-a u tabelama CSS u svojim tabelama možete primeniti promenom definicije oznaka table, tr ili th u datoteci sa stilovima. Možete i da definišete korisničke klase ili ID oznake i da ih primenite na bilo koju od oznaka table. Ako želite da primenite korisničku klasu ili ID oznaku na tabelu, izaberite tabelu i pozovite komande iz padajućeg menija Class, Property Inspectora. Možete i da desnim tasterom miša kliknete oznaku table u Tag Selectoru i da iz pomoćnog menija izaberete opciju Set Class ili Set ID. Ako želite da korisničku klasu ili ID oznaku primenite na ćeliju tabele, izaberite ćeliju i pozovite neku komandu iz padajućeg menija Class u gornjem delu Property Inspectora. Možete i da desnim tasterom miša u Tag Selectoru kliknete oznake td, tr ili th, i da onda izaberete opcije Set Class ili Set ID. CSS osobine i formatiranje tabele Primena CSS-a na tabele može da zameni tradicionalno HTML formatiranje koje se primenjuje na okvir, pozadinu, širinu, ravnanje, pa čak i cell padding za tabele. Bez obzira na to koju ste osobinu rešili da zadajete preko CSS-a, treba da imate na umu da te osobine izbacite iz HTML-a, tako da ne dođe do konflikta vezanih za formatiranje. Efekti vezani za okvir tabele Ako želite da okvir tabele bude deo stila tabele, napravite novi stil i u okviru za dijalog CSS Style Definition idite u kategoriju Border. Ovde možete da izaberete da dodelite prikazivanje okvira svim stranama tabele, ili samo pojedinim. Možete definisati tip linije za okvir, kao što su puna, isprekidana, tačkasta i sl. (premda ovo nije podržano u svim pretraživačima, tako da treba da proverite rezultat). Okvir možete zadati u pikselima ili sa nekom drugom širinom. Možete zadati bilo koju boju. Možete i dalje podešavati, tako da gornja ivica bude 109 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 crna i debela, a donja siva i tanka. Okvir možete primeniti na bilo koji element tabele, ali ga oznaka tr neće uvek prikazati na pravi način, tako da bi ipak trebalo da se zadržite samo na tabelama i ćelijama. Boja pozadine i slike u pozadini Tabele, vrste i ćelije mogu da imaju podešene boje pozadine, kao i definisane slike koje se prikazuju kao pozadina. Sve to može da se uradi preko CSS stilova. Napravite novi stil i u okviru za dijalog CSS Style Definition, izaberite kategoriju Background. Ako izaberete sliku u pozadini, možete da podešavate i kako se postavljaju ploče sa slikom i kako se slika postavlja u okviru elementa. Opcije su Repeat, Horizontal Position i Vertical Position. 110 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Širina i cell padding Sirina tabele i ćelija, kao i cell padding se mogu kontrolisati preko CSS osobina. Ovim osobinama možete da pristupite ako u okviru za dijalog CSS Style Definition izaberete kategoriju Box. U polju width možete da unesete bilo koji broj u pikselima ili procentima. Ako želite da podesite cell padding, podesite opcije Padding. Upozorenje: Osobinu CSS padding neće svi pretraživači tretirati na pravi način, tako da pre nego što ovo upotrebite treba pažljivo da proverite kako to izgleda u ciljnom pretraživaču. Cell spacing se takođe bolje kodira bez primene CSS-a. Ravnanje sadržaja ćelije Sadržaj ćelije možete da ravnate preko CSS osobina vezanih za blokove. Ovim osobinama ćete pristupiti ako u okviru za dijalog CSS Style Definition izaberete kategoriju Block. Horizontalno ravnanje ćete podesiti preko polja Text Align, a vertikalno preko polja Vertical Alignment. Definisanje rasporeda elemenata na strani pomoću tabela Možda ćemo svi početi da koristimo CSS za raspoređivanje elemenata na strani, tako da tabele mogu da se vrate svojoj izvornoj funkciji, a to je prikazivanje tabelarnih podataka. Na žalost, to doba još uvek nije stiglo. Prema tome, i dalje koristimo tabele za raspoređivanje elemenata na strani i to radi sasvim dobro dokle god se poštuju izvesna pravila, i vodi računa o mogućnostima pretraživača. Treba razviti i poštovati pravu strategiju rada. Strategija rada Kako ćete svo znanje o tabelama iskoristiti za definisanje rasporeda na strani? Ili, koju to ideju o rasporedu možete da prebacite u HTML tabelu? Svaki dizajner ima različit pristup. Ipak, evo jedne strategije rada, koja može da u haos uvede malo reda. 1. U svom omiljenom programu za rad sa grafikom skicirajte raspored, na papiru. Upamtite da računar nije dizajner. HTML nije kreativno okruženje za zajednička razmišljanja. Pre nego što počnete da pravite HTML stranu, uvek morate znati kuda ste krenuli. Ako se dobro snalazite sa olovkom i papirom, počnite od nacrta svoje ideje na papiru. Ako se dobro snalazite sa programom za rad sa grafikom, kao što su Fireworks ili Freehand, ili nekom drugom, uradite to u tom programu. Na taj način dobijate polaznu osnovu za kreiranje grafičkih elemenata koji su Vam potrebni na strani. 2. Istražite koja to struktura tabele može da zadovolji zahteve Vašeg rasporeda. (Nacrtajte strukturu tabele). Upamtite da struktura tabele treba da ostane što jednostavnija, a da pri tome ne naruši osnovnu ideju dizajna. Ako morate, možete da koristite i ugnježđene tabele. Ako želite da odvojite elemente na strani, bolje je da dodate posebne ćelije, nego da koristite atribute za cell padding i cell spacing. (Ovakve ćelije se lakše podešavaju i pouzdanije su od ovih atributa) U ovom trenutku možete da počnete i da planirate elemente pozadine, kao što su grafika u pozadini i boje ćelija. 3. Odlučite da li raspored treba da bude fiksiran ili fleksibilan. Ako je fleksibilan, koje kolone treba da budu fleksibilne? Ako nije, kako ćete ovo ravnati u velikim prozorima pretraživača. Neće svi rasporedi dobro izgledati ako se naprave fleksibilnim u odnosu na prozor pretraživača. Ako nisu fiksni, onda oni koji imaju jasne, oštre ivice, sa dobro definisanim levim i desnim granicama, dobro izgledaju ako se centriraju u prozoru pretraživača. 4. Napravite tabelu(e) u Dreamweaveru. U ovom trenutku nemojte brinuti o dimenzijama. Verovatno ćete na početku želeti da podesite neku širinu tabele, ali to je samo privremeno, da bi se lakše radilo sa tabelom. Jedino treba da budete sigurni da tabela ima pravi broj kolona i vrsta, kao i da se ćelije spoje tamo gde je potrebno. U ovom trenutku treba da podesite i razmak ćelija tabele, cell padding, kao i okvir na 0. Vertikalno ravnanje u ćelijama podesite na top. 5. Ubacite sadržaj koji će biti na strani. Ovo znači da kreirate potrebnu grafiku, da dodelite elemente pozadine i da postavite tekst (ili probni tekst), linkove, itd. Ako se na Vašoj strani koristi tabela sa odsečenim slikama (linija za navigaciju, baner i sl.) koju ste napravili u programu za rad sa grafikom, i to sada treba da ubacite. 6. Stabilizujte dimenzije preko neke od strategija. Ako Vam je sudbina bila naklonjena, tabela je možda stabilna izgleda sjajno. Ako je tako, završili ste. Ako nije, počnite ponovo sa podešavanjem širine cele tabele (fiksne ili fleksibilne). Nakor toga, dodajte kontrolnu vrstu ili kolonu. Kada sve to uradite raspored bi trebalo da izgleda dobro i da bude siguran. 111 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Tabele koje se koriste za raspored i režim Layout Režim Layout je alternativni način za prikazivanje i rad sa tabelama koje se koriste za raspored. U njemu se tabele i ćelije prikazuju kao pravougaonici ispunjeni nekim sadržajem. Ovo liči na polja za unos teksta ili okvire sa slikama iz programa QuarkXPress ili InDesign. Da biste napravili raspored, nacrtajte nekoliko pravougaonika i to Layout Table i Layout Cell. Prilagođavanje rasporeda nakon njegovog kreiranja se radi podešavanjem visine ovih pravougaonika. U međuvremenu, iza scene, Dreamweaver kreira i podešava HTML kod (tabele). Da li je režim Layout dobra ili loša stvar? Zavisi sa koje tačke posmatrate. Mnogi dizajneri smatraju da je prilično inuitivno da kliknu i prevuku mišem i tako naprave tabelu. Drugima se režim Layout ne dopada, jer se on može koristiti za izbegavanje pravilnih tehnika za definisanje strukture tabele. Ako Vam se ovaj interfejs zaista dopada, i dalje možete da vodite računa o strukturi svoje tabele, naravno, ako znate šta radite i stalno pratite kod. Rad u režimu Layout Prikaz Layout ćete aktivirati ako izaberete View > Table Mode > Layout Mode, ili ako kliknete dugme Layout Mode sa palete Layout Insert. Ako je ovo prvi put da ulazite u režim Layout, prikazaće se prozor sa upozorenjem koji Vas obaveštava da se nalazite u tom režimu. Ovaj prozor je samo informacija, tako da možete da ga slobono zatvorite. Žuta boja na vrhu prozora Document upozorava da se nalazite u režimu Layout. Na paleti Insert, u delu sa objektima Layout, sada su dostupni objekti Layout Table i Draw Layout Cell. Oznaka table sada ne može da se koristi. Crtanje tabela u režimu Layout Tabelu ćete nacrtati ako izaberete objekat Layout Table i pratite instrukcije koje se prikazuju na statusnoj liniji prozora Document. Treba da kliknete i prevučete mišem, kako biste nacrtali pravougaonik u kome treba da se nađe tabela. Ovaj pravougaonik će u kodu postati oznaka table. Veličina će biti u skladu sa veličinom pravougaonika koji ste nacrtali. Nova tabela će na strani biti prikazana zelenom bojom. Na vrhu se nalazi deo Column Header (zaglavlje), u kome se prikazuju širine kolona i to u pikselima. U ovom slučaju se tabela sastoji samo od jedne kolone, tako da je ta širina ujedno i širina tabele. (U daljem tekstu možete naći više informacija o podešavanju fleksibilnih tabela, na bazi širine zadate u procentima.). 112 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Tabele se u ovom režimu mogu postavljati na prazne delove strane, mogu se gnjezditi u okviru postojećih tabela ili se crtati oko postojećih tabela i ćelija. Kao i druge HTML tabele, i ove se ne mogu preklapati. Crtanje ćelija u režimu Layout Ako želite da nacrtate ćeliju u ovom režimu, sa palete Insert izaberite objekat Draw Layout Cell. Opet treba pratiti instrukcije koje se prikazuju na statusnoj liniji. Kliknite i prevucite mišem (u okviru tabele) čime ste pokazali kako treba da izgleda ćelija. Ćelija će se u Dreamweaveru, u prozoru Document prikazati sa crnim okvirom. Pošto ćelija mora da se nalazi unutar vrste i kolone, to tabela koja sadrži ćeliju mora da se dalje deli. To znači da ste istovremeno kreirali još nekoliko ćelija. Kolona zaglavlja sada prikazuje širinu svih kolona. Ćelija mora biti u okviru mreže kolona vrsta, ali može da obuhvati nekoliko vrsta ili kolona. Ćelije ne mogu da se preklapaju. Dreamweaver će Vam pomoći da ostanete u okviru ove strukture i to tako što će postaviti nove ćelije odmah pored postojećih, ili uz ivicu strane. Ovo se dešava ako ćeliju nacrtate u okviru 8 piksela. Manipulisanje strukturom tabele u režimu Layout Glavna atrakcija prikaza Layout je da nakon kreiranja rasporeda na ovaj način, taj raspored možete dalje podešavati na način koji je više intuitivan nego kada sa HTML tabelama radite u prikazu Standard. Pored toga, specijalan Property Inspector za ovakve tabele i ćelije može da Vam pomogne da interaktivno promenite veličinu i položaj rasporeda direktno u prozoru Document. Ako želite da u prozoru Document interaktivno promenite tabelu ili ćeliju, izaberite taj element i preko ručica prevucite ivice, Primetićete da promena veličine ugnježđene tabele menja i veličinu osnovne tabele ili ćelije u kojoj se ta tabela nalazi. Ako želite da pomerite ćeliju ili ugnježđenu tabelu, kliknite i prevucite mišem. Možete i da je strelicama pomerate po 1 piksel. Ako držite pritisnut taster shift dok pritiskate strelice, pomeranje će biti po 1 piksel. Upamtite da se ćelije ne mogu premeštati i da im se ne može menjati veličina izvan granica osnovne tabele, kao i da preklapanje nije dozvoljeno. Property Inspectori u režimu Layout Tabele i ćelije u ovom režimu imaju svoj Property Inspector, preko kojeg možete da podešavate sve standardne osobine ćelija i tabela, isto kao u režimu Standard. Neke osobine, kao što su width i height, cell padding i spacing, kao i boja pozadine, su iste kao one koje postoje u okviru Property Inspectora za obične tabele. Ipak, postoje i određene razlike. Na primer, cellpadding i cellspacing za tabelu su podešeni na 0, sa pretpostavkom da ćete koristiti posebne ćelije za obezbeđivanje razmaka. Svaka ćelija ima podrazumevano vertikalno ravnanje podešeno na top, ponovo pod pretpostavkom da ćete želeti da sadržaj ćelije bude 113 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 postavljen pri vrhu. Širina se može zadati u pikselima ili preko opcije autostretch, što znači 100%. Tabelama i ćelijama se može dodeliti boja pozadine, ali se ne mogu koristiti slike za pozadinu. Druga polja, koja se u režimu Layout ne mogu koristiti su takođe nestala. Automatsko razvlačenje tabela i način na koji to fukncioniše Tabela koju pravite po prvi put ima fiksnu širinu. Pretvorićete je u tabelu sa automatskim razvlačenjem, ako samoj tabeli ili nekoj od njenih kolona dodelite širinu koja nije fiksna. Kada to uradite, Dreamweaver dodeljuje tabeli i jednoj od njenih kolona širinu 100%. Sve ostale kolone u tabeli zadržavaju svoju fiksnu širinu. Kolona kod koje se širina automatski menja mora da ima najmanje jednu kolonu čija se širina automatski menja. Prvi put kada u tabeli na konkretnom sajtu, kreirate kolonu čija se širina automatski menja, Dreamweaver pita da li želite da strukturu tabele stabilizujete preko spacer slike. Kao što smo objasnili ranije u ovom poglavlju, ovakve slike su dobra ideja, tako da je podrazumevani odgovor Yes. Primetićete da Dreamweaver nudi da on kreira te slike za Vas. Ako već imate neku, možete da je selektujete. Ono što ovde izaberete postaje vezano za sam sajt. To možete kasnije da promenite i to preko okvira za dijalog Preferences/Layout. Kod koji se nalazi ispod rada u režimu Layout Šta se prilikom kreiranja tabele u režimu Layout dešava iza scene? Naravno da Dreamweaver umesto Vas pravi tabelu. Kod tabela koje imaju fiksnu širinu, ne prave se kontrolne vrste ili kolone, već tabela i prva vrsta sa ćelijama ima dodeljenu fiksnu širinu (u pikselima). Prva kolona sa ćelijama ima dodeljenu visinu. Ako želite da uklonite tu visinu, izaberite tabelu, idite u Property Inspector i kliknite dugme Clear Row Heights. Tabela izgleda prilično normalno. Ako kažete Dreamweaveru da treba da koristi spacer sliku, onda se na dnu tabele dodaje kontrolna vrsta, koja u svim ćelijama ima te slike. Gornja ćelija u koloni sa promenljivom širinom ima takođe širinu od 100%. 114 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rad u režimu Layout • Stalno treba da imate na umu osnovne principe vezane za dizajn tabela. Čak i kada prevlačite, pravite jednostavne strukture tabela, bez nepotrebnih vrsta i kolona. • Kada u ćelije postavite neki sadržaj, izbrišite visinu vrsta, tako da ne morate da brinete o podršci za atribut height. • Stalno jednim okom pratite kod koji se pravi, isto kao da radite u režimu Standard. Idite često u režim Standard, da biste videli da li je tabela u redu. • Ako pravite tabelu fiksne širine, upamtite da Dreamweaver neće praviti kontrolnu vrstu umesto Vas. Ako je potrebno da stabilizujete tabelu, napravite je sami. 115 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 9. Forme Osnovno o formama HTML kod koji pravite u Drearmveaveru (ili nekom drugom programu za kreiranje web sadržaja) je samo deo onog što je potrebno da bi forma uradila svoj posao. Da bi ulaz u formu mogao da se obradi, one traže postojanje skripta (niz instrukcija, generalno u tekstualnoj datoteci, koji se izvršava u okviru aplikacije). Skriptovi za obradu formi Za obradu podataka iz forme se najčešće koriste CGI (Common Gateway Script) skriptovi. Ovi skriptovi se obično pišu u Perlu ili nekom drugom programskom jeziku, kao što su C++, Java, VBScript ili JavaScript. Forme se mogu obrađivati i preko tehnologija koje funkcionišu na strani servera, kao što su ASP, ASP.NET, ColdFusion, PHP ili JSP Ove tehnologije rade u suštini isto kao i CGI skriptovi. Zajedno sa ovim tehnologijama, forme se često koriste za prikupljanje informacija koje treba ubaciti u bazu podataka. Pre nego što počnete da pravite interaktivne forme, proverite sa administratorom servera na kome planirate da postavite svoj sajt da biste videli koja se tehnologija skriptovanja tamo koristi. CGI skriptovi pisani u Perlu su najčešće podržani, a neke kompanije imaju pripremljene skriptove koji se mogu koristiti na njihovim serverima. HTML koji se nalazi iza formi HTML kod koji se koristi za kreiranje formi nije tako složen. Oznaka form okružuje različite oznake input, select ili textarea. Ove oznake se jednim imenom zovu kontrole forme ili elementi forme, a zajedno sa labelama i drugim elementima strane kreiraju raspored te forme. Kod za jednostavnu formu bi mogao da izgleda ovako: <form name="myForm"> Username: <input type="text" name="username"><br> E-Mail:<input type="text" name="email"><br> <hr> <input type="submit" value="Submit"> </form> Oznaka form zvanično definiše oblast na strani kao formu i definiše akciju koju treba preduzeti kada se forma pošalje. Kada korisnik klikne dugme Submit, informacije koje su unete u različitim poljima forme se šalju na određenu adresu. U nekim situacijama ne mora da postoji par <form> </form>. To može biti slučaj kod formi koje postoje samo na strani klijenta i koje ne obuhvataju slanje informacija na server. Neki pretraživači (konkretno, Netscape 4) neće prikazati elemente <forme> izvan ovog bloka, tako da je najbolje da ga uvek imate. Elementi input, textarea i select u okviru forme čine tekstualna polja, polja za potvrdu, radio dugmad, submit dugmad, kao i druge elemente forme. Ostali elementi iz HTML-a, kao što su tabele, slike ili tekst, mogu takođe da se koriste za zadavanje instrukcija, pisanje oznaka, kao i rasporeda forme. Kako forme funkcionišu u Dreamweaveru Forme je u Dreamweaveru vrlo lako praviti. Sve oznake form koje se često koriste se mogu ubaciti preko kategorije Forms, s palete Insert. Istim objektima možete pristupiti preko menija Insert > Form. 116 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kreiranje forme ćete u Dreamweaveru početi ubacivanjem objekta form. Ako se u formi prikazuju nevidljivi elementi, forme će se prikazati sa crvenim okvirom. Ovo je bitno da biste mogli da pratite okvir forme, tako da ste sigurni da ste objekte ubacili formu. (Ako želite da uključite prikazivanje nevidljivih elemenata izaberite View > Visual Aids > Invisible Elements). Kada forma selektovana, prikazuje se Form Property Inspector. Ako probate da ubacite elemente forme, a da pre toga niste ubacili formu, Dreamweaver je automatski dodaje. Iako je ovo korisno, Dreamweaver možda neće kreirati formu onako kako biste Vi želeli. On će oznakom form uokviriti postojeće elemente i njihove natpise, ali neće obuhvatiti druge elemente na strani. Na primer, ako ste kreirali tabelu u kojoj će se nalaziti elementi forme, Dreamweaver će formu postaviti unutar tabele, a ne oko nje. Kada imate formu, preko njenog objekata možete ubacivati elemente forme unutar crvenog okvira. Možete i da ubacujete elemente koji nisu vezani za forme, kao što su slike, tekst ili tabela koja kontroliše raspored. Svaki element forme ima svoj Property Inspector. Posebnu pažnju treba obratiti na imena elemenata forme, pošto skript koji obrađuje tu formu može zahtevati određene konvencije prilikom zadavanja imena. Rad sa formama Forme nisu glamurozne, ali postoji obilje načina da njihov izgled i funkciju učinite najboljim mogućim. Dreamweaver Vam može pomoći da svoje forme učinite dostupnim, da poboljšate njihov izgled (preko CSS formatiranja), kao i da preko ponašanja iz Dreamweavera dodate malo više interakcije. Dostupnost formi Pošto je osnovna namena formi da im se može pristupiti i da se sa njima komunicira, to je dostupnost za njih veoma bitna. Ako neki korisnik ne može da koristi miša, kako da onda selektuje polje u formi i da u njega unese informacije? Ako ne može da vidi raspored strane, kako da zna u koje polje treba da unese korisničko ime, a u koje e-mail adresu? U skladu sa ovim, primenjuju se različita pravila, napomene i opcije, koje mogu da dovedu do dostupnijih formi. Kada se elektronske forme prave tako da se popunjavaju on-lajn, one treba da omoguće korisnicima da za pristup informacijama, elementima i funkcionalnostima koje su potrebne za popunu i slanje forme, koriste pomoćne tehnike. Ovo zvuči vrlo detaljno. Srećom, pretraživači i operativni sistem mogu da o nekim delovima brinu umesto Vas. Tu, na primer, spada olakšavanje aktiviranje polja u formi radi smanjenja mobilnosti. U HTML specifiakciji postoji nekoliko mehanizama (neki su bolje podržani od drugih), koji mogu da pomognu: • Natpisi - Čak i korisnik koji ne može da vidi raspored forme treba da bude u stanju da bez greške kaže čemu služi određeno polje, checkbox i sl. U tom smislu, svaki element forme treba da ima pridruženu oznaku label, koja sadrži tekstualni natpis, koji objašnjava koje informacije se u njemu unose (korisničko ime lozinka, broj telefona, omiljena boja i sl.). 117 / 299 Fakultet organizacionih nauka • • Dreamweaver MX 2004 Indeksiranje preko tastera Tab - Korisnik koji ne koristi miša treba da bude u stanju da preko tastera Tab pristupa svim elementima forme i to prema određenom redosledu. Pretraživač bi ovo trebalo da automatski omogućava, ali Vi korisnicima možete da pomognete ako, svakom elementu forme, dodate atribut tabindex. U najmanju ruku, ovaj atribut treba da dodate prvom elementu forme. Ovaj atribut je broj koji ukazuje na redosled po kojem se preko tastera tab krećete kroz elemente. Prema tome, prvi element na formi za atribut tabindex treba da ima vrednost 1, drugi vrednost 2, itd. Tasteri za pristup - Idealno bi bilo kada korisnik koji ne može da koristi miša može da unese sa tastature neku komandu koja će aktivirati određeno polje u formi. Na primer, ako otkuca ] trebalo bi da se aktivira polje First Name. Ovaj deo dostupnosti nije dobro podržan u svim pretraživačima, ali može i da dovede do konflikta sa skraćenicama koje postoje u okviru operativnog sistema, tako da se ne koristi baš često. Na osnovu prethodno iznetih preporuka, osnovni kod forme koja je dostupna bi mogao da izgleda ovako: <form name="theForm"> <label for=“username“>User Name:</label> <input type="text" name="username" id="username" tabindex="1" accesskey=n"> <label for="pword">Password:</label> <input type="password" name="pword" id="pword" tabindex="2" accesskey="p"> <input type="submit" name="submit" id="submit" label="Submit" tabindex="3"> </form> Svaka stavka u primeru ima atribut tabindex. Svaka stavka izuzev dugmeta Submit ima natpis i atribut accesskey. (Dugmetu Submit atribut accesskey ne treba. Ono se uvek bira kada pritisnete taster Return. Njemu ne treba ni natpis, pošto ono već ima svoj atribut label. ) Forma bi takođe bila definisana sa prihvatljivim nivom dostupnosti i da nema atributa accesskev. Natpisi se mogu kodirati implicitno, odnosno tako da uokviruju element forme na koji se odnose: <label>User Name <input type="text" name="username" ... > </label> Mogu i da se kodiraju implicitno, odnosno da se postave pored elementa form. <label for="username">User Name</label> <input type="text name="username" ... > Prema američkom Access Boardu (www.access-board.gov), pouzdaniji su eksplicitni natpisi. Oni takođe daju i više slobode prilikom dizajna. Podešavanje opcija dostupnosti Pre nego što napravite svoju formu, proverite da li su opcije vezane za dostupnost uključene (Edit > Preferences/Accessibility). Kada su ove opcije uključene, naredni put kada kreirate element forme, preko palete ili menija Insert, otvara se okvir za dijalog u kome možete da unosite atribute label tabindex i accesskey. Primetićete da se isti okvir za dijalog prikazuje za bilo koji element forme. Na Vama je da znate da, na primer, dugme Submit može da radi i bez eksplicitnog natpisa. Sam objekat form nema okvir za dijalog vezan za dostupnost, pošto nema specijalnog tretmana koji je zajednički za oznake f orme. Okvir za dijalog sa opcijama dostupnosti omogućava da definišete izgled svojih natpisa i način njihovog kodiranja. Ako želite da kreirate eksplicitne natpise (koji se kodiraju posebno u odnosu n element forme na koji se odnose), izaberite Attach Label Tag Using for Attribute. Ako želite da kreirate implicitne natpise, izaberit Wrap With Label Tag. Koju god opciju da izaberete, preko opcija i dela Position možete podesiti poziciju natpisa relativno u odnos na element forme (ispred ili iza). Kao što smo pomenuli, eksplicitni natpisi su pouzdaniji i fleksibilniji. Sa druge strane, implicitnim natpisima se lakše upravlja, pošto nema atributa for, koji treba pratiti i nema šanse da se natpis i pridruženi element forme odvoje. 118 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Upamtite da će se oznaka label u prozoru pretraživača prikazati kao običan tekst. Prema tome, kada pravite raspored svoje forme nemojte posebno unositi tekst, ako nameravate da preko okvira za dijalog vezanog za dostupnost unosite natpise. Atributi tabindex i accesskey Ako želite da dodate neki od ova dva atributa, i to za element forme koji već postoji, možete da koristite komandu Edit Tag (kategorija Style Sheet/Accessibility) ili Tag Inspector. Nijedan od ova dva atributa se ne prikazuje u Property Inspectoru, već im se pristupa preko kategorije CSS/Accessibility iz Tag Inspectora. 119 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Zaboravite na atribut acccesskey Pametni ljudi savetuju da se ovim atributom ne bavite, osim ako nemate neki zaista valjan razlog za njegovo ubacivanje. On nije podržan na pravi način i može da dovede do konflikta sa operativnim sistemom korisnika. Ako je potrebno, primenite atribut tabindex Ovaj atribut se može primeniti i na druge elemente na strani, a ne samo na elemente forme (na primer, na oznake object i a), čime se korisnicima omogućava da skoče direktno na određeni sadržaj na strani. Sa druge strane, ako je forma važan deo strane, onda verovatno želite da korisnici budu u stanju da direktno pređu na nju, tako da u tom slučaju nemojte opterećivati stranu i drugim atributima tabindex. Ne mora svaki element na formi da ima ovaj atribut, pošto nakon aktiviranja prvog polja, ugradene mogućnosti pretraživača i operativnog sistema brinu o narednim poljima. Sa druge strane, ako želite da kontrolišete redosled kretanja kroz elemente forme preko tastera tab (posebno ako želite da promenite podrazumevano ponašanje pretraživača), atribute možete da primenite na sve elemente. Upotreba vrednosti za atribute tabindex koji ne idu redom Vrednosti koje zadajete atributu tabindex ne moraju ići redom. Ako ste prvom polju dali indeks 10, a drugom 300, redosled i dalje ostaje od manjeg ka većem broju. Ovo možete da iskoristite. Ako smatrate da postoji mogućnost da kasnije na formu dodate neka polja, onda nemojte koristiti indekse koji idu redom. Na primer, šta ako imate 20 polja i želite da dodate jedno ili dva polja između polja za adresu (tabindex=3) i telefonskog broja (tabindex=4)? Moraćete da promenite vrednost ovog indeksa za skoro sva polja forme. Ili nemojte svim poljima dodeljivati vrednosti za ovaj atribut, ili zadajte brojeve kao što su 10 za adresu, a 15 ili 20 za telefonski broj. Natpisi Oznake label (natpisi) se razlikuju od atributa tabindex i accesskey zato što se one kodiraju kao posebne oznake, a ne kao elementi neke druge oznake. Natpisi su takođe vidljiv deo strane. Ako ste elemente forme pravili bez natpisa, preko običnog teksta, onda taj tekst možete lako da prebacite u natpis. Jednostavno ga izaberite i sa palete Insert (kategorija Forms) izaberite objekat Labels. Ovim se oko tog teksta postavlja oznaka label. Pošto se natpisi prikazuju u prikazu Code, ovim se takođe aktivira prikaz Code, tako da možete da vidite kod koji ste dodali. Primetićete da je oznaka uneta bez atributa for, tako da nije povezana ni sa jednim poljem forme. Ovaj atribut morate da unesete u prikazu Code ili preko Tag Inspectora. Natpisi se u prikazu Design prikazuju kao običan tekst i nema nikakve vidljive naznake da su u pitanju natpisi. Ako se kursor nađe u okviru nekog natpisa, onda Tag Inspector u svojoj hijerarhiji prikazuje i taj natpis. Property Inspector ih neće prepoznati, tako da za promenu osobina ovih oznaka morate da koristite Tag Inspector (ovo se posebno odnosi na atribut f or). Formatiranje formi Kada se govori o izgledu strane, kod formi ste još više nego kod drugih elemenata u milosti pretraživača. Polja za unos teksta, padajući meniji, polja za potvrdu, sve su to elementi koje svaki pretraživač i svaka platforma prikazuje na svoj način. U isto vreme, vrlo je bitno da Vaše forme budu uredne i privlačne, tako da korisnici požele da ih popune i da sa njima rade intuitivno. Dve osnovne alatke koje se koriste za formatiranje formi su tabele i CSS. Takođe, za dugmad Submit i Reset možete i da zadate slike. Definisanje rasporeda elemenata forme preko tabela Tabele su te koje omogućavaju da elementi na strani budu poravnati i organizovani. Organizacija je posebno 120 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 bitna kada se radi sa formama. Mnogi dizajneri organizuju forme tako da u jednom redu bude jedan element forme, pri čemu se opcionalno dodaju kolone za natpise. Razmak ćelija (cell padding) (koji se primenjuje preko Property Inspectora ili preko stila iz CSS-a), kao i posebne ćelije za razmak se mogu koristiti za odvajanje jednog elementa od drugog. Kada ovo budete radili treba da imate na umu da i forma treba da se linearizuje, ili neće biti dostupna. Čitači ekrana tabele se čitaju sleva u desno i od vrha naniže, tako da natpisi i elementi forme treba da budu postavljeni jedni pored drugih, a ne da se natpis stavi u jednu vrstu, a pridruženi element forme u vrstu ispod. Ako za kreiranje natpisa u formi koristite opcije dostupnosti u Dreamweaveru i ako želite da formu stavite u tabelu u kojoj se natpisi i elementi forme nalaze u različitim ćelijama , onda treba da koristite opciju Attach Label Using for Attribute. Ovim se natpis i element forme realizuju kao zasebne oznake. Dreamweaver ih ubacuje u istu ćeliju, ali možete da selektujete jednu od oznaka i da je prevučete na drugu lokaciju. Formatiranje formi preko CSS-a Jedan od aspekata HTML formi, koji je uvek dovodio do frustracije, je nedostatak kontrole nad njihovim izgledom. Sa pojavom CSS-a, stvari su se popravile. Promenom definicije za oznake form i form element i primenom korisnički definisanih klasa, možete da ubacite okvire i pozadine, da definišete veličinu i još puno toga. Kao i obično kada se radi sa CSS-om, rezultat koji dobijete nije na isti način podržan u svim pretraživačima i za sve elemente forme, ali uz malo eksperimentisanja ćete dobiti što tražite. Ipak, i dalje svoje forme možete da popravite tako da to mogu da vide svi posetioci. • Polja za unos teksta – Poljima za unos teksta, kao i oblastima za unos teksta možete dodeliti okvir i pozadinu, možete definisati osobine vezane za kucanje u njima, kao i kontrolisati širinu (preko apsolutnih veličina) • Dugmad – Za kontrolu izgleda dugmadi kao što su Submit i Reset možete koristiti okvire i pozadinu. Širinu i visinu možete koristiti za podešavanje veličine (preko apsolutnih dimenzija), premda treba paziti da se tekst ne odseče. • Liste/meniji – Za kontrolu padajućih menija i listi mogu se koristiti granice, pozadina, kao i osobine vezane za kucanje. Možete dodeliti i veličinu (samo kao apsolutnu vrednost), ali pazite da ne odsečete tekst koji se prikazuje. • Radio dugmad/polja za potvrdu – Sa ovim elementima se ne može baš mnogo uraditi. Može se primeniti okvir i pozadina, ali efekat nije baš sjajan. • Natpisi (labels) – Ako za sve natpise elemenata forme koristite oznaku label (a i trebalo bi, radi dostupnosti), onda možete da koristite CSS formatiranje koje se primenjuje na bilo koji tekstualni element na strani. Prilikom primene datoteka sa stilovima na elemente forme, bolje je da koristite korisnički definisane klase i kontekstualne selektore, nego da menjate definiciju oznaka. Različite forme koriste različite oznake, tako da je lakše primeniti jednu klasu na oznake input, select i textarea, nego menjati sve tri. Konkretno se oznaka input koristi za više različitih elemenata forme (polja za unos teksta, radio dugmad, polja za potvrdu, dugmad), tako da je teško menjati definiciju svake oznake. Pozadina i granice, na primer, dobro izgledaju kod polja za unos teksta i dugmadi, ali ne i kod radio dugmadi ili polja za potvrdu. Upotreba slika kao dugmadi Ako Vam se ne dopada način na koji pretraživač prikazuje dugmad Submit i Reset, i ako Vam ni CSS ne nudi dovoljno opcija, umesto ovih dugmadi možete da koristite dugmad sa slikama. Ovo ćete u Dreamweaveru uraditi preko objekta Image Field. Kada izaberete ovaj objekat, Dreamweaver prikazuje standardni okvir za dijalog Select File u kome možete da izaberete GIF ili JPEG sliku. Slika se u formu ubacuje sa oznakom input. Evo kako izgleda kod: <input type="image" name="imageField" border="0" src= "myCloseButton.gif "> Ako ste uključili opcije dotsupnosti za elemente forme, onda se otvara i standardni okvir za dijalog Input 121 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Accessibility Options. Kao i kod običnih dugmadi, i ovde ne morate da zadajete natpis, pošto dugme ima svoj. Ipak, treba da pazite da za dugme sa slikom zadate alt tekst, kao što radite i za bilo koju drugu sliku. Kada je dugme sa slikom izabrano, prikazuje se Image Field Property Inspector. Prednosti i nedostaci obrade formi Forma sakuplja informacije i prosleđuje ih na dalju obradu. To je misteriozna pozadina web razvoja, o kojoj web dizajneri obično ništa ne znaju. Ipak je vrlo bitno, čak i za ljude koji se bave prednjom stranom, da znaju kako se sve ovo uklapa zajedno, jer se na taj način mogu praviti bolje i efikasnije forme. Atribut Action Sve počinje pitanjem: Šta se sa formama dešava nakon što se pošalju? Kada korisnik pritisne dugme Submit, pretraživač traži oznaku form, odnosno njen atribut action. Ovaj atribut sadrži adresu datoteke koja treba da primi ono što se šalje i da sa tim nešto uradi. Evo kako to izgleda: <form name="theForm" action="http://www.mysite.com/cgi-bin/myscript.cgi" method="GET"> Pretraživač šalje te informacije na zadatu adresu na jedan od sledeća dva načina: • Preko metoda GET. U ovom slučaju, informacije se šalju kao parametri URL adrese. http://www.mysite.com/cgi-bin/myscript.cgi?fname=Fred&lname=Smith&favcolor=blue • Kada se koristi metod POST pretraživač informacije šalje kao poseban paket. Metod POST je sigurniji i njime može da se prenese veća količina podataka. GET se često koristi kod mašina za pretraživanje i u druge svrhe kod kojih nije bitna sigurnost. Iako se forme obično šalju do skript datoteka, to ne mora uvek biti slučaj. One se mogu poslati do bilo koje datoteke. Pogledajte sledeću oznaku form: <form name="myForm" action="thankyou.html" method="get"> Ova oznaka informacije iz forme šalje na stranu "thank you", a pošto je to obična HTML strana, ona će se prikazati u prozoru pretraživača. Na toj strani može da postoji neki JavaScript koji će obraditi informacije, ili se te informacije mogu jednostavno zanemariti, tako da se strana prikazuje kao obična web strana. Sledeća oznaka form <form name="myForm" action="mailto:[email protected]"> će informacije iz forme poslati na određenu e-mail adresu, što dovodi do toga da se pokrene program za rad sa elektronskom poštom kod korisnika, koji će dalje poslati poruku koja sadrži sve podatke iz forme. Obrada formi na strani klijenta i to preko ponašanja Set Text of Text Field i Change Property Forme mogu da učestvuju u obradi skripta na strani klijenta (na primer, JavaScript koji se izvršava u pretraživaču). Interakcija sa elementima forme, odnosno izbor stavki iz padajućeg menija, izbor polja za potvrdu, itd. - sve su to događaji koji pokreću akcije iz JavaScripta. Elementi forme se preko JavaScripta mogu dinamički ažurirati, a da pri tome strana ne mora da se učitava ponovo. Ove dve činjenice zajedno omogućavaju kreiranje formi koje prilagođavaju svoje informacije u skladu sa onim što korisnik unosi. Ponašanja Set Text of Text Field i Change Property u Dreamweaveru omogućavaju da pristupite obradi na strani klijenta. Set Text of Text Field omogućava da dinamički menjate tekst bilo kojeg od polja za unos teksta. Ponašanje Change Property ne samo da menja tekst u polju ili oblasti za unos teksta, već može i da menja selektovanu stavku iz padajućeg menija ili da menja selektovano stanje radio dugmadi i polja za potvrdu. Ako želite da koristite ponašanje Set Text of Text Field, počnite kreiranjem forme sa najmanje 122 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 jednim poljem za unos teksta. Ovo polje ćete menjati. Nakon toga, izaberite element na strani koji želite da obavestite o promenama. To može biti drugi element forme, linkovani tekst, neka slika ili neki drugi element koji može da ima pridruženo ponašanje. Iz liste Actions, koja se nalazi u panou Behaviors, izaberite opciju Set Text > Set Text of Text Field. Kada se otvori okvir za dijalog , unesite tekst koji želite da se tamo pojavi. Tekst koji ovde unosite ne mora da bude običan. U njega se može ugraditi poziv bilo koje funkcije iz JavaScripta, neka osobina, globalna promenljiva, ili neki drugi izraz. Izraz iz JavaScripta mora da se postavi u velike zagrade ({}). Prema tome, izraz: The URL for this page is {window.location} će prikazati tekst The URL for this page is http://www.mysite.com/mypage.html Ako želite da koristite ponašanje Change Property, počnite kreiranjem forme sa nekim poljem za unos teksta, listom ili menijem, radio grupom, ili poljem za potvrdu koje želite da se dinamički menja. Nakon toga izaberite element strane koji treba da pokreće tu promenu. Iz liste Actions, u panou Behaviors, izaberite Change Property. U okviru za dijalog koji se otvara postoje različite opcije, pošto je u pitanju opšte ponašanje koje se može primeniti na više elemenata forme. Iz menija Type Of Object izaberite tip elementa forme koji želite da se menja. Iz liste Named Object, izaberite konkretan element koji želite da se menja. U listi Properties se nalazi lista svih osobina tog elementa, koje možete da menjate i to one koje su podržane u različitim pretraživačima. Srećom, svi pretraživači, osim nekih starih verzija, podržavaju promenu osnovnih osobina elemenata forme. Za različite elemente forme postoje sledeće opcije: • Za polja za potvrdu i radio dugmad, izabrana osobina određuje da li je stavka selektovana. Ako želite da to promenite, unesite true ili false u polju Validate, koje se nalazi na dnu okvira za dijalog. • Kod polja za unos teksta, polja za unos lozinki i oblasti za unos teksta, ova osobina određuje koji se tekst prikazuje. Ako želite da to promenite, u polje Value na dnu okvira za dijalog unesite tekst koji treba da se prikaže. Za razliku od ponašanja Set Text of Text Field, izrazi iz JavaScripta koji se ovde unose se ne obrađuju. • Kod elemenata tipa select (liste ili meniji), osobina selectedlndex određuje koja stavka iz liste je izabrana. Ovo radi na sledeći način: Svaka stavka iz liste ima svoj indeks, počev od 0 za prvu stavku. Odredite koji je index stavke koju želite da selektujete i u polje Value na dnu okvira za dijalog unesite tu vrednost. 123 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 10. Dizajniranje strana sa frejmovima Osnovno o frejmovima Kada u pretraživaču naiđete na web stranu sa frejmovima, ono što zaista vidite je nekoliko HTML dokumenata, koji su ubačeni na jednu stranu. Oni su ubačeni u skup frejmova (frameset). Frejmovi u pretraživaču Strana sa skupom frejmova ne sadrži oznaku body. Umesto toga, tu je oznaka frameset, koja u sebi sadrži nekoliko oznaka frame. Ove oznake ukazuju na to da strana treba da se podeli i koji dokument treba da se prikaže u kojem frejmu. Struktura koda je: <frameset cols="80,*"> <frame src="navbar.html" name="navFrame"> <frame src="intro.html" name="mainFrame"> </frameset> U frejmu, odnosno skupu frejmova, može da se nađe bilo koja HTML strana. Ni jedna od tih strana ne zahteva nekakav poseban kod. Oznaka frameset može da sadrži druge oznake istog tipa, čime je moguće dobiti složeniju strukturu. <frameset cols="80,*"> <frame src="navbar.html" name="navFrame"> <frameset rows="134,*"> <frame src="banner.html" name="titleFrame"> <frame src="intro.html" name="mainFrame"> </frameset> </frameset> Oznake frameset i frame su deo HTML 4 specifikacije i podržane su u pretraživačima od verzije IE3 i NN4. Frejmovi u Dreamweaveru Kodiranje frejmova nije tako teško, ali kao i druge stvari u HTML-u i sa frejmovima može biti teško raditi, ako radite samo sa kodom Vizuelno okruženje koje postoji u Dreamweaveru omogućava da lako pravite skupove frejmova sa više dokumenata i da tim frejmovima relativno lako rukujete. Kreiranje frejmova Strane sa frejmovima se u Dreamweaveru mogu praviti ili ručno, ili na osnovu unapred definisanih skupova frejmova, koji dolaze sa programom. Ako želite da ručno kreirate stranu sa frejmovima, treba da uradite sledeće: 1. Napravite ili otvorite dokument koji u sebi nema skupove frejmova. 2. Izaberite Modify > Frameset > Split Frame Left, Split Frame Right, Split Frame Up ili Split Frame Down. Nakon što ste napravili skup frejmova, možete ga dalje deliti, ako ponovo birate komande za deobu, ili preko prevlačenja ivice frejma, pri čemu treba držati pritisnut taster Alt/Opt. Ako želtie da stranu sa frejmovima napravite na osnovu nekog unapred definisanog skupa frejmova, treba da uradite sledeće: • Izaberite File > New > i u okviru za dijalog New Document, na kartici General, izaberite kategoriju Framesets. • Napravite ili otvorite dokument i izaberite neki od objekata Frame, sa palete Insert. Možete i da izaberete Insert > HTML > Frames > [neki skup frejmova]. Frejmovi koje pravi Dreamweaver imaju u sebi puno dodatnog koda koji Vam može pomoći u radu. Tu su, na primer, podešene vednosti za klizače i promenu veličine. Frejmovi koje sami pravite to nemaju, tako da sa njima morate biti posebno pažljivi. Kako se radi sa frejmovima 124 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Najteži deo u radu sa frejmovima je da u svakom trenutku radite istovremeno na više strana (skup frejmova i strane u frejmu). Dreamweaver nudi različite alate koji mogu da Vam olakšaju posao, kao što su Property Inspector, pano Frames (Window > Frames) i Tag Selector (na dnu prozora Document). • Pano Frames – Ovaj pano pruža vizuelnu predstavu o frejmovima koji se nalaze u skupu frejmova. Ako kliknete negde u ovom panou, aktiviraćete dokument sa skupom frejmova. Ako kliknete određeni frejm u panou, selektovaćete oznaku frame. Ako kliknete crnu ivicu oko frejma, selektovaćete oznaku frameset. Tag Selector – Ova korisna stavka Vam uvek pokazuje koji ste deo otvorenog dokumenta selektovali. Ako Tag Selector prikazuje oznake frameset, frame ili noframes, onda radite sa dokumentom koji sadrži skup frejmova. Ako je u njemu prikazana samo oznaka body i njen sadržaj, onda ste u nekoj od strana u okviru frejmova. Property Inspector - Kao i obično u Dreamweaveru, Property Inspector ćete koristiti za promenu osobina elementa koji je pre toga selektovan. U većini slučajeva, Property Inspector je sam po sebi jasan. Ipak, način na koji se podešavaju osobine row i col oznake frameset zaslužuje malo više pažnje. Kada je izabrana oznaka frameset, proksi ikona sa desne strane ukazuje na broj kolona i vrsta u koje je taj skup frejmova podeljen. Ako želite da podesite veličinu neke vrste ili kolone, kliknite ih u proksiju i podesite vrednost u poljima Value i Units. Kako se menja veličina skupa frejmova Šta se dešava kada se promeni veličina prozora pretraživača? Svi skupovi frejmova moraju da ispune ceo prozor pretraživača. Ako ručno napravite skup frejmova (umesto preko unapred definisanih skupova), onda ste odgovorni da sami uredite takvo ponašanje. Ako želite da sve vrste i kolone u skupu frejmova menjaju 125 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 veličinu proporcionalno veličini prozora, onda u polju Units za sve vrste i kolone treba da podesite na Percent (procenti). Takođe, treba da budete sigurni da brojevi u poljima Values daju zbor od 100%. Ako želite da se neka vrsta ili kolona prilagodavaju, a da ostale ostanu fiksne, onda za fiksne vrste i kolone podesite polje Units na Pixels i zadajte neki broj kao vrednost. Kod fleksibilnih vrsta i kolona podesite Units na Relative i nemojte zadavati vrednost. Najmanje jedna vrsta ili kolona mora imati vrednost Relative, ili se veličina frejmova neće menjati na pravi način. Nakon što ste u Property Inspectoru podesili ove jedinice, možete da menjate veličinu frejmova prevlačenjem njihovih granica u prozoru Document Linkovi na frejmove Svaki put kad želite da se linkovana strana pojavi u određenom frejmu ili prozoru pretraživača, treba da za taj link postavite i atribut target. Za dodeljivanje ovog atributa u Dreamweaveru treba da koristite Property Inspector. Rad sa frejmovima Toliko o osnovnim stvarima. Sada je vreme za zabavu. Šta možete da uradite da biste od frejmova zaista imali koristi i kako Dreamweaver može da Vam pomogne? U narednim odeljcima ćemo objasniti neke od opštih strategija koje se odnose na upotrebljivost i dostupnost frejmova, a pokazali smo i neke načine upotrebe frejmova, kojih se možda niste setili. Dostupnost frejmova Eksperti u vezi upotrebljivosti se možda spore o opasnostima i prednostima koje donose frejmovi, ali frejmovi ne nude više dostupnosti u odnosu na druge metode za navigaciju ili raspored elemenata na strani. Prema standardu Section 508, § 1194.22(i): Frejmovi treba da imaju imena koja olakšavaju njihovu identifikaciju i navigaciju. Šta ovo pratkično znači? Čitači ekrana i drugi tekstualni pretraživači prikazuju stranu sa frejmovima tako što prikazuiju listing sa naslovima ili imenima frejmova, i tako omogućavaju korisnicima da se kreću iz jednog u drugi frejm. Zbog toga je vrlo bitno da se tu stave informacije koje imaju neko značenje. Kako da to uradite? Za svaku oznaku frame iz dokumenta sa skupom frejmova treba da uradite sledeće: • Preko atributa name identifkujte svrhu frejma. • Preko atributa title identifikujte namenu frejma ovo može biti isto kao atribut name, ili malo duži tekst, sa više opisa. Unutar svakog HTML dokumenta koji se prikazuje u frejmu treba da uradite sledeće: • Preko oznake title upišite sadržaj strane. • Tamo gde je moguće, oznaku body počnite zaglavljem koje opisuje sadržaj Ako se prate ove napomene, onda bi kod za dostupni dokument sa skupom frejmova izgledao ovako: <frameset cols="80,*"> <frame src="navbar.htm" name="navigationBar" title= "Navigation Bar"> <frame src="main.htm" name="mainContent" name="Main -Content"> </frameset> Relevantni kod za neki od dokumenata koji se nalaze u frejmovima bi izgledao ovako (na primer, za main.htm): <html> <head> <title>E-prodavnica</title> </head> <body> <h1>Osnovno o nama</h1> [etc] </body> </html> Dostupnost frejmova u Dreamweaveru Alati vezani za dostupnost koji postoje u Dreamweaveru omogućavaju da svaki put napravite frejm sa 126 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 dostupnom stranom. Na početku: Podešavanje opcija dostupnosti Pre nego što napravite skup frejmova, treba da proverite da li su opcije dostupnosti za frejmove uključene (Edit > Preferences/ Accessibility). Kada ove opcije jednom uključite, naredni put kada sa palete Insert izaberete objekat Frame, ili kada preko okvira za dijalog New Document napravite novi skup frejmova, ili kada izaberete neku od komandi Insert > HTML > Framesets za ubacivanje, imate okvir za dijalog u kome možete da podesite atribut title za svaki frejm iz skupa frejmova. Obratite pažnju na to da ovaj okvir za dijalog dodeljuje atribut title za oznaku frame. Ovo nije isto kao dodeljivanje atributa title celoj strani, koja sadrži skup frejmova. Primetićete da u ovom okviru za dijalog ne možete da menjate imena frejmova. Možete da menjate samo naslove. Ovaj okvir za dijalog se neće prikazati ako sve frejmove pravite ručno (preko neke od komandi Modify > Frameset > Split). Na kraju: Podesite postojeće skupove frejmova Nakon što ste napravili skup frejmova, bez obzira da li ste koristili objekte iz Dreamweavera, ili ste to uradili ručno, osobine možete menjati preko Property Inspectora, Selection Inspectora ili preko komande Edit Tag. • Pazite da pametno koristite atribut name. Imena kao što su leftFrame ili bottomFrame mogu biti lepa i korisna, kada se koriste kod atributa target u linkovima. Evo kako to izgleda: <a href="main.htm" target="topFrame"> Sa druge strane, imena kao što je ovo ne opisuju namenu frejma, tako da nisu dostupna. Umesto toga je bolje koristiti imena kao što su navigationBar, titleBanner ili mainContent. Kada Dreamweaver umesto Vas pravi frejmove, podrazumevana imena frejmova baš i nisu opisna. Na kraju krajeva, odakle Dreamweaver zna koji frejm ćete koristiti za navigaciju, a koji za naslov. Zbog toga, nakon što Dreamweaver napravi skup frejmova, potrošite nekoliko trenutaka da promenite imena frejmova. To možete da uradite preko Property Inspectora, Selection Inspectora ili komande Edit Tag. • Zadajte naslove Čak i ako ste uključili opcije dostupnosti za frejmove, ili ako ste frejmove ručno kreirali, i dalje im trebaju naslovi. Ovo ćete uraditi tako što ćete preko Tag Selectora selektovati oznaku frame, a onda na kartici Attributes u Tag Inspectoru (kategorija CSS/Accessibility) pronaći atribut title. Možete i da pređete u prikaz Code, da desnim tasterom miša kliknete oznaku frejma, i da izaberete opciju Edit Tag. Otvoriće se okvir za dijalog Edit Tag (kategorija Style Sheet/Accessibility). • Podesite naslove strana i zaglavlja (gde je to moguće) Ovo treba da uradite u pojedinačnim dokumentima koji se prikazuju u skupu frejmova. Sve strane treba da imaju zadat atribut title. To možete uraditi preko opcije Modify > Page Properties ili preko polja Page Title sa palete Document. Uključivanje zaglavlja u tekst je više pravilo koje treba poštovati nego obaveza. Zaglavlje se primenjuje samo na sadržaj strane. 127 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Mogućnost pretraživanja frejmova Jedan od najstarijiih argumenata protiv upotrebe frejmova je da mašine za pretraživanje ne mogu da ih pretražuju na pravi način. Dokumenti sa skupovima frejmova nemaju oznaku body, a mašine za pretraživanje ne čitaju oznake frame. Prema tome, tekst ili linkovi koji se nalaze u okviru strana sa frejmovima se neće uzimati u obzir prilikom pretraživanja. Ako želite da neko pronađe Vaš web sajt, onda ste u problemima. Ali, to nije baš u potpunosti istina. Skupove frejmova možete da učinite dostupnim za pretraživanje, ako podesite oznaku noframes, koja ima telo, koje mogu da čitaju uređaji koji ne mogu da čitaju frejmove. Evo kako izgleda kod: <frame src="navbar.html" name="navFrame"> <frame src="intro.html" name="mainFrame"> </frameset> <noframes> <body> [searchable body content goes here] </body> </noframes> Kada su se frejmovi po prvi put pojavili i kada ih svi pretraživači još uvek nisu podržavali, autori web strana su često u oznake noframes stavljali sadržaj poput: "Vaš pretraživač ne podržava frejmove, tako da ne možete da vidite naš web sajt". Danas pametni dizajneri koriste ovu oznaku za upućivanje mašinama za pretraživanje. Rad sa sadržajem oznake noframes u Dreamweaveru Dreamweaver automatski dodaje oznaku nof rames u svaki skup frejmova koji napravi. Na Vama je samo da iskoristite ovu oznaku. Evo kako ćete pristupiti sadržaju oznake noframes: 128 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 1. Otvorite dokument sa skupom frejmova i proverite da li se nalazite u prikazu Design. 2. Izaberite Modify > Frameset > Edit NoFrames Content. Prozor Document će se promeniti i prikazaće se deo body u okviru oznake noframes. Sada ste spremni da koristite bilo koji alat koji u Dreamweaveru postoji, a koji se koristi za konstruisanje alternativnog sadržaja strane za strane koje ne koriste frejmove. U okviru Tag Selectora će se prikazati oznaka no frames. Nakon što završite rad na oznaci noframes, izaberite ponovo Modify > Frameset > Edit NoFrames Content da biste se vratili u običan prozor za rad sa frejmovima. Iz prozora Code možete da pređete na uređivanje sadržaja oznake noframes, ako kursor postavite u ovu oznaku, a onda pređete nazad u prikaz Design. Šta ubaciti u sadržaj oznake noframes Mašine za pretraživanje pretražuju strane u potrazi za ključnim rečima, opisima, naslovima strana ili sadržajem oznake body, a onda prate linkove sa glavne strane na ostale strane u okviru sajta. Ključne reči, opisi i naslovi strana se čuvaju u okviru sekcije zaglavlja u HTML dokumentu, tako da isto mogu da funkcionišu i u dokumentima sa skupom frejmova. Vi želite da sadržaj strane i linkove stavite u deo noframes, tako da mogu da ih pronađu mašine za pretraživanje. Tekst koji se tu postavlja je najbitniji, pošto mašine za pretraživanje ne uzimaju u obzir slike, ali obraćaju pažnju na imena datoteka sa slikama, kao i alt tekst. Ako želite da brzo prebacite sav relevantan sadržaj iz frejmova u deo noframes, možete da uradite sledeće: 1. U prikazu sa frejmovima, kliknite unutar strane sa frejmovima i izaberite Edit > Copy. 2. Izaberite opciju Modify > Frameset > NoFrames Content, da biste prešli u prikaz noframes. 3. Izaberite Edit > Paste. 4. Vratite se nazad u običan prozor i ponovite ovu proceduru za sve frejmove iz skupa frejmova. Upamtite da, ako u deo noframes imate ubačene linkove za navigaciju, mašina za pretraživanje je u stanju da se odatle kreće kroz ostatak Vašeg sajta. Navigacija unutar frejmova Dokle god pazite na to kako zadajete atribute svojih linkova, podešavanje osnovne navigacije kroz skupove frejmova neće biti tako teško. Sa druge strane, postoji više načina da poboljšate svoje skupove frejmove i, kao i uvek, Dreamweaver tu može da Vam pomogne. Istovremena promena više frejmova Korisnik je kliknuo link u frejmu za navigaciju i u frejmu za sadržaj se pojavila nova strana. Šta ako želite da jedan korisnik klikne da bi učitao novu stranu u frejm za sadržaj, ali i u frejm za baner? Ponekad Vam je potrebno da odjednom promenite dva frejma, a obična stara oznaka anchor nije u stanju da Vam pomogne. Tu je potrebno malo JavaScripta. U Dreamweaveru postoji ponašanje Go To URL, koje omogućava da ovo brzo i lako uradite. Evo kako se to radi: 1. Otvorite dokument sa skupom frejmova, sa najmanje tri frejma (jedan koji upravlja navigacijom i dva koja treba da se promene). Pogledajte u pano Frames, da biste se podsetili koja su imena ova tri frejma. Ta informacija će Vam ubrzo zatrebati. 2. Izaberite grafiku ili tekst koji će postati link. 3. U polju Link u Property Inspectoru, unesite javascript:;. Na ovaj način se kreira nulti link (link koji nikuda ne vodi). 4. Dok je link još uvek izabran, otvorite pano Behaviors (Window > Behaviors) i kliknite + da biste dodelili ponašanje Go to URL. 5. U okviru za dijalog Go to URL će biti prikazani svi frejmovi koji postoje u dokumentu. Izaberite prvi frejm, koji želite da promenite (to je razlog zašto je bitno da znate imena svojih frejmova) i kliknite dugme Browse, da biste selektovali novu stranu koja treba da se prikaže u frejmu. Pored imena frejma, u okviru za dijalog ćete primetiti zvezdicu, što ukazuje na to da ste podesili da se tu prikaže nova URL adresa. 6. Isto treba da uradite i za drugi frejm koji želite da promenite. Selektujte ga iz liste i kliknite Browse. Time ćete podesiti link. Ako želite da menjate više od dva frejma, nastavite da selektujete frejmove i da podešavate linkove. 7. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Nakon što ste ubacili ovo ponašanje, u prikazu Code treba da pogledate svoj dokument. Videćete da je Dreamweaver ubacio funkciju MM_goToURL(), koja promenom lokacije frejma resetuje stranu u svakom zadatom frejmu. Prelazak na određenu stranu u skupu frejmova Jedan od nedostataka vezanih za upotrebljivost sajtova sa frejmvima je da posetioci ne mogu da označe određene strane u okviru skupa frejmova, već samo ceo skup. Ovo može biti frustrirajuće, posebno kod 129 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 velikih sajtova, na kojima ima mnogo informacija, kod kojih posetioci žele da upamte tačno odredene strane. Ponovo treba koristiti JavaScript i objekat location, premda sada nema nekog korisnog ponašanja Dreamweavera, koje bi moglo da pomogne. Kako ovo radi Kada u skupu frejmova zadajete neki link, u suštini želite sledeće: "Učitaj stranu index.html (strana sa skupom frejmova) i u frejm za sadržaj stavi stranu catalog.html". Ovo možete da uradite ako linku dodate URL parametar. Evo kako to izgleda: <a href="index.html?page=content.html"> URL parametar je sve što se pojavljuje iza znaka ? u okviru putanje. Naravno, da pretraživač ne zna šta znači page=content.html. Prema tome, morate da ubacite malo JavaScripta koji će pretraživaču reći da strana koja je data preko URL parametra treba da se prikaže u frejmu sa sadržajem. Podešavanje skupa frejmova za obradu URL parametara je najteži deo procedure. Tu spada kreiranje JavaScripta koji učitava različite strane sa sadržajem. JavaScript se mora dodati kao funkcija u deo zaglavlja i kao funkcija koja je pridružena oznaci body. U Dreamweaveru ćete ovo uraditi na sledeći način: 1. Otvorite dokument sa skupom frejmova. 2. Pogledajte pano Frames, da biste videli imena svojih frejmova. Konkretno treba da zapišete ime frejma u kojem treba da se prikazuju sve strane sa sadržajem. 3. Selektujte skup frejmova (proverite da li je ta strana u Tag Selectoru na dnu prozora Document, prikazana masnim slovima). 4. Izaberite View > Head Content tako da se sivi deo zaglavlja pojavi na vrhu dela Design u prozoru Document. Kliknite unutar ove oblasti da biste je aktivirali i da bi Dreamweaver znao da prvi deo koda želite da ubacite baš tu. 5. Sa palete HTML Insert izaberite objekat Script. Kada se otvori okvir za dijalog Script, proverite da li je jezik podešen na JavaScript i u polju Content unesite sledeći kod : <!.. function loadPage(){ var myParameters=window.location.search; if (myParameters==""){ return; } var contentPage=myParameters.substring(myParameters.indexOf (" = ")+1 ,myParameters.length); mainframe.location.replace(contentPage); } //--> Ovaj kod sakuplja URL parametre u promenljivu myParameters. Nakon toga se traži ime datoteke koje se nalazi ispred znaka jednakosti i lokacija frejma po imenu mainFrame se podešava na tu vrednost. U kodu ćete verovatno zameniti mainFrame imenom svog frejma za sadržaj. Nakon što ste proverili svoj kod i osigurali da su u njemu prava imena frejmova, kliknite OK da biste zatvorili okvir za dijalog. U delu zaglavlja u prozoru Document će se prikazati ikona skripta. 130 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 6. Ova funkcija se mora izvršiti kada se učitava skup frejmova, što znači da oznaka frameset mora da pozove tu funkciju u događaju onLoad. Kada se otvori okvir za dijalog Edit Tag, idite u kategoriju Events > onLoad. Selektujte događaj onLoad i u delu content unesite sledeće : loadPage() 7. Nakon što završite kliknite OK da biste zatvorili okvir za dijalog Edit Tag. Sve što treba da uradite posle ubacivanja koda je da mu pristupite sa strane koja je linkovana na skup frejmova. Recimo da se glavna strana sa skupom frejmova zove index.html i da želite da tu stranu učitate, a da se u frejmu content prikaže strana catalog.html. URL koji se prikazuje u polju sa adresom pretraživača je: http://mvdomain.com/index.html?page=catalog.html Ovo možete isprobati ako pogledate svoju stranu sa frejmovima u pretraživaču i ručno unesete znak pitanja i URL parametar. Ako želite da na stranu sa frejmovima dođete sa nekog drugog mesta na svom sajtu, treba da uradite sledeće: 1. U Dreamweaveru otvorite stranu sa koje link treba da vodi na stranu sa frejmovima. Selektujte tekst ili sliku koji treba da predstavljaju link na tu stranu. 2. U Property Inspectoru kliknite dugme Browse, koje se nalazi pored polja Link. Pronađite svoj dokument sa frejmovima. 3. Pre nego što zatvorite okvir za dijalog Select File, kliknite dugme Parameters. Otvoriće se drugi okvir za dijalog. Unesite stranu kao ime parametra, a kao vrednost unesite ime strane sa sadržajem. 4. Kliknite OK da biste zatvorili okvir za dijalog i izaberite close, da biste zatvorili glavni okvir za dijalog. U polju Link, u Property Inspectoru bi sada trebalo da stoji URL adresa, sa parametrima, koji su odvojeni znakom pitanja. Ako ne želite, URL ne morate tražiti preko dugmeta browse. Ako volite da kucate i ako dobro poznajete pravila vezana za parametre URL adrese, možete da preko tastature unesete URL adresu i njene parametre. (Pravila su: Oko znaka pitanja ili znaka jednakosti nema razmaka i u vrednostima nema navodnika.) Obratite pažnju na to da prethodni primer pretpostavlja da se sve datoteke nalaze u istoj fascikli, iako to nije uvek slučaj. URL parametri moraju sadržati apsolutni URL ili URL koji je relativan u odnosu na dokument sa skupom frejmova. Dreamweaver Vam ne može pomoći u ovome. Ako je strana sa katalogom u nekoj podfascikli, po imenu departments, onda konačni link treba da izgleda ovako: index.html?page=departments/catalog.html Napravite posebno parče koda Ako često koristite frejmove, onda funkciju loadPage() možete da upamtite kao poseban deo koda, tako da je kasnije možete ubacivati po potrebi. Treba da imate na umu da poziv funkcije treba ubaciti svaki put kada se funkcija poziva, a da ćete ubacivanjem posebnog dela koda samo ubaciti funkciju. Svaki put morate ručno dodati poziv te funkcije. Ovo možete da uradite preko panoa Behaviors: 1. U Tag Selectoru izaberite oznaku body. 2. U panou Behaviors kliknite kolonu za dve kolone, tako da se prikažu svi događaji. 3. Pronađite događaj onLoad. U koloni pored ovog događaja unesite loadPage(). 131 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dodatak Exchange Ne postoji neki pomoćni program u okviru Macromedia Exchangea, koji bi se koristio za navigaciju kroz frejmove. Sa druge strane, stalno se prave nova proširenja, tako da treba da povremeno proverite da li se neko pojavilo. Mogućnost označavanja strana Nakon što ste u svoj dokument sa frejmovima ubacili skript loadPage(), lako je proveriti da li strane možete da markirate pojedinačno. Svaki put kada korisnik označi stranu, ta oznaka se prikaže u polju pretraživača za unos adrese. Vi samo treba da budete sigurni da se u okviru interne navigacije na sajtu koriste URL parametri, tako da se u polju sa adresom uvek nalazi i strana sa rasporedom, kao i parametar koji se odnosi na konkretnu stranu. Zadržavanje strana u frejmovima Jedan od problema sa kojim se suočavaju autori web strana sa frejmovima je: Šta uraditi ako korisnik slučajno dođe na neku od strana koje su u frejmovima, ali je učita bez okvira i izvan skupa frejmova? Ovo se može lako desiti ako, na primer, mašina za pretraživanje pronađe neku od Vaših strana i korisnika pošalje tamo. Ako na strani nema indikacije web sajta kome ona pripada i (što je još važnije) ako nema načina da se korisnik vrati nazad na osnovni sajt, korisnik nikad neće ni čuti za Vas. Vaša strana će postati siroče u sajber-svetu. Ovo se može rešiti na različite načine, počev od automatizovanih rešenja sa skriptovima, pa do jednostavnih dodataka vezanih za navigaciju. Ljudi koji se bave frejmovima za ovo koriste termine frame jamming i frame stuffing. Podnožje sa navigacijom Problem siročeta možete rešiti brzo i jednostavno, ako uvek na stranu ubacujete navigaciju i indetifikaciju. Na primer, malo podnožje (footer) na dnu strane, osigurava da korisnik te strane zna gde ta strana pripada i kako da tamo ode. Nisu potrebni skriptovi ili neki drugi dodaci. Brzo dodavanje navigacije u podnožje preko parčića koda Navigaciju možete da napravite kako god želite, ali ako želite da to uradite brzo, možete proveriti delove koji dolaze uz Dreamweaver. U panou Snippets (Window > Snippets) proverite šta se nalazi u fascikli Navigation/Horizontal. Ubacite svoje podnožje u biblioteku Skupove frejmova ćete verovatno koristiti zbog njihove efikasnosti. Nakon što ste napravili podnožje sa navigacijom, ubacite ga u biblioteku u Dreamweaveru, tako da ga kasnije možete lako prevući i ubaciti na koju god stranu želite. Ubacivanje skripta: Uslovno prikazivanje informacija u podnožju Sa vrlo malo dodatnog truda, možete da dalje podesite svoje strane sa frejmovima, tako što ćete napraviti da prikazivanje navigacije i identifikacije bude uslovno, tako da se prikazuju samo na stranama na kojima ne postoji osnovni skup frejmova. Kod je pomalo složen, ali je vredan truda. Kao i obično, Dreamweaver nudi svoju pomoć. Evo koji su osnovni koraci: 1. Otvorite stranu koja uobičajeno treba da se prikače kao deo skupa frejmova i kreirajte sadržaj za navigaciju i identifikaciju, koji se prikazuje ako strana nije u skupu frejmova. 132 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 2. Sada dolazi ono glavno. Selektujte sadržaj koji ste napravili i pređite u prikaz Code. Kod ne sme da ima nove redove, a svi jednostruki navodnici ili apostrofe moraju ispred sebe imati escape karakter (\). Izabrani deo koda treba da promenite tako da bude u skladu sa zahtevima. Ovo možete da uradite ručno ili preko komande Edit > Find and Replace. Sledeći kod neće raditi: <table> <tr> <td>Joe's sajt</td> </tr> </table> Ali, ovaj kod hoće: <table><tr><td>Joe\ 's sajt</td></tr></table> 3. Sada izaberite prečišćeni kod i izaberite Edit > Cut. 4. Ostavite kursor tamo gde jeste i sa palete Insert izaberite objekat Script. 5. Kada se otvori okvir za dijalog Script Insertion, proverite da li je iz padajućeg menija za jezike izabran jezik JavaScript. U polje Content unesite sledeći sadržaj (bez grešaka). <!.. if (self == top) document.write(' '); //--> 6. Postavite kursor između dva jednostruka navodnika izaberite Edit > Paste. Ovim bi prečišćeni kod trebalo da se postavi u prozor. 7. Sada kursor postavite u polje No Script i izaberite Edit > Paste 8. Kliknite OK da biste zatvorili okvir za dijalog. U prikazu Code bi ovaj deo strane trebalo da izgleda ovako: <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 pažnju na boje u kodu. Ako je sve u redu, sav kod koji ste postavili u JavaScript (ne kod u okviru oznake noscript) treba da bude prikazan u jednoj boji i jednim stilom. Ako to nije slučaj, onda ste izostavili novi red ili jednostruki navodnik u nekom delu koda. 9. Kada se vratite u prikaz Design, uslovni sadržaj će se prikazati kao zlatna ikona skripta. Ako želite da ubuduće menjate ovaj skript, treba da selektujete ikonu i da sa Property Inspectora kliknete 133 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 dugme Edit. Sadržaj oznake noscript će se prikazati kao i obično u prikazu Design. Ako želite da napravite snipet (parče koda) koji sadrži sav kod koji ste ubacili, treba da uradite sledeće: 1. U prikazu Design selektujte ikonu skripta koja predstavlja uslovni sadržaj i iskopirajte je (Edit > Copy). 2. Otvorite pano Snippets (Window > Snippets) i desnim tasterom miša kliknite fasciklu snippet. Iz pomoćnog menija izaberite New Snippet. 3. Kada se otvori okvir za dijalog Snippet, kod koji ste upravo iskopirali treba da bude u polju Content. Dajte snipetu ime i opis. Tip podesite na block. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. 4. Naredni put kada želite da ubacite ovaj sadržaj na neku stranu, samo prevucite ovaj snipet sa panoa Snippets i postavite ga na određeno mesto u dokumentu. Možete da napravite i snipet koji sadrži samo ljusku JavaScripta, tako da u budućnosti možete da dodajete različit uslovni sadržaj. Evo kako ćete to uraditi: 1. Otvorite pano Snippets (Window > Snippets) i desnim tasterom miša kliknite fasciklu JavaScript. Iz pomoćnog menija izaberite New Snippet. 2. Kada se otvori okvir za dijalog dajte snipetu ime i opis. Tip podesite na Wrap. 134 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 3. U polju Insert Before unesite sledeće: <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 sledeće: '); //--> </script> 5. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Naredni put kada budete želeli da ubacite uslovnu navigaciju u skup frejmova treba da uradite sledeće: 1. U prikazu Design napravite navigaciju ili neki drugi element koji treba da se prikazuje samo na toj strani, a ne i u skupu frejmova. 2. Pređite u prikaz Code. Obrišite sve nove redove i ispred svih apostrofa i jednostrukih navodnika ubacite kosu crtu (\). 3. Selektujte sav prečišćeni kod. 4. Otvorite pano Snippets, selektujte snipet sa uslovnim kodom i kliknite dugme Insert sa dna panoa. Ovim se oko Vašeg sadržaja ubacuje JavaScript kod. Pogledajte Exchange Ako Vam je sa uslovnom navigacijom potrebno malo pomoći, možete da isprobate objekat Write If Frameset, koji postoji u okviru programa Macromedia Exchange. Ovaj objekat radi slično kao snipet koji smo opisali u prethodnom odeljku. Kod njega postoji ograničenje da kod koji ubacujete ne sme imati prazne redove i dvostruke navodnike. On takođe traži da oznaka frameset ima atribut id. Skriptovi za automatsko učitavanje frejmova Postoji mogućnost da ceo proces automatizujete, tako da kad god se strana učitava bez osnovnog skupa frejmova, automatski dolazi do njenog ponovnog učitavanja frejmovima. Ovo se radi preko JavaScripta koji 135 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 se automatski izvršava. Na žalost, Dreamweaver ne može da napiše ovaj skript umesto Vas. Ipak, postoji nekoliko opcija za ubacivanje ovakvih skriptova, uključujući i kreiranje skripta loadPage(), koji smo objasnili u prethodnom odeljku, kao i upotrebu skriptova koji postoje u okviru programa Exchange. Uradite to preko funkcije loadPage() Skriptove za automatsko učitavanje strane sa frejmovima možete napraviti preko funkcije loadPage(). Treba da ubacite i poziv ove funkcije. Ako nemate napravljen ovaj kod, vratite se u taj odeljak i napravite ga. Nakon što ste podesili dokument sa skupom frejmova, svaka strana sa sadržajem se automatski ubacuje u skup frejmova, ako ima podešen skript koji se nalazi u sekciji zaglavlja. Evo kako ćete to da uradite: 1. Otvorite stranu sa sadržajem koju želite da pripremite. 2. Izaberite View > Head Content tako da se prikaže deo sa zaglavljem, a onda kliknite tu oblast da biste je aktivirali. 3. Sa palete Insert izaberite objekat Script. Kada se otvori okvir za dijalog Script, proverite da li je u padajućem meniju language izabrana opcija JavaScript. U polje Content unesite sledeći kod: <!-if (top == self) location.replace("frameset.html?page= .content.html"); //--> Ubacite ime svog dokumetna sa skupom frejmova i svoju stranu sa sadržajem. To treba da ubacite tamo gde je označeno masnim slovima. 4. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Ovaj skript će se u delu sa zaglavljem prikazati u obliku ikone. Pogledajte program Exchange: Proširenje frame-jamming Macromedia Exchange ima nekoliko proširenja koja ubacuju kod koji je sličan onom koji smo ovde dali. To su Find Parent Frameset (Subhash Robin), Frame Jammer (Hal Pawluk) i Frame Stuffer (Hal Pawluk). Izlazak iz frejmova Navigacija kroz skup frejmova je samo jedan deo priče o kretanju kroz frejmove. Ponekad će Vam biti potrebno da svoju stranu dobijete bez frejmova. Ovo se može urditi automatski, preko JavaScripta koji razbija frejmove ili ručno, preko linkova sa atributom target. Razbijanje frejmova Razbijanje frejmova je potrebno kada koristite tuđe skupove frejmova. Da li ste se ikad našli u situaciji da se neka od Vaših strana neđe u tudem skupu frejmova? Ovo se dešava kada autor strane sa frejmovima, slučajno ili namerno, da link na Vašu stranu, bez odgovarajućeg atributa target. Pošto postavljanje tuđe strane u Vaš skup frejmova ukazuje da je taj drugi sajt dopunski u odnosu na Vaš, to su se oko ove aljkavosti vodile razne parnice. Ako na svoju stranu ubacite malo JavaScripta, možete da garantujete da se ona nikad neće pojaviti u okviru frejma. Na žalost, Dreamweaver ne može automatski da napiše takav skript. Ipak, postoji nekoliko drugih opcija da ubacite kod koji razbija frejmove. Napravite svoj kod za razbijanje frejma Kod koji razbija frejm nije komplikovan, tako da ako nemate ništa protiv da malo kucate, možete lako napraviti skript i kasnije ga ponovo koristiti. Evo kako ćete to da uradite: 1. Otvorite HTML dokument u koji želite da ubacite kod za razbijanje frejma. 2. Izaberite View > Head Content tako da se siva traka sa sadržajem zaglavlja prikaže na vrhu prozora Document. Kliknite unutar sadržaja zaglavlja, da biste ga aktivirali. 3. Sa palete HTML Insert, iz grupe objekata Script izaberite objekat Script. 4. Kada se otvori okvir za dijalog Script Insertion, proverite da li je iz padajuće liste language izabrana stavka JavaScript i u polje Conent unesite sledeće: <!-if (self ! = top) top.location.replace(self.location); //--> 136 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 5. Nakon što završite, kliknite OK da biste zatvorili okvir za dija log. U delu zaglavlja će se ovaj skript prikazati kao ikona Strana je sada razbijena. 6. Kada ubuduće budete želeli da menjate ovaj skript, izaberite njegovu ikonu u delu sa zaglavljem i u Property Inspectoru kliknite dugme Edit. Pogledajte Exchange: Proširenja vezana za razbijanje frejmova Ako ipak želite da koristite kod koji su drugi napravili, možete da pogledate listu sa nekoliko proširenja koja su napravila nezavisna proširenja, a koja postoje u okviru Dreamweaver Exchange. Tu spadaju objekti Frame i Break Out of Frames, kao i ponašanje Bust Frames. Strane koje se lepo štampaju Druga stvar koja se odnosi na upotrebljivost, a koja muči sajtove sa frejmovima, je teško štampanje pojedinačnih frejmova. Ništa nije tako frustrirajuće kao kada pokušate da odštampate svoju stranu, a dobijete lepo odštampan frejm sa navigacijom, pri čemu ste bacili puno boje. Ovaj problem je najlakše rešiti ako napravite link na stranu koja se dobro štampa i to stavite na svaku stranu sa sadržajem. Kakve su to strane? Tu je sadržaj samog frejma, ali nema banera ili navigacije sa strane. Da biste napravili link na stranu koja se dobro štampa, treba da uradite sledeće. 1. Napravite nenametljiv link sa tekstom ili grafikom. Tekst može biti, na primer, "Kliknite ovde da biste dobili stranu koja se lako štampa". 2. Preko Property Inspectora dodelite link na istu tu stranu, okrenut ka praznom prozoru. Kreativni grafički efekti koji se dobijaju preko frejmova Deo zabave u radu sa frejmovima je mogućnost da dobijete neobične grafičke efekte ili efekte vezane za raspored. U narednim odeljcima ćemo pokazati nešto od ovog, zajedno sa specijalnim instrukcijama kako da to uradite pomoću Dreamweavera. Kako da sami napravite skup frejmova tipa Letterbox U Dreamweaveru ne postoji objekat letterbox, tako da ga morate sami napraviti. Koristićete komande iz menija Modify > Frameset > Split. Evo kako ćete to uraditi: 1. Napravite novi dokument. U okviru za dijalog New Document, izaberite Frameset/Fixed Top, Fixed Bottom. 2. Postavite kursor u srednji frejm i izaberite Modify > Frameset > Split Frame Left. Ovim ćete napraviti vertikalnu podelu frejma koji je ubačen u horizontalnu podelu. 3. Pritisnite Alt/Opt i prevucite levo ili desno da biste ovu vertikalu podelili i napravili još jednu vertikalnu podelu. (U ovom trenutku proverite pano Frames, da biste bili sigurni da ste podelili skup frejmova, a ne ubacili jedan u drugi. Ako se slučajno desilo ovo drugo, izaberite Edit > Undo i ponovite postupak.) 4. Postavite horizontalne i vertikalne delove tamo gde želite da budu, ali upamtite da će raspored u potpunosti biti u okviru centralnog frejma. 5. Otvorite pano Frames i selektujte spoljni od dva skupa frejmova. U Property Inspectoru podesite opciju borders na None, a širinu granice na 0. Centralni fiksni frejm ćete napraviti preko Property Inspectora, odnosno atributa proxy. Na taj način se gornji i donji frejm podešavaju sa visinom Height. Srednji frejm ćete podesiti na određeni broj piksela.Ako želite da napravite fleksibilan centralni frejm, 137 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 onda preko proksija treba da podesite srednji frejm na visinu Relative, a da donji i gornji frejm podesite na određeni broj piksela. 6. Ponovite postupak i za unutrašnji skup frejmova. Podesite opciju borders na None, a debljinu okvira na 0. Ako želite da napravite fiksni centralni frejm, onda preko proksija podesite levi i desni frejm na relative, a centralni frejm na određeni broj piksela. 7. Spoljašnji frejmovi neće imati nikakav sadržaj, tako da nisu potrebni ni klizači. Izaberite svaki od spoljašnjih frejmova (top, bottom, left, right) i podesite opciju Scroll na None. Sami birate da li ćete klizače ubaciti u centralni frejm. 8. Na kraju, pošto će spoljašnji frejmovi biti isti, za svaki od njih možete da koristite istu HTML datoteku. Postavite kursor u neki od spoljašnjih frejmova i upamtite datoteku pod nekim opštim imenom, kao što je bg.html. Boju pozadine podesite na crnu, sivu ili neku drugu. Nakon toga, preko panoa Frames podesite atribut Src za ostale frejmove, tako da ukazuje na istu datoteku, koju ste upravo upamtili. Exchange: Proširenje Letterbox Frameset Ako su Vam se frejmovi tipa Letterbox toliko dopali, da nameravate da ih stalno koristite, možete da pogledate proširenje koje postoji u okviru programa Macromedia Exchange. To je proširenje Letterbox Frameset, koje dolazi od Projecta Seven. Ova komanda koja se nalazi u meniju Modify > Frameset, kreira raspored tipa letterbox, sa fiksnim centralnim frejmom. Deoba grafike u pozadini između frejmova Neki od sajtova koji pokazuju najviše kreativnosti u upotrebi frejmova su oni koji sakrivaju da su sastavljeni od frejmova. U tom cilju se koriste boje pozadine i slike. Tehnika koja se ovde koristi nije tako složena, ali zahteva malo više razmišljanja, pošto u većini grafičkih programa ne postoje alati da se to lako uradi. Ako koristite Dreamweaver i Fireworks, to ćete uraditi na sledeći način: 1. U Dreamweaveru napravite skup frejmova. Obratite pažnju na dimenzije frejmova. 2. U Fireworksu napravite novi dokument sa dovoljno velikim prostorom koji može da pokrije oba frejma. 3. Napravite grafiku za pozadinu koja pokriva ceo prostor. 4. Napravite odsečene objekte iste veličine i pozicije kao u frejmovima. Ako je potrebno, podesite grafiku tako da odgovara veličini delova. 5. Optimizujte sliku i izvezite je iz Fireworksa. Treba da upotrebite opciju Export Images Only i Export Slices. 6. Kada se vratite u Dreamweaver, podesite da svaka izvezena slika postane pozadina odgovarajućeg frejma. Ako želite da kontrolišete postavljanje slika u pozadini, možete da upotrebite i CSS. Svet frejmova Inlajn frejm, kao i običan frejm, definiše pravougaonu oblast u prozoru pretraživača, koja prikazuje deo drugog dokumenta. Za razliku od strandardnih frejmova, ovi frejmovi postoje u okviru običnih HTML dokumenata, u okviru oznake body. Ovaj frejm se ponaša kao i bilo koji drugi element na strani (slika, tabela i sl.). Inlajn frejmovi su korisni uglavnom iz istih razloga kao i obični frejmovi. Oni omogućavaju da se deo sadržaja na strani menja, a da pri tome ne mora da se učitava cela strana. Oni omogućavaju da se klizačima krećete kroz deo strane, a da ostali sadržaj ostaje na svom mestu, itd. I za njih kao i za obične frejmove postoje izvesni zahtevi vezani za dostupnost. Oni su deo HTML 4 specifikacije i trenutno ih podržava većina najvažnijih pretraživača. Inlajn frejmovi (iframes) u Dreamweaveru Dreamweaver samo delimično podržava inlajn frejmove. Ovi frejmovi se ne mogu ubacivati iz prikaza Design, oni se u tom prikazu ne prikazuju, a ni njihove osobine se ne prikazuju u okviru Property Inspectora. Kreiranje inlajn frejmova Dva su mehanizma za umetanje inlajn frejmova. To su Tag Chooser i objekat Floating Frame. Ako želite da preko Tag Choosera ubacite inlajn frejm, treba da uradite sledeće: 1. Napravite dokument koji će sadržati osnovni raspored i koji određuje gde treba da se postavi inlajn frejm. To treba da bude pravougaonik, koji se može postaviti u ćeliju tabele ili na nivo iz CSS-a, ili negde drugde u okviru bloka iz HTML-a (slike ili pasusi). 2. Napravite drugi dokument koji treba da se prikaže u okviru te pravougaone površine. Ceo dokument ne mora da stane u oblast koja je predviđena za inlajn frejm, pošto je moguća upotreba klizača, ako je taj dokument veći. 3. U glavnom dokumentu postavite kursor tamo gde treba da se prikaže inlajn frejm. U ovom trenutku, inlajn frejm možete da ubacite preko Tag Choosera ili preko objekta Floating Frame (samo u prikazu 138 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Code). 4. Izaberite Insert > Tag, da biste pristupili Tag Chooseru. Iz kategorije HTML Tags /Page Elements/General izaberite iframe i kliknite Insert. 5. Otvoriće se okvir za dijalog Edit Tag. U kategoriji General dodelite potrebne osobine. 6. Kada završite sa dodeljivanjem osobina, kliknite OK da biste zatvorili okvir za dijalog Edit Tag, a onda kliknite Close da biste zatvorili i Tag Chooser. Inlajn frejm se neće prikazati u Dreamweaveru, ali će pogled na prikaz Code dokazati da je ipak na svom mestu. Ako želite da inlajn frejm ubacite preko objekta Floating Frame, pripremite datoteke kao u koracima 1 i 2, a onda uradite sledeće: 1. Pređite u prikaz Code. U ovom kodu postavite kursor tamo gde želite da se prikaže inlajn frejm. 2. Sa palete HTML Insert izaberite Floating Frame (grupa objekata Frames). (Ovaj objekat je dostupan samo iz prikaza Code). Ovim se ubacuje inlajn frejm koji nema dodeljene osobine i koji neće biti funkcionalan, osim ako mu zasebno ne dodelite osobine. Osobine inlajn frejmova Nakon što ste napravili inlajn frejm, preko Tag Inspectora ili okvira za dijalog Edit Tag treba da podesite njegove osobine. Inlajn frejmovi se ne vide u prikazu Design, ali se mogu selektovati preko Tag Selectora. Inlajn frejm možete selektovati i u prikazu Design. Samo treba da kliknete u prozor Document, tamo gde treba da se nalazi frejm i on će se pojaviti u Tag Selectoru. Naravno, ukoliko ne možete da vidite frejm, možda ćete imati problema da pogodite gde se on tačno nalazi, ili čak da tačno upamtite šta je u pitanju. Za razliku od mnogih drugih nevidljivih objekata (oznaka form, na primer), inlajn frejmovi se ne prikazuju ni kao zlatna ikona. Između oznake za otvaranje i zatvaranje frejma možete da ubacite neki komentar, koji će Vam kasnije pomoći da ga pronađete, pošto se komentari prikazuju kao zlatna ikona. Evo kako ćete to uraditi: 1. Idite u okvir za dijalog Preferences/Invisible Elements i uključite ikonu za komentare. Ovim se Dreamweaveru nalaže da komentare prikazuje kao zlatnu ikonu (kada su prikazani nevidljivi elementi). 2. Pređite u prikaz Code i postavite kursor između oznake početka i završetka iframe. 3. Sa palete Common Insert izaberite objekat Comment. Ovim se ubacuje komentar. Unesite nekoliko reči, kao što je, na primer: "iframes se nalazi ovde". Od sada, kada god se prikažu nevidljivi elementi na strani, možete da selektujete zlatnu ikonu komentara, a Tag Selector će prikazati oznaku iframe. Kliknite indikator oznake u Tag Selectoru da biste je selektovali, a onda možete i da podešavate njene osobine. Ako želite da podesite osobine inlajn frejma, izaberite Modify > Edit Tag. Otvoriće se Tag Editor. Možete i da koristite karticu Attributes u okviru Tag Inspectora. Exchange: Proširenje vezano za inlajn frejmove Inlajn frejmovi su korisne male stavke i prilično su popularni. U programu Macromedia Exchange postoji nekoliko proširenja koja pomažu kod ubacivanja i rada sa ovakvim frejmovima. 139 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 11. Kaskadne liste stilova (CSS) Osnove CSS-a Iako je CSS sjajan alat, ipak može biti zastrašujuć, ako ga nikad ranije niste upotrebljavali. Ovaj kratak pogled se bavi osnovama CSS-a, objašnjavajući odakle on dolazi, šta i kako radi, a pokazali smo i osnovne alate koji u Dreamweaveru MX 2004 postoje za rad sa njime. Kratak osvrt Izvorni koncept HTML-a je bio da je to jezik koji se koristi za označavanje teksta, odnosno za opisivanje različitih strukturnih elemenata u dokumentu. Oznake iz HTML-a identifikuju koji deo dokumenta je zaglavlje, gde su pasusi, koji deo je lista, a koje reči treba istaći. Pretraživači su tako napravljeni da interpretiraju ove strukturne elemente i prikazuju sve to na ekranu. Neće svaki pretraživač prikazati tekst na isti način. Neki će tekst označen kao emphasize prikazati kurzivom, neki masnim slovima, ali je tekst u svakom slučaju istaknut. Cilj je dobiti čitljiv dokument koji će se prikazivati preko strukturnih definicija na različitim platformama. Prezentacioni markup jezik i problemi koji tu postoje Sa pojavom grafičkih pretraživača i brzom ekspanzijom Weba, javili su se i zahtevi autora koji su se bavili HTML-om, da se naprave nove oznake koje će se baviti i prezentacijom, a ne samo strukturom. Dizajneri nisu više bili zadovoljni samo mogućnošću da zadaju da reč treba da se istakne, oni su želeli da definišu i kako ta reč treba da se istakne (na primer, putem masnih slova). Kao odgovor na ovaj pritisak, u jezik su ubačeni fizički elementi kao što su oznake b i i. Uskoro je strukturni jezik prerastao u prezentacioni, a oznaka font je počela da se široko primenjuje za definisanje stila teksta. Dizajneri web sajtova su bili srećni da imaju izvesnu kontrolu nad prezentacijom, ali kako su prestali da koriste strukturno formatiranje, više nije bilo moguće odrediti strukturne informacije na osnovu izvornog koda. To je dovelo do negativnih posledica, kao što su: • Kod koji se pravio nije ništa govorio o značenju teksta koji se prikazuje. Strukturno, ove strane predstavljaju samo niz slova. Pretraživač sa sintezom govora, na primer, tekst koji je označen oznakom <hl> prepoznaje kao glavno zaglavlje. On zna da taj tekst treba da prikaže velikim i masnim slovima, ali je to za njega običan tekst. • Markup koji nema strukturu je mnogo teže održavati. tekst koji je logički označen prema značenju sadržaja dovodi do čistijeg koda, koji ima smisla. • Nestruktuirane strane je vrlo teško indeksirati. Ako su zaglavlja strana i odeljaka jasno označena, mašine za pretraživanje mogu da ih koriste da omoguće korisniku da pronađe relevantne informacije. Ovo je posao za CSS W3C je brzo prepoznao da se priroda HTML-a promenila sa povećanom upotrebom prezentacionog označavanja i da je potrebno neko rešenje. Kao odgovor na to, počeo je rad na kaskadnim listama stilova (cascading style sheets - CSS), a 1996. godine je CSS postao preporuka W3C konzorcijuma. CSS je napravljen tako da dizajneru web strane omogući puno kontrole nad prikazivanjem strane, a da HTML ostane strukturni jezik. CSS omogućava mnogo kompleksniju i raznovrsniju prezentaciju teksta nego što je HTML ikad mogao da uradi, omogućavajući takve stvari, kao što je kreiranje okvira, definisanje razmaka oko elemenata, varijacije u velikim i malim slovima, dekoraciju (kao što je podvlačenje), definisanje razmaka između slova i puno toga drugog. Verovatno je najlepša stvar, koja je smanjila opterećenje web dizajnera, mogućnost da se koriste povezane liste stilova, tako da promenom stila na jednom mestu, možete da promenite izgled celog sajta. CSS je nešto što web dizajneri moraju poznavati, tako da svaki ozbiljan dizajner mora ovaj alat imati u svom arsenalu. Osnovni elementi CSS-a CSS je u osnovi skup instrukcija koje definišu kako neki HTML dokument treba da se prikaže. Najbolja stvar kod CSS-a je da se on može deflnisati u spoljašnjoj datoteci, ili listu (sheet). Pretraživač onda može da pročita ovaj spoljašnji list i da primeni sadržaj na određeni sadržaj datoteke. Na taj način se stil i formatiranje strane odvajaju od samog sadržaja. Ovo je vrlo bitan koncept kod dizajna web strana. Ovo Vam pruža moćan i detaljan način da ažurirate svoj web sajt. U datoteci sa stilovima možete definisati da se za tekst 140 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 primenjuje font Arial, da je veličina slova 12 piksela, da su slova crvene boje, da su masna, da je tekst levo poravnat i da je pozadina plava. Ako ovu datoteku pridružite svim stranama na svom sajtu, tekst će se uvek prikazivati na taj način. Ako promenite mišljenje, možete da promenite jednu datoteku i da zadate da font bude Times, da veličina slova bude 28 piksela, da su zelene boje, pisana kurzovim i desno poravnata. Upamtite tu novu datoteku i ceo web sajt se automatski ažurira. CSS takođe omogućava da radite neke stvari koje u HTML-u nisu moguće. Za svoju stranu možete definisati nivo kroz koji ćete se kretati klizačem. Na taj način možete da imate prozor u sredini strane sa sadržajem kroz koji se možete kretati uz pomoć klizača. Za svaku ivicu u okviru tabele možete definisati različitu boju. Možete podesiti da se kod oznaka za nabrajanje koristi korisnički definisana grafika, ili možete obrisati podvlačenje hiperlinkova. Premda se sa svakom novom verzijom pretraživača poboljšava podrška koju oni imaju za CSS, ipak neće svi pretraživači prikazati sve elemente CSS-a, niti će sve elemente prikazati na isti način. Uvek je dobro da svoju stranu testirate u različitim pretraživačima. Jedna od bitnih ideja u vezi CSS-a je da ako pretraživač ne podržava neki stil, informacije su i dalje tu, ali se ne koriste stilovi koji nedostaju. IE 5 i Netscape 6 i novije verzije uglavnom prikazuju većinu CSS elemenata. Izvesna ograničenja postoje u verziji Netscape 4. CSS Vam daje neverovatnu kontrolu nad stranama. W3C sada preporučuje da za formatiranje strana koristite CSS. Trebalo bi da pažljivo razmotrite mogućnosti primene CSS-a kod dizajna. Napomena o semantici Stil (style, ili style rule) generalno definisan kao skup parametara za neku oznaku ili klasu. List (sheet) je datoteka koja sadrži stilove. List može da sadrži više stilova. Anatomija stila U srcu CSS-a je stil. Ako shvatite kako stilovi rade i kakve mogućnosti donose, onda možete i da ih korisite na pravi način. CSS selektori CSS stil koji je najlakše razumeti je CSS selektor. Selektor je bilo koji HTML element ili oznaka. Ako želite da utičete na izgled oznake, onda morate da primenite niz pravila koja definišu kao se ta oznaka prikazuje u pretraživaču. Osnovni format selektora je: selector {osobina:vrednost} Selector je oznaka koja se menja. Osobina je ime osobine koja se podešava. Vrednost je vrednost osobine koja se zadaje. Evo jednostavnog primera: p {color: green} Ovim se zadaje da tekst koji se nalazi između oznaka <p></p> treba da bude zelene boje. To važi za svaku stranu koja koristi taj stil. Možete i da u okviru jednog stila zadate nekoliko osobina: p { color: green; text-align: right } Ovim se zadaje da tekst treba da bude zelene boje i da bude desno poravnat. Ako želite da isti stil dodelite različitim oznakama, onda možete da ih u okviru selektora sve navedete: p,div,H2 { color: green; text-align: right } Obratite pažnju na zareze koji odvajaju oznake, kao i na dve tačke koje odvajaju ime osobine od vrednosti, kao i na tačku i zarez koji odvajaju osobine. Kontekstualni selektori Drugi način za primenu stilova na određenu stranu su kontekstualni selektori. Ovde postoji malo više specijalizacije, pošto se selektor primenjuje samo ako je zadovoljen određeni uslov ili ako je prisutan niz oznaka. Možete, na primer, napraviti CSS selektor koji se primenjuje na oznake anchor, ali samo ako su one u okviru liste. To znači da treba da napravite selektor koji traži kombinaciju oznaka li a (stavka u listi i kotva) i da onda primeni stil. Ovaj stil se ne primenjuje na linkove koji nisu u listi. 141 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 li a { color: red; font-weight: bold; text-decoration: none; } Klase Za neku oznaku možete definisati više stilova. Najfleksibilniji metod da se to uradi je da se zada klasa. Klasa je skup pravila za stilove koji se može primeniti na bilo koji element. Ovo je različito u odnosu na promenjenu definiciju oznake iz HTML-a, koja se automatski primenjuje na zadati element. Ova oznaka izgleda ovako: .red {color: red} h2.green {color: green} Ako za neku oznaku želite da zadate klasu, mogli biste da napišete: <h2 class="green">Ovo je zeleni tekst</h2> Ovim se oznaci nalaže da treba da koristi klasu green. Pošto se stil primenjuje direktno na oznaku, to i utiče samo na tu oznaku. Ovo ne utiče na <h3 class="green"> Ovo nije zeleni tekst </h3> pošto je klasa.green direktno povezana sa oznakom <h2>. Klasu red možete da koristite sa bilo kojom oznakom. Ona će se na tu oznaku primeniti, pošto nije dodeljena nijednoj konkretnoj oznaci. To znači da će se sledeće primeniti na pravi način: <h2 class="red">Ovo je crveni tekst</h2> <h3 class="red">Ovo je crveni tekst</h3> Pseudo klase Ovakve klase se najviše koriste za prikazivanje linkova u različitim stanjima. To su stanja Link, Visited, Hover i Active. U pitanju su unapred podešene definicije za stilove linkova, koje razlikuju linkove, aktivne linkove (oni koji se mogu kliknuti), Hover (kada miša postavite iznad linka), kao i Visited (linkove na kojima ste već bili). Preko selektora možete definisati stilove za svako od ovih stanja. Ovde je bitan redosled definicija u CSS datoteci. Taj redosled mora biti Link, Visited, Hover, Active, ili ovo neće raditi kako očekujete. Evo primera: a:link{text-decoration:underline} a:visited{text-decoration:overline} a:active{text-decoration:none;cursor:wait} a:hover{text-decoration:none} Pseudo klase funkcionišu u verzijama IE 4+ i Netscape 4+, ali se efekat a:hover ne prikazuje kako treba u verziji Netscape 4. Stilovi i datoteke sa stilovima i gde ih treba čuvati Stilovi se mogu definisati u okviru dokumenta, kao pojedinačni stilovi koji su postavljeni direktno u kod, a mogu se definisati i u okviru lista sa stilovima. List sa stilovima može biti interni ili eksterni, u zavistnosti od toga gde je smešten u odnosu na dokument koji formatira. U narednim odeljcima ćemo razmotriti prednosti i nedostatke inlajn stilova, internih lista sa stilovima i spoljašnjih lista. Inlajn stilovi Inlajn stilovi se definišu direktno u okviru oznake na strani. CSS se piše direktno u oznaku, kao atribut. Evo kako to izgleda: <input type="text" style="width:150px; border:1px solid #000000; "> Iako inlajn stil ima prioritet u odnosu na ostale stilove, on utiče samo na oznaku kojoj je pridružen. Prethodni CSS ne utiče ni na jednu drugu oznaku input. Ovo je najmanje efikasan način za upotrebu CSS-a na web strani. Interni listovi stilova Interni listovi stilova se defmišu u okviru HTML strane u delu head. Koristi se block style. Na ovaj način se stilovima može da pristupi sa cele strane, ali ne utiču na druge datoteke. Tipični interni stil izgleda ovako: 142 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 <head> <style type="text/css"> body {background-color: red} p {text-align: right; color: white} </style> </head> <body> <p>Ovaj paragraf je bele boje.</p> <p>I ovaj paragraf je bele boje.</p> Kao što vidite, ako želite da prebacite sve pasuse u dokumentu na levo ravnanje i da im promenite boju, samo treba da promenite CSS u zaglavlju. Promene se automatski primenjuju na sve pasuse u dokumentu. Spoljašnje liste sa stilovima Spoljašnje liste stilova omogućavaju da u potpunosti iskoristite mogućnosti CSS-a. U ovakvim datotekama se nalaze svi stilovi i definicije. Datoteka ima ekstenziju.css. Ovo je nesporno najbolji način za skladištenje stilova. Na ovaj način su informacije o stilovima potpuno nezavisne od HTML koda. Promenom samo jedne datoteke možete da promenite izgled celog sajta. Sajt se automatski ažurira u zavisnosti od informacija u datoteci sa stilovima. Ako naučite sve opcije koje pruža CSS, onda možete da u potpuosti iskoristite ovu funkciju. Tipična spoljašnja datoteka sa stilovima je povezana sa stranom preko sledećeg koda: <link href="styles.css" rel="stylesheet" type="text/css"> Može i da se uveze preko sledećeg koda: <style type="text/css"> <!-@import url("styles.css"); - -> </style> Datoteka sa stilovima sadrži listu selektora i klasa. Evo kako to izgleda: P { color: green; text-align: right } .red {color: red} h2.green {color: green} Kaskadnost i nasleđivanje Jedna od prednosti koje nudi CSS je da stilovi rade zajedno i da ako je potrebno možete da preklopite jedan stil drugim. Kaskadnost i nasleđivanje funkcionišu zajedno. Kaskadnost predstavlja upotrebu više stilova i listova sa stilovima, kao i redosled po kojem se oni čitaju. Redosled u kojem se stilovi pojavljuju u kodu određuje koja se konkretna osobina prikazuje. Ako spoljašnja datoteka sa stilovima kaže da tekst u oznaci h2 treba da bude plave boje, ali postoji inlajn stil koji kaže da konkretna oznaka treba da bude žuta, onda žuta pobeđuje, pošto se nalazi bliže aktuelnom kodu. Inheritance znači da će u kaskadi stilova, bliži stil preklopiti samo one parametre koji su zajednički za oba stila. U prethodnom primeru, ako spoljašnji stil kaže da oznaka h2 treba da bude desno poravnata, inlajn stil neće to da preklopi, pošto u njemu nema parametra koji kontroliše ravnanje. To znači da će oznaka h2 biti žute boje, pošto je to boja definisana u inlajn stilu. Ali će naslediti desno ravnanje od spoljašnjeg stila. CSS u Dreamweaveru U Dreamweaveru postoji niz alata koji mogu da pomognu u dizajnu, kreiranju, održavanju i pregledu web sajtova koji koriste CSS. Počev od verzije Dreamweaver MX 2004, CSS je svuda u kodu koji piše sam program. Centralno mesto za manipulisanje i kontrolu stilova i listi stilova je pano CSS Styles (Window > CSS Styles). Preko ovog panoa možete da kreirate, menjate i ispitujete stilove, kao i da upravljate dokumentima sa stilovima koji su uvezeni preko spoljašnjih linkova ili su uvezeni. 143 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kreiranje novog stila Ako želite da preko panoa CSS styles kreirate novi stil, kliknite dugme New CSS Styles. Novi stil možete da napravite i ako desnim tasterom miša kliknete relevantnu CSS karticu u Tag Inspectoru i izaberete New Rule, ili ako izaberete opciju New iz padajuće liste Style u Property Inspectoru, ili ako izaberete Text > CSS Styles > New iz glavnog menija, ili ako desnim tasterom miša kliknete u prozoru Document i izaberete CSS > New. Koji god metod da izaberete, otvara se okvir za dijalog New CSS Style. U njemu možete da definišete koju vrstu stila želite da napravite i gde želite da ga postavite. Preko opcija iz Selector Type izaberite tip stila koji želite da napravite. Mogućnosti su: • Class (može da se primeni na bilo koju oznaku) – Ako izaberete ovu opciju, onda preko polja Selector možete da unesete ime klase. Ime klase treba da počne tačkom, ako ako zaboravite da unesete tačku, to će umesto Vas da uradi Dreamweaver. • Tag (menja se izgled određene oznake) – Ako izaberete ovu opciju, onda u polju Selector treba da definišete oznaku kojoj menjate definiciju, ili tako što ćete izabrati oznaku iz padajućeg menija ili tako što ćete ukucati oznaku u polje. • Advanced (kontekstualni selektori i sl.) – Ovu kategoriju ćete koristiti za sve što ne pripada prvim dvema. To su, na primer, pseudo klase, kontekstualni selektori i ID oznake. Ako želite da napravite pseudo klasu, izaberite tu opciju i preko padajućeg menija Selector izaberite pseudo klasu. Možete i da ručno unsete ime pseudo klase. Ako želite da napravite kontekstualni selektor, izaberite tu opciju i ukucajte ime kontekstualnog selektora u polje Selector. Na primer ako kontekstualni selektor treba da kombinuje oznake li i a, u polje treba da ukucate li a. Ako selektor treba da kombinuje korisničku klasu footer a:link, ukucajte .footer a:link (nemojte zaboraviti tačku ispred imena klase, ili selektor neće raditi). Ako želite da kreirate ID, izaberite tu opciju i u polje Selector unesite lD#name. Umesto name unesite svoje ime. U donjem delu okvira za dijalog možete da izaberete da upamtite stil kao internu listu stilova, koju možete da ubacite u zaglavlje dokumenta, ili kao spoljašnju datoteku, koja se pamti u CSS dokumentu i pridružuje tekućem HTML dokumentu. Ako želite da stil stavite u spoljašnji dokument, a nemate nijednu datoteku, izaberite opciju New Style Sheet Document i Dreamweaver će Vam pomoći da napravite jednu. Nakon što ste odlučili koju vrstu stila želite da napravite, kliknite OK da biste zatvorili okvir za dijalog New CSS Style. Ovim se automatski otvara okvir za dijalog Style Definition u kome možete da definišete format koji treba da bude u novom stilu. To se radi preko parametara stila. Definisanje parametara stila Interfejs preko kojeg zadajete formatiranje u CSS stilu je okvir za dijalog Style Definition. Ovaj okvir za 144 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 dijalog se otvara čim kreirate novi stil i svaki put kada želite da menjate postojeće stilove. Tu postoji osam različitih prozora koji se odnose na različite aspekte kontrole preko CSS-a. U toku rada ćete primetiti da Dreamweaver MX 2004 sada u prikazu Design prikazuje većinu CSS elemenata. Ipak je dobro da stranu pogledate u različitim pretraživačima, da biste bili sigurni da će se strana prikazati na pravi način. Tip Kategorija Type sadrži opcije za formatiranje teksta. Neke opcije su same po sebi jasne, neke i nisu. Većina podešavanja dobro radi u pretraživačima, kao i u prikazu Design. • • • • • • • • • Font – Izaberite grupu fontova koja se koristi u tom stilu. Ovu listu možete menjati ako kliknete strelicu naniže i izaberte opciju Edit Font List. Size – Definiše se veličina fonta. Možete da izaberete brojčanu vrednost ili da zadate apsolutnu veličinu. Apsolutna veličina se odnosi na srednju vrednost podrazumevane vrednosti u pretraživaču korisnika, ili na definisani stil. Odatle se posle meri vrednost. Style – Font može da se podesi na opcije normal, italic ili oblique. Razlika između opcija italic i oblique je u tome da je italic različita verzija fonta. Većina fontova ima verziju italic. Opcija oblique je originalna verzija fonta koju je računar napisao pod drugim uglom. U stvarnosti, pretraživač ih obično prikazuje na isti način, ali mogu da postoje razlike između fontova i veličina. Ako je ta razlika bitna, onda obe opcije treba da testirate u pretraživačima. Line Height - Ovim se određuje visina jednog reda teksta. Ako radite sa projektima koji se štampaju, onda je to slično sa razmakom između redova i uvlačenjem. Normalna visina reda se izračunava na bazi veličine tipa. Linije su otprilike 20% veće nego veličina tipa. Apsolutna visina linije se može dodeliti na bazi mernog sistema koji smo dali u sledećem uokvirenom delu. Weight – Ovim se određuje da li su slova deblja ili ne. Brojčane vrednosti (100-900) se odnose na apsolutna podešavanja, dok se opcije Bolder i Lighter zadaju relativno u odnosu na podrazumevanu težinu. Debljina slova se neće uvek isto prikazati u svim pretraživačima. Ako ovde birate neku opciju koja je različita u odnosu na Normal ili Bold, treba da proverite kako to izgleda u pretraživačima. Variant – Ova vrednost određuje da li će se mala slova zameniti velikim, ali umanjenim slovima. Case Određuje da li su slova velika ili mala. Sva slova su velika, sva su mala ili svaka reč počinje velikim slovom. Color – Određuje se boja fonta. Decoration – Ovim se podešavaju opcije redova u tekstu. Ako želite da uklonite podvlačenje kod hiperlinkova, onda treba da zadate opciju None. Pozadina Kategorija Background kontroliše pozadinu. Preko CSS-a možete da kontrolišete pozadinu svakog elementa 145 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 u bloku. To znači da svaki pasus, nivo, tabela ili neki drugi konačni element može da ima svoj stil za pozadinu. Ako želite da pozadinu primenite na celu stranu, onda morate da je zadate za oznaku body. • • • • • Background Color – Ovim se zadaje boja pozadine za neki element. Background Image – Ovim se zadaje slika koja ide u pozadini elementa. Ostala podešavanja iz ove kategorije definišu kako se prikazuje slika u pozadini. Repeat Ova vrednost definiše da li se slika u pozadini ponavlja u vidu ploča. Možete podesiti opciju repeat, non repeat, repeat-x (samo po horizontali) ili po vertikali (repeat-y). Attachment – Ova opcija određuje da li se slika u pozadini kreće zajedno sa stranom ili ostaje statička, tako da strana prelazi preko nje. Horizontal Position and Vertical Poisition – Ovim se definiše postavljanje slike u pozadini. Opcije Left, Right ili Center/Middle omogućavaju da sliku poravnate relativno u odnosu na osnovni element. Ako želite da slika bude na nekom rastojanju od gornjeg levog ugla osnovnog elementa, onda unesite neko numeričko rastojanje. Slika koju ovde zadate se u prozoru Dreamweavera može prikazati u gornjem levom uglu prozora Design. Da biste videli kako strana tačno izgleda, pogledajte je u pretraživaču. Sa nekim verzijama pretraživača, posebno sa Netscapeom 4, postoje izvesna ograničenja koja su vezana za slike u pozadini. Kao i uvek, proverite kompatibilnost u više pretraživača. Blok Blokovi su diskretni delovi HTML-a. Na primer, pasus je element bloka. Sa aspekta CSS-a, to se smatra blokom koda. Kada korisničku klasu primenite na pasus, to utiče samo na kod koji je između oznake početka i kraja pasusa. Na taj način se svaki pasus tretira kao zaseban element. Većina blokova ima oznaku za početak i kraj. Ovo se razlikuje od inlajn elemenata, koji se mogu postaviti bilo gde u okviru bloka. Slika koja nema oznaku za zatvaranje je dobar primer inlajn elementa. Kategorija Block u okviru za dijalog CSS Style Definition sadrži opcije za definisanje blokova koji postoje na strani. 146 / 299 Fakultet organizacionih nauka • • • • • • • Dreamweaver MX 2004 Word Spacing – Koristi se za definisanje rastojanja između reči. Letter Spacing – Koristi se za definisanje rastojanja između slova u reči. Vertical Aligment – Zadaje se vertikalni aspekt razmaka između reči. Ovo možete koristiti za subscript i superscript. Text Align – Definiše se horizonatlno ravnanje bloka sa tekstom. Može biti Left, Right, Center i Justify. Kad koristite opciju Justify, proverite kako to izgleda u pertraživaču, pošto je podrška za ovakvo ravnanje različita (i prilično loše izgleda čak i kada postoji). Text Indent – Definiše se uvlačenje prve linije bloka sa tekstom. (Ako želite da uvučete ceo blok, treba da upotrebite opciju Margin or Padding iz kategorije Box). Whitespace – Definiše se razmak unutar bloka. Opcija Normal spaja više razmaka u jedan. Opcija Pre ostavlja više razmaka. Opcija Nowrap ne dozvoljava prelaz u novi red, bez oznake break. Display – Kontrolišu se osnovni aspekti elementa block, uključući i da li se element prikazuje i kako se oznaka ponaša. Sa ovim podešavanjim treba biti oprezan pošto za opciju Display u pretraživačima postoji ograničena podrška. Box Svaki element koji može biti blok, kao što je pasus, postoji u svom pravougaonom okviru, koji se može podešavati preko CSS-a. Neka od ovih podešavanja se koriste zajedno sa kontrolom pozicije, čime se dobija CSS pozicija. Obratite pažnju na to da će se neka od ovih podešavanja prikazati samo u pretraživaču. Trebalo bi da stalno proveravate kako nešto izgleda u pretraživaču. Za kontrolu postavljanja elementa i za rastojanja na strani ćete koristiti kategoriju Box iz okvira za dijalog CSS Style Definition. 147 / 299 Fakultet organizacionih nauka • • • • • Dreamweaver MX 2004 Width and Height – Definišu se visina i širina elementa. Float – Koristi se odvajanje elementa od ostatka strane. Ostali elementi mogu da teku preko ovog elementa ili da se prekidaju oko njega, slično onom što možete da radite sa slikom. Ova podešavanja se u prikazu Design prikazuju samo za slučaj slika. Clear – Koristi se za definisanje oblasti u kojoj se ne dozovljava preklapanje elemenata. Nivo koji se pojavi u oblasti definisanoj sa Clear se postavlja ispod te oblasti. Ovim se sprečava da elementi bloka zauzimaju isti horizontalni prostor. Padding – Definiše rastojanje između sadržaja bloka i njegovog okvira (ili njegove margine, ako okvir nije zadat). Ovo je slično sa atributom cellpadding kod tabela. Možete da ga podesite nezavisno za sve četiri strane elementa. U tom slučaju treba da deselektujete polje Same for All. Margin – Margina definiše rastojanje između okvira elementa i ostalih elemenata na strani, koji se nalaze oko njega. Ovo je slično sa atributom cellspacing kod tabela, ili atributima vspace i hspace kod slika i medijskih elemenata. Ako deselektujete polje Same fo All, možete da nezavisno podešavate marginu za sve četiri strane. Border Ove opcije se koriste za podešavanje okvira oko zadatog elementa. U pitanju je okvir u odnosu na koji se zadaju atributi padding i spacing. Ovo je slično sa okvirom tabele, ali sa više mogućnosti. Za podešavanje okvira nekog elementa na strani treba da koristite kategoriju Border iz okvira za dijalog CSS StyleDefinition. 148 / 299 Fakultet organizacionih nauka • • • Dreamweaver MX 2004 Style – Možete izabrati neku od opcija Dotted, Dashed, Solid, Double, Groove, Ridge, Inset i Outset. Podrška u pretraživačima se razlikuje za pojedine opcije. Width – Podešava se širina okvira, kao broj piksela ili varijante Thick i Thin, koje nisu brojčane. Color – Bira se boja okvira. Treba da znate da se okvir može primeniti nezavisno na sve četiri strane elementa. Ova nezavisnost Vam omogućava da postignete efekte kao što su pravila u pasusima. List Kategorija List sadrži opcije za podešavanje listi bilo sa brojevima, bilo sa nekim oznakama. 149 / 299 Fakultet organizacionih nauka • • • Dreamweaver MX 2004 Type – Za liste sa oznakama (neuređene), izaberite tij oznake. Opcije su Disc, Circle i Square. Kod uređenih list birate vrstu slovne ili brojčane oznake. Opcije su Decimal Lowercase, Roman Numerals, Uppercase Roman Numerals Upper i Lowercase slova. Bullet Image – Kod listi sa oznakama, ovim se zadaje sliki koja se koristi kao oznaka. Preko dugmeta Browse možete d; povežete sliku. Position – Definiše se kako stavke u listi prelaze u nove redovi i koliko se uvlače. Opcija Outside će stavku iz list ravnati sa uvlačenjem prvog reda, a opcija Inside sa marginom Positioning Opcije iz ove kategorije definišu gde se elemeni strane prikazuju na toj strani. Ovo se zove CSS pozicioniranje, ili CSS-P. Premda se CSS pozicioniranje može primeniti na većinu elemenata koji čine blokove, ono se ipak generalno koristi sa oznakom div. 150 / 299 Fakultet organizacionih nauka • • • • • • • Dreamweaver MX 2004 Type – Ovim se definiše vrsta kontrole pozicije nekog elementa. Apsolutno pozicioniranje element postavlja relativno u odnosu na gornji levi ugao strane. Relativno pozicioniranje postavlja element relativno u odnosu na mesto u dokumentu, u kome se stil javlja u dokumentu. Statičko pozicioniranje postavlja element bloka na istu lokaciju na kojoj se pojavljuje i u dokumentu. Visibility – Kontroliše se inicijalna vidljivost elementa. Nasledivanje daje elementu istu vidljivost, koja je podešena i za osnovnu oznaku. Opcija Visible čini element vidljivim. Opcija Hidden ga čini nevidljivim. Ove opcije dinamički prikazuju i uklanjaju element preko JavaScripta. Width i Height – Isto kao istoimeni elementi u kategoriji Block. Definišu se dimenzije elementa u bloku. Z-Index Definiše se redosled prikazivanja elemenata, ako dođe do njihovog preklapanja. Elementi sa manjim brojem se prikazuju ispod elemenata sa većim brojem. Ovaj redosled je bitan samo kod elemenata koji su pozicionirani preko CSS-a. Overflow – Ovo se koristi kada je sadržaj nekog elementa veći od zadate visine i širine i definiše šta se dešava sa tim dodatnim materijalom. Ako je zadata opcija Visible, onda se sav sadržaj nivoa prikazuje istovremeno, bez obzira na podešenu veličinu. Opcija Hidden striktno poštuje zadatu veličinu nivoa i seče sav sadržaj koji prelazi tu veličinu. Opcija Scrollbars dodaje klizače, bez obzira da li su potrebni ili ne. Ako je sadržaj koji prikazujete bitan, pogledajte kako pretraživači to podržavaju. Opcija Auto pravi klizače samo ako je potrebno. Placement – Ove vrednosti definišu gde element pozicioniran preko CSS-a treba da se prikaže. Kod elemenata kojima je zadata apsolutna pozicija, sve vrednosti su relativne u odnosu na ugao prozora pretraživača. Clip – Koristi se za definisanje dela nivoa koji je vidljiv. Koristićete ovo ako želite da sakrijete deo nivoa, a da pri tome ne koristite opcije Overflow. Može se koristiti zajedno sa Java Scriptom, čime se dobijaju interesantni efekti. Extensions Opcije iz kategorije Extensions se koriste u specijalnim slučajevima. Njih pretraživači i ne podržavaju na najbolji način,tako da treba da ih pažljivo koristite. Ako ih koristite, obavezno proverite kako se to prikazuje u pretraživaču. 151 / 299 Fakultet organizacionih nauka • • • Dreamweaver MX 2004 Page Break – Koristi se za podešavanje preloma strane, kod štampanja. Ovim se prelom strane zadaje pre ili posle elementa. Visual Effect – Koristi se za promenu izgleda kursora kada se nađe iznad elementa za koji zadajete vrednost. Većina pretraživača ovu opciju ne podržava. Filter – Omogućava da na slike koje se nalaze na strani primenite specijalne efekte. U vreme dok ovo pišemo, samo IE4+ podržava ove opcije. Rad sa stilovima Stilovima rukujete preko panoa CSS, Tag Inspectora, Property Inspectora, Tag Selectora i preko mnogih drugih stavki. Primena (i uklanjanje) stilova Lepota promene definicije HTML oznaka je u tome što to ne mora da se primeni. Kada u datoteci sa stilovima menjate definiciju oznake, svako pojavljivanje te oznake se automatski prilagođava formatiranju koje ste zadali. Kontekstualni selektori i pseudo klase rade na isti način. Korisničke klase, sa druge strane, moraju da se primene na određenu oznaku. U Dreamweaveru postoje različiti načini da to uradite. • Preko Property Inspectora – Property Inspectori za tekst i tabele imaju padajući meni sa klasama koje su u tekućem dokumentu na raspolaganju. Samo izaberite objekat/tekst, na koji želite da primenite klasu, a onda iz padajućeg menija izaberite stil koji treba da se primeni. Prvo treba da izaberete objekat na koji želite da primenite klasu, a onda da izaberete i klasu. Ako želite da uklonite primenu klase, iz menija izaberite None. • Preko Tag Inspectora – U delu Attributes u Tag Inspectoru, u okviru kategorije CSS/Accessibility 152 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 unesite ime klase koja se primenjuje. • Preko Tag Selectora – Desnim tasteron miša kliknite neku oznaku u Tag Selectoru i iz pomoćno > menija izaberite opciju Set Class. Prikazaće se lista klasa koje stoje na raspolaganju. Izaberite neku od njih. Ako ne želite da primenite ni jednu od klasa, izaberite None. • Preko CSS Styles – U meniju CSS Style postoji lista klasa koje su trenutno na raspolaganju. Ovom meniju možete da pristupite preko menija Text, ili ako desnin tasterom miša kliknete neki element na strani i izaberite opciji iz pomoćnog menija. Ako ne želite da primenite ni jedni klasu, izaberite opciju None. Nakon što se na oznaku primenila neka klasa, u padajućem meniji Class iz Property Inspectora se sada prikazuje ta klasa, a u Tag Selectoru se prikazuje oznaka, iza koje sledi ime klase. 153 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rukovanje stilovima preko panoa CSS Styles (i sa drugih mesta) U panou CSS Styles se prikazuju stilovi koje ste definisali, prikazuju se njihove osobine, kao i mesto na kome se nalaze (interno ili eksterno). • Ako želite da promenite neki stil, selektujte ga u panou i kliknite dugme Edit Style sa panoa. Otvoriće se okvir za dijalog CSS Style Definition, u kome možete da menjate osobine. • Ako želite da promenite ime klase, selektujte tu klasu i iz menija Options u panou, izaberite opciju Rename. • Ako želite da obrišete stil, selektujte ga u panou i kliknite dugme Remove Style (kanta za otpatke). Za korisničke klase ovim nećete obrisati mesta na kojima je stil primenjen u dokumentu. Stilovima možete da rukujete i sa različitih drugih mesta u Dreamweaveru. Iz glavnog menija možete da izaberete Text > CSS Styles i da pozovete komande Edit ili Rename. Ovaj podmeni možete da dobijete i ako u prozoru Document kliknete desnim tasterom miša i iz pomoćnog menija izaberete opciju Text > CSS Styles. Drugi interfejs koji možete koristiti za rukovanje stilovima je iz opcija Text > CSS Styles > Edit iz glavnog menija. Ova komanda otvara prozor <style>, u kome se prikazuju svi stilovi koji su definisani interno u dokumentu i u pridruženim listama stilova. Ako želite da menjate stil, selektujte ga i kliknite dugme Edit, ili selektujte datoteku sa stilovima i kliknite Edit. Ovim se otvara drugi prozor u kome se prikazuju stilovi iz te datoteke. Oni koji su Dreamweaver počeli da koriste pre verzije MX će prepoznati ovaj način rada. Ovo je vrlo nezgrapno u odnosu na pano CSS Styles, tako da je bolje da ga ne koristite, osim ako ste već niste navikli na taj način rada. Pregled stilova Nakon što ste stilove ubacili u dokument, verovatno ćete želeti da pratite koje su klase primenjene, koje formatiranje iz CSS-a se koristi, i sl. Property Inspector, Tag Selector, a posebno novi, slavni Tag Inspector mogu u tome da Vam pomognu. Pregled stilova preko Property Inspectora Preko Text i Table Property Inspectora možete da pogledate sve primenjene klase. Ovim klasama se pristupa preko padajućeg menija Class. Gde je moguće, prikazuju se i formati. Ako ste izabrali tekst, Property Inspector prikazuje i neko osnovno formatiranje teksta, koje se primenjuje na tu oznaku. Ovde treba da budete pažljivi. Promena neke od ovih vrednosti neće promeniti stil. Umesto toga se pravi novi stil i primenjuje se na tekstualni element. Novi stil se dodaje zajedno sa starim koji su već bili primenjeni na taj element. Primenjene klase i Tag Selector Nakon što ste na oznaku primenili neku klasu, ona se u Tag Selectoru prikazuje zajedno sa tom oznakom Obratite pažnju. Ovo je sjajan način da pratite klase koje se koriste. Tag Selector Vam neće reći da li je promenjena definicija oznake, kao i da li radi neki kontekstualni selektor. Tag Inspector/CSS Rule Inspector Kartica Attributes u okviru Tag Inspectora, preko svoje kategorije CSS/Accessbility ukazuje da li je klasa primenjena na izabranu oznaku. Kartica Relevant CSS iz Tag Inspectora, koja se često zove i CSS Rule Inspector je sjajan i komapaktan interfejs za ispitivanje i uređivanje stilova koji su primenjeni na elemente na strani. • Ispitivanje primenjenih stilova - U gornjem delu prozora su prikazani stilovi koji su trenutno primenjeni na izabranu stavku u dokumentu. Taj stil može biti korisnički definisana klasa, promenjena definicija oznake ili neka kombinacija. Kod korisnički definisanih klasa se prikazuje i oznaka na koju je klasa primenjena. • Ispitivanje osobina stila - Ako na vrhu prozora izaberete pravilo, u donjem delu se prikazuje opsežna lista opcija vezanih za CSS formatiranje. Tu su sve vrednosti koje su u okviru pravila podešene. Listu možete prikazivati uredenu po kategorijama (iste kategorije koje postoje i u okviru za dijalog CSS Style Definition) ili po abecednom redu. • Uređivanje stilova - Najbolje je što bilo koje promene koje napravite u osobinama stila ovde, 154 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 automatski menjaju stil. Prema tome, ako ste u dokumentu izabrali jedan pasus i ako se on kontroliše preko promenjene definicije oznake p, možete da promenite pravilo za formatiranje oznake p i da se automatski promene svi pasusi. Ako se promenjena definicija oznake p nalazi u spoljašnjoj datoteci sa stilovima, onda ste upravo promenili format pasusa na celom sajtu, a niste morali da idete u pano CSS Styles ili da otvarate okvir za dijalog CSS Style Definition. Rad sa listama stilova Rukovanje stilovima obuhvata i rukovanje listama stilova, bilo internim, bilo eksternim. Ovo rukovanje se obavlja preko panoa CSS Styles. Pridruživanje lista sa stilovima Pored toga što pano CSS Styles koristite za kreiranje liste stilova, isti pano se koristi i za pridruživanje tih listi. Ako na sajt dodajete više strana u kojima se nalazi niz unapred napravljenih stilova, ove stilove lako možete da pridružite svojim novim stranama i da ih primenite kada Vam to zatreba. Ovi stilovi se neće ponašati u odnosu na stilove koje ste kreirali u Dreamweaveru. Promene HTML oznake će se automatski ažurirati, a u panou CSS Styles će se pojaviti lista korisničkih klasa. Ako želite da neku postojeću listu stilova pridružite preko panoa CSS Styles, jednostavno kliknite dugme Attach Style Sheet, koje se nalazi u donjem levom delu panoa. Možete i da iz padajućeg menija Class izaberete opciju Attach Style Sheet. Ova klasa je u okviru Property Inspectora. Možete i da izaberete Text > CSS Styles > Attach Style Sheet iz glavnog menija, ili da desnim tasterom miša kliknete u prozoru Document i iz pomoćnog menija izaberete opciju CSS Styles > Attach Style Sheet. Koji god metod da izaberete, zatražiće se da pronađete.css datoteku i da izaberete da li je linkujete ili uvozite. Razlika između ove dve opcije je vrlo mala. Opcija Link povezuje datoteku preko oznake href, a opcija Import koristi stil ili URL link za pronalaženje datoteke. U verziji Netscape 4 je podržana samo opcija sa linkovanjem. Ostale, novije verzije pretraživača podržavaju i jednu i drugu opciju. Kliknite OK da biste zarvšili povezivanje. Promenjene definicije HTML oznaka i selektori se automatski primenjuju, a listi korisničkih klasa možete da pristupite preko interfejsa. Ako ste uvezli listu stilova, ona se prikazuje u panou CSS Styles i to preko indikatora <style>. Razlog je što se direktiva import nalazi u okviru oznake style. Ako ste datoteku sa stilovima linkovali, ona se jednostavno prikazuje u panou CSS Styles. Rad sa spoljašnjim stilovima Ako ste svom dokumentu pridružili spoljašnju datoteku sa stilovima, onda sa ovim stilovima možete da radite na isti način kao što radite sa internim. To znači da možete da koristite pano CSS Styles i ostale elemente interfejsa koje smo pomenuli. Treba da vodite računa da svaki put kada promenite stil u pridruženoj listi stilova, Dreamweaver menja CSS dokument, a ne otvoreni HTML dokument. Ovo Vas možda malo zbunjuje, ali samo dok se ne naviknete. Mogli biste, na primer, da upamtite svoju HTMl datoteku, da promenite definiciju stila, a da onda probate da poništite tu promenu i da vidite da to ne možete da uradite zato što se promene nisu desile u tekućem dokumentu. Neke autore ovo frustrira, pa Dreamweaver ima i opciju da automatski otvara spoljašnju datoteku sa stilovima ispod tekućeg dokumenta. Ovo se radi kad god radite na nekom od stilova. Na taj način možete da promenite stil, ta promena se dešava u datoteci sa stilovima koja je otvorena; ta datoteka nije upamćena. Ako želite da poništite promene, to možete da uradite, a ako želite da poništite više uzastopnih akcija, onda možete da aktivirate CSS dokument i da izaberete opciju File > Revert. Nedostatak činjenice da Dreamweaver otvara CSS dokument i da ga ne pamti automatski je u tome da morate da upamtite da sami treba povremeno da pamtite ovu datoteku, iako ona nije u glavnom dokumentu na kome radite. (Radite na HTML dokumentu.) Na primer, svaki put kada želite da pogledate kako strana izgleda n pretraživaču, morate da se setite da aktivirate CSS dokument i da ga upamtite, jer se u suprotnom promene stilova koje ste poslednje uradili neće prikazati. Ako bi Dreamweaver pao prilikom rada, ili ako bi nestalo struje, tako da se računar neočekivano ugasi, a Vi niste upamtili HTML i CSS dokument, onda ste izgubili sve što ste u međuvremenu promenili. Dreamweaver podrazumevano ne otvara automatski CSS dokument. Ako želite da to promenite, izaberite Edit > Preferences/CS5 Styles i tu potvrdite opciju Open_CSS Files When Modified. 155 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Brisanje datoteke sa stilovima Ako želite da uklonite neku spoljašnju datoteku sa stilovima, u panou CSS Styles izaberite tu datoteku i kliknite dugme Delete CSS (kanta za otpatke). Ovim se neće obrisati sama datoteka. Ovim se samo uklanja iskaz link ili import, kojim je tekući dokument povezan sa tom datotekom. Interna lista stilova se ne može ukloniti. Umesto toga, treba da selektujete pojedinačne stilove u okviru liste i da ih izbrišete. Izvoz datoteka sa stilovima Izvoz se odnosi na prebacivanje stilova iz interne liste stilova u spoljašnju datoteku sa stilovima. Izvoz postaje bitan ako ste interno napravili stil i želite da ga kreirate eksterno, ili ako ste napravili interno, a kasnije promenili mišljenje. Ako želite da preko panoa CSS Styles izvezete internu listu stilova, izaberite opciju Export Style Sheet, koja se nalazi u meniju Options. Možete i da izaberete Text > CSS Styles > Export iz glavnog menija, ili da u prozoru Document kliknete desnim tasterom miša i izaberete opciju CSS Styles > Export. Koji god metod da izaberete, Dreamweaver Vas pita da li treba da kreira novi CSS dokument. Nakon što završite, kliknite OK da biste zatvorili okvir za dijalog. Ovim je napravljen novi stil. Na žalost, ako ste se ponadali da je sada izbrisana interna lista stilovi da je novi dokument automatski linkovan, niste u pravu. Tekući dokument se ne menja. Da biste operaciju kompletno završili, morate da izbrišete internu listu stilova i da preko dugmeta Attach Style Sheet linkujete ili uvezete CSS dokument koji ste upravo kreirali. Ako želite da u neki spoljašnji dokument iskopirate samo jedan ili dva stila, a ne celu internu listu stilova, izaberite te stilove u prikazu Code i iskopirajte ih i postavite u CSS dokument. Ovde Vam ponovo može pomoći pano CSS Styles. U panou izaberite neki od stilova i iz menija Options izaberite opciju Go to Code. (Možete i da desnim tasterom miša kliknete stil i da pri tome dobijete isti meni Options.) Možete i da dva puta brzo kliknete ime stila i da uradite istu stvar. Kreiranje datoteke sa stilovima od početka Možda ne želite da svoju spoljašnju datoteku pravite u toku rada. Možda unapred znate koje stilove ćete koristiti i samo želite da napravite datoteku sa stilovima, a da ne morate da otvarate neki dokument. I to možete da uradite. Izaberite File > New i u prozoru New Document, kao tip dokumenta izaberite Basic Pages / CSS. Datoteka će se otvoriti u prikazu Code, pošto nema šta da se prikaže u prikazu Design. To ne znači da ne možete da koristite alate za dizajn. Preko panoa CSS Styles ili putem nekog drugog metoda koji postoji u 156 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dreamweaveru, napravite onoliko stilova koliko želite. Proverite da li je opcija u okviru za dijalog New Document podešena na This Document Only, tako da kod ostaje u dokumentu koji ste otvorili. Nakon što završite, zapamtite datoteku i zatvorite je. Sada tu datoteku sa stilovima možete da linkujete i uvozite u nove HTML dokumente. Rad sa CSS-om CSS je sjajan ne samo zato što je efikasan, već i zato što ima mnogo mogućnosti. Da biste od CSS-a dobili najviše moguće, treba da ga koristite pametno. Definisanje fontova u HTML-u (i CSS-u) Veliki deo formatiranja teksta je mnogo bolji od kada se pojavio CSS. Bez CSS-a ste imali puno veličina teksta, od kojih je trebalo birati, niste mogli da uvlačite tekst ili podešavate margine, itd. Svet fontova je, međutim, ostao isti kakav je i bio. U okviru za dijalog CSS Style definition i dalje, kao i kod alata koji ne koriste CSS, a koji su se koristili u prethodnim verzijama Dreamweavera, postoji padajuća lista sa grupama fontova od kojih treba izabrati neku. HTML, fontovi i pretraživači Fontovi se ne ugrađuju na web strane i ne postoji mehanizam za linkovanje fonta na web stranu, na način na koji je to moguće uraditi sa grafikom ili nekim drugim medijumom. (Postoji puno tehničkih i pravnih razloga.) To znači da krajnji korisnik Vašu web stranu može da prikaže samo sa onim fontovima koje ima na svom računaru. Ako na strani koristite font koji nije instaliran, onda se tekst prikazuje sa podrazumevanim fontom koji je podešen u pretraživaču, a to je obično Times New Roman. Prva strategija kada naiđete na ovakav problem je da zadajete samo one fontove koje korisnici verovatno imaju. Naravno da je svaki računar podešen drugačije, ali većina Windows sistema ima fontove Times New Roman, Arial, Georgia, Verdana i Courier New. Druga strategija je da zadate više od jednog fonta, a da korisnik može da iz liste izabere onaj za koji zna da postoji na njegovom sistemu. Ovo se često zove fallback fonts, grupa fontova ili lista fontova. Pošto se pretraživač zaustavlja na prvom fontu koji prepozna, strategija je da se počne sa fontovima koje možda nema svako i da se ide ka fontovima koji se više koriste, pa da se na kraju da kategorija fontova koja se najviše koristi, kao što su serif i sans serif. Ovakav sistem značajno proširuje mogućnosti, čak i ako ste ograničeni samo na fontove koje posetioci verovatno imaju. Liste fontova u Dreamweaveru U Dreamweaveru postoje sledeće kombinacije fontova i izgleda: • Arial, Helvetica, sans serif • Times New Roman, Times, serif • Courier New, Courier, mono • Georgia, Times New Roman, Times, serif • Verdana, Arial, Helvetica, sans serif Ako Vas izgled nekog od ovih fontova ne zadovoljava, možete da ih menjate ili da preko okvira za dijalog Edit font List dodajete svoje fontove. Ovom prozoru možete da pristupite iz bilo koje padajuće liste fontova u Dreamweaveru, ako izaberete opciju Edit Font List sa dna menija. Možete i da izaberete opciju Text > Fonts > Edit Font List. Ako želite da napravite novu listu fontova, izaberite opciju Add Font in List Below iz dela sa listama fontova. Možete i da kliknete dugme + na vrhu ove oblasti. U donjem delu okvira za dijalog postoje dva dugmeta. Deo Chosen Font sa leve strane prikazuje fontove u listi. Polje za unos teksta koje se nalazi ispod ove oblasti omogućava da zadate font koji nije u sistemu. 157 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ideja je da selektujete ili unesete font sa desne strane, da pritisnete dugme << i da time iskopirate font u listu sa leve strane. Ako želite da izbacite font iz liste, kliknite dugme > > Dodajte onoliko fontova koliko želite, počev od onog koji je najpoželjniji, pa do onog koji je najopštiji. Kombinaciju fontova uvek treba da završite sa opštom familijom fontova. Ta familija se može pronaći na kraju liste Available Fonts. Nakon što završite kliknite OK da biste zatvorili okvir za dijalog Edit Font List. Definisanje dimenzija preko CSS-a Kada dođe trenutak da se zada veličina, CSS nudi zbunjujuće obilje mogućnosti. Zbunjujuće zato što neko treba da zna šta sve te opcije znače. Postoji puno različitih načina da se definiše veličina, ali se svi oni generalno mogu svrstati u dve grupe: apsolutni i relativni. Apsolutne veličine ne mogu da se menjaju, bez obzira na to gde se koriste. • • • • Points (pt) i picas (pc) dolaze iz štampanja. Point je 1/72-i deo inča. Pica je 12 picasa ili 1/6 inča. Milimetri (mm) i centimetri(cm) su standardne metričke jedinice. Milimetar je 1/100 centimetra. (2.54 cm je jednako 1-om inču). Inči (in) su standardne veličine u običnom svetu, mada se retko koriste u svetu Weba. Jedan inč ima.394 centimetra. Piksel (px) je standardan način za definisanje veličine na računaru. Većina elemenata na web strani je definisana u pikselima. Piksel je mali blok iz prostora monitora, odnosno fizički gradivni element ekrana. Piksel se definiše kao razlomak inča na ekranu. Teškoće koje nastaju kada se radi sa pikselima nastaju zato što PC računari koriste različite razlomke za određivanje veličine. CSS koristi termin "referentni piksel" od oko 90 piksela po inču, što ne koristi nijedan operativni sistem. Ipak se pikseli i dalje najviše koriste. Relativne veličine su veće ili manje od neke zadate veličine. • • • Procenti (percentage) (%) – Univerzalni koncept. Vrednost u procentima je X% veća od standardne vrednosti. Veličine koje se zadaju u procentima uvek kao osnovu koriste podrazumevanu vrednost osnovne oznake. Na primer, ako je podrazumevana veličina fonta 10 jedinica, onda vrednost od 120% daje font od 12 jedinica. Zadavanje vrednosti od 20% daje 2 jedinice. Drugi primer su tabele. Podesite tabelu na širinu od 80% i ona će se prikazati kao 80% prozora, pošto je osnovni element oznaka body. Ako ćeliju u tabeli podesite na 80%, ona će zauzeti 80% tabele, pošto je osnovni element za ćeliju oznaka table. Em – Ovo je tajanstvena, ali korisna vrednost. Ona se definiše kao jednaka veličini pointa za dati element fonta. Ako je font podešen na 12 piksela, onda je 1 em jednak 12 piksela. Na taj način možete da podesite korisničku klasu na vrednost 2 em od neke vrednosti, na primer od prethodnog fonta. Ako ovu klasu primenite na deo teksta, veličina će biti 2 ema ili 24 piksela. Ex – Ovo je relativna vrednost, pošto se zasniva na visini malog slova x u izabranom fontu. Iako ovo 158 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 može biti od velike pomoći kada se koristi izvestan font, treba da imate na umu da različiti fontovi imaju različite veličine slova x. Kod jednog fonta malo slovo x može biti polovina velikog slova, a kod drugog 60-70%. Na taj način se ex različito prikazuje kod različitih fontova. CSS i dostupnost U CSS-u ne postoji ništa što je po svojoj prirodi nedostupno. U pitanju je samo jezik za formatiranje. U suštini, CSS je tako koristan web surferi često koriste svoje liste stilova da bi povećali funkcionalnosti. Na primer, osoba sa smanjenim vidom može koristiti datoteku sa stilovima koja zadaje velika slova, dok osobe koje ne razlikuju boje mogu koristiti datoteku sa stilovima da promene boje na belu i crnu. Posao web dizajnera, vezano za ovakve osobe, je da ostane na njihovom putu. Dokumenti treba da budu tako organizovani da mogu da se čitaju bez pridružene datoteke sa stilovima. Bez obzira na to koju vrstu stilova koristite u svom dokumentu, dokument treba da bude čltljiv i funkcionalan i bez njih. (Ne mora da bude lep, samo fukcionalan). Pošto su datoteke sa stilovima koje koriste korisnici spoljašnje, nećete želeti da te stilove preklapate stilovima koje ste definisali interno. To znači da treba da koristite spoljašnje datoteke sa stilovima, a ne interne liste stilova ili inlajn stilove. Standard Section 508 ne ide dalje od ovoga, ali preporuke Web Accessibilitv Initiative, koje dolaze od W3C-a, dodaju neke stvari koje se generalno odnose na formatiranje: U vrednostima atributa markup jezika i osobina liste stilova treba koristiti relativne, a ne apsolutne jedinice. (prioritet 2) Drugim rečima, veličine fontova, kao i druge veličine, treba podesiti u procentima ili drugim relativnim vrednostima, a ne u apsolutnim jedinicama. Dreamweaver nema alatku koja može da Vam pomogne da napravite dostupan CSS. Ona Vam nije ni potrebna. Prilikom kreiranja stilova i lista stilova razmišljajte u skladu sa prihvaćenim načelima. Opciju Design Time Style Sheets iz Dreamweavera možete da upotrebite da pogledate kako strana prolazi u alternativnim okruženjima. Evo kako ćete to da uradite: 1. Napravite novi CSS dokument (izaberite File > New, a onda kao tip dokumenta izaberite Basic Pages /CSS). Dok je dokument otvoren, preko panoa CSS Styles promenite osnovne HTML oznake za tekst, tako da se prikazuju velika slova (na primer, veličina 200%, boja crna, font Georgia). Promenite definiciju oznake body tako da boja pozadine bude bela. Možete i da promenite bilo šta što je vidljivo, a što bi ciljni korisnik mogao da ima u svojoj datoteci sa stilovima. Zapamtite ovu datoteku pod opisnim imenom, kao što je access.css. 2. Sada otvorite neki od HTML dokumenata koji su formatirani sa sjajnim, elegantnim stilovima iz posljašnje datoteke. 3. U panou CSS Styles idite u meni Options i izaberite opciju Design Time Style Sheets. Kada se otvori okvir za dijalog pronađite deo Show Only at Design Time i kliknite dugme +. Pronađite svoju datoteku access.css.Sada pronađite deo Hide at Design Time i kliknite dugme +. Pronađite datoteku sa stilovima koja je trenutno pridružena strani. 4. Kada završite kliknite OK da biste zatvorili okvir za dijalog. Dreamweaver sada prikazuje dokument sa alternativnom listom stilova. 5. Stvari ćete vratiti na normalu ako odete nazad u pano CSS Styles, i njegov meni Options, izaberete ponovo Design Time Style Sheets i u oba dela izaberete stilove koji su prikazani. Nakon toga kliknite dugme. Specifičnosti koje se postižu kontekstualnim selektorima Kontekstualni CSS selektori, odnosno stilovi koji imaju efekat samo pod određenim uslovima, drastično povećavaju snagu CSS formatiranja. Kao što smo napomenuli ranije u ovom poglavlju, to se u Dreamweaveru lako radi. Da biste iskoristili prednosti koje ovo donosi, morate da uskladite svoj način razmišljanja sa kontekstualnim selektorima. Kreiranje više stilova za linkove na strani Zamislite sledeću situaciju: Sve strane imaju deo za navigaciju sa strane, a umesto slika su tekstualni linkovi sa CSS formatiranjem. Tu je i podnožje sa tekstualnim linkovima koji se ponavljaju. Glavni deo sa sadržajem na svakoj strani može ili ne mora da sadrži inlajn linkove na tekst. Ako definišete neke kontekstualne selektore, možete da dobijete različite stilove za linkove za svaku potrebu. Evo kako se to radi: 1. Za tekstualne linkove u glavnom delu strane ili promenite definiciju oznake a (i njene pseudo klase) ili ostavite da se to prikaže sa podrazumevanim podešavanjima pretraživača. Posetioci su navikli da vide podvučene linkove plave boje, tako da nema potrebe da menjate ono što je dobro. 2. Za deo sa strane napravite korisničku klasu. sidebar i primenite je na ćeliju tabele ili na element div koji sadrži elemente tog dela sa strane. U ovom stilu možete da podesite elemente koje želite. To su boja pozadine, formatiranje teksta ili bilo šta drugo. 159 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 3. Sada napravite kontekstualni selektor. U okviru New CSS Style u Dreamweaveru, izaberite opciju Advanced i u polju input unesite.sidebar a:link. To je ime Vašeg stila. Ovo će uticati samo na linkove unutar elemenata na koje je primenjena klasa sidebar, odnosno samo na linkove koji se nalaze u tom delu. Ovi linkovi će podražavati tradicionalni deo za navigaciju, tako da treba da obrišete podvlačenje, napravite masna slova, promenite fontove i uradite šta god želite. 4. Ako želite da svojim linkovima date efekat rollover, napravite još jedan kontekstualni selektor. Nazovite ga.sidebar a:hover i dodelite boju, kao i druge osobine koje želite. 5. Ponovite ovu proceduru i za linkove u podnožju. Napravite korisničku klasu.footer i primenite je na ćeliju tabele ili na element div, koji sadrže elemente za navigaciju na dnu strane. Nakon toga, definišite kontekstualni selektor.footer a, koji će kontrolisati izgled ovih linkova. Brzo podešavanje izgleda ćelija u tabeli Evo još jednog scenarija: Imate tabele koje se koriste za raspored elemenata na strani, ali imate i nekoliko desetina velikih tabela sa podacima, koje su razbacane po sajtu, a koje želite da se prikazuju na određeni način. Zelite da kontrolu vršite na najefikasniji način. Možete da koristite koriničke klase za formatiranje tabela, ali je nedostatak što klase moraju da se primene. Formatiranje koje imate na umu mora da se primeni na pojedinačne ćelije tabele, a ne samo na tabele. Da li morate da napravite korisničku klasu za ćelije sa podacima i da onda idete po celom sajtu i primenjujete korisničke klase na desetine ćelija tabela u svakom dokumentu? Ne. Vi ćete primeniti korisničku klasu na tabele sa podacima, a preko kontekstualnog selektora primeniti i formatiranje ćelija. Evo kako se to radi: 1. 2. Napravite korisničku klasu po imenu.datatable. Unesite format koji želite da imate u svojim tabelama sa podacima, možda neku lepu boju pozadine ili format teksta za sadržaj. Primenite tu klasu na sve tabele. Sada napravite kontekstualni selektor. U okviru za dijalog New CSS Style izaberite opciju Advanced i u polju input unesite ime stila.datatable td. Zadajte centralno ravnanje, dodelite okvir i naravite dodatne formate koje želite da primenite na ćelije. Nakon što završite, ćelija u tabeli treba da bude odmah formatirana, jer je korisnička klasa već primenjena. Kada počnete da razmišljate na kontekstualan način, poboljšaćete svoju efikasnost u radu sa CSS-om i bićete u stanju da radite na svojim projektima, a da kasnije ništa ne popravljate. Kako da odjednom radite sa više različitih spoljašnjih datoteka sa stilovima Zahvaljujući nasleđivanju i kaskadnosti, možete da imate i spoljašnju datoteku stilova i internu listu stilova, ili možete da imate više spoljašnjih datoteka stilova, koje u istom trenutku kontrolišu isti dokument. Upamtite da kaskadnost u CSS-u znači da se stilovi mogu sabirati i da kod koji je najbliže aktuelnom elementu ima veći prioritet u odnosu na pravila sa višeg nivoa. Ako shvatite prednosti i nedostatke kombinovanja više stilova, moći ćete da u punoj meri iskoristite prednosti koje donosi CSS. Zajednička upotreba internih lista stilova i spoljašnjih datoteka sa stilovima Zašto biste zajedno koristili interni i spoljašnji stil? Možda imate niz stilova koje primenjujete na celom sajtu i koji definišu opšti izgled sajta. Ali, kad dođete na konkretnu stranu koja se razlikuje od ostalih i koja zahteva različito formatiranje, morate se prilagoditi. I dalje želite da zadržite opšti izgled celog sajta, ali su potrebna dodatna podešavanja koja se odnose samo na tu stranu. Ako za kreiranje stilova koristite pano CSS Styles, lako je zajedno koristiti interne i spoljašnje sitlove. Svaki put kada pravite novi stil, preko opcije Define In možete da podesite gde taj stil treba da ode. Upamtite da, prema pravilima nasleđivanja i kaskadnosti, interni stil uvek pobeđuje spoljašnji, ako dođe do njihovog suprostavljanja. Treba što više stilova da definišete kao spoljašnje, a onda selektivno preklapajte samo one stilove koji se razlikuju za konkretnu stranu. Ako u spoljašnjoj datoteci sa stilovima definišete da oznaka P bude sa fontom Arial, da tekst bude levo poravnat i da veličina slova bude 12, razmak između redova 15 i boja crna, a na trenutnoj strani Vam treba plavi tekst, onda interno promenite oznaku p, ali ubacite samo konkretnu osobinu koju menjate, a to je u ovom slučaju boja. Na taj način, ako se font u preduzeću promeni na Georgia, ovu stranu ne morate kasnije da popravljate. Upotreba više spoljašnjih datoteka sa stilovima Ovo je trenutak kada život postaje stvarno interesantan. Ao ste dobar planer, možete da napravite modularne efekte u dizajnu i da tako izvučete maksimum od CSS-a, čak i kod velikih sajtova. Zamislite sledeću situciju: Imate datoteku sa stilovima koju ćete koristiti na sajtu, sa zadatim marginama, osnovnim fontovima i veličinama i ništa više. Ovo se primenjuje na sve strane na sajtu. Nakon toga, svako odeljenje ima svoju datoteku sa stilovima u kojoj definiše boje koje se primenjuju na pozadinu strana i tekst. U svim odeljenjima imate neke zajedničke tipove strana, kao što su ulazne forme, koje imaju svoje zahteve u 160 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 pogledu stila. Redosled Jednom HTML dokumentu možete da pridružite ili da sa njim povežete onoliko datoteka sa stilovima koliko želite. Prema pravilima kaskadnosti, datoteke sa dna liste imaju prioritet (pošto su najbliže strani i njenom sadržaju). Pošto je stil na vrhu najdalje od strane, njega će ostali stilovi preklopiti. Sto je u hijerarhiji datoteka sa stilovima niže, to je njen prioritet viši. Kako ovo radi u Dreamweaveru Ako ne pazite, prilikom pridruživanja više spoljašnjih datoteka sa stilovima možete da upadnete u ozbiljne probleme. Prvo, treba da imate na umu da Dreamweaver podrazumevano nove datoteke stilova dodaje na dno liste. Ovo važi bez obzira na to da li se stil linkuje ili uvozi. Ako ste u mogućnosti, pridružite stilove po pravilnom redosledu, počev od najnižeg prema najvišem prioritetu. Njihov redosled u panou CSS Styles je isti kao u dokumentu. Sta možete da uradite ako redosled datoteka sa stilovima nije pravi? Redosled ne možete da promenite preko samog panoa CSS Styles. Možete da pređete u prikaz Code, da pronađete kod za oba stila i da ih premestite na drugu lokaciju. Drugo, moguće je (čak i ispravno) uvesti jednu datoteku sa stilovima u drugu. Ako ste prilikom pridruživanja datoteke sa stilovima u panou CSS Styles selektovali drugu datoteku sa stilovima, Dreamweaver će novu datoteku ubaciti u onu koju ste selektovali, a neće je pridružiti tekućem dokumentu. Ako se to desi, nova datoteka sa stilovima se u listi stilova prikazuje uvučeno. U tom slučaju možete da otvorite drugi dokument sa stilovima u Dreamweaveru, da pronađete kod koji je uvezen i da ga obrišete. 161 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 12. CSS pozicioniranje, nivoi Dreamweavera i raspored na strani Šta je nivo (layer)? Ako pogledate HTML referencu, videćete da u Netscapeu 4 postoji stara oznaka layer, ali to nije ono što se u Dreamweaveru podrazumeva pod nivoima, ni ono što većina web programera danas koristi. Nivo je intuitivan termin, koji se koristi za elemente na strani. Ovi elementi se preko CSS osobina pozicioniraju i postavljaju u nivoe iznad drugih elemenata. U ovom poglavlju ćemo termin koristiti na taj način. Osnovno o nivoima Ako želite da sa nivoima u Dreamweaveru radite na pravi način, morate prvo da shvatite odakle oni dolaze i šta rade. Ako se prvo pozabavite osnovama, poštedećete sebe neprijatnih situacija. CSS-P i nivoi u pretraživaču Originalna CSS 1 specifikacija pokriva različite opcije formatiranja teksta i elemenata na strani u HTML-u. Ipak W3C nije tu završio. CSS-P je uveo mogućnost da se upravlja pozicijom elemenata na strani (P je od pozicija). Pored pozicioniranja, CSS-P omogućava da se elementima na strani dodeli i širina, vidljivost, pa čak i dubina (z-indeks), tako da elementi na strane mogu da se postavljaju u nivoe. (Odatle termin nivo). Kako radi pozicioniranje u CSS-u Putem kontrole pozicije, bilo koji element na strani se može prervoriti u samostalan entitet i, makar teoretski, web dizajneri ne moraju da koriste tabele i za jednostavne stvari kao što je postavljanje elementa na strani, tamo gde on treba da bude. Tipovi pozicioniranja Postoje tri vrste pozicioniranja. To su statičko, relativno i avsolutno. Evo kako rade ovi tipovi: • Statičko pozicioniranje dovodi do toga da element postane deo normalnog toka strane. To je mesto na kome se element nalazi na strani, ako nije zadata pozicija. Element se na strani prikazuje kao deo normalnog toka elemenata. Kod za statičko pozicioniranje nekog elementa bi mogao biti: <h1 style = "position:static; " >Howdy!</h1> • Apsolutno pozicioniranje postavlja element na apsolutnom rastojanju od ivica prozora pretraživača, ili osnovnog elementa. Rastojanje se može zadati u pikselima, procentima ili nekim drugim jedinicama mere koje CSS podržava. Kod za apsolutno pozicioniranje nekog elementa bi mogao da izgleda ovako: <h1 style="position:absolute; left:0px; top:0px; "> wHowdy!</h1> Pod pretpostavkom da ovaj element nije u okviru tabele, elementa div ili nekog drugog elementa na strani, on je direktno potčinjen oznaci body, pa će se postaviti u gornji levi ugao, bez obzira na druge elemente na strani. • Relativno pozicioniranje postavlja element na strani relativno u odnosu na neki drugi sadržaj na strani. Ovo je slično sa statičkim pozicioniranjem, u tome da je podrazumevana pozicija elementa iza ili ispod elemenata koji u HTML kodu prethode tom elementu, kao i pre ili iznad elementa koji u HTML kodu slede iza. Element sa relativnom poziciojm može biti pomeren u odnosu na podrazumevanu poziciju i to preko arributa left, right, top i bottom. Kod za relativno pozicioniranje nekog elementa na strani bi mogao da izgleda ovako: <h1 style="position:relative; left:50px; top:10px; "> Howdy!</h1>. Pod pretpostavkom da se ovaj element pojavljuje ispod tabele, kod koji je ovde zadat će pomeriti celu ivicu elementa za 50 piksela udesno od mesta gde bi u suprotnom bio ispod tabele, kao i za 10 piksela naniže u odnosu na mesto gde bi bio. • Fiksno pozicioniranje je slično sa apsolutnim, a razlika je u tome da kada se strana pomera preko klizača, fiksni elementi se ne pomeraju. Kod koji fiksno pozicionira neki element bi mogao biti: <h1 style="position:fixed; left:0px; top:0px; ">Howdy!</h1>. Pod pretpostavkom da ovaj element nije ugnježđen u neki drugi element (izuzev u okviru oznake body), on će se postaviti u gornjem levom uglu prozora pretraživača i ostaće tamo, čak i kada se korisnik preko klizača kreće naniže. (Na žalost, fiksno pozicioniranje nije dobro podržano, kao ostali tipovi, čak ni u novijim pretraživačima.) Pozicioniranje i ugnježđavanje 162 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pozicioniranje postaje složenije kada se elementi gnjezde unutar drugih elemenata. U većini pretraživača, kao i u CSS-2 specifikaciji, se način pozicioniranja interpretira u zavisnosti od toga da li osnovni element za taj element takode ima zadaru poziciju i da li je zadato kao nestatička. Ako osnovni element nema zadat arribut position ili ima poziciju podešenu na static, onda će element dete koji ima apsolutnu poziciju biti postavljen relativno u odnosu na najbližeg predaka, sa apsolutnim ili relativnim pozicioniranjem. Ako nema takvog pretka (uključujući i telo dokumenta), onda će element dete biti postavljen relativno u odnosu na prozor. Primena pozicioniranja na elemente strane Element strane se može pozicionirati preko inlajn stila. Evo kako to izgleda: <h1 style="position:absolute; left:150px; top:80px">Howdy!</h1> Može se pozicionirati i preko korisničke klase koja uključuje poziciju. .logotest { position: absolute; left:150px; top:80px; } <h1 class="logotest">Howdy!</h1> Pošto definicija konkretnog stila koja sadrži i poziciju može u dokumentu da se koristi samo jednom, informacije iz CSS stila mogu da se pridruže elementu strane preko jedinstvenog atributa ID: #logotest { position: absolute; left: 150px; top: 80px; }; <h1 id="logotest">Howdy!</h1> Ako je definicija stila postavljna u spoljašnji dokument sa stilovima i pridružena većem broju HTML strana, svaka strana može da ima jedan element sa ID oznakom logotest, čija se pozicija kontroliše preko stila. Kao i kod bilo kojeg CSS-a, inlajn metod je najmanje efikasan, pošto se informacije nikad ne mogu primeniti i na druge elemente na strani, bilo u istom bilo u nekom drugom elementu. Pozicioniranje elemenata na strani preko oznaka div i span Teoretski se bilo koji element na strani može pozicionirati preko CSS-P-a. Elementi koji mogu biti blokovi (tabele, zaglavlja i pasusi) se najčešće tako pozicioniraju, premda se mogu pozicionirati i inlajn elementi. Sta ako želite da zadate poziciju za grupu elemenata, kao što su zaglavlje i naredni pasus? Mogli biste da celu grupu ubacite u jednu oznaku, koja nema svoje karakteristike, koje bi se preklapale sa nekim drugim elementom, a da onda na tu oznaku primenite korisničku klasu. Dve oznake koje se koriste u ovu svrhu su div (blok) i span (inlajn). Kod za pozicioniranje grupe elemenata bi mogao da izgleda ovako: <div style="position:absolute; left:150px; top:80px; width:200px"> <h1>Howdy!</h1> <p>Welcome to my brand-new website!</p> </div> ili <span style="position:absolute; left:150px; top:80px; width:200px"> <h1>Howdy!</h1> <p>Welcome to my brand-new website!</p> </span> Elementi div i span mogu da se gnjezde jedan u drugom. Svaki HTML element koji je u okviru oznake div ili span može takođe da ima zadatu poziciju: <div style="position:absolute; left:150px; top:80px;"> <h1 style="position:absolute; left:50px; top:50px;"> Howdy!</h1> </div> Kako u Dreamweaveru rade nivoi Nivoi u Dreamweaveru daju interfejs za rad sa CSS-P-om u prikazu Design. Kao i bilo koji drugi alat, i oni se mogu koristiti ili zloupotrebiti. Upamtite da, prilikom rada sa nivoima, uvek treba da pratite šta se dešava u kodu. 163 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Crtanje i ubacivanje nivoa Najjednostavniji način za kreiranje nivoa je da preko objekta Draw Layer ubacite objekte nivoa. Ovaj objekat se nalazi na paleti Layout Insert. Ovaj alat se koristi tako što se izabere sa palete Insert, kursor se postavi u prozor Document, a onda se prevuče na crtež. Nakon što završite, Dreamweaver prikazuje nivo koji se uklapa u Vaše dimenzije. Možete i da izaberete Insert > Layout Objects > Layer. Ovim se u dokument ubacuje nivo sa podrazumevanim dimenzijama i pozicijom. Ako posle kreiranja nivoa proverite u prikazu Code, videćete da je Dreamweaver napravio praznu oznaku div sa inlajn stilom i zadatom pozicijom, dimenzijama i indeksom dubine. <div id="l_ayer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 113px; top: 117px; "></div> Elementi čija je pozicija zadata apsolutno ne zahtevaju sve ove atribute, ali se oni zadaju po podrazumevanoj vrednosti. Osobine nivoa Kada izaberete nivo, pojaviće se Layer Property Inspector. Ovo možete koristiti za promenu ili brisanje osobina, ili za promenu oznake koja se koristi za nivo od div na span. Ako želite da promenite podrazumevane vrednosti kod ubacivanja nivoa, možete i da izaberete Edit > Preferences/Layers. Možete i da promenite veličinu i poziciju nivoa interaktivno, pomeranjem i promenom veličine u prozoru Document. 164 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Nevidljivi elementi: Markeri nivoa Pošto nivoi koji se prave preko objekta Layer koriste apsolutno pozicioniranje, njihovo postavljanje u prikazu Design nije obavezno blizu mesta gde je ubačen kod. Kod za nivo se može naći odmah iza otvorene oznake body, a da se sam nivo nađe na dnu strane. Da biste mogli da pratite kod, Dreamweaver ima opciju da vidite ikonu koja pokazuje gde se on nalazi. Ovo ćete uključiti ako odete u Preferences (Edit > Preferences) i u kategoriji Invisible Elements proverite da li je izabrana opcija Anchor Point for Layers. Nakon toga, u meniju View Options izaberite Visual Aids i selektujte Invisible Elements. Na slici je prikazano kako ova pomoć izgleda. Rukovanje nivoima preko panoa Layers Pano Layers može da Vam pomogne da rukujete svojim nivoima. On ukratko pokazuje koliko nivoa u dokumentu postoji, koja su njihova imena, koji je redosled (koji je ispred koji iza), kao i koji su vidljivi. (Nevidljivi nivoi nisu korisni kod kreiranja rasporeda strane, ali su glavni kod DHTML skriptova.) Pano Layers 165 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 možete da upotrebite i za izbor nivoa koje biste inače teško selektovali, pošto su nevidljivi ili zato što su prekriveni nekim drugim nivoom. Panou Layers ćete pristupiti ako izaberete Window > Layers. Nakon što se otvori pano Layers, on se prikazuje kao deo grupe Advanced Layout, vezan zajedno sa drugim panoima. Nivoi koje ste postavili na tekuću stranu se u panou prikazuju kao lista imena, koja ukazuje na njihov redosled (ili z-indeks). Taj redosled se može menjati prevlačenjem nivoa po ovoj listi. Vidljivost nivoa možete da menjate preko leve kolone, sa ikonom oka. Preklapanje nivoa možete da uključite ili isključite putem opcije Prevent Overlaps. Kao što smo objasnili, kod nivoa koji se preklapaju postoji veći rizik da se ne ponašaju kako treba, nego kod nivoa koji se ne preklapaju. Preklapanje možete da isključite i ako mislite da ćete kasnije nivoe prebaciti u tabelu, da biste dobili kompatibilniji raspored. (Ovo možete da uradite preko komande Modify > Convert > Layers to Table, iako se time dobija glomazna struktura tabele.) Dizajn nivoa u prikazu Design Ako ste vizuelna osoba, onda će Vam se dopasti intuitivnost kreiranja dizajna strane preko nivoa, u prikazu Design. Selektovanje nivoa Nivo ima tri moguća stanja za selektovanje. Svako od njih je u prikazu Design predstavljeno različitim grafičkim stanjem : • Kada je izabran nivo, on u svom gornjem levom uglu prikazuje mali beli pravougaonik, kao i osam crnih kvadrata po obimu. Beli pravougaonik je ručica za selektovanje. Crni kvadrati su ručice za promenu veličine. • Kada se kursor postavi unutar nivoa, nivo izgleda kao pravougaonik. U njemu postoji pravougaonik za selektovanje, ali ne postoje ručice za promenu veličine. Nivo ovako izgleda odmah posle ubacivanja, pošto Dreamweaver pretpostavlja da ćete baš ovako početi ubacivanje nekog sadržaja u novi nivo. • Kada nivo nije selektovan, on izgleda kao pravougaonik i nema ni ručica za selektovanje ni ručica za promenu veličine. Ako želite da selektujete neki nivo, treba da uradite jedno od sledećeg: • Kliknite neku od stranica nivoa. • Kliknite unutar nivoa, tako da se u gornjem levom uglu prikaže ručica za selektovanje, a onda kliknite tu ručicu. • Kliknite unutar nivoa i preko tag selectora, koji se nalazi na dnu prozora Document, selektujte oznake div ili span, koje čine nivo. • Ako su prikazani nevidljivi elementi, kliknite marker za taj nivo. • Ako se nalazite u panou Layers, kliknite ime tog nivoa. 166 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da iz prozora Document izaberte više nivoa, kliknite jednu od stranica ili ručicu za izbor u prvom nivou koji želite da izaberete, a onda istovremenim pritiskom na taster Shift i klikom miša izaberite i druge nivoe. Ako su prikazani nevidljivi elementi, možete da zajedničkim pritiskom tastera Shift i klikom miša na marker nivoa izaberete svaki od njih. Ako želite da preko panoa Layers izaberete više nivoa, pritisnite Shift i kliknite imena nivoa koje želite da izaberete. (Ne morate pokazivati redom.) Bez obzira na to koji metod za izbor koristite, poslednji nivo koji ste izabrali će prikazati crne ručice za promenu veličine. Ostali izabrani nivoi će svoje ručice za promenu veličine prikazati u beloj boji. Imena nivoa Svaki nivo u dokumentu mora da ima jedinstvenu ID oznaku. Dreamweaver ID daje oznake kao Layerl, Layer2, Layer3, itd. ID oznake nivoa se koriste za refernciranje u CSS-u, kao i u skriptovima koji koriste ove nivoe. Imena nivoa mogu da sadrže samo jednu reč, a ne sme biti specijalnih karaktera. Iako ne morate da menjate podrazumevana imena nivoa, nije loše da nivoima date imena koja znače više od običnog Layerl. Na taj način kasnije lako možete da identifikujete te nivoe. Još bolje je da imena dajete prema šemi imena, u kojoj ime svakog nivoa govori nešto o njegovoj poziciji ili funkciji. Na primer, nivoi bi mogli da se zovu LayerNav, ako je u pitanju nivo sa delom za navigaciju, ili LayerFooter, za nivo sa podnožjem. Ime nivoa možete promeniti preko panoa Layers, ili preko Property Inspectora. Dva puta brzo kliknite nivo u panou Layers i unesite novo ime. Ime možete da promenite i u polju Layer ID u Property Inspectoru. Ubacivanje sadržaja u nivoe Ubacivanje sadržaja u nivoe je jednostavno. Samo kliknite unutar nivoa i ubacite sadržaj na uobičajen način. Sadržaj može da se ubacuje preko palete Insert ili menija Insert iz Dreamweavera, ili prevlačenjem preko panoa Assets, ili sa nekog drugog mesta, ili postavljanjem sa Clipboarda. Promena veličine nivoa prevlačenjem Ako želite da u prozoru Document promenite veličinu nivoa, prvo ga selektujte tako da se prikažu ručice za promenu veličine. Nakon toga kliknite i prevucite neku od tih ručica. Preko ručica u uglu možete da istovremeno menjate i dužinu i visinu, a preko ostalih možete da menjate veličinu samo u jednom pravcu. Premeštanje nivoa Ako iz prozora Document želite da promenite poziciju nivoa, samo uhvatite taj nivo, preko njegove ručice za izbor ili na ivici, a onda kliknite i prevucite. Kursor će promeniti oblik u strelicu usmerenu na sve četiri strane (ako ste uhvatili ručicu za izbor) ili će dobiti oblik ruke, ako ste uhvatili okvir. Ako želite da nivo pomerate po jedan piksel, izabrite taj nivo i preko strelica sa tastature ga pomerajte. Ako želtie da pomeranje bude za po 10 piskela, dok pritiskate strelice, držite pritisnut taster Shift. Ravnanje nivoa U Dreamweaveru postoji mogućnost ravnanja nivoa. Ako želite da poravnate nekoliko nivoa, sa okvirom ili nekim drugim nivoom, treba da uradite sledeće: 1. Odredite koji se nivo u odnosu na koji ravna (koji nivo se ne pomera, dok se drugi pomeraju da bi se poravnali sa njim). 2. Svi nivoi će biti poravnati sa poslednjim nivoom koji ste izabrali. Prema tome, preko neke od tehnika za izbor koje smo pomenuli, selektujte nivoe koje želite da ravnate, a nivo koji se ne pomera izaberite poslednji. (Njegove ručice za izbor će biti prikazane crnom bojom, što ukazuje da se on ne pomera.) 3. Idite u meni Modify > Align i iz podmenija izaberite neku od opcija za ravnanje (Left, Right, Top, Bottom). Na slici je prikazano nekoliko nivoa koji su poravnati u odnosu na nepokretan nivo. 167 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Uparivanje veličine nivoa Prema proceduri za ravnanje nivoa, možete i da ih promenite, tako da njihove dimenzije odgovaraju jedna drugoj. Ovo ćete uraditi ako izaberete nivo i izaberete Modify Align, a onda izaberete opciju Make Same Height ili Make Same Width. Kao i kod ravnanja, poslednji nivo određuje konačnu visinu ili širinu izabranih nivoa. Ugnježđavanje nivoa Ugnježđeni nivo je nivo koji se nalazi unutar drugog nivoa. Evo kako izgleda kod: <div id="Layer1" style="position:absolute; width:200px; Height:115px; z-index:1; left: 200px; top: 200px;"> <div id="Layer2" style="position:absolute; width:100px; height:100px; z-index:1; left: 50px; top: 50px;"> [Layer2 content goes here] </div> [Layer1 content goes here] </div> Ugnježđavanje se često koristi za grupisanje nivoa. Ugnježđeni nivo se pomera zajedno sa osnovnim nivoom i može se podesiti da od roditelja nasledi i vidljivost.Ugnježđeni nivo možete da napravite na jedan od sledećih načina: • Postavite kursor unutar postojećeg nivoa i izaberite Insert > Layer. • Prevucite dugme Draw Layer sa palete Insert i postavite ga u postojeći nivo. • Kliknite dugme Draw Layer sa palete Inset, držite pritisnut taster Alt/Opt i nacrtajte nivo unutar postojećeg. • Sa panoa Layers izaberite nivo, a onda držite pritisnut taster Ctrl/Cmd i prevucite ime nivoa u nivo koji želite da mu bude roditeljski. • Ako su prikazani nevidljivi elementi, prevucite marker nivoa deteta unutar nivoa roditelja. Nakon što je jedan nivo ubačen u drugi, nivo dete (ugnježđeni) može da skoči na novu lokaciju u prozoru Document. Razlog je što se pozicija nivoa sada računa relativno u odnosu na poziciju nivoa roditelja. To dalje znači da, ako sada pomerate nivo roditelj, pomeraju se i njegova deca, ali ako pomerate nivo dete, roditelj se ne pomera. Na slici je pokazano kako ugnježđeni nivoi izgledaju u različitim interfejsima 168 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dreamweavera. Ako su prikazani nevidljivi elementi, u prozoru Document se prikazuje zlatna kotva, koja ukazuje na ugnježđenost nivoa. U panou Layers ugnježđeni nivo je prikazan tako što je njegovo ime uvučeno ispod nivoa roditelja. Kliknite dugme plus/minus sa leve strane nivoa roditelja, ako želite da prikažete ili sakrijete njegovu decu. Rad sa nivoima Ovo su osnove rada sa nivoima u Drearmveaveru. Sta još postoji? Istraživanje veza između nivoa i CSS-Pa, kao i iskorišćavanje prednosti koje nudi CSS. Nivoi kao objekti sa stilovima Iako se u Dreamweaveru sa nivoima najviše radi preko objekta Layer, tu nije kraj priče. Bilo koji element na strani, čiji stil sadrži osobinu za definisanje apsolutne ili relativne pozicije, može da se u prikazu Design tretira kao nivo. Ovo je dobra vest, pošto Vam se možda neće dopasti način na koji objekat Layer vrši kodiranje, ali i dalje želite da koristite dobre stvari koje interfejs nivoa nudi u prikazu Design. Kreiranje nivoa preko CSS-a Da biste napravili element čija se pozicija određuje preko CSS-a, a koji radi kao nivo, i da pri tome ne koristite objekat Layer, treba da definišete stil koji sadrži informacije o relativnoj ili apsolutnoj poziciji. Ako je stil korisnička klasa, ili ID, onda treba i da ga primenite na element strane. Evo kako se to radi: 1. Napravite novi stil. Možete da koristite pano CSS Styles ili neki drugi način. 2. Kada se otvori okvir za dijalog New Style, napravite korisničku klasu. Ovo ćete uraditi tako što ćete izabrati Class i u polje Selector uneti ime. Možete i da napravite ID i da izaberete Advanced i unesete znak za funtu, iza kojeg sledi ime. Ovo se radi u polju Selector. Stil možete da napravite interno ili eksterno. Kada završite, kliknite OK. Kada se otvori okvir za dijalog CSS Style Definition, idite u kategoriju Positioning. Iz padajućeg menija Type izaberite Absolute ili Relative. Nakon toga unesite vrednosti u poljima Left, Top, Right ili Bottom. Pazite da ne dodelite vrednosti koje su kontradiktorne. Nemojte dodeljivati vrednost za Left i Right istovremeno, kao ni za Top i Bottom. Pre nego što napustite okvir za dijalog CSS Style Definition, možete da podesite i druge karakteristike, ili ako ste zainteresovani samo za pozicioniranje, razmotrite definisanje stila samo sa tim elementima. Kada završite, kliknite OK da biste zatvorili okvir za dijalog. 169 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Primena stila za pozicioniranje na postojeći element na strani Sada možete da primenite tu klasu ili ID. Izaberite element na strani kojem želite da zadate poziciju (hl, img ili neki drugi). Ako je Vaš stil klasa, onda preko nekog od metoda koje smo već pomenuli možete da tu klasu primenite. Ako je stil ID, onda možete da ga primenite preko kartice Attributes ili Tag Selectora (ID je u kategoriji atributa CSS/Accessibility), tako što ćete uneti ime (bez oznake funte). Čim ovo uradite, pozicioniranje će pomeriti element. Elementi će se pojaviti u prikazu Design okruženi pravougaonikom nivoa. Dokle god je pravougaonik nivoa izabran, u Property Inspectoru se element prikazuje kao nivo. Ako kliknete unutar nivoa, pojaviće se Property Inspector za originalni element. Ako ste stil definisali kao klasu, onda treba da novom elementu na strani koji je sada "nivo" dodelite ID. Ovo možete da uradite preko polja ID u Layer Property Inspectoru. Kreiranje elementa div koji sadrži stil Možda želite da primenite svoj novi stil na oznaku div, koja može da sadrži više elemenata. U Dreamweaveru postoji objekat Div, koji se koristi baš u takvim situacijama. Treba da uradite sledeće: 1. Ako već imate sadržaj na strani, koji treba da okruži oznaku div, izaberite ga. Ako to nije slučaj, stavite kursor tamo gde želite da se ubaci oznaka div i njen sadržaj. 2. Sa palete Layout Insert izaberite objekat Div ili iz glavnog menija izaberite Insert > Layout Objects > Div. Otvoriće se okvir za dijalog Insert Div Tag. 3. Ako ste stil definisali kao klasu, izaberite ga iz padajućeg menija Class u ovom okviru za dijalog. U polju ID unesite jedinstvenu reč. 4. Ako ste stil definisali kao ID, izaberite ga iz padajućeg menija ID. (U ovom meniju se prikazuju samo 170 / 299 Fakultet organizacionih nauka 5. Dreamweaver MX 2004 ID oznake koje se ne koriste. Za razliku od klasa, ID se u dokumentu može koristiti samo jednom.) Opcija Insert omogućava da definišete gde treba da se prikaže element div. Ako ste izabrali neki sadržaj, on će ga okružiti. Ako ništa nije izabrano, onda se on postavlja na mesto kursora. Oznaku možete i da ubacite neposredno ispred ili iza drugih oznaka, kao što je na primer body. Nakon što izaberete ono što želite, kliknite OK da biste zatvorili okvir za dijalog i ubacite oznaku div. Sada ste od oznake div kreirali nivo, ali za razliku od nivoa koje je napravio Dreamweaver, ovi nivoi svoju poziciju, dimenzije kao i druge osobine izvode iz korisničke klase ili ID-a. Rad sa nivoima koji predstavljaju stilove iz CSS-a Sa nivoima koji su krierani na ovaj način se u osnovi radi na isti način kao i sa nivoima koji su napravljeni preko objekta Layer, ali postoji jedna bitna razlika. Svaki put kada promenite osobine novog nivoa preko Property Inspectora ili Tag Inspectora (preko panoa Layer, ili preko prozora Document), menja se i stil. Ovo se dešava čak i ako se stil nalazi u spoljašnjoj datoteci sa stilovima. Koje prednosti donosi kreiranje nivoa na ovaj način, u odnosu na kreiranje nivoa preko objekta Layer iz Dreamweavera? Prvo, tu su prednosti koje donosi odvajanje forme i sadržaja koje postoji CSS-u. Pošto su informacije o stilu u posebnoj klasi ili ID-u, kod na strani nije pretrpan različitim informacijama. Ako je stil definisan u spoljašnjoj datoteci, on se može primeniti na više strana na sajtu za formatiranje koje uključuje i pozicioniranje. Informacije o poziciji mogu da se uklone ako se obriše dodeljivanje stila, tako da se strane mogu brzo ažurirati. Pored ovog, pano CSS Styles omogućava da dobijete efekte pozicioniranja koje nije moguće dobiti preko nivoa napravljenih preko objekta Layer. Tu se misli na dodeljivanje pozicije na bazi desne i donje pozicije, umesto na bazi leve i gornje. To znači da možete da napravite element na strani koji je priljubljen uz desnu ili donju ivicu prozora, umesto da bude gore levo. Pazite: Property Inspector prikazuje samo levu i gornju poziciju, tako da ako definišete nivo preko CSS-a preko pozicioniranja desno i dole, nećete ovde moći da menjate ili vidite te osobine. Ako u prikazu Design pomerite nivo, Dreamweaver će dodati levo i gornje pozicioniranje, umesto originalnih koordinata desno i dole. Ovim se dobija matematička nepravilnost koja u pretraživaču može da dovede do problema. Podrška pretraživača za nivoe Na žalost, podrška za CSS-P u pretraživačima je i dalje prilično iznuđena. Nijedan pretraživač pre verzije 4 ne podržava CSS-E Neki od novijih pretraživača, koji obećavaju kompatibilnost sa standardima bi trebalo da stranu prikažu na pravi način. Ipak, i dalje postoji puno prostora za interpretaciju rada sa CSS-om, tako da bi prilikom rada sa nivoima uvek trebalo da nastupate oprezno. Za strane koje dobro rade u starim i pretraživačima koji nisu stadnardni, čak i ako nisu podržane neke nove stvari, se kaže da su graciozno degradirane. Možda formatiranje preko nivoa neće raditi baš najbolje, ali će strana i dalje biti čitljiva, a njeni linkovi i druge osobine će biti funkcionalni. Kako da budete sigurni da je strana sa nivoom graciozno degradirana? Pazite da sadržaj bude predstavljen po logičnom i čitljivom redu, čak i ako nema nekih posebnih mogućnosti za pozicioniranje. To je ujedno i način da stranu sa nivoima učinite dostupnom. Kako možete da proverite da li će se strana prikazati na prihvatljiv način i bez formata sa nivoima? Verovatno je najlakše rešenje da u pretraživaču isključite podršku za liste sa stilovima. Ako je formatiranje preko nivoa ubačeno u spoljašnju datoteku sa stilovima, preko Dreamweavera, odnosno njegove opcije Design Time Style Sheets, možete da privremeno sakrijete lisru sa stilovima. 171 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 13. Upravljanje lokalnim sajtom Kako Dreamweaver rukuje lokalnim sajtovima U srcu rukovanja sajtom u Dreamweaveru je koncept lokalnog sajta. Lokalni sajt je kompletna verzija web sajta, koja postoji na Vašem računaru. On sadrži iste dokumente i resurse koji će se eventualno publikovati, sa istim rasporedom datoteka i fascikli. Lokalni sajt je razvojno i test okruženje. Strane na kojima trenutno radite, kao i druge resurse, smeštate na lokalni sajt. Struktura fascikli i rukovanje sadržajem strana se radi odavde. Alati za rad sa lokalnim sajtovima koji postoje u Dreamweaveru omogućavaju da obavljate proveru pravopisa, operacije pronalaženja i zamene, kao i proveru konzistentnosti. Lokalni sajt se u Dreamweaveru definiše tako što se Dreamweaver usmeri na fasciklu u kojoj planirate da čuvate datoteke lokalnog sajta. Ova fascikla je korenska fascikla lokalnog sajta. Nakon što fasciklu označite kao korensku, Dreamweaver svaku stavku koju stavite ispod te fascikle tretira kao deo sajta. Ako želite da na sajt dodate neki dokument ili resurs, jednostavno ih postavite u ovu fasciklu. Ako želite da dokument uklonite sa sajta, a da ga ne obrišete fizički sa računara, onda ga uklonite iz ove fascikle. Sve vreme dok radite na različitim datotekama, koje se nalaze na sajtu, Dreamweaver prati lokalnu korensku fasciklu, prateći koje su datoteke dodate ili uklonjene, zapisujud kad god se datoteci ili fascikli promeni ime, ili mesto u strukturi. On ispituje veze između dokumenata, da bi bio siguran da su relativni linkovi tačni. Korenska fascikla lokalnog sajta je sastavni deo rada sa sajtovima u Dreamweaveru. Definisanje lokalnog sajta Kreiranje i upravljanje sajtovima se u Dreamweaveru radi preko komande Site > Manage Sites. Sve opcije vezane za sajtove se definišu u okviru za dijalog Site Definition. Ako želite da napravite novi sajt, ili da promenite postojeći, treba da koristite okvir za dijalog Site definition. Izaberite Site > Manage Sites (ili iz palete panoa Site, iz padajućeg menija, izaberite Manage Sites). Ovim se otvara okvir za dijalog Manage Sites. Ovaj okvir za dijalog je centralno mesto odakle možete da pravite novi sajt (preko dugmeta New) ili da menjate postojeći (preko dugmeta Edit). U okviru za dijalog Site Definition postoje dva načina za definisanje informacija vezanih za sajt. To su Basic (poznat i kao Site Wizard) i Advanced (napredni) režimi. Osim ako ste potpuni početnik u kreiranju sajtova, režim Advanced može biti vrlo efikasan. On omogućava da podesite iste osnovne informacije koje prikuplja i čarobnjak Site Wizard, ali ima i mnogo dodatnih opcija. Informacije su svrstane u logičke kategorije, ali nema pristupa pitanje - odgovor, koji postoji kod čarobnjaka. Definisanje lokalnog sajta preko režima Advanced ćete početi pristupom okviru za dijalog Site Definition (Site > New Site > Manage Sites > New). Izaberite karticu Advanced. Informacije o sajtu su podeljene u kategorije koje pokrivaju sve aspekte dinamičkih i statičkih sajtova. Za defmisanje lokalnog sajta su potrebne samo informacije koje se nalaze u kategoriji Local Info. Za definisanje sajta su apsolutno obavezne samo dve 172 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 stavke. Obavezne informacije u kategoriji Local Info (ove informacije prikuplja i čarobnjak Site Wizard) su: • • Site Name (ime sajta) – Tu možete da zadate ime preko kojeg Dreamweaver pristupa sajtu. Local Root Folder – Ovde se definiše fascikla na računaru, koja se koristi kao koren sajta. Fasciklu možete da izaberete preko dugmeta Browse. U kategoriji Local Info možete da zadate i neke informacije koje su opcionalne (ne mogu se zadati preko čarobnjaka Site Wizard). To su sledeće informacije: • HTTP Addres – Unesite kompletnu HTTP adresu, koja će biti glavna adresa sajta, kada se postavi na web server. Adresa, na primer, može biti, http://www.mydomain.com. Ako na sajtu između dokumenata koristite apsolutne linkove, Dreamweaver će preko ove informacije proveravati da li linkovi vode na prava mesta. Ako za internu navigaciju po sajtu ne budete koristili apsolutne adrese, onda ovo polje možete da ostavite prazno. Ako ste za definisanje sajta koristi čarobnjaka Site Wizard, onda je podrazumevana adresa http://. • Enable Cache – Kao što smo pomenuli, Dreamweaver, tokom rada, automatski prati informacije o datotekama i aktivi na lokalnom sajtu. On ovo radi preko keša za sajt, odnosno dela memorije računara koja se privremeno koristi za smeštanje tih informacija. Kod malih i srednjih sajtova, keš može značajno da ubrza operacije koje se odnose na ceo sajt, kao što su Find and Replace, provera pravopisa, ili rukovanje linkovima. Kod velikih sajtova, keš može i da uspori ove operacije (pošto Dreamweaver mora da pamti previše informacija). Generalna strategija je da keš koristite kada prvi put definišete sajt. Kada kasnije primetite da operacije sa sajtom postaju sporije, isključite keš. U Dreamweaveru možete kreirati onoliko sajtova koliko Vam je potrebno. Svaki sajt mora da ima zadate najmanje svoje lokalne informacije, premda može da sadrži i udaljene i druge informacije. 173 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Upravljanje sajtovima Upravljanje sajtovima u Dreamweaveru se radi preko okvira za dijalog Manage Sites , okvira za dijalog Site Definition i panoa Site, sa njegovim padajudm menijem. Tekući sajt se prikazuje u panou Site. Njegovo ime je prikazano u padajućem meniju ovog panoa. Ako želite da drugi sajt postane tekući, možete da otvorite okvir za dijalog Manage Sites. Ovo možete da uradite preko opcije Manage Sites iz pomenutog menija. Okvir za dijalog Site Definition za tekući sajt možete da otvorite ako kliknete njegovo ime u padajućem meniju. Okvir za dijalog Site Definition, koji se koristi za kreiranje novih sajtova, se takođe koristi i za promenu postojećih. Promenu možete da radite ako izabereete Site > Manage Sites, zatim izaberete sajt, a onda kliknete dugme Edit. Možete i da dva puta brzo kliknete ime sajta u padajućem meniju panoa Site. U okviru za dijalog Manage Sites je prikazana lista svih sajtova koji su trenutno definisani. Ovde imate mogućnost da pravite nove sajtove, da menjate postojeće, da ih brišete i još puno toga. Ovom okviru za dijalog možete da pristupite ako izaberete Site > Manage Sites, ili ako iz padajućeg menija u panou Site izaberete Manage Sites. Možete mu pristupiti i ako u okviru za dijalog Preferences > Site izaberete odgovarajuće dugme. • Ako iz ovog okvira za dijalog želite da menjate postojeći sajt, izaberite ga, a onda kliknite Edit da biste otvorili okvir za dijalog Site Definition, za taj sajt. • Ako želite da obrišete sajt, izaberite ga i kliknite dugme Delete. Brisanje sajta ne briše i same datoteke, koje su njegov deo, niti na bilo koji način menja lokalnu fasciklu. Brišu se samo informacije vezane za sajt, kao i naznaka da je neka fascikla korenska fascikla sajta. • Ako iz ovog okvira za dijalog želite da napravite novi sajt, kliknite dugme New. Pano Site Nakon što ste definisali sajt, pano Site iz Dreamweavera je Vaš interfejs, preko kojeg vršite sve poslove vezane za sajt. Dobro je da ovaj okvir za dijalog tokom rada ostavite otvorenim. U ovom prozoru možete da vidite datoteke sajta, kao i hijerarhijsku strukturu, da rukujete datotekama sa sajta i sl. Proširivanje i sužavanje panoa Site Pano Site sa svim informacijama može da zauzme veliki deo ekrana, što može biti problem, osim ako nemate veliki monitor, ili podešen dvojni monitor na svojoj radnoj stanici. Rešenje ovog problema je da se pano prikaže u punom ili skraćenom obliku. Prelaz iz jednog u drugi oblik se vrši preko dugmeta Expand/Collapse koje se nalazi na paleti panoa Site. Kao i drugi panoi i ovaj se može vezati sa ostale 174 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 panoe, ili ga ostavite da bude slobodan. (Ovo je novost kod korisnika koji rade pod operativnim sistemom Macintosh.) Kada je pano vezan, uvek se prikazuje u skraćenom obliku. Prikaz datoteka na sajtu U proširenom obliku pano Site u desnoj koloni prikazuje listu Site Files. U skraćenom obliku, ova lista se podrazumevano prikazuje. Ona se može prikazati ako se iz padajućeg menija izabere Local View. U listi Site Files je prikazan sadržaj lokalne korenske fascikle. Sadržaj je uređen hijerarhijski, onako kako bi se prikazao u Windows Exploreru ili Macintosh Finderu. Kao i druge liste datoteka na sistemu, svaka fascikla se prikazuje sa znakom plus/minus (+/-) (Windows). Ove oznake omogućavaju sakrivanje i prikazivanje sadržaja. Većina opcija koje u Dreamweaveru postoje za rad sa datotekama se nalaze u prikazu Site Files. Kolone u prikazu File View Kada je pano Site proširen, lista Site Files postaje više od obične liste sa imenima. Ona sadrži kolone sa informacijama o svakoj datoteci. To su ime, veličina, tip, datum promene i još po nešto. Ako je pano Site dovoljno širok, o datotekama možete puno da saznate samo ako pogledate informacije koje se nalaze u kolonama. Kao što možete da sa Windows Explorerom ili Mactionsh Finderom prikažete datoteke sortirane po nekoj od kolona, to možete i ovde, ako kliknete tu kolonu. Ako pano Site nije organizovan prema Vašim žaljama, možete da ga menjate. Dreamweaver omogućava da podešavate pogled na pano Site. Ovo se radi preko kategorije File View Columns u okiru za dijalog Site Definition. Ovaj okvir za dijalog se može otvoriti i ako se iz linije menija panoa Site izaberete View > File View Columns. U ovom prozoru možete da vidite sva imena kolona koje se vide u panou Site, bez obzira da li ste ih sami napravili ili ih je napravio Dreamweaver. Možete da vidite i da li su kolone vidljive. Ako želite da dodate svoju kolonu, kliknite dugme plus (+). Nakon toga možete da joj date ime, da zadate da li želite da joj se dodeljuju napomene (Design Note), da definišete kako se informacije u koloni ravnaju i da zadate da li je kolona vidljiva ili ne. Kada pravite svoju kolonu, njen tip je Personal. Ako želite da obrišete kolonu koju ste napravili kliknite dugme - (Delete). 175 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Da biste razumeli gde se kolona koju pravite pojavljuje u panou Site, morate da koristite imaginaciju. Zamislite pano Site. Sećate se da prava kolona u prozoru sadrži imena datoteka koje se nalaze na lokalnom sajtu. Naredna kolona sadrži napomene (Design Note). Treća kolona ukazuje na veličinu datoteka, četvrta pokazuje tip datoteke. Ovde možete da vidite imena kolona (koja se prikazuju na panou Site po horizontali), po vertikali. Dreamweaver novu kolonu podrazumevano postavlja na dno liste, što znači da se nova kolona postavlja najdalje u desno od panoa Site. Ako želite da promentie položaj nove kolone, upotrebite strelice naviše i naniže koje se nalaze u gornjem desnom delu prozora Site Definition. Kada kliknete strelicu naviše, prebacujete kolonu u levo na panou Site. Kada kliknete strelicu naniže, kolonu prebacujete na desni deo panoa Site. Možete da prebacujete i ugrađene kolone, sve osim kolone Name. Ova kolona uvek mora da ostane na vrhu liste. Prikaz Mape sajta (Site Map) Do sada ste elemente svog sajta uvek gledali kao listu. Ova lista, međutim, ne govori kako su datoteke međusobno povezane. Koja datoteka se prva vidi kada neko dođe na sajt? Koliko datoteka je vezano za tu prvu stranu? Dreamweaver pruža jednostavan odgovor na sva ova pitanja, a to je prikaz Site Map. Označavanje naslovne strane Pre nego što budete mogli da koristite prikaz Site Map, Dreamweaveru morate da saopštite koja je naslovna strana. Ovo je prva strana koja se vidi kada neko dođe na sajt. To što je naslovna strana ne mora da znači da i ime datoteke treba da bude home.html. Obično se ta prva strana označava kao index.html, default.html ili default.htm. Razlog je to što su web serveri obično konfigurisani da neka od ovih imena automatski prepoznaju, tako da posetioci ne moraju da kao adrese unose i ime datoteke. (Pre nego što izaberete ime naslovne datoteke za svoj sajt, proverite sa osobljem zaduženim za tehničku podršku, koja su podrazumevana imena koja Vaš server prepoznaje.) Da biste definisali naslovnu stranu svog sajta, otvorite okvir za dijalog Site Definition i idite na kategoriju Site Map Layout. Na ovu kategoriju možete da odete i direktno ako iz menija panoa Site izaberete View > Layout. U okviru za dijalog kliknite ikonu fascikle da biste potražili naslovnu stranu, ili možete da njeno ime unesete u polju home page. Ako ste kao naslovnu stranu izabrali neko od podrazumevanih imena, onda ne morate tu datoteku da eksplicitno definišete u Dreamweaveru. Kao i web server, i Dreamweaver prepoznaje ta imena i pretpostavlja da su datoteke sa podrazumevanim imenom, naslovne strane. 176 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pregled sajta preko mape sajta Nakon što ste izabrali naslovnu stranu, možete da pogledate mapu sajta. Kada je pano Site proširen, pritisnite dugme Site Map i iz padajućeg menija izaberite Map Only ili Map and Files. Prikaz Site Map prikazuje sajt kao hijerarhiju povezanih datoteka, pri čemu je na vrhu naslovna strana. Ispod ove naslovne strane su datoteke koje su direktno povezane sa njom. Tu su i e-mail linkovi, spoljašnji linkovi, kao i linkovi koji vode do nekog medijalnog sadržaja koju je ugrađen na strani. Opcije koje utiču na prikazivanje mape sajta se podešavaju u kategoriji Site Map Layout u okviru za dijalog Site Definition. Neke opcije se mogu podesiti i preko komandi iz menija View, u meniju panoa Site. Ikone, imena i tipovi datoteka Mapa sajta koristi male ikone da vizuelno ukaže na status datoteke ili linka. Kada pogledate vizuelni jezik koji se koristi, videćete da on, ukratko, o sajtu može da Vam saopšti sledeće informacije: • Ikone Svaka stavka na mapi sajta ima svoj tip ikone. Ikone datoteka Dreamweavera sa crnim natpisima predstavljaju datoteke. Ikone globusa sa plavim natpisima predstavljaju apsolutne URL adrese ili druge specijalne linkove. Prekinuti linkovi su označeni crvenom ikonom lanca, sa crvenim natpisom. • Natpisi Ako želite da ikone kao natpise imaju naslove strana, a ne imena datoteka, izaberite Page Titles u okviru za dijalog Site Definition, ili izaberite View > Show Page Titles iz menija panoa Site. Da biste ponovo uključili imena datoteka, izaberite Filenames u okviru za dijalog Site Definition, ili izaberite View > Show Filenames iz menija panoa Site. Sta se prikazuje, a šta ne Zavisne datoteke (kao što su linkovani medijalni sadržaj, ili linkovane skript ili CSS datoteke) se podrazumevano ne prikazuju na mapi sajta. Da biste videli i ove datoteke, izaberite opciju Display Dependent Files u okviru za dijalog Site Definition, ili izaberite View > Show Dependent Files u meniju panoa Site. Iste komande se koriste i za njihovo ponovno sakrivanje. 177 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prikazivanje hijerarhije Ako je sajt složen, onda čitanje mape sajta može biti komplikovano, zbog obilja ikona i linkova. Ovo možete da pojednostavite sakrivanjem i prikazivanjem linkova. Da biste sakrili sve linkove koji dolaze iz konkretne datoteke, kliknite dugme minus (-), koje se nalazi pored ikone datoteke. Da biste ponovo prikazali linkove, kliknite dugme plus (+). (Dugme menja stanje u zavisnosti od toga da li su linkovi prikazani ili sakriveni.) Da biste videli samo deo sajta u jednom trenutku (na primer, da se pokaže samo deo Meanswear, na sajtu sa katalogom štofova), desnim tasterom miša kliknite datoteku na vrhu hijerarhije koju želite da vidite i iz pomoćnog menija izaberite View as Root. Mapa sajta se menja, tako da se izabrana datoteka prikazuje kao nova naslovna strana na vrhu hijerarhije, sa prikazanim svim linkovima koji su ispod nje. Drugi delovi sajta se ne vide. Na vrhu prozora sa mapom sajta se nalazi specijalna ikona, koja ukazuje na veze tekućeg prikaza i naslovne strane. Ako posle prelaska na ovaj privremeni pogled, želite da se vratite na prikaz celog sajta, kliknite ikonu naslovne strane na vrhu mape sajta). Promena naslovne strane mape sajta Dreamweaver omogućava da postojeću naslovnu stranu promenite ili na neku drugu stranu koja već postoji, ili na kompletno novu stranu, uključujući i strane koje nisu HTML datoteke, kao što su neka datoteka sa slikom ili SWF datoteka. Iz menija u panou Site izaberite opciju Site > New Home Page. Otvoriće se okvir za dijalog New Home Page. Ovde možete da unesete ime datoteke i naslov strane za svoju novu naslovnu stranu. Nakon kreiranja nove strane, možete da preuredite linkove, preko komande Link to Existing File ili ikone Point-to-File. Ovaj proces je objašnjen u prethodnom odeljku ovog poglavlja. Da biste postojeću stranu postavili kao naslovnu na mapi sajta, prvo treba da izaberete na panou Site (morate biti u režimu Map and Files View, da biste ovo mogli da uradite). Nakon toga iz menija u panou Site izaberite opciju Site > Set as Home Page. Ovim se ponovo kreira mapa sajta, ali sa novom naslovnom stranom i njenim linkovima. Možete i da desnim tasterom miša kliknete datoteku u panou Site i da iz pomoćnog menija izaberete Set as Home Page. Podešavanje rasporeda na mapi sajta Preko kategorije Site Map Layout, koja se nalazi u okviru za dijalog Site Definition, možete da podesite trenutnu mapu svog sajta. Iz ovog prozora možete da izaberete broj kolona, kao i da podesite širinu kolona koje se prikazuju na mapi sajta. Tu se definiše broj strana koje se prikazuju u jednoj vrsti. Podrazumevana vrednost je 200. Obično ovu vrednost ne morate da menjate, pošto retko imate više od 200 strana koje su povezane sa naslovnom stranom. Sada možete da izaberete da li dokumenti na mapi sajta treba da se prikažu kao datoteke ili sa naslovima strana. Ako ste bili marljivi prilikom kreiranja naslova strana, onda upotreba tih naslova na mapi sajta može da bude dobar način za pregled sajta. Prikazivanje datoteka naslova strana takođe pokazuje da li su naslovi takvi da mogu lako da se prate. Možda ćete se iznenaditi koliko konfuzni mogu biti naslovi nekih strana, ako ne gledate i samu stranu. Na kraju, možete da podešavate i ono što će se naći na mapi sajta. Prva opcija omogućava da podesite da li se prikazuju datoteke koje su označene kao sakrivene. Kada je ova opcija potvrđena, onda se prikazuju i skrivene datoteke. Druga opcija, Display Dependent Files, prikazuje sve zavisne datoteke (kao što su slike, ili druge datoteke koje su linkovane preko HTML koda). Ove datoteke se prikazuju prema redosledu po kojem su postavljene u HTML kodu. Kreiranje slike od mape sajta Zar ne bi bilo korisno ako biste mapu sajta mogli da upamtite kao sliku, koju biste onda mogli elektronskom poštom da pošaljete klijentu ili koju biste mogli da odštampate? Dreamweaver omogućava da ovo radite neverovatno lako. Da biste upamtili mapu sajtu, izaberite File > Save Site Map. U okviru za dijalog Save Site Map, dajte ime svojoj slici i izaberite lokaciju gde treba da se upamti. Kod Windowsa, iz padajućeg menija File Type možete da izaberete.bmp, čime se slika pamti kao bitmapa, a ako izaberete .png, onda se pamti kao PNG datoteka. Kod Macintosha se datoteka automatski pamti kao JPEG. Upravljanje datotekama i linkovima na sajtu Najviše posla u razvoju web sajta zahteva upravljanje sajtom, odnosno praćenje datoteka na sajtu. Treba da budete sigurni da je struktura fascikli logička, da imena datoteka imaju smisla, da svi linkovi rade, kao i da je sve tamo gde ga možete brzo naći, ako kasnije treba nešto da menjate, ili kada zatreba da prebacujete na server. Nakon što ste definisali sajt u Dreamweaveru, sva snaga alata za upravljanje lokalnim sajtom je u Vašim rukama. Kada radite u "centralnom prozoru za komande", drugim rečima, panou Site, prst možete 178 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 stalno da držite na pulsu sajta i da kontrolišete svoje datoteke, kao što neki general kontroliše svoje trupe. Upravljanje datotekama i fasciklama Pano Site možete da shvatite kao zamenu za Windows Explorer ili Macintosh Finder. Neka bude otvoren sve vreme dok radite na sajtu. Koristićete ga za obavljanje osnovnih operacija na sajtu. Prikaz Site Files je ključ za rukovanje strukturom datoteka na sajtu. Prikaz Site Map je najbitniji ključ za rukovanje linkovima. Otvaranje datoteka Kao i uvek, otvaranje datoteka u Dreamweaveru možete da uradite na više načina. Prvi i najpopularniji metod je da se iz menija izabere File > Open. Onda preko okvira za dijalog Open možete da pronađete datoteku koju želite i kliknete dugme Open. Brži metod je da koristite pano Site. U panou Site možete dva puta brzo da kliknete datoteku (prikaz Site Files ili Site Map) i ona će se otvoriti. Sada kada znate nekoliko pomoćnih načina da otvorite datoteku, da li ćete ikad koristiti neki od starih načina. Kreiranje datoteka i fascikli Ako želite da novu datoteku ili fasciklu napravite iz prikaza Site Files, kliknite fasciklu u koju želite da smestite novu stavku i izaberite Choose File > New File ili File > New Folder iz menija panoa Site. Možete i da desnim tasterom miša kliknete fasciklu u koju želite da smestite novu stavku i da iz pomoćnog menija izaberete New File ili New Folder. U listi Site Files će se pojaviti nova datoteka bez imena. (Kod novih datoteka, Dreamweaver kreira datoteku sa podrazumevanim tipom za sajt.) Promena imena datoteka i promena njihove pozicije Obični ljudi koji nisu super organizovani retko biraju najbolji sistem organizacije, sve dok se na neki način ne nađu u projektu za razvoj nekog sajta. Možda će doći do savršene šeme za davanja imena, ali tek pošto su pre toga napravili nekoliko desetina datoteka sa imenima koja nisu baš bila korisna. Noćna mora ovakvog scenarija je: kada nakon što ste počeli sa kreiranjem svog sajta, odnosno napravili linkove sa grafikom i vezama između datoteka, treba da promenite lokaciju ili ime datoteke. Ta mala promena može da traži veliki posao, jer treba promeniti svaki relativni link, koji ukazuje ili dolazi sa te strane. Ako za za davanje imena i organizaciju budete koristili prikaz Site Files iz Drearmveavera, onda Dreamweaver može automatski da ažurira sve linkove, ako je potrebno. Da biste prebacili datoteku ili fasciklu sa jedne lokacije na drugu, dovoljno je da tu stavku, u prikazu Site Files, prevučete na novu lokaciju. Ako želite da promenite ime datoteke ili fascikle, kliknite dva puta to ime u prikazu Site Files ili Site Map, ili izaberite datoteku, a onda iz menija panoa Site izaberite File > Rename. Nakon toga unesite novo ime. Ako menjate ime za naslovnu stranu sajta, onda se mapa sajta neće prikazati na pravi način, sve dok ne osvežite sajt, preko opcije Site > Re-create Site Cache, koja se nalazi u meniju panoa Site. Ako promene koje pravite zahtevaju da se ažuriraju svi linkovi, Dreamweaver ima i okvir za dijalog Update Links u kome su prikazane sve datoteke koje treba ažurirati, kao rezultat Vaše akcije. Ovde treba da jednostavno kliknete Update, a Dreamweaver menja sve linkove u izlistanim datotekama, tako da nijedan od linkova nije prekinut. Upravljanje linkovima Već ste videli prilično dobar način za upravljanje linkovima, kada Dreamweaver ažurira linkove prilikom promene strukture datoteka. Ovo je ipak samo prvi korak u složenom sistemu za upravljanje linkovima. Ako koristite mapu sajta, različite komande iz menija panoa Site, kao Site Reports, strukturu linkova na sajtu možete da imate u svojim rukama. Opcija Point to File iz datoteke Ako ste otvorili datoteku i ako je pano Site bar delimično vidljiv na ekranu, možete da napravite link koji vodi od te datoteke do neke druge, preko opcije point to file. Evo kako se to radi. 1. Otvorite datoteku u kojoj želite da se nalazi link. Proverite da li je pano Site otvoren i vidljiv. 2. Izaberite tekst ili sliku koji će postati link. 3. U Property Inspectoru pronađite polje Link, ali umesto da kliknete dugme Browse ili da unosite ime datoteke u odgovarajuće polje, pronađite dugme Point to File. 4. Izaberite ovo dugme i prevucite na pano Site. (Ako je pano Site slobodan, samo prevucite preko nekog njegovog dela i on će se prikazati u prvom planu, tako da možete da vidite ceo prozor. ) Nastavite da vučete sve dok se ne nađete iznad datoteke na koju želite da link vodi. Kada se nađete na pravoj lokaciji, datoteka će biti istaknuta. 5. Ostavite dugme miša. Ako Vam koordinacija ruke i oka radi kako treba, u otovrenom dokumentu se sada nalazi link na stavku koju ste pokazali. 179 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Opcija Point to File i mapa sajta Ako ste u žurbi da napravite neke kontrole za navigaciju na sajtu, a ne želite da otvarate datoteke da biste to radili, onda će Vam se dopasti mogućnost da to uradite preko mape sajta. Evo kako se to radi: 1. Zatvorite sve dokumente. (To uvek treba da uradite pre nego što počnete sa radom na nekom od poslova vezanih za rukovanje datotekama, koji bi mogli da ažuriraju sadržaj datoteka.) 2. U panou Site orvorite prikaz Site Map. 3. Na mapi sajta izaberite datoteku od koje želite da vodi link. Pored te datoteke će se pojaviti mala ikona. 4. Izaberite tu ikonu i prevucite je na datoteku na koju želite da link vodi. Možete da je prevučete do neke druge datoteke na mapi sajta, ili do datoteke iz liste Site Files. Kada se nađete iznad željene datoteke i kada je ona postane istaknuta, to je to. Napravljen je link. Mapa sajta će se promeniti i prikazaće se da je između dve datoteke dodat link. Otvorite datoteku od koje link vodi i idite do dna strane. Videćete da je Dreamweaver dodao tekstualni link na drugu datoteku, sa tekstom koji je izveden iz imena druge datoteke. Ako nastavite da dodajete linkove iz iste datoteke Dreamweaver će eventualno kreirati celu tekstualnu liniju za nayigaciju, koja će se naći na dnu strane. Ovo nije baš najlepše, ali je korisno i radi. Niste otvorili nijednu datoteku. Kreiranje linkova preko komandi iz menija i mape sajta Ako ovo pokazivanje nije ono što želite, linkove i dalje možete brzo da dodate, a da ne morate da otvarate 180 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 datoteke. Ovo možete da uradite preko komandi iz menija. Da biste to mogli da uradite, morate biti u prikazu Site Map, ali tada nema prevlačenja. Postavljanje linka koji vodi na postojeću datoteku, preko menija iz prikaza Site Map Ako želite da date link na postojeću datoteku, a da ne morate da otvarate nijednu od ovih datoteka, i ne želite da koristite opciju point to file, treba da uradite sledeće: 1. U prikazu Site Map izaberite ime datoteke od koje želite da link vodi, a onda izaberite Site > Link to Existing File iz menija u panou Site. Možete i da desnim tasterom miša kliknete datoteku od koje želite da link vodi i da iz pomoćnog menija izaberete opciju Link to Existing File. 2. Kada se otvori okvir za dijalog Select HTML File, pronađite datoteku na koju želite da link ukazuje. Kliknite Choose da biste zatvorili okvir za dijalog. Link je na mestu i prikazuje se kao dodatni link na mapi sajta. Da biste videli kako ovaj link izgleda u originalnoj datoteci, otvorite datoteku i idite na dno strane. Videćete da je, kao i kod opcije point to file, koju smo opisali, Dreamweaver dodao tekstualni link na drugu datoteku, dok je tekst izveden iz imena druge datoteke. Dodavanje linka na novu datoteku (koja ne postoji) preko menija iz prikaza Site Map Sa mape sajta možete da definišete koje datoteke na sajtu treba da budu povezane sa kojim drugim datotekama, tako da ceo sajt možete da napravite bez otvaranja datoteke. Da biste napravili novu datoteku i link na nju, sve u jednom procesu, treba da uradite sledeće : 1. U prikazu Site Map izaberite datoteku od koje želite da link vodi, a onda izaberite Site > Link to New File iz menija panoa Site, ili desnim tasterom kliknite datoteku od koje želite da link vodi, a onda iz pomoćnog menija izaberite opciju Link to New File. 2. Kada se otvori okvir za dijalog Link to New File popunite sledeće informacije: • Filename Dreamweaver će napraviti novu datoteku za Vas. • Title Koji treba da bude naslov strane. • Text of Link Nakon što se napravi nova datoteka, Dreamweaver pravi tekstualni link u polaznoj datoteci, koji vodi ka novoj datoteci. 3. Nakon što unesete sve informacije, kliknite OK da biste zatvorili okvir za dijalog. Link je na svom mestu. Tu je i nova datoteka. Otvorite originalnu datoteku i videćete da je link dodat kao običan tekstualni link i to na kraj datoteke, posle svog ostalog sadržaja. Ako ponovite ovaj proces, možete da napravite ceo web sajt, počev od jedne naslovne strane. Uopšte ne morate da napuštate prikaz Site Map. Promena linkova Napravili ste svoj sajt i linkovima povezali nekoliko strana sa stranom gallery.html. Posle toga ste malo razmislili i zaključili da linkovi sa tih strana treba da vode na stranu slideshow.html. Uz pomoć Dreamweavera možete da promenite ono na šta linkovi ukazuju, bilo pojedinačno, bilo odjednom, a da pri tome ne morate da otvorite ni jednu datoteku. Komanda Change Link Da biste promenili sve linkove koji vode na jednu stranu, i poslali ih na neku drugu, treba da uradite sledeće: 1. Izaberite stranu na koju linkovi treba da vode. (U primeru koji smo prethodno pomenuli, to je strana gallery.html.) 2. Iz menija panoa Site izaberite Site > Change Link. Otvoriće se okvir za dijalog Select HTML File. 3. Izaberite novu datoteku na koju želite da linkovi ukazuju. (U prethodnom primeru to bi bila strana slideshow.html.) Kada završite, kliknite Select. 4. Otvara se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje treba da se ažuriraju. Da biste promenili sve linkove i zatvorili okvir za dijalog, kliknite Update. 181 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Komanda Change Links Sitewide Ova komanda radi slično kao komanda Change Links, ali se nekim bitnim razlikama. Kao i kod prethodne komande, namera je da se promene svi linkovi na sajtu, koji vode ka jednoj datoteci, tako da vode na neku drugu. Ova komanda se koristi na sledeći način: 1. (Opcionalno) Izaberite stranu koju želite da promenite. To je strana na koju linkovi vode (gallery.html iz prethodnog primera). 2. Izaberite Site > Change Links Sitewide. 3. Kada se otvori okvir za dijalog Change Links Sitewide unesite sledeće informacije: • Change All Links To - Ako ste pre pokretanja komande izabrali datoteku, ova informacija je već uneta. Ako to nije bio slučaj, ovde treba da unesete link. • Into Links To - Unesite novi link koji želite da zameni stari (u prethodnom primeru to je slideshow.html). 4. Kliknite OK da biste zatvorili okvir za dijalog. 5. Otvoriće se okvir za dijalog Update Files. U njemu je prikazana lista svih datoteka na sajtu koje treba da se ažuriraju. Da biste promenili sve linkove i zatvorili okvir za dijalog kliknite Update. Po čemu se komanda Change Links Sitewide razlikuje od komande Chang Links? Namena komande Change Links je da da se ponovo izračunaju relativni linkovi između dokumenata na sajtu, pa ta komanda to i radi. Komanda Change Links Sitewide više liči na običnu komandu Find and Replace, jer ona menja atribut href za određene linkove. Jednu vrednost zamenjuje drugom. Posledice su sledeće: • Komanda Change Links Sitewide se koristi samo sa apsolutnim linkovima, ili linkovima koji su relativni u odnosu na koren. Ne koristi se za relativne linkove u dokumentima. Ako u okviru za dijalog Change Links Sitewide potražite neki link, Dreamweaver smatra da je taj link relativan u odnosu na koren. Ako unesete link koji je relativan u odnosu na dokument, dobićete poruku o grešci. Ako želite da promenite sve reference na dokument na svom sajtu, a ne koristite putanje koje su relativne u odnosu na koren sajta, onda treba da koristite komandu Change Links. • Komanda Change Links se koristi samo za linkove koji ukazuju na dokummente. Komanda Change Links Sitewide se može koristiti za promenu bilo kojeg href atributa na neku drugu vrednost. Na primer, možete da promenite linkove mailto:, ako se promeni Vaša e-mail adresa, ili možete da promenite nulte linkove od #, na sigurnije linkove javascript:, sve to preko komande Change Links Sitewide. Uvek kada želite da menjate linkove koji nisu relativni u odnosu na druge dokumente, treba da koristite komandu Change Links Sitewide. Provera i popravka linkova U narednih nekoliko odeljaka ćete naučiti kako da pomoću Dreamweavera proverite sve svoje linkove. Videćete i kako da popravite greške, ako ih pronađete. Provera linkova Možete odjednom da proveravate linkove u jednoj datoteci, da odjednom proveravate linkove u više datoteka, ili da u jednom zamahu proverite ceo sajt. Funkcija Check Links iz Dreamweavera izveštava ove tri vrste mogućih problema: • • Broken links – Ovo su datoteke sa internim linkovima, koji ne sadrže pravilnu putanju da bi link radio kako treba. To znači da Dreamweaver ne može na sajtu da pronađe interne linkove na koje ovo ukazuje. External links – Spoljašnji linkovi su možda najozloglašeniji kod kreiranja slika koje ne vode nikuda. Tada se dobija ona poruka: "Error 404: File not found". To su datoteke koje se ne nalaze na Vašem sajtu (na primer http: //www. nekisajt.com). 182 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Eksterni linkovi se prikazuju tako da budete svesni eventualnih problema koji se mogu javiti. Link koji se pojavi na spoljašnjem linku ne znači da je taj link prekinut, već samo da je to izvan domena sistema za upravljanje linkovima koji postoji u Dreamweaveru. • Datoteke siročići – Ovo su datoteke koje nemaju linkove koji vode prema njima. Drugim rečima, ovo su datoteke za koje ne postoji navigacija koja vodi ka njima. Obično su ovo stare verzije nekih datoteka, koje se više ne koriste. Sa druge strane, ne možete jednostavno da pretpostavite da li su ovakve datoteke nepotrebne i da li ih treba obrisati. Pažljivo proverite pre brisanja. Bez obzira da li proveravate ceo sajt istovremeno, ili proveravate samo jednu ili dve datoteke, procedura je u osnovi ista. Da biste odjednom proverili sve linkove na sajtu, treba da uradite sledeće: 1. Upamtite sve otvorene dokumente. 2. Izaberite Site > Check Links Sitewide, ili desnim tasterom miša kliknite datoteku ili fasciklu iz liste Site Files, a onda iz pomoćnog menija izaberite opciju Sheck Links > Entire Site. Da biste proverili linkove samo za nekoliko datoteka, treba da uradite sledeće: 1. Upamtite i zatvorite sve otvorene dokumente. 2. U listi Site Files ili na mapi sajta izaberite datoteke koje želite da proverite. Više datoteka možete izabrati ako držite pritisnut taster Shift (Windows) ili Ctrl/Cmd (Macintosh), tokom izbora datoteka. 3. Desnim klikom kliknite bilo koji selektovani fajl i iz kontekstualnog menija izaberite Check Links > Selected Files/Folders. Ako želite da linkove proverite samo za jedan dokument, treba da uradite sledeće: 1. Otvorite dokument koji želite da proverite i ako je potrebno upamtite ga. 2. Izaberite File > Check Page > Check Links. Koji god metod da izaberete, Dreamweaver proverava linkove i prikazuje rezultat. Rezultat se prikazuje u prozoru Results, kod kojeg je prikazana kartica Link Checker. Uz pomoć padajućeg menija na vrhu prozora možete da vidite bilo koji od ova tri tipa linkova (prekinuti linkovi, spoljašnji linkovi i siročići). Sa leve strane prozora je prikazana datoteka koja pravi probleme. Sa desne strane je konkretan link, koji Dreamweaveru pravi probleme. Deo Orphaned Files nema drugu kolonu, pošto ne postoje linkovi koji su sa ovim povezani. Odavde možete ili da zatvorite prozor Results/Link Checker ili da listu upamtite u datoteku, kod koje su stavke odvojene tabulatorima. Nakon toga listu možete da uvezete na neku stranu, preko objekta Tabular Data (sa palete Layout Insert), ili da uvezete tekstualnu datoteku u program za obradu teksta, da biste ga odštampali. Popravka linkova Postoje dva načina za poptavku prekinutih i spoljašnjih linkova (ako je to potrebno). U oba slučaja morate da koristite prozor Results/Link Checker. Prvi metod je da dva puta brzo kliknete ime datoteke koja je prekinuta ili spoljašnji link. Ovim se u prozoru Document otvara datoteka, a sumnjivi link je istaknut. Ako je otvoren Property Inspector, onda je link istaknut u delu Link ili Src ovog Inspectora. Možete da ukucate pravu referencu, ili da preko ikone fascikle ili komande Point-to-File izaberete datoteku na koju link treba da vodi. Drugi način je verovatno lakši i brži, ali samo ako dobro poznajete sajt. U prozoru Link Checker kliknite jednom link koji je u pitanju (u desnoj koloni). Na taj način možete da unesete novi link. Ako ste trenutno u delu sa prekinutim linkovima, pojavljuje se ikona fascikle koja omogućava da pronađete pravi link. Ako postoje i drugi prekinuti linkovi sa istom referencom, Dreamweaver će Vas pitati da li treba i njih da ažurira. Upravljanje aktivom preko panoa Assets Pano Assets prati i omogućava da lako ažurirate ili ubacujete neke elemente koji se koriste na sajtu, kao što su slike, boje, medijalne datoteke (Flash, Shockwave i sl), ili skriptovi. Ovo je posebno korisno kada planirate da neke od ovih stavki koristite na više strana na sajtu. 183 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pano Assets ćete otvoriti ako izaberete Window > Assets, ili proširite grupu Files u svom panou i pređete na karticu Assets. Pano se sastoji od dva osnovna dela. To su lista aktive (donja polovina panoa) i deo za prikazivanje (gornja polovina). Izbor nekog elementa iz liste assets prikazuje taj element u gornjem delu. Pošto su ovi elementi organizovani po tipu, a ne po hijerarhijskoj strukturi fascikli koja se koristi u panou Site, u jednom trenutku možete da gledate samo jedan tip elementa. Prelazak od jednog na drugi tip elementa je moguć preko dugmadi koja se nalaze sa leve strane panoa. Tipovi elemenata su: • Images – Ovo datoteke sa slikama, kao što su GIF, JPEG ili PNG, koje se nalaze na sajtu. To su slike koje se nalaze u fascikli sajta, bez obzira da li su trenutno vezane za neki dokument. • Colors – Ovo su sve boje koje se koriste na sajtu, uključujući i boju pozadine, kao i boje teksta i linkova. • URLs – Ovo su spoljašnje URL adrese koje se nalaze u linkovima u dokumentima na sajtu. Tu su linkovi tipa HTTP, HTTPS, FTP, JavaScript, do lokalnih datoteka (file://) i email (mailto:) linkovi. • Flashmovies – Ovo su filmovi iz Flasha koji se nalaze u korenskoj fascikli lokalnog sajta. Ovde su prikazane samo SWF datoteke, a ne i FLA datoteke ili SWT šablonske datoteke. • Shockwave movies – Ovo su filmovi iz Shockwavea, koji su napravljeni preko Directora ili Authorware, a koji se nalaze na Vašem sajtu. • QuickTime i MPEG filmovi – Ovo su filmovi u formatu Apple QuickTime (.mov ili.qt), ili u MPEG formatu. • Scripts – Ovo su skriptovi pisani u JavaScriptu ili VBScriptu, koji postoje na sajtu. Prikazane su samo nezavisne skript datoteke. JavaScript koji se nalazi na Vašim stranama se ne uzima u obzir. • Templates – Kada se koriste kako treba, šabloni predstavljaju lak način za kreiranje i uređivanje sličnih strana. Pre nego što počnete da previše koristite ovakav dizajn, treba da pažljivo proučite koje su njihove prednosti i nedostaci. • Library – Biblioteke su slične šablonima, tako da promenom samo jednog primerka utičete na promene više drugih. Obično su mali elementi sadržaja, koji se koriste na više strana na sajtu, kao što je logo kompanije ili podrazumevani pano za navigaciju. 184 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Umetanje elementa iz aktive Pano Assets omogućava da lako pronalazite i ubacujete slike i ostale elemente u svoje dokumente. Ubacivanje medijalnih elemenata preko panoa Assets Slike i drugi medijalni elementi (Flash filmovi, Shockwave filmovi i sl.) se najjednostavnije ubacuju preko panoa Assets. Sve je u hvatanju i prevlačenju, ili izboru i kliku mišem. Da biste u svoj dokument ubacili medijalni element, pomoću tehnike uhvati i prevuci, treba da uradite sledeće: 1. U prozoru Document proverite da li je aktivan prikaz Design. 2. Otvorite pano Assets i kliknite željenu ikonu da biste videli tip elementa koji treba da se ubaci. 3. Iz liste assets uhvatite stavku koju želite da ubacite i prevucite je na željenu lokaciju u dokumentu. Iako element možete da prebacite bilo gde u dokumentu, njegova konačna pozicija u dokumentu zavisi od toka sadržaja koji se nalazi oko njega. Prevlačenje slike na sredinu pasusa dovodi do toga da tekst ide preko slike. Prevlačenje slike na desnu stranu neće postaviti sliku tu, ako je sadržaj strane levo poravnat. Da biste preko dugmeta Insert ubacili medijalni element, treba da uradite sledeće: 1. U prozoru Document proverite da li je aktivan prikaz Design. Kliknite da biste kursor postavili tamo gde želite da se postavi element. 2. Otvorite pano Assets i kliknite željenu ikonu, da biste videli tip elementa koji treba da se ubaci. 3. U panou Assets izaberite element koji želtie da ubacite. Nakoii toga kliknite dugme Insert. Umetanje URL adrese sa panoa Assets Ubacivanje URL adrese je malo složenije od ubacivanja medijalnih elemenata, pošto se URL adresa mora ubaciti kao href atribut za neki link. Evo kako se to radi: 1. Otvorite dokument i proverite da li ste u prikazu Design. 2. U dokumentu izaberite sliku ili tekst na koji treba da se doda link. 3. Otvorite pano Assets i kliknite ikonu URL, da bi se prikazal URL elementi. 4. Ili pronađite URL koji želite da primenite i prevucite ga m selektovanu stavku u prozoru Document, ili izaberite URL, i onda kliknite dugme Apply. Ubacivanje boja Elementi sa bojama nisu tako korisni, kao što biste možda pomislili u prvi mah. Oni se ne mogu primeniti na puno elemenata u dokumentu. Jedina vrsta elementa na strani, koji prihavata boje, jeste tekst. Kada se tekst boji na ovaj način, boja se dodaje kao deo oznake f ont (što se odbacuje u korist CSS formatiranja). Ako se ovo koristi zajedno sa biranjem boja u Dreamweaveru, onda ovakvo dodeljivanje boja može biti vrlo korisno. Evo kako se preko boja sa panoa Assets dodeljuje boja nekom elementu u dokumentu : 1. Otvorite pano Assets i kliknite ikonu sa primerkom boje. Prikazaće se boje koje možete da koristite. 2. Otvorite dokument na kome želite da radite ili izaberite stavku koju želite da obojite (nivo, tabelu, ćeliju tabele, itd.) ili otvorite okvir za dijalog odakle možete da birate boje (Page Properties, CSS Style Definition ili neka druga opcija). 3. U bilo kom okviru za dijalog ili Property Inspectoru da se nalazite, pronađite dugme za boju i kliknite ga da biste aktivirali izbor boja. 185 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 4. Umesto da birate boje na osnovu uzorka, prebacite kursor na pano Assets i kliknite element od kojeg želite da preuzmete boju. Favoriti u listi aktive Lista elemenata sadrži svaki element koji postoji na sajtu, uključujud boje, slike i URL adrese koje su možda samo jednom korišćene na sajtu. Obično, kako sajt raste i broj elemenata na sajtu raste. Kada počnete da rukujete sajtom od 30 strana, lako se može desiti da imate 50 ili 60 različitih slika, ako ne i više. Kao što možete da zamislite, ova lista elemenata postaje vrlo složena i kroz nju se sporo kreće. Da bi rešio ovaj problem, Dreamweaver ima elemente favorite. Od svih elemenata koji se na ovaj način mogu koristiti na sajtu, možete da izaberete samo one za koje ste sigurni da ćete ih ponovo koristiti. Te elemente ćete deklarisati kao favorite. Ovi favoriri se prikazuju na panou Assets kada pređete u prikaz Favorite. Ne samo da je lakše kretati se kroz listu od 10 ili 100 elemenata, nego se i prikaz Favorite može organizovati u fascikle, tako da se pristup još više olakša i logički definiše. Pregled favorita i rad sa njima Ove funkcije sa panoa Assets koje se mogu primeniti na obične elemente važe i za favorite. Da biste videli favorite i mogli sa njima da radite, kliknite radio dugme Favorites, koje se nalazi na vrhu panoa Asseets. Element sa sajta možete dodati u favorite, ako uradite jedno od sledećeg: • U prozoru Assets izaberite elemente koje želite da dodate u listu favorita. Nakon toga, kliknite dugme Add to Favorites u donjem desnom delu prozora. Ovo dugme izgleda kao znak plus (+) sa purpurnom trakom. • U prozoru Assets izaberite elemente koje želite da dodate u listu favorita. Otvorite pomoćni meni, tako što ćete kliknuti strelicu usmerenu u desno u gornjem desnom uglu panoa. Ovaj meni možete otvoriti i ako desnim tasterom miša kliknete neki od elemenata. • U prikazu Design u prozoru Document, izaberite elemente (ili objekte) koje želite da dodate. Desnim tasterom miša kliknite objekte, da biste otvorili pomoćni meni. Izaberite opciju Add to [Asset tip] Favorites. 1. 2. Lista favorita ne bi mnogo vredela, ukoliko ne biste mogli da menjate mišljenje i brišete stavke iz nje. Da biste neki element izbacili iz ove liste treba da uradite sledeće: Izaberite element koji želite da izbacite iz liste. Kliknite dugme Remove from Favorites. Možete i da desnim tasterom miša kliknete neki element i da iz pomoćnog menija izaberete opciju Remove from Favorites. Alternativno, možete i da u listi Favorites izaberete element i da pritisnete taster Delete. Možete i da obrišete celu fasciklu sa favoritima, čime se uklanja i sadržaj te fascikle. Elementi koje izbacite iz liste favorita nisu obrisani i sa sajta. Oni su jednostavno izbačeni iz liste Favorite Assets. Grupisanje elemenata u listi favorita Da biste izbegli kasniju zbrku, elemente možete da grupišete u fascikle. Na taj način, slike koje koristite za 186 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 glavnu navigaciju po sajtu možete da čuvate u posebnoj facikli, a da ostale slike smestite na drugo mesto. Kreiranje fascikli sa favoritima i postavljanje elemenata u njih ne menja lokaciju datoteke u strukturi fascikli na sajtu. To je samo dodatan način za bolje organizovanje elemenata koji čine aktivu. Evo kako se kreira fascikla u listi favorita i kako se u nju dodaje element: 1. Otvorite listu favorita. 2. Kliknite dugme New Favorites koje se nalazi u donjem desnom uglu panoa. Možete i da izaberete opciju New Favorites, ako desnim tasterom miša kliknete neki od elemenata. 3. Dajte ime fascikli i prevucite element u tu fasciklu. Podešavanje panoa Assets Kao i većina drugih stvari u Dreamweaveru, i pano Assets možete prilagoditi na različite načine. Pored toga što možete definisati svoje favorite (ovo smo već objasnili), možete i da promenite redosled prikazivanja elemanta. Podrazumevano se svi elementi prikazuju po rastućem alfabetskom redu (od A do Y), po imenu i vrednosti. Ovaj redosled možete da promenite ako kliknete zaglavlje kolone po kojoj želite da izvršite sortiranje. Ovim se elementi sortiraju po rastućem abecednom redu, ali za tu kolonu. Ako po drugi put kliknete zaglavlje kolone, sortiranje je i dalje po abecednom redu, ali sada po opadajućem (od Z do A). Ako sortirate kolone sa brojevima, kao što su veličina datoteke, onda je sortiranje po numeričkim vrednostima, a ne po abecedi, od najmanje prema najvećoj ili obrnuto. Možete da promenite i širinu kolona u panou Assets. Jednostavno postavite kursor direktno iznad linije koja odvaja dve kolone. Primetićete da kursor menja oblik u dvostruku strelicu. Sada možete da kliknete i prevučete kolonu dajući joj željenu širinu. Ovo se obično radi i kod većine prozora koji koriste kolone. Upotreba aktive na sajtu Dreamweaver omogućava da ovu aktivu koristite na različite načine. On čak omogućava da kopirate elemente i delite ih između različitih sajtova. Ako želite da neki element aktive iskopirate sa jednog sajta na drugi, treba da uradite sledeće: 1. Izaberite elemente koje želite da kopirate na drugi sajt. Možete da kopirate cele fascikle iz liste favorita. 2. Kliknite dugme sa strelicom usmerenom udesno, koje se nalazi u gornjem desnom uglu panoa. 3. Iz ovog menija izaberite opciju Copy to Site. Pojaviće se podmeni sa listom sajtova na koje je moguće kopirati. Izaberite jedan od sajtova iz liste. Izabrani elementi se kopiraju na zadati sajt i postavljaju u fascikle koje odgovaraju njihovim lokacijama na trenutnom sajtu. Ako neka fascikla trenutno ne postoji, ona se automatski kreira. Takođe je bitno da znate da se elementi koje kopirate na ovaj način, automatski dodaju u listu favorita na novom sajtu. Nakon što sajt na kome radite postane suviše velik, možete da zabrovite gde se nalaze neki elementi koje ste koristili. Dreamweaver može da Vam pomogne da ih pronađete. Ako samo želite da nađete gde se nalazi određeni element (ili grupa elemenata), koje ste koristili na lokalnom sajtu, treba da uradite sledeće: 1. U panou Assets izaberite element ili elemente za koje želite da pronađete lokaciju. 2. Kliknite desnim tasterom miša. Otvoriće se pomoćni meni. Ovom meniju možete da pristupite i ako izaberete dugme sa strelicom usmerenom udesno, koje se nalazi u gornjem desnom uglu panoa. 3. Iz ovog menija izaberite opciju Locate in Site. Pojaviće se pano Site, a element koji tražite će biti istaknut. Opcija Locate in Site nije na raspolaganju za boje i URL adrese, zato što se ova dva tipa ne nalaze u datotekama. To su jednostavno nizovi teksta koji se nalaze u okviru datoteka. Promena elemenata koji čine aktivu Preko panoa Assets možete lako da promenite neki od elemenata. Ovo može biti korisno ako želite da promenite više slika, ali ne želite da gazite kroz komplikovanu strukturu panoa Site. Promene preko panoa Assets možete da uradite na sledeći način: • Dva puta brzo kliknite ime elementa. Ovim se otvara podrazumevani editor (onako kako ste definisali u podešavanjima Dreamweavera). • Izaberite element i kliknite dugme Edit koje se nalazi u donjem desnom uglu panoa. Tip elementa koji ste izabrali doređuje šta se sledeće dešava. Sa elementima kao što su slike ili Flash filmovi, pokreće se spoljašnja aplikacija i u njoj se otvara datoteka koja je u pitanju. U tom slučaju, jednostavno promenite element i ponovo ga izvezite u fasciklu na lokalnom sajtu, prepisujući staru verziju. Boje i URL aderse neće pokrenuti posebnu aplikaciju. Ove tipove elemenata aktive možete da menjate samo 187 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 ako se nalaze u delu Favorites. Promena boja otvara okvir sa uzorcima, odakle možete da izaberete boju. Promena URL adrese otvara okvir Edit URL u kome možete da menjate URL, kao i nadimak koji se u panou Assets koristi za opis tog URL-a. Stavke iz biblioteke i šablona se menjaju direktno u prozoru Document. Kreiranje novog elementa u aktivi Iako pomoću panoa Assets ne možete da kreriate svaki tip elementa, možete da napravite novu boju, URL adresu, šablon i biblioteku. (Slike, Flash i Shockwave filmovi se prave izvan Dreamweavera.) Da biste mogli da pravite nove boje i URL adrese, morate da imate prikazane favorite. Da biste mogli da kreirate novu boju, morate biti sigurni da su trenutno prikazani u listi Favorite. Nakon toga izaberite deo Colors. Kliknite dugme New Color, koje se nalazi u donjem desnom uglu panoa. Možete da koristite i pomoćni meni, koji se otvara ako listu kliknete desnim tasterom miša. Otvoriće se uzorak sa bojama, odakle možete da izaberete novu boju. Nakon što ste izabrali boju, možete da joj date i nadimak. Da biste napravili novi URL, morate biti sigurni da je trenutno prikazana lista favorita, a onda izaberite deo URL. Kliknite dugme New URL koje se nalazi u donjem desnom uglu panoa. Možete da koristite i pomoćni meni, koji se otvara ako listu kliknete desnim tasterom miša. Otvoriće se okvir za dijalog Add URL u kome možete da definišete nadimak, kao i URL putanju za novi element. Rad bez sajta U Dreamweaveru MX 2004 je novost što je na kraju moguće raditi i bez definisanog sajta. Ovo je korisno ako imate samo jednu stranu, koju želite da napravite, a ne želite da stajete i podešavate sajt. Ako želite da radite bez sajta, u padajućem meniju panoa Site izaberite opciju Computer. Umesto da se prikaže lista datoteka u fascikli lokalnog sajta, pano Site sada prikazuje listu datoteka na Vašem računaru. Ovu listu možete da proširujete. Preko liste možete da pronađete bilo koji dokument koji želite da otvorite ili ubacujete. Dreamweaver neće insistirati da ove datoteke budu u korenskoj fascikli, a neće ni nuditi da u nju kopira te datoteke. Naravno da u ovom slučaju ne možete da koristite prednosti upravljanja sajtom. 188 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 14. Publikovanje i održavanje sajta Kako Dreamweaver radi sa udaljenim sajtovima Pre nego što dublje zađemo u funkcije i karakteristike udaljenih sajtova, koje nudi Dreamweaver, morate da shvatite šta Dreamweaver podrazumeva pod udaljenim sajtom. Tokom vašeg lutanja po Internetu ste verovatno primetili da adrese web strana prate osnovnu i srećom, intuitivnu šemu imena. Na primer, mnoge naslovne strane, odnosno podrazumevani dokumenti, imaju ime index.htm. Ako kliknete da biste videli stranu sa proizvodima nekog preduzeća, verovatno ćete biti preusmereni u podfasciklu sa proizvodom. Ne samo da ovo omogućava bolju organizaciju i održavanje, već ima i više smisla. Kada postavljate svoj web sajt (upload), Dreamweaver preslikava njegovu strukturu na udaljeni sajt, što je više moguće (sa nekim izuzecima). Ako na svom lokalnom sajtu imate datoteku widgets.htm, koja se nalazi u podfascikli products, onda nakon publikovanja sajta imate datoteku widgets.htm u podfascikli products na udaljenom sajtu. Iako se ovo čini previše jednostavnim, ovo preslikavanje pomaže na nekoliko načina: • Pomaže prilikom ažuriranja i održavanja sajta. • Pomaže kod izbegavanja prekinutih linkova, kao i drugih linkova koji iz nekog razloga nisu ispravni. • Pomaže da se spreči pojava više kopija jedne web strane ili datoteke sa slikom. Ovim se čuva prostor servera i u nekim slučajevima se smanjuje saobraćaj koji se zauzima. • Dodaje se nivo profesionalnosti Vašim stranama. • Lakše je shvatiti i pratiti relativne linkove. U suštini, da biste mogli da koristite većinu od alata Dreamweavera koji se koriste za rad sa udaljenim sajtovima, lokalni i udaljeni sajt moraju biti identične kopije. Održavanje strukture datoteka i fascikli je od vitalnog značaja za sve Vaše linkove. Ovo i nije problem, pošto Dreamweaver to radi umesto Vas (uključujući i kreiranje potrebnih podfasckli). On to radi automatski, preko komandi kao što su Synchronize, Get i Put. Pored ovoga ćete naučiti i kako da pravilno konfigurišete udaljeni sajt. Ovo se radi preko okvira za dijalog Site Definition. Definisanje udaljenog sajta u Dreamweaveru Kao i kod definisanja lokalnog sajta, i informacije vezane za udaljeni sajt se mogu uneti u Basic (Site Wizard) i Advanced režimu. Ovaj drugi način je efikasniji, ali i teži za novajlije, jer nudi više opcija. Ako želite da udaljeni sajt definišete u naprednom (Advanced) režimu, otvorite okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili iz padajućeg menija panoa Site izaberite opciju manage Sites). U okviru za dijalog Manage Sites izaberite svoj sajt i kliknite Edit. Kada se otvori okvir za dijalog Site Definition, kliknite karticu Advanced, a onda idite na kategoriju Remote Info. Jedina opcija koja stoji na raspolaganju kada prvi put dođete u deo Remote Info je meni Access. Ono što ovde izaberete dinamički generiše ostale opcije. U narednim odeljcima ćemo se pozabaviti mogućnostima koje ovde možete podešavati. 189 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Bez uspostavljanja veze Ako kao metod pristupa izaberete None, onda nemate na raspolaganju druge opcije i preko Dreamweavera ne možete da prebacite svoj sajt na udaljenu lokaciju. Ako ne uspostavite vezu ne možete ni da koristite neke od naprednih mogućnosti za rukovanje sajtovima, koje postoje u Dreamweaveru. Iako u slučaju kada nemate definisan način pristupa udaljenom sajtu ne možete ni da koristite Dreamweaver za rukovanje udaljenim sajtom (kao što su prebacivanje Vašeg sajta na taj udaljeni sajt), to možete da uradite preko nekog nezavisnog programa, kao što su FTP klijenti, poput CuteFTP-a na Windows platformi (www.cuteftp.com). Ako niste familijarni sa ovakvom praksom, onda se ipak preporučuje da koristite ugrađene funkcije za rukovanje sajtovima, koje postoje u Dreamweaveru. FTP FTP je skraćenica za File Transfer Protocol i on je verovatno najrasprostranjeniji metod za prebacivanje web strana na web server. Vi ćete verovatno koristiti ovaj metod kada budete pravili organizaciju web strana. Slično kao kod Hypertext Transfer Protocol (HTTP, koji se koristi za transfer web strana preko Interneta), i FTP zahteva klijentsku i serversku aplikaciju. U ovom slučaju Dreamweaver se ponaša kao FTP klijent. Softver na udaljenom serveru se ponaša kao FTP server. Ako kao metod pristupa u Dreamweaveru izaberete FTP onda u okviru za dijalog Site Definition treba da unesete sledeće informacije : 190 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Host Directory Ovim se definiše fascikla na serveru gde će se nalaziti prebačeni sajt. To je isto kao facscikla na lokalnom račuinaru. Dosta servera ima osnovnu adresu sajta www.htdocs ili public_html. Ako niste sigurni koja je fascikla domaćin, ostavite ovo polje prazno. Ovo je podrazumevano glavna fascikla FTP hosta. (Neki host računari koriste kombinaciju korisničko ime/lozinka da Vas automatski prebace u odgovarajuću fasciklu.) Ako je u polju host directory neispravna putanja, Dreamweaver možda neće uspeti da se poveže. čak i ako je FTP informacija ispravna, a vi preko nje možete da se povežete sa drugim klijentima. Ako imate problema kod povezivanja, obrišite vrednost u polju Host Directory. Nakon što se povežete, možete da proverite koja je prava fascikla. • Login – Ovo je korisničko ime Vašeg naloga. • Password – Ovo je lozinka koja se koristi za proveru identiteta za vaš nalog kod pristupa FTP serveru. • Use Passive FTP – Ovo je potrebno kod nekih firewall-ova, a omogućava Dreamweaveru da podesi FTP sesiju umesto da to radi FTP server. Ako niste sigurni šta ovde treba uneti, ostavite polje nepotvrđeno i proverite sa svojim mrežnim administratorom. • Use Firewall – Ovo diktira da li će Dreamweaver koristiti podešavanja firewalla za povezivanje sa FTP serverom. Ako je potrebno da podesite ovu vrednosti, pitajte svog mrežnog administratora. • Use Secure FTP – Ovim se omogućava da šifrujete svoje informacije o nalogu. Ne šifruju se datoteke koje se prebacuju. • Use Check In /Check Out Ovim se uključuje softver Dreamweavera za proveru verzija. Veza tipa Local/Network Ovakva veza se koristi kada se web server na koji publikujete svoje strane nalazi u istoj lokalnoj mreži (LAN) kao i vi. Ova opcija se često koristi kada pravite intranet sajt ili ako nudite dizajn i smeštaj tuđih sajtova. Kod ovakvog tipa veze, morate da zadate putanju do udaljene fascikle. Te informacije možete da unesete ili preko dugmeta Browse možete da pronađete fasciklu na udaljenom sajtu. 191 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kod ovakvog načina povezivanja imate mogućnost automatskog osvežavanja liste datoteka na udaljenom sajtu. Ako je ova opcija uključena, Dreamweaver osvežava tu listu za Vas (na primer, povezuje se sa udaljenim računarom i ponovo pravi listu udaljenih datoteka) svaki put kada se dodaju ili brišu udaljene datoteke. Ako ne uključite ovu opciju i dalje to možete da uradite ručno, ako kliknete dugme Refresh u panou Site, ili ako izaberete View > Refresh u meniju panoa Site. SourceSafe Database, RDS i WebDAV SoruceSafe, RDS i WebDAV su sistemi za proveru verzija, odnosno alati koji omogućavaju da više programera radi zajedno i da prate datoteke, tako da se ne desi da jedan programer prebriše nešto što je neko drugi uradio. Visual SourceSafe (VSS) je Microsoftov program. RDS i WebDAV su protokoli (kao FTP), što znači da je u pitanju skup pravila koja se koriste za komunikaciju i praćenje datoteka. Protokol je skup pravila oko kojih su se računari složili prilikom transporta datoteka. Ove opcije koje se odnose na udaljena podešavanja su različiti načini povezivanja računara i prebacivanja datoteka. Rad sa udaljenim sajtom Nakon što u okviru za dijalog Site Definition podesite informacije vezane za udaljeni sajt, možete da komunicirate sa udaljenim serverom. U ovom odeljku ćemo pokazati koji su koraci koji spadaju u upravljanje udaljenim sajtom. Napredniju diskusiju, kao što je ona koja se odnosi na sinhronizaciju, ostavili smo za kasnije. U ovom odeljku smo objasnili dve osnovne funkcije, a to su uspostavljanje i prekidanje veze sa udaljenim serverom, kao i prebacivanje datoteka i njihovo preuzimanje sa udaljenog servera. Pregled informacija sa udaljenog servera u panou Site Kada proširite pano Site tako da se prikazuju i leva i desna strana, imate mogućnost da prikažete mapu sajta ili listu Remote Files. Oni se prikazuju u levom panou. Ako želite da prikažete listu Remote Files, kliknite 192 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 ikonu Files u gornjem levom uglu proširenog prozora. Za razliku od Dreamweavera, većina FTP programa prikazuje lokalne informacije sa leve, a informacije sa udaljenog sajta sa desne strane. Ako biste želeli da se i u panou Site koristi takav način prikazivanja, otvorite okvir za dijalog Prefences > Site i promenite raspored. Uspostavljanje i prekidanje veze Dugme Connect/Disconnect omogućava da uspostavite i prekinete vezu sa udaljenim FTP serverom. Ova je opcija na raspolaganju i ako koristite sistem za kontrolu koda, kao što je SourceSafe ili WebDAV. Ako publikujete materijal na server koji se nalazi na Vašem računaru ili u Vašoj mreži, ovo dugme je sive boje, pošto ste sa lokalnim serverom automatski povezani. Ovo dugme je sive boje i ako niste zadali udaljeni FTP server u definiciji sajta. Ako koristite FTP vezu, morate da izaberete dugme Connect da biste se povezali sa FTP serverom pre nego što počnete prebacivanje datoteka iz lokalne u udaljenu fasciklu. Kada se povežete, u donjem levom uglu ikone dugmeta Connect se pojavljuje zeleno svetlo. Tako možete da znate da li ste povezani sa udaljenim serverom. Ako kliknete to dugme veza se prekida. Ako, prilikom uspostavljanja veze sa udaljenim serverom naiđete na probleme (ili ako samo želite da znate šta Dreamweaver radi kada pritisnete dugme Connect), možete da pogledate FTP dnevnik. Ovo se dešava ako iz menija panoa Site izaberete opciju View > Site FTP Log, ili ako otvorite pano Results (Window > Results) i pređete na karticu FTP Log. Tu su zapisi koji nastaju u realnom vremenu, a odnose se na FTP zahteve i odgovore. Ovo će Vam pokazati i kako Dreamweaver kreira fascikle, kako prebacuje i preuzima datoteke i koristi druge FTP komande. Postavljanje i preuzimanje Kada ste povezani sa udaljenim sajtom, na njega možete da postavljate ili sa njega preuzimate datoteke. Kada želite da prebacite datoteke na sajt, to je proces postavljanja, pošto postavljate datoteke na udaljeni sajt. Kada želite da preuzmete datoteke sa udaljenog servera, to je proces dobijanja, pošto dobijate datoteku sa udaljene fascikle. U Dreamweaveru datoteke možete preuzimati i prebacivati na sledeće načine: • Kliknite dugme Get ili Put na paleti panoa Site. • Izaberite Site > Get ili Site > Put sa menija panoa Site. • Desnim tasterom miša kliknite izabranu datoteku i iz pomoćnog menija izaberite Get ili Put. Možete i da izaberete zabavan ali i opasan način, a to je prevlačenje datoteka, u panou Site, sa jednog sajta na drugi. Ako prilikom postavljanja ili preuzimanja datoteka, postoji neka starija verzija te datoteke, ona se prepisuje. Ako postoji novija verzija, Dreamweaver će Vas upozoriti i omogućiti da prekinete operaciju. Kada izaberete da preuzimate ili postavljate datoteke, otvara se okvir za dijalog Dependent Files. U njemu se pita da li treba da se uključe sve datoteke koje su linkovima povezane sa tim HTML dokumentom. Tu spadaju i slike i drugi multimedijalni sadržaj. Izaberite Yes ili No. Dreamweaveru možete da kažete i da li ubuduće treba da postavlja isto pitanje. Ako odlučite da Dreamweaver više ne treba da postavlja to pitanje, mogli biste da se kasnije predomislite. Ovu opciju možete ponovo da uključite ako odete u deo Site u okviru Preferences i potvrdite polje Prompt on Get or Put. Ako odlučite da ovu mogućnost ne koristite, možete da naterate da Vas Drearmveaver to pita samo povremeno, ako prilikom izbora dugmeta Get ili Put držite pritisnut taster Alt. Sinhronizacija lokalnog i udaljenog sajta Tokom svog "programerskog" života ste sigurno probdeli nekoliko noći u pokušaju da projekat završite na vreme. Možda se desilo da sa izlaskom sunca, dok i dalje furiozno radite, zaboravite da li ste poslednju verziju prebacili na udaljeni sajt. Kako da pratite koje su najnovije datoteke i da li su postavljene na udaljeni sajt? Dreamweaver nudi dva načina da se ovo uradi. Može se raditi ručno i automatski. U narednom odeljku smo objasnili stari manuelni metod. Nakon toga smo objasnili snagu komande Synchronize, koja omogućava da ovo radite automatski. Izbor novijih datoteka na udaljenom i lokalnom sajtu Komanda Select Newer Local i komanda Select Newer Remote može da se koristi za manuelnu sinhronizaciju sajtova. Ova funkcija poredi datum promene svake datoteke na lokalnoj mašini sa datumom promene datoteke na udaljenom sajtu. Novije lokalne datoteke Ako želite da izaberete novije datoteke na lokalnom sajtu, desnim tasterom miša kliknite pano Site i izaberite opciju Select > Newer > Local, ili iz menija panoa Site izaberite Select > Select Newer Local. Nakon što 193 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dreamweaver uporedi datume promena datoteka na udaljenom i lokalnom sajtu, on će u lokalnom prozoru istaći datoteke koje su novije u odnosu na datoteke na udaljenom sajtu. Odavde možete da kliknete dugme Put i da sve datoteke koje su novije sa lokalnog sajta prebacite na udaljeni sajt. Opcija Select Newer Remote Ako na jednom sajtu radite kao deo tima, moguće je da na udaljenom sajtu postoji novija verzija dokumneta, od one koju imate na lokalnom sajtu. U tom slučaju, pre nego što počnete da menjate dokument, treba da proverite da li na udaljenom serveru postoji novija verzija. Ovo možete da uradite ako u panou Site kliknete desnim tasterom miša i izaberete opciju Select Newer Remote, ili ako iz menija panoa Site izaberete Site > Select Newer Remote. U tom slučaju se ističu datoteke koje su novije na udaljenom sajtu. Ako želtie da tu noviju verziju prebacite kod sebe, dovoljno je da kliknete dugme Get. Pošto Dreamweaver ističe samo one datoteke koje su novije, to one koje imaju ista vremena (odnosno kod kojih su datum i vreme promene isti) nisu izabrane. Ako je sajt već sinhronizovan, onda se posle ovih komandi neće izabrati nijedna datoteka. Možda ćete pomisliti da se ništa nije desilo, ali su oba sajta ažurirana. Treba da znate da Dreamweaver proverava sve datoteke na sajtu, odnosno da komanda Select Newer Remote može da potraje. To je slučaj ako sa udaljenim serverom imate sporu vezu. Ponekad možete da pomislite da je Dreamweaver zamrznut. Budite strpljivi, posebno ako ste povezani preko modema. Komanda Synchronize Da biste pristupili komandi Synchronize izaberite Site > Syncrhonize. Ova komanda je mnogo bolji način za sinhronizaciju datoteka, nego ručno selektovanje novijih datoteka. Deo lepote i snage ove komande je u tome da možete da je podešavate onoliko koliko želite. To znači da možete da sinhronizujete samo jednu fasciklu ili ceo sajt. Možete i da izaberete da obrišete neku datoteku na udaljenom sajtu, koja ne postoji na lokalnom, ili obrnuto. Ovo nije moguće kod prethodnog (ručnog) metoda. Sinhronizaciju sajta pomoću komande Synchronize ćete izvršiti na sledeći način: 1. Osim u slučaju da želite da sinhronizujete ceo sajt, izaberite datoteke koje želite da sinhronizujete. 2. Izaberite Site > Synchronize. Otvoriće se okvir za dijalog Synchronize Files. 3. Iz padajućeg menija Synchronize izaberite da li želite da ažurirate ceo sajt ili samo izabrane datoteke. 4. Iz padajućeg menija Direction izaberite neku od sledećih opcija: • • • Prebacivanje samo onih datoteka koji su novije na lokalnom nego na udaljenom sajtu (datoteke će se samo slati na udaljeni sajt). Preuzimanje samo onih datoteka koje su novije na udaljenom nego na lokalnom sajtu (datoteke se samo preuzimaju). Sinhronizacija lokalnog i udaljenog sajta (datoteke se i šalju i preuzimaju). 5. Ako ste iz menija Direction izabrali opciju Get and Put Newer Files, idite pravo na korak 6. Ako ste izabrali neku od druge dve opcije, treba da podesite još jednu dodatnu opciju. Ako prebacujete novije datoteke na udaljeni sajt, na lokalnom disku možete da obrišete te datoteke. Potrebno je samo da potvrdite odgovarajuće polje u donjem levom uglu. Treba da imate na umu da je brisanje datoteka konačna operacija i da se ne može poništiti. Ovu opciju treba koristiti vrlo pažljivo. Na serveru često postoje datoteke koje su potrebne, kao što su dnevnici, skriptovi i sl. za koje na lokalnom sajtu ne postoje odgovarajuće datoteke. Slično se može desiti da imate lokalne datoteke, kao što su PNG, FLA ili fascikle sa šablonima i bibliotekom, koji se ne prebacuju na server, ali su ipak potrebne. 194 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 6. Pritisnite Preview. Ovim se obrađuju datoteke koje sinhronizuju i otvara se prozor Synchronize. Na taj način možete da vidite šta će se desiti ako kliknete OK. Prikazaće se broj datoteka koje će biti ažurirane, akcija koja će se desiti sa tom datotekom (get, put ili delete), kao i ime datoteke. 7. U koloni Action ovog okvira za dijalog su podrazumevano potvrđena sva polja. Ako neko polje ne potvrdite, onda se datoteka i ne obrađuje. Na taj način možete da osigurate da tačno znate šta se dešava, odnosno koje promene će napraviti Dreamweaver. Ovo je samo za slučaj da znate nešto što on neće uraditi. 8. Kliknite OK da biste zatvorili okvir za dijalog. Kada sinhronizaciju vršite sa opcijom Get Newer Files from Remote možete da obrišete lokalne datoteke kojih nema na udaljenom sajtu. Ako sinhronizujete sa opcijom Get Newer Files from Local, možete da obrišete datoteke na udaljenom serveru, kojih nema na lokalnom serveru. Sa ovim opcijama treba da budete izuzetno pažljivi. Najčešće se izvorne datoteke, kao što su .psd datoteke iz Photoshopa, ili .png iz Fireworksa, čuvaju u fasciklama na lokalnom sajtu. Ove datoteke ne bi trebalo ni da se prebacuju ni da se brišu. Slično se može desiti da na web serveru postoje neophodne datoteke (udaljeni sajt), koje nemaju svoje parove na lokalnom sajtu. To su, na primer, skriptovi ili statistika web sajta. Nakon što završite sinhronizaciju, možete da vidite koje je akcije Dreamweaver preduzeo. Dreamweaver prikazuje napredak sinhronizacije i nakon što završi omogućava da upamtite tekstualnu datoteku sa izvršenom procedurom. Sakrivanje Pošto se često dešava da na svom lokalnom sajtu imate aktivu, koja se nikad ne prebacuje na udaljeni sajt, Dreamweaver omogućava da određene fascikle i datoteke sakrijete. Sakrivanje sajta omogućava da isključite fascikle i tipove datoteka iz određenih operacija, kao što su preuzimanje ili prebacivanje (get i put). Treba da znate da možete da sakrijete određene tipove datoteke (kao što je PNG), ali ne i konkretne datoteke. Stavke koje sakrivate su specifične za sajt, što znači da svaki sajt na kome radite može da sakriva različite fascikle i tipove datoteka. Fascikle i tipove datoteka možete da sakrivate kako na lokalnom, tako i na udaljenom sajtu. Kada je fascikla sakrivena, onda se isključuje iz sledećih operacija: • Put/Get • Check In/Check Out • Undo Checkout • Reports • Select Newer Local/Select Newer Remote • Check Links Sitewide/Change Links Sitewide • Synchronize • Find/Replace Sitewide • Asset Panel Contents • Template Updating/Library Updating Uključivanje i isključivanje sakrivanja Mogućnost sakrivanja je podrazumevano uključena. Ako želite da ovo isključite, otvorite okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili upotrebite padajući meni Site u panou Site), desnim tasterom kliknite pano Site i izaberite Cloaking > Settings, ili iz menija panoa Site izaberite Site > Cloaking > Settings. Idite u kategoriju Cloaking i uključite ili isključite opciju Enable Cloaking. Ako isključite sakrivanje, onda sve sakrivene datoteke opstaju otkrivene. Dreamweaver neće zaboraviti da ste ih jednom sakrili. Ako kasnije ponovo uključite sakrivanje, te datoteke ponovo postaju sakrivene. 195 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Sakrivanje datoteka i fascikli Ako želite da sakrijete neku fasciklu, kliknite je desnim tasterom miša i u panou Site izaberite Cloaking > Cloak. Možete i da izaberete fasciklu i da iz menija panoa Site izaberete Site > Cloaking > Cloak. Sakrivena datoteka se prikazuje sa dijagonalnom crvenom linijom preko nje. Sakrivanje pojedinačnih datoteka se radi na malo drugačiji način. Umesto da sakrijete konkretnu datoteku, sakrivate određeni tip datoteke, što se definiše ekstenzijom datoteke. Ovo ćete uraditi tako što ćete otvoriti okvir za dijalog Site Definition (izaberite Site > Manage Sites, ili upotrebite padajući meni Site u panou Site) i idite u kategoriju Cloaking. Uključite sakrivanje na bazi tipa datoteke, preko opcije Cloak Files Ending With. Dreamweaver podrazumevano nudi da sakrijete PNG i FLA datoteke, odnosno datoteke koje dolaze iz Fireworksa i Flasha. Zadajte tip koji treba sakriti tako što ćete uneti ekstenziju od tri slova, koja se primenjuje na tip datoteke koju sakrivate. Pojedine stavke treba da odvojite razmakom. Ako ne želite da sakrivate PNG ili FLA datoteke, samo obrišite te stavke. Od sada pa nadalje će sve datoteke koje pripadaju izabranom tipu u panou Site biti označene crvenom linijom. Otkrivanje Ako želite da otkrijete sakrivene datoteke, bez obzira da li ste ih sakrili po tipu ili po lokaciji, kliknite desnim tasterom miša u panou Site i izaberite Cloaking > Uncloak All, ili izaberite Site > Cloaking > Uncloak All iz menija u panou Site. Dreamweaver će pitati da li ste sigurni da želite da to uradite. Otvoriće se okvir za dijalog sa pitanjem: 'Are you sure You Want to Do This?". Kliknite Yes. Sada su sve datoteke i fasickle otkrivene, bez obzira na tehniku koju ste koristili da ih sakrijete. Rad bez sajta: Definisanje veze sa udaljenim serverom Ako ne želite da radite u okviru sajta, ali i dalje želite da na server prebacujete web strane, Dreamweaver 196 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 omogućava da definišete udaljenu vezu, bez definisanja sajta. Udaljenu vezu ćete napraviti ako desnim tasterom miša kliknete ikonu FTP and RDS Servers, koja se nalazi u panou Site, ili ako iz menija u panou Site izaberete meni Servers. Otvoriće se okvir za dijalog Configure Server. Vezi dajte ime koje ćete kasnije prepoznati. Unesite podešavanja slična onima koja ste zadavali u kategoriji Remote Info u okviru za dijalog Site Definition. Kada završite, kliknite OK da biste zatvorili okvir za dijalog. U panou Site se sada prikazuje lista datoteka i fascikli na serveru sa kojim ste se povezali. Ubuduće će proširivanje veze sa tim serverom u panou Site, radi prikazivanja datoteka, istovremeno značiti i uspostavljanje te veze, naravno, ako već pre toga nije uspostavljena. Ako želite da na udaljenom serveru sačuvate dokument (da ga prebacite tamo) treba da uradite sledeće: 1. Otvorite dokument koji želite da premestite na server i izaberite File > Save to Remote Server. 2. Kada se pojavi okvir za dijalog Save File, u listi sa leve strane pronađite svoju vezu. Prikazaće se struktura fascikli na serveru. Izaberite fasciklu u koju želite da smestite datoteku i kliknite OK. Ovim se dokument prebacuje na udaljeni server. Ako želite da otvorite datoteku sa udaljenog servera, u listi sadržaja servera u panou Site, desnim tasterom miša kliknite tu datoteku i izaberite opciju Open. Ovim se otvara kopija datoteke. Datoteka se ne prebacuje na lokalni server. Ovo možete da zaključite ako u prozoru Document pogledate naslovnu liniju otvorenog dokumenta. 197 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 198 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 15. Kreiranje dinamičkih sajtova u Dreamweaveru Osnovno o dinamičkim sajtovima Statička web strana je ona koja se u potpunosti kreira unapred, sa postavljenim tekstom i slikama. Ona se nalazi na web serveru i čeka da je posetilac pogleda. Dinamička web strana sadrži mesta na kojima server ubacuje određeni sadržaj i to u trenutku kada korisnik zatraži stranu. Tu su i instrukcije kako da server napravi tu stranu. Ako pogledate kako se web strane šalju od servera do pretraživača, shvatićete i kako ovo radi. Kako rade statičke strane Kada posetilac klikne link ili unese URL adresu, pretraživač šalje zahtev u obliku URL-a, koji ide na server. Server pronalazi stranu i odgovara tako što je šalje nazad do pretraživača. Ovo je model zahtev-i-odgovor (request-and-response). Zahtev je HTTP zahtev, odnosno koristi se protokol http://. Ovaj protokol se zadaje pre URL adrese. Softver koji predstavlja web server se naziva i HTTP Kako rade dinamičke strane Dinamički podaci u ovu jednačinu ulaze na tri načina: • Uključivanje na strani servera (Server-Side Include - SSI) • CGI skriptovi • Povezivanje sa bazom podataka preko aplikacionih servera Iako je namena ovog poglavlja da pokaže kako funkcioniše treći metod, ipak smo objasnili sva tri načina, da biste videli kako su oni povezani. Uključivanje na strani servera (SSI) Najjednostavnija vrsta dinamičkog sadržaja, i ona koju je najlaše razumeti, je SSI. SSI je mesto koje se nalazi u HTML dokumentu, koje sadrži instrukcije da server treba da ga zameni nekim podacima koji se dinamički generišu. Podaci koji se ubacuju mogu biti delovi unapred definisanog koda, ili tekući datum i vreme, koji su prikupljeni iz nekog skripta ili iz baze podataka. Kod za SSI bi mogao da izgleda ovako: <!--#include virtual="mydata.html" --> <!--#echo var="DATE_LOCAL" --> <!--#exec cgi="/cgi-bin/sample_script.pl" --> HTML dokument koji sadrži SSI se pamti u datotekama sa posebnom ekstenzijom, obično.shtm ili.shtml. Ovim se server upozorava da postoji SSI. Kada server primi zahtev za nekim SHTML dokumentom, on odgovara pronalaženjem SSI-ja koji je ugrađen na toj strani, izvršenjem instrukcija koje su tu zadate i ubacivanjem rezultujućih podataka u dokument, koji se zatim šalje do pretraživača. Obično ovo obuhvata postavljanje nekih realnih podataka (kao što su datum i vreme, ili čak sadržaj neke druge datoteke na serveru) na mesto koje je definisao SSI. Dokumenti sa CGI skriptovima Prave dinamičke strane se mogu napraviti preko CGI skriptova. Ovi skriptovi obrađuju zahteve pretraživača i šalju odgovor, pri čemu se pamti ono što je korisnik uneo, a isporučju se web strane sa sadržajem za koji se unapred zna samo gde će se nalaziti. Strane čak mogu i da se prave u vreme izvršenja, na osnovu niza parčića koda. Za ovu diskusiju je potrebno samo da znate da se CGI skriptovi (obično pisani u Perlu) nalaze na web serveru u posebnoj fascikli. Ova fascikla se generalno zove cgi-bin. Kada korisnik popuni formu, akcija te forme može biti URL adresa CGI skripta. Evo kako to izgleda (URL je ispisan masnim slovima): <form name="theForm" action="http://www.domain.com/cgi-bin/myscript.cgi" method="post"> Kada kliknete dugme Submit, pretraživač traži zadati skript i prosleđuje mu promenljive sa forme. Ovo se prosleđuje kao deo URL adrese, ili kao pridružena pošta. Pošto je ekstenzija strane koja se traži.cgi ili.pl (u zavisnosti od softvera koji se koristi), web server zna da tražena strana ne može da se samo pošalje pretraživaču, već pronalazi skript i izvršava ga. Skript može da obavlja neke jednostavne zadatke, kao što je 199 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 slanje onog što je korisnik uneo na određenu adresu, ali može i da obavlja složenije poslove, kao što su neki proračuni sa tim korisnikovim podacima, komunikacija sa bazom podataka, itd. Aplikacioni serveri i povezivanje sa bazama podataka Treći i najmoćniji način za kreiranje dinamičkih web strana je upotreba baza podataka, koje obezbeđuju sadržaj, zajedno sa specijalnim programima, aplikacionim serverima, koji u trenutku izvršenja prave web strane. Proces generalno teče na sledeći način: 1. Pretraživač šalje HTTP zahtev koji sadrži URL adresu dokumenta sa ekstenzijom kao što je.asp,.aspx,.cfm,.php ili.jsp. 2. Web server prepoznaje ekstenziju, pronalazi traženu stranu i aktivira aplikacioni server. Ovo može biti Active Server kontrola, ugrađena u Microsoftov web server, ColdFusion Server, Tomcat Java server ili PHO modul. 3. Aplikacioni server čita dokument i izvršava skriptove koji u njemu postoje, ili interpretira korisničke oznake koje tu pronađe. Ovi skriptovi i oznake obično sadrže zahteve za nekom vrstom informacija iz baze podataka (na primer, "ovde postavi sadržaj polja Product Name, iz baze Widget International"), ili instrukcije da treba nešto promeniti u bazi (na primer, "U polje Username u bazi Books Online, dodaj Johna Smitha). 4. Aplikacioni server šalje ove zahteve i instrukcije, zbirno su to upiti, do sistema za upravljanje bazama podataka, kao što su Access, ili MySQL, koji pronalaze odgovarajuću bazu podataka i izvršavaju traženu akciju. Ako su tražene neke informacije, one se šalju nazad na aplikacioni server. 5. Apliacioni server konstruiše HTML stranu koja sadrži tražene informacije, formatirane prema instrukcijama u prvobitnom dkoumentu. Sve to se šalje nazad do web servera. 6. Web server ovu stranu šalje do pretraživača. Operativni sistem na serveru i HTTP serverski softver Web server je računar koji koristi neku verziju operativnog sistema kao što su Windows ili Unix/Linux (uključujući i Mac OS X), na kojima radi specijalni program koji obrađuje HTTP zahteve. Termin web server u priči o dinamičkim sajtovima obično ukazuje ne na sam računar, već na program koji tu radi. Program se naziva i HTTP serverom, da bi se razlikovao od aplikacionog servera. Programi koji se najčešće koriste kao serveri su opisani u narednim odeljcima. Apache Apache je danas najpopularniji program. Njega pravi i održava firma Apache Software Foundation. Instaliran je na preko 50% svih web servera. Apache je open source, pa je prema tome besplatan ili vrlo jeftin. On je stabilan i dobar, a može da radi na bilo kom operativnom sistemu. Internet Information Server Microsoftov Internet Information Server (IIS) je po popularnosti odmah iza Apachea. On je snažan i fleksibilan, ali pošto je proizvod Microsofta, radi samo na Windows operativnim sistemima (NT, 2000 ili XP). Baza podataka U srcu web sajta koji se upravlja podacima je, naravno, baza podataka. Da bi sistem mogao da radi, mora da postoji baza podataka i ona mora da se nalazi na web serveru, ili na računaru kome web server može da 200 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 pristupi. Da biste kreirali bazu podataka i mogli da sa njom komunicirate, morate imati softver po imenu sistem za upravljanje bazama podataka (database management system - DBMS). Da bi baza bila deo sistema, mora da se nalazi na serveru. Hijerarhijska skladišta podataka Baze podataka informacije čuvaju u tabelama, odnosno nizu polja (kolona) i zapisa (vrsta). Dodavanje novog kupca u bazu dodaje novi zapis, odnosno vrstu. Dodavanje novog polja, ili kolone, znači da se o tom kupcu sada čuva još neko parče informacija.Ovakva struktura tabele se naziva hijerarhijskim skladištem podataka. Relacione baze podataka Hijerarhijsko skladištenje podataka nije tako loše, ali ne može da pomogne kod rukovanja složenim informacijama. Sofisticiranije baze podataka, one koje se i koriste kod web sajtova upravljanim podacima, su relacione baze podataka. Ovim bazama rukuje sistem za upravljanje relacionim bazama podataka (RDBMS). Relacione baze podataka imaju sledeće mogućnosti: • Višestruke tabele Relaciona baza podataka informacije čuva u nizu tabela, koje su povezane nekim zajedničkim ključnim poljima. • Primarni i strani ključevi Ključevi uspostavljaju vezu između tabela. Svaka tabela mora da sadrži jedno polje označeno kao primarni ključ. To je jedinstvena vrednost za svaki zapis. Preko ove vrednosti možete da pronađete određeno polje. Svaka tabela je povezana sa drugim tabelama preko primarnog ključa iz te druge tabele, koji u prvoj predstavlja strani ključ. Primarni ključevi postaju strani ključevi u tabeli Order, čime se uspostavlja veza između tabela. Upiti i SQL iskazi Baza podataka je korisna samo ako možete da pronađete, ažurirate i analizirate informacije koje iz nje dolaze. Upite bazi podataka šaljete preko sistema za upravljanje bazom podataka. Koliko je ljudi naručilo proizvod J-9995 od januara prošle godine? Da li je u odnosu na prošlu godinu neku stavku naručilo više ili manje ljudi? Koja je najskuplja stavka koja je naručena od marta? Sortiraj kupce po imenu, poštanskom broju ili državi. Povećaj cene svih proizvoda u bazi za 5 procenata. Standardni jezik koji se koristi za postavljanje upita bazi podataka je Structured Query Language (SQL). Zato se i upiti koji se šalju u bazu zovu SQL upiti. Aplikacioni serveri sa sistemima za upravljanje bazama podataka komuniciraju preko drajvera. To su programi koji definišu kako se informacije prebacuju u i iz baze podataka. Najčešći formati drajvera baze podataka su Microsoftov Open Database Conectivity (ODBC) i Sunov Java Database Conectivity (JDBC). Za sisteme upravljanja bazama podataka sa kojima se možete povezati preko nekog od ovih formata se kaže da su ODBC ili JDBC kompatibilni. Standardni DBMS programi Da bi funkcionisao kao deo onlajn sistema, sistem za upravljanje bazom podataka mora biti relaciona baza, mora biti u stanju da radi pod operativnim sistemom koji server traži, mora da razume SQL iskaze i mora biti kompatibilan sa ODBC-om, JDBC-om ili nekim drugim standardnim formatom drajvera. U ovom odeljku smo opisali neke sisteme za upravljanje bazama podataka koji se najviše koriste. Microsoft Access je najpopularniji program baze podataka. Koristi se generalno u svim poslovima, ali najčešće za male baze do baza srednje veličine. Access nije baš tako moćan DBMS sistem. Njegovo osnovno ograničenje u onlajn upotrebi je da ne može da prihvati veliki broj korisnika koji istovremeno pristupaju bazi. Sa druge strane, njegova cena je razumna, a on je kao deo Microsoft Office-a lako dostupan. Pošto je proizvod firme Microsoft, radi samo na Windows serverima. SQL Server je veliki brat Accessa. Namenjen je za velike sajtove sa velikom količinom podataka i velikim brojem istovremenih zahteva. Ovaj moćan program je skup, a nije ga lako ni naučiti. Kao i Access i on radi samo pod Windowsom. MySQL je DBMS, kao dobra alternativa za Access, ako imate mali budžet i ne radite pod Windowsom. Kod njega ne postoje ograničenja vezana za istovremeni pristup kao kod Accessa, a već su famozni njegova brzina i stabilnost, tako da je u stanju da rukuje velikim količinama podataka. Sa druge strane, njemu nedostaju neke od naprednih mogućnosti Accessa, kao što su uskladištene procedure. U svojoj osnovnoj formi, MySQL koristi interfejs sa komandne linije, tako da u prvom trenutku može da izgleda zastrašujuće. Sa druge strane, postoje nekoliko besplatnih GUI interfejsa za pristup MySQL-u. Kriva učenja je iznenađujuće blaga u odnosu na Access. U zavisnosti od toga kako ga koristite on može biti skup ili jeftin. Radi na Windowsu, Unix-u, Linuxu i Max OS X-u. PostgreSQL je stariji brat MySQL-a. Ovo je najnapredniji open source DBMS sistem. Radi na Unixu, uključujući i Linux i Max OS X. Za one koji nisu opterećeni Microsoftom, on je dobra alternativa SQL Serveru. 201 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Oracle, firme Oracle Enterprises je namoćniji sistem za upravljanje bazama podataka koji danas postoji. To nije program za mala preduzeća i one koji imaju mali budžet. Vrlo je skup, kriva učenja je strma, a vrlo je skupo naučiti ga. Oracle radi pod Linuxom, Unixom i Windowsom. Više informacija o Accessu i SQL Serevru možete naći na adresi www.microsoft.com. Ako želite da više naučite (i preuzmete) MySQL i PostgreSQL posetite adrese www.mysql.com i www.postgresql.org. O Oraclu možete više naučiti ako posetite sajt www.oracle.com. Aplikacioni server (srednji sloj) Baze podataka i sistemi za upravljanje bazama podataka su široka priča, ali je to ipak samo polovina. Aplikacioni serveri se ponašaju kao srednji sloj i omogućavaju komunikaciju pretraživača i DBMS sistema. Vi (i Vaš klijent i preduzeće) ćete se sa ovim programom svakodnevno družiti. Jezik aplikacionog servera ćete koristiti za pisanje svojih strana. Bićete ograničeni njegovim ograničenjima, a potpomognuti njegovom snagom. Koji web server, baza podataka i/ili aplikacioni server treba da izaberete? Osim ako niste Vi taj ko odlučuje o konfiguraciji web servera, ove odluke verovatno nećete donositi sami. Da li će na hostu postojati određene tehnologije? Ako kupujete neki host, onda je dobro da pogledate koje tehnologije on nudi i kako opcije koje on nudi zadovoljavaju Vaše potrebe. ColdFusion ColdFusion firme Macromedia je postao vrlo popularna alternativa ASP-u, pošto je zasnovan na oznakama (tagovima), a ne na skriptovima i na taj način komunicira sa bazom podataka. Srce funkcionalnosti ColdFusiona je ColdFusion Markup Language (CFML). Elementi na strani se mogu praviti preko CFScript jezika. Deo sa aplikacionog servera je ColdFusion Server. On radi pod Windowsom, Linuxom, HP-UX-om ili Solarisom i može da se kupi posebno u odnosu na drugi softver web servera. Pošto postoji samo kao komercijalna licenca, ColdFusion možda nije baš najatraktivniji izbor za mala preduzeća, ali brži razvoj strana i moguća upotraba CFML-a na duže staze ima smisla. PHP PHP (akronim za PHP: Hypertext Preprocessor) je popularna open source alternativa za komercijalne sisteme. Njegove komande se zasnivaju na skriptovima, koji se pišu u PHP skript jeziku. PHP se može dobiti besplatno ili jeftino u zavisnosti od toga koja mu je namena. Zajednica koja ga podržava je vrlo velika i prijateljski nastrojena, ali iza njega ne stoje komercijalne garancije. PHP radi po Apache i IIS web serverima. Radi na Windowsu, Unixu i Mac OS X operativnim sistemima. Za razliku od ostalih serverskih tehnologija, PHP je vezan za određene baze podataka. Neće sve instalacije PHP-a raditi sa svim DBMS sistemima. Dreamweaver MX 2004 podržava PHP koji radi sa MySQL-om. ASP/ASP.NET ASP (Active server Pages) je Microsoftov aplikacioni server. ASP nije nezavisan program ili softverski modul, kao što je slučaj sa drugim aplikacionim serverima. Umesto toga su njegove funkcije ugrađene u Microsoftov web server (IIS). Jezik se zasniva na skriptovima, a za pristup bazama podataka se može koristiti VBScript ili JavaScript. Ovo se koristi i za konstruisanje strana na osnovu tih rezultata. Mnogi programeri i dalje koriste ASP za sajtove koji su manje složeni, ali se on uglavnom menja moćnijim ASP.NET-om. Prema Microsoftu,.NET okruženje koje sadrži i ASP.NET je novo lice dinamičkog web razvoja. Programi i skriptovi se mogu pisati u nekoliko jezika, uključujući C++, C#, JScript i Visual Basic. Mogu se izvršavati na strani servera i na strani klijenta. Strane sa živim podacima se mogu programirati i uz pomoć COM tehnologije. ASP.NET ima mnoge dobre osobine rada sa Javom i JSP tehnologijom, ali je striktno u okviru Microsoftovih rešenja. ASP.NET radi samo na IIS web serverima i naravno samo na serverima koji rade pod Windowsom. JSP JSP ili Java Server Pages su, kao što i ime pokazuje, alternativa zasnovana na Javi. Aplikacioni server je u obliku apleta (kontejnera) koji se nalazi na serveru. Među popularnim JSP kontejnerima postoje neki koji su komercijalni, kao što su JRun firme Macromedia ili IBM-ov WebSphere, a postoji i open source rešenje, kao što je Tomcat. JSP najviše koriste Java programeri. On definitivno nije za novajlije. Napomena ASP je stara tehnologija, koja je zamenjena ASP.NET-om. JSP generalno ne koristi niko osim Java programera. Podešavanje radne stanice za razvoj dinamičkih sajtova Ako želite da preko Dreamweavera pravite web sajtove koji su upravljani podacima iz baze podataka, i da koristite ColdFusion, PHP ili neku drugu tehnologiju na strani serevra, svoje razvojno okruženje možete da podesite na jedan od dva načina. 202 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kod "živog" ili "onlajn" podešavanja se sav specijalan softver, kao što je web server, aplikacioni server, DBMS i drajver, nalaze na udaljenom računaru do kojeg možete da pristupate preko FTP-a. Ovaj udaljeni računar može biti čak i web server na kome se nalazi Vaš sajt. Ovakav rad je lakši, pošto to znači da na svom računaru ne morate da instalirate nikakav novi softver. Sa druge strane, možete da radite samo ako ste povezani sa udaljenim serverom i ograničeni brzinom veze. Kod "offlajn" podešavanja se svi softverski elementi stavljaju na Vaš računar, uključujući i HTTP server, DBMS i sve drugo, tako da se Vaš računar privremeno ponaša i kao server i kao razvoj. Kada završite sajt, sve datoteke iz baze podataka, drajvere i strane prebacujete na pravi server. Ovo je i način koji uglavnom koriste programeri, kad god je to moguće. Dodatna prednost ovakvog načina rada je da dobijate besplatnu edukaciju o tome kako rade web serveri. Podešavanje onlajn razvoja Za podešavanje udaljenog razvoja su Vam potrebne sledeće informacije i konfiguracija. HTTP adresa udaljenog računara (URL) Čak i ako ste sa udaljenim računarom povezani preko lokalne mreže, da biste mogli da šaljete HTTP zahteve morate znati njegovu URL adresu. Ako je udaljeni računar web host, onda ćete koristiti ime domena za Vaš sajt. Ako je udaljeni računar jednostavno drugi računar, sa kojim ste umreženi, onda morate da imate IP adresu, koju možete dobiti od administratora. IP adresu za Windows server ćete dobiti ako izađete u prozor za unos komandi, odnosno DOS prozor. Otkucajte ipconfig i pritisnite Enter. Prikazaće se niz brojeva, koji predstavljaju IP adresu. Pristup za čitanje i pisanje do deljive web fascikle Ako je udaljeni računar koji koristite za razvoj web host, onda već imate FTP pristup do svih publikovanih datoteka. Ako na udaljenom računaru imate lokalnu mrežnu adresu, onda Vam nije potreban FTP pristup. Bez obzira na način povezivanja, morate biti sigurni da imate dozvolu za čitanje i pisanje za fasciklu u kojoj se nalaze Vaše datoteke. Pravilno podešavanje udaljenog računara Udaljeni računar može biti web server kod preduzeća kome za to plaćate, ili može biti računar kojim administrira neko drugi u kancelariji, ili sve to može biti Vaša odgovornost. Neko treba da podesi HTTP server, aplikacioni server, DBMS, kao i drajver. Sve to mora biti na tom računaru. Morate i da poznajete sve specijalne instrukcije koje se koriste za pristup do tih stavki. Te informacije možete dobiti od administratora servera ili osoblja za tehničku podršku. Podešavanje oflajn razvoja Ako želite da radite oflajn, odnosno, koristite svoj računar kao web server, onda morate biti sigurni da su HTTP server, aplikacioni server, baza podataka i svi potrebni drajveri instalirani i podešeni na pravi način. Podešavanje HTTP servera Osnovne mogućnosti za HTTP server su Apache i IIS. Ako ćete koristiti ColdFusion, onda ColdFusion server možete da koristite i kao samostalni server (koji obavlja dužnosti HTTP servera i aplikacionog servera), tako da možete da ga instalirate umesto Apachea ili IlS-a. I dalje treba da pročitate naredni odeljak "Lokalno opsluživanje strana", da biste shvatili kako lokalni HTTP serveri rade. Instalacija MS-a Ako radite po Windowsom NT, 2000 ili XP Pro, onda je najjednostavniji HTTP server za instalaciju IIS. Za NT korisnike, IIS je deo Windowsa NT 4.0 Option Packa, koji možete da preuzmete sa Microsoftovog web sajta. Ostali korisnici IIS mogu da nađu na CD sa instalacijom Windowsa. IIS se instalira kao servis, što znači da se automatski startuje kada se računar podiže. Podešavanju i konfigurisanju IlS-a možete da pristupite ako izaberete Start > Control Panel > (Administrative Tools) > Internet Service Manager. Instalacija Apache servera IIS je najčešći izbor za server koji radi pod Windowsom, ali nije jedina mogućnost. Možda ćete želeti, posebno ako koristite PHF da pre prebacivanja na Unix okruženje, napravite bližu kopiju eventualnog okruženja, ako kao HTTP server upotrebite Apache. Apache je besplatan i lako se nabavlja. Korisnici 203 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Windowsa Apache server mogu da nabave od Apache grupe (http://httpd.apache.org). Apache je stalno pod razvojem, ali obično može da se preuzme exe datoteka koja se sama instalira. Tu su kompletne instrukcije za instalaciju. Možete da ga instalirate kao servis (na taj način se pokreće uvek kada se pokrene računar) ili kao aplikacija, u kom slučaju je sami pokrećete. Lokalno servisiranje strana Ako želite da vidite lokalne strane, onda pretraživač mora dc pošalje HTTP zahtev do servera koji se nalazi na Vašem računaru. Morate zadati HTTP protokol, iza kojeg sledi IP adresa ili ime računara. Možete i da koristite opštu IP adresu (127.0.0.1) ili ime (localhost) koje računari koriste da pristupe sami sebi. Ako bilo šta od sledećeg unesete kao adresu u svom pretraživaču on će smatrati da ste zatražili podrazumevanu stranu na lokalnom serveru: http://localhost/ http://127.0.0.1/ http://192.123.128.128/(zamenite IP adresom svog računara) Svaki server ima korensku fasciklu od koje počinje da traži strane koje vraća. Možete da tražite bilo koji dokument koji je postavljen u toj fascikli, ili u nekoj njenoj podfascikli. Na primer, možete da zatražite datoteku po imenu myfile.html, koja se nalazi u fascikli myFiles, koja se nalazi ispod korenske fascikle servera. Treba da unesete sledeće: http://127.0.0.1/myFiles/index.html http://localhost/myFiles/index.html http://192.123.128.128/myFiles/index.html (stavite svoju IP adresu) Kod IlS-a je korenska fascikla od koje se sve strane traže, c:\Inetpub\wwwroot. Kod Apache servera koji radi pod Windowsom, korenska fascikla je htdocs, koja se nalazi u fascikli programa Apache. Tačna putanja može biti različita, u zavisnosti od instalacije. Najbrži način da proverite da li ste pravilno identifikovali korensku fasciklu je da napravite jednostavnu HTML datoteku, po imenu mytest.html, i da je upamtite tamo gde mislite da je korenska fascikla. Nakon toga otvorite pretraživač i otkucajte http:/localhost/mytest.html. Trebalo bi da se prikaže Vaša strana. Podešavanje aplikacionog servera Morate biti sigurni i da je aplikacioni server pravilno instaliran i konfigurisan. Aplikacioni serveri kojima smo se mi bavili su ASP.NET, PHP i ColdFusion. Podešavanje PHP-a Ako želite da PHP strane pravite i testirate u lokalu, morate da imate serverski PHP modul ili CGI aplikaciju. Korisnici Windowsa mogu da ovo preuzmu sa web sajta PHP-a (http://www.php.net/down-loads.php). Pazite da preuzmete binarnu verziju, a ne izvorni kod. Ovo je verzija koja se sama instalira, zajedno sa kompletnom dokumentacijom. Podešavanje ColdFusiona Ako želite da u lokalu razvijate i testirate ColdFusion strane, morate da instalirate ColdFusion server. Ovo je komercijalni program, al postoji besplatna verzija za korisnike koji želte da rade na jednon računaru. Korisnici Windowsa mogu da koriste ColdFusion Server: koji je deo Macromedia Studia MX 2004, ili mogu da preuzmu program sa adrese http://www.macromedia.com/software/coldfusion. U toku instalacije će se tražiti da zadate administrativnu lozinki preko koje se pristupa serveru radi podešavanja. Ovo što unesete morate da upamtite ili zapišete. Kasnije će Vam biti potrebno. ColdFusion kao HTTP server ColdFusion može da radi kao samostalni server, što znači da može da funkcioniše i kao HTTP server i kao aplikacioni server. On podrazumevano radi na portu 8500, što znači da može da radi istovremeno sa IlS-om ili Apache serverom. To takođe znači da svim stranama morate da pristupate na sledeći način: http://localhost:8500/... http://127.0.0.1:8500/... Korenska fascikla od koje ColdFusion traži sve strane je CfusionMX\wwwroot\. Kod podrazumevane instalacije na Windowsu se ovo nalazi na C disku. Sve datoteke i fascikle koje se nalaze u ovoj fascikli su 204 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 dostupne preko URL adresa, koje smo pomenuli. Administriranje ColdFusion servera Administrativni interfejs ColdFusion Servera je skup web strana kojima pristupate preko pretraživača, na adresi http://localhost:8500/CFIDE/administrator. Da biste mogli da pristupite ovim stranama, morate da unesete administrativnu lozinku. Podešavanje ASP.NET-a ASP je deo IlS-a, tako da ne zahteva posebnu instalaciju. Ako želite da ASP.NET strane razvijate i testirate u lokalu, morate da preuzmete i instalirate.NET framework (http://www.microsoft.com/net). Na web sajtu imate puno dokumentacije i pomoći oko instalacije. Treba da znate da treba preuzeti veliku količinu podataka. Baze podataka Ako na svom računaru nemate instalrian DBMS softver, ne možete da opslužujete strane koje se prave na osnovu podataka iz baze. Za mala preduzeća se najviše koriste Access i MySQL. Podešavanje Microsoft Accessa Windows korisnici mogu lako da dobiju Microsoft Access. Možda ga već imate na svom računaru. Ako radite u lokalu, datoteka sa bazom podataka može da se nalazi bilo gde na računaru. Podešavanje MySQL-a MySQL je besplatan. Sa njim se prilično lako radi, ali ga nije tako lako podesiti. Kompletne informacije o MySQL-u možete naći na zvaničnom web sajtu, na adresi http://www.mysql.com. Korisnici koji rade pod operativnim sistemom Windows mogu da preuzmu.exe datoteku koja se sama instalira. (Pazite da preuzmete binarne datoteke za Windows.) Nakon što ga instalirate, pokrenite serverski deo programa, tako što ćete pokrenuti program WinMySQLAdmin. Ovaj program radi u pozadini i na liniji poslova se prikazuje kao ikona semafora. Verovatno će Vam biti potreban i neki grafički korisnički interfejs. MySQL Control Center, koji se može naći na sajtu MySQL-a, je besplatan i lako se koristi. Datoteke baze podataka se moraju nalaziti tamo gde MySQL server može da ih pronađe. Svaka baza podataka se sastoji od nekoliko datoteka koje se nalaze u fascikli te baze podataka, u podfascikli mysql/data. Tačna lokacija ove fascikle zavisi od instalacije MySQL-a koju koristite. Podešavanje drajvera Svaka baza podataka sa kojom želite da komunicirate traži da postoji neki drajver preko kojeg bi se sa njom povezivali. Podešavanje drajvera zavisi od serverske tehnologije koju nameravate da koristite. ColdFusion Ako radite sa ColdFusionom, baza mora biti registrovana na ColdFusion serveru. Ovo možete da uradite preko administrativnih strana ColdFusiona. Sa glavne strane izaberite Data & Services > Data Sources. U delu Add New Data Source dajte svom izvoru podataka ime od jedne reči i izaberite tip drajvera (Access, MySQL itd.). Nakon toga kliknite dugme Add. U delu Data Source popunite potrebne informacije (ovo može biti različito, u zavisnosti od tipa drajvera koji ste izabrali) i kliknite Submit. Ako je sve u redu, nakon nekoliko trenutaka će se ekran promeniti, a u delu Connected Data Sources će biti prikazana i ta baza podataka. PHP i drajveri Kada radite sa MySQL-om (kao i u Dreamweaveru), PHP ne traži drajvere. Umesto toga on komunicira sa MySQL serverom i može da pristupi svim bazama u sistemu. ASP.NET i DSN izvori ASP.NET za komunikaciju sa bazama podataka traži postojanje DSN (Data Source Name) izvora. DSN i ODBC drajveri se kreiraju i njima se upravlja preko Control Panela, i to njegovog dela Data Sources (ODBC). DSN ćete napraviti ako otvorite Control Panel, odete na karticu System DSN i kliknete dugme Add. Kada se pojavi novi DSN prozor, iz liste drajvera izaberite odgovarajući (u zavisnosti od baze podataka koju koristite) i unesite dodatne informacije koje su potrebne. Za Access baze podataka ovo je jednostavno pronalaženje baze. Kada završite, zatvorite sve okvire za dijalog. Sada imate metod za pristup bazi podataka iz bilo koje web aplikacije na računaru. Funkcionisanje dinamičkih sajtova u Dreamweaveru Kao što Dreamweaver može da pomogne u pisanju statičkih HTML strana, on sadrži i obilje alata koji mogu da pomognu u razvoju dinamičkih sajtova, koji koriste ASP, ColdFusion, PHP ili JSP. On može da pomogne 205 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 kod upravljanja vezama sa bazom podataka, kreiranja upita za baze podataka, kao i prikazivanje dinamičkih informacija, sve to u okviru familijarnog vizuelnog okruženja. Osnovna procedura je: 1. Definišite sajt, uključujući i informacije o serveru koji služi za testiranje. 2. Za sajt napravite najmanje jednu vezu sa bazom. 3. Otvorite pojedinačne dokumente i radite sa objektima aplikacije i ponašanjima servera. Ovo se koristi za postavljanje upita, prikupljanje rezultata iz baze, prikazivanje dinamičkih podataka, itd. Pregled živih podataka i server za testiranje Osnovna razlika između upotrebe Dreamweavera za statičke i dinamičke sajtove je u tome kako se pregledaju strane koje ste napravili. Prethodni pregled u pretraživaču Kada kod statičkog sajta izaberete Preview in Browser (F12), Dreamweaver pokreće pretraživač i prosleđuje lokalnu adresu tekuće strane: C:\Client Files\Web\My Local Site\index.html Ovim pretraživač pristupa sistemu datoteka na računaru. Kod dinamičkih sajtova, međutim, nije dovoljno da samo pregledate strane u pretraživaču. Dreamweaver mora da aktivira web server i da mu prosledi HTTP zahtev, tako da ovaj može da obradi te datoteke. Tu se zahteva adresa koja liči na sledeće: http://localhost/mysite/index.php http://127.0.0.1:8500/mysite/index.cfm http://www.mydomain.com/index.aspx Ovim se zapošljavaju web server i pretraživač, tako da se sve strane servisiraju, i nisu samo prikazane preko sistema datoteka. Prema tome, da biste razvijali dinamičke sajtove morate imati pristup do web servera na kome radite. Prethodni pregled u prozoru Document Dinamički prethodni pregled možete da izvršite i u prozoru Document, ako kliknete dugme Live Data sa palete Document. Kada to uradite, prozor Document se menja i u njemu se prikazuje URL (isto kao ono što se koristi u pretraživaču), a na strani se prikazuju realni podaci. Ovi podaci se prikazuju na mestima na kojima je to unapred predviđeno. Iako neki posao možete da uradite i sa prikazom Live Data, ovim se proces usporava i to nije preporučljivo. Umesto toga, ovu opciju možete da upotrebite povremeno, samo kada želite da pogledate rezultate, a da ne napuštate Dreamweaver. Prikaz Live Data ćete isključiti ako kliknete ikonu nekog drugog prikaza (Design, Code, Code and Design) sa palete Document. Podešavanje dinamičkih sajtova Prvi korak u kreiranju dinamičkih sajtova u Dreamweaveru je da se definiše sajt i to kompletno sa informacijama o lokalnom serveru, serveru za testiranje i (opcionalno) udaljenom serveru. Dreamweaver mora da zna gde se nalaze lokalni server, server za testiranje, kao i udaljene fascikle. On takođe mora da zna koju serversku tehnologiju koristite i ako je potrebno, koji se skript jezika koristi za tu tehnologiju. (Na primer, ASP može da se kodira u različitim skript jezicima.) Na kraju, kao i kod udaljenog sajta, on mora da zna kako da komunicira sa web serverom i serverom za testiranje. Evo kako se podešava dinamički sajt u Dreamweaveru: 1. Izaberite Site > Manage Sites, a onda kliknite dugme New (kao što i obično definišete sajt). 2. U okviru za dijalog Site definition (Advanced) kao i obično podesite kategoriju Local Info. Ako želite, možete u ovom trenutku da podesite i udaljene informacije (Remote Info), ali to u ovom trenutku nije obavezno. 3. Dok se još uvek nalazite u okviru za dijalog Site Definition, idite u kategoriju Testing Server. Podesite serversku tehnologiju i skript jezik koji želite da koristite, a onda podesite i informacije potrebne za komunikaciju sa udaljenim serverom. Ako planirate da radite onlajn, i da udaljeni server bude razvojni server, onda podešavanja koja ovde zadate treba da budu ista kao u kategoriji Remote Info. Ako želite da radite oflajn sa lokalnim serverom za testiranje (sigurnije), onda ovde treba da podesite i informacije o povezivanju sa serverom. 206 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Od posebne je važnosti je da budete sigurni da je URL prefiks za komunikaciju sa serverom za testiranje ispravan. Dreamweaver koristi te informacije za kreiranje pregleda ovih strana. Kod oflajn razvoja, adrese počinju sa http://localhost ili http://127.0.0.1. Kod onlajn razvoja unesite osnovni URL koji obično koristite za pregled na svom web sajtu, a to je http://mojdomen.com. Kada završite, kliknite OK, da biste zatvorili okvir za dijalog Site Definition. Sada su na sajtu uključene dinamičke karakteristike Dreamweavera. Server za testiranje je u suštini privremeni udaljeni sajt. Sa njim se u interfejsu Dreamweavera radi slično kao sa udaljenim sajtom. Da biste videli sadržaj servera za testiranje, treba da uradite jedno od sledećeg: • Ako pano Site nije proširen, iz padajućeg menija izaberite Testing Server (umesto Local View). • Ako je pano Site proširen, kliknite dugme Testing Server da biste prikazali levi pano. Kada je pano Site u proširenom režimu i kada je prikazan server za testiranje, sve komande Dreamweavera za sinhronizaciju, kao što su Get, Put i Synchronize, sa lokalnim i sajtom za testiranje rade isto kao sa lokalnim i udaljenim sajtom. Povezivanje sa bazom podataka Povezivanje sa bazom podataka je skript koji ili poziva drajver, koji komunicira sa bazom podataka, ili govori aplikacionom serveru kako da bez drajvera komunicira sa bazom. Svaki put kada preko Dreamweavera uspostavite vezu sa bazom podataka, program pravi fasciklu Connections, koja se nalazi u korenskoj fascikli. U tu fasciklu se stavlja specijalna skript datoteka. Svaki put kada ovu vezu koristite u nekom od dokumenata na sajtu, Dreamweaver povezuje taj dokument i skript datoteku. Ovo je sjajna stvar, pošto omogućava da radite na serveru za testiranje, a da onda prebacite sajt na živi udaljeni server, a da pri tome ažurirate samo skript za vezu. Svim vezama se upravlja preko panoa Databases (Window > Connections), koje se nalaze u grupi Application. Vezu možete da napravite ako otvorite pano Databases i proverite poruke koje se tu javljaju. Koji god model servera da koristite, ovaj pano Vas vodi kroz korake kreiranja skripta za vezu, u okviru te tehnologije. 207 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Napomena Jednim okom bi trebalo da pratite panoe koji postoje u u grupi Application. Prilikom definisanja dinamičkih sajtova i njihovih strana, generalno počinjete od panoa Databases (sa leve strane) i idete kroz panoe sa leva u desno. Svaki pano počinje sa listom zadataka koje treba uraditi pre nego što pano bude mogao da se koristi. ColdFusion Za sajtove koji koriste ColdFusion MX se, odmah posle definisanja servera za testiranje, u panou Database prikazuje lista svih baza podataka koje su trenutno registrovane kod ColdFusion MX servera. PHP MySQL Ako je tehnologija koju koristite na strani servera PHP MySQL, onda ne morate da definišete drajver. MySQL sam brine o bazama podataka i povezivanju sa njima. Kao što je pokazano u panou Databases, potrebno je definisati sajt (koji uključuje i server za testiranje), otvoriti ili napraviti PHP dokument i proveriti da li se on može povezati sa serverom za testiranje. Nakon toga kliknite dugme + da biste napravili vezu. Kada kliknete dugme +, jedini izbor koji postoji je MySQL Connection. Kada izaberete ovu opciju u okviru za dijalog se od Vas traži: • Connection name Ime od jedne reči, premda mnogi programeri vole da im se imena veza završavaju sa conn. • MySQL Server Unesite IP adresu servera za testiranje. Ako server radi na istom računaru, unesite localhost ili 127.0.0.1. • User name and password MySQL samo poznatim korisnicima omogućava da pristupe njegovim bazama podataka. Ove informacije možete dobiti od adminsitratora MySQL servera. (Ako ste MySQL podesili na svom računaru, proverite tabelu user u bazi mysql. Tu možete videti koja korisnička imena i lozinke postoje.) • Database Ime baze podataka sa kojom se povezujete. Kliknite dugme Select da biste dobili listu svih postojećih baza podataka. ASP.NET Za sajtove koji koriste ASP i ASP.NET u panou Databases možete izabrati DSN na serveru, ili možete da napravite string za vezu, bez DSN-a. Ako izaberete prvu opciju, prikazuje se okvir za dijalog sa svim DSN izvorima koji su trenutno definisani na zadatom serveru. Ako nije definisan DSN, onda možete da kliknete dugme Define. Povezaćete se sa Control Panelom ODBC, u kome možete da definišete DSN bez Dreamweavera. Ako izaberete drugu opciju, otvoriće se okvir za dijalog u kome možete da otkucate string za vezu. (Ako želite da više naučite o strinogovima za vezu, proverite šta o tome postoji u nekoj literaturi za ASP.NET). Nakon što ste napravili vezu, u panou Databases se prikazuje ikona baze podataka sa imenom te veze. Ako proširite ovu ikonu, videćete strukturu baze podataka sa kojom ste povezani. 208 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 16. Dinamičke strane Prikupljanje dinamičkih podataka Čim napišete jedan ili više skriptova za vezu, pojedine strane sa sajta mogu bazi da postavljaju upite. Najčešća vrsta upita je da se kreira skup rezultata (grupa zapisa koji odgovaraju zadatom kriterijumu pretraživanja). Osnovno o skupovima zapisa Skup zapisa ćete napraviti ako otvorite dinamički dokument i pratite sledeće korake: 1. Otvorite pano Bindings, kliknite dugme + i izaberite Recordset (Query), ili idite na paletu Insert, izaberite Application Objects, a odatle objekat Recordset, kao što je prikazano na slici. Možete i da otvorite pano Server Behaviors, da kliknete dugme + i da izaberete opciju Recordset (Query). 2. U okviru za dijalog Recordset koji se otvara, izaberite vezu, bazu podataka i konkretne elemente iz baze (obično kolone iz tabele, koje se prevode u polja u skupu zapisa), koje želite da prikupite. 3. (Opcionalno) Ako želite da proverite informacije koje ste prikupili, kliknite dugme Test. 4. Kada završite, kliknite OK da biste zatvorili okvir za dijalog. Nakon što ste napravili skup zapisa, dobijene kolone se prikazuju u panou Bindings, kao što je prikazano na slici. Proširite ih da biste videli sva polja iz baze podataka koja ste dobili. Pošto Dreamweaver mora da piše skript da bi napravio skup zapisa, tehnički govoreći, akcija prikupljanja je ponašanje na strani servera, tako da se skup zapisa prikazuje i u panou Server Behaviors. 209 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da promentie skup zapisa koji ste već napravili, tako da se prikupljaju drugi podaci, ili da se oni različito organizuju, otvorite pano Server Behaviors i dva puta brzo kliknite ponašanje Recordset. Otvoriće se okvir za dijalog Recordset u kome možete da promenite podešavanja. Ako posle kreiranja skupa zapisa promenite njegovo ime, Dreamweaver će Vas upozoriti da preko komande Find and Replace treba da se zamene sva pojavljivanja tog skupa zapisa u dokumentu. Kliknite OK da biste zatvorili ovo upozorenje. Otvoriće se okvir za dijalog Find and Replace. Ako želite da prekinete promenu imena skupa zapisa, u okviru za dijalog Find and Replace kliknite Cancel. Ako želite da zamenite sva pojavljivanja odjednom, kliknite Replace All. Ako želite da promene vršite jednu po jednu, tako da možete da proveravate šta se dešava, kliknite Replace onoliko puta koliko je potrebno da bi se promenio ceo dokument. Na šta liči kod za ovaj skup zapisa? Očigledno je da njegov izgled zavisi od serverske tehnologije i jezika koje koristite. Ipak, u srcu svakog skupa zapisa je SQL upit, koji može da liči na sledeće upite: SELECT * FROM korisnici SELECT korisnickoIme,sifra FROM korisnici Prvi primer prikuplja sva polja iz svih zapisa u tabeli korisnici u zadatoj bazi podataka. Drugi iskaz prukuplja samo polja korisnicko ime i sifra iz iste tabele. Iako nije najbitnije da znate kako izgleda upit koji daje skup zapisa i kod rada sa bazama podataka, kao i kod HTML-a, znanje je moć, pa tako što više znate o onome što se dešava iza scene, to je bolje za Vas. Sofisticiraniji upiti i skupovi rezultata Ako je sve što želite da dobijete skup svih zapise iz tabele u bazi podataka, onda kreiranje skupa zapisa nije ništa više od koraka koje smo već pomenuli. Često se, međutim, dešava da su potrebni složeniji skupovi zapisa. Što više znate o takvim skupovima zapisa, to ćete lakše prikupiti prave informacije iz baze. Sortiranje Osim ako ne zadate drugačije, server zapise iz baze pdoataka prikuplja po onom redosledu po kojem se oni tamo nalaze. Ako zapise želite da uredite na neki način, morate da u upit ubacite klauzulu za sortiranje. U okviru za dijalog Recordset (Query), ovo možete da uradite preko opcije Sort. Sortiranje možete da vršite po bilo kom polju u tabeli iz koje vadite zapise. Sortiranje se uvek radi po alfanumeričkom redu (0 do 9, A do Y). Ako želite da sortirate po rastućem ili opadajućem nizu, izaberite opcije Ascending ili Descending (Z do A, 9 do 0). SQL upit koji stoji iza ovakvog rezultata koristi klauzulu ORDER BY. Evo kako to izgleda: SELECT * FROM korisnici ORDER BY korisnickoIme 210 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Filtriranje Filtriranje ćete koristiti kada ne želite da prikupite sve zapise iz baze, već samo one koje zadovoljavaju određeni kriterijum. Možda želite samo one korisnike čija prezimena počinju sa A, ili samo ljude koji žive u državi Maine. Filtrirani skup zapisa ćete dobiti ako otvorite okvir za dijalog recordset (Query) i podesite opcije Filter. Tu su tri padajuća menija: • • • Filter by – Bira se polje iz skupa zapisa. Comparison – Bira se operator poredenja (=, >, < ,> =, <>) Required value (obavezna vrednost) – Bira se neka od opcija koje se ovde nalaze, ili se unosi vrednost. Ako želite da pronađete ljude koji žive u državi Maine, u tabeli u bazi mora postojati polje za državu (state). Onda polje state možete da izaberete iz liste Filter by, zatim da iz druge liste izaberete znak jednakosti, da kao tip filtera izaberete Entered Value, a da u polju za vrednost unesete Maine. Ako će se strana pozivati sa forme koja parametre prosleđuje preko metoda GET, onda ćete koristiti opciju URL parameter. Ovo isto važi i ako se strana poziva preko obične oznake, koja sadrži URL parametar. Evo kako to izgleda: <a href="dynamicpage.cfm?state=Maine"> Opcija Form Variable se koristi ako je strana pozvana sa neke forme koja svoje promenljive prosleđuje preko metoda POST. SQL upit koji stoji iza upita koji filtrira zapise sadrži klauzulu WHERE. On može da izgleda ovako: SELECT * FROM korisnici WHERE drzava = "Maine" Kreiranje naprednih skupova zapisa preko SQL-a Postoji puno načina da fino podesite kolekciju podataka koje dobijate iz baze. Ako poznajete strukturu svojih upisa, sve to možete da uradite preko SQL-a. Kreiranje skupova zapisa na bazi složenih upita koji obuhvataju spajanja, grupisanje ili neke druge opcije traži da radite u naprednom režimu. Tada možete sami da pravite SQL upite. Napredni skup zapisa možete dobiti ako otvorite okvir za dijalog Recordset (Query) i kliknete dugme Advanced. Prozor koji se dobija sadrži deo za unos SQL upita, deo za definisanje parametara, kao i deo za pretragu baze podataka, preko kojeg upite možete da pravite bez kucanja. 211 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prikupljanje različitih zapisa Pretpostavimo da u svojoj bazi podataka imate listu od 200 ljudi. 25 od njih su iz države Maine, 25 iz države California, a 50 iz New Yorka. Zelite da napravite skup zapisa koji ukazuje na to koje države postoje. Treba da prikažete polje drzave, iz tabele korisnici. Ne želite da prikupite svih 25 primeraka države Maine, 25 primeraka Californie itd. Želite da se prikaže samo jedan primerak za svaku državu. U tom slučaju treba da upotrebite ključnu reč DISTINCT, Evo kako to izgleda: SELECT DISTINCT drzava FROM korisnici ORDER BY drzava Ako u Dreamweaveru želite da napravite iskaz kao što je ovaj, treba da uradite sledeće: 1. Otvorite okvir za dijalog Recordset (Query). U režimu Simple napravite upit koji selektuje samo ona polja koja želite da grupišete. (Na primer, selektujte samo kolonu drzava, iz tabele korisnici). Ako želite podesite i opciju Sort by order. 2. Kliknite dugme Advanced. U delu SQL text, odmah iza imena polja za koje želite da dobijete samo jedan primerak, dodajte reč DISTINCT. Pre nego što zatvorite okvir za dijalog, kliknite dugme Tetst, da biste bili sigurni da u upitu nema grešaka. Postavljanje dinamičkih elemenata na strane Dinamički elementi Dreamweavera omogućavaju da prikažete podatke iz baze podataka na svojim web stranama. Možete i da ih pogledate u prikazu Design. Kreiranje dinamičkih strana u Dreamweveru se uglavnom sastoji od rada sa dinamičkim tekstom, slikama, tabelama i sl. Dinamički tekstualni elementi Dinamički tekstualni elementi predstavljaju sadržaj polja u bazi podataka, koji je na strane postavljen kao tekst. Cene, imena stvari i opisi su dobri kandidati za ubacivanje kao tekstualni elementi. U zavosnosti od toga koliko teksta polje u bazi sadrži, dinamički elementi mogu biti kratki (nekoliko slova ili reči) ili dugi (nekoliko pasusa). Dinamički tekstualni elementi se u prikazu Design prikazuju na unapred određenim mestima. (Recordset1.kategorija) 212 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 ili kao skript na strani servera u prikazu Code: <?php echo $row_Recordset1[kategorija]; ?> Ovo određeno mesto za prikazivanje ne ukazuje na to koliko će prostora stvarno biti zauzeto. Ubacivanje dinamičkog teksta Tekst možete da ubacite ako otvorite pano Server Behaviors, pritisnete dugme + i izaberete ponašanje Dynamic Text. Možete i da izaberete objekat Dynamic Text iz kategorije Application, sa palete Insert. U oba slučaja se otvara okvir za dijalog u kome možete da zadate polje iz baze koje se prikazuje kao tekst, kao i da primenite neko automatsko formatiranje. Tu se misli, na primer, na oznaku za dolar, ili oznaku za novac, kao što je prikazano na slici. Dinamički tekst možete da ubacite i sa panoa Bindings, bilo tako što ćete prevući polje u prozor Document ili selektovati polje i kliknuti dugme Insert. Nakon što postavite tekst na svoje mesto, u panou Server Behaviors se prikazuje novo ponašanje Dynamic Element, koje je dodato u dokument. Dva puta brzo kliknite ovo ponašanje. Otvoriće se okvir za dijalog Dynamic Text u kome možete da dodate neko automatsko formatiranje. Dinamički tekst u dokumentu Mesta za ubacivanje dinamičkog teksta možete da koristite na isti način, i sa istim ciljem, kao i običan tekst. Dinamički tekst može da se prikazuje u svojim oznakama p, h1 ili nekim drugim, ili može biti u sredini bloka sa statičkim tekstom. Sva formatiranja koja primenjujete na tekst, kao što su korisničke klase iz CSS-a, možete da primenite i na mesto za ubacivanje dinamičkog teksta. Potrebno je samo da izaberete to mesto i da preko Property Inspectora ili panoa CSS uradite što i obično. Podešavanje dinamičkih osobina Kao što dinamičke informacije mogu da na web strani zamene običan tekst, one mogu da zamene i bilo koji deo HTML koda, uključujući i atribute oznaka. Ako je, na primer, u bazi podataka omiljena boja, u polju favcolor, onda naredni PHP kod dinamički podešava pozadinu ćelije tabele na tu boju: <td bgcolor="<?php echo $row_Recordset1[favcolor]; ?>"> Dinamičke osobine i Selection Inspector Tag Inspector predstavlja koristan interfejs za unos dinamičkih osobina. Samo selektujte element na strani koji treba da ima dinamičku osobinu, otvorite Tag Inspector i pređite na karticu Attributes. Nakon toga, iz liste izaberite atribut koji je u pitanju i pogledajte malu ikonu zavrtnja na desnoj strani panoa. Kliknite tu ikonu. Otvoriće se okvir za dijalog u kome se pita koje polje iz baze treba da zameni vrednost atributa. Izaberite polje, kliknite dva puta OK (da biste zatvorili dva okvira za dijalog) i to je to. 213 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dinamičke slike Generalno, slike i druge multimedijalne datoteke se ne čuvaju u bazama podataka. U bazama podataka se čuva ime datoteke ili URL adresa koji ukazuju na tu sliku. Dinamički generisane web strane mogu onda da sadrže oznaku img, koja referencira polje sa atributom src: <img src="<?php echo $row_Recordset1[filename]; ?>"> Pod pretpostavkom da u bazi podataka postoji zapis sa vrednošću "necklace.gif" u polju filename ova referenca generiše sledeći kod: <img src="necklace.gif"> Ubacivanje dinamičkih slika Ubacivanje dinamičkih slika je slično ubacivanju običnih slika. Koristi se objekat Image ili komanda Insert > Image, kao i obično. Kada se otvori okvir za dijalog Insert Image, pronađite opciju Select File Name From i kliknite dugme Data Source. Pojaviće se lista polja koja su na raspolaganju i tekućeg skupa zapisa u dokumentu. Izaberite neko od tih polja i kliknite OK. Slika će se postaviti u dokument i to sa ikonom koja označava mesto na koje se ubacuje (osvetljeni zavrtanj). Nakon ovog pogledajte pano Server Behaviors. Videćete da je na stranu dodato novo ponašanje Dynamic Attribute. Dinamički atribut je src atribut za Vašu sliku. Izaberite svoju dinamičku sliku i proverite kako to izgleda u Property Inspectoru ili Selection Inspectoru. Videćete da je atribut src definisan preko koda na strani servera. Kada ubacujete dinamičku sliku, Dreamweaver toj slici ne dodeljuje širinu i visinu. Pošto src za sliku još uvek nije definisan, Dreamweaver ne zna koje su dimenzije. Ako znate da će određene slike iz baze imati iste dimenzije, možete sami da dodate širinu i visinu. Ovo se radi preko Property Inspectora. Ako niste sigurni u vezi dimenzija, ili ako će se dimenzije slika menjati, onda se neće dodeliti vrednosti ovih atributa. Delimične URL adrese Polje iz baze podataka koje se koristi za generisanje atributa src ne mora da sadrži celu apsolutnu ili relativnu putanju do slike. Na primer, ako se slike nalaze u podfascikli images, i ako se u bazi podataka nalazi samo ime datoteke, onda ostatak putanje možete da napravite u trenutku postavljanja dinamičke slike. U okviru za dijalog Insert Image, nakon što ste izabrali polje iz baze koje se koristi kao src, u polje URL unesite ostale informacije vezane za putanju. Evo kako to izgleda: images/<?php echo $row_Recordset1[filename]; ?> Ako ste imena slika birali pažljivo, ovo možete da uradite i za polje filename iz baze. Pretpostavimo da u bazi postoji polje itemname. Kod koji se pojavljuje u polju URL može dalje da podesi ubacivanje dinamičke slike: images<%=(Recordset1.Fields.Item("itemname").Value)%>.gif Pod pretpostavkom da jedno od polja itemname u dobijenom skupu zapisa sadrži vrednost necklace, dobijeni HTML kod bi izgledao ovako: <img src="images/necklace.gif"> 214 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dinamički alt natpisi Dinamičke slike treba da imaju alt natpise koji se dinamički određuju. Ako u skupu zapisa postoji neko polje koje opisuje stavku na slici, to polje možete da upotrebite za kreiranje alt teksta. Ovo možete da uradite preko Selection Inspectora, kao što smo opisali u prethodnom odeljku. Dinamički podaci i forme Forme se na dinamičkim sajtovima puno koriste za prikupljanje informacija. Strane za pretraživanje, strane za prijavljivanje, kao i strane za ažuriranje informacija koriste forme ili za prikupljanje podataka od korisnika, ili za promenu izvora podataka. Ako Vam je forma potrebna samo da biste prikupili informacije, onda elementi forme ne moraju biti dinamički. Ako želite da se u formi prikazuju i informacije iz baze, na primer, padajući meni sa stavkama koje dolaze iz baze, ili strana sa ličnim podacima korisnika, koje on može da menja i ažurira, onda za određivanje sadržaja i statusa elemenata forme morate da koristite dinamičke podatke. Dinamičke liste i meniji Dinamička padajuća lista ili meni u formi se prave preko elementa select iz forme, kome se stavke dinamički dodeljuju. Ako želite da napravite neku listu, otvorite dinamički dokument i napravite skup zapisa za dinamičke stavke. Nakon toga treba da uradite sledeće: 1. Napravite formu kao i obično. Preko objekta List/Menu (kategorija Form sa palete Insert) ubacite standardnu listu. 2. U Property Inspectoru kliknite dugme Dynamic. Otvoriće se okvir za dijalog. Izaberite polje koje u tekućem skupu zapisa treba da se prikaže u meniju, a onda kliknite OK da biste zatvorili okvir za dijalog. Isti okvir za dijalog možete da iskoristite i za dodavanje statičkih elemenata (oni koji su stalno isti, bez obzira na bazu podataka). Kada završite, kliknite OK da biste zatvorili okvir za dijalog. Grupisanje zapisa za prikazivanje liste Prehodne instrukcije prave sjajnu listu, ali samo ako u skupu zapisa postoji samo jedna vrednost za svako polje koje treba da se prikaže. Ako treba da izaberete neku od 10 ogrlica (necklace) i ako se ime ogrlice prikazuje u meniju, onda je sve u redu. Ali šta ako imate 10 ogrlica, 10 broševa i 10 narukvica, i želite da se u listi prikažu samo imena kategorija (ogrlice, narukvice i broševi)? Trik je u tome da se napravi padajući meni ili lista sa dinamičkim stavkama, ali da se pre toga eleminišu duplikati. Ovo možete uraditi ako napravite skup zapisa koji vadi samo jednu stavku. Kada budete pravili ovakav skup zapisa, nakon što izaberete polja koja se vade, idite na karticu Advanced. U SQL upit dodajte klauzulu GROUP BY. Na taj način se grupišu polja koja planirate da koristite u dinamičkoj listi. Ako ostane klauzula ORDER BY, ona mora biti na kraju upita. Ako želite da napravite listu sa kategorijama nakita, kod bi mogao da izgleda ovako: SELECT kategorija FROM nakit GROUP BY kategorija ORDER BY kategorija ASC Nakon što ste ovo uneli u polje SQL, ne možete da se vratite u prikaz Simple za taj skup zapisa. Dinamička polja za potvrdu Dinamičko polje za potvrdu je potvrđeno ili nije u zavisnosti od vrednosti polja u skupu zapisa. Evo kako se pravi dinamičko polje za potvrdu: 1. U formu ubacite obično polje za potvrdu (izaberite Insert > Form Objects > Checkbox). Preko Property Inspectora dajte ovom polju ime koje ćete upamtiti. 2. Dok se još uvek nalazite u Property Inspectoru, kliknite dugme Dynamic. U okviru za dijalog koji se otvara, izaberite lme polja za potvrdu. Definišite koje polje iz skupa zapisa treba da se ispituje i unesite vrednost koju to polje mora da ima da bi bilo potvrđeno. Okvir za dijalog omogućava da poređenja pravite na osnovu jednakosti (ne manje, više od,itd.). Dinamička radio dugmad Kod grupe dinamičkih radio dugmadi je selektovan jedan od članova i to u zavisnosti od vrednosti polja iz skupa zapisa. Grupa dinamičkih radio dugmadi se pravi na sledeći način: 1. Ubacite grupu radio dugmadi, kao što i obično radite (izaberite Insert > Form Objects > Radio Button, ili Insert > Form Objects > Radio Group). Preko Property Inspectora dajte grupi ime i svakom dugmetu dodelite jedinstvenu vrednost. 2. U panou Server Behaviors kliknite dugme + i izaberite opciju Dynamic Form Elements > Dynamic Radio Group. 215 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 3. U okviru za dijalog koji se otvara izaberite ime grupe koju ste napravili. Nakon toga definišite polje iz skupa zapisa, sa kojim grupa treba da se poredi, da bi se odredilo da li nešto na formi treba da bude izabrano. Dinamičko polje za tekst Dinamička tekstualna polja su u formi ispunjena tekstom koji dolazi iz određenog polja iz skupa zapisa. Evo kako se pravi dinamičko tekstualno polje: 1. Ubacite tekstualno polje na uobičajeni način (Insert > Form Objects > Text Field). Preko Property Inspectora dodelite ime koje ćete upamtiti. 2. U panou Server Behavior kliknite dugme + i izaberite Dynamic Form Elements > Dynamic Text Field. 3. U okviru za dijalog koji se otvara izaberite ime svog polja. Nakon toga definišite polje iz skupa zapisa čija vrednost treba da se prikaže u tekstualnom polju. Sadržaj koji se ponavlja Većina dinamičkih elemenata podrazumevano prikazuje informacije iz prvog zapisa koji se nalazi u skupu zapisa. Regioni koji se ponavljaju i dinamičke tabele omogućavaju da na strani prikažete i više zapisa. Regioni koji se ponavljaju Region koji se ponavlja može biti bilo koji element strane, podnaslov ili pasus, stavka liste, tabela, ali je element koji se najčešće ponavlja vrsta u tabeli. Regione koji se ponavljaju pravite preko objekta Repeated Region ili ponašanja Repeat Region. Ako želite da napravite region koji se ponavlja, otvorite dinamički dokument, napravite skup zapisa i uradite sledeće: 1. Definišite oblast sa strane koja treba da se ponavlja i izaberite je. U toj oblasti bi trebalo da bude i neki dinamički sadržaj (kao što su tekst ili slike). 2. Od objekata Application, sa palete Insert, izaberite Repeated Region, ili sa panoa Server Behaviors izaberite Repeat Region. Kada se otvori okvir za dijalog izaberite skup zapisa i broj onih zapisa koji treba da se prikažu. Nakon toga kliknite OK. 216 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Regioni koji se ponavljaju su u prikazu Design okruženi natpisom. Ako želite da promenite taj natpis, kliknite ga brzo dva puta. Dinamičke tabele Dinamička tabela je tabela koja prikazuje dinamičke informacije iz tekućeg skupa zapisa, pri čemu se kao vrste koriste regioni koji se ponavljaju. Ovo je u suštini samo skraćeni metod za kreiranje najčešće vrste regiona koji se ponavljaju. Ako želite da napravite dinamičku tabelu, otvorite dinamički dokument, napravite skup zapisa i uradite sledeće: 1. Postavite kursor tamo gde želite da se pojavi tabela. 2. Sa palete Application Insert, iz grupe Dynamic Data izaberite Dynamic Table. Kada se otvori okvir za dijalog, izaberite skup zapisa, broj zapisa koji treba da se prikažu, kao i opcije za formatiranje tabele. Kliknite OK da biste zatvorili ovaj okvir za dijalog. Dreamweaver će ubaciti tabelu sa vrstom koja se ponavlja, potpuno isto kao da ste napravili tabelu i dodelili vrstu koja se ponavlja. Tabela sadrži sva polja iz tekućeg skupa zapisa sa istim redosledom. Ako ne želite da se prikažu sva polja, možete da obrišete kolone iz tabele. Dinamički tekst u ćelijama tabele se može tretirati isto kao bilo koji dinamički tekst. Testiranje i otklanjanje grešaka Regioni koji se ponavljaju se kodiraju kao petlje koje sadrže ono što se ponavlja. Tu su i instrukcije serveru da u jednom trenutku treba da postavi jedan zapis iz skupa zapisa. Ovaj kod se razlikuje u zavisnosti od jezika koji koristite. Evo kako to izgleda u PHP-u: <?php do { ?> [repeated content goes here] <?php } while ($row_Recordset1 = mysql fetch assoc($Recordset1)); ?> Evo kako to izgleda u ColdFusionu: <cfoutput query="Recordset1" startRow="#StartRow_Recordset1#" maxRows= "#MaxRows_Recordset#"> [repeated content goes here] </cfoutput> Na strani se može izabrati bilo koja oblast. Vrlo je važno da budete sigurni da ste izabrali prave stvari, pre nego ubacite region koji se ponavlja. Ako pravite listu sa stavkama koje se ponavljaju, onda treba da budete sigurni da ste uhvatili oznaku li, ali ne i okolne oznake ol i ul. Ako pravite vrstu u tabeli koja se ponavlja, onda morate biti sigurni da ste izabrali oznaku tr. Najbolje je da stalno koristite Tag Selector, ili da radite u prikazu Code and Design i da jedno oko stalno držite na kodu. Morate biti sigurni da ste izabrali baš ono što treba da se ponavlja. Ako želite da sadržaj strane ubacite odmah ispod regiona koji se ponavlja, morate biti posebno pažljivi. Dreamweaver neće novi sadržaj ubaciti u region. Cesto se javlja situacija da u tabeli imate vrstu koja se ponavlja, a želite da ubacite još jednu vrstu koja se ne ponavlja. Obično ćete da biste u tabelu ubacili vrstu postaviti kursor u poslednju ćeliju u tabeli i pritisnuti taster Tab, ili selektovati opciju Modify > Table > Insert Rows or Columns, ili ćete u Property Inspectoru dodati određeni broj vrsta. U svakom od pomenutih slučajeva se nova vrsta dodaje u region koji se ponavlja. Ako Dreamweaver novi sadržaj dodaje u region koji se ponavlja (nova vrsta u tabeli, pasus, itd.), pređite na kratko u prikaz Code. Pronađite kod za vrstu tabele ili drugi element koji ne treba da bude u regionu koji se ponavlja i prebacite ga ispod linije koda koja zatvara region. Straničenje u regionu koji se ponavlja Straničenje u skupu zapisa, ili navigacija, ulazi u igru kada koristite region koji se ponavlja, ali želite da se u jednom trenutku prikaže samo određeni broj zapisa. Tu onda postoje linkovi Next, Previous, First i Last, sa porukom koja ukazuje na to koliko je zapisa trneutno prikazano (kao što je 2 to 14 of 500). U Dreamweaveru postoji nekoliko načina za dodavanje kontrola za straničenje, kao što su različiti aplikacioni objekti, ponašanja servera i sl. Objekti Recordset Paging Ako želite da na stranu koja sadrži region koji se ponavlja ubacite linkove Next, Previous, First i Last, možete da uradite jedno od sledećeg: • Otkucajte tekst ili izaberite sliku koja će služiti kao link. Sa palete Insert izaberite jedan od objekata Recordset Paging: Move to First, Move To Last, itd. 217 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 Postavite kursor tamo gde želite da se ubaci link. Sa palete Insert izaberite jedan od objekata Recordset Paging. Dreamweaver će linku dodati podrazumevani tekst. Ako želite da automatski ubacite ceo niz kontrola za straničenje, postavite kursor tamo gde želite da se postave kontrole, a onda sa palete Insert izaberite Recordset Navigation bar. Možete da napravite tekstualnu liniju linkova ili linkove sa slikama (Dreamweaver obezbeđuje slike). Ova linija za navigaciju se pravi kao centrirana tabela sa ćelijom za svaki link. Linkovi za navigaciju kroz skup zapisa su elementi strane u okviru oznaka a, koji imaju dinamički atribut href. Navigacija se neće narušiti ako promenite bilo šta, osim dinamičkog atributa href. Slobodno možete formatirati ili menjati tekst, dodavati rollover efekat, itd. Objekti Recordset Count Kada se posetioci kreću kroz skup zapisa, oni vole da znaju gde se u tom skupu zapisa nalaze, koliko je ukupno zapisa gde su u skupu, itd. Dreamweaver ima objekte za ove indikatore. Ako na strani imate region koji se ponavlja, i ako su tu kontrole za kretanje kroz skup zapisa, onda brojač možete dodati ako postavite kursor tamo gde želite da se pojave indikatori i iz kategorije Application sa palete Insert izaberete neki od objekata Display Record Count. Ako izaberete da ubacite ceo objekat Recordset Navigation, Dreamweaver pravi i tekst koji će se prikazati. Možete i da ubacite samo mesta za ubacivanje dinamičkog teksta, bez teksta. Ovo se radi ako izaberete objekte Starting Record, Ending Record ili Total Records. Ovi objekti na stranu ubacuju mešavinu dinamičkih i statičkih elemenata. Kao i sa bilo kojim dinamičkim tekstom, slobodno možete da primenite format koji želite ili da promenite bilo koji statički tekst. Uslovni sadržaj Uslovni sadržaj se na strani pojavljuje samo ako je zadovoljen određeni uslov. Tu spadaju neke vrste iskaza if-then u skript jeziku koji koristite na strani servera. Sa uslovnim sadržajem možete da, preko uslova, fino podesite šta se tačno prikazuje na strani. Sve se ovo radi preko objekta Show if ili preko ponašanja servera. Prikazivanje i sakrivanje sadržaja, ako je skup zapisa prazan Ako upit u bazi podataka nije pronašao nijedan zapis koji odgovara kriterijumu, pa je skup zapisa prazan, verovatno ćete korisniku želeti da prikažete poruku "Žao nam je, ali u bazi ništa nije pronađeno". Ako su zapisi pronadeni, onda ćete prikazati relevantne dinamičke elemente. Ovo možete uraditi ako na stranu stavite i jedan i drugi sadržaj, a definišete uslov koji proverava sadržaj skupa zapisa. U ovu svrhu možete da upotebite objekte Show If Recordset Empty i Show If Recordset Not Empty, ili ponašanja servera. Evo kako se to radi: 1. U dokumentu napravite sadržaj koji treba da se prikaže ako su pronadeni zapisi u bazi. Odmah ispred ili iza ovog sadržaja napravite sadržaj koji treba da se prikaže ako zapisa nema. To znači da strana na početku prikazuje mesta za zapis, a onda i poruku "Žao nam je ", ili neki drugi podrazumevani sadržaj. 2. Izaberite sadržaj koji treba da se prikaže samo ako postoje zapisi u skupu zapisa. Proverite da li ste sve izabrali, uključujući i regione koji se ponavljaju, HTML oznake i sl. 3. Sa palete Insert (kategorija Application, objekti Show Region) izaberite objekat Show If Recordset Not Empty. Možete i da u panou Server Behaviors kliknete dugme + i izaberete opciju Show Region > Show If Recordset Not Empty. U okviru za dijalog koji se otvara proverite da li je izabran pravi skup zapisa, a onda kliknite OK da biste ubacili region. Sadržaj koji ste izabrali se u prikazu Design prikazuje u okviru pravougaonika, sa natpisom. Tačan tekst 218 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 natpisa može biti različit, u zavisnosti od serverske tehnologije koju koristite. Izaberite sadržaj koji treba da se prikaže samo ako u bazi ništa nije pronađeno. Ponovo treba da budete sigurni da ste izabrali sve HTML oznake i ostale vidljive elemente. (Možete da koristite Tag Selector, ili da pređete u prikaz Code, da biste proverili da li je sve u redu). Sa palete Insert ili iz panoa Server Behaviors izaberite objekat Show If Recordset Empty. Kada se otvori okvir za dijalog, izaberite skup zapisa preko kojeg ćete testirati da li je sve u redu (taj okvir mora biti prazan, da bi se ovaj sadržaj pojavio), a onda kliknite OK da biste zatvorili okvir za dijalog. Ovaj sadržaj se u prikazu Design takođe prikazuje u okviru pravougaonika. Pogledajte ovu stranu u pretraživaču, da biste videli kako to radi. Možete da eksperimentišete putem promene definicije skupa zapisa, tako da u njemu ne bude podataka, da biste videli poruku "Žao nam je". Prikazivanje i sakrivanje sadržaja na bazi strane u skupu zapisa koja je prikazana Ako ste ikad ubacivali objekat Recordset Navigation Status, onda ste već koristili ovu vrstu uslovnog sadržaja. Ako na strani postoji region koji se ponavlja i ako je straničenje podešeno da u jednom trenutku prikazuje samo odredeni broj zapisa, onda biste mogli da poželite objekat kao što je Move to Next Page, koji bi se prikazivao samo u slučaju da postoji sledeća stranica. U tom cilju možete da koristite objekte Show If First Page, Shof If Not First Page, Show If Last Page i Show If Not Last Page. Evo kako se to radi: 1. Otvorite dokument koji u regionima koji se ponavljaju sadrži dinamičke podatke. Region treba da bude podešen da prikazuje samo deo zapisa u jednom trenutku. 2. Izaberite sadržaj koji bi trebalo da se prikaže samo ako je u pitanju prva strana zapisa. Možete da ubacite bilo koji dekorativni element, kao i dinamičke elemente kao što su Move to First Page ili Move to Previous Page. 3. Sa palete Insert (kategorija Application, objekti Show If) izaberite objekat Show If First Page. Možete i da sa panoa Server Behvaiors izaberete ponašanje servera Show If > Show If First Page. Novi uslovni sadržaj se sada u prikazu Design vidi kao pravougaonik sa natpisom. 4. Ponovite ovu proceduru da biste identifikovali i izolovali elemente koji bi trebalo da se prikažu samo ako nije prva ili poslednja strana u skupu zapisa. Testiranje uslovnog sadržaja i otklanjanje grešaka Kao i regioni koji se ponavljaju, tako se i uslovni regioni kodiraju kodom na serveru koji uokviruje uslovni sadržaj. Evo kako to izgleda (za PHP): <?php if ($totalRows_Recordset_1 > 0) { ?> [conditional content goes here] <?php } ?> ili za ColdFusion: <cfif Recordset4.RecordCount GT 0> [conditional content goes here] </cfif> Važno je da znate kako ovo izgleda, da biste mogli da popravite stvari, ako krenu naopako. Ako se uslovni sadržaj nije sakrio, a prikazuje se ispravni sadržaj, onda na trenutak pređite u prikaz Code. Sav uslovni sadržaj mora biti između reda koji otvara i reda koji zatvara kod. Ako prilikom ubacivanja uslovnog regiona niste izabrali tačno ono što treba, sada možete da selektujete dodatni kod i da ga prebacite između ovih redova početka i kraja. 219 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 17. Još neke dinamičke tehnike Dinamički šabloni Šabloni Dreamweavera se mogu koristiti i sa dinamičkim stranama. Na taj način, preko šablona možete napraviti izgled celog sajta, a da i dalje dinamički kreirate pojedinačne strane. Kreiranje dinamičkih šablona Ako želite da napravite dinamički šablon, izaberite File > New. U okviru za dijalog New Document izaberite Template page i neki od dinamičkih tipova dokumenata koji su prikazani. Koja je razlika između dinamičkog i običnog HTML šablona? Ako radite sa serverskim modelom koji obavezno mora biti na vrhu strane (kao što su deklaracije jezika u ASP-u i ASP.NET-u) onda se kod dodaje automatski. Dreamweaver takođe dinamičke šablone pamti sa dve ekstenzije, na primer, main.cfm.dwt, da bi se ukazalo na status ovih datoteka. Dinamički šablon možete da napravite i ako otvorite postojeću dinamičku stranu i izaberete File > Save As Template. Kako rade dinamičke strane Kada se strana pravi na osnovu šablona, sve oblasti na njoj su zaključane, osim promenljivih regiona, koje ste posebno definisali. Na dinamičkim stranama obično postoji neki serverski sadržaj, koji se nalazi izvan html oznaka. Da bi prihvatio ovaj kod, Dreamweaver smatra da oblast izvan html oznaka može da se menja na izvedenim stranama. To možete da zaključite ako pogledate deo zaglavlja na bilo kojoj izvedenoj strani. Odmah iza oznake html na ovim stranama postoji sledeći iskaz: 220 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 <!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTIVlLIsLocked="false" --> Ovo znači da u dokumente koji se zasnivaju na šablonima možete da dodajete skupove zapisa i druge instrukcije koje se izvršavaju na strani servera. Serverske instrukcije možete da ubacite i na samu šablonsku stranu, ali ako kod postavite izvan HTML oznake, on se tretira kao sadržaj promenljivog regiona, što znači da se ne kopira na postojeće izvedene strane i ove strane mogu da ga prebrišu. Dreamweaver će Vas upozoriti da će se to desiti. Ako želite, možete postići da oblast izvan HTML oznaka ostane zaključana, odnosno da se na svim izvedenim stranama koriste isti skupovi zapisa, kao i u šablonu. Šablonske datoteke podrazumevano ne uključuju iskaz za zaključavanje koda (ovaj iskaz se na izvedene strane dodaje, samo ako ga sami napravite). Ali ipak možete da ga ubacite. U šablonskoj datoteci pređite u prikaz Code i u zaglavlje unesite sledeće: <!-- Templatelnfo codeOutsideHTMLIsLocked="true" - -> Skupovi glavnih i detaljnih strana Kreiranje skupova glavnih i detaljnih strana je dinamički zadatak koji se često javlja. Razmislite o kataloškoj strani na kojoj su prikazani svi proizvodi i gde svaka stavka sadrži link na stranu sa detaljnim informacijama o proizvodu. U Dreamweaveru postoje dva načina da se prave ovakve strane, ručno i automatski. Ručni metod nije to u potpunosti (nema ručnog kodiranja). Ako koristite njega, imate više kontrole nad rasporedom i podešavanjem. Automatski metod je (kao što i ime ukazuje) mnogo brži. Ovde ćemo ispitati oba metoda. Ručno kreiranje skupova glavnih i detaljnih strana Kod ovog metoda pravite glavnu i detaljnu stranu, skupove zapisa i povezujete ove dve strane preko dinamičkih linkova. Detalji procedure su opisani u tekstu koji sledi. Kreiranje glavne strane Napravite stranu koja će biti glavna strana za prikazivanje. Kao i kod bilo koje dinamičke strane, treba isplanirari šta će se prikazati i kako će se to rasporediti na strani. Razmotrite i kakav link treba da vodi na stranu sa detaljima. Da li želite da posetioci kliknu ime stavke, sliku ili treba da postoji neki opšti link na kojem bi stajalo nešto poput: Klikni ovde da bi dobio dodatne informacije? Bez obzira da li je to dinamički element ili ne, link mora biti unutar regiona koji se ponavlja, tako da se prikazuje po jednom za svaku vrstu. Nakon što napravite plan, napravite framework za stranu. Napravite skup zapisa sa informacijama koje treba prikazati, kao što biste uradili i za običnu katalošku stranu. Ovog puta u obzir treba uzeti još jednu stvar: Obavezno treba da imate i kolonu koja služi kao primarni ključ ili jedinstveni identifikator za svaku stavku. Strani sa detaljnim podacima morate tačno da kažete koje podatke treba da prikaže. Ovo polje nećete nigde prikazivati, ali ono mora biti tu. Kreiranje strane sa detaljima Ponovite istu proceduru i za stranu sa detaljima. Počnite planiranjem onog što treba da se prikaže i kako treba da se prikaže. Skicirajte okivr kako to treba da se rasporedi. Nemojte zaboraviti da ubacite link koji Vas vraća nazad na glavnu stranu. Upamtite da će ova strana prikazivati samo jedan zapis, tako da nema potrebe za regionima koji se ponavljaju i straničenjem skupa zapisa. Napravite skup zapisa sa informacijama koje treba prikazati. Opet treba da uključite i jedinstveni identifikator ili primarni ključ. To je ono što povezuje dve strane. Povezivanje glavne i strane sa detaljima linkom Kada se vratite na glavnu stranu, izaberite stavku ili više njih, od kojih želite da link vodi na stranu za prikaz detalja. Stavka Vam je potrebna da biste napravili link na stranu za prikaz detalja, ali sa dodatim URL parametrom koji definiše zapis koji treba da se prikaže. Pošto će parametar biti različit za svaki zapis, to on mora da se određuje dinamički. Link ćete napraviti na sledeći način: 1. U Property Inspectoru kliknite dugme Browse, koje se nalazi pored polja Link. Kada se otvori okvir za dijalog Select File, pronađite stranu za prikaz detalja, ali nemojte još uvek da zatvarate okvir za dijalog! 2. U okviru za dijalog kliknite dugme Parameters. Kada se otvori okvir za dijalog Parameters, unesite ime polja sa jedinstvenim identifikatorom. To je ime parametra. 3. Vrednost parametra se mora dinamički dodeljivati. Kliknite u polje value u okviru za dijalog i kada se pojavi ikona zavrtnja, kliknite je. Kada se otvori okvir za dijalog Data Source, iz skupa zapisa izaberite polje sa idnetifikatorom. Kliknite OK onoliko puta koliko je potrebno da bi se zatvorili svi okviri za dijalog. 221 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako u ovom trenutku pogledate polje Link, videćete da je tu postavljen i dinamički kod. Ako u prikazu Code pogledate kako izgleda link videćete nešto ovako: PHP: <a href="closeup.php?id=<?php echo $row_Recordset1['id']; ?>"> click for close-up</a> ColdFusion: <a href="closeup.cfm?id=<cfoutput>#Recordset1.id#</cfoutput>"> click for close-up</a> ASP.NET: <a href="closeup.aspx?id=<%# DataSetl.FieldValue("id", Container) > %>"> click for close up</a> Standardni kod za link sa URL parametrom je: <a href="closeup.php?id=3"> Kod koji se izvršava na strani servera je postavljen na mesto vrednosti parametra. Filtriranje skupa zapisa za stranu sa detaljima na bazi URL parametra Nakon što je glavna strane prosledila parametar, na strani za prikaz detalja treba upotrebiti taj parametar. Na ovoj strani, otvorite skup zapisa, da biste mogli da promenite nešto u njemu (pronađite ga u listi ponašanja u panou Server Behaviors i kliknite dva puta brzo). U okviru za dijalog Recordset podesite opcije Filter tako da se filtrira na bazi jedinstvenog identifikatora koji se šalje kao URL parametar. Pošto se filtriranje zasniva na jedinstvenom identifikatoru, ovaj skup zapisa sadrži samo jedan zapis. Jedna strana prosleđuje parametar, druga ga prima, a parametar se dinamički generiše. Složeni skupovi zapisa SQL je jezik velikih mogućnosti. On je u stanju da podatke iz baze izvadi na različite načine. Da bi Vam pomogao u radu sa ovim, okvir za dijalog Recordset može da radi u naprednom i običnom režimu. Običan režim je brži i koristi se za prikupljanje podataka, filtriranje i sortiranje osnovnih skupova zapisa. Ako Vam je potrebno spajanje tabela, grupisanje, polja čija se vrednost izračunava ili nešto složenije, onda morate da pređete u napredni režim rada. U ovom režimu možete da napišete svoje SQL upite, da preko Data Tree 222 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 (stabla podataka) napravite složene upite i da u SQL upit ubacite promenljive (parametre). Pisanje SQL upita Na površini, SQL izgleda kao jednostavan jezik, ali u dubini postoji iznenađujuća složenost. Nije teško početi raditi sa njim. Nije loše da prvo u režimu Simple napravite jednostavne iskaze, a da onda pređete u režim Advanced i pogledate kako to izgleda. U SQL-u se ne pravi razlika između malih i velikih slova, ali se obično za ključne reči koriste velika slova. SQL upiti se mogu pisati u nekoliko redova, tako da se lakše čitaju. Osnove U režimu Simple možete da napravite skupove zapisa koji selektuju, filtriraju i sortiraju podatke koji dolaze iz baze: • Selektovanje – Podaci se prikupljaju preko iskaza SELECT. U ovom iskazu se mora zadati koja polja se vade iz baze. Zvezdica ukazuje na to da se žele sva polja. Mora postojati i klauzula FROM, koja definiše tabelu iz koje se podaci vade: SELECT * FROM proizvodi SELECT imeProizvoda,cena FROM proizvodi Dodavanjem klauzula u iskaz SELECT možete dalje da podešavate podatke koji se dobijaju iz baze. • Filtriranje – Podaci se filtriraju preko klauzule WHERE, koja je deo iskaza SELECT. SELECT * FROM proizvodi WHERE cena < 300 SELECT * FROM proizvodi WHERE kategorija = 'satovi' U SQL-u se nizovi karaktera postavljaju između jednostrukih navodnika, što nije slučaj sa numeričkim vrednostima. Klauzula WHERE može da sadrži više kriterijuma za pretraživanje. Ovo se dobija pomoćtu logičkih operatora AND i OR: SELECT * FROM proizvodi WHERE cena < 300 AND kategorija = ’satovi’ 223 / 299 Fakultet organizacionih nauka • Dreamweaver MX 2004 Sortiranje – Zapisi se sortiraju preko klauzule ORDER BY. Zapisi se mogu urediti na osnovu vrednosti u bilo kojem polju i mogu se urediti po rastućem (ASC) ili opadajućem nizu (DESC): SELECT * FROM proizvodi ORDER BY imeProizvoda ASC Klauzula ORDER BY mora biti poslednja u iskazu SELECT. Ako izostavite ključnu reč ASC/DESC podrazumeva se rastući niz. Malo zabave Iza ovih osnova postoji ceo složeni svet. Podaci se odjednom mogu vaditi iz više tabela, tokom vađenja se mogu obavljati izračunavanja i još puno toga. Vađenje samo jednog primerka Ako želite, možete da izvadite samo jedan primerak u konkretnom polju. U tom cilju se koristi ključna reč DISTINCT. SELECT DISTINCT kategorija FROM proizvodi Izračunavanja Nad podacima koji se vade iz baze se mogu vršiti određena izračunavanja. Ovo se radi preko različitih ključnih reči i operatora, pri čemu se dobijaju ta izračunata polja. Izračunavanja se mogu koristiti za sumiranje informacija iz više zapisa, ili za obradu informacija koje se vraćaju. Izračunavanja se mogu koristiti sa ključnom reči AS, čime se izračunatoj vrednosti daje opisno ime, pri čemu se to ime prikazuje u skupu zapisa. Spajanje Baze podataka se sastoje iz više tabela. Ponekad je potrebno da informacije sakupljate iz više različitih tabela. Ovo možete da uradite ako te tabele privremeno spojite preko iskaza join. Postoje različite vrste spajanja i različiti zahtevi za različite sisteme baze podataka. Jednostavna spajanja samo sakupljaju polja iz više tabela, pri čemu se zadaju imena tabela i polja. SELECT proizvodi.imeProizvoda, proizvodi.cena, kupci.* FROM proizvodi,kupci Ovaj iskaz vraća polja imeProizvoda i cena iz tabele proizvodi, kao i sva polja iz tabele kupci. Što su složenije baze podataka (što više međusobno povezanih tabela postoji) to su spajanja važnija. Svaka omiljena kategorija kupca je označena ID oznakom, što odgovara stavkama iz tabele kategorije. Pronalaženje imena omiljene kategorije kupca zahteva pristup obema tabelama: SELECT kategorija.id, kategorija.naziv, kupac.omiljenaKategorija FROM kategorije, kupci WHERE kupci.id = 2 and kupci.omiljenaKategorija = kategorija.id Pisanje SQL upita preko stabla sa stavkama iz baze podataka Oblast sa stablom sa stavkama iz baze podataka se nalazi na dnu prozora Advanced Recrodset. Iz ovog stabla možete da birate stavke koje se nalaze u strukturi baze podataka. Tu se mogu birati ključne SQL reči, čime je moguće konstruisati SQL iskaze, a da se pri tome ne piše nikakav kod. Ovo je koristan način da se smanji kucanje i da se dobije pomoć kod sintakse. Ipak, morate da znate osnovnu sintaksu, da bi ovaj način rada mogao da funkcioniše. Ako želite da napravite iskaz SELECT preko stabla sa podacima, treba da uradite sledeće: 1. Pogledajte stablo sa podacima i izaberite prvo polje koje želite. Kliknite dugme SELECT sa desne strana stabla. Iskaz SELECT će se dodati u prozor SQL. Primetićete da ovaj metod uvek identifikuje polje zajedno sa tabelom iz koje ono dolazi, što je ispravno, premda nije obavezno kada se ne koriste spajanja. 2. Ako želite da iz iste ili neke druge tabele selektujete još neka polja, ponovite korak 1. Dreamweaver neće dodati novi iskaz SELECT, već će umesto toga dodati novo polje u iskaz koji već postoji. Ako želite da dodate klauzulu WHERE: 1. Iz stabla sa podacima izaberite polja na osnovu kojih želite da izvršite filtriranje i kliknite dugme WHERE. Ovim se ubacuje prvi deo iskaza WHERE, ali ne i ostatak, koji se koristi za poređenje. 224 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 2. Sada u deo SQL treba da ubacite operator poređenja. 3. Ako se filtriranje vrši prema nekoj fiksnoj vrednosti (kao što je manje od 3 ili jednako "Fred") morate da i to ukucate. Ako se porede dva polja, onda samo treba da ukucate operator poređenja, izaberete polja koja se porede i kliknite ponovo dugme WHERE. Ako želite da dodate klauzulu ORDER BY uradite isto: Izaberite polje i kliknite dugme ORDER BY da bi se klauzula dodala u kod. Dreamweaver klauzule uvek dodaje u pravilnom redu, tako da je klauzula ORDER BY na kraju upita. Parametri u SQL iskazima Parametri, odnosno promenljive , su delovi SQL iskaza koji se određuju u vreme izvršenja. Na primer, URL parametar, prosleđena promenljiva sa forme, cookie ili promenljiva sesije mogu da definišu filtririanje, sortiranje ili neki drugi element koji ide u SQL upit. Kada skup zapisa filtrirate, preko opcije Filter u okviru za dijalog Simple Recordset, parametri se u SQL upit dodaju iza scene. Da biste parametre koristili na još neki način, morate da pređete u okvir za dijalog Advanced Recordset i njegov deo parameters. Oblast parameters okvira za dijalog Advanced Recordset izgleda drugačije i ponaša se drugačije u zavisnosti od serverskog modela koji koristite. Zato ćemo to objasniti posebno. Parametri za PHP Na slici je prikazana oblast sa parametrima za PHP Ako želite da na PHP strani napravite i koristite parametar, treba da uradite sledeće: 1. Dok je otvoren okvir za dijalog Advanced Recordset, kliknite dugme + u delu parameters. Ovim se kreira novi parametar. 2. Dajte parametru ime od jedne reči. Ovo ime se koristi u SQL upitu, da bi se pristupilo parametru. Možete da izaberete bilo koje ime, koje je različito od reči koje su rezervisane za SQL. Opisna imena omogućavaju da se lakše prati šta se radi. Na primer, ako parametar treba da definiše redosled sortiranja, onda bi sortOrder ili sortby bilo dovoljno opisno. 3. Zadajte podrazumevanu vrednost parametra. Na taj način svoj upit možete da isprobate i bez konačnog izvršenja, i što je još važnije, na ovaj način se na stranama neće javiti greška, ako iz nekog razloga u vreme izvršenja nema vrednosti za parametar. (Na primer, šta se dešava ako 225 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 parametar dolazi iz URL adrese, a strana je pozvana bez parametra?) Ako se parametar koristi za sortiranje, onda bi podrazumevana vrednost mogla da bude ime polja po kome se želi sortiranje. 4. Zadajte vrednost za trenutak izvršenja. Ovo je dinamička vrednost koja se koristi kada se strana izvrši. Ovo mora biti isparavn PHP izraz, koji poziva URL parametar, promenljivu sesije, itd. 5. Na kraju treba da u SQL upit ubacite i ime parametra. Ovo ćete morati da ukucate, tako da morate dovoljno da poznajete SQL sintaksu. Tamo gde treba da se nađe vrednost stavite ime parametra. Na primer, ako parametar određuje redosled sortiranja, i ako je njegovo ime sortby, onda u deo SQL treba da unesete sledeće: SELECT * FROM proizvodi ORDER BY sortby Parametri za ColdFusion Ako želite da za ColdFusion stranu napravite parametar, treba da uradite sledeće: 1. Dok je otvoren okvir za dijalog Advanced Recordset, kliknite dugme + u delu Page Parameters. Ovim se pravi novi parametar. 2. Kada se otvori okvir za dijalog Edit Parameter, unesite vrstu parametra (URL, promenljiva forme itd.) i ime parametra. Ono što unesete u okviru za dijalog Edit Parameter bi trebalo da odgovara koloni Name u ovoj tabeli. Ako će, na primer, tip parametra biti URL i ako je ime sortby, onda bi trebalo da unesete URLsortby, ili samo sortby. (Ispravno je i jedno i drugo.) 3. Dok se još uvek nalazite u okviru za dijalog, unesite podrazumevanu vrednost. Na taj način možete da testirate upit i pre trenutka izvršenja, ali što je važnije, neće se javiti greška, ako iz nekog razloga parametra u trenutku izvršenja ne bude. (Na primer, ako parametar treba da dođe kao deo URL-a, ali je strana pozvana bez URL parametra.) Ako će se parametar koristiti za definisanje redosleda sortiranja, onda podrazumevana vrednost treba da bude ime polja po kojem se vrši sortiranje. 4. Kliknite OK da biste zatvorili okvir za dijalog Edit Parameter. 5. Na kraju treba da u SQL upit ubacite ime parametra. Ovo ćete morati da ukucate, tako da morate dovoljno da poznajete sintaksu SQL-a. Tamo gde treba da dođe vrednost stavite ime, okruženo #. Ako je u pitanju URL parametar koji određuje redosled sortiranja, i ako je njegovo ime sortby, u deo SQL treba da unesete jedno od sledećeg: 226 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 SELECT * FROM proizvodi ORDER BY #URL.sortby# SELECT * FROM proizvodi ORDER BY #sortby# Parametri za ASP.NET Ako želite da u ASP.NET-u napravite i koristite parametar, treba da uradite sledeće: 1. Dok je otvoren okvir za dijalog Advanced DataSet kliknite dugme +, koje se nalazi u delu sa parametrima. Ovim se kreira novi parametar. 2. Kada se otvori okvir za dijalog Edit Parameter, kliknite dugme + da biste dodali novi parametar. 3. Kada se otvori okvir za dijalog Add Parameter, unesite ime parametra. Ime je ono što ćete koristiti u SQL upitu, tako da treba da bude opisno. U ASP.NET-u ispred imena promenljive ide simbol @. Ako na primer, želite da upit filtrirate preko polja id, unesite @id. 4. Iz padajućeg menija Type izaberite tip promenljive. Ovo može biti komplikovano, ako ne znate koji je tip polja u bazi podataka. Za brojeve je obično Integer. Za tekst je obično Wchar. Kompletan opis svakog tipa možete naći u referenci za ASP.NET. ASP.NET kod možete dodati i ručno, ali je lakše da upotrebite dugme Build. 1. U okviru za dijalog Build Value je podrazumevana vrednost imena ona koja odgovara onome što ste zadali u okviru za dijalog Add Parameter. U ovom slučaju je to @id. Ime treba da ostane isto. Iz padajuće liste Source možete da izaberete odakle dolazi promenljiva: URL Parameter, Session Variable, Application Variable, Cookie, Form Variable. Izaberite URL Parameter. U polju Default Value možete da podesite podrazumevanu vrednost, ako želite da se vraća neki rezultata i kada nije prosleđen parametar. Ovo polje možete da ostavite prazno. Kliknite OK da biste naupustili okvir za dijalog Build Value. 2. U okviru za dijalog Add Parameter, u polju Value je sada unet ASP.NET kod, koji proverava da li postoji forma. 3. Kliknite OK da biste se vratili u okvir za dijalog DataSet. 4. Nakon što je definisan parametar, treba da ga ubacite u svoj upit. Ako parametar treba da se koristi kao filter u klauzuli WHERE, da bi se vratili samo zapisi sa određenom ID oznakom, onda u deo SQL treba da unesete sledeće: SELECT imeProizvoda, id FROM proizvodi WHERE id = ? 5. Kliknite dugme Test da biste proverili da li je sintaksa ispravna. Nakon toga kliknite OK da biste zatvorili okvir za dijalog. Kreiranje sistema za prijavljivanje korisnika Na mnogim web sajtovima se primenjuje provera identiteta korisnika. čime se kontroliše pristup do svih ili samo nekih strana. Ako koristite ColdFusion ili PHP, Dreamweaver ima pripremljeno ponašanje servera User Authentication. Tu postoji prijavljivanje korisnika, odjavljivanje, kao i zabrana pristupa onima koji se nisu prijavili. Napomena Alati User Authentication postoje za serverske modele PHP, ASP, ColdFusion i JSP, ali ne i za ASP.NET. 227 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Umesto da koristi skriptove na svakoj strani i time proverava pristup korisnika do konkretne strane, ASP.NET koristi konfiguracione datoteke na nivou aplikacije ili direktorijuma i time osigurava pristup do delova sajta. Uključivanje sesija u ColdFusionu Sistemi za proveru identiteta korisnika se zasnivaju na rukovanju sesijama. Prati se sesija svakog korisnika koji je posetio sajt. Ako koristite ColdFusion, onda morate da za svoju web aplikaciju eksplicitno uključite sesije. Tek tada provera identiteta može da radi. Sesije ćete uključiti ako napravite praznu datoteku Application.cfm (pazite da počne velikim slovom A) i prebacite je na server kao deo svog sajta. U datoteku treba da postavite sledeći kod: <cfapplication name="myApp" sessionmanagement="yes" sessiontimeout="#CreateTimeSpan(0,0,20,0)#"> U prvoj liniji koda se web aplikaciji dodeljuje ime. Ovde možete da zadate i svoje ime od jedne reči, na primer myApp. U poslednjem redu se zadaje da će se sesija završiti nakon 20 minuta neaktivnosti korisnika. Ako unesete drugu vrednost, možete da promenite period neaktivnosti. Ovo je samo početak onog što možete da radite sa datotekom Application.cfm. Registracija korisnika Označavanje korisnika, odnosno njegovo dodavanje u sistem za prijavljivanje se sastoji od kreiranja forme i njene upotrebe za dodavanje novog zapisa u bazu podataka. Ako želite da sprečite da se u bazi pojave ista korisnička imena, možete da koristite ponašanje Check for Duplicate Username. Evo kako se podešava strana za unos podataka o korisniku: 1. Isplanirajte kako će se proces odvijati. Odredite gde korisnik treba da bude preusmeren ako je prijavljivanje uspelo, a gde ako nije. Unapred napravite te strane. 2. U svojoj bazi napravite tabelu u kojoj će se nalaziti informacije o korisniku, uključujući korisničko ime i lozinku, kao i jedinstvenu ID oznaku. 3. Korisnici ColdFusiona treba da uključe sesije na server. Ovo se radi kreiranjem datoteke Application.cfm. Više informacija možete dobiti u prethodnom uokvirenom delu "Uključivanje sesija u ColdFusionu". 4. Napravite dinamičku stranu i na njoj formu za prikupljanje ovih informacija. Ako strana zahteva da postoji skup zapisa iz baze pdoataka, sada ga dodajte. (Za dodavanje korisnika nije potreban skup zapisa.) 5. Izaberite formu. Iz panoa Server Behaviors ili sa palete Application Insert izaberite Insert Record. Videćete okvir za dijalog. Poravnajte svako polje iz forme sa poljem iz baze. Dodelite stranu koju će korisnici videti ako je unos podataka uspeo. 6. Sa panoa Server Behaviors izaberite User Authentication > Check New Username. Kada se otvori okvir za dijalog zadajte polje koje mora biti jedinstveno, kao i stranu na koju korisnik treba da se preusmeri ako se pronađe duplikat. Prijavljivanje korisnika Nakon što se korisnik učlanio i nalazi se u bazi podataka, on ili ona mora biti u stanju da se prijavi, što zahteva stranu za prijavljivanje. To znači da treba napraviti još jednu stranu i primeniti ponašanje Log In User. Stranu za prijavljivanje ćete napraviti na sledeći način: 1. Isplanirajte kako sve to izgleda. Odredite gde korisnik treba da se preusmeri nakon uspešnog prijavljivanja, kao i gde da se pošalje, ako prijavljivanje nije uspelo. Te strane napravite unapred. 2. Napravite novu dinamičku stranu i na njoj formu koja sadrži polja za korisničko ime i lozinku. Tu treba da bude i dugme Submit. Ako je za neki deo strane potreban skup zapisa, sada je trenutak da ga napravite. 3. Izaberite formu, a onda iz panoa Server Behaviors izaberite User Authentication > Log In User. U okviru za dijalog koji se otvara izaberite polja forme koja treba da se proveravaju, a izaberite i polja u bazi na osnovu kojih to treba da se radi. (Ovo je lako uraditi, ako ste imena zadavali pažljivo.) Nakon toga dodelite odredišta za uspešno i neuspešno prijavljivanje. Ograničavanje pristupa Nema razloga da terate korisnika da se prijavljuje, ako to prijavljivanje ne utiče na ono što on može da vidi na sajtu. Čim postavite sistem, treba i da ograničite pristup do nekih strana. U Dreamweaveru se ovo radi preko ponašanja Restrict Access to Page. Ovo ponašanje bi trebalo da primenite na sve strane koje smeju 228 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 da se prikažu samo proverenim korisnicima. Ako želite da ograničite pristup do neke strane, treba da uradite sledeće: 1. Isplanirajte. Sta se dešava ako korisnik koji nije prijavljen pokuša da pristupi strani? Gde on ili ona treba da budu preusmereni? Ako je potrebno, napravite te strane. 2. Otvorite dinamičku stranu. Ponašanje se na stranu dodaje kao celina, tako da nije potrebno da bilo šta selektujete. 3. Sa panoa Server Behaviors izaberite user Authentication > Restrict Access to Page. U okviru za dijalog koji se otvara ograničite pristup na bazi korisničkog imena i lozinke i dodelite stranu na koju korisnik treba da se preusmeri ako nema dozvolu pristupa. Ovaj proces treba da ponovite za sve strane kojima je pristup ograničen, a ne samo za glavnu stranu. U uobičajenom postpuku, korisnik ne može da dođe do neke od internih strana, ako pre toga nije bio na glavnoj. Ali šta može da zaustavi nekog da direktno unese URL neke detaljne strane i na taj način joj pristupi? Ako zaista želite da pristup do strane bude ograničen, onda morate da ograničite sve, a ne samo glavnu stranu. Odjavljivanje Radi sigurnosti je dobro da korisniku date priliku da se eksplicitno odjavi. Ovaj proces se sastoji u pridruživanju ponašanja Log User Out. Ovo ponašanje se pridružuje tekstualnom linku ili dugmetu. Pošto samo prijavljeni korisnici mogu da se odjave, ove akcije treba da se postave na strane kod kojih postoji ograničenje pristupa. Sistem za odjavljivanje ćete napraviti ako na svakoj strani kojoj je ograničen pristup uradite sledeće: 1. Isplanirajte. Odredite gde korisnik treba da se preusmeri kada se odjavi. (Ne može da ostane na strani kojoj je pristup ograničen.). To može biti strana na kojoj stoji "Odjavili ste se", može biti strana za prijavljivanje ili glavna strana na sajtu za koju pristup nije ograničen. Ako strana ne postoji, napravite je. 2. Definišite gde na srrani treba da se prikaže link za odjavljivanje i napravite ga. 3. Izaberite link (tekstualni ili sliku). Sa panoa Server Behaviors izaberite User Authentication > Log User Out. U okviru za dijalog koji se otvara izaberite da se korisnik odjavi kada se selektuje link (ako ste pre otvaranja ovog ponašanja izabrali link, onda će ova opcija biti već izabrana). Dodelite stranu na koju korisnik treba da se preusmeri nakon uspešnog odjavljivanja. Upamtite da morate da imate i automatsko odjavljivanje, ako korisnik neko određeno vreme na sajtu ne vrši nikakvu akciju, ili ako napusti svoj pretraživač. Uslovni sadržaj Uslovni sadržaj je strana čiji se sadržaj prikazuje samo ako je zadovoljen određeni uslov. To može biti dinamički ili statički sadržaj, ali se mora nalaziti na dinamičkoj strani. Kod različitih jezika za skriptove na strani servera, se ovo obično pravi preko iskaza if (ako je x tačno, prikaži to i to), ili preko iskaza if-else (ako je x tačno prikaži ovo, u suprotnom ono). Objekat Show Region iz Dreamweavera omogućava da prikazujete ili sakrivate sadržaj na bazi uslova u skupu zapisa. Sve druge vrste uslovnog sadržaja možete da pravite sami, ako znate sintaksu koja se koristi kod serverskog modela (sadržaj na bazi URL parametara, promenljive sesije itd.). Objekti Show Region Objekti Show Region, koji su prikazani na slici, omogućavaju da izabrani sadržaj na strani prikažete ili sakrijete, na bazi uslova u skupu zapisa, ako je skup zapisa prazan ili nije, ako su prikazane kontrole za straničenje i ako je prikazan prvi ili poslednji zapis i sl. Ovo je vrlo korisno za kreiranje specijalnih poruka, kao što je "Zao nam je, ali ne postoje zapisi koji odgovaraju kriterijumu koji ste zadali". Objekti Show Region se mogu koristiti i u objektu Recordset Navigation Status za sakrivanje ili prikazivanje linkova na nove strane u skupu zapisa. 229 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Objekat Show Region se koristi na sledeći način: 1. Napravite sadržaj koji želite da prikažete ili sakrijete na bazi skupa zapisa. 2. Izaberite taj sadržaj (pazite da sve izaberete, uključujući i oznake za otvaranje i zatvaranje) i izaberite neki od objekata Show Region. U prikazu Design bi taj uslovni sadržaj trebalo da se prikaže okružen pravougaonikom sa natpisom. Druge vrste uslovnog sadržaja Pored ovih uslova koji su napravljeni na bazi skupa zapisa, postoji još niz drugih mogućnosti. Kako da sakrijete ili prikažete dinamičku sliku na bazi toga da li tekući zapis sadrži podatke o dinamičkoj slici? Sakrivanje ili prikazivanje tajnih informacija na bazi toga da li je korisnik prijavljen? Sakrivanje ili prikazivanje naslova ili poruka u zavisnosti od prisustva URL parametara? Uslovni sadržaj omogućava da istu stranu koristite u različite svrhe, tako da ne morate da pravite različite strane. Ubacivanje elemenata iz Dreamweavera u uslovni sadržaj nije teško, ako Vam nije strano malo kucanja u prikazu Code i ako znate sintaksu koja se koristi u jeziku koji koristite na strani servera. Uslovni sadržaj ćete napraviti ako prvo u prikazu Design napravite sadržaj. Nakon toga ga ogradite iskazom if, sa sintaksom koja se koristi u jeziku na strani servera. Prikazivanje sadržaja samo ako polje u zapisu nije prazno Neki zapisi iz baze podataka mogu da sadrže prazna polja. U tom slučaju ne želite da se prikazuju njihovi podaci. Možete da napravite uslovni sadržaj koji će se prikazati samo ako tekući zapis ima u tom polju podatke, ili samo ako zapis nema podatke. Možete i da prikazujete različite skupove sadržaja, jedan ako sadržaja ima, a drugi ako ga nema. Prikazivanje sadržaja na bazi URL parametra Ista strana može da se različitim posetiocima prikazuje na različite način. Ovo može da se uradi preko slanja različitih vrednosti URL parametra. Na primer, kada korisnik prvi put dođe na stranu za prijavljivanje ne prikazuje se nikakav dodatni sadržaj. Ako prijavljivanje ne uspe, na strani se prikazuje i poruka o grešci. Ako je korisnik preusmeren na stranu za prijavljivanje, nakon što je pokušao da poseti stranu za koju postoji ograničen pristup, onda se pojavljuje poruka o tome, itd. Uslovni sadržaj koji pišete mora da testira da li postoji URL parametar i da zatim proveri koja je vrednost tog parametra. 230 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 18. ASP.NET ASP.NET napomene o instalaciji Instalacija ASP.NET-a je generalno prilično jednostavna. Ipak nije loše dati neke napomene o kojima bi prilikom instalacije trebalo razmisliti. Generalne instrukcije vezane za instalaciju možete preuzeti sa Microsoftovog sajta, pošto se one menjaju. Koraci su dobro dokumentovani za bilo koju konfiguraciju. Na kojim verzijama Windowsa ASP.NET može da radi? Morate da koristite verzije Windows 98, Windows 2000, Windows Me, Windows NT, Windows Server 2003 ili Windows XP Pro. Windows XP Home Edition nije podržan. Morate da imate instaliran i Microsoft Internet Information Server. Isključite opciju Simple File Sharing U Windowsu XP je opcija Simple File Sharing podrazumevano uključena. Ne postoji posebna kartica za sigurnost na kojoj biste to uradili. Opciju Simple File Sharing ćete isključiti ako otvorite My Computer (ili računar na kome ovo menjate) i izaberete Tools > Folder Options. Na kartici View u panou Advanced Setting postoji polje za potvrdu Simple File Sharing. Ovo polje ne treba da bude potvrđeno. Kliknite OK da biste primenili promene. Podešavanje dozvola za fascikle Možda nemate dozvolu da na pravi način pristupate fasciklama na kojima se nalazi Vaša aplikacija. Sigurnost za neku fasciklu ćete podesiti ako je kliknete desnim tasterom i izaberete Preferences. Trebalo bi da vidite karticu Security. Ako to nije slučaj, onda je možda disk formatiran sa sistemom FAT32. Možda ćete morati da ga formatirate sa NTFS sistemom, da biste mogli da dobijete prave dozvole. U Windows Helpu imate instrukcije o konverziji FAT32 dela u NTFS, a da se pri tome ne izgube datoteke. Na kartici Security treba da dodate dva korisnika, koji imaju pristup do fascikle. 1. Klikntie dugme Add. 2. U okviru za dijalog Select Users or Groups kliknite dugme Advanced. 3. Kliknite dugme Find Now. 4. U koloni Name (RDN) izaberite korisnika ASP.NET Kliknite OK da biste se vratili nazad u okvir za dijalog Select User or Groups. 5. Kliknite ponovo dugme Advanced. 6. U koloni Name (RDN) izaberite korisnika IUSR. Kliknite OK da biste se vratili u okvir za dijalog Select User or Groups. 7. Na kartici Security bi sada trebalo da postoje dva nova korisnika. Oni su prikazani u polju Group or user names. 8. Izaberite ASP.NET Machine Account (korisnički nalog za ASP.NET) i dodelite mu punu kontrolu. 9. Izaberite Internet Guest Account (korisnički nalog IUSR) i dodelite mu punu kontrolu. 10. Kliknite OK da biste upamtili promene. Ovim ste napravili dva nova naloga koji su potrebni da biste mogli da pišete i da izvršavate programe na fasciklama na kojima se nalazi aplikacija. Podešavanje dozvola za IIS Administratora Morate eksplicitno da napravite fasciklu koju će Vaša aplikacija da koristi. Ova fascikla se nalazi u fascikli web root. 1. Otvorite IIS (Internet Information Services) server Administratora. Izaberite Start > Programs > Administrative Tools > Internet Information Services. 2. U stablu IIS otvorite machine, zatim fasciklu Web Sites, pa Default Web Site i pronađite fasciklu sa Vašom web aplikacijom. 3. Izaberite fasciklu, kliknite je desnim tasterom miša i za tu fasciklu izaberite opciju Properties. 4. Na kartici Directory iz padajuće liste Execute Permissions izaberite opciju Scripts and Executables. Kliknite Create, a onda OK. 231 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ovim ste podesili fasciklu tako da je web root prepozna kao ASP.NET što znači da aplikacija može da se izvršava. ASP.NET objekti za ručno kodiranje na paleti Insertion ASP.NET se zasniva na skriptovima koji su bitno različiti u odnosu na ColdFusion MX. Skriptovi programerima pružaju puno, ali je nedostatak da kod na strani servera uglavnom mora da se unosi ručno. Mnogi od objekata na paleti insertion su samo prečice za ručno kodiranje. Objekat Register Custom Tag Objekat Register Custom Tag ubacuje na stranu kod koji postavlja i pristupa korisničkim serverskim kontrolama na strani. Preko ASP.NET ponašanja servera se ubacuje nekoliko korisničkih oznaka Macromedia. Njihovo ubacivanje i pregled koda koji se dobija je dobar način da se počne sa Custom Tag objektima. Detaljno objašnjenje o ASP.NET oznakama možete naći u nekom od resursa u odeljku ASP.NET resursi, na kraju ovog poglavlja. Promenljive servera su: • TagPrefix - Podešava se prefiks oznake, koji je povezuje sa prostorom imena. • TagName - Zadaje se ime oznake, koji je povezuje sa klasom u prostoru imena. • Src - Podešava se prostor imena koji je povezuje sa TagPrefix-om. <%@ Register TagPrefix="MM" Namespace="DreamweaverCtrls" Assembly=" DreamweaverCt rls, version=1.0.0.0, publicKeyToken=836f606ede05d46a,culture=neutral" %> Ovaj kod je ubačen preko ponašanja servera DataServer. On podešava prostor imena DreamweaverCtrls koji sadrži korisničke kontrole koje Dreamweaver koristi. Ubacivanje bilo kojeg objekta ASP.NET takođe ubacuje i oznaku @Register, koja ide u isti prostor imena. TagPref ix je prvi deo imena korisničke oznake. Objekat Import Namespace Oznaka Import Namespace ubacuje referencu na korisnički prostor imena ili deo .NET Framworka. ASP.NET omogućava da koristite korisničke kontrole i apstraktne delove koda. Uvoz prostora imena eksplicitno deklariše putanju do kontrola koje koristite u svojim aplikacijama. Objekat Import Namespace ubacuje sledeći kod: <%@ Import Namespace="" %> Objekat Trimmed Form Element Objekat Trimmed Form Element ubacuje metod Trim() u izraz. Ovaj metod uklanja sve praznine sa početka i/ili kraja vrednosti elementa forme koji odsecate. Objekat Trimmed Elemenet Form ubacuje sledeći kod: Trim(Request.Form("")) Element Trimmed QueryString Ovaj element u izraz ubacuje metod Trim() koji briše sve beline na početku i/ili kraju URL parametra koji čistite. Trim(Request.QueryString("")) Objekat Runat Server Ovaj objekat jednostavno u kod ubacuje ' runat="server"'. Atribut Runat Server je obavezan kod nekih oznaka. Ova oznaka je jednostavno skraćenica za ručno kodiranje. 232 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 'runat="server" Objekat Bound Data Čim ste na strani definisali DataSet, možete da vežete podatke iz polja u tabeli sa objektom na strani. Notacija je <%# %>. Evo primera: <%# FindDepartment.FieldValue("departmentname", Container) %> U ovom kodu se na stranu postavlja polje departmentname iz DataSeta FindDepartment. <ASP:Repeater runat="server" DataSource='<%# FindDepartment.DefaultView %>'> <ItemTemplate> <%# FindDepartment.FieldValueC'departmentname", Container) %> </ItemTemplate> </ASP:Repeater> U ovom kodu se isti podaci vezuju na stranu, ali je sada oko njih Repeater koji prolazi kroz niz podataka koji se nalaze u Data Setu i štampa svaki zapis. Objekat Page_Load Ovo je događaj koji se izvršava svaki put kada se strana učitava. Dreamweaver pored samog događaja ubacuje i blok koda koji proverava da li strana ide na samu sebe. Ako ide, izvršava se kod. Ako se strana ne šalje nazad, kod se ne izvršava. Dreamweaver ubacuje blok koda, ali i dalje morate ručno da unesete kod za funkciju koja se izvršava. Objekat PageLoad je posebno koristan ako morate da obrađujete formu koja podatke šalje na samu sebe. U tom slučaju biste mogli da imate veliku kontrolu, kao što je DataGrid, koja radi sa podacima iz forme, samo ako je forma ispunjena. Ako se strana pozove prvi put, a da pri tome nisu popunjene informacije na formi, kod koji popunjava kontrolu DataGrid se neće izršiti. Dreamweaver ubacuje sledeći kod: <script runat="server"> Sub Page_Load(Src As Object, E As EventArgs) If Not IsPostBack Then DataBind(); End If End Sub </script> ASP.NET objekti Web Server Control na paleti Insertion ASP.NET ima niz kontrola koje se koriste kao objekti u formama. Oni pružaju mnogo više kontrole nego obični elementi forme. Kada za kreiranje formi na stranama za ubacivanje i ažuriranje podataka, koristite ponašanja servera Dreamweavera, on koristi kontrole web servera. To što možete da kontrolama pristupate posebno omogućava da prilagodite forme ili da napravite svoje, na kojima ne biste koristili unapred definisana ponašanja. Objekat asp:Button Ovaj objekat na formi prikazuje dugme koje se može kliknuti. Ovo je slično sa običnim HTML dugmetom, ali postoji znatno više interakcije sa aplikacionim serverom. Objekat asp:Button ima sledeće atribute: • General (opšti): • ID - Zadaje se ID oznaka objekta, tako da mu se može pristupiti u skriptovima. Ovo mora da bude alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text - Zadaje se natpis na kontroli. • Command Name - Zadaje se komanda koja je vezana za ovu kontrolu. Obično HTML dugme ima samo jednu akciju submit. Objekat asp:Button može da ima više dugmadi koja se različito ponašaju 233 / 299 Fakultet organizacionih nauka • • • • • • • • • • • • • • • • • • • • • • • • • • Dreamweaver MX 2004 kada se izaberu. Command Argument - Podešava se parametar koji se prosleđuje komandi koja je zadata sa Command Name. Layout (raspored): Visina - Zadaje se visina kontrole na strani. Width - Zadaje se širina kontrole na strani. Border Width - Zadaje se debljina okvira kontrole. Background Color - Zadaje se boja pozadine kontrole. Border Color - Zadaje se boja okvira za kontrolu i oko kontrole se pravi kosina. Okviri su uvek zakošeni. Foreground Color - Zadaje se boja prednjeg dela kontrole. Style Information (stilovi): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML, i CSS nasleđuje osobine koje su direktno definisane za kontrolu i imaju prioritet u odnosu na definicije zadate u klasi. Border Style - Stil okvira koji se zadaje preko atributa Border Width u delu Layout. Mogućnosti su nonset, none, dotted, dashed, solid, double, groove, ridge, inset i outset. Font Name - Zadaje se ime fonta kojim se prikazuje tekst. Font Names - Zadaje se lista fontova kroz koju pretraživač prolazi u potrazi za fontom koji može da pronađe. Font Size - Zadaje se veličina natpisa kontrole. Bold - Zadaje se da se tekst ispisuje masnim slovima. Italic - Font se podešava na italic. Overline - Preko teksta se crta linija. Strikeout - Font je precrtan. Underline - Ispod teksta se crta linija. Enabled - Uključuje se prikazivanje kontrole. Kontrole koje nisu uključene se vide, ali ne mogu da se izaberu. Ovo možete da menjate u ASP.NET skriptu i da na taj način preko opcija koje podešavate na formi uključujete i isključujete kontrolu. Enable Viewstate - Stanje prikaza se u ASP.NET-u automatski održava. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Uobičajeno je da se ovaj atribut koristi zajedno sa skriptom koji kontroliše vidljivost kontrole na bazi opcija koje se dinamički podešavaju. Accessibility (dostupnost): Tool Tip - Podešava se ToolTip (savet) za dostupnost. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. Tab Index - Zadaje se redosled kontrola, tako da možete da zadate redosled po kojem se ide sa kontrole na kontrolu kada korisnik preko tastera tab ide po strani. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnClick - Događaj koji se dešava kada se kontrola klikne. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • OnInit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. • Objekat asp:Button ubacuje sledeći kod (sa zadatim samo opštim atributima): <asp:Button CommandName="vratiZaposlene" ID="submitid" runat="server" Text="Submit" /> Objekat asp:CheckBox 234 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Objekat asp:CheckBox ubacuje element asp:CheckBox na formu. Polja za potvrdu mogu imati vrednosti tačno i netačno. Ovaj objekat ima atribute koji pružaju mnogo više kontrole nego standardno polje za potvrdu iz HTML-a. Objekat asp:CheckBox ima sledeće atribute: • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • General (opšti): ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. Text - Natpis kontrole. Text Alignment - Definiše da li se tekst prikazuje sa leve ili desne strane polja za potvrdu. Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. Checked - Ukazuje da li je kontrola potvrđena. Group Name - Zadaje se ime grupe polja za potvrdu kojoj je ovo polje pridruženo. Layout (raspored): Height - Zadaje se visina kontrole na strani. Width - Zadaje se širina kontrole na strani. Border Width - Zadaje se debljina okvira kontrole. Background Color - Zadaje se boja pozadine kontrole. Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. Foreground Color - Zadaje se prednja boja kontrole. Style Information (informacije o stilu): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. Border Style - Stil okvira koji je podešen preko atributa Border Width i Border Color u delu Layout. Moguće vrednosti su notset, none, dotted, dashed, solid, double, groove, ridge, inset i outset. Font Name - Zadaje se ime fonta kojim se prikazuje tekst. Font Names - Zadaje se lista fontova kroz koju pretraživač prolazi u potrazi za fontom koji može da pronađe. Font Size - Zadaje se veličina natpisa. Bold - Zadaje se da font bude bold (ispisan masnim slovima). Italic - Zadaje se da font bude italic. Overline - Preko teksta se crta linija. Underline - Tekst se podvlači. Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tool Tip - Zadaje se savet (Tool Tip ) za dostupnost. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnCheckedChanged - Događaj kada se kontrola promeni. Ako želite da se tom prilikom izvši neka funkcija, onda morate da na kartici General u okviru za dijalog atribut AutoPostBack podesite na true. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto 235 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. • Objekat asp:CheckBox ubacuje sledeći kod (podešena je većina atributa): <asp:CheckBox BackColor="#999999" BorderColor="#CCCCCC" BorderWidth="6" ForeColor="#000000" Height="40" ID="checkbox1" runat="server" Text="Male" TextAlign="left" Width="40" /> Objekat asp:CheckBoxList Ovaj objekat ubacuje niz polja za potvrdu. Korisnik može da selektuje više stavki. Lista može da ima proizvoljan broj članova koji se pune na osnovu izvora podataka. Ako imate formu koja korisnicima omogućava da iz istog polja u bazi bira više stavki, onda procesor mora da ide kroz skup rezultata ili će se uzeti samo prva stavka koja ima to ime. Na primer, ako imate formu koja omogućava da ljudi biraju dodatke za picu preko polja za potvrdu, onda kroz rezultat morate da prođete onoliko puta koliko je izabrano dodataka, ili će se obraditi samo prva izabrana stavka. Objekat asp:CheckBoxList ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text Alignment - Definiše da li se tekst prikazuje sa leve ili desne strane polja za potvrdu. • Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Border Width - Zadaje se debljina okvira kontrole. • Cell Padding - Zadaje se HTML Cell Padding atribut. On se ubacuje u oznaku FORM koja se pravi na serveru. • Cell Spacing - Zadaje se HTML Cell Spacing atribut. On se ubacuje u oznaku FORM koja se pravi na serveru. • Background Color - Zadaje se boja pozadine kontrole. • Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. • Foreground Color - Zadaje se boja prednje strane kontrole. • Data (podaci): • Data Member - Vraća se tabela koja je zadata u izvoru podataka. • Data Source - Vraća se izvor podataka koji se koristi za popunu padajuće liste. Izvor podataka mora biti objekat koji koristi interfejs IEnumerable, kao što su DataView, ArrayList, Hashtable ili DataSet, koji se definiše na strani preko panoa Server Behaviors. • Data Text Field - Zadaje se polje iz izvora podataka koje se koristi kao natpis za svaku stavku. Ovo je tekst koji se prikazuje na meniju. • Data Text Format String - Zadaje se string koji se koristi za formatiranje podataka koji se prikazuju na kontroli. • Data Value Fild - Zadaje se polje iz izvora podataka koje se koristi kao vrednost za svaku stavku iz liste. • Repeat Columns - Zadaje se broj kolona koje se prikazuju na koloni. • Repeat Direction - Zadaje se da kontrola prikazuje polja za potvrdu poređana po vertikali ili horizontali. 236 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 • • • Repeat Layout - Zadaje se da izlaz bude tabela ili običan HTML tok. Style Information (informacije o stilu): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. • Font Name - Zadaje se ime fonta kojim se prikazuje tekst. • Font Names - Zadaje se lista fontova kroz koje pretraživač prolazi sve dok ne nađe font koji može da prikaže. • Font Size - Zadaje se veličina natpisa. • Bold - Zadaje se da font bude bold (ispisan masnim slovima). • Italic - Zadaje se da font bude italic. • Overline - Preko teksta se crta linija. • Strkeout - Preko slova se crta linija. • Underline - Tekst se podvlači. • Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. • Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. • Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (Dostupnost): • Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. • Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnSelectedIndexChange - Događaj koji se dešava kada se lista promeni i pošalje nazad na server. Ovo se obično koristi sa uključenom opcijom AutoPostBack, koja šalje formu nazad na server kada se iz liste izabere neka stavka. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Dogadaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. Objekat asp:CheckBoxList ubacuje sledeći kod (sa zadatim nekim atributima i skupom podataka koji je prethodno definisan kao GetProducts): <asp:CheckBoxListID="SelectProducts" runat="server" TextAlign="left" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:CheckBoxList> Ovaj kod zadaje izvor podataka po imenu SelectProducts koji je napravljen preko ponašanja servera DataSet. Nakon toga se povezuje polje productname iz baze sa DataTextField, a productsid sa DataValueField. <asp:CheckBoxl_ist BorderColor= "#000000" BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectProducts" RepeatDirection="horizontal" RepeatLayout="table" 237 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 runat="server" TextAlign="left"> </asp:CheckBoxList> Ovaj kod definiše izvor podataka po imenu GetProducts koji je napravljen preko ponašanja DataSet. Nakon toga se polje productname iz baze povezuje sa DataTextField, a productsid sa DataValueFild. Atribut RepeatDirection je podešen na horizontalu, a RepeatLayout je podešen tako da se polja za potvrdu stavljaju u tabelu. Tabela je podešena da BorderWidth bude 1, a CellPadding 2. Okvir je zadat preko CSS stila u okviru oznake <TABLE>, a ne preko HTML atributa BORDER. Objekat asp:DropDownList Ovaj objekat ubacuje padajuću listu iz koje korisnik može da izabere jednu stavku. U listi se može nalaziti proizvoljan broj stavki, koje se mogu vaditi iz izvora podataka. asp:DropDownList ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Background Color - Zadaje se boja pozadine kontrole. • Foreground Color - Zadaje se boja prednje strane kontrole. • Data (podaci): • Data Member - Vraća se tabela koja je zadata u izvoru podataka. • Data Source - Vraća se izvor podataka koji se koristi za popunu padajuće liste. Izvor podataka mora biti objekat koji koristi interfejs IEnumerable, kao što su DataView, ArrayList, Hashtable ili DataSet, koji se definiše na strani preko panoa Server Behaviors. • Data Text Field - Zadaje se polje iz izvora podataka koje se koristi kao natpis za svaku stavku. Ovo je tekst koji se prikazuje na meniju. • Data Text Format String - Zadaje se string koji se koristi za formatiranje podataka koji se prikazuju na kontroli. • Data Value Field - Zadaje se polje iz izvora podataka koje se koristi kao vrednost za svaku stavku iz liste. • Style Information (informacije o stilu): • CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. • Font Name - Zadaje se ime fonta kojim se prikazuje tekst. • Font Names - Zadaje se lista fontova kroz koje pretraživač prolazi sve dok ne nađe font koji može da prikaže. • Font Size - Zadaje se veličina natpisa. • Bold - Zadaje se da font bude bold (ispisan masnim slovima). • Italic - Zadaje se da font bude italic. • Overline - Preko teksta se crta linija. • Strikeout - Preko slova se crta linija. • Underline - Tekst se podvlači. • Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. • Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. • Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptiom da biste dinamički prikazivali ili sakrivali kontrole. • Accesibility (dostupnost): • Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. • Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. 238 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Events (događaji): • OnSelectedIndexChange - Događaj koji se dešava kada se lista promeni i pošalje nazad na server. Ovo se obično koristi sa uključenom opcijom AutoPostBack, koja šalje formu nazad na server kada se iz liste izabere neka stavka. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • OnInit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnload - Događaj kada se kontrola izbaci iz memorije. • Objekat asp:DropDownList ubacuje sledeći kod (sa zadatim nekim atributima i podacima koji su pre toga definisani preko GetProducts): <asp:DropDownList ID="SelectProductID" runat="server" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid"> </asp:DropDownList> Ovaj kod zadaje izvor podataka po imenu GetProducts koji je napravljen preko ponašanja servera DataSet. Nakon toga se vezuje polje productname iz baze podataka sa atributom DataTextField, a productid sa atributom DataValueField. Objekat asp:lmageButton Ovaj objekat prikazuje sliku kao dugme koje može da se izabere. Dugme je na formi i ponaša se slično kao obično HTML dugme, ali ima mnogo više interakcije sa aplikacionim serverom. Objekat aspImageButton ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Image URL - Podešava se URL slike koja se prikazuje kao dugme. Putanja treba da bude relativna u odnosu na stranu ili u odnosu na koren, kao što je slučaj sa bilo kojom statičkom slikom koja postoji na strani. Podržane su i apsolutne putanje. • Alternate Text - Zadaje se atribut alt za sliku, koja će biti kontrola. • Command Name - Zadaje se komanda koja je pridružena kontroli. Svaki objekat asp:ImageButton može da ima različite funkcije kada se klikne. • Command Argument - Zadaje se parametar koji se prosleđuje komandi koja je zadata preko Command Name. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Image Alignment - Zadaje se HTML align atribut za sliku. Ovo se koristi kada se strana prikazuje u pretraživaču. Ne koristi se CSS stil. • Border Width - Zadaje se debljina okvira kontrole. • Background Color - Zadaje se boja pozadine kontrole. • Border Color - Zadaje se boja okvira, pri čemu taj okvii ima zakošeni oblik. Okvirna linija je uvek zakošena. • Foreground Color - Zadaje se prednja boja kontrole. • Style Information (informacije o stilu): • CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se defmišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. • Border Style - Stil okvira koji je podešen preko atributa Border Width i Border Color u delu Layout. Moguće vrednosti su notset, none, dotted, dashed, solid, double, groove, ridge, inset i outset. • Font Name - Zadaje se ime fonta kojim se prikazuje tekst. 239 / 299 Fakultet organizacionih nauka • • • • • • • • • • • • • • Dreamweaver MX 2004 Font Names - Zadaje se lista fontova koje pretraživač pregleda sve dok ne pronađe font koji može da prikaže. Font Size - Zadaje se veličina natpisa. Bold - Zadaje se da font bude bold (ispisan masnim slovima). Italic - Zadaje se da font bude italic Overline - Preko teksta se crta linija. Strkeout - Preko slova se crta linija. Underline - Tekst se podvlači. Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tool Tip - Zadaje se savet (Tool Tip ) za dostupnost. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnCommand - Događaj koji se dešava kada korisnik klikne ImageButton. • OnClick - Događaj kada korisnik klikne ImageButton. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnload - Događaj kada se kontrola izbacuje iz memorije. • Objekat aspTmageButton ubacuje sledeći kod (zadati su samo atributi iz dela General): <asp:ImageButton AlternateText="Order Button" CommandName="orderitems" ID="ImageButtonID" ImageAlign="Middle" ImageUrl="images/button.gif" runat="server" /> Objekat asp:Label Ovaj objekat na formu ubacuje element asp:Label. Prikazuje se statički tekst koji se dinamički generiše. Ovim tekstom se može manipulisati preko servera. Objekat asp:Label ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text - Zadaje se natpis kontrole. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Border Width - Zadaje se debljina okvira kontrole. • Background Color - Zadaje se boja pozadine kontrole. • Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. • Foreground Color - Zadaje se prednja boja kontrole. 240 / 299 Fakultet organizacionih nauka • • • • • • • • • • • • • • • • • • Dreamweaver MX 2004 Style Information (informacije o stilu): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. Border Style - Stil okvira koji je podešen preko atributa Border Width i Border Color u delu Layout. Moguće vrednosti su notset, none, dotted, dashed, solid, double, groove, ridge, inset i outset. Font Name - Zadaje se ime fonta kojim se prikazuje tekst. Font Names - Zadaje se lista fontova koje pretraživać pregleda sve dok ne pronađe font koji može da prikaže. Font Size - Zadaje se veličina natpisa. Bold - Zadaje se da font bude bold (ispisan masnim slovima). Italic - Zadaje se da font bude italic. Overline - Preko teksta se crta linija. Strkeout - Preko slova se crta linija. Underline - Tekst se podvlači. Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptiom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tool Tip - Zadaje se savet (Tool Tip ) za dostupnost. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnload - Događaj kada se kontrola izbacuje iz memorije. Objekat asp:Label ubacuje sledeći kod (sa zadatim samo atributima iz dela general): <asp:Label ID="ColorChoiceID" runat="server" Text="The item is available in multiple colors, select one here:"> </asp:Label> Objekat asp:ListBox Ovaj objekat ubacuje listu iz koje korisnik može da izabere jednu ili više stavki. Lista može da sadrži proizvoljan broj stavki, koje se vade iz izvora podataka. Ako imate formu koja omogućava da korisnici iz iste baze vade više stavki, onda prilikom obrade morate da idete kroz tu listu, ili ćete izvaditi samo prvu izabranu opciju. Na primer, ako forma omogućava da ljudi biraju nekoliko dodataka za picu, petljom morate da prođete kroz ceo rezultat, jer biste u suprotnom izvadili samo prvi dodatak. Objekat asp:listBox ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Rows - Zadaje se broj vrsti koje se prikazuju u listi. Ako postoji više stavki nego što ima prostora, prikazaće se i klizači. • Selection Mode - Podešava se način izbora na single ili multiple (da li iz liste može da se izabere jedna ili više stavki). • Auto Postback - Defmiše se da li kontrola šalje formu nazad na server. • Layout (raspored): 241 / 299 Fakultet organizacionih nauka • • • • • • • • • • • • • • • • • • • • • • • • • • Dreamweaver MX 2004 Height - Zadaje se visina kontrole na strani. Width - Zadaje se širina kontrole na strani. Background Color - Zadaje se boja pozadine kontrole. Foreground Color - Zadaje se prednja boja kontrole. Data (podaci): Data Member - Vraća se tabela koja je zadata u izvoru podataka. Data Source - Vraća se izvor podataka koji se koristi za popunu padajuće liste. Izvor podataka mora biti objekat koji koristi interfejs IEnumerable, kao što su DataView, ArrayList, Hashtable ili DataSet, koji se definiše na strani preko panoa Server Behaviors. Data Text Field - Zadaje se polje iz izvora podataka koje se koristi kao natpis za svaku stavku. Ovo je tekst koji se prikazuje na meniju. Data Text Format String - Zadaje se string koji se koristi za formatiranje podataka koji se prikazuju na kontroli. Data Value Field - Zadaje se polje iz izvora podataka koje se koristi kao vrednost za svaku stavku iz liste. Style Information (informacije o stilu): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. Font Name - Zadaje se ime fonta kojim se prikazuje tekst. Font Names - Zadaje se lista fontova koje pretraživač pregleda sve dok ne pronađe font koji može da prikaže. Font Size - Zadaje se veličina natpisa. Bold - Zadaje se da font bude bold (ispisan masnim slovima). Italic - Zadaje se da font bude italic. Overline - Preko teksta se crta linija. Strikeout - Preko slova se crta linija. Underline - Tekst se podvlači. Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnSelectedIndexChange - Događaj kada se lista menja i kada se podaci šalju nazad na server. Ovo se obično koristi zajedno sa uključenom opcijom Auto Postback, tako da se forma šalje nazad na server kada se iz liste nešto izabere. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Dogadaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnload - Dogadaj kada se kontrola izbaci iz memorije. Evo jednog primera: <asp:ListBox BackColor="#CCCCCC" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectListID" 242 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Rows="2" runat="server" SelectionMode="multiple"> </asp:ListBox> Ovaj kod zadaje izvor podataka po imenu GetProducts koji je napravljen preko ponašanja servera DataSet. Nakon toga se vezuje polje productname sa atributom DataTextField, a productsid sa atributom DataValueField. Broj vidljivih vrsti je podešen na 2, tako da se, u slučaju da u listi postoji više od tri stavke, prikazuju i klizači. Način izbora je podešen na multiple, tako da ljudi mogu da u istom trenutku selektuju više stavki. BackColor podešava boju pozadine liste na svetlo sivu. Objekat asp:RadioButton Ovaj objekat na formu ubacuje element asp:RadioButton. Ovo dugme predstavlja mogućnosti izbora koje su međusobno povezane. Može biti izabrana samo jedna opcija iz grupe. Ovaj objekat ima mnogo više kontrole nego standardno radio dugme iz HTML-a. Objekat asp:RadioButton ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text - Natpis kontrole. • Text Alignment - Definiše da li se tekst prikazuje sa leve ili desne strane polja za potvrdu. • Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. • Checked - Ukazuje da li je radio dugme potvrđeno. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Border Width - Zadaje se debljina okvira kontrole. • Background Color - Zadaje se boja pozadine kontrole. • Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. • Foreground Color - Zadaje se prednja boja kontrole. • Style Information (informađje o stilu): • CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. • Border Style - Stil okvira koji je podešen preko atributa Border Width i Border Color u delu Layout. Moguće vrednosti su notset, none, dotted, dashed, solid, double, groove, ridge, inset i outset. • Font Name - Zadaje se ime fonta kojim se prikazuje tekst. • Font Names - Zadaje se lista fontova kroz koje pretraživač prolazi prilikom traženja fonta koji može da se prikaže. • Font Size - Zadaje se veličina natpisa. • Bold - Zadaje se da font bude bold (ispisan masnim slovima). • Italic - Zadaje se da font bude italic. • Overline - Preko teksta se crta linija. • Strikeout - Preko slova se crta linija. • Underline - tekst se podvlači. • Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. • Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. • Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. • Accesibility (dostupnost): • Tool Tip - Zadaje se savet (Tool Tip ) za dostupnost. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. • Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. • Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, 243 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnCheckedChanged - Događaj kada se kontrola promeni. Ako želite da se tom prilikom izvši neka funkcija, onda morate da na kartici General u okviru za dijalog atribut AutoPostBack podesite na true. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. Objekat asp:RadioBUtton ubacuje sledeći kod (sa zadatom većinom atributa): <asp:RadioButton AccessKey="c" AutoPostBack="false" BackColor="#CCCCCC" BorderColor="#333333" BorderStyle="groove" BorderWidth="5" Checked="true" CssClass="textstyleforcontrol" Enabled="true" EnableViewState="true" Font-Bold="true" Font-Italic="false" Font-Name="Arial" Font-Names="Times" Font-Overline="false" Font-Size="12" Font-Strikeout="false" Font-Underline="true" ForeColor="#FFFFFF" Height="30" ID="radio12" runat="server" Tablndex="5" Text="Blue" TextAlign="left" ToolTip="color choice. blue " Visible="true" Width="30" /> Objekat asp:RadioButtonList Ovaj objekat ubacuje niz radio dugmadi od kojih korisnik može da izabere jednu stavku. U listi može da bude proizvoljan broj stavki, koje se vade iz izvora podataka. Ovaj element ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text Alignment - Definiše da li se tekst prikazuje sa leve ili desne strane polja za potvrdu. • Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Border Width - Zadaje se debljina okvira kontrole. • Cell Padding - Zadaje se HTML Cell Padding atribut. On se ubacuje u oznaku FORM koja se pravi na serveru. • Cell Spacing - Zadaje se HTML Cell Spacing atribut. On se ubacuje u oznaku FORM koja se pravi 244 / 299 Fakultet organizacionih nauka • • • • • • • • • • • • • • • • • • • • • • • • • • • • Dreamweaver MX 2004 na serveru. Background Color - Zadaje se boja pozadine kontrole. Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. Foreground Color - Zadaje se boja prednje strane kontrole. Data (podaci) Data Member - Vraća se tabela koja je zadata u izvoru podataka. Data Source - Vraća se izvor podataka koji se koristi za popunu padajuće liste. Izvor podataka mora biti objekat koji koristi interfejs IEnumerable, kao što su DataView, ArrayList, Hashtable ili DataSet, koji se definiše na strani preko panoa Server Behaviors. Data Text Field - Zadaje se polje iz izvora podataka koje se koristi kao natpis za svaku stavku. Ovo je tekst koji se prikazuje na meniju. Data Text Format String - Zadaje se string koji se koristi za formatiranje podataka koji se prikazuju na kontroli. Data Value Field - Zadaje se polje iz izvora podataka koje se koristi kao vrednost za svaku stavku iz liste. Repeat Columns - Zadaje se broj kolona koje se prikazuju na kontroli. Repeat Direction - Zadaje se da kontrola prikazuje radio dugmad poređanu po vertikali ili horizontali. Repeat Layout - Zadaje se da izlaz bude tabela ili običan HTML tok. Style Information (informacije o stilu): CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. Font Name - Zadaje se ime fonta kojim se prikazuje tekst. Font Names - Zadaje se lista fontova kroz koje pretraživač prolazi sve dok ne nađe font koji može da prikaže. Font Size - Zadaje se veličina natpisa. Bold - Zadaje se da font bude bold (ispisan masnim slovima). Italic - Zadaje se da font bude italic. Overline - Preko teksta se crta linija. Strkeout - Preko slova se crta linija. Underline - Tekst se podvlači. Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptiom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnSelectedIndexChange - Događaj koji se dešava kada se lista promeni i pošalje nazad na server. Ovo se obično koristi sa uključenom opcijom AutoPostBack, koja šalje formu nazad na server kada se iz liste izabere neka stavka. • OnDataBinding - Dogadaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Oninit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. Evo jednog primera: <asp:RadioButtonl_ist BorderColor="#000000" 245 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 BorderWidth="1" CellPadding="2" DataSource="<%# GetProducts.DefaultView %>" DataTextField="productname" DataValueField="productsid" ID="SelectRadioList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" RepeatLayout="table" TextAlign="left"> </asp:RadioButtonList> Ovaj kod podešava izvor podataka na GetProducts koji je napravljen preko ponašanja servera DataSet. Nakon toga se vezuje polje productname iz baze podataka sa atributom DataTextField, a productsid sa atributom DataValueField. Atribut RepeatDirection je podešen na horizontal, a RepeatLayout je podešen tako da se radio dugmad stavljaju u tabelu. Tabela ima podešen BorderWidth na 1, a CellPadding na 2. Ima dve kolone. Okvir je podešen preko CSS stila (u oznaci <TABLE>, a ne preko HTML atributa BORDER. Objekat asp:TextBox Ovaj objekat na formu ubacuje element asp:TextBox. Polja za unos teksta mogu biti sa jednim redom, sa više redova ili tipa password (lozinka). Objekat asp:TextBox ima sledeće atribute: • General (opšti): • ID - Zadaje se ID objekta, tako da mu se u skriptovima može pristupati preko imena. Ovo mora biti alfanumerička vrednost. Ako koristite samo broj, server će prijaviti grešku. • Text - Zadaje se natpis kontrole. • Text Mode - Omogućava se da se zada da li se prikazuje jedna ili više linija teksta, ili je tip password. • Rows - Ako je Text Mode podešen na multiline zadaje se broj vrsta koji se prikazuje. • Columns - Podešava se širina kontrole u karakterima. Ovo je različito u odnosu na atribut Width kojim se zadaje čirina u pretraživaču. • Auto Postback - Zadaje se da li kontrola šalje formu nazad na server. • Read-only - Zadaje se da li sadržaj polja može da se menja. • Wrap - Zadaje se da element treba da prelama uneti tekst. Ovo ima uticaja samo ako je text Mode podešen na multiline. • Layout (raspored): • Height - Zadaje se visina kontrole na strani. • Width - Zadaje se širina kontrole na strani. • Border Width - Zadaje se debljina okvira kontrole. • Background Color - Zadaje se boja pozadine kontrole. • Border Color - Zadaje se boja okvira, pri čemu taj okvir ima zakošeni oblik. Okvirna linija je uvek zakošena. • Foreground Color - Zadaje se boja prednje strane kontrole. • Style Information (informacije o stilu) • CSS Class - Omogućava da izgledu kontrole dodelite CSS klasu. Kao i HTML i CSS nasleđivanje, osobine koje se definišu direktno na kontroli imaju prioritet u odnosu na definiciju klase. • Border Style - Stil okvira koji je zadat preko atributa Border Width i Border Color u delu Layout. Mogućnosti su notset, dotted, dashed, solid, groove, ridge, inset i outset. • Font Name - Zadaje se ime fonta kojim se prikazuje tekst. • Font Names - Zadaje se lista fontova kroz koje pretraživač prolazi sve dok ne nađe font koji može da prikaže. • Font Size - Zadaje se veličina natpisa. • Bold - Zadaje se da font bude bold (ispisan masnim slovima). • Italic - Zadaje se da font bude italic. • Overline - Preko teksta se crta linija. • Strikeout - Preko slova se crta linija. • Underline - Tekst se podvlači. • Enabled - Uključuje se kontrola. Kontrole koje su isključene se vide, ali se ne mogu selektovati. Ovo možete da menjate preko ASP.NET skripta. Na taj način se kontrola isključuje i uključuje preko polja 246 / 299 Fakultet organizacionih nauka • • • • • • Dreamweaver MX 2004 na formi. Enable Viewstate - Stanje prikaza se automatski održava u ASP.NET-u. Ovaj atribut omogućava da eksplicitno isključite automatsko održavanje prikaza. Visible - Zadaje se da kontrola bude vidljiva ili nevidljiva. Ovaj atribut obično koristite u kombinaciji sa skriptom da biste dinamički prikazivali ili sakrivali kontrole. Accesibility (dostupnost): Tool Tip - Zadaje se savet radi dostupnosti. Ovaj savet treba da bude kratak, opisan i jedinstven za svaku kontrolu. Tab Index - Zadaje se redosled kontrola, tako da možete da kontrolišete redosled po kojem se kontrolama pristupa preko tastera tab. Access Key - Zadaje se jedan taster preko kojeg se može pristupiti kontroli. Na primer, ako zadate k, to znači da se kontroli može pristupiti ako se pritisne Alt+K. Events (događaji): • OnCheckedChanged - Događaj koji se dešava kada se kontrola promeni. Ovim se čuva funkcija koja se treba da se izvrši kada se forma šalje na server. Ako želite da se ova funkcija izvrši kada se desi događaj, onda na kartici General treba da opciju AutoPostBack podesite na true. • OnDataBinding - Događaj kada se kontrola poveže sa izvorom podataka. • OnDisposed - Događaj kada se kontrola izbaci iz memorije. • Onlnit - Događaj kada se kontrola inicijalizuje. • OnLoad - Događaj kada se kontrola učitava. • OnPreRender - Događaj koji omogućava da pre prikazivanja izlaza uradite neki skript koji nešto računa. • OnUnLoad - Događaj kada se kontrola izbacuje iz memorije. Objekat asp:TextBox na stranu ubacuje sledeći kod (sa podešenom većinom atributa): <asp:TextBox Columns="50" ID="textarea2" MaxLength="100" Rows="5" runat="server" Text="Enter your comments here." TextMode="MultiLine" /> Objekat More Tags Ovaj objekat otvara okvir za dijalog Tag Chooser, koji je prikazan na slici. Odavde možete da pristupite različitim ASP.NET objektima, koje ćete ubacivati na svoje strane. 247 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 248 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 19. PISANJE KODA U DREAMWEAVERU Dreamweaver kao editor teksta Snaga Dreamweavera je oduvek bila u bliskoj integraciji vizuelnog načina rada i unosa teksta. Tekstualni editor koji je ugrađen u programu i kome možete pristupiti preko prikaza Code, ili preko dela Code u prikazu Code and Design, ili preko posebnog panoa Code Inspector, nudi mnoge karakteristike koje se generalno nalaze samo u posebnim programima za obradu teksta.Tu su brojevi linija, kontrola preloma reči, označavanje različitih delova koda različitim bojama, pretraživanja teksta preko regulranih izraza, kao i neke karakteristike koje su preuzete iz HomeSite-a, kao što su saveti vezani za kod ili komplteiranje oznaka. Pored toga, pošto je editor teksta iz Dreamweavera takođe odgovoran i za pisanje koda kada radite u prikazu Design, tu je i ugrađeno formatiranje izvornog koda, kao i funkcije za ispravljanje grešaka. Pristup editoru teksta Editoru teksta u Dreamweaveru možete da pristupite preko glavnog prozora Document, ako izaberete prikaz Code ili Code and Design. Alternativno, editor teksta možete da otvorite i u posebnom panou, ako pristupite Code Inspectoru (izaberete Window > Code Inspector). Sve mogućnosti vezane za obradu teksta isto rade u oba prikaza Code i u Code Inspectoru. Ako nemate dovoljno prostora na ekranu, onda ćete verovatno koristiti prikaz Code (ili Code and Design), koji otvarate u prozoru Document. Ako imate dvojni monitor, onda na jednom možete da prikažete prozor Document, sa prikazom Design, a na drugom Code Isnpector, zajedno sa drugim panoima. Na slici su prikazani prikazi Code i Code Inspector, tako da ih možete uporediti. 249 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Opcije prikaza Code i podešavanje njegovih karakteristika Opcijama za podešavanje radnog prostora editora možete pristupiti preko menija Code View Options, kojem se pristupa preko menija View, preko palete Document ili preko palete Code Inspector. Vodite računa da samo ono što podesite na panou Code Inspector ima uticaj na rad u tom panou. Ako nešto podešavate preko palete Document ili iz menija View, onda utičete samo na prikaz Code u prozoru Document. Podešavanja ostalih karakteristika se mogu vršiti u različitim kategorijama okvira za dijalog Preferences (Edit > Preferences). Ono što ovde promenite utiče i na prikaz Code i na prikaz Code Inspector. 250 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Podešavanje veličine teksta i fonta Podrazumevano se sav tekst u editoru prikazuje fontom Courier New (Windows) veličine 10 pointa i Monaco (Mac) takođe veličine 10 pointa. Pošto se ovaj tekst koristi samo za prikazivanje koda u Dreamweaveru, veličinu fonta i sam font možete da promenite na bilo koje druge vrednosti, jer to ne utiče na izgled datoteke. Možda biste voleli da svoj kod stavite u "veliki format" koji se lako čita na ekranu. Možda biste želeli neki drugi font, a ne Courier i Monaco. Jedan savet, međutim, treba da imate na umu. Određeni poslovi vezani za uređivanje teksta, kao što je brojanje karaktera, se mnogo lakše obavljaju ako se koriste monospace fontovi (kao što su Courier i Monaco) nego fontovi koji se proporcionalno šire. Ako želite da promenite veličinu teksta ili font, otvorite okvir za dijalog Preferences (izaberite Edit > Preferences) i izaberite kategoriju Fonts, kao što je prikazano na slici. 251 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Boja koda u skladu sa sintaksom Jedna od vizuelnih pomoći koje su najkorisnije kod obrade teksta je bojenje koda u skladu sa sintaksom. Ako određene elemente koda obojite određenom bojom, možete brzo da kažete kakva je struktura dokumenta. Dreamweaver ide i korak dalje, jer omogućava da podesite i ostale atribute stila, kao što su bold, italic, underline, i da tako dodatno razlikujete elemente sintakse. Za različite tipove dokumenta možete da podesite različite opcije formata (HTML, PHP, JS itd.). Ako želite da uključite ili isključite boje koda u skladu sa sintaksom, izaberite Code View Options > Syntax Coloring. Ako želite da podešavate boje i stilove pojedinih elemenata, otvorite okvir za dijalog Preferences i izaberite kategoriju Code Coloring. Izaberite tip dokumenta čiji stil želite da promenite i kliknite dugme Edit Coloring Scheme. U novom okviru za dijalog, iz liste sa gornje leve strane izaberite element. U gornjem desnom uglu možete da izaberete boju i opcije stila. U delu preview možete da pogledate kako to izgleda. Sve ovo je prikazano na slici. 252 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Brojevi redova Brojevi redova su korisni kada želite da tačno pronađete neko određeno mesto u kodu. Ovo je najviše korisno kada radite sa skriptovima, kada se koristi kod debagovanja. Izveštaji koje daje Dreamweaver, kao i upozorenja na pogrešan kod takođe koriste brojeve redova kao identifikaciju. Ako želite da uključite ili isključite prikazivanje brojeva, izaberite Code View Options > Line Numbers. Word Wrap (prelom reči) Prelom znači prebacivanje teksta u novi red. Kod obrade teksta, mekani prelom znači da editor teksta u letu prebacuje tekst tako da ispuni ceo prozor. Editor teksta u Dreeamweaveru omogućava da kod posmatrate sa i bez ovakvog mekanog preloma. Prikaz koda bez uključene ove opcije obuhvata i puno kretanja po ekranu da bi se videle dugačke linije teksta. Ako u jednom trenutku ne možete da vidite celu liniju, onda je mnogo teže razumeti šta se dešava u kodu. Sa druge strane, ako se kod prikazuje bez preloma, onda možete tačnije da zaključite kakva je cela struktura dokumenta. Na slici je pokazano koja je razlika između ova dva metoda. 253 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da uključite ili isključite mekani prelom, izaberite Code View Options > Word Wrap. Ako radite sa prikazanim brojevima redova, mekani prelom ne utiče na to, pošto je taj prelom samo privremena vizuelna pomoć. Ako upamtite datoteku sa uključenim mekanim prelomom, a onda je otvorite u drugom edtioru, taj prelom se ne pamti kao deo datoteke. Automatsko uvlačenje Uvlačenje redova, čime se ukazuje na ugnježđene elemente je drugi način da se kod učini čitljivijim. Redovi se uvlače putem dodavanja tabulatora ili belina. Kada ručno u editoru teksta u Dreamweaveru unosite kod, uvlačite linije onako kako ih vidite. Tokom kucanja, opcija Auto-Indent iz Dreamweavera automatski svaki novi red uvlači na isto rastojanje kao prethodni. Ovo je korisno kada unosite ugnježđene oznake, kod koje se uvlačenje naredne zasniva na prethodnoj. Ako želite da se svaki novi red automatski uvlači, na bazi tekućeg uvlačenja, ozaberite Code View Options > Auto-Indent. 254 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Opcije vezane za formatiranje koda Iako je editor teksta koji je ugrađen u Dreamweaver na mnogo načina kompatibilan sa drugim programima za obradu teksta, jedna osobina je jedinstvena. Kada radite u prikazu Design, Dreamweaver piše i formatira izvorni kod umesto Vas. Kada radite u prikazu Code, možete sami da formatirate kod. Kada se prebacujete iz jednog u drugi prikaz, možete da napišete kod koji će Dreamweaver kasnije da promeni i preformatira. Ovo se naziva primenom formatiranja izvornog koda. Dreamweaver (skoro) nikad ne menja Vaš kod, ali će, ako mu dozvolite, da promeni njegov format. Kad god se neka stavka doda u prikazu Design, Dreamweaver automatski primenjuje formatiranje koda. Ako želite, možete da naznačite da se formatiranje izvornog koda primeni na ceo dokument ili na samo određene elemente. Ovo se radi preko komande Commands > Apply Source Formatting ili Commands > Apply Source Formatting to Selection. Kao i mama, i ovo formatiranje teksta može biti nametljivo ili korisno, u zavisnosti od toga kako se posmatra. Različite aspekte formatiranja koda možete da uključujete ili isključujete, a možete i da podešavate načine formatiranja. Većina ovog se radi preko okvira za dijalog Preferences, u okviru kategorije Code Format, koja je prikazana na slici. Neka prilagođavanja zahtevaju petljanje sa bibliotekama tagova. Automatski prelom teksta (čvrsti prelom) Čvrsti prelomi su novi redovi koji se ubacuju u tekst preko carriage returna (CR), line feeda (LF) ili na oba načina. Kada prilikom kodiranja pritisnete taster Enter, unosite čvrsti prelom. Isto kao što se mekani prelom može koristiti za prikazivanje koda u čitljivijem obliku, tako neki autori vole da ubacuju čvrsti prelom da bi poboljšali čitljivost. Kada Dreamweaver piše kod za Vas (odnosno kada radite u prikazu Design), on podrazumevano dodaje čvrste prelome da bi se izbegle predugačke linije koda. Kada sami kucate, onda Vi kontrolišete ove prelome, tako što pritiskate taster Enter. čak i kada sami unosite kod, čim pređete u prikaz Design ili izaberete komande Apply Source Formatting, Dreamweaver preuzima stvar u svoje ruke i dodaje svoje čvrste prelome gde god pronađe predugačke linije. Napomena Čvrsti ili mekani prelom? Ako se oslonite na mekani prelom i tako pokušate da kod učinite čitljivijem, onda je prelaz između prikaza koji nije i koji jeste prelomljen jednostavan i sastoji se od uključivanja i isključivanja opcije Word Wrap. Ako se oslonite na čvrsti prelom, onda sami unosite prekide i oni tu ostaju sve dok ih ručno ne obrišete. Pored toga, iako čvrsti prelomi ne utiču na način pnkazivanja dokumenta na Webu, CR i 255 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 LF su karakteri koji zauzimaju prostor. Dugački dokumenti će se možda malo sporije prebacivati ako sadrže mnogo ručno unetih preloma. Ako želite da kontrolišete automatski čvrsti prelom, izaberite Preferences > Code Format. Otvoriće se okvir za dijalog sa slike. Ako je opcija Automatic Wrapping isključena, onda se čvrsti prelomi ne dodaju u oznake ili tekst, bez obzira na to koliko je linija dugačka. Ako je ova opcija uključena, onda možete da zadate koliko karaktera će Dreamweaver da dozvoli u redu pre nego što doda čvrsti prelom. Ako radite sa prikazanim brojevima redova, onda ovo utiče na brojeve redova, pošto se u kod dodaju novi redovi. Ako upamtite datoteku koju ste napravili sa uključenom opcijom automatskog čvrstog preloma i otvorite je u drugom editoru, čvrsti prelomi će i dalje biti tu. Oni su deo datoteke. Da biste definisali kako se čvrsti prelomi kodiraju, izaberite Preferences > Code Format i podesite neku od opcija Line Break iz padajućeg menija. Ovo je bitno jer različiti operativni sistemi očekuju da se čvrsti prelomi kodiraju na različite načine. Naravno da želite da web server na kojem će se nalaziti Vaše strane prepozna čvrste prelome i uzme ih u obzir. Ako prebacujete strane preko FTP-a u režimu ASCII Transfer, o tome umesto Vas brine Dreamweaver. Svaki karakter se kodira prema operativnom sistemu koji postoji na serveru. Ako prebacujete svoje dokumente preko FTP-a sa podešenim režimom Binary, onda morate da zadate taj karakter sami. Uvlačenje Da li Vam se dopada uvučeni kod? Koliko treba da bude to uvlačenje? Da li želite da se kod uvlačenja koriste tabulatori ili razmaci? Kontrole koje se nalaze u okviru za dijalog Code Format mogu da definišu kako i kada Dreamweaver uvlači kod. • Uvlačiti ili ne Ako želite da potpuno isključite uvlačenje, tako da svi novi redovi počinju sa leve strane, onda opcija Use ne treba da bude izabrana. Ako ovu opciju uključite, onda se koriste sve druge opcije koje kontrolišu uvlačenje. • Tabs/spaces (tabulatori/razmaci) Možete da definišete da li uvlačenje treba da se napravi preko tabulatora ili preko razmaka. Generalno, razmaci su bolji, osim ako ne planirate da uvučete svoj tekst u neki program za obradu teksta, radi štampanja. • Indent size (veličina uvlačenja) Definiše koliko razmaka ili tabulatora treba da bude kod uvlačenja. • Tab size Definiše koliko svaki tabulator treba da bude velik (u karakterima). 256 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kontrola velikih i malih slova Standardni HTML pretraživači, prilikom interpretiranja HTML-a, ne prave razliku između malih i velikih slova. Sa druge strane, ako pretraživač ili neki drugi uređaj koriste XML ili HTML validaciju, onda se pravi razlika između malih i velikih slova. Pored toga, mnogi web autori više vole da kod stalno pišu na isti način (malim ili velikim slovima). Ako želite da zadate da li se kod koji Dreamweaver piše piše velikim ili malim slovima, u okviru za dijalog Code Format podesite opcije Default Tag Case i Default Attribute Set. Ako želite da Dreamweaver promeni mala slova u velika ili obrnuto, onda izaberite jednu ili obe opcije Override Case of. Prepisivanje koda Dreamweaver obećava da nikad neće menjati Vaš kod. Skoro nikada. Postoje izvesne situacije kada se to može desiti. Ovo se podešava u okviru za dijalog Code Rewriting. Popravka pogrešnog koda Dreamweaver upozorava na greške i opcionalno pokušava da ih ispravi. Neispravan kod je onaj koji nije korektno ugnježđen, kao što je na primer sledeći kod: <b><i>This is bad nesting! </b></i> <h1>I have too many tags!</h1></h1> <h6>I'm missing something... Da biste prikazali ili sakrili upozorenja usled pogrešnog koda, izaberite Code View Options > Highlight Invalid HTML. (Ova opcija se odnosi samo na prikaze Code. Dreamweaver će uvek istaći nepravilni HTML kod u prikazu Design.) Ako želite da Dreamweaver ispravi taj kod, izaberite Preferences > Code Rewriting i podesite opcije koje želite. Ako neke tipove datoteka želite da isključite iz provere grešaka, idite u okvir za dijalog Code Rewriting i u listu Never Rrewrite Code dodajte tu ekstenziju. Nove ekstenzije datoteka se od drugih odvajaju razmacima sa obe strane. Dreamweaver će proveru grešaka i eventualno njihovu ispravku da pokuša kad god se dokument otvori. Ako ste opcije podesili sa Warn When Fixing or Removing Tags, u tom trenutku Dreamweaver otvara prozor sa upozorenjem u kome pokazuje koji je nepravilan kod pronašao i kako ga je ispravio. Ako niste uključili ovu opciju, onda čak nećete ni znati da je kod promenjen. Zašto biste uključivali ova upozorenja? Iako je ispravka koda teoretski dobra stvar, Dreamweaver nije uvek savršen u određivanju toga šta je ispravan kod, a šta ne. Na primer, evo dela koda u kome nedostaje oznaka. <html> <head> <title>My Page</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1>My Home Page <p>Welcome to my wonderful website.</p> </body> </html> Gde treba da se ubaci oznaka za zatvaranje? Verovatno odmah ispred oznake <p>. Evo gde će je ubaciti Dreamweaver: <html> <head> <title>My Page</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1>My Home Page <p>Welcome to my wonderful website.</p> </h1></body> </html> Ovo je definitivno slučaj kada autor mora da popravi ono što je Dreamweaver uradio. Na slici je prikazana poruka sa upozorenjem koje se prikazuje kada Dreamweaver otvori dokument sa ovim kodom. 257 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prozor sa upozorenjem ne omogućava da poništite prepisivanje koda. Ako Vam se ne dopadaju promene koje su uradene, morate ih pronaći (preko brojeva redova ili referenci iz ovog prozora) i promeniti. Možete i samo da zatvorite dokument bez zapisivanja promena, tako da se sve promene zanemare. Odatle ćete ili otvoriti dokument u drugom editoru teksta ili ćete privremeno isključiti opcije za popravku, preko opcije Preferences > Code Rewriting. URL kodiranje Dreamweaver podrazumevano primenjuje URL kodiranje na razmake i druge karaktere koji nisu standardni, a nalaze se u URL-u. Link na stranu kao što je my page.html će se napisati kao my%20page.html. Dreamweaver ovo kodiranje automatski primenjuje na bilo koji URL. Ako unesete URL tokom rada u prikazu Design (na primer, ako unesete URL u polje Link u Property Inspectoru) kodiranje se odmah vidi u prikazu Code. Ako unesete URL dok radite u prikazu Code, Dreamweaver neće primeniti kodiranje, osim ako ne pređete u prikaz Design i promenite taj URL (na primer, preko Property Inspectora). Ako želite da kontrolišete kako Dreamweaver kodira URL adrese, izaberite Preferences > Code Rewriting i izaberite neku od opcija koje se odnose na URL kodiranje: • Do not encode special characters (nemoj kodirati specijalne karaktere). • Encode special characters in URLs using &# Ovim se specijalni karakter menja HTML entitetom, ako postoji takav entitet. Na primer umesto apostrofa će se upisati ". • Encode special characters in URLs using % Ovim se specijalni karakter menja ASCII kodom, na primer apostrofa se menja sa %20 ili %27. Pisanje i uređivanje koda Pored toga što može da pomogne da kod bude čitljiviji, editor teksta u Dreamweaveru nudi i različite alate koji mogu da olakšaju pisanje koda. Komande za uređivanje i prečice Ako volite da radite sa kodom, onda verovatno volite da kucate. Postoji nekoliko komandi koje se nalaze u meniju Edit, a koje imaju svoje prečice sa tastature, tako da ne morate da ih birate mišem, već ih možete uneti direktno sa tastature. Saveti vezani za kod Saveti vezani za kod se javljaju kad god otvorite neku oznaku. Tada se nude moguće oznake, atributi, pa čak i vrednosti atributa. Ovi saveti nisu samo referenca. Možete da se krećete kroz njih i da ih birate iz menija, a da ruke ne pomerate sa tastature. Time se postiže maksimalna efikasnost. Osnovne tehnike za kretanje kroz menije sa savetima su: • Podrazumevano je izabrana prva stavka iz menija sa savetom. Preko strelica sa tastature se možete kretati naviše i naniže. • Meniji koji sadrže liste tekstualnih stavki su uređeni po abecedi. Ako želite da skočite na određeno mesto u listi, ukucajte prvo slovo stavke koju želite da izaberete. Ako otkucate više slova približićete 258 / 299 Fakultet organizacionih nauka • • Dreamweaver MX 2004 se onom što želite da izaberete. U zavisnosti od vrednosti koje se očekuju za neki atribut, prikazuju se različiti saveti. Ako je očekivana vrednost boja, onda se prikazuje pokazivač za izbor boja (preko strelica se možete kretati kroz uzorke). Ako je očekivana vrednost relativna putanja do datoteke, onda meni sadrži samo opciju za pretraživanje (pritisnite Enter da biste otvorili okvir za dijalog). Ako je očekivana vrednost tekst ili broj, ne prikazuje se nikakav savet. Ako želite da izaberete neku stavku i da Dreamweaver unese potreban kod, samo pritisnite Enter. Stavka će se ubaciti, a kursor će se postaviti na mesto umetanja, tako da možete da nastavite sa kucanjem. Ako želite da konfigurišete savete, izaberite Preferences > Code Hints. Odatle možete da uključite ili isključite savete vezane za kod. Možete da konfigurišete i sledeće: • Klizač Delay definiše koliko vremena treba da protekne nakon kucanja, da bi se pojavio meni sa kodom. Ako je Delay podešeno na 0, svaki meni sa savetima se prikazuje odmah. Ako podesite duže odlaganje, meniji se neće pojaviti osim ako ne zastanete sa kucanjem za određeni broj sekundi. Ako ne želite da se meniji pojavljuju stalno, već ćete ih koristiti kasnije kada se olenjite, podesite odlaganje na nekoliko sekundi, pa ćete videti kako to radi. • Lista sa menijima definiše koji se meniji sa savetima prikazuju. Da li želite da Dreamweaver završi kucanje imena oznaka umesto Vas, ili samo da predloži atribute? Da li želite predloge za vrednosti atributa tamo gde je to moguće? Ako želite da menjate sadržaj ovih menija, možete da kliknete link na Tag Library Editor. Automatsko završavanje oznaka Ovaj savet se javlja svaki put kada otkucate oznaku otvaranja. Dreamweaver automatski unosi oznaku zatvaranja, a kursor ostaje između njih. Ako otkucate <p> dobićete i </p>, a kursor će se postaviti tamo gde treba da se unosi tekst. Ako ste ikad zaboravili da zatvorite neku oznaku, a onda se pitali zašto se strana ne vidi na pravi način, ovo je karakteristika koja će Vam odgovarati. Ako želite da isključite automatsko završavanje oznaka, izaberite Preferences > Code Hints, kao što je prikazano na slici. 259 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Delovi koda (Snippets) Ovi delovi koda omogućavaju da upamtite delove koda koji se često koriste i da ih preko nekoliko klikova mišem ubacujete u kod. Delovi koda se mogu koristiti za skladištenje bilo čega, počev od komentara, pa do celih tabela i rasporeda strana. Rad sa panoom Snippets Parčići koda (snippeti) se prave, organizuju i ubacuju preko panoa Snippets. Ovaj pano je deo grupe panoa Code. Ovom panou možete da pristupite preko opcije Window > Snippets ili ako proširite interfejs vezanog panoa, tako da vidite panoe Code i prebacite u prvi plan karticu Snippets. Dreamweaver dolazi sa velikim izbora parčića koda, koje možete da koristite. Ubacivanje parčića koda Parče koda u dokument možete da ubacite prevlačenjem i otpuštanjem, ili ako izaberete parče, a onda kliknete dugme Insert na dnu panoa. Pre nego što budete koristili parče koda, verovatno želite da pogledate kakav se kod tu nalazi. Ubacivanje preko prikaza Code ili preko prikaza Design Pošto parčići koda mogu da sadrže bilo kakav kod, uključujući i nekompletne oznake ili oznake koje se moraju nalaziti u okviru drugih oznaka, ne mogu se svi parčići ubacivati svuda. Neki parčići se ubacuju u prikazu Design, dok drugi zahtevaju da pre ubacivanja predete u prikaz Code. Neki se mogu ubaciti u okviru tabela ili drugih oznaka, dok drugi ne mogu. Parče Meta > No-Cache, na primer, može da se ubaci samo dok je aktivan prikaz Code. Ako je aktivan prikaz Code, parče se ubacuje na mesto gde se trenutno nalazi kursor, bez obzira da li je to u delu head ili body, ili čak u sredini druge oznake. Očigledno da, pre ubacivanja, morate znati gde oznaka meta može, a gde ne može da ide. Ubacivanje parčića koji su jedinstveni blokovi i onih koji to nisu Većina parčića ubacuju jedan blok koda. To može biti tabela, skup elemenata forme, oznaka <meta>. Neki parčići ubacuju dva bloka koda, koji obuhvataju ono što ste selektovali prilikom njihovog ubacivanja. Možete, na primer, da koristite različite komandne delove koda, koji će komentirati selektovani deo strane, tako što ćete sve to staviti između oznaka za komentar <!-- -->. Ako prilikom ubacivanja komandnog parčeta koda ništa nije selektovano, Dreamweaver ubacuje prazan par oznaka za komentar. Promena parčića koda Ovi delovi koda se lako menjaju. U panou Snippet možete da izaberete to parče i da kliknete dugme Edit, ili 260 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 da dva puta brzo kliknete samo parče. Otvoriće se okvir za dijalog Snippet, koji je prikazan na slici. Možete da menjate ime parčeta, njegov opis, tip (block ili wrapped), kao i da menjate kod koji se u njemu nalazi. Možete i da definišete da li parče koda treba da se prethodno prikazuje u panou Snippets. Čuvanje parčića koda Parčići koda su organizovani u fascikle, od kojih su neke ugnježđene u drugima. Ovu hijerarhiju možete da menjate kako god želite. Ovo se radi prevlačenjem parčeta u drugu fasciklu. Možete i da menjate imena parčića. Ime fascikle ćete promeniti ako dva puta brzo kliknete tu fasciklu. Možete čak i da obrišete parče koda, ili fasciklu, ako ih selektujete i kliknete ikonu sa otpacima koja se nalazi na dnu panoa. Kreiranje Vaših parčića koda Najbolje kod parčića koda je to da možete da lako pravite svoje parčiće, pa čak i da pravite svoje fascikle u kojima biste ih čuvali. Ako želite da napravite novu fasciklu za smeštanje parčića koda, treba da uradite sledeće: 1. Ako želite da se fascikla nađe u korenskom nivou u panou Snippets, počećete time što nijedna od fascikli u panou Snippets ne sme da bude selektovana. Ako želite da fascikla bude u okviru neke druge fascikle, izabrite je. 2. Kliknite ikonu fascikle koja se nalazi na dnu panoa. Pojaviće se nova fascikla. 3. Dajte ime novoj fascikli. Ona je spremna za akciju. Ako želite da napravite novo parče koda, treba da uradite sledeće: 1. (Opcionalno) Ako već imate kod koji treba da se nađe u parčetu, otvorite dokument koji sadrži taj kod i selektujte ga u prikazu Code. 2. U panou Snippets izaberite fasciklu u kojoj želite da se nade parče. Nakon toga kliknite ikonu New Snippet koja se nalazi na dnu panoa. Možete i da desnim tasterom miša kliknete fasciklu i izaberete New Snippet. Ovim se pravi novo parče koda, koje nema ime. Automatski se otvara okvir za dijalog Snippet. Ako ste izabrali neki kod, on se prikazuje u polju Contnet. Ako to niste uradili, sada je trenutak da ukucate kod. (Nećete praviti prazno parče.) 3. Ako pravite parče tipa wrapped (parče koje ubacuje kod ispred i iza onog što je selektovano) pazite da se pravi delovi koda nađu u poljima Before (pre) i After (posle). 4. Popunite i sve druge opcije u ovom okviru za dijalog, a onda kliknite OK. Parče bi sada trebalo da se pojavi u panou Snippets i da se ponaša kao i bilo koje drugo parče. Možete da ga ubacujete, menjate, brišete, prebacujete, šta god želite. 261 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Povezivanje sa spoljašnjim editorima teksta Dakle, volite da radite sa kodom i dopada Vam se Dreamweaver, ali Vam se više dopada Vaš omiljeni editor teksta od prikaza Code. U tom slučaju možete da podesite vezu između Dreamweavera i spoljašnjeg editora teksta, tako da dobijete najbolje iz oba sveta. Podešavanje spoljašnjeg editora teksta (nije integrisan) Procedura povezivanja i rada sa spoljašnjim editorima teksta (koji nisu HomeSite i BBEdit) je jednostavna i u osnovi ista na različitim platformama. Podešavanje integracije sa spoljašnjim editorom teksta se obavlja na sledeći način: 1. U okviru za dijalog Preferences otvorite kategoriju File Types /Editors, kao što je prikazano na slici. 2. Pronađite polje External Code Editor. Pronađite editor teksta koji želite da koristite. 3. Opcija Reload Modified Files definiše šta se dešava kada menjate dokument u spoljašnjem editoru i posle toga se vratite u Dreamweaver. Ako želite da postignete bližu integraciju, izaberite opciju Always Reload. Promene se automatski ubacuju. Ako Vam je potrebno više kontrole nad mogućim neslaganjima, izaberite Prompt. Dreamweaver će Vas upozoriti da su se desile promene. Opcija Save on Launch definiše da li Dreamweaver treba da upamti dokument pre pokretanja spoljašnjeg editora teksta. Ako Vam je potrebna bliža integracija izaberite Always. Ako želite da imate šansu da pregledate promene koje su nastale u dokumentu izaberite Prompt. Editor koji ste izabrali će se pojaviti u meniju Edit, kao deo komande Edit with application. Tekući dokument ćete otvoriti u novom editoru ako izaberete ovu opciju. Integracija editora HomeSite+ sa Dreamweaverom Editor HomeSite+ firme Macromedia, koji se isporučuje sa verzijom Dreamweavera za Windows se lako integriše sa Dreamweaverom. Podešavanje HomeSite editora se vrši na isti način kao i povezivanje bilo 262 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 kojeg spoljašnjeg editora. Možete i da podesite integraciju Dreamweavera u HomeSite. Podrazumevano HomeSite ima uključenu integraciju. U HomeSiteu idite na Options > Settings i izaberite kategoriju Dreamweaver. Ovde se proverava i konfiguriše način na koji HomeSite tretira ostale opcije modifikovanih datoteka. Ako želite da u HomeSiteu radite sa dokumentom iz Dreamweavera, otvorite dokument u Dreamweaveru i idite na Edit > Edit With Home Site. Ako već nije pokrenut, program će se sada pokrenuti, a dokument će biti spreman za rad. Ako želite da HomeSite dokument menjate u Dreamweaveru, otvorite dokument u tom editoru. Sa palete Editing kliknite ikonu Dreamweavera. Ako ste uključili opcije da oba programa automatski ponovo učitavaju promenjene datoteke i pamte ih pre pokretanja i ako imate dovoljno veliki monitor, ili podešene dvojne monitore, onda možete da ostavite da dokument bude otvoren u oba programa i da lako prelazite iz jednog u drugi. Ovo liči na rad sa Code Inspectorom. Biblioteke tagova i editor Tag Library Biblioteke tagova (Tag Library) predstavljaju srce funkcionalnosti Dreamweavera. Biblioteka tagova (oznaka) je baza podataka sa informacijama o skupu oznaka, HTML oznaka, ASP oznaka, ColdFusion oznaka i sl. U ovoj bazi podataka se nalaze informacije koje Dreamweaver koristi za obavljanje većine svojih poslova vezanih za oznake, od popune koda savetima vezanim za kod, pa do primene formatiranja izvornog koda ili generisanja informacija koje se prikazuju u okvirima Tag Chooser i Edit tag. Tag Library Editor je Vaš prozor do biblioteke oznaka i alat za promenu i dodavanje informacija koje se tu nalaze. Da li je poslednja verzija Internet Explorera počela da podržava neku oznaku ili atribut o kojoj Dreamweaver ne zna ništa? Dodajte to u biblioteku. Rad sa okvirom za dijalog Tag Library Editor Pre nego što počnete da petljate sa bibliotekama oznaka, morate da znate koje su informacije i opcije dostupne u okviru za dijalog Tag Library Editor. Ovaj okvir za dijalog ćete otvoriti ako izaberete Edit > Tag Libraries. Do istog okvira za dijalog možete doći i iz prozora Preferences/Code Format i Code Hints. Lista oznaka U gornjem delu okvira za dijalog se nalazi lista oznaka. U pitanju je proširena struktura u obliku stabla koja prikazuje sve biblioteke oznaka, oznake koje tu postoje, kao i njihove atribute. Biblioteke oznaka su prikazane onim redosledom kojim ih Dreamweaver pretražuje. Drugim rečima, kada Dreamweaver određuje kako da rukuje određenom oznakom on će tražiti u ColdFusion biblioteci ili drugim bibliotekama, samo ako ta oznaka ne postoji u biblioteci HTML. Unutar svake biblioteke su pojedinačne oznake i atributi prikazani po abecednom redu. Opcije biblioteke oznaka Ako ste iz liste oznaka izabrali neku biblioteku oznaka, u donjem delu okvira za dijalog se prikazuje lista tipova dokumenata koji mogu sadržati oznaku iz te biblioteke. To ne znači da Dreamweaver dozvoljava da samo određeni tipovi oznaka budu u određenim tipovima dokumenata, ali to znači da su određene oznake iz određene biblioteke za Dreamweaver validne samo ako se nalaze u određenom tipu dokumenta. Na primer, u JavaScript dokumentu, HTML oznake, kao što su a ili table nemaju značenje. Dreamweaver neće davati savete vezane za kod ili drugu pomoć vezanu za uređivanje koda, ako se ove oznake nalaze u tom kontekstu. Opcije vezane za oznake Kada se iz liste izabere neka oznaka, u donjem delu okvira za dijalog se prikazuje opcije Tag Formats za tu oznaku: • Line breaks Da li da Dreamweaver u kod ubaci novi red pre i posle oznake, ili između parova oznaka i ugnježđenog sadrđaja? Opcije iz ovog padajućeg menija to određuju. • Contents Treba li svaki sadržaj koji se nalazi ugnježđen između para oznaka da bude uvučen i treba li da bude formatiran? Izaberite neku od opcija iz ovog menija. • Case Da li oznaka treba da se piše malim, velikim ili mešanim slovima? Možda treba poštovati ono što je podešeno na nivou aplikacije? (Kliknite link default ako želite da postavite podrazumevane opcije za sve oznake). Opcije vezane za atribute Kada je iz liste izabran neki atribut oznake, u donjem delu okvira za dijalog se prikazuju opcije vezane za formatiranje tog atributa: • Attribute Case Kao i kod oznaka i ovde se može podesiti da se vrednosti pišu velikim, malim slovima ili mešavinom. Atribut može i da koristi podešavanja na nivou aplikacije. (Podrazumevane 263 / 299 Fakultet organizacionih nauka • • Dreamweaver MX 2004 vrednosti se koriste ako kliknete link Default.) Attribute Type Opcija koju izaberete iz ovog menija određuje kakva će pomoć biti korisniku na raspolaganju, odnosno kakvi će se saveti vezani za kod i opcije u Tag Inspectoru pojaviti. Ako na primer, Dreamweaver očekuje tekstualnu vrednost, onda neće biti nikakvih saveta, ako se očekuje boja, onda se prikazuje dijalog za izbor boja, ako se očekuje neka iz liste vrednosti, prikazuju se moguće vrednosti. U tabeli 27.2 su dati tipovi atributa i način na koji se oni tretiraju u interfejsu Dreamweavera. Attribute Value Ako je tip atributa podešen na Enumerated, onda u ovom delu treba da se nalazi lista mogućih vrednosti, odvojenih zarezima. Ovo će postati stavke u meniju Code Hint. Promena stavki u biblioteci oznaka Kao što ste verovatno zaključili, bilo koju vrednost bilo koje biblioteke, oznake ili atributa možete da promenite. Jednostavno treba izabrati željenu stavku, a onda možete da menjate vrednosti koje se prikazuju. Evo nekoliko saveta o tome kako se menjaju opcije: • Ako jednostavno promenite podešavanja vezana za nove redove ili velika i mala slova, ne možete nešto ozbiljno da pokvarite u Dreamweaveru, ali se može desiti da saveti vezani za kod ne budu na raspolaganju, ako niste pažljivi sa podešavanjima. Radite obazrivo. • Nemojte menjati podrazumevane opcije za velika i mala slova, osim ako nemate dobar razlog. Podešavanja na nivou aplikacije nemaju značenje ako ih većina elemenata menja. Isprobajte ono što ste promenili da biste videli kako Vam se dopada. Nakon što promenite opciju formatiranja, probajte da napravite i sredite neke primere oznaka u prikazu Code. Dodavanje (brisanje) stavki Dodavanje i brisanje atributa, oznaka, pa čak i celih biblioteka je malo složenije (i može biti mnogo opasnije) nego promena postojećih stavki. Sa druge strane može se puno dobiti, jer biste u potpunosti iskoristili snagu biblioteka oznaka koje postoje u Dreamweaveru. Sva dodavanja i brisanja se rade preko dugmadi + i -, koja se nalaze na vrhu okvira za dijalog tag Library Editor. Ubacivanje biblioteke oznaka 264 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ak želite da napravite novu, praznu biblioteku oznaka, treba da uradite sledeće: 1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajućeg menija izaberite opciju Tag Library. 2. U okviru za dijalog koji se otvara dajte ime svojoj biblioteci. (Ovo ime vredi samo Vama, tako da treba da bude sažeto i opisno.) 3. Kliknite OK da biste zatvorili okvir za dijalog. Na dnu liste oznaka će se prikazati nova biblioteka. 4. Dok je iz liste oznaka izabrana nova biblioteka, selektujte tip dokumenta koji treba da podržava oznake koje se nalaze u ovoj biblioteci. Nova biblioteka je spremna za igru. Naredni korak je da u biblioteku dodate oznake, tako da ona postane i korisna. Dodavanje oznake Ako želite da u biblioteku dodate novu oznaku, treba da uradite sledeće: 1. Kliknite dugme + na vrhu liste oznaka, a onda iz padajućeg menija izaberite New Tags. 2. Otvara se okvir za dijalog New Tags, koji je prikazan na slici. Zadajte ime biblioteke u koju oznaka treba da se doda, a onda unesite ime oznake. (Ime je ono što se prikazuje između simbola < >. Nemojte uključivati i same simbole.) 3. Ako oznaka sadrži početnu i krajnju oznaku, izaberite opcijt Have Matching End Tags. Ako će to biti jedinstvena oznakć (kao što su <html> ili <hr>) onda ova opcija ne treba da bude izabrana. 4. Kada završite kliknite OK. Proverite svoju listu oznaka Oznaka bi sada trebalo da se prikaže kao nova stavka i biblioteci koju ste zadali. Selektujte oznaku iz liste i promenite opcije formatiranja u skladu sa Vašim željama. Nakon što ste ovo uradili isprobajte kako to radi. Otvorite dokument onog tipa koji ta oznaka podržava, idite u prikaz Code i unesite prvih nekoliko karaktera nove oznake. Ako ste uključili savete vezane za kod, pojaviće se i meni sa savetima, pri čemu je Vaša oznaka jedna od stavki u tom meniju. Dodavanje atributa Ako želite da oznaci dodate novi atribut, treba da uradite sledeće: 1. Kliknite dugme + koje se nalazi na vrhu liste oznaka i iz menija izaberite New Attributes. 2. Prikazaće se okvir za dijalog New Attribute, koji je prikazan na slici 27.26. Definišite biblioteku i oznaku kojima novi atribut pripada, a onda unesite ime tog atributa. 3. Nakon što završite kliknite OK. Proverite svoju listu oznaka. Atribut se pojavljuje kao jedna od stavki za oznaku koju ste zadali. Izaberite atribut iz liste i promenite opcije formatiranja u skladu sa Vašim željama. 265 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Napredne komande Find and Replace Iako komanda Find and Replace iz Dreamweavera ne mora da se obavezno koristi u prikazu Code, sofisticirano pretraživanje se obično vezuje za uređivanje koda. Komanda Find and Replace iz Dreamweavera je snažan alat koji podržava regularne izraze kod pretraživanja koda, kao i mogućnost da se prave složena pretraživanja preko jednostavnog interfejsa sa padajućim menijem. Napredno pretraživanje teksta Kod osnovnog pretraživanja teksta, Dreamweaver omogućava da pretražujete elemente teksta u HTML dokumentu (ovo je tekst koji se vidi na strani, što je suprotno HTML oznakama). Kod naprednog pretraživanja teksta, možete da ograničite pretraživanje na samo pojedine elemente unutar ili izvan određenih oznaka. Možete da zadate da element teksta bude u okviru jedne ili više oznaka, možete čak da zahtevate da oznake koje je uokviruju imaju određene atribute. Opcija Advanced Text search je na raspolaganju kroz prozor Search and Replace. Sa otvorenim prozorom, iz menija Search For izaberite opciju Text (Advanced). Napredna pretraživanja teksta su korisna uvek kada radite sa složenim dokumentima i kada želite da pretraživanja budu što konkretnija. Možda želite da promenite sve primerke teksta Minnesota na MN, ali ne želite da to uradite sa naslovima. Mogli biste da tražite ime države, ali samo ako nije u okviru oznake <hi> ili neke druge oznake za naslove. Ako želite da se promene dese na celom sajtu, ovakvo pretraživanje omogućava da sve zamenite za 5 minuta, a ne da idete sa jednim po jednim pretraživanjem i zamenom, koji mogu trajati satima. Na slici je prikazan okvir za dijalog Find and Replace, sa podešenim naprednim pretraživanjem. Pretraživanja na osnovu zadate oznake Ovaj tip pretraživanja omogućava da pronađete i promenite atribute različitih HTML oznaka, kao i da dodajete, menjate, pa čak i brišete određene oznake. Ovo je moćna funkcija, iako nije nešto što biste povezali sa pretraživanjem i zamenom. Nakon što ovo isprobate nekoliko puta, bićete zapanjeni koliko je ovo pretraživanje korisno. Šta ako ste na celom sajtu koristili logo kompanije, a onda otkrijete da ste zaboravili da dodate alt natpis? Problem će se rešiti preko pretraživanja svake oznake <img> sa atributom src="logo.gif" i podešavanjem atributa alt na "Your logo". Možda treba da pronađete sve tabele koje su širine 100% na sajtu i da ih promenite na širinu od 90%. Ovo se može uraditi preko jednog lakog pretraživanja. Na slici je prikazan okvir za dijaloog Find and Replace podešen da obavi pretraživanje određenih oznaka, sa nekoliko kriterijuma. Umesto zamene, prilikom pronalaženja oznake možete da podesite i neku drugu akciju. Procedura za ovakvo pretraživanje (malo manje intuitivna) je da kliknete dugme Find da bi se pretražili svi primerci zadate oznake, a da onda kliknete dugme Replace da biste zadali određenu akciju na pronađenim oznakama. 266 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Upotreba regularnih izraza Regularni izrazi nisu vrsta pretraživanja i ne postoje samo u Dreamweaveru. Regularni izrazi su dobar način za pretraživanje koda u potrazi za obrascima, a ne određenim karakterima. Na primer, ako na grupi web strana tražite sve telefonske brojeve, ali ne želite da tražite pojedinačne telefonske brojeve, možete da preko regularnih izraza potražite obrazac sa brojevima, crticama i zagradama, koji svi telefonski brojevi moraju da slede. Regularni izrazi su deo Perla, JavaScripta, kao i drugih skript i programskih jezika. Oni mogu biti jednostavni ili vrlo složeni, u zavisnosti od toga šta želite da dobijete. Ako razmišljate na tehnički način, treba da znate da su mogućnosti Dreamweavera koje se odnose na pretraživanje napravljene na osnovu JavaScripta. Prema tome, sve mogućnosti regularnih izraza, koje podržava JavaScript rade i u okviru komande Find and Replace, u Dreamweaveru. Pisanje regularnih izraza Regularni izraz je opis tekstualnog stringa koji sadrži određene karaktere, koji se u obrascima nalaze na određenim mestima. Najjednostavniji regularni izrazi se sastoje samo od slova i brojeva koje tražite i oni će pronađi samo primerke određenih karaktera. Na primer, sledeća tri stringa za pretraživanje su regularni izrazi koji pronalaze baš onaj string koji je zadat, kad god se on pronađe u dokumentu: Fred Flintstone 87125 [email protected] Sa druge strane, regularni izrazi mogu da sadrže i meta karaktere, koji se koriste za opis i brojanje karaktera u dokumentu. Pronalaženje i zamena putem regularnih izraza Ako želite da u Dreamweaveru koristite regularne izraze, samo uključite opciju Use Regular Expression u okviru za dijalog Find and Replace. Karaktere i metakaraktere unesite u bilo kojem od tekstualnih polja u delu Find. (Nema smisla da regularne izraze koristite u delu za zamenu). Na slici su prikazani primeri tri tipa pretraživanja, koja koriste regularne izraze. Na vrhu je primer koji prikazuje osnovno tekstualno pretraživanje koje nalazi različite varijante teksta labeled i čini ih konzistentnim. Centralni primer prikazuje napredno pretraživanje koje pronalazi sva pojavljivanja reči and samo u zaglavljima (h_ vraća hl i h2 i h3) i menja ih sa &. Poslednji primer prikazuje pretraživanje određenih oznaka i pronalazi sve tabele sa širinom zadatom u procentima (\d*% pronalazi bilo koji broj cifara koji završava procentom) i briše atribut width. Opcije Use Regular Expression i Ignore White Space ne mogu biti istovremeno uključene, pošto se u okviru regularnih izraza ne mogu zanemariti beline. Najbolja osobina komande Find and Replace u Dreamweaveru je mogućnost da se kriterijum pretraživanja upamti radi kasnije ponovne upotrebe. Bilo koje podešavanje koje napravite u okviru za dijalog Find and Replace se može zapisati. To znači da vreme koje provedete u kreiranju složenih izraza pretraživanja nije izgubljeno. Dobar skup kriterijuma pretraživanja je kao poseban pomoćni program, spreman da se samo preko nekoliko klikova mišem izvrši u bilo kojoj datoteci. Nakon što ste uneli opcije komande Find and Replace, preko dugmeta Save možete da upamtite skup kriterijuma. Otvoriće se standradni okvir za dijalog Save. Izaberite lokaciju i ime. Nakon što završite kriterijumi se 267 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 zapisuju u datoteku sa ekstenzijom .dwr. Ako želite da kriterijume koje ste zapisali u datoteku učitate, otvorite okvir za dijalog Find and Replace i kliknite dugme Load Query (sa ikonom datoteke). Otvoriće se okvir za dijalog u kome se pita koju datoteku želite da učitate. Pronađite upamćenu DWR datoteku i otvorite je. Interfejs komande Find and Replace će se popuniti onim što je u datoteci. Ako želite, možete da menjate datoteku sa upisanim kriterijumima, Na kraju krajeva, DWR datoteke su obične XML datoteke koje sadrže različite parametre, kao atribute korisničkih oznaka. Ako volite da radite sa 268 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 kodom, uvek možete da otvorite DWR datoteku u nekom editoru teksta (čak i u Dreamweaveru) i da tu promenite kriterijume. Kod za pretraživanje može da izgleda ovako: <?xml version="1.0"?> <dwquery> <queryparams matchcase="false" ignorewhitespace="false" useregexp="true"/> <find> <qtag qname="table"> <qattribute qname="width" qcompare="=" qvalue="\d*%"></qattribute> </qtag> </find> <replace action="removeAttribute" param1="width" 'param2="" /> </dwquery> Rad sa tekstom koji nije HTML u Dreamweaveru Editor koda u Dreamweaveru može da se koristi i za rad sa kodom koji nije neki od podrazumevanih markup jezika (HTML, XML, XHTML, ASP, CFM, itd.) premda ove datoteke ne možete da prikažete u prikazu Design ili da za njihov pregled koristite opciju Preview in Browser. Koji su drugi jezici koje biste mogli da poželite? Ako radite sa multimedijom, mogli biste da probate SMIL (Sinchronyzed Media Integration Language) koji se korisi za kreiranje audio vizuelnih prezentacija, ili SVG (Scalable Vector Graphics), koji se koristi za kreiranje vektorske grafike. Oba ova jezika se zasnivaju na XML-u i njihova popularnost raste. Ako radite sa Windows Mediom, onda biste mogli da ovde uređujete metadatoteke koje se tu koriste (.wvx i.wax). Ako radite RealMedia prezentacije, onda biste mogli da uređujete datoteke RealText (.rt) ili RealPix (.rp). Ovde se mogu uredivati i datoteke za konfiguraciju Dreamweavera, koje se takođe zasnivaju na XML-u (.mno,.dwr itd). Autori proširenja za Dreamweaver mogu ovde da uređuju i svoje datoteke (.mxi). Ako Dreamweaver ne poznaje tu ekstenziju datoteke, on ne može da je otvori. Ako želite da u listu Dreamweavera dodate novu ekstenziju, izaberite Edit > Preferences i izaberite kategoriju Types/Editors. Pronađite opciju Open in Code i dodajte novu ekstenziju datoteke, kao što je prikazano na slici. Svaka ekstenzija mora da se odvoji od drugih u listi putem blanko karaktera sa svake strane. Nemojte zaboraviti da dodate i tačku (.). Ako Vaš tip datoteke može da ima alternativne ekstenzije (kao što su .smi, .smil ili .sml za SMIL) onda svaku od njih treba da ubacite posebno. Da biste bili sigurni da Dreamweaver neće prepisati kod koji se nalazi u datoteci, izaberite Edit > Preferences i izaberite Code Rewriting. Pronađite listu New Rewrite Code i dodajte novu ekstenziju. Svaka nova ekstenzija datoteke mora biti odvojena od drugih stavki iz liste blanko karakterima. 269 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako su Vam za poseban markup jezik potrebni saveti vezani za kod i pomoć, možete da napravite i korisnički definisanu biblioteku oznaka. Ako planirate da često radite sa konkretnim tipom dokumenta, vreme koje uložite u podešavanje biblioteke oznaka može da se isplati. Pisanje JavaScript koda u Dreamweaveru Pored podrške za ostale jezike, Dreamweaver ima nekoliko karakteristika koje mogu da pomognu kada radite sa JavaScriptom. Pano Reference Ako je reč o pomoći kod pisanja skriptova, pano Reference ima pomoć i za JavaScript. Ako želite da u panou Reference pristupite pomoći za JavaScript, kliknite dugme <?> sa palete Document i iz padajućeg menija Book izaberite O'Reillv JavaScript Reference. Na slici je prikazan deo JavaScript panoa Reference, sa označenim pojedinim delovima radi lakšeg pretraživanja. Ovo je orgnizovano po objektima, kao i većina JavaScript rečnika, tako da morate da znate strukturu objekata, da biste mogli da iskoristite sve prednosti koje postoje. 270 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Pisanje skriptova bez prikaza Code Ako želite da na stranu dodajete svoje skriptove, a da pri tome ne morate da menjate editore i prikaze, na raspolaganju imate dve mogućnosti: ponašanje JavaScript i objekat Script. Script Property Inspector takođe omogućava da menjate postojeće oznake script. Ponašanje Call JavaScript Ovo ponašanje se primenjuje i menja na isti način kao i sve druge stavke sa panoa Behaviors. Umesto da ubacujete unapred napisane JavaScript akcije, ovo ponašanje dodaje one JavaScript iskaze koje konkretno navedete. Pratite sledeće korake: 1. Otvorite dokument i izaberite element na strani kojem želite da pridružite ponašanje. 2. Otvorite pano Behaviors i iz menija + izaberite Call JavaScript. 3. U okviru za dijalog koji se otvara unesite JavaScript iskaze koje želite da izvršite. (Ako ih ima više, odvojite ih tačkom i zarezom.) Nakon što završite kliknite OK. Koliko je korisno ponašanje Call JavaScript? Ono je sjajno, ako niste baš najbolji u pisanju skriptova, ili ako ste u žurbi. Sa druge strane, pošto o kodiranju brine Dreamweaver, to ponašanje Call JavaScript može da dovede do pomalo nezgrapnog koda. Ponašanja Dreamweavera svoje skriptove uvek ubacuju u funkciju u zaglavlju koje se ne prilagođava, a ta funkcija se poziva sa parametrima. Recimo da želite da ubacite liniju sa kodom u kojoj se pretraživač šalje nazad na prethodnu stranu. Ovo se dešava kada korisnik klikne određenu stavku. Ubacićete ponašanje Call JavaScript i uneti history.back(). To se unosi u ovom okviru za dijalog. Dreamweaver će u zaglavlje dokumenta dodati sledeću funkciju: function MIVl_callJS(jsStr) { //v2.0 return eval(jsStr) } Izabranom elementu na strani će se dodati sledeći rukovaoc događajima: <a href="javascript:;" onClick="MM_callJS('history.back()')"> Ako Vam je poznato kako Java Script radi u okviru HTML-u, onda ćete videti da je mnogo efikasnije da ovaj JavaScript iskaz stavite u href, kao što je: <a href="javascript:window.back()"> Za ovaj konkretan slučaj, ako želite možete i da izbegnete prikaz Code. Samo izaberite element na strani koji treba da pokrene link i u polje Link Property Inspectora unesite javascript:window.back(). Objekat Script Objekat Script iz Dreamweavera je brz način da se u dokument ubaci kompletna oznaka Script, a da pri tome ne mora da se ide u prikaz Code. Skriptovi koji se unose na ovaj način ne moraju biti napisani u JavaScriptu. Oni mogu da sadrže bilo koju oznaku koja se može naći u skriptu, uključujući i linkove na 271 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 posebne .js datoteke. Ako želite da u dokument ubacite blok sa skriptom, i da to uradite preko objekta Script, pratite sledeće korake : 1. Otvorite dokument. 2. Da biste skript ubacili u deo body, postavite kursor tamo gde bi oznaka trebalo da se doda. Ako želite da skript ubacite u deo head, upotrebite opciju View Options i uključite Head Content. Nakon toga kliknite liniju sa zaglavljima (na vrhu Dreamweaverov-og prozora) da biste je aktivirali. 3. Sa palete Insert idite u kategoriju HTML. Iz grupe objekata Script izaberite objekat Script. Možete i da izaberete Insert > HTML > Script Object > Script. 4. U okviru za dijalog koji se otvara izaberite skript jezik. U padajućoj listi su prikazane opcije JavaScript (razne verzije) u VBScript. Ako želite da izaberete neki drugi jezik, unesite informacije direktno u polje za unos teksta. 5. Unesite kompletan sadržaj skripta, ali nemojte unositi oznake otvaranja i zatvaranja skripta (kao i komentare). Dreamweaver će Vaš skript ubaciti unutar oznaka script, sa definisanim pravim jezikom. On će ubaciti i komentare, koji sakrivaju skript od pretraživača koji ga ne podržavaju. Ako želite da blok sa skriptom menjate preko Script Inspectora, pratite sledeće korake : 1. Otvorite dokument koji sadrži oznake script. 2. Ako se skript nalazi u zaglavlju dokumenta, prikažite liniju sadržaja zaglavlja (izaberite View Options > Head Content). Ako je skript u telu dokumenta, uključite nevidljive elemente (izaberite View Options > Visual Aids > Invisible Elements). Svaka oznaka script u dokumentu sada treba da se prikaže na liniji sadržaja zaglavlja, ili u prikazu Design kao ikona skripta. 3. Izaberite ikonu skripta koja predstavlja kod koji želite da promenite. 4. Preko Property Inspectora promenite parametre skripta. Kliknite dugme Edit da biste pristupili i promenili kod. 272 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Kada ubacujete objekat Script nemate mogućnost da dodate i link sa skriptom. U okviru za dijalog se pretpostavlja da unosite sopostveni skript. Ovaj proces možete i da okrenete. Ako želite da preko objekta Script, ubacite link na JS datoteku koja se nalazi na strani klijenta ili strani servera, treba da uradite sledeće: 1. Otvorite dokument i ubacite objekat Script, kao što smo već opisali. 2. U okviru za dijalog Script, ostavite polje sa kodom prazno, a onda kliknite OK. Ovim se u dokument ubacuje prazna oznaka Script. 3. Uključite i liniju sadržaja zaglavlja ili nevidljive elemente, pronađite ikonu skripta i izaberite je. 4. U Property Inspectoru za objekat script, izaberite datoteku koju želite da pridružite. Skriptovi u panou Assets Ako radite u okviru definisanog sajta i želtie da u svoj dokument dodate linkove na JS dokumente, to ćete najlakše uraditi preko panoa Assets. Svaka JS datoteka unutar fascikle na lokalnom sajtu se prikazuje u delu Script, panoa Assets. Ako želite da na ovaj način u dokument dodate link na skript, treba da uradite sledeće: 1. Otvorite dokument u koji želite da ubacite link. 2. Proverite da li je prikazana linija sa sadržajem zaglavlja (izaberite View Options > Head Contents). 3. Otvorite pano Assets, a onda kliknite ikonu skripta, da bi se prikazale datoteke sa skriptovima na sajtu. 4. Pronađite datoteku na koju želite da link ukazuje i prevucite njenu ikonu sa panoa Assets do linije sadržaja zaglavlja za dokument. Alati vezani za JavaScript dostupni u prikazu Code Ako svoje skriptove uređujete u prikazu Code ili Code Inspectoru, onda možete da koristite prednosti koje 273 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 nude različito obojeni delovi koda, navigacija kroz funkcije, automatsko uravnotežavanje, kao i različiti alati za debagovanje. Različite boje za različite delove koda u skladu sa sintaksom Već ste videli kako ovo funkcioniše u Dreamweaveru, odnosno kako se uključuju i podešavaju boje teksta za različite elemente koda. U okviru za dijalog Preferences Code Coloring se nalaze specijalna podešavanja koja se odnose na boje teksta u skriptovima. Tu su rezervisane reči, ostale ključne reči, kao i stringovi. Ove boje se primenjuju ne bilo koji kod koji se nalazi izmedu para oznaka script. Ono što ovde podesite ne utiče na kod koji je deo rukovaoca događaja, pošto taj kod nije u okviru oznaka script. Delovi JavaScript koda (snippet) Delovi koda koje smo razmatrali ranije u ovom poglavlju mogu takođe da se koriste za čuvanje fragmenata koda koji se najčešće koriste. Dreamweaver dolazi sa nizom korisnih JavaScript fragmenata, koje ćete možda poželeti da istražite. Meni za navigaciju kroz kod Kada radite u Code Inspectoru, Dreamweaver omogućava da lako skočite na različite JavaScript funkcije. Ovo se radi preko menija Code Navigation. Ovom meniju možete da pristupite preko palete Code Inspector, ako kliknete ikonu sa velikim zagradama. Ako izaberte neku funkciju, prebacujete se u prvu liniju te funkcije, koja se prikazuje na ekranu. (Ova mogućnost ne postoji u prikazu Code u prozoru Document.) Automatsko uravnotežavanje zagrada Često se dešava da se izgubi trag o otvorenim i zatvorenim velikim i malim zagradama, ili otvorenim i zatvorenim navodnicima. Dreamweaver Vam ne može pomoći u određivanju da li su otvoreni navodnici zatvoreni ili ne, ali može kod određivanja da li su zatvorene zagrade koje ste otvorili (velike, male i srednje). Ako želite da proverite da li je Vaša interpunkcija ispravno uparena, treba da uradite sledeće: 1. U prikazu Code ili u Code Inspectoru izaberite otvorenu zagradu (veliku, srednju ili malu). 2. Izaberite Edit > Balance Braces. Dreamweaver će selektovati sav kod između te zagrade i odgovarajuće zatvorene zagrade. Ako ste navikli na način na koji je ovo automatsko zatvaranje zagrada implementirano u nekim editorima teksta (kao što je BBEdit), komanda Balance Braces može da uradi ponešto od toga na šta ste navikli. Ne možete je koristiti za uravnotežavanje bilo čega drugog, osim zagrada. Ona radi samo kada ste izabrali otvorenu zagradu, a ne i zatvorenu. Ako imate neispravno zatvorene zagrade, komanda se javlja porukom o grešci (zvukom). Ovo se, na primer, dešava kada imate više otvorenih od zatvorenih zagrada. Ako u sledećem kodu izaberete prvu otvorenu zagradu, čuće se zvuk koji upozorava na grešku, pošto zagrade nisu uparene: function helloWorld() { if (a==0) { window.alert("Hello, world"); } Ako izaberete drugu otvorenu zagradu, neće se javiti greška, pošto će Dreamweaver da izabere samo onaj kod koji se nalazi u zagradama iskaza if. 274 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 20. Prilagođavanje i proširivanje Dreamweavera Kako se Dreamweaver konfiguriše Dreamweaver se razlikuje od drugog komercijalnog softvera. Većina programa se pravi u jezicima kao što je C++, nakon čega se kompajliraju. Dobijaju se izvršni programi, što znači da Vi ne možete da ulazite u njihovu strukturu, da biste videli kako su napravljeni ili da podešavate njihove funkcije. Za programe je u poslednjih nekoliko godina postalo popularno da nude plug-in arhitekturu, čime se nezavisnim programerima omogućava da kreiraju nezavisne module, plug-inove (Xtras, Xtensions), ili čak i filtare, u zavisnosti od softvera koji je u pitanju. Ovi moduli se generalno moraju praviti kao kompajlirani programi napravljeni u C++ ili nekom drugom sličnom jeziku. Dreamweaver je, sa druge strane, napravljen sa idejom da korisnicima omogući da menjaju i dodaju svoje dodatke u program. Da bi ovo uradili, inženjeri koji su pravili Dreamweaver su napravili kombinaciju kompajliranog jezgra napisanog u jeziku C, dok su interfejs i mnoge funkcije napisane u spoljašnjim JavaSript, XML ili HTML datotekama. Ove spoljašnje datoteke se nazivaju proširenjima. Promenom proširenja možete da podešavate kako Dreamweaver izgleda i kako radi. Dodavanjem proširenja u Dreamweaver možete da dodajete nove funkcije. Premda morate da znate način na koji se pomoću JavaScripta prave ova proširenja, ipak je za podešavanje interfejsa proširenja potrebno samo osnovno znanje o HTML-u i XML-u. Macromedia Exchange za Dreamweaver ima stotine proširenja koja su napisali drugi programeri. Neka od njih su besplatna, a neka se plaćaju. Kako se radi sa fasciklom za konfiguraciju Ključ za sve menije, komande i funkcije je fascikla za konfiguraciju. Ova fascikla, koja se nalazi ispod Dreamweaver-ove fascikle Application, sadrži sve datoteke za proširenje. Ispitajte ovu fasciklu, i prepoznaćete mnoge fascikle koje odgovaraju elementima Dreamweavera. To su Objects, Behaviors, Commands, Menus, Inspectors itd. U okviru ovih fascikli se nalaze pojedinačne datoteke koje kontrolišu izgled i funkcije različitih elemenata interfejsa Dreamweavera. Tipovi datoteka u ovoj fascikli su: U HTML datotekama se nalaze elementi vezani za raspored i interfejs pojedinih okvira za dijalog, panoa i inspektora. JavaScript datoteke, kao i JavaScript kod koji je ugrađen u HTML datoteke, obezbeđuju funkcije različitih proširenja. XML datoteke (sa različitim ekstenzijama) sadrže instrukcije koje Dreamweaver koristi da bi odredio kako se proširenje integriše u interfejs glavnog programa. Ako ste dovoljno avanturistički raspoloženi da petljate sa ovim datotekama, možete da podesite i proširite Dreamweaver. U ovom poglavlju ćete imati šansu da ispitate HTML i XML datoteke u fascikli Configuration i da promenite ponešto u njima. Podrška za više korisnika: Fascikla User Configuration Kao i svi noviji operativni sistemi, i Dreamweaver pretpostavlja da ćete raditi u okruženju sa više korisnika. To znači da se na Vaš računar može prijaviti više od jedne osobe. Svi oni mogu da pokrenu program i podešavaju njegove karakteristike. Dreamweaver podržava konfiguraciju za različite korisnike preko više različitih fascikli Configuration. Podrazumevani poslovi vezani za konfiguraciju su vezani za glavnu fasciklu Configuration, koja se nalazi u okviru fascikle Dreamweavera kao aplikacije. Svaki korisnik pored toga može da ima i svoju posebnu fasciklu za konfiguraciju. Kod verzije Dreamweavera za Windows lične fascikle korisnika za konfiguraciju se nalaze na putanji: c:\documents and settings\username\application data\macromedia\dreamweaver mx\configuration\ Umesto username se stavlja Vaše korisničko ime, ili Owner ili Default User, u zavisnosti od toga kako je sistem podešen. Fascikla Application Data je verovatno nevidljiva, osim u slučaju da ste nešto petljali sa podešavanjem sistema. Morate da je učinite vidljivom (u Exploreru izaberite Tools > Folder Options > View), a onda možete da vidite i dalje podešavate datoteke za konfiguraciju. Pogledajte jednu od ovih dodatnih fascikli i videćete da to nije potpuni duplikat glavne fascikle Configuration. Tu su samo izvesne datoteke, koje predstavljaju elemente interfejsa koji treba različito podesiti za svakog korisnika. (Ako nikad niste pokretali Dreamweaver, onda ove fascikle i ne postoje. One se kreiraju samo ako je potrebno.) Podešavanja kao što su boje za različite delove koda, meniji koji se mogu podešavati da bi im se pristupalo preko tastature, komande koje se mogu zapisivati preko panoa History, pa čak i objekti koji pamte svoja podešavanja od 275 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 jedne radne sesije do druge se nalaze u fascikli Configuration za svakog pojedinog korisnika. Koliko je ovo bitno za Vas? Ako želite da budete samo generalni korisnik Dreamweavera, sve što treba da znate o konfiguraciji pojedinih korisnika, je da ona postoji. Ako volite da petljate i da radite sa ovim datotekama da biste podesili svoj program, onda morate da znate u kojoj se fascikli Configuration nalaze koje datoteke, odnosno gde su datoteke koje treba promeniti da bi se nešto obavilo. Generalno pravilo je: Kada traži datoteke za proširenja, Dreamweaver uvek prvo pretražuje fasciklu Configuration tog korisnika (i ne koristi datoteke duplikate koje postoje u glavnoj fascikli). Samo ako neka datoteka sa proširenjem nema svoj par u fascikli za konfiguraciju korisnika, Dreamweaver koristi datoteku koja se nalazi u glavnoj fascikli Configuration. Promena konfiguracije Sve što uradite u podešavanju Dreamweavera utiče na fasciklu Configuration. Ipak neće sve zahtevati da idete u fasciklu Configuration i da tamo nešto petljate. U narednim odeljcima smo objasnili različite zadatke vezane za promenu konfiguracije, koje biste mogli da poželite, od jednostavnih promena, da bi se dobio malo bolji interfejs, pa do promena koje su potencijalno opasne, a koje se mogu obaviti samo u srcu mašine. Dobro se zabavite. Promena prečica sa tastature Prečice sa tastature su sjajan način da se brzo pristupi komandama i funkcijama Dreamweavera. Podrazumevano podešavanje Dreamweavera sadrži prečice za većinu komandi iz menija, kao i prečice za selektovanje nečega, za kretanje naviše ili naniže po strani, kao i za uredivanje u prikazima Code i Design. U slučaju da Vaša omiljena komanda ili operacija nema prečicu, ili ako Vam se ne dopadaju prečice koje je firma Macromedia pripremila za Vas, one se mogu menjati. Možete da dodajete, brišete ili menjate prečice. Možete i da pravite različite skupove prečica za različite namene i da prelazite sa jednog na drugi skup. Kako se radi sa Editorom za prečice sa tastature Osnovni interfejs za rad sa prečicama sa tastature je Keyboard Shortcut Editor, koji je prikazan na slici. Ovom editoru možete da pristupite ako izaberete Edit > Keyboard Shortcuts. U ovom prozoru možete da izaberete jedan od unapred definisanih skupova prečica, koji dolaze sa Dreamweaverom, ili da napravite ili podesite svoj skup. 276 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Dreamweaver dolazi sa četiri skupa prečica sa tasture: • Macromedia Standard – Ovo je podrazumevani skup, koji najbolje funkcioniše prilikom integracije sa ostatkom programa Macromedie MX 2004, (Fireworks MX 2004, Flash MX 2004). • Dreamweaver – Za korisnike koji su koristili prethodne verzije i ne žele da pamte ceo skup novih komandi, svaki put kada se pojavi nova verzija. • HomeSite Vrlo korisno za korisnike koji rade pod Windowsom, a koji često koriste Dreamweaver i editor HomeSite+. Za prelaz sa jednog skupa prečica na drugi samo treba da iz menija Shortcut Set izaberete odgovarajuću opciju. Čim kliknete OK da biste zatvorili okvir za dijalog novi skup prečica postaje aktivan. (Nema potrebe da restartuejte Dreamweaver). Premda ove skupove ne možete da menjate, bilo koji od njih možete da duplicirate i da tako napravite svoj skup, koji onda možete da menjate i podesite onako kako želite. Samo aktivirajte skup koji želite da duplicirate, a onda kliknte dugme Duplicate Set. Dajte skupu ime koje želite, a onda klikntie OK da biste zatvorili okvir za dijalog, a time i kreirali skup. Ako želite da u svom korinsički definisnaom skupu napravite novu prečicu, ili da promenite neku od postojećih, potražite komandu koju želite da menjate. Kada izaberete komandu u polju Shortcuts se prikazuje prečica. Ako želite da promenite postojeću prečicu, selektujte je u polju Shortcuts. Ako želite da dodate novu, kliknite dugme + koje se nalazi iznad polja Shortcuts. Nakon toga kliknite u polje Press Key, unesite svoju kombinaciju tastera, a onda kliknite Change. Evo nekoliko saveta koji mogu pomoći kada radite sa editorom Shortcuts. • • • Čim aktivirate polje Press Key, Dreamweaver sve što pritisnete na tastaturi interpretira kao prečicu sa tastarure, koju pokušavate da dodelite. Ako pritisnete pogrešnu kombinaciju tastera, ne možete da pritisnete Delete ili Ctrl/Cmd+Z da biste poništili ono što ste uneli. Upamtite da sve dok ne pritisnete dugme Change, ništa što ste uneli u ovom polju nije postalo prečica. Samo izvesne kombinacije tastera se smatraju ispravnim prečicama. Dozvoljene su kobinacije sa funkcijskim tasterima i to sa ili bez modifikatora. Kombinacije brojeva i slova moraju počinjati sa Ctrl (Windows). Ako u polju Press Key unesete neispravnu kombinaciju tastera, Dreamweaver će Vas upozoriti i neće dozvoliti da je dodelite. Ako u polje Press Key unesete kombinaciju tastera koja je već dodeljena, Dreamweaver će Vas 277 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 upozoriti. Ako kliknete dugme Change, Dreamweaver će Vas pitati da li želite da se kombinacija dodeli drugoj komandi. Naravno da u ovome nema ničeg lošeg. Sve promene koje napravite u skupu prečica se ne pamte dok ne predete na drugi skup prečica (u tom trenutku se postavlja pitanje da li želite da upamtite promene u prethodnom skupu) ili dok ne kliknete OK da biste zatvorili okvir za dijalog Keyboard Shortcuts. Ako se Dreamweaver zaglavi ili ugasi pre nego što ste uradili jednu od ove dve stvari, prečice se neće upamtiti. Kako se prečice sa tastature konfigurišu Zahvaljujući editoru Keyboard Shortcuts ne morate da se bavite detaljima o konfiguraciji vezanoj za promenu prečica. U slučaju da želite da petljate ispod pokrivača, prečice sa tastature se kontrolišu preko nekoliko XML datoteka koje se nalaze u fascikli Configuration/Menus/Custom Sets. Svaka od datoteka u ovoj fascikli, Macromedia.xml, HomeSite.xml itd, predstavljaju jedan skup prečica sa tastature. Sadržaj datoteke otprilike izgleda ovako: <SHORTCUTSET name="Macromedia Standard" type="factory"> <SH0RTCUT ID="DWMenu_File_Save" keys="Cmd+S"/> <SHORTCUT ID="DWMenu_File_SaveAs" keys="Cmd+Shift+S"/> <SH0RTCUT ID="DWMenu_File_SaveAsTemplate" keys=""/> etc </SHORTCUTSET> Ako ste kreirali neki korisnički definisan skup prečica, one se pojavljuju u fascikli Configuration za tog korisnika, kao posebna XML datoteka. Ime datoteke je u skladu sa imenom koje ste dali svom skupu, a ekstenzija.xml. U istoj fascikli postoji datoteka Active.txt koja Dreamweaveru govori koji skup prečica je trenutno aktivan. Ako iz nekog razloga ne želite da radite sa editorom - Keyboard Shortcuts (on je na primer, suviše spor ili jednostavno ne želite da se bavite poljima Shortcut i Press Key, već više volite da kucate), možete da promenite datoteke koje se nalaze u fascikli Configuration za tog korisnika i da tamo zadate koje god želite prečice. Samo treba da imate na umu da sintaksa XML datoteke mora biti ispravna i da je na ovaj način moguće da poremetite i rad Dreamweavera. Ako slučajno pokvarite svoj skup prečica ovim ručnim promenama, napustite Dreamweaver, izbacite XML datoteku koja se odnosi na taj skup i promenite datoteku Active.txt tako da se neki drugi skup podesi kao aktivan. Ovo je cena petljanja po kodu. Podešavanje kategorije Favorites na paleti Insert Teško ste radili, pravili strane, ubacivali sadržaj i pokušavali da budete što je moguće efikasniji. Da li Vam je ikada dosadilo stalno skakanje sa jedne na drugu kategoriju na paleti Insert i stalno preskakanje objekata koje ćete retko kada koristiti, da biste došli do onih koje koristite svo vreme? U Dreamweaveru MX 2004 je novost da u kategoriju Favorites na paleti Insert možete lako da dodate svoje omiljene objekte. Ne morate da petljate po kodu. Prozor Customize Favorite Object Prvi put kada dođete na paletu Insert Favorites, ona je prazna. Tu je samo poruka da treba da kliknete da biste podesili kategoriju. Kada kliknete ovu poruku, Dreamweaver otvara okvir za dijalog Customize Favorite Objects, koji je prikazan na slici. Ako želite da dodate svog favorita, u levom delu prozora izaberite objekat iz liste. Nakon toga klikntie dugme >> da biste taj objekat prebacili u listu Favorites sa desne strane. Vaš omiljeni objekati će se na paleti Favorites Insert prikazati po onom redosledu po kojem se prikazuju u listi Favorites. Ako želite da ih organizujete (kada ih imate više), izaberite stavku iz liste, a onda pritisnite strelice naviše i naniže, da biste ih pomerili naviše ili naniže u listi. Ako na paleti Insert želite da dodate vertikalni separator (tako da možete da grupišete objekte u logičke grupe), izaberite objekat iza kojeg sledi separator, a onda kliknite dugme Add Separator. 278 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Ako želite da iz liste Favorites izbacite neki objekat, selektujte ga i kliknite ikonu kante za đubre. (Ovim se objekat ne briše iz ostalih interfejsa Dreamweavera, već samo iz kategorije Favorites.) Kada završite sa kreiranjem favorita, kliknite OK da biste zatvorili okvir za dijalog. U bilo kom trenutku možete da se vratite u ovaj prozor i da promentie kategoriju Favorites. Potrebno je da desnim tasterom miša kliknete prazan deo palete Favorites Insert i da izaberete opciju Customize Favorites. Kako se paleta Insert konfiguriše Nije obavezno da znate kako Dreamweaver konfiguriše kategoriju Favorites ili neku drugu kategoriju sa palete Insert. U slučaju da ste ozbiljni, ili da volite da petljate, evo kako to radi. U fascikli Connguration/Objects se nalazi datoteka Insertbar.xml. Ona sadrži instrukcije za konfigurisanje palete Insert, uključujući kategorije, dugmad sa objektima, grupe objekata itd. Evo kako radi kod: <category> <button /> <separator /> <menubutton> <button /> <button /> </menubutton> </category> Svaki par oznaka category kreira kategoriju Insertbar. U okviru svake kategorije postoje oznake button, koje kreiraju dugmad za objekte, a oznaka menubutton koja sadrži druge oznake button kreira padajući meni sa objektima. Vertikalni separatori se prave preko oznaka spearator. Kod sadrži različite atribute za svaku oznaku. Na kraju sve to izgleda ovako: <category id="DW_Insertbar_Common" MMString:name="insertbar/category/common" folder="Common"> <button id="DW_Anchor" image="Common\Anchor.gif"MMString: name="insertbar/anchor" file="Common\Anchor.htm"/> <separator /> <menubutton id="DW_LayoutTools" MMString:name= "insertbar/layoutTools" image="Common\Table.gif" folder="Tables"> <button id="DW_Table" image="Common\Table.gif" enabled="! VIEW_LAYOUT" 279 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 MMString:name="insertbar/table" file="Common\Table. htm" /> <button id="DW_Div" image="Common\Div.gif" enabled="! MMString:name="insertbar/div" file= "Common\Div.htm"/> </menubutton> <category> _VIEW_LAYOUT" Automatizacija zadataka preko korisnički definisanih komandi Ako ste jedan od ultra efikasnih ljudi, koji vole da kad god je moguće smanje sebi posao, onda ste verovatno već koristili makroe koji postoje u drugim programima. Makroi omogućavaju da zapišete sve korake koje ste uradili u obavljanju nekog posla i da ih kasnije ponovite. Ovo se obično pokreće nekom prečicom sa tastature ili komandom iz menija. U Dreamweaveru, umesto da pravite makroe, možete da kreirate i implementirate korisničke komande. Korisničke komande uključuju komande koje su privremeno zapisane, stalno zapisane komande koje su zapisane preko panoa History, kao i složenije komande koje se moraju programirati (preko skriptova). U narednom odeljku smo objasnili dve vrste korisničkih komandi. Zapisivanje komandi Zapisana komanda je niz koraka koje Vi nalažete da Dreamweaver zapiše, tako da ih kasnije može ponoviti onoliko puta koliko Vam je potrebno. Komandu ćete zapisati na sledeći način: 1. Isplanirajte sve korake koji su Vam potrebni i ako je potrebno podesite uslove za zapisivanje. (Na primer, ako želite da zapamtite formatiranje tabele, onda treba da otvorite dokument i da napravite tabelu, pa tek tada možete da počnete sa zapisivanjem koraka). 2. Izaberite Commands > Start Recording. 3. Uradite korake koje želite da zapišete. Na primer, ako želite da formatirate tabelu, preko Property Inspectora možete da primenite boju pozadine, da podesite cell padding i spacing, da podesite debljinu i boju okvira, ili da podesite neke druge osobine. Dreamweaver ne može da zapiše korake kao što su promena onog što je izabrano ili promena aktivnog dokumenta. Ako tokom zapisivanja radite nešto od ovog, to se zanemaruje. Sa druge strane zapisuje se izbor iz Property Inspectora, kucanje, kao i biranje komandi iz menija. 4. Kada završite sa zapisivanjem, izaberite Commands > Stop Recording. Komanda koju ste zapisali ostaje u memoriji, spremna da se ponovo izvrši, sve dok ne zapišete novu ili dok ne napustite Dreamweaver. Ako želite da ponovo izvršite komandu koju ste zapisali, uradite sledeće: 1. Podesite uslove koji treba da budu podešeni preko nego što komanda bude počela da se izvršava. (Ako želite da ponovo primenite komandu koja formatira tabelu, prvo morate da selektujete tabelu.) 2. Izaberite Commands > Play Recorder Command. Izvršiće se pojedini koraci koje ste zapisali. 3. Ponovite ovu proceduru onoliko puta koliko želite. Komande će se izvršiti isto toliko puta. Kao što vidite, zapisane komande su prilično dobre. Ipak i one imaju svoja ograničenja. One mogu biti brza, privremena pomoć u obavljanju nekih poslova koji se često ponavljaju. One ne mogu da rade ništa složenije, ili duže. Na primer: • Dreamweaver u jednom trenutku u memoriji može da ima samo jednu komandu. Čim zapišete novu komandu, gubi se ona koja je prethodno bila zapisana. • Zapisane komande ne mogu da sadrže okvire za dijalog i prema tome ne mogu se prilagođavati da prihvataju unos od strane korisnika. Svaka komanda obavlja potpuno iste korake, sa potpuno istim koracima. • Ne mogu da se zapisuju sve akcije. Ako probate da zapišete skup koraka, koji sadrže promenu nečeg što je izabrano, taj korak se ne može zapisati. Kada se komanda ponovo izvršava, ovo može dovesti do nepredvidljivih rezultata. • Nema provere grešaka. Na primer, ako pre ponovnog puštanja zapisane komande ne selektujete ono što treba, komanda jednostavno neće raditi. Nećete dobiti lepu prijateljsku poruku koja Vas upozorava da je nešto pošlo naopako. Zapisivanje komandi preko panoa History Ako Vam se dopada ideja da zapisujete i ponavljate svoje akcije, ali želite više kontrole i fleksibilnosti, pano History nudi dve alternative. To su karakteristike Replay Steps i Save ASP.NET Commands, koje omogućavaju da upamtite i ponovite skup koraka koji mogu, ali ne moraju biti uzastopni. Ovo se može upamtiti privremeno ili stalno. Repeated Steps (ponovljeni koraci) se koriste kada želite da obavite skup akcija i da odmah iza toga ponovite te akcije, jednom ili više puta. Zapisane komande se koriste kada želite da svoje korake upamtite za stalno i da to stavite u interfejs Dreamweavera, tako da u budućnosti to možete 280 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 da ponovite kad god želite. Procedura za ponavljanje koraka ili zapisivanje komandi je u osnovi ista. Treba da uradite sledeće: 1. Isplanirajte korake koje želite da upamtite. Ako je potrebno, podesite uslove za njih (napravite tabelu koja se formatira, na primer). 2. Otvorite pano History (izaberite Windows > History) tako da budete spremni za rad sa njime. Da biste bili sigurni da počinjete sa praznim panoom i da možete da pokrijete što više koraka, izaberite komandu Options > Clear History. 3. Izvršite akcije koje želite da ponavljate. Svaka akcija se na panou History prikazuje kao jedan korak. I ovde ne mogu da se uključuju sve akcije (kao što su promena onog što je izabrano, ili pomeranje miša). Ove akcije se na panou History prikazuju kao horizontalna crvena linija, ili crna linija koja ukazuje na pomeranje miša. 4. Nakon što završite svoju proceduru i kada budete spremni da je ponovite, u panou History izaberite sve korake koje želite da ponovite: • Ako selektujete korake koji se nastavlju, svaki od njih kliknite sa pritisnutim tasterom Shift. • Ako želite da selektujete korake koji nisu kontinualni (na primer, da preskočite pomeranje miša), pritisnite taster Ctrl (Windows) i kliknite. 5. Ako ove korake želite da ponovite i da ih ne pamtite za stalno, iz panoa History izaberite Options > Replay Steps. Svaki izabrani korak se ponovo izvršava (osim ako je u pitanju pomeranje miša, ili neka druga akcija koja se ne ponavlja), a u panou History se prikazuje sledeći korak, po imenu Replay Steps. Izaberite Replay Steps onoliko puta koliko je potrebno. Svaki put se na panou pojavljuje novi korak koji se može ponoviti. 6. Ako želite da ove korake upamtite za stalno i da ih smestite u interfejs Dreamweavera, iz panoa History izaberite Options > Save ASP.NET Command. (Ako u koracima postoji nešto što se nemože pokriti, Dreamweaver će Vas upozoriti na to i dati priliku da prekinete operaciju.) Od Vas će se zatražiti da novoj komandi date ime. Nakon što sve to završite, kliknite OK da biste zatvorili okvir za dijalog. Nova komanda će se pojaviti u donjem delu menija Commands. Nakon što ste niz komandi u panou History upamtili kao komandu, ove korake možete da ponovo izvršite u bilo kom trenutku. Potrebno je da svoju komandu izaberete iz menija Commands. Za razliku od zapisanih komandi koje smo ranije opisali, ove komande ostaju zapisane sve dok ih sami ne odbacite. Prema tome, ako volite ovakve komande, verovatno ćete završiti sa nizom takvih. Ako želite da obrišete neku od zapisanih komandi, ili da joj promenite ime, izaberite Commands > Edit Command List. Kako se konfigurišu zapisane komande Kao i drugi elementi interfejsa Dreamweavera, i zapisane komande se nalaze u fascikli Configuration. Konkretno, one se nalaze u fascikli Configuration, za odredenog korisnika, odnosno u fascikli Configuration/Commands. Svaka zapisana komanda postoji u obliku HTML datoteke, pri čemu je ime datoteke jednako sa imenom komande, uz dodatu ekstenziju.htm. Ako želite da zavirite ispod poklopca i da podešavate ove komande, u bilo kom tekstu možete da otvorite ove komande i da petljate sa njima. Ovo bi naravno moglo da destabilizuje Dreamweaver, ako ne uradite sve kako treba. Ako se desi tako nešto, otvorite fasciklu Configuration/Commands i obrišite datoteku koja se odnosi na komandu koja pravi probleme. Prilagođavanje okvira za dijalog preko HTML-a Većina objekata, komandi i ponašanja koja rade sa okvirima za dijalog, svoje informacije vezane za raspored čuvaju u HTML datotekama, koje se nalaze u fascikli Configuration. Ulazna polja, polja za potvrdu, padajući meniji i sl. se kreiraju na osnovu standardnih elemenata HTML formi i formatiraju se preko tabela ili nivoa. Premda bez narušavanja funkcionalnosti ne možete da brišete ili dodajete ulazna polja, možete da menjate okvir za dijalog, tako što ćete menjati HTML raspored. Čudno, ali za ovo možete da koristite Dreamweaver, premda pre nego što promene budu imale efekta, morate da restartujete program. Recimo da, na primer, želite da prilagodite okvir za dijalog Call JavaScript. Pošto je ovo ponašanje, treba ga potražiti u fascikli Configuration/Behaviors/Actions. U ovoj fascikli postoji datoteka Call JavaScript.js i Call JavaScript.htm. JS datoteka sadrži funkcionalnosti za ovo ponašanje, a HTML sadrži raspored ovog okvira za dijalog. Ako u Dreamweaveru otvorite HTML datoteku, videćete raspored okvira za dijalog kao formu i tabelu. Sve promene koje napravite u rasporedu se prikazuju u okviru za dijalog. Nemojte menjati ime forme ili njenih elemenata, ili dodavati ili izbacivati elemente forme, jer bi u tom slučaju mogli da uništite ponašanje. 281 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Prialgođavanje menija Dreamweavera preko datoteke menus.xml Svaka komanda koja se pojavljuje u sistemu menija Dreamweavera, uključujući menije aplikacije, kontekstne menije i sve drugo, je definisana preko datoteke za konfiguraciju menus.xml. Ova datoteka odreduje koji će se meniji pojaviti na liniji menija, koja se komanda u kom meniju pojavljuje, kao i koju akciju Dreamweaver treba da izvrši kada se komanda izabere. (Akcija je obično da se otvori i izvrši datoteka za konfiguraciju, kao što je Objects/Common/Table.htm.) Datoteka Menus.xml se nalazi u fascikli Configuration/Menus. Kao i datoteka Insertbar.xml ovo je validan XML dokument. Korenski element je par oznaka <menubar>, u okviru kojeg su ugnježđeni različiti drugi elementi (oznake i parovi oznaka). Struktura osnovnog elementa je: <menubar> <menu> <menuitem/> <menuitem/> </menu> more menus </menubar> Svaka oznaka ima skup atributa koji rukuju time kako se meni i komanda prikazuju i šta se dešava kada se komanda izabere. Iako bez pisanja skripta ne možete da dodate potpuno novu stavku menija, preko XML-a možete da podesite svoj sistem menija. Možete da prebacujete stavke u meniju, da dodajete separatore, pa čak i da ih kopirate tako da se prikazuju na više mesta, na primer, jednom u meniju i drugi put u kontekstnom meniju. Prilikom dupliciranja stavki iz menija, obratite pažnju na to da svaka stavka iz datoteke menus.xml ima atrribut id koji mora biti jedinstven. Ako duplicirate neku stavku, morate da promenite id oznaku duplikata, tako da se razlikuje od originalne stavke. Proširenja koja dolaze od nezavisnih proizvođača Ako želite da prilagođavate Dreamweaver radi proširenja njegovih funkcija, onda ste spremni za nova proširenja. Ako želite da koristite dokazane veštine drugih u programiranju, Tako da ne morate da sami kreirate proširenje, spremni ste za Macromedia Exchange for Dreamweaver i Extension Manager. Pronalaženje proširenja: Macromedia Exchange Macromedia Exchange for Dreamweaver je veliko skladište proširenja koja je prikupila firma Macromedia. Predstavljeno je na Webu i svi mogu da ga koriste. Premda je neka od ovih proširenja napisala sama firma Macromedia, veliki deo su pisali nezavisni programeri, koji su proširenja pravili sami za sebe, a onda se složili da to podele sa zajednicom Dreamweavera. Ova proširenja se pakuju u opštem formatu (MXP) i postavljaju na Exchange, tako da svako može da ih koristi. Većina njih je besplatno, ali se neka i naplaćuju, ali relativno malo. Programu Macromedia Exchange for Dreamweaver možete pristupiti ako u pretraživaču unesete adresu www.macromedia.com/exchange/dreamweaver. Postoji na stotine različitih proširenja. Ona dodaju različite funkcije, od pretraživanja sajta, pa do instalacije kodova zemalja ili dodavanja dugmeta za nove Flash stilove. Sva proširenja su testirana u Macromediji da bi se osiguralo da su instalirana kako treba i da rade na pravi način. Ona koja imaju odobrenje Macromedije su rigoroznije testirana i ona prate pravila definisana za UI u Macromediji, tako da se vrlo lepo uklapaju u interfejs Dreamweavera. Proširenja možete da pretražujete po kategorijama, ili po naslovu i autoru. Ako želite da preuzmete neko proširenje, morate da se prijavite pod besplatnim nalogom Macromedia Exchangea. Exchangeu možete da pristupite i ako u Dreamweaveru izaberete Help > Dreamweaver Exchange ili neku od komandi Get More, kao što je Insert > Get More Objects, Commands > Get More Commands, ili komandu Get More Behaviors, koja se nalazi na dnu panoa Behaviors, u padajućem meniju Actions. Ako izaberete neku od ovih komandi, pokrenuće se pretraživač i odvesti Vas na naslovnu stranu programa Exchange. 282 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 21. Prilog Primer izrade dinamičkog sajta U ovom odeljku opisaćemo postupak izrade jednostavnog dinamičkog sajta – elektronske prodavnice. Struktura sajta Sajt se sastoji iz četiri celine. Prvi deo, početna strana, sadrži navigacioni meni i vesti koje se učitavaju iz baze. Drugi deo predstavlja katalog proizvoda koji su u ponudi i takođe se učitava iz baze. Treći deo su stranice koje se odnose na opis poslovanja e-prodavnice i nisu od velikog značaja u ovom odeljku. Četvrti deo predstavlja deo za administraciju vesti, proizvoda i korisnika, koji je dostupan samo administratoru. Priprema Pre samog kreiranja sajta, potrebno je da se obezbedi odgovarajući web server, kao i baza podataka. U našem primeru koristili smo Apache web server i MySQL sistem za upravljanje bazama podataka. Postupak instaliranja navedenih komponenti se značajno ubrzava korišćenjem EasyPHP softverskog paketa, koji možete preuzeti sa adrese: http://www.easyphp.org/?lang=en Baza podataka Baza se sastoji od sledećih tabela: Proizvod (IDproizvoda, Tip, Naziv, Opis, Cena, Slika) Vesti (IDvesti, Naslov, Datum, Telo, PrikazatiYN) Korisnik (IDkorisnika, Ime, Prezime, Adresa, Email, Username, Password, AccessLevel) 283 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Da biste kreirali MySQL bazu, u browseru idite na http://localhost/mysql/ U odeljku ’Create new database’ upišite ’eprodavnica’ i kliknite na dugme ’Create’. Nakon toga treba dodati tri tabele u bazu. To se radi tako što se u odeljku ’Create new table on database eprodavnica’ unesu nazivi tabela i broj njihovih polja. 284 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Da biste ubacili vrednosti u odgovarajuću tabelu, kliknite na ikonicu ’Browse’ a zatim na ’Insert new row’ i unesite potrebne podatke. Da ne biste svaki put prolazili kroz ovaj postupak, jednom kreiranu i popunjenu bazu možete da eksportujete tako što ćete u gornjem meniju izabrati ’Export’ i podesiti odgovarajuće opcije. Dobijate tekstualni fajl, koji kasnije, pri kreiranju nove baze, možete da importujete klikom na stavku ’SQL’ u gornjem meniju i izvršavanjem SQL upita. Definisanje sajta Nakon pripreme, prvi korak je definisanje sajta u Dreamweaveru, tj. kreiranje zajedničkog foldera za sve fajlove koji će se koristiti, biranje serverske tehnologije (u našem primeru to je PHP), definisanje servera za testiranje i udaljenog servera. 1. 2. 3. 4. 5. 6. 7. 8. Iz menija Site izaberite opciju Manage Sites, pa opciju New i na kraju opciju Site. Dodelite naziv svom sajtu. Kliknite next. Izaberite da želite da koristite serversku tehnologiju, i to PHP MySQL. Kliknite next. Izaberite prvu opciju ‘Edit and test locally’ i izaberite folder, npr. C:\Program Files\EasyPHP1-8\www\EProdavnica\ . Kliknite next. Za URL testing servera unesite http://localhost/EProdavnica/ . Kliknite next. Izaberite da želite da koristite udaljeni server. Kliknite next. Pošto ćemo sajt da testiramo na lokalnoj mašini, a kasnije da uploadujemo na Internet, izabraćemo opciju Local/Network. Za lokaciju unesite istu kao u koraku 4. Kliknite next. Izaberite da ne želite check in/out. Kliknite next, pa Done. 285 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 286 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 287 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 288 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 289 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Povezivanje sa bazom Kada kreirate novi fajl index.php, otvorite pano Applications / Databases Kliknite na plus ( + ) pa na MySQL Connection, da biste kreirali konekciju ka bazi. Popunite sve potrebne podatke i kliknite na Select da biste odabrali bazu. Kliknite OK. Nakon toga, u panou Databases možete da vidite tabele u bazi. 290 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Login forma Kada na index.php stavite sve potrebne elemente, tabele, menije i kada primenite svoj CSS stil, potrebno je da dodate formu koja će da sadrži dva Text Field-a za Username i Password, kao i jedno Submit dugme. Text Field-ovima dodelite nazive preko panoa Properties, da biste se kasnije lakše snalazili. Na panou Application / Server Behaviors kliknite na plus ( + ), zatim na User Authentication i na kraju na Log In User. Popunite polja kako je prikazano na sledećoj slici: 291 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Učitavanje teksta iz baze Ako želite da se na strani prikazuju vesti, ili bilo koji drugi elementi iz baze, potrebno je da prvo definišete Recordset. Na panou Server Behaviors kliknite na plus ( + ) pa na Recordset. Popunite polja kako je to prikazano na sledećoj slici: 292 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Sada pređite na pano Application / Bindings i videćete da se tu pojavio Recordset koji ste malopre definisali, sa svojim komponentama. Jednostavno prevucite mišem određene komponente u ćelije tabele koja će da prikazuje vesti. Da biste videli sve vesti iz baze, a ne samo prvu, potrebno je da izaberete red tabele u koji ste ubacili dinamičke elemente, i da na panou Server Behaviors kliknete na plus ( + ) pa na Repeat Region. Izaberite da se prikazuju svi rekordi iz baze: 293 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Nakon toga, oblast na koju ste primenili ovaj Server Behavior (u našem slučaju – red tabele) se ograničava i dobija mali tab na kome piše Repeat. Učitavanje slika iz baze Kada definišete Recordset (u ovom slučaju to je rs_proizvod jer ćemo u katalogu prikazati i slike proizvoda), postupak za ubacivanje dinamičkih slika je sledeći. Na meniju Insert izaberite Image, i u sekciji ’Select file name from:’ izaberite ’Data sources’, umesto ’File System’ koji je označen po defaultu. U Recordsetu izaberite Sliku i kliknite na OK. Posle ovih operacija, na poziciji u tabeli koju ste rezervisali za slike, trebalo bi da vidite oznaku za dinamičku sliku: Ograničavanje pristupa Ako želite da vaš katalog gledaju samo ulogovani korisnici, možete da iskoristite Server Behavior – Restrict 294 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Access to Page. Popunite polja na sledeći način: Brojevi 0 i 1 koji su selektovani (plava boja) označavaju da strani mogu da pristupe korisnici koji imaju access level 0 i 1, a to su upravo vrednosti koje u bazi označavaju običnog korisnika (0) i administratora (1). Ostali, neulogovani posetioci će imati vrednost NULL tako da im neće biti omogućen pristup i biće redirektovani na stranu denied.php. Slično se radi i sa logovanjem administratora. Pravo pristupa strani ima samo korisnik sa vrednošću access level-a 1, i on može da učita stranu administracija.php, dok se ostali korisnici redirektuju na stranu koja prikazuje grešku o neautorizovanom pristupu. Rad sa podacima u bazi (Insert, Update, Delete) Pre nego što počnete da radite sa ubacivanjem novih, izmenom ili brisanjem postojećih elemenata iz baze, morate da kreirate odgovarajući Recordset, kako je to ranije opisano. Zatim treba da kreirate formu u koju ćete da stavite sve potrebne komponente (Text Field, Checkbox, Dugme...). Poželjno je da tim komponentama preko panoa Properties dodelite nazive, kako biste se kasnije lakše snalazili. Nakon toga na panou Server Behaviors kliknite na plus ( + ) pa na Insert Record. Popunite potrebne podatke kako je to prikazano na sledećoj slici: 295 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 Obratite pažnju na to da li ste izabrali odgovarajuću konekciju ka bazi i odgovarajuću tabelu iz baze. U našem slučaju radimo sa operacijama Insert, Update i Delete nad tabelom Vesti, tako da je ta tabela i izabrana. Posle toga, za svaki red u odeljku Columns, iz combobox-a Value treba da odaberete naziv odgovarajuće komponente na formi, kako je prikazano na sledećoj slici: U ovom primeru, vrednost ’tb_vesti_ins2’ je naziv Text Field-a u koji se unosi naslov vesti, i klikom na dugme Ubaci, upisana vrednost će se upisati u bazu, u tabelu Vesti, polje Naziv. Promena vrednosti u bazi je nešto komplikovanija. Ustvari, ono što dodatno treba da uradite jeste da kreirate 296 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 dinamičke Text Field-ove. Pošto ste kreirali novu formu i na nju stavili sve potrebne komponente, sada označite Text Field, u koji će da se upisuju vrednosti iz baze, a koji želite da pretvorite u dinamički. U panou Properties, u delu ’Init val’ kliknite na ikonicu munje. Otvoriće se prozor u kome ćete da izaberete odgovarajući element Recordset-a. Postupak ponovite za sve dinamičke komponente. Sada na panou Server Behaviors kliknite plus ( + ) pa Update Record, i ponovite proceduru za ubacivanje novog rekorda u tabelu u bazi. Isti postupak primenjujete za izbacivanje rekorda iz baze, samo što umesto Update Record, na panou Server Behaviors izaberete Delete Record. Na kraju bi pano Server Behaviors trebalo da izgleda slično kao na ovoj slici: 297 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 CSS stilovi Navešćemo i ukratko objasniti par CSS stilova koje smo koristili u ovom primeru. Oznaka a:link znači da će formatiranje da se primeni na sve linkove (tag <a>), dok se a:hover primenjuje na linkove iznad kojih se postavi kursor miša. Vidimo da će tada boja slova preći iz tamno crvene (#990000) u belu (#FFFFFF), pozadina će postati tamno crvena i tekst će biti podvučen. U oba slučaja margine i razmak od ivice će biti po 2 piksela. Klasa .okvir_tabledata doprinosi tome da se svakom tagu na koji se primeni, granica postavi na 1 pixel, boja promeni u plavo-ljubičastu i razmak od ivice bude 5 piksela. U našem primeru, ovaj CSS stil smo selektivno primenjivali na <td> tagove. Tag h3 se primenjuje na naslove (heading), koji su treći po značaju, iza h1 i h2. Font u njima je nešto veći i boldovan za razliku od ostatka teksta. Ovo je stil koji je primenjen na desnu kolonu u glavnoj tabeli. Mala slika – gradijent, je ’prilepljena’ uz levu ivicu te kolone, a ponavlja se po y-osi (vertikalno). 298 / 299 Fakultet organizacionih nauka Dreamweaver MX 2004 I za kraj, pogledajte kako izgleda sajt sa CSS stilovima, koji se nalaze u jednom jedinom fajlu koji veoma lako možete da menjate, i kako bi taj isti sajt izgledao bez CSS stilova: 299 / 299
