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

3.HTML PROGRAMSKI JEZIK je osnovni jezik za definisanje Web stranice,a
sastoji se iz mnoštva tagova i sadržaja.Tagovi s...
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...
6

Postoje tagovi koji služe za formatiranje teksta.Pomoću njih govorimo, koju funkciju ima
tekst koji se nalazi unutar od...
7


p – paragraf tag – isključivo se koristi kao kontejner za tekst
1



<p>Sadržaj sajta</p>

a – link tag – služi za p...
8


head - head tag služi za definisanje parametara strane i uključivanje eksternih CSS
file-ova i java skripti
1
<head><...
9

<html> tag označava početak HTML programa (koda).
<html> tag se obično postavlja na početak dokumenta, kao prva naredba...
10

<body> i </body> tagovi definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sve
slike i linkovi na druge doku...
11

U HTML, paragraf se označava tagom tag <p> i postavlja se na kraj svakog paragrafa
"normalnog" teksta (pod normalnim s...
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...
13

160px širine,a drugi frejm ima*“ što znači da njegova širina nije ekplicitno određena i da
će zauzeti preostali prosto...
14

(slika sa dva frejma)

Vežba br 1 ,.

Napisati program sa hederom i dve kolone
.
<HTML>
<HEAD>
<TITLE>Primer tri frejm...
15

Prvo smo gornjim frejmsetom izvrsili horizontalnu podelu na dva dela od 15% i 85%
respektivno, a zatim smo donjim frej...
16

granica.
ROWS

Odredjuje broj i sirinu frejmova - redova. Vrednosi se zadaju ili u
pikselima ili u procentima visine s...
17

elemenata
· Relevantnost – u istu grupu uključiti samo one elemente koji su isti; izuzetii
nebitne elemente
· Označava...
18

Podela na grupe
- Potrebno je da se prezentacija organizuje u grupe koje su vidljive
- Vidljiva struktura web prezenta...
19

lako,
omogućavaju korisnicima da bez grešaka i zadovoljavajuće postignu svoj cilj.
Upotrebljivost (engl. Web usability...
20

Pozadina stranice (engl. Page background) – Koristiti jednostavne i blage
pozadine
na stranicama
Opisati svaku sliku –...
21

Iz WAI uputstva proizilazi da je potrebno uvek misliti na to da korisnici mogu da
imaju
ograničenja u radu drugačija o...
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 od...
23

obavezno treba uz pomoć CSS dokumenta odrediti boje i teksta i pozadine.
Kod za pozadinsku belu boju: html { backgroun...
24

MENI BAR se sastoji iz nekoliko
dugmadi: FILE,EDIT,VIERW,MODIFY,FORMAT,COMMANDS,SITE,WINDOWS i
HELP .Pogledati sadržaj...
25

2).SPLIT prikaz se koristi da bi se istovremeno videli i kod stranice i dizajn stranice
u dva prozora,a može se podesi...
26

U levom delu Status bara nalazi se Tag selector<body> koji nam omogućuje da
selektujemo sadržaj određenog taga.U desno...
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 prika...
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 ...
29

Tekst Hello World možemo formatirati, jer se uključio Prosperiti Inspektor.Za
format levo,možemo staviti Heading 1,2 i...
30

Da bi promenili naslov u title boxu u test page,mesto heading 3 upisaćemo 2 sa jedne i
druge strane,pritisnuti refresh...
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 j...
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 fut...
34

Ovo je konfiguracija koja nam odgovara naručiocu projekta ,i sada treba pristupiti
ispunjavanju sadržajem(content).Pre...
35

da stranicu rendiramo u recimo smart phonu rezolucija bi bila 320x480px

Ova podešavanja nam omogućuju alatke iz START...
36

Sada to isto treba da uradimo i sva dva ostala paragrafa.U split prikazu stavimo kursor
iza <p> taga u CODE prikazu ko...
37

Sada možemo srediti sajd bar i isprazniti njegov sadržaj.Uradićemo to opet u SPLIT
prikazu u delu za CODE pogled.Selek...
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....
39

7.IZRADA TEPMLETA(ŠABLONA) I NJEGOVA PRIMENA ,
Stvaranje template stranice pomoći će nam da takvu stranicu,tzv.šablon ...
40

prazan prostor na kome treba formirati stranicu.

HTML tagovi sami po sebi ne donose mnogo mogućnosti za izgled same s...
41

Vežba br.2 ,
Kreirati stranicu u HTML-u sa hederom,futerom i dve kolone
<div style="width:960px;">
<div style="border:...
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 napr...
43






border – ovaj stil željenom elementu daje borduru i piše se: border:1px solid
red; gde je 1px debljina linije,...
44


4.Kreirajte etabilni region tako što će te u meniju izabrati Insert>Templete
object>Editibilan region



Ovi region...
45

stranu.,koja je prikazana na slici icpod(header,footer,levi sajd bar i glavni deo).

Sačuvamo šablon kao template 1.Mi...
46

ALATI ZA RASPORED STRANICE

Glavni alati za raspored elemenata na web stranici su <frame>, <table>, i <div>.
Okviri (e...
47

.

u

Drugu stranu New Arrivals stranu prikaži u SPLIT pogledu:selektovan je kod koji
odgovara hiper linku.Svaki hiper...
48

Za Target izaberemo _self I OK.
Uradili smo da link HOME vodi sa druge stranice na početnu stranu.Sada se vratimo u
di...
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 ...
50

..
Sada ćemo se pozabaviti FUTEROM i obrisaćemo text na obe strane u CODE
prikazu.Selektujemo sadržaj futera u kodu,kl...
51

Dizajn treće stranice ,krenućemo od druge stranice na kojoj je promenjen naslov
New Arrivals, sačuvali je pod novim im...
52

Dream weaver ima dosta mogućnosti za opcije copy/paste.Ako postavimo miša
ispred rečenice these kangaroosi kliknemo na...
53

Ako stavimo kursor recimo ispred reči These i držimo Shift selektovaće se ceo
tekst do kraja.Jedna reč se selektuju je...
54

Pošto smo uneli podatke stisnuti OK.Reč here postaje super link koji nas vodi na
Wikipidiju.

U sledećem izlaganju mod...
55

new_arrivals.html I kliknemo na nju.U Polju TARGET imamo nekoliko opcija
:blank otvoriće novu stranicu u veb čitaču.Iz...
56

kao

admission _ price.html,i podesimo

futer.Posle ispravki ostaće:

IMENOVANA SIDRA .
Ako na stranici New Arrivals d...
57

Na stranici ubacujemo novi red :To find out about kangaroos,see here,i od reči
here napravićemo link do imenovanog sid...
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...
59

Na stranicui možemo ubaciti liniju koju možemo i formatirati.Ako prvo centriramo
Welcome to Spring park i želimo da ub...
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 fu...
61

U History panelu vidimo koje smo sve promene i formatiranja vršili na stranici.Ako
mišem pomeramo klizač na gore AUTOM...
62

i odredi se putanja do odgovarajućeg foldera za slike. Istovremeno se u FILE
panelu prikaže da je folder images operat...
63

U polje alternativnio tekst ,koji opisuje datu sliku,ostavimo za sada empty i
OK.Pojaviće se slika

Slika je određene ...
64

automatski podešava vrednost.Sada je slika

umanjena.

Sada možemo u samom programu kropovati sliku sa Modify>Image>Cr...
65

pojavljuje u Paintu.Ovde se može dalje editovati,kao što se to radi u programima
za obradu slika(kontrast,oštrina,jači...
66

Ovde vidimo prikaze strana Phone(320*3oopx)
Tablet(768*300)
Desktop(1126*276)
Ako pritisnemo dugme Viewport Size i za ...
67

Veličinu prikaza koji odgovara nekom uređaju možemo podesiti i preko Edit<Preferences
Alo u prozoru preferances označi...
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 ...
70

U tablicu se podaci unose direktno.Kod ubacivanja tablice postoje dva moda
1.STANDARD MODE
2.EXPANDID MODE

Red se sel...
71

(merge).komandom Modify<Table<Merge cells(predhodno se ćelije selektuju(control
dugme I klik na svaku,takođe i odredit...
72

</html>

Ovo je mainblock
U prethodnom primeru kreiran je layer (block) od 500 pixela širine i 200 pixela
visine. To j...
73

</head>
<body>
<div id="mainblock">
Ovo je mainblock.
</div>
</html>

Daje:
Ovo je mainblock.
Layer se može smestiti g...
74

<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20p...
75

Yellow block je smešten na 30 pixels od leva, 50 pixela od vrha donjeg layera (parent
layer). Green block smešten je 3...
76

This is the mainblock.
Primer 5 .

Clipping layers
Clipping layeri ne znači ništa drugo nego odsecanje dela layera. Pr...
77

Ovo je mainblock1.
Ovaj layer nije odrezan
Ovo je mainblock2.
Ovaj layer jeste odrezan
U mainblock1 žuti layer nije od...
78

<style type="text/css">
body { background:#000000; color:#ffffff }
#mainblock { position:relative; left:100px; top:20p...
79

Kao što vidite, green layer (zeleni) je iznad yellow (žutog).
Primer 7 .
Ako želimo da žuti bude iznad zelenog upotrie...
80

:
Ovo je mainblock.
Ovo je yellow block.
Ovo je green block.

13. KONCEPT SLOJEVA U DREAMWEAVERU ,
U DW postoje dva ti...
81

Lada kliknete na Div tag otvoriće se Insert Div tag dijalog box(slika ispod).U njemu postoje razna mesta
umetanja:
1.B...
82
Ako već postoji neki sadržaj na stranici na kojoj želite da postavite sloj,selektujter taj sadržaj I automatski
se otva...
83

•

Stilovi definišu izgled html elemenata

•

Stilovi su dodati u HTMLv 4.0

•

Razni nivoi definicije stilova:
– Stil...
84

•

CSS omogućavaju da se jednom definisani izgled web strane koristi na velikom
broju drugih web strana što doprinosi ...
85

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naslov ove st...
86

</div>
</div>
</body>
</html>

Tagovi koje smo koristili tiču se formatiranja i razdvajanja delova HTML-a.Problem je
s...
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 ...
88

elementi mogu se dodati direktno u HTML tag, što se zove "inline" style sheet.
Drugo, style sheet može biti deo HTML d...
89

Deo napisan u boldu je CSS:
<style type="text/css">
style elements
</style>

3.External Style Sheet
<!DOCTYPE HTML PUB...
90

Background color:
Predefinisana boja pozadine kod većine browsera je bela. No vrlo lako je
možemo promeniti.
<!DOCTYPE...
91

Background-image:
Takođe može se upotrebiti slika za pozadinu.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitiona...
92

U jedan style element može se staviti više atributa.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"ht...
93

Ili skraćeni oblik:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loo...
94

body { background:#000000; color:#ffff00 } označava crnu pozadinu i žuti text.
Boju možete promeniti sa color:#ffff00 ...
95

Crveni header
Normalan text je žut italic text je plav

Primer 8 .:
GROUPISANJE style elementa takođe je moguće. Pretp...
96

Header

5.3 Selectori
Class selector:
Class selector se dosta primenjuje u CSS-u. Pretpostavite da koristite
nekoliko ...
97

<h1 class="yellow">Header</h1>
<h1 class="blue">Header</h1>
<h1 class="red">Header</h1>
</body>
</html>
Rezultat je:
H...
98

.yellow { color:yellow; background:#000000 }
</style>
</head>
<body>
<h1 class="yellow">Header</h1>
<em class="yellow"...
99

<h1 class= "yellow">Ovaj header jeste žut</h1>
</body>
</html>
:
Ovaj header nije žut
Ovaj header jeste žut

ID select...
100

</body>
</html>
Rezultat je:
Header
Header
Header

Kad definišite ID ispred MORA biti znak # . Naziv može biti bilo k...
101

<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
A:link { color: red; backgro...
102

A:visited { color: blue; background:#000000 } = :visited { color: blue;
background:#000000 }
A:hover { color: green; ...
103

Primer 12 .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd"...
104

</body>
</html>
izgleda ovako:

neki text

NAPOMENA :
Postoji i skraćeni oblik p { margin-top:25pt; margin-right:25pt...
105

h1.padding { background:#c00000; padding-top:20px; padding-right:20px;
padding-bottom:20px; padding-left:20px }
</sty...
106

Border color: 'border-top-color', 'border-right-color', 'border-bottom-color',
'border-left-color' i 'border-color'
B...
107

</head>
<body>
<h1>Header</h1>
</body>
</html>
Dobićemo:

Header

5.5 Font
font-familija
Font-family style element om...
108

</head>
<body>
<p>Ovo je verdana text</p>
</body>
</html>
A izgleda ovako:
Ovo je verdana text
NAPOMENA 1:
U gornjem ...
109

<head>
<title>Naslov</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
p { font-size:italic ...
110

</head>
<body>
<h1>Header 1</h1>
<p>Neki text</p>
</body>
</html>
Da će:
Header 1
NEKI TEXT

font-weight
Moguće vredn...
111

neki bold text
ovo je light text

font-stretch
Moguće vrednosti: normal | wider | narrower | ultra-condensed | extrac...
112

</head>
<body>
<p>malo extra extra veliki text</p>
<em>ovo je 10px text</em>
</body>
</html>
Izgleda ovako:
malo extr...
113

</body>
</html>
Izgleda ovako:
ovaj text je uvučen za 30 pt-a

text-align
Ovaj style element koristi se za poravnanje...
114

text-decoration
Određuje dekoraciju texta.
Vrednosti none | underline | overline | line-through | blink
Primer 23 .
<...
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Dreamweaver cs6 korak po korak
Upcoming SlideShare
Loading in...5
×

Dreamweaver cs6 korak po korak

1,088

Published on

Dreamweaver step by step

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,088
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver cs6 korak po korak

  1. 1. 1 DREAMWEAVER CS6- Korak po korak JELINEK ZORAN
  2. 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 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. 3. 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. 4. 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. 5. 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. 6. 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. 7. 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. 8. 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. 9. 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. 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. 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. 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. 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. 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. 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. 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. 17. 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. 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 odreneni cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi
  19. 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 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. 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) 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. 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 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. 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. 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. 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; } 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. 24. 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. 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 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. 26. 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. 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. 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. 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. 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. 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 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. 32. 32 Pre izrade glavnog dizajna potrebno je skicirate želju izgleda stranice :
  33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 direktno na kraj te stranice na to sidro.
  57. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 68 Po pritiskanju OK pojaviće se prikaz na Sony uređaju.
  69. 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. 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. 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. 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). <!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. 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. 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> Ovo je mainblock. Ovo je yellow block. Ovo je the green block Rezultat je: e
  75. 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. 76 This is the mainblock. Primer 5 . Clipping layers Clipping layeri ne znači ništa drugo nego odsecanje dela layera. 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 } #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. 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. 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> Ovo je mainblock. Ovo je yellow block. Ovo je green block.
  79. 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. 80 : Ovo je mainblock. Ovo je yellow block. 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. 81. 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. 82. 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. 83. 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. 84. 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. 85. 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> <!-- 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 ...
  86. 86. 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. 87. 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. 88. 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 <!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>
  89. 89. 89 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. 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 #ffcc66 #ff9966 #ff6666 #ff3366 #ff0066 #ccff66 #cccc66 #cc9966 #cc6666 #cc3366 #cc0066
  91. 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. 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. 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. 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. 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. 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. 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. 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. 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" "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 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 . <!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 | 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 . <!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

×