Dreamweaver cs6 korak po korak

1

DREAMWEAVER CS6- Korak po korak

JELINEK ZORAN

2

SADRŽAJ:
1.Dreamweaver-korak po korak
2.Sadržaj
3.Html programski jezik
4.Rad sa frejmovima u Html-u
5.Programski paker 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 forme i validacija forme
20. Izrada formi u DW CS6
21.Ubacivanje multimedijalnih sadržaja na stranicu
22.Code Inspector,Code toolbars i Code hint(upotreba)
23.Kreiranje formulara
24.Behavior(ponašanja)
25.Postavljanje sajta na server

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 govorimo, 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



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



<b>ovaj tekst je okružen bold tagom</b>

<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

<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

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

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

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

(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

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

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.

Ako je vrednost ovog atributa YES granica frejma ce biti
FRAMEBORDER trodimenzionalna, a ako je vrednost NO bice obicna neispupcena
granica.
MARGINHEIGHT

Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od gornje i
donje granice frejma.

MARGINWIDTH

Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od leve i
desne granice frejma.

NAME

Odredjuje referentno ime frejma.

NORESIZE

Zabranjuje korisniku da menja velicinu frejma.

SCROLLING

Ima tri moguce vrednosti: YES - Frejm ce imati Scrollbar, NO - frejm
nema Scrollbar i AUTO - Scrollbar se pojavljuje samo po potrebi.

SRC

URL stranice koja se ucitava u frejm.

5.PROGRAMSKI PAKET DREAMWEAVER

5.1PROJEKTOVANJE 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

elemenata
· Relevantnost – u istu grupu uključiti samo one elemente koji su isti; izuzetii
nebitne elemente
· Označavanje – označiti svaku grupu
Konzistentnost – predstavljati informacije na konzistentan način

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 odreneni
cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi

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 odrenenog
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 odrenenu
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

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)
Svaka od ovih stavki je uspešno primenjena na web lokaciju Fakulteta za
primenjenu
ekologiju Futura.
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

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 pronanena 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

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. Obezbenivanje 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

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; }

5.2 INTERFEJS PROGRAMA DREAMVEAVER CS6
Po pokretanju programa dobija se uvodni ekran ovog orograma ili
Welcome Screan kao na slici.Interfejs se sastoji iz sledećih delova(MENI BAR
,APPLICATION TOOLBAR,DOKUMENT TOOLBAR,STATUS BAR I PANELI)

24

MENI BAR se sastoji iz nekoliko
dugmadi: FILE,EDIT,VIERW,MODIFY,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 sranice 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

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 elemenr 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

U levom delu Status bara nalazi se 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

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

:

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.Ako pogledamo SPLIT pogled ( slika ispod)

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

Da bi promenili naslov u title boxu u test page,mesto heading 3 upisaćemo 2 sa jedne i
druge strane,pritisnuti refresh i ime će se pojaviti u boksu za naslov.

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 ovaj 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.

32

Pre izrade glavnog dizajna potrebno je skicirate želju izgleda stranice :

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

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 protibno deo sadržaja neće prikazati na ekranu uređaja.Tako ako bi želeli

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

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
naslovaDopisati I poslednji paragraf kao na slici ispod.Sada stranica ima prilagođen izgled
našim potrebama i prikazana je na slici ispod.

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

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

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

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

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

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






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


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

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

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.

8.LINKOVI

( link relativne putanje u odnosu na sopstveni sajt)

1.Link sa druge na prvu stranu.

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

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

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 browse 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

..
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

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 napravite 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 smo ubacili tablicu koju smo sačuvali na desktopu kao.txt fajl.Zatim iz menija
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

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

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 i ubacite Hiper link.

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

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 i 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

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 direktno na kraj te stranice na to sidro.

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

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

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

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

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

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

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

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

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

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

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

Po pritiskanju OK pojaviće se prikaz na Sony uređaju.

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

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

(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

</html>

Ovo je mainblock
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-os (horizontalno) i y-os (vertikalno).
<html>
<head>
#mainblock { position:relative; left:100px; top:20px; width:500px; height:200px;
background:#000000; color:#ffffff }
</style>

73

</head>
<body>
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...
<html>
<head>

74

#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>
Ovo je mainblock.
<div id="yellowblock">
Ovo je yellow block.
<div id="greenblock">
Ovo je green block.
</div>
</div>
</div>
</html>
Ovo je mainblock.
Ovo je the green block
Rezultat je:

e

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:
<html>
<head>
#mainblock { position:relative; left:-110px; top:20px; width:500px; height:200px;
</style>
</head>
<body>
Ovo je the mainblock.
</div>
</html>

Dobijamo:

76

This is the mainblock.
Primer 5 .

Clipping layers
Clipping layeri ne znači ništa drugo nego odsecanje dela layera. Primer:
<html>
<head>
#mainblock1 { position:relative; left:0; top:0; width:300px; height:200px;
#mainblock2 { position:relative; left:0; top:10px; width:300px; height:200px;
#yellowblock1 { position:absolute; left:30px; top:50px; width:250px; height:100px;
#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

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:
<html>
<head>

78

background:#00c000; color:#000000 }
</style>
</head>
<body>
Ovo je mainblock.
</div>
Ovo je green block.
</div>
</div>

</html>
Ovo je mainblock.
Ovo je green block.

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.

<html>
<head>
background:#ffff00; color:#000000; z-index:2 }
background:#00c000; color:#000000; z-index:1 }
</style>
</head>
<body>
Ovo je mainblock.
</div>
Ovo je green block.
</div>
</div>
</html>

80

:
Ovo je mainblock.
Ovo je green block.

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

Lada 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
Ako već postoji neki sadržaj na stranici na kojoj želite da postavite sloj,selektujter taj sadržaj I automatski
se otvara nova opcija u Insert Div Tag dijalog boxu:Wrap around selection(ova opcija postavlja div oko .

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 želimomzaokrenuti 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.

83

•

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.

84

•

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…):

85

<!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>

<div id="wrapper">

<div id="header">

<img src="url(slika.jpg)" alt="Naziv sajta" />

<ul id="nav">
<li>
<a href="nav2.html">nav 2</a>
</li>
<li>
<a href="nav3.html">nav 3</a>
</li>
</ul>
</div>

<div id="body">
Slike i tekst
</div>

<div id="footer">
npr. ponovljena navigacija, copyright, godina itd ...

86

</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-

87

Pogledajmo primer:

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
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
sajtova.Postoje još 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

88

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
<html>
<head>
<title>Document's title</title>
</head>
<body>
<p style="style elements go here">
</p>
</body>
</html>
2.Internal Style Sheet
<html>
<head>
style elements go here
</style>
</head>
<body>
Content's goes here
</body>
</html>

89

Deo napisan u boldu je CSS:
style elements
</style>

3.External Style Sheet
<html>
<head>
<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

Background color:
Predefinisana boja pozadine kod većine browsera je bela. No vrlo lako je
možemo promeniti.
<html>
<head>
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

#ffcc66

#ff9966

#ff6666

#ff3366

#ff0066

#ccff66

#cccc66

#cc9966

#cc6666

#cc3366

#cc0066

91

Background-image:
Takođe može se upotrebiti slika za pozadinu.
<html>
<head>
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

U jedan style element može se staviti više atributa.
<html>
<head>
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:
<html>
<head>
body { background-image: url("image.gif");
background-repeat: repeat-y;
background-attachment: fixed }
</style>
</head>
<body>
Sadržaj ...
</body>
</html>

93

Ili skraćeni oblik:
<html>
<head>
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.
<html>
<head>
body { background:#000000; color:#ffff00 }
</style>
</head>
<body>
Sadržaj ...
</body>
</html>

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 .
<html>
<head>
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

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.
<html>
<head>
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

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 .
<html>
<head>
.yellow { color:yellow; background:#000000 }
.blue { color:blue; background:#000000 }
.red { color:red; background:#000000 }
</style>
</head>
<body>

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:
<html>
<head>

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:
<html>
<head>
h1.yellow { color:yellow; background:#000000 }
</style>
</head>
<body>
<h1>Ovaj header nije žut</h1>

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
sheet-u dok HTML tag mora sadržavati "ID".
Primer 10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
#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

</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 .
<html>
<head>

101

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

A:visited { color: blue; background:#000000 } = :visited { color: blue;
A:hover { color: green; background:#000000 } = :hover { color: green;
A:active { color: lime; background:#000000 } = :active { color: lime;

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

Primer 12 .
<html>
<head>
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 .
<html>
<head>
p { margin-top:25pt; margin-right:25pt; margin-bottom:25pt; marginleft:25pt }
</style>
</head>
<body>
<p>neki text</p>

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 .
<html>
<head>

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

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 .
<html>
<head>
h1 { border-width: thick; border-color:#00ff00; border-style:double }
</style>
</head>
<body>
<h1>Header</h1>
</body>
</html>
Prikazat će:

Header
Primer 16 .
<html>
<head>
h1 { border-width: 20px; border-color:#0000ff; border-style:outset }
</style>

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 .
<html>
<head>
p { font-family: Verdana, Arial, 'Times New Roman', serif }
</style>

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 fontfamily 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 .
<html>

109

<head>
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 .
<html>
<head>
p { font-variant:small-caps }
h1 { font-variant:normal }
</style>

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 .
<html>
<head>
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

neki bold text
ovo je light text

font-stretch
Moguće vrednosti: normal | wider | narrower | ultra-condensed | extracondensed | condensed | semi-condensed | semi-expanded | expanded |
extra-expanded | 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 .
<html>
<head>
p { font-size:xx-large }
em { font-size:10px }
</style>

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 .
<html>
<head>
p { text-indent:30pt }
</style>
</head>
<body>
<p>ovaj text je uvučen za 30 pt-a</p>

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 .
<html>
<head>
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

text-decoration
Određuje dekoraciju texta.
Vrednosti none | underline | overline | line-through | blink
Primer 23 .
<html>
<head>
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

Dreamweaver cs6 korak po korak

Dreamweaver cs6 korak po korak

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Dreamweaver cs6 korak po korak

Ähnlich wie Dreamweaver cs6 korak po korak (9)

Dreamweaver cs6 korak po korak