upoznavanje sa dreamweaverom cs5 - mikro …184 dreamweaver • lekcija 1: upoznavanje sa...

Šta ćete naučiti u ovoj lekciji:

Dreamweaverove osnovne •funkcije

Nove funkcije verzije CS5•Kako funkcionišu veb •lokacije i veb strane

Osnove jezika HTML/•XHTML

Upoznavanje sa Dreamweaverom CS5

Bilo da tek počinjete da se bavite veb dizajnom ili ste iskusan projektant, Dreamweaver je sveobuhvatna alatka pomoću koje možete dizajnirati veb lokacije, raspoređivati elemente na njima i održavati ih. U ovoj lekciji upoznaćete se s Dreamweaverovim najvažnijim funkcijama i principom rada veb strana.

Početak radaPre nego što počnete, vratite alatke i panoe u podrazumevano stanje da biste lakše pratili lekcije iz knjige. Pročitajte odeljak „Vraćanje podrazumevanog radnog prostora u Dreamweaveru“ na strani XXVIII.

U ovoj lekciji ćete raditi s nekoliko datoteka iz direktorijuma dw01lessons. S pra-tećeg DVD-a kopirajte direktorijum CS5lessons na disk računara. Pogledajte odeljak „Učitavanje datoteka za rad“ na strani XXX.

Napomena: Ako prvo hoćete da napravite veb stranu, pređite na odeljak „Struktu-ra i atributi HTML oznaka“ na strani 189. U suprotnom, na sledećih nekoliko strana upoznaćete se s glavnim mogućnostima i funkcijama Dreamweavera CS5.

Lekcija 1 na delu

Pogledajte video-snimak s pratećeg DVD-a (na engleskom jeziku) da biste bolje razumeli kako se koriste neke mogućnosti opisane u ovoj lekciji.

1

Lekcija 1

180 Dreamweaver • Lekcija 1: Upoznavanje sa Dreamweaverom CS5

Šta je Dreamweaver?Dreamweaver je izvrstan program za pisanje koda i projektovanje veb lokacija name-njen kako novim, tako i iskusnim korisnicima. Zahvaljujući svom kreativnom okruže-nju, brzo je postao popularna alatka za izradu i održavanje veb lokacija. Bez obrzira na to da li ste veb dizajner, projektant sadržaja za mobilne telefone ili programer složenih aplikacija na strani servera, Dreamweaver će vam svakako biti od koristi.

Alatke za dizajn i raspoređivanje elemenata na straniDreamweaverovi brojni meniji sa ikonicama i panoi s mnoštvom detalja olakšavaju umetanje i formatiranje teksta, slika i multimedijalnog sadržaja (kao što su video-za-pisi i Flash filmovi).To znači da možete napraviti dopadljive i funkcionalne veb strane a da pritom ne morate napisati nijedan red koda – Dreamweaver se umesto vas brine o pisanju koda iza scene. U Dreamweaveru slike ne morati praviti od početka; budući da je potpuno kompatibilan sa Adobe Photoshopom CS5, slike možete uvoziti iz tog programa i obrađivati ih u njemu.

Pano Insert sadrži nekoliko kategorija objekata zahvaljujući kojima se na veb strane lako postavljaju slike, veb obrasci i multimedijalni sadržaji.

Upravljanje lokacijom i protokol za prenos datoteka Dreamweaver ima sve što vam je potrebno za potpuno upravljanje lokacijom, uključu-jući ugrađen protokol za prenos datoteka (engl. file transfer protocol, FTP) između servera i vašeg lokalnog računara, elemente koji se često koriste (kao što su šabloni za veb strane i stavke iz biblioteke) i nekoliko bezbednosnih mehanizama (recimo, funkcije za proveru ispravnosti veza i pravljenje izveštaja o lokaciji) kako biste bili sigurni da vaša lokacija funkcioniše i izgleda dobro. Ukoliko dizajnirate strane pomoću kaskadnih opisa stilova (engl. Cascading Style Sheets, CSS), funkcije Browser Compatibility Check i CSS Advisor pomoći će vam da pronađete i otklonite potencijalne greške u prikazu koje se mogu javiti u različitim veb čitačima.

Prikaz koda i editor tekstaDreamweaver vam omogućava da radite u prikazu koda dokumenta, koji je istovreme-no i funkcionalan editor teksta. Uređujte HTML kÔd direktno i prebacujte se iz jednog prikaza u drugi da biste odmah videli kako promene u kodu utiču na izgled strane.

Šta je Dreamweaver? 181

Zahvaljujući funkcijama kao što su prikaz elemenata koda u različitim bojama, uvlače-nje redova koda i vizuelna pomagala, Dreamweaver je idealno okruženje za uređivanje teksta i koda za veb dizajnere svih nivoa stručnosti.

Iskusnijim projektantima lokacija biće od koristi činjenica da Dreamweaver podrža-va i popularne programske jezike te jezike za skriptovanje, kao što je JavaScript, i ne-koliko jezika za programiranje na strani servera, uključujući ColdFusion, PHP i ASP.NET. Specializovani meniji panoa Insert i panoi s kodom pomažu vam da napravite strane i aplikacije na izabranom jeziku.

