Dw CS5 - Osnovni

Dreamweaver CS5

Branko Jovanović

Osnovni nivo

3

Sadržaj

7 Uvod7 Imenovanje strana7 Struktura sajta7 XHTML8 JavaScript8 Imenovanje fajlova

9 Dreamweaver interface9 Welcome screen10 Insert panel10 Files panel11 Document toolbar11 Properties panel11 Tag selector

13 Definisanje sajta

17 Interaktivni elementi stranice17 Flash animacije18 Ubacivanje menija sa rolloverima19 Search polje sajta19 Google Maps20 Youtube video21 Facebook skripte21 Kontakt formular

23 Upload sajta

Ova skripta je prateći materijal uz kurs i nije pogodna za samostalno učenje.

7

Uvod

Web sajt je skup foldera i fajlova. Folder u koji sadrži celokupan sajt se zove root folder. U root folderu je moguće imati podfoldere. Kada hoćemo da prikažemo neku stranicu, moramo ukucati kompletnu putanju do fajla stranice, uključujući i sve podfoldere kroz koje mora da se prođe da bi se do nje došlo. Zbog toga, ne treba preterivati sa razvrstavanjem stranica po podfolderima. Dobra je praksa da se prateći fajlovi (slike, animacije i sl.) izdvoje u posebne foldere.Ako je potrebno da folderi i fajlovi imaju imena iz više reči, onda je uobičajeno da se reči razdvoje crticom. Zbog Google-a je bolje reči razdvajati sa „-„ (običnom crticom) jer Google to vidi kao razmak, dok „_“ ne vidi, tj. reči će u bazi biti spojene.

Imenovanje stranaSvaki folder/podfolder može imati default stranu. Serveri mogu da se podese da ako ni jedna strana nije eksplicitno zatražena prikažu default stranu. Moguće je podesiti i koja je to default strana. Dosta servera je podešeno da za default stranu prikažu stranu koja u imenu ima „default“, tj. default.htm, default.html... Ali je češća konvencija da se default strana zove „index“, tj. index.htm, index.html...

U principu je dovoljno da se samo prva strana sajta zove index.htm, recimo. Na ostale strane se lako ode zahvaljujući linkovima koji povezuju strane. Međutim, vrlo je dobra praksa da i svaki folder tj. podfolder sajta ima index stranu. Ako index strana ne postoji, neki serveri će prikazati listu svih fajlova i podfoldera u folderu i to može biti ozbiljan sigurnosni problem. Ako svaki folder ima svoju index stranu, onda se to neće dešavati. Najbolje je unapred proveriti sa provajderom, da li korisnik može da podesi te parametre za svoj sajt ili ne. I kako je server podešen po default-u.

Struktura sajtaWeb strane mogu da sadrže u sebi sav kod neophodan da se stranica prikaže. I HTML, CSS, JavaScript i bilo koju drugu tehnologiju. Međutim, sada je uobičajeno da se sadržaj stranica i struktura (HTML) odvoji od izgleda elemenata (CSS) i interaktivnosti (JavaScript). Slike i animacije svejedno su odvojene od koda kao i baza podataka ako postoji.

Ovaj pristup omogućava uštedu vremena i olakšava kasniju doradu i ažuriranje stranica. Međutim, ako je u pitanju mikro sajt, onda je potpuno svejedno kako se radi jer se na brzini ne dobija a možda čak i gubi, a i ažuriranje se olakšava malo ili nimalo. Ako se sajt radi u Fireworksu, onda je ovaj pristup čak i loš izbor jer Fw može imati problema da otvori takve stranice.

XHTMLU januaru 2000-te. W3C je objavio prelazak sa HTML-a na XHTML. XHTML je skraćenica od Extensible Hypertext Markup Language i predstavlja prelaz sa HTML-a na XML. Jezik je čistiji, jasniji i lakši za učenje od HTML-a zato što su odbačene mnoge komande koje su vremenom postale zastarele.

Dreamweaver CS5 - osnovni nivo

8

XHTML je, zapravo, grupa XML jezika koji predstavljaju izmenjenu verziju HTML-a. Postoje 3 kategorije XHTML-a: Strict, Transitional i Frameset.

Strict – sadrži samo informacije i strukturalne elemente strane. Nema komandi koje opisuju izgled ele-menata.

Transitional – Sadrži informacije kao i Strict ali i neke komande HTML-a. Dobar izbor ako se radi sajt koji će biti gledan i iz starijih browsera. Ubedljivo najčešći izbor web dizajnera danas.

Frameset – Sadrži i Frame-ove. To je praktično napušten način pravljenja web stranica tako da se time nećemo baviti.

Vrlo je bitno da se browseru saopšti u kojoj verziji XHTML-a je rađena stranica da bi mogao pravilno da je prikaže. Informacija o tome se nalazi u DTD-u (Document Type Definition). U pitanju je par linija koda koje se nalaze na samom vrhu strane. Svaka web strana bi trebalo da ih sadrži. Dw sam stavlja DTD čim se otvori nova strana. Fw takođe, tako da o tome ne moramo da brinemo.

XHTML dolazi sa svojim komandama – tagovima. H1, H2... H6 su tagovi koji označavaju naslove. H1 označava najvažniji naslov na stranici. H2 sledeći po važnosti, H3 sledeći... Važnost naslova nema nikakve veze sa njihovim izgledom, tj. veličinom slova, pismom i rezom. To znači da ne mora biti vizuelno najupad-ljiviji.

Tagovi jednostavno govore o smislu, strukturi i važnosti elemenata na strani. Da bi dodatno opisali strukturu elemenata možemo im dodeliti imena i stil, tj. klasu.

JavaScriptJezik zadužen prvenstveno za interaktivnost web stranica. Praktično, nezaobilazni deo web programiranja. Nalazi se u osnovi vrlo bitnih tehnologija koje se danas koriste u web programiranju. Međutim, njegov značaj je veliki i van web programiranja.

Imenovanje fajlovaNe koristiti razmake, znake interpunkcije, velika slova, brojeve na početku imena i sl. Izaberite jednu od ek-stenzija: htm ili html ali ne obe u isto vreme jer ćete, verovatno, praviti duplikate fajlova samo sa različitom ekstenzijom.

9

Dreamweaver interface

Welcome screen

Sa leve strane je spisak zadnjih 9 fajlova sa kojima ste radili, tj. prečice do njih. Ako hoćete da radite sa nekim od njih, samo kliknite na prečicu i fajl će se otvoriti.

U sredini, otvaranje novog dokumenta. Tu ćete videti spisak svih programskih jezika za koje Dw ima podršku. Mi nećemo otvarati novi fajl, pošto smo u Fireworksu već napravili stranice. Samo ćemo ih doraditi ovde.

Desna kolona Top Features, sadrži linkove na Adobe TV gde možete da pogledate video lekcije o novim opcijama programa.

U donjem delu je spisak linkova do Adobe sajta na kojima može da se nađe još informacija o programu. Od lekcija za početnike do članaka za iskusne korisnike.

Don’t show again opcija će sprečiti da se Welcome Screen pojavljuje kad startujete program. Ja ću je ostaviti isključenu.

Što se ostatka interfejsa tiče, najpotrebniji će nam biti paneli sa desne strane. Pogotovo Insert i Files paneli.


10

Insert panelInsert panel sadrži komande koje se koristimo da bi u dokument ubacili neki element. Nama će najbitnije komande biti za ubaci-vanje Fireworks i Flash sadržaja. Običo se nalazi sa desne strane interfejsa (kao na slici), međutim, dosta ljudi ga prebacuje i da stoji u gornjem delu, odmah ispod menija. Tu je stajao u starijim verzi-jama programa.

Files panelPanel u kome manipulišemo fajlovima sajta. Tu ćete videti foldere i fajlove koji čine vaš sajt. Dupli klik na fajl je dovoljan da otvorite neku stranicu. Takođe, možete menjati imena fajlovima, brisati faj-love, premeštati ih po folderima, i sl. Takođe, iz ovog panela može-te uploadovati fajlove na server. Praktično, ovde ćete naći sve ko-mande koje su vam potrebne da bi radili sa fajlovima vašeg sajta. Takođe, prilikom premeštanja fajlova, menjanja njihovog imena i sličnih stvari, Dw će vam ponuditi da ažurira linkove na stranicama tako da sadrže nove informacije o drugim stranicama sajta. Samim tim, u slučaju bilo kakve promene, linkovi će biti ažurirani da rade bez obzira što ste nešto menjali. Zbog toga je preporuka da fajlo-vima sajta manipulišete baš iz ovog panela. Ako fajlovima budete manipulisali van Dw-a, Dw će vam teško pomoći.

11

Dreamweaver Interface

Document toolbarDocument toolbar se zove deo interfejsa neposredno iznad dokumenta.

Sa leve strane imate dugmiće Code, Split i Design gde možete da odredite da li ćete raditi sa kodom ii ne. Kada bude trebalo da u stranicu ubacimo interaktivne sadržaje, ja ću koristiti Split mod.

Live View je, takođe, značajna komanda jer nam omogućava da pogledamo kako stranica izgleda bez potrebe da napuštamo Dw. U ovom modu Dw prikazuje stranice kao što prikazuju Google Chrome i Safari.

Title polje je mesto gde upisujemo ime ili naslov za celu stranicu. Tekst koji ovde upišemo, Google će uzeti za link u svom listingu.

Ikonica globusa, desno od Inspec dugmeta se koristi da pogledate stranicu u browser-u. Možete strani-cu pogledati i iz File > Preview in Browser, ali je često lakše odavde.

Properties panelNalazi se ispod dokumenta. Jedan od najbitnijih delova interfejsa.

Tag selectorTo je oblast koja se nalazi neposredno iznad Properties panela(deo gde piše <body>). Tu možemo da selektujemo elemente stranice. Potrebno je samo da znamo kako se ti elementi pišu u HTML-u. Ja ću ga koristiti kad stignemo do ubacivanja kontakt formulara u stranicu.

13

Definisanje sajta

Definisanje sajta je korak u kome Dw-u dajete neke osnovne informacije o sajtu na kome radite, tako da on može da konfiguriše parametre kako treba. Ovaj korak nije obavezan u toku razvoja sajta, ali se preporučuje pogotovo početnicima. Ako ga uradite, Dreamweaver će moći da vam pomogne da izbegnete neke od najčešćih grešaka koje se događaju u toku razvoja sajta.

Definisanje sajta možete započeti na nekoliko načina. Najlakše će vam biti da na Welcome Screen-u kliknete na link Dreamweaver Site.

Ako ste isključili Welcome Screen, možete koristiti komandu Site > New Site. Ili na vrhu ekrana pozovi-te tu komandu Site komandom.

Pojaviće vam se prozor Site Definition for Unnamed Site 2

Prvo što treba da uradite je da u polje Site Name, upišete ime svog sajta. Ime koje ovde upišete neće se nigde videti sem u samom Dreamweaver-u. Ovo je bitno kada radite na više sajtova istovremeno. Ako


14

svakom date ime, moćićete lakše da raspoznate na kom sajtu radite upravo i da Dreamweaver-u kažete na kom sajtu hoćete da radite.

U principu, već sa unešena samo ova dva podatka vi već možete da nastavite da radite na sajtu. Među-tim, u nekom trenutku će biti potrebno da podesite i parametre koji su potrebni da bi fajlove svog sajta prebacili kod provajdera.

Kad budete hteli da podesite parametre konekcije sa serverom, kako se to kaže u žargonu, koji su bitni da bi fajlove mogli da prebacite na server provajdera, potrebno je da odete u deo Servers i da kliknete na dugme Add new Server.

Posle toga, pojaviće se prozor koji izgleda ovako:

Ja sam u polja upisao šta bi trebalo da upišete u koje od njih, ali za sve ove stvari, zapravo, morate pitati svog provajdera. Svaki provajder ima svoje parametre i niko drugi ne može da vam ih kaže. Proverite da li možda, ovi parametri pišu negde na sajtu provajdera. Ako ne, pitajte njihovu tehničku podršku.

15

Definisanje sajta

Ako ste sve dobro uradili, Dreamweaver bi trebalo da prođe kroz sve vaše fajlove i utvrdi njihove međusob-ne odnose i kako su povezani jedni sa drugima. Kod manjih sajtova ovo je trenutan proces, dok kod većih sajtova ovo zna da potraje par sekundi. Posle toga, trebalo bi da vaše fajlove vidite u Files panelu.

17

Interaktivni elementi stranice

Neki interaktivni elementi stranice koji se često sreću na mikrosajtovima su:• Flash animacije• meni sa rolloverima i padajući meni• Search polje• Video• Google Maps• kontakt formular• Facebook skripte

Flash animacijeDa bi na stranicu ubacili Flash animaciju, potrebno je da je prvo uradite i publikujete u .swf format. Takođe, na samoj stranici nacrtajte prazan pravougaonik na mestu gde animacija treba da bude. Neka pravougao-nik bude iste veličine kao animacija i pozicioniran na istom mestu na kom animacija treba da bude.

Ukoliko animacija ima i pratećih fajlova (.js, .xml, slike i dr.) potrudite se da svi budu u jednom folderu i taj folder prebacite u root folder sajta. Takođe, svi fajlovi koji čine flash animaciju (.swf i prateći fajlovi) moraju biti u istom folderu kao i stranica (.htm) u koju je ubacujete. Ako su animacija i prateći fajlovi smešteni u isti folder, onda je najbolje da samo stranicu (i .htm i .css) prebacite u taj folder tako da budu zajedno sa svim ostalim fajlovima animacije. Posle ovoga, otvorite stranicu, kliknite u gornji levi ugao pravougaonika i ubacite animaciju komandom iz Insert panela: Insert > Media > SWF.

Animacija će biti ubačena ali ćete videti samo sivi pravougaonik sa Flash znakom koji izgleda otprilike ovako:

To je u redu, tako i treba da izgleda.Opcije koje su vam bitne u Properties panelu:• W i H – širina i visina animacije. Po potrebi možete promeniti dimenzije animacije ali je naj-

bolje da to ne dirate. Najbolje animaciju uradite tačno onoliko veliku koliko želite da bude i toliko mesta ostavite i na svojoj stranici. Onda je samo ubacije i ne menjajte ništa.


18

• Loop – da li će animacija da se beskonačno vrti u krug (uključeno) ili samo jednom (isklju-čeno). Banner-i se obično, vrte u krug a ostale animacije ne.

• Autoplay – ostavite uključeno da bi se animacija odmah prikazala čim se učita sa internet• Quality – kvalitet animacije. Ostavite na High.• Play – taster kojim možete pustiti animaciju unutar Dw-a da vidite da li radi i kako se uklapa

u ostatak stranice. Kada pustite animaciju umesto Play će pisati Stop, kojim možete zau-staviti animaciju.

Ostali parametri se koriste nikad ili gotovo nikad.

Ubacivanje menija sa rolloverimaPriprema za ubacivanje menija je ista kao za Flash.

1. Napravite meni sa rolloverima/padajući meni u Fw-u i snimite ga komandom Export u root folder sajta.

2. Ostavite prazno mesto na stranici gde ćete ubaciti meni tako što ćete na tom mestu nacrtati prazan pravougaonik

3. Kliknite u gornji levi ugao pravougaonika4. Upotrebite komandu iz Insert menija: Insert > Image > Fireworks HTML.

5. Pojaviće vam se prozor:

19

Ubacivanje interaktivnih elemenata

6. Pritisnite Browse i pokažite na fajl menija (.htm) i potvrdite sa OK.Ako vam taj fajl više ne treba, možete da uključite Delete file after insertion. Pošto se navigacija često

ubacuje na više stranica sajta, bolje nemojte brisati fajl jer je morate ubaciti na svaku stranicu posebno.

Search polje sajtaSearch polje sajta nije baš uobičajeno za mikro sajtove pošto imaju malo stranica. Takođe, potrebno je ura-diti skriptu za pretraživanje sajta. To je pogodno ako se stranice sajta generišu dinamički od podataka koji su smešteni u bazu. Pošto mi nemamo takav sajt, možemo prepustiti pretragu Google-u.

• Potrebno je nacrtati prazan pravougaonik na mestu gde hoćete da bude smešteno Search polje.

• U Dreamweaver-u ubaciti kod:<script type=”text/javascript”>//Ovde uneti adresu sajta:var domainroot=”www.adresa-sajta.com” function Gsitesearch(curobj){curobj.q.value=»site:»+domainroot+» «+curobj.qfront.value}</script> <form action=»http://www.google.com/search” method=”get” onSubmit=”Gsitesearch(this)”><input name=”q” type=”hidden” /><input name=”qfront” type=”text” style=”width: 180px” /> <input type=”submit” value=”Search” /></form>

U 2. redu koda uneti adresu vašeg sajta. Ako hoćete možete da u pretpostalednjem redu promenite širinu search polja (width: 180px), kao i šta piše na dugmetu za pretraživanje (value=”Search”). Tu umesto Search može da stoji “Pretraži” ili nešto slično.

Google Maps• Kao i do sad, potrebno je u Fw-u nacrtati prazan pravougaonik na mestu gde hoćete da

ubacite mapu• Otići na sajt: http://maps.google.com/• Pronaći objekat koji vam treba• u gornjem desnom delu mape, naćićete link koji se zove “Link” ili “Veza”. Kliknite na njega

• Kliknite na Customize and preview embedded map• Pojaviće vam se prozor u kome možete da podesite veličinu mape na vašoj stranici. U do-

njem delu prozora je kod koji treba da iskopirate sa Copy i ubacite u Dw sa Paste.• Ne zaboravite, da uklonite tekst View Larger Map, da bi sve stalo u pravougaonik koji ste

ostavili, mada možete i da ga ostavite ako hoćete.

Youtube video• potrebno je u Fw-u nacrtati prazan pravougaonik na mestu gde hoćete da ubacite video• Otiđite na sajt: http://youtube.com/• Pronađite video koji vam treba• Ispod donjeg desnog ugla videa naćićete dugme Embed

Otvoriće vam se deo gde možete da prilagodite veličinu videa i da uskladite izgled sa vašom stranicom. U gornjem delu se nalazi polje sa kodom koji treba da iskopirate u Dw u prazan pravougaonik koji ste ostavili u Fw-u. Ovde je kod selektovan tako da ga lakše uočite.

21

Facebook skripte• U Fw-u ostavite prazan pravougaonik tamo gde treba da ubacite skripte za povezivanje sa

Facebook-om• Otiđite na stranicu: http://developers.facebook.com/docs/guides/web• Tu ćete naći više skripti za povezivanje vašeg sajta sa FB-om. Najpopularnije skripte su u

delu Social Plugins. Ali, slobodno pročitajte uputstvo i za ostale skripte i koristite ih.

Kontakt formularAko ste već napravili kontakt formular u Fw-u, onda u Dw-u ostaje samo da ga povežete sa fajlom koji će obraditi podatke koje korisnik unese u formular. U našem slučaju to je fajl email.php.

• Fajl email.php prebacite u folder sajta• U Dreamweaveru otvorite stranicu sa formularom• u delu ispod stranice (Tag selector) nađite <form...> i kliknite na njega. Cela stranica će

poplaveti. To je sasvim u redu.• u Properties panelu pojaviće se opcije koje treba da podesite. U polju Action treba da po-

kažete Dw-u na fajl email.php. To možete učiniti i klikom na ikonicu Browse to File.• U polju Method, treba da izaberete POST iz padajuće liste.• Snimite stranicu.• Sada otvorite email.php i tu upišite email adresu na koju treba da stignu podaci kad ih

korisnik unese. Snimite i ovaj fajl.

23

Upload sajta

Upload sajta na server je prebacivanje fajlova koji čine sajt sa vašeg kompjutera na kompjuter provajdera. Možete to uraditi uz pomoć više programa na tržištu a ja ću pokazati kako se to radi iz Dw-a, pošto su i kod njega te opcije prisutne.

1. Potrebno je podesiti parametre konekcije. Za ovo pitajte provajdera pošto niko drugi ne može da vam da tu informaciju.

2. Proverite da li veza radi i povežite se sa serverom. To radite prvom komandom sa leve strane (izgleda kao utičnica za struju)

3. Sada možete da prebacite fajlove na server. Možete to uraditi iz samog Files panela. Treba da označite folder (tj. ceo sajt) i pritisnete komandu Put (strelica na gore). Ceo sajt će biti uploadovan. Samo da znate, to može da potraje poprilično što zavisi od veličine sajta i vaše internet konekcije.

4. Sledeći put kada budete ažurirali stranice, bolje je da koristite Synchronize (dve strelice kružnog obilka). On će uploadovati samo nove i izmenjene fajlove.

5. Na kraju, prekinite vezu sa serverom (prva komanda sa leve strane).

Dw CS5 - Osnovni

Documents

Transcript of Dw CS5 - Osnovni