dreamweaver cs6 korak po korak

1

DREAMWEAVER CS6- Korak po korak

JELINEK ZORAN

2

SADRŽAJ:

1.Dreamweaver-korak po korak

2.Sadržaj

3.Html programski jezik

4.Rad sa frejmovima u Html-u

5.Programski paker DREAMWEAVER

5.1 Projektovanje Web prezentacije

5.2 Interfejs programa DW CS6

5.3 Izrada Test page

6.Izrada Web sajta

6.1 Izrada prve(home)strane

6.2 Izrada druge stranice

7.Izrada tamplete(šablona)i njegova primena

7.1 Kreiranje šablona(template) u DW CS6

8.Povezivanje stranica(linkovi)

8.1 Povezivanje prve i druge stranice i izrada treće i četvrte strane.

8.2 Imenovana sidra

9.Formatiranje texta

10.Ubacivanje slika na stranicu

10.1 Funkcija multiscrean

11. Rad sa tabelama

12.Slojevi i CSS Layout

13.Koncept slojeva u Dreamweaver-u

3

14.CSS stilovi u HTML-u

15. Kaskadni stilovi CSS u DW-u

16. Izrada novog CSS pravila

17.Korišćenje Spray menija.

18. Validacija i provera linkova

19. Izrada forme i validacija forme

20. Izrada formi u DW CS6

21.Ubacivanje multimedijalnih sadržaja na stranicu

22.Code Inspector,Code toolbars i Code hint(upotreba)

23.Kreiranje formulara

24.Behavior(ponašanja)

25.Postavljanje sajta na server

4

3.HTML PROGRAMSKI JEZIK je osnovni jezik za definisanje Web stranice,a

sastoji se iz mnoštva tagova i sadržaja.Tagovi su elementi HTML koda.Kada se ukucaželjeni HTML kod, potrebno je sačuvati stranicu pod .html ekstenzijom.Takav fajl može sepregledati u svim internet pretaživačima ,kao i programima za izradu sajtova.Tako, akorecimo u Dreamweaveru CS6 ukucamo:Hallo World u Dizajn prikazu , u Code prikazudobijamo:

Ovde vidimo osnovnu strukturu HTML dokumenta,koji počinje sa <!DOCTYPEhtml,zatim sledi <html i završava sa </html>(slash- kraj), a između je početak <head ukome je naslov Untitled document ,pa kraj</head>,zatim početak<body> između jetekst koji smo napisali Hallo world i kraj</body>, i na kraju </html>.Vidimo dakorišćenjem određenih tagova definišemo željenu stranicu,prikazujemo slike,pravimolinkove,raspoređujemo sadržaj.Specifično za tagove je da moraju biti otvoreni( <) ilizatvoreni(>).

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 kaeksternim fajlovima.Sadržaj iz head taga nije vidljiv na samoj stranici,ali utiče na njenizgled.

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 h6tag sa najmanjim tekstom.

5)div- deli stranicu na delove-blokove.Koristi se kako bi se sadržaj raspodelio na željenomesto

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

11).script -povezuje se sa skriptama koje su potrebne stranici-

12).style -sadrži stilove koje definišu dizajn stranice.

13)Liste

.li – element liste

Postoje dve vrste liste:određene I neodređene liste.

ol-određena lista(ordered list)

1.Prva stavka

2.Druga stavka

3.Treća stavka

ul-neodređena lista(unordered list)

Prva stavka Druga stavka Treća stavka

6

Postoje tagovi koji služe za formatiranje teksta.Pomoću njih govorimo, koju funkciju imatekst 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 divtaga izgleda ovako:<div>Ovo je sadržaj div taga</div>

Ipak to nije dovoljno, jer treba još definisati izgled(klasu) kojoj pripada i td.Zatokoristimo 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 postavljanjestrukture sajta1 <div>Struktura sajta</div>,

span – u principu univerzalni kontejner, ali pretežno služi za stilizaciju teksta1 <span>Sadržaj sajta</span>,

7

p – paragraf tag – isključivo se koristi kao kontejner za tekst1 <p>Sadržaj sajta</p>

a – link tag – služi za povezivanje stranica unutar sajta ,ili linkovanje ka sadržajima nadrugim sajtovima1 <a href="http://www.google.com">Tekst koji je link i koji vodi na google.com</a>

b – bold tag – služi za stilizaciju teksta1 <b>ovaj tekst je okružen bold tagom</b>

i – italic tag – takodje služi za stilizaciju teksta1 <i>ovaj tekst je okružen italic tagom</i>

img – ovaj tag služi za prikazivanje željene slike u browser-u, odnosno na sajtu1 <img src="url(putanja/do-slike.jpg)" alt="Kratki opis slike" />

br – break tag – ovaj tag služi za “lomljenje teksta” , odnosno pravljenje novog redau tekstunpr.kaouovomprimeru1 <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 odmahnakon Doctype taga.1 <html></html>

8

head - head tag služi za definisanje parametara strane i uključivanje eksternih CSSfile-ova i java skripti1 <head></head>

body - unutar body taga se nalazi sam code koji definiše strukturu i sadržaj sajta, kaoi 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 dabudu 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 dokumentapostavlja se tag završetka.

Na primer da napravite naslov dokumenta koristimo sledeći opis:

<title>Moj prvi HTML Dokument</title>

Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta.Vidite da se tag završetka razlikuje od taga početka po kosoj crti (/).

Tag HTML

9

<html> tag označava početak HTML programa (koda).

<html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače.Na kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće sesvi 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 nazivazaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu.Ono služi da se unutarnjega 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>:

TITLE tag

title tag vam omogućava da definišete naziv vašeg dokumenta. To se postiže na sledećinačin:

<title>Moj prvi HTML dokument</title>

Naziv dokumenta, pošto se nalazi u zaglavlju, neće biti prikazan na ekranu, ali će sepojaviti u na raznim drugim mestima (na vrhu prozora, u bukmark-u stranica i sl.)

BODY tag

<html><head><title>Moj prvi HTML dokument</title></head>

9



Tag HEAD




TITLE tag




BODY tag


9



Tag HEAD




TITLE tag




BODY tag


10

<body> i </body> tagovi definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sveslike i linkovi na druge dokumente nalaziće se unutar ovih tagova.

<body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica možeizgledati ovako:

h tagovi

h tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašemdokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća slova se dobijaju tagom h1a najmanja tagom h6. Slede primeri za svih 6 nivoa.

Tagovima za naslove se ne postiže samo promena veličine slova, već su naslovi iboldovani, a takođe ispred i iza naslova se dodaje po jedna prazna linija.

PARAGRAFI

<html><head><title>My First HTML Document</title></head><body>Ovde se nalazi sadržaj vašeg dokumenta:tekst, slike, grafika itd.</body></html>

10



h tagovi



PARAGRAFI


10



h tagovi



PARAGRAFI


11

U HTML, paragraf se označava tagom tag <p> i postavlja se na kraj svakog paragrafa"normalnog" teksta (pod normalnim se podrazumeva tekst koji nema upotrebljene nekedruge tagove).

<p> ovaj tag prouzrokuje postavljanje teksta u novu liniju uz dodavanje jedneprazne linije ispred

<br> ovaj tag je sličan prethodnom sa razlikom što se ne dodaje jedna praznalinija 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šateonaj 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 boldovanoOvo je <i>italic</i>Ovo je italic

LOGIČKI TAGOVI

Ovo je <strong>jako istaknuto</strong>Ovo je jako istaknutoOvo je <em>istaknuto</em>Ovo je istaknuto

Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se menja samo oblikslova, a logički je zavisan od pretraživača i može uneti i druge promene ( recimopromenu boje)

Jedan od jako korisnih elemenata, koji se nalazi u elementu svakog sajta ,.jeste tag kojiuključuje eksterni CSS fajl:

<link href="global.css" type="text/css" rel="stylesheet" />

12

4.RAD SA FREJMOVIMA U HTML -u

Napravićemo prezentaciju koja sadrži dva frejma,levi i desni.Na levoj strani biće dugmadza navigaciju,a veb strane će se učitavati u desnom frejmu.Prezentacija sadrži tri glavnadela

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 seučitava u brauser i ona ne sadrži nikakav poseban sadržaj u vidu teksta ili grafike.Onasluži samo za to da se definiše veličinu i položaj frejmova pomoćutaga<FRAMESET>,kao i da kaže brauseru koji HTML dokumente da učita u koji frejm.Uovoj prezentaciji napravićemo dva frejma kolone:prvi frejm širine 160 px,i drugi koji ćepopuniti ostatak slobodnog prostora.U levi frejm se učitava strana navigator.html,a udesni frejm home.html.Kod ove stranice ima sledeći oblik <HTML>

<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 nepostoji body tag već mesto njega<FRAMESET> tag koji dešiniše kako će delovi prozorabiti 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 na2 kolone,tj da će prozor biti podeljen na dva vertikalna frejma.Za prvi frejm je određena

13

160px širine,a drugi frejm ima*“ što znači da njegova širina nije ekplicitno određena i daće zauzeti preostali prostor.Širina tog prostora zavisi od rezolucije.

Zatim slede dva <Frame> taga.Prvi definiše koji se HTML dokument učitava u levi frejm, adrugi koji se učitava u desni frejm.Ovo se postiže pomoću SRC atributa.Vidimo da sufrejmovi prazni jer nismo ništa napravili od HTML dokumenata, koji bi trebalo da seučitaju u ova dva frejma(navigator.html i home.html).Sada treba da napravimo ove dvestranice kao što se one inače prave,sačuvati ih ,recimo na jednoj u body tagu upišemoHello people a u drugoj stranici u body tagu Welcome to Serbia i obe sačuvamo,one ćese automatski učitati levo i desno . Pazljivi citalac prethodnih redova se seća da smosvakom frejmu dali odgovarajuce ime ("levo" i "desno"). Čemu nam ovo sluzi akobrowser 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 sepritiskom menja sadržina desnog frejma, ovo smo morali na neki nacin da objasnimobrowseru, 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 linkovimatipa:

<a href="boje.html">

Dakle, ovakav link ne smemo postaviti u levom frejmu (tj. stranici "navigator.html"), jer biklikom na njega stranicu "boje.html" otvorili u levom frejmu, a ne u desnom kao sto smozeleli. Ovaj problem se resava dodavanjem TARGET atributa u ovaj tag, i to na sledecinacin:

<a href="boje.html" target="desno">

Kao sto vidite, vrednost TARGET atributa je upravo ime frejma u kome zelimo da sestranica "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 krozprezentaciju, jer se leva strana ne mora svaki put iznova ucitavati, vec se učitava samonovi sadržaj desnog frejma.

14

(slika sa dva frejma)

Vežba br 1 ,.

Napisati program sa hederom i dve kolone

.

<HTML><HEAD><TITLE>Primer tri frejma</TITLE></HEAD><FRAMESET ROWS="20%,80%">

<FRAME NAME="gore" SRC="banner.html"><FRAMESET COLS="15%,85%">

<FRAME NAME="levo" SRC="navigator.html"><FRAME NAME="desno" SRC="home.html">

</FRAMESET></FRAMESET></HTML>

15

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

Na ovaj nacin možete nastaviti da delite browser na jos sitnije frejmove. Evo spiska svihmogucih atributa <FRAMESET> i <FRAME> tagova i njihovog kratkog opisa:

FRAMESET TAG:

BORDER Odredjuje debljinu granice izmedju frejmova u frejmsetu izrazenu upikselima.

BORDERCOLOR Odredjuje boju granice izmedju frejmova.

COLSOdredjuje broj i sirinu frejmova - kolona. Vrednosi se zadaju ili upikselima ili u procentima sirine stranice. Broj kolona je odredjenbrojem zadatih vrednosti koje se medjusobno odvajaju zarezima.

FRAMEBORDER Ako je vrednost ovog atributa YES granica izmedju frejmova ce bititrodimenzionalna, a ako je vrednost NO bice obicna neispupcena

16

granica.

ROWSOdredjuje broj i sirinu frejmova - redova. Vrednosi se zadaju ili upikselima ili u procentima visine stranice. Broj redova je odredjenbrojem zadatih vrednosti koje se medjusobno odvajaju zarezima.

FRAME TAG:

BORDERCOLOR Odredjuje boju okvira frejma.

FRAMEBORDERAko je vrednost ovog atributa YES granica frejma ce bititrodimenzionalna, a ako je vrednost NO bice obicna neispupcenagranica.

MARGINHEIGHT Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od gornje idonje granice frejma.

MARGINWIDTH Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od leve idesne 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 - frejmnema Scrollbar i AUTO - Scrollbar se pojavljuje samo po potrebi.

SRC URL stranice koja se ucitava u frejm.

5.PROGRAMSKI PAKET DREAMWEAVER

5.1PROJEKTOVANJE WEB PREZENTACIJE

Postoje četiri osnovna principa koji predstavljaju temelje za projektovanje kretanja na webu,kao i sadržaja web prezentacije. Ti principi su:· Podela informacija na grupe – grupisanje informacija u male delove od 4-6

17

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

18

Podela na grupe