Prikaz Code je potpuno funkcionalan editor teksta u kome su oznake i skriptovi prikazani različitim bojama radi lakšeg prepoznavanja i uređivanja.

Jezici za skriptovanje, poput onih koji se koriste za izradu interaktivnih veb strana ili komercijalnih veb lokacija, dele se na dve kategorije: klijentske i serverske. Klijentski jezici (npr. JavaScript) izvršavaju se u vašem veb čitaču, dok je za izvršavanje server-skih jezika (npr. ColdFusion, PHP) neophodno instalirati poseban softver na serveru.

Ko koristi Dreamweaver?Dreamweaverova popularnost proističe iz raznovrsnosti njegove namene. Zahvaljujući mogućnosti realizacije svih faza izrade veb lokacije – od samog koncepta do puštanja u rad – kao i mogućnosti njenog kasnijeg održavanja – Dreamweaver je omiljena alatka profesionalaca, dizajnera iz raznih komercijalnih firmi i obrazovnih ustanova. Među-tim, pristupačan je i dizajnerima bez iskustva koji vrlo brzo savladaju njegove osnove. Često ga za lične projekte koriste i pojedinci, te mala preduzeća i profesionalci iz obla-sti medija, kao što su fotografi i slikari, za sopstvene veb prezentacije.


Pregled funkcijaU ovoj knjizi su obrađene brojne Dreamweaverove mogućnosti i njihova pratična pri-mena, a počećemo sa opisom njegovih glavnih komponenata i osobina.

Tri različita prikaza Dok uređujete dokument, Dreamweaver vam omogućava da svoj rad gledate u jednom od tri prikaza: Design, Split ili Code. U jednostavnom prikazu Design, možete vizuelno graditi lokaciju i gledati rezultate svog rada tokom samog procesa izrade strana. Iskusniji veb dizajneri i oni koji poznaju HTML mogu uređivati kôd i skriptove dokumenta direktno u prikazu Code. Oznake i skriptovi su lako prepoznatljivi jer su prikazani različitim bojama, a na raspolaganju su i ostala vizu-elna pomagala.

Onima koji vole nešto između, na raspolaganju je prikaz Split u kome se istovre-meno vide i okno sa HTML kodom i prikaz Design. Iz jednog prikaza u drugi lako se možete prebacivati pritiskom na odgovarajuće dugme na paleti Document.

Prikaz Split omogućava da istovremeno vizuelno uređujete stranu i gledate generisanje koda iza scene.

Ugrađeni FTP Datoteke možete lako slati na veb server i preuzimati ih s njega zahvaljujući okruženju panoa Files koje radi na principu „prevuci i pusti“. Uvek vam je na raspolaganju i dugme Get/Put pomoću koga šaljete strane na kojima trenutno radite. Nema potrebe da koristite poseban softver. Dreamweaver takođe ima funkciju za prijavljivanje i odjavljivanje datoteka s lokacije (Check In/Check Out) te za sinhro-nizovanje datoteka radi lakšeg upravljanja lokacijom.

Pregled funkcija 183

Pano Insert za umetanje elemenata strane i koda Pano Insert sadrži intuitivne ikonice raspoređene u kategorije pomoću kojih se jednim pritiskom veb strane mišem umeću najčešće korišćeni elementi. Svaki element strane možete fino podešavati preko dodatnih panoa kako biste postigli baš ono što ste hteli. Na panou Insert podrazumevano se nalaze alatke za formatiranje teksta, izradu obrazaca i raspoređivanje elemenata na stra-ni. Prilagodite pano Favorites tako što ćete na njega staviti najčešće korišćene ikonice.

Pano Insert je podeljen na nekoliko kategorija u kojima su grupisane ikonice za obavljanje specifičnih poslova.

Prilagodljivo radno okruženje Možete sačuvati kombinacije i pozicije panoa i paleta alatki da biste ih lakše prikazali kad vam kasnije zatrebaju. Snimite nekoliko rad-nih okruženja za različite korisnike ili napravite različita radna okruženja za posebne poslove, kao što je umetanje koda ili raspoređivanje elemenata na strani.

Na pano Favorites stavite ikonice iz bilo koje druge kategorije panoa Insert.

Moćna vizuelna pomagala Preciznost na koju ste navikli u drugim programima za veb dizajn postići ćete pomoću Dreamweaverovih vođica, lenjira, alatki za merenje i podesive mreže za pozicioniranje elemenata strane. Dreamweaverovi opisi stilova Design-Time omogućavaju da prilagodite izgled strana samo za potrebe uređivanja lokacije, zahvaljujući čemu ćete brže i lakše rasporediti elemente na strani a da pritom ne morate trajno izmeniti njen izgled.


Lenjiri, mreža i vođice pomažu vam da precizno menjate veličinu elemenata na strani i pozicionirate ih.

Pano CSS Styles Iskoristite brojne opcije za dizajn i formatiranje pomoću kaskad-nih opisa stilova na Dreamweaverovom potpuno funkcionalnom panou CSS Styles. Sti-love možete praviti i menjati, te upravljati njima u hodu, i sve to samo s jednog panoa.

Prikaz LiveIz iskustva znate da programi za vizuelni veb dizajn često ne prikazuju strane isto kao čitači veba koje simuliraju. Budući da interaktivnost zasnovana na skriptovima postaje sve popularnija, potreba za preciznim dizajniranjem različitih stanja neke veb strane (uključujući menije, panoe i elemente okruženja) sve je izraženija. Statička priroda prikaza Design u Dreamweaveru možda više ne zadovoljava zahtevnije korisnike.

U režimu rada Live View, Dreamweaver koristi mašinu za vizuelizovanje WebKit (koja je i osnova za veb čitač Safari i Adobe AIR) kako biste dobili precizniji izgled strane, najčešće isti kao i u veb čitaču.

Kada izaberete Live Code dok radite u režimu Live View, u realnom vremenu mo-žete videti kako se vizuelne promene na strani odražavaju na kôd iza scene. Kôd može-te pregledati i dok dodajete i uklanjate klase pomoću JavaScripta, umećete dinamički sadržaj pomoću Spry objekata i na mnoge druge načine.

Povezane datoteke 185

Prikaz Live View omogućava interakciju s veb stranama.

Ipak, jedno je posmatrati te promene a nešto sasvim drugo efikasno raditi u takvom okruženju. Dugme Freeze JavaScript (ili taster F6) zamrzava vašu stranu u određenom stanju (recimo, sa zaključanim otvorenim menijem i aktivnim efektom prelaza). Tada te interaktivno prikazane elemente možete menjati direktno u Dreamweaveru a da pritom ne morate koristiti funkciju Preview in Browser (F12) i svoj omiljeni čitač veba.

Povezane datotekeProjekti na vebu svakim danom postaju sve složeniji te se često jedna strana sastoji od raznih elemenata. U njih se ubrajaju kaskadni opisi stilova (CSS), spoljašnje JavaScript datoteke pa čak i serverski umeci. Dreamweaver CS5 sadrži funkciju koja omogućava mnogo efikasnije dizajniranje i održavanje lokacija i aplikacija s raznovrsnim elementima.

Traka Related Files nalazi se na vrhu prozora dokumenta, odmah ispod naslovne trake. Traka prikazuje sve datoteke sadržane na gotovoj veb strani. Možete se prebaci-vati iz jedne datoteke u drugu preko trake Related Files a da pritom ne izgubite vizuel-ni prikaz njihove roditeljske strane. U prikazu Design (odnosno prikazu Live) uvek se vidi roditeljska datoteka, ali sada možete i menjati povezane datoteke uz istovremeni prikaz njihovog važnog vizuelnog konteksta.

Traka Related Files prikazuje razne datoteke koje su deo gotove veb strane.


Navigator kodaPomoću navigatora koda lako možete preći na bilo koju povezanu datoteku (uključu-jući i konkretna CSS pravila unutar datoteke) sadržanu u konačnom prikazu izabranog elementa. Ne morate pregledati brojne opise stilova da biste pronašli konkretno pra-vilo. Dovoljno je da u Dreamweaveru pritisnete određenu stavku kontekstnog meni-ja. Kada zadržite pokazivač miša iznad nekog CSS pravila, pomoću navigatora koda možete videti zadata svojstva i vrednosti tog pravila, a kada ih pritisnete prelazite na traženi kôd. Kao i prilikom rada s povezanim datotekama, na ekranu je uvek prikazan vizuelni kontekst koji je veoma važan za izradu interaktivnih sadržaja.

Navigator koda omogućava lako prebacivanje na određenu povezanu datoteku.

Photoshopovi pametni objektiDreamweaver CS5 podržava Photoshopove pametne objekte, što znači da možete prevući PSD datoteku na veb stranu u Dreamweaveru, optimizovati sliku za veb i čak joj promeniti veličinu. Ukoliko kasnije ažurirate originalnu PSD datoteku, na toj slici u Dreamweaveru prikazuje se crvena strelica što ukazuje na to da je izvorna datoteka promenjena. Tada treba pritisnuti dugme Update from Original na panou Properties (Property Inspector) i dobićete novu verziju slike.

Pametni objekti olakšavaju optimizovanje i ažuriranje slika.

Kako funkcionišu veb lokacije 187

Kako funkcionišu veb lokacijePre nego što pređete na izradu veb strana (i, naravno, veb lokacija), poželjno je da stekne-te znanje o osnovama rada veb lokacija, načinu na koji ih posetioci pregledaju i o tome kako da postignete da vaša veb lokacija što bolje izgleda i neometano funkcioniše.

Jednostavna šema radaŠta se dešava kada upišete adresu veb lokacije? Većina ljudi i ne razmišlja o tome; samo unesu URL adresu i veb lokacija se prikaže na ekranu za tren oka. Oni verovatno nisu ni svesni šta se sve događa iza scene kako bi se tražena strana prikazala na njihovom računaru. Nakon toga oni mogu da kupuju preko veba, provere e-poštu ili da se bave istraživačkim radom.

http://www.vasa_lokacija.com/Korisnikov računar (klijent) Web server

Kada upišete URL ili IP adresu, povezujete se sa udaljenim računarom (koji se zove server) i preuzimate dokumente, slike i resurse koji su neophodni za prikaz strana koje ćete gledati na toj lokaciji. Veb strane se ne isporučuju korisnicima u gotovom obliku; veb čitač (Internet Explorer, Firefox, Safari itd.) zadužen je za prikazivanje i forma-tiranje strana na osnovu HTML koda sadržanog u tim stranama. HTML (Hypertext Markup Language – jezik za označavanje hiperteksta) jednostavan je jezik zasnovan na oznakama koji vašem veb čitaču daje uputstva kako i gde da umetne i formatira slike, tekst i multimedijalne datoteke. Veb strane se sastoje od HTML koda koji Dreamwea-ver generiše umesto vas iza scene dok vi pravite veb stranu u prikazu Design.

Davalac internet usluga (engl. Internet Service Provider, ISP) omogućava da se poveže-te na internet. U Americi, među najpoznatije spadaju America Online i Earthlink, dok su kod nas to EUnet, YUBC, SezamPro itd. Preko internet veze, veb strane pregledate u veb čitaču, kao što je Internet Explorer, Firefox ili Safari. Veb čitač dešifruje i prika-zuje veb strane i njihov sadržaj, uključujući slike, tekst i video-zapise.

Imena domena i IP adresePrilikom unošenja adrese veb lokacije, obično upisujete ime domena te lokacije (reci-mo, eBay.com). Vlasnik veb lokacije kupio je to ime domena i koristi ga za maskiranje numeričke IP adrese pomoću koje se pronalaze i pozivaju strane i datoteke povezane s konkretnom veb lokacijom.

Kako to veb zna koji domeni odgovaraju kojim IP adresama (i, shodno tome, kojim veb lokacijama)? U tome mu pomaže server imena domena, tj. DNS server (engl. Do-main Name Service server), koji povezuje imena domena i IP adrese.


Serveri i kompanije za veb hostingDNS server je zadužen za uparivanje imena domena sa odgovarajućom IP adresom. Zamislite DNS server kao operatera u telefonskoj kompaniji koji povezuje pozive preko ogromne centrale. DNS servere obično održava kompanija za veb hosting ili registraciono telo od koga je kupljen domen. Nakon uparivanja, korisnikov zahtev se usmerava do odgovarajućeg servera i direktorijuma gde je veb lokacija smeštena. Kada zahtev stigne do ispravnog naloga, server ga usmerava na prvu stranu veb lokacije koja se najčešće zove index.html, default.html ili ima neko drugo ime koju server prepozna-je kao podrazumevanu početnu stranu.

Server je mašina veoma slična stonom računaru, sposobna da preuzima saobraćaj od hiljada korisnika (i to često u isto vreme!) i održava stalnu vezu sa internetom kako bi vaša veb lokacija bila dostupna 24 časa dnevno. Servere obično održavaju kompanije za veb hosting koje naplaćuju uslugu ugošćavanja veb lokacija i prikazivanja vaše veb lokacije posetiocima. Na jednom serveru može biti smešteno i na stotine veb lokacija. Postoje brojni davaoci usluga veb hostinga, uključujući poznate kompanije koje pru-žaju internet usluge (npr. Yahoo!) i velike kompanije specijalizovane za hosting, kao što je GoDaddy. Uobičajeno je i da velike kompanije održavaju sopstvene servere i veb lokacije u svojim prostorijama.

Uloga veb čitačaVeb čitač je aplikacija koja preuzima i prikazuje HTML strane. Kad god pošaljete zah-tev za neku stranu tako što pritisnete hipervezu ili upišete adresu veb lokacije, vi tražite HTML stranu i sve datoteke sadržane u njoj. Čitač je dužan da sklopi i prikaže tu stranu prema uputstvima iz HTML koda kojim se raspoređuju elementi na veb strani i formatiraju tekst, slike i drugi elementi. HTML kôd funkcioniše kao skup instrukcija koje čitač izvršava.

Uvod u HTMLVeb funkcioniše zahvaljujući HTML-u; veb strane se prave pomoću HTML koda koji vaš veb čitač koristi za raspoređivanje elemenata na strani i formatiranje teksta, slika i video-zapisa. Dok dizajnirate strane i raspoređujete elemente na njima u prikazu De-sign, Dreamweaver iza scene piše kôd koji je neophodan za prikazivanje i formatiranje strane u veb čitaču.

Iako je to suprotno onome što ste možda pomislili, HTML nije programski jezik već jednostavan jezik za označavanje teksta. HTML se ne vezuje samo za Dreamweaver – HTML kôd možete pisati i uređivati u bilo kom programu za obradu teksta, čak i u jed-nostavnim aplikacijama kao što su Notepad u Windowsu i TextEdit u verziji X operativ-nog sistema na Macu. Dreamweaver je zadužen da vam omogući vizuelno dizajniranje veb strana a da pritom ne morate ručno pisati kôd. Međutim, ako volite da radite s ko-dom, Dreamweaverov prikaz Code, o kome je ranije bilo reči, potpuno je funkcionalan editor teksta sa alatkama za formatiranje i prikazom elemenata koda u različitim bojama, zahvaljujući čemu je umnogome olakšano pisanje i čitanje HTML-a i ostalih jezika.

Uvod u HTML 189

Struktura i atributi HTML oznakaHTML koristi oznake, to jest rezervisane, službene reči u ugaonim zagradama (<>), po-moću kojih se postavlja ili formatira sadržaj. Za mnoge od njih neophodna je i završna oznaka – rezervisana reč ispred koje se nalazi kosa crta (/).

1 Izaberite File > Open. Kada se otvori okvir za dijalog Open, pređite na direktori-jum dw01lessons. Izaberite BasicHTML.html i pritisnite Open.

2 Na paleti Document pritisnite dugme Split da biste prikazali i raspored elemenata na strani i njen kôd.

Pogledajte red 10 (označen na levoj ivici panoa Code). Tekst My Bold Title nalazi se unutar oznake Strong, koju jednostavno predstavlja reč strong u ugaonim zagrada-ma. Sve reči odnosno znakovi unutar tih oznaka biće podebljani i izgledaće kao u prikazu Design.

U prikazu koda vide se oznake kojima se formatira tekst na strani.

Na oznake se mogu primeniti i CSS pravila kojima se dodatno zadaje kako oznaka treba da prikaže sadržaj. CSS pravilima se mogu definisati različiti parametri, kao što su veličina, boja ili način poravnavanja teksta. Pogledajte red koji glasi This text will appear inside of its own paragraph. Taj red se nalazi unutar oznake p (engl. paragraph – pasus) koja ga odvaja od ostalog teksta sa po jednim redom iznad i ispod njega. Tome možete dodati i pravilo klase za poravnavanje teksta na odgovarajući način.

3 Istaknite ceo red koji glasi This text will appear inside of its own paragraph na dnu pri-kaza Design.

4 Pritisnite dugme CSS na panou Properties i pronađite dugmad za poravnavanje teksta. Pritisnite dugme Align Center ( ).

5 U okviru za dijalog CSS Rule, upišite .center u polje za tekst Selector Name i pritisnite OK.

Imenujte novoformirani stil u okviru za dijalog New CSS Rule.

6 Tekst je sada centriran. Kada pogledate stranu u prikazu Code, videćete da je pra-vilo .center dodato uz početnu oznaku .

Poravnajte ili formatirajte tekst na panou Properties, a zatim pregledajte odgovarajuća pravila i svojstva koja su generisana u kodu.

Uvod u HTML 191

Više informacija o formatiranju teksta pomoću CSS pravila potražite u lekciji 3, „Dodavanje teksta i slika“.

7 Izaberite File > Save da biste snimili svoj rad, a zatim izaberite File > Close.

Struktura HTML dokumentaIako se za formatiranje teksta koristi veliki broj HTML oznaka, određene oznake služe za definisanje strukture teksta, kao što su liste i tabele, kao i za definisanje samog HTML dokumenta, što je i najvažnije. HTML oznaka je osnovna oznaka. Njome se definiše početak i kraj HTML koda u dokumentu:

<html></html>

Unutar glavnih HTML oznaka nalaze se dve oznake kojima se definišu ključna mesta na veb strani: zaglavlje i telo strane. Zaglavlje sadrži stavke koje posetilac strane ne vidi, ali su ipak važne. To su ključne reči koje koriste mašine za pretraživanje, opisi strane i veze ka spoljašnjim skriptovima ili opisima stilova. Zaglavlje dokumenta unu-tar HTML oznaka pravi se pomoću oznake <head>:

<html> <head></head> </html>

U telu se nalaze svi vidljivi elementi strane. Tu se postavljaju i formatiraju tekst, slike i ostali multimedijalni sadržaji. Telo strane definiše se pomoću oznake <body>:

<html> <head></head> <body>

Ovde stavljam tekst i slike...

</body> </html>

Ovakav „kostur“ veb strane automatski se generiše kad god napravite nov HTML dokument u Dreamweaveru, pre nego što dodate nešto na stranu. Za sve vizuelne elemente koje postavite na stranu umeće se odgovarajući HTML kôd unutar oznaka <body>.

Postavljanje slika u HTML-uU HTML-u se pomoću odgovarajućih oznaka na veb stranu postavljaju elementi, kao što su slike i multimedijalne datoteke. Najčešće se koristi oznaka <img>; ona je zaduže-na za postavljanje i formatiranje slike na strani. Da biste postavili sliku i videli kôd koji prati tu akciju, uradite sledeće:

1 Izaberite File > Open. Kada se otvori okvir za dijalog Open, pređite u direktori-jum dw01lessons. Izaberite datoteku Images.html i pritisnite Open da biste uneli izmene u datoteku.


2 Prema potrebi, pritisnite dugme Split na paleti Document. Tako ćete na ekranu imati i prikaz koda i prikaz dizajna strane. U oknu Design podeljenog prikaza (engl. Split view), pritisnite ispod reda teksta kako biste tu postavili kursor. Tu ćete smestiti novu sliku.

Pritisnite dugme Split kako biste aktivirali podeljeni prikaz pre nego što umetnete sliku na stranu.

3 U kategoriji Common na panelu Insert s desne strane ekrana, pritisnite element Images ( ) i izaberite Image. Kad se otvori okvir za dijalog Select Image Source, izaberite datoteku gears.jpg smeštenu u poddirektorijumu images direktorijuma dw01lessons.

Izaberite Image na kartici Common panoa Insert.

Uvod u HTML 193

4 Pritisnite OK (Windows), odnosno Choose (Mac OS); kada se otvori okvir za dijalog Image Tag Accessibility Attributes, u tekstualno polje Alternate unesite reči Gears Image i pritisnite OK da postavite sliku.

Upišite alternativni tekst za sliku.

Okvir za dijalog Image Tag Accessibility Attributes otvara se prilikom umetanja slika na stranu. U njemu unosite dodatne informacije za korisnike s posebnim potrebama (recimo, za osobe sa oštećenim vidom). Svakoj slici treba uvek da dodelite alternativni tekst, ali tu funkciju možete isključiti kada izaberete Edit > Preferences (Windows), odnosno Dreamweaver > Preferences (Mac OS). U kategoriji Accessibility, uklonite znak za potvrdu pored opcije Images.

5 U kodu se vidi da je slika postavljena pomoću HTML oznake <img>. Pritisnite jed-nom sliku u prozoru dokumenta da biste je izabrali. Na panou Properties pri dnu strane, prikazuju se i definišu svojstva slike.

6 Na panou Properties, u polje Border unesite 3 da biste oko slike postavili ivicu debljine tri piksela, zatim pritisnite Enter (Windows), odnosno Return (Mac OS). Pritisnite pozadinu strane da biste poništili selekciju i pogledajte ivicu. Oznaka <img> sada sadrži atribut border (ivica) podešen na vrednost 3 koju ste uneli na panou Properties.

Dok menjate ili dodajete opcije izabranoj slici, Dreamweaver menja kôd iza scene.


7 Izaberite File > Save da biste snimili svoj rad, a potom izaberite File > Close. Imajte na umu da slike i multimedijalne datoteke nisu ugrađene u HTML, već se

one u njega postavljaju. To znači da oznake ukazuju na tačnu lokaciju datoteka u odnosu na datu veb stranu. Datoteke moraju uvek biti na lokacijama navedenim u oznakama kako bi se prikazale na veb strani. Zahvaljujući tome, HTML datoteke su obično veoma male.

Boje u HTML-uNa različitim Dreamweaverovim panoima i u vašem kodu, svaka boja se označava šestocifrenom šifrom ispred koje je znak taraba (#). To su heksadecimalne oznake pomoću kojih HTML strane prepoznaju i koriste boje. Možete definisati skoro svaku boju koristeći jedinstvenu heksadecimalnu oznaku. Primera radi, tamnocrvena boja se u HTML-u predstavlja kao #CC0000.

Prve, srednje i poslednje dve cifre heksadecimalne oznake odgovaraju vrednostima u RGB spektru. Na primer, bela, koja je u RGB-u predstavljena kao R:255 G:255 B:255, u HTML-u se definiše kao #FFFFFF (255|255|255). Boje se jednostavno biraju na praktičnom panou Swatches dostupnom na mnogim mestima u Dreamweaverovom radnom prostoru.

Pano Swatches olakšava rad s bojama.

Birači boja u Adobe Photoshopu i Illustratoru prikazuju i prihvataju heksadecimalne oz na ke, i tako olakšavaju kopiranje boja između navedenih programa i Dreamweavera.

Pravila o razlikovanju malih i velikih slova i belinamaHTML je fleksibilan jezik s vrlo malim brojem pravila o izgledu koda. Zavisno od toga koliko strogo hoćete da pišete kôd, HTML može biti ili vrlo detaljan tako da ispisuje oznake velikim, odnosno malim slovima (tzv. razlikovanje malih i velikih slova, engl case sensitivity). Da biste videli kako HTML prikazuje beline, pratite sledeće korake:

1 Izaberite File > Open. Kada se otvori okvir za dijalog Open, pređite u direktori-jum dw01lessons. Izaberite datoteku Whitespace.html, a zatim pritisnite Open.

2 Ako vam nije aktivan podeljeni prikaz, pritisnite dugme Split na paleti Document kako biste gledali i kôd i dizajn strane. Obratite pažnju na izgled identične oznake ispod reda 9 u kodu:

Uvod u HTML 195

Sve ove oznake važe iako imaju različitu strukturu u pogledu velikih i malih slova.

Iako su sve tri oznake različito napisane, sve su ispravne i daju iste rezultate. Pogle-dajte red teksta na sledećoj slici koji glasi This is one sentence. This is another. U kodu se vidi veliki razmak između dva reda, ali u prikazu Design nema nikakvog razma-ka. To je zato što nisu prepoznati ni prelazak u novi red ni prazni redovi između dva segmenta teksta ili HTML oznake.

Uprkos velikom prostoru između dve rečenice, u prikazu Design one su jedna pored druge.

3 Da biste prešli u novi red ili novi pasus, treba da unesete potrebne HTML oznake. Na dnu prikaza Design, postavite kursor na kraj prve rečenice, zatim dvaput priti-snite Shift+Enter (Windows), odnosno Shift+Return (Mac OS). Tako umećete dva nova reda – videćete da je svaki novi red u kodu predstavljen oznakom (od engl. break). Prilikom prikazivanja strane u čitaču, oznaka dodaje prazan red između rečenica, mada se, tehnički gledano, rečenice nalaze u istom pasusu.

Kad hoćete da umetnete prazan red, držeći pritisnut taster Shift pritisnite Enter, odnosno Return.

4 Da biste napravili nov pasus, postavite kursor ispred rečenice This is another i pritisnite Enter (Windows), odnosno Return (Mac OS). Taj tekst je sada odvojen praznim redom ispred i iza njega, i nalazi se između para oznaka (od engl. para-graph – pasus).

Dreamweaver pravi nov pasus kad god pritisnete taster Enter, odnosno Return.

Program unosi samo jedan, standardan razmak (npr. onaj koji se unosi između reči) i neće reagovati na unos nekoliko uzastopnih razmaka koji se dobijaju pritiskom na razmaknicu (engl. spacebar). Njih će prikazati samo kao jedan razmak u prikazu Design i veb čitaču.

5 Izaberite File > Save da biste sačuvali rad, a zatim izaberite File > Close.

Uvod u HTML 197

Hijerarhija oznakaHTML oznake prate određeni redosled važnosti, tj. hijerarhiju, kako bi se svi elementi pravilno prikazali. Na vrhu hijerarhije nalazi se oznaka <html> unutar koje su sve ostale oznake koje umetnete. Oznake poput <body> uvek sadrže manje oznake, kao što su (za pasus), <img> (za sliku) i (za podebljan ispis). Pored toga, strukturne oznake (recimo one pomoću kojih se prave pasusi, liste i tabele) važnije su od oznaka za forma-tiranje – npr. i (za kurzivni ispis). Pogledajmo sledeći red koda:

Veliki pasus ispisan podebljano

Iako ovakav kôd može funkcionisati u nekim veb čitačima, on se ne preporučuje jer je oznaka tehnički manje važna od oznake . Sigurnije je i pravilnije ako se oznaka za podebljan ispis umetne na sledeći način:

Veliki pasus ispisan podebljano

Dreamweaver odlično ugnežđava (engl. nest) oznake, tj. pravilno ih umeće jedne u druge. Ukoliko se odlučite da sami pišete kôd, uvek treba da imate na umu tehnike pravilnog pisanja koda.

XHTML 1.0 TransitionalNajnovija preporučena verzija HTML-a je XHTML 1.0 – strožija verzija HTML-a koja je kompatibilnija s novim platformama, kao što su mobilni telefoni i ručni ure-đaji za koje je neophodan kôd da bi što bolje prikazali sadržaj. XHTML kombinuje elemente HTML-a i XML-a, jezika za opisivanje podataka. XML (Extensible Markup Language – proširivi jezik za označavanje), postao je popularan za razmenu informacija između naizgled nepovezanih aplikacija, platformi i sistema. Dreamweaver podrazu-mevano pravi nove veb strane pomoću standarda XHTML 1.0 Transitional.

Po čemu se razlikuju?Iako su oznake i atributi isti, XHTML ima drugačiju, tj. strožu strukturu jezika. Dok je HTML lako opraštao loše napisan kôd, kao što je preklapanje oznaka ili izostavljanje završne oznake, u XHTML-u sve oznake moraju biti pravilno ugnežđene i zatvorene (uvek mora postojati završna oznaka). HTML ne razlikuje velika i mala slova u oznaka-ma, dok u XHTML-u sve moraju biti ispisane malim slovima.

Primera radi, oznaka (prelom reda), koja se u HTML-u piše bez završne ozna-ke, sada mora biti zatvorena. Oznake možete i automatski zatvarati pomoću kose crte – samo vodite računa o tome da između br i kose crte bude razmak. Na kraju stavite desnu ugaonu zagradu:

 

Rezultat je dobro formiran jezik koji koristi sve pogodnosti novih veb čitača i plat-formi, dok istovremeno ostaje kompatibilan sa starijim čitačima. Da biste u Dreamwea-veru radili sa XHTML-om, prilikom izrade nove strane izaberite XHTML 1.0 Transi-tional kao tip dokumenta (opcija DocType).


Istraživanja u koduIako se u knjizi povremeno navode primeri s kodom, cilj ovih lekcija nije da vas nauče ručnom pisanju koda. Najbolji način da naučite kako se u kodu predstavlja dizajn stra-ne koji pravite vizuelno jeste da se prebacite u prikaz Code i istražite šta se dešava iza scene.

Ne zaboravite da svako dugme, pano i meni u Dreamweaveru predstavlja određenu HTML oznaku, atribut ili vrednost; veoma retko ćete naučiti nešto što nije u vezi s Dreamweaverom ili nešto što se odnosi samo na taj program. Zamislite Dreamweave-rov radni prostor kao lepu fasadu jezika HTML.

Pogled na početni ekranPočetni ekran (engl. Welcome Screen) uobičajen je za većinu CS5 aplikacija. To je strana s koje se otvaraju novi i nedavno otvarani dokumenti. U Dreamweaveru, početni ekran se prikazuje kada se otvori aplikacija ili kada nijedan dokument nije otvoren. S početnog ekrana možete praviti nove strane i novu lokaciju, otvoriti nedavno otvaran dokument ili upotrebiti neku od Dreamweaverovih brojnih gotovih početnih strana ili rasporeda elemenata.

Početni ekran se prikazuje kada otvorite aplikaciju ili kada nema otvorenih dokumenata.

Evo šta ćete naći na početnom ekranu:

Open a Recent Item Lista poslednjih nekoliko dokumenata na kojima ste radili smeštena je u levoj koloni. Na dnu liste nalazi se dugme Open ( ) pomoću koga otva-rate neku drugu datoteku.

Create New Pored HTML strana, na raspolaganju vam je nekoliko drugih forma-ta dokumenata, kao što je CSS, JavaScript i XML. Dreamweaver nije samo alatka za izradu veb strana, već i izvrstan program za obradu teksta, te je idealan za izradu raznih

Izrada, otvaranje i snimanje dokumenata 199

datoteka koje nisu u HTML formatu. Možete definisati novu Dreamweaverovu lokaci-ju pomoću hiperveze na dnu liste (Dreamweaver Site) ili izabrati direktorijum More da biste prikazali dodatne formate za novu datoteku.

Top Features (videos) S desne strane početnog ekrana je lista video snimaka u kojima se opisuju nove mogućnosti Dreamweavera CS5, kao što je CSS Inspect Mode (režim provere CSS-a), Dynamically-Related Files (dinamičke datoteke) i BrowserLab Integration (provera izgleda strane u različitim čitačima i na različitim platformama). Video-zapisi se nalaze na veb lokaciji kompanije Adobe, adobe.com, i kada pritisnete neku od ponuđenih veza, Dreamweaver otvara lokaciju u vašem veb čitaču da biste pogledali video.

Izrada, otvaranje i snimanje dokumenataDa biste pratili lekcije u knjizi, potrebno je da pravite, snimate i otvarate postojeće datoteke. Većina poslova s datotekama obavlja se iz menija File na vrhu ekrana ili s početnog ekrana koji se prikazuje kada pokrenete Dreamweaver.

Izrada novih dokumenataDreamweaver najčešće pravi tekstualne HTML datoteke (tj. veb strane). Pored toga, moguće je praviti datoteke na raznim jezicima zasnovanim na tekstu, među kojima su CSS, XML, JavaScript, pa čak i Flash ActionScript.

Možete otvarati prazne datoteke u kojima ćete sve raditi iz početka ili se poslužiti raznim gotovim šablonima i temama. Nove dokumente otvarate iz menija File ili s početnog ekrana.

U okviru za dijalog New Document, na raspolaganju su vam razni formati i šabloni za novu datoteku.

1 Nov dokument otvarate tako što izaberete File > New. Prikazaće se okvir za dija-log New Document.

2 Izaberite Blank Page a u koloni Page Type izaberite HTML. U koloni Layout iza-berite <none> da biste otvorili nov, prazan dokument. Ostavite izabranu podrazu-mevanu opciju u padajućoj listi DocType. Pritisnite dugme Create.

3 Izaberite File > Save ili File > Save As da biste snimili dokument.4 Kada program to od vas zatraži, izaberite lokaciju na kojoj ćete čuvati datoteku i

dajte joj ime. HTML datoteke morate snimiti sa oznakom tipa .html jer ih čitač inače neće pravilno tumačiti. To pravilo važi za sve tipove datoteka (na primer, .xml, .css i .cfm).

Otvaranje nedavno otvaranog dokumenta

Da biste otvorili dokument na kom ste nedavno radili, izaberite File > Open Recent ili na početnom ekranu izaberite dokument u koloni Open a Recent Item.

Izaberite datoteku na početnom ekranu ili komandu File > Open Recent da biste otvorili nedavno otvaranu datoteku.

Samostalan rad 201

Sada kada znate šta sve Dreamweaver može da uradi, vreme je da naučeno primenite u praksi. Pređite na sledeću lekciju u kojoj ćete početi da pravite svoju prvu lokaciju u Dreamweaveru!

Samostalan radIstražite gotove Dreamweaverove CSS dizajne strana: izaberite File > New a zatim op-ciju HTML u koloni Page Type. Pregledajte opcije u koloni Layout i otvorite nekoliko dizajna strana. Izaberite one koji će vam koristiti kao početna tačka za buduće projekte.

Provera znanja

Pitanja1 S koja dva mesta u Dreamweaveru možete otvoriti nov dokument?2 U koja tri prikaza Dreamweaver omogućava pregledanje i uređivanje dokumenata?3 Tačno ili netačno: kada korisnik zatraži veb stranu, ona se šalje njegovom veb čita-

ču kao jedna kompletna datoteka za gledanje.

Odgovori1 S početnog ekrana ili izborom komande File > New. 2 Design, Split i Code. 3 Netačno. Datoteke se šalju pojedinačno; veb čitač spaja sve elemente pomoću

HTML koda i prikazuje gotovu stranu.

upoznavanje sa dreamweaverom cs5 - mikro …184 dreamweaver • lekcija 1: upoznavanje sa...

Documents