You are on page 1of 165

1

DREAMWEAVER CS6- Korak po korak


JELINEK ZORAN
2
2.SADRAJ:
1.Dreamweaver-korak po korak
2.Sadraj
3.Html programski jezik
4.Rad sa frejmovima u Html-u
5.Programski paket DREAMWEAVER
5.1 Projektovanje Web prezentacije
5.2 Interfejs programa DW CS6
5.3 Izrada Test page
6.Izrada Web sajta
6.1 Izrada prve(home)strane
6.2 Izrada druge stranice
7.Izrada tamplete(ablona)i njegova primena
7.1 Kreiranje ablona(template) u DW CS6
8.Povezivanje stranica(linkovi)
8.1 Povezivanje prve i druge stranice i izrada tree i etvrte strane.
8.2 Imenovana sidra
9.Formatiranje texta
10.Ubacivanje slika na stranicu
10.1 Funkcija multiscrean
11. Rad sa tabelama
12.Slojevi i CSS Layout
13.Koncept slojeva u Dreamweaver-u
3
14.CSS stilovi u HTML-u
15. Kaskadni stilovi CSS u DW-u
16. Izrada novog CSS pravila
17.Korienje Spray menija.
18. Validacija i provera linkova
19. Izrada formulara
20. Izrada formi u DW CS6
21.Ubacivanje multimedijalnih sadraja na stranicu
22.Code Inspectori Code toolbars
23.Beheviors(ponaanja)
24.Postavljanje sajta na server
Svetlo plavi naslovi se direktno odnose na izradu samog sajta!U tekstu nadalje oznaeno je
kada poinje izrada sajta sa IZRADA WEB STRANE ,a kada se zavrava oznaeno je /IZRADA
WEB STRANE.Meutim da bi razumeli samu izradu web dokumenta,potrebno je znanje iz
ostalih poglavlja obeleenih tamno plavom bojom.Posebno obratiti panju na 12-to
poglavlje Slojevi i CSS Layout,i na poglavlje 14.CSS stilovi u HTML-u,kao i na poglavlje
3.HTML programski jezik.
4
3.HTML PROGRAMSKI JEZIK je osnovni jezik za definisanje Web stranice,a
sastoji se iz mnotva tagova i sadraja.Tagovi su elementi HTML koda.Kada se ukuca eljeni HTML
kod, potrebno je sauvati stranicu pod .html ekstenzijom.Takav fajl moe se pregledati u svim
internet pretaivaima ,kao i programima za izradu sajtova.Tako, ako recimo u Dreamweaveru
CS6 ukucamo:Hallo World u Dizajn prikazu , u Code prikazu dobijamo:
Ovde vidimo osnovnu strukturu HTML dokumenta,koji poinje sa <!DOCTYPE html,zatimsledi
<html i zavrava sa </html>(slash- kraj), a izmeu je poetak <head u kome je naslov Untitled
document ,pa kraj</head>,zatimpoetak<body> izmeu je tekst koji smo napisali Hallo world
i kraj</body>, i na kraju </html>.Vidimoda korienjemodreenih tagova definiemo eljenu
stranicu,prikazujemoslike,pravimo linkove,rasporeujemo sadraj.Specifinoza tagove je da
moraju biti otvoreni( <) ili zatvoreni(>).
1.1 Osnovni tagovi u HTML jeziku su::
1).html govori pretraivau da se radi o HTML dokumentu
2).head u head tagu se ostavlja informacija o imenu stranice kao i linkovi ka eksternim
fajlovima.Sadraj iz head taga nije vidljiv na samoj stranici,ali utie na njen izgled.
5
3).body- Glavni deo stranice koju vidi svaki posetilac sajta
4).h1,h2,h3,h4,h5,h6 su tagovi za naslove,pri emu je h1 tag sa najveim tekstoma h6 tag sa
najmanjimtekstom.
5)div- deli stranicu na delove-blokove.Koristi se kako bi se sadraj raspodelio na eljeno mesto
6).br- novi red,gde god da postavite br.tag,naredni sadraj pisaete u sledeem redu.
7).hr- linija koja se koristi za razdvajanje sadraja radi bolje preglednosti.
8).titlenaslov stranice.Ono to napiete u title tagu bie ispisano plavim slovima kao naslov
stranice u pretraivau,na tabu u kome je otvorena stranica.
9).meta- slui da na stranici definie kljune rei
10).link- koristi se za povezivanje stranice sa drugimelementima koje pozivamo u
stanicu.
11).script -povezuje se sa skriptama koje su potrebne stranici-
12).style -sadri stilove koje definiu dizajn stranice.
13)Liste
.li element liste
Postoje dve vrste liste:odreene I neodreene liste.
ol-odreena lista(ordered list)
1.Prva stavka
2.Druga stavka
3.Trea stavka
ul-neodreena lista(unordered list)
Prva stavka
Druga stavka
Trea stavka
6
Postoje tagovi koji slue za formatiranje teksta.Pomou njih vidimo, koju funkciju ima tekst koji
se nalazi unutar odreenih tagova.
14).a- koristi se za link
17).strong ili b- definie podebljan tekst.
18).em ili i- definie ukoen tekst
19).u - definie podvuen tekst
19).sub- definie potpisan tekst
20).sup- definie natpisan tekst.
Vrlo bitna opcija tagova je da oni mogu imati svoje atribute.Dakle najprostiji izgled div
taga izgleda ovako:<div>Ovoje sadraj div taga</div>
Ipak to nije dovoljno, jer treba jo definisati izgled(klasu) kojoj pripada i td.Zato
koristimo i sledee tagove:
21).id -identifikator elementa
22).class -uz pomo class atributa element svrstavamo na jednu ili vie podklasa
23).title- dodeljuje naziv elementa
24.)href- povezuje dokument sa nekim spoljanjimlinkom
25.)src- postavlja sliku na stranicu,odnosnoputanju do slike
26).style -definie umetnute stilove elemenata
Dakle sada emo ponoviti osnovne tagove: div koristi se za postavljanje
strukture sajta
1
<div>Struktura sajta</div>,
span u principu univerzalni kontejner, ali preteno slui za stilizaciju teksta
1
<span>Sadraj sajta</span>,
7
p paragraf tag iskljuivo se koristi kao kontejner za tekst
1
<p>Sadraj sajta</p>
a link tag slui za povezivanje stranica unutar sajta ,ili linkovanje ka sadrajima na drugim
sajtovima
1
<a href="http://www.google.com">Tekst koji je link i koji vodi na google.com</a>
b bold tag slui za stilizaciju teksta
1
<b>ovaj tekst je okruen bold tagom</b>
i italic tag takodje slui za stilizaciju teksta
1
<i>ovaj tekst je okruen italic tagom</i>
img ovaj tag slui za prikazivanje eljene slike u browser-u, odnosno na sajtu
1
<img src="url(putanja/do-slike.jpg)" alt="Kratki opis slike" />
br break tag ovaj tag slui za lomljenje teksta , odnosno pravljenje novog reda u
tekstu
npr.
kao
u
ovom
primeru
1
<br />
Obavezni tagovi su:
Doctype - tag koji definie tip dokumenta, u ovom sluaju taj tip dokumenta je HTML.
Pie se na samom poetku dokumenta u sledeoj formi:
1
<!DOCTYPE html>
html - u ovom tagu se nalazi apsolutno sve to postoji na jednom sajtu i sledi odmah nakon
Doctype taga.
1
<html></html>
8
head - head tag slui za definisanje parametara strane i ukljuivanje eksternih CSS
file-ova i java skripti
1
<head></head>
body - unutar body taga se nalazi sam code koji definie strukturu i sadraj sajta, kao
i svi ostali tagovi, izmeu ostalog i html tagovi koji su navedeni na poetku ove lekcije
1
<body></body>
Dakle osnovna struktura web prezentacije sadri ove glavne tagove koje smo pomenuli:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naslov ove stranice</title>
</head>
<body>
</body>
</html>
HTML koristi tagove da pomou njih ukae pretraivau , kako neki tekst ili slika treba da budu
prikazani na ekranu. Tagovi se stavljaju unutar < > zagrada. U veini sluajeva, tagovi se
postavljaju na poetak nekog dela dokumenta, a na kraju tog dela dokumenta postavlja se tag
zavretka.
Na primer da napravite naslov dokumenta koristimo sledei opis:
<title>Moj prvi HTML Dokument</title>
Uoite ova dva taga, <title> i </title> izmeu kojih se nalazi tekst naslova dokumenta. Vidite
da se tag zavretka razlikuje od taga poetka po kosoj crti (/).
Tag HTML
9
<html> tag oznaava poetak HTML programa (koda).
<html> tag se obino postavlja na poetak dokumenta, kao prva naredba za pretraivae. Na
kraju dokumenta postavlja se tag zavretka </html> . Izmeu ova dva taga nalazie se svi ostali
tagovi kao i sam sadraj dokumenta.
Tag HEAD
<head> tag je tag koji slui za poetak jednog posebnog dela dokumenta koje se naziva
zaglavlje dokumenta. Zaglavlje se nee prikazivati na ekranu.Ono slui da se unutar njega
definiu neke karakteristike dokumenta, kao to je naslov.
Zaglavlje se opisuje izmeu tagova <head> i </head>.
Primer dokumenta koji sadri zaglavlje u kojem je definisan naziv dokumenta tagovima
<title> i </title>:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
TITLE tag
Title tag vam omoguava da definiete naziv vaeg dokumenta. To se postie na sledei nain:
<title>Moj prvi HTML dokument</title>
Naziv dokumenta, poto se nalazi u zaglavlju, nee biti prikazan na ekranu, ali e se
pojaviti u na raznim drugimmestima (na vrhu prozora, u bukmark-u stranica i sl.)
BODY tag
10
10
<body> i </body> tagovi definiu poetak i kraj sadraja vaeg dokumenta. Sav tekst, sve
slike i linkovi na druge dokumente nalazie se unutar ovih tagova.
<body> se nalazi odmah nakon zaglavlja (head tagova). Tipina web stranica moe
izgledati ovako:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Ovde se nalazi sadraj vaeg dokumenta:
tekst, slike, grafika itd.
</body>
</html>
h tagovi
h tag se koristi za izbor veliine slova koja e se koristiti za naslove i podnaslove u vaem
dokumentu. Postoji est nivoa veliine od h1 do h6. Najvea slova se dobijaju tagom h1 a
najmanja tagom h6. Slede primeri za svih 6 nivoa.
Tagovima za naslove se ne postie samo promena veliine slova, ve su naslovi i
boldovani, a takoe ispred i iza naslova se dodaje po jedna prazna linija.
PARAGRAFI
11
11
U HTML, paragraf se oznaava tagom tag <p> i postavlja se na kraj svakog paragrafa
"normalnog" teksta (pod normalnimse podrazumeva tekst koji nema upotrebljene neke druge
tagove).
<p> ovaj tag prouzrokuje postavljanje teksta u novu liniju uz dodavanje jedne
prazne linije ispred
<br> ovaj tag je slian prethodnomsa razlikom to se ne dodaje jedna prazna linija
ispred (nema zavrni tag </br>)
BOLD I ITALIK TAGOVI
Moete posebnimtagovima oznaiti da va tekst bude u bold i/ili italic obliku.
Ne moete koristiti istovremeno oba taga (za bold i za italic). Ako grekomto pokuate onaj
poslednji unet e biti primenjen.
Bold i italikse javljaju u dva oblika: fizikomi logikom, i moete koristiti oba prema vaoj elji.
Upotreba ovih tagova vidi se u sledeim primerima:
FIZIKI TAGOVI
Ovo je <b>boldovano</b>
Ovo je boldovano
Ovo je <i>italic</i>
Ovo je italic
LOGIKI TAGOVI
Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto
Postoji mala razlika izmeu fizikog i logikog taga. Kod fizikog se menja samo oblik slova,
a logiki je zavisan od pretraivaa i moe uneti i druge promene ( recimo promenu boje)
Jedan od jako korisnih elemenata, koji se nalazi u elementu svakog sajta ,.jeste tag koji
ukljuuje eksterni CSS fajl:
<link href="global.css" type="text/css" rel="stylesheet" />
12
12
4.RAD SA FREJMOVIMAU HTML -u
Napraviemo prezentaciju koja sadri dva frejma,levi i desni.Na levoj strani bie dugmad za
navigaciju,a veb strane e se uitavati u desnomfrejmu.Prezentacija sadri tri glavna dela
1.index.html koji sadri tzv.FRAMESET
2.navigator.html koji se uitava u levi frejm i sadri navigacionu dugmad za linkove
3.home.html koji se uitava u desni frejm i predstavlja naslovnu stranu prezentacije. Prvo
emo napraviti index.html u kojem se nalazi FRAMSET,to je prva stranica koja se
uitava u brauser i ona ne sadri nikakav poseban sadraj u vidu teksta ili grafike.Ona
slui samo za to da se definie veliinu i poloaj frejmova pomou
taga<FRAMESET>,kao i da kae brauseru koji HTML dokumente da uita u koji frejm.U ovoj
prezentaciji napraviemo dva frejma kolone:prvi frejm irine 160 px,i drugi koji e popuniti
ostatak slobodnog prostora.Ulevi frejm se uitava strana navigator.html,a u desni frejm
home.html.Kod ove stranice ima sledei oblik
<HEAD>
<TITLE> HTML dokument</TITLE>
</HEAD>
<FRAMESET COLS="160*">
<FRAME NAME="levo" SRC="navigator.html">
<FRAME NAME="desno" SRC="home.html">
</FRAMESET>
</HTML
Kao to se na donjoj slici vidimo dve kolone odnosno FREJMA koji smo kreirali.Ovde ne postoji
body tag ve mesto njega<FRAMESET>tag koji deinie kako e delovi prozora biti podeljeni
na frejmove.Vidimo da je prvi atribut ovog taga COLS=160* to znai da e frejmovi biti
postavljeni u obliku dve kolone,tj da e prozor brausera biti podeljen na
2 kolone,tj da e prozor biti podeljen na dva vertikalna frejma.Za prvi frejm je odreena
13
13
160px irine,a drugi frejm ima* to znai da njegova irina nije ekplicitno odreena i da e
zauzeti preostali prostor.irina tog prostora zavisi od rezolucije.
Zatim slede dva <Frame> taga.Prvi definie koji se HTML dokument uitava u levi frejm, a drugi
koji se uitava u desni frejm.Ovo se postie pomou SRC atributa.Vidimo da su frejmovi prazni
jer nismo nita napravili od HTML dokumenata, koji bi trebalo da se uitaju u ova dva
frejma(navigator.html i home.html).Sada treba da napravimo ove dve stranice kao to se one
inae prave,sauvati ih ,recimo na jednoj u body tagu upiemo Hello people a u drugoj stranici u
body tagu Welcome to Serbia i obe sauvamo,one e
se automatski uitati levo i desno . Pazljivi citalac prethodnih redova se sea da smo svakom
frejmu dali odgovarajuce ime ("levo" i "desno"). emu nam ovo sluzi ako browser i ovako zna
da u levi frejm ucitava "navigator.html" a u desni "home.html"? Medjutim, s obziromda smo u
levom frejmu napravili navigacionu dugmad ,ijim se pritiskom menja sadrina desnog frejma,
ovo smo morali na neki nacin da objasnimo browseru, inace bi on sve linkove otvarao u istom
frejmu u kome se nalaze i dugmad. Zaboravimo na trenutak dugmad i zamislimo da se radi o
obicnimtekstualnimlinkovima tipa:
<a href="boje.html">
Dakle, ovakav link ne smemo postaviti u levomfrejmu (tj. stranici "navigator.html"), jer bi klikom
na njega stranicu "boje.html" otvorili u levom frejmu, a ne u desnom kao sto smo zeleli. Ovaj
problemse resava dodavanjem TARGET atributa u ovaj tag, i to na sledeci nacin:
<a href="boje.html" target="desno">
Kao sto vidite, vrednost TARGET atributa je upravo ime frejma u kome zelimo da se stranica
"boje.html" otvori. Sva navigaciona dugmad na levoj strani moraju u svom <a> tagu sadrzati
Target="desno" atribut kao bi se sve stranice otvarale u desnom frejmu, dok levi ostaje
nepromenjen. Na ovaj nacin se znatno ubrzava kretanje kroz prezentaciju, jer se leva strana
ne mora svaki put iznova ucitavati, vec se uitava samo novi sadraj desnog frejma.
14
14
(slika sa dva frejma)
Veba br 1,.
Napisati program sa hederom i dve kolone
.
<HTML>
<HEAD>
<TITLE>Primer tri frejma</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<FRAME NAME="gore" SRC="banner.html">
<FRAMESET COLS="15%,85%">
<FRAME NAME="levo" SRC="navigator.html">
<FRAME NAME="desno" SRC="home.html">
</FRAMESET>
</FRAMESET>
</HTML>
15
15
Prvo smo gornjimfrejmsetomizvrsili horizontalnu podelu na dva dela od 15% i 85%
respektivno, a zatim smo donjim frejmsetomizvrsili vertikalnu podelu na 20% i 80%.
Na ovaj nacin moete nastaviti da delite browser na jos sitnije frejmove. Evo spiska svih
mogucih atributa <FRAMESET> i <FRAME> tagova i njihovog kratkog opisa:
FRAMESET TAG:
BORDER
Odredjuje debljinu granice izmedju frejmova u frejmsetu izrazenu u
pikselima.
BORDERCOLOR Odredjuje boju granice izmedju frejmova.
COLS
Odredjuje broj i sirinu frejmova - kolona. Vrednosi se zadaju ili u
pikselima ili u procentima sirine stranice. Broj kolona je odredjen
brojemzadatih vrednosti koje se medjusobno odvajaju zarezima.
FRAMEBORDER
Ako je vrednost ovog atributa YES granica izmedju frejmova ce biti
trodimenzionalna, a ako je vrednost NO bice obicna neispupcena
16
16
granica.
ROWS
Odredjuje broj i sirinu frejmova - redova. Vrednosi se zadaju ili u
pikselima ili u procentima visine stranice. Broj redova je odredjen
brojemzadatih vrednosti koje se medjusobno odvajaju zarezima.
FRAME TAG:
BORDERCOLOR Odredjuje boju okvira frejma.
FRAMEBORDER
Ako je vrednost ovog atributa YES granica frejma ce biti
trodimenzionalna, a ako je vrednost NO bice obicna neispupcena
granica.
MARGINHEIGHT
Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od gornje i donje
granice frejma.
MARGINWIDTH
Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od leve i desne
granice frejma.
NAME Odredjuje referentno ime frejma.
NORESIZE Zabranjuje korisniku da menja velicinu frejma.
SCROLLING
Ima tri moguce vrednosti: YES - Frejm ce imati Scrollbar, NO - frejm nema
Scrollbar i AUTO - Scrollbar se pojavljuje samo po potrebi.
SRC URL stranice koja se ucitava u frejm.
5.PROGRAMSKI PAKET DREAMWEAVER
5.1 PROJEKTOVANJE WEB PREZENTACIJE
Postoje etiri osnovna principa koji predstavljaju temelje za projektovanje kretanja na webu,
kao i sadraja web prezentacije. Ti principi su:
Podela informacija na grupe grupisanje informacija u male delove od 4-6
17
17
elemenata
Relevantnost u istu grupu ukljuiti samo one elemente koji su isti; izuzeti
nebitne elemente
Oznaavanje oznaiti svaku grupu
Konzistentnost predstavljati informacije na konzistentan nain
18
18
Podela na grupe
- Potrebno je da se prezentacija organizuje u grupe koje su vidljive
- Vidljiva struktura web prezentacije i putanje kretanja moraju da budu
usaglaeni sa opaajnimogranienjima
Relevantnost
- Svaki deo ili grupa web prezentacije treba da sadri samo one
elemente koji su bitni za tu grupu ili deo
- Nebitni elementi se prebacuju na neko drugo mesto ili se briu
Oznaavanje
- Iskoristiti oznaavanje da se napravi arhitektura prezentacije koja e za
korisnika biti jasna i intuitivna
- Izbegavati oznake kao to su prethodni, sledei, gore, dole, jer
mogu dovesti do toga da korisnik zaluta
Konzistentnost
- Koristiti konzistentno kretanje, na primer dugme Kontakt treba da bude
iste veliine i na istom mestu na svakoj stranici web prezentacije
Najbitniji detalj kod izrade web prezentacija je voditi rauna o potrebama
korisnika
lokacije. Klju uspeno dizajnirane upotrebljive web lokacije je da se ona
posmatra sa gledita
korisnika.
Dizajniranje sa aspekta korisnika jeste izraz koji se odnosi na proces
dizajniranja koji
uvek u prvom planu ima korisnika.
KORISNOST I UPOTREBLJIVOST
Korisnost je funkcionalnost web prezentacije koja izlazi u susret potrebama
korisnika,
a upotrebljivost se odnosi na sposobnost korisnika da koristi lokaciju kako bi
postigao odreeni
cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi
19
19
lako,
omoguavaju korisnicima da bez greaka i zadovoljavajue postignu svoj cilj.
Upotrebljivost (engl. Web usability) ine sledee komponente:
Mogunost brzog korienja (pregledanja) web stranice Koliko jednostavno
korisnik postie jednostavne zadatke na web stranici koju prvi put pogleda?
Efikasnost Posle poetnog upoznavanja sa dizajnomweb stranice, koliko brzo
korisnik moe izvoditi zadatke pretraivanja informacija na stranici?
Memorabilnost Ako se korisnik vrati na web stranicu nakon odreenog
vremenskog perioda nekorienja iste, koliko jednostavno moe ponovno
iskoristiti steena znanja/vetine na web stranici?
Minimiziranje greaka Koliko greaka ine korisnici, koliko su ozbiljne te
greke i
mogu li se korisnici jednostavno i brzo oporaviti od tih greaka i nastaviti
koristiti
web stranicu?
Zadovoljstvo Da li je ugodno koristiti grafiki interfejs web stranice Najbitnije
stavke koje je potrebno obezbediti u web prezentaciji da bi ona bila uspena:
Jasno prezentovati najbitnije sadraje stranice Na poetnoj stranici (engl. home
page) treba prezentovati jasno i kvalitetno najbitnije sadraje
Gde, ta, kako i zato? Na poetnoj stranici korisnik treba dobiti odgovore na ova
pitanja: Gde sam? Koje sadraje mogu ovde pronai? O emu je re na ovoj stranici?
ta mogu raditi na ovoj stranici? Kako mogu pronai odreenu
informaciju?
Konzistentnost Najbitnije elemente na stranici npr. logo, navigacija, footer,
search page i sl. prikazati na konzistentan nain - uvek na istom mestu na
stranici
i na isti vizuelni nain
Samo itljiv tekst je koristan tekst Koristiti tamni tekst na beloj pozadini za
maksimalan kontrast odnosno maksimalnu itljivost
20
20
Pozadina stranice (engl. Page background) Koristiti jednostavne i blage
pozadine
na stranicama
Opisati svaku sliku Koristiti ALT tagove za sve slike, a najvie za navigaciju koja je
napravljena u slikama
Navigacija je klju Postaviti navigaciju na isto mesto na svakoj web stranici
Preglednost - Poravnati sve elemente na stranici (tekst, logo, navigacija i sl.) zbog
bolje itljivosti i preglednosti
Jezik pisanja jasan i razumljiv Koristiti jasan i razumljiv jezik pisanja sadraja Web
standardi - pridravati se web standarda (XHTML, CSS, JavaScript, DOM, XML)
PRISTUPANOST
Pristupanost Web sadraja se ogleda u dostupnosti tog sadraja ljudima sa
invaliditetomili nekim drugimfunkcionalnimili situacionimogranienjima.
Pristupaan sadraj
mora biti kompatibilan sa pomonimtehnologijama koje koriste ljudi sa
invaliditetom, posebno
sa ekranskimitaima. Mora postojati alternativa za vizuelni sadraj, za ljude
koji ne vide, i
alternativa za audio sadraj, za ljude koji ne uju.
KonzorcijumW3C je zagovornik projektovanja to pristupanijih web lokacija i
podrava inicijativu za pristupanost na Webu WAI (Web Accessibility Initiative).
Ova
inicijativa ne preporuuje samo pristupanost lokacija hendikepiranimosobama
ve i pravljenje
lokacija pristupanih bilo kome, ko radi u uslovima drugaijim od onih koje je web
dizajner
usvojio kao normalne. Pod ovim se podrazumeva da moda korisnici nemaju
monitor iste
veliine kao dizajner, moda nemaju toliko brz Internet kao dizajner a i obrnuto.
21
21
Iz WAI uputstva proizilazi da je potrebno uvek misliti na to da korisnici mogu da imaju
ogranienja u radu drugaija od dizajnera web sajta.
Preporueni elementi W3C konzorcijuma primenjeni na dizajn web sajta su
DEKLARISANJE TIPA I JEZIKA HTML DOKUMENTA
Meta jezik kojim se opisuje Web strana je HTML (Hypertext Markup Language). On se
sastoji od tagova <imeTaga>. Veina tagova ima i svoj par, koji oznaava kraj taga
</imeTaga>. Sadraj je smeten izmenu otvorenog i zatvorenog taga.
Tip dokumenta se navodi kroz DOCTYPE tag, koji se pie pre otvorenog html
taga.
Najnoviji standard za tip dokumenta je: <!DOCTYPE html PUBLIC "-
//W3C//DTDXHTML
1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ovaj dokument je definisan kao XHTML 1.0 Strict i taj tip obuhvata niz pravila i
preporuka za pisanje ispravnog koda. Neki od najvanijih odlika su odvajanje sadraja
od
prezentacije i pravilna struktura.
1.0 Strict dokument
.
Tekstualni ekvivalenti za slike
Svaki HTML tag koji prikazuje sliku <img> tag, treba da sadri alternativni
tekstualni
opis i on se zadaje preko alt atributa. Vrednost alt atributa e biti korien u
sledeim
sluajevima:
ekranski ita e tu vrednost proitati naglas ili poslati brajevom
displeju,
bie prikazana umesto slike u grafikompretraivau, u sluaju da slika
nije pronaena na zadatoj lokaciji,
bie prikazana umesto slike u grafikompretraivau ako je uitavanje slika
iskljueno,
alt tekst koriste Web spajderi, pri indeksiranju sajta, to moe doprineti
boljem rangu na pretraivaima.!
22
22
Boja moe da pobolja doivljaj koji korisnik ima kada poseti sajt. Ona se koristi da
skrene panju, da naglasi, da odvoji celine. Pa ipak, ima sluajeva kada
nepaljivo korienje
boja moe biti uzrok nepristupanosti sajta. Web lokacija moe biti
nepristupana ljudima koji
ne mogu da razlikuju boje, ili imaju problema sa opaanjemboja, ali i ljudima
koji imaju slabiji
vid. Obezbeivanje pristupanosti ovde ne zahteva prestanak korienja boja na
stranici. Boja
svakako doprinosi upotrebljivosti sajta, ako je dobro primenjena. Samo boja ne treba
da bude
jedino sredstvo kojim se istie neka informacija.
Bitno je osigurati da su svi objekti od znaaja na web stranici jasni i bez
upotrebe
boje. Objekti od znaaja su:
tekst,
linkovi,
navigacija,
delovi interfejsa (kao to su slikovna dugmad),
slike koje prenose neke informacije, a nisu samo isto dekorativne.
korienje dodatnih elemenata za isticanje informacije,
korienje vidova isticanja kao to su veliina, raspored elementa,
izbegavanje korienja naziva boja kao reference na element
paljiv odabir boja.
Kontrast
Pored brige o korienju samo boje za isticanje informacije, treba voditi rauna i o
kontrastu na stranicama. Ako su nijanse pozadinske boje i boje slova bliske, te
stranice nee
imati dovoljno kontrasta. To moe da postavlja problemljudima sa
poremeajima u opaanju
boja ili korisnicima sa monohromatskimdisplejom.
Takone treba posebno voditi rauna o tome da korisnici mogu podesiti njihove
pretraivae za prikazivanje boja nekih elemenata strane (pozadina, tekst..) i
zbog toga
23
23
obavezno treba uz pomo CSS dokumenta odrediti boje i teksta i pozadine. Kod
za pozadinsku belu boju: html { background: #fff; }
Kod za tekst na web stranicama tamno sive boje: body { color:#666666; }
IZRADA WEB STRANE
5.2 INTERFEJS PROGRAMA DREAMVEAVER CS6
Po pokretanju programa dobija se uvodni ekran ovog programa ili
Welcome Screan kao na slici.Interfejs se sastoji iz sledeih delova(MENUBAR
,APPLICATIONTOOLBAR,DOKUMENTTOOLBAR,STATUS BAR I PANELI)
24
24
MENI BAR se sastoji iz nekoliko
dugmadi: FILE,EDIT,VIEW,MODIFAY,FORMAT,COMMANDS,SITE,WINDOWS i
HELP . Pogledati sadraj svakog od njih.
APPLICATIONTOOLBAR ,
Sastoji se iz nekoliko dugmadi:LAYOUT DUGME za selektovanje raznih prikaza
stranice,EXTENDDREAVEAVER koristi se za pristupu menaderu ekstenzije.SITE DUGME za brzo
upravljanje i editovanje ve postojeih sajtova.DUGME WORKSPACE LAYOUT
slui za prebacivanje izmeu raznih radnih povrina i na kraju je SEARCH za pomo .
DOKUMENT TOOLBAR,
Nalazi se na vrhu svakog otvoreno dokumenta.
Prikazuje sve opcije i detalje vezane za aktivan dokument.Postoji pet vrsta prikaza:
CODE prikaz
SPLIT PRIKAZ
DESIGN PRIKAZ
LIVE PRIKAZ
LIVE CODE
1).Pritiskomna dugme CODE prikazuje se kod aktivne stranice u kome moemo i da
kodiramo runo u HTML u,CSS-u,JAVASCRIPT-u, ili ako radimo sa dinamikim stranicama u
PHP-u ili ASP-u
25
25
2).SPLIT prikaz se koristi da bi se istovremeno videli i kod stranice i dizajn stranice u dva
prozora,a moe se podesiti pogled i po vertikali ili kome je lake po horizontali.
3).DIZAJN pogled daje nam vizuelni prikaz koda koji je u Body tag-u,i vrlo je slian
onome to e se videti u itau
4.)LIVE prikaz nam omoguuje vidimo kod zajedno sa dinamikim
sadrajem,slinoprikazu u samom itau.
Paneli su smeteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE i ASSETS.
5.)LIVE CODE nam omoguuje da selektujemo elemente u dizajn prikazu i brzo
otkrijemo odgovarajui kod u levomprozoru,ili ako selektujemo jednu re u CODE
prikazu,ta ista re e biti selektovana i u DIZAJN pogledu,to je korisno.
Sledei element toolbara je mesto za naslov,koji nam omoguuje da brzo dodamo naslov
naem dokumentu,a koji e se pojavljivati u Title baru samog browser-a.
Sledea ikonica u redu je File menagment ,koristi se za preuzimanje i prenos
fajlova na sam server.
Preview/Debug in browser koristi se za prikaz stranice u itau.
W3C VALIDATiONvri validaciju stranice na kome trenutno radite ili celog sajta.
CHECK BROWSER COMPATIBILITY provera va kompatibilnost vaeg fajla na kome
trenutno radite sa drugimitaima.
VISUAL AIDS.koriste za razne alate koji mogu da asistiraju kod postavljanja nekih
parametara, bitni Paneli su smeteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE
i ASSETS.
PANELi smeteni na desnoj strani. mogu minimizirati pritiskomna dugme u
desnom uglu svih panela i tako napraviti veu radna povrinu.
STATUS BAR,
Status bar sadri dosta prirunih alata.
26
26
U levom delu Status bara nalazi se trenutno Tag selector<body> koji nam omoguuje
da selektujemo sadraj odreenog taga.U desnomdelu SELECT TOOL,I HAND TOOL
kao i veliina prozora u pikselima a na kraju UNCODE UTF-8
LENJIRI,MREAI VOICE
Pojavljuju se u levoj i gornjoj ivici prozora dokumenta. Desnim klikom mia moete
odrediti da li e lenjiri Lenjiri su odlian alat koji moe da vam asistira kod merenja i
postavljanja elemenata na Web stranicu. biti prikazani u pikselima, centimetrima ili
inima. X/Y koordinate lenjira koje predstavljaju 0/0 tj. poetak za obe ose po difoltu je
postavljen u gornjem levom uglu fajla. Ovaj poetak se moe pomeriti na bilo koju
lokaciju na stranici tako to emo kliknuti levim tasterommia na kvadrati u gornjem
levom uglu i povui do eljene lokacije na stranici.
X/Y koordinate se tada pomeraju na 0/0 na novoj poziciji. Vraanje na staru
poziciju se moe izvriti preko opcije Reset Origin. Iskljuivanje lenjira se vri
preko opcije Hide Rulers.
Mrea
Linije mree se proteu du celog dokumenta u jednakimintervalima, s leve na desnu
stranu i od vrha ka dnu dokumenta. One vam mogu pomoi za tano pozicioniranje
objekata na Web stranici. Moete ukljuiti Snap to Grid (privlaenje mrei) opciju za jo
bolje poravnanje. U podeavanjima mree (View>Grid>Grid Settings) moete odrediti
koje boje e biti linije u mrei, zatim moete odrediti koliki e biti razmak izmeu tih linija
i da li e se mrea prikazivati u vidu linija ili takica.
Voice
Postoje horizontalne i vertikalne voice koje moete dovui u otvoren dokument da bi
vam pomogle u merenju i postavljanju novih objekata na Web stranicu. Da biste kreirali
voice, potrebno je da je prvo lenjir ukljuen, zatim ete kliknuti levim dugmetommia
na lenjir i povui voicu do eljene lokacije na stranici. Na primer, ako elite da postavite
AP Div na stranicu, 250px od leve ivice dokumenta i 300px od gornje ivice dokumenta,
postaviete voice na tu lokaciju i
ukljuiete Snap to Guides (View>Guides>Snapto guides), zatim ete samo
privui Div ka toj lokaciji i on e se sam zalepiti za to mesto.
27
27
Voice su vidljive samo na radnoj povrini u Dreamweaver-u, a ne vide se na Web
stranici u itau.Na slici ispod prikazani su lenjir i voice.Ako postavimo AP div moemo
ga lepo namestiti na odgovarajue mesto.
5.3 IZRADA (TEST PAGE) STRANE
Program DREAMVEAVERkoji je vrlo ozbiljan zahtevan program ,koji nam
omoguuje visoki kvalitet izrade dinamikih veb sajtova. Kada otvorimo
File>New>Blank page>HTML>None>Create.otvorie se potpuno prazan
dokument koji je prikazan na slici ispod.Ako radimo u okruenju
design,upisaemona ekranu Hello World. (slika ispod)
28
28
:
Ako preemo u CODE prikaz videemo sledee:u levom prozoru je program kreiran
jedan HTML dokument na nain kako je to objanjeno u prvompoglavlju, u kome
dominiraju uvodni deo koji je standardan za svaki dokument
head sekcija i body sekcija.Code je veoma kratak jer nema mnogo
sadraja.Ppogledajmo SPLIT pogled ( slika ispod)
29
29
Tekst Hello World moemo formatirati, jer se ukljuio Prosperiti Inspektor.Za format
levo,moemo staviti Heading 1,2 ili3 I svaki put e se font promeniti.Takoe ako
selektujemo Hello World bie selektovane iste rei u Code prikazu,ili ako izbriemo
sadraj u Code prikazu u sekciji <body> on e nestati iz desnog prozora.
30
30
Da bi promenili naslov u title boxu od Untitled document upisati test page ,pritisnuti refresh i
ime e se pojaviti u boksu za naslov,slika ispod.
To isto moemo uraditi i u Code pogledu izmeu tagova <title>upiemo Test page</title>,pa
zatim refresh.
31
31
Test stranu moemo pogledati kako izgleda u pretraivau sauvati je,ali poto je u
pitanju proba prve stranice,sada je neemo sauvati..
6.IZRADA WEB SAJTA
Za izradu samog sajta potrebno je odrediti root folder i podfoldere.Sve u vezi sajta
bie unutar ovog foldera.Otvoriemofolder na desktopu i nazvati ga Spring Park.U
programu kliknemo na Site<Menage site >New site izaberemo
putanju do lokalnog Root foldera kao to je prikazano dole u Set up for spring Park
.Upiemo ime sajta koje se nee nigde pojavljivati,racimoime klijenta,a sa browse
dolazimo da foldera Spring Park koji smo prvobitno napravili, I u kome e stajati
sve to je vezano za sajt.Otvoriemo u njemu folder za slike,folder za CSS i
kasnije i druge sub foldere,koji nam budu potrebni.Ovo je prvi korak ka pravljenju
sajta.Ujedno e se ime koje smo dali sajtu pojaviti u Files panelu pored zelene fascikle.
32
32
Pre izrade glavnog dizajna potrebno je skicirate elju izgleda stranice :
33
33
Dizajn prve strane potujui elju klijenta.Sa File<Newi izabrati BLANK PAGE
HTML i iz layouta 2 kolone heder i futer i levi sajd bar a zatimpritisnuti Create
34
34
Ovo je konfiguracija koja nam odgovara naruiocu projekta ,i sada treba pristupiti ispunjavanju
sadrajem(content).Pre toga treba napomenuti da je vana irina dokumenta,i da se ona mora
podesiti za razne ureaje:smart fonove,tablete ili PC raunare,jer se protivno deo sadraja
nee prikazati na ekranu ureaja.Tako ako bi eleli
35
35
da stranicu rendiramo u recimo smart phonu rezolucija bi bila 320x480px
Ova podeavanja nam omoguuju alatke iz STARTUbara na desnoj strani gde klikom na
ikonicu phona,tableta ili PC dobijemo izgled I veliinu stranice u pxelima.
Za ureenje sadraja promenimo re INSTRUCTION u WELCOME TO SPRING PARK.Otvorimo
split pogled i selektujemo ceo pasus izmeu<p sadraj>/p.Zatimga obriemo na isto mesto u
Code prikazu upiemo:Our park is a great location for family day out.
36
36
Sada to isto treba da uradimo i sva dva ostala paragrafa.Usplit prikazu stavimo kursor
iza <p> taga u CODE prikazu koji poinje sa Because i dilitujemo ceo pasus,upiemo:Our marine
exhibits include new panguis from South America.We also have some new arrivals from warmer
climates.Naslov emo takoe obrisati ( to Clearin Method u New arrivals).Posle svih promena
naslova i paragrafa ukucavanjemnovog teksta u CODE prikazu koristi REFRESH svaki
put.Dobiemo preureenu prvu stranicu,bez teksta i naslova.Dopisati I poslednji paragraf kao na
slici ispod.Sada stranica ima prilagoen izgled naim potrebama i prikazana je na slici ispod.
37
37
Sada moemo srediti sajd bar i isprazniti njegov sadraj.Uradiemoto opet u SPLIT
prikazu u delu za CODE pogled.Selektovati prvi paragraf (ukljuujui oba paragraf taga),pa
delete i refesh ,pa,to isto uraditi i sa drugimparagrafom:
38
38
Vidimo da se poetna dosta promenila i da prati na dizajn sajta koji je traio
klijent.Sauvaemostranicu pod index.html(to je obavezno za home stranicu).
Dizajn druge stranice.
Sada imamo stranicu index.html i treba napraviti novu drugu stranicu,. Ovu stranicu
preureujemo od izgleda prve strane,prvo je sauvamo sa Save as kao new_arrivals.html,a
u Title naslovu upiemo Spring_Park new Arrivals page.
.
Kada preuredimo gornji izled sa novin podnaslovima ,dobijamo izgled druge stranice(slika
dole).Kasnije emo to uraditi I sa treom I sa etvrtomstranicomna potpuno isti nain, i svaku
emo sauvati pod svojim imenom.Ovaj deo nije teak i sve ide od prve stranice.Ako bi prvu
stranicu sauvali kao tamplete stranicu(to je objanjeno u sledeempoglavlju) onda bi
pravljenje tree I etvrte stranice bilo jo efikasnije i lake.Izgled druge stranice poto je sve
dopisano,to trebate i vi uraditi dat je na slici ispod.
39
39
/IZRADA WEB STRANE
7.IZRADATEPMLETA(ABLONA) I NJEGOVAPRIMENA ,
Stvaranje template stranice pomoi e nam da takvu stranicu,tzv.ablon koristimo i kod izrada
drugih stranica.Umeniju izaberemo File>New>Blank templete>HTML Templete>Layout>none
i pritisnite Create.(na slici ispod).Kada ovo uradimo dobijemo:
40
40
prazan prostor na kome treba formirati stranicu.
HTML tagovi sami po sebi ne donose mnogo mogunosti za izgled same stranice,zato slui
CSS(kaskadna lista stilova),koja nam omoguuje da svakomtagu dodelimo zaseban izgled i
poziciju.Najlake je da napravimo prvu stranicu , ali je nismo sauvali kao ablon stranicu. Ovde
emo pokazati kao se pravi stranica sa hederom,futeromi dve kolone direktno piui kod,kako
bi polaznici vebali HTML i CSS jezik.Koristiemoranije pomenuti div tag za pravljenje blokova.
41
41
Veba br.2,
Kreirati stranicu u HTML-u sa hederom,futeromi dve kolone
<div style="width:960px;">
<div style="border:1px solid blue;height:40px;margin-bottom:10px;">
Header
</div>
<div style="height:600px;margin-bottom:10px;">
<div style="border:1px solid green;height:600px;float:left;width:710px;"> Leva
kolona
</div>
<div style="border:1px solid dark Red;height:600px;float:right;width:210px;"> Desna
kolona
</div>
</div>
<div style="border:1px solid red;height:20px;">
Footer
</div>
</div>
Kada stranica sauvamo kao index.html dobiemo ta smo uradili- na sledeoj strani.
Raspored koji smo eleli je: heder,futer i dve kolone.To je tek prvi korak ka izradi web
stranice ablona u koju moemo unositi elemente i formatirati ih po naoj
potrebi.Rasporedje prikazan na slici ispod.Tu moemo primetiti da je na sajd bar sa
42
42
logom bio na levoj strani ,a sadraj u desnoj koloni.To se moe lako promeniti u samom kodu,
tako to levu kolonu napravimo uom recimo irine 210 px ,a desnu podesimo na
710px.Ali poto mi u projektu ne nastavljamo dizajn po ovom ablonu,ostae kako
jeste.Vi ako elite moete to da uradite i da napravite prvu stranicu kao ablon sa tekstom i
naslovima nae prve stranice,a onda je iskoristiti za pravljenje tree i etvrte stranice.
U naem sluaju imamo jedan glavni div,koji predstavlja kontejner u kome smo definisali da
irina bude 960px,a zatim u njega postavili ostale elemente . Stilovi koje smo u ovoj
konstrukciji web strane koristili su sledei:
width definie irinu elementa i pie se: width:710px; gde je 710px primer
vrednosti irine u pikselima
height - definie visinu elementa i pie se: height:600px; gde je 600px primer
vrednosti visine u pikselima
43
43
border ovaj stil eljenomelementu daje borduru i pie se: border:1px solid
red; gde je 1px debljina linije, solid tip linije (moze biti solid, dotted, dashed itd.), a red
boja bordure
margin predstavlja razmak izmeu elemenata. Pie se: margin-
right:10px; gde right predstavlja stranu elementa koja e dobiti zadati razmak, a moe
biti margin-top, margin-right, margin-bottom, margin-right
float float u kratkimcrtama lepi jedan element za drugi po horizontali.
Postoje float:left; i float:right;

Primer 1:
Ukoliko bismo npr. postavili 2 div elementa, dakle <div>sadraj</div> i jo jedan
element <div>sadraj</div> i prvom ili oboma dali parametar float:left; prvi element bi bio
zalepljen za levu ivicu, a drugi za njega. Mogue je koristiti i njegovu drugu opciju -
float:right; i u tom sluaju, element sa stilom float:right; bio bi zalepljen za desnu ivicu.
Za sada, elemente koje postavljamo da float-uju, obavezno se postavlja u div koji ima
definisanu visinu.
.
7.1 KREIRANJE ABLONAU DW CS6

1.Definiite veb sajt i otvorite stranicu koju ete upotrebiti za kreiranje ablona
2.Poto smo kreirali stranicu u predhodnoj vebi, trebamo je sauvati sa File>Save as a
tamplete



















3.Otvorie se mali prozor u kome smo izabrali sajt Spring park na koji moemo da
primenimo ovaj ablon,i dati ime ablonu Tamplete1.
44
44
4.Kreirajte etabilni region tako to e te u meniju izabrati Insert>Templete
object>Editibilanregion

Ovi regioni su okviri za sadraj koji je jedinstven za svaku stranicu na kojoj je primenjen ablon.
5.Otvorie se mali prozor( slika gore) u koji treba uneti ime regiona.Isto treba uraditi I sa ostalim
delovima kreirane strane svakoj oblasti dodeliti drugi nazive.
6.Sada otvorite stranicu na koju elite da primenite ablon
7.Izaberite Modifay>Template>Apply templete to Page,
Izaberite ablon koji elite da primenite na tu stranicu u pritisnite Select.
8.U prozoru Inconsistent Region Names izaberite ablon kliknite Use to all.
9.Kliknite na OK
Sve to e se kasnije menjati pri upotrebi ablona za izradu strane mora biti u promenjivoj
oblasti, ukljuujui i hiperveze. Ako pravite hiperveze u samom ablonu, za pronalaenje
hiperveze upotrebite ikonicu direktorijuma ili alatku Point to File koje se nalaze na panelu
Properties.
Hipervezu ne smete upisivati neposredno u odgovarajue polje na panelu Prosperties, jer
tada hiperveze nee raditi!. Dreamweaver automatski formira putanje ,kada koristite jednu
od ove dve metode. Na kraju snimite datoteku.
Menjanje promenjivih oblasti ablona moete kasnije da onemoguite. Iz menija Modify
izaberite Templates, a zatim Remove Template Markup. Nestae kontura koja oznaava oblast
kao promenjivu i sada je taj deo ablona zakljuan i ne moe se menjati u stranama
napravljenim pomou ovog ablona.abloni se mogu praviti i od gotovih stranica.,to je
najlake da uradite jer imamo index.html
45
45
stranu.,koja je prikazana na slici icpod(header,footer,levi sajd bar i glavni deo).
Sauvamo ablon kao template 1.Mi emo nastaviti kreiranje sajta neto kasnije,bez upotrebe
ablona koristei prvu stranu naeg sajta na klasian nain.
Veba br 3
Napraviti ablon stranicu od prve stranice index.html i iskoristite je da napravite drugu
stranicu sajta,po postupku koji je objanjen!
46
46
ALATI ZA RASPORED STRANICE
Glavni alati za raspored elemenata na web stranici su <frame>, <table>, i <div>. Okviri
(engl. Frames) i njihovo korienje je danas veoma sporno, i veina strunjka ih vie ne
koristi. Jedan od glavnih razloga je zato to pretraivai kao to su Google, Yahoo i
drugi imaju problema sa takvim stranicama jer ne mogu da ih vide, ili alju posetioce na
stranice na neprikladno prikazanimtekstomili bez teksta.
Tabele (engl. Tables) su sve manje u upotrebi danas, razlozi su sledei: Kada itai
(engl. Browsers) dou do tabele i krenu da je itaju, oni moraju dvaput da je
proitaju pre nego to prikau njen sadraj, jednomda izrade strukturu tabele a
drugi put da utvrde sadaj. Prilikom uitavanja ostalih web stranica na istoj lokaciji,
ponavlja se postupak
Tabele se ne prikazuju na ekranu deo po deo, ve se eka da se cela tabela uita i
onda tek prikae
Layers ili slojevi (engl. Divs) su elementi HTML jezika pomou kojih se uz kaskadne stilove
prave moderni, pristupani i upotrebljivi rasporedi elemenata na stranici.
1. CSS generalno zahteva manje koda nego tabele
2. Ceo CSS kod je u jednomeksternomfajlu koji se samo jednom uitava, zatim se
keira na korisnikovomraunaru
3. Preko CSS-a moe da se kontrolie redosled po kojem e se uitavati pojedini
elementi prvo je bitno da se uita sadraj ,pa tek onda elementi koji se sporije
uitavaju, npr. slike, zvuk, video.
IZRADA WEB STRANE
8.LINKOVI ( link relativne putanje u odnosu na sopstveni sajt)
1.Link sa druge na prvu stranu.
47
47
. u
Drugu stranu New Arrivals stranu prikai u SPLIT pogledu:selektovanje kod koji odgovara
hiper linku.Svaki hiperlink ima dva dela: Link one na kome napiemo recimo Home i pod
navodima#, koji kae gde link vodi.Ispred je a tag i na kraju sple tag.U dizajn prikazu
selektujete Home<Insert<Hiper link i za link upiemo index.html.
.
48
48
Za Target izaberemo _self I OK.
Uradili smo da link HOME vodi sa druge stranice na poetnu stranu.Sada se vratimo u dizajn
pogled.
Vidimo da link ne radi kada preemo preko njega.Ali ako preemo na LIVE pogled i kada
preemo preko linka on se promeni, pa klikom na Home(uz pritisnuto control dugme) preli bi
na matinu stranu ,koja je ispod New Arrivals-,a to je matina strana.
49
49
napraviti LINK koji sa matine strane vodi na drugu stranu
stranici u polje tekst upiemo New Arrivals,kliknemo na br
new _arrivals.html
Takoe link radii u pretraivau poto ukljuimo taj prikaz(znak za Internet pa izaberete
pretraiva,i kada kliknemo na link HOME on nas prebaci na Spring _Park to jest home page.
2.Link sa prve na drugu stranu.
Sada emo
1 na drugoj
nadjemo putanju i upiemo
.Selektujemo link
owse pored linka i
za target selfi na kraju OK . Ako
preemo na split view- link e raditi uz CONTROL plus klik na link.
.
Ako otvorimo stranicu u brauzeru link e postati aktivan i prebacie nas na prvu
stranu.Jasno je da e raspored linkova biti :Home;NewArrivals;Opening times;Admission
prices ,to emo kasnije uraditi koristei Java script i Spray meni.Za sada smo samo probali
da poveemo strane sa relativnimlinkovima u odnosu na dokument i root folder.
50
50
..
Sada emo se pozabaviti FUTEROMi obrisaemo text na obe strane u CODE
prikazu.Selektujemosadraj futera u kodu,kliknemo na footer u Prosperiti Inspektoru(na vrhu sa
leve strane) i pritisnemo delete.U footeru upiemo:Spring Park Inc.Last update Wednesday
July 4,2013.Na slici ispod ovaj tekst nije upisan pa ga vi dodajte i tako za svaku stranu.
51
51
Dizajn tree stranice,krenuemo od druge stranice na kojoj je promenjen naslov
New Arrivals, sauvali je pod novim imenom openining_times.html,napravili jedan red prostora
sa enter.elimo da ubacimo tablicu koja obavetava posetioce o rasporedu rada parka koji
poseuju.Predhodnosmo u Notepad-u napravili raspored:
Opening Times 2012
Open Close
Monday 08.00 17.00
Tuesday 08.00 17.00
Wednesday ClosedClosed
Thursday 08.00 17.00
Friday 08.00 19.00
Saturday 08.00 19-00
Sanday 08.00 17.00
Zatim ubacujemo tablicu koju smo sauvali na desktopu kao.txt fajl ,sa
File<Import<Tabuladata i u novom prozoru doli do putanje gde se tekstualni
dokument nalazi(desktop) i na kraji OK ubacuje tablicu odmah ispod naslova, kao na slici ispod :
52
52
Dreamweaver ima dosta mogunosti za opcije Copy/Paste.Ako postavimo mia ispred
reenice these kangaroosi kliknemo na <p> na statusnoj liniji reenica e biti
selektovana.Sa Copy /Paste iz menija edit moe se katovati ili zalepiti na drugo
mesto.Ako sada preemo na split pogled moemo izbrisati ceo paragraf izmeu dva
velika naslova,sa tim ako ostavimo kod za novi red &nbsp ,po brisanju blinker ostaje
izmeu redova, jer kod uva prored,.meutimukoliko izbriemo sve dobiemo sledei
izgled:
53
53
Ako stavimo kursor recimo ispred rei These i drimo Shift selektovae se ceo tekst
do kraja.Jedna re se selektuju jednim klikom, a cela reenica troklikom.
LINK(apsolutne putanje)
Moemo napraviti link na samoj stranici,i preko njega prebaciti se na neki URL adresu
recimo Wikipidiju(ovo se zove apsolutna putanja).Na matinoj strani pri dnu
selektujemo re here ,a potom ubacite hiper link.
54
54
Poto smo uneli podatke stisnuti OK.Re here postaje super link koji nas vodi na
Wikipidiju.
U sledeem izlaganju modifikovaemo link u odnosu na raniji postupak.Na stranici
Opening times selektujemo drugi link pa Insert i dobijamo prozor za dijalog.U prvi
upiemo New Arrivals, u drugo polje, doemo do stranice
55
55
new_arrivals.html I kliknemo na nju.U Polju TARGET imamo nekoliko opcija
:blank otvorie novu stranicu u veb itau.Izbor SELF otvorie stranicu na istoj stranici u
itau.Podesiemo BLANK.( sa ovom opcijom otvaramo novi tab).U polje TITLE
upisaemo tekst koji e se pojaviti kada miem prelazimo preko linka.Upisaemo
Click to see our latest new arrivals.i za klju K,pa OK
Sada moemo da otvorimo ita I sve ovo proverimo!
Dizajn etvrte stranice.
Postupimo kao sa treom stranicom,polazei od druge stranice ,uradimo potrebne
ispravke jer ne koristimo ablon o kome je bilo rei ranije, sauvamo je sa Save as
56
56
kao admission _ price.html,i podesimo futer.Posle ispravki ostae:
IMENOVANA SIDRA .
Ako na stranici New Arrivals dopiemo tekst Find out all about kanfaroos on Wikipedia
by clicking here.Ako na Web stranici kliknemo na poetak tog reda ,pa Insert>Name
Anchor na poetku reda pojavie se znak imenovanog sidra,tj linkujemo se direktno na
kraj te stranice- na to sidro.
57
57
Na stranici ubacujemo novi red :To find out about kangaroos,see here,i od rei here
napraviemo link do imenovanog sidra.
Ako kliknemo na OK preemo na LIVE VIEW kliknemo na here odlazimo na kraj
stranice,jer je tamo postavljeno imenovano sidro. LINK se ukljanja ako ga selektujemo
Modifay>Romove link.Za proveru linkova koristimo Site<Check Link Sidewide gde na
dodatnom panelu vidimo da li ima izbrisanoh linkova,koliko je spoljanjih linkova i sl.
Posebna vrsta linkova su email linkovi.Na stranici Opening times dopisaemo
tekst:To confirm todays opening times:send email to our office.Selektovaemo send an
email to our office,popunimo ta se trai upiemo eksterni link pote
,moete upisati email svoje firme kao na slici dole.
Klikom na link prebacujemo se na email potu.
58
58
9.FORMATIRANJE TEKSTA se vrI na vie naina,i to to se moe
formatirati jedna re recimo many ,koja se selektuje i pritisne dugme bold.U split
pogledu se moe videti da je na mestu umetanje,kursora u tom paragrafu napisano
STRONG za boldovanu re.Takoe re ATTRACTIONS se moe centrirati komandama
Format<Align<Center kao na slici.Takoe ako postavimo kursor na kraju paragrafa i
pritisnemo enter, program postavlja kursor u poloaj novog paragrafa.Ali ako
pritisnemo Shift<Enter kursor se postavlja na poetak novog reda!.
59
59
Na stranicui moemo ubaciti liniju koju moemo i formatirati.Ako prvo centriramo
Welcome to Spring park i elimo da ubacimo liniju iznad: Insert>html>horizontal
rule.Linija je tanka,ali nam Prosperiti Inspektor doputa da je popravimo,tako to za
visinu upiemo 10 piksela a za irinu100px.
60
60
Kada podeavamo width moemo podesiti i procente recimo 50% a linija e biti pola
duine od cele.
Ubaciemo text za futer na stranicu home page.Kliknemo na footer
Insert>Html>Specijal caracter i izaberemo Copyright i upiemo tekst.Ako elimo da
ubacimo i datum Insert>Data , recimo izaberemo datum, i ekiramo Update
automatacally on save. Pojavie se dananji datumu futeru.
Jo nam ostaje da ubacimo na futeru iste podatke za sve stranice koje smo
napravili.
Na drugoj stranici smo izvrili neke promene u tekstu tao to smo ARRIVALS
stavili u ITALIC font.Ako uemo u Windows>History pojavie se sedea slika:
61
61
U History panelu vidimo koje smo sve promene i formatiranja vrili na stranici.Ako miem
pomeramo kliza na gore AUTOMATSKI se vraa prvobitni izgled strane pre
formatiranja,znai brie se re koja je dopisana i gubi se italic.Ako bi kliza pomerali do
kraja- pojavio bi se PRVOBITNI IZGLED STRANICE,to znai da program belei sve
promene koje smo uradili na toj stranici od samog poetka.Ako se to uradi sa
naom stranicomdobiemo:
Takoe za vraanje upisanog teksta ili rei koristimo UNDO typing i REDO
backspace.
10.UBACIVANJE SLIKA vrI se tako to prvo u glavnom folderu otvorimo podfolder
images..Po otvaranju foldera idemo na Site>Manage site>Spring Park i otvori se novi
prozor,klikne na Advanced Settings
62
62
i odredi se putanja do odgovarajueg foldera za slike. Istovremeno se u FILE
panelu prikae da je folder images operativan.Sada samo treba u njega staviti slike.Poto
je postavljena slika Tri pingvina u svai idemo na Insert>Image i pronaemo putanju
do slike.Zatimse selektuje slika i pritisne OK.
Pojavljuje se prozor koji treba da opie datu sliku.
63
63
U polje alternativnio tekst ,koji opisuje datu sliku,ostavimo za sada empty i
OK.Pojavie se slika
Slika je odreene veliine u pikselima ,ali je moemo obraditi za poetak u
Properti Inspektoru.Poto je slika prevelika smanjiemo irinu na 300 px i kliknuti u
prostor za visinu slike.On e se automatski podesiti na 233 px jer program
64
64
automatski podeava vrednost.Sada je slika umanjena.
Sada moemo u samomprogramu kropovati sliku sa Modify>Image>Crop
Slika je dobila okvir i sada moemo birati veliinu slike ako nam je to potrebno,ili deo
slike.Slika posle smanjenja ako to elimo moe da se razvue,ali e REZOLUCIJA biti
loa.Slika se moe editovati pomou nekog drugog programa recimo pomou
Microsoft Painta sa Modify>Image>Edit width .Slika se
65
65
pojavljuje u Paintu.Ovde se moe dalje editovati,kao to se to radi u programima za
obradu slika(kontrast,otrina,jaina osvetljenosti i td).Iz dreamweavera moemo
takoe sreivati sliku preko Modifay>Image>Optimaze ( scharpen ili contrast.)Formati
koji se koriste kod slika su:
GIF ili skraeno Graphic Interchange Format.Ovaj format podrava 8-bitne slike sa
najvie 256 boja.Koriste se za crtee,crno bele slike.GIF podrava
transparetnost,pri emu se jedna ili vie boja podeavaju tako da budu providne I
da se kroz njih vidi veb boja strane ispod nje.Format GIF se smatra formatom bez
gubitaka,to znai da e slika prikazana u itau biti istog kvaliteta kao I kada je
napravljena.
JPEG je skraeno od Joint Photographic Expert.Format je predvien za 24 bitne slike i
milion boja.JPEG format se mora kompresovati pa ima gubitke,to znai da
kompresija rtvuje kvalitet slike-radi smanjenja veliine fajla.Ovo je standardan
format za Internet.Slike u ovom formatu ne podravaju transparentnost.
PNG skraeno Potable Netvork Graphic je naslednik GIF formata.Za razliku od
GIF-A IMA POBOLJANUKOMPRESIJUI POHRANJIVANJE TEXTA U SLICI.Prednost ovog
formata to on omoguava slike sa milionima boja i daje providnost pozadine.Mana mu
je to ne prikazuje slike u starim itaima pre verzije
4.0.Format prikazuje isti kvalitet slike i u Windows sistemima i u Mac sistemima.Programi
Adobe Fireworks i Adobe Flash za osnovni format koriste PNG format,gde je
transparentnost sasvim podrana.
Pogledajmo sada kako e stranica naeg dizajna izgledati na razliitim
ureajima,to omoguuje Funkcija multiscrean
66
66
Ovde vidimo prikaze strana Phone(320*3oopx)
Tablet(768*300)
Desktop(1126*276)
Ako pritisnemo dugme Viewport Size i za phone
da je prikaz za telefon bolji jer se vide oba ljenjira.
promenimo irinu na 400 px videemo
67
67
Veliinu prikaza koji odgovara nekom ureaju moemo podesiti i preko Edit<Preferences
Alo u prozoru preferances oznaimo Windows size i na njemu pritisnemo dugme + i
dodamo phone Sony PSP 400*270px
68
68
Po pritiskanju OK pojavie se prikaz na Sony ureaju.
69
69
/ IZRADA WEB STRANE
11.RAD SA TABELAMA
Raspored u dokumentu moe da se radi sa tabelama, ali danas primat preuzima
CSS.Tabela se ubacuje sa
Insert>Table.Kada se podese svi parametri stisnuti OK
70
70
U tablicu se podaci unose direktno.Kod ubacivanja tablice postoje dva moda
1.STANDARD MODE
2.EXPANDIDMODE
Red se selektuje kao u Excelu klikom na red sa leve strane,kolona se selektuje klikom na kolonu
sa gornje strane.Nova kolona se ubacuje tako to se obelei kolona ispred koje e doi nova
kolona ,klikne se desnimklikom i pritisne Insert <Column
Vidimo da se kolona ubacuje levo od selektovane kolone.Tabela se brie tako to se prvo oznai I
pridisne DELETE..Da se povrati Edit>Undo resizeTakoe tabela se moe formatirati I preko
Prosperiti Inspektora i to:poravnjanje,broj kolona i redova,poravnjanjeteksta,border kao i
irina u px.Takoe elije se mogu I spajati
71
71
(merge).komandom Modify<Table<Mergecells(predhodnose elije selektuju(control dugme
I klik na svaku,takoe i odrediti boju pozadine.Ovo je ujedno tabela koju emo koristiti na
stranici Admission prices.
12.SLOJEVI I CSS LAYOUT
Slojevi(Layers)su strukturni elementi Web stranice.Oni slue kao konejneri za razne
elemente..U kodu se obeleavaju sa <div>,a mogu da sadre tekst,slike,filmove i sl.Zovu se i
Layout objekti jer se mogu postaviti bilo gde na stranici,jedan pored drugih ili jedni u
drugima,to omoguava da se izrauju dobri dinamiki sajtovi,kao to je objanjano detaljno u
tekstu koji sledi:
Smjetaj layer-a i clipping layer-a najvie se koristi u DHTML aplikacijama. DHTML je
kombinacija HTML, CSS i javascript-a i mnogo se koristi za dinamine web stranice. Takoe
moe se iskoristiti i za dodavanje bloka texta. Layer-i nije nita drugo nego block odreene
irine i visine. koji pomou CSS a moe biti postavljen na odreenom mestu.Pogledajte
naredni primer. Svaki style element biti e objanjen.Sa crvenimje deo koda iz CSS koji je
pridodat HTML-u-
.Primer 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; width:500px; height:200px; background:#0000ff;
color:#ffffff }
</style>
</head>
<body>
<div id="mainblock">
Ovo je mainblock
</div>
72
72
</html>
U prethodnomprimeru kreiran je layer (block) od 500 pixela irine i 200 pixela visine. To je
uraeno sa width: i height: style elementima. Pozicionirali smo layer relativno
(position:relative) to znai da e biti pozicioniran prema normalnim postavkama stranice.
Ako stavimo position:absolute onda e layer biti pozicioniran prema prozoru browsera ili
ruba layera unutar kog je smeten. Dakle ako promenimo "relative" u "absolute"u naem
primeru layer e biti smjeten u gornji lijevi ugao browsera. Isprobajte i vide ete o emu se
radi.
Primer 2.
Naredni primer pokazuje kako smestiti layer na x-osi (horizontalno) i y-os (vertikalno).
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
</style>
73
73
</head>
<body>
<div id="mainblock">
Ovo je mainblock.
</div>
</html>
Daje:
Ovo je mainblock.
Layer se moe smestiti gde god hoete ako upotrebite left: i top: style elemente.
left: definie horizontalan razmetaj, top: vertikalni. Layer je smeten 100 px od levo i
30 pixela od vrha.
.Primer3.
Takoe moe staviti layer na layer...
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
74
74
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px;
background:#ffff00; color:#000000 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px;
background:#00c000; color:#000000 }
</style>
</head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellowblock.
<div id="greenblock">
Ovo je green block.
</div>
</div>
</div>
</html>
Rezultat je:
e
75
75
Yellow block je smeten na 30 pixels od leva, 50 pixela od vrha donjeg layera (parent layer).
Green block smeten je 30 pixela od leva 30 pixela od vrha yellow blocka.
NAPOMENA:
.Primer 4.
Negativne vrednosti za left: i top: style elemente mogu se takoer koristiti. U tom sluaju
layeri e biti smeteni "izvan" ekrana pa e deo ili celi block biti nevidljiv. Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:-110px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
</style>
</head>
<body>
<div id="mainblock">
Ovo je the mainblock.
</div>
</html>
Dobijamo:
76
76
This is the mainblock.
Primer 5.
Clipping layers
Clipping layeri ne znai nita drugo nego odsecanje dela layera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock1 { position:relative; left:0; top:0; width:300px; height:200px;
background:#000000; color:#ffffff }
#mainblock2 { position:relative; left:0; top:10px; width:300px; height:200px;
background:#000000; color:#ffffff }
#yellowblock1 { position:absolute; left:30px; top:50px; width:250px; height:100px;
background:#ffff00; color:#000000 }
#yellowblock2 { position:absolute; left:30px; top:50px; width:250px; height:100px;
clip:rect(0,100px,45px,0); background:#00c000; color:#000000 }
</style>
</head>
<body>
<div id="mainblock1">
Ovo je mainblock1.
<div id="yellowblock1">
Ovaj layer nije odrezan
</div>
</div>
<div id="mainblock2">
Ovo je mainblock2.
<div id="yellowblock2">
Ovaj layer jeste odrezan
</div>
</div>
</html>
77
77
Ovo je mainblock1. Ovaj
layer nije odrezan Ovo je
mainblock2.
Ovaj layer jeste odrezan
U mainblock1 uti layer nije odrezan. Ali u mainblock2 uti layer je smanjen na 100 pixela
irine i 45 pixela visine. Ako elimo skresati layere upotrebiticlip:rect(top value, right value,
bottom value, left value). Za na prethodni primer: clip:rect(0,100,45,0) e znaiti: skrati
desnu ivicu utog layera za 150 pixela ,a donju za 55 pixela.
Primer 6.
z-index
Ovaj style element defini[e poloaj iznad ispod (z-os). Drugim reima, definie koji
e layer biti gornji ,a koji donji. Pretpostavimo da imamo layere koji se preklapaju:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
78
78
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px;
background:#ffff00; color:#000000 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px;
background:#00c000; color:#000000 }
</style>
</head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellowblock.
</div>
<div id="greenblock">
Ovo je green block.
</div>
</div>
</html>
79
79
Kao to vidite, green layer (zeleni) je iznad yellow(utog).
Primer 7.
Ako elimo da uti bude iznad zelenog upotriebiti z-index: style element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
#yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px;
background:#ffff00; color:#000000; z-index:2 }
#greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px;
background:#00c000; color:#000000; z-index:1 }
</style>
</head>
<body>
<div id="mainblock">
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellowblock.
</div>
<div id="greenblock">
Ovo je green block.
</div>
</div>
</html>
80
80
:
13. KONCEPT SLOJEVA U DREAMWEAVERU,
U DW postoje dva tipa slojeva koje moete nacrtati i ubaciti u dokument:regularni
<div> i AP Div koji se kontrolie preko AP elements Panela.Oba sloja se ubacuju sa
Insert>Layout Object, a zatim odabiromDiv tag ili AP tag.
81
81
Kada kliknete na Div tag otvorie se Insert Div tag dijalog box(slika ispod).U njemu postoje
razna mesta umetanja:
1.Before end of a tag
2.At insertion point
3After start of tag
4.Before and of tag.
1.Ako odaberte ovo polje bira se posle kog zavrnogtaga elementa ubacujete sloj.Recimo ako je
u pitanju
Body Tag program e uneti ovaj kod:
<body>
<p>neki sadraj</p>
<div>Sadraj za novi div ide ovde</div>
</body>
2.Odabirom ove opcije sloj se ubacuje na mestu kursora u dokumentu.
3.Odabirom ove opcije birate posle kog poetnog Taga elementa ete ubaciti sloj.Na
primer ako izaberete Body Tag DW e uneti sledei kod:
<body>
<div>Sadraj za novi Div ide ovde</div>
<p>neki sadraj</p>
</body>
82
82
83
83
Ako ve postoji neki sadraj na stranici na kojoj elite da postavite sloj,selektujte taj sadraj I
automatski se otvara nova opcija u Insert Div Tag dijalog boxu:Wrap around selection(ova
opcija postavlja div oko sadraja)
Selekciji Hello World.Predhodno treba odrediti klasu class i atribut ID,
Class-Ova opcija dodeljuje ve postojeu klasu div elementu
ID-Ova opcija dodeljuje ID atribut div elementu
New CSS rules klikom na ovo dugme moete da napravite novu klasu u vaem CSS fajlu i
dodelite ga div elementu ,dok ga unosite u dokumenat.
Kada ubacujete AP Div ,DW automatski unosi unutranji CSS u Head sekciju dokumenta,sa
veliinom i pozicijom elementa.U kodu elementa se unosi div Tag sa atributom ID<div
id=APdiv1></div>,a takoe se postavlja i marker u AP Elements panelu.Svaki sledei AP
elemenat dobija ID automatski sa vrednou AP Div2,i td.
Ovaj div moemo namestiti gde elimo,zaokrenuti ga za 90 stepeni ili bilo koji ugao,upisati
tekst,uneti sliku i slino.Pogodan je za sajtove koji imaju informacije koje trebaju da se
istaknu.
14.CSS STILOVI U HTML-u
CSS je jezik sadri sve one podatke (sintakse), koji imaju zadatak da odrede dizajn
elementa jedne web strane.
84
84
Stilovi definiu izgled html elemenata
Stilovi su dodati u HTMLv 4.0
Razni nivoi definicije stilova:
Stil na nivou elementa (najnii nivo)
Stil na nivou html strane
Spoljanji stil (eksterni file)
Podrazmevani prikaz u browser-u (najvii nivo)
Razliiti nivoi definicije stilova za jedan isti html elemenat, na web strani e imati
razliite prioritete u zavisnosti od nivoa najnii nivo ; najvii prioritet
Problematika html-a
Html tag-ovi su prvobitno zamiljeni da definiu sadraj web strane
Prikaz dokumenta je trebalo da bude zadatak browser-a
Dva sukobljene firme su dodavala nove html tag-ove i atribute originalnoj
specifikaciji html-a, to je bitno oteavalo striktno razdvajanje sadraja i nain
prikazivanja na pr. <font> tag i color atribut .
Kao odgovor na takvo stanje, W3C neprofitna organizacija za standardizaciju web-a je
kreirala stilove styles u html-u V 4.0!
PRIKAZ PREKO CSS-A
CSS odreuju nain prikaza html elemenata!
Stilovi su najee smeteni u posebnimfile - ovima sa ekstenzijomcss, mada mogu
biti i na web strani
CSS u posebnimfile-ovima omoguavaju da se veoma lako( centralizovano) moe i po
potrebi menjati nain prikaza html elemenata na itavom web site-u, koji moe imati
veliki broj strana.
85
85
CSS omoguavaju da se jednom definisani izgled web strane koristi na velikom broju
drugih web strana to doprinosi ujednaenom vizuelnom izgledu i prikazu web strana
na site-u
CSS syntacs sintaksa
Osnovna sintaksa definicije stila se sastoji od tri osnovna elementa:
SELECTOR PROPRETY VALUE.
Selector je html element / tag za koji se definie stil
Property je svojstvo / atribut kojim se stilom podeava
Value je vrednost atributa
Primeri stilova:
body {color: black} (<body>)

p {font-family: "sans serif"} (<p> navodnici ako se vrednost atributa sastoji iz vie
odvojenih rei)

p {text-align:center; color:red} (podeavanje vie svojstava jednog elementa)

Da bi se olakalo kodiranje i optimatizacija stilova koji su primenjeni na HTML tagove, a koji


ine strukturu svakog sajta osmiljen je CSS(kaskadni stil) .U sledeem kodu vidi se gde treba
da se nalaze tagovi koji ine strukturu sajta(div,a,span,p):,crvenim su oznaeni komentari!
86
86
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naslov ove stranice</title>
<link href="global.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- glavni kontejner sa ID-jem "wrapper" -->
<div id="wrapper">
<!-- kontejner sadraja sa vrha sajta sa ID-jem "header", unutar koga e se nai
LOGO i navigacija -->
<div id="header">
<!-- IMG - image tag koji e prikazati Logo -->
<img src="url(slika.jpg)" alt="Naziv sajta" />
<!-- kontejner za "meni" - navigaciju sajta sa ID-jem "nav" (skraeno od
navigation) -->
<ul id="nav">
<li>
<a href="nav2.html">nav 2</a>
</li>
<li>
<a href="nav3.html">nav 3</a>
</li>
</ul>
</div>
<!-- kontejner sredinjeg dela sajta sa ID-jem "body" -->
<div id="body">
Slike i tekst
</div>
<!-- kontejner sadraja sa dna sajta sa ID-jem "footer" -->
<div id="footer">
npr. ponovljena navigacija, copyright, godina itd ...
87
87
</div>
</div>
</body>
</html>
Tagovi koje smo koristili tiu se formatiranja i razdvajanja delova HTML-a.Problemje samo u
tome to kada razdvojimo HTML na neki od naina ,mi unapred te delove stilski
formatiramo.Ali ako elimo da naznaimo da neka logika podela postoji,ali da pri tom ne
elimo da je stilski identifikujemo,ovi tagovi nam nisu korisni.Umestotoga koriste se tagovi div
i span
Span tag je najprostiji vid logikog razdvajanja sadraja,i prilikom korienja nema
uticaja na sadraj ,sve dok to ne naglasimo eksplicitno stilovima-
88
88
Pogledajmo primer:1.
Vidimo da se SPAN uopte ne primeuje na strani sve dok se ne pogleda izvorni kod
HTML-a.Ipak ako u taj span unesemo Like most Mbuna, <span style="border: 1px solid
#000000; padding:3px; background-color:#FF0000; color: #FFFFFF;">demasoni are
vegetarians</span>and should be fed foods high in spirulina and other vegetable
content.
Rezultat bi bio:
Jasno je da smo span tag iskoristili da izolujemo celinu na koju elimo da primenimo
odreene korekcije
Primer2. Ako bi u sadraj umesto span taga koji nema uticaj na sadraj ubacili div tag on
vri odreena formatiranja u odnosu na span tag:
Like most Mbuna, <div>demasoni are vegetarians</div> and should be fed foods high in
spirulina and other vegetable content.
:
Ova matrijalna osobina div taga vana je za njegovu upotrebu kod izrade dinamikih
sajtovaKao to smo rekli postoje dva atributa koje poseduju HTML dokumenti .Prvi atribut
je:ID (ovaj atribut je ono ime emo nalaziti elemente kada im budemo pristupali u toku
izvravanja strane )
Drugi atribut je CLASS-( on omoguava dodeljivanje CSS klase sadraju elementa)
5.1 Umetanje Cascading Style Sheet-a u HTML
Cascading Style Sheet moe se umetnuti u HTML na 3 naina. Prvo, style
89
89
elementi mogu se dodati direktno u HTML tag, to se zove "inline" style sheet.
Drugo, style sheet moe biti deo HTML dokumenta ("internal" style sheet), a to
podrazumeva direktno upisivanje u HTML dokument u <head> podruje. Na
kraju, moe biti odvojeni "external" style sheet koji e se pozivati pomou web
adrese (URL-a) svaki put kad se HTML dokument bude uitavao. Link za odvojeni
external style sheet takoe e se smestiti izmeu <head> tagova.
1.Inline Style Sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
</head>
<body>
<p style="style elements go here">
</p>
</body>
</html>
2.Internal Style Sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
<style type="text/css">
style elements go here
</style>
</head>
<body>
Content's goes here
</body>
</html>
90
90
Deo napisan u boldu je CSS:
<style type="text/css">
style elements
</style>
3.External Style Sheet
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Document's title</title>
<LINK href="filename.css" rel="stylesheet" type="text/css">
</head>
<body>
Content's goes here
</body>
</html>
Spoljni (external) file povezan je s naim HTML dokumentompomou:
<LINK href="filename.css" rel="stylesheet" type="text/css">
Svi style elementi biti e smeteni u poseban, odvojeni CSS dokument te mu se
dodaje .css extenzija!
UOITE :
Ako external style sheet nije u istom direktoriju gdje je HTML dokument onda to
morate odrediti bilo apsolutnim, bilo relativnimputem do fajla: LINK
href="http://myaddress.com/filename.css" rel="stylesheet"
type="text/css" .
5.2 Background& Color
90
90
Background color:
Predefinisana boja pozadine kod veine browsera je bela. No vrlo lako je
moemo promeniti.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#00ff00; color:#ffffff }
</style>
</head>
<body>
Sadraj ide ovde ...
</body>
</html>
body { background:#00ff00} pozadina e pozeleniti.
Takoe moe i: body { background:green} . Oznake pojedinih boja.
#33ffff #33ccff #3399ff #3366ff #3333ff #3300ff
#00ffff #00ccff #0099ff #0066ff #0033ff #0000ff
#ffff66 #ffcc66 #ff9966 #ff6666 #ff3366 #ff0066
#ccff66 #cccc66 #cc9966 #cc6666 #cc3366 #cc0066
91
91
Background-image:
Takoe moe se upotrebiti slika za pozadinu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif") }
</style>
</head>
<body>
Sadraj ...
</body>
</html>
body { background-image: url("image.gif") } e koristiti "image.gif" za pozadinu.
Naravno to moe biti i neki drugi fajl s nekom drugom extenzijomnpr. "image.jpg". Pri
upotrebi slika za pozadinu moete iskoristiti dosta trikova u
CSS-u. Pogledajte sledei style element.
UOITE :
Ukoliko slika nije na istom serveru gde je i HTML dokument morate upotrebiti
apsolutni put do fajla npr.: body { background-image:
url("http://somewhere.com/image.gif") } .
Primer 6.
92
92
</style>
</head>
<body>
Sadraj ...
</body>
</html>
U jedan style element moe se staviti vie atributa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); background-repeat: repeat-y;
background-attachment: fixed }
</style>
</head>
<body>
Sadraj ...
</body>
</html>
Takoe doputeno je koristiti i sledee oblike. Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif");
background-repeat: repeat-y;
background-attachment: fixed }
93
93
</style>
</head>
<body>
Sadraj ...
</body>
</html>
Ili skraeni oblik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background-image: url("image.gif"); repeat-y fixed }
</style>
</head>
<body>
Sadraj ...
</body>
</html>
Color
Takoe i boja texta se moe promeniti.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
94
94
body { background:#000000; color:#ffff00 } oznaava crnu pozadinu i uti text. Boju
moete promeniti sa color:#ffff00 atributom. Dozvoljeno je i
upotrebiti background:black; color:yellow .
VEOMA VANO :
U svakom style elementu koji definie boju pozadine definiite obavezno i boju texta.
To vredi i obratno. Pa npr. background: i color: bi trebali uvek ii zajedno. To je
ujedno i preporuka W3C standarda.
Color vrednosti odreene u body style elementu uticae na ceo dokument, tj. celi
text u HTML dokumentu koristiti e tu boju. Takoe moemo upotrebiti razliite boje
u textu. Pretpostavimo npr. da elimo da na header bude crven, a italic text plav. To
e izgledati ovako:
Primer 7.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
h1 { background:#000000; color:red }
em { background:#000000; color:blue }
</style>
</head>
<body>
<h1>A red header</h1>
This is yellow text but <em>italic text is blue</em>
</body>
</html>
Ovo izgleda ovako:
95
95
Crveni header
Normalan text je ut italic text je plav
Primer 8.:
GROUPISANJE style elementa takoe je mogue. Pretpostavimo da elite sve
header-e i italic text u istoj boji.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
h1, h2, h3, h4, h5, h6, em { background:#000000; color:red }
</style>
</head>
<body>
<h1>Header</h1>
<h2>Header</h2>
<h3>Header</h3>
<h4>Header</h4>
<h5>Header</h5>
<h6>Header</h6>
<em>italic text</em>
</body>
</html>
Ovo izgleda ovako:
Header
96
96
Header
5.3 Selectori
Class selector:
Class selector se dosta primenjuje u CSS-u. Pretpostavite da koristite nekoliko
<h1> tagova u naem HTML dokumentu, ali im elimo pridruiti razliite boje.
Ako upotrebimo vaj oblik:
h1 { color:yellow; background:#000000} svi <h1> tagovi e biti uti. No ta ako
elimo imati i utu, plavu i crvenu? Upotrebi emo "class". Pogledajte naredni
primer:
Primer 9.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
.yellow { color:yellow; background:#000000}
.blue { color:blue; background:#000000}
.red { color:red; background:#000000}
</style>
</head>
<body>
97
97
<h1 class="yellow">Header</h1>
<h1 class="blue">Header</h1>
<h1 class="red">Header</h1>
</body>
</html>
Rezultat je:
Header
Header
Header
NAPOMENA 1:
Kad se definie class ispred MORA biti taka (.). Naziv class-a moe biti bilo
kakav. Taj naziv e se kasnije upotrebiti u HTML tagu i MORA biti isti kao u Style
Sheet-u! Dakle, ako defininiite class:
.yellow { text-color:yellow; background:#000000
} onda MORATE upotrebiti: <h1 class="yellow">
NAPOMENA 2:
Jednom kada definiite class moete ga upotrebiti u razliitimtagovima!.
Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
98
98
.yellow { color:yellow; background:#000000}
</style>
</head>
<body>
<h1 class="yellow">Header</h1>
<em class="yellow">neki text</em>
<p class="yellow">pisanje na zidu...</p>
</body>
</html>
Rezultat je:
Header
neki text
pisanje na zidu...
Primer 9
.
Class se moe primeniti i samo na jedan class element . Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h1.yellow{ color:yellow; background:#000000}
</style>
</head>
<body>
<h1>Ovaj header nije ut</h1>
99
99
<h1 class= "yellow">Ovaj header jeste ut</h1>
</body>
</html>
:
Ovaj header nije ut
Ovaj header jeste ut
ID selector:
Vrlo je slian class selectoru. Jedina razlika je da ID mora ispred imati # u style sheet-
u dok HTML tag mora sadravati "ID".
Primer 10-
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#yellow { color:yellow; background:#000000}
#blue { color:blue; background:#000000}
#red { color:red; background:#000000}
</style>
</head>
<body>
<h1 id="yellow">Header</h1>
<h1 id="blue">Header</h1>
<h1 id="red">Header</h1>
100
100
100
</body>
</html>
Rezultat je:
Header
Header
Header
Kad definiite ID ispred MORA biti znak # . Naziv moe biti bilo kakav. Naziv koji
upotrebite za ID i koji dodate u HTML tag MORA biti isti kao u Style Sheet-u! Primer:
#yellow { text-color:yellow; background:#000000} pa MORATE napisati <h1
ID="yellow">.
Pseudo Class selector A:link A:visited A:hover A:active
Ove pseudo class-e koriste se za linkove (HTML tag:<a> ). One odreuju kako e
linkovi u dokumentu izgledati.
Primer 11.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
101
101
101
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 } A:link
{ color: red; background:#000000} A:visited {
color: blue; background:#000000}
A:hover { color: green; background:#000000}
A:active { color: lime; background:#000000}
</style>
</head>
<body>
Posetite nas <a href= "http://myaddress.com">click</a>
</body>
</html>
Posetite nas click
A:link { color: red; background:#000000} link e biti crven.
A:visited { color: blue; background:#000000} poseeni link e biti plav.
A:hover { color: green; background:#000000} link e postati crven kad stavimo mi na
njega.
A:active { color: lime; background:#000000} link postaje lime boje kad
kliknemo na njega.
NAPOMENA 1:
MORATE upotrebiti pseudo class-e po takvomredu!
NAPOMENA 2:
Takoe moe se upotrebiti i ovakav oblik:
A:link { color: red; background:#000000} = :link { color: red;
background:#000000}
102
102
102
A:visited { color: blue; background:#000000} = :visited { color: blue;
background:#000000}
A:hover { color: green; background:#000000} = :hover { color: green;
background:#000000}
A:active { color: lime; background:#000000} = :active { color: lime;
background:#000000}
5.4 Margine, padding i border
'Margin-top', 'margin-right', 'margin-bottom', 'margin-left' i 'margin'
Margine odreuju veliinu margin okvira. Pogledajte margin okvir (slika uzeta iz
W3C CSS2 Specification):
LM = levamargina, LB = levi border, LP = levi padding itd.
Dimenzije svih margina mogu biti izraene u jedinicama ili procentima.
Apsolutne vrednosti mogu biti:
em (font veliina odgovarajueg fonta)
ex (visina od slova x odgovarajueg fonta)
px (pixel)
in (inche)
cm (centimeter)
mm (millimeter)
pt (point)
pc (picas = 12 points)
Nemojte da vas ovo sve uplai. Slobodno isprobajte sve veliine i koristite onu za
koju smatrate da je najpogodnija.
Procenti se izraavaju pomou % znaka.
Objasnimo sada pojam margine.
103
103
103
Primer 12.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h1 { margin-left: 10px; margin-top:20px }
</style>
</head>
<body>
<h1>Header 1</h1>
</body>
</html>
Izgleda ovako:
Header 1
Margina je udaljenost merena od crnog ruba .
Primer 13.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { margin-top:25pt; margin-right:25pt; margin-bottom:25pt; margin-
left:25pt }
</style>
</head>
<body>
<p>neki text</p>
104
104
104
</body>
</html>
izgleda ovako:
neki text
NAPOMENA:
Postoji i skraeni oblik p { margin-top:25pt; margin-right:25pt; margin-
bottom:25pt; margin-left:25pt }.
Na ovaj nain: p { margin:25pt } . U ovom sluaju sve margine e biti 25pt.
Ostale mogunosti su:
p { margin:25pt 30pt } oznaava top & bottom25pt - right & left 30pt
p { margin:25pt 30pt 35pt } oznaava top 25pt - right 30pt - bottom 35pt -left
30pt
'padding-top', 'padding-right', 'padding-bottom', 'padding-left' i
'padding'
Padding odreuju dimenzije padding podruja .
Primer 14.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
105
105
105
h1.padding { background:#c00000; padding-top:20px; padding-right:20px;
padding-bottom:20px; padding-left:20px }
</style>
</head>
<body>
<h1>Header 1</h1>
</body>
</html>
Izgleda ovako:
Header 1
Padding podruje je udaljenost izmeu ruba crvenog pravougaonika i
pravougaonika unutar kog je sadraj.
NAPOMENA:
Skraeni oblik je slian kao za marginu
h1 { padding-top:20px; padding-right:20px; padding-bottom:20px; padding-
left:20px } je isto kao h1 { padding:20px } . Sav padding je 20px.
Border
Border width: 'border-top-width', 'border-right-width', 'border-bottom-width',
'border-left-width' i 'border-width'
Border-width odreuje debljinu okvira. Vrednosti mogu biti: thin, medium, thick
ili fixed.
Border style: 'border-top-style', 'border-right-style', 'border-bottom-style',
'border-left-style' i 'border-style'
Border-style odreuje izgled okvira. Vrijednosti su: none, hidden, dotted,
dashed, solid, double, groove, ridge, inset, outset.
106
106
106
</style>
Border color: 'border-top-color', 'border-right-color', 'border-bottom-color',
'border-left-color' i 'border-color'
Border-color odreuje boju.
Isprobajmo sada sve border style elemente:
Primer 15.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h1 { border-width: thick; border-color:#00ff00; border-style:double}
</style>
</head>
<body>
<h1>Header</h1>
</body>
</html>
Prikazat e:
Header
Primer 16.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h1 { border-width: 20px; border-color:#0000ff; border-style:outset }
107
107
107
</style>
</head>
<body>
<h1>Header</h1>
</body>
</html>
Dobiemo:
Header
5.5 Font
font-familija
Font-family style element omoguava izmenu fonta na web stranici.
Primer 17.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-family: Verdana, Arial, 'Times New Roman', serif }
108
108
108
</head>
<body>
<p>Ovo je verdana text</p>
</body>
</html>
A izgleda ovako:
Ovo je verdana text
NAPOMENA 1:
U gornjem primeru upotrebljeni su razliiti fontovi: Verdana, Arial, Times New
Roman, Serif. Nije potrebno koristiti vie od jednog fonta no dobro je font- family
attribut zavriti sa "generic" family.
"generic" family moe biti: serif, sans-serif, cursive, fantasy ili monospace. Ako
browser proita ovaj style sheet: p { font-family: Verdana, Arial, 'Times
New Roman', serif } uzima prvi font u nizu, tj. font Verdana. Ako takav font ne
postoji na korisnikovu raunaru, browser uzima naredni, Arial itd. Ako ne nae niti
jedan, upotrebiti e "generic" font koji je u normalnimokolnostima uviek
prisutan na raunaru. Zato je preporuka uvek zavriti sa "generic" fontom.
NAPOMENA 2:
Fontovi u ijem nazivu postoje razmaci (vie od jedne rei) moraju se staviti u
navodnike: npr. 'Times New Roman', 'Book Antiqua'.
font-style
Ovaj style element ima 3 mogue vrednosti: normal, italic ili oblique (normal ili italic
se najee koriste).
Primer 18.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
109
109
109
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-size:italic }
h1 { font-size:normal }
h2 { font-size:italic }
</style>
</head>
<body>
<h1>Header 1</h1>
<p>Ovo je neki text</p>
<h2>Header 2</h2>
</body>
</html>
Dobiemo:
Header 1
Ovo je neki text
Header 2
font-variant
Ovaj style element ima 2 mogue vrednosti: normal ili small-caps.
Primer 19.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-variant:small-caps }
h1 { font-variant:normal }
</style>
110
110
110
</head>
<body>
<h1>Header 1</h1>
<p>Neki text</p>
</body>
</html>
Da e:
Header 1
NEKI TEXT
font-weight
Mogue vrednosti: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 |
Primer 20.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-weight:bold}
em { font-weight:200 }
</style>
</head>
<body>
<p>neki bold text</p>
<em>ovo je light text</em>
</body>
</html>
U vaem browseru e izgledati ovako:
111
111
111
neki bold text
ovo je light text
font-stretch
Mogue vrednosti: normal | wider | narrower | ultra-condensed| extra-
condensed | condensed | semi-condensed| semi-expanded| expanded | extra-
expanded | ultra-expanded |
NAPOMENA :
Ovaj style element radi samo ukoliko odreeni font-family podrava ove
vrednosti.
font-size
Omoguava promenu veliine fonta. Mogue vrednosti:
apsolutne: [ xx-small | x-small | small | medium| large | x-large | xx-large ]
relativne: [ larger | smaller ]
daljina
procenat
Primer 21.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-size:xx-large}
em { font-size:10px }
</style>
112
112
112
</head>
<body>
<p>malo extra extra veliki text</p>
<em>ovo je 10px text</em>
</body>
</html>
Izgleda ovako:
malo extra extra veliki text
ovo je 10px text
5.6 Text
text-indent
Ovaj style element odreuje uvlaenje prve linije texta u bloku. Vrednosti su:
daljina ili procenti.
Primer 21.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { text-indent:30pt }
</style>
</head>
<body>
<p>ovaj text je uvuen za 30 pt-a</p>
113
113
113
</body>
</html>
Izgleda ovako:
ovaj text je uvuen za 30 pt-a
text-align
Ovaj style element koristi se za poravnanje texta. Mogue vrednosti: left | right
| center | justify
Primer 22.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { text-align:center }
div { text-align:right }
</style>
</head>
<body>
<p>centrirani text</p>
<div>ovaj text je poravnat udesno</div>
</body>
</html>
Daje:
centrirani text
ovaj text je poravnat udesno
114
114
114
text-decoration
Odreuje dekoraciju texta.
Vrednosti none | underline | overline | line-through | blink
Primer 23.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { text-decoration:underline }
div { text-decoration:line-through }
h5 { text-decoration:overline }
</style>
</head>
<body>
<p>podcrtani text</p>
<div>precrtani text</div>
<h5>nadcrtani text</h5>
</body>
</html>
Rezultat je:
podcrtani text
precrtani text
nadcrtani text
letter-spacing and word-spacing
115
115
115
Vrednosti: normal | daljina
Primer24.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { letter-spacing:5pt }
em { word-spacing:10px}
</style>
</head>
<body>
<p>sva slova imaju razmak 5 point-a</p>
<div>sve rei imaju razmak od 20 pixel-a</div>
</body>
</html>
Dae:
s v a s l o v a i m a j u r a z m a k 5 p o i n t - a
sve rei imaju razmak od 20 pixel-a
text-transform
Ovaj atribut kontrolie velika i mala slova.
Vrednosti: capitalize | uppercase | lowercase | none
Primer25.
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
116
116
116
<html>
<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h1 { text-transform: uppercase }
p { text-transform:capitalize }
div { text-transform:lowercase}
</style>
</head>
<body>
<h1>header velikim slovima</h1>
<p>prvo slovo svake rei veliko</p>
<div>SVA SLOVA MALA<div>
</body>
</html>
Vide ete:
HEADER VELIKIM SLOVIMA
Prvo Slovo Svake Rei Veliko
sva slova mala
15.KASKADNI STILOVI U DREAMWEAVER-u
Ve smo videli da Cascading style sheets (CSS) nudi mnogo vie kontrole na
izgledom i pojavljivanjem elementa na Web stranicama, tako to implementira niz
pravila koji opisuju ove elemente. Korienjem stilova , preventivno spreavamo da
se pojavljivanje teksta na stranici odreuje politikom
117
117
117
preglednika (browser-a) koji prikazuje stranicu. Videli smo da moeme da koristime
stilove za izgled teksta (boja, veliina i stil) za razliite naslove, podnaslove,
napomene,tablice itd. ak i da browser prikae tekst u drugom fontu, ostala podeavanja
e ostati nepromenjena, odnosno onakva kako ste ih vi definisali.
Konano uz stilove moemo da kreiramo i svoje klase , koje nam praktino
omoguavaju da stvaramo sopstvene tagove.Poiemo od praznog dokumenta,iji kod je
prikazan na slici.Kreiraemo div1 I div2 da vebamo HTML kod.
atributom class i imenom main_paragraf ,i jo jedan div sa atributomID koji definie ovaj
paragraf..IDparagramje prvi fudamentalni koncept CSS-a.Drugi isto vaan koncept je unutar
body sekcije.Zatimsmo ubacili DIV to u prevodu znai kontejner<div> i na kraju
</div>.Vidimo da svaki div ima svoju indentifikaciju.Akopreemo u design
Pogled(slika ispod)vidimo dva diva:
118
118
118
prvom pie Hallo World i u
statusnoj liniji liniji<div#part_1>.Ako kliknemo na prostor drugog diva<div#part_2>oznaiemo
drugi div.
Sada emo se pozabavi hederom ,prvo smo stavili naslov CSS title i dodali stil.Zatimsmo sa
.body{backgraund-color:#3CF;} promenili pozadinu u svetlo plavu,kao na slici ispod..
CSS stile ine kao to smo ve objasnili dva glavna dela 1. SELECTOR u naem sluaju body i
2. DEKLARACIJA koju ubino dele na dva dela:SVOJSTVO(backgraund- color) i SAMU
VREDNOST (value 3CF)
Body {backgraund-color:#3CF;}
Definisaemo css stilove zadivove part _1 i part _2.,to se vidi u 8 i 9-omredu CODE prikaza.
119
119
119
Promenili smo boju diva 2 u crvenu #F33i .Ako za svaki div dodamo po dva paragrafa i u prvom
divu postavimo centralno poravnjanje, a iza paragrafa stavimo zarez( p,) svi e se poravnati.
To se moe videti na slici ispod:
120
120
120
IZRADA WEB STRANE
Vratiemo se na na sajt.Predhodno smo uveli nove stilove u dokument i pokazali kako
se menja pozadina,poravnjanjei slino.Ako se vratimo na matinu stranu naeg sajta i uemo
u Code pogled vidimo da je program ubacio na stil. text/css(slika iznad esti
red).Da bi promenili boju pozadine stranice idemo u Code pogled naemo .conteiner
Po unoenju promena za irinu 800px promenomboja iz paleta boja koji sam otvara
program, uzeli smo boju #6F6,stranica menja svoju pozadinu.
121
121
121
To meutimne znai da e sve stranice promeniti boju.Da bi to uradili moramo da napravimo
Svoj Css stil i da ga zatim primenimo na ostale stranice.Za sada emo ponovo podesiti irinu
kontejnera na 960 px.Otvoriemo CSS panel i na kartici All selektovati sva pravila koja smo
koristili.Desni klik na njih pa kliknemo Move to folder i izaberemo A
New sheet style i pritisnemo OK-
122
122
122
i pritisnemo Save.Ako sada u CSS panelu kliknemo na svoj CSS koji smo napravili,vidimo da se
pojaviou naslovnoj liniji dokumenta.
.
Vratiemo se na home page stranicu.Ako uemo u Code pogled, vidimo celu sekciju za
STILOVE!Poto nam vie nee trebati obrisaemo je.
123
123
123
Preimo sada na drugu stranicu New Arrivals.Ako selektujemo u kodusve od style title do
kraja zavrno sa >/head> i obriemo, pa uemo na MODIFY>CSS otvorie se panel u kome
pritisnemo ikonicu Attach External Style Sheet.Pronaemosvoj stil sa browse u
prozoru i pritisnemo OK.U CODE pogledu vidimo da se pojavio link koji je naa veza sa
naim springpark01.css.,slika iznad,selektujemoliniju sedam .Ako se vratimo u Design pogled
vidimo da jer STIL delovao na stranicu sa svim naim postavkama iz CSS-a-To sada treba uraditi i
sa ostalim dvema stranicama.
Ostale dve stranice istim postupkomdobijaju svojstva naeg stila,kao i dve predhodne.
ZAKLJUAK:U ovom postupku vidimo smisao CSS kaskadnog stila.Poto smo napravili novi
eksterni CSS springpark01.css i primenili ga na HOME stranicu, morali smo postupak da
ponovimo za svaku stranicu zasebno.Ne postoji nain da se bez ubacivanja
linka koji vodi do kreiranog stila ,promeni izgled stranice ,kako mi elimo.Mora se raditi
sa svakom stranicom kao kaskadom!
124
124
124
16.IZRADANOVOG CSS PRAVILA ,
Ova pravila koja pravimo vaie za tabele,mada mogu vaiti za slike,tekst I td..Ako u CSS
panelu kliknemo na dugme New CSS Rules dobiemo prozor koji smo popunili kao na slici,zatim
kliknemo OK.
Poto smo kliknuli OK dobiemo novi prozor:
125
125
125
Tablica ispod je modifikovana, a u CSS panelu pojavilo se info_table.Klikomna ovaj stil vidi se
koje su promene uvedene.Ako elimo da napravimo klasu idemo na split pogled
,kliknemo na tabelu i obriemo sve u redu gde su osobine za Weight i Border i na tom
mestu dodamo CLASS=,pojavie se padajui meni na kome dva puta kliknemo na
info_table to se automatski unosi u kod i, na kraju Refresh.Tablica home dobija nov
izgled.Sve ovo treba da ponovimo i na stranici , gde je tablica Addmision price.
Ovo je novi izgled tablice home sa 103 strane ,a ispod novi izgled stranice Addmision
Price:
126
126
126
17.KORIENJE SPRAY MENIJA
SPRAY videt je sastavni deo ovog programa i napisan je u JAVA SCRIPTU.Pomouovog programa
napraviemo nov izgled linkova i posle toga proveriti da li oni rade.Ovo moemo raditi za svaku
stranicu zasebno,ili kada napravimo linkoveza jednu stranicu,samo treba kopirati i ubaciti Code u
Java script na pravo mesto.,ili raditi ponovo sve ru;no,kako je raeno u naem primeru.
127
127
127
Prvo u izvornomkodu obriemo deo programa od sidebar1 do kraja .,ili predhodno
selektujemo linkove a programe sam u code pogledu oznaiti deo koji se odnosi na
linkove.Zatimidemo na Insert>Spray>Spray menu bar.Prvo moramo da otvorimo novi
folder,kliknemodva puta na Spring park- glavni folder u CSS panelu, i otvorimo novi folder
Spray Assets,i sada treba sauvati ovaj folder sa:Manage Site>Edit>Advance
settings>Spray pronaemo folder u pu tanji>Save >Done
Vidimo da se Spray meni bar se pojavio u CSS panelu
Pojavio se nov meni linkova na stranici, a u Prosperiti baru i boksovi za ureenje
linkova,gde moemo dodati novi link,ili neki ibrisati sa navigacijom ,koja ide uz
njega.Linkovi koji imaju strelicu desno,pokazuje da se na njih moe dodati sub link.
128
128
128
Izgled Prosperiti bara u kome smo podesili prvi link je ovakav,item1,2,3 ,uklonimo sa
minusom-;sa plusom dodajemo nove pod linkove.
Meutimstranica New Arrivals ima pod link:Kangaroos ,pa treba samo dodati + i upisati sve ,
samo na mestu linka dodati #Kangaroo_Wikipedia.html.
Kada smo ovo uradili treba isti odraditi i za ostale dve stranice,pa e svaka stranica dobiti iste
linkove i jedan podlink Kangaroos.Sledei korak je srediti prostor oko Spray menija.,to e nam
pomoi Prosperiti inspector.!
129
129
129
Da bi uklonili oker boju okolo, koristiemo Prosperiti Inspektora sa klikom Live>Inspect i
preemo miem preko te povrine.U CSS panelu u delu Prosperities u jednom redu prikazana
je oker boja.Selektujemo taj red i dilitujemo,dobiemo novi izgled oko linkova,slika dole.
Programe automatski( jer imamo externel CSS pravila) napraviti izmene i u ostalim
stranicama.Sad nam predstoji da sredimo izgled dugmadi u Spray baru.Ponovo preemo u LIVE
ukljuimo Prosperiti Inspektora i selektujemo dugme recimo Opening time.Na Current kartici
panela u dnu se pojavljuje red sa kockicom u plavoj boji,klikenmo na nju i izaberemo tamno
zelenu #030.Ukoliko ne elimo belu pozadinu Spray menija, idemo
klik recimo na neko dugme,preemou SPLIT pogled,a na kartici CSS panela uemo u All i
ekiramo Meni Bar vertical a,zatimpromenimo boju u #096.Automatski sa Save all,uvamo
promene istog i sada na svim stranicama imamo ureen bar.
130
130
130
Sada nam predstoji da uklonimo logo jer elimo sliku preko cele duine, a to je 960
px.Logo se uklanja tako to se obelei,ue se u SPLIT pogled i dilituje taj script.
Poto je uklonjen- na isto mesto ubacujemo ve spremljenu sliku,Insert>image izaberemo
putanju i kada se slika ubacu ,sredimo je ,to smo ranije pokazali u Prosperitis oknu,tako to
prvo otkljuamo bravicu pa podesimo irinu na 960.Kada kliknemo na visinu program
automatski podeava visinu. Od oko 200px,meutimslika je razvuena I loe je revolucije.Za to
nam je potrebna slika rezolucije 3500*700px,a ako je nemamo moe se odabrati odgovarajua
baner slika recimo 960*200,to je kasnije i uraeno.Ova slika baner- ispod je privremena,jer ne
izgleda kako bi mi eleli.
131
131
131
Kod uklanjanja loga vano ga je selektovati i obavezno kliknuti na tag a u statusnoj liniji
dokumenta dole,iznad linije Prosperiti bara.Kada kliknemo na tag, a kursor se u izvornom
kodu postavi tano NA MESTO OD KOGA DILITUJEMOSCRIPT!Isto vai i za druge tagove,mada
isto to moemo raditi i runo.Uvek, ako se neto pogrei imamo EDIT>UNDO,ili korienje
HISTORY PANELA,o emu je bilo govora ranije.
18.VALIDACIJAI PROVERA LINKOVA
Da bi proverili linkove idemo na Windowss>Results>Link Checker.Pojavie se nov pano na dnu
na kome ima vie opcija.Ako kliknemo na link checker i zatim pritisnemo malu zelenu strelicu
levo u vrhu ,dobiemo koji su linkovi na kojoj strani prekinuti.
132
132
132
Vidimo da je na matinoj strani u pitanju link koji vodi do New Arrivals, a sa nje na Wikipediju,
pritiskomna link na toj strani.Kada kliknemo na broken links pojavie se fascikla u kojoj treba
da odredimo novu putanju i problemje reen.Zatimse ovo ponovi za svaku stranicu.Provera
linkova je veoma vana ,jer kada uplodujemo sajt na server
,najvei problem je da ne radi neki link!Sledei korak je validacija.Ako kliknemo na Validation
dugme I zatim na zelenu strelicu gore desno -pojavie se ta u KODU nije dobro.Greku treba
ispraviti za svaku stranicu.Unaem sluaju postoji problemu 16 redu koda.
Prijavljeno je da je potrebno da se atribut alt specificira.Uemou kod i u redu 16
ispravimo greku.Isto se treba ponoviti za svaku stranicu.Zatimje potrebno izvriti
proveru sajta sa Site>Reports
ekirali smo potrebne provere I WRC centar alje izvetaj.Vaan je na kraju i izvetaj Clean
up HTML,koji e sam izvriti potrebna ienja i potom dati izvetaj.Ovose radi komandom
Commands>Cleanup HTML
133
133
133
<form>
Pre postavljanja sajta, ako imate hosting uplaen moete testirati sajt,ali o tome e biti rei
kasnije.
/IZRADA WEB STRANICE
19.IZRADA FORMULARA .
HTML Forme
HTML forma je deo dokumenta koji u sebi moe da sadri elemente forme kao to su razna
polja za unos potataka, razne vrste dugmia za pokretanje akcije i sl.
Forma se kreira tagom <form> a pojedinani elementi forme tagovima <input>. Evo
jednog jednostavnog primera forme koja sadri dva elementa:
<form>
<input>
<input>
</form>
U pretraivau bi to izgledalo ovako:
Tag <form> i tagovi <input> mogu imati niz atributa koji ih blie definiu.
Primer:
134
134
134
<form>
Ime :
<input type="text" name="ime">
<br>
Prezime:
<input type="text" name="prezime">
</form>
U pretraivau e to izgledati ovako:
Ime :
Prezime:
Tag <input> se koristi i za definisanje dugmia (buttons) koji imaju razliite oblike i
upotrebu.
Akciono dugme
Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi,
startovanje nekog javsript programa i sl.
Akciono dugme se kreira na nain prikazan u sledeemprimeru:
<form>
<input type="button" name="dugme" value="Start" onClick="Akcija">
</form>
Ovako bi to izgledalo u pretraivau:
Radio dugme
Radio dugme se koristi kada elite da pravite izbor izmeu malog broja opcija , kao u
sledeemprimeru.
135
135
135
<input type="radio" name="pol" value="muski"> Muski
<br>
<input type="radio" name="pol" value="zenski"> Zenski
</form>
Ovako to izgleda u pretraivau::
Muski
Zenski
Uoite da samo jedna od dve opcije moe biti odabrana kada kliknete na dugme.
Checkbox dugme
Checkbox dugme se koristi kada elite da odaberete jednu ili vie opcija iz nekog manjeg skupa
kao to to pokazuje sledei primer:
<form>
ta sve imam?
Imam bicikl:
<input type="checkbox" name="vozilo" value="Bicikl">
<br>
Imam auto:
<input type="checkbox" name="vozilo" value="Auto">
<br>
Imam avion:
<input type="checkbox" name="vozilo" value="Avion">
</form>
A evo kako bi to izgledalo u pretraivau: ta
sve imam?
Imam bicikl:
Imam auto :
Imam avion:
136
136
136
Uoite da kod checkbox dumia moete da birate vie od jedne opcije (za razliku od radio
dugmia gde birate samo jednu opciju).
Slanje sadraja forme serveru
Forme se najee koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa
"submit" a u tagu <form> se dodaje atribut "action" kojim se definie koji e programna
serverskoj strani preuzeti poslate podatke. Atributom"method" definie se metod slanja
podataka koji moe biti "get" ili "post".
Evo primera:
<form name="input" action="http://osnove-programiranja.com/vezbe/login.php"
method="get">
Korisnik:
<input type="text" name="korisnik">
<input type="submit" value="Submit">
</form>
Ovako to izgleda u pretraivau:
Korisnik:
Submit
Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraiva e poslati
va podatak serveru na kojem e se aktivirati programlogin.asp koji e preuzeti poslati
podatak i sprovesti odgovarajuu akciju.
137
137
137
IZRADA WEB STRANICE
20.IZRADAFORME U DREAMWEAVERU-Ubaciemomo formu sa
imenom,telefonom,emailom,komentom i dugmetumpotvrdi(submit).Prvotreba ubaciti
Tabelu, jer pomou nje je bolji dizajn i izgled ubaene forme.Kada se ubaci tabela
kliknite na strelicu leve kolone ,pa column left i centrirajte je udesno pomou ikone align right
na Prosperiti baru.Zatimto isto uradite sa desnomkolonom ,samo nju centrirajte ulevo.Kliknite
u prvu eliju pa Insert>Form>Insert text field
Za ID upiite name,za Label Name
138
138
138
Za telefon izaberite text field za ID ipiite phone, za Label name Phone i OK.Za i meil text fild
polje,ID stavite email za Label stavite Email pa OK.Za poruke izaberite text area za ID stavite
comment ,za Label name stavite Comment.Upetoj eliji
insert>form>butons OK,pojavie se dugme submit.Poto se i ime i polje smeteni u celoj
eliji,selektujte Name belo polje prevucite u susednu desnu eliju kada se pojavi roze blinker
u toj eliji.otpustite mia..To isto uradite i sa ostalimpoljima.
Sada sledi validacija ove stvorene forme.Selektujte bilo gde u tablici,pa naStatusnoj liniji
dokumenta pritisnite form form 1.Zatim idite na Windows>Behevior.Pritisnite znak plus
.
pa Validate form.
139
139
139
Sada za svaku stavku potvrdite Required i za:
Name- upiite anything
Phone-number
Email-email addres
Coment-anything
Preite na va pretraiva da vidite da li forma deluje.Ako ne ubacite nita dobiete poruku ta
je potrebno,a kada pritisnete submit automatski e biti izbrisana sva polja I spremna za novi
unos.
21.UBACIVANJEMULTIMEDIJA
Dreamweaver lako unosi Flash fajlove,muzike i video fajlove,pri emu programsam
usklauje atribute,koji odreuju kako e ti fajlovi biti prikazani na Web stranici.Postoji
nekoliko tipova Fle fajlova koji se ubacuju na stranicu:
1.Flash fajlovi ili Flash filmovi sa exstenzijom.fla
140
140
140
2.Fajlovi sa extenzijom .swf(small web format) ,ovo su kompresovane verzije .fla fajlova koje se
mogu prikazati u DW-u u pustiti da rade u Web itaima.Takoe ove fajlove koriste i Flash
buttons o Flash tekst.
3.Fajlovi sa ekstenzijom.flv(Flash video fajlovi) sadre enkodirane audio i video podatke koji
omoguavaju da ih emituje Flash player.
1.UBACIVANJE FLASH FILMOVA
Pre nego to ubacite Flash fajlove u DW morate prvo kreirati fajlove sa. swt extenzijom u nekom
programu,recimo ja koristim program Free video to Flash convertor.Dodate fajl recimo u mp4
formatu,i pritisnite Convert.Programedituje fajl sa ekstenzijom.swf ili
.flv,sauvajte video fajlove a, kasnije ih moete ubaciti u DW.
Da biste ubacili .swf fajl u DW postavite kursor tamo gde elite da ubacite fajl, pa zatim
Insert>Media>swf
,
141
141
141
Dobro je da bar date ime filmu ,ali ako pritisnite Cancel film e se ipak ubaciti na
stranicu,to nije sluaj recimo sa slikom.
Da biste videli kako izgleda film zajedno sa sadrajemstranice kliknite na sliku iznad I
pojavie se Properti Inspektor koji ima dugme Play.Film e se pokrenuti u dizajn prikazu.
142
142
142
U Prosperiti Inspectoru ima doste opcija gde se moe kontrolisati podeavanje Flash filmova.U
levom gornjemuglu prikazuje se tip fajla i veliina ,a programsam ubacije ID, i to Flash ID.Ovo je
polje editabilno tako da moete da upiete i svoj ID.Ostale opcije su:
Weght I Haight-irina i visina ubaenog objekta u pikselima.
File-ovo polje prikazuje putanju do swf objekta.
Src-ovo polje pokazuje lokaciju originalnog .fla fajla koji je korien pri kreiranju swf
objekta.
Bg-Ova opcija unosi parametar u <object>Tag i podeava pozadinsku boju swf
objekta(boja koja se vidi u pozadini filma)
Edit- Ova opcija otvara .fla fajl za editovanje,ali da bi radila,src polje MORA BITI
POPUNJENO.
Class-Omoguuje da primenite CSS klasu na<object> Tag
Loop-Ova opcija vrti film neprekidno,po zavretku poinje ponovo.
Autoplay-Filmse automatski pokrer kada se Web stranica prvi put pokazuje.
V Space i H space-Ova opcija postavlja vertikalan i horizontalan prostor oko filma,ove
atribute je poeljno dodeliti preko CSS fajla.
Quality-Ova opcija kontrolie izgled filma za vreme plejbeka,pri emu postoje sledea
podeavanja:
High-Odreuje najbolji kvalitet filma,ali troi resurse
AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali rtvuje izgled ako je
potrebno vie brzine.
Low-Selektujte ovu opciju ako vam je znaajnija brzona od kvaliteta.
AutoHigh - Ova opcija daje prioritet u izgledu i brzini, ali rtvuje izgled ako je potrebno vie
brzine
o AutoLow - Prioritet je na brzini, ali kad god je mogue popravlja kvalitet filma
Scale - Odreuje kako se film prikazuje u H i W dimenzijama.
o Default (Show All) - Ceo film se prikazuje sa svojih 100%.
143
143
143
o No Border - Bilo koji delovi filma koji se pruaju preko podeenih W i H dimenzija su
iseeni.
o Exact Fit - Zbija film u specificirane dimenzije bez obzira na originalnu veliinu filma.
Align - Odreuje poravnanje filma relativno u odnosu na stranicu.
Wmode - Ova opcija postavlja Wmode filma u prozoru itaa, to preventuje konflikte sa
DHTML elementima kao to su Spry Widgets. Postoje sledee opcije:
o Window- Forsira swf iznad svih elemenata stranice.
o Opaque - Difoltna opcija, dozvoljava DHTML objektima kao to su na primer padajui meniji
da se korektno prikazuju preko filma.
o Transparent - Forsira DHTML elemente da se prikazuju ispod filma.
2.UBACIVANJE FLASH VIDEO FAJLOVA
Flash video fajl je drugaiji od regularnog swf objekta jer ima .flv ekstenziju to vam
omoguava da dodate ve gotov film na Web stranicu. Potrebno je samo da enkodirate druge
formate video fajlova u .flv format i insertujete ga tako to ete kliknuti
na Insert stavku u meniju aplikacije, zatim na Media, zatim na Flv opciju. Ova opcija vam
omoguava da unesete .flv fajl bez korienja Flash aplikacije i omoguava da Web itai
pokrenu uneeni video sa prikazanimplayback kontrolama. Otvorie se Insert FlV dijalog boks sa
malo drugaijimopcijama u zavisnosti ,da li za Video Type birate Progressive Download ili
Streaming Video.
144
144
144
Klikom na browse pronaemo eljeni fajl.Skin emo promeniti u skin1,a za dugmad desno
levo,stop pauza podesimo nove vrednosti 400*300 to e biti irina i visina samog plejera,
ekiramo auto play, ako elimo da ide video odmah pri uitavanju strane ekiramo Auto
play.Pritisnemo OK i na stranici e biti ubaen video fajl.
/IZRADA VEB STRANIVE
22.CODE INSPECTOR,CODETOOLBAR I HINT
Code Inspector moete otvoriti tako to ete izabrati Windows>Code Inspector dugme iz menija
aplikacije,a takoe i preicomF10 sa tastature. Code Inspector vam omoguava da vidite tekui
kod stranice u posebnomprozoru.
145
145
145
Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za
prikazivanje liste CSS pravila koja su primenjena na selektovani element
Dostupne opcije su veinom opcije koje takoe postoje u prozoru Code prikaza
dokumenta.
1.Coding Toolbar.
Po difoltu Coding Toolbar je prikazan na levoj strani dokumanta u Code prikazu stranice. Takoe
je dostupan u Code Inspector-u i nalazi se isto na levoj strani prozora. Coding Toolbar se ne
moe otkaiti i premestiti na neko drugo mesto, ali se moe iskljuiti preko opcije View-
>Toolbars->Coding.
U Coding Toolbar-u postoje sledee opcije:
Open Documents - Kada kliknete na ovo dugme, izlistae vam se svi trenutno otvoreni
dokumenti zajedno sa njihovimputanjama. Ovo je korisna opcija ako imate vie otvorenih File-
ova sa istim imenom, pa preko putanje moete lako odrediti koji je File. Klikom na njega on
postaje dostupan. Nije vie potrebno da pogaate File.

na stranici
zajedno sa detaljnimkodom koji dobijate u vidu Pop up prozora kada preete miem preko
odreenog pravila. Kada kliknete na neko od pravila u Code Navigator-u, otvara vam se CSS
File sa postavljenimkursorom tano na poetak tog pravila.
146
146
146
Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi va
kursor i kolapsira sav kod koji je u njemu.

Collapse Selection - Ova opcija kolapsira selektovani kod.

Expand All - Kliknite na ovu opciju da biste proirili sve kolapsirane sekcije.

Select Parent Tag - Ova opcija selektuje Parent tag trenutno selektovanog elementa ili
elementa gde god je kursor trenutno lociran.

Balance Braces - Ova opcije selektuje ceo kod koji se nalazi unutar zagrada, vitiastih
zagrada i ugaonih zagrada.

Line Numbers - Ova opcija ukljuuje/iskljuujeprikaz broja linija u Code prikazu.

Highlight Invalid Code - Dreamweaver istie utom bojomnekorektno ugnjedene Tag- ove.
Ovo dugme ukljuuje/iskljuuje utu boju u Code prikazu. Difoltna opcija je OFF.

Syntax Error Alerts - Ova opcija prikazuje greke u Java Script kodu u vidu ute trake na vrhu
prozora dokumenta. Ovo dugme ukljuuje/iskljuuje ovu opciju.

Apply Comment Tag - Ova opcija omoguava unos razliitih tipova Comment Tag-ova u
tekuu liniju ili selekciju.

Remove Comment Tag - Pomou ove opcije uklanjaju se uneseni komentari iz tekue linije ili
selekcije.

Wrap Tag - Ova opcija omoguava brz nain za primenu Tag-a oko tekue selekcije.
147
147
147
Recent Snippets - Ovde se prikazuju svi poslednje korieni Snippet-i iz Snippets
panela.

Move or Convert CSS - Ova opcija omoguava brzo prebacivanje CSS pravila u CSS File.

Indent Code - Ova opcija pomera otvoreni Tag elementa u desno. Tab dugme ima istu ulogu.

Outdent Code - Ova opcija pomera otvoreni Tag elementa u levo (Shift + Tab)
.
Format Source Code - Kada kliknete na ovo dugme, otvara se meni sa opcijama pomou kojih
moete da primenite difoltno formatiranje na stranicu ili trenutno selektovan kod, zatim imate
brz pristup kategoriji Code Format u Prefernces panelu. Tag Library Editor vam omoguava
kontrolu nad formatiranjemsvakog HTML elementa u vaem kodu.
2.Code Hint.
Po difoltu Dreamweaver prikazuje Content-sensitive code Hint-ove u Code prikazu. Na primer,
ako krenete da otvarate ugaonu zagradu posle otvorenog <body> Tag-a, otvorie se sadrajni
meni i prikazae vam sve validne HTML Tag-ove. Moete skrolovati dole da biste pronali
odgovarajui Tag i dvoklikomna njega uneti ga u kod dokumenta. Druga opcija je da nastavite
sa kucanjem, na primer ako unosite div Tag, ukucajte
slovo d zatimi, selektovae se div u meniju, pritisnite Enter na tastaturi i Tag e biti
unesen u dokument.
148
148 | P a g e
Kada pritisnete Space bar na tastaturi, otvorie se drugi Context meni, samo to e ovog puta
prikazati sve validne atribute za tekui element. Ako unosite ID elemente, Dreamweaver e
uneti id= i postaviti kursor izmeu znaka navoda da biste vi uneli vrednost za ID. Ako unosite
klasu koja je ve definisana u CSS-u, Dreamweaver e automatski prikazati sve dostupne klase
koje moete da izaberete. Context meni nastavlja da se pojavlju sve dok ne zatvorite ugaonu
zagradu. Ako se sluajno ovaj meni izgubi, pritisnite Ctrl + Spacebar da bi se opet pojavio.
149
23.BEHAVIORS(PONAANJA) .
Instalacija Dreamweaver-a dolazi sa oko 20 predinstaliranih ponaanja (engl. Behaviors) koje
moete da koristite kako biste ugnjezdili Client Side Java Script kod u va dokument. Veina ovih
skripti dozvoljava korisniku da interaguje sa sadrajemna vaoj stranici. Behaviors su tipino
sastavljeni od dogaaja i akcija, koje pokreu te dogaaje.
Behaviors se mogu dodati na Web stranicu koristei Behaviors Panel. Svi imaju svoj dijalog
boks koji vas vodi kroz proces unosa potrebnih podataka. Da biste otvorili Behaviors panel,
kliknite na Windows dugme u meniju aplikacije i izaberite opciju Behaviors. U Dreamweaver-
u CS6 Behaviors panel je ugnjeden sa Attributes panelom unutar Tag Inspector panela.Do
panela se dolazi sa Windows>Behaviors.
150
150
150
Behaviors panel postaje aktivan kada imate otvoren dokument u prozoru radnog prostora. Da
biste saznali neto vie o ve primenjenimponaanjima, selektujete element ili Tag na koji je
primenjen Behavior na Web stranici, i on e se pojaviti u listingu Behaviors panela. Kada se
dogaaj sastoji od vie akcija, one su izazvane prema
redu u kome se nalaze na listi. Tipino Behaviors su pridodati Tag-ovima za tekst, slike, ali
moete i da ih primenite na <body> elemente, linkove, polja formulara.
Meni akcija u Bahaviors panelu se dobija klikom na + dugme. Tada e se izlistati sva
presetovana ponaanja.
Dva faktora utiu na to koja e ponaanja biti dostupna, a koja nedostupna:
1. Koji objekat ili element na stranici je selektovan pre nego to kliknete na + dugme.
2. Koji ita je slektovan na dnu Actions menija u opciji ShowEvents For. ita koji je
selektovan odreuje koji su dogaaji podrani i prema tome prikazuje akcije koje su
dostupne.
151
151
151
1.Kako se dodaje Behavior (ponaanje)
Dodavanje Behavior-a elementu u Dreamweaver-u je prilino jednostavno i sastoji se iz
nekoliko koraka. Najkrae reeno, selektujete objekat ili tekst na stranici, izaberete Behavior u
Behaviors panelu, popunite polja u dijalog boksu tog Behavior-a koje ste izabrali i proverite da
li Event Hendler odgovara vaim potrebama.
Editovnje i brisanje Behavior-a se vri u Behaviors panelu desnim klikom mia na
Behavior.
2.Drag AP Element Behavior
Ako koristite AP Div slojeve na vaim Web stranicama, postoji jedan interesantan Behavior Drag
AP Element koje omoguava da posetioci Web sajta pomeraju i repozicioniraju ove slojeve u
prozoru itaa. Ovo je odlian Behavior koji moe da se iskoristi u kreiranju interaktivnih igrica, i
drugih interfejs kontrola. Ovo ponaanje omoguava da korisnici vuku slojeve gore, dole, levo,
desno i dijagonalno u prozoru itaa. Pored ostalih stvari moete i postaviti ciljnu destinaciju za
sloj i odrediti da li e se taj lejer privuu cilju (Snap to target) prema specificiranombroju
piksela.
Da biste dodali ovo ponaanje na vaem Web sajtu potrebno je da:
Unesite AP div lejer u dokument. Insert>Layout Objects>AP Div
Selektujte <body> Tag da biste primenili ovaj Behavior.
Kliknite na + znak u Behaviors panelu i izaberite opciju Drag AP Element. Otvorie se
Drag AP Element dijalog boks koji se sastoji od dva taba: Basic i Advanced.
Basic kartica:
152
152
152
U Basic Tab-u selektujete AP element na kome ete primeniti Behavior. Zatim odreujete da li
e pomeranje biti ogranieno (kada elite da kontorliete kretanje) ili neogranieno (kod puzli i
igrica na primer). Ako izaberete Constrained tj. ogranieno, tada ete uneti vrednosti u
pikselima za parametre: gore, dole, levo i desno. Zatim ete uneti za levo i gore polje vrednosti
u pikselima za eljenu krajnju poziciju sloja, relativno u odnosu na gornji desni ugao itaa.
Snap if within _ Pixels of drop target je opciono polje, ali moete uneti vrednost u pikselima ako
elite da se lejer privue za ve
odreenu krajnju destinaciju, kad se priblii za unetu vrednost u ovo polje. Na primer, ako
uneste 10 px u ovo polje, i krenete da vuete lejer po stranici, kada se pribliite na 10 px od
krajnje pozicije, lejer e se automatski privui
U Advance tabu moete postaviti dodatne parametre i pozvati JavaScript za sloj.
Advance kartica:
Postoje sledee opcije:
153
153
153
Drag handle - Po difoltu je selektovana opcija Entire element to znai da se ceo sloj ponaa kao
ruica za povlaenje. Ako elite da samo jedan deo sloja predstavlja ruici za povlaenje,
unesite kordinate u pikselima u polja Left, Top, Width, Height

While dragging Bring the element to front, then...
Ako ekirate ovu opciju, dok povlaite sloj preko prozora itaa, moete da izaberete da li ete
ostaviti taj sloj povrh svih elemenata ili ete vratiti Z-index.

Call Java Script - Ovde unesite ako elite JavaScript kod koji e se izvravati dok se sloj
povlai.

When dropped Call Java Script - Unsite kod za dodatni JavaScript koji e se izvriti kada sloj
doe do ciljne pozicije ili kada se pusti
.
Only if snapped - Ako je ova opcija ekirana, Java Script se izvrava jedino kada sloj stigne
do ciljne pozicije.
Kliknite na OK da biste sauvali promene i zatvorili Drag AP Element dijalog boks.
3.Rollover Image
U ovoj lekciji upotrebiemo posebne skriptove. Da bi napravili rolover sliku na
izabranom mestu na strani pritisnite dugme Rollover Image na traci Common
panela Insert. Otvorie se prozor Insert Rollover Image
Daemo smislena imena koja ukazuju na namenu slika. U imenima ne sme biti razmaka
i specijalnih karaktera.
1. Prvo emo uneti koja e biti original slika, koja e biti na strani pre nego to
posetilac dovede pokaziva mia iznad nje.
2. Zatimtreba da unesete sliku koja e se pojaviti kada posetilac pree pokazivaem preko
originalne slike (dugme Browse do polja Rollover Image).
Savet: Slika koja se pojavljuje na poetku i ona koja je zamenjuje treba da imaju iste dimenzije,
inae edruga slika biti smanjena ili uveana u skladu s dimenzijama prve slike i zato
izobliena. Zato ove slike treba da budu jako sline a opet dovoljno razliite da korisnici uoe
prelaz. Moemo i odmah definisati link unosei u polje 'When Click, Go To URL' URL adresu.
Ako ne upiemo nita u ovo polje, Dreamweaver e upisati znak #, u polje link na panelu
Properties. Taj znak saoptava browseru da pokaziva mia pretvori u aku kada ga korisnik
dovede iznad slike, ali i da ga ostavi na toj strani
154
154
154
kada korisnik klikne na nju. Naravno mogue je i slici koja je ve na strani dodati prelaze
i to pomou panela Behaviors iz grupe panela Design (tag). Selektujemo sliku kojoj
elimo dodati zamenu, na panou Behaviors pritisnemo dugme sa znakom(+) i izaberemo
opciju Swap Image.
3. Pojavie se prozor Swap Image gde u spisku Images treba izabrati sliku koja e biti
zamenjena (original). Izuzetno je vano slikama dati odgovarajua imena, u suprotnom
kako emo izmeu bezimenih slika izabrati onu koja nam treba?. Sada pritiskomna
dugme Browse do polja Set Source to: izabraemo sliku koja e zameniti originalnu.
Uobiajeno je (radi lakeg snalaenja) imenu poetne (originalne slike) dodati sufiks
_off ili _out, a imenu slike koja zamenjuje originalnu sufiks _on ili _down.
4. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj je
pridruen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload Image i
Restore Image onMouseOut obavezno potvrdite. OpcijomPreload Image obezbeujemo da
se slike uitaju bez obzira da li su prikazane na stranici i tako eliminiemo kanjenje koje bi
uzrokovalo uitavanje zamenske slike tek kada
posetilac pree preko originalne. Opcijom Restore Image onMouseOut
obezbeujemo da se zamenska slika zameni poetnomkada se smakne pokaziva mia
izvan slike.
5. Pritisnite OK.
Kad selektujemo slike u panelu Behaviors vidi se spisak akcija - Actions koje izvrava
Dreamweaver, u zavisnosti od odreenog dogaaja Events u browseru posetioca. Na
primer, Swap Image je akcija, a on Mouse Over je dogaaj.
IZRADA WEB STRANICE
24.POSTAVLJANJE SAJTA NA SERVER .
155
155
155
Provera sajta na Testing serveru.
Otvorimo File Panel u programu.Na njemu vidimo sve stranice i sve fajlove koje smo izradili
prilikom pravljenja sajta.Ovo je u stvari lokalna kopija ovih fajlova,i oni smeteni na naem
kompjuteru.Da bi publikovali na sajt ove kopije treba kopirati na server.
Pri tome imamo dve opcije,da ih kopiramo na Testing server i proverimo sajt,dok je druga
opcija da ih kopiramo na Remote server.
156
156
156
Potrebno je proveriti i podesiti sajt na Testing serveru pre nego to ih smestimo
Na Remote server za publikovanje na Internetu-U Dreamweaveru idemo na
Site>Manage Site>Advance settings na kartici Basic podesimo lokalni server recimo
Navidad,pri emu smo izabrali lokalnu mreu i pratili putanju u Root direktorijumu
doSpring _Parka imena naeg sajta
.
157
157
157
I pritisnemo Save.Na prozoru iznad ekiramo Testing server.
Sledei korak je prikazan na File Panelu gde pritisnemo Put file toTesting server.i program e
sada kopirati fajlove:
na server.Pre toga treba selektovati ceo sajt kao na slici gore,jer moemo preneti i svaki fajl
pojedinano.U naem sluaju preneemo Site-Spring Park(C:.Po zavretku transfera na
Testingserveruvideemo:
:
158
158
158
Izvetaj kao na slici koji pokazuje da
su fajlovi preneti na server za testiranje.Ako otvorimo IE browser i ukucamo gornju adresu
,otvorie se stranica Home Welcome to Spring Park.
Provera sajta na Remote serveru.
Da bi postavili fajlove na remote server treba sada podesiti karticu Site Set Up Spring
_Park.Ide se na Site>Menage site>Server>Ad server.Tu treba upisati podatke ,koje daje web
hosting, poto predhodno kupite domen,i uplatite za hostovanje.Besplatan hosting moe se
nai i na Internetu,kao to je uraeno u ovom sluaju.Sada se unose . potrebni podaci kao to
je prikazano na slici:
159
159
159
Sada su na slici gore prikazana oba servera i Testing i Remote server.Pre publikovanja sajta na
Internet treba jo sprovesti odreene provere.Prva je check spelling.Proveru moemo vriti za
ceo sajt ili za neku stranicu.Poto su nai sajtovi na srpkom jeziku izostaviemo ovu
proveru.Druga stvar je proveriti da li je sve u redu sa linkovima.Ide se na
Windows>Result>Link Checker.
Pritiskom na strelicu u levom uglu koja pozeleni kada je pritisnemo izaberemo opciju za
proveru celog sajta,program je izbacio da je na Home stranici problem sa linkom koji vodi na
stranicu new_arrivals.html#Kangaroos_Wikipedia.Kada se klikne dva puta desno na link pojavi
se fascikla u kojoj izaberemo pravu putanju i reimo problem.Zatim treba proveriti Browser
Compapability ,odnosno ta e prijaviti program.Kada se sve ovo odradi, predstoji
publikovanje fajlova na Internet.Uemona File panel.
160
160
160
Da bi dobili File Panel prikazan na ovaj nain u desnom gornjem uglu File Panela je dugme,koje
pritisnemo i dobijemo New>Expand,panel e sada biti prikazan sa desnim sadrajem,a levo
nee biti nita.Sada se pritisne ikonica Remote server,i onda ikonicu Conect Remote Server i
fajlovi se prebace na server,to se moe pratiti.Rezultat je prikazan na slici.Na slici vidimo da na
strani Remote servera postoje dva nova foldera.Jedan je cgi-bin a drugi webalizer.Prvi sadri
fajlove koji su bitni za rad sajta ,a drugi prua mogunost da administrator proveri koliko je
posetilaca postilo odreeni sajt.Sada selektujemo na sajt Spring_Park i pritisnemo strelicu kao
na slici-
161
161
161
Posle izvesnog vremena fajlovi su prebaeni na Remote server,i sada je vreme da se pogleda
kako sajt izgleda na Internetu.Ovo je izgled Home stranice sa poetka kursa.
162
162
162 TA SMO NAPRAVILI?
Ovako izgleda home stranica,posle svih doterivanja i sada treba proveriti sve linkove i
rad sajta u svim pretraivaima.
Ovako izgleda druga stranica:
163
163
163
Ovako izgleda trea stranica:
Ovako izgleda etvrta stranica:
/IZRADA WEB STRANICE
DODATAK:
U matrijalima za izradu kursa DREAMVEAVER CS6 Korak po korak korien je deo matrijala
iz kursa Dreamweaver CS4(Link Akademije )koji se odnose na deo RAD SA
MULTIMEDIJOM..Autor zahvaljuje na razumevanju,jer je ovaj kurs napravljen samo za
edukaciju u 2-om razredu srednje kole i za druge svrhe se ne moe koristiti.Autor takoe
164
164
164
zahvaljuje i ADOBE Koorporaciji(predstavnitvo za Srbiju) na saradnji!