- Potrebno je da se prezentacija organizuje u grupe koje su vidljive- Vidljiva struktura web prezentacije i putanje kretanja moraju dabudu usaglašeni sa opažajnim ograničenjimaRelevantnost

- Svaki deo ili grupa web prezentacije treba da sadrži samo oneelemente koji su bitni za tu grupu ili deo- Nebitni elementi se prebacuju na neko drugo mesto ili se brišuOznač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, jermogu dovesti do toga da korisnik zalutaKonzistentnost

- Koristiti konzistentno kretanje, na primer dugme Kontakt treba dabude iste veličine i na istom mestu na svakoj stranici webprezentacije

Najbitniji detalj kod izrade web prezentacija je voditi računa o potrebamakorisnikalokacije. Ključ uspešno dizajnirane upotrebljive web lokacije je da se onaposmatra sa gledištakorisnika.„Dizajniranje sa aspekta korisnika jeste izraz koji se odnosi na procesdizajniranja kojiuvek u prvom planu ima korisnika.“

KORISNOST I UPOTREBLJIVOST

Korisnost je funkcionalnost web prezentacije koja izlazi u susret potrebamakorisnika,a upotrebljivost se odnosi na sposobnost korisnika da koristi lokaciju kako bipostigao odrenenicilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi

19

lako,omogućavaju korisnicima da bez grešaka i zadovoljavajuće postignu svoj cilj.Upotrebljivost (engl. Web usability) čine sledeće komponente:Mogućnost brzog korišćenja (pregledanja) web stranice – Koliko jednostavnokorisnik postiže jednostavne zadatke na web stranici koju prvi put pogleda?

Efikasnost – Posle početnog upoznavanja sa dizajnom web stranice, koliko brzokorisnik može izvoditi zadatke pretraživanja informacija na stranici?

Memorabilnost – Ako se korisnik vrati na web stranicu nakon odrenenogvremenskog perioda nekorišćenja iste, koliko jednostavno može ponovnoiskoristiti stečena znanja/veštine na web stranici?

Minimiziranje grešaka – Koliko grešaka čine korisnici, koliko su ozbiljne tegreške imogu li se korisnici jednostavno i brzo oporaviti od tih grešaka i nastavitikoristitiweb stranicu?

Zadovoljstvo – Da li je ugodno koristiti grafički interfejs web straniceNajbitnije stavke koje je potrebno obezbediti u web prezentaciji da bi ona bilauspešna:

Jasno prezentovati najbitnije sadržaje stranice – Na početnoj stranici (engl.homepage) treba prezentovati jasno i kvalitetno najbitnije sadržaje

Gde, šta, kako i zašto? – Na početnoj stranici korisnik treba dobiti odgovore naova pitanja: Gde sam? Koje sadržaje mogu ovde pronaći? O čemu je reč na ovojstranici? Š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 nastranicii na isti vizuelni način

Samo čitljiv tekst je koristan tekst – Koristiti tamni tekst na beloj pozadini zamaksimalan kontrast odnosno maksimalnu čitljivost

20

Pozadina stranice (engl. Page background) – Koristiti jednostavne i blagepozadinena stranicama

Opisati svaku sliku – Koristiti ALT tagove za sve slike, a najviše za navigaciju kojaje napravljena u slikama

Navigacija je ključ – Postaviti navigaciju na isto mesto na svakoj web straniciPreglednost - Poravnati sve elemente na stranici (tekst, logo, navigacija i sl.)zbogbolje čitljivosti i preglednosti

Jezik pisanja jasan i razumljiv – Koristiti jasan i razumljiv jezik pisanja sadržajaWeb standardi - pridržavati se web standarda (XHTML, CSS, JavaScript, DOM,XML)Svaka od ovih stavki je uspešno primenjena na web lokaciju Fakulteta zaprimenjenuekologiju Futura.

PRISTUPAČNOST

Pristupačnost Web sadržaja se ogleda u dostupnosti tog sadržaja ljudima sainvaliditetom ili nekim drugim funkcionalnim ili situacionim ograničenjima.Pristupačan sadržajmora biti kompatibilan sa pomoćnim tehnologijama koje koriste ljudi sainvaliditetom, posebnosa ekranskim čitačima. Mora postojati alternativa za vizuelni sadržaj, za ljudekoji ne vide, ialternativa za audio sadržaj, za ljude koji ne čuju.Konzorcijum W3C je zagovornik projektovanja što pristupačnijih web lokacija ipodržava inicijativu za pristupačnost na Webu – WAI (Web AccessibilityInitiative). Ovainicijativa ne preporučuje samo pristupačnost lokacija hendikepiranim osobamaveć i pravljenjelokacija pristupačnih bilo kome ko radi u uslovima drugačijim od onih koje jeweb dizajnerusvojio kao „normalne“. Pod ovim se podrazumeva da možda korisnici nemajumonitor isteveličine kao dizajner, možda nemaju toliko brz Internet kao dizajner a i obrnuto.

21

Iz WAI uputstva proizilazi da je potrebno uvek misliti na to da korisnici mogu daimajuogranič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 sesastoji od tagova <imeTaga>. Većina tagova ima i svoj par, koji označava krajtaga</imeTaga>. Sadržaj je smešten izmenu otvorenog i zatvorenog taga.Tip dokumenta se navodi kroz DOCTYPE tag, koji se piše pre otvorenog htmltaga.Najnoviji standard za tip dokumenta je: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.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 ipreporuka za pisanje ispravnog koda. Neki od najvažnijih odlika su odvajanjesadržaja odprezentacije i pravilna struktura.1.0 Strict dokument.Tekstualni ekvivalenti za slike

Svaki HTML tag koji prikazuje sliku <img> tag, treba da sadrži alternativnitekstualniopis i on se zadaje preko „alt“ atributa. Vrednost alt atributa će biti korišćen usledećimslučajevima:ekranski čitač će tu vrednost pročitati naglas ili poslati brajevomdispleju,biće prikazana umesto slike u grafičkom pretraživaču, u slučaju da slikanije pronanena na zadatoj lokaciji,biće prikazana umesto slike u grafičkom pretraživaču ako je učitavanjeslika isključeno,alt tekst koriste Web spajderi, pri indeksiranju sajta, što može doprinetiboljem rangu na pretraživačima.

22

Boja može da poboljša doživljaj koji korisnik ima kada poseti sajt. Ona se koristidaskrene pažnju, da naglasi, da odvoji celine. Pa ipak, ima slučajeva kadanepažljivo korišćenjeboja može biti uzrok nepristupačnosti sajta. Web lokacija može bitinepristupačna ljudima kojine mogu da razlikuju boje, ili imaju problema sa opažanjem boja, ali i ljudimakoji imaju slabijivid. Obezbenivanje pristupačnosti ovde ne zahteva prestanak korišćenja boja nastranici. Bojasvakako doprinosi upotrebljivosti sajta, ako je dobro primenjena. Samo boja netreba da budejedino sredstvo kojim se ističe neka informacija.Bitno je osigurati da su svi objekti od značaja na web stranici jasni i bezupotrebeboje. 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 iokontrastu na stranicama. Ako su nijanse pozadinske boje i boje slova bliske, testranice nećeimati dovoljno kontrasta. To može da postavlja problem ljudima saporemećajima u opažanjuboja ili korisnicima sa monohromatskim displejom.Takone treba posebno voditi računa o tome da korisnici mogu podesiti njihovepretraživače za prikazivanje boja nekih elemenata strane (pozadina, tekst..) izbog toga

23

obavezno treba uz pomoć CSS dokumenta odrediti boje i teksta i pozadine.Kod za pozadinsku belu boju: html { background: #fff; }Kod za tekst na web stranicama tamno sive boje: body { color:#666666; }

5.2 INTERFEJS PROGRAMA DREAMVEAVER CS6

Po pokretanju programa dobija se uvodni ekran ovog orograma ili

Welcome Screan kao na slici.Interfejs se sastoji iz sledećih delova(MENI BAR,APPLICATION TOOLBAR,DOKUMENT TOOLBAR,STATUS BAR I PANELI)

24

MENI BAR se sastoji iz nekoliko

dugmadi: FILE,EDIT,VIERW,MODIFY,FORMAT,COMMANDS,SITE,WINDOWS i

HELP .Pogledati sadržaj svakog od njih.

APPLICATION TOOLBAR ,

Sastoji se iz nekoliko dugmadi:LAYOUT DUGME za selektovanje raznih prikazastranice,EXTEND DREAVEAVER koristi se za pristupu menadžeru ekstenzije.SITE DUGMEza brzo upravljanje i editovanje već postojećih sajtova.DUGME WORKSPACE LAYOUTsluž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 ida kodiramo ručno u HTML –u,CSS-u,JAVA SCRIPT-u, ili ako radimo sa dinamičkimstranicama u PHP-u ili ASP-u

25

2).SPLIT prikaz se koristi da bi se istovremeno videli i kod stranice i dizajn straniceu dva prozora,a može se podesiti pogled i po vertikali ili kome je lakše pohorizontali.

3).DIZAJN pogled daje nam vizuelni prikaz koda koji je u Body tag-u,i vrlo je sličanonome što će se videti u čitaču

4.)LIVE prikaz nam omogućuje vidimo kod zajedno sa dinamičkimsadrž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 brzootkrijemo odgovarajući kod u levom prozoru,ili ako selektujemo jednu reč u CODEprikazu,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 dodamonaslov 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 prenosfajlova 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 kometrenutno radite sa drugim čitačima.

VISUAL AIDS.koriste za razne alate koji mogu da asistiraju kod postavljanja nekihparametara, bitni Paneli su smešteni na desnoj strani i to paneli:INSERT,CSSSTILOVI,FILE i ASSETS.

PANELi smešteni na desnoj strani. mogu minimizirati pritiskom na dugme udesnom uglu svih panela i tako napraviti veću radna površinu.

STATUS BAR ,

Status bar sadrži dosta priručnih alata.

26

U levom delu Status bara nalazi se Tag selector<body> koji nam omogućuje daselektujemo sadržaj određenog taga.U desnom delu SELECT TOOL,I HAND TOOLkao 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šamožete odrediti da li će lenjiri Lenjiri su odličan alat koji može da vam asistira kodmerenja 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 zaobe ose po difoltu je postavljen u gornjem levom uglu fajla. Ovaj početak se možepomeriti na bilo koju lokaciju na stranici tako što ćemo kliknuti levim tasterommiš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 starupoziciju se može izvršiti preko opcije Reset Origin. Isključivanje lenjira se vršipreko opcije Hide Rulers.

MrežaLinije mreže se protežu duž celog dokumenta u jednakim intervalima, s leve nadesnu stranu i od vrha ka dnu dokumenta. One vam mogu pomoći za tačnopozicioniranje objekata na Web stranici. Možete uključiti Snap to Grid (privlačenjemreži) opciju za još bolje poravnanje. U podešavanjima mreže (View>Grid>GridSettings) možete odrediti koje boje će biti linije u mreži, zatim možete odreditikoliki će biti razmak između tih linija i da li će se mreža prikazivati u vidu linija ilitačkica.

VođicePostoje horizontalne i vertikalne vođice koje možete dovući u otvoren dokumentda bi vam pomogle u merenju i postavljanju novih objekata na Web stranicu. Dabiste kreirali vođice, potrebno je da je prvo lenjir uključen, zatim ćete kliknutilevim dugmetom miša na lenjir i povući vođicu do željene lokacije na stranici. Naprimer, ako želite da postavite AP Div na stranicu, 250px od leve ivice dokumentai 300px od gornje ivice dokumenta, postavićete vođice na tu lokaciju iuključićete Snap to Guides (View>Guides>Snap to guides), zatim ćete samoprivući Div ka toj lokaciji i on će se sam „zalepiti” za to mesto.

27

Vođice su vidljive samo na radnoj površini u Dreamweaver-u, a ne vide se na Webstranici u čitaču.Na slici ispod prikazani su lenjir i vođice.Ako postavimo AP divmožemo ga lepo namestiti na odgovarajuće mesto.

5.3 IZRADA (TEST PAGE) STRANE

Program DREAMVEAVER koji je vrlo ozbiljan zahtevan program ,koji namomogućuje visoki kvalitet izrade dinamičkih veb sajtova. Kada otvorimoFile>New >Blank page>HTML>None>Create.otvoriće se potpuno prazandokument koji je prikazan na slici ispod.Ako radimo u okruženjudesign,upisaćemo na ekranu Hello World. (slika ispod)

28

:

Ako pređemo u CODE prikaz videćemo sledeće:u levom prozoru je programkreiran 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 mnogosadržaja.Ako pogledamo SPLIT pogled ( slika ispod)

29

Tekst Hello World možemo formatirati, jer se uključio Prosperiti Inspektor.Zaformat levo,možemo staviti Heading 1,2 ili3 I svaki put će se fontpromeniti.Takođe ako selektujemo Hello World biće selektovane iste reči u Codeprikazu,ili ako izbrišemo sadržaj u Code prikazu u sekciji <body> on će nestati izdesnog prozora.

30

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

31

