ADOBE DREAMWEAVER

Radila: Nela Milanović 4a

 SADRŽAJ
• Labaratorijska vježba 1
• Labaratorijska vježba 2
• Labaratorijska vježba 3
• Labaratorijska vježba 4
• Labaratorijska vježba 5
• Labaratorijska vježba 6
• Labaratotijska vježba 7
LABARATORIJSKA VJEŽBA 1
 VJEŽBA BR.1
• Dreamweaver je originalno razvijen od Macromedia i sada je
vlasništvo Adobe-a. Tokom godina postao je jedan od najpopularnijih
alata za razvoj web-stranica i naširoko je korišten od profesionalnih
web developera.
• Dreamweaver može biti pokrenut kao i većina Windows aplikacija. U
nastavku su dati primjeri kako on može biti pokrenut.
• Klikom na opciju u meniju Start.
• Pokrenite Dreamweaver. Kada pokrećete Dreamweaver po prvi put, može
vam bit postavljeno pitanje koje podešenje radnog okruženja želite koristiti. U
osnovi nema velike razlike između ponuđenih okruženja i lako možete
promijeniti prethodno odabrani izgled. Designer layout će prikazati vašu web
stranicu u WYSIWYG pogledu i smjestit će sve opcione panele na desnoj
strani. Coder pogled će prikazati vaše stranice u HTML pogledu (po default-
u) sa panelima na lijevoj strani. Ovaj pogled je prikladniji za iskusne HTML
programere koji su navikli na aplikacije kao što je Cold Fusion i Homesite koji
koriste ovakvu vrstu izgleda prozora.
• Kada se pojavi opcijaWorkspace Setup, izaberite Designer i kliknite na OK.
Kada se otvori Dreamweaveron će izgledati kao na drugoj slici na sljedećoj
stranici. Kao i kod većine aplikacija , vrh prozora je namijenjen za menije i
alatne trake. Na desnoj strani se nalaze Options Panels. Panel sa osobinma
se nalazi na dnu. Glavni dio ekrana predstavlja područje na kojem ćete
vidjeti bilo koje stranice koje budete editovali. Sve dok nijedna stranica nije
otvorena, moći ćete vidjeti uvodni ekran na slici 2. Ovo vam omogućava da
otvorite nedavno editovane stranice, kreirate nove fajlove i slično
 OTVARANJE WEB STRANICE U DW
Da biste otvorili dokument možete uraditi sljedeće:
• Kliknite na opciju Open na uvodnom ekranu
• Odaberite opciju Open sa menija File.
• Pritisnite [Ctrl] [O] na vašoj tastaturi.
• Primjenom jednom od prethodno pomenutih metoda otvorite fajl sa prethodnih vježbi kreiran u HTML-Duž gornjeg dijela
ekrana za editovanje nalaze se gumbi označeni sa Code, Split i Design. Trenutno se nalazite u Design pogledu.
• Kliknite na gumb za Code pogled. Umjesto WYSIWYG pogleda na stranicu, sada ćete vidjeti HTML kod za stranicu.
• Kliknite na Split gumb. Gornja polovina ekrana će prikazivati HTML dok će donja prikazivati istu stranicu u WYSIWYG
pogledu. Editovanje stranicu jednom pogledu će ažurirati stranicu u drugom pogledu.
• U primjeru prikazanom iznad možemo vidjeti da je trenutno područje za editovanje veličine 1043 x 679
piksela. Takođe, trenutna veličina fajla je 1 kilobajt i treba približno 1 sekunda za njegovo download-
ovanje sa klasičnim dial-up modemom. Poznavanje ovih informacija vam može pomoći pri dizajnu
vaših stranica na način koji je prikladan za korisnike. Na primjer, provjera vaše stranice u različitim
veličinama vam može pokazati koliko dobro su svi elementi prikazani onda kada se vaša stranica
prikazuje na računarima sa različitom rezolucijom ekrana.
• 4.Kliknite na Restore dugme u gornjem desnom uglu ekrana za editovanje.
• 5.Sada možete kliknuti na polje za promjenu veličine dokumenta u dnu kako biste vidjeli kako će
dokument izgledati sa različitim veličinama ekrana. Isprobajte neke opcije. Nakon toga ponovo
maksimizirajte prozor.

• 6.Kliknite na dugme Close da zatvorite dokument. Nemojte snimati promjene

LABARATORIJSKA VJEŽBA 2
 OSNOVE EDITOVANJA STRANICE
• Kreiranje strukture website-a
• U Dreamweaver-u, imjesto rada najednoj po jednoj stranici kao kolekciji stranica, možete raditi na stranicama kao cijelom
site-u. Ovo vam omogućava da uspostavite veze između stranica, da napravite neke izmjene na cijelom site-u i da upload-
ujete te izmjene odjedanput.
• 1.Otvorite Dreamweaver i na Welcome stranici u područuju Create New odaberite Dreamweaver Site.
• 2.Kada se pojavi prozor Site Definition, unesite Moje cvijeće kao ime site-a.

• 3.Kliknite na Next. Server tehnologije koriste skripte kao što su ASP i PHP koje mogu pružiti dodatne funkcionalnosti našem
website-u. Za sada ih nećemo koristiti, pa stoga kliknite na No i zatim na Next.
• 4.Naredna opcija omogućava vam da možete editovati vaš website sa udaljene lokacije, kao kad na primjer želite editovati
site sa računara koji se nalazi negdje drugdje u mreži. Za sada izaberite opciju Edit local copies. Ovo znači da ćete raditi na
site-u samo na vašem računaru. A onda kada budete spremni, izmjene će biti uploadovane na web.
• 5.Kliknite na Next. Na narednom prozoru možete specificirati kakva će biti konekcija
• 6.Zadnji stepen ce vam pokazati sumarne podatke,kliklinite na opciju DONE.
 KREIRANJE POČETNE STRANICE
• Kada smo kreirali site, potrebno je kreirati stranice.
• 1.Na desnoj strani prozora trebalo bi da vidite Files panel.
Ako ga ne vidite, izaberite opciju Files sa menija Window ili pritisnite [F8].
• 2.Kliknite desnim dugmetom miša na prazan dio Files panela,odaberite opciju New File.
Kao ime fajla unesite index.html.
• Kod website-a, uvijek je dobra ideja nazvati glavnu stranicu sa index, budući da je to
univerzano korišteno kao ime za glavnu stranicu. Kada ljudi pristupe vašem website-u,
moći će odmah da odu na ovu stranicu, bez uključivanja imena fajla u adresi. Međutim,
ako se vapa glavna stranica zove drugačije, onda je neophodno da se na kraju adrese
vašeg site-a uvijek uključi i ime fajla koji označava vašu glavnu stranicu.
• 3.Kliknite desnim dugmetom miša na novi fajl i odaberite opciju Set as Home Page. Zatim
kliknite dvaput na fajli index.html da ga otvorite
 EDITOVANJE STRANICE
• Prazna početna stranica biće otvorena u glavnom području za editovanje. Provjerite da li ste u Design pogledu, ako niste
podesite taj pogled.
• 1.Unesite tekst Moj cvjetni website. Pritisnite Enter da biste prešli u novu liniju i pritisnite ga ponovo da biste dobili još jednu
praznu liniju.
• 2.Unesite sljedeći tekst:
• Dobrodošli na Moj cvjetni website – jedino mjesto na kom možete vidjeti najljepše posude za cvijeće. Štagod vaše cvijeće
treba, budite sigurni da ćete to naći ovdje. Pogledajte u našoj galeriji izbor posuda za cvijeće
• 3.Pritisnite Enter i unesite sljedeći tekst:
• O nama – Galerija – Narudžbe – Kontakti - Linkovi
• 4.Kliknite na dugme Code u vrhu da biste vidjeli stranicu u HTML pogledu. Možete vidjeti da je kreirano nekoliko paragrafa
(korištenjem P taga). Drugi paragraf ima   u sebi. Ovo je posebni HTML karakter koji kreira prazan prostor, jer prazni
paragrafi i drugi prazan prostor biva ignorisan od strane web browsera ako nisu ovi znakovi uključeni.
• 5.Vratite se u Design pogled. Provjerite da li je na dnu ekrana prikazan Properties Panel. Ako nije, možete ga uključiti
pritiskom na dugmad [Ctrl] [F3] ili klikom na dugme.
• 6.U Properties Palette, kliknite na dugme Page Properties.
• 7.Za Background Image, unesite back.jpg kao što je to prikazano ispod. Kliknite na OK.
• 8.Kliknite na Preview/Debug na Browser ikoni ili pritisnite [F12] da provjerite kako to izgleda.
• 9.Snimite promjene na stranici.
 FORMATIRANJE STRANICE
• 1.Kliknite na Title box na vrhu dokumenta i unesite tekst Moj cvjetni website.
• 2.Kliknite na prvu liniju na stranici (Moj cvjetni website). Sada ćemo promijeniti paragraf u heading.
Budući da se promjena odnosi na cijeli paragraf, nije neophodno cijelog ga selektovati.
• 3.Za Format izaberite Heading 1.
• 4.Centrirajte tekst klikanjem na ikonicu u Properties Palette ili pritiskom kombinacije tipki [Ctrl] [Alt] [Shift]
[C].
• 5.U narednom paragrafu selektujte ime paragrafa kao što je to prikazano ispod.

• 6.Formatirajte ovaj tekst kao Italik klikanjem na ikonu u Properties Palette ili pritiskom kombinacije tipki
[Ctrl] [I].
• 7.Kliknite na zadnju liniju i centrirajte je. Zatim je selektujte, u Properties Palette izaberite opciju Size i onda
izaberite Smaller.
• 8.Pogledajte kako sada izgleda vaša stranica. Snimite izmjene.
 UMETANJE SLIKE
• 1.Kliknite na praznu liniju između headinga i uvodnog paragrafa.
• 2.Sa menija Insert odaberite opciju Image. Takođe, možete kliknuti na ikonu na alatnoj traci ili pritisnuti [Ctrl]
[Alt] [I].
• 3.U dialog box-u Select Image Source, odaberite sliku main_links.gif. Kliknite na OK da insertujete sliku.
Centrirajte je.
• Kada je slika selektovana, možete vidjeti različite opcije u panelu Properties. Ove opcije će ovisiti od toga šta
ste selektovali na slici.
• 4.Izbrišite tekst u headingu, tako da ostane samo prazna linija. Umjesto njega ćemo staviti sliku.
• 5.Insertujte sliku main_title.gif. Vaša stranica bi trebala izgledati slično kao na slici.
• 6.Selektujte insertovanu sliku. Pogledajte u Properties i primijetit ćete jednu pod nazivom ALT. Ovo će
specificirati alternativni tekst koji će biti prikazan u slučaju da slika ne bude učitana u browser. Za slike koje se
koriste za važne elemente kao što je heading, ovo predstavlja dobru ideju. Unesite Moj cvjetni website u Alt
box.
• 7.Takođe, ovo možete učiniti za sve ostale slike.
• 8.Prebacite se u Code pogled i pogledajte HTML kod. Česta provjera koda predstavlja kreativan način da se
pobliže upoznate sa HTML-om i identificirate sa potencijalnim problemima. Vratite se u Design pogled.
• 9.Snimite i pregledajte stranicu.
• I to izgleda ovako:
 KREIRANJE DODATNIH STRANICA
• Kreiranje dodatnih stranica
• 1.Kliknite desnim dugmetom miša na index.html u File Panel.
• 2.Odaberite New File i unesite about.html kao ime.
• 3.Ponovite ovaj postupa i kreirajte još četiri fajla sa imenima gallery.html, ordering.html, contact.html i links.html.
• Kreiranje linkova na nove stranice
• Linkovi u HTML-u kreiraju se korištenjem Anchor tag-a. Na našoj glavnoj stranici, kreirat ćemo linkove na druge fajlove na site-u. Tekst na dnu
predstavlja mjesto gdje će se ti linkovi nalaziti.
• 1.Provjerite da li je fajl index.htnl još uvijek otvoren u prozoru za editovanje. Na donjoj liniji selektujte tekst O nama.
• 2.Dreamweaver osigurava nekoliko načina za kreiranje linkova(pored kreiranja anchor tag-a u HTML-u). Ako kreirate link na drugi site, možete
ukucati adresu na koju kreirate link u Link box-u u panelu Properties. Ako kreirate link na fajl u okviru vapšeg site-a, možete ukucati ime fajla
direktno u link box. Možete kliknuti na ikonu desno od link box-a i potražiti fajl na koji želite kreirati link. Jedan od najjednostavnijih načina jeste
koristiti Point to File ikonu pored link box-a. To vam omogućava da selektujete fajl iz vašeg File Panel-a.
• 3.Pomjerite miš na Point File ikonu dok je tekst još uvijek selektovan. Povucite ovu ikonu na fajl about.html u File Panel-u. Link na ovaj fajl biće
kreiran i njegovo ime biće prikazano u link box-u. Ponovite isto za sljedeće linkove:
• Galerija - link na – gallery.html
• Narudžbe – link na – ordering.html
• Kontakti – link na – contact.html
• Linkovi – link na – links.html
• 4.Dno stranice bi trebao izgledati kao na slici.

• 5.Ako želite da imate sliku na koju možete kliknuti za prelaza na narednu stranicu umjesto teksta, samo selektujte tu sliku i ponovite isti postupak
kao za tekst. Provjerite da li je Border osobina slike podešena na 0
 KREIRANJE NOVE MAPE
• Jedan od načina za kreiranje linkova koji može biti prilično efektan na web stranici jeste kreiranje tzv. slikovna mapa (image map). Obično, ako
koristite sliku za link, destinacija će biti ista bez obzira na koji dio slike kliknete. Image map, međutim, omogućava vam da specificirate različite link
lokacije zavisno od toga na koji dio slike ste kliknuli. Ovaj efekat je moguće postići korištenjem više slika i podešavajući svaku od njih za drugi link.
Međutim, ovaj način ograničen je na pravougaoni oblik linka i usporava učitavanje stranice, budući da vaš browser mora učitati nekoliko slika
umjesto samo jedne. U ovoj vježbi koristit ćemo sliku na sredini naše glavne stranice da bismo kreirali image map sa linkovima na druge stranice.
• 1.Selektujte sliku na glavnoj stranici. U donjem lijevom dijelu Properties Panel-a nalaze se neki image map alati. Najprije je potrebno dati ime mapi,
s obzirom da jedna stranica može imati više slikovnih mapa, a browser mora znati za koju sliku su kreirani linkovi.
• 2.Ukucajte main_links pored opcije Map.
• 3.Slikovna mapa može imati tri tipa tzv. hotspot-ova (područja linkova). Prvi omogućava kreiranje pravougaonih područja za linkove na slici. Drugi
omogućava kreiranje područja u obliku krugova na slici. A treći omogućava kreiranje poligona u slučaju da su vam potreni manje simetrična
područja za linkove. Kliknite na Rectangular Hotspot Tool. Povucite pravougaono područje preko riječi About Us.
• Hotspot će imati oblik kao na slici.
• 4.Dok je hotspot još uvijek selektovan, koristite Point to File alat iz Properties Panel-a da kreirate link na fajl about.html. Ukucajte O nama u ALT
opciju Properties panelu.
• 5.Za Links koristit ćemo hotspot u obliku poligona, stoga kliknite na Polygon Hotspot Tool. Kliknite tamo gdje želite da se nalazi prvi vrh vašeg
hotspot oblika, a zatim klinite na naredni vrh i tako sve dok ne dobijete oblik koji želite.
• 6.Povežite ovaj hotspot sa links.html sa Linkovi kao ALT tekstom.
• 7.Ostale hotspotove kreirajte sa bilo kojim alatom koji smatrate prikladnim, ujedno dodajući i odgovarajući tekst u Alt opciju za svaki link.
• 8. Snimite i pogledajte website u browseru .
• 9.Pomjerite miš preko Image Heading ili preko jedne od hotspot na srednjoj slici i vidjet ćete ALT tekst koji će se pojaviti u većini browsera.
 PROVJERA MAPE
• Jednom kada ste uspostavili neke linkove na vašem website-u, Dreamweaver posjeduje neke alate koji vam omogućavaju da nadzirete cijeli site.
Većina tih alata se nalazi u Files Panelu.
• 1.Kliknite na dugme Expand/Collapse u desnom uglu File Panela. Ovo će promijeniti pogled tako da File Panel ispunjava ekran. Ako ste podesili vaš
site da ima opciju remote server, tada će fajlovi na udaljenom serveru biti prikazani na lijevoj strani, dok će fajlovi na vašem računaru biti prikazani
na desnoj strani. Ovo možete koristiti za sinhronizaciju između fajlova na vašem računaru i onog što se nalazi na „live“ verziji website-a.

• 2.Kliknite na Site Map ikonu na alatnoj traci na vrhu. Sada možete vidjeti vizuelnu predstavu veza između stranica na vašem website-u. Klikom na
ime fajla na desnoj strani će ga selektovati na mapi site-ai obrnuto. index.html se nalazi na vrhu budući da je on dizajniran kao početna stranica.

• 3.Ponovo kliknite na dugme Expand/Collapse da se vratite u standardni pogled i sačuvate vaš rad.
LABARATORIJSKA VJEŽBA 3
 KREIRANJE TEMPLATE-A
• Sada kada je glavna stranica za naš website gotova, potrebno je kreirati
ostatak stranica. Svaka od njih će imati izgled koji slijedi plan prikazan na slici
ispod. Logo Heading stranice
Početna Sadržaj stranice
O nama
Galerija
Narudžbe
Kontakti
Linkovi

• Kada se kreira više stranica koje će biti slične, moguće je koristiti template za
kreiranje osnovne strukture i zatim koristiti taj template kao početnu tačku za
kreiranje pojedinih stranica. Prilikom kreiranja templeta, koritićemo nekoliko
novih tehnika. Uglavnom, za kreiranje izgleda stranice koristit ćemo tabelu.
Tabela će biti korištena za pozicioniranje headinga i linkova za navigaciju sa
strane. Tabele su najčešći alati za kreiranje izgleda stranice website-a.
 STARATANJE TEMPLATE-A
• Sa menija File izaberite New (ili pritisnite [Ctrl][New]).
• Selektujte Basic Page na listi opcija. Zatim odaberite HTML template i klinite
na Create. Sada je kreirana nova stranica i u nastavku ćemo je koristiti kao
osnovu za naš template.
• Prva naredna stvar je snimanje template-a. Sa menija File odaberite Save ili
pritisnite [Ctrl][S].
• Na ekranu će se pojaviti poruka da nemate niti jedan region za editovanje.
Ovo je u redu, budući da ćemo to kreirati kasnije. Ako želite možete kliknuti
na opciju Don't warn me again prije nego kliknete na OK.
• U području Save as na prozoru unesite Main Pages i kliknite na Save.
Template će biti snimljen u foledru unutar foldera vašeg site-a, tako da
možete otvoriti template za kasnije modifikcije.
 PODEŠAVANJE NAVIGACIONE TABELE
1. Sa menija Insert selektujte Table, ili znači da neće biti praznog mjesta
pritisnite tipke [Ctrl][Alt][T] ili kliknite na između ćelija. U nastavku ćemo
ikonu na alatnoj traci. podesiti dimenzije ćelija u tabeli.
2. Podesite opcije kao što je to
prikazano ispod. Za našu glavnu
tabelu imamo samo jedan red
podijeljen u dvije ćelije. Table width
je podešena na 100 % (a ne 100
piksela) tako da zauzima cijelu širinu
stranice. Border thickness ima
vrijednost 0, što će ukloniti bilo kakvu
vudljivu ivicu oko ćelija u tabeli. Cell
Padding je 0 što znači da neće biti
praznog prostora oko unutrašnje
ivice ćelije. Cell spacing je 0 što
 OSTALI KORACI PODEŠAVANJA
NAVIGACIONE TABELE
3. Pomjerite miš na ivicu lijeve ćelije 6. Kliknite sada unutar prve ćelije. U 10. U naredne ćelije dodajte sljedeće
sve dok njena ivica ne bude panelu Properties unesite slike i njima odgovarajući Alt tekst:
uokvirena sa crvenom linijom. Kada #66CCCC (ili izaberite neku drugu)
postavite miš u tu poziciju, kliknite za background color. Tabela će • nav_home.gif Početna stranica
lijevim dugmetom miša da izgledati kao u nastavku. • nav_about.gif O nama
selektujete ćeliju.
4. Properties panel će prikazati • nav_gallery Galerija
osobine ćelije(a). Lijeva ćelija će • nav_ordering.gif Narudžbe
sadržavati navigaciju za stranice i 7.Postavite kursor u prvu ćeliju i
želimo da bude tačno 150 piksela selektujte opciju Insert table. • nav_contacts.gif Kontakti
široka. Unesite 150 u opciju Width.
Budući da niste unijeli širinu za 8.Podesite opcije isto kao u • nav_links.gif Linkovi
drugu ćeliju, ona će zauzeti prethodnom primjeru, samo ovaj
preostali prostor, tako da ne put će tabela imati 6 redova i 1
morate ništa mijenjati. kolonu i biće 150 piksela široka.
5. Selektujte sada obje ćelije. To 9.Kliknite na prvu ćeliju i insertujte sliku
možete jednostavno uraditi klikom nav_logo.gif. Kao Alt tekst u
sa lijeve strane tabele. U panelu Properties panelu unesite Moj
Properties, podesite vertical cvjetni website.
alignment na top.
 OSTALI KORACI
11.Navigaciona traka 12. Postavite kursor u 13. U gornjoj ćeliji podesite
ovog website-a je desnu ćeliju i insertujte background color na
vjerovatno malo veća novu tabelu sa 2 reda i 1 #66CCCC i height
nego što bi to trebalo kolonom. On treba da osobinu (visinu) na 60
biti. Za pojedine ima širinu 100 % kako bi piksela.
rezolucije ekrana, ljudi popunila sav raspoloživ
će morati korisiti klizače prostor. Podesite Cell
da bi vidjeli donje padding na 2 piksela
linkove. U ovoj vježbi, kao na slici.
slike su nešto veće kako
bi bilo lakše raditi sa
njima. Vaša stranica bi
trebala izgledati kao na
slici.
 PROSTOR KOJI JE MOGUĆE
EDITOVATI
• Za naš website, jedino područje koje želimo mijenjati jeste naslov na vrhu
stranice i sekciju u kojoj se nalazi sadržaj stranice. Za oba područja ćemo
insertovati područja za editovanje.
• Kliknite na gornju ćeliju sa desne strane. Sa menija Insert, odaberite Template
Objects i zatim Editable Region ili [Ctrl][Alt][V]. Kao ime regiona unesite
Heading i kliknite na OK.
• Kliknite na donju ćeliju. Pritisnite dvaput Enter kako biste kreirali dvije nove
linije. U zadnu liniju postavite navigacioni tekst kao na index.html stranici.
Sada bi linkovi trebali izgledati kao na slici, s tim da Početna predstavlja link
na index.html.
• U prvoj liniji, dodajte još jedno područje za editovanje kao pod 1. i nazovite
ga Main. Sada bi stranica trebala izgledati kao na sljedećoj slici. Sačuvajte
promjene template-a.
 PRIMJENA TEMPLATE-A
• Sa menija File odaberite New. ([Ctrl][N]). Kada se pojavi prozor za kreiranje novog dokumenta, izaberite tab Template.
• Na lijevoj strani prozora se nalazi lista vaših site-ova. Selektujte Moje cvijeće. U srednjem dijelu biće prikazana lista template-a za dati site.
Selektujte template Main Pages i kliknite na Create.
• Pomjerite se mišem izvan područja predvišenog za editovanje. Možete primijetiti da se pojavljuje kao prekriženi krug umjesto vašeg miša.
• Sada kliknite na područje za editovanje, izbrišite postojeći tekst i unesite O nama. Formatirajte ga kao heading 1. Zatim kliknite na Main
područje za editovanje, pa postojeći tekst zamijenite sa sljedećim:
• Kompanija Moje cvijeće predstavlja malu firmu otvorenu u Tuzli. Sve posude za cvijeće su ručno izrađene od kvalitetnih materijala i kao
takve isporučuju se širom svijeta. Primjeri nekih od posuda mogu se vidjeti u Galeriji. Takođe, posude se mogu izraditi u skladu sa željama
kupaca. Posjetite našu stranicu Kontakti da biste dobili više informacija o posudama ili zatražite kompletan katalog.
• Kompanija Moje cvijeće je proizašla iz hobija početkom 90.-tih, kada je vlasnica kompanije počela sa prodajom svojih posuda
zainteresovanim poznanicima i prijateljima. Od tada, posao je značajno porastao i sada imamo cijeli tim vrsnih grnčara koji rade raznovrsne
posude kako bi zadovoljili želje naših kupaca.
• Sigurni smo da imamo baš pravu posudu za Vas.
• Promijenite opciju Title u O nama.
• Snimite stranicu kao about.html. Kada se pojavi prozor sa pitanjem da li želite zamijeniti postojeći fajl, kliknite na Yes.
• Kliknite na početak prve linije (prije teksta Kompanija Moje cvijeće predstavlja malu firmu otvorenu u Tuzli.) i insertujte sliku about_flower.gif.
• Selektujte sliku. U Properties panelu podesite osobinu Align na right. Ovo smiješta sliku na desnu stranu stranice sa tekstom oko nje. Snimite i
pregledajte dokument.
 AŽURIRANJE TEMPLATE-A

• Trenutno naš template ima navigacionu traku, ali nema hiperlinkova. Vratit ćemo se
editovanju našeg template-a, zatim snimiti promjene, ažurirati about.html prije nego što
korištenjem template kreiramo preostale stranice.
• Zatvorite about.html klikom na gornji desni ugao prozora ili pritiskom na tipke [Ctrl][W].
• Otvorite template Main Pages.
• Kliknite na Home sliku na navigacionoj traci. Kao u prethodnoj vježbi kreirajte hiperlink na
index.html.
• Za sve ostale navigacione slike kreirajte link na odgovarajući HTML dokument.
• Snimite izmjene. Pojavit će se prozor koji postavlja pitanje koje fajlove bazirane na ovom
template-u želite ažurirati. Kliknite na Update tako da fajl about.html bude ažuriran.
• Nakon toga pojavit će se prozor koji sumira izmjene. Možete zatvoriti ovaj prozor.
• Otvorite about.html u browseru. Sada možete vidjeti linkove na navigacionoj traci.
LABARATORIJSKA VJEŽBA 4

• Izaberite opciju New sa
menija File. Kada se
pojavi prozor New,
izaberite tab Template.
Selektujte Main Pages
template za site Moje
cvijeće. Kliknite na
Create. Sačuvajte novi
dokument kao
contact.html. Kada se
pojavi prozor, izaberite
opciju Yes da zamijenite
postojeći dokument sa
novim.
• Promijenite tekst u
heading-u i Title dio sa
Kontakti. Neka tekst bude
formata heading 1.
• U Main području,
zamijenite postojeći tekst
sa sljedećim tekstom.
Boldirajte riječi kao što je
to dato u tekstu.
• Ako želite stupiti u kontakt
sa nama zbog narudžbi ili
drugih informacija,imate
KREIRANJE LISTE
u nastavku.. • Na početku prve linije • Opcije stila omogućavaju
teksta (Ako želite stupiti...) vam da birate između pet
• Telefon: 035 239 876 insertujte sliku stilova HTML-ovih
• Fax: 035 239 789 icon_contact.gif. pobrojanih listi koje
Promijenite osobinu Align uključuju brojčane,
• Email: slike u right. abecednei liste sa rimskim
info@mojecvijece.com brojevima. Start count
• Selektujte četiri linije koje omogućava vam da
• Adresa: 2/37 Maršala Tita, počinju sa boldovanim birate sa čim počinje
75000 Tuzla, Bosna i tekstom. Želimo kreirati vaša lista (ako ništa drugo
Hercegovina nepobrojanu listu, ali ne definišete ona počinje
ćemo za početak kreirati sa 1).
• Selektujte email adresu u pobrojanu listu.
tekstu. Kao Link osobinu u • Izaberite stil za vašu listu i
Properties panelu unesite • U Properties panelu zatim klinkite na OK.
ovu adresu. Prije email kliknite na Ordered list
adrese ukucajte mailto: ikonu . • Dok je vaša lista još uvijek
(uključujući :). Ako želite • Dok je lista još uvijek selektovana, kliknite na
kreirati hiperlink na email Unordered List ikonu .
adresu, on mora selektovana, kliknite na
uključivati dio mailto:. nju desnim dugmetom • Snimite promjene fajla.
Ovo znači da kada miša, odaberite List i
korisnik klikne na nju, web Properties. Gornja opcija
browser će reći njegovom je namijenjena za
promjenu cijele liste, dok
email programu da kreira
novi mail adresiran na je donja opcija
email adresu u linku. namijenjena za promjenu
selektovanih elemenata
liste.
 KREIRANJE DEFINICIONE LISTE
• Kreirajte novu stranicu zasnovanu na istom template-u kao u prethodnoj vježbi.
Snimite stranicu pod imenom links.html, zamjenjujući postojeću sa istim imenom.
• Promijenite tekst u heading-u i naslov stranice u Linkovi. Stavite da je Format
Heading1.
• Izbrišite tekst iz main područja.
• Sa menija Text, odaberite List i zatim Definition List. Ukucajte Learn to Pot i pritisnite
[Enter]. Prva linija (definicioni izraz) je praćena sa linijom sa definicionim podacima.
Prema tome, u drugoj liniji ukucajte http://www.pots.com/ i pritisnite [Enter].
Selektujte tu liniju i kreirajte od nje hiperlink. Kompletna lista bi trebala izgledati kao u
nastavku.
• Kada dođete do kraja liste i ne želite da tekst u nastavku bude dio nje, možete
jednostavno otići na Text meni i selektovati List i zatim None.
• Ispred prve linije teksta ubacite sliku icon_links.gif, i postavite da ima desno
poravnanje
 KREIRANJE LISTE POMOĆU TABELE
• Ponekad je najbolji • U nastavku možete
način za kreiranje vidjeti izbor nekih od
listinga pomoću naših proizvoda. U
tabele. Mi ćemo okviru naše
koristiti tabelu da proizvodnje je
kreiramo listu posuda dostupno puno više
za cvijeće na stranici tipova posuda. Za
za predstavljanje pregled svih naših
proizvoda. posuda, ili ako želite
posudu posebno
• Kreirajte novu stranicu kreiranu za vas,
zasnovanu na posjetite našu stranicu
template-u kao u sa kontaktima.
prethodnom primjeru.
Snimite je pod imenom • Kreirajte hiperlink tako
gallery.html, da riječi stranicu sa
zamjenjujući na taj kontaktima
način postojeći fajl. predstavljaju link na fajl
contact.html.
• Heading tekst i naslov
stranice promijenite u • U novu liniju nakon
Galerija. teksta, umetnite tabelu
koja ima 8 redova i 3 •
• Obrišite tekst u kolone. Koristite opciju
području Main i Top u Header-u kada
ukucajte sljedeći tekst: budete kreirali tabelu.
• Jednom kada ste • Kada ste kreirali
kreirali tabelu, kliknite tabelu, njezina širina je
na jednu od ćelija na podešena na 100%. U
vrhu. U properties ovom slučaju, nama ta
panelu, pored opcije širina odgovara, ali isto
header će biti tako možete je
postavljena kvačica. mijenjati prema
potrebi. Pomjerite miš
• U prvu ćeliju u prvom na vrh tabele, gdje se
redu unesite Naziv, a u pojavljuje širina tabel.
drugu ćeliju unesite Kliknite na dugme koje
Opis. Treću ćeliju se pojavi kada se miš
ostavite praznu. Ostale nalazi na širini.
ćelije popunite kao u
nastavku. • Sa liste koja se pojavi
izaberite Clear All
• Ovdje je korištena slika Widths. Snimite
pot1.gif i njen Alt tekst dokument.
je isti kao naziv te
posude Crvena
Zemlja.
Popunite ostatak
tabele kao na slici. Alt
tekst odgovara
nazivima posude. Slike
su pot2, pot3...
LABARATORIJSKA VJEŽBA 5
KREIRANJE FORME
NASTAVAK
NASTAVAK
LABARATORIJSKA VJEŽBA 6
KREIRANJE CSS FAJLA
DODATNI SELEKTORI
KREIRANJE STILOVA ZA HIPERLINK
DYNAMIC HTML
LABARATORIJSKA VJEŽBA 7
OKVIR
FRAMESET
NASTAVAK FRAMESETA
NASTAVAK FRAMESETA