Uvod u Dreamweaver

Dreamweaver je vrlo moćan HTML i grafički editor (WYSIWYG - "What You See Is What You Get") za dizajniranje i izradu web stranica u najpoznatijim web tehnologijama kao što su (X)HTML, CSS, JavaScript, PHP ili ASP. Nadalje, Dreamweaver u najnovijoj (aktualnoj) inačici pod imenom Dreamweaver CS3 (kao dio Adobe-ove obitelji za web publishing) nudi slijedeće mogućnosti:

• jednostavno vizualno uređivanje web stranica umetanjem različitih elemenata i formatiranjem istih (WYSIWYG metoda -> što vidiš (na ekranu) je isto što vidiš (u internet pregledniku))
• podršku za napredno formatiranje stranica pomoću CSS-a,
• validaciju koda,
• provjeru „mrtvih“ linkova
• provjeru kompatibilnosti sa web preglednicima (IE, Firefox, Safari),
• korištenje predložaka (templates),
• jednostavnu integraciju sa ostalim programima iz kolekcije CS3 kao što su Photoshop i Firewoks,
•  mogućnost izrade dinamičkih stranica (korištenjem baza podataka i programskih jezika PHP i ASP), te mnogo drugih korisnih opcija...

Iako osim Dremaweaver-a postoji mnogo programa za izradu web stranica, npr. Adobe GoLive, MS Expression web 2, Nvu, Homesite itd., Dreamweaver je postao de-facto standard u web produkciji i iz razloga što je dio najveće i najpoznatije obitelji programa za print i web, te programa za video produkciju – dio kompanije Adobe
( www.adobe.com ) koja je prošle godine slavila 25. godišnjicu osnutka, a koja u svojem portfelju proizvoda ima najpoznatije alate i programe kao što su: Flash Player, Acrobat Reader, Photoshop, Illustrator, InDesign, Premiere, Dreamweaver itd...

Grafičko sučelje Dreamweaver-a

Dreamweaver ima mnogo različitih „prozora“ (okvira) i panela pomoću kojih se dodaju i modificiraju elementi na stranici (vidi sliku 1 - Grafičko sučelje Dreamweavera), ali u većini slučajeva najviše se koristite četiri glavne grupe „prozora“ (napomena: ukoliko nisu otvoreni, prozorima i panelima pristupate u izborniku Window).

1. prozor dokumenta (document window)
   - u ovom prozoru se izrađuju web stranice na jednostavan način ubacivanja različitih elemenata
2. insertna traka (insert bar)
   – kao što joj i samo ime kaže – insertna traka nam zapravo služi za insertiranje (umetanje) elemenata na web stranicu (slika, tekst, tablica, formular, multimedija i sl.)
3. „inspektor“ svojstava elemenata (property inspector)
   - omogućava podešavanje izgleda i atributa elemenata na stranici (npr. veličina, lokacija i položaj slike, formati teksta – bold, italic...)
4. grupe panela (panel groups)
   - paneli koji su međusobno grupirani i koji omogućavaju brzi pregled i editiranje određenih elemeanta na stranici (npr. Files paneli koji nam omogućava uvid u sve dokumente i mape određenog web sitea; pristupa se u izborniku Window – tipkovnička kratica F8)

Definiranje karakteristika web sjedišta (web site)

U procesu izrade web stranice, 1. korak je definiranje web sjedišta (web site) u kojem se određuje lokacija svih dokumenata i mapa na računalu, koji će se koristiti za izradu web site-a (svi HTML dokumenti, CSS dokumenti, slike u gif-jpg-png formatu, multimedijalni dokmenti...). Na taj način osiguravate jednostavan, siguran i brz rad u Dreamweaveru, jer Dreamweaver „pamti“ sve promjene koje radite na svojim dokumentima (npr. ukoliko preimenujete dokument uvod.html u index.html unutar istog web site-a, Dreamweaver će vas pitati da li želite promijeniti reference na linkove koji su povezani sa tim dokumentom; u slučaju da niste definirali web site u Dreamweaveru, a promijenili ste naziv html dokumenta, svi ostali dokumenti koji su međusobno linkani sa promijenjenim dokumentom neće više ispravno biti povezani.

Dremaweaver omogućava dvije metode definiranja web sjedišta:

1. čarobnjak (wizard) i
2. napredna metoda (advanced).

Ukoliko ste početnik možete koristiti prvu metodu pomoću čarobnjaka, gdje se korisnika u nekoliko koraka vodi kroz proces podešavanja svih bitnih elemenata web site-a.

No, preferirani i brži naćin je 2. metoda u kojoj je potrebno ispuniti nekoliko bitnih postavki (najčešće samo tri – naziv web site-a, odabir lokalne korijenske mape i odabir mape sa slikama; vidi sliku 2: Definiranje glavnih karakteristika web sjedišta ) i tada možete krenuti sa izradom vaše web stranice.

Napomene:
Lokalna korijenska mapa (local root folder) je glavna mapa na vašem hard disku u kojoj se nalaze svi ostali dokumenti sa kojima ćete raditi i koje ćete koristiti prilikom izrade web stranice – HTML dokumenti, slike, multimedija...). Naziv web site-a koji se upisuje isključivo služi kao referenca odnosno kao pomoć prilikom identifikacije određenog web sjedišta u Files paneli. Naziv web site-a se neće pojavljivati na web stranici ili web serveru. Nakon što ste završili izradu web stranice, potrebno je sve dokumente iz glavne mape prebaciti na web server kako bi se stranica mogla otvoriti u web pregledniku (npr. Internet Exploreru).

Zapamtite:
Uobičajeni proces izrade web stranice u Dreamweaveru je slijedeći:

1. prvo se kreira web stranica na lokalnom računalu (local site)
   - određuje se naziv web site-a i odabire lokalna korijenska mapa na hard disku računala
   - izradi se HTML dokument odnosno web stranica koja sadrži slike i tekst
2. stranica odnosno dokumenti se uploadaju pomoću ugrađenog FTP editora na računalo na Internetu koje se zove web server (remote site), gdje ista postaje vidljiva i dostupna svima koji imaju internet preglednik i pristup Internetu

S obzirom da su svi dokumenti sa lokalnog računala kopirani na web server, organizacijska struktura mapa i dokumenata je ostala ista kao i njihovi međusobni odnosi (povezanost putem linkova).

Definiranje web sitea je vrlo bitan korak u procesu izrade web stranica – i potreban je isključivo radi pripremanja Dreamweavera za rad na novom web projektu odnosno web stranici. Nadalje, Dreamweaver omogućava istovremeni rad na više web projekata (npr. ako radite web stranice za više klijenata ili ako vaša tvrtka ima više različitih web stranica). Postupak definiranja web site-a je isti i za sve ostale projekte...

blog comments powered by Disqus