Embed Size (px)
Citation preview
Internacionalni univerzitet u novom pazaru
Uputstvo u Dreamweaver
Web dizajn
Ajla Mujović
4/20/2011
Profesor: Muharem Kozić Student : Ajla Mujović
Sadržaj:
Uvod............................................................................................................................................................3
Radna površina I alati..................................................................................................................................4
Adobe Dreamweaver cs3 radna površina.............................................................................................5
Kratak opis menija :..................................................................................................................................6
KreiranjeWeb sajta I Web strane............................................................................................................6
Kreiranje nove veb strane......................................................................................................................10
Davanje naslova Web strani..................................................................................................................11
Davanje boje pozadine...........................................................................................................................11
Slika na pozadini strane.........................................................................................................................12
Odredjivanje boje fonta..........................................................................................................................12
Flash button:............................................................................................................................................13
Rad sa tabelama, unos slika u tabele..................................................................................................14
Primer 1................................................................................................................................................14
Primer 2................................................................................................................................................15
Rad sa listama.........................................................................................................................................15
Rad sa linkovima.....................................................................................................................................17
Tekst linkovi.........................................................................................................................................18
Email linkovi.........................................................................................................................................18
Download linkovi.................................................................................................................................18
Slikoviti linkovi.....................................................................................................................................18
Primer 3................................................................................................................................................19
Rad sa fomrama (formularima).............................................................................................................20
2 | P a g e
Uvod
Dreamweaver je kompletan program za web stvaralaštvo-HTML (Hypertext Markup Language) editor, program za autorstvo i stvaranje dinamčkih web stranica. Sve su te funkcije sadržane u jednom programu. Web stranice se prave korišćenjem HTML-a, ali se skoro sve može uraditi bez ikakvog znanja HTML-a. Ako želite da napravite web stranice profesionalnog kvaliteta, uključujući i pravljenje skripta, Dreamweaver Vam upravo to omogućava.HTML je jezik kojim se prave web stranice. Sastoji se od uparenih oznaka sadržanih u okviru uglastih zagrada (<>). Oznake obuhvataju objekte na web stranicama, kao na pr. tekst, ili stoje same. Na primer, HTML kod, koji čini tekst zadebljanim je sledećI <b>zadebljani tekst</b>. Ove oznake su primer uparenih oznaka. Oznaka kojom se završava neka celina uvek počinje kosom crtom. Ostale oznake, kao na primer oznaka za postavljanje slike na web stranicu, su jednostruke oznake: <img src="smile.gif">.Dreamweaver je WYSIWYG (what you see is what you get-ono što vidiš je ono što dobijaš) web editor, koji je u isto vreme veoma moćan i veoma jednostavan za upotrebu. Omogućava stvaranje novih web stranica, ali i uvoz i editovanje već postojećih. Dreamweaver neće promeniti ni poremetiti kod web stranice. Jedna od najpopularnijih mogućnosti Dreamweavera je oduvek bila mogućnost da ostavi već napravljene web sajtove nepromenjenima. Programeri Macromedie, kompanije koja je napravila Dreamweaver, nazivaju tu mogućnost "Roundtrip HTML". Dreamweaver je takođe i program za kompletno autorstvo. To znači da on omogućava obuhvatanje grupe stranica koje sadrže interaktivnost i animacije. Na taj način se mogu napraviti kompletne aplikacije. Iako Dreamweaver može da se koristi kao običan HTML editor, on može da se koristi i za stvaranje multimedijalnih aplikacija. Možete, naravno, samo da editujete HTML uz pomoć Dreamweavera, ali i da osmislite I napravite u njemu kompletan doživljaj za korisnike sajta.
3 | P a g e
Radna površina I alati
Prilikom prvog pokretanja Dreamweavera prikazaće se prozor dobrodošlice sa informacijama za nove korisnike, kao i niz novih mogućnosti za one koji vec poznaju program.
Elementi
Insert Bar, sadrži tastere za unos različitih tipova objekata, kao što su slike, tabele, layer. Svaki objekat je predstavljen HTML kodom koji omogućava podešavanje različitih atributa.Toolbar Dokumenta, sadrži podešavanje izgleda prozora dokumenta. Inače u Dreamweaveru postoje tri načina prikazivanja, to su Design View, Code View i
4 | P a g e
Split Design and Code. Dugmad za menjanje tih prikaza nalaze se na levoj strani ovog toolbar-a.
Adobe Dreamweaver cs3 radna površina
Prozor Dokumenta, prikazuje tekući dokument i rad na njemu. U donjem levom uglu prozora dokumenta nalazi se birač HTML oznaka (Tag Selector), u njemu se hijerarhijski prikazuju HTML oznake koje pripadaju trenutno izabranom elementu. Pocetna HTML oznaka je uvek <body>.Pano Properties, omogućava menjanje osobina selektovanih objekata ili teksta. Svaki objekat posjeduje različite osobine.Groupe Panoa, je grupa panela sa desne strane: Code Application, Files itd. Da bi otvorili zeljeni panel kliknite na strelicu sa leve strane imena panela.Site Pano, omogućava upravljanje fajlovima i folderima koji čine vaš sajt. Takođe obezbeđuje i pristup fajlovima na hard disku, slično kao kod Explorera (drvo).
5 | P a g e
Kratak opis menija :
File i Edit meni, sadrže standardne komande kao što su new, open, save, save as, copy, cut i paste. File meni sadrži I različite komande za prikaz i rad na tekućem dokumentu (Preview u Browseru, Print Code). Edit meni uključuje komande za selekciju i pretraživanje (Select Parent Tag, Find And Replace) i omogućava pristup editoru za prečice na tastaturi. Pristup preferencama je tako View meni omogućava izbor različitih prikaza dokumenta (Design View, Code View) i prikazivanje i skrivanje raznih elemenata strane i Dreamweaver alata. Insert meni predstavlja alternativu Insert Bara. Služi za dodavanje objekata u dokument. Modify meni daje mogućnost promene karakteristika selektovanog elementa stranice. Koristeći ovaj meni mogu se editovati tag atributi i menjati elementi tabela.Text meni obezbeđuje lako formatiranje teksta.Commands meni omogućava pristup različitim komandama, uključujući i one za optimizaciju slika sa Adobe Fireworks-om.Site meni pruža komande za kreiranje, otvaranje I editovanje sajtova.Window meni omogućava pristup svim panelima, inspektorima i prozorima u Dreamweaveru.Help, standardno uključuje Help sistem za korišćenje Dreamweavera.
KreiranjeWeb sajta I Web strane
Za početak objasnićemo pojam sajta. Reč sajt ima više značenja:Website, skup strana na serveru kojima pristupa posetilac preko svog browsera.Remote site, skup fajlova na serveru koji čine Web sajt, uglavnom gledano sa pozicije autora samog sajta.
6 | P a g e
Local site, fajlovi na lokalnom računaru identični onima na remote sajtu. Sa njima se radi na računaru, a potom se prebacuju na server.Site definition, u Dreamweaveru označava karakteristike lokalnog sajta sa informacijama o tome kako lokalni sajt komunicira sa remote sajtom.Sam postupak kreiranja je sledeći:1. Iz menija Site izaberite New site. Pojaviće se okvir za dijalog Site definition, koji nudi mogućnost izbora osnovnog (Basic) ili naprednog (Advanced) postupka
kreiranja sajta.
2. Sada upišite ime vašeg sajta i preñite na sledeći nacin.3. Dreamveawer sada pita da li želite da radite sa serverskim
tehnologijama (ASP, ASP.NET, PHP, JSP...). Izaberite Ne, jer ć će ovde biti razmatrani samo statički sajtovi. Definiciju samog sajta uvek možete izmeniti kada izaberete iz menija Site/Menage sites sites/Edit.
4. Program vas pita kako želite da radite sa datotekama vašeg sajta. Pritisnite radio- dugme : 'Edit local copies on my machine, then upload to server when ready. (Recomended)'.
7 | P a g e
5. Sada treba da upisete gde zelite da smestite datoteke sajta, ili pritisnite folder ikonicu desno od polja za unos teksta ako ste vec prethodno odredili za sajt. Taj izabrani folder se naziva lokalni korenski direkrorijum i pomoću njega Dreamweaver određuje putanje dokumenata, slika i hiperveza vašeg sajta.6. Na sledećem koraku vas program pita 'how do you connect to your remote server' .S obzirom da se radi o lokalnom sajtu izaberite 'None'.
7. Pritisnite next da biste presli na sledeći korak. Pregledajte podatke koje ste do sada zadali i pritisnite dugme Done da bi završili kreiranje sajta. Novokreirani sajt mozetevideti u sajt panelu.
8 | P a g e
9 | P a g e
Kreiranje nove veb strane
Novi dokument bez naslova (Untitled-1), koji se automatski otvara kada pokrenete Dreamweaver je HTML strana. Vrstu noveWeb strane tog dokumenta možete promeniti kada pritisnete dugme Preferences u istoimenom prozoru. Kreiranu stranu možete sačuvati tako što izaberete opciju Save iz menija File. Naravno, daćete joj ime i sačuvati u lokalnom direktorijumu sajta. Preporučljivo je snimiti datoteku pre stavljanja bilo kakvog teksta ili slika, jer će tada sve putanje koje se odnose na te elemente biti propisno formirane.Ne počinjite imena datoteka brojkom. Vodite računa da ime strane ne bude suviše dugo, jer se ime strane postaje sastavni deo URL adrese koju korisnik
mora otkucati da bi pristupio strani.
10 | P a g e
Davanje naslova Web strani
Svaki HTML dokument mora imati naslov, koji prvenstveno služi za identifikaciju i vidi se na naslovnoj traci browsera. Taj naslov takođe postaje ime Bookmarka koji se prilaže uz Web stranu. Zbog toga treba izabrati kratke izraze koji najbolje opisuju namenu same strane. Ako zaboravite da imenujete stranu Dreamweaver će je nazvat Untitled document.Najzad, strani dajemo ime upisujući ga u polje Title u Document Toolbar-u. Ukoliko Document Toolbar nije vidljiv može se pronaći u biranjem opcije Document iz Toolbars opcije menija View.
Davanje boje pozadine
U Dreamweaveru se boja pozadine lako menja pomocu specijalne palete boja za Web (Web-Safe Color Pallete). Na toj paleti ima 216 boja. Da bi promenili boju izaberite opciju Page Properties iz menija Modify. U ovom prozoru pritisnite polje sa bojom do opcije Background. Prikazaće se paleta boja, a pokazivač miša će se pretvoriti u pipetu. Dovedite pipetu iznad željene boje. Možete primetiti da se boja u HTML-u definiše heksadecimalnim brojem, koji opisuje količinu njene crvene, zelene I plave komponente. Sada označite boju i pritisnite dugme Apply.
11 | P a g e
Slika na pozadini strane
Na pozadinu se obično stavlja slika čijim se kopijama popločava cela strana. Strana može imati definisanu i boju i sliku za pozadinu. U prozoru Page Properties pritisnite dugme Browse do polja Background image i izaberite željenu sliku. Preporučljivo je staviti sve slike koje će se koristiti za izradu strane u jedan folder lokalnog korenskog direktorijuma.
Odredjivanje boje fonta
Kada ste izmenili boju pozadine, ili stavili sliku na nju, poželjno je da prilagodite boju slova teksta pozadini. Prilikom biranja boja za dokument izaberit one kombinacije koje se dobro željno slažu i koje su dovoljno kontrastne. Odabir boje teksta se takođe vrši u okviru Page properties prozora u polju za boju teksta.Zadavanje Web Browsera. Tokom razvoja Web strana biće neophodno da stalno proveravate izgled vašeg rada u različitim Web browserima, kao što su Netscape, Internet Explorer, Opera... Ono što vidite u prozoru Dreamweavera samo je priblizno jednako stvarnom izgledu prezentacije. Svaki browser prikazuje
12 | P a g e
Web strane na manje više različit način. S obzirom da svi posetioci neće koristiti isti čitač za gledanje vašeg sajta bilo bi najbolje, ako je to moguće, prilagoditi strane sajta bar onim najčešće korišćenim browserima.Izaberite File - Preview in Browser - Edit Browser List. Otvoriće se prozor za dijalog Preferences i prikazati čitače izabrane za proveru. Dreamweaver će automatski prikazati spisak čitača instaliranih u računaru. Tu možete odrediti koji će browser biti primaran a koji sekundaran, I eventualno zadati pečicu na tastaturi za pojedine browsere.
Flash button:
13 | P a g e
Rad sa tabelama, unos slika u tabele
U HTML-u, tablica brojem kolona (vertikalno) i brojem redova (horizontalno).Svako pojedino polje unutar tablice zove se celija,unutar koje se moze upisati neki tekst, postaviti slika ili kombinovati boje. Svaka tebela u HTML kodu počinje tagom </TABLE> i zavrsava se Tagom </TABLE>.Unutar ovog para tagova, svaki red kolone počinje i završava tagovima <TR> i </TR> (Table Row).Svaka ćelija unutar jednog reda, počinje i završava tagovima <TD> i </TD> (Table Date). Okvir tabele definiše se atributom BORDER unutar taga <TABLE>. Naredni segment HTML koda definiše tabelu sa samo jednom ćelijom.
Primer 1.
<html ><head><title>Definisanje pozadine, rad sa slikama</title></head><body><table bgcolor="#FF3300" border="1"><tr><td ><img src=" fdgdfg.png " width="125"height="94"></td><td ><p>...kolona2...</p><p>...kolona2...</p></td><td ><p align="center">kolona3</p><p><img src=" Slika001 (2).png " width="125"height="94"></p><p align="center">kolona3</p></td></tr></table></body></html>
14 | P a g e
Primer 2.
Rad sa listama
Liste (nabranja) mogu biti numerisane i nenumerisane. Numerisana lista započinje tagom <OL> (order list) a zavrsava tagom </OL>. Nenumerisana lista započinje tagom <UL> (unordered list) I zavrsava tagom </UL>.Svaka lista u listi, bila ona numerisana ili nenumerisana, započinje tagom <LI> (list item), koji je neparan. Da li će nabrajanje u listi biti arapskim ili rimskim brojevima, ili slovima abecede u numerisanoj, odnosno crnim ili belim kružićima određuje se atributom TYPE unutar taga <OL>, odnosno <UL>.
<html> <head><title>Rad sa listama</title></head><body>Primer obicne liste:<br /><br /><ol><li>Prva stavka u lisi</li><li>Druga stavka u listi</li><li>Treca stavka u listi</li></ol>Primer OL TYPE="I" liste:<br><br><ol type="I"><li>Prva stavka u lisi</li><li>Druga stavka u listi</li>
15 | P a g e
<li>Treca stavka u listi</li></ol>Primer OL TYPE="a" liste:<br><br><ol type="a"><li>Prva stavka u lisi</li><li>Druga stavka u listi</li><li>Treca stavka u listi</li></ol>Primer OL TYPE="circle" liste:<br><br><ol type="circle"><li>Prva stavka u lisi</li><li>Druga stavka u listi</li><li>Treca stavka u listi</li></ol></body></html>
16 | P a g e
Rad sa linkovima
Vaši linkovi mogu voditi na unutrašnjost stranice (internal) , na kojoj se nalaze (npr. link "na vrh"), na stranicu unutar vašeg domena(local) ili na neku drugu stranicu izvan vašeg domena(global).href atribut koristi:internal href="#strelica"local href="../slike/slika.jpg"global href="http://www.hotmail.com"
17 | P a g e
Tekst linkovi
<a href="http://www.link.net/" target="_blank" > idi na link </a>Deo koji govori na koji način će se otvoriti taj link:_blank" otvara novu stranicu u novom prozoru_self" otvara novu stranicu u trenutnom prozoru_parent" otvara novu stranicu u okvir koji je " nadređen" linku_top" otvara novu stranicu u trenutnom otvorenom prozoru, poništavajući sve ostale okvire.
Email linkovi
<ahref="mailto:[email protected]?subject=pomoc&body=trebampomoc">navesti mejl </a>Sa ovim kodom , kojeg možemo staviti bilo gde, otvara se email klijent za pisanje nove email poruke sa naslovom "pomoc" i sadržajem poruke "trebam pomoc"
Download linkovi
<a href="http://www.uninp.edu.rs/tekst.html">tekst dokument</a>
Slikoviti linkovi
Slikovite linkove ćete dobiti tako da napišete ovakav kod:<a href="http://www.link.com" target="_blank><img src="neka-slika.jpg"></a>
Uklonite okvir tih slika ovako:
<a href="http://www.tutorijali.net" target="_blank><img src="neka-slika.jpg" border="0"></a>
18 | P a g e
Primer 3.
Rad sa linkovima<html> <head><title>Rad sa linkovima</title></head><body>Primer linka koji poziva HTML dokument "Primer3.html"<br><br>Ovo je link na<a href="Primer3" target="_blank">Primer3.html</a><br><br>Primer linka koji poziva Web stranicu "google.com";<br><br>Ovo je link na <a href="http://www.google.com" target="_blank"> Google </a> za HTML.<hr>Primer linka koji poziva sliku "slika1.jpg"<br>Ovo je linka na <a href="Hydrangeas.jpg">sliku</a><br><hr>Primer DOWNLOADA zip fajla i primer linka na ePokrenite download Xamp servera klikom <ahref="http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.7.3/xampp1.7.3.exe/download">O v d e !</a> <br>Pisite ne <a href="mailto:[email protected]">ovu adresu </a></body></html>
19 | P a g e
Rad sa fomrama (formularima)
Forme u HTML dokumentu koristimo kada od korisnika želimo prihvatiti neki podatak i zatim ga proslediti na dalju obradu, snimiti ga u bazu podataka ili ga jednostavno poslati e-mailom na određenu adresu.Na primer, korisne su ako želimo pribaviti podatke o nekom korisniku, obaviti neku anketu ili pak korisniku omogućiti da popuni i pošalje neku naružbinu putem Interneta u cilju kupovine nekog proizvoda.Princip rada forme je otprilike sledeci (kranje pojednostavljeno):• korisnik popuni polja koja su mu ponuđena• klikne da dugme “SUBMIT” ili “POŠALJI”• podaci upisani u formu bivaju prosleđeni do određenog programa na serveru(pisanog npr. u Javi, PHP-u, ASP-u ili nekom drugom jeziku)• taj program ih prihvata, obrađuje ih, snima u bazi podataka, šalje povratnuinformaciju, ili radi nešto slično, zavisno već koja je njegova namena..Svaki HTML dokument može imati više formi, s tim da svaka počinje sledećim tagom:<FORM ACTION=“odrediste” METOD=“post”> i zavrsava tagom </FORM>Atribut ACTION=“odredište” određuje fajl koji, ili e-mail adresu na koju se podaci sa forme šalju na definisano odredište.Metod može biti “post” i “get”. O razlici između ova dva metoda slanja podataka iz forme ka serverskom programu, diskutovaćemo u u poglavjlu o PHP-u.
20 | P a g e
Primer jedne jednostavne forme dat je listingom fajla forma1.html.U ovoj formi korištena su samo dva od većeg broja tipova polja za unos podataka u formu, i toulazno polje tipa “text” i polje “textarea”, kao i dugmad “submit” i “reset”.
<html><head><title>Jednostavna forma</title></head><body bgcolor="#CC3399"><form action="obrada.php" method="post">Upišite svoje ime i prezime:<input type="text" size="30" maxlength="30" name="IME"><br><br>Upišite svoju poruku ili komentar: <br><textarea name="KOMENTAR" rows="5" cols="55"></textarea><br><br><input type="submit" value="Pošalji"><input type="reset" value="Prekini"></form></body></html>
kod: obrada.php<?phpecho "Pozdrav ".$_POST['IME'];echo "<br>";echo "Komentar koji ste poslije:<br>";echo $_POST['KOMENTAR'];?>
21 | P a g e
22 | P a g e
