1
DREAMWEAVER CS6- Korak po korak
JELINEK ZORAN
2
2.SADRŽAJ:
1.Dreamweaver-korak po korak
2.Sadržaj
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 treće 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.Korišćenje Spray menija.
18. Validacija i provera linkova
19. Izrada formulara
20. Izrada formi u DW CS6
21.Ubacivanje multimedijalnih sadržaja na stranicu
22.Code Inspectori Code toolbars
23.Beheviors(ponašanja)
24.Postavljanje sajta na server
Svetlo plavi naslovi se direktno odnose na izradu samog sajta!U tekstu nadalje označeno je
kada počinje izrada sajta sa IZRADA WEB STRANE ,a kada se završava označeno je /IZRADA
WEB STRANE.Međutim da bi razumeli samu izradu web dokumenta,potrebno je znanje iz
ostalih poglavlja obeleženih tamno plavom bojom.Posebno obratiti pažnju 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 mnoštva tagova i sadržaja.Tagovi su elementi HTML koda.Kada se ukuca željeni HTML
kod, potrebno je sačuvati stranicu pod .html ekstenzijom.Takav fajl može se pregledati u svim
internet pretaživačima ,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 počinje sa <!DOCTYPE html,zatim sledi
<html i završava sa </html>(slash- kraj), a između je početak <head u kome je naslov Untitled
document ,pa kraj</head>,zatim početak<body> između je tekst koji smo napisali Hallo world
i kraj</body>, i na kraju </html>.Vidimo da korišćenjem određenih tagova definišemo željenu
stranicu,prikazujemo slike,pravimo linkove,raspoređujemo sadržaj.Specifično za tagove je da
moraju biti otvoreni( <) ili zatvoreni(>).
1.1 Osnovni tagovi u HTML jeziku su::
1).html govori pretraživaču da se radi o HTML dokumentu
2).head – u head tagu se ostavlja informacija o imenu stranice kao i linkovi ka eksternim
fajlovima.Sadržaj iz head taga nije vidljiv na samoj stranici,ali utiče 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 najvećim tekstom a h6 tag sa
najmanjim tekstom.
5)div- deli stranicu na delove-blokove.Koristi se kako bi se sadržaj raspodelio na željeno mesto
6).br- novi red,gde god da postavite br.tag,naredni sadržaj pisaćete u sledećem redu.
7).hr- linija koja se koristi za razdvajanje sadržaja radi bolje preglednosti.
8).title— naslov stranice.Ono što napišete u title tagu biće ispisano plavim slovima kao naslov
stranice u pretraživaču,na tabu u kome je otvorena stranica.
9).meta- služi da na stranici definiše ključne reči
10).link- koristi se za povezivanje stranice sa drugim elementima koje pozivamo u
stanicu.
11).script -povezuje se sa skriptama koje su potrebne stranici12).style -sadrži stilove koje definišu dizajn stranice.
13)Liste
.li – element liste
Postoje dve vrste liste:određene I neodređene liste.
ol-određena lista(ordered list)
1.Prva stavka
2.Druga stavka
3.Treća stavka
ul-neodređena lista(unordered list)
 Prva stavka
 Druga stavka
 Treća stavka
6
Postoje tagovi koji služe za formatiranje teksta.Pomoću njih vidimo, koju funkciju ima tekst koji
se nalazi unutar određenih tagova.
14).a- koristi se za link
17).strong ili b- definiše podebljan tekst.
18).em ili i- definiše ukošen tekst
19).u - definiše podvučen tekst
19).sub- definiše potpisan tekst
20).sup- definiše natpisan tekst.
Vrlo bitna opcija tagova je da oni mogu imati svoje atribute.Dakle najprostiji izgled div
taga izgleda ovako:<div>Ovo je sadržaj div taga</div>
Ipak to nije dovoljno, jer treba još definisati izgled(klasu) kojoj pripada i td.Zato
koristimo i sledeće tagove:
21).id -identifikator elementa
22).class
-uz pomoć class atributa element svrstavamo na jednu ili više podklasa
23).title-
dodeljuje naziv elementa
24.)href- povezuje dokument sa nekim spoljašnjim linkom
25.)src- postavlja sliku na stranicu,odnosno putanju do slike
26).style -definiše 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 pretežno služi za stilizaciju teksta
1
<span>Sadržaj sajta</span>,
7

p – paragraf tag – isključivo se koristi kao kontejner za tekst
1
<p>Sadržaj sajta</p>

a – link tag – služi za povezivanje stranica unutar sajta ,ili linkovanje ka sadržajima na drugim
sajtovima
1
<a href="http://www.google.com">Tekst koji je link i koji vodi na google.com</a>

b – bold tag – služi za stilizaciju teksta
1
<b>ovaj tekst je okružen bold tagom</b>

i – italic tag – takodje služi za stilizaciju teksta
1
<i>ovaj tekst je okružen italic tagom</i>

img – ovaj tag služi 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 služi za “lomljenje teksta” , odnosno pravljenje novog reda u
tekstu
npr.
kao
u
ovom
primeru
1
<br />
Obavezni tagovi su:

Doctype - tag koji definiše tip dokumenta, u ovom slučaju taj tip dokumenta je HTML.
Piše se na samom početku dokumenta u sledećoj 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 služi za definisanje parametara strane i uključivanje eksternih CSS
file-ova i java skripti
1
<head></head>

body - unutar body taga se nalazi sam code koji definiše strukturu i sadržaj sajta, kao
i svi ostali tagovi, između ostalog i html tagovi koji su navedeni na početku ove lekcije
1
<body></body>
Dakle osnovna struktura web prezentacije sadrži 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 pomoću njih ukaže pretraživaču , kako neki tekst ili slika treba da budu
prikazani na ekranu. Tagovi se stavljaju unutar < > zagrada. U većini slučajeva, tagovi se
postavljaju na početak nekog dela dokumenta, a na kraju tog dela dokumenta postavlja se tag
završetka.
Na primer da napravite naslov dokumenta koristimo sledeći opis:
<title>Moj prvi HTML Dokument</title>
Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta. Vidite
da se tag završetka razlikuje od taga početka po kosoj crti (/).
Tag HTML
9
<html> tag označava početak HTML programa (koda).
<html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače. Na
kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće se svi ostali
tagovi kao i sam sadržaj dokumenta.
Tag HEAD
<head> tag je tag koji služi za početak jednog posebnog dela dokumenta koje se naziva
zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu.Ono služi da se unutar njega
definišu neke karakteristike dokumenta, kao što je naslov.
Zaglavlje se opisuje između tagova <head> i </head>.
Primer dokumenta koji sadrži 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 omogućava da definišete naziv vašeg dokumenta. To se postiže na sledeći način:
<title>Moj prvi HTML dokument</title>
Naziv dokumenta, pošto se nalazi u zaglavlju, neće biti prikazan na ekranu, ali će se
pojaviti u na raznim drugim mestima (na vrhu prozora, u bukmark-u stranica i sl.)
BODY tag
10
10
<body> i </body> tagovi definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sve
slike i linkovi na druge dokumente nalaziće se unutar ovih tagova.
<body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može
izgledati ovako:
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Ovde se nalazi sadržaj vašeg dokumenta:
tekst, slike, grafika itd.
</body>
</html>
h tagovi
h tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašem
dokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća slova se dobijaju tagom h1 a
najmanja tagom h6. Slede primeri za svih 6 nivoa.
Tagovima za naslove se ne postiže samo promena veličine slova, već su naslovi i
boldovani, a takođe ispred i iza naslova se dodaje po jedna prazna linija.
PARAGRAFI
11
11
U HTML, paragraf se označava tagom tag <p> i postavlja se na kraj svakog paragrafa
"normalnog" teksta (pod normalnim se 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 sličan prethodnom sa razlikom što se ne dodaje jedna prazna linija
ispred (nema završni tag </br>)
BOLD I ITALIK TAGOVI
Možete posebnim tagovima označiti da vaš tekst bude u bold i/ili italic obliku.
Ne možete koristiti istovremeno oba taga (za bold i za italic). Ako greškom to pokušate onaj
poslednji unet će biti primenjen.
Bold i italikse javljaju u dva oblika: fizičkom i logičkom, i možete koristiti oba prema vašoj želji.
Upotreba ovih tagova vidi se u sledećim primerima:
FIZIČKI TAGOVI
Ovo je <b>boldovano</b>
Ovo je boldovano
Ovo je <i>italic</i>
Ovo je italic
LOGIČKI TAGOVI
Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto
Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se menja samo oblik slova,
a logički je zavisan od pretraživača i može uneti i druge promene ( recimo promenu boje)
Jedan od jako korisnih elemenata, koji se nalazi u elementu svakog sajta ,.jeste tag koji
uključuje eksterni CSS fajl:
<link href="global.css" type="text/css" rel="stylesheet" />
12
12
4.RAD SA FREJMOVIMA U HTML -u
Napravićemo prezentaciju koja sadrži dva frejma,levi i desni.Na levoj strani biće dugmad za
navigaciju,a veb strane će se učitavati u desnom frejmu.Prezentacija sadrži tri glavna dela
1.index.html koji sadrži tzv.“FRAMESET“
2.navigator.html koji se učitava u levi frejm i sadrži navigacionu dugmad za linkove
3.home.html koji se učitava u desni frejm i predstavlja naslovnu stranu prezentacije. Prvo
ćemo napraviti index.html u kojem se nalazi FRAMSET,to je prva stranica koja se
učitava u brauser i ona ne sadrži nikakav poseban sadržaj u vidu teksta ili grafike.Ona
služi samo za to da se definiše veličinu i položaj frejmova pomoću
taga<FRAMESET>,kao i da kaže brauseru koji HTML dokumente da učita u koji frejm.U ovoj
prezentaciji napravićemo dva frejma kolone:prvi frejm širine 160 px,i drugi koji će popuniti
ostatak slobodnog prostora.U levi frejm se učitava strana navigator.html,a u desni frejm
home.html.Kod ove stranice ima sledeći 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 dešiniše kako će delovi prozora biti podeljeni
na frejmove.Vidimo da je prvi atribut ovog taga COLS=“160*“ što znači 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 određena
13
13
160px širine,a drugi frejm ima*“ što znači da njegova širina nije ekplicitno određena i da će
zauzeti preostali prostor.Širina tog prostora zavisi od rezolucije.
Zatim slede dva <Frame> taga.Prvi definiše koji se HTML dokument učitava u levi frejm, a drugi
koji se učitava u desni frejm.Ovo se postiže pomoću SRC atributa.Vidimo da su frejmovi prazni
jer nismo ništa napravili od HTML dokumenata, koji bi trebalo da se učitaju u ova dva
frejma(navigator.html i home.html).Sada treba da napravimo ove dve stranice kao što se one
inače prave,sačuvati ih ,recimo na jednoj u body tagu upišemo Hello people a u drugoj stranici u
body tagu Welcome to Serbia i obe sačuvamo,one će
se automatski učitati levo i desno . Pazljivi citalac prethodnih redova se seća 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 obzirom da smo u
levom frejmu napravili navigacionu dugmad ,čijim se pritiskom menja sadržina 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
obicnim tekstualnim linkovima tipa:
<a href="boje.html">
Dakle, ovakav link ne smemo postaviti u levom frejmu (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
problem se 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 učitava samo novi sadržaj desnog frejma.
14
14
(slika sa dva frejma)
Vežba 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 gornjim frejmsetom izvrsili horizontalnu podelu na dva dela od 15% i 85%
respektivno, a zatim smo donjim frejmsetom izvrsili vertikalnu podelu na 20% i 80%.
Na ovaj nacin možete 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
brojem zadatih 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
brojem zadatih 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
NORESIZE
SCROLLING
SRC
Odredjuje referentno ime frejma.
Zabranjuje korisniku da menja velicinu frejma.
Ima tri moguce vrednosti: YES - Frejm ce imati Scrollbar, NO - frejm nema
Scrollbar i AUTO - Scrollbar se pojavljuje samo po potrebi.
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 sadržaja web prezentacije. Ti principi su:
· Podela informacija na grupe – grupisanje informacija u male delove od 4-6
17
17
elemenata
· Relevantnost – u istu grupu uključiti samo one elemente koji su isti; izuzeti
nebitne elemente
· Označavanje – označiti svaku grupu
Konzistentnost – predstavljati informacije na konzistentan način
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
usaglašeni sa opažajnim ograničenjima
Relevantnost
- Svaki deo ili grupa web prezentacije treba da sadrži samo one
elemente koji su bitni za tu grupu ili deo
- Nebitni elementi se prebacuju na neko drugo mesto ili se brišu
Označavanje
- Iskoristiti označavanje da se napravi arhitektura prezentacije koja će za
korisnika biti jasna i intuitivna
- Izbegavati oznake kao što su prethodni, sledeći, gore, dole, jer
mogu dovesti do toga da korisnik zaluta
Konzistentnost
- Koristiti konzistentno kretanje, na primer dugme Kontakt treba da bude
iste veličine i na istom mestu na svakoj stranici web prezentacije
Najbitniji detalj kod izrade web prezentacija je voditi računa o potrebama
korisnika
lokacije. Ključ uspešno dizajnirane upotrebljive web lokacije je da se ona
posmatra sa gledišta
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 određeni
cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi
19
19
lako,
omogućavaju korisnicima da bez grešaka i zadovoljavajuće postignu svoj cilj.
Upotrebljivost (engl. Web usability) čine sledeće komponente:
Mogućnost brzog korišćenja (pregledanja) web stranice – Koliko jednostavno
korisnik postiže jednostavne zadatke na web stranici koju prvi put pogleda?
Efikasnost – Posle početnog upoznavanja sa dizajnom web stranice, koliko brzo
korisnik može izvoditi zadatke pretraživanja informacija na stranici?
Memorabilnost – Ako se korisnik vrati na web stranicu nakon određenog
vremenskog perioda nekorišćenja iste, koliko jednostavno može ponovno
iskoristiti stečena znanja/veštine na web stranici?
Minimiziranje grešaka – Koliko grešaka čine korisnici, koliko su ozbiljne te
greške i
mogu li se korisnici jednostavno i brzo oporaviti od tih grešaka i nastaviti
koristiti
web stranicu?
Zadovoljstvo – Da li je ugodno koristiti grafički interfejs web stranice Najbitnije
stavke koje je potrebno obezbediti u web prezentaciji da bi ona bila uspešna:
Jasno prezentovati najbitnije sadržaje stranice – Na početnoj stranici (engl. home
page) treba prezentovati jasno i kvalitetno najbitnije sadržaje
Gde, šta, kako i zašto? – Na početnoj stranici korisnik treba dobiti odgovore na ova
pitanja: Gde sam? Koje sadržaje mogu ovde pronaći? O čemu je reč na ovoj stranici?
Šta mogu raditi na ovoj stranici? Kako mogu pronaći određenu
informaciju?
Konzistentnost – Najbitnije elemente na stranici npr. logo, navigacija, footer,
search page i sl. prikazati na konzistentan način - uvek na istom mestu na
stranici
i na isti vizuelni način
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 najviše 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 sadržaja Web
standardi - pridržavati se web standarda (XHTML, CSS, JavaScript, DOM, XML)
PRISTUPAČNOST
Pristupačnost Web sadržaja se ogleda u dostupnosti tog sadržaja ljudima sa
invaliditetom ili nekim drugim funkcionalnim ili situacionim ograničenjima.
Pristupačan sadržaj
mora biti kompatibilan sa pomoćnim tehnologijama koje koriste ljudi sa
invaliditetom, posebno
sa ekranskim čitačima. Mora postojati alternativa za vizuelni sadržaj, za ljude
koji ne vide, i
alternativa za audio sadržaj, za ljude koji ne čuju.
Konzorcijum W3C je zagovornik projektovanja što pristupačnijih web lokacija i
podržava inicijativu za pristupačnost na Webu – WAI (Web Accessibility Initiative).
Ova
inicijativa ne preporučuje samo pristupačnost lokacija hendikepiranim osobama
već i pravljenje
lokacija pristupačnih bilo kome, ko radi u uslovima drugačijim od onih koje je web
dizajner
usvojio kao „normalne“. Pod ovim se podrazumeva da možda korisnici nemaju
monitor iste
veličine kao dizajner, možda 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
ograničenja u radu drugačija od dizajnera web sajta.
Preporučeni 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>. Većina tagova ima i svoj par, koji označava kraj taga
</imeTaga>. Sadržaj je smešten izmenu otvorenog i zatvorenog taga.
Tip dokumenta se navodi kroz DOCTYPE tag, koji se piše pre otvorenog html
taga.
Najnoviji standard za tip dokumenta je: <!DOCTYPE html PUBLIC "//W3C//DTD XHTML
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 najvažnijih odlika su odvajanje sadržaja
od
prezentacije i pravilna struktura.
1.0 Strict dokument
.
Tekstualni ekvivalenti za slike
Svaki HTML tag koji prikazuje sliku <img> tag, treba da sadrži alternativni
tekstualni
opis i on se zadaje preko „alt“ atributa. Vrednost alt atributa će biti korišćen u
sledećim
slučajevima:
ekranski čitač će tu vrednost pročitati naglas ili poslati brajevom
displeju,
biće prikazana umesto slike u grafičkom pretraživaču, u slučaju da slika
nije pronađena na zadatoj lokaciji,
biće prikazana umesto slike u grafičkom pretraživaču ako je učitavanje slika
isključeno,
alt tekst koriste Web spajderi, pri indeksiranju sajta, što može doprineti
boljem rangu na pretraživačima.!
22
22
Boja može da poboljša doživljaj koji korisnik ima kada poseti sajt. Ona se koristi da
skrene pažnju, da naglasi, da odvoji celine. Pa ipak, ima slučajeva kada
nepažljivo korišćenje
boja može biti uzrok nepristupačnosti sajta. Web lokacija može biti
nepristupačna ljudima koji
ne mogu da razlikuju boje, ili imaju problema sa opažanjem boja, ali i ljudima
koji imaju slabiji
vid. Obezbeđivanje pristupačnosti ovde ne zahteva prestanak korišćenja boja na
stranici. Boja
svakako doprinosi upotrebljivosti sajta, ako je dobro primenjena. Samo boja ne treba
da bude
jedino sredstvo kojim se ističe neka informacija.
Bitno je osigurati da su svi objekti od značaja na web stranici jasni i bez
upotrebe
boje. Objekti od značaja su:









tekst,
linkovi,
navigacija,
delovi interfejsa (kao što su slikovna dugmad),
slike koje prenose neke informacije, a nisu samo čisto dekorativne.
korišćenje dodatnih elemenata za isticanje informacije,
korišćenje vidova isticanja kao što su veličina, raspored elementa,
izbegavanje korišćenja naziva boja kao reference na element
pažljiv odabir boja.
Kontrast
Pored brige o korišćenju samo boje za isticanje informacije, treba voditi računa i o
kontrastu na stranicama. Ako su nijanse pozadinske boje i boje slova bliske, te
stranice neće
imati dovoljno kontrasta. To može da postavlja problem ljudima sa
poremećajima u opažanju
boja ili korisnicima sa monohromatskim displejom.
Takone treba posebno voditi računa o tome da korisnici mogu podesiti njihove
pretraživače 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 sledećih delova(MENU BAR
,APPLICATION TOOLBAR,DOKUMENT TOOLBAR,STATUS BAR I PANELI)
24
24
MENI BAR se sastoji iz nekoliko
dugmadi: FILE,EDIT,VIEW,MODIFAY,FORMAT,COMMANDS,SITE,WINDOWS i
HELP .
Pogledati sadržaj svakog od njih.
APPLICATION TOOLBAR ,
Sastoji se iz nekoliko dugmadi:LAYOUT DUGME za selektovanje raznih prikaza
stranice,EXTEND DREAVEAVER koristi se za pristupu menadžeru ekstenzije.SITE DUGME za brzo
upravljanje i editovanje već postojećih sajtova.DUGME WORKSPACE LAYOUT
služi za prebacivanje između raznih radnih površina 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).Pritiskom na dugme CODE prikazuje se kod aktivne stranice u kome možemo i da
kodiramo ručno u HTML –u,CSS-u,JAVA SCRIPT-u, ili ako radimo sa dinamičkim 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 može se podesiti pogled i po vertikali ili kome je lakše po horizontali.
3).DIZAJN pogled daje nam vizuelni prikaz koda koji je u Body tag-u,i vrlo je sličan
onome što će se videti u čitaču
4.)LIVE prikaz nam omogućuje vidimo kod zajedno sa dinamičkim
sadržajem,slično prikazu u samom čitaču.
Paneli su smešteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE i ASSETS.
5.)LIVE CODE nam omogućuje da selektujemo elemente u dizajn prikazu i brzo
otkrijemo odgovarajući kod u levom prozoru,ili ako selektujemo jednu reč u CODE
prikazu,ta ista reč će biti selektovana i u DIZAJN pogledu,što je korisno.
Sledeći element toolbara je mesto za naslov,koji nam omogućuje da brzo dodamo naslov
našem dokumentu,a koji će se pojavljivati u Title baru samog browser-a.
Sledeća 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 čitaču.
W3C VALIDATiON vrši validaciju stranice na kome trenutno radite ili celog sajta.
CHECK BROWSER COMPATIBILITY provera va kompatibilnost vašeg fajla na kome
trenutno radite sa drugim čitačima.
VISUAL AIDS.koriste za razne alate koji mogu da asistiraju kod postavljanja nekih
parametara, bitni Paneli su smešteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE
i ASSETS.
PANELi smešteni na desnoj strani. mogu minimizirati pritiskom na dugme u
desnom uglu svih panela i tako napraviti veću radna površinu.
STATUS BAR ,
Status bar sadrži dosta priručnih alata.
26
26
U levom delu Status bara nalazi se trenutno Tag selector<body> koji nam omogućuje
da selektujemo sadržaj određenog taga.U desnom delu SELECT TOOL,I HAND TOOL
kao i veličina prozora u pikselima a na kraju UNCODE UTF-8
LENJIRI,MREžA I VOĐICE
Pojavljuju se u levoj i gornjoj ivici prozora dokumenta. Desnim klikom miša možete
odrediti da li će lenjiri Lenjiri su odličan alat koji može da vam asistira kod merenja i
postavljanja elemenata na Web stranicu. biti prikazani u pikselima, centimetrima ili
inčima. X/Y koordinate lenjira koje predstavljaju 0/0 tj. početak za obe ose po difoltu je
postavljen u gornjem levom uglu fajla. Ovaj početak se može pomeriti na bilo koju
lokaciju na stranici tako što ćemo kliknuti levim tasterom miša na kvadratić u gornjem
levom uglu i povući do željene lokacije na stranici.
X/Y koordinate se tada pomeraju na 0/0 na novoj poziciji. Vraćanje na staru
poziciju se može izvršiti preko opcije Reset Origin. Isključivanje lenjira se vrši
preko opcije Hide Rulers.
Mreža
Linije mreže se protežu duž celog dokumenta u jednakim intervalima, s leve na desnu
stranu i od vrha ka dnu dokumenta. One vam mogu pomoći za tačno pozicioniranje
objekata na Web stranici. Možete uključiti Snap to Grid (privlačenje mreži) opciju za još
bolje poravnanje. U podešavanjima mreže (View>Grid>Grid Settings) možete odrediti
koje boje će biti linije u mreži, zatim možete odrediti koliki će biti razmak između tih linija
i da li će se mreža prikazivati u vidu linija ili tačkica.
Vođice
Postoje horizontalne i vertikalne vođice koje možete dovući u otvoren dokument da bi
vam pomogle u merenju i postavljanju novih objekata na Web stranicu. Da biste kreirali
vođice, potrebno je da je prvo lenjir uključen, zatim ćete kliknuti levim dugmetom miša
na lenjir i povući vođicu 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,
postavićete vođice na tu lokaciju i
uključićete Snap to Guides (View>Guides>Snap to guides), zatim ćete samo
privući Div ka toj lokaciji i on će se sam „zalepiti” za to mesto.
27
27
Vođice su vidljive samo na radnoj površini u Dreamweaver-u, a ne vide se na Web
stranici u čitaču.Na slici ispod prikazani su lenjir i vođice.Ako postavimo AP div možemo
ga lepo namestiti na odgovarajuće mesto.
5.3 IZRADA (TEST PAGE) STRANE
Program DREAMVEAVER koji je vrlo ozbiljan zahtevan program ,koji nam
omogućuje visoki kvalitet izrade dinamičkih veb sajtova. Kada otvorimo
File>New >Blank page>HTML>None>Create.otvoriće se potpuno prazan
dokument koji je prikazan na slici ispod.Ako radimo u okruženju
design,upisaćemo na ekranu Hello World. (slika ispod)
28
28
:
Ako pređemo u CODE prikaz videćemo sledeće:u levom prozoru je program kreiran
jedan HTML dokument na način kako je to objašnjeno u prvom poglavlju, u kome
dominiraju uvodni deo koji je standardan za svaki dokument
head sekcija i body sekcija.Code je veoma kratak jer nema mnogo
sadržaja.Ppogledajmo SPLIT pogled ( slika ispod)
29
29
Tekst Hello World možemo formatirati, jer se uključio Prosperiti Inspektor.Za format
levo,možemo staviti Heading 1,2 ili3 I svaki put će se font promeniti.Takođe ako
selektujemo Hello World biće selektovane iste reči u Code prikazu,ili ako izbrišemo
sadržaj 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 možemo uraditi i u Code pogledu između tagova <title>upišemo Test page</title>,pa
zatim refresh.
31
31
Test stranu možemo pogledati kako izgleda u pretraživaču sačuvati je,ali pošto je u
pitanju proba prve stranice,sada je nećemo sačuvati..
6.IZRADA WEB SAJTA
Za izradu samog sajta potrebno je odrediti root folder i podfoldere.Sve u vezi sajta
biće unutar ovog foldera.Otvorićemo folder 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
.Upišemo ime sajta koje se neće nigde pojavljivati,racimo ime klijenta,a sa browse
dolazimo da foldera Spring Park koji smo prvobitno napravili, I u kome će stajati
sve što je vezano za sajt.Otvorićemo 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 poštujući želju klijenta.Sa File<New i izabrati BLANK PAGE
HTML i iz layouta 2 kolone heder i futer i levi sajd bar a zatim pritisnuti Create
34
34
Ovo je konfiguracija koja nam odgovara naručiocu projekta ,i sada treba pristupiti ispunjavanju
sadržajem(content).Pre toga treba napomenuti da je važna širina dokumenta,i da se ona mora
podesiti za razne uređaje:smart fonove,tablete ili PC računare,jer se protivno deo sadržaja
neće prikazati na ekranu uređaja.Tako ako bi želeli
35
35
da stranicu rendiramo u recimo smart phonu rezolucija bi bila 320x480px
Ova podešavanja nam omogućuju alatke iz STARTU bara na desnoj strani gde klikom na
ikonicu phona,tableta ili PC dobijemo izgled I veličinu stranice u pxelima.
Za uređenje sadržaja promenimo reč INSTRUCTION u WELCOME TO SPRING PARK.Otvorimo
split pogled i selektujemo ceo pasus između<p sadržaj>/p.Zatim ga obrišemo na isto mesto u
Code prikazu upišemo:Our park is a great location for family day out.
36
36
Sada to isto treba da uradimo i sva dva ostala paragrafa.U split prikazu stavimo kursor
iza <p> taga u CODE prikazu koji počinje sa Because i dilitujemo ceo pasus,upišemo:Our marine
exhibits include new panguis from South America.We also have some new arrivals from warmer
climates.Naslov ćemo takođe obrisati ( to Clearin Method u New arrivals).Posle svih promena
naslova i paragrafa ukucavanjem novog teksta u CODE prikazu koristi REFRESH svaki
put.Dobićemo preuređenu prvu stranicu,bez teksta i naslova.Dopisati I poslednji paragraf kao na
slici ispod.Sada stranica ima prilagođen izgled našim potrebama i prikazana je na slici ispod.
37
37
Sada možemo srediti sajd bar i isprazniti njegov sadržaj.Uradićemo to opet u SPLIT
prikazu u delu za CODE pogled.Selektovati prvi paragraf (uključujući oba paragraf taga),pa
delete i refesh ,pa,to isto uraditi i sa drugim paragrafom:
38
38
Vidimo da se početna dosta promenila i da prati naš dizajn sajta koji je tražio
klijent.Sačuvaćemo stranicu 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
preuređujemo od izgleda prve strane,prvo je sačuvamo sa Save as kao new_arrivals.html,a
u Title naslovu upišemo Spring_Park new Arrivals page.
.
Kada preuredimo gornji izled sa novin podnaslovima ,dobijamo izgled druge stranice(slika
dole).Kasnije ćemo to uraditi I sa trećom I sa četvrtom stranicom na potpuno isti način, i svaku
ćemo sačuvati pod svojim imenom.Ovaj deo nije težak i sve ide od prve stranice.Ako bi prvu
stranicu sačuvali kao tamplete stranicu(što je objašnjeno u sledećem poglavlju) onda bi
pravljenje treće I četvrte stranice bilo još efikasnije i lakše.Izgled druge stranice pošto je sve
dopisano,što trebate i vi uraditi dat je na slici ispod.
39
39
/IZRADA WEB STRANE
7.IZRADA TEPMLETA(ŠABLONA) I NJEGOVA PRIMENA ,
Stvaranje template stranice pomoći će nam da takvu stranicu,tzv.šablon koristimo i kod izrada
drugih stranica.U meniju 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 mogućnosti za izgled same stranice,zato služi
CSS(kaskadna lista stilova),koja nam omogućuje da svakom tagu dodelimo zaseban izgled i
poziciju.Najlakše je da napravimo prvu stranicu , ali je nismo sačuvali kao šablon stranicu. Ovde
ćemo pokazati kao se pravi stranica sa hederom,futerom i dve kolone direktno pišući kod,kako
bi polaznici vežbali HTML i CSS jezik.Koristićemo ranije pomenuti div tag za pravljenje blokova.
41
41
Vežba br.2 ,
Kreirati stranicu u HTML-u sa hederom,futerom i 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 sačuvamo kao index.html dobićemo šta smo uradili- na sledećoj strani.
Raspored koji smo želeli je: heder,futer i dve kolone.To je tek prvi korak ka izradi web
stranice šablona u koju možemo unositi elemente i formatirati ih po našoj
potrebi.Raspored je prikazan na slici ispod.Tu možemo primetiti da je naš sajd bar sa
42
42
logom bio na levoj strani ,a sadržaj u desnoj koloni.To se može lako promeniti u samom kodu,
tako što levu kolonu napravimo užom recimo širine 210 px ,a desnu podesimo na
710px.Ali pošto mi u projektu ne nastavljamo dizajn po ovom šablonu,ostaće kako
jeste.Vi ako želite možete to da uradite i da napravite prvu stranicu kao šablon sa tekstom i
naslovima naše prve stranice,a onda je iskoristiti za pravljenje treće i četvrte stranice.
U našem slučaju 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 sledeći:


width – definiše širinu elementa i piše se: width:710px; gde je 710px primer
vrednosti širine u pikselima
height - definiše visinu elementa i piše se: height:600px; gde je 600px primer
vrednosti visine u pikselima
43
43



border – ovaj stil željenom elementu daje borduru i piše 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 između elemenata. Piše se: marginright:10px; gde right predstavlja stranu elementa koja će dobiti zadati razmak, a može
biti margin-top, margin-right, margin-bottom, margin-right
float – float u kratkim crtama “lepi” jedan element za drugi po horizontali.
Postoje float:left; i float:right;


Primer 1:
Ukoliko bismo npr. postavili 2 div elementa, dakle <div>sadržaj</div> i još jedan
element <div>sadržaj</div> i prvom ili oboma dali parametar float:left; prvi element bi bio
zalepljen za levu ivicu, a drugi za njega. Moguće je koristiti i njegovu drugu opciju float:right; i u tom slučaju, 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 ŠABLONA U DW CS6

 1.Definišite veb sajt i otvorite stranicu koju ćete upotrebiti za kreiranje šablona
 2.Pošto smo kreirali stranicu u predhodnoj vežbi, trebamo je sačuvati sa File>Save as a
tamplete



















 3.Otvoriće se mali prozor u kome smo izabrali sajt Spring park na koji možemo 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>Editibilan region

Ovi regioni su okviri za sadržaj koji je jedinstven za svaku stranicu na kojoj je primenjen šablon.
5.Otvoriće 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, uključujući i hiperveze. Ako pravite hiperveze u samom šablonu, za pronalaženje
hiperveze upotrebite ikonicu direktorijuma ili alatku Point to File koje se nalaze na panelu
Properties.
Hipervezu ne smete upisivati neposredno u odgovarajuće polje na panelu Prosperties, jer
tada hiperveze neće raditi!. Dreamweaver automatski formira putanje ,kada koristite jednu
od ove dve metode. Na kraju snimite datoteku.
Menjanje promenjivih oblasti šablona možete kasnije da onemogućite. Iz menija Modify
izaberite Templates, a zatim Remove Template Markup. Nestaće kontura koja označava oblast
kao promenjivu i sada je taj deo šablona zaključan i ne može se menjati u stranama
napravljenim pomoću ovog šablona.Šabloni se mogu praviti i od gotovih stranica.,što je
najlakše da uradite jer imamo index.html
45
45
stranu.,koja je prikazana na slici icpod(header,footer,levi sajd bar i glavni deo).
Sačuvamo šablon kao template 1.Mi ćemo nastaviti kreiranje sajta nešto kasnije,bez upotrebe
šablona koristeći prvu stranu našeg sajta na klasičan način.
Vežba br 3
Napraviti šablon stranicu od prve stranice index.html i iskoristite je da napravite drugu
stranicu sajta,po postupku koji je objašnjen!
46
46
ALATI ZA RASPORED STRANICE
Glavni alati za raspored elemenata na web stranici su <frame>, <table>, i <div>. Okviri
(engl. Frames) i njihovo korišćenje je danas veoma sporno, i većina stručnjka ih više ne
koristi. Jedan od glavnih razloga je zato što pretraživači 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 prikazanim tekstom ili bez teksta.
Tabele (engl. Tables) su sve manje u upotrebi danas, razlozi su sledeći: Kada čitači
(engl. Browsers) dođu do tabele i krenu da je čitaju, oni moraju dvaput da je
pročitaju pre nego što prikažu njen sadržaj, jednom da izrade strukturu tabele a
drugi put da utvrde sadžaj. Prilikom učitavanja 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 učita i
onda tek prikaže
Layers ili slojevi (engl. Divs) su elementi HTML jezika pomoću kojih se uz kaskadne stilove
prave moderni, pristupačni i upotrebljivi rasporedi elemenata na stranici.
1. CSS generalno zahteva manje koda nego tabele
2. Ceo CSS kod je u jednom eksternom fajlu koji se samo jednom učitava, zatim se
kešira na korisnikovom računaru
3. Preko CSS-a može da se kontroliše redosled po kojem će se učitavati pojedini
elementi – prvo je bitno da se učita sadržaj ,pa tek onda elementi koji se sporije
učitavaju, 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 prikaži u SPLIT pogledu:selektovan je kod koji odgovara
hiper linku.Svaki hiperlink ima dva dela: Link one na kome napišemo recimo Home i pod
navodima“#“, koji kaže gde link vodi.Ispred je a tag i na kraju spleš tag.U dizajn prikazu
selektujete Home<Insert<Hiper link i za link upišemo index.html.
.
48
48
Za Target izaberemo _self I OK.
Uradili smo da link HOME vodi sa druge stranice na početnu stranu.Sada se vratimo u dizajn
pogled.
Vidimo da link ne radi kada pređemo preko njega.Ali ako pređemo na LIVE pogled i kada
pređemo preko linka on se promeni, pa klikom na Home(uz pritisnuto control dugme) prešli bi
na matičnu stranu ,koja je ispod New Arrivals-,a to je matična strana.
49
49
Takođe link radii u pretraživaču pošto uključimo taj prikaz(znak za Internet pa izaberete
pretraživač,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 napraviti LINK koji sa matične strane vodi na drugu stranu .Selektujemo link
1 na drugoj stranici u polje tekst upišemo New Arrivals,kliknemo na br owse pored linka i
nadjemo putanju i upišemo new _arrivals.html za target selfi na kraju OK . Ako
pređemo na split view- link će raditi uz CONTROL plus klik na link.
.
Ako otvorimo stranicu u brauzeru link če postati aktivan i prebaciće nas na prvu
stranu.Jasno je da će raspored linkova biti :Home;New Arrivals;Opening times;Admission
prices ,što ćemo kasnije uraditi koristeći Java script i Spray meni.Za sada smo samo probali
da povežemo strane sa relativnim linkovima u odnosu na dokument i root folder.
50
50
..
Sada ćemo se pozabaviti FUTEROM i obrisaćemo text na obe strane u CODE
prikazu.Selektujemo sadržaj futera u kodu,kliknemo na footer u Prosperiti Inspektoru(na vrhu sa
leve strane) i pritisnemo delete.U footeru upišemo:©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 treće stranice,krenućemo od druge stranice na kojoj je promenjen naslov
New Arrivals, sačuvali je pod novim imenom openining_times.html,napravili jedan red prostora
sa enter.Želimo da ubacimo tablicu koja obaveštava posetioce o rasporedu rada parka koji
posećuju.Predhodno smo 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 sačuvali na desktopu kao.txt fajl ,sa
File<Import<Tabula data i u novom prozoru došli do putanje gde se tekstualni
dokument nalazi(desktop) i na kraji OK ubacuje tablicu odmah ispod naslova, kao na slici ispod :
52
52
Dream weaver ima dosta mogućnosti za opcije Copy/Paste.Ako postavimo miša ispred
rečenice these kangaroosi kliknemo na <p> na statusnoj liniji rečenica će biti
selektovana.Sa Copy /Paste iz menija edit može se katovati ili zalepiti na drugo
mesto.Ako sada pređemo na split pogled možemo izbrisati ceo paragraf između dva
velika naslova,sa tim ako ostavimo kod za novi red &nbsp ,po brisanju blinker ostaje
između redova, jer kod čuva prored,.međutim ukoliko izbrišemo sve dobićemo sledeći
izgled:
53
53
Ako stavimo kursor recimo ispred reči These i držimo Shift selektovaće se ceo tekst
do kraja.Jedna reč se selektuju jednim klikom, a cela rečenica troklikom.
LINK(apsolutne putanje)
Možemo napraviti link na samoj stranici,i preko njega prebaciti se na neki URL adresu
recimo Wikipidiju(ovo se zove apsolutna putanja).Na matičnoj strani pri dnu
selektujemo reč here ,a potom ubacite hiper link.
54
54
Pošto smo uneli podatke stisnuti OK.Reč here postaje super link koji nas vodi na
Wikipidiju.
U sledećem izlaganju modifikovaćemo link u odnosu na raniji postupak.Na stranici
Opening times selektujemo drugi link pa Insert i dobijamo prozor za dijalog.U prvi
upišemo New Arrivals, u drugo polje, dođemo do stranice
55
55
new_arrivals.html I kliknemo na nju.U Polju TARGET imamo nekoliko opcija
:blank otvoriće novu stranicu u veb čitaču.Izbor SELF otvoriće stranicu na istoj stranici u
čitaču.Podesićemo BLANK.( sa ovom opcijom otvaramo novi tab).U polje TITLE
upisaćemo tekst koji će se pojaviti kada mišem prelazimo preko linka.Upisaćemo
Click to see our latest new arrivals.i za ključ K,pa OK
Sada možemo da otvorimo čitač I sve ovo proverimo!
Dizajn četvrte stranice.
Postupimo kao sa trećom stranicom,polazeći od druge stranice ,uradimo potrebne
ispravke jer ne koristimo šablon o kome je bilo reči ranije, sačuvamo je sa Save as
56
56
kao
admission _ price.html,i podesimo
futer.Posle ispravki ostaće:
IMENOVANA SIDRA .
Ako na stranici New Arrivals dopišemo tekst Find out all about kanfaroos on Wikipedia
by clicking here.Ako na Web stranici kliknemo na početak tog reda ,pa Insert>Name
Anchor na početku reda pojaviće 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 reči here
napravićemo link do imenovanog sidra.
Ako kliknemo na OK pređemo 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 spoljašnjih linkova i sl.
Posebna vrsta linkova su email linkovi.Na stranici Opening times dopisaćemo
tekst:To confirm todays opening times:send email to our office.Selektovaćemo send an
email to our office,popunimo šta se traži upišemo eksterni link pošte
,možete upisati email svoje firme kao na slici dole.
Klikom na link prebacujemo se na email poštu.
58
58
9.FORMATIRANJE TEKSTA se vršI na više načina,i to što se može
formatirati jedna reč recimo many ,koja se selektuje i pritisne dugme bold.U split
pogledu se može videti da je na mestu umetanje,kursora u tom paragrafu napisano
STRONG za boldovanu reč.Takođe reč ATTRACTIONS se može centrirati komandama
Format<Align<Center kao na slici.Takođe ako postavimo kursor na kraju paragrafa i
pritisnemo
enter, program postavlja kursor u položaj novog paragrafa.Ali ako
pritisnemo Shift<Enter kursor se postavlja na početak novog reda!.
59
59
Na stranicui možemo ubaciti liniju koju možemo 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 dopušta da je popravimo,tako što za
visinu upišemo 10 piksela a za
širinu100px.
60
60
Kada podešavamo width možemo podesiti i procente recimo 50% a linija će biti pola
dužine od cele.
Ubacićemo text za futer na stranicu home page.Kliknemo na footer
Insert>Html>Specijal caracter i izaberemo Copyright i upišemo tekst.Ako želimo da
ubacimo i datum
Insert>Data , recimo izaberemo datum, i čekiramo Update
automatacally on save. Pojaviće se današnji datum u futeru.
Još nam ostaje da ubacimo na futeru iste podatke za sve stranice koje smo
napravili.
Na drugoj stranici smo izvršili neke promene u tekstu tao što smo ARRIVALS
stavili u ITALIC font.Ako uđemo u Windows>History pojaviće se sedeća slika:
61
61
U History panelu vidimo koje smo sve promene i formatiranja vršili na stranici.Ako mišem
pomeramo klizač na gore AUTOMATSKI se vraća prvobitni izgled strane pre
formatiranja,znači briše se reč koja je dopisana i gubi se italic.Ako bi klizač pomerali do
kraja- pojavio bi se PRVOBITNI IZGLED STRANICE,što znači da program beleži sve
promene koje smo uradili na toj stranici od samog početka.Ako se to uradi sa
našom stranicom dobićemo:
Takođe za vraćanje upisanog teksta ili reči koristimo UNDO typing i REDO
backspace.
10.UBACIVANJE SLIKA vršI 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 odgovarajućeg foldera za slike. Istovremeno se u FILE
panelu prikaže da je folder images operativan.Sada samo treba u njega staviti slike.Pošto
je postavljena slika “Tri pingvina u svađi” idemo na Insert>Image i pronađemo putanju
do slike.Zatim se selektuje slika i pritisne OK.
Pojavljuje se prozor koji treba da opiše datu sliku.
63
63
U polje alternativnio tekst ,koji opisuje datu sliku,ostavimo za sada empty i
OK.Pojaviće se slika
Slika je određene veličine u pikselima ,ali je možemo obraditi za početak u
Properti Inspektoru.Pošto je slika prevelika smanjićemo širinu na 300 px i kliknuti u
prostor za visinu slike.On će se automatski podesiti na 233 px jer program
64
64
automatski podešava vrednost.Sada je slika
umanjena.
Sada možemo u samom programu kropovati sliku sa Modify>Image>Crop
Slika je dobila okvir i sada možemo birati veličinu slike ako nam je to potrebno,ili deo
slike.Slika posle smanjenja ako to želimo može da se razvuče,ali će REZOLUCIJA biti
loša.Slika se može editovati pomoću nekog drugog programa recimo pomoću
Microsoft Painta sa Modify>Image>Edit width
.Slika se
65
65
pojavljuje u Paintu.Ovde se može dalje editovati,kao što se to radi u programima za
obradu slika(kontrast,oštrina,jačina osvetljenosti i td).Iz dreamweavera možemo
takođe sređivati sliku preko Modifay>Image>Optimaze ( scharpen ili contrast.)Formati
koji se koriste kod slika su:
GIF ili skraćeno Graphic Interchange Format.Ovaj format podržava 8-bitne slike sa
najviše 256 boja.Koriste se za crteže,crno bele slike.GIF podržava
transparetnost,pri čemu se jedna ili više boja podešavaju tako da budu providne I
da se kroz njih vidi veb boja strane ispod nje.Format GIF se smatra formatom bez
gubitaka,što znači da će slika prikazana u čitaču biti istog kvaliteta kao I kada je
napravljena.
JPEG je skraćeno od Joint Photographic Expert.Format je predviđen za 24 bitne slike i
milion boja.JPEG format se mora kompresovati pa ima gubitke,što znači da
kompresija žrtvuje kvalitet slike-radi smanjenja veličine fajla.Ovo je standardan
format za Internet.Slike u ovom formatu ne podržavaju transparentnost.
PNG skraćeno Potable Netvork Graphic je naslednik GIF formata.Za razliku od
GIF-A IMA POBOLJŠANU KOMPRESIJU I POHRANJIVANJE TEXTA U SLICI.Prednost ovog
formata što on omogućava slike sa milionima boja i daje providnost pozadine.Mana mu
je što ne prikazuje slike u starim čitačima 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 podržana.
Pogledajmo sada kako će stranica našeg dizajna izgledati na različitim
uređajima,što omogućuje 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
promenimo širinu na 400 px videćemo
da je prikaz za telefon bolji jer se vide oba ljenjira.
67
67
Veličinu prikaza koji odgovara nekom uređaju možemo podesiti i preko Edit<Preferences
Alo u prozoru preferances označimo Windows size i na njemu pritisnemo dugme + i
dodamo phone Sony PSP 400*270px
68
68
Po pritiskanju OK pojaviće se prikaz na Sony uređaju.
/ IZRADA WEB STRANE
69
69
11.RAD SA TABELAMA
Raspored u dokumentu može 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.EXPANDID MODE
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 obeleži kolona ispred koje će doći nova
kolona ,klikne se desnim klikom i pritisne Insert <Column
Vidimo da se kolona ubacuje levo od selektovane kolone.Tabela se briše tako što se prvo označi I
pridisne DELETE..Da se povrati Edit>Undo resizeTakođe tabela se može formatirati I preko
Prosperiti Inspektora i to:poravnjanje,broj kolona i redova,poravnjanje teksta,border kao i
širina u px.Takođe ćelije se mogu I spajati
71
71
(merge).komandom Modify<Table<Merge cells(predhodno se ćelije selektuju(control dugme
I klik na svaku,takođe 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 služe kao konejneri za razne
elemente..U kodu se obeležavaju sa <div>,a mogu da sadrže 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 omogućava da se izrađuju dobri dinamički sajtovi,kao što je objašnjano detaljno u
tekstu koji sledi:
Smještaj layer-a i clipping layer-a najviše se koristi u DHTML aplikacijama. DHTML je
kombinacija HTML, CSS i javascript-a i mnogo se koristi za dinamične web stranice. Takođe
može se iskoristiti i za dodavanje bloka texta. Layer-i nije ništa drugo nego block određene
širine i visine. koji pomoću CSS –a može biti postavljen na određenom mestu.Pogledajte
naredni primer. Svaki style element biti će objašnjen.Sa crvenim je deo koda iz CSS koji je
pridodat HTML-u.Primer 1 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 prethodnom primeru kreiran je layer (block) od 500 pixela širine i 200 pixela visine. To je
urađeno sa width: i height: style elementima. Pozicionirali smo layer relativno
(position:relative) što znači 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 smešten. Dakle ako promenimo "relative" u "absolute"u našem
primeru layer će biti smješten 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//DTD HTML 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 može smestiti gde god hoćete ako upotrebite left: i top: style elemente.
left: definiše horizontalan razmeštaj, top: vertikalni. Layer je smešten 100 px od levo i
30 pixela od vrha.
.Primer3 .
Takođe može staviti layer na layer...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 yellow block.
<div id="greenblock">
Ovo je green block.
</div>
</div>
</div>
</html>
Rezultat je:
e
75
75
Yellow block je smešten na 30 pixels od leva, 50 pixela od vrha donjeg layera (parent layer).
Green block smešten je 30 pixela od leva 30 pixela od vrha yellow blocka.
NAPOMENA :
.Primer 4 .
Negativne vrednosti za left: i top: style elemente mogu se također koristiti. U tom slučaju
layeri će biti smešteni "izvan" ekrana pa će deo ili celi block biti nevidljiv. Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 znači ništa drugo nego odsecanje dela layera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 značiti: skrati
desnu ivicu žutog layera za 150 pixela ,a donju za 55 pixela.
Primer 6 .
z-index
Ovaj style element defini[e položaj iznad ispod (z-os). Drugim rečima, definiše koji
će layer biti gornji ,a koji donji. Pretpostavimo da imamo layere koji se preklapaju:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 yellow block.
</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//DTD HTML 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 yellow block.
</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 možete nacrtati i ubaciti u dokument:regularni
<div> i AP Div koji se kontroliše preko AP elements Panela.Oba sloja se ubacuju sa
Insert>Layout Object, a zatim odabirom Div tag ili AP tag.
81
81
Kada kliknete na Div tag otvoriće 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 završnogtaga elementa ubacujete sloj.Recimo ako je
u pitanju
Body Tag program će uneti ovaj kod:
<body>
<p>neki sadržaj</p>
<div>Sadržaj 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 početnog Taga elementa ćete ubaciti sloj.Na
primer ako izaberete Body Tag DW će uneti sledeći kod:
<body>
<div>Sadržaj za novi Div ide ovde</div>
<p>neki sadržaj</p>
</body>
82
82
83
83
Ako već postoji neki sadržaj na stranici na kojoj želite da postavite sloj,selektujte taj sadržaj I
automatski se otvara nova opcija u Insert Div Tag dijalog boxu:Wrap around selection(ova
opcija postavlja div oko sadržaja)
Selekciji Hello World .Predhodno treba odrediti klasu class i atribut ID,
Class-Ova opcija dodeljuje već postojeću klasu div elementu
ID-Ova opcija dodeljuje ID atribut div elementu
New CSS rules klikom na ovo dugme možete da napravite novu klasu u vašem CSS fajlu i
dodelite ga div elementu ,dok ga unosite u dokumenat.
Kada ubacujete AP Div ,DW automatski unosi unutrašnji CSS u Head sekciju dokumenta,sa
veličinom i pozicijom elementa.U kodu elementa se unosi div Tag sa atributom ID<div
id=”APdiv1”></div>,a takođe se postavlja i marker u AP Elements panelu.Svaki sledeći AP
elemenat dobija ID automatski sa vrednošću AP Div2,i td.
Ovaj div možemo namestiti gde želimo,zaokrenuti ga za 90 stepeni ili bilo koji ugao,upisati
tekst,uneti sliku i slično.Pogodan je za sajtove koji imaju informacije koje trebaju da se
istaknu.
14.CSS STILOVI U HTML-u
CSS je jezik sadrži sve one podatke (sintakse), koji imaju zadatak da odrede dizajn
elementa jedne web strane.
84
84
•
Stilovi definišu izgled html elemenata
•
Stilovi su dodati u HTMLv 4.0
•
Razni nivoi definicije stilova:
– Stil na nivou elementa (najniži nivo)
– Stil na nivou html strane
– Spoljašnji stil (eksterni file)
– Podrazmevani prikaz u browser-u (najviši nivo)
•
Različiti nivoi definicije stilova za jedan isti html elemenat, na web strani će imati
različite prioritete u zavisnosti od nivoa – najniži nivo ; najviši prioritet
Problematika html-a
•
Html tag-ovi su prvobitno zamišljeni da definišu sadržaj 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 otežavalo striktno razdvajanje sadržaja i način
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 određuju način prikaza html elemenata!
•
Stilovi su najčešće smešteni u posebnim file - ovima sa ekstenzijom css, mada mogu
biti i na web strani
•
CSS u posebnim file-ovima omogućavaju da se veoma lako( centralizovano) može i po
potrebi menjati način prikaza html elemenata na čitavom web site-u, koji može imati
veliki broj strana.
85
85
•
CSS omogućavaju da se jednom definisani izgled web strane koristi na velikom broju
drugih web strana što doprinosi ujednačenom 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 definiše stil
•
Property je svojstvo / atribut kojim se stilom podešava
•
Value je vrednost atributa
Primeri stilova:
•
body {color: black} (<body>)
•
•
p {font-family: "sans serif"} (<p> navodnici ako se vrednost atributa sastoji iz više
odvojenih reči)
•
•
p {text-align:center; color:red} (podešavanje više svojstava jednog elementa)
•
Da bi se olakšalo kodiranje i optimatizacija stilova koji su primenjeni na HTML tagove, a koji
čine strukturu svakog sajta osmišljen je CSS(kaskadni stil) .U sledećem kodu vidi se gde treba
da se nalaze tagovi koji čine strukturu sajta(div,a,span,p…):,crvenim su označeni 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 sadržaja sa vrha sajta sa ID-jem "header", unutar koga će se naći
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" (skraćeno 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 središnjeg dela sajta sa ID-jem "body" -->
<div id="body">
Slike i tekst
</div>
<!-- kontejner sadržaja 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 tiču se formatiranja i razdvajanja delova HTML-a.Problem je samo u
tome što kada razdvojimo HTML na neki od načina ,mi unapred te delove stilski
formatiramo.Ali ako želimo da naznačimo da neka logička podela postoji,ali da pri tom ne
želimo da je stilski identifikujemo,ovi tagovi nam nisu korisni.Umesto toga koriste se tagovi div
i span
Span tag je najprostiji vid logičkog razdvajanja sadržaja,i prilikom korišćenja nema
uticaja na sadržaj ,sve dok to ne naglasimo eksplicitno stilovima-
88
88
Pogledajmo primer:1.
Vidimo da se SPAN uopšte ne primećuje 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
određene korekcije
Primer2. Ako bi u sadržaj umesto span taga koji nema uticaj na sadržaj ubacili div tag on
vrši određena 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 važna je za njegovu upotrebu kod izrade dinamičkih
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
izvršavanja strane )
Drugi atribut je CLASS-( on omogućava dodeljivanje CSS klase sadržaju elementa)
5.1 Umetanje Cascading Style Sheet-a u HTML
Cascading Style Sheet može se umetnuti u HTML na 3 načina. Prvo, style
89
89
elementi mogu se dodati direktno u HTML tag, što se zove "inline" style sheet.
Drugo, style sheet može biti deo HTML dokumenta ("internal" style sheet), a to
podrazumeva direktno upisivanje u HTML dokument u <head> područje. Na
kraju, može biti odvojeni "external" style sheet koji će se pozivati pomoću web
adrese (URL-a) svaki put kad se HTML dokument bude učitavao. Link za odvojeni
external style sheet takođe će se smestiti između <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//DTD HTML 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//DTD HTML 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 našim HTML dokumentom pomoću:
<LINK href="filename.css" rel="stylesheet" type="text/css">
Svi style elementi biti će smešteni u poseban, odvojeni CSS dokument te mu se
dodaje .css extenzija!
UOČITE :
Ako external style sheet nije u istom direktoriju gdje je HTML dokument onda to
morate odrediti bilo apsolutnim, bilo relativnim putem 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 većine browsera je bela. No vrlo lako je
možemo promeniti.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Sadržaj ide ovde ...
</body>
</html>
body { background:#00ff00 } pozadina će pozeleniti.
Takođe može i: body { background:green } . Oznake pojedinih boja.
#33ffff
#33ccff
#3399ff
#3366ff
#3333ff
#3300ff
#00ffff
#00ccff
#0099ff
#0066ff
#0033ff
#0000ff
#ffff66
#ccff66
#ffcc66
#cccc66
#ff9966
#cc9966
#ff6666
#cc6666
#ff3366
#cc3366
#ff0066
#cc0066
91
91
Background-image:
Takođe može se upotrebiti slika za pozadinu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Sadržaj ...
</body>
</html>
body { background-image: url("image.gif") } će koristiti "image.gif" za pozadinu.
Naravno to može biti i neki drugi fajl s nekom drugom extenzijom npr. "image.jpg". Pri
upotrebi slika za pozadinu možete iskoristiti dosta trikova u
CSS-u. Pogledajte sledeći style element.
UOČITE :
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
U jedan style element može se staviti više atributa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Sadržaj ...
</body>
</html>
Takođe dopušteno je koristiti i sledeće oblike. Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Sadržaj ...
</body>
</html>
93
93
Ili skraćeni oblik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Sadržaj ...
</body>
</html>
Color
Takođe i boja texta se može promeniti.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 }
</style>
</head>
<body>
Sadržaj ...
</body>
</html>
94
94
body { background:#000000; color:#ffff00 } označava crnu pozadinu i žuti text. Boju
možete promeniti sa color:#ffff00 atributom. Dozvoljeno je i
upotrebiti background:black; color:yellow .
VEOMA VAŽNO :
U svakom style elementu koji definiše boju pozadine definišite obavezno i boju texta.
To vredi i obratno. Pa npr. background: i color: bi trebali uvek ići zajedno. To je
ujedno i preporuka W3C standarda.
Color vrednosti određene u body style elementu uticaće na ceo dokument, tj. celi
text u HTML dokumentu koristiti će tu boju. Takođe možemo upotrebiti različite 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//DTD HTML 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 takođe je moguće. Pretpostavimo da želite sve
header-e i italic text u istoj boji.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 našem HTML dokumentu, ali im želimo pridružiti različite 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//DTD HTML 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 definiše class ispred MORA biti tačka (.). Naziv class-a može biti bilo
kakav. Taj naziv će se kasnije upotrebiti u HTML tagu i MORA biti isti kao u Style
Sheet-u! Dakle, ako defininišite class:
.yellow { text-color:yellow; background:#000000
} onda MORATE upotrebiti: <h1 class="yellow">
NAPOMENA 2:
Jednom kada definišite class možete ga upotrebiti u različitim tagovima!.
Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 može primeniti i samo na jedan class element . Primer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 sličan class selectoru. Jedina razlika je da ID mora ispred imati # u style sheetu dok HTML tag mora sadržavati "ID".
Primer 10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 definišite ID ispred MORA biti znak # . Naziv može 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 određuju kako će
linkovi u dokumentu izgledati.
Primer 11 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 } posećeni 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 takvom redu!
NAPOMENA 2:
Takođe može 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 određuju veličinu 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 izražene u jedinicama ili procentima.
Apsolutne vrednosti mogu biti:
em (font veličina odgovarajućeg fonta)
ex (visina od slova x odgovarajućeg fonta)
px (pixel)
in (inche)
cm (centimeter)
mm (millimeter)
pt (point)
pc (picas = 12 points)
Nemojte da vas ovo sve uplaši. Slobodno isprobajte sve veličine i koristite onu za
koju smatrate da je najpogodnija.
Procenti se izražavaju pomoću % znaka.
Objasnimo sada pojam margine.
103
103
103
Primer 12 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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//DTD HTML 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; marginleft:25pt }
</style>
</head>
<body>
<p>neki text</p>
104
104
104
</body>
</html>
izgleda ovako:
neki text
NAPOMENA :
Postoji i skraćeni oblik p { margin-top:25pt; margin-right:25pt; marginbottom:25pt; margin-left:25pt }.
Na ovaj način: p { margin:25pt } . U ovom slučaju sve margine će biti 25pt.
Ostale mogućnosti su:
p { margin:25pt 30pt } označava top & bottom 25pt - right & left 30pt
p { margin:25pt 30pt 35pt } označava top 25pt - right 30pt - bottom 35pt -left
30pt
'padding-top', 'padding-right', 'padding-bottom', 'padding-left' i
'padding'
Padding određuju dimenzije padding područja .
Primer 14 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 područje je udaljenost između ruba crvenog pravougaonika i
pravougaonika unutar kog je sadržaj.
NAPOMENA:
Skraćeni oblik je sličan kao za marginu
h1 { padding-top:20px; padding-right:20px; padding-bottom:20px; paddingleft: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 određuje 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 određuje izgled okvira. Vrijednosti su: none, hidden, dotted,
dashed, solid, double, groove, ridge, inset, outset.
106
106
106
Border color: 'border-top-color', 'border-right-color', 'border-bottom-color',
'border-left-color' i 'border-color'
Border-color određuje boju.
Isprobajmo sada sve border style elemente:
Primer 15 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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//DTD HTML 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 }
</style>
107
107
107
</head>
<body>
<h1>Header</h1>
</body>
</html>
Dobićemo:
Header
5.5 Font
font-familija
Font-family style element omogućava izmenu fonta na web stranici.
Primer 17 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 }
</style>
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 različiti fontovi: Verdana, Arial, Times New
Roman, Serif. Nije potrebno koristiti više od jednog fonta no dobro je font- family
attribut završiti sa "generic" family.
"generic" family može biti: serif, sans-serif, cursive, fantasy ili monospace. Ako
browser pročita 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 računaru, browser uzima naredni, Arial itd. Ako ne nađe niti
jedan, upotrebiti će "generic" font koji je u normalnim okolnostima uviek
prisutan na računaru. Zato je preporuka uvek završiti sa "generic" fontom.
NAPOMENA 2:
Fontovi u čijem nazivu postoje razmaci (više od jedne reči) moraju se staviti u
navodnike: npr. 'Times New Roman', 'Book Antiqua'.
font-style
Ovaj style element ima 3 moguće vrednosti: normal, italic ili oblique (normal ili italic
se najčešće koriste).
Primer 18 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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>
Dobićemo:
Header 1
Ovo je neki text
Header 2
font-variant
Ovaj style element ima 2 moguće vrednosti: normal ili small-caps.
Primer 19 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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
Moguće vrednosti: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 |
500 | 600 | 700 | 800 | 900 |
Primer 20 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 vašem browseru će izgledati ovako:
111
111
111
neki bold text
ovo je light text
font-stretch
Moguće vrednosti: normal | wider | narrower | ultra-condensed | extracondensed | condensed | semi-condensed | semi-expanded | expanded | extraexpanded | ultra-expanded |
NAPOMENA :
Ovaj style element radi samo ukoliko određeni font-family podržava ove
vrednosti.
font-size
Omogučava promenu veličine fonta. Moguće vrednosti:
apsolutne: [ xx-small | x-small | small | medium | large | x-large | xx-large ]
relativne: [ larger | smaller ]
daljina
procenat
Primer 21 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 određuje uvlačenje prve linije texta u bloku. Vrednosti su:
daljina ili procenti.
Primer 21 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 uvučen za 30 pt-a</p>
113
113
113
</body>
</html>
Izgleda ovako:
ovaj text je uvučen za 30 pt-a
text-align
Ovaj style element koristi se za poravnanje texta. Moguće vrednosti: left | right
| center | justify
Primer 22 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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
Određuje dekoraciju texta.
Vrednosti none | underline | overline | line-through | blink
Primer 23 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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//DTD HTML 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 reči imaju razmak od 20 pixel-a</div>
</body>
</html>
Daće:
sv a
sl ov a
ima j u
ra z mak
5
p o int - a
sve reči imaju razmak od 20 pixel-a
text-transform
Ovaj atribut kontroliše velika i mala slova.
Vrednosti: capitalize | uppercase | lowercase | none
Primer25 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 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 reči veliko</p>
<div>SVA SLOVA MALA<div>
</body>
</html>
Vide ćete:
HEADER VELIKIM SLOVIMA
Prvo Slovo Svake Reči Veliko
sva slova mala
15.KASKADNI STILOVI U DREAMWEAVER-u
Već smo videli da Cascading style sheets (CSS) nudi mnogo više kontrole na
izgledom i pojavljivanjem elementa na Web stranicama, tako što implementira niz
pravila koji opisuju ove elemente. Korišćenjem stilova , preventivno sprečavamo da
se pojavljivanje teksta na stranici određuje politikom
117
117
117
preglednika (browser-a) koji prikazuje stranicu. Videli smo da možeme da koristime
stilove za
izgled teksta (boja, veliĉina i stil) za razliĉite naslove, podnaslove,
napomene,tablice itd. Čak i da browser prikaže tekst u drugom fontu, ostala podešavanja
će ostati nepromenjena, odnosno onakva kako ste ih vi definisali.
Konaĉno uz stilove možemo da kreiramo i svoje klase , koje nam praktiĉno
omogućavaju da stvaramo sopstvene tagove.Poćićemo od praznog dokumenta,čiji kod je
prikazan na slici.Kreiraćemo div1 I div2 da vežbamo HTML kod.
atributom class i imenom main_paragraf ,i još jedan div sa atributom ID koji definiše ovaj
paragraf..ID paragram je prvi fudamentalni koncept CSS-a.Drugi isto važan koncept je unutar
body sekcije.Zatim smo ubacili DIV što u prevodu znači kontejner<div> i na kraju
</div>.Vidimo da svaki div ima svoju indentifikaciju.Ako pređemo u design
Pogled(slika ispod)vidimo dva diva:
118
118
118
prvom piše Hallo World i u
statusnoj liniji liniji<div#part_1>.Ako kliknemo na prostor drugog diva<div#part_2>označićemo
drugi div.
Sada ćemo se pozabavi hederom ,prvo smo stavili naslov CSS title i dodali stil.Zatim smo 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 našem slučaju body i
2. DEKLARACIJA koju ubično dele na dva dela:SVOJSTVO(backgraund- color) i SAMU
VREDNOST (value “3CF)
Body {backgraund-color:#3CF;}
Definisaćemo css stilove zadivove part _1 i part _2.,što se vidi u 8 i 9-om redu 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 može videti na slici ispod:
120
120
120
IZRADA WEB STRANE
Vratićemo se na naš sajt.Predhodno smo uveli nove stilove u dokument i pokazali kako
se menja pozadina,poravnjanje i slično.Ako se vratimo na matičnu stranu našeg sajta i uđemo
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 nađemo .conteiner
Po unošenju promena za širinu 800px promenom boja iz paleta boja koji sam otvara
program, uzeli smo boju #6F6,stranica menja svoju pozadinu.
121
121
121
To međutim ne znači 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.Otvorićemo 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.
.
Vratićemo se na home page stranicu.Ako uđemo u Code pogled, vidimo celu sekciju za
STILOVE!Pošto nam više neće trebati obrisaćemo je.
123
123
123
Pređimo sada na drugu stranicu New Arrivals.Ako selektujemo u kodu sve od style title do
kraja završno sa >/head> i obrišemo, pa uđemo na MODIFY>CSS otvoriće se panel u kome
pritisnemo ikonicu Attach External Style Sheet.Pronađemo svoj stil sa browse u
prozoru i pritisnemo OK.U CODE pogledu vidimo da se pojavio link koji je naša veza sa
našim springpark01.css.,slika iznad,selektujemo liniju sedam .Ako se vratimo u Design pogled
vidimo da jer STIL delovao na stranicu sa svim našim postavkama iz CSS-a-To sada treba uraditi i
sa ostalim dvema stranicama.
Ostale dve stranice istim postupkom dobijaju svojstva našeg stila,kao i dve predhodne.
ZAKLJUČAK :U ovom postupku vidimo smisao CSS kaskadnog stila.Pošto smo napravili novi
eksterni CSS springpark01.css i primenili ga na HOME stranicu, morali smo postupak da
ponovimo za svaku stranicu zasebno.Ne postoji način 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.IZRADA NOVOG CSS PRAVILA ,
Ova pravila koja pravimo važiće za tabele,mada mogu važiti za slike,tekst I td..Ako u CSS
panelu kliknemo na dugme New CSS Rules dobićemo prozor koji smo popunili kao na slici,zatim
kliknemo OK.
Pošto smo kliknuli OK dobićemo novi prozor:
125
125
125
Tablica ispod je modifikovana, a u CSS panelu pojavilo se info_table.Klikom na ovaj stil vidi se
koje su promene uvedene.Ako želimo da napravimo klasu idemo na split pogled
,kliknemo na tabelu i obrišemo sve u redu gde su osobine za Weight i Border i na tom
mestu dodamo CLASS=”,pojaviće se padajući 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.KORIŠĆENJE SPRAY MENIJA
SPRAY vidžet je sastavni deo ovog programa i napisan je u JAVA SCRIPTU.Pomoću ovog programa
napravićemo nov izgled linkova i posle toga proveriti da li oni rade.Ovo možemo raditi za svaku
stranicu zasebno,ili kada napravimo linkove za jednu stranicu,samo treba kopirati i ubaciti Code u
Java script na pravo mesto.,ili raditi ponovo sve ru;no,kako je rađeno u našem primeru.
127
127
127
Prvo u izvornom kodu obrišemo deo programa od sidebar1 do kraja .,ili predhodno
selektujemo linkove a program će sam u code pogledu označiti deo koji se odnosi na
linkove.Zatim idemo na Insert>Spray>Spray menu bar.Prvo moramo da otvorimo novi
folder,kliknemo dva puta na Spring park- glavni folder u CSS panelu, i otvorimo novi folder
Spray Assets,i sada treba sačuvati ovaj folder sa:Manage Site>Edit>Advance
settings>Spray pronađemo folder u pu
Vidimo da se Spray meni bar se pojavio u CSS panelu
tanji>Save >Done
Pojavio se nov meni linkova na stranici, a u Prosperiti baru i boksovi za uređenje
linkova,gde možemo dodati novi link,ili neki ibrisati sa navigacijom ,koja ide uz
njega.Linkovi koji imaju strelicu desno,pokazuje da se na njih može dodati sub link.
128
128
128
Izgled Prosperiti bara u kome smo podesili prvi link je ovakav,item 1,2,3 ,uklonimo sa
minusom -;sa plusom dodajemo nove pod linkove.
Međutim stranica 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.Sledeći korak je srediti prostor oko Spray menija.,što će nam
pomoći Prosperiti inspector.!
129
129
129
Da bi uklonili oker boju okolo, koristićemo Prosperiti Inspektora sa klikom Live>Inspect i
pređemo mišem preko te površine.U CSS panelu u delu Prosperities u jednom redu prikazana
je oker boja.Selektujemo taj red i dilitujemo,dobićemo novi izgled oko linkova,slika dole.
Program će automatski( jer imamo externel CSS pravila) napraviti izmene i u ostalim
stranicama.Sad nam predstoji da sredimo izgled dugmadi u Spray baru.Ponovo pređemo u LIVE
uključimo 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,pređemo u SPLIT pogled,a na kartici CSS panela uđemo u All i
čekiramo Meni Bar vertical a,zatim promenimo boju u #096.Automatski sa Save all,čuvamo
promene istog i sada na svim stranicama imamo uređen bar.
130
130
130
Sada nam predstoji da uklonimo logo jer želimo sliku preko cele dužine, a to je 960
px.Logo se uklanja tako što se obeleži,uđe se u SPLIT pogled i dilituje taj script.
Pošto 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 otključamo bravicu pa podesimo širinu na 960.Kada kliknemo na visinu program
automatski podešava visinu. Od oko 200px,međutim slika je razvučena I loše je revolucije.Za to
nam je potrebna slika rezolucije 3500*700px,a ako je nemamo može se odabrati odgovarajuća
baner slika recimo 960*200,što je kasnije i urađeno.Ova slika baner- ispod je privremena,jer ne
izgleda kako bi mi želeli.
131
131
131
Kod uklanjanja loga važno 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 tačno NA MESTO OD KOGA DILITUJEMO SCRIPT!Isto važi i za druge tagove,mada
isto to možemo raditi i ručno.Uvek, ako se nešto pogreši imamo EDIT>UNDO,ili korišćenje
HISTORY PANELA,o čemu je bilo govora ranije.
18.VALIDACIJA I PROVERA LINKOVA
Da bi proverili linkove idemo na Windowss>Results>Link Checker.Pojaviće se nov pano na dnu
na kome ima više opcija.Ako kliknemo na link checker i zatim pritisnemo malu zelenu strelicu
levo u vrhu ,dobićemo koji su linkovi na kojoj strani prekinuti.
132
132
132
Vidimo da je na matičnoj strani u pitanju link koji vodi do New Arrivals, a sa nje na Wikipediju,
pritiskom na link na toj strani.Kada kliknemo na broken links pojaviće se fascikla u kojoj treba
da odredimo novu putanju i problem je rešen.Zatim se ovo ponovi za svaku stranicu.Provera
linkova je veoma važna ,jer kada uplodujemo sajt na server
,najveći problem je da ne radi neki link!Sledeći korak je validacija.Ako kliknemo na Validation
dugme I zatim na zelenu strelicu gore desno -pojaviće se šta u KODU nije dobro.Grešku treba
ispraviti za svaku stranicu.U našem slučaju postoji problem u 16 redu koda.
Prijavljeno je da je potrebno da se atribut alt specificira.Uđemo u kod i u redu 16
ispravimo grešku.Isto se treba ponoviti za svaku stranicu.Zatim je potrebno izvršiti
proveru sajta sa Site>Reports
Čekirali smo potrebne provere I WRC centar šalje izveštaj.Važan je na kraju i izveštaj Clean
up HTML,koji će sam izvršiti potrebna čišćenja i potom dati izveštaj.Ovo se radi komandom
Commands>Clean up HTML
133
133
133
Pre postavljanja sajta, ako imate hosting uplaćen možete testirati sajt,ali o tome će biti reči
kasnije.
/IZRADA WEB STRANICE
19.IZRADA FORMULARA .
HTML Forme
HTML forma je deo dokumenta koji u sebi može da sadrži elemente forme kao što su razna
polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl.
Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>. Evo
jednog jednostavnog primera forme koja sadrži dva elementa:
<form>
<input>
<input>
</form>
U pretraživaču bi to izgledalo ovako:
Tag <form> i tagovi <input> mogu imati niz atributa koji ih bliže definišu.
Primer:
<form>
Ime :
<input type="text" name="ime">
<br>
Prezime:
<input type="text" name="prezime">
</form>
134
134
134
U pretraživaču će to izgledati ovako:
Ime
:
Prezime:
Tag <input> se koristi i za definisanje dugmića (buttons) koji imaju različite 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 način prikazan u sledećem primeru:
<form>
<input type="button" name="dugme" value="Start" onClick="Akcija">
</form>
Ovako bi to izgledalo u pretraživaču:
Radio dugme
Radio dugme se koristi kada želite da pravite izbor između malog broja opcija , kao u
sledećem primeru.
<form>
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 pretraživaču::
Muski
Zenski
Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme.
Checkbox dugme
Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjeg skupa
kao što to pokazuje sledeći 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 pretraživaču: Šta
sve imam?
Imam bicikl:
Imam auto :
Imam avion:
136
136
136
Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku od radio
dugmića gde birate samo jednu opciju).
Slanje sadržaja forme serveru
Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa
"submit" a u tagu <form> se dodaje atribut "action" kojim se definiše koji će program na
serverskoj strani preuzeti poslate podatke. Atributom "method" definiše se metod slanja
podataka koji može 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 pretraživaču:
Korisnik:
Submit
Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraživač će poslati
vaš podatak serveru na kojem će se aktivirati program login.asp koji će preuzeti poslati
podatak i sprovesti odgovarajuću akciju.
IZRADA WEB STRANICE
137
137
137
20.IZRADA FORME U DREAMWEAVERU -Ubacićemomo formu sa
imenom,telefonom,emailom,komentom i dugmetum potvrdi(submit).Prvo treba ubaciti
Tabelu, jer pomoću nje je bolji dizajn i izgled ubačene forme.Kada se ubaci tabela
kliknite na strelicu leve kolone ,pa column left i centrirajte je udesno pomoću ikone align right
na Prosperiti baru.Zatim to isto uradite sa desnom kolonom ,samo nju centrirajte ulevo.Kliknite
u prvu ćeliju pa Insert>Form>Insert text field
Za ID upišite name,za Label Name
138
138
138
Za telefon izaberite text field za ID ipišite 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.U petoj ćeliji
insert>form>butons OK,pojaviće se dugme submit.Pošto se i ime i polje smešteni u celoj
ćeliji,selektujte Name belo polje prevucite u susednu desnu ćeliju kada se pojavi roze blinker
u toj ćeliji.otpustite miša..To isto uradite i sa ostalim poljima.
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- upišite anything
Phone-number
Email-email addres
Coment-anything
Pređite na vaš pretraživač da vidite da li forma deluje.Ako ne ubacite ništa dobićete poruku šta
je potrebno,a kada pritisnete submit automatski će biti izbrisana sva polja I spremna za novi
unos.
21.UBACIVANJE MULTIMEDIJA
Dreamweaver lako unosi Flash fajlove,muzičke i video fajlove,pri čemu program sam
usklađuje atribute,koji određuju 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 čitačima.Takođe ove fajlove koriste i Flash
buttons o Flash tekst.
3.Fajlovi sa ekstenzijom .flv(Flash video fajlovi) sadrže enkodirane audio i video podatke koji
omogućavaju 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.Program edituje fajl sa ekstenzijom .swf ili
.flv,sačuvajte video fajlove a, kasnije ih možete 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 slučaj recimo sa slikom.
Da biste videli kako izgleda film zajedno sa sadržajem stranice kliknite na sliku iznad I
pojaviće 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 može kontrolisati podešavanje Flash filmova.U
levom gornjem uglu prikazuje se tip fajla i veličina ,a program sam ubacije ID, i to Flash ID.Ovo je
polje editabilno tako da možete da upišete i svoj ID.Ostale opcije su:
Weght I Haight-širina i visina ubačenog objekta u pikselima.
File-ovo polje prikazuje putanju do swf objekta.
Src-ovo polje pokazuje lokaciju originalnog .fla fajla koji je korišćen pri kreiranju swf
objekta.
Bg-Ova opcija unosi parametar u <object>Tag i podešava 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-Omogućuje da primenite CSS klasu na<object> Tag
Loop-Ova opcija vrti film neprekidno,po završetku počinje ponovo.
Autoplay-Film se automatski pokrećr kada se Web stranica prvi put pokazuje.
V Space i H space-Ova opcija postavlja vertikalan i horizontalan prostor oko filma,ove
atribute je poželjno dodeliti preko CSS fajla.
Quality-Ova opcija kontroliše izgled filma za vreme plejbeka,pri čemu postoje sledeća
podešavanja:
High-Određuje najbolji kvalitet filma,ali troši resurse
AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali žrtvuje izgled ako je
potrebno više brzine.
Low-Selektujte ovu opciju ako vam je značajnija brzona od kvaliteta.
AutoHigh - Ova opcija daje prioritet u izgledu i brzini, ali žrtvuje izgled ako je potrebno više
brzine
o AutoLow - Prioritet je na brzini, ali kad god je moguće popravlja kvalitet filma
 Scale - Određuje 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 pružaju preko podešenih W i H dimenzija su
isečeni.
o Exact Fit - Zbija film u specificirane dimenzije bez obzira na originalnu veličinu filma.
 Align - Određuje poravnanje filma relativno u odnosu na stranicu.
 Wmode - Ova opcija postavlja Wmode filma u prozoru čitača, što preventuje konflikte sa
DHTML elementima kao što su Spry Widgets. Postoje sledeće opcije:
o Window - Forsira swf iznad svih elemenata stranice.
o Opaque - Difoltna opcija, dozvoljava DHTML objektima kao što su na primer padajući 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 drugačiji od regularnog swf objekta jer ima .flv ekstenziju što vam
omogućava 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
omogućava da unesete .flv fajl bez korišćenja Flash aplikacije i omogućava da Web čitači
pokrenu unešeni video sa prikazanim playback kontrolama. Otvoriće se Insert FlV dijalog boks sa
malo drugačijim opcijama u zavisnosti ,da li za Video Type birate Progressive Download ili
Streaming Video.
144
144
144
Klikom na browse pronađemo ž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 učitavanju strane čekiramo Auto
play.Pritisnemo OK i na stranici će biti ubačen video fajl.
/IZRADA VEB STRANIVE
22.CODE INSPECTOR,CODE TOOLBAR I HINT
Code Inspector možete otvoriti tako što ćete izabrati Windows>Code Inspector dugme iz menija
aplikacije,a takođe i prečicom F10 sa tastature. Code Inspector vam omogućava da vidite tekući
kod stranice u posebnom prozoru.
145
145
145
Dostupne opcije su većinom opcije koje takođe postoje u prozoru Code prikaza
dokumenta.
1.Coding Toolbar.
Po difoltu Coding Toolbar je prikazan na levoj strani dokumanta u Code prikazu stranice. Takođe
je dostupan u Code Inspector-u i nalazi se isto na levoj strani prozora. Coding Toolbar se ne
može otkačiti i premestiti na neko drugo mesto, ali se može isključiti preko opcije View>Toolbars->Coding.
U Coding Toolbar-u postoje sledeće opcije:

Open Documents - Kada kliknete na ovo dugme, izlistaće vam se svi trenutno otvoreni
dokumenti zajedno sa njihovim putanjama. Ovo je korisna opcija ako imate više otvorenih Fileova sa istim imenom, pa preko putanje možete lako odrediti koji je File. Klikom na njega on
postaje dostupan. Nije više potrebno da pogađate File.
 Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za
prikazivanje liste CSS pravila koja su primenjena na selektovani element na stranici
zajedno sa detaljnim kodom koji dobijate u vidu Pop up prozora kada pređete mišem preko
određenog pravila. Kada kliknete na neko od pravila u Code Navigator-u, otvara vam se CSS
File sa postavljenim kursorom tačno na početak 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 proširili 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, vitičastih
zagrada i ugaonih zagrada.
Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija u Code prikazu.


Highlight Invalid Code - Dreamweaver ističe žutom bojom nekorektno ugnježdene Tag- ove.
Ovo dugme uključuje/isključuje žutu boju u Code prikazu. Difoltna opcija je OFF.


Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute trake na vrhu
prozora dokumenta. Ovo dugme uključuje/isključuje ovu opciju.


Apply Comment Tag - Ova opcija omogućava unos različitih tipova Comment
tekuću liniju ili selekciju.
Tag-ova u




Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz tekuće linije ili
selekcije.
Wrap Tag - Ova opcija omogućava brz način za primenu Tag-a oko tekuće selekcije.



147
147
147
Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippet-i iz Snippets
panela.
Move or Convert CSS - Ova opcija omogućava 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 pomoću kojih
možete da primenite difoltno formatiranje na stranicu ili trenutno selektovan kod, zatim imate
brz pristup kategoriji Code Format u Prefernces panelu. Tag Library Editor vam omogućava
kontrolu nad formatiranjem svakog HTML elementa u vašem 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, otvoriće se sadržajni
meni i prikazaće vam sve validne HTML Tag-ove. Možete skrolovati dole da biste pronašli
odgovarajući Tag i dvoklikom na njega uneti ga u kod dokumenta. Druga opcija je da nastavite
sa kucanjem, na primer ako unosite div Tag, ukucajte
slovo d zatim i, selektovaće 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, otvoriće se drugi Context meni, samo što će ovog puta
prikazati sve validne atribute za tekući element. Ako unosite ID elemente, Dreamweaver će
uneti id=““ i postaviti kursor između 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 možete da izaberete. Context meni nastavlja da se pojavlju sve dok ne zatvorite ugaonu
zagradu. Ako se slučajno ovaj meni izgubi, pritisnite Ctrl + Spacebar da bi se opet pojavio.
149
23.BEHAVIORS(PONAŠANJA) .
Instalacija Dreamweaver-a dolazi sa oko 20 predinstaliranih ponašanja (engl. Behaviors) koje
možete da koristite kako biste ugnjezdili Client Side Java Script kod u vaš dokument. Većina ovih
skripti dozvoljava korisniku da interaguje sa sadržajem na vašoj stranici. Behaviors su tipično
sastavljeni od događaja i akcija, koje pokreću te događaje.
Behaviors se mogu dodati na Web stranicu koristeći 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 Dreamweaveru CS6 Behaviors panel je ugnježden 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 nešto više o već primenjenim ponašanjima, selektujete element ili Tag na koji je
primenjen Behavior na Web stranici, i on će se pojaviti u listingu Behaviors panela. Kada se
događaj sastoji od više akcija, one su izazvane prema
redu u kome se nalaze na listi. Tipično Behaviors su pridodati Tag-ovima za tekst, slike, ali
možete 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 ponašanja.
Dva faktora utiču na to koja će ponašanja 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 Show Events For. Čitač koji je
selektovan određuje koji su događaji podržani i prema tome prikazuje akcije koje su
dostupne.
151
151
151
1.Kako se dodaje Behavior (ponašanje)
Dodavanje Behavior-a elementu u Dreamweaver-u je prilično jednostavno i sastoji se iz
nekoliko koraka. Najkraće rečeno, 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 vašim potrebama.
Editovnje i brisanje Behavior-a se vrši u Behaviors panelu desnim klikom miša na
Behavior.
2.Drag AP Element Behavior
Ako koristite AP Div slojeve na vašim Web stranicama, postoji jedan interesantan Behavior Drag
AP Element koje omogućava da posetioci Web sajta pomeraju i repozicioniraju ove slojeve u
prozoru čitača. Ovo je odličan Behavior koji može da se iskoristi u kreiranju interaktivnih igrica, i
drugih interfejs kontrola. Ovo ponašanje omogućava da korisnici vuku slojeve gore, dole, levo,
desno i dijagonalno u prozoru čitača. Pored ostalih stvari možete i postaviti ciljnu destinaciju za
sloj i odrediti da li će se taj lejer privuću cilju (Snap to target) prema specificiranom broju
piksela.
Da biste dodali ovo ponašanje na vašem 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. Otvoriće 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 određujete da li
će pomeranje biti ograničeno (kada želite da kontorlišete kretanje) ili neograničeno (kod puzli i
igrica na primer). Ako izaberete Constrained tj. ograničeno, 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 čitača.
Snap if within _ Pixels of drop target je opciono polje, ali možete uneti vrednost u pikselima ako
želite da se lejer privuče za već
određenu krajnju destinaciju, kad se približi za unetu vrednost u ovo polje. Na primer, ako
uneste 10 px u ovo polje, i krenete da vučete lejer po stranici, kada se približite na 10 px od
krajnje pozicije, lejer će se automatski privući
U Advance tabu možete postaviti dodatne parametre i pozvati JavaScript za sloj.
Advance kartica:
Postoje sledeće opcije:



153
153
153
Drag handle - Po difoltu je selektovana opcija Entire element što znači da se ceo sloj ponaša kao
ručica za povlačenje. Ako želite da samo jedan deo sloja predstavlja ručici za povlačenje,
unesite kordinate u pikselima u polja Left, Top, Width, Height
While dragging Bring the element to front, then...
Ako čekirate ovu opciju, dok povlačite sloj preko prozora čitača, možete 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 izvršavati dok se sloj
povlači.

 When dropped Call Java Script - Unsite kod za dodatni JavaScript koji će se izvršiti kada sloj
dođe do ciljne pozicije ili kada se pusti
 .
 Only if snapped - Ako je ova opcija čekirana, Java Script se izvršava jedino kada sloj stigne
do ciljne pozicije.
Kliknite na OK da biste sačuvali promene i zatvorili Drag AP Element dijalog boks.
3.Rollover Image
U ovoj lekciji upotrebićemo posebne skriptove. Da bi napravili rolover sliku na
izabranom mestu na strani pritisnite dugme Rollover Image na traci Common
panela Insert. Otvoriće se prozor Insert Rollover Image
Daćemo 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č miša iznad nje.
2. Zatim treba da unesete sliku koja će se pojaviti kada posetilac pređe pokazivaĉem preko
originalne slike (dugme Browse do polja Rollover Image).
Savet: Slika koja se pojavljuje na poĉetku i ona koja je zamenjuje treba da imaju iste dimenzije,
inače ćedruga slika biti smanjena ili uvećana u skladu s dimenzijama prve slike i zato
izobličena. Zato ove slike treba da budu jako sliĉne a opet dovoljno različite da korisnici uoče
prelaz. Možemo i odmah definisati link unoseći u polje 'When Click, Go To URL' URL adresu.
Ako ne upišemo ništa u ovo polje, Dreamweaver će upisati znak #, u polje link na panelu
Properties. Taj znak saopštava browseru da pokazivaĉ miša 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 moguće je i slici koja je već na strani dodati prelaze
i to pomoću 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. Pojaviće se prozor Swap Image gde u spisku Images treba izabrati sliku koja će biti
zamenjena (original). Izuzetno je važno slikama dati odgovarajuća imena, u suprotnom
kako ćemo između bezimenih slika izabrati onu koja nam treba?. Sada pritiskom na
dugme Browse do polja Set Source to: izabraćemo sliku koja će zameniti originalnu.
Uobičajeno je (radi lakšeg snalaženja) imenu početne (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
pridružen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload Image i
Restore Image onMouseOut obavezno potvrdite. Opcijom Preload Image obezbeđujemo da
se slike uĉitaju bez obzira da li su prikazane na stranici i tako eliminišemo kašnjenje koje bi
uzrokovalo uĉ itavanje zamenske slike tek kada
posetilac pređe preko originalne. Opcijom Restore Image onMouseOut
obezbeđujemo da se zamenska slika zameni poĉetnom kada se smakne pokazivaĉ miša
izvan slike.
5. Pritisnite OK.
Kad selektujemo slike u panelu Behaviors vidi se spisak akcija - Actions koje izvršava
Dreamweaver, u zavisnosti od određenog događaja – Events u browseru posetioca. Na
primer, Swap Image je akcija, a on Mouse Over je događaj.
IZRADA WEB STRANICE
24.POSTAVLJANJE SAJTA NA SERVER .
Provera sajta na Testing serveru .
155
155
155
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 smešteni na našem
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 mrežu i pratili putanju u Root direktorijumu
doSpring _Parka imena našeg sajta
.
157
157
157
I pritisnemo Save.Na prozoru iznad čekiramo Testing server.
Sledeći korak je prikazan na File Panelu gde pritisnemo Put file to”Testing server”.i program će
sada kopirati fajlove:
na server.Pre toga treba selektovati ceo sajt kao na slici gore,jer možemo preneti i svaki fajl
pojedinačno.U našem slučaju prenećemo Site-Spring Park(C:.Po završetku transfera na
Testingserveru videćemo:
:
Izveštaj kao na slici koji pokazuje da
158
158
158
su fajlovi preneti na server za testiranje.Ako otvorimo IE browser i ukucamo gornju adresu
,otvoriće 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, pošto predhodno kupite domen,i uplatite za hostovanje.Besplatan hosting može se
naći i na Internetu,kao što je urađeno u ovom slučaju.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 određene provere.Prva je check spelling.Proveru možemo vršiti za
ceo sajt ili za neku stranicu.Pošto su naši sajtovi na srpkom jeziku izostavićemo 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 rešimo problem.Zatim treba proveriti Browser
Compapability ,odnosno šta će prijaviti program.Kada se sve ovo odradi, predstoji
publikovanje fajlova na Internet.Uđemo na File panel.
160
160
160
Da bi dobili File Panel prikazan na ovaj način u desnom gornjem uglu File Panela je dugme,koje
pritisnemo i dobijemo New>Expand,panel će sada biti prikazan sa desnim sadržajem,a levo
neće biti ništa.Sada se pritisne ikonica Remote server,i onda ikonicu Conect Remote Server i
fajlovi se prebace na server,što se može 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 sadrži
fajlove koji su bitni za rad sajta ,a drugi pruža mogućnost da administrator proveri koliko je
posetilaca postilo određeni sajt.Sada selektujemo naš sajt Spring_Park i pritisnemo strelicu kao
na slici-
161
161
161
Posle izvesnog vremena fajlovi su prebačeni na Remote server,i sada je vreme da se pogleda
kako sajt izgleda na Internetu.Ovo je izgled Home stranice sa početka 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 pretraživačima.
Ovako izgleda druga
stranica:
Ovako izgleda treća
stranica:
Ovako izgleda četvrta
stranica:
163
163
163
/IZRADA WEB STRANICE
DODATAK:
U matrijalima za izradu kursa DREAMVEAVER CS6 Korak po korak korišćen 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 može koristiti.Autor takođe
164
164za Srbiju) na saradnji!
zahvaljuje i ADOBE Koorporaciji(predstavništvo
164
Download

DREAMWEAVER CS6- Korak po korak JELINEK ZORAN