Test stranu možemo pogledati kako izgleda u pretraživaču sačuvati je,ali pošto je upitanju 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 vezisajta biće unutar ovog foldera.Otvorićemo folder na desktopu i nazvati gaSpring Park.U programu kliknemo na Site<Menage site >New site izaberemoputanju 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 browsedolazimo da foldera Spring Park koji smo prvobitno napravili I u kome će stajatisve što je vezano za ovaj sajt.Otvorićemo u njemu folder za slike,folder za CSS ikasnije i druge sub foldere,koji nam budu potrebni.Ovo je prvi korak ka pravljenjusajta.Ujedno će se ime koje smo dali sajtu pojaviti u Files panelu.

32

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

33

Dizajn prve strane poštujući želju klijenta.Sa File<New i izabrati BLANK PAGE

HTML i iz layouta 2 kolone heder i futer i levi sajd bar a zatim pritisnuti create

34

Ovo je konfiguracija koja nam odgovara naručiocu projekta ,i sada treba pristupitiispunjavanju sadržajem(content).Pre toga treba napomenuti da je važna širinadokumenta,i da se ona mora podesiti za razne uređaje:smart fonove,tablete ili PCračunare,jer se protibno deo sadržaja neće prikazati na ekranu uređaja.Tako ako bi želeli

35

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

Ova podešavanja nam omogućuju alatke iz STARTU bara na desnoj strani gde klikom naikonicu phona,tableta ili PC dobijemo izgled I veličinu stranice u pxelima.

Za uređenje sadržaja promenimo reč INSTRUCTION u WELCOME TO SPRINGPARK.Otvorimo split pogled i selektujemo ceo pasus između<p sadržaj>/p.Zatim gaobrišemo na isto mesto u Code prikazu upišemo:Our park is a great location for familyday out.

36

Sada to isto treba da uradimo i sva dva ostala paragrafa.U split prikazu stavimo kursoriza <p> taga u CODE prikazu koji počinje sa Because i dilitujemo ceo pasus,upišemo:Ourmarine exhibits include new panguis from South America.We also have some newarrivals from warmer climates.Naslov ćemo takođe obrisati ( to Clearin Method u Newarrivals).Posle svih promena naslova i paragrafa ukucavanjem novog teksta u CODEprikazu koristi REFRESH svaki put.Dobićemo preuređenu prvu stranicu,bez teksta inaslovaDopisati I poslednji paragraf kao na slici ispod.Sada stranica ima prilagođen izglednašim potrebama i prikazana je na slici ispod.

37

Sada možemo srediti sajd bar i isprazniti njegov sadržaj.Uradićemo to opet u SPLITprikazu u delu za CODE pogled.Selektovati prvi paragraf (uključujući oba paragraftaga),pa delete i refesh ,pa,to isto uraditi i sa drugim paragrafom:

38

Vidimo da se početna dosta promenila i da prati naš dizajn sajta koji je tražioklijent.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 stranicupreuređujemo od izgleda prve strane,prvo je sačuvamo sa Save as kaonew_arrivals.html,a u Title naslovu upišemo Spring_Park new Arrivals page.

.

Kada preuredimo gornji izled sa novin podnaslovima ,dobijamo izgled druge stranice(slikadole).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 prvustranicu sačuvali kao tamplete stranicu(što je objašnjeno u sledećem poglavlju) onda bipravljenje treće I četvrte stranice bilo još efikasnije.i lakše.Izgled druge stranice pošto je svedopisano,što trebate i vi uraditi dat je na slici ispod.

39

7.IZRADA TEPMLETA(ŠABLONA) I NJEGOVA PRIMENA ,

Stvaranje template stranice pomoći će nam da takvu stranicu,tzv.šablon koristimo i kodizrada drugih stranica.U meniju izaberemo File>New>Blank templete>HTMLTemplete>Layout>none i pritisnite Create.(na slici ispod).Kada ovo uradimo dobijemo

40

prazan prostor na kome treba formirati stranicu.

HTML tagovi sami po sebi ne donose mnogo mogućnosti za izgled same stranice,zatosluži CSS(kaskadna lista stilova),koja nam omogućuje da svakom tagu dodelimo zasebanizgled i poziciju.Najlakše je da napravimo prvu stranicu , ali je nismo sačuvali kao šablonstranicu. Ovde ćemo pokazati kao se pravi stranica sa hederom,futerom i dve kolonedirektno pišući kod,kako bi polaznici vežbali HTML i CSS jezik.Koristićemo ranijepomenuti div tag za pravljenje blokova.

41

Vežba br.2 ,

Kreirati stranicu u HTML-u sa hederom,futerom i dve kolone

<div style="width:960px;">

<div style="border:1px solid blue;height:40px;margin-bottom:10px;">

Header

</div>

<div style="height:600px;margin-bottom:10px;">

<div style="border:1px solid green;height:600px;float:left;width:710px;">

Leva kolona

</div>

<div style="border:1px solid dark Red;height:600px;float:right;width:210px;">

Desna kolona

</div>

</div>

<div style="border:1px solid red;height:20px;">

Footer

</div>

</div>

Kada stranica sačuvamo kao index.html dobićemo šta smo uradili- na sledećoj strani.

Raspored koji smo želeli je: heder,futer i dve kolone.To je tek prvi korak ka izradi webstranice šablona u koju možemo unositi elemente i formatirati ih po našojpotrebi.Raspored je prikazan na slici ispod.Tu možemo primetiti da je naš sajd bar sa

42

logom bio na levoj strani ,a sadržaj u desnoj koloni.To se može lako promeniti u samomkodu, tako što levu kolonu napravimo užom recimo širine 210 px ,a desnu podesimo na710px.Ali pošto mi u projektu ne nastavljamo dizajn po ovom šablonu,ostaće kakojeste.Vi ako želite možete to da uradite i da napravite prvu stranicu kao šablon satekstom i naslovima naše prve stranice,a onda je iskoristiti za pravljenje treće i četvrtestranice.

U našem slučaju imamo jedan glavni div,koji predstavlja kontejner u kome smo definisalida širina bude 960px,a zatim u njega postavili ostale elemente . Stilovi koje smo u ovojkonstrukciji web strane koristili su sledeći:

width – definiše širinu elementa i piše se: width:710px; gde je 710px primervrednosti širine u pikselima

height - definiše visinu elementa i piše se: height:600px; gde je 600px primervrednosti visine u pikselima

43

border – ovaj stil željenom elementu daje borduru i piše se: border:1px solidred; 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: margin-right:10px; gde right predstavlja stranu elementa koja će dobiti zadati razmak, amož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š jedanelement <div>sadržaj</div> i prvom ili oboma dali parametar float:left; prvi elementbi bio zalepljen za levu ivicu, a drugi za njega. Moguće je koristiti i njegovu druguopciju - float:right; i u tom slučaju, element sa stilom float:right; bio bi zalepljen zadesnu ivicu.Za sada, elemente koje postavljamo da float-uju, obavezno se postavlja u div kojiima 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 daprimenimo ovaj šablon,i dati ime šablonu Tamplete1.

44

4.Kreirajte etabilni region tako što će te u meniju izabrati Insert>Templeteobject>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 saostalim delovima kreirane strane svakoj oblasti dodeliti drugi nazive.6.Sada otvorite stranicu na koju želite da primenite šablon7.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 upromenjivoj oblasti, uključujući i hiperveze. Ako pravite hiperveze u samomšablonu, za pronalaženje hiperveze upotrebite ikonicu direktorijuma ili alatkuPoint to File koje se nalaze na panelu Properties.Hipervezu ne smete upisivati neposredno u odgovarajuće polje na paneluProsperties, jer tada hiperveze neće raditi!. Dreamweaver automatski formiraputanje ,kada koristite jednu od ove dve metode. Na kraju snimite datoteku.

Menjanje promenjivih oblasti šablona možete kasnije da onemogućite. Iz menijaModify izaberite Templates, a zatim Remove Template Markup. Nestaće konturakoja označava oblast kao promenjivu i sada je taj deo šablona zaključan i ne možese menjati u stranama napravljenim pomoću ovog šablona.Šabloni se mogupraviti i od gotovih stranica.,što je najlakše da uradite jer imamo index.html

45

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

Sačuvamo šablon kao template 1.Mi ćemo nastaviti kreiranje sajta neštokasnije,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 napravitedrugu stranicu sajta,po postupku koji je objašnjen!

46

ALATI ZA RASPORED STRANICE

Glavni alati za raspored elemenata na web stranici su <frame>, <table>, i <div>.Okviri (engl. Frames) i njihovo korišćenje je danas veoma sporno, i većina stručnjkaih više ne koristi. Jedan od glavnih razloga je zato što pretraživači kao što su Google,Yahoo idrugi imaju problema sa takvim stranicama jer ne mogu da ih vide, ili šalju posetioce nastranice 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 morajudvaput da je pročitaju pre nego što prikažu njen sadržaj, jednom da izradestrukturu tabele a drugi put da utvrde sadžaj. Prilikom učitavanja ostalih webstranica na istoj lokaciji, ponavlja se postupakTabele se ne prikazuju na ekranu deo po deo, već se čeka da se cela tabela učita ionda tek prikažeLayers ili slojevi (engl. Divs) su elementi HTML jezika pomoću kojih se uz kaskadnestilove prave moderni, pristupačni i upotrebljivi rasporedi elemenata na stranici.

1. CSS generalno zahteva manje koda nego tabele2. Ceo CSS kod je u jednom eksternom fajlu koji se samo jednom učitava, zatim sekešira na korisnikovom računaru3. Preko CSS-a može da se kontroliše redosled po kojem će se učitavati pojedinielementi – prvo je bitno da se učita sadržaj ,pa tek onda elementi koji se sporijeučitavaju, npr. slike, zvuk, video.

8.LINKOVI ( link relativne putanje u odnosu na sopstveni sajt)

1.Link sa druge na prvu stranu.

47

. u

Drugu stranu New Arrivals stranu prikaži u SPLIT pogledu:selektovan je kod kojiodgovara hiper linku.Svaki hiperlink ima dva dela: Link one na kome napišemo recimoHome i pod navodima“#“, koji kaže gde link vodi.Ispred je a tag i na kraju spleš tag.Udizajn prikazu selektujete Home<Insert<Hiper link i za link upišemo index.html.

.

48

Za Target izaberemo _self I OK.

Uradili smo da link HOME vodi sa druge stranice na početnu stranu.Sada se vratimo udizajn pogled.

Vidimo da link ne radi kada pređemo preko njega.Ali ako pređemo na LIVE pogled i kadapređemo preko linka on se promeni, pa klikom na Home(uz pritisnuto control dugme)prešli bi na matičnu stranu ,koja je ispod New Arrivals-,a to je matična strana.

49

Takođe link radii u pretraživaču pošto uključimo taj prikaz(znak za Internet pa izaberetepretraživač,i kada kliknemo na link HOME on nas prebaci na Spring _Park to jest homepage.

2.Link sa prve na drugu stranu.

Sada ćemo napraviti LINK koji sa matične strane vodi na drugu stranu.Selektujemo link1 na drugoj stranici u polje tekst upišemo New Arrivals,kliknemo na browse pored linka inadjemo putanju i upišemo new _arrivals.html za target selfi na kraju OK . Akopređ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 prvustranu.Jasno je da će raspored linkova biti :Home;New Arrivals;Openingtimes;Admission prices ,što ćemo kasnije uraditi koristeći Java script i Spray meni.Zasada smo samo probali da povežemo strane sa relativnim linkovima u odnosu nadokument i root folder.

50

..

Sada ćemo se pozabaviti FUTEROM i obrisaćemo text na obe strane u CODEprikazu.Selektujemo sadržaj futera u kodu,kliknemo na footer u Prosperiti Inspektoru(navrhu sa leve strane) i pritisnemo delete.U footeru upišemo:©Spring Park Inc.Last updateWednesday July 4,2013.Na slici ispod ovaj tekst nije upisan pa ga vi dodajte i tako zasvaku stranu.

51

Dizajn treće stranice ,krenućemo od druge stranice na kojoj je promenjen naslov

New Arrivals, sačuvali je pod novim imenom openining_times.html,napravili jedan redprostora sa enter.Želimo da ubacimo tablicu koja obaveštava posetioce o rasporedu radaparka 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 menijaFile<Import<Tabula data i u novom prozoru došli do putanje gde se tekstualnidokument nalazi(desktop) i na kraji OK ubacuje tablicu odmah ispod naslova, kao na sliciispod :

52

Dream weaver ima dosta mogućnosti za opcije copy/paste.Ako postavimo mišaispred rečenice these kangaroosi kliknemo na <p> na statusnoj liniji rečenica ćebiti selektovana.Sa copy /paste iz menija edit može se katovati ili zalepiti na drugomesto.Ako sada pređemo na split pogled možemo izbrisati ceo paragraf izmeđudva velika naslova,sa tim ako ostavimo kod za novi red &nbsp ,po brisanju blinkerostaje između redova, jer kod čuva prored,.međutim ukoliko izbrišemo svedobićemo sledeći izgled:

53

Ako stavimo kursor recimo ispred reči These i držimo Shift selektovaće se ceotekst 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 URLadresu recimo Wikipidiju(ovo se zove apsolutna putanja).Na matičnoj strani pridnu selektujemo reč here i ubacite Hiper link.

54

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

U sledećem izlaganju modifikovaćemo link u odnosu na raniji postupak.Nastranici Opening times selektujemo drugi link pa Insert i dobijamo prozor zadijalog.U prvi upišemo New Arrivals, u drugo polje, dođemo do stranice

55

new_arrivals.html I kliknemo na nju.U Polju TARGET imamo nekoliko opcija:blank otvoriće novu stranicu u veb čitaču.Izbor SELF otvoriće stranicu na istojstranici u čitaču.Podesićemo BLANK.( sa ovom opcijom otvaramo i novi tab).Upolje TITLE upisaćemo tekst koji će se pojaviti kada mišem prelazimo prekolinka.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 potrebneispravke jer ne koristimo šablon o kome je bilo reči ranije, sačuvamo je sa Save as

56

kao admission _ price.html,i podesimo futer.Posle ispravki ostaće:

IMENOVANA SIDRA .

Ako na stranici New Arrivals dopišemo tekst Find out all about kanfaroos onWikipedia by clicking here.Ako na Web stranici kliknemo na početak tog reda ,paInsert>Name Anchor na početku reda pojaviće se znak imenovanog sidra,tjlinkujemo direktno na kraj te stranice na to sidro.

57

Na stranici ubacujemo novi red :To find out about kangaroos,see here,i od rečihere napravićemo link do imenovanog sidra.

Ako kliknemo na OK pređemo na LIVE VIEW kliknemo na here odlazimo na krajstranice,jer je tamo postavljeno imenovano sidro. LINK se ukljanja ako gaselektujemo Modifay>Romove link.Za proveru linkova koristimo Site<Check LinkSidewide gde na dodatnom panelu vidimo da li ima izbrisanoh linkova,koliko jespoljašnjih linkova i sl.

Posebna vrsta linkova su email linkovi.Na stranici Opening times dopisaćemotekst:To confirm todays opening times:send email to our office.Selektovaćemosend an email to our office,popunimo šta se traži upišemo eksterni link pošte,možete upisati email svoje firme kao na slici dole.

Klikom na link prebacujemo se na email poštu.

58

9.FORMATIRANJE TEKSTA se vršI na više načina,i to što se može

formatirati jedna reč recimo many ,koja se selektuje i pritisne dugme bold.U splitpogledu se može videti da je na mestu umetanje,kursora u tom paragrafunapisano STRONG za boldovanu reč.Takođe reč ATTRACTIONS se može centriratikomandama Format<Align<Center kao na slici.Takođe ako postavimo kursor nakraju paragrafa i pritisnemo enter, program postavlja kursor u položaj novogparagrafa.Ali ako pritisnemo Shift<Enter kursor se postavlja na početak novogreda!.

59

Na stranicui možemo ubaciti liniju koju možemo i formatirati.Ako prvo centriramoWelcome to Spring park i želimo da ubacimo liniju iznad: Insert>html>horizontalrule.Linija je tanka,ali nam Prosperiti Inspektor dopušta da je popravimo,tako što zavisinu upišemo 10 piksela a za širinu100px.

60

Kada podešavamo width možemo podesiti i procente recimo 50% a linija će bitipola dužine od cele.

Ubacićemo text za futer na stranicu home page.Kliknemo na footerInsert>Html>Specijal caracter i izaberemo Copyright i upišemo tekst.Ako želimoda ubacimo i datum Insert>Data , recimo izaberemo datum, i čekiramo Updateautomatacally on save. Pojaviće se današnji datum u futeru.

Još nam ostaje da ubacimo na futeru iste podatke za sve stranice koje smonapravili.

Na drugoj stranici smo izvršili neke promene u tekstu tao što smo ARRIVALSstavili u ITALIC font.Ako uđemo u Windows>History pojaviće se sedeća slika:

61

U History panelu vidimo koje smo sve promene i formatiranja vršili na stranici.Akomišem pomeramo klizač na gore AUTOMATSKI se vraća prvobitni izgled stranepre 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 daprogram beleži sve promene koje smo uradili na toj stranici od samogpoč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 REDObackspace.

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 Iotvori se novi prozor,klikne na Advanced Settings

62

i odredi se putanja do odgovarajućeg foldera za slike. Istovremeno se u FILEpanelu prikaže da je folder images operativan.Sada samo treba u njega stavitislike.Pošto je postavljena slika “Tri pingvina u svađi” idemo na Insert>Image ipronađemo putanju do slike.Zatim se selektuje slika i pritisne OK.

Pojavljuje se prozor koji treba da opiše datu sliku.

63

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

Slika je određene veličine u pikselima ,ali je možemo obraditi za početak uProperti Inspektoru.Pošto je slika prevelika smanjićemo širinu na 300 px i kliknutiu prostor za visinu slike.On će se automatski podesiti na 233 px jer program

64

automatski podešava vrednost.Sada je slika umanjena.

Sada možemo u samom programu kropovati sliku sa Modify>Image>Crop

Slika je dobila okvir i sada možemo birati veličinu slike ako nam je to potrebno,ilideo slike.Slika posle smanjenja ako to želimo može da se razvuče,ali ćeREZOLUCIJA biti loša.Slika se može editovati pomoću nekog drugog programarecimo pomoću Microsoft Painta sa Modify>Image>Edit width .Slika se

65

pojavljuje u Paintu.Ovde se može dalje editovati,kao što se to radi u programimaza obradu slika(kontrast,oštrina,jačina osvetljenosti i td).Iz dreamweaveramožemo takođe sređivati sliku preko Modifay>Image>Optimaze ( scharpen ilicontrast.)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žavatransparetnost,pri čemu se jedna ili više boja podešavaju tako da budu providne Ida se kroz njih vidi veb boja strane ispod nje.Format GIF se smatra formatom bezgubitaka,što znači da će slika prikazana u čitaču biti istog kvaliteta kao I kada jenapravljena.

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 dakompresija žrtvuje kvalitet slike-radi smanjenja veličine fajla.Ovo je standardanformat 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.Prednostovog formata što on omogućava slike sa milionima boja i daje providnostpozadine.Mana mu je što ne prikazuje slike u starim čitačima pre verzije4.0.Format prikazuje isti kvalitet slike i u Windows sistemima i u Macsistemima.Programi Adobe Fireworks i Adobe Flash za osnovni format koriste PNGformat,gde je transparentnost sasvim podržana.

Pogledajmo sada kako će stranica našeg dizajna izgledati na različitimuređajima,što omogućuje Funkcija multiscrean

66

Ovde vidimo prikaze strana Phone(320*3oopx)

Tablet(768*300)

Desktop(1126*276)

Ako pritisnemo dugme Viewport Size i za phone

promenimo širinu na 400 px videćemoda je prikaz za telefon bolji jer se vide oba ljenjira.

67

Veličinu prikaza koji odgovara nekom uređaju možemo podesiti i preko Edit<Preferences

Alo u prozoru preferances označimo Windows size i na njemu pritisnemo dugme + idodamo phone Sony PSP 400*270px

68

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

69

11.RAD SA TABELAMA

Raspored u dokumentu može da se radi sa tabelama, ali danas primat preuzima

CSS.Tabela se ubacuje sa

Insert>Table.Kada se podese svi parametri stisnuti OK

70

U tablicu se podaci unose direktno.Kod ubacivanja tablice postoje dva moda

1.STANDARD MODE

2.EXPANDID MODE

Red se selektuje kao u Excelu klikom na red sa leve strane,kolona se selektuje klikom nakolonu sa gornje strane.Nova kolona se ubacuje tako što se obeleži kolona ispred koje ćedoć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 prvooznači I pridisne DELETE..Da se povrati Edit>Undo resizeTakođe tabela se možeformatirati I preko Prosperiti Inspektora i to:poravnjanje,broj kolona iredova,poravnjanje teksta,border kao i širina u px.Takođe ćelije se mogu I spajati

71

(merge).komandom Modify<Table<Merge cells(predhodno se ćelije selektuju(controldugme I klik na svaku,takođe i odrediti boju pozadine.Ovo je ujedno tabela koju ćemokoristiti na stranici Admission prices.

12.SLOJEVI I CSS LAYOUT

Slojevi(Layers)su strukturni elementi Web stranice.Oni služe kao konejneri zarazne elemente..U kodu se obeležavaju sa <div>,a mogu da sadržetekst,slike,filmove i sl.Zovu se i Layout objekti jer se mogu postaviti bilo gde nastranici,jedan pored drugih ili jedni u drugima,što omogućava da se izrađuju dobridinamič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 jekombinacija 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 negoblock određene širine i visine. Koji pomoću CSS –a može biti postavljen na određenommestu.Pogledajte naredni primer. Svaki style element biti će objašnjen.Sa crvenim jedeo koda iz CSS koji je pridodat HTML-u-.Primer 1 .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>Naslov</title><style type="text/css">body { background:#000000; color:#ffffff }#mainblock { position:relative; width:500px; height:200px; background:#0000ff;color:#ffffff }</style></head><body><div id="mainblock">Ovo je mainblock</div>

72

</html>

Ovo je mainblock

U prethodnom primeru kreiran je layer (block) od 500 pixela širine i 200 pixelavisine. To je urađeno sa width: i height: style elementima. Pozicionirali smo layerrelativno (position:relative) što znači da će biti pozicioniran prema normalnimpostavkama stranice. Ako stavimo position:absolute onda će layer biti pozicioniranprema 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 ugaobrowsera. 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

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

<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 blockRezultat je:

e

75

Yellow block je smešten na 30 pixels od leva, 50 pixela od vrha donjeg layera (parentlayer). 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 tomsluč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

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

Ovo je mainblock1.Ovaj layer nije odrezanOvo je mainblock2.Ovaj layer jeste odrezan

U mainblock1 žuti layer nije odrezan. Ali u mainblock2 žuti layer je smanjen na 100pixela š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) ćeznač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

<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

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

:

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 saInsert>Layout Object, a zatim odabirom Div tag ili AP tag.

81

Lada kliknete na Div tag otvoriće se Insert Div tag dijalog box(slika ispod).U njemu postoje razna mestaumetanja:1.Before end of a tag2.At insertion point3After start of tag4.Before and of tag.1.Ako odaberte ovo polje bira se posle kog završnogtaga elementa ubacujete sloj.Recimo ako je u pitanjuBody 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 akoizaberete Body Tag DW će uneti sledeći kod:<body><div>Sadržaj za novi Div ide ovde</div><p>neki sadržaj</p>

</body>

82

Ako već postoji neki sadržaj na stranici na kojoj želite da postavite sloj,selektujter taj sadržaj I automatskise 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 elementuID-Ova opcija dodeljuje ID atribut div elementuNew CSS rules klikom na ovo dugme možete da napravite novu klasu u vašem CSS fajlu I dodelite ga divelementu dok ga unosite u dokumenat.Kada ubacujete AP Div DW automatski unosi unutrašnji CSS u Head sekciju dokumenta,sa velićinom Ipozicijom elementa.U kodu elementa se unosi div Tag sa atributom ID<div id=”Apdiv1”></div>,a takođese postavlja i marker u AP Elements panelu.Svaki sledeći AP elemenat dobija ID automatski sa vrednošćuAp Div2,I td.

Ovaj div možemo namestiti gde želimomzaokrenuti ga za 90 stepeni ili bilo koji ugao,upisati tekst,unetisliku 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 dizajnelementa jedne web strane.

83

• Stilovi definišu izgled html elemenata

• Stilovi su dodati u HTMLv 4.0

• Razni nivoi definicije stilova:

– Stil na nivou elementa (najniži nivo)

– Stil na nivou html strane

– Spoljašnji stil (eksterni file)

– Podrazmevani prikaz u browser-u (najviši nivo)

• Različiti nivoi definicije stilova za jedan isti html elemenat, na web strani će imatirazlič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 originalnojspecifikaciji html-a, što je bitno otežavalo striktno razdvajanje sadržaja i načinprikazivanja – na pr. <font> tag i color atribut .

Kao odgovor na takvo stanje, W3C – neprofitna organizacija za standardizaciju web-a jekreirala 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, madamogu biti i na web strani

• CSS u posebnim file-ovima omogućavaju da se veoma lako( centralizovano) možei po potrebi menjati način prikaza html elemenata na čitavom web site-u, kojimože imati veliki broj strana.

84

• CSS omogućavaju da se jednom definisani izgled web strane koristi na velikombroju drugih web strana što doprinosi ujednačenom vizuelnom izgledu i prikazuweb 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šeodvojenih 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, akoji čine strukturu svakog sajta osmišljen je CSS(kaskadni stil) .U sledećem kodu vidi segde treba da se nalaze tagovi koji čine strukturu sajta(div,a,span,p…):

85

<!DOCTYPE HTML><html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Naslov ove stranice</title>

<link href="global.css" type="text/css" rel="stylesheet" /></head>

<body><div id="wrapper">



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



<ul id="nav"><li>

<a href="nav2.html">nav 2</a></li><li>

<a href="nav3.html">nav 3</a></li>

</ul></div>

<div id="body">

Slike i tekst</div>

<div id="footer">

npr. ponovljena navigacija, copyright, godina itd ...

86

</div></div>

</body></html>

Tagovi koje smo koristili tiču se formatiranja i razdvajanja delova HTML-a.Problem jesamo u tome što kada razdvojimo HTML na neki od načina ,mi unapred te delove stilskiformatiramo.Ali ako želimo da naznačimo da neka logička podela postoji,ali da pri tomne želimo da je stilski identifikujemo,ovi tagovi nam nisu korisni.Umesto toga koriste setagovi div i span

Span tag je najprostiji vid logičkog razdvajanja sadržaja,i prilikom korišćenja nemaUTICAJA na sadržaj ,sve dok to ne naglasimo eksplicitno stilovima-

87

Pogledajmo primer:

Vidimo da se SPAN uopšte ne primećuje na strani sve dok se ne pogleda izvorni kodHTML-a.Ipak ako u taj span unesemo Like most Mbuna, <span style="border: 1px solid#000000; padding:3px; background-color:#FF0000; color: #FFFFFF;">demasoni arevegetarians</span> and should be fed foods high in spirulina and other vegetablecontent.

Rezultat bi bio:

Jasno je da smo span tag iskoristili da izolujemo celinu na koju želimo da primenimoodređene korekcijeAko bi u sadržaj umesto span taga koji nema uticaj na sadržaj ubacili div tag on vršiodređena formatiranja u odnosu na span tag:

Like most Mbuna, <div>demasoni are vegetarians</div> and should be fed foods high inspirulina and other vegetable content.

:Ova matrijalna osobina div taga važna je za njegovu upotrebu kod izrade dinamičkihsajtova.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 tokuizvršavanja strane )

Drugi atribut je class-( on omogućava dodeljivanje CSS klase sadržaju elementa)

5.1 Umetanje Cascading Style Sheet-a u HTML

Cascading Style Sheet može se umetnuti u HTML na 3 načina. Prvo, style

88

elementi mogu se dodati direktno u HTML tag, što se zove "inline" style sheet.Drugo, style sheet može biti deo HTML dokumenta ("internal" style sheet), ato podrazumeva direktno upisivanje u HTML dokument u <head> područje. Nakraju, može biti odvojeni "external" style sheet koji će se pozivati pomoću webadrese (URL-a) svaki put kad se HTML dokument bude učitavao. Link zaodvojeni 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

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 sedodaje .css extenzija!

UOČITE :

Ako external style sheet nije u istom direktoriju gdje je HTML dokument ondato morate odrediti bilo apsolutnim, bilo relativnim putem do fajla: LINKhref="http://myaddress.com/filename.css" rel="stylesheet"type="text/css" .

5.2 Background & Color

90

Background color:

Predefinisana boja pozadine kod većine browsera je bela. No vrlo lako jemož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

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 uCSS-u. Pogledajte sledeći style element.

UOČITE :

Ukoliko slika nije na istom serveru gde je i HTML dokument morate upotrebitiapsolutni put do fajla npr.: body { background-image:url("http://somewhere.com/image.gif") } .

Primer 6 .

92

U jedan style element može se staviti više atributa.

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

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

body { background:#000000; color:#ffff00 } označava crnu pozadinu i žuti text.Boju možete promeniti sa color:#ffff00 atributom. Dozvoljeno je iupotrebiti background:black; color:yellow .

VEOMA VAŽNO :

U svakom style elementu koji definiše boju pozadine definišite obavezno i bojutexta. To vredi i obratno. Pa npr. background: i color: bi trebali uvek ićizajedno. 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 upotrebitirazlič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

Crveni header

Normalan text je žut italic text je plav

Primer 8 .:

GROUPISANJE style elementa takođe je moguće. Pretpostavimo da želite sveheader-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

Header

5.3 Selectori

Class selector:

Class selector se dosta primenjuje u CSS-u. Pretpostavite da koristitenekoliko <h1> tagova u našem HTML dokumentu, ali im želimo pridružitirazličite boje. Ako upotrebimo vaj oblik:

h1 { color:yellow; background:#000000 } svi <h1> tagovi će biti žuti. No štaako želimo imati i žutu, plavu i crvenu? Upotrebi ćemo "class". Pogledajtenaredni 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

<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 bilokakav. Taj naziv će se kasnije upotrebiti u HTML tagu i MORA biti isti kao uStyle 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

.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

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

</body></html>

Rezultat je:

Header

Header

Header

Kad definišite ID ispred MORA biti znak # . Naziv može biti bilo kakav. Naziv kojiupotrebite 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 <h1ID="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

<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 stavimomiš na njega.A:active { color: lime; background:#000000 } link postaje lime boje kadkliknemo na njega.

NAPOMENA 1:

MORATE upotrebiti pseudo class-e po takvom redu!

NAPOMENA 2:

Takođe može se upotrebiti i ovakav oblik:

A:link { color: red; background:#000000 } = :link { color: red;background:#000000 }

102

A:visited { color: blue; background:#000000 } = :visited { color: blue;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 izW3C 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 onuza koju smatrate da je najpogodnija.

Procenti se izražavaju pomoću % znaka.

Objasnimo sada pojam margine.

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; margin-left:25pt }</style></head><body><p>neki text</p>

104

</body></html>

izgleda ovako:

neki text

NAPOMENA :

Postoji i skraćeni oblik p { margin-top:25pt; margin-right:25pt; margin-bottom: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 30ptp { margin:25pt 30pt 35pt } označava top 25pt - right 30pt - bottom 35pt -left30pt

'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

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 ipravougaonika unutar kog je sadržaj.

NAPOMENA:

Skraćeni oblik je sličan kao za marginuh1 { padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px } je isto kao h1 { padding:20px } . Sav padding je 20px.

Border

Border width: 'border-top-width', 'border-right-width', 'border-bottom-width','border-left-width' i 'border-width'

Border-width određuje debljinu okvira. Vrednosti mogu biti: thin, medium,thick ili fixed.

Border style: 'border-top-style', 'border-right-style', 'border-bottom-style','border-left-style' i 'border-style'

Border-style određuje izgled okvira. Vrijednosti su: none, hidden, dotted,dashed, solid, double, groove, ridge, inset, outset.

106

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

Border-color određuje boju.

Isprobajmo sada sve border style elemente:Primer 15 .

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

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

</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 NewRoman, Serif. Nije potrebno koristiti više od jednog fonta no dobro je font-family attribut završiti sa "generic" family.

"generic" family može biti: serif, sans-serif, cursive, fantasy ili monospace.

Ako browser pročita ovaj style sheet: p { font-family: Verdana, Arial, 'TimesNew Roman', serif } uzima prvi font u nizu, tj. font Verdana. Ako takav font nepostoji na korisnikovu računaru, browser uzima naredni, Arial itd. Ako ne nađeniti jedan, upotrebiti će "generic" font koji je u normalnim okolnostima uviekprisutan 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 unavodnike: npr. 'Times New Roman', 'Book Antiqua'.

font-style

Ovaj style element ima 3 moguće vrednosti: normal, italic ili oblique (normal iliitalic 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

<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

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

neki bold text

ovo je light text

font-stretch

Moguće vrednosti: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded |extra-expanded | ultra-expanded |NAPOMENA :

Ovaj style element radi samo ukoliko određeni font-family podržava ovevrednosti.

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 ]

daljinaprocenat

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

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

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

text-decoration

Određuje dekoraciju texta.

Vrednosti none | underline | overline | line-through | blink

Primer 23 .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>Naslov</title><style type="text/css">body { background:#000000; color:#ffffff }p { text-decoration:underline }div { text-decoration:line-through }h5 { text-decoration:overline }</style></head><body><p>podcrtani text</p><div>precrtani text</div><h5>nadcrtani text</h5></body></html>

Rezultat je:

podcrtani text

precrtani text

nadcrtani text

letter-spacing and word-spacing

115

Vrednosti: normal | daljina

Primer24 .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd"><html><head><title>Naslov</title><style type="text/css">body { background:#000000; color:#ffffff }p { letter-spacing:5pt }em { word-spacing:10px }</style></head><body><p>sva slova imaju razmak 5 point-a</p><div>sve reči imaju razmak od 20 pixel-a</div></body></html>

Daće:

s v a s l o v a i m a j u r a z m a k 5 p o i n t - a

sve reči imaju razmak od 20 pixel-a

text-transform

Ovaj atribut kontroliše velika i mala slova.

Vrednosti: capitalize | uppercase | lowercase | none

Primer25 .

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

116

<html><head><title>Naslov</title><style type="text/css">body { background:#000000; color:#ffffff }h1 { text-transform: uppercase }p { text-transform:capitalize }div { text-transform:lowercase }</style></head><body><h1>header velikim slovima</h1><p>prvo slovo svake reči veliko</p><div>SVA SLOVA MALA<div></body></html>

Vide ćete:

HEADER VELIKIM SLOVIMA

Prvo Slovo Svake Reči Veliko

sva slova mala

15.KASKADNI STILOVI U DREAMWEAVER-u

Već smo videli da Cascading style sheets (CSS) nudi mnogo više kontrole naizgledom i pojavljivanjem elementa na Web stranicama, tako što implementiraniz pravila koji opisuju ove elemente. Korišćenjem stilova , preventivnospreĉavamo da se pojavljivanje teksta na stranici određuje politikom

117

preglednika (browser-a) koji prikazuje stranicu. Videli smo da možeme dakoristime stilove za izgled teksta (boja, veliĉina i stil) za razliĉite naslove,podnaslove, napomene,tablice itd. Čak i da browser prikaže tekst u drugom fontu,ostala podešavanja će ostati nepromenjena, odnosno onakva kako ste ih videfinisali.

Konaĉno uz stilove možemo da kreiramo i svoje klase , koje nam praktiĉnoomogućavaju da stvaramo sopstvene tagove.Poćićemo od praznog dokumenta,čijikod je prikazan na slici.Kreiraćemo glavni paragraf i jedan div I to:

atributom class i imenom main_paragraf ,i još jedan div sa atributom ID koji definišeovaj paragraf..ID paragram je prvi fudamentalni koncept CSS-a.Drugi isto važan konceptje unutar body sekcije.Zatim smo ubacili DIV što u prevodu znači konejner<div> i nakraju sleš</div>.Vidimo da svaki div ima svoju indentifikaciju.Ako pređemo u design

pogled,slika ispod:vidimo dva diva,

118

prvom piše Hallo World iu statusnoj liniji liniju tekst za prvi div.Ako kliknemo na prostor drugog diva dobićemoslično:

Ž

Sada ćemo se pozabavi hederom ,prvo smo stavili naslov CSS title i dodali stil.Zatim smosa .body{backgraund-color:#3CF;} promenili pozadinu u svetlo plavu,kao na slici ispod..

CSS stile čine kao što smo već objasnili dva glavna dela 1. SELECTOR u našem slučajubody i 2. DEKLARACIJA koju ubično dele na dva dela:SVOJSTVO(backgraund- color) iSAMU VREDNOST value “3CF

Body {backgraund-color:#3CF;}

Definisaćemo css stilove za part 1 i part 2.,što se vidi u 8 i 9-om redu CODE prikaza.

119

Promenili smo boju diva 2 u crvenu #F33i .Ako za svaki div dodamo po dva paragrafa i uprvom divu postavimo centralno poravnjanje, a iza paragrafa stavimo zarez( p,) svi će seporavnati.

To se može videti na slici ispod:

120

Vratićemo se na naš sajt.Predhodno smo uveli nove stilove u dokument i pokazali kako

se menja pozadina,poravnjanje I slično.Ako se vratimo na matičnu stranu našeg sajta iuđemo u Code pogled vidimo da je program ubacio naš stil. text/css(slika iznad šesti

red).Da bi promenili boju pozadine stranice idemo u Code pogled nađemo .conteiner

Po unošenju promena za širinu 800px promenom boja iz paleta boja koji sam otvaraprogram, uzeli smo boju #6F6,stranica menja svoju pozadinu.

121

To međutim ne znači da će sve stranice promeniti boju.Da bi to uradili moramo danapravimo Svoj Css stil i da ga zatim primenimo na ostale stranice.Za sada ćemo ponovopodesiti širinu kontejnera na 960 px.Otvorićemo CSS panel i na kartici All selektovati svapravila koja smo koristili.Desni klik na njih pa kliknemo Move to folder i izaberemo A

new sheet stayle

122

i pritisnemo Save.Ako sada u CSS panelu kliknemo na svoj CSS koji smo napravili,vidimoda se pojaviou naslovnoj liniji dokumenta.

.

Vratićemo se na home page stranicu.Ako uđemo u Code pogled, vidimo celu sekciju zaSTILOVE!Pošto nam više neće trebati obrisaćemo je.

123

Pređimo sada na drugu stranicu New Arrivals.Ako selektujemo sve od style title do

kraja završno sa >/head> i obrišemo, pa uđemo na MODIFY>CSS otvoriće se panel u

kome pritisnemo ikonicu Attach External Style Sheet.Pronađemo svoj stil sa browse uprozoru i pritisnemo OK.U CODE pogledu vidimo da se pojavio link koji je naša veza sanašim springpark01.css.,slika iznad,selektujemo liniju sedam .Ako se vratimo u Designpogled vidimo da jer STIL delovao na stranicu sa svim našim postavkama iz CSS-a-To sadatreba uraditi i sa ostalim dvema stranicama.

Ostale dve stranice istim postupkom dobijaju svojstva našeg stila,kao i dve predhodne.

ZAKLJUČAK :U ovom postupku vidimo smisao CSS kaskadnog stila.Pošto smo napravilinovi eksterni CSS springpark01.css i primenili ga na HOME stranicu, morali smopostupak da ponovimo za svaku stranicu zasebno.Ne postoji način da se bez ubacivanjalinka koji vodi do kreiranog stila ,promeni izgled stranice ,kako mi želimo.Mora se raditisa svakom stranicom kao kaskadom.

124

16.IZRADA NOVOG CSS PRAVILA ,

mogu

Ova pravila koja pravimo važiće za tabele,mada mogu važiti za slike,tekst I td..Ako u CSSpanelu kliknemo na dugme New CSS Rules dobićemo prozor koji smo popunili kao naslici,zatim kliknemo OK.

Pošto smo kliknuli OK dobićemo novi prozor:

125

Tablica ispod je modifikovana, a u CSS panelu pojavilo se info_table.Klikom na ovaj stilvidi se koje su promene uvedene.Ako želimo da napravimo klasu idemo na split pogled,kliknemo na tabelu i obrišemo sve u redu gde su osobine za Weight i Border i na tommestu dodamo CLASS=”,pojaviće se padajući meni na kome dva puta kliknemo nainfo_table što se automatski unosi u kod i, na kraju Refresh.Tablica home dobija novizgled.Sve ovo treba da ponovimo i na 121stranici , gde je tablica Addmision price.

Ovo je novi izgled tablice home sa 103 strane ,a ispod novi izgled stranice AddmisionPrice:

126

17.KORIŠĆENJE SPRAY MENIJA

SPRAY vidžet je sastavni deo ovog programa i napisan je u JAVA SCRIPTU.Pomoću ovogprograma napravićemo nov izgled linkova i posle toga proveriti da li oni rade.Ovomožemo raditi za svaku stranicu zasebno,ili kada napravimo za jednu stranicu,samo trebakopirati i ubaciti Code u Java script na pravo mesto.

127

Prvo u izvornom kodu obrišemo deo programa od sidebar1 do kraja .,ili predhodnoselektujemo linkove a program će sam u code pogledu označiti deo koji se odnosi nalinkove.Zatim idemo na Insert>Spray>Spray meni bar.Prvo moramo da otvorimo novifolder,kliknemo dva puta na Spring park- glavni folder u CSS panelu, i otvorimo novifolder Spray Assets,i sada treba sačuvati ovaj folder sa:Manage Site>Edit>Advance

settings>Spray pronađemo folder u pu tanji>Save >DoneVidimo da se Spray meni bar se pojavio u CSS panelu

Pojavio se nov meni linkova na stranici, a u Prosperiti baru i boksovi za uređenjelinkova,gde možemo dodati novi link,ili neki ibrisati sa navigacijom ,koja ide uznjega.Linkovi koji imaju strelicu desno,pokazuje da se na njih može dodati sub link.

128

Izgled Prosperiti bara u kome smo podesili prvi link je ovakav,item 1,2,3 ,uklonimo saminusom -;sa plusom dodajemo nove pod linkove.

Međutim stranica New Arrivals ima pod link:Kangaroos ,pa treba samo dodati + i upisatisve , samo na mestu linka dodati #Kangaroo_Wikipedia.html.

Kada smo ovo uradili treba isti odraditi i za ostale dve stranice,pa će svaka stranica dobitiiste linkove i jedan podlink Kangaroos:Sledeći korak je srediti prostor oko Spraymenija.,što će nam pomoći Prosperiti inspector.!

129

Da bi uklonili oker boju okolo, koristićemo Prosperiti Inspektora sa klikom Live>Inspect ipređemo mišem preko te površine.U CSS panelu u delu Prosperities u jednom reduprikazana je oker boja.Selektujemo taj red i dilitujemo,dobićemonovi izgled okolinkova,slika dole.

Program će automatski( jer imamo externel CSS pravila) napraviti izmene i u ostalimstranicama.Sad nam prestoji da sredimo izgled dugmadi u Spray baru.Ponovo pređemo uLIVE uključimo Prosperiti Inspektora i selektujemo dugme recimo Opening time.NaCurrent kartici panela u dnu se pojavljuje red sa kockicom u plavoj boji,klikenmo na nju iizaberemo tamno zelenu #030.Ukoliko ne želimo belu pozadinu Spray menija, idemoklik recimo na neko dugme,pređemo u SPLIT pogled,a na kartici CSS panela uđemo u All ičekiramo Meni Bar vertical a,zatim promenimo boju u #096.Automatski sa Saveall,čuvamo promene istog i sada na svim stranicama imamo uređen bar.

130

Sada nam predstoji da uklonimo logo jer želimo sliku preko cele dužine, a to je 960px.Logo se uklanja tako što se obeleži,uđe se u SPLIT pogled i dilituje taj script.

Pošto je uklonjen- na isto mesto ubacujemo već spremljenu sliku,Insert>imageizaberemo putanju i kada se slika ubacu ,sredimo je ,što smo ranije pokazali u Prosperitisoknu,tako što prvo otključamo bravicu pa podesimo širinu na 960.Kada kliknemo navisinu program automatski podešava visinu. Od oko 200px,međutim slika je razvučena Iloše je revolucije.Za to nam je potrebna slika rezolucije 3500*700px,a ako je nemamomože se odabrati odgovarajuća baner slika recimo 960*200,što je kasnije i urađeno.Ovaslika baner- ispod je privremena.

131

Kod uklanjanja loga važno ga je selektovati i obavezno kliknuti na tag a u statusnoj linijidokumenta dole,iznad linije Prosperiti bara.Kada kliknemo na tag a kursor se u izvornomkodu postavi tačno NA MESTO OD KOGA DILITUJEMO SCRIPT!Isto važi i za drugetagove,mada isto to možemo raditi i ručno.Uvek, ako se nešto pogreši imamoEDIT>UNDO,ili korišćenje HISTORY PANELA,o čemu je bilo govora ranije.

18.VALIDACIJA I PROVERA LINKOVA

Da bi proverili linkove idemo na Windowss>Results>Link Checker.Pojaviće se nov panona dnu na kome ima više opcija.Ako kliknemo na link checker i zatim pritisnemo maluzelenu strelicu levo u vrhu ,dobićemo koji su linkovi na kojoj strani prekinuti.

132

Vidimo da je na matičnoj strani u pitanju link koji vodi do New Arrivals, a sa nje naWikipediju, pritiskom na link na toj strani.Kada kliknemo na broken links pojaviće sefascikla u kojoj treba da odredimo novu putanju i problem je rešen.Zatim se ovo ponoviza svaku stranicu.Provera linkova je veoma važna ,jer kada uplodujemo sajt na server,najveći problem je da ne radi neki link!Sledeći korak je validacija.Ako kliknemo naValidation dugme I zatim na zelenu strelicu gore desno -pojaviće se šta u KODU nijedobro.Grešku treba ispraviti za svaku stranicu.U našem slučaju postoji problem u 16 redukoda.

Prijavljeno je da je potrebno da se atribut alt specificira.Uđemo u kod i u redu 16ispravimo grešku.Isto se treba ponoviti za svaku stranicu.Zatim je potrebno izvršitiproveru sajta sa Site>Reports

Čekirali smo potrebne provere I WRC centar šalje izveštaj.Važan je na kraju i izveštajClean up HTML,koji će sam izvršiti potrebna čišćenja i potom datiizveštaj.Ovo se radikomandom Commands>Clean up HTML

133

Pre postavljanja sajta, ako imate hosting uplaćen možete testirati sajt,ali o tome će bitireči kasnije.

19.IZRADA FORME I VALIDACIJA FORME .

HTML Forme

HTML forma je deo dokumenta koji u sebi može da sadrži elemente forme kao što surazna polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl.

Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>.

Evo jednog jednostavnog primera forme koja sadrži dva elementa:

<form><input><input>

</form>

U pretraživaču bi to izgledalo ovako:

Tag <form> i tagovi <input> mogu imati niz atributa koji ih bliže definišu.

Primer:

<form>

134

Ime :<input type="text" name="ime"><br>Prezime:<input type="text" name="prezime"></form>

U pretraživaču će to izgledati ovako:

Ime :

Prezime:

Tag <input> se koristi i za definisanje dugmića (buttons) koji imaju različite oblike iupotrebu.

Akciono dugme

Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi,startovanje nekog javsript programa i sl.

Akciono dugme se kreira na način prikazan u sledećem primeru:

<form><input type="button" name="dugme" value="Start" onClick="Akcija"></form>

Ovako bi to izgledalo u pretraživaču:

Radio dugme

Radio dugme se koristi kada želite da pravite izbor između malog broja opcija , kao usledećem primeru.

<form>

134



Ime :

Prezime:


Akciono dugme





Radio dugme


<form>

134



Ime :

Prezime:


Akciono dugme





Radio dugme


<form>

135

<input type="radio" name="pol" value="muski"> Muski<br><input type="radio" name="pol" value="zenski"> Zenski</form>

Ovako to izgleda u pretraživaču::

Muski

Zenski

Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme.

Checkbox dugme

Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjegskupa kao što to pokazuje sledeći primer:

<form>Šta sve imam?Imam bicikl:<input type="checkbox" name="vozilo" value="Bicikl"><br>Imam auto:<input type="checkbox" name="vozilo" value="Auto"><br>Imam avion:<input type="checkbox" name="vozilo" value="Avion"></form>

A evo kako bi to izgledalo u pretraživaču:

Šta sve imam?

Imam bicikl:

Imam auto :

Imam avion:

136

Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku odradio dugmića gde birate samo jednu opciju).

Slanje sadržaja forme serveru

Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristidugme tipa "submit" a u tagu <form> se dodaje atribut "action" kojim se definiše koji ćeprogram na serverskoj strani preuzeti poslate podatke. Atributom "method" definiše semetod slanja podataka koji može biti "get" ili "post".

Evo primera:

<form name="input" action="http://osnove-programiranja.com/vezbe/login.php"method="get">Korisnik:<input type="text" name="korisnik"><input type="submit" value="Submit"></form>

Ovako to izgleda u pretraživaču:

Korisnik:Submit

Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraživač ćeposlati vaš podatak serveru na kojem će se aktivirati program login.asp koji će preuzetiposlati podatak i sprovesti odgovarajuću akciju.

137

20.IZRADA FORME U DREAMWEAVERU -Ubacićemomo formu sa

imenom,telefonom,emailom,komentom i dugmetum potvrdi(submit).Prvo treba ubaciti

Tabelu, jer pomoću nje je bolji dizajn i izgled ubačene forme.Kada se ubaci tabelakliknite na strelicu leve kolone ,pa column left i centrirajte je udesno pomoću ikone alignright na Prosperiti baru.Zatim to isto uradite sa desnom kolonom ,samo nju centrirajteulevo.Kliknite u prvu ćeliju pa Insert>Form>Insert text field

Za ID upišite name,za Label Name

138

Za telefon izaberite text field za ID ipišite phone, za Label name Phone i OK.Za i meiltext fild polje,ID stavite email za Label stavite Email pa OK.Za poruke izaberite text areaza ID stavite comment ,za Label name stavite Comment.U petoj ćelijiinsert>form>butons OK,pojaviće se dugme submit.Pošto se i ime i polje smešteni u celojćeliji,selektujte Name belo polje prevucite u susednu desnu ćeliju kada se pojavi rozeblinker u toj ćeliji.otpustite miša..To isto uradite i sa ostalim poljima.

Sada sledi validacija ove stvorene forme.Selektujte bilo gde u tablici,pa naStatusnoj linijidokumenta pritisnite form form 1.Zatim idite na Windows>Behevior.Pritisnite znak plus

.

Pa Validate form.

139

Sada za svaku stavku potvrdite Required i za:

Name- upišite 0anything

Phone-number

Email-email addres

Coment-anything

Pređite na vaš pretraživač da vidite da li forma deluje.Ako ne ubacite ništa dobićeteporuku šta je potrebno,a kada pritisnete submit automatski će biti izbrisana sva polja Ispremna za novi unos.

21.UBACIVANJE MULTIMEDIJA

Dreamweaver lako unosi Flash fajlove,muzičke i video fajlove,pri čemu program samusklađuje atribute,koji određuju kako će ti fajlovi biti prikazani na Web stranici.Postojinekoliko tipova Fleš fajlova koji se ubacuju na stranicu:

1.Flash fajlovi ili Flash filmovi sa exstenzijom.fla

140

2.Fajlovi sa extenzijom .swf(small web format) ,ovo su kompresovane verzije .fla fajlovakoje se mogu prikazati u DW-u u pustiti da rade u Web čitačima.Takođe ove fajlovekoriste i Flash buttons o Flash tekst.

3.Fajlovi sa ekstenzijom .flv(Flash video fajlovi) sadrže enkodirane audio i video podatkekoji omogućavaju da ih emituje Flash player.

1.UBACIVANJE FLASH FILMOVA

Pre nego što ubacite Flash fajlove u DW morate prvo kreirati fajlove sa. swt extenzijom unekom programu,recimo ja koristim program Free video to Flash convertor.Dodate fajlrecimo u mp4 formatu,i pritisnite Convert.Program edituje fajl sa ekstenzijom .swf ili.flv,sačuvajte video fajlove a, kasnije ih možete ubaciti u DW.

Da biste ubacili .swf fajl u DW postavite kursor tamo gde želite da ubacite fajl, pa zatimInsert>Media>swf

,

141

Dobro je da bar date ime filmu ,ali ako pritisnite Cancel. film će se ipak ubaciti nastranicu,što nije slučaj recimo sa slikom.

Da biste videli kako izgleda film zajedno sa sadržajem stranice kliknite na sliku iznad Ipojaviće se Properti Inspektor koji ima dugme Play.Film će se pokrenuti u dizajn prikazu.

142

U Prosperiti Inspectoru ima doste opcija gde se može kontrolisati podešavanje Flashfilmova.U levom gornjem uglu prikazuje se tip fajla i veličina ,a program sam ubacije ID, ito Flash ID.Ovo je polje editabilno tako da možete da upišete i svoj ID.Ostale opcije su:

Weght I Haight-širina i visina ubačenog objekta u pikselima.

File-ovo polje prikazuje putanju do swf objekta.

Src-ovo polje pokazuje lokaciju originalnog .fla fajla koji je korišćen pri kreiranju swfobjekta.

Bg-Ova opcija unosi parametar u <object>Tag i podešava pozadinsku boju swfobjekta(boja koja se vidi u pozadini filma)

Edit- Ova opcija otvara .fla fajl za editovanje,ali da bi radila,src polje MORA BITIPOPUNJENO.

Class-Omogućuje da primenite CSS klasu na<object> Tag

Loop-Ova opcija vrti film neprekidno,po završetku počinje ponovo.

Autoplay-Film se automatski pokrećr kada se Web stranica prvi put pokazuje.

V Space i H space-Ova opcija postavlja vertikalan i horizontalan prostor oko filma,oveatribute je poželjno dodeliti preko CSS fajla.

Quality-Ova opcija kontroliše izgled filma za vreme plejbeka,pri čemu postoje sledećapodešavanja:

High-Određuje najbolji kvalitet filma,ali troši resurse

AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali žrtvuje izgled ako jepotrebno više brzine.

Low-Selektujte ovu opciju ako vam je značajnija brzona od kvaliteta.

AutoHigh - Ova opcija daje prioritet u izgledu i brzini, ali žrtvuje izgled ako je potrebnoviše brzine

o AutoLow - Prioritet je na brzini, ali kad god je moguće popravlja kvalitet filma Scale - Određuje kako se film prikazuje u H i W dimenzijama.o Default (Show All) - Ceo film se prikazuje sa svojih 100%.

143

o No Border - Bilo koji delovi filma koji se pružaju preko podešenih W i H dimenzija suisečeni.

o Exact Fit - Zbija film u specificirane dimenzije bez obzira na originalnu veličinu filma. Align - Određuje poravnanje filma relativno u odnosu na stranicu. Wmode - Ova opcija postavlja Wmode filma u prozoru čitača, što preventuje konflikte

sa DHTML elementima kao što su Spry Widgets. Postoje sledeće opcije:o Window - Forsira swf iznad svih elemenata stranice.o Opaque - Difoltna opcija, dozvoljava DHTML objektima kao što su na primer padajući

meniji da se korektno prikazuju preko filma.o Transparent - Forsira DHTML elemente da se prikazuju ispod filma.

DW postavlja svetao plavi okvir iznad swf objekta u dizajn prikazu sa ikonicom otvorenogoka u desnom uglu Taba.Kada kliknete na tu ikonicu otvara se sadržaj da korisnik nemaodgovarajuću verziju Flash Playera.

2.UBACIVANJE FLASH VIDEO FAJLOVA

Flash video fajl je drugačiji od regularnog swf objekta jer ima .flv ekstenziju što vamomogućava da dodate već gotov film na Web stranicu. Potrebno je samo da enkodiratedruge formate video fajlova u .flv format i insertujete ga tako što ćete kliknutina Insert stavku u meniju aplikacije, zatim na Media, zatim na Flv opciju. Ova opcija vamomogućava da unesete .flv fajl bez korišćenja Flash aplikacije i omogućava da Web čitačipokrenu unešeni video sa prikazanim playback kontrolama. Otvoriće se Insert Flv dijalogboks sa malo drugačijim opcijama u zavisnosti ,da li za Video Type birate ProgressiveDownload ili Streaming Video.

144

Klikom na browse pronađemo željeni fajl.Skin ćemo promeniti u skin1,a za dugmad desnolevo,stop pauza podesimo nove vrednosti 400*300 što će biti širina i visina samog plejera,čekiramo auto play ako želimo da ide video odmah pri učitavanju strane čekiramo Autoplay.Pritisnemo OK I na stranici će biti ubačen video fajl.

22.CODE INSPECTOR,CODE TOOLBAR I CODE HINT

Code Inspector možete otvoriti tako što ćete izabrati Windows>Code Inspector dugme izmenija aplikacije,a takođe i prečicom F10 sa tastature. Code Inspector vam omogućavada vidite tekući kod stranice u posebnom prozoru.

145

Dostupne opcije su većinom opcije koje takođe postoje u prozoru Code prikazadokumenta.

1.Coding Toolbar.

Po difoltu Coding Toolbar je prikazan na levoj strani dokumanta u Code prikazu stranice.Takođe je dostupan u Code Inspector-u i nalazi se isto na levoj strani prozora. CodingToolbar se ne može otkačiti i premestiti na neko drugo mesto, ali se može isključiti prekoopcije View->Toolbars->Coding.U Coding Toolbar-u postoje sledeće opcije:

Open Documents - Kada kliknete na ovo dugme, izlistaće vam se svi trenutno otvorenidokumenti zajedno sa njihovim putanjama. Ovo je korisna opcija ako imate višeotvorenih File-ova sa istim imenom, pa preko putanje možete lako odrediti koji je File.Klikom na njega on postaje dostupan. Nije više potrebno da pogađate File.

Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi zaprikazivanje liste CSS pravila koja su primenjena na selektovani element na stranicizajedno sa detaljnim kodom koji dobijate u vidu Pop up prozora kada pređete mišempreko određenog pravila. Kada kliknete na neko od pravila u Code Navigator-u, otvaravam se CSS File sa postavljenim kursorom tačno na početak tog pravila.

146

Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi vaškursor i kolapsira sav kod koji je u njemu.

Collapse Selection - Ova opcija kolapsira selektovani kod.

Expand All - Kliknite na ovu opciju da biste proširili sve kolapsirane sekcije.

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

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

Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija u Code prikazu.

Highlight Invalid Code - Dreamweaver ističe žutom bojom nekorektno ugnježdene Tag-ove. Ovo dugme uključuje/isključuje žutu boju u Code prikazu. Difoltna opcija je OFF.

Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute trake navrhu prozora dokumenta. Ovo dugme uključuje/isključuje ovu opciju.

Apply Comment Tag - Ova opcija omogućava unos različitih tipova Comment Tag-ovau tekuću liniju ili selekciju.

Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz tekućelinije ili selekcije.

Wrap Tag - Ova opcija omogućava brz način za primenu Tag-a oko tekuće selekcije.

147

Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippet-i iz Snippetspanela.

Move or Convert CSS - Ova opcija omogućava brzo prebacivanje CSS pravila u CSS File.

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

Outdent Code - Ova opcija pomera otvoreni Tag elementa u levo (Shift + Tab) . Format Source Code - Kada kliknete na ovo dugme, otvara se meni sa opcijama

pomoću kojih možete da primenite difoltno formatiranje na stranicu ili trenutnoselektovan kod, zatim imate brz pristup kategoriji Code Format u Prefernces panelu. TagLibrary Editor vam omogućava kontrolu nad formatiranjem svakog HTML elementa uvašem kodu.

2.Code Hint .

Po difoltu Dreamweaver prikazuje Content-sensitive code Hint-ove u Code prikazu. Naprimer, ako krenete da otvarate ugaonu zagradu posle otvorenog <body> Tag-a, otvorićese sadržajni meni i prikazaće vam sve validne HTML Tag-ove. Možete skrolovati dole dabiste pronašli odgovarajući Tag i dvoklikom na njega uneti ga u kod dokumenta. Drugaopcija je da nastavite sa kucanjem, na primer ako unosite div Tag, ukucajteslovo d zatim i, selektovaće se div u meniju, pritisnite Enter na tastaturi i Tag će bitiunesen u dokument.

148

Kada pritisnete Space bar na tastaturi, otvoriće se drugi Context meni, samo što će ovogputa prikazati sve validne atribute za tekući element. Ako unosite ID elemente,Dreamweaver će uneti id=““ i postaviti kursor između znaka navoda da biste vi unelivrednost za ID. Ako unosite klasu koja je već definisana u CSS-u, Dreamweaver ćeautomatski prikazati sve dostupne klase koje možete da izaberete. Context meninastavlja da se pojavlju sve dok ne zatvorite ugaonu zagradu. Ako se slučajno ovaj meniizgubi, pritisnite Ctrl + Spacebar da bi se opet pojavio.

23.KREIRANJE FORMULARA .

Da biste kreirali formular u Dreamweaver-u, postavićete kursor na mesto gde želite daunesete formular. Kliknite na Insert dugme u meniju aplikacije, zatim izaberiteopciju Form, zatim opet Form. Drugi način je preko Insert panela, izabraćetekategoriju Form i kliknete na Form dugme.

150

Ako se nalazite u Code prikazu, otvoriće se Tag editor – Form dijalog boks.

Ako se nalazite u Design prikazu, Dreamweaver će uneti crvenu isprekidanu liniju uobliku pravougaonika, a u Code prikazu sledeći kod.

<form id="form1" method="post" action=""></form>

Property Inspector će prikazati opcije za formular.

Form ID - U ovom polju unesite jedinstveno ime formulara . Action - U ovom polju unosite ima skripte koja će procesirati formular. Kliknite na

folder ikonicu da biste pronašli lokaciju skripte. Na primer dosta formulara koristi CGIskripte koje se nalaze na serveru unutar CGI foldera

.

151

Method - Ovde birate kojim ćete metodom poslati serveru sakupljene podatke izformulara.

o Default - Ova opcija koristi difoltna podešavanja čitača da bi poslala informacije saformulara. Difoltni metod je obično, ali ne i uvek GET metod. Zato je bolje daspecificirate ili GET ili POST metod, a ne difolt.

o

o GET - Podaci iz fome se ovom opcijom šalju na server kao dodatak URL-u. Pošto jeomogućen Bookmarking kod ovog URL-a, tada su i informacije podložne napadimahakera. Pošto URL može da ima maksimum 8192 karaktera, ovaj metod nije podesanza duže formulare.

o

o POST - Ovaj metod krije podatke formulara unutar HTTP zahteva čime se sprečavaBookmarking stranice. Ipak podaci nisu šifrovani i stoga su podložni napadima hakera,tako da ako neko sakuplja personalne informacije kao što su korisnička imena, lozinkeili brojevi kreditnih kartica, budite sigurni da koristite bezbednu konekciju do sigurnogservera.

o

Enctype - Ovo polje je opciono i po difoltu je prazno. Za POST metod izaberiteapplication/x-www-form-urlencoded ili kada imate File upload polje u formularuizaberite Multipart/form-data tip.

Target - Omogućava da odredište bude drugi prozor ili ram (Frame) u odnosu na tekući.U tom drugom prozoru ili ramu se prikazuje HTML strana koja se dobija nakon obradepodataka.

Formular možete organizovati na stranici pomoću tabela ili preporučljivo pomoću CSS-a.

U formulare možete ubacivati objekte kao što su tekstualna polja, polja za potvrdu,radio dugmad, Submit dugmad itd. Takođe, unutar formulara možete ubacivati ielemente koji nisu vezani za formulare kao što su slike, tekst ili tabele.

Svaki objekat formulara ima svoje opcije u Property Inspector-u. Posebnu pažnju trebaobratiti na imena objekata formulara, pošto skript koji obrađuje tu formu može zahtevatiodređene konvencije u imenovanju. Ne treba koristiti razmake i specijalne karaktere.Zatim, nije loše da koristite imena koja jasno identifikuju ulogu frormulara ili objektaformulara. Korisno je da napravite svoje konvencije za zadavanje imena i pridržavajte setoga. Ili nemojte uopste koristiti velika slova, ili ih koristite na konzistentan način, ilikoristite povlake između reči ili ih spajajte zajedno. Na taj način ćete lakše upamtiti

152

imena koja zadajete i izbeći greške u kucanju. Takođe, treba da znate da skrptovi koji sekoriste za procesiranje formulara imaju rezervisane reči, koje imaju specijalno značenje,a koje mogu dovesti do problema.

24.BEHAVIORS(PONAŠANJA) .

Instalacija Dreamweaver-a dolazi sa oko 20 predinstaliranih ponašanja (engl. Behaviors)koje možete da koristite kako biste ugnjezdili Client Side Java Script kod u vaš dokument.Većina ovih skripti dozvoljava korisniku da interaguje sa sadržajem na vašoj stranici.Behaviors su tipično sastavljeni od događaja i akcija, koje pokreću te događaje.

Behaviors se mogu dodati na Web stranicu koristeći Behaviors Panel. Svi imaju svojdijalog boks koji vas vodi kroz proces unosa potrebnih podataka. Da biste otvoriliBehaviors panel, kliknite na Windows dugme u meniju aplikacije i izaberite opcijuBehaviors. U Dreamweaver-u CS6 Behaviors panel je ugnježden sa Attributes panelomunutar Tag Inspector panela.Do panela se dolazi sa Windows>Behaviors.

153

Behaviors panel postaje aktivan kada imate otvoren dokument u prozoru radnogprostora. Da biste saznali nešto više o već primenjenim ponašanjima, selektujeteelement ili Tag na koji je primenjen Behavior na Web stranici, i on će se pojaviti ulistingu Behaviors panela. Kada se događaj sastoji od više akcija, one su izazvane premaredu u kome se nalaze na listi. Tipično Behaviors su pridodati Tag-ovima za tekst, slike, alimožete i da ih primenite na <body> elemente, linkove, polja formulara.

Meni akcija u Bahaviors panelu se dobija klikom na + dugme. Tada će se izlistati svapresetovana ponašanja.

Dva faktora utiču na to koja će ponašanja biti dostupna, a koja nedostupna:

1. Koji objekat ili element na stranici je selektovan pre nego što kliknete na + dugme.2. Koji čitač je slektovan na dnu Actions menija u opciji Show Events For. Čitač koji je

selektovan određuje koji su događaji podržani i prema tome prikazuje akcije koje sudostupne.

154

1.Kako se dodaje Behavior (ponašanje)?

Dodavanje Behavior-a elementu u Dreamweaver-u je prilično jednostavno i sastoji se iznekoliko koraka. Najkraće rečeno, selektujete objekat ili tekst na stranici, izabereteBehavior u Behaviors panelu, popunite polja u dijalog boksu tog Behavior-a koje steizabrali i proverite da li Event Hendler odgovara vašim potrebama.

Editovnje i brisanje Behavior-a se vrši u Behaviors panelu desnim klikom miša naBehavior.

2.Drag AP Element Behavior

Ako koristite AP Div slojeve na vašim Web stranicama, postoji jedan interesantanBehavior Drag AP Element koje omogućava da posetioci Web sajta pomeraju irepozicioniraju ove slojeve u prozoru čitača. Ovo je odličan Behavior koji može da seiskoristi u kreiranju interaktivnih igrica, i drugih interfejs kontrola. Ovo ponašanjeomogućava da korisnici vuku slojeve gore, dole, levo, desno i dijagonalno u prozoručitača. Pored ostalih stvari možete i postaviti ciljnu destinaciju za sloj i odrediti da li će setaj lejer privuću cilju (Snap to target) prema specificiranom broju piksela.

Da biste dodali ovo ponašanje na vašem Web sajtu potrebno je da:

Unesite AP div lejer u dokument. Insert>Layout Objects>AP Div Selektujte <body> Tag da biste primenili ovaj Behavior. Kliknite na + znak u Behaviors panelu i izaberite opciju Drag AP Element. Otvoriće se

Drag AP Element dijalog boks koji se sastoji od dva taba: Basic i Advanced. Basic kartica:

155

U Basic Tab -u selektujete AP element na kome ćete primeniti Behavior. Zatimodređujete da li će pomeranje biti ograničeno (kada želite da kontorlišete kretanje) ilineograničeno (kod puzli i igrica na primer). Ako izaberete Constrained tj. ograničeno,tada ćete uneti vrednosti u pikselima za parametre: gore, dole, levo i desno. Zatim ćeteuneti za levo i gore polje vrednosti u pikselima za željenu krajnju poziciju sloja, relativnou odnosu na gornji desni ugao čitača. Snap if within _ Pixels of drop target je opcionopolje, ali možete uneti vrednost u pikselima ako želite da se lejer privuče za većodređenu krajnju destinaciju kad se približi za unetu vrednost u ovo polje. Na primer, akouneste 10 px u ovo polje, i krenete da vučete lejer po stranici, kada se približite na 10 pxod krajnje pozicije, lejer će se automatski privući

U Advance tabu možete postaviti dodatne parametre i pozvati JavaScript za sloj.Advance kartica:

Postoje sledeće opcije:

156

Drag handle - Po difoltu je selektovana opcija Entire element što znači da se ceo slojponaša kao ručica za povlačenje. Ako želite da samo jedan deo sloja predstavlja ručici zapovlačenje, unesite kordinate u pikselima u polja Left, Top, Width, Height

While dragging Bring the element to front, then...Ako čekirate ovu opciju, dok povlačite sloj preko prozora čitača, možete da izaberete dali ćete ostaviti taj sloj povrh svih elemenata ili ćete vratiti Z-index.

Call Java Script - Ovde unesite ako želite JavaScript kod koji će se izvršavati dok se slojpovlači.

When dropped Call Java Script - Unsite kod za dodatni JavaScript koji će se izvršiti kadasloj dođe do ciljne pozicije ili kada se pusti

. Only if snapped - Ako je ova opcija čekirana, Java Script se izvršava jedino kada sloj

stigne do ciljne pozicije.

Kliknite na OK da biste sačuvali promene i zatvorili Drag AP Element dijalog boks.

3.Rollover Image,

U ovoj lekciji upotrebićemo posebne skriptove. Da bi napravili rolover sliku naizabranom mestu na strani pritisnite dugme Rollover Image na traci Commonpanela Insert. Otvoriće se prozor Insert Rollover Image

Daćemo smislena imena koja ukazuju na namenu slika. U imenima ne sme bitirazmaka i specijalnih karaktera.

1. Prvo ćemo uneti koja će biti original slika, koja će biti na strani pre nego štoposetilac dovede pokazivač miša iznad nje.

2. Zatim treba da unesete sliku koja će se pojaviti kada posetilac pređe pokazivaĉempreko originalne slike (dugme Browse do polja Rollover Image).

Savet: Slika koja se pojavljuje na poĉetku i ona koja je zamenjuje treba da imaju istedimenzije, inače ćedruga slika biti smanjena ili uvećana u skladu s dimenzijama prveslike i zato izobličena. Zato ove slike treba da budu jako sliĉne a opet dovoljno različiteda korisnici uoče prelaz. Možemo i odmah definisati link unoseći u polje 'When Click,Go To URL' URL adresu. Ako ne upišemo ništa u ovo polje, Dreamweaver će upisatiznak #, u polje link na panelu Properties. Taj znak saopštava browseru da pokazivaĉmiša pretvori u šaku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani

157

kada korisnik klikne na nju. Naravno moguće je i slici koja je već na strani dodatiprelaze i to pomoću panela Behaviors iz grupe panela Design (tag). Selektujemosliku kojoj želimo dodati zamenu, na panou Behaviors pritisnemo dugme saznakom (+) i izaberemo opciju Swap Image.

3. Pojaviće se prozor Swap Image gde u spisku Images treba izabrati sliku koja ćebiti zamenjena (original). Izuzetno je važno slikama dati odgovarajuća imena, usuprotnom kako ćemo između bezimenih slika izabrati onu koja nam treba?. Sadapritiskom na dugme Browse do polja Set Source to: izabraćemo sliku koja ćezameniti originalnu. Uobičajeno je (radi lakšeg snalaženja) imenu početne(originalne slike) dodati sufiks _off ili _out, a imenu slike koja zamenjujeoriginalnu sufiks _on ili _down.

4. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj jepridružen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije PreloadImage i Restore Image onMouseOut obavezno potvrdite. Opcijom Preload Imageobezbeđujemo da se slike uĉitaju bez obzira da li su prikazane na stranici i takoeliminišemo kašnjenje koje bi uzrokovalo uĉitavanje zamenske slike tek kadaposetilac pređe preko originalne. Opcijom Restore Image onMouseOutobezbeđujemo da se zamenska slika zameni poĉetnom kada se smakne pokazivaĉmiša izvan slike.

5. Pritisnite OK.

Kad selektujemo slike u panelu Behaviors vidi se spisak akcija - Actions koje izvršavaDreamweaver, u zavisnosti od određenog događaja – Events u browseru posetioca.Na primer, Swap Image je akcija, a on Mouse Over je događaj.

25.POSTAVLJANJE SAJTA NA SERVER .

158

Provera sajta na Testing serveru .

Otvorimo File Panel u programu.Na njemu vidimo sve stranice i sve fajlove koje smoizradili prilikom pravljenja sajta.Ovo je u stvari lokalna kopija ovih fajlova,i oni smeštenina našem kompjuteru.Da bi publikovali naš sajt ove kopije treba kopirati na server.

Pri tome imamo dve opcije,da ih kopiramo na Testing server I proverimo sajt,dok jedruga opcija da ih kopiramo na Remote server.

159

Potrebno je proveriti i podesiti sajt na Testing serveru pre nego što ih smestimo

Na Remote server za publikovanje na Internetu-U Dreamweaveru idemo naSite>Manage Site>Advance settings na kartici Basic podesimo lokalni server recimoNavidad,pri čemu smo izabrali lokalnu mrežu i pratili putanju u Root direktorijumudoSpring _Parka imena našeg sajta

.

160

I pritisnemo Save.Na prozoru iznad čekiramo Testing server.

Sledeći korak je prikazan na File Panelu gde pritisnemo Put file to”Testing server”.iprogram će sada kopirati fajlove:

na server.Pre toga treba selektovati ceo sajt kao na slici gore,jer možemo preneti i svakifajl pojedinačno.U našem slučaju prenećemo Site-Spring Park(C:.Po završetku transferanaTestingserveru videćemo:

:

161

Izveštaj kao na slici koji pokazuje da

su fajlovi preneti na server za testiranje.Ako otvorimo IE browser i ukucamo gornjuadresu ,otvoriće se stranica Home Welcome to Spring Park.

Provera sajta na Remote serveru .

Da bi postavili fajlove na remote server treba sada podesiti karticu Site Set Up Spring_Park.Ide se na Site>Menage site>Server>Ad server.Tu treba upisati podatke ,koje dajeweb hosting pošto predhodno kupite domen,i uplatite za hostovanje.Besplatan hostingmože se naći i na Internetu,kao što je urađeno u ovom slučaju.Sada se unose . potrebnipodaci kao što je prikazano na slici:

162

Sada su na slici gore prikazana oba servera i Testing i Remote server.Pre publikovanjasajta na Internet treba još sprovesti određene provere.Prva je check spelling.Proverumožemo vršiti za ceo sajt ili za neku stranicu.Pošto su naši sajtovi na srpkom jezikuizostavićemo ovu proveru.Druga stvar je proveriti da li je sve u redu sa linkovima.Ide sena Windows>Result>Link Checker.

Pritiskom na strelicu u levom uglu koja pozeleni kada je pritisnemo izaberemo opciju zaproveru celog sajta,program je izbacio da je na Home stranici problem sa linkom kojivodi na stranicu new_arrivals.html#Kangaroos_Wikipedia.Kada se klikne dva puta desnona link pojavi se fascikla u kojoj izaberemo pravu putanju i rešimo problem.Zatim trebaproveriti Browser Compapability ,odnosno šta će prijaviti program.Kada se sve ovoodradi predstoji publikovanje fajlova na Internet.Uđemo na File panel.

163

Da bi dobili File Panel prikazan na ovaj način u desnom gornjem uglu File Panela jedugme,koje pritisnemo i dobijemo New>Expand,panel će sada biti prikazan sa desnimsadržajem,a levo neće biti ništa.Sada se pritisne ikonica Remote server,i onda ikonicuConect Remote Server i fajlovi se prebace na server,što se može pratiti.Rezultat jeprikazan na slici.Na slici vidimo da na strani Remote servera postoje dva novafoldera.Jedan je cgi-bin a drugi webalizer.Prvi sadrži fajlove koji su bitni za rad sajta ,adrugi pruža mogućnost da administrator proveri koliko je posetilaca postilo određenisajt.Sada selektujemo naš sajt Spring_Park i pritisnemo strelicu kao na slici-

164

Posle izvesnog vremena fajlovi su prebačeni na Remote server,i sada je vreme da sepogleda kako sajt izgleda na Internetu.Ovo su izgledi stranica sa početka kursa,doknismo imali uplaćen hosting.

165

Ovako izgleda home stranica i sada treba proveriti sve linkove i rad sajta u svimpretraživačima.

Ovako izgleda druga stranica:

166

Ovako izgleda treća stranica:

Ovako izgleda četvrta stranica: