http://digitalniandjeo.blog.rs/blog/digitalniandjeo <p>Putem ovog sajta zeleo bi pocetnike da uvedem u svet web dizajniranja!</p> digitalniandjeo 2026-05-24T05:30:54Z http://digitalniandjeo.blog.rs/blog/digitalniandjeo/generalna/2009/01/02/upoznavanje-sa-dreamweaverovim <br />Upoznavanje sa Dreamweaverom<br />Dreamweaver je kompletan program za web stvarala{tvo-HTML (Hypertext Markup<br />Language) editor, program za autorstvo i stvaranje dinami~kih web stranica. Sve su te<br />funkcije sadr`ane u jednom programu. Web stranice se prave kori{}enjem HTML-a,<br />ali se skoro sve mo`e uraditi bez ikakvog znanja HTML-a. Ako `elite da napravite web<br />stranice profesionalnog kvaliteta, uklju~uju}i i pravljenje skripta, Dreamweaver Vam<br />upravo to omogu}ava.<br />HTML je jezik kojim se prave web stranice. Sastoji se od uparenih oznaka sadr`anih u<br />okviru uglastih zagrada (&lt;&gt;). Oznake obuhvataju objekte na web stranicama, kao na pr.<br />tekst, ili stoje same. Na primer, HTML kod, koji ~ini tekst zadebljanim je slede}i:<br />&lt;b&gt;zadebljani tekst&lt;/b&gt;. Ove oznake su primer uparenih oznaka. Oznaka kojom se<br />zavr{ava neka celina uvek po~inje kosom crtom. Ostale oznake, kao na primer oznaka za<br />postavljanje slike na web stranicu, su jednostruke oznake: &lt;img src=&quot;smile.gif&quot;&gt;.<br />Dreamweaver je WYSIWYG (what you see is what you get-ono {to vidi{ je ono {to<br />dobija{) web editor, koji je u isto vreme veoma mo}an i veoma jednostavan za upotrebu.<br />Omogu}ava stvaranje novih web stranica, ali i uvoz i editovanje ve} postoje}ih.<br />Dreamweaver ne}e promeniti ni poremetiti kod web stranice. Jedna od najpopularnijih<br />mogu}nosti Dreamweavera je oduvek bila mogu}nost da ostavi ve} napravljene<br />web sajtove nepromenjenima. Programeri Macromedie, kompanije koja je napravila<br />Dreamweaver, nazivaju tu mogu}nost &quot;Roundtrip HTML&quot;.<br />Dreamweaver je tako|e i program za kompletno autorstvo. To zna~i da on omogu}ava<br />obuhvatanje grupe stranica koje sadr`e interaktivnost i animacije. Na taj na~in se mogu<br />napraviti kompletne aplikacije. Iako Dreamweaver mo`e da se koristi kao obi~an<br />HTML editor, on mo`e da se koristi i za stvaranje multimedijalnih aplikacija. Mo`ete,<br />naravno, samo da editujete HTML uz pomo} Dreamweavera, ali i da osmislite i<br />napravite u njemu kompletan do`ivljaj za korisnike sajta.<br />Dreamweaver MX omogu}ava pravljenje dinami~kih web stranica, jer obuhvata<br />funkcije programa Macromedia Dreamweaver UltraDev 4. Dinami~ke web stranice se<br />stvaraju kori{}enjem skripta koje se izvr{avaju na serveru, a pri tome je neophodno da<br />razumete tehnologiju servera i druge napredne funkcije ovog i drugih programa. Iako<br />te funkcije nisu opisane u ovoj knjizi, to ne zna~i da ne treba da postanu deo va{ih<br />interesa. Pogledajte Dodatak B i prona|ite u njemu knjige i web sajtove koji sadr`e<br />uputstva za pravljenje dinami~kih web stranica u Dreamweaveru. U ovoj knjizi su<br />navedena neka osnovna uputstva, ali }ete iz nje nau~iti kako da napravite samo obi~ne<br />web stranice (one koje ne sadr`e skripte koje se izvr{avaju na serveru).<br />4<br />Instaliranje programa<br />Dreamweaver se instalira na standardan na~in u Windows ili Macintosh okru`enju.<br />Program za instaliranje pravi sve neophodne direktorijume i fajlove koji su neophodni<br />za rad Dreamweavera. Prilikom instalacije Dreamweavera tako|e }e se instalirati<br />Macromedia Extension Manager, program koji poma`e u instaliranju dodataka za<br />Dreamweaver preuzetih sa Interneta.<br />Hardverski i softverski zahtevi<br />U Tabeli 1.1 je naveden hardver i softver koji je potreban za rad Dreamweavera.<br />Tabela 1.1 Hardverski i softverski zahtevi za rad Dreamweavera<br />Windows 95/NT Macintosh<br />Intel Pentium II procesor ili Power Mac G3 ili bolji<br />ekvivalentno tome 166+ MHz<br />Windows 98 SE Windows 2000 Mac OS 9.1, 9.2.1 ili OS 10.1<br />Windows Me, Windows NT MRJ 2.2 (za Flash dugmad)<br />ili Windows XP<br />96 MB RAM (preporu~ljivo 128) 96 MB RAM (preporu~ljivo 128)<br />275 MB slobodne 275 MB slobodne memorije na hard disku<br />memorije na hard disku<br />256 kolor monitor 256 kolor monitor rezolucije 800x600<br />rezolucije 800x600 (preporu~ljivo 1024x768, milioni boja)<br />(preporu~ljivo 1024x768,<br />milioni boja)<br />Netscape Navigator ili Internet Netscape Navigator ili Internet Explorer 4.0<br />Explorer 4.0 ili novije verzije ili novije verzije<br />Pribavljanje demo verzije Dreamweavera<br />Macromedia je kompanija koja pravi i prodaje Dreamweaver. Oni nude demo verziju<br />ovog programa koju mo`ete isprobati i odlu~iti da li `elite da ga kupite. Demo verziju<br />mo`ete preuzeti sa Interneta na adresi www.macromedia.com/software/<br />dreamweaver/trial/.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />5<br />Upoznavanje sa radnom povr{inom u<br />Dreamweaveru<br />Kada prvi put pokrenete Dreamweaver u Windowsu mo`ete da birate izme|u radne<br />povr{ine Dreamweavera MX ili Dreamweavera 4, prethodne verzije ovog programa. Oni<br />koji su ve} navikli na rad u Dreamweaveru 4 verovatno }e izabrati da koriste interfejs tog<br />programa. Ja svim korisnicima savetujem da isprobaju rad u Dreamweaveru MX. Svi<br />primeri i obja{njenja u ovoj knjizi se odnose na rad u Dreamweaver MX okru`enju.<br />Ako ste ve} izabrali izgled radne povr{ine programa, ali biste `eleli da ga promenite, to<br />mo`ete da uradite komandom Preferences u meniju Edit. Odaberite kategoriju<br />General, prikazanu na slici 1.1, i kliknite na dugme Change Workspace. Pojavi}e se<br />okvir za dijalog koji ste videli prilikom prvog startovanja programa, u kojem }ete mo}i<br />da promenite izgled radne povr{ine. Polje za potvrdu HomeSite/Coder-Style<br />omogu}ava da izaberete da se paneli nalaze na levoj ili desnoj strani ekrana. Korisnici<br />na Macintoshu nemaju mogu}nost biranja ni menjanja izgleda radne povr{ine, a<br />Dreamweaver MX }e uvek imati radnu povr{inu sa &quot;lebde}im&quot; panelima.<br />Pokrenite Dreamweaver MX i po~nite sa prou~avanjem interfejsa. Verovatno }ete<br />odmah ugledati Welcome prozor, koji sadr`i nekoliko linkova za pribavljanje informacija<br />o Dreamweaveru MX. Kada budete imali vremena, istra`ite te linkove. Za sada<br />zatvorite taj prozor; mo`ete ponovo da ga otvorite komandom Welcome iz menija<br />Help.<br />Slika 1.1<br />Mo`ete da birate<br />izme|u<br />Dreamweaver MX i<br />Dreamweaver 4<br />radne povr{ine<br />komandom<br />Preferences<br />^as 1<br />6<br />Kada pokrenete Dreamweaver MX za Windows, primeti}ete prazno belo polje pod<br />nazivom prozor Document. Na njemu je prikazana web stranica koju pravite onako kako }e<br />izgledati u web ~ita~u. Prozor Document je sa desne strane oivi~en panelima, prikazanim<br />na slici 1.2. Ti paneli Vam omogu}avaju da modifikujete i organizujete elemente web<br />stranice. Prozor Document, paneli i drugi elementi koje }ete uskoro upoznati, grupisani<br />su zajedno u interfejsu.<br />Kada pokrenete Dreamweaver MX za Macintosh, tako|e }ete videti Document prozor,<br />prikazan na slici 1.3. Verzija Dreamweavera MX za Macintosh sadr`i panele koji &quot;lebde&quot;<br />iznad prozora Document. Lebde}i paneli mogu da se postave na bilo koje mesto na<br />ekranu. Verzije Dreamweavera MX za Windows i Macintosh imaju male razlike u izgledu,<br />ali imaju potpuno iste funkcije i mogu}nosti.<br />Paleta sa alatima Linija Insert Prozor Document Grupa Panel<br />Status linija<br />Slika 1.2<br />Radna povr{ina<br />Dreamweavera MX<br />sadr`i prozor<br />Document i panele<br />Upoznavanje sa Dreamweaverovim interfejsom<br />7<br />Prozor Document<br />Prozor Document sadr`i naslovnu liniju, liniju menija, liniju Insert (Windows) i paletu<br />sa alatkama u gornjem delu. Naslovna linija sadr`i ime programa-Macromedia<br />Dreamweaver MX-naziv fajla i naziv web stranice koja je trenutno otvorena. Ovaj<br />naziv }e se pojaviti i kada stranica bude otvorena u web ~ita~u. Osobine stranice i na~in<br />odre|ivanja naziva stranice su obja{njeni u slede}em ~asu. Naziv fajla se nalazi sa<br />desne strane i uokviren je uglastim zagradama.<br />Linija Insert (Insert Bar)<br />Linija Insert se nalazi direktno ispod linije menija u Windowsu, a na Macintoshu je<br />&quot;lebde}i&quot; panel. Sadr`i dugmad za postavljanje elemenata web stranice, kao {to su slike,<br />tabele, formulari i hiperlinkovi. Mo`ete da kliknete ili prevu~ete dugme da biste<br />postavili objekat na web stranicu.<br />Insert linija sadr`i veliki broj kartica, koje Vam omogu}avaju da izaberete vrstu objekata.<br />Po unapred definisanom pode{avanju postoji dvanaest kartica: Common, Layout,<br />Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script i<br />Application. Da biste videli koji objekti se nalaze u okviru neke kartice, kliknite na karticu.<br />Na Macintoshu postoji meni u gornjem desnom uglu panela Insert, koji prikazuje<br />listu razli~itih kategorija objekata. Mo`ete da promenite orijentaciju (horizontalnu ili<br />vertikalnu) lebde}eg panela Insert pritiskanjem ikonice Orientation u donjem desnom<br />uglu panela.<br />Linija Insert Prozor Document Paleta sa Slika 1.3 alatima Grupa Panel<br />Radna povr{ina<br />Dreamweavera MX<br />na Macintoshu sadr`i<br />panele koji &quot;lebde&quot;<br />iznad prozora<br />Document<br />^as 1<br />8<br />U tabeli 1.2 su nabrojani i opisani svi objekti koji se nalaze na liniji Insert. Ukratko su<br />i opisani svi objekti na liniji Insert, osim objekata na kartici Application, jer se oni<br />koriste isklju~ivo za stvaranje dinami~kih web stranica. Objekti na kartici Layout se<br />nalaze u donjem delu lebde}eg panela Insert na Macintoshu. Dok prou~avate ovu listu,<br />upoznajte se sa tipovima objekata i sadr`ajem koji mo`ete dodati web stranicama u<br />Dreamweaveru.<br />Tabela 1.2 Linija Insert<br />Ikona Ime ikone Opis<br />Kartica Common<br />Hyperlink Postavlja hiperlink sa tekstom i pozicijom linka.<br />E-mail Link Postavlja hiperlink koji pokre}e praznu e-mail<br />poruku adresiranu na unapred odre|enu e-mail<br />adresu.<br />Named Anchor Postavlja named anchor na mesto gde se nalazi<br />kursor. Named anchor slu`i za postavljanje<br />hiperlinka u okviru istog fajla.<br />Table Postavlja tabelu na mesto gde se nalazi kursor.<br />Layer Pretvara kursor u alatku marquee za crtanje sloja<br />u prozoru Document.<br />Image Postavlja sliku na mesto gde se nalazi kursor.<br />Image Placeholder Postavlja dr`a~ slike.<br />Fireworks HTML Postavlja HTML izvezen iz Macromedia Fireworksa<br />na mesto gde se nalazi kursor<br />Flash Postavlja Macromedia Flash film na mesto gde se<br />nalazi kursor<br />Rollover Image Zahteva dve slike. Jedna slika stalno stoji na<br />stranici, a druga se pojavljuje kada korisnik pre|e<br />kursorom preko nje na stranici.<br />Navigation Bar Postavlja grupu sli~ica-dugmadi koja se koriste za<br />navigaciju kroz web sajt.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />9<br />Horizontal Rule Postavlja horizontalni kliza~.<br />Date Postavlja trenutni datum na mesto gde se nalazi<br />kursor.<br />Tabular Data Postavlja tabelu na mesto gde se nalazi kursor, sa<br />podacima iz odabranog fajla.<br />Comment Postavlja komentar.<br />Tag Chooser Omogu}ava odabir oznake iz menija sa svim<br />raspolo`ivim oznakama.<br />Kartica Layout<br />Table Postavlja tabelu na mesto gde se nalazi kursor (isto<br />kao i u kartici Common).<br />Layer Pretvara kursor u krsti} kojim se crta sloj u<br />prozoru Document (isto kao i u kartici Common).<br />Standard view Prikazuje tabelu u standardnom izgledu.<br />Layout view Prikazuje tabelu sa }elijama koje se mogu odabrati.<br />Tabela je uokvirena zelenom, a }elije plavom<br />bojom.<br />Draw Layout Table Crta tabelu u prikazu Layout.<br />Draw Layout Cell Crta }eliju tabele u prikazu Layout.<br />Kartica Text<br />Font Tag Editor Otvara prozor Font Tag Editor za pode{avanje<br />oznake za font.<br />Bold Ozna~eni tekst ~ini zadebljanim.<br />Italic Ozna~eni tekst ~ini zakrivljenim.<br />Strong Ozna~enom tekstu dodeljuje osobinu strong<br />(zadebljan).<br />Emphasis Ozna~eni tekst ~ini nagla{enim (zakrivljenim).<br />^as 1<br />10<br />Paragraph Ozna~eni tekst pretvara u poseban pasus.<br />Blockquote Ozna~enom tekstu dodeljuje poravnanje<br />blockquote.<br />Preformatted Ozna~eni tekst ~ini preformatiranim.<br />Heading 1 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 1.<br />Heading 2 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 2.<br />Heading 3 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 3.<br />Unordered List Ozna~eni tekst pretvara u neure|enu bulleted listu.<br />Ordered List Ozna~eni tekst pretvara u ure|enu<br />numerisanu listu.<br />List Item Ozna~eni tekst ubacuje u ure|enu ili neure|enu<br />listu.<br />Definition List Pravi definisanu listu.<br />Definition Term Pravi definisani pojam u okviru definisane liste.<br />Definition Pravi definisani opis u okviru definisane<br />Description liste.<br />Abbreviation Dodaje tekst na skra}enice radi boljeg<br />pronala`enja u web pretra`iva~ima.<br />Acronym Dodaje kompletan tekst akronimu radi boljeg<br />pronala`enja u web pretra`iva~ima.<br />Kartica Tables<br />Table Postavlja tabelu na mesto gde se nalazi kursor (isto<br />kao i u kartici Common).<br />Table Tag Postavlja oznaku table (vidljivo samo u prikazu<br />Code).<br />Upoznavanje sa Dreamweaverovim interfejsom<br />11<br />Table Row Postavlja oznaku tr (vidljivo samo u prikazu Code).<br />Table Header Postavlja oznaku th (vidljivo samo u prikazu Code).<br />Table Data Postavlja oznaku td (vidljivo samo u prikazu Code).<br />Caption Postavlja oznaku caption (vidljivo samo u prikazu<br />Code).<br />Kartica Frames<br />Left Frame Pravi frejm na levoj strani od onog u kome se<br />trenutno nalazi kursor.<br />Right Frame Pravi frejm na desnoj strani od onog u kome se<br />trenutno nalazi kursor.<br />Top Frame Pravi frejm iznad onog u kome se trenutno nalazi<br />kursor.<br />Bottom Frame Pravi frejm ispod onog u kome se trenutno nalazi<br />kursor.<br />Bottom and Pravi frejm na levoj strani od onog u kome<br />Nested Left se trenutno nalazi kursor i dodaje jo{ jedan frejm<br />ispod.<br />Bottom and Pravi frejm na desnoj strani od onog u kome se<br />Nested Right trenutno nalazi kursor i dodaje jo{ jedan frejm<br />ispod.<br />Left and Nested Pravi frejm ispod onog u kome se trenutno nalazi<br />Bottom kursor i dodaje jo{ jedan frejm na levoj strani.<br />Right and Nested Pravi frejm ispod onog u kome se trenutno nalazi<br />Bottom kursor i dodaje jo{ jedan frejm na desnoj strani.<br />Top and Bottom Pravi frejm ispod i iznad onog u kome se trenutno<br />nalazi kursor.<br />Left and Pravi frejm iznad onog u kome se trenutno nalazi<br />Nested Top kursor i dodaje frejm na levoj strani.<br />Right and Pravi frejm iznad onog u kome se trenutno nalazi<br />Nested Top kursor i dodaje frejm na desnoj strani.<br />Top and Pravi frejm na levoj strani od onog u kome se<br />Nested Left trenutno nalazi kursor i dodaje frejm iznad.<br />^as 1<br />12<br />Top and Nested Pravi frejm na desnoj strani od onog u kome se<br />Right trenutno nalazi kursor i dodaje frejm iznad.<br />Frameset Postavlja oznaku frameset (vidljivo samo u prikazu<br />Code).<br />Frame Postavlja oznaku fram (vidljivo samo u prikazu<br />Code)<br />Floating Frame Postavlja oznaku iframe (vidljivo samo u prikazu<br />Code).<br />No Frames Postavlja oznaku noframes u HTML kod, da bi<br />web ~ita~i koji ne podr`avaju frejmove mogli da<br />prika`u stranicu.<br />Kartica Forms<br />Form Postavlja formular na mesto gde se nalazi kursor.<br />Text Field Postavlja tekstualno polje.<br />Hidden Field Postavlja skriveno polje.<br />Textarea Postavlja oblast za unos teksta.<br />Check Box Postavlja polje za potvrdu.<br />Radio Button Postavlja okruglo polje za odabir.<br />Radio Group Postavlja grupu povezanih okruglih polja za odabir.<br />List/Menu Postavlja padaju}i meni.<br />Jump Menu Postavlja meni Jump, uobi~ajen alat za<br />omogu}avanje korisnicima da posete vi{e<br />hiperlinkova.<br />Image Field Postavlja image field na sliku, {to omogu}ava da se<br />slika pona{a kao dugme.<br />File Field Postavlja file field, {to omogu}ava da korisnik<br />po{alje fajl na server.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />13<br />Button Postavlja dugme.<br />Label Dodeljuje natpis odabranom elementu formulara.<br />Fieldset Grupi{e polja u formularu da bi ona bila dostupna<br />nevizuelnim web ~ita~ima.<br />Kartica Templates<br />Make Template Pravi od otvorene stranice {ablon (template) za<br />Dreamweaver.<br />Make Nested Pravi od otvorene stranice ugne`|eni {ablon za<br />Template Dreamweaver.<br />Editable Region Odre|uje u kreiranom {ablonu oblast koja se<br />mo`e editovati.<br />Optional Region Postavlja opcionu oblast u {ablon, koja mo`e da se<br />napravi vidljivom ili nevidljivom.<br />Repeating Region Postavlja oblast koja se ponavlja u {ablon.<br />Editable Postavlja u {ablon opcionu oblast koja se<br />Optional Region mo`e editovati.<br />Repeating Table Postavlja tabelu koja se ponavlja u {ablon i<br />odre|uje koja polja se mogu editovati.<br />Kartica Characters<br />Line Break Postavlja prekid reda (&lt;BR&gt;) na mesto gde se<br />nalazi kursor.<br />Nonbreaking Space Postavlja razmak koji ne dopu{ta razdvajanje.<br />Left Quote Postavlja levi interpunkcijski znak navoda.<br />Right Qoute Postavlja desni interpunkcijski znak navoda.<br />Em-Dash Postavlja crticu.<br />Pound Postavlja valutni simbol funte.<br />Yen Postavlja valutni simbol jena.<br />^as 1<br />14<br />Euro Postavlja valutni simbol evra.<br />Copyright Postavlja simbol za autorsko pravo.<br />Registered Postavlja simbol za patentiran za{titni znak.<br />Trademark Postavlja simbol za za{titni `ig.<br />Other Character Otvara meni sa specijalnim karakterima sa kojeg<br />mo`ete odabrati sve ostale ponu|ene karaktere.<br />Kartica Media<br />Flash Postavlja Macromedia Flash film na mesto gde se<br />nalazi kursor.<br />Flash Button Postavlja neki od ponu|enih Macromedia Flash<br />dugmadi na mesto gde se nalazi kursor.<br />Flash Text Postavlja Flash tekst koji mo`ete da editujete i pravi<br />fajl Flash.<br />Shockwave Postavlja Shockwave film (Macromedia Director<br />film pripremljen za Internet) na mesto gde se nalazi<br />kursor.<br />Applet Postavlja Java skript na mesto gde se nalazi kursor.<br />Param Postavlja oznaku koja Vam omogu}ava da upi{ete<br />parametre za skript ili ActiveX.<br />ActiveX Postavlja ActiveX na mesto gde se nalazi kursor.<br />Plugin Postavlja bilo koji fajl koji zahteva plug-in za web<br />~ita~.<br />Kartica Head<br />Meta Postavlja meta oznake na web stranicu.<br />Keywords Postavlja klju~ne re~i u meta oznake da bi stranica<br />koju pravite bila lak{e identifikovana na Internetu.<br />Description Postavlja Description meta oznaku.<br />Refresh Postavlja meta oznaku Refresh na web stranicu.<br />Ova oznaka odre|uje za koliko sekundi }e web<br />Upoznavanje sa Dreamweaverovim interfejsom<br />15<br />stranica pre}i na drugu web stranicu ili se ponovo<br />u~itati.<br />Base Postavlja oznaku Base na web stranicu, {to<br />omogu}ava da odredite po~etni URL ili ciljani<br />prozor.<br />Link Postavlja adresu spoljnog fajla, obi~no skripta ili<br />style sheet fajla.<br />Kartica Script<br />Script Postavlja skriptovan kod na mesto gde se nalazi<br />kursor.<br />Noscript Postavlja oznaku noscript u HTML, ~ime<br />obezbe|uje da i web ~ita~i koji ne podr`avaju<br />skriptove mogu da prika`u stranicu.<br />Server-side Include Postavlja fajl koji sadr`i informacije za server.<br />Kartica Layout na liniji Insert omogu}ava da birate izme|u dva prikaza: Standard i<br />Layout (dugmad za biranje Standard i Layout prikaza se na Macintoshu nalaze na dnu<br />linije Insert). Prikaz Standard je prikaz u kojem }ete naj~e{}e raditi u Dreamweaveru.<br />Dva dugmeta na levoj strani od dugmadi Standard su Table i Layer, koji su aktivni u<br />prikazu Standard. Kada koristite Layout prikaz, dva dugmeta sa desne strane od dugmadi<br />Layout su aktivna (gornji red na Macintoshu). To su dugmad Draw Layout Cell<br />i Draw Layout Table. Prikaz Layout je obja{njen u ~asu 12, &quot;Dizajniranje web stranice<br />kori{}enjem tabela&quot; i u ~asu 14, &quot;Kori{}enje dinami~kog HTML-a i slojeva&quot;. Za<br />sada }emo ostati u prikazu Standard.<br />Paleta sa alatkama<br />Paleta sa alatkama omogu}ava brz pristup va`nim komandama. Ako ona nije vidljiva u<br />prozoru Document, odaberite komandu Toolbar iz menija View i opciju Document.<br />Tri dugmeta na levoj strani palete sa alatkama omogu}avaju biranje izme|u prikaza<br />Code, Design i kombinovanog prikaza Code i View (prikazano na slici 1.4). Kada je<br />aktivan prikaz Code (prikaz podeljenog ekrana), dugme Refresh Design View<br />omogu}ava da u prikazu Design odmah vidite rezultate promena koje ste napravili u<br />kodu u prozoru Document.<br />^as 1<br />16<br />Napomena<br />Dugme Live Data View omogu}ava da pregledate podatke iz baze podataka u<br />okviru Dreamweavera kada pravite dinami~ke web stranice.<br />Pored dugmadi koja kontroli{u prikaze, nalazi se tekstualno polje u kome se odre|uje<br />naziv web stranice (unapred odre|en (default) naziv, Untitled document, nije ba{ zanimljiv).<br />Postoje ~etiri padaju}a menija u paleti sa alatkama: meni File Management,<br />Preview/Debug in Browser, Code Navigation (aktivan samo u prikazu Code) i meni<br />View Options. Meni File Management sadr`i komande vezane za rad sa fajlovima, kao<br />npr. upore|ivanje fajlova na serveru i van njega. Ove komande su obja{njene u ~asu 21,<br />&quot;Odr`avanje i postavljanje projekta&quot;. Meni Preview/Debug in Browser omogu}ava brz<br />pristup listi web ~ita~a koje ste odredili za pregled web stranica. Web stranicu mo`ete<br />da pregledate i odstranite gre{ke u ~ita~u koriste}i komande iz ovog menija (za one koji<br />dobro poznaju JavaScript).<br />Dugme Reference startuje komplet uputstava za CSS (Cascading Style Sheets),<br />HTML i JavaScript. Ova uputstva sadr`e obja{njenja za HTML oznake, JavaScript<br />objekte i CSS stilove, kao i za jezike za skripte koje se izvr{avaju na serveru, ukoliko se<br />zainteresujete za to.<br />Dugme Code Navigation je aktivan samo kada radite u kodu. U prikazu Design, meni<br />Options omogu}ava da uklju~ite opcije za menjanje izgleda interfejsa, kao {to su okvir,<br />lenjir i pomo}na mre`a (borders, rulers i grid). U prikazu Code, meni Options<br />omogu}ava da izaberete izgled koda. Postoji i dodatna komanda u meniju View<br />Options, koja omogu}ava postavljanje panela Design View na gornju ili donju ivicu<br />prozora u prikazu Code.<br />Show Code view<br />Show Design view<br />Show Code and Design views<br />Live Data View<br />Document title<br />File Management menu<br />Preview/Debug in Browser menu<br />Refresh Design view<br />Reference<br />Code Navigation menu<br />View Options menu<br />Slika 1.4<br />Paleta sa alatkama<br />sadr`i komande koje<br />se naj~e{}e<br />upotrebljavaju u<br />Dreamweaveru<br />Upoznavanje sa Dreamweaverovim interfejsom<br />17<br />Statusna linija (The Status Bar)<br />Prozor Document u Dreamweaveru ima statusnu liniju u donjem delu ekrana, na kojoj<br />mo`ete odabirati HTML oznake (Tag Selector), padaju}i meni Window Size i statistiku<br />za preuzimanje sa Interneta, {to je prikazano na slici 1.5. Ove alatke su vrlo korisni dodaci<br />koje ima ova verzija Dreamweavera, a omogu}avaju produktivan i zanimljiv rad u dizajniranju<br />za Internet.<br />Tag Selector na levoj strani u dnu prozora Document omogu}ava lak pristup HTML<br />kodu koji defini{e parametre svih objekata na ekranu. Na primer, na slici 1.6 prikazana<br />je slika koja se nalazi u }eliji tabele. Tag Selector omogu}ava odabir bilo koje HTML<br />oznake koja kontroli{e taj objekat. Oznaka koja je trenutno odabrana je prikazana zadebljanim<br />slovima u Tag Selectoru.<br />tag selector<br />Window Size menu<br />Download statistics<br />Slika 1.5<br />Statusna linija sadr`i<br />alatke koje<br />omogu}avaju dobijanje<br />informacija o<br />web stranici<br />^as 1<br />18<br />Savet<br />Tag Selector }e biti detaljnije obja{njen u ~asu 16, &quot;Odre|ivanje skripta pomo}u<br />panela Behaviors&quot;, kada budete odre|ivali pona{anje objekata, kao i u ~asu 17,<br />&quot;Dodavanje naprednih pona{anja: Drag Layer&quot;. Ako dodeljujete pona{anje<br />oznakama, ponekad je te{ko odabrati oznake, posebno oznaku &lt;body&gt;, koja<br />sadr`i HTML kod ~itave stranice. Tag Selector omogu}ava da lako odaberete<br />kod za ~itavu stranicu pritiskom na oznaku &lt;body&gt;.<br />Padaju}i meni Window Size poma`e u odre|ivanju rezolucije ekrana za koji pravite<br />stranicu tako {to promenite veli~inu prozora Document. Va`no je da ono {to napravite<br />dobro izgleda i u niskoj (640x480) i u visokoj rezoluciji. Zato padaju}i meni Window<br />Size (Slika 1.7) omogu}ava brzu promenu veli~ine prozora Document, da biste videli<br />izgled stranice koju pravite u odre|enoj rezoluciji. Ovaj padaju}i meni mo`ete da<br />koristite samo kada je prozor Document pro{iren.<br />Viewable dimensions Slika 1.6 Screen resolution<br />Tag Selector<br />prikazuje sve HTML<br />oznake koje<br />kontroli{u odabrani<br />objekat<br />Upoznavanje sa Dreamweaverovim interfejsom<br />19<br />Zna~enje veli~ina koje mo`ete da odaberete u meniju Window Size:<br />l Veli~ine na desnoj strani (u uglastim zagradama) predstavljaju rezoluciju<br />ekrana.<br />l Brojevi na levoj strani su pretpostavljene dimenzije prozora web ~ita~a. One<br />su manje od rezolucije ekrana jer interfejs web ~ita~a (dugmad i meniji, na<br />primer) zauzima prostor. Na primer, kada je rezolucija monitora 640x480,<br />oblast za prikazivanje stranice je samo 536x196 piksela.<br />Savet<br />Mo`ete da promenite te veli~ine odabiraju}i poslednju komandu u pomo}nom<br />(pop-up) meniju Window Size, komandu Edit Sizes. Njome prelazite u kategoriju<br />Statu Bar u meniju Preferences, gde mo`ete da odredite `eljenu veli~inu<br />prozora.<br />Brzina konekcije je ~esto veoma va`na u ovom poslu, pa je dobro znati barem pribli`nu<br />veli~inu fajla i vreme koje je potrebno za u~itavanje stranice koju pravite. Procena vremena<br />za u~itavanje je prikazana u statusnoj liniji, a izra~unata je na osnovu modema koji je<br />odre|en u kategoriji Status Bar u meniju Preferences. Unapred odre|ena vrednost<br />(default) je 28.8 Kbps. Ovu vrednost mo`ete da promenite u 56 Kbps ili bilo koju drugu<br />vrednost, zavisno od Va{e procene brzine konekcije kojom raspola`u posetioci stranice<br />koju pravite. Dreamweaver pri izra~unavanju veli~ine fajla i vremena potrebnog za u~itavanje<br />stranice uzima u obzir slike i sve ostale elemente na stranici.<br />Window Size menu<br />Viewable dimensions Slika 1.7 Screen resolution<br />Meni Window Size<br />menja veli~inu<br />ekrana, prikazuju}i<br />kako }e stranica<br />izgledati u razli~itim<br />rezolucijama ekrana<br />^as 1<br />20<br />Savet<br />Ako `elite da napravite pre~ice do panela koje najvi{e koristite, uklju~ite<br />Launcher u meniju Preferences (u okviru osnovnog menija Edit). Odaberite<br />kategoriju Panels i izaberite polje za potvrdu pored Show Icons in Panels and<br />Launcher. Pojavi}e se linija Launcher na desnoj strani linije Status. U okviru<br />kategorije Panels mo`ete da odredite i koji paneli }e se nalaziti u liniji Launcher.<br />Paneli i inspectori<br />U panelima i inspectorima odre|ujete osobine, panele, pravite animacije i dodajete<br />funkcionalnost web stranicama. Ve}inu komandi u Dreamweaveru mo`ete da<br />izaberete na vi{e mesta, obi~no u menijima i panelima. Paneli u Dreamweaveru se dele<br />na panele sa karticama, pored prozora Document (Windows), i na lebde}e panele iznad<br />prozora Document (Macintosh).<br />Ako je panel otvoren, komanda za njegovo otvaranje je {tiklirana u meniju Windows.<br />Da biste zatvorili panel ili inspector ukinite znak za {tikliranje u meniju Window.<br />Nazivi komandi u meniju Window mogu biti malo druga~iji od imena panela ili<br />inspectora koje otvaraju. Na primer, komandom Properties se otvara Property<br />Inspector.<br />Panel ili inspector mo`ete da pro{irite ili skupite pritiskom na strelicu sa leve strane<br />naziva panela, kao {to je prikazano na slici 1.8. Odmah sa leve strane strelice nalazi se<br />alat za hvatanje (gripper). Mo`ete da odvojite panel alatom za hvatanje, odvla~e}i ga od<br />ostalih panela. Da biste vratili panel nazad, treba da panel dovu~ete do ostalih. U<br />trenutku pripajanja ostalim panelima, crna linija }e biti vidljiva na mestu gde }e se<br />panel smestiti ~im pustite taster mi{a.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />21<br />Da biste promenili dimenzije panela, povucite liniju izme|u panela i prozora Document.<br />Ako `elite da promenite dimenziju samo jednog panela, pomerite kursor na rub panela i<br />povucite njegove ivice do postizanja `eljene veli~ine. Korisnici Windowsa mogu da koriste<br />i dugme Collapse, prikazan na slici 1.9, koji se nalazi na liniji koja odvaja prozor<br />Document od panela, da bi njime pro{irivali i skupljali prostor sa panelima.<br />Property Inspector<br />Property Inspector prikazuje sve osobine trenutno odabranog objekta. On je kao<br />kameleon: izgleda}e druga~ije kada prikazuje osobine druga~ijeg objekta na web<br />stranici. Na primer, kada je odabran tekst na stranici, Property Inspector prikazuje<br />osobine teksta, kao {to je prikazano na slici 1.10. Na Slici 1.11 je odabrana slika na<br />stranici, pa Property Inspector prikazuje njene osobine.<br />Expander arrow<br />Slika 1.8 Gripper<br />Panele {irite i<br />skupljate uz pomo}<br />strelice<br />^as 1<br />22<br />Text properties Selected text<br />Expander icon<br />Slika 1.10<br />Property Inspector na<br />ovoj slici prikazuje<br />osobine teksta na<br />stranici<br />Slika 1.9 Collapse button<br />Dugme Collapse<br />uklanja prostor sa<br />panelima, {to ostavlja<br />vi{e mesta za prozor<br />Document<br />Upoznavanje sa Dreamweaverovim interfejsom<br />23<br />Property Inspector mo`ete da pro{irite uz pomo} ikonice Expander, da biste imali<br />pristup svim osobinama odabranog objekta. To ~inite pritiskom na strelicu za pro{irivanje<br />u donjem desnom uglu Property Inspectora. Na slici 1.10 strelica je usmerena<br />prema gore jer je Property Inspector pro{iren, a na slici 1.11 je usmerena prema dole<br />jer je Property Inspector su`en.<br />Padaju}i meniji<br />Nekim korisnicima je lak{e da rade sa komandama iz menija (ja li~no volim pre~ice sa<br />tastature), dok je nekima lak{e da pritiskaju ikonice. Za one prve, u ovom odeljku je<br />opisana organizacija menija u Dreamweaveru. Meniji File i Edit (slika 1.12) su standardni<br />meniji u ve}ini programa. Meni File sadr`i komande za otvaranje, snimanje, uvoz i<br />izvoz fajlova. Meni Edit sadr`i komande Cut, Copy i Paste, kao i komande Find and<br />Replace i Preferences. Mnogi elementi interfejsa Dreamweavera mogu biti promenjeni<br />kori{}enjem komande Preferences. Na Macintoshu se ta komanda nalazi u glavnom meniju<br />Dreamweaver.<br />Selected image<br />Image properties Expander icon<br />Slika 1.11<br />Property Inspector na<br />ovoj slici prikazuje<br />osobine slike na<br />stranici<br />^as 1<br />24<br />Meni View (slika 1.13) uklju~uje i isklju~uje prikaz sadr`aja head dela HTML koda,<br />nevidljivih elemenata, slojeva, tabela i granica frejmova, statusnu liniju i mapu slika.<br />Da li se neki od ovih elemenata trenutno prikazuje ili ne mo`ete da vidite po znaku za<br />{tikliranje sa leve strane komande. U ovom meniju se jo{ nalaze komande za<br />uklju~ivanje i isklju~ivanje lenjira (ruler) i pomo}ne mre`e (grid), prikazivanje plugina<br />i slike za preslikavanje (tracing image). Komanda Prevent Layer Overlaps se tako|e<br />nalazi u okviru ovog menija. Rad sa slojevima je opisan u ~asu 14.<br />Slika 1.13<br />Meni View sadr`i<br />komande za<br />uklju~ivanje i<br />isklju~ivanje prikaza<br />elemenata<br />Dreamweaverovog<br />interfejsa<br />Slika 1.12<br />Meniji File i Edit<br />sadr`e komande koje<br />su uobi~ajene u ve}ini<br />programa, kao i<br />nekoliko specifi~nih<br />Dreamweaverovih<br />komandi<br />Upoznavanje sa Dreamweaverovim interfejsom<br />25<br />Sadr`aj menija Insert (slika 1.14) otprilike odgovara sadr`aju linije Insert. Sve elemente<br />koji se nalaze u ovom meniju mo`ete da postavite na stranicu. Meni Modify<br />(slika 1.14) omogu}ava promenu osobina trenutno odabranog objekta.<br />Meni Text (slika 1.15) omogu}ava detaljno odre|ivanje osobina teksta na stranici. Za<br />one kojima kucanje teksta bez gre{aka predstavlja problem, u meniju Text se nalazi<br />pomo}: komanda Check Spelling. U ovom meniju se nalaze skoro sve opcije iz<br />Property Inspectora, kada je selektovan tekst na stranici. Mo`ete da odredite uvla~enje<br />paragrafa, napravite listu ili promenite font, {to je obja{njeno u slede}em ~asu. Meni<br />Commands (slika 1.15) sadr`i korisne komande, kao Clean Up HTML i Clean Up<br />Word HTML. Mo`ete snimiti i emitovati animaciju ili formatirati i urediti tabelu.<br />Mo`ete odrediti raspored boja i &quot;sko~iti&quot; u Macromedia Fireworks da biste optimizovali<br />sliku.<br />Slika 1.14<br />Meniji Insert i<br />Modify omogu}avaju<br />postavljanje i<br />promenu osobina<br />objekata<br />^as 1<br />26<br />Meni Site (slika 1.16) sadr`i komande koje uti~u na ~itav web sajt. Rad sa web sajtom<br />u Dreamweaveru je obja{njen u ~asu 3, &quot;Planiranje i definisanje projekta&quot; i ~asu 21.<br />Meni Windows (slika 1.16) sadr`i komande za pozivanje svih panela i inspectora u<br />Dreamweaveru.<br />Meni Help, osim komandi za pokretanje HTML help fajlova (fajlovi za pomo} korisnicima),<br />sadr`i komande koje omogu}avaju registraciju Dreamweavera na Internetu (Meni<br />Help je prikazan na slici 1.17). Ako `elite da proverite koju verziju Dreamweavera<br />koristite ili da pogledate serijski broj programa, pokrenite komandu About Dreamweaver<br />iz ovog menija.<br />Slika 1.16<br />Komande iz menija<br />Site slu`e za rad sa<br />~itavim web sajtom,<br />dok komande iz<br />menija Windows<br />slu`e za rad sa<br />panelima i<br />inspectorima.<br />Slika 1.15<br />Sve komande<br />potrebne za<br />odre|ivanje osobina<br />teksta nalaze se u<br />meniju Text. Meni<br />Commands sadr`i<br />komande za snimanje<br />animacija, sre|ivanje<br />HTML-a i formatiranje<br />i ure|ivanje<br />tabela. Mo}na stvar!<br />Upoznavanje sa Dreamweaverovim interfejsom<br />27<br />Kontekst meniji<br />U Dreamweaveru mo`ete na vi{e na~ina da odredite osobine objekata na web stranici.<br />Vrlo brzo }ete prona}i koji je od tih na~ina Vama najzgodniji. I kontekst meniji su<br />jedna od alternativa. Oni se pojavljuju kada pritisnete desni taster na mi{u (taster<br />Control i dugme na mi{u na Macintoshu) iznad nekog objekta u prozoru Document.<br />Sadr`aj menija zavisi od objekta. Na primer, slika 1.18 prikazuje kontekst meni koji se<br />pojavljuje kada pritisnete desno dugme na mi{u iznad tabele.<br />Context menu<br />Slika 1.18 Table commands<br />Kontekst meni za<br />tabelu omogu}ava<br />brzo menjanje<br />osobina tabele<br />Slika 1.17<br />Meni Help sadr`i<br />brojne komande za<br />pru`anje pomo}i<br />korisnicima<br />^as 1<br />28<br />Nevidljivi objekti<br />Neki objekti koje postavljate na web stranice koje pravite ne treba da budu vidljivi<br />posetiocima sajta. Po{to je Dreamweaver WYSIWYG (What You See Is What You<br />Get) program, Macromedia je morala da prona|e na~in da dok radite vidite i nevidljive<br />objekte na stranici, kao {to su npr. named anchors ili formulari. Komandu Invisible<br />Elements, pomo}u koje uklju~ujete i isklju~ujete prikaz nevidljivih elemenata, sadr`i<br />meni View.<br />Kada je komanda Invisible Elements uklju~ena, kao {to je prikazano na slici 1.19, u<br />Dreamweaveru }ete videti ta~kasti okvir crvene boje oko formulara i oznake koje<br />predstavljaju named anchore (izgledaju kao mala sidra na zlatnom {titu). Odaberite te<br />oznake i po `elji pregledajte ili promenite osobine objekata u Property Inspectoru.<br />Ako Vam je potrebna pomo}...<br />Odaberite komandu Using Dreamweaver iz menija Help da biste pokrenuli fajlove za<br />pomo} korisnicima u Dreamweaveru. Na levoj strani stranice je prikazan sadr`aj,<br />indeks pojmova, alatka za pretra`ivanje i naj~e{}e pregledana uputstva. Na desnoj<br />strani se prikazuje tekst onoga {to odaberete na levoj strani. Dugmad u obliku strelice<br />Next i Previous omogu}avaju lak prelaz sa jedne na drugu temu.<br />Savet<br />Dok se upoznajete sa Dreamweaverom, verovatno }ete ~esto koristiti dugmad<br />Next i Previous. Teme su grupisane, a informacije o jednoj temi se ~esto nalaze<br />na vi{e stranica. Kada pregledate sve {to Vas je zanimalo o jednoj temi, lako<br />}ete pre}i na drugu.<br />Invisible elements<br />Slika 1.19<br />Web stranica sa<br />prikazanim<br />nevidljivim<br />elementima<br />omogu}ava<br />odabiranje i menjanje<br />osobina objekata na<br />web stranici. Osobine<br />se menjaju u<br />Property Inspectoru.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />29<br />Kartica Contents (sadr`aj) u Windowsu prikazuje sadr`aj fajlova za pomo} korisnicima.<br />Sadr`aj je podeljen na vi{e tema. Kada odaberete jednu od tema, pojavljuje se<br />spisak podtema. Dugme Index omogu}ava pregled svih tema pore|anih abecednim<br />redosledom. Ako `elite da pretra`ujete, pritisnite karticu Search. Kartica Favorites<br />omogu}ava Vam da napravite sopstvenu listu omiljenih tema pritiskom na dugme Add<br />na dnu prozora. Na Macintoshu je rad sa menijem Help malo druga~iji, a prozor Help<br />Viewer je prikazan na slici 1.20. On omogu}ava dva razli~ita prikaza raspolo`ivih tema,<br />koje birate pritiskom na linkove Index ili Table of Contents.<br />Najlak{i na~in da dobijete pomo} u vezi odre|enog objekta je da startujete konteksnu<br />pomo}. Kada je selektovan neki objekat na stranici (i kada vidite njegove osobine u<br />Property Inspectoru), kliknite na ikonicu Help u Property Inspectoru, prikazanu na<br />slici 1.21. Na taj na~in Dreamweaver }e Vam prikazati informacije u vezi odabranog<br />objekta.<br />Slika 1.20<br />Na Macintoshu u<br />fajlovima za pomo}<br />korisnicima mo`ete<br />da birate izme|u<br />prikaza Index ili<br />Table of Contents<br />^as 1<br />30<br />Otkrivanje novih mogu}nosti<br />Dreamweavera MX<br />O~igledno je da firma Macromedia vodi ra~una o `eljama web dizajnera, mo`da i zato<br />{to se na web sajtu Macromedie u velikoj meri koriste ve{tine u dizajniranju web stranica,<br />na adresi www.macromedia.com. Postoji mnogo novina u Dreamweaveru MX, ali<br />sam se odlu~ila da Vam predstavim samo neke.<br />Najva`nije nove mogu}nosti Dreamweavera MX obuhvataju:<br />l Obuhva}ene su mogu}nosti programaDDDreamweaver UltraDev<br />Dreamweaver MX omogu}ava rad sa server-side skriptama, {to je do sada<br />bilo mogu}e samo u posebnom programu, Dreamweaver UltraDevu.<br />Mo`ete da koristite ASP, JSP, CFML ili PHP kodiranje web stranica.<br />l Gotovi dizajni web stranicaDDKori{}enjem gotovih dizajna web stranica<br />koje dobijate sa Dreamweaverom, mo`ete zna~ajno da u{tedite na vremenu.<br />l Site Definition WizardDDPomo}u ovog dijaloga mo`ete brzo da defini{ete<br />sajt. Ina~e ne koristim ovakve opcije u drugim programima, ali ova mi se<br />zaista dopada.<br />l Panel AnswersDDOmogu}ava lako povezivanje sa Macromedia Support<br />Centerom (centrom za podr{ku Macromedie), gde mo`ete da prona|ete<br />uputstva za rad sa Dreamweaverom.<br />Help icon<br />Slika 1.21<br />Ikonica Help u<br />Property Inspectoru<br />omogu}ava pristup<br />osobinama trenutno<br />selektovanog objekta.<br />U ovom slu~aju,<br />selektovana je tabela.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />31<br />l File ExplorerDDOmogu}ava pretra`ivanje fajlova koji se nalaze i izvan<br />definisanog web sajta.<br />l Izve{taji u vezi propisa iz Rezolucije 508DDOmogu}ava dobijanje informacija<br />i izve{taja u vezi prilago|enosti web sajta potrebama osoba sa umanjenim<br />fizi~kim mogu}nostima.<br />l JavaScript pomo}ni (pop-up) menijiDDOmogu}ava pravljenje JavaScript<br />pop-up menija direktno u Dreamweaveru.<br />Zaklju~ak<br />U ovom ~asu ste se upoznali sa prozorom Document i njegovim elementima, kao i sa<br />menijima, statusnom linijom i raznim panelima u okviru Dreamweaverovog interfejsa.<br />Upoznali ste se sa raznim vrstama panela, kao i sa komandama iz menija. Prou~ili ste<br />Property Inspector i nau~ili kako da ga koristite. Upoznali ste se i sa novim mogu}nostima<br />Dreamweavera.<br />Pitanja i odgovori<br />P Kako da pro{irim prozor Document do maksimalne veli~ine?<br />O Pro{irite prozor Document pomo}u dugmeta Maximize. Ako vam je potrebno<br />jo{ prostora u vertikalnoj ravni, mo`ete da &quot;spustite&quot; Property Inspector i<br />liniju Insert. Ako `elite da pro{irite prozor Document u horizontalnoj ravni,<br />uklonite grupe panela. Na taj na~in }ete dobiti maksimalan prostor za pravljenje<br />web stranica.<br />P Dosadilo mi je da postavljam kursor iznad dugmeta na liniji Insert, da bih<br />saznao koja je njihova funkcija! Zar ne postoji lak{i na~in za to, barem dok<br />se bolje ne upoznam sa komandama?<br />O Unapred je odre|eno da Dreamweaver prikazuje samo ikonice na liniji<br />Insert, ali to mo`ete da promenite u dijalogu Preferences. Kliknite na kategoriju<br />General u dijalogu Preferences. U padaju}em meniju Insert Panel<br />odaberite opciju Icons and Text. Pored ikonica na liniji Insert }e se pojaviti<br />tekstualni natpisi.<br />P Za{to su tasteri Tables i Layers &quot;bledi&quot; na liniji Insert?<br />O Ne mo`ete da koristite komande Tables i Layers, dok se nalazite u prikazu<br />Layout. Ako `elite da koristite te tastere, morate da pre|ete u prikaz<br />Standard. Na kartici Layout, u okviru linije Insert, se nalaze dugmad za<br />prelaz iz jednog u drugi prikaz (na Macintoshu se te komande nalaze na dnu<br />linije Insert).<br />^as 1<br />32<br />Radionica<br />Radionica sadr`i kviz pitanja i aktivnosti pomo}u kojih }ete utvrditi sve {to ste nau~ili<br />u ovom ~asu. Ako bude potrebno, odgovore na postavljena pitanja mo`ete pro~itati<br />odmah posle pitanja.<br />Kviz<br />1. Koje menije treba da koristite da biste otvorili panele u Dreamweaveru?<br />2. Koja tri standardna elementa se nalaze u statusnoj liniji u prozoru<br />Document?<br />3. Da li je Dreamweaver HTML editor, program za autoring ili program za<br />rad sa web sajtovima?<br />Odgovori<br />1. Meni Window omogu}ava uklju~ivanje ili isklju~ivanje svih panela i inspectora.<br />Oznaka za {tikliranje se nalazi pored komande koja je uklju~ena.<br />2. Linija Status sadr`i Tag Selector, meni Window Size i statistiku za preuzimanje<br />sa Interneta. Ukoliko `elite, mo`ete da uklju~ite i prikaz linije<br />Launcher pomo}u komande Preferences.<br />3. Pardon, ovo je trik pitanje! Dreamweaver je sve {to je nabrojano u pitanju.<br />Ve`be<br />1. Odaberite komandu Preferences iz menija Edit. Ozna~ite kategoriju General<br />i odaberite opciju Icons and Text u padaju}em meniju Insert Panel. Kliknite<br />na dugme OK. Primeti}ete da se pored ikonica u liniji Insert sada nalazi i<br />tekst.<br />2. Eksperimenti{ite sa pro{irivanjem i skupljanjem panela. Promenite veli~inu<br />panela. Istra`ujte menije na panelima, koji se nalaze u gornjem desnom uglu<br />panela.<br />3. Kliknite na karticu Forms u okviru linije Insert. Ubacite formular u prozor<br />Document. Ako ne vidite formular, uklju~ite prikaz nevidljivih elemenata.<br />Kliknite van formulara na stranici i poku{ajte da ga selektujete. Primeti}ete<br />da ste u tome uspeli kada budete videli njegove osobine prikazane u<br />Property Inspectoru. Poku{ajte da selektujete oznaku form u Tag Selectoru. Generalna 2009-01-02T01:46:51Z digitalniandjeo http://digitalniandjeo.blog.rs/blog/digitalniandjeo/generalna/2009/01/02/uvod-u-dreamweawer <br />Upoznavanje sa Dreamweaverom<br />Dreamweaver je kompletan program za web stvarala{tvo-HTML (Hypertext Markup<br />Language) editor, program za autorstvo i stvaranje dinami~kih web stranica. Sve su te<br />funkcije sadr`ane u jednom programu. Web stranice se prave kori{}enjem HTML-a,<br />ali se skoro sve mo`e uraditi bez ikakvog znanja HTML-a. Ako `elite da napravite web<br />stranice profesionalnog kvaliteta, uklju~uju}i i pravljenje skripta, Dreamweaver Vam<br />upravo to omogu}ava.<br />HTML je jezik kojim se prave web stranice. Sastoji se od uparenih oznaka sadr`anih u<br />okviru uglastih zagrada (&lt;&gt;). Oznake obuhvataju objekte na web stranicama, kao na pr.<br />tekst, ili stoje same. Na primer, HTML kod, koji ~ini tekst zadebljanim je slede}i:<br />&lt;b&gt;zadebljani tekst&lt;/b&gt;. Ove oznake su primer uparenih oznaka. Oznaka kojom se<br />zavr{ava neka celina uvek po~inje kosom crtom. Ostale oznake, kao na primer oznaka za<br />postavljanje slike na web stranicu, su jednostruke oznake: &lt;img src=&quot;smile.gif&quot;&gt;.<br />Dreamweaver je WYSIWYG (what you see is what you get-ono {to vidi{ je ono {to<br />dobija{) web editor, koji je u isto vreme veoma mo}an i veoma jednostavan za upotrebu.<br />Omogu}ava stvaranje novih web stranica, ali i uvoz i editovanje ve} postoje}ih.<br />Dreamweaver ne}e promeniti ni poremetiti kod web stranice. Jedna od najpopularnijih<br />mogu}nosti Dreamweavera je oduvek bila mogu}nost da ostavi ve} napravljene<br />web sajtove nepromenjenima. Programeri Macromedie, kompanije koja je napravila<br />Dreamweaver, nazivaju tu mogu}nost &quot;Roundtrip HTML&quot;.<br />Dreamweaver je tako|e i program za kompletno autorstvo. To zna~i da on omogu}ava<br />obuhvatanje grupe stranica koje sadr`e interaktivnost i animacije. Na taj na~in se mogu<br />napraviti kompletne aplikacije. Iako Dreamweaver mo`e da se koristi kao obi~an<br />HTML editor, on mo`e da se koristi i za stvaranje multimedijalnih aplikacija. Mo`ete,<br />naravno, samo da editujete HTML uz pomo} Dreamweavera, ali i da osmislite i<br />napravite u njemu kompletan do`ivljaj za korisnike sajta.<br />Dreamweaver MX omogu}ava pravljenje dinami~kih web stranica, jer obuhvata<br />funkcije programa Macromedia Dreamweaver UltraDev 4. Dinami~ke web stranice se<br />stvaraju kori{}enjem skripta koje se izvr{avaju na serveru, a pri tome je neophodno da<br />razumete tehnologiju servera i druge napredne funkcije ovog i drugih programa. Iako<br />te funkcije nisu opisane u ovoj knjizi, to ne zna~i da ne treba da postanu deo va{ih<br />interesa. Pogledajte Dodatak B i prona|ite u njemu knjige i web sajtove koji sadr`e<br />uputstva za pravljenje dinami~kih web stranica u Dreamweaveru. U ovoj knjizi su<br />navedena neka osnovna uputstva, ali }ete iz nje nau~iti kako da napravite samo obi~ne<br />web stranice (one koje ne sadr`e skripte koje se izvr{avaju na serveru).<br />4<br />Instaliranje programa<br />Dreamweaver se instalira na standardan na~in u Windows ili Macintosh okru`enju.<br />Program za instaliranje pravi sve neophodne direktorijume i fajlove koji su neophodni<br />za rad Dreamweavera. Prilikom instalacije Dreamweavera tako|e }e se instalirati<br />Macromedia Extension Manager, program koji poma`e u instaliranju dodataka za<br />Dreamweaver preuzetih sa Interneta.<br />Hardverski i softverski zahtevi<br />U Tabeli 1.1 je naveden hardver i softver koji je potreban za rad Dreamweavera.<br />Tabela 1.1 Hardverski i softverski zahtevi za rad Dreamweavera<br />Windows 95/NT Macintosh<br />Intel Pentium II procesor ili Power Mac G3 ili bolji<br />ekvivalentno tome 166+ MHz<br />Windows 98 SE Windows 2000 Mac OS 9.1, 9.2.1 ili OS 10.1<br />Windows Me, Windows NT MRJ 2.2 (za Flash dugmad)<br />ili Windows XP<br />96 MB RAM (preporu~ljivo 128) 96 MB RAM (preporu~ljivo 128)<br />275 MB slobodne 275 MB slobodne memorije na hard disku<br />memorije na hard disku<br />256 kolor monitor 256 kolor monitor rezolucije 800x600<br />rezolucije 800x600 (preporu~ljivo 1024x768, milioni boja)<br />(preporu~ljivo 1024x768,<br />milioni boja)<br />Netscape Navigator ili Internet Netscape Navigator ili Internet Explorer 4.0<br />Explorer 4.0 ili novije verzije ili novije verzije<br />Pribavljanje demo verzije Dreamweavera<br />Macromedia je kompanija koja pravi i prodaje Dreamweaver. Oni nude demo verziju<br />ovog programa koju mo`ete isprobati i odlu~iti da li `elite da ga kupite. Demo verziju<br />mo`ete preuzeti sa Interneta na adresi www.macromedia.com/software/<br />dreamweaver/trial/.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />5<br />Upoznavanje sa radnom povr{inom u<br />Dreamweaveru<br />Kada prvi put pokrenete Dreamweaver u Windowsu mo`ete da birate izme|u radne<br />povr{ine Dreamweavera MX ili Dreamweavera 4, prethodne verzije ovog programa. Oni<br />koji su ve} navikli na rad u Dreamweaveru 4 verovatno }e izabrati da koriste interfejs tog<br />programa. Ja svim korisnicima savetujem da isprobaju rad u Dreamweaveru MX. Svi<br />primeri i obja{njenja u ovoj knjizi se odnose na rad u Dreamweaver MX okru`enju.<br />Ako ste ve} izabrali izgled radne povr{ine programa, ali biste `eleli da ga promenite, to<br />mo`ete da uradite komandom Preferences u meniju Edit. Odaberite kategoriju<br />General, prikazanu na slici 1.1, i kliknite na dugme Change Workspace. Pojavi}e se<br />okvir za dijalog koji ste videli prilikom prvog startovanja programa, u kojem }ete mo}i<br />da promenite izgled radne povr{ine. Polje za potvrdu HomeSite/Coder-Style<br />omogu}ava da izaberete da se paneli nalaze na levoj ili desnoj strani ekrana. Korisnici<br />na Macintoshu nemaju mogu}nost biranja ni menjanja izgleda radne povr{ine, a<br />Dreamweaver MX }e uvek imati radnu povr{inu sa &quot;lebde}im&quot; panelima.<br />Pokrenite Dreamweaver MX i po~nite sa prou~avanjem interfejsa. Verovatno }ete<br />odmah ugledati Welcome prozor, koji sadr`i nekoliko linkova za pribavljanje informacija<br />o Dreamweaveru MX. Kada budete imali vremena, istra`ite te linkove. Za sada<br />zatvorite taj prozor; mo`ete ponovo da ga otvorite komandom Welcome iz menija<br />Help.<br />Slika 1.1<br />Mo`ete da birate<br />izme|u<br />Dreamweaver MX i<br />Dreamweaver 4<br />radne povr{ine<br />komandom<br />Preferences<br />^as 1<br />6<br />Kada pokrenete Dreamweaver MX za Windows, primeti}ete prazno belo polje pod<br />nazivom prozor Document. Na njemu je prikazana web stranica koju pravite onako kako }e<br />izgledati u web ~ita~u. Prozor Document je sa desne strane oivi~en panelima, prikazanim<br />na slici 1.2. Ti paneli Vam omogu}avaju da modifikujete i organizujete elemente web<br />stranice. Prozor Document, paneli i drugi elementi koje }ete uskoro upoznati, grupisani<br />su zajedno u interfejsu.<br />Kada pokrenete Dreamweaver MX za Macintosh, tako|e }ete videti Document prozor,<br />prikazan na slici 1.3. Verzija Dreamweavera MX za Macintosh sadr`i panele koji &quot;lebde&quot;<br />iznad prozora Document. Lebde}i paneli mogu da se postave na bilo koje mesto na<br />ekranu. Verzije Dreamweavera MX za Windows i Macintosh imaju male razlike u izgledu,<br />ali imaju potpuno iste funkcije i mogu}nosti.<br />Paleta sa alatima Linija Insert Prozor Document Grupa Panel<br />Status linija<br />Slika 1.2<br />Radna povr{ina<br />Dreamweavera MX<br />sadr`i prozor<br />Document i panele<br />Upoznavanje sa Dreamweaverovim interfejsom<br />7<br />Prozor Document<br />Prozor Document sadr`i naslovnu liniju, liniju menija, liniju Insert (Windows) i paletu<br />sa alatkama u gornjem delu. Naslovna linija sadr`i ime programa-Macromedia<br />Dreamweaver MX-naziv fajla i naziv web stranice koja je trenutno otvorena. Ovaj<br />naziv }e se pojaviti i kada stranica bude otvorena u web ~ita~u. Osobine stranice i na~in<br />odre|ivanja naziva stranice su obja{njeni u slede}em ~asu. Naziv fajla se nalazi sa<br />desne strane i uokviren je uglastim zagradama.<br />Linija Insert (Insert Bar)<br />Linija Insert se nalazi direktno ispod linije menija u Windowsu, a na Macintoshu je<br />&quot;lebde}i&quot; panel. Sadr`i dugmad za postavljanje elemenata web stranice, kao {to su slike,<br />tabele, formulari i hiperlinkovi. Mo`ete da kliknete ili prevu~ete dugme da biste<br />postavili objekat na web stranicu.<br />Insert linija sadr`i veliki broj kartica, koje Vam omogu}avaju da izaberete vrstu objekata.<br />Po unapred definisanom pode{avanju postoji dvanaest kartica: Common, Layout,<br />Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script i<br />Application. Da biste videli koji objekti se nalaze u okviru neke kartice, kliknite na karticu.<br />Na Macintoshu postoji meni u gornjem desnom uglu panela Insert, koji prikazuje<br />listu razli~itih kategorija objekata. Mo`ete da promenite orijentaciju (horizontalnu ili<br />vertikalnu) lebde}eg panela Insert pritiskanjem ikonice Orientation u donjem desnom<br />uglu panela.<br />Linija Insert Prozor Document Paleta sa Slika 1.3 alatima Grupa Panel<br />Radna povr{ina<br />Dreamweavera MX<br />na Macintoshu sadr`i<br />panele koji &quot;lebde&quot;<br />iznad prozora<br />Document<br />^as 1<br />8<br />U tabeli 1.2 su nabrojani i opisani svi objekti koji se nalaze na liniji Insert. Ukratko su<br />i opisani svi objekti na liniji Insert, osim objekata na kartici Application, jer se oni<br />koriste isklju~ivo za stvaranje dinami~kih web stranica. Objekti na kartici Layout se<br />nalaze u donjem delu lebde}eg panela Insert na Macintoshu. Dok prou~avate ovu listu,<br />upoznajte se sa tipovima objekata i sadr`ajem koji mo`ete dodati web stranicama u<br />Dreamweaveru.<br />Tabela 1.2 Linija Insert<br />Ikona Ime ikone Opis<br />Kartica Common<br />Hyperlink Postavlja hiperlink sa tekstom i pozicijom linka.<br />E-mail Link Postavlja hiperlink koji pokre}e praznu e-mail<br />poruku adresiranu na unapred odre|enu e-mail<br />adresu.<br />Named Anchor Postavlja named anchor na mesto gde se nalazi<br />kursor. Named anchor slu`i za postavljanje<br />hiperlinka u okviru istog fajla.<br />Table Postavlja tabelu na mesto gde se nalazi kursor.<br />Layer Pretvara kursor u alatku marquee za crtanje sloja<br />u prozoru Document.<br />Image Postavlja sliku na mesto gde se nalazi kursor.<br />Image Placeholder Postavlja dr`a~ slike.<br />Fireworks HTML Postavlja HTML izvezen iz Macromedia Fireworksa<br />na mesto gde se nalazi kursor<br />Flash Postavlja Macromedia Flash film na mesto gde se<br />nalazi kursor<br />Rollover Image Zahteva dve slike. Jedna slika stalno stoji na<br />stranici, a druga se pojavljuje kada korisnik pre|e<br />kursorom preko nje na stranici.<br />Navigation Bar Postavlja grupu sli~ica-dugmadi koja se koriste za<br />navigaciju kroz web sajt.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />9<br />Horizontal Rule Postavlja horizontalni kliza~.<br />Date Postavlja trenutni datum na mesto gde se nalazi<br />kursor.<br />Tabular Data Postavlja tabelu na mesto gde se nalazi kursor, sa<br />podacima iz odabranog fajla.<br />Comment Postavlja komentar.<br />Tag Chooser Omogu}ava odabir oznake iz menija sa svim<br />raspolo`ivim oznakama.<br />Kartica Layout<br />Table Postavlja tabelu na mesto gde se nalazi kursor (isto<br />kao i u kartici Common).<br />Layer Pretvara kursor u krsti} kojim se crta sloj u<br />prozoru Document (isto kao i u kartici Common).<br />Standard view Prikazuje tabelu u standardnom izgledu.<br />Layout view Prikazuje tabelu sa }elijama koje se mogu odabrati.<br />Tabela je uokvirena zelenom, a }elije plavom<br />bojom.<br />Draw Layout Table Crta tabelu u prikazu Layout.<br />Draw Layout Cell Crta }eliju tabele u prikazu Layout.<br />Kartica Text<br />Font Tag Editor Otvara prozor Font Tag Editor za pode{avanje<br />oznake za font.<br />Bold Ozna~eni tekst ~ini zadebljanim.<br />Italic Ozna~eni tekst ~ini zakrivljenim.<br />Strong Ozna~enom tekstu dodeljuje osobinu strong<br />(zadebljan).<br />Emphasis Ozna~eni tekst ~ini nagla{enim (zakrivljenim).<br />^as 1<br />10<br />Paragraph Ozna~eni tekst pretvara u poseban pasus.<br />Blockquote Ozna~enom tekstu dodeljuje poravnanje<br />blockquote.<br />Preformatted Ozna~eni tekst ~ini preformatiranim.<br />Heading 1 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 1.<br />Heading 2 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 2.<br />Heading 3 Ozna~enom tekstu dodeljuje status naslova<br />veli~ine 3.<br />Unordered List Ozna~eni tekst pretvara u neure|enu bulleted listu.<br />Ordered List Ozna~eni tekst pretvara u ure|enu<br />numerisanu listu.<br />List Item Ozna~eni tekst ubacuje u ure|enu ili neure|enu<br />listu.<br />Definition List Pravi definisanu listu.<br />Definition Term Pravi definisani pojam u okviru definisane liste.<br />Definition Pravi definisani opis u okviru definisane<br />Description liste.<br />Abbreviation Dodaje tekst na skra}enice radi boljeg<br />pronala`enja u web pretra`iva~ima.<br />Acronym Dodaje kompletan tekst akronimu radi boljeg<br />pronala`enja u web pretra`iva~ima.<br />Kartica Tables<br />Table Postavlja tabelu na mesto gde se nalazi kursor (isto<br />kao i u kartici Common).<br />Table Tag Postavlja oznaku table (vidljivo samo u prikazu<br />Code).<br />Upoznavanje sa Dreamweaverovim interfejsom<br />11<br />Table Row Postavlja oznaku tr (vidljivo samo u prikazu Code).<br />Table Header Postavlja oznaku th (vidljivo samo u prikazu Code).<br />Table Data Postavlja oznaku td (vidljivo samo u prikazu Code).<br />Caption Postavlja oznaku caption (vidljivo samo u prikazu<br />Code).<br />Kartica Frames<br />Left Frame Pravi frejm na levoj strani od onog u kome se<br />trenutno nalazi kursor.<br />Right Frame Pravi frejm na desnoj strani od onog u kome se<br />trenutno nalazi kursor.<br />Top Frame Pravi frejm iznad onog u kome se trenutno nalazi<br />kursor.<br />Bottom Frame Pravi frejm ispod onog u kome se trenutno nalazi<br />kursor.<br />Bottom and Pravi frejm na levoj strani od onog u kome<br />Nested Left se trenutno nalazi kursor i dodaje jo{ jedan frejm<br />ispod.<br />Bottom and Pravi frejm na desnoj strani od onog u kome se<br />Nested Right trenutno nalazi kursor i dodaje jo{ jedan frejm<br />ispod.<br />Left and Nested Pravi frejm ispod onog u kome se trenutno nalazi<br />Bottom kursor i dodaje jo{ jedan frejm na levoj strani.<br />Right and Nested Pravi frejm ispod onog u kome se trenutno nalazi<br />Bottom kursor i dodaje jo{ jedan frejm na desnoj strani.<br />Top and Bottom Pravi frejm ispod i iznad onog u kome se trenutno<br />nalazi kursor.<br />Left and Pravi frejm iznad onog u kome se trenutno nalazi<br />Nested Top kursor i dodaje frejm na levoj strani.<br />Right and Pravi frejm iznad onog u kome se trenutno nalazi<br />Nested Top kursor i dodaje frejm na desnoj strani.<br />Top and Pravi frejm na levoj strani od onog u kome se<br />Nested Left trenutno nalazi kursor i dodaje frejm iznad.<br />^as 1<br />12<br />Top and Nested Pravi frejm na desnoj strani od onog u kome se<br />Right trenutno nalazi kursor i dodaje frejm iznad.<br />Frameset Postavlja oznaku frameset (vidljivo samo u prikazu<br />Code).<br />Frame Postavlja oznaku fram (vidljivo samo u prikazu<br />Code)<br />Floating Frame Postavlja oznaku iframe (vidljivo samo u prikazu<br />Code).<br />No Frames Postavlja oznaku noframes u HTML kod, da bi<br />web ~ita~i koji ne podr`avaju frejmove mogli da<br />prika`u stranicu.<br />Kartica Forms<br />Form Postavlja formular na mesto gde se nalazi kursor.<br />Text Field Postavlja tekstualno polje.<br />Hidden Field Postavlja skriveno polje.<br />Textarea Postavlja oblast za unos teksta.<br />Check Box Postavlja polje za potvrdu.<br />Radio Button Postavlja okruglo polje za odabir.<br />Radio Group Postavlja grupu povezanih okruglih polja za odabir.<br />List/Menu Postavlja padaju}i meni.<br />Jump Menu Postavlja meni Jump, uobi~ajen alat za<br />omogu}avanje korisnicima da posete vi{e<br />hiperlinkova.<br />Image Field Postavlja image field na sliku, {to omogu}ava da se<br />slika pona{a kao dugme.<br />File Field Postavlja file field, {to omogu}ava da korisnik<br />po{alje fajl na server.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />13<br />Button Postavlja dugme.<br />Label Dodeljuje natpis odabranom elementu formulara.<br />Fieldset Grupi{e polja u formularu da bi ona bila dostupna<br />nevizuelnim web ~ita~ima.<br />Kartica Templates<br />Make Template Pravi od otvorene stranice {ablon (template) za<br />Dreamweaver.<br />Make Nested Pravi od otvorene stranice ugne`|eni {ablon za<br />Template Dreamweaver.<br />Editable Region Odre|uje u kreiranom {ablonu oblast koja se<br />mo`e editovati.<br />Optional Region Postavlja opcionu oblast u {ablon, koja mo`e da se<br />napravi vidljivom ili nevidljivom.<br />Repeating Region Postavlja oblast koja se ponavlja u {ablon.<br />Editable Postavlja u {ablon opcionu oblast koja se<br />Optional Region mo`e editovati.<br />Repeating Table Postavlja tabelu koja se ponavlja u {ablon i<br />odre|uje koja polja se mogu editovati.<br />Kartica Characters<br />Line Break Postavlja prekid reda (&lt;BR&gt;) na mesto gde se<br />nalazi kursor.<br />Nonbreaking Space Postavlja razmak koji ne dopu{ta razdvajanje.<br />Left Quote Postavlja levi interpunkcijski znak navoda.<br />Right Qoute Postavlja desni interpunkcijski znak navoda.<br />Em-Dash Postavlja crticu.<br />Pound Postavlja valutni simbol funte.<br />Yen Postavlja valutni simbol jena.<br />^as 1<br />14<br />Euro Postavlja valutni simbol evra.<br />Copyright Postavlja simbol za autorsko pravo.<br />Registered Postavlja simbol za patentiran za{titni znak.<br />Trademark Postavlja simbol za za{titni `ig.<br />Other Character Otvara meni sa specijalnim karakterima sa kojeg<br />mo`ete odabrati sve ostale ponu|ene karaktere.<br />Kartica Media<br />Flash Postavlja Macromedia Flash film na mesto gde se<br />nalazi kursor.<br />Flash Button Postavlja neki od ponu|enih Macromedia Flash<br />dugmadi na mesto gde se nalazi kursor.<br />Flash Text Postavlja Flash tekst koji mo`ete da editujete i pravi<br />fajl Flash.<br />Shockwave Postavlja Shockwave film (Macromedia Director<br />film pripremljen za Internet) na mesto gde se nalazi<br />kursor.<br />Applet Postavlja Java skript na mesto gde se nalazi kursor.<br />Param Postavlja oznaku koja Vam omogu}ava da upi{ete<br />parametre za skript ili ActiveX.<br />ActiveX Postavlja ActiveX na mesto gde se nalazi kursor.<br />Plugin Postavlja bilo koji fajl koji zahteva plug-in za web<br />~ita~.<br />Kartica Head<br />Meta Postavlja meta oznake na web stranicu.<br />Keywords Postavlja klju~ne re~i u meta oznake da bi stranica<br />koju pravite bila lak{e identifikovana na Internetu.<br />Description Postavlja Description meta oznaku.<br />Refresh Postavlja meta oznaku Refresh na web stranicu.<br />Ova oznaka odre|uje za koliko sekundi }e web<br />Upoznavanje sa Dreamweaverovim interfejsom<br />15<br />stranica pre}i na drugu web stranicu ili se ponovo<br />u~itati.<br />Base Postavlja oznaku Base na web stranicu, {to<br />omogu}ava da odredite po~etni URL ili ciljani<br />prozor.<br />Link Postavlja adresu spoljnog fajla, obi~no skripta ili<br />style sheet fajla.<br />Kartica Script<br />Script Postavlja skriptovan kod na mesto gde se nalazi<br />kursor.<br />Noscript Postavlja oznaku noscript u HTML, ~ime<br />obezbe|uje da i web ~ita~i koji ne podr`avaju<br />skriptove mogu da prika`u stranicu.<br />Server-side Include Postavlja fajl koji sadr`i informacije za server.<br />Kartica Layout na liniji Insert omogu}ava da birate izme|u dva prikaza: Standard i<br />Layout (dugmad za biranje Standard i Layout prikaza se na Macintoshu nalaze na dnu<br />linije Insert). Prikaz Standard je prikaz u kojem }ete naj~e{}e raditi u Dreamweaveru.<br />Dva dugmeta na levoj strani od dugmadi Standard su Table i Layer, koji su aktivni u<br />prikazu Standard. Kada koristite Layout prikaz, dva dugmeta sa desne strane od dugmadi<br />Layout su aktivna (gornji red na Macintoshu). To su dugmad Draw Layout Cell<br />i Draw Layout Table. Prikaz Layout je obja{njen u ~asu 12, &quot;Dizajniranje web stranice<br />kori{}enjem tabela&quot; i u ~asu 14, &quot;Kori{}enje dinami~kog HTML-a i slojeva&quot;. Za<br />sada }emo ostati u prikazu Standard.<br />Paleta sa alatkama<br />Paleta sa alatkama omogu}ava brz pristup va`nim komandama. Ako ona nije vidljiva u<br />prozoru Document, odaberite komandu Toolbar iz menija View i opciju Document.<br />Tri dugmeta na levoj strani palete sa alatkama omogu}avaju biranje izme|u prikaza<br />Code, Design i kombinovanog prikaza Code i View (prikazano na slici 1.4). Kada je<br />aktivan prikaz Code (prikaz podeljenog ekrana), dugme Refresh Design View<br />omogu}ava da u prikazu Design odmah vidite rezultate promena koje ste napravili u<br />kodu u prozoru Document.<br />^as 1<br />16<br />Napomena<br />Dugme Live Data View omogu}ava da pregledate podatke iz baze podataka u<br />okviru Dreamweavera kada pravite dinami~ke web stranice.<br />Pored dugmadi koja kontroli{u prikaze, nalazi se tekstualno polje u kome se odre|uje<br />naziv web stranice (unapred odre|en (default) naziv, Untitled document, nije ba{ zanimljiv).<br />Postoje ~etiri padaju}a menija u paleti sa alatkama: meni File Management,<br />Preview/Debug in Browser, Code Navigation (aktivan samo u prikazu Code) i meni<br />View Options. Meni File Management sadr`i komande vezane za rad sa fajlovima, kao<br />npr. upore|ivanje fajlova na serveru i van njega. Ove komande su obja{njene u ~asu 21,<br />&quot;Odr`avanje i postavljanje projekta&quot;. Meni Preview/Debug in Browser omogu}ava brz<br />pristup listi web ~ita~a koje ste odredili za pregled web stranica. Web stranicu mo`ete<br />da pregledate i odstranite gre{ke u ~ita~u koriste}i komande iz ovog menija (za one koji<br />dobro poznaju JavaScript).<br />Dugme Reference startuje komplet uputstava za CSS (Cascading Style Sheets),<br />HTML i JavaScript. Ova uputstva sadr`e obja{njenja za HTML oznake, JavaScript<br />objekte i CSS stilove, kao i za jezike za skripte koje se izvr{avaju na serveru, ukoliko se<br />zainteresujete za to.<br />Dugme Code Navigation je aktivan samo kada radite u kodu. U prikazu Design, meni<br />Options omogu}ava da uklju~ite opcije za menjanje izgleda interfejsa, kao {to su okvir,<br />lenjir i pomo}na mre`a (borders, rulers i grid). U prikazu Code, meni Options<br />omogu}ava da izaberete izgled koda. Postoji i dodatna komanda u meniju View<br />Options, koja omogu}ava postavljanje panela Design View na gornju ili donju ivicu<br />prozora u prikazu Code.<br />Show Code view<br />Show Design view<br />Show Code and Design views<br />Live Data View<br />Document title<br />File Management menu<br />Preview/Debug in Browser menu<br />Refresh Design view<br />Reference<br />Code Navigation menu<br />View Options menu<br />Slika 1.4<br />Paleta sa alatkama<br />sadr`i komande koje<br />se naj~e{}e<br />upotrebljavaju u<br />Dreamweaveru<br />Upoznavanje sa Dreamweaverovim interfejsom<br />17<br />Statusna linija (The Status Bar)<br />Prozor Document u Dreamweaveru ima statusnu liniju u donjem delu ekrana, na kojoj<br />mo`ete odabirati HTML oznake (Tag Selector), padaju}i meni Window Size i statistiku<br />za preuzimanje sa Interneta, {to je prikazano na slici 1.5. Ove alatke su vrlo korisni dodaci<br />koje ima ova verzija Dreamweavera, a omogu}avaju produktivan i zanimljiv rad u dizajniranju<br />za Internet.<br />Tag Selector na levoj strani u dnu prozora Document omogu}ava lak pristup HTML<br />kodu koji defini{e parametre svih objekata na ekranu. Na primer, na slici 1.6 prikazana<br />je slika koja se nalazi u }eliji tabele. Tag Selector omogu}ava odabir bilo koje HTML<br />oznake koja kontroli{e taj objekat. Oznaka koja je trenutno odabrana je prikazana zadebljanim<br />slovima u Tag Selectoru.<br />tag selector<br />Window Size menu<br />Download statistics<br />Slika 1.5<br />Statusna linija sadr`i<br />alatke koje<br />omogu}avaju dobijanje<br />informacija o<br />web stranici<br />^as 1<br />18<br />Savet<br />Tag Selector }e biti detaljnije obja{njen u ~asu 16, &quot;Odre|ivanje skripta pomo}u<br />panela Behaviors&quot;, kada budete odre|ivali pona{anje objekata, kao i u ~asu 17,<br />&quot;Dodavanje naprednih pona{anja: Drag Layer&quot;. Ako dodeljujete pona{anje<br />oznakama, ponekad je te{ko odabrati oznake, posebno oznaku &lt;body&gt;, koja<br />sadr`i HTML kod ~itave stranice. Tag Selector omogu}ava da lako odaberete<br />kod za ~itavu stranicu pritiskom na oznaku &lt;body&gt;.<br />Padaju}i meni Window Size poma`e u odre|ivanju rezolucije ekrana za koji pravite<br />stranicu tako {to promenite veli~inu prozora Document. Va`no je da ono {to napravite<br />dobro izgleda i u niskoj (640x480) i u visokoj rezoluciji. Zato padaju}i meni Window<br />Size (Slika 1.7) omogu}ava brzu promenu veli~ine prozora Document, da biste videli<br />izgled stranice koju pravite u odre|enoj rezoluciji. Ovaj padaju}i meni mo`ete da<br />koristite samo kada je prozor Document pro{iren.<br />Viewable dimensions Slika 1.6 Screen resolution<br />Tag Selector<br />prikazuje sve HTML<br />oznake koje<br />kontroli{u odabrani<br />objekat<br />Upoznavanje sa Dreamweaverovim interfejsom<br />19<br />Zna~enje veli~ina koje mo`ete da odaberete u meniju Window Size:<br />l Veli~ine na desnoj strani (u uglastim zagradama) predstavljaju rezoluciju<br />ekrana.<br />l Brojevi na levoj strani su pretpostavljene dimenzije prozora web ~ita~a. One<br />su manje od rezolucije ekrana jer interfejs web ~ita~a (dugmad i meniji, na<br />primer) zauzima prostor. Na primer, kada je rezolucija monitora 640x480,<br />oblast za prikazivanje stranice je samo 536x196 piksela.<br />Savet<br />Mo`ete da promenite te veli~ine odabiraju}i poslednju komandu u pomo}nom<br />(pop-up) meniju Window Size, komandu Edit Sizes. Njome prelazite u kategoriju<br />Statu Bar u meniju Preferences, gde mo`ete da odredite `eljenu veli~inu<br />prozora.<br />Brzina konekcije je ~esto veoma va`na u ovom poslu, pa je dobro znati barem pribli`nu<br />veli~inu fajla i vreme koje je potrebno za u~itavanje stranice koju pravite. Procena vremena<br />za u~itavanje je prikazana u statusnoj liniji, a izra~unata je na osnovu modema koji je<br />odre|en u kategoriji Status Bar u meniju Preferences. Unapred odre|ena vrednost<br />(default) je 28.8 Kbps. Ovu vrednost mo`ete da promenite u 56 Kbps ili bilo koju drugu<br />vrednost, zavisno od Va{e procene brzine konekcije kojom raspola`u posetioci stranice<br />koju pravite. Dreamweaver pri izra~unavanju veli~ine fajla i vremena potrebnog za u~itavanje<br />stranice uzima u obzir slike i sve ostale elemente na stranici.<br />Window Size menu<br />Viewable dimensions Slika 1.7 Screen resolution<br />Meni Window Size<br />menja veli~inu<br />ekrana, prikazuju}i<br />kako }e stranica<br />izgledati u razli~itim<br />rezolucijama ekrana<br />^as 1<br />20<br />Savet<br />Ako `elite da napravite pre~ice do panela koje najvi{e koristite, uklju~ite<br />Launcher u meniju Preferences (u okviru osnovnog menija Edit). Odaberite<br />kategoriju Panels i izaberite polje za potvrdu pored Show Icons in Panels and<br />Launcher. Pojavi}e se linija Launcher na desnoj strani linije Status. U okviru<br />kategorije Panels mo`ete da odredite i koji paneli }e se nalaziti u liniji Launcher.<br />Paneli i inspectori<br />U panelima i inspectorima odre|ujete osobine, panele, pravite animacije i dodajete<br />funkcionalnost web stranicama. Ve}inu komandi u Dreamweaveru mo`ete da<br />izaberete na vi{e mesta, obi~no u menijima i panelima. Paneli u Dreamweaveru se dele<br />na panele sa karticama, pored prozora Document (Windows), i na lebde}e panele iznad<br />prozora Document (Macintosh).<br />Ako je panel otvoren, komanda za njegovo otvaranje je {tiklirana u meniju Windows.<br />Da biste zatvorili panel ili inspector ukinite znak za {tikliranje u meniju Window.<br />Nazivi komandi u meniju Window mogu biti malo druga~iji od imena panela ili<br />inspectora koje otvaraju. Na primer, komandom Properties se otvara Property<br />Inspector.<br />Panel ili inspector mo`ete da pro{irite ili skupite pritiskom na strelicu sa leve strane<br />naziva panela, kao {to je prikazano na slici 1.8. Odmah sa leve strane strelice nalazi se<br />alat za hvatanje (gripper). Mo`ete da odvojite panel alatom za hvatanje, odvla~e}i ga od<br />ostalih panela. Da biste vratili panel nazad, treba da panel dovu~ete do ostalih. U<br />trenutku pripajanja ostalim panelima, crna linija }e biti vidljiva na mestu gde }e se<br />panel smestiti ~im pustite taster mi{a.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />21<br />Da biste promenili dimenzije panela, povucite liniju izme|u panela i prozora Document.<br />Ako `elite da promenite dimenziju samo jednog panela, pomerite kursor na rub panela i<br />povucite njegove ivice do postizanja `eljene veli~ine. Korisnici Windowsa mogu da koriste<br />i dugme Collapse, prikazan na slici 1.9, koji se nalazi na liniji koja odvaja prozor<br />Document od panela, da bi njime pro{irivali i skupljali prostor sa panelima.<br />Property Inspector<br />Property Inspector prikazuje sve osobine trenutno odabranog objekta. On je kao<br />kameleon: izgleda}e druga~ije kada prikazuje osobine druga~ijeg objekta na web<br />stranici. Na primer, kada je odabran tekst na stranici, Property Inspector prikazuje<br />osobine teksta, kao {to je prikazano na slici 1.10. Na Slici 1.11 je odabrana slika na<br />stranici, pa Property Inspector prikazuje njene osobine.<br />Expander arrow<br />Slika 1.8 Gripper<br />Panele {irite i<br />skupljate uz pomo}<br />strelice<br />^as 1<br />22<br />Text properties Selected text<br />Expander icon<br />Slika 1.10<br />Property Inspector na<br />ovoj slici prikazuje<br />osobine teksta na<br />stranici<br />Slika 1.9 Collapse button<br />Dugme Collapse<br />uklanja prostor sa<br />panelima, {to ostavlja<br />vi{e mesta za prozor<br />Document<br />Upoznavanje sa Dreamweaverovim interfejsom<br />23<br />Property Inspector mo`ete da pro{irite uz pomo} ikonice Expander, da biste imali<br />pristup svim osobinama odabranog objekta. To ~inite pritiskom na strelicu za pro{irivanje<br />u donjem desnom uglu Property Inspectora. Na slici 1.10 strelica je usmerena<br />prema gore jer je Property Inspector pro{iren, a na slici 1.11 je usmerena prema dole<br />jer je Property Inspector su`en.<br />Padaju}i meniji<br />Nekim korisnicima je lak{e da rade sa komandama iz menija (ja li~no volim pre~ice sa<br />tastature), dok je nekima lak{e da pritiskaju ikonice. Za one prve, u ovom odeljku je<br />opisana organizacija menija u Dreamweaveru. Meniji File i Edit (slika 1.12) su standardni<br />meniji u ve}ini programa. Meni File sadr`i komande za otvaranje, snimanje, uvoz i<br />izvoz fajlova. Meni Edit sadr`i komande Cut, Copy i Paste, kao i komande Find and<br />Replace i Preferences. Mnogi elementi interfejsa Dreamweavera mogu biti promenjeni<br />kori{}enjem komande Preferences. Na Macintoshu se ta komanda nalazi u glavnom meniju<br />Dreamweaver.<br />Selected image<br />Image properties Expander icon<br />Slika 1.11<br />Property Inspector na<br />ovoj slici prikazuje<br />osobine slike na<br />stranici<br />^as 1<br />24<br />Meni View (slika 1.13) uklju~uje i isklju~uje prikaz sadr`aja head dela HTML koda,<br />nevidljivih elemenata, slojeva, tabela i granica frejmova, statusnu liniju i mapu slika.<br />Da li se neki od ovih elemenata trenutno prikazuje ili ne mo`ete da vidite po znaku za<br />{tikliranje sa leve strane komande. U ovom meniju se jo{ nalaze komande za<br />uklju~ivanje i isklju~ivanje lenjira (ruler) i pomo}ne mre`e (grid), prikazivanje plugina<br />i slike za preslikavanje (tracing image). Komanda Prevent Layer Overlaps se tako|e<br />nalazi u okviru ovog menija. Rad sa slojevima je opisan u ~asu 14.<br />Slika 1.13<br />Meni View sadr`i<br />komande za<br />uklju~ivanje i<br />isklju~ivanje prikaza<br />elemenata<br />Dreamweaverovog<br />interfejsa<br />Slika 1.12<br />Meniji File i Edit<br />sadr`e komande koje<br />su uobi~ajene u ve}ini<br />programa, kao i<br />nekoliko specifi~nih<br />Dreamweaverovih<br />komandi<br />Upoznavanje sa Dreamweaverovim interfejsom<br />25<br />Sadr`aj menija Insert (slika 1.14) otprilike odgovara sadr`aju linije Insert. Sve elemente<br />koji se nalaze u ovom meniju mo`ete da postavite na stranicu. Meni Modify<br />(slika 1.14) omogu}ava promenu osobina trenutno odabranog objekta.<br />Meni Text (slika 1.15) omogu}ava detaljno odre|ivanje osobina teksta na stranici. Za<br />one kojima kucanje teksta bez gre{aka predstavlja problem, u meniju Text se nalazi<br />pomo}: komanda Check Spelling. U ovom meniju se nalaze skoro sve opcije iz<br />Property Inspectora, kada je selektovan tekst na stranici. Mo`ete da odredite uvla~enje<br />paragrafa, napravite listu ili promenite font, {to je obja{njeno u slede}em ~asu. Meni<br />Commands (slika 1.15) sadr`i korisne komande, kao Clean Up HTML i Clean Up<br />Word HTML. Mo`ete snimiti i emitovati animaciju ili formatirati i urediti tabelu.<br />Mo`ete odrediti raspored boja i &quot;sko~iti&quot; u Macromedia Fireworks da biste optimizovali<br />sliku.<br />Slika 1.14<br />Meniji Insert i<br />Modify omogu}avaju<br />postavljanje i<br />promenu osobina<br />objekata<br />^as 1<br />26<br />Meni Site (slika 1.16) sadr`i komande koje uti~u na ~itav web sajt. Rad sa web sajtom<br />u Dreamweaveru je obja{njen u ~asu 3, &quot;Planiranje i definisanje projekta&quot; i ~asu 21.<br />Meni Windows (slika 1.16) sadr`i komande za pozivanje svih panela i inspectora u<br />Dreamweaveru.<br />Meni Help, osim komandi za pokretanje HTML help fajlova (fajlovi za pomo} korisnicima),<br />sadr`i komande koje omogu}avaju registraciju Dreamweavera na Internetu (Meni<br />Help je prikazan na slici 1.17). Ako `elite da proverite koju verziju Dreamweavera<br />koristite ili da pogledate serijski broj programa, pokrenite komandu About Dreamweaver<br />iz ovog menija.<br />Slika 1.16<br />Komande iz menija<br />Site slu`e za rad sa<br />~itavim web sajtom,<br />dok komande iz<br />menija Windows<br />slu`e za rad sa<br />panelima i<br />inspectorima.<br />Slika 1.15<br />Sve komande<br />potrebne za<br />odre|ivanje osobina<br />teksta nalaze se u<br />meniju Text. Meni<br />Commands sadr`i<br />komande za snimanje<br />animacija, sre|ivanje<br />HTML-a i formatiranje<br />i ure|ivanje<br />tabela. Mo}na stvar!<br />Upoznavanje sa Dreamweaverovim interfejsom<br />27<br />Kontekst meniji<br />U Dreamweaveru mo`ete na vi{e na~ina da odredite osobine objekata na web stranici.<br />Vrlo brzo }ete prona}i koji je od tih na~ina Vama najzgodniji. I kontekst meniji su<br />jedna od alternativa. Oni se pojavljuju kada pritisnete desni taster na mi{u (taster<br />Control i dugme na mi{u na Macintoshu) iznad nekog objekta u prozoru Document.<br />Sadr`aj menija zavisi od objekta. Na primer, slika 1.18 prikazuje kontekst meni koji se<br />pojavljuje kada pritisnete desno dugme na mi{u iznad tabele.<br />Context menu<br />Slika 1.18 Table commands<br />Kontekst meni za<br />tabelu omogu}ava<br />brzo menjanje<br />osobina tabele<br />Slika 1.17<br />Meni Help sadr`i<br />brojne komande za<br />pru`anje pomo}i<br />korisnicima<br />^as 1<br />28<br />Nevidljivi objekti<br />Neki objekti koje postavljate na web stranice koje pravite ne treba da budu vidljivi<br />posetiocima sajta. Po{to je Dreamweaver WYSIWYG (What You See Is What You<br />Get) program, Macromedia je morala da prona|e na~in da dok radite vidite i nevidljive<br />objekte na stranici, kao {to su npr. named anchors ili formulari. Komandu Invisible<br />Elements, pomo}u koje uklju~ujete i isklju~ujete prikaz nevidljivih elemenata, sadr`i<br />meni View.<br />Kada je komanda Invisible Elements uklju~ena, kao {to je prikazano na slici 1.19, u<br />Dreamweaveru }ete videti ta~kasti okvir crvene boje oko formulara i oznake koje<br />predstavljaju named anchore (izgledaju kao mala sidra na zlatnom {titu). Odaberite te<br />oznake i po `elji pregledajte ili promenite osobine objekata u Property Inspectoru.<br />Ako Vam je potrebna pomo}...<br />Odaberite komandu Using Dreamweaver iz menija Help da biste pokrenuli fajlove za<br />pomo} korisnicima u Dreamweaveru. Na levoj strani stranice je prikazan sadr`aj,<br />indeks pojmova, alatka za pretra`ivanje i naj~e{}e pregledana uputstva. Na desnoj<br />strani se prikazuje tekst onoga {to odaberete na levoj strani. Dugmad u obliku strelice<br />Next i Previous omogu}avaju lak prelaz sa jedne na drugu temu.<br />Savet<br />Dok se upoznajete sa Dreamweaverom, verovatno }ete ~esto koristiti dugmad<br />Next i Previous. Teme su grupisane, a informacije o jednoj temi se ~esto nalaze<br />na vi{e stranica. Kada pregledate sve {to Vas je zanimalo o jednoj temi, lako<br />}ete pre}i na drugu.<br />Invisible elements<br />Slika 1.19<br />Web stranica sa<br />prikazanim<br />nevidljivim<br />elementima<br />omogu}ava<br />odabiranje i menjanje<br />osobina objekata na<br />web stranici. Osobine<br />se menjaju u<br />Property Inspectoru.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />29<br />Kartica Contents (sadr`aj) u Windowsu prikazuje sadr`aj fajlova za pomo} korisnicima.<br />Sadr`aj je podeljen na vi{e tema. Kada odaberete jednu od tema, pojavljuje se<br />spisak podtema. Dugme Index omogu}ava pregled svih tema pore|anih abecednim<br />redosledom. Ako `elite da pretra`ujete, pritisnite karticu Search. Kartica Favorites<br />omogu}ava Vam da napravite sopstvenu listu omiljenih tema pritiskom na dugme Add<br />na dnu prozora. Na Macintoshu je rad sa menijem Help malo druga~iji, a prozor Help<br />Viewer je prikazan na slici 1.20. On omogu}ava dva razli~ita prikaza raspolo`ivih tema,<br />koje birate pritiskom na linkove Index ili Table of Contents.<br />Najlak{i na~in da dobijete pomo} u vezi odre|enog objekta je da startujete konteksnu<br />pomo}. Kada je selektovan neki objekat na stranici (i kada vidite njegove osobine u<br />Property Inspectoru), kliknite na ikonicu Help u Property Inspectoru, prikazanu na<br />slici 1.21. Na taj na~in Dreamweaver }e Vam prikazati informacije u vezi odabranog<br />objekta.<br />Slika 1.20<br />Na Macintoshu u<br />fajlovima za pomo}<br />korisnicima mo`ete<br />da birate izme|u<br />prikaza Index ili<br />Table of Contents<br />^as 1<br />30<br />Otkrivanje novih mogu}nosti<br />Dreamweavera MX<br />O~igledno je da firma Macromedia vodi ra~una o `eljama web dizajnera, mo`da i zato<br />{to se na web sajtu Macromedie u velikoj meri koriste ve{tine u dizajniranju web stranica,<br />na adresi www.macromedia.com. Postoji mnogo novina u Dreamweaveru MX, ali<br />sam se odlu~ila da Vam predstavim samo neke.<br />Najva`nije nove mogu}nosti Dreamweavera MX obuhvataju:<br />l Obuhva}ene su mogu}nosti programaDDDreamweaver UltraDev<br />Dreamweaver MX omogu}ava rad sa server-side skriptama, {to je do sada<br />bilo mogu}e samo u posebnom programu, Dreamweaver UltraDevu.<br />Mo`ete da koristite ASP, JSP, CFML ili PHP kodiranje web stranica.<br />l Gotovi dizajni web stranicaDDKori{}enjem gotovih dizajna web stranica<br />koje dobijate sa Dreamweaverom, mo`ete zna~ajno da u{tedite na vremenu.<br />l Site Definition WizardDDPomo}u ovog dijaloga mo`ete brzo da defini{ete<br />sajt. Ina~e ne koristim ovakve opcije u drugim programima, ali ova mi se<br />zaista dopada.<br />l Panel AnswersDDOmogu}ava lako povezivanje sa Macromedia Support<br />Centerom (centrom za podr{ku Macromedie), gde mo`ete da prona|ete<br />uputstva za rad sa Dreamweaverom.<br />Help icon<br />Slika 1.21<br />Ikonica Help u<br />Property Inspectoru<br />omogu}ava pristup<br />osobinama trenutno<br />selektovanog objekta.<br />U ovom slu~aju,<br />selektovana je tabela.<br />Upoznavanje sa Dreamweaverovim interfejsom<br />31<br />l File ExplorerDDOmogu}ava pretra`ivanje fajlova koji se nalaze i izvan<br />definisanog web sajta.<br />l Izve{taji u vezi propisa iz Rezolucije 508DDOmogu}ava dobijanje informacija<br />i izve{taja u vezi prilago|enosti web sajta potrebama osoba sa umanjenim<br />fizi~kim mogu}nostima.<br />l JavaScript pomo}ni (pop-up) menijiDDOmogu}ava pravljenje JavaScript<br />pop-up menija direktno u Dreamweaveru.<br />Zaklju~ak<br />U ovom ~asu ste se upoznali sa prozorom Document i njegovim elementima, kao i sa<br />menijima, statusnom linijom i raznim panelima u okviru Dreamweaverovog interfejsa.<br />Upoznali ste se sa raznim vrstama panela, kao i sa komandama iz menija. Prou~ili ste<br />Property Inspector i nau~ili kako da ga koristite. Upoznali ste se i sa novim mogu}nostima<br />Dreamweavera.<br />Pitanja i odgovori<br />P Kako da pro{irim prozor Document do maksimalne veli~ine?<br />O Pro{irite prozor Document pomo}u dugmeta Maximize. Ako vam je potrebno<br />jo{ prostora u vertikalnoj ravni, mo`ete da &quot;spustite&quot; Property Inspector i<br />liniju Insert. Ako `elite da pro{irite prozor Document u horizontalnoj ravni,<br />uklonite grupe panela. Na taj na~in }ete dobiti maksimalan prostor za pravljenje<br />web stranica.<br />P Dosadilo mi je da postavljam kursor iznad dugmeta na liniji Insert, da bih<br />saznao koja je njihova funkcija! Zar ne postoji lak{i na~in za to, barem dok<br />se bolje ne upoznam sa komandama?<br />O Unapred je odre|eno da Dreamweaver prikazuje samo ikonice na liniji<br />Insert, ali to mo`ete da promenite u dijalogu Preferences. Kliknite na kategoriju<br />General u dijalogu Preferences. U padaju}em meniju Insert Panel<br />odaberite opciju Icons and Text. Pored ikonica na liniji Insert }e se pojaviti<br />tekstualni natpisi.<br />P Za{to su tasteri Tables i Layers &quot;bledi&quot; na liniji Insert?<br />O Ne mo`ete da koristite komande Tables i Layers, dok se nalazite u prikazu<br />Layout. Ako `elite da koristite te tastere, morate da pre|ete u prikaz<br />Standard. Na kartici Layout, u okviru linije Insert, se nalaze dugmad za<br />prelaz iz jednog u drugi prikaz (na Macintoshu se te komande nalaze na dnu<br />linije Insert).<br />^as 1<br />32<br />Radionica<br />Radionica sadr`i kviz pitanja i aktivnosti pomo}u kojih }ete utvrditi sve {to ste nau~ili<br />u ovom ~asu. Ako bude potrebno, odgovore na postavljena pitanja mo`ete pro~itati<br />odmah posle pitanja.<br />Kviz<br />1. Koje menije treba da koristite da biste otvorili panele u Dreamweaveru?<br />2. Koja tri standardna elementa se nalaze u statusnoj liniji u prozoru<br />Document?<br />3. Da li je Dreamweaver HTML editor, program za autoring ili program za<br />rad sa web sajtovima?<br />Odgovori<br />1. Meni Window omogu}ava uklju~ivanje ili isklju~ivanje svih panela i inspectora.<br />Oznaka za {tikliranje se nalazi pored komande koja je uklju~ena.<br />2. Linija Status sadr`i Tag Selector, meni Window Size i statistiku za preuzimanje<br />sa Interneta. Ukoliko `elite, mo`ete da uklju~ite i prikaz linije<br />Launcher pomo}u komande Preferences.<br />3. Pardon, ovo je trik pitanje! Dreamweaver je sve {to je nabrojano u pitanju.<br />Ve`be<br />1. Odaberite komandu Preferences iz menija Edit. Ozna~ite kategoriju General<br />i odaberite opciju Icons and Text u padaju}em meniju Insert Panel. Kliknite<br />na dugme OK. Primeti}ete da se pored ikonica u liniji Insert sada nalazi i<br />tekst.<br />2. Eksperimenti{ite sa pro{irivanjem i skupljanjem panela. Promenite veli~inu<br />panela. Istra`ujte menije na panelima, koji se nalaze u gornjem desnom uglu<br />panela.<br />3. Kliknite na karticu Forms u okviru linije Insert. Ubacite formular u prozor<br />Document. Ako ne vidite formular, uklju~ite prikaz nevidljivih elemenata.<br />Kliknite van formulara na stranici i poku{ajte da ga selektujete. Primeti}ete<br />da ste u tome uspeli kada budete videli njegove osobine prikazane u<br />Property Inspectoru. Poku{ajte da selektujete oznaku form u Tag Selectoru. Generalna 2009-01-02T01:46:39Z digitalniandjeo