1 / 28

Adobe Dreamweaver

Adobe Dreamweaver. Adobe/Macromedia. Dreamweaver je profesionalni vizualni editor za izradu i uređivanje Web stranica.Sa ovim alatom lako možemo praviti i uređivati web stranice na svim različitim platformama.

obert
Download Presentation

Adobe Dreamweaver

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adobe Dreamweaver Adobe/Macromedia

  2. Dreamweaver je profesionalni vizualni editor za izradu i uređivanje Web stranica.Sa ovim alatom lako možemo praviti i uređivati web stranice na svim različitim platformama. U današnjici on je jedan od najboljih i najcjenjenijih web alata za projektiranje web stranica i sučelja.

  3. On ne zahtjeva nikakve specijalne softverske dodatke za server na koji se postavlja izrađena prezentacija (kao što je, na primer, slučaj sa Microsoft.ovim FrontPage-om. Kako bi smo lakše savladali korištenje ovog softverskog alata,ovaj opis ćemo podjeliti na više razina.

  4. Planiranje web stranice • Pažljivo planiranje i organiziranje naše web stranice može nam kasnije sačuvati mnogo vremena. Organiziranje stranice obuhvaća mnogo više stvari od običnog odlučivanja gdje će se dokumenti skladištiti. • Planiranje stranice često podrazumjeva i istraživanje potreba te stranice,profila posjetilaca i ciljeva te web stranice. • Web sajt je skup povezanih dokumenata sa zajedničkim atributima, kao što su: povezane teme, sličan dizajn ili zajednička namjena.

  5. Defniranje cilja web stranice • Definiranje ciljeva web stranice je prvi korak u kreiranju iste. • Postavite sebi ili vašem klijentu pitanje o stranici. • Puno puta dolazimo u iskušenje što želite postići postavljanjem web stranice?

  6. Organiziranje strukture web stranice • Uobičajeni način na koji se započinje dizajniranje web.a je da se kreira folder na našem lokalnom disku koji sadrži sve fajlove potrebne za našu stranicu i u kome će se dokumenti stvarati i mjenjati. Tek kada smo spremni postaviti stranicu na Web server i kada ga želimo prestaviti posjetiteljima,kopiramo te fajlove na Web server. • Ovakav pristup je mnogo bolji, zato što nam omogućava prvo testiranje svih promjena na lokalnoj stranici,a da to ne vide posjetitelji. • Tek kada u potpunosti završimo stranicu i budemo zadovojni njegovim izgledom i funkcionalnošću – postavimo je na Web server.

  7. Odlučite gdje ćete držati slike i zvučne datoteke. Zgodno je sve slike, na primjer, držati na jednom mjestu, jer na taj način kada želimo unijeti sliku na neku stranicu, točno znamo gdje se ona nalazi. Dizajneri često smještaju sve ne-HTML materijale koji će se koristiti u stranici, u poseban folder koji se zove Assets (imovina). Taj folder može u sebi sadržati i druge foldere, kao na primjer: Slike folder, Zvuk folder itd. Možemo imati i poseban Assets folder za svaku grupu povezanih stranica naše web stranice.

  8. Izgled izbornika

  9. Korištenje Dreamweavera za dizajniranje web stranice Kada smo kreirali strukturu ,moramo imenovati novi site u Dreamweaver-u. Postavljanje ovog lokalnog site.a u dreamweaver-u znači da možemokoristiti Dreamweaver sa FTP-om za upload naše web stranice na Web server, automatski pratimo i održavamo linkove itd. Najbolje je postaviti naš lokalni sajt u Dreamweaver prije nego što počnemo sa pravljenjem stranica.

  10. Kreiranje novog site.a: -Izaberemo Site>New Site. U prozoru za dijalog Site Definition, selektirana je Local Info kategorija. -U polje Site Name unesemo ime naše web stranice. Ovo ime se ne pojavljuje u web pretraživačima,nego samo nam služi za lakšu orjentaciju -U polju Local Root Folder izaberemo folder na našem lokalnom disku gdje će se nalaziti file-ovi, template.ovi i elementi iz biblioteke. -Checkiramo polje Refresh Local File Automatically. Ova opcija nam omogućava da se lista file.ova našeg web stranice automatski osvježi svaki put kada kopiramo fajlove u naš lokalni sajt. U polje HTTP Address unesemo URL koji će nas završeni sajt koristiti (na primer http://www.unidu.hr).

  11. Check-iramo polje Cache koje nam omogućava da se u sajtu drže informacije o fajlovima i materijalu. Takođe, ubrzava rad sa Assets panelom, upravljanje linkovima itd. -Kliknemo OK.

  12. Uređivanje postojeće web stranice • Dreamweaver možemo koristiti za uređivanje postojeće web stranice na našem lokalnom disku, čak iako on nije kreiran u Dreamweaver-u. • Uređivanje postojeće web stranice radimo na način: • Izaberemo Site>Define Sites i kliknemo New, ili izaberemo Site>Open • Site>Define Sites. • Ponovimo sve ostale korake iz prethodnog opisa.

  13. Upravljanje web stranice Pomoću prozora Site možemo upravljati standardnim operacijama sa file.ovima, kao što su kreiranje novih HTML dokumenata,pregled, otvaranje i premeštanje file.ova i uklanjanje file.ova.

  14. Kreiranje Dokumenta Pošto smo kreirali lokalni site, možemo kreirati dokumente koje ćemo staviti u njega. Dokument, koji je stranica našeg Web sajta, može sadržati tekst i slike, ali i animacije, video zapise, linkove ka drugim dokumentima i zvuk. Kada postavimo dokument, možemo mu odrediti osnovne elemente. Na primer, naslov stranice identificira dokument posjetitelju našeg sajta-obično se pojavljuje u naslovnoj liniji pretraživača. Pozadinske slike, boja pozadine i boje teksta i linkova čine našsite prepoznatljivim i ukazuju na razliku između običnog teksta i linka. Margine nam omogućavaju da odredimo veličinu gornje i lijeve margine naše stranice. Prilikom kreiranja naših dokumenata, možemo ponoviti istu operaciju bezbroj puta koristeći panel History.

  15. Kreiranje,otvaranje i spremanje HTML dokumenta • Dreamweaver nam nudi različite načine za kreiranje dokumenata. Možemo kreirati novi, prazan dokument ali možemo otvoriti postojeći HTML dokument, čak iako on nije napravljen u Dreamweaveru. • Možemo otvoriti i tekst filove koji nisu pisani u HTML-u, kao što su JavaScript file.ovi, e-mail tekst file.ovi ili tekstualni file.ovi sačuvani u word procesorima i tekst editorima. • Kreiranje praznog HTML dokumenta u novom Document prozoru: U Windows izaberemo File>New u postojećem Document prozoru, ili Izaberemo Fil>New Window iz Site prozora. • Otvaranje postojećeg HTML fajla: Izaberemo File>Open. Ako je fajl kreiran u Microsoft Word-u, izaberemo File>Import>Import Word HTML. • Spreman je dokumenta: • Izaberemo File>Save. • Izaberemo ime za fajl i mjesto gde ćemo ga sačuvati. • Kliknemo na Save dugme da bismo spremili file.

  16. PREGLED I UREĐIVANJE HEAD SADRŽAJA HTML fajlovi se sastoje od dva glavne sekcije: head i body sekcije. Body sekcija je glavni dio dokumenta, vidljivi dio koji sadrži tekst, slike itd. Head sekcija se ne vidi, osim naziva dokumenta koji se pojavljuje u naslovnoj traci u pretraživačima i u Dreamweaveru. Svakoj stranici koju moramo dati naslov. Head sekcija sadrži i druge važne informacije, kao što su tip dokumenta, jezički “encoding”, ključne reči i indikatore sadržaja za pretraživače, definicije stilova itd. Elemente u ovoj sekciji možemo videti pomoću View meni-a ili Code inspectora. Pregled elemenata u head sekciji dokumenta: Izaberemo View>Head Content. Za svaki od elemenata head sadržaja se pojavljuje ikona na vrhu prozora Document u Design izgledu. Ubacivanje elemenata u head sekciju dokumenta: Izaberemo Head iz pop-up menija na vrhu Objects panela i kliknemo na jedan od dugmića, ili izaberemo jednu od stavki iz Insert>Head podmeni.a

  17. Unesemo opcije za elemente u prozoru za dijalog koji se pojavi. Uređivanje elementa u head sekciji dokumenta: Izaberemo View>Head Content. Kliknemo na jednu od ikona u head sekciji da je izaberemo. Podesimo atribute elementa u Property inspectoru. Meta tag je head element koji snima informacije o datoj stranici, kao što su enkodiranje slova, autor, ključne riječi itd. Ovi tagovi se također koriste za pružanje informacija serveru, kao što su datum isteka roka ili interval osvježavanja. Keywords (ključne reči): mnogi roboti pretraživači (programi koji automatski pretražuju Web sakupljajući informacije za pretraživače),čitaju sadržaj Keywords meta taga i koriste te informacije za smještanje našeg sajta u njihove baze podataka. Unesemo naše ključne reči, odvojene zarezima, u prozor Keywords.

  18. Okviri-Frames Okviri (Frames) se koriste na Web stranama da bi ih podjelili na višestruke HTML stranice. Na primjer, Web stranica se sastoji od tri okvira. Jedan glavni okvir sa strane sadrži schrol meni, drugi okvir na vrhu stranice sadrži logo i ime Web sajta, a treći najveći zauzima ostatak strane i sadrži glavni sadržaj. Svaki od ovih okvira je posebna HTML stranica. Svi oni rade zajedno na strani pomoću «Framesetova». Frameset je HTML strana koja definira strukturu i atribute Web stranice, uključujući tu i informacije o broju okvira na strani, veličini okvira, izvoru stranica koje se nalaze u okvirima itd. Frameset stranica se ne vidi u pretraživačima, ona jednostavno sadrži informacije o tome kako će se okviri prikazivatina stranici.

  19. Upravljanje i unošenje materijala Assets (materijali) su elementi kao što su slike ili media, koje koristimo za pravljenje stranice ili site.a Assets panel nam pomaže da upravljamo i organiziramo materijale za sajt mnogo lakše nego u prozoru Site. Panel prikazuje materijale na našem sajtu, djeleći ih u sljedeće kategorije: -Slike -Boje -URL-ovi -Flash filmovi -Shockwave filmovi -MPEG i QuickTime filmovi -Skripte -Template.ovi -Elementi iz biblioteke Assets panel možemo koristiti u dve različite svrhe: kao listu materijala našeg sajta kojoj se lako pristupa (Site lista), ili za organiziranje materijala koje najčešće koristimo (Favorites lista). Assets panel automatski ubacuje materijale iz našeg sajta u Site listu. Favorites lista je na početku prazna, a sami dodajemo u nju materijale koje želimo da koristimo često na našem sajtu.

  20. Slike i zvukovi Na Web stranicama se generalno koriste tri formata grafičkih fajlova – GIF, JPEG i PNG. Ipak, samo GIF i JPEG formati su u potpunosti podržani od strane većine pretraživača. GIF (Graphic Interchange Format) koriste maksimum 256 boja. Zbog toga su ovi fajlovi najbolji za prikazivanje slika sa velikim površinama pod «ravnim» bojama, kao što su: navigacijske trake, dugmići, ikone, logo i druge slike sa uniformnim bojama i tonovima. JPEG (Joint Photographic Experts Group) format je superioran format za fotografije i slike sa prelivima, zato što ovaj format može sadržavati milione boja. Zato su ovi fajlovi veći od GIF i PNG fajlova. Što je bolji kvalitet JPEG fajlova to su oni veći. Dreamweaver nam omogućava da dodamo zvuk i filmove na naš Web sajt brzo i lako. Možemo spojiti i izmeniti multimedijalne fajlove i objekte, kao što su Java applets,QuickTime, Flash i Shockwave filmovi, i MP3 audio fajlovi. Takođe možemo ubaciti Flash dugmiće i tekstualne objekte iz samog Dreamweavera.

  21. Publiciranje web stranice Postavljanje fajlova na udaljeni server: Izaberemo Window>Site Files da bismo otvorili prozor Site. Na vrhu prozora, iz pop-up menija izaberemo željeni sajt iz liste sajtova. Izaberemo željene fajlove koje želimo da postavimo na Internet. Kliknemo Put.

  22. Nastanak i razvoj Dreamweavera Adobe Dreamweaver (prije poznat kao Macromedia Dreamweaver) je profesionalni softver za izmjenu ili kreiranje web stranica, koji je u prvoj inačici razvijen od strane tvrtke Macromedia.Tu je tvrtku poslije otkupio Adobe Systems(2005 godine)-danas jedan od najpopularnijih alata za uređivanje i kreiranje web stranica. Trenutačno podržava sljedeće standarde: PHP, HTML, ASP, ASP.net, ColdFusion i XML.

  23. U sebi sadržava Designer, koji omogućava uređivanje web stranice bez poznavanja sintakse nekog od ovih standarda, a ima i izmjenjivač koda, koji se obično koristi kada je potrebno razviti neke naprednije web stranice. Dostupan je za Mac i Windows operativni sustav.Program je godinama evouluirao i jači i sve bolji napredniji alat.

  24. KRAJ

More